/* =========================================================
   MAGO LABS — PORTFOLIO
   Warm neutral + single-accent identity: a cream/near-black base with one
   deliberate orange (never a rainbow, never a gradient standing in for
   color decisions), Sora for display type, Inter for everything else.
   ========================================================= */

:root{
  --black:#111111;
  --ink:#111111;
  --white:#ffffff;
  --offwhite:#F5F3EE;
  --muted-bg:#ECE9E2;
  --gray:rgba(245,243,238,.62); /* secondary text on dark sections */
  --gray-dim:#747474; /* secondary text on light sections */
  --gray-light:#d9d6cf;
  --line:rgba(17,17,17,.10);
  --line-dark:rgba(255,255,255,.14);
  --accent:#E85D3F;
  --accent-hover:#d24f32;
  --font-display:"Sora","Segoe UI",sans-serif;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"Inter","Segoe UI",sans-serif; /* no separate mono/technical face anymore */
  --ease:cubic-bezier(.28,.1,.25,1);
  --container:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;margin:0;color:inherit;}
p{margin:0;}
button{font-family:inherit;background:none;border:0;}
svg{display:block;}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}
::selection{background:var(--accent);color:#fff;}

/* ---------- reveal states (JS/GSAP, subtle fade+rise — no drama) ----------
   Shared vocabulary the animation system draws from: .reveal (plain fade),
   .reveal-up (fade+rise, the workhorse), .reveal-left/.reveal-right
   (fade+slide, used where a element pairs with a counterpart entering from
   the other side, e.g. founder photo/copy), .reveal-scale (alias kept as
   .reveal-img for the existing image-specific usages). */
.js .reveal{opacity:0;}
.js .reveal-up{opacity:0;transform:translateY(22px);}
/* smaller offset by default — .wrap's own gutter on narrow phones is as
   little as 20px, and a wider slide-in could push the hidden element past
   the true viewport edge before it's revealed, which is real horizontal
   overflow even though nothing is visibly wrong once revealed. Only widen
   it at the point .founder-grid itself goes two-column, where there's
   room and the horizontal motion actually reads as intentional. */
.js .reveal-left{opacity:0;transform:translateX(-16px);}
.js .reveal-right{opacity:0;transform:translateX(16px);}
@media (min-width:700px){
  .js .reveal-left{transform:translateX(-28px);}
  .js .reveal-right{transform:translateX(28px);}
}
.js .reveal-img,.js .reveal-scale{opacity:0;transform:scale(1.04);}
.js .hero-line{opacity:0;transform:translateY(100%);}
.js .hero-highlight-bar{transform:scaleX(0);}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal-up,.js .reveal-left,.js .reveal-right,.js .reveal-img,.js .reveal-scale{
    opacity:1;transform:none;
  }
  .js .hero-line{opacity:1;transform:none;}
  .js .hero-highlight-bar{transform:scaleX(1);}
}


/* ---------- shared type / buttons ---------- */
.eyebrow{font-size:.82rem;font-weight:600;color:var(--gray-dim);letter-spacing:.01em;margin-bottom:.6rem;}
.section-head{max-width:640px;margin-bottom:clamp(2.4rem,5vw,3.6rem);}
.section-head h2{font-size:clamp(2.25rem,4.2vw,3.6rem);font-weight:600;line-height:1.1;letter-spacing:-.02em;}
.section-head.center{margin-inline:auto;text-align:center;}

.btn-fill{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;
  border-radius:980px;padding:.8rem 1.7rem;font-size:1rem;font-weight:600;transition:background-color .2s ease,transform .2s ease;}
.btn-fill:hover{background:#000;transform:translateY(-1px);}
.btn-fill.accent{background:var(--accent);}
.btn-fill.accent:hover{background:var(--accent-hover);}
/* secondary CTA — outline button, meant to sit beside an already-solid
   .btn-fill.accent primary without the two competing for the same weight */
.btn-outline{display:inline-flex;align-items:center;gap:.35rem;color:#fff;
  border:1.5px solid rgba(255,255,255,.32);border-radius:980px;padding:.78rem 1.5rem;
  font-size:1rem;font-weight:600;transition:background-color .2s ease,border-color .2s ease,transform .2s ease;}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);transform:translateY(-1px);}
