/* ============================================================
   GrowCarte — Multichannel E-Commerce Management
   Stylesheet (extracted from inline <style>, made fully
   responsive across breakpoints: ≥1400 desktop, 1024–1399
   laptop, 768–1023 tablet, 481–767 large phone, ≤480 phone)
   ============================================================ */

/* ============================================
   TOKENS
   ============================================ */
:root{
  --ink:        #040037;
  --ink-soft:   #4A4776;
  --blue:       #0077FC;
  --blue-deep:  #0058C4;
  --blue-pale:  #E7F0FE;
  --paper:      #F7F8FC;
  --paper-alt:  #FFFFFF;
  --mist:       #EEF2FB;
  --line:       #DEE4F5;
  --lift:       #12995A;
  --lift-pale:  #E4F6EC;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --max: 1160px;
  --radius: 14px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(4,0,55,0.06);
  --shadow-md: 0 12px 32px -12px rgba(4,0,55,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(4,0,55,0.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}

img, svg{ max-width:100%; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  line-height:1.15;
  letter-spacing:-0.01em;
}

p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ display:block; }
button{ font-family:inherit; cursor:pointer; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:2.5px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
  width:100%;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-deep);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:16px;
  height:2px;
  background:var(--blue);
  display:inline-block;
  flex:none;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:100px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  border:1.5px solid transparent;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(0,119,252,0.55);
}
.btn-primary:hover{ background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(0,119,252,0.6); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px); }

/* ============================================
   REVEAL ON SCROLL
   ============================================ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *{ transition-delay:calc(var(--i) * 90ms); }

/* ============================================
   HEADER
   ============================================ */
header.site-header{
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
  width:100%;
  isolation:isolate;
}
/* The blur lives on a ::before layer instead of directly on the header.
   backdrop-filter on the header itself creates a new CSS containing
   block for position:fixed descendants on most mobile browsers, which
   was trapping the full-screen mobile nav inside the header's own
   (tiny) box instead of letting it cover the viewport. Painting the
   blur behind the header's content sidesteps that entirely. */
header.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
header.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:78px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:none;
}
.brand img{
  height:154px;
  width:auto;
  object-fit:contain;
}
.brand-fallback-text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink);
}

nav.main-nav{ display:flex; align-items:center; gap:6px; }
nav.main-nav a.nav-link{
  padding:10px 14px;
  border-radius:100px;
  font-size:0.93rem;
  font-weight:500;
  color:var(--ink-soft);
  transition:background .18s ease, color .18s ease;
  white-space:nowrap;
}
nav.main-nav a.nav-link:hover{ background:var(--mist); color:var(--ink); }

/* ============================================
   SERVICES DROPDOWN (header nav)
   ============================================ */
.nav-dropdown{ position:relative; }
.nav-dropdown > .nav-link{ display:inline-flex; align-items:center; gap:5px; }
.nav-dropdown .caret{ font-size:0.6rem; transition:transform 200ms ease; }
.nav-dropdown-menu{
  position:absolute; top:100%; left:0; padding-top:8px; min-width:230px; z-index:110;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
}
.nav-dropdown-menu-inner{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:8px; display:flex; flex-direction:column; gap:2px;
}
.nav-dropdown-menu a{ padding:10px 12px; border-radius:8px; font-size:0.9rem; font-weight:500; color:var(--ink-soft); transition:background .18s ease, color .18s ease; }
.nav-dropdown-menu a:hover{ background:var(--mist); color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-dropdown:hover .caret{ transform:rotate(180deg); }
}
.nav-dropdown.is-open .nav-dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav-dropdown.is-open .caret{ transform:rotate(180deg); }

.header-actions{ display:flex; align-items:center; gap:10px; flex:none; }

.nav-cta{ display:none; }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:#fff;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  flex:none;
}
.nav-toggle span{
  display:block;
  width:18px; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  min-height:calc(100vh - 78px);
  display:grid;
  align-items:center;
  padding:clamp(16px, 4vh, 56px) 0 clamp(12px, 3vh, 32px);
  box-sizing:border-box;
  overflow:hidden;
  width:100%;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(24px, 4vh, 56px);
  align-items:center;
  width:100%;
}
.hero h1{
  font-size:clamp(1.7rem, 2.6vw + 1.6vh, 3.4rem);
  line-height:1.14;
  margin-top:clamp(8px, 1.6vh, 18px);
  max-width:620px;
}
.hero h1 .accent{ color:var(--blue); }
.hero-sub{
  margin-top:clamp(8px, 1.6vh, 20px);
  font-size:clamp(0.92rem, 0.5vw + 0.6vh, 1.06rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:540px;
}

.hero-cta-form{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  width:100%;
  gap:10px;
  margin-top:clamp(14px, 2.4vh, 32px);
  max-width:480px;
}
.hero-cta-form input[type="email"]{
  flex:1 1 auto;
  min-width:0;
  padding:14px 18px;
  border-radius:100px;
  border:1.5px solid var(--line);
  background:#fff;
  font-family:var(--font-body);
  font-size:0.95rem;
  color:var(--ink);
  transition:border-color .18s ease;
  width:100%;
}
.hero-cta-form input[type="email"]:focus{
  border-color:var(--blue);
  outline:none;
}
.hero-cta-form .btn{ flex:none; margin-left:auto; }
.hero-cta-secondary{
  margin-top:clamp(8px, 1.4vh, 14px);
}
.hero-cta-secondary a{
  font-size:0.9rem;
  font-weight:600;
  color:var(--ink-soft);
  border-bottom:1.5px solid var(--line);
  padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
.hero-cta-secondary a:hover{
  color:var(--blue-deep);
  border-color:var(--blue);
}

.hero-trust{
  margin-top:26px;
  font-size:0.86rem;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
}
.hero-trust .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--lift);
  flex:none;
}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(12px, 2vw, 18px);
  min-width:0;
}
.metric-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 14px 16px;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
  min-width:0;
}
.metric-card-label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.metric-card img{
  width:100%;
  border-radius:10px;
  display:block;
  border:1px solid var(--line);
}
.metric-card--2{ margin-top:22px; }
.metric-card--4{ margin-top:-22px; }

