/* =========================================================
   Plunno — design tokens & bespoke effects
   Everything Tailwind utilities can't express lives here.
========================================================= */

:root{
  --bg-deep:      #252D19;
  --bg-card:      #2E371F;
  --bg-card-2:    #3A4527;
  --bg-card-3:    rgba(102, 109, 70, 0.85);
  --bg-card-soft: rgba(102, 109, 70, 0.45);
  --teal:         #9FD100;
  --teal-deep:    #5C6B1A;
  --mint:         #B6F200;
  --cyan:         #F3FFC2;
  --pink:         #FA7F46;
  --offwhite:     #FBFBEF;
  --ink:          #F4F6EC;
  --muted:        #9AA37C;
  --muted-2:      #C4CBA8;

  --grad-accent: linear-gradient(90deg, var(--teal) 0%, #A4CD04 35%, var(--pink) 70%, var(--pink) 100%);
  --grad-accent-diag: linear-gradient(120deg, var(--teal), var(--mint) 45%, var(--pink) 100%);
  --grad-panel: linear-gradient(0deg, var(--bg-card) 0%, var(--teal-deep) 100%);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
html, body{ background:var(--bg-deep); }
body{
  font-family:'Poppins', Arial, sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  cursor:default;
}
::selection{ background:var(--teal); color:#252D19; }

a{ cursor:pointer; }
button{ cursor:pointer; font-family:inherit; }

/* Reserve scrollbar gutter so pinned/measured sections don't jitter */
html{ scrollbar-gutter:stable; }

/* ---------- Utility: eyebrow label ---------- */
.eyebrow{
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mint);
  font-weight:500;
}

/* ---------- Gradient text (headline accents) ---------- */
.text-grad{
  background:var(--grad-accent-diag);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Scroll-scrub reveal text ----------
   Each word starts dim/muted and brightens as the section
   scrolls through the viewport (GSAP ScrollTrigger scrub). */
.scrub-text{
  font-weight:500;
  line-height:1.15;
}
.scrub-text .word{
  color:var(--muted);
  transition:color .25s linear;
  display:inline-block;
}
.scrub-text .word.is-lit{
  color:var(--ink);
}
.scrub-text.scrub-accent .word.is-lit{
  color:var(--mint);
}
.scrub-text.scrub-pink .word.is-lit{
  background:var(--grad-accent-diag);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Buttons ---------- */
.btn-gradient{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.9rem 1.6rem;
  border-radius:999px;
  background:var(--grad-accent);
  background-size:220% 100%;
  background-position:0% 0%;
  color:#252D19;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:background-position .6s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  box-shadow:0 0 0 rgba(250,127,70,0);
}
.btn-gradient:hover{
  background-position:100% 0%;
  transform:translateY(-2px);
  box-shadow:0 12px 30px -10px rgba(250,127,70,.35);
}
.btn-gradient svg{ transition:transform .35s var(--ease-out); width:16px; height:16px; }
.btn-gradient:hover svg{ transform:translate(3px,-3px); }
/* Narrower padding/tracking so "Diagnóstico grátis" fits on one line
   in the mobile 2-column hero's tight text column, where the default
   size wraps mid-phrase. */
.btn-gradient--compact{
  padding:.7rem 1.05rem;
  font-size:.62rem;
  letter-spacing:.06em;
  gap:.4rem;
  white-space:nowrap;
}
.btn-gradient--compact svg{ width:13px; height:13px; }

.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.5rem;
  border-radius:999px;
  border:1px solid rgba(244,246,236,.25);
  color:var(--ink);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.btn-outline:hover{
  border-color:rgba(244,246,236,.6);
  background:rgba(244,246,236,.06);
}

.icon-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  transition:background-color .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s var(--ease-out);
  flex-shrink:0;
}
.icon-chip svg{ width:18px; height:18px; transition:transform .35s var(--ease-out); }
.group:hover .icon-chip,
a:hover .icon-chip,
.icon-chip:hover{
  background:var(--teal);
  border-color:var(--teal);
}
.group:hover .icon-chip svg,
a:hover .icon-chip svg{
  transform:rotate(45deg);
}

/* ---------- Header ---------- */
#site-header{
  transition:background-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom:1px solid transparent;
}
#site-header.is-scrolled{
  background:rgba(37,45,25,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.06);
}

.nav-link{
  position:relative;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.85;
  transition:opacity .25s var(--ease-out);
}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:0; height:1px;
  background:var(--mint);
  transition:width .3s var(--ease-out);
}
.nav-link:hover{ opacity:1; }
.nav-link:hover::after{ width:100%; }

