/* =========================================================
   THEME REFRESH — Modern, vibrant color pass
   Loads after style.css / smart-polish.css / layout-fixes.css
   and overrides visual treatment only (colors, shape, motion).
========================================================= */

:root {
  --tr-green: #22c55e;
  --tr-green-dark: #16a34a;
  --tr-lime: #a3e635;
  --tr-blue: #2f6fed;
  --tr-purple: #8b5cf6;
  --tr-orange: #fb923c;
  --tr-navy: #0b1220;
  --tr-ink: #0f172a;

  --tr-gradient-brand: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #0ea472 100%);
  --tr-gradient-mesh:
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, .35), transparent 42%),
    radial-gradient(circle at 85% 8%, rgba(47, 111, 237, .28), transparent 40%),
    radial-gradient(circle at 78% 85%, rgba(139, 92, 246, .22), transparent 45%);

  --tr-shadow-glow: 0 18px 40px rgba(22, 163, 74, .28);
  --tr-radius: 20px;
}


/* ---------------------------------------------------------
   CONTAINER WIDTH — the site caps every section at 1180px,
   which on normal/large monitors leaves a huge, cramped-
   looking gap on both sides. Widen it so content actually
   uses the screen.
--------------------------------------------------------- */

.container,
.section-container,
.header-container,
.header-inner,
.topbar-container,
.product-page .container,
.related-products-section .container {
  max-width: 1400px !important;
}

@media (max-width: 1500px) {
  .container,
  .section-container,
  .header-container,
  .header-inner,
  .topbar-container {
    width: calc(100% - 48px) !important;
  }
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.site-header {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
}

.desktop-nav a {
  position: relative;
  transition: color .2s ease;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--tr-gradient-brand);
  transition: right .25s ease;
}

.desktop-nav a:hover {
  color: var(--tr-green-dark) !important;
}

.desktop-nav a:hover::after {
  right: 0;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.primary-button {
  background: var(--tr-gradient-brand) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: var(--tr-shadow-glow) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(22, 163, 74, .38) !important;
}

.secondary-button {
  border-radius: 999px !important;
  border: 1.5px solid rgba(15, 23, 42, .14) !important;
  transition: transform .2s ease, border-color .2s ease, color .2s ease !important;
}

.secondary-button:hover {
  transform: translateY(-2px);
  border-color: var(--tr-green) !important;
  color: var(--tr-green-dark) !important;
}


/* ---------------------------------------------------------
   HERO — v2, ground-up rebuild
   Clean, light, colourful product-led layout. No fake
   camera-UI chrome (REC dot / timestamp / focus frame).
--------------------------------------------------------- */

.nova-hero {
  position: relative;
  background: linear-gradient(180deg, #f3faf5 0%, #eef7f9 55%, #ffffff 100%) !important;
  overflow: hidden;
  padding: 76px 0 64px !important;
}

.nova-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--tr-gradient-mesh) !important;
  opacity: 1 !important;
  pointer-events: none;
}

.nova-hero::after {
  content: none !important;
}

.nova-hero .section-container,
.nova-hero-grid {
  position: relative;
  z-index: 1;
}

.smart-hero-v2.nova-hero-grid,
.nova-hero-grid {
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.nova-hero-content .section-eyebrow {
  background: rgba(34, 197, 94, .12);
  color: var(--tr-green-dark) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .08em;
}

.nova-hero-content h1 {
  color: var(--tr-ink) !important;
  font-size: clamp(42px, 5.2vw, 68px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  margin: 18px 0 16px !important;
}

.nova-hero-content h1 span {
  background: var(--tr-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.nova-hero-description {
  color: #4b5b56 !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 520px;
}

.nova-hero-actions {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-stats {
  margin-top: 40px !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(15, 23, 42, .08) !important;
  display: flex;
  gap: 36px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-stat strong {
  background: var(--tr-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-size: 22px;
  letter-spacing: -.01em;
}

.hero-stat span {
  color: #7c8b86 !important;
  font-size: 11px;
  letter-spacing: .06em;
}

/* Image side */

.nova-hero-visual {
  position: relative;
  padding-right: clamp(0px, 4vw, 90px);
}

.hero-main-card {
  position: relative !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 32px !important;
  background: linear-gradient(160deg, #ffffff, #eef6f0) !important;
  box-shadow: 0 30px 70px rgba(15, 66, 45, .14) !important;
  padding: 22px !important;
  overflow: visible !important;
}

.hero-product-link {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border-radius: 24px;
  overflow: hidden;
}

.hero-main-card img,
#heroImageDisplay {
  width: 100% !important;
  height: 440px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff;
  border-radius: 24px;
  transition: transform .4s ease;
}

.hero-product-link:hover img {
  transform: scale(1.03);
}

/* LIVE chip — top-left */

.hero-live-chip {
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .95);
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .14);
}

.hero-live-chip .hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tr-green);
  animation: heroLivePulse 1.6s ease-in-out infinite;
}

.hero-live-chip span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--tr-ink);
}

.hero-live-chip span small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #7c8b86;
  text-transform: none;
}

/* Connectivity chip — top-right */

.hero-connectivity-chip {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .95);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 900;
  color: var(--tr-ink);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .14);
}

/* Feature panel — floats off the right edge of the card */

.hero-feature-panel {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -76px;
  transform: translateY(-50%);
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .96);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
  font-size: 12px;
  font-weight: 700;
  color: var(--tr-ink);
  line-height: 1.3;
}

.hero-feature-item i {
  font-style: normal;
  font-size: 16px;
  flex: none;
}

/* Floating price badge — bottom-left */