.metric-card--stat{
  justify-content:center;
  background:var(--ink);
  border-color:transparent;
  color:#fff;
}
.metric-card--stat .metric-card-label{ color:rgba(255,255,255,0.55); }
.metric-card--stat .metric-stat-value{
  font-family:var(--font-mono);
  font-size:clamp(1.3rem, 4vw, 1.9rem);
  font-weight:700;
}
.metric-card--stat .metric-stat-value .up{
  font-size:0.85rem;
  color:#39D98A;
  margin-left:6px;
  font-weight:600;
  display:inline-block;
}

.hero-copy.reveal{
  transform:translateX(-28px);
}
.hero-copy.reveal.is-visible{
  transform:translateX(0);
}
.hero-metrics.reveal{
  transform:translateY(18px) scale(0.97);
}
.hero-metrics.reveal.is-visible{
  transform:translateY(0) scale(1);
}
.hero-metrics.reveal .metric-card{
  transition:opacity .5s ease, transform .5s ease;
}
.hero-metrics.reveal:not(.is-visible) .metric-card{
  opacity:0;
  transform:translateY(14px);
}
.hero-metrics.reveal.is-visible .metric-card:nth-child(1){ transition-delay:.05s; }
.hero-metrics.reveal.is-visible .metric-card:nth-child(2){ transition-delay:.15s; }
.hero-metrics.reveal.is-visible .metric-card:nth-child(3){ transition-delay:.25s; }
.hero-metrics.reveal.is-visible .metric-card:nth-child(4){ transition-delay:.35s; }

.step-divider{
  display:block;
  width:100%;
  height:28px;
  margin:0 auto;
}
.step-divider path{ stroke:var(--line); stroke-width:2; fill:none; }

/* ============================================
   LOGO SLIDER (channels we operate on)
   ============================================ */
.logo-slider-section{
  background:var(--mist);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:40px 0;
  width:100%;
}
.logo-slider-head{
  margin-bottom:22px;
}
.logo-slider-head span.eyebrow{ margin-bottom:0; }
.logo-slider-head h2{
  font-size:1.1rem;
  margin-top:8px;
  color:var(--ink-soft);
  font-weight:600;
}

.logo-slider{
  position:relative;
}

/* Masked viewport + a track running a constant-velocity CSS
   @keyframes animation is what gives this the buttery, seamless
   embla-autoscroll feel — the browser compositor drives the motion
   instead of a JS rAF loop, so it never stutters. The mask is a wide
   soft gradient so each logo visibly fades out as it nears the edge,
   rather than getting cut off hard. */
.logo-slider-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}

.logo-track{
  display:flex;
  align-items:center;
  width:max-content;
  /* JS clones the logo set as many times as needed to always outrun
     the viewport (no more running out of logos on wide screens), and
     sets --logo-set-width to the pixel width of ONE set. The loop
     moves by exactly that many pixels — not a fixed percentage — so
     it stays seamless and gap-free no matter how many clones exist.
     --logo-scroll-duration keeps the speed (px/sec) constant too. */
  animation:logo-marquee-scroll var(--logo-scroll-duration, 26s) linear infinite;
}
.logo-slider.is-paused .logo-track,
.logo-slider:hover .logo-track{
  animation-play-state:paused;
}
@keyframes logo-marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-1 * var(--logo-set-width, 0px))); }
}
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation:none; }
}

.logo-track .logo-set{
  display:flex;
  align-items:center;
  flex:none;
}
.logo-slide{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:160px;
  padding:0 32px;
}
.logo-slide img{
  max-height:34px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

@media (max-width:720px){
  .logo-slide{ width:120px; padding:0 22px; }
  .logo-slide img{ max-height:26px; }
  .logo-slider-viewport{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  }
}

/* ============================================
   GROWTH METRICS (redesigned stats section)
   ============================================ */
.growth-metrics-section{
  padding:64px 0 72px;
}
.growth-metrics-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}

.growth-metrics-section .metric-tile{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--tile-accent, var(--blue));
  border-radius:var(--radius);
  padding:26px 26px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.growth-metrics-section .metric-tile:hover{
  transform:translateY(-5px) scale(1.01);
  box-shadow:var(--shadow-md);
}

.growth-metrics-section .metric-tile--channels{ --tile-accent: var(--blue); --tile-icon-bg: var(--blue-pale); }
.growth-metrics-section .metric-tile--speed{ --tile-accent: var(--blue-deep); --tile-icon-bg: var(--blue-pale); }
.growth-metrics-section .metric-tile--lift{ --tile-accent: var(--lift); --tile-icon-bg: var(--lift-pale); }
.growth-metrics-section .metric-tile--cadence{ --tile-accent: var(--ink); --tile-icon-bg: var(--mist); }

.growth-metrics-section .metric-tile-icon{
  width:44px; height:44px;
  border-radius:12px;
  background:var(--tile-icon-bg, var(--blue-pale));
  display:flex;
  align-items:center;
  justify-content:center;
}
.growth-metrics-section .metric-tile-icon svg{
  width:22px; height:22px;
  stroke:var(--tile-accent, var(--blue));
}