.btn-outline::after{content:"›";font-size:1.15em;line-height:1;transition:transform .2s ease;}
.btn-outline:hover::after{transform:translateX(2px);}

section{padding-block:clamp(4rem,9vw,7rem);position:relative;}
/* Ambient dot-grid texture behind every section except the hero (which
   already has the background video) — currentColor means it automatically
   reads as a faint dark texture on light sections and a faint light one on
   dark sections, with no separate light/dark variant needed. Direct children
   get lifted onto their own stacking layer so real content always paints
   above the pattern regardless of DOM order. */
section:not(.hero)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,currentColor 1.4px,transparent 1.4px);
  background-size:28px 28px;opacity:.05;}
section > *{position:relative;z-index:1;}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;background:transparent;pointer-events:none;}
.scroll-progress span{display:block;height:100%;width:0%;background:var(--accent);
  transform-origin:left;}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(245,243,238,.82);
  backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid var(--line);
  transition:transform .4s var(--ease),background-color .35s ease,box-shadow .35s ease;}
.nav.nav-hidden{transform:translateY(-100%);}
/* subtle only — same blur, background just settles slightly more opaque with
   a faint shadow once you're actually scrolled, so the bar reads a touch more
   "present" over busy content without ever visibly jumping */
.nav.is-scrolled{background:rgba(245,243,238,.94);
  box-shadow:0 1px 0 rgba(17,17,17,.05),0 14px 28px -20px rgba(17,17,17,.18);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:52px;gap:1rem;}
.nav-brand img{height:28px;width:auto;display:block;}
.nav-links{position:relative;display:none;align-items:center;gap:1.7rem;}
@media (min-width:900px){.nav-links{display:flex;}}
.nav-indicator{position:absolute;bottom:-4px;left:0;height:2px;width:0;background:var(--accent);border-radius:2px;
  transition:transform .4s var(--ease),width .4s var(--ease);pointer-events:none;}
.nav-links a{font-size:.8rem;font-weight:600;color:var(--ink);opacity:.7;transition:opacity .2s ease,color .2s ease;}
.nav-links a.is-active{opacity:1;color:var(--accent);}
.nav-links a:hover{opacity:1;}
.nav-actions{display:flex;align-items:center;gap:1rem;}
.nav-cta{display:none;align-items:center;font-size:.78rem;font-weight:600;color:#fff;
  background:var(--accent);padding:.5rem 1.15rem;border-radius:980px;
  transition:background-color .2s ease,transform .2s ease;}
.nav-cta:hover{background:var(--accent-hover);transform:translateY(-1px);}
@media (min-width:900px){.nav-cta{display:inline-flex;}}
.nav-toggle{display:flex;flex-direction:column;gap:5px;width:20px;cursor:pointer;padding:.4rem 0;}
@media (min-width:900px){.nav-toggle{display:none;}}
.nav-toggle span{height:1.4px;width:100%;background:var(--ink);transition:transform .3s var(--ease),opacity .3s ease;}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg);}

.mobile-menu{display:flex;flex-direction:column;max-height:0;overflow:hidden;background:var(--white);
  border-bottom:1px solid transparent;transition:max-height .4s var(--ease),border-color .4s ease;}
.mobile-menu.is-open{max-height:420px;border-color:var(--line);}
.mobile-menu a{padding:.85rem clamp(1.25rem,4vw,2.5rem);font-size:1rem;font-weight:600;border-top:1px solid var(--line);color:var(--ink);}
.mobile-menu-cta{color:#fff !important;font-weight:700;text-align:center;
  background:var(--accent);border-top-color:var(--accent) !important;}
@media (min-width:900px){.mobile-menu{display:none;}}