.hero-floating-badge {
  position: absolute !important;
  z-index: 3;
  left: 26px !important;
  bottom: -26px !important;
  right: auto !important;
  top: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  box-shadow: 0 20px 44px rgba(15, 23, 42, .16) !important;
  padding: 14px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  max-width: 280px;
}

.hero-floating-badge > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tr-green-dark) !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
}

.hero-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tr-green);
  display: inline-block;
  animation: heroLivePulse 1.6s ease-in-out infinite;
}

@keyframes heroLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, .4); }
  50% { opacity: .55; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

.hero-floating-badge strong {
  color: var(--tr-ink) !important;
  font-size: 15px;
  line-height: 1.3;
}

.hero-badge-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.hero-floating-badge small {
  color: var(--tr-green-dark) !important;
  font-weight: 900;
  font-size: 17px;
}

.hero-badge-arrow {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tr-gradient-brand);
  color: #fff !important;
  font-size: 15px;
  text-decoration: none;
  transition: transform .2s ease;
}

.hero-badge-arrow:hover {
  transform: translateX(3px);
}

/* Hand-written annotations */

.hero-annotation {
  position: absolute;
  z-index: 2;
  font-family: "Caveat", "Segoe Script", cursive;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--tr-ink);
  pointer-events: none;
}

.hero-annotation-top {
  top: -34px;
  right: 4px;
  text-align: right;
  transform: rotate(-3deg);
}

.hero-annotation-bottom {
  bottom: -6px;
  left: 4px;
  color: var(--tr-green-dark);
  transform: rotate(-2deg);
}

/* Category shortcuts strip */

.hero-category-strip {
  margin-top: 68px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.hero-category-strip button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.hero-category-strip img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .14);
  transition: transform .2s ease, box-shadow .2s ease;
  padding: 6px;
  object-fit: contain;
}

.hero-category-strip button:hover img {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(22, 163, 74, .3);
}

.hero-category-strip span {
  font-size: 12px;
  font-weight: 800;
  color: var(--tr-ink);
}

/* Slide dots */

.hero-dots-row {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-dots {
  display: flex;
  gap: 7px;
}

.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, .18);
  cursor: pointer;
  padding: 0;
  transition: all .2s ease;
}

.hero-dot.active {
  width: 20px;
  border-radius: 4px;
  background: var(--tr-gradient-brand);
}

.hero-dots-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #93a29c;
}

@media (max-width: 1180px) {
  .hero-feature-panel {
    position: static;
    transform: none;
    width: auto;
    margin-top: 18px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-feature-item {
    flex: 1 1 calc(50% - 10px);
  }

  .nova-hero-visual {
    padding-right: 0;
  }

  .hero-annotation-top {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero-stats {
    gap: 24px;
    flex-wrap: wrap;
  }

  .hero-main-card img,
  #heroImageDisplay {
    height: 320px !important;
  }

  .hero-floating-badge {
    left: 16px !important;
    bottom: -20px !important;
    max-width: calc(100% - 32px);
    min-width: 0;
  }

  .hero-category-strip {
    margin-top: 56px;
    gap: 16px;
  }

  .hero-annotation-bottom {
    display: none;
  }
}


/* ---------------------------------------------------------
   USE CASES — colour-coded by category
--------------------------------------------------------- */

.use-case-card {
  border-radius: var(--tr-radius) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.use-case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, .1) !important;
}

.use-case-card:nth-of-type(1) .use-case-kicker { color: var(--tr-purple) !important; }
.use-case-card:nth-of-type(2) .use-case-kicker { color: var(--tr-green-dark) !important; }
.use-case-card:nth-of-type(3) .use-case-kicker { color: var(--tr-orange) !important; }
.use-case-card:nth-of-type(4) .use-case-kicker { color: var(--tr-blue) !important; }

.use-case-card:nth-of-type(1):hover { border-color: var(--tr-purple) !important; }
.use-case-card:nth-of-type(2):hover { border-color: var(--tr-green) !important; }
.use-case-card:nth-of-type(3):hover { border-color: var(--tr-orange) !important; }
.use-case-card:nth-of-type(4):hover { border-color: var(--tr-blue) !important; }


/* ---------------------------------------------------------
   CATEGORY FILTER CHIPS
--------------------------------------------------------- */

.filter-chip {
  border-radius: 999px !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.filter-chip.active {
  background: var(--tr-gradient-brand) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .3) !important;
}

.filter-chip:hover {
  transform: translateY(-2px);
}


/* ---------------------------------------------------------
   PRODUCT / CATEGORY CARDS
--------------------------------------------------------- */

.category-card,
.product-card {
  border-radius: var(--tr-radius) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.category-card:hover,
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 26px 50px rgba(15, 23, 42, .12) !important;
}

.product-card-badge {
  background: var(--tr-gradient-brand) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .3);
}

.product-card-price {
  color: var(--tr-green-dark) !important;
  font-weight: 900 !important;
}


/* ---------------------------------------------------------
   SECTION HEADINGS — subtle gradient accent word
--------------------------------------------------------- */

.section-heading h2 span,
.section-eyebrow {
  color: var(--tr-green-dark) !important;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.site-footer {
  background: var(--tr-navy) !important;
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tr-gradient-brand);
}


/* ---------------------------------------------------------
   SPACING FIX — trust-strip + newsletter had a stacked
   62px + 70px gap between them (looked like a missing/blank
   section). Bring it back to a normal section rhythm.
--------------------------------------------------------- */

.trust-strip {
  padding: 22px 0 32px !important;
}

.nova-newsletter {
  margin-top: 0 !important;
}


/* ---------------------------------------------------------
   MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .primary-button,
  .secondary-button,
  .use-case-card,
  .category-card,
  .product-card,
  .filter-chip {
    will-change: transform;
  }
}