.growth-metrics-section .metric-tile-headline{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.growth-metrics-section .metric-tile-value{
  font-family:var(--font-mono);
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight:700;
  color:var(--tile-accent, var(--ink));
  line-height:1;
}
.growth-metrics-section .metric-tile-unit{
  font-size:0.98rem;
  font-weight:600;
  color:var(--ink);
}
.growth-metrics-section .metric-tile-copy{
  font-size:0.9rem;
  line-height:1.55;
  color:var(--ink-soft);
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section{ padding:88px 0; width:100%; }
.section-alt{ background:var(--paper-alt); }
.section-head{
  max-width:640px;
  margin-bottom:48px;
}
.section-head h2{
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  margin-top:14px;
}
.section-head p{
  margin-top:14px;
  color:var(--ink-soft);
  font-size:1.02rem;
}

/* ============================================
   SERVICES
   ============================================ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.service-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  min-width:0;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:transparent;
}
.service-icon{
  width:44px; height:44px;
  border-radius:12px;
  background:var(--blue-pale);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}
.service-icon svg{ width:22px; height:22px; }
.service-card h3{ font-size:1.08rem; }
.service-card p{
  margin-top:8px;
  font-size:0.92rem;
  color:var(--ink-soft);
}

/* ============================================
   PROCESS
   ============================================ */
.process-list{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  position:relative;
}
.process-step{
  position:relative;
  padding:0 20px 0 0;
}
.process-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:19px;
  right:0;
  width:20px;
  height:1px;
  background:var(--line);
}
.process-num{
  font-family:var(--font-mono);
  font-size:0.85rem;
  font-weight:600;
  color:#fff;
  background:var(--ink);
  width:38px; height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
}
.process-step h3{ font-size:1.05rem; }
.process-step p{
  margin-top:8px;
  font-size:0.9rem;
  color:var(--ink-soft);
}

.process-callout{
  margin-top:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:var(--paper-alt);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 32px;
  flex-wrap:wrap;
}
.process-callout-text{ max-width:640px; }
.process-callout-text p{
  margin-top:10px;
  font-size:0.96rem;
  color:var(--ink-soft);
}
.process-callout .btn{ flex:none; }

/* ============================================
   PROCESS SECTION — interactive engagement-flow timeline
   ============================================ */
.ef-process{ position:relative; }

.ef-track{ position:relative; margin-bottom:44px; }
.ef-track-line{
  position:absolute;
  top:19px; left:19px; right:19px;
  height:2px;
  background:var(--line);
  z-index:0;
}
.ef-track-fill{
  position:absolute;
  top:0; left:0;
  height:100%;
  width:0%;
  background:var(--blue);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.ef-nodes{
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:1;
}
.ef-node{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:inherit;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:calc(var(--i) * 90ms);
}
.ef-process.is-visible .ef-node{ opacity:1; transform:translateY(0); }
.ef-node-dot{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-family:var(--font-mono);
  font-size:0.85rem;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ef-node.is-active .ef-node-dot{
  background:var(--blue);
  transform:scale(1.1);
  box-shadow:0 0 0 6px var(--blue-pale);
}
.ef-node-label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .25s ease;
}
.ef-node.is-active .ef-node-label{ color:var(--ink); }

.ef-cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.ef-card{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper-alt);
  padding:20px;
  cursor:pointer;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  transition-delay:calc(var(--i) * 90ms);
  min-width:0;
}
.ef-process.is-visible .ef-card{ opacity:1; transform:translateY(0); }
.ef-card.is-active{
  border-color:var(--blue);
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}
.ef-card h3{ font-size:1.02rem; }
.ef-card p{
  margin-top:8px;
  font-size:0.88rem;
  color:var(--ink-soft);
}
.ef-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:14px;
}
.ef-card-tag{
  font-family:var(--font-mono);
  font-size:0.66rem;
  font-weight:600;
  letter-spacing:0.03em;
  padding:4px 9px;
  border-radius:100px;
  background:var(--blue-pale);
  color:var(--blue-deep);
}
@media (max-width: 900px){
  .ef-cards{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 860px){
  .ef-track-line{ display:none; }
  .ef-nodes{ display:none; }
}
@media (max-width: 560px){
  .ef-cards{ grid-template-columns:1fr; }
}

/* ============================================
   CASE STUDIES
   ============================================ */
.case-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.case-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.case-tag{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--blue-deep);
  background:var(--blue-pale);
  display:inline-flex;
  padding:5px 10px;
  border-radius:100px;
  width:fit-content;
}
.case-card h3{ font-size:1.05rem; }
.case-card p.case-body{ font-size:0.92rem; color:var(--ink-soft); }
.case-result{
  margin-top:auto;
  display:flex;
  align-items:baseline;
  gap:8px;
  padding-top:14px;
  border-top:1px dashed var(--line);
  flex-wrap:wrap;
}
.case-result .num{
  font-family:var(--font-mono);
  font-weight:600;
  color:var(--lift);
  font-size:1.1rem;
}
.case-result .txt{ font-size:0.82rem; color:var(--ink-soft); }

/* ============================================================
   TESTIMONIAL SLIDER
   ============================================================ */
.testimonial-section .testimonial-slider{
  position:relative;
  margin-top:8px;
}

.testimonial-section .testimonial-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 4px 10px;
  margin:0 -4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.testimonial-section .testimonial-track::-webkit-scrollbar{ display:none; }

.testimonial-section .testimonial-card{
  flex:0 0 100%;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease, transform .22s ease;
  min-width:0;
}
.testimonial-section .testimonial-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}

.testimonial-section .testimonial-top{
  display:flex;
  align-items:center;
  gap:12px;
}
.testimonial-section .testimonial-avatar{
  flex:none;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--blue-pale);
  color:var(--blue-deep);
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.testimonial-section .testimonial-who{ min-width:0; }
.testimonial-section .testimonial-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.98rem;
  color:var(--ink);
}
.testimonial-section .testimonial-role{
  margin-top:2px;
  font-size:0.82rem;
  color:var(--ink-soft);
}

.testimonial-section .testimonial-stars{
  display:flex;
  gap:3px;
}
.testimonial-section .testimonial-stars svg{
  width:15px; height:15px;
  fill:#F5A623;
}

.testimonial-section .testimonial-quote{
  font-size:0.95rem;
  line-height:1.6;
  color:var(--ink-soft);
}

.testimonial-section .testimonial-bottom{
  margin-top:auto;
  padding-top:4px;
}