/* ---------- hero ----------
   Left-aligned and oversized on purpose — a centered headline over a
   full-bleed video is the single most common template hero pattern on the
   web, so an asymmetric, editorial composition reads as bespoke instead.
   Background is flat near-black (#111) plus one restrained orange glow —
   no gradient standing in for a color decision, and only a single accent
   rather than the old two-color glow pair. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:var(--black);color:#fff;padding-top:6rem;padding-bottom:3rem;overflow:hidden;}
.hero-glow-follow{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-glow{position:absolute;z-index:0;border-radius:50%;filter:blur(90px);pointer-events:none;}
.hero-glow-1{top:-14%;right:-10%;width:min(46vw,560px);aspect-ratio:1/1;
  background:radial-gradient(circle,rgba(232,93,63,.32) 0%,rgba(232,93,63,.06) 46%,transparent 72%);}
@media (prefers-reduced-motion:no-preference){
  .hero-glow-1{animation:heroFloat1 17s ease-in-out infinite;}
}
@keyframes heroFloat1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-4%,5%) scale(1.08);}}
/* faint canvas grid — the technical "someone built this by hand" texture */
.hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 80% at 30% 30%,#000 40%,transparent 85%);
  mask-image:radial-gradient(90% 80% at 30% 30%,#000 40%,transparent 85%);}
.hero-inner{position:relative;z-index:2;max-width:900px;}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem .4rem .6rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.02em;color:#e4e4e8;margin-bottom:1.4rem;}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(232,93,63,.22);flex:none;}
.hero-h1{font-family:var(--font-display);font-size:clamp(2.9rem,8vw,6rem);font-weight:700;line-height:1;
  letter-spacing:-.02em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5);}
.hero-line-mask{display:block;overflow:hidden;}
.hero-line{display:block;}
.accent-highlight{color:var(--accent);text-shadow:none;}
.hero-highlight-wrap{position:relative;display:inline-block;}
.hero-highlight-bar{position:absolute;left:-.03em;right:-.03em;bottom:.02em;height:.08em;
  border-radius:2px;background:var(--accent);transform-origin:left center;z-index:-1;opacity:.55;}
.hero-bottom{margin-top:clamp(2rem,5vw,3rem);max-width:520px;}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.55;color:var(--gray);}
.hero-cta{margin-top:1.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;}
.hero-cta.center{margin-top:2.2rem;justify-content:center;}
.hero-hud{position:absolute;left:0;right:0;bottom:1.6rem;z-index:3;padding-inline:clamp(1.25rem,4vw,2.5rem);
  display:none;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-weight:500;font-size:.7rem;letter-spacing:.06em;color:#8b8b95;}
@media (min-width:760px) and (min-height:640px){.hero-hud{display:flex;}}

/* ---------- value ticker (bold confident band, not a shy footnote) ---------- */
.value-ticker{background:var(--accent);overflow:hidden;padding-block:.65rem;}
.value-ticker:hover .value-ticker-track{animation-play-state:paused;}
.value-ticker-track{display:flex;width:max-content;gap:1.8rem;animation:vt 20s linear infinite;
  font-family:var(--font-mono);font-weight:600;font-size:.8rem;letter-spacing:.05em;color:#fff;white-space:nowrap;}
@keyframes vt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.value-ticker-track{animation:none;flex-wrap:wrap;}}

/* ---------- trust marquee ---------- */
.trust{padding-block:clamp(3rem,6vw,4.5rem);border-bottom:1px solid var(--line);}
.trust-label{text-align:center;font-size:.85rem;color:var(--gray-dim);margin-bottom:2rem;}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;width:max-content;align-items:center;gap:clamp(3rem,7vw,5rem);animation:mq 30s linear infinite;
  animation-play-state:paused;}
.trust.is-live .marquee-track{animation-play-state:running;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track img{height:40px;width:auto;max-width:160px;object-fit:contain;opacity:1;transition:transform .25s ease;}
.marquee-track img:hover{transform:scale(1.07);}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;}}

/* ---------- portfolio grid (all live projects) ----------
   Bento-asymmetric (card 1 spans the full featured width) instead of nine
   identical squares, plus a hover "spotlight": once any card is hovered,
   every other card dims so attention narrows to the one under the cursor. */