/* ---------- Hero ---------- */
.hero-glow{
  background:radial-gradient(60% 55% at 50% 40%, rgba(159,209,0,.32) 0%, rgba(37,45,25,0) 70%);
}

/* ---------- Hero (pitch-deck cover: photo + "próprio"/"status") ---------- */
.hero-pitch__bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url('../assets/fundo.webp');
  background-size:cover;
  background-position:center;
  background-color:var(--bg-deep);
}
.hero-pitch__grid{
  /* minmax(0, Npx) instead of 1fr: 1fr columns stretch to soak up all
     leftover width in the 1000px container, stranding the intro
     paragraph and tagline/CTA far from the photo. Capped tracks shrink
     to their content instead, so justify-content:center pulls the
     whole 3-column group — text included — in tight around the photo. */
  grid-template-columns: minmax(0, 260px) auto minmax(0, 260px);
}
/* Photo frame: capped on BOTH width (vw) and height (vh), with
   object-fit:contain doing the reconciling — so on a wide-but-short
   window the height limit wins and the photo can never outgrow the
   viewport and push the rest of the hero (words, CTA) off-screen.
   Sized to sit as a compact group with the text (pitch-deck cover
   proportions), not stretched to bleed against the section's edge. */
.hero-pitch__photo{
  position:relative;
  z-index:3;
  /* 420x530 needs ~1090px of grid width (both words + both gaps +
     the photo itself) to avoid the overflow-hidden section clipping
     "próprio"/"status" — doesn't fit at the low end of the lg range
     (1024px), so step down to the previous fixed size there and only
     go full-size once there's room. */
  width:320px;
  height:403px;
}
@media (min-width:1200px){
  .hero-pitch__photo{
    width:420px;
    height:530px;
  }
}
/* Desktop only (mobile's photo isn't inside .hero-pitch__grid): pull the
   photo down past the grid's own bottom edge by exactly the section's
   pb-16, so its base lands flush with the true bottom of the Hero
   instead of stopping level with the CTA row above the section's
   bottom padding. Safe to bleed — the section clips with overflow-hidden. */
.hero-pitch__grid .hero-pitch__photo{
  margin-bottom:-4rem;
}
/* Mobile/tablet stack the photo above the words instead of beside them,
   so it must share vertical space with intro text + words + CTA and
   needs a much lower ceiling than the desktop column, or the words/CTA
   get pushed below the fold (regressing the earlier scroll-to-see bug). */
@media (max-width:1023.98px){
  .hero-pitch__photo{
    width:clamp(190px, 40vw, 270px);
    height:clamp(190px, 29vh, 270px);
  }
}
/* Mobile/tablet 2-column hero: photo sits beside the text instead of
   above it, so it goes narrower + taller (portrait, filling the right
   column's height) instead of the roughly-square shape the old
   stacked layout used. Same source order trick as the block above —
   an equally-specific single-class rule that comes later wins. */
.hero-pitch__photo--mobile2col{
  /* Height comes from aspect-ratio (matching the source image, 868x1222)
     instead of its own clamp like the rule above — that box was much
     taller than a "width-constrained" box of this width can fill, so
     object-fit:contain left a tall empty gap above the actual photo
     (with object-position:bottom) and the checkmarks, positioned as a
     % of the box, ended up floating in that empty space. Deriving
     height from the real aspect ratio means the box IS the photo, no
     letterboxing, so the checkmark percentages land where they look. */
  width:clamp(150px, 42vw, 210px);
  height:auto;
  aspect-ratio:868/1222;
  /* Only the photo bleeds past the row's own bottom edge to touch the
     section's true base (mirrors the desktop treatment) — the text
     column next to it stays put, it doesn't also drop. Smaller than
     the desktop grid's -4rem: unlike that grid, this row's own height
     is content-driven rather than always stretched to fill the
     section (min-height is just a floor now, not a fixed height), so
     the same pb-16 offset over-shoots past the section's real bottom
     edge here. */
  margin-bottom:-2rem;
}
@media (min-width:480px){
  .hero-pitch__photo--mobile2col{
    width:clamp(180px, 38vw, 240px);
  }
}
/* Hero min-height: was a min-h-[85svh] Tailwind class on the section,
   moved here so it can have a mobile override without fighting
   Tailwind's utility for the same property at equal specificity (a
   later stylesheet always wins a tie, regardless of which one "should"
   apply — brittle in either direction, so this property just isn't
   Tailwind's to own). Mobile gets a shorter figure: the desktop 85svh
   leaves a large empty gap above the content on a phone, since the
   2-column row is much shorter relative to the viewport there. */