.testimonial-section .marketplace-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:100px;
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.02em;
}
.testimonial-section .marketplace-badge::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:currentColor;
  flex:none;
}
.testimonial-section .marketplace-amazon{ background:#FFF4E5; color:#B36B00; }
.testimonial-section .marketplace-shopify{ background:#E4F6EC; color:#0F7A3D; }
.testimonial-section .marketplace-ebay{ background:#EEF0FF; color:#3B4FCC; }
.testimonial-section .marketplace-tiktok{ background:#FDEAF1; color:#D6255F; }
.testimonial-section .marketplace-walmart{ background:#E7F0FE; color:#0058C4; }
.testimonial-section .marketplace-etsy{ background:#FDEFE6; color:#D8570F; }

.testimonial-section .testimonial-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:42px; height:42px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.testimonial-section .testimonial-arrow:hover{
  border-color:var(--blue);
  color:var(--blue-deep);
  box-shadow:var(--shadow-md);
}
.testimonial-section .testimonial-arrow svg{ width:17px; height:17px; }
.testimonial-section .testimonial-arrow.prev{ left:-8px; }
.testimonial-section .testimonial-arrow.next{ right:-8px; }

.testimonial-section .testimonial-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:22px;
}
.testimonial-section .testimonial-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--line);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.testimonial-section .testimonial-dot.is-active{
  background:var(--blue);
  transform:scale(1.25);
}

@media (min-width:721px){
  .testimonial-section .testimonial-card{ flex-basis:calc(50% - 10px); }
}
@media (min-width:1080px){
  .testimonial-section .testimonial-card{ flex-basis:calc(33.333% - 14px); }
}
@media (max-width:720px){
  .testimonial-section .testimonial-arrow{ display:none; }
}

/* ============================================
   FAQ
   ============================================ */
.faq-list{ max-width:760px; }
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{
  width:100%;
  background:none;
  border:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  text-align:left;
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:600;
  color:var(--ink);
}
.faq-q .plus{
  flex:none;
  width:24px; height:24px;
  position:relative;
}
.faq-q .plus::before,
.faq-q .plus::after{
  content:"";
  position:absolute;
  background:var(--ink);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .25s ease;
}
.faq-q .plus::before{ width:14px; height:2px; }
.faq-q .plus::after{ width:2px; height:14px; }
.faq-item.is-open .faq-q .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
}
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a p{
  padding:0 4px 22px;
  font-size:0.94rem;
  color:var(--ink-soft);
  max-width:64ch;
}


/* faq image */
/* FAQ layout with image on right */
/* ============================================
   FAQ — Layout & Image
   ============================================ */

/* ============================================
   FAQ — Layout
   ============================================ */

.faq-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 550px;
  gap: 40px;
  align-items: center;
}

/* Keep the heading area compact */
#faq .section-head {
  margin-bottom: 48px;
}

/* Right-side image container */
#faq .faq-content > .faq-image {
  width: 550px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 50px;
  box-sizing: border-box;
}

/* Actual image — stays exactly 500px */
#faq .faq-content > .faq-image > img.faq-image {
  display: block;
  width: 500px;
  max-width: none;
  height: auto;

  transition: transform 0.8s ease;
  will-change: transform;
}

/* Smooth slight upward movement */
#faq .faq-content > .faq-image > img.faq-image:hover {
  transform: translateY(-10px);
}


/* ============================================
   FAQ — Responsive
   ============================================ */

@media (max-width: 1200px) {
  .faq-content {
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 25px;
  }

  #faq .faq-content > .faq-image {
    width: 520px;
    padding-right: 20px;
  }
}

@media (max-width: 1000px) {
  .faq-content {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  #faq .faq-content > .faq-image {
    width: 100%;
    padding-right: 0;
    justify-content: center;
  }

  #faq .faq-content > .faq-image > img.faq-image {
    width: 500px;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  #faq .section-head {
    margin-bottom: 36px;
  }

  .faq-content {
    gap: 40px;
  }

  #faq .faq-content > .faq-image > img.faq-image {
    width: 100%;
    max-width: 500px;
  }

  #faq .faq-content > .faq-image > img.faq-image:hover {
    transform: translateY(-6px);
  }
}



/* ============================================
   CONTACT
   ============================================ */
.contact-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:48px;
  align-items:start;
}
.contact-info h2{ font-size:clamp(1.6rem, 2.8vw, 2.1rem); }
.contact-info p{ margin-top:14px; color:var(--ink-soft); font-size:1rem; max-width:40ch; }
.contact-detail{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-detail-row{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.94rem;
}
.contact-detail-row .ico{
  width:34px; height:34px;
  border-radius:9px;
  background:var(--blue-pale);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.contact-detail-row .ico svg{ width:16px; height:16px; }

.contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow-sm);
  min-width:0;
}
.form-row{ margin-bottom:18px; }
.form-row label{
  display:block;
  font-size:0.82rem;
  font-weight:600;
  margin-bottom:7px;
  color:var(--ink);
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:0.94rem;
  color:var(--ink);
  background:var(--paper);
  transition:border-color .18s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  border-color:var(--blue);
  outline:none;
}
.form-row textarea{ resize:vertical; min-height:96px; }
.form-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-submit{ width:100%; margin-top:4px; }
.form-note{
  margin-top:14px;
  font-size:0.78rem;
  color:var(--ink-soft);
  text-align:center;
}
.form-success{
  display:none;
  align-items:flex-start;
  gap:12px;
  background:var(--lift-pale);
  border:1px solid rgba(18,153,90,0.25);
  border-radius:var(--radius-sm);
  padding:16px;
  margin-top:16px;
}
.form-success.is-visible{ display:flex; }
.form-success p{ font-size:0.9rem; color:#0B6B3F; }
.form-success strong{ display:block; margin-bottom:2px; }

/* ============================================
   FOOTER
   ============================================ */
footer.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,0.72);
  padding:64px 0 28px;
  width:100%;
}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:30px; }
.footer-brand span{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.02rem; }
.footer-col p.foot-desc{ font-size:0.88rem; max-width:32ch; color:rgba(255,255,255,0.55); }
.footer-col h4{
  color:#fff;
  font-size:0.82rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-family:var(--font-mono);
  font-weight:600;
  margin-bottom:16px;
}
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul a{
  font-size:0.9rem;
  color:rgba(255,255,255,0.72);
  transition:color .18s ease;
}
.footer-col ul a:hover{ color:#fff; }
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:24px;
  font-size:0.82rem;
  color:rgba(255,255,255,0.5);
  flex-wrap:wrap;
  gap:12px;
}
.footer-legal{ display:flex; gap:20px; }