.grid-section{background:var(--offwhite);}
.project-grid{display:grid;grid-template-columns:1fr;gap:1.8rem;}
@media (min-width:680px){
  .project-grid{grid-template-columns:repeat(2,1fr);}
  .project-card:first-child{grid-column:span 2;}
  .project-card:first-child .project-media{aspect-ratio:1800/427;}
}
@media (min-width:1000px){
  .project-grid{grid-template-columns:repeat(3,1fr);}
  .project-card:first-child{grid-column:span 2;}
  /* 9 cards with only the first spanning 2 of 3 columns leaves the 9th
     stranded alone in a trailing row with empty cells beside it — full
     width on the last card closes the grid out cleanly with zero gap,
     doubling as a "closing statement" tile that bookends the opening one. */
  .project-card:last-child{grid-column:1/-1;}
  .project-card:last-child .project-media{aspect-ratio:2400/427;}
}

.project-card{position:relative;background:var(--white);border-radius:16px;overflow:hidden;
  border:1px solid var(--line);display:block;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 20px 40px -30px rgba(0,0,0,.14);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease),
    opacity .4s ease,filter .4s ease;}
.project-card:hover{transform:translateY(-7px);border-color:rgba(232,93,63,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -26px rgba(0,0,0,.2);}
@media (hover:hover) and (pointer:fine){
  .project-grid.is-hovering .project-card{opacity:.5;filter:saturate(.55);}
  .project-grid.is-hovering .project-card:hover{opacity:1;filter:none;}
}
.project-index{position:absolute;top:.9rem;left:1rem;z-index:2;font-family:var(--font-mono);
  font-weight:600;font-size:.72rem;letter-spacing:.03em;color:#fff;background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:.28rem .6rem;border-radius:20px;}

/* .project-tilt is the only GSAP-driven element inside the media stage —
   it owns both the entrance zoom-settle (scale 1.08→1 on scroll-reveal)
   and the hover tilt, since both are GSAP-authored on the same element
   they compose into one transform instead of fighting each other. */
.project-media{position:relative;aspect-ratio:900/427;overflow:hidden;background:var(--offwhite);perspective:1200px;}
/* sized 120%/offset -10% so the scroll parallax in script.js has headroom to
   move the image within its own container without ever exposing an edge —
   same technique proven out on the old case-study frames earlier in this
   project's history */
.project-tilt{position:relative;width:100%;height:120%;top:-10%;transform-style:preserve-3d;}
.js .project-card .project-tilt{transform:scale(1.08);}
@media (prefers-reduced-motion:reduce){.js .project-card .project-tilt{transform:none;}}
.project-media img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .6s var(--ease);display:block;}
.project-card:hover .project-media img{transform:scale(1.07);}

/* cursor-follow "view live" badge — the outer .project-badge is GSAP's only
   turf (x/y + xPercent/yPercent for positioning); GSAP resets any CSS
   scale/rotate/translate it finds on an element it drives, so the hover
   pop (opacity/scale) lives one level down on .project-badge-inner instead,
   where CSS has sole control. */
.project-badge{position:absolute;top:0;left:0;z-index:3;pointer-events:none;}
.project-badge-inner{display:inline-flex;align-items:center;gap:.35rem;
  padding:.6rem 1.05rem;border-radius:99px;background:var(--accent);color:#fff;
  font-family:var(--font-mono);font-weight:600;font-size:.76rem;white-space:nowrap;
  opacity:0;scale:.6;transition:opacity .25s ease,scale .25s ease;
  box-shadow:0 14px 30px -10px rgba(232,93,63,.5);}
@media (hover:hover) and (pointer:fine){
  .project-media:hover .project-badge-inner{opacity:1;scale:1;}
}
.project-badge-arrow{display:inline-block;transition:transform .3s ease;}
.project-media:hover .project-badge-arrow{transform:translate(2px,-2px);}

.project-meta{position:relative;padding:1.15rem 1.3rem 1.35rem;}
.project-name{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;}
.project-industry{margin-top:.25rem;font-size:.84rem;color:var(--gray-dim);}

/* :not(.is-revealed) so once the one-time reveal finishes and clears its
   own inline styles, this hidden state doesn't spring back and re-hide the
   card — see the onComplete in script.js for why that clearing matters. */
.js .project-card:not(.is-revealed){opacity:0;transform:translateY(30px);}
.js .project-card .project-media img{clip-path:inset(0 0 100% 0);}
@media (prefers-reduced-motion:reduce){
  .js .project-card{opacity:1;transform:none;}
  .js .project-card .project-media img{clip-path:none;}
}

/* ---------- process: full-screen pinned sequence ----------
   The one section on the site that isn't a card grid. Markup is identical
   whether or not JS/motion is available: by default the three .process-step
   panels are a normal stacked flow (each its own dark full-bleed block, no
   pin, no crossfade — still reads as a deliberate editorial layout on its
   own). Only when script.js confirms motion is allowed AND the viewport is
   wide enough does it add .is-pinned to .process, which is what switches
   .process-stage to position:sticky and crossfades the steps via scroll
   progress. Nothing here needs a spacer hack — sticky handles the pin. */
.process{background:var(--offwhite);}
.process-pin{position:relative;background:var(--black);}
.process-stage{position:relative;background:var(--black);}
.process-step{position:relative;padding-block:clamp(2.6rem,6vw,4rem);}
.process-step-inner{display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start;}
@media (min-width:760px){
  .process-step-inner{flex-direction:row;align-items:center;justify-content:flex-start;gap:clamp(1.8rem,4vw,3.2rem);}
}
/* same solid-orange treatment as the hero's "phone ring" — ties this
   signature moment back to the one already established */
.process-step-num{font-family:var(--font-display);font-weight:700;line-height:.9;
  font-size:clamp(3.2rem,7vw,5.5rem);flex:none;color:var(--accent);}
.process-step-copy{max-width:26rem;}
.process-step-copy h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;letter-spacing:-.02em;color:#fff;}
.process-step-copy p{margin-top:.8rem;font-size:1rem;line-height:1.6;color:#c8c8d4;}

.process-hud{display:none;}

/* ---------- enhanced (JS + motion + wide viewport): pin + crossfade ---------- */
.process.is-pinned .process-pin{height:220vh;}
.process.is-pinned .process-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;}
.process.is-pinned .process-step{position:absolute;inset:0;display:flex;align-items:center;padding-block:0;opacity:0;}
.process.is-pinned .process-step.is-active{opacity:1;}
.process.is-pinned .process-hud{display:flex;position:absolute;left:0;right:0;bottom:2.2rem;z-index:2;
  align-items:center;justify-content:space-between;padding-inline:clamp(1.25rem,4vw,2.5rem);
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.06em;color:#8b8b95;}
.process-hud-bar{width:min(40vw,260px);height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;}
.process-hud-bar-fill{display:block;height:100%;width:0%;background:var(--accent);}

/* ---------- why: sticky heading + focus-follow row list ----------
   Replaces a 2x2 card grid — the heading pins on wide viewports while a
   plain list of rows scrolls past it, and the row nearest the viewport
   center gets full opacity/color while the rest dim, so reading down the
   list feels like a guided line of argument instead of four equal boxes. */
.why{background:var(--offwhite);}
.why-layout{display:grid;grid-template-columns:1fr;gap:2.4rem;}
@media (min-width:860px){
  .why-layout{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start;}
  .why-head{position:sticky;top:7rem;}
}
.why-rows{display:flex;flex-direction:column;}
.why-row{position:relative;display:flex;gap:1.6rem;align-items:baseline;
  padding-block:1.9rem;border-top:1px solid var(--line);}
.why-row:last-child{border-bottom:1px solid var(--line);}
.why-row-num{flex:none;width:2.6rem;font-family:var(--font-mono);font-weight:600;
  font-size:.85rem;color:var(--accent);transition:opacity .4s ease;}
.why-row-copy h3{font-size:clamp(1.5rem,2vw,1.75rem);font-weight:600;letter-spacing:-.01em;transition:color .4s ease;}
.why-row-copy p{margin-top:.55rem;font-size:1rem;line-height:1.6;color:var(--gray-dim);max-width:30rem;}
.js .why-row{opacity:.4;transition:opacity .4s ease;}
.js .why-row.is-focused{opacity:1;}
@media (prefers-reduced-motion:reduce){.js .why-row{transition:none;}}

/* ---------- tech stack (logo wall) ----------
   Plain grid, not the pinned/orbiting kind — a premium logo wall earns its
   "wow" from restraint: grayscale until hovered, a quiet lift, nothing
   spinning. Reuses the site's existing .reveal-up batch system (no new JS)
   for the staggered scroll-in. */
.tech-stack{background:var(--white);}
.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:clamp(2rem,5vw,3rem);}
@media (min-width:560px){.tech-grid{grid-template-columns:repeat(4,1fr);}}
@media (min-width:900px){.tech-grid{grid-template-columns:repeat(6,1fr);gap:1.1rem;}}
@media (min-width:1150px){.tech-grid{grid-template-columns:repeat(8,1fr);}}

.tech-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  padding:1.6rem 1rem;border-radius:16px;background:var(--white);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease;}
.tech-card:hover{transform:translateY(-4px);border-color:rgba(232,93,63,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 22px 44px -28px rgba(17,17,17,.18);}
.tech-icon{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease;}
.tech-icon svg{width:100%;height:100%;display:block;}
.tech-icon-wordmark{width:auto;height:22px;}
.tech-card:hover .tech-icon{transform:scale(1.08);}
.tech-name{font-size:.8rem;font-weight:600;color:var(--gray-dim);text-align:center;
  line-height:1.25;transition:color .3s ease;}
.tech-card:hover .tech-name{color:var(--ink);}
@media (prefers-reduced-motion:reduce){.tech-icon,.tech-card{transition:none;}}

/* ---------- testimonials: horizontal spotlight rail ----------
   Replaces a 3x3 card grid — one big quote at a time in a native
   scroll-snap rail (swipe/drag/arrow-keys all just work for free), with
   arrow buttons + dots for anyone not inclined to drag. Desktop mouse
   users additionally get vertical wheel converted to horizontal scroll
   while hovering the rail (released back to normal page scroll at either
   end so the page never feels "trapped"). */
.testimonials{background:var(--black);color:#fff;padding-block:clamp(4.5rem,9vw,7rem);display:flex;flex-direction:column;justify-content:center;}
.testimonials .section-head p{color:var(--gray);}

.quote-rail-wrap{width:100%;margin-top:clamp(2.2rem,5vw,3.2rem);}
.quote-rail{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding-inline:clamp(1.25rem,4vw,2.5rem);padding-block:.5rem 1rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.quote-rail::-webkit-scrollbar{display:none;}
.quote-panel{position:relative;flex:none;width:min(400px,78vw);scroll-snap-align:start;
  padding:1.6rem 1.7rem;border-radius:18px;
  background:linear-gradient(165deg,#1c1c1f 0%,#141416 100%);
  border:1px solid rgba(255,255,255,.08);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 48px -30px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:1rem;}
.quote-mark{position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:2.2rem;
  line-height:1;color:var(--accent);opacity:.95;}
.quote-panel p{position:relative;z-index:1;margin-top:-.4rem;font-size:.95rem;
  line-height:1.55;color:#e4e4e8;}
.quote-who{position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;gap:.7rem;}
.quote-avatar{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:.7rem;color:#fff;
  background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;}
.quote-name{font-size:.86rem;font-weight:600;color:#fff;}
.quote-role{margin-top:.15rem;font-size:.8rem;color:var(--gray);}

.quote-controls{display:flex;align-items:center;justify-content:space-between;margin-top:2rem;}
.quote-dots{display:flex;gap:.5rem;}
.quote-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);border:0;padding:0;
  cursor:pointer;transition:background .3s ease,width .3s ease;}
.quote-dot.is-active{background:var(--accent);width:22px;border-radius:4px;}
.quote-arrows{display:flex;gap:.6rem;}
.quote-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .2s ease;}
.quote-arrow:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32);}
.quote-arrow:active{transform:scale(.93);}
.quote-arrow svg{width:18px;height:18px;}
.quote-arrow:disabled{opacity:.28;cursor:default;pointer-events:none;}
@media (min-width:640px){.quote-controls{padding-inline:0;}}

/* ---------- founder ---------- */
.founder{background:var(--white);min-height:100svh;display:flex;align-items:center;}
.founder-grid{display:grid;gap:clamp(2.2rem,5vw,3.6rem);align-items:center;}
@media (min-width:900px){.founder-grid{grid-template-columns:.8fr 1.2fr;}}
.founder-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--offwhite);}
.founder-photo img{width:100%;height:100%;object-fit:cover;}
.founder-quote{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);}
.founder-text{margin-top:1.1rem;font-size:1rem;line-height:1.62;color:var(--gray-dim);max-width:34rem;}
.founder-links{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1.2rem;}
.founder-links a{font-size:.9rem;font-weight:600;color:var(--accent);}