.hero-pitch{ min-height:85svh; }
@media (max-width:1023.98px){
  .hero-pitch{
    min-height:64svh;
  }
}
/* "próprio"/"status" at desktop's headline size would each need more
   width than half a phone screen has — this variant scales them down
   to fit the narrower text column without wrapping. */
.hero-pitch__word--mobile2col{
  font-size:clamp(32px, 12vw, 48px);
}
@media (min-width:480px){
  .hero-pitch__word--mobile2col{
    font-size:clamp(44px, 9vw, 64px);
  }
}
.hero-pitch__photo picture, .hero-pitch__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom;
}
.hero-pitch__word{
  position:relative;
  z-index:1;
  font-weight:900;
  line-height:.9;
  letter-spacing:-.02em;
  font-size:clamp(60px, 9vw, 84px);
}
/* Desktop: pulls "próprio" / "status" in so the photo's body visually
   overlaps each word. "status" sits ABOVE the photo in z-index (opposite
   of "próprio") — the woman's image reads as tucked behind/under the S,
   not covering it, per the client's explicit left/right pairing. */
.hero-pitch__word--left{ justify-self:end; margin-right:-110px; }
.hero-pitch__word--right{ justify-self:start; margin-left:-142px; z-index:4; }
/* Mobile/tablet: photo and words stack, so the overlap happens
   vertically instead — pulls the word block up under her hem. */
.hero-pitch__mobile-words{
  position:relative;
  z-index:1;
}
.hero-pitch__underline{
  text-decoration:underline;
  text-decoration-color:var(--pink);
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}
.hero-pitch__check{
  position:absolute;
  width:34px;
  height:34px;
}
.hero-pitch__check svg{ width:100%; height:100%; }
@media(min-width:640px){
  .hero-pitch__check{ width:38px; height:38px; }
}

.orbital-sphere{
  overflow:visible;
  /* Hard-coded (not Tailwind's aspect-square/max-w-[520px] utilities)
     so sizing is correct on first paint even before the Tailwind CDN
     script has finished injecting its stylesheet. */
  width:100%;
  max-width:520px;
  aspect-ratio:1/1;
  margin-inline:auto;
  cursor:default;
}
.orbital-sphere.has-active-kpi{
  cursor:pointer;
}
.orbital-sphere canvas{
  display:block;
  width:100%;
  height:100%;
}

/* ---------- Hero KPI hover cards ---------- */
.hero-kpi{
  position:absolute;
  top:0;
  left:0;
  min-width:180px;
  padding:14px 16px 12px;
  border-radius:14px;
  background:rgba(35,43,24,.94);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.65);
  opacity:0;
  transform:translate(-50%,-100%) translateY(-10px) scale(.96);
  transform-origin:bottom center;
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
  pointer-events:none;
  z-index:20;
}
.hero-kpi.is-visible{
  opacity:1;
  transform:translate(-50%,-100%) translateY(-20px) scale(1);
}
/* Flip below the point when it's too close to the top edge to fit
   the card above it (used near hotspots on the upper half). */
.hero-kpi.placement-below{
  transform:translate(-50%,0) translateY(10px) scale(.96);
  transform-origin:top center;
}
.hero-kpi.placement-below.is-visible{
  transform:translate(-50%,0) translateY(20px) scale(1);
}
.hero-kpi__label{
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:4px;
  white-space:nowrap;
}
.hero-kpi__value{
  font-size:1.5rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:8px;
}
/* Card size mirrors the dot's visual weight: bigger dot on the globe
   -> bigger, more prominent KPI number in the hover card. */