/* ============================================================
   REVENUE CHART SECTION
   ============================================================ */
.revenue-chart-section{
  --rc-bg-1: #050b2e;
  --rc-bg-2: #071c4d;
  --rc-bg-3: #0a2d6b;
  --rc-line-blue: #2e8fff;
  --rc-line-blue-bright: #5cabff;
  --rc-dot-ring: #0d1b4a;
  --rc-grid-line: rgba(255,255,255,0.06);
  --rc-text-dim: #7f8bbd;
  --rc-text-mid: #a9b3da;
  --rc-text-bright: #ffffff;
  --rc-up-green: #2fe08c;
  --rc-down-red: #ff6470;
  --rc-radius-card: 22px;
  --rc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* This section is deliberately compact at every breakpoint — the
   whole card (toggles, chart, callouts, comparison grid) is sized
   to fit within a single viewport with no internal scrolling,
   scaling proportionally from desktop down to phone rather than
   only tightening below 720px. */
#revenue-chart.section{ padding:44px 0; }
#revenue-chart .section-head{ margin-bottom:20px; }
#revenue-chart .section-head p{ margin-top:8px; font-size:0.94rem; }

.revenue-chart-section .chart-card{
  width:100%;
  max-width:840px;
  margin:0 auto;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--rc-bg-3) 0%, var(--rc-bg-2) 45%, var(--rc-bg-1) 100%);
  border-radius:18px;
  padding:20px 22px 18px;
  box-shadow: 0 30px 70px -25px rgba(5,11,46,0.55);
  color:var(--rc-text-bright);
  min-width:0;
}
.revenue-chart-section .chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.revenue-chart-section .chart-title{
  font-family:var(--rc-font-mono);
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--rc-text-dim);
}
.revenue-chart-section .chart-summary{
  display:flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
}
.revenue-chart-section .chart-summary .summary-pct{
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:-0.01em;
  transition: color 0.25s ease;
}
.revenue-chart-section .chart-summary .summary-trend{
  font-family:var(--rc-font-mono);
  font-size:0.78rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:4px;
  transition: color 0.25s ease;
}
.revenue-chart-section .summary-pct.is-up,
.revenue-chart-section .summary-trend.is-up{ color:var(--rc-up-green); }
.revenue-chart-section .summary-pct.is-down,
.revenue-chart-section .summary-trend.is-down{ color:var(--rc-down-red); }
.revenue-chart-section .trend-arrow{ display:inline-block; transition: transform 0.25s ease; }
.revenue-chart-section .trend-arrow.is-down{ transform:rotate(180deg); }

.revenue-chart-section .chart-caption{
  margin-top:8px;
  font-size:0.8rem;
  line-height:1.45;
  color:var(--rc-text-mid);
  max-width:640px;
}
.revenue-chart-section .chart-caption .caption-sub{
  display:block;
  margin-top:2px;
  font-size:0.72rem;
  color:var(--rc-text-dim);
}

.revenue-chart-section .graph-wrap{
  position:relative;
  margin-top:12px;
  width:100%;
  aspect-ratio: 16 / 4.6;
  touch-action:none;
}
.revenue-chart-section .graph-wrap svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.revenue-chart-section .grid-line{
  stroke:var(--rc-grid-line);
  stroke-width:1;
}
.revenue-chart-section .area-fill{
  transition: d 0.25s ease;
}
.revenue-chart-section .revenue-line{
  fill:none;
  stroke:var(--rc-line-blue);
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#lineGlow);
  transition: d 0.25s ease;
}
.revenue-chart-section .point{ cursor:default; }
.revenue-chart-section .marker-line{
  stroke:rgba(255,255,255,0.22);
  stroke-width:1;
  stroke-dasharray:4 4;
}
.revenue-chart-section .point-ring{
  fill:var(--rc-dot-ring);
  stroke:var(--rc-line-blue-bright);
  stroke-width:2.5;
  r:6;
  transition: cx 0.3s ease, cy 0.3s ease, stroke 0.25s ease;
}
.revenue-chart-section .point-core{
  fill:var(--rc-line-blue-bright);
  transition: cx 0.3s ease, cy 0.3s ease, fill 0.25s ease;
}
.revenue-chart-section .point-value{
  font-family:var(--rc-font-mono);
  font-size:11.5px;
  font-weight:700;
  fill:var(--rc-text-bright);
  text-anchor:middle;
  transition: x 0.3s ease, y 0.3s ease;
}
.revenue-chart-section .axis-label{
  font-family:var(--rc-font-mono);
  font-size:11.5px;
  fill:var(--rc-text-mid);
}
.revenue-chart-section .y-tick-label{
  font-family:var(--rc-font-mono);
  font-size:10.5px;
  fill:var(--rc-text-dim);
}
.revenue-chart-section .axis-title{
  font-family:var(--rc-font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  fill:var(--rc-text-mid);
}

.revenue-chart-section .chart-tooltip{
  pointer-events:none;
  opacity:0;
  transition:opacity 0.12s ease;
}
.revenue-chart-section .chart-tooltip.is-visible{ opacity:1; }
.revenue-chart-section .tooltip-bg{
  fill:#0a1740;
  stroke:rgba(255,255,255,0.14);
  stroke-width:1;
}
.revenue-chart-section .tooltip-line1{
  font-family:var(--rc-font-mono);
  font-size:11.5px;
  font-weight:700;
  fill:var(--rc-text-bright);
}
.revenue-chart-section .tooltip-line2{
  font-family:var(--rc-font-mono);
  font-size:10.5px;
  fill:var(--rc-text-mid);
}

.investment-simulator-section .marketplace-toggles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.investment-simulator-section .marketplace-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px 6px 8px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--rc-text-mid);
  font-family:inherit;
  font-size:0.76rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.investment-simulator-section .marketplace-toggle img{
  width:16px;
  height:16px;
  border-radius:5px;
  object-fit:contain;
  flex:none;
  background:#fff;
}
.investment-simulator-section .marketplace-toggle:hover{
  border-color:rgba(255,255,255,0.28);
  color:var(--rc-text-bright);
}
.investment-simulator-section .marketplace-toggle.active{
  background:rgba(46,143,255,0.16);
  border-color:var(--rc-line-blue-bright);
  color:var(--rc-text-bright);
  box-shadow:0 0 0 3px rgba(46,143,255,0.14);
}

