/* ===== Brand tokens ===== */
:root{
  --stemzo-orange:#F5841F;
  --stemzo-purple:#7B3FA0;
  --stemzo-green:#4CAF50;
  --stemzo-teal:#17A2A0;

  --accent:var(--stemzo-orange);
  --accent-2:#ffb562;
  --accent-soft:rgba(245,132,31,0.14);

  --radius:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-head:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;

  /* Warm, editorial "paper" tone rather than a generic light-gray SaaS bg */
  --bg:#F3ECE1;
  --surface:#FBF7F0;
  --text:#171512;
  --text-dim:#6b6255;
  --border:rgba(23,21,18,0.14);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:#F3ECE1;
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; letter-spacing:-0.03em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.accent{color:var(--accent);}

/* ===== Intro loader — small stamp cards scatter in from off-center and
   converge behind the logo, then the whole overlay fades away. This is the
   entrance choreography borrowed from abetkaua.com's card system, rebuilt
   with Stemzo's own colors and mark instead of their letter cards. ===== */
html.loading{ overflow:hidden; height:100%; }
.loader{
  position:fixed; inset:0; z-index:500; background:#171512;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-stage{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.loader-card{
  position:absolute; width:60px; height:82px; border-radius:8px;
  border:1.5px solid #171512; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; color:#171512; font-size:13px;
  opacity:0; transform:translate(var(--x,0), var(--y,0)) rotate(var(--r,0deg)) scale(.6);
  animation:loaderConverge 1s var(--ease) forwards;
}
.loader-card:nth-child(1){ animation-delay:.05s; }
.loader-card:nth-child(2){ animation-delay:.16s; }
.loader-card:nth-child(3){ animation-delay:.27s; }
.loader-card:nth-child(4){ animation-delay:.38s; }
.loader-logo{
  position:relative; width:130px; opacity:0; animation:loaderLogoPop .5s var(--ease) forwards; animation-delay:.62s;
}
.loader-logo img{ width:100%; display:block; }
@keyframes loaderConverge{
  0%{ opacity:0; transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(.6); }
  55%{ opacity:1; }
  100%{ opacity:.92; transform:translate(calc(var(--x) * .16), calc(var(--y) * .16)) rotate(calc(var(--r) * .25)) scale(.88); }
}
@keyframes loaderLogoPop{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Editorial grid guides — thin vertical lines running the full page,
   a nod to print/magazine layout grids rather than a glowing SaaS background ===== */
.grid-lines{ position:fixed; inset:0; z-index:0; pointer-events:none; max-width:1180px; margin:0 auto; }
.grid-lines span{
  position:absolute; top:0; bottom:0; width:1px; background:rgba(23,21,18,0.07);
}
.grid-lines span:nth-child(1){ left:0; }
.grid-lines span:nth-child(2){ left:25%; }
.grid-lines span:nth-child(3){ left:50%; }
.grid-lines span:nth-child(4){ left:75%; }
.grid-lines span:nth-child(5){ right:0; }

body > *:not(.grid-lines){ position:relative; z-index:1; }

[data-theme="dark"]{ --bg:#17140F; --surface:#221E17; --text:#F6F1E8; --text-dim:#B4AB9C; --border:rgba(246,241,232,0.14); }
[data-theme="light"]{ --bg:#F3ECE1; --surface:#FBF7F0; --text:#171512; --text-dim:#6b6255; --border:rgba(23,21,18,0.14); }

section[data-theme], header[data-theme], footer[data-theme]{
  background:var(--bg); color:var(--text);
}

/* Giant repeating wordmark texture used behind the hero for atmosphere —
   still a print-poster outline rather than a solid block of color, but
   bold enough now to actually read as a deliberate design element instead
   of a barely-there watermark. */
.bg-type{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:22vw; line-height:1;
  color:rgba(245,132,31,0.05); -webkit-text-stroke:1.5px rgba(23,21,18,0.16);
  white-space:nowrap; letter-spacing:-.02em;
  animation:bgDrift 16s ease-in-out infinite alternate;
}
/* A slow side-to-side drift plus a gentle breathing scale on the giant
   background wordmark, so the hero never reads as a static screenshot. */
@keyframes bgDrift{
  0%{ transform:translateX(-3.5%) scale(1); }
  50%{ transform:translateX(0%) scale(1.035); }
  100%{ transform:translateX(3.5%) scale(1); }
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:15px;
  font-family:var(--font-head);
  cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  will-change:transform;
}
.btn-primary{
  background:var(--stemzo-orange);
  color:#171512;
  box-shadow:4px 4px 0 0 #171512;
}
.btn-primary:hover{ box-shadow:6px 6px 0 0 #171512; transform:translate(-2px,-2px); }
/* A slow, subtle breathing shadow reserved for the two standalone hero/CTA
   buttons (via .btn-pulse) — not every primary button site-wide, so it
   reads as an invitation rather than visual noise next to the nav and form. */
.btn-pulse{ animation:btnPulse 3.2s ease-in-out infinite; }
.btn-pulse:hover{ animation-play-state:paused; }
@keyframes btnPulse{
  0%, 100%{ box-shadow:4px 4px 0 0 #171512; }
  50%{ box-shadow:4px 4px 0 0 #171512, 0 0 0 6px rgba(245,132,31,.18); }
}
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--text);
}
.btn-ghost:hover{ background:var(--text); color:var(--bg); }
.btn:active{ transform:scale(.94) !important; box-shadow:none !important; }
.btn-sm{ padding:10px 20px; font-size:14px; }

/* ===== Nav — always a light frosted bar regardless of section beneath ===== */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(243,236,225,.82);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1.5px solid transparent;
  transition:border-color .3s var(--ease);
}
#nav.scrolled{ border-bottom-color:rgba(23,21,18,.14); }
.nav-inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:24px;
}
.logo{ display:flex; align-items:center; }
.logo-mark-img{ height:26px; width:auto; }
.nav-links{ display:flex; gap:26px; margin-left:auto; font-size:14px; font-weight:600; color:#171512; }
.nav-links a{ transition:color .2s; }
.nav-links a:hover{ color:var(--accent); }
.nav-inner > .btn{ margin-left:8px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; margin-left:auto; }
.nav-toggle span{
  width:22px; height:2px; background:#171512;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
/* Hamburger morphs into an X on open — a small tap payoff that also
   confirms the toggle registered, rather than a flat instant swap. */
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-mobile{
  display:flex; flex-direction:column; gap:16px; padding:0 24px;
  background:rgba(243,236,225,.97); backdrop-filter:blur(16px);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
}
.nav-mobile.open{ display:flex; max-height:420px; opacity:1; padding:8px 24px 24px; }
.nav-mobile a{
  color:#171512; font-size:15px; font-weight:600;
  opacity:0; transform:translateX(-10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
/* Links cascade in one after another once the panel is open, instead of
   all appearing at once with the panel itself. */
.nav-mobile.open a{ opacity:1; transform:translateX(0); }
.nav-mobile.open a:nth-child(1){ transition-delay:.05s; }
.nav-mobile.open a:nth-child(2){ transition-delay:.1s; }
.nav-mobile.open a:nth-child(3){ transition-delay:.15s; }
.nav-mobile.open a:nth-child(4){ transition-delay:.2s; }
.nav-mobile.open a:nth-child(5){ transition-delay:.25s; }
.nav-mobile.open .btn{ transition-delay:.3s; }

/* ===== Hero ===== */
.hero{
  position:relative; min-height:80svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  padding:96px 24px 40px; overflow:hidden;
}
.hero-inner{ position:relative; z-index:2; max-width:860px; text-align:center; }

/* Decorative brand logos drifting slowly behind section content — framed
   as the same bordered chip used everywhere else on the site (marquee,
   portfolio cards, brand wall) so the motion layer matches the rest of
   the design instead of floating as bare, unstyled images. Reused across
   multiple sections, not just the hero, so the motion isn't confined to
   the top of the page. */
.float-logos{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.float-logo-chip{
  position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center;
  padding:9px 16px; border:1.5px solid var(--text); border-radius:999px; background:#FBF7F0;
  opacity:.6;
  transform:translate(-50%,-50%) translate(var(--x), var(--y)) rotate(var(--r));
  animation:floatDrift var(--d, 7s) ease-in-out infinite;
}
.float-logo-chip img{ height:20px; width:auto; object-fit:contain; display:block; }
@keyframes floatDrift{
  0%,100%{ transform:translate(-50%,-50%) translate(var(--x), var(--y)) rotate(var(--r)); }
  50%{ transform:translate(-50%,-50%) translate(calc(var(--x) * 1.15), calc(var(--y) * 1.15)) rotate(calc(var(--r) * -1)); }
}
@media (max-width: 860px){ .float-logos{ display:none; } }

/* Belt-and-braces containment: force every real content block that shares
   a section with .float-logos onto its own higher stacking layer, so the
   decorative chips can never visually sit on top of running text even if
   a transform/animation elsewhere quietly opens a new stacking context. */
.float-logos ~ .section-head,
.float-logos ~ .feature-row,
.float-logos ~ .meaning-grid,
.float-logos ~ .meaning-result,
.float-logos ~ .stats-grid,
.float-logos ~ .founder-card,
.float-logos ~ .reveal{
  position:relative; z-index:2;
}
.eyebrow{
  display:inline-block; padding:8px 16px; border-radius:999px; border:1.5px solid var(--text);
  font-size:13px; color:var(--text); margin-bottom:18px; font-weight:700;
  opacity:0; animation:heroFadeUp .7s var(--ease) forwards;
}
/* A single choreographed load-in for the hero: the eyebrow, sub-copy,
   buttons, stats and scroll-cue each fade/rise into place a beat after
   one another (logo + headline already animate via logoIntro/wordUp
   above), so the whole hero feels directed rather than snapping in at
   once. */
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-sub{ opacity:0; animation:heroFadeUp .7s var(--ease) .55s forwards; }
.hero-actions{ opacity:0; animation:heroFadeUp .7s var(--ease) .7s forwards; }
.hero-stats{ opacity:0; animation:heroFadeUp .7s var(--ease) .85s forwards; }
.scroll-cue{ opacity:0; animation:heroFadeUp .6s var(--ease) 1s forwards; }
.hero-stat{ transition:transform .3s var(--ease); }
.hero-stat:hover{ transform:translateY(-4px); }
@media (pointer:coarse){
  .hero-stat:active{ transform:scale(.94); }
}
.card-tag.hero-tag{ position:static; display:block; margin:0 auto 14px; font-size:12px; color:var(--text-dim); }

/* Real logo, presented as a tilting printed card rather than a redrawn font */
.logo-card{
  position:relative; width:min(70vw, 320px); margin:0 auto 20px; perspective:1000px;
}
/* A soft, slowly breathing halo behind the card — sits behind everything
   (z-index:-1) so it reads as ambient light rather than a hard shape. */
.logo-card::before{
  content:''; position:absolute; z-index:-1; inset:-18%;
  background:radial-gradient(circle, rgba(245,132,31,.28), transparent 70%);
  filter:blur(10px); animation:logoGlow 4.5s ease-in-out infinite;
}
@keyframes logoGlow{
  0%, 100%{ opacity:.55; transform:scale(.94); }
  50%{ opacity:1; transform:scale(1.06); }
}
.logo-card-inner{
  position:relative; transform-style:preserve-3d;
  transition:transform .2s var(--ease);
  filter:drop-shadow(10px 14px 0 rgba(23,21,18,.9));
  animation:logoIntro .9s var(--ease) forwards, idleFloat 7s ease-in-out .9s infinite;
}
/* A dramatic settle-in on page load — the card drops in from an oblique
   angle and eases into its regular resting tilt, rather than just fading
   up flat with the rest of the hero. */
@keyframes logoIntro{
  0%{ opacity:0; transform:rotateX(55deg) rotateY(50deg) rotate(-12deg) scale(.4) translateY(-30px); }
  100%{ opacity:1; transform:rotateX(11deg) rotateY(-15deg) rotate(-4deg) scale(1) translateY(0); }
}
.logo-slide{
  position:absolute; inset:0; width:100%; height:auto; opacity:0; transition:opacity 1.1s ease-in-out;
}
.logo-slide.active{ opacity:1; position:relative; }
.logo-card-glare{
  position:absolute; inset:-10%; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  background-size:250% 250%; background-position:120% 0%; mix-blend-mode:soft-light;
}
/* On touch devices there's no cursor to sweep the glare via JS, so it
   plays on a gentle automatic loop instead — the card still catches the
   light periodically rather than sitting completely inert. */
@media (pointer:coarse){
  .logo-card-glare{ animation:glareSweep 5s ease-in-out infinite; }
}
@keyframes glareSweep{
  0%, 100%{ background-position:130% -20%; }
  50%{ background-position:-10% 40%; }
}
@keyframes idleFloat{ 0%,100%{ transform:rotateX(11deg) rotateY(-15deg) rotate(-4deg); } 50%{ transform:rotateX(-8deg) rotateY(15deg) rotate(4deg); } }

.hero h1{ font-size:clamp(2.4rem, 6.2vw, 4.6rem); line-height:1.02; margin-bottom:16px; color:#171512; }
.hero h1 .word{ display:inline-block; opacity:0; transform:translateY(24px); animation:wordUp .7s var(--ease) forwards; }
@keyframes wordUp{ to{ opacity:1; transform:translateY(0); } }
.hero-sub{ font-size:clamp(1rem, 1.6vw, 1.2rem); color:var(--text-dim); max-width:620px; margin:0 auto 22px; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }

.hero-stats{ display:flex; justify-content:center; gap:clamp(20px,5vw,56px); flex-wrap:wrap; }
.hero-stat{ text-align:center; }
.hero-stat .count{ display:block; font-family:var(--font-head); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; color:#171512; }
.hero-stat small{ color:var(--text-dim); font-size:13px; letter-spacing:.02em; font-weight:600; }

/* In normal document flow as the last flex child of .hero (not absolutely
   positioned over the content) so it can never drift out of horizontal
   center or collide with the stats row above it, at any content height. */
.scroll-cue{
  position:relative; flex:0 0 auto; z-index:2;
  width:26px; height:42px; border:1.5px solid var(--text); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; width:4px; height:8px; border-radius:2px;
  background:var(--accent); transform:translateX(-50%);
  animation:scrollcue 1.8s infinite;
}
@keyframes scrollcue{ 0%{opacity:1; top:8px;} 70%{opacity:0; top:22px;} 100%{opacity:0; top:8px;} }

/* Scroll progress bar */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:60;
  background:linear-gradient(90deg, var(--stemzo-orange), var(--stemzo-purple), var(--stemzo-teal));
}

/* ===== Sections shared ===== */
section{ padding:40px 24px; max-width:1180px; margin:0 auto; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 20px; }
.section-label{
  display:inline-block; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px; font-weight:700;
}
.section-label.center{ display:block; text-align:center; }
.section-head h2{ font-size:clamp(2rem, 4.2vw, 3.1rem); }

/* ===== Trust marquee ===== */
.trust{ padding:32px 0 24px; max-width:100%; }
.trust .section-label{ display:block; margin-bottom:16px; text-align:center; }
.marquee{ overflow:hidden; position:relative; margin-bottom:14px; mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);}
.marquee-track{ display:flex; gap:14px; width:max-content; }
.track-left{ animation:scrollLeft 22s linear infinite; }
.track-right{ animation:scrollRight 22s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scrollLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes scrollRight{ from{transform:translateX(-50%);} to{transform:translateX(0);} }
.chip{
  flex:0 0 auto; padding:11px 20px; border:1.5px solid var(--text); border-radius:999px;
  color:var(--text); font-size:14px; font-weight:600; background:var(--surface);
}

/* Real brand logos, shown in their own original colors everywhere — the
   chip/stage background is fixed to a neutral, light "card" tone regardless
   of the section's own light/dark theme, so a colorful mark always sits on
   a backdrop it has enough contrast against instead of vanishing into a
   dark section or clashing with a tinted one. */
.logo-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:8px 18px; border:1.5px solid var(--text); border-radius:999px;
  background:#FBF7F0;
}
.logo-chip img{ max-height:26px; max-width:100px; width:auto; height:auto; object-fit:contain; display:block; }
.logo-chip.logo-chip-native{ padding:6px 14px; }
.logo-chip.logo-chip-native img{ max-height:32px; border-radius:3px; }
.logo-chip.logo-chip-xl{ height:54px; }
.logo-chip.logo-chip-xl img{ max-height:34px; max-width:120px; }

/* ===== Services / "What we do" — a responsive tile grid, same design on
   phone and desktop (2-up on narrow screens, 4-across on wide ones) rather
   than a plain list of icon+text rows. Every tile plays three animations
   as it scrolls into view: the card itself fades/lifts in, the icon panel
   pops in with a spring overshoot, and the icon's own line-art strokes
   draw themselves on — the same "grow" technique already used for the
   Stem/Zo icons above, reused here for a consistent, higher-production feel. ===== */
.feature-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;
}
.feature-row, .feature-row.reverse{
  position:relative; overflow:hidden; direction:ltr;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:20px;
  padding:30px 22px; cursor:default;
  transition:transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.feature-row.reverse .feature-text{ direction:ltr; }
/* A soft accent glow tucked in the corner, dormant until hover/tap. */
.feature-row::before{
  content:''; position:absolute; top:-30px; right:-30px; width:130px; height:130px;
  border-radius:50%; pointer-events:none; background:radial-gradient(circle, var(--accent-soft), transparent 72%);
  opacity:0; transform:scale(.6); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.feature-row:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:6px 6px 0 0 var(--accent); }
.feature-row:hover::before{ opacity:1; transform:scale(1); }

.icon-panel{
  width:88px; height:88px; border-radius:20px; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, var(--accent-soft), var(--surface) 72%);
  border:1.5px solid var(--text); color:var(--text); position:relative; z-index:1;
  transition:transform .3s var(--ease);
}
.icon-panel svg{ width:40px; height:40px; transition:transform .35s var(--ease); }
.feature-row:hover .icon-panel{ transform:scale(1.08) rotate(-4deg); }
.feature-row:hover .icon-panel svg{ transform:rotate(8deg) scale(1.1); }
.feature-text h3{ font-size:1.25rem; margin-bottom:6px; }
.feature-text p{ color:var(--text-dim); font-size:.92rem; max-width:320px; }

/* Icon panel pops in with a spring overshoot, staggered per tile. */
.feature-grid .icon-panel{
  transform:scale(.5); opacity:0;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .4s var(--ease);
}
.feature-grid .reveal.in-view .icon-panel{ transform:scale(1); opacity:1; }
.feature-grid .reveal.in-view:hover .icon-panel{ transform:scale(1.08) rotate(-4deg); }
.feature-grid .feature-row:nth-child(1) .icon-panel{ transition-delay:.1s; }
.feature-grid .feature-row:nth-child(2) .icon-panel{ transition-delay:.18s; }
.feature-grid .feature-row:nth-child(3) .icon-panel{ transition-delay:.26s; }
.feature-grid .feature-row:nth-child(4) .icon-panel{ transition-delay:.34s; }

/* The icon's own line art draws itself in, just like the grow-line/star-path
   icons in the "Stem + Zo" section — every feature icon here is plain
   stroke line-art (fill:none), so this applies cleanly across all four. */
.icon-panel svg path, .icon-panel svg rect, .icon-panel svg circle{
  stroke-dasharray:220; stroke-dashoffset:220;
  transition:stroke-dashoffset 1.1s var(--ease) .35s;
}
.feature-grid .reveal.in-view svg path,
.feature-grid .reveal.in-view svg rect,
.feature-grid .reveal.in-view svg circle{ stroke-dashoffset:0; }

/* Rows arrive one after another rather than all at once. Counted with
   nth-child (not nth-of-type) since .section-head is also a sibling <div>
   ahead of the four .feature-row elements, which would otherwise throw
   nth-of-type's count off by one. */
.feature-grid .feature-row.reveal:nth-child(1){ transition-delay:0s; }
.feature-grid .feature-row.reveal:nth-child(2){ transition-delay:.08s; }
.feature-grid .feature-row.reveal:nth-child(3){ transition-delay:.16s; }
.feature-grid .feature-row.reveal:nth-child(4){ transition-delay:.24s; }

@media (min-width:1000px){
  .feature-grid{ grid-template-columns:repeat(4, 1fr); gap:20px; }
  .feature-text p{ max-width:none; }
}

/* ===== Brand wall — a loose cluster of rotated capsule badges (matching
   the supplied reference layout) rather than a grid or marquee. Every
   badge is sized via its own --w/--h custom properties, and the logo
   inside is bounded with max-width/max-height:100% — never a shrink-to-fit
   column — so a wide wordmark (Ambuja Neotia) and a squarer mark (Zydus)
   both always display in full, whatever their native aspect ratio. Small
   per-badge vertical nudges (nth-child) break the row grid the flex-wrap
   would otherwise produce, so it reads as hand-placed, not tabular. ===== */
.brand-cloud{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 10px; max-width:1000px; margin:0 auto;
}
.brand-badge{
  position:relative; flex:0 0 auto; width:var(--w, 150px); height:var(--h, 90px);
  display:flex; align-items:center; justify-content:center;
  background:#FBF7F0; border:2px solid var(--accent); border-radius:999px;
  padding:10px 16px; text-decoration:none; color:#171512;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  animation:badgeZoom 4.6s ease-in-out infinite;
}
/* Every badge continuously breathes in and out at its own resting angle —
   the whole cluster stays gently, unmistakably in motion rather than
   sitting static until a cursor happens to land on one. */
@keyframes badgeZoom{
  0%, 100%{ transform:rotate(var(--r, 0deg)) scale(1); }
  50%{ transform:rotate(var(--r, 0deg)) scale(1.09); }
}
.brand-badge img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
}
.brand-badge:nth-child(3n){ margin-top:12px; }
.brand-badge:nth-child(4n){ margin-top:-10px; }
.brand-badge:nth-child(5n){ margin-top:6px; }
/* No animation-delay here on purpose — every badge shares the exact same
   badgeZoom timing so the whole cluster zooms in and out together, as one
   synchronized breathing motion rather than a staggered ripple. */
/* animation:none on hover hands control of `transform` back to the regular
   cascade (a running/paused CSS animation otherwise keeps ownership of any
   property it animates), so the hover pop reliably overrides the zoom loop
   instead of fighting it. */
.brand-badge:hover, .brand-badge:focus-visible{
  animation:none; transform:rotate(0deg) scale(1.16); border-color:#171512;
  box-shadow:5px 5px 0 0 var(--accent); z-index:2;
}
.brand-badge-xl{ padding:14px 18px; }
.brand-badge-native img{ border-radius:10px; }
.brand-badge-announce{ border-style:dashed; }
.brand-badge-announce:hover, .brand-badge-announce:focus-visible{ border-style:dashed; }
.brand-badge-tag{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:1;
  font-family:var(--font-head); font-weight:700; font-size:.6rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bg); background:var(--accent);
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
/* Staggered fade-in as the cluster scrolls into view. Opacity only here —
   `transform` (rotate + the continuous zoom) is left entirely to the
   badgeZoom animation above, since a running animation always keeps
   ownership of any property it's animating and would otherwise silently
   cancel out a transform set via this transition. */
.brand-cloud.reveal .brand-badge{ opacity:0; transition:opacity .5s var(--ease); }
.brand-cloud.reveal.in-view .brand-badge{ opacity:1; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(1){ transition-delay:0s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(2){ transition-delay:.04s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(3){ transition-delay:.08s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(4){ transition-delay:.12s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(5){ transition-delay:.16s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(6){ transition-delay:.2s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(7){ transition-delay:.24s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(8){ transition-delay:.28s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(9){ transition-delay:.32s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(10){ transition-delay:.36s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(11){ transition-delay:.4s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(12){ transition-delay:.44s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(13){ transition-delay:.48s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(14){ transition-delay:.52s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(15){ transition-delay:.56s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(16){ transition-delay:.6s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(17){ transition-delay:.64s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(18){ transition-delay:.68s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(19){ transition-delay:.72s; }
.brand-cloud.reveal.in-view .brand-badge:nth-child(20){ transition-delay:.76s; }

/* ===== Name meaning (dark, dramatic interlude) ===== */
.meaning-grid{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.meaning-card{
  flex:1 1 280px; max-width:340px; background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; text-align:center;
}
.meaning-visual{ height:84px; display:grid; place-items:center; color:var(--accent); margin-bottom:12px; }
.meaning-visual svg{ height:96px; }
.meaning-card h3{ font-size:1.5rem; margin-bottom:10px; }
.meaning-card p{ color:var(--text-dim); font-size:.95rem; }
.meaning-plus{ font-family:var(--font-head); font-size:2rem; color:var(--accent); font-weight:700; }
/* The two cards and the plus between them arrive in a quick left-to-right beat. */
.meaning-grid .reveal:nth-child(1){ transition-delay:0s; }
.meaning-grid .reveal:nth-child(2){ transition-delay:.1s; }
.meaning-grid .reveal:nth-child(3){ transition-delay:.2s; }
.meaning-result{
  text-align:center; font-family:var(--font-head); font-weight:700; font-size:clamp(1.4rem,3.2vw,2.1rem);
}
.grow-line{ stroke-dasharray:80; stroke-dashoffset:80; transition:stroke-dashoffset 1s var(--ease); }
.grow-leaf{ opacity:0; transform:scale(.6); transform-origin:40px 50px; transition:opacity .5s var(--ease) .6s, transform .5s var(--ease) .6s; }
.grow-dot{ opacity:0; transition:opacity .4s var(--ease) 1s; }
.reveal.in-view .grow-line{ stroke-dashoffset:0; }
.reveal.in-view .grow-leaf{ opacity:1; transform:scale(1); }
.reveal.in-view .grow-dot{ opacity:1; }
.star-path{ stroke-dasharray:220; stroke-dashoffset:220; transition:stroke-dashoffset 1.1s var(--ease); }
.reveal.in-view .star-path{ stroke-dashoffset:0; }

/* ===== About ===== */
.about-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:28px; align-items:start; }
.about-grid h2{ font-size:clamp(1.8rem,3.2vw,2.4rem); margin-top:8px; }
.about-copy p{ color:var(--text-dim); margin-bottom:9px; }
/* Paragraphs fade in one after another rather than as a single flat block. */
.about-copy .reveal:nth-child(1){ transition-delay:0s; }
.about-copy .reveal:nth-child(2){ transition-delay:.08s; }
.about-copy .reveal:nth-child(3){ transition-delay:.16s; }
.about-copy .reveal:nth-child(4){ transition-delay:.24s; }

/* ===== Statement — one big centered editorial line, the way abetkaua.com
   drops giant plain-language claims between sections ===== */
.statement{ text-align:center; padding:24px 24px 8px; }
.statement-eyebrow{ display:block; font-size:14px; color:var(--text-dim); margin-bottom:16px; font-weight:600; }
.statement-line{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.7rem,4.4vw,3.2rem); line-height:1.2; max-width:900px; margin:0 auto; letter-spacing:-.02em; }
.accent-pulse{ color:var(--accent); font-weight:700; display:inline-block; }

/* ===== Marquee band — a full-bleed strip of giant outlined repeating text,
   echoing the bold marquee bands abetkaua.com uses between sections ===== */
.marquee-band{ overflow:hidden; max-width:100%; padding:14px 0; }
.marquee-band-track{ display:flex; width:max-content; animation:scrollLeft 26s linear infinite; }
.marquee-band-track span{
  font-family:var(--font-head); font-weight:700; font-size:clamp(2rem,7vw,4.6rem);
  color:transparent; -webkit-text-stroke:1.5px var(--text); white-space:nowrap; letter-spacing:-.01em;
}

/* ===== Card anatomy shared by stat cards — bracketed corner
   tag, corner index number, and a circular "+" that expands a short blurb
   in place. This is the transferable card-system pattern from abetkaua.com's
   letter cards, rebuilt with Stemzo's own content and colors. ===== */
.card-tag{
  position:absolute; top:16px; left:18px; font-family:var(--font-head); font-weight:700;
  font-size:11px; letter-spacing:.04em; color:var(--text-dim);
}
.card-num{
  position:absolute; bottom:16px; left:18px; font-family:var(--font-head); font-weight:700;
  font-size:13px; color:var(--text-dim);
}
.card-expand{
  position:absolute; bottom:12px; right:14px; width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--text); background:var(--bg); color:var(--text); font-size:16px; font-weight:700;
  line-height:1; display:grid; place-items:center; cursor:pointer;
  transition:transform .3s var(--ease), background .2s, color .2s;
}
.card-expand:hover{ background:var(--text); color:var(--bg); }
.stat-card.active .card-expand{ transform:rotate(45deg); }
.card-more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); margin-top:14px; }
.stat-card.active .card-more{ grid-template-rows:1fr; }
.card-more-inner{ overflow:hidden; }
.card-more-inner p{ color:var(--text-dim); font-size:.85rem; line-height:1.5; }

/* ===== Founder ===== */
.founder-card{
  display:grid; grid-template-columns:220px 1fr; gap:22px; align-items:start;
  background:var(--surface); border:1.5px solid var(--text); border-radius:20px; padding:24px;
}
.founder-photo img{ width:100%; border-radius:14px; aspect-ratio:1/1; object-fit:cover; border:1.5px solid var(--text); }
.founder-copy h2{ font-size:clamp(1.7rem,3.2vw,2.3rem); margin:4px 0 14px; }
.founder-pull{ font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:var(--text); margin-bottom:14px; padding-left:16px; border-left:3px solid var(--accent); }
.founder-copy p{ color:var(--text-dim); margin-bottom:10px; font-size:.96rem; }

/* ===== Contact ===== */
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:28px; }
.field{ margin-bottom:14px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px; font-weight:600; }
.field input, .field textarea{
  width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:8px;
  padding:12px 14px; color:var(--text); font-family:var(--font-body); font-size:15px;
  transition:border-color .2s;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--text); }
.hp-field{ position:absolute; left:-9999px; }
.form-note{ font-size:12px; color:var(--text-dim); margin-top:14px; }
.contact-info{ display:flex; flex-direction:column; gap:26px; }
.info-block h4{ font-family:var(--font-head); font-size:14px; color:var(--accent); margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; }
.info-block p{ color:var(--text-dim); font-size:.95rem; }
.info-block a{ color:var(--text); transition:color .2s; }
.info-block a:hover{ color:var(--accent); }

/* ===== Segments / Tabs ===== */
.tab-buttons{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; position:relative; margin-bottom:26px;
  border-bottom:1.5px solid var(--border); padding-bottom:0;
}
.tab-btn{
  background:none; border:none; color:var(--text-dim); font-family:var(--font-head);
  font-size:15px; font-weight:700; padding:12px 18px; cursor:pointer; position:relative; z-index:1;
  transition:color .25s;
}
.tab-btn.active, .tab-btn:hover{ color:var(--text); }
.tab-indicator{
  position:absolute; bottom:-1.5px; left:0; height:2.5px; background:var(--accent);
  transition:transform .35s var(--ease), width .35s var(--ease);
}
.tab-panel{ display:none; text-align:center; max-width:640px; margin:0 auto; color:var(--text-dim); font-size:1.05rem; animation:fadein .4s var(--ease); }
.tab-panel.active{ display:block; }
@keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ===== Stats — flat "stamp" style cards, dark section ===== */
.stats{ max-width:100%; padding:40px 24px; }
.stats .section-head{ margin-bottom:20px; }
.stats-grid{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.stat-card{
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:22px 18px 26px; text-align:center; transition:transform .35s var(--ease); position:relative;
}
.stat-card:nth-child(3n){ background:linear-gradient(rgba(123,63,160,.14),rgba(123,63,160,.14)), var(--surface); }
.stat-card .count{ display:block; font-family:var(--font-head); font-size:2.3rem; font-weight:700; color:var(--accent); margin-bottom:8px; }
.stat-card .badge-icon{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); font-weight:700; margin-bottom:12px;
}
.stat-card p{ color:var(--text-dim); font-size:14px; }

/* ===== FAQ accordion ===== */
.accordion{ max-width:760px; margin:0 auto; }
.acc-item{ border-bottom:1.5px solid var(--border); }
.acc-trigger{
  width:100%; text-align:left; background:none; border:none; color:var(--text);
  font-family:var(--font-head); font-size:1.05rem; font-weight:600; padding:22px 4px;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.acc-icon{ color:var(--accent); font-size:1.4rem; transition:transform .3s var(--ease); }
.acc-item.active .acc-icon{ transform:rotate(45deg); }
.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.acc-item.active .acc-panel{ grid-template-rows:1fr; }
.acc-inner{ overflow:hidden; color:var(--text-dim); padding-right:32px; }
.acc-item.active .acc-inner{ padding-bottom:22px; }

/* ===== CTA band — one bold flat color block ===== */
.cta-band{
  text-align:center; background:var(--stemzo-orange);
  border-radius:24px; padding:36px 24px; max-width:1130px; color:#171512;
}
.cta-band h2{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:8px; color:#171512; }
.cta-band p{ color:rgba(23,21,18,.75); margin-bottom:20px; font-weight:600; }
.cta-band .btn-primary{ background:#171512; color:#F3ECE1; box-shadow:4px 4px 0 0 rgba(0,0,0,.3); }
.cta-band .btn-primary:hover{ box-shadow:6px 6px 0 0 rgba(0,0,0,.3); }

/* ===== Footer ===== */
footer{ padding:26px 24px 16px; border-top:1.5px solid var(--border); }
.footer-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px; margin-bottom:16px; }
.footer-grid h4{ font-size:14px; margin-bottom:16px; color:var(--text-dim); font-family:var(--font-head); }
.footer-grid a{ display:block; color:var(--text-dim); font-size:14px; margin-bottom:10px; transition:color .2s; }
.footer-grid a:hover{ color:var(--accent); }
.footer-blurb{ color:var(--text-dim); font-size:14px; margin-top:14px; max-width:280px; }
.copyright{ text-align:center; color:var(--text-dim); font-size:13px; max-width:1180px; margin:0 auto; }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* Stamp cards fly in tilted and settle level — bigger throw distance and
   rotation than a typical fade-in so the motion actually reads on scroll. */
.stat-card.reveal{ transform:translateY(60px) rotate(-8deg) scale(.92); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.stat-card.reveal:nth-child(even){ transform:translateY(60px) rotate(8deg) scale(.92); }
.stat-card.reveal.in-view{ transform:translateY(0) rotate(0deg) scale(1); }
.stat-card.in-view:hover{ transform:translateY(-4px); }

/* Desktop-only 3D tilt targets get a light lift on hover for extra depth */
@media (hover:hover) and (pointer:fine){
  .icon-panel.tilt-target:hover, .founder-card.tilt-target:hover{ transform:translateY(-4px); }
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-inner > .btn-primary.btn-sm{ display:none; }

  section{ padding:30px 20px; }
  .bg-type{ font-size:26vw; }

  /* The tile grid/icon-pop/stroke-draw animations are already the base
     design (shared with desktop) — this just tightens sizing to fit two
     tiles comfortably on a phone-width screen. */
  .feature-grid{ gap:12px; }
  .feature-row, .feature-row.reverse{ border-radius:16px; padding:18px 12px; gap:10px; }
  .icon-panel{ width:64px; height:64px; }
  .icon-panel svg{ width:30px; height:30px; }
  .feature-text h3{ font-size:.98rem; margin-bottom:6px; }
  .feature-text p{ font-size:.78rem; max-width:none; line-height:1.45; }

  .about-grid{ grid-template-columns:1fr; gap:24px; }

  .brand-cloud{ gap:8px 6px; }
  .brand-badge{ width:calc(var(--w, 150px) * .74); height:calc(var(--h, 90px) * .74); padding:8px 12px; }
  .brand-badge-xl{ padding:10px 14px; }

  .meaning-grid{ flex-direction:column; }
  .meaning-plus{ transform:rotate(90deg); }

  .founder-card{ grid-template-columns:1fr; padding:32px 24px; text-align:center; }
  .founder-photo img{ max-width:180px; margin:0 auto; }
  .founder-pull{ text-align:left; }

  .contact-grid{ grid-template-columns:1fr; gap:28px; }
  .form-row{ grid-template-columns:1fr; }

  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-card, .stat-card.reveal.in-view{ transform:none !important; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }

  /* Tabs become a swipeable pill row instead of wrapping awkwardly */
  .tab-buttons{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; padding-bottom:4px; margin:0 -20px 28px; padding-inline:20px;
  }
  .tab-buttons::-webkit-scrollbar{ display:none; }
  .tab-btn{ flex:0 0 auto; scroll-snap-align:start; padding:10px 16px; }

  /* Bigger, thumb-friendly tap targets everywhere */
  .btn{ padding:15px 26px; }
  .acc-trigger{ padding:20px 4px; font-size:1rem; }
  .nav-mobile a, .nav-mobile .btn{ padding:6px 0; }

  /* Snappier reveal with a bit of scale + tilt baked in — plain-fade felt
     flat on a phone where content arrives one card at a time; this reads
     as more alive without slowing down fast scrolling. */
  .reveal{
    transform:translateY(16px) scale(.96) rotate(-1.2deg);
    transition-duration:.45s;
  }
  .reveal.in-view{ transform:translateY(0) scale(1) rotate(0deg); }

  /* Brand partners is a desktop-only showcase for now — the rotated badge
     cluster needs real width to breathe, so it's hidden below 860px
     rather than squeezed into a cramped, harder-to-read stack. */
  .brandwall{ display:none; }

  /* "About our business" and the "distribution leader" statement are both
     plain text blocks with nothing visual going on — on a phone, where
     there's no hover/tilt to fall back on, that reads as flat. Word-by-word
     pop-in on the headings plus a growing underline and a softly pulsing
     highlight give both sections some life of their own. */
  .word-pop{
    display:inline-block; opacity:0; transform:translateY(12px) rotate(-4deg);
    transition:opacity .4s var(--ease), transform .4s var(--ease);
    transition-delay:calc(var(--i, 0) * .045s);
  }
  .reveal.in-view .word-pop{ opacity:1; transform:translateY(0) rotate(0deg); }

  .about-grid h2{ position:relative; }
  .about-grid h2::after{
    content:''; display:block; width:0; height:3px; background:var(--accent);
    margin-top:12px; transition:width .6s var(--ease) .35s;
  }
  .reveal.in-view h2::after{ width:56px; }

  .accent-pulse{ animation:accentPulse 2.2s ease-in-out infinite; }
  @keyframes accentPulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
  }

  .hero{ padding:104px 20px 40px; gap:18px; }
  .logo-card{ width:min(62vw, 260px); margin-bottom:16px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-stats{ gap:22px 28px; }
}

@media (max-width: 480px){
  .stats-grid{ grid-template-columns:1fr; }
  .marquee-track{ gap:10px; }
  .chip{ padding:10px 16px; font-size:13px; }
  .stat-card{ padding:26px 18px; }
}

/* Cascading stagger for grid items as they come into view */
.stats-grid .reveal:nth-child(1){ transition-delay:0s; }
.stats-grid .reveal:nth-child(2){ transition-delay:.08s; }
.stats-grid .reveal:nth-child(3){ transition-delay:.16s; }
.stats-grid .reveal:nth-child(4){ transition-delay:.24s; }
.stats-grid .reveal:nth-child(5){ transition-delay:.32s; }
.stats-grid .reveal:nth-child(6){ transition-delay:.4s; }

/* Touch devices: skip the cursor-following magnetic offset, keep the press feedback.
   The logo card swaps its mouse-tilt loop for a continuous gentle auto-float instead. */
@media (pointer: coarse){
  .magnetic{ transition:transform .15s var(--ease); }

  /* The mouse-tilt/hover effects on cards and icons never fire on touch —
     these tap-press animations are what stand in for them, so tapping
     anything still gives a clear, physical response instead of nothing
     happening until the tap actually completes. */
  .icon-panel, .stat-card, .meaning-card, .founder-card, .feature-row,
  .acc-trigger, .tab-btn, .card-expand, .logo-chip{
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .icon-panel:active{ transform:scale(.9) rotate(-4deg); }
  .stat-card:active, .meaning-card:active{ transform:scale(.96) translateY(-2px); }
  .founder-card:active{ transform:scale(.99); }
  .feature-grid .feature-row:active{
    transform:scale(.96); border-color:var(--accent); box-shadow:3px 3px 0 0 var(--accent);
  }
  /* !important here because the mobile tile grid's own entrance animation
     (.feature-grid .reveal.in-view .icon-panel) has higher selector
     specificity and would otherwise silently win over this tap feedback
     once a tile has already revealed. */
  .feature-row:active .icon-panel{ transform:scale(.88) rotate(6deg) !important; }
  .logo-chip:active{ transform:scale(1.12); }
  .card-expand:active{ transform:scale(.85); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .logo-card-inner{ animation:none; }
}

/* Caption under the brand wall heading. Added 13 Sep 2026 — states the actual
   relationship so the logo wall is a fact, not an implied endorsement. */
.brandwall-note{
  margin:10px auto 0;
  max-width:560px;
  font-size:.95rem;
  line-height:1.5;
  opacity:.62;
}