/* ---------- FAQ (accordion) ---------- */
.faq{background:var(--offwhite);}
.faq-list{max-width:760px;margin-inline:auto;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-question{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;width:100%;
  padding:1.4rem 0;text-align:left;cursor:pointer;font-family:var(--font-display);
  font-size:clamp(1.02rem,1.6vw,1.2rem);font-weight:600;color:var(--ink);}
.faq-icon{position:relative;flex:none;width:22px;height:22px;}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;background:var(--ink);
  transition:transform .35s var(--ease),opacity .35s ease,background-color .3s ease;}
.faq-icon::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.faq-icon::after{width:2px;height:14px;transform:translate(-50%,-50%);}
.faq-question[aria-expanded="true"] .faq-icon::before{background:var(--accent);}
.faq-question[aria-expanded="true"] .faq-icon::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-answer p{padding-bottom:1.4rem;font-size:1rem;line-height:1.6;color:var(--gray-dim);max-width:34rem;}

/* ---------- final CTA ---------- */
.cta-final{background:var(--black);color:#fff;text-align:center;min-height:100svh;display:flex;align-items:center;justify-content:center;}
.cta-final .wrap{width:100%;}
.cta-final::after{content:"";position:absolute;z-index:0;pointer-events:none;top:50%;left:50%;
  width:min(60vw,680px);aspect-ratio:1/1;border-radius:50%;filter:blur(100px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(232,93,63,.22) 0%,rgba(232,93,63,.05) 45%,transparent 72%);}
.cta-final h2{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.12;letter-spacing:-.02em;}
.cta-final p{margin-top:1.1rem;font-size:1.05rem;color:var(--gray);max-width:520px;margin-inline:auto;}

/* ---------- footer ---------- */
.foot{background:var(--offwhite);padding-top:clamp(3.5rem,7vw,5rem);padding-bottom:1.6rem;}
.foot-top{display:grid;gap:2.4rem;padding-bottom:2rem;border-bottom:1px solid var(--line);}
@media (min-width:760px){.foot-top{grid-template-columns:1.4fr 1fr 1fr;}}
.foot-brand img{height:28px;margin-bottom:1rem;}
.foot-brand p{font-size:.86rem;color:var(--gray-dim);line-height:1.55;max-width:280px;}
.foot-col{display:flex;flex-direction:column;gap:.65rem;}
.foot-col h4{font-size:.78rem;color:var(--ink);margin-bottom:.3rem;font-weight:600;}
.foot-col a{font-size:.86rem;color:var(--gray-dim);transition:color .2s;}
.foot-col a:hover{color:var(--ink);}
.foot-bottom{padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;}
.foot-bottom p{font-size:.78rem;color:var(--gray-dim);}