.investment-simulator-section .investment-control{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.investment-simulator-section .investment-control label{
  font-family:var(--rc-font-mono);
  font-size:0.66rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rc-text-dim);
  flex:none;
}
.investment-simulator-section .investment-amount-field{
  display:flex;
  align-items:center;
  gap:4px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;
  padding:6px 10px;
  flex:none;
  max-width:100%;
}
.investment-simulator-section .investment-amount-field span{
  color:var(--rc-text-dim);
  font-weight:700;
}
.investment-simulator-section .investment-amount-field input[type="number"]{
  width:100px;
  max-width:32vw;
  background:none;
  border:none;
  color:var(--rc-text-bright);
  font-family:var(--rc-font-mono);
  font-size:0.88rem;
  font-weight:700;
  outline:none;
}
.investment-simulator-section input[type="range"]{
  flex:1 1 200px;
  min-width:140px;
  accent-color:var(--rc-line-blue-bright);
  background:transparent;
}

.investment-simulator-section .projection-callouts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.investment-simulator-section .projection-callout{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:11px;
  padding:10px 12px;
  min-width:0;
}
.investment-simulator-section .projection-callout .callout-label{
  font-family:var(--rc-font-mono);
  font-size:0.64rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--rc-text-dim);
}
.investment-simulator-section .projection-callout .callout-value{
  margin-top:4px;
  font-size:clamp(1.05rem, 3vw, 1.28rem);
  font-weight:800;
  color:var(--rc-text-bright);
}