.hero-kpi--lg{ min-width:210px; padding:18px 20px 14px; }
.hero-kpi--lg .hero-kpi__value{ font-size:2.15rem; }
.hero-kpi--lg .hero-kpi__label{ font-size:.72rem; }
.hero-kpi--md{ min-width:180px; }
.hero-kpi--md .hero-kpi__value{ font-size:1.5rem; }
.hero-kpi--sm{ min-width:150px; padding:11px 13px 10px; }
.hero-kpi--sm .hero-kpi__value{ font-size:1.1rem; margin-bottom:6px; }
.hero-kpi--sm .hero-kpi__label{ font-size:.6rem; }
.hero-kpi--sm .hero-kpi__chart{ height:20px; }
.hero-kpi__chart{
  display:block;
  width:100%;
  height:28px;
}

.hero-fade-mask{
  -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
}

/* ---------- Explore accordion ---------- */
.explore-item{
  border-top:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:background-color .35s var(--ease-out);
}
.explore-item:last-child{ border-bottom:1px solid rgba(255,255,255,.08); }
.explore-item:hover, .explore-item.is-active{
  background:rgba(255,255,255,.03);
}
.explore-item .explore-desc{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .45s var(--ease-out), opacity .35s var(--ease-out) .05s;
}
.explore-item.is-active .explore-desc{
  grid-template-rows:1fr;
  opacity:1;
}
.explore-item .explore-desc > div{ overflow:hidden; }
.explore-item .explore-index{
  font-variant-numeric:tabular-nums;
  color:var(--muted-2);
  transition:color .3s var(--ease-out);
}
.explore-item.is-active .explore-index{ color:var(--mint); }
.explore-item .explore-title{ transition:color .3s var(--ease-out), transform .3s var(--ease-out); }
.explore-item.is-active .explore-title, .explore-item:hover .explore-title{
  transform:translateX(6px);
}

/* Accordion rows called out with a solid, vivid palette color instead of
   the shared dark panel background — each on its own hue so no two read
   as one bigger block — with text/icon colors flipped to dark for
   contrast against them. */