.investment-simulator-section .comparison-panel{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.investment-simulator-section .comparison-title{
  font-family:var(--rc-font-mono);
  font-size:0.66rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rc-text-dim);
  margin-bottom:10px;
}
.investment-simulator-section .comparison-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.investment-simulator-section .comparison-card{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.09);
  background:rgba(255,255,255,0.03);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease, border-color .2s ease, background .2s ease;
  transition-delay:calc(var(--i) * 70ms);
  min-width:0;
  cursor:pointer;
}
.investment-simulator-section.is-visible .comparison-card{ opacity:1; transform:translateY(0); }
.investment-simulator-section .comparison-card.is-active{
  border-color:var(--rc-line-blue-bright);
  background:rgba(46,143,255,0.1);
}
.investment-simulator-section .comparison-card img{
  width:20px;
  height:20px;
  border-radius:6px;
  object-fit:contain;
  flex:none;
  background:#fff;
}
.investment-simulator-section .comparison-card-body{ min-width:0; }
.investment-simulator-section .comparison-card-name{
  font-size:0.82rem;
  font-weight:700;
  color:var(--rc-text-bright);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.investment-simulator-section .comparison-card-values{
  display:flex;
  gap:9px;
  margin-top:2px;
  font-family:var(--rc-font-mono);
  font-size:0.72rem;
  color:var(--rc-text-mid);
  flex-wrap:wrap;
}
.investment-simulator-section .comparison-card-values b{ color:var(--rc-up-green); font-weight:700; }

.investment-simulator-section .hint{
  margin-top:10px;
  font-size:0.72rem;
  color:var(--rc-text-dim);
}

/* Both breakpoints below tighten further than the desktop base
   above — mobile viewports are shorter, so the whole card (toggles,
   graph, callouts, comparison grid) still has to clear a much
   smaller vertical budget. Both grids stay 2-up rather than
   collapsing to 1 column, since stacking them vertically would cost
   far more height than it saves in width. */
@media (max-width: 720px){
  #revenue-chart.section{ padding:28px 0; }
  #revenue-chart .section-head{ margin-bottom:16px; }
  #revenue-chart .section-head p{ font-size:0.88rem; }
  .revenue-chart-section .chart-card{ padding:16px 14px 14px; border-radius:14px; }
  .revenue-chart-section .chart-head{ gap:6px; }
  .revenue-chart-section .chart-title{ font-size:0.6rem; }
  .revenue-chart-section .chart-summary .summary-pct{ font-size:1.05rem; }
  .revenue-chart-section .chart-caption{ font-size:0.76rem; margin-top:6px; }
  .revenue-chart-section .chart-caption .caption-sub{ font-size:0.68rem; }

  .revenue-chart-section .graph-wrap{ aspect-ratio:16 / 4.2; margin-top:10px; }

  .investment-simulator-section .marketplace-toggles{ gap:6px; margin-top:10px; }
  .investment-simulator-section .marketplace-toggle{ padding:6px 10px 6px 7px; font-size:0.72rem; gap:5px; }
  .investment-simulator-section .marketplace-toggle img{ width:14px; height:14px; }

  .investment-simulator-section .investment-control{ margin-top:12px; padding-top:10px; gap:8px 12px; }

  .investment-simulator-section .projection-callouts{ grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
  .investment-simulator-section .projection-callout{ padding:9px 11px; border-radius:9px; }
  .investment-simulator-section .projection-callout .callout-label{ font-size:0.56rem; }
  .investment-simulator-section .projection-callout .callout-value{ font-size:0.95rem; margin-top:2px; }

  .investment-simulator-section .comparison-panel{ margin-top:12px; padding-top:10px; }
  .investment-simulator-section .comparison-title{ font-size:0.58rem; margin-bottom:7px; }
  .investment-simulator-section .comparison-grid{ grid-template-columns:repeat(2, 1fr); gap:6px; }
  .investment-simulator-section .comparison-card{ padding:7px 8px; gap:6px; border-radius:8px; }
  .investment-simulator-section .comparison-card img{ width:15px; height:15px; }
  .investment-simulator-section .comparison-card-name{ font-size:0.68rem; }
  .investment-simulator-section .comparison-card-values{ font-size:0.58rem; gap:5px; margin-top:1px; }

  .investment-simulator-section .hint{ font-size:0.62rem; margin-top:7px; }
}

@media (max-width: 460px){
  #revenue-chart.section{ padding:22px 0; }
  #revenue-chart .section-head{ margin-bottom:12px; }
  .revenue-chart-section .chart-card{ padding:14px 12px 12px; }
  .revenue-chart-section .chart-head{ gap:5px; }
  .revenue-chart-section .graph-wrap{ aspect-ratio:16 / 3.6; margin-top:9px; }

  .investment-simulator-section .investment-control{ flex-direction:column; align-items:stretch; margin-top:10px; padding-top:9px; gap:6px; }
  .investment-simulator-section .investment-control label{ margin-bottom:-2px; }
  .investment-simulator-section .investment-amount-field input[type="number"]{ max-width:none; width:100%; }

  .investment-simulator-section .marketplace-toggle{ padding:5px 9px 5px 6px; font-size:0.68rem; }
  .investment-simulator-section .marketplace-toggle span{ white-space:nowrap; }

  .investment-simulator-section .projection-callout .callout-value{ font-size:0.88rem; }
  .investment-simulator-section .comparison-card-values{ flex-direction:column; gap:0; }
}

/* ============================================================
   PROBLEM / AGITATION SECTION
   ============================================================ */
.pa-section{ background:#0B1220; padding:120px 24px; width:100%; }
.pa-wrap{ max-width:1200px; margin:0 auto; text-align:center; }
.pa-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:100px;
  background:rgba(46,143,255,0.14); color:#5EB1FF;
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  margin-bottom:24px;
}
.pa-badge-dot{ width:7px; height:7px; border-radius:50%; background:#2E8FFF; flex:none; }
.pa-heading{
  font-family:'Poppins','Segoe UI',sans-serif;
  font-weight:700; letter-spacing:-0.02em; line-height:1.1;
  font-size:clamp(28px, 5vw, 60px);
  color:#fff; margin:0 0 24px;
}
.pa-heading .pa-dim{ color:#8891A8; display:block; }
.pa-sub{
  max-width:640px; margin:0 auto 64px;
  color:#9BA4B8; font-size:1.05rem; line-height:1.65;
}
.pa-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  text-align:left; margin-bottom:56px;
}
.pa-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px; padding:32px;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
  transition-delay:calc(var(--i) * 120ms);
  min-width:0;
}
.pa-grid.is-visible .pa-card{ opacity:1 !important; transform:translateY(0) !important; }
.pa-card:hover{
  transform:translateY(-6px);
  border-color:rgba(46,143,255,0.5);
  box-shadow:0 20px 48px -16px rgba(0,0,0,0.5);
  background:rgba(255,255,255,0.045);
}
.pa-card-icon{
  width:48px; height:48px; border-radius:12px;
  background:rgba(46,143,255,0.12);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.pa-card-icon svg{ width:24px; height:24px; stroke:#5EB1FF; fill:none; }
.pa-card h3{
  font-family:'Poppins','Segoe UI',sans-serif;
  font-size:1.15rem; font-weight:600; color:#fff; margin:0 0 12px;
}
.pa-card p{ font-size:0.92rem; line-height:1.65; color:#9BA4B8; margin:0; }
.pa-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px; border-radius:100px;
  background:#2E8FFF; color:#fff;
  font-weight:700; font-size:1rem; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pa-cta:hover{ transform:scale(1.03); background:#1E7CE8; box-shadow:0 12px 32px -8px rgba(46,143,255,0.55); }
.pa-cta svg{ width:18px; height:18px; transition:transform .2s ease; }
.pa-cta:hover svg{ transform:translateX(4px); }

@media (max-width: 1024px){
  .pa-section{ padding:88px 20px; }
  .pa-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 640px){
  .pa-section{ padding:64px 18px; }
  .pa-grid{ grid-template-columns:1fr; }
  .pa-sub{ margin-bottom:44px; }
  .pa-card{ padding:26px; }
  .pa-cta{ width:100%; justify-content:center; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1180px){
  .hero-grid{ gap:36px; }
  .hero-metrics{ gap:12px; }
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy, .hero-copy h1, .hero-sub{ max-width:none; }
  .hero-metrics{ margin-top:40px; max-width:520px; margin-left:auto; margin-right:auto; }
  .metric-card--2, .metric-card--4{ margin-top:0; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .case-grid{ grid-template-columns:repeat(2,1fr); }
  .process-list{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .process-step:nth-child(2)::after{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; }
}

@media (max-width: 720px){
  .header-inner{ height:64px; }

  /* Full-screen mobile dropdown. Sized with dvh (falls back to vh on
     older browsers) so mobile browser toolbars showing/hiding never
     leave part of the menu unreachable or force an inner scroll for
     a handful of links. */
  nav.main-nav{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    height:calc(100vh - 64px);
    height:calc(100dvh - 64px);
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    gap:2px;
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    border-top:1px solid var(--line);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:99;
  }
  nav.main-nav.is-open{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
  }
  nav.main-nav a.nav-link{
    padding:16px 14px;
    font-size:1.05rem;
    border-bottom:1px solid var(--mist);
  }
  .nav-toggle{ display:flex; }

  .nav-dropdown-menu{
    position:static; opacity:1; transform:none; pointer-events:auto; padding-top:0;
    max-height:0; overflow:hidden;
    transition:max-height 260ms ease;
  }
  .nav-dropdown-menu-inner{ background:var(--paper); border:none; box-shadow:none; padding:0 8px; border-radius:var(--radius-sm); }
  .nav-dropdown-menu a{ padding:13px 12px; font-size:0.98rem; }
  .nav-dropdown.is-open .nav-dropdown-menu{ max-height:420px; }
  .nav-dropdown.is-open .nav-dropdown-menu-inner{ padding:8px; margin:4px 0 6px; }
  .nav-dropdown > .nav-link{ width:100%; justify-content:space-between; border-bottom:1px solid var(--mist); }
  .nav-dropdown.is-open > .nav-link{ border-bottom-color:transparent; }
  .header-actions .btn-primary{ display:none; }
  nav.main-nav .nav-cta{ display:inline-flex; justify-content:center; margin-top:18px; width:100%; }

  .services-grid{ grid-template-columns:1fr; }
  .case-grid{ grid-template-columns:1fr; }
  .process-list{ grid-template-columns:1fr; }
  .process-step::after{ display:none !important; }
  .growth-metrics-grid{ grid-template-columns:1fr; }
  .form-two{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .hero{ min-height:calc(100vh - 64px); min-height:calc(100dvh - 64px); padding:clamp(20px, 4vh, 44px) 0 clamp(16px, 3vh, 24px); }

  .hero-metrics{ grid-template-columns:1fr; margin-top:32px; max-width:100%; }
  .hero-cta-form{ flex-direction:column; align-items:stretch; flex-wrap:wrap; }
  .hero-cta-form input[type="email"]{ width:100%; }
  .hero-cta-form .btn{ width:100%; margin-left:0; }

  .process-callout{
    flex-direction:column;
    align-items:flex-start;
    padding:24px;
  }
  .process-callout .btn{ width:100%; }
}

/* When the mobile nav is open, body scroll is locked via JS
   (position:fixed technique) — see script.js. This class supplies
   the fixed positioning so the lock can't leave the page scrolled
   to the wrong spot when it's released. */
body.nav-open{
  position:fixed;
  inset:0;
  overflow:hidden;
  width:100%;
}

/* ============================================================
   EXTRA RESPONSIVE HARDENING
   Fills gaps left by the section-by-section breakpoints above:
   tablet range (768–980), large phones (481–600), small
   phones (≤480), and very small phones (≤360). Also guards
   against horizontal overflow and tightens touch targets.
   ============================================================ */

/* ---- Tablet (1024px and down): tighten container + type scale ---- */
@media (max-width: 1024px){
  .wrap{ padding:0 20px; }
  .section{ padding:76px 0; }
  .section-head{ margin-bottom:38px; }
}

/* ---- 900px: hero copy/metrics already stack at 980; refine gap ---- */
@media (max-width: 900px){
  .contact-form{ padding:26px; }
  .process-callout{ gap:20px; }
}

/* ---- Large phones / small tablets (600px) ---- */
@media (max-width: 600px){
  .wrap{ padding:0 18px; }
  .section{ padding:56px 0; }
  .section-head{ margin-bottom:30px; }
  .section-head p{ font-size:0.96rem; }

  .brand img{ height:112px; }

  .btn{ padding:13px 22px; font-size:0.92rem; }

  .hero-trust{ font-size:0.8rem; }
  .hero-metrics{ gap:10px; }
  .metric-card{ padding:12px 12px 14px; }
  .metric-card-label{ font-size:0.62rem; }

  .service-card, .case-card{ padding:20px; }
  .service-icon{ width:38px; height:38px; margin-bottom:12px; }

  .ef-card{ padding:16px; }
  .process-callout-text p{ font-size:0.92rem; }

  .testimonial-section .testimonial-card{ padding:20px; }
  .testimonial-section .testimonial-avatar{ width:40px; height:40px; }

  .faq-q{ font-size:0.96rem; padding:18px 2px; gap:12px; }
  .faq-a p{ font-size:0.9rem; padding:0 2px 18px; }

  .contact-form{ padding:20px; }
  .contact-info p{ max-width:none; }

  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-legal{ gap:16px; }

  .logo-slider-head h2{ font-size:1rem; }
}

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px){
  html{ font-size:15px; }

  .wrap{ padding:0 16px; }
  .header-inner{ gap:10px; }
  .brand-fallback-text{ font-size:1rem; }

  .hero h1{ font-size:clamp(1.5rem, 7.5vw, 2rem); }
  .hero-sub{ font-size:0.94rem; }
  .hero-cta-form{ max-width:none; }
  .hero-trust{ align-items:flex-start; }

  .metric-card--stat .metric-stat-value{ font-size:1.5rem; }

  .eyebrow{ font-size:0.68rem; }
  .section-head h2{ font-size:clamp(1.5rem, 8vw, 1.9rem); }

  .services-grid, .case-grid{ grid-template-columns:1fr; }

  .ef-cards{ grid-template-columns:1fr; }

  .process-callout{ padding:20px; }

  /* Revenue-chart / investment-simulator compacting for this width
     lives in the dedicated @media blocks above (see "Below 720px
     the whole card is deliberately tightened…") — not duplicated
     here, so those tighter values are the ones that win. */

  .testimonial-section .testimonial-quote{ font-size:0.92rem; }

  .contact-detail-row{ font-size:0.9rem; }

  .footer-top{ gap:28px; }
  .footer-col p.foot-desc{ max-width:none; }

  .form-row input, .form-row select, .form-row textarea{ font-size:0.9rem; padding:11px 12px; }
}

/* ---- Very small phones (≤360px) ---- */
@media (max-width: 360px){
  html{ font-size:14px; }
  .wrap{ padding:0 14px; }
  .btn{ padding:12px 18px; font-size:0.88rem; }
  .hero h1{ font-size:1.4rem; }
  .logo-slide{ width:100px; padding:0 16px; }
  .investment-simulator-section .investment-amount-field input[type="number"]{ font-size:0.86rem; }
}

/* ---- Landscape phones (short height) ---- */
@media (max-height: 480px) and (orientation: landscape){
  .hero{ min-height:auto; padding:32px 0; }
}

/* ---- Guard against any accidental horizontal scroll ---- */
img, svg, video, canvas, iframe, table{ max-width:100%; height:auto; }
.wrap, .section, header.site-header, footer.site-footer{ max-width:100%; }