.explore-item--accent,
.explore-item--accent-pink,
.explore-item--accent-teal{
  border-top-color:rgba(37,45,25,.15);
}
.explore-item--accent, .explore-item--accent:hover, .explore-item--accent.is-active{
  background:var(--mint);
}
.explore-item--accent-pink, .explore-item--accent-pink:hover, .explore-item--accent-pink.is-active{
  background:var(--pink);
}
.explore-item--accent-teal, .explore-item--accent-teal:hover, .explore-item--accent-teal.is-active{
  background:var(--teal);
}
.explore-item--accent .explore-index,
.explore-item--accent-pink .explore-index,
.explore-item--accent-teal .explore-index{ color:rgba(37,45,25,.55); }
.explore-item--accent.is-active .explore-index,
.explore-item--accent-pink.is-active .explore-index,
.explore-item--accent-teal.is-active .explore-index{ color:#252D19; }
.explore-item--accent .explore-title,
.explore-item--accent-pink .explore-title,
.explore-item--accent-teal .explore-title{ color:#161B0E; }
.explore-item--accent .explore-desc p,
.explore-item--accent-pink .explore-desc p,
.explore-item--accent-teal .explore-desc p{ color:rgba(37,45,25,.72); }
.explore-item--accent .icon-chip,
.explore-item--accent-pink .icon-chip,
.explore-item--accent-teal .icon-chip{
  background:rgba(37,45,25,.1);
  border-color:rgba(37,45,25,.18);
}

/* This row keeps the default light-on-dark panel text (unlike the three
   above) — its background is a dark green, not a vivid one, so the
   shared dark-text treatment would be unreadable here. */
.explore-item--accent-darkgreen,
.explore-item--accent-darkgreen:hover,
.explore-item--accent-darkgreen.is-active{
  background:linear-gradient(150deg, var(--teal-deep) 0%, var(--bg-card-2) 100%);
}
.explore-item--accent-darkgreen.is-active .explore-index{ color:var(--mint); }

/* Sparkle accents — this row is the CRM's gamification pitch (the
   product's own value prop), so it gets a little shimmer the other
   three rows don't; a small 4-point star, scattered and twinkling on
   staggered delays rather than in sync, which reads as more "alive"
   than a single uniform pulse. */
.explore-item--accent-darkgreen{ position:relative; overflow:hidden; }
.explore-item__sparkle{
  position:absolute;
  width:16px;
  height:16px;
  color:var(--mint);
  pointer-events:none;
  animation:sparkleTwinkle 2.6s ease-in-out infinite;
}
.explore-item__sparkle path{ fill:currentColor; }
.explore-item__sparkle--1{ top:16%; left:5%; width:28px; height:28px; animation-delay:0s; }
.explore-item__sparkle--2{ top:66%; left:13%; width:20px; height:20px; color:var(--cyan); animation-delay:.5s; }
.explore-item__sparkle--3{ top:20%; right:13%; width:36px; height:36px; animation-delay:1s; }
.explore-item__sparkle--4{ top:70%; right:6%; width:22px; height:22px; color:var(--cyan); animation-delay:1.5s; }
.explore-item__sparkle--5{ top:42%; left:29%; width:18px; height:18px; color:var(--cyan); animation-delay:2s; }
.explore-item__sparkle--6{ top:82%; left:44%; width:24px; height:24px; animation-delay:.85s; }
.explore-item__sparkle--7{ top:10%; left:46%; width:16px; height:16px; color:var(--cyan); animation-delay:2.3s; }
.explore-item__sparkle--8{ top:46%; right:29%; width:20px; height:20px; animation-delay:1.7s; }
@keyframes sparkleTwinkle{
  0%, 100%{ opacity:.25; transform:scale(.7) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.15) rotate(12deg); }
}
@media (max-width:767px){
  .explore-item__sparkle--2, .explore-item__sparkle--4,
  .explore-item__sparkle--6, .explore-item__sparkle--8{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .explore-item__sparkle{ animation:none; opacity:.7; }
}

/* ---------- Cards / panels ---------- */
.panel{
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.06);
}
.panel-glow{
  position:relative;
  overflow:hidden;
}
.panel-glow::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height:80%;
  background:radial-gradient(closest-side, rgba(159,209,0,.28), transparent 70%);
  pointer-events:none;
}

/* ---------- Feature showcase ---------- */
.feature-bg{
  background:
    radial-gradient(50% 60% at 85% 20%, rgba(250,127,70,.16) 0%, transparent 70%),
    linear-gradient(155deg, var(--bg-card) 0%, var(--bg-deep) 75%);
  border:1px solid rgba(255,255,255,.06);
  will-change:transform;
}
.feature-zoom{
  transform-origin:center center;
  will-change:transform;
}

.mockup-card{
  background:var(--offwhite);
  border-radius:1.25rem;
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  color:#252D19;
}
.mockup-chrome{
  display:flex;
  gap:6px;
  padding:12px 16px;
  background:#F1F1E4;
}
.mockup-chrome span{
  width:9px; height:9px; border-radius:999px;
  background:rgba(37,45,25,.18);
}
.mockup-body{
  display:flex;
  min-height:340px;
}
.mockup-sidebar{
  width:118px;
  flex-shrink:0;
  padding:18px 14px;
  background:#F6F6EA;
  border-right:1px solid rgba(37,45,25,.08);
}
.mockup-sidebar__logo{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:.8rem;
  margin-bottom:18px;
}
.mockup-sidebar__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border-radius:5px;
  background:var(--teal);
  color:#252D19;
  font-size:.55rem;
  font-weight:800;
}
.mockup-sidebar__label{
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8A9070;
  margin-bottom:8px;
}
.mockup-sidebar__nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mockup-nav-item{
  font-size:.68rem;
  font-weight:600;
  padding:6px 8px;
  border-radius:8px;
  color:#5A6142;
}
.mockup-nav-item.is-active{
  background:var(--teal);
  color:#252D19;
}
.mockup-main{
  flex:1;
  min-width:0;
  padding:18px 20px;
}
.mockup-greeting{
  font-size:.68rem;
  color:#8A9070;
  margin-bottom:2px;
}
.mockup-headline{
  font-size:1rem;
  font-weight:600;
  margin-bottom:14px;
}
.mockup-headline strong{
  color:var(--teal-deep);
}
.mockup-kpis{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin-bottom:14px;
}
@media (min-width:1200px){
  .mockup-kpis{ grid-template-columns:repeat(4, 1fr); }
}
.mockup-kpi{
  background:#FBFBEF;
  border:1px solid rgba(37,45,25,.08);
  border-radius:10px;
  padding:10px 12px;
}
.mockup-kpi__label{
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#8A9070;
  margin-bottom:4px;
}
.mockup-kpi__value{
  font-size:.95rem;
  font-weight:700;
  margin-bottom:2px;
}
.mockup-kpi__delta{
  font-size:.6rem;
  font-weight:600;
  color:#5C6B1A;
}
.mockup-panels{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:10px;
}
.mockup-chart, .mockup-opportunities{
  background:#FBFBEF;
  border:1px solid rgba(37,45,25,.08);
  border-radius:10px;
  padding:12px;
}
.mockup-chart__title{
  font-size:.65rem;
  font-weight:700;
  margin-bottom:8px;
}
.mockup-chart svg{
  width:100%;
  height:64px;
  display:block;
}
.mockup-opportunity{
  padding:6px 0;
  border-top:1px solid rgba(37,45,25,.08);
}
.mockup-opportunity:first-of-type{ border-top:none; }
.mockup-opportunity__title{
  font-size:.66rem;
  font-weight:600;
}
.mockup-opportunity__value{
  font-size:.62rem;
  color:#B9541F;
  font-weight:600;
}
@media (max-width:1023px){
  .mockup-panels{ grid-template-columns:1fr; }
}
@media (max-width:639px){
  .mockup-sidebar{ display:none; }
}

.stat-card{
  background:var(--grad-panel);
  border:1px solid rgba(255,255,255,.06);
  background-image:
    radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    var(--grad-panel);
  background-size:16px 16px, 100% 100%;
}
.stat-card.is-accent{
  background-image:
    radial-gradient(rgba(37,45,25,.12) 1px, transparent 1px),
    linear-gradient(135deg, var(--pink), var(--offwhite) 55%, var(--cyan));
  color:#252D19;
}
.stat-card .stat-number{
  font-variant-numeric:tabular-nums;
}

/* ---------- Stage panel (project phase progress) ---------- */
.stage-panel{
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:1.5rem;
  padding:1.75rem 2rem;
  margin-bottom:2rem;
  text-align:left;
}
.stage-panel__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.5rem 1rem;
  margin-bottom:1rem;
}
.stage-panel__label{
  font-size:.85rem;
  font-weight:500;
  color:var(--muted-2);
}
.stage-panel__sep{ color:var(--muted); margin:0 .1em; }
.stage-panel__value{
  font-size:1.6rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  background:var(--grad-accent-diag);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stage-track{
  position:relative;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.stage-track__fill{
  position:relative;
  height:100%;
  width:0%;
  border-radius:999px;
  background:var(--grad-accent);
  background-size:200% 100%;
}
.stage-track__fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  width:40%;
  animation:stageShine 2.6s ease-in-out infinite;
}
@keyframes stageShine{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(320%); }
}

.stage-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  text-align:left;
}
@media (min-width:768px){
  .stage-grid{ grid-template-columns:repeat(2, 1fr); gap:1.25rem; }
}
.stage-card{
  display:flex;
  align-items:center;
  gap:1.1rem;
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:1.25rem;
  padding:1.25rem 1.5rem;
  transition:transform .35s var(--ease-out), border-color .35s var(--ease-out);
}
.stage-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.16);
}
.stage-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  flex-shrink:0;
}
.stage-card__icon svg{ width:20px; height:20px; }
.stage-card__icon--done{ background:#8BC540; }
.stage-card__icon--blocked{ background:var(--pink); }
.stage-card__icon--active{ background:var(--mint); animation:stageSpin 3.2s linear infinite; }
.stage-card__icon--pending{ background:rgba(255,255,255,.08); }
@keyframes stageSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
.stage-card__title{
  display:block;
  font-weight:700;
  font-size:1.02rem;
  margin-bottom:.2rem;
}
.stage-card__status{
  display:block;
  font-size:.85rem;
  font-weight:500;
}
.stage-card__status--done{ color:#8BC540; }
.stage-card__status--blocked{ color:var(--pink); }
.stage-card__status--active{ color:var(--mint); }
.stage-card__status--pending{ color:var(--muted); }
@media (prefers-reduced-motion: reduce){
  .stage-track__fill::after{ animation:none; display:none; }
  .stage-card__icon--active{ animation:none; }
}

/* ---------- Pain-point quotes ---------- */
.pain-card{
  position:relative;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:1.5rem;
  padding:2.5rem 2rem 2rem;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.pain-card::before{
  content:"";
  position:absolute;
  inset:-30% -10% auto -10%;
  height:65%;
  background:radial-gradient(closest-side, rgba(250,127,70,.22), transparent 70%);
  pointer-events:none;
}
.pain-card:hover{
  transform:translateY(-8px);
  border-color:rgba(250,127,70,.35);
  box-shadow:0 28px 54px -24px rgba(0,0,0,.55);
}
@media (min-width:768px){
  .pain-card--offset{ margin-top:2.75rem; }
}
.pain-card__mark{
  display:block;
  font-family:Georgia, "Times New Roman", serif;
  font-size:4.5rem;
  line-height:1;
  font-weight:700;
  color:var(--pink);
  opacity:.5;
  margin-bottom:-.5rem;
}
.pain-card__quote{
  position:relative;
  font-size:1.3rem;
  line-height:1.5;
  font-weight:600;
  font-style:italic;
  color:var(--ink);
}
.pain-card__label{
  margin-top:1.5rem;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Logo marquee ---------- */
.marquee{
  --gap:3.5rem;
  display:flex;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee__track{
  display:flex;
  align-items:center;
  gap:var(--gap);
  flex-shrink:0;
  min-width:100%;
  animation:marquee 32s linear infinite;
  padding-right:var(--gap);
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-100% - var(--gap))); }
}
.brand-pill{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:.02em;
  color:rgba(244,246,236,.55);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:.5rem;
  transition:color .3s var(--ease-out);
}
.brand-pill:hover{ color:var(--ink); }
.brand-pill .dot{
  width:6px; height:6px; border-radius:999px; background:var(--teal);
}

/* ---------- Product showcase (bento grid of app screens) ---------- */
.app-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
}
@media (min-width:768px){
  .app-grid{
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:repeat(2, auto);
  }
  /* Explicit line placement (not span + auto-flow): with span-based rules,
     the grid's sparse auto-placement skipped the col4/row1 gap left after
     RFM's 3-col span — because Segments/Strategy come before Care in the
     DOM and didn't fit there — stranding Care alone in its own row with
     empty space beside it. Explicit lines put every card exactly where
     intended regardless of source order. Only RFM/Care sit in row 1 and
     only Segments/Strategy in row 2, each row auto-sized to its own
     content only, so no card stretches to match a taller neighbor. */
  .app-shot--rfm{ grid-column:1 / 4; grid-row:1 / 2; }
  .app-shot--care{ grid-column:4 / 5; grid-row:1 / 2; }
  .app-shot--segments{ grid-column:1 / 3; grid-row:2 / 3; }
  .app-shot--strategy{ grid-column:3 / 5; grid-row:2 / 3; }
}
.app-shot{
  background:var(--offwhite);
  border-radius:1.5rem;
  overflow:hidden;
  color:#252D19;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.app-shot:hover{
  transform:translateY(-6px);
  box-shadow:0 36px 70px -28px rgba(0,0,0,.55);
}
.app-shot__body{ padding:20px 22px 24px; }
.app-shot__title{ font-size:1rem; font-weight:700; margin-bottom:2px; }
.app-shot__subtitle{ font-size:.75rem; color:#5A6142; margin-bottom:18px; }

/* shared mini progress-bar row (RFM segments + campaign funnel) */
.bar-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:9px;
  font-size:.7rem;
}
.bar-label{ width:108px; flex-shrink:0; color:#3F462B; font-weight:600; }
.bar-track{ flex:1; height:7px; border-radius:999px; background:rgba(37,45,25,.1); overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; }
.bar-value{ width:44px; flex-shrink:0; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }

/* RFM card only: organic, hand-placed feel instead of a rigid table —
   labels lose their fixed column (so the track's start point drifts
   with each label's own length) and rows nudge left/right a little,
   so nothing lines up into straight vertical rules. */
.app-shot--rfm .bar-row{ margin-left:0; }
.app-shot--rfm .bar-row:nth-child(2n){ margin-left:22px; }
.app-shot--rfm .bar-row:nth-child(3n){ margin-left:10px; }
.app-shot--rfm .bar-row:nth-child(4n){ margin-left:34px; }
.app-shot--rfm .bar-label{ width:auto; white-space:nowrap; }
.app-shot--rfm .bar-track{ max-width:130px; }
.app-shot--rfm .bar-value{ width:auto; }

/* segment-builder flow blocks */
.flow-node{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#FBFBEF;
  border:1px solid rgba(37,45,25,.08);
  border-radius:10px;
  padding:9px 12px;
}
.flow-node__dot{ width:9px; height:9px; border-radius:999px; margin-top:5px; flex-shrink:0; }
.flow-node__label{ font-size:.58rem; text-transform:uppercase; letter-spacing:.05em; color:#8A9070; }
.flow-node__value{ font-size:.78rem; font-weight:600; }
.flow-line{ width:1px; height:12px; background:rgba(37,45,25,.15); margin-left:16px; }
.flow-result{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(120deg, var(--teal), var(--mint));
  border-radius:10px;
  padding:10px 14px;
  font-size:.75rem;
  font-weight:600;
}
.flow-result strong{ font-size:.95rem; }

/* strategy / campaign card */
.strategy-card{
  background:#FBFBEF;
  border:1px solid rgba(37,45,25,.08);
  border-radius:12px;
  padding:14px 16px;
}
.strategy-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.strategy-card__name{ font-size:.85rem; font-weight:700; }
.strategy-card__price{
  font-size:.68rem;
  font-weight:700;
  background:var(--mint);
  padding:.2rem .55rem;
  border-radius:999px;
  white-space:nowrap;
}
.strategy-card__tags{ display:flex; gap:6px; margin-bottom:12px; }
.strategy-card__tags span{
  font-size:.6rem;
  font-weight:600;
  padding:.2rem .5rem;
  border-radius:999px;
  background:rgba(37,45,25,.08);
}

/* pharmaceutical-care patient list */
.care-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-top:1px solid rgba(37,45,25,.08);
}
.care-item:first-of-type{ border-top:none; }
.care-item__days{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:999px;
  background:var(--cyan);
  font-size:.62rem;
  font-weight:700;
  flex-shrink:0;
}
.care-item__name{ font-size:.78rem; font-weight:700; }
.care-item__med{ font-size:.68rem; color:#5A6142; }

/* ---------- Lead form ---------- */
.lead-form__label{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:.4rem;
}
.lead-form__input{
  width:100%;
  padding:.85rem 1rem;
  border-radius:.75rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--ink);
  /* Must stay >=16px: iOS Safari auto-zooms the page on focus for any
     input with a smaller computed font-size, which reads as a jarring
     zoom-jump on mobile every time a field is tapped. */
  font-size:1rem;
  transition:border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.lead-form__input::placeholder{ color:rgba(244,246,236,.35); }
.lead-form__input:focus{
  outline:none;
  border-color:var(--teal);
  background:rgba(255,255,255,.1);
}
.lead-form__status{
  min-height:1.2em;
  font-size:.85rem;
  font-weight:500;
  text-align:center;
}
.lead-form__status.is-success{ color:var(--teal); }
.lead-form__status.is-error{ color:#FA7F46; }

/* ---------- Reveal-on-scroll (fallback + GSAP hook) ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
}
[data-reveal].is-revealed{
  opacity:1;
  transform:none;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

/* ---------- Footer ---------- */
.footer-link{
  color:rgba(244,246,236,.7);
  transition:color .25s var(--ease-out);
}
.footer-link:hover{ color:var(--ink); }

/* ---------- Focus states ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg-deep); }
::-webkit-scrollbar-thumb{ background:var(--bg-card-2); border-radius:999px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}