/* ══════════════════════════════════════════════════════════════════
   tbh · Services · Portfolio · Testimonials
   Editorial layouts, huge type, rules not cards.
   Apple whitespace · Linear precision · Stripe light · Lusion motion
   ══════════════════════════════════════════════════════════════════ */

/* ── Stripe-ish ambient light. Never colourful — just depth. ────── */
.glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.glow::before,.glow::after{
  content:'';position:absolute;border-radius:50%;filter:blur(120px);
}
.glow::before{
  width:60vw;height:60vw;left:-14vw;top:-22vw;
  background:radial-gradient(circle,rgba(255,212,0,.055),transparent 68%);
}
.glow::after{
  width:46vw;height:46vw;right:-12vw;bottom:-20vw;
  background:radial-gradient(circle,rgba(120,130,255,.045),transparent 70%);
}
section > .wrap{position:relative;z-index:1}

/* hairline that opens a section — Linear's signature */
.hair{height:1px;background:linear-gradient(90deg,var(--line),transparent 62%)}

/* ══════════════════════════════════════════════════════════════════
   SERVICES — an editorial index, not a card grid
   ══════════════════════════════════════════════════════════════════ */
/* a compact card grid — three across on desktop, two on laptop, one on phone */
.services .svc-list{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.2vw,20px);
}

.svc{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(10px,1vw,18px);align-items:start;align-content:start;
  padding:clamp(20px,1.8vw,30px);overflow:hidden;
  background:rgba(23,23,31,.34);
  transition:border-color .5s var(--ease),background .5s var(--ease),transform .5s var(--ease);
}
.svc:hover,.svc.open{border-color:#3A3A48;background:rgba(27,27,37,.6);transform:translateY(-3px)}
.svc::before{                      /* the yellow wash that sweeps in */
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(150deg,rgba(255,212,0,.10),transparent 62%);
  opacity:0;transition:opacity .6s var(--ease);
}
.svc:hover::before,.svc.open::before{opacity:1}

.svc-no{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
  transition:color .45s var(--ease);
}
.svc:hover .svc-no,.svc.open .svc-no{color:var(--yellow)}

.svc-head{min-width:0}
.svc h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(20px,1.55vw,26px);line-height:1.08;letter-spacing:-.03em;
  color:var(--white);transition:color .45s var(--ease),transform .6s var(--ease);
  text-wrap:balance;
}
.svc:hover h3,.svc.open h3{color:var(--yellow)}
.svc .svc-tag{
  display:block;margin-top:9px;color:var(--muted);
  font-size:clamp(13px,1vw,15px);line-height:1.4;
}

/* the drawer */
.svc-body{
  grid-column:1 / -1;overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height .75s var(--ease),opacity .5s ease,margin .6s var(--ease);
}
.svc.open .svc-body{max-height:460px;opacity:1;margin-top:20px}
.svc-body p{color:var(--muted);max-width:62ch;font-size:clamp(15px,1.4vw,17.5px)}
.svc-body ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;
}
.svc-body li{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 13px;
}

.svc-plus{
  width:30px;height:30px;position:relative;flex:none;justify-self:end;
  transition:transform .6s var(--ease);
}
.svc-plus::before,.svc-plus::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--muted);
  transition:background .45s var(--ease),transform .6s var(--ease);
}
.svc-plus::before{width:15px;height:1px;transform:translate(-50%,-50%)}
.svc-plus::after{width:1px;height:15px;transform:translate(-50%,-50%)}
.svc:hover .svc-plus::before,.svc:hover .svc-plus::after{background:var(--yellow)}
.svc.open .svc-plus{transform:rotate(90deg)}
.svc.open .svc-plus::after{transform:translate(-50%,-50%) scaleY(0)}
.svc.open .svc-plus::before{background:var(--yellow)}

.svc.matched .svc-no::after{
  content:' · matched';color:var(--yellow);
}

/* ══════════════════════════════════════════════════════════════════
   PORTFOLIO — an index whose preview follows the cursor
   ══════════════════════════════════════════════════════════════════ */
.pf-list{border-top:1px solid var(--line)}

.pf-row{
  position:relative;display:grid;
  grid-template-columns:74px 1fr 190px 64px;
  gap:clamp(16px,2.6vw,40px);align-items:center;
  padding:clamp(24px,2.8vw,40px) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:opacity .5s var(--ease);
}
.pf-list:hover .pf-row{opacity:.32}      /* Lusion: the rest recede */
.pf-list .pf-row:hover{opacity:1}

.pf-row .pf-idx{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--dim);
  transition:color .45s var(--ease);
}
.pf-row:hover .pf-idx{color:var(--yellow)}

.pf-row h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,3.8vw,52px);line-height:1.04;letter-spacing:-.035em;
  transition:transform .6s var(--ease),color .45s var(--ease);
}
.pf-row:hover h3{transform:translateX(16px);color:var(--yellow)}

.pf-meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.pf-arrow{
  justify-self:end;width:34px;height:34px;border:1px solid var(--line);
  border-radius:50%;display:grid;place-items:center;color:var(--muted);
  font-size:13px;transition:.5s var(--ease);
}
.pf-row:hover .pf-arrow{
  border-color:var(--yellow);color:var(--ink);background:var(--yellow);
  transform:rotate(-45deg);
}

/* the floating preview */
.pf-preview{
  position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  width:min(340px,26vw);aspect-ratio:4/5;
  border-radius:var(--r-lg);overflow:hidden;
  opacity:0;transform:translate(-50%,-50%) scale(.92);
  transition:opacity .45s var(--ease),transform .65s var(--ease);
  will-change:transform;
}
.pf-preview.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pf-preview .pf-card{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:26px;
  opacity:0;transition:opacity .35s ease;
}
.pf-preview .pf-card.show{opacity:1}
.pf-card .h{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(12,12,17,.62);
}
.pf-card .r{
  font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);margin-top:8px;
}
.pf-card .await-media{
  position:absolute;top:20px;left:20px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(12,12,17,.5);
}

/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS — video wall + text
   ══════════════════════════════════════════════════════════════════ */
.vt-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin-bottom:clamp(56px,7vw,104px);
}
.vt{
  position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(165deg,#1A1A23,#101017);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;cursor:pointer;
  transition:border-color .55s var(--ease),transform .65s var(--ease);
}
.vt:hover{border-color:#3E3E4C;transform:translateY(-6px)}
.vt::after{                       /* glass sheen, used sparingly */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.055),transparent 46%);
}
.vt .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(244,244,240,.28);
  background:rgba(244,244,240,.06);backdrop-filter:blur(8px);
  display:grid;place-items:center;color:var(--white);font-size:13px;
  transition:.55s var(--ease);
}
.vt:hover .play{background:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:translate(-50%,-50%) scale(1.1)}
.vt-label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.vt-name{
  font-family:var(--display);font-size:16px;font-weight:600;
  letter-spacing:-.02em;color:var(--white);margin-top:6px;
}
.vt.placeholder .vt-label::before{content:'⬦ ';color:var(--yellow)}

/* text testimonials — editorial, no bubbles */
.tt-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(36px,5vw,80px);
  border-top:1px solid var(--line);
}
.tt{
  padding:clamp(30px,3.4vw,48px) 0;
  border-bottom:1px solid var(--line);
}
.tt blockquote{
  font-family:var(--display);font-weight:400;
  font-size:clamp(17px,1.7vw,21px);line-height:1.5;letter-spacing:-.018em;
  color:var(--white);
}
.tt figcaption{
  margin-top:24px;display:flex;align-items:center;gap:13px;
  font-size:13.5px;color:var(--muted);
}
.tt figcaption b{
  display:block;color:var(--white);font-family:var(--display);
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;
}
.tt .avatar{width:36px;height:36px;font-size:14px;border-radius:50%}

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */
@media(max-width:1080px){
  .services .svc-list{grid-template-columns:repeat(2,1fr)}
  .vt-grid{grid-template-columns:repeat(2,1fr)}
  .tt-grid{grid-template-columns:1fr;gap:0}
  .pf-row{grid-template-columns:56px 1fr 48px}
  .pf-row .pf-meta{display:none}
  .pf-preview{display:none}
}
@media(max-width:680px){
  /* services: one full-width card per row (was 3 skinny slivers) */
  .services .svc-list{grid-template-columns:1fr}
  .svc{grid-template-columns:56px 1fr auto;gap:14px}
  .svc-body{grid-column:1 / -1}
  .vt-grid{gap:12px}
  .pf-row:hover h3{transform:none}

}
@media(prefers-reduced-motion:reduce){
  .pf-preview{display:none}
  .pf-list:hover .pf-row{opacity:1}
}

/* ══════════════════════════════════════════════════════════════════
   PROOF → PORTFOLIO handoff
   ══════════════════════════════════════════════════════════════════ */
.proof-cta{
  display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);flex-wrap:wrap;
  padding:clamp(28px,3.4vw,44px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.proof-cta p{
  font-family:var(--display);font-size:clamp(20px,2.6vw,34px);
  letter-spacing:-.03em;color:var(--white);margin-right:auto;
}
.proof-note{color:var(--dim);font-size:13.5px;max-width:32ch}

/* ── THE PORTAL — a clickable doorway into the 3D portfolio ─────── */
.portal{
  position:relative;display:grid;grid-template-columns:1.05fr 1fr;
  align-items:stretch;text-decoration:none;color:var(--white);
  border:1px solid var(--line);border-radius:calc(var(--r-lg) + 6px);
  overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255,212,0,.06), transparent 55%),
    linear-gradient(150deg,#16161e,#0e0e14);
  transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);
}
.portal:hover,.portal:focus-visible{
  border-color:rgba(255,212,0,.55);transform:translateY(-5px);
  box-shadow:0 40px 90px -46px rgba(255,212,0,.35);
}

/* left: the 3D scene */
.portal-scene{
  position:relative;min-height:clamp(300px,34vw,420px);
  display:grid;place-items:center;overflow:hidden;
  border-right:1px solid var(--line);
  background:radial-gradient(90% 90% at 50% 42%, rgba(255,212,0,.05), transparent 70%);
}
.portal-scene .lab-object{width:clamp(180px,20vw,260px)}
.portal:hover .cube{animation-duration:7s}
.portal:hover .lab-ring-1{animation-duration:4s}
.portal-badge{
  position:absolute;top:20px;left:20px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.portal-badge i{
  width:7px;height:7px;border-radius:50%;background:#38E08A;
  box-shadow:0 0 0 0 rgba(56,224,138,.5);animation:live-pulse 2.4s var(--ease) infinite;
}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(56,224,138,.5)}
  70%,100%{box-shadow:0 0 0 8px rgba(56,224,138,0)}
}
.portal-floor{
  position:absolute;left:50%;bottom:16%;width:62%;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,212,0,.4),transparent);
  filter:blur(.4px);
}
.portal-scan{
  position:absolute;left:0;right:0;top:-30%;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,212,0,.07),transparent);
  transform:translateY(-20%);
  animation:portal-scan 5.5s var(--ease) infinite;
}
@keyframes portal-scan{
  0%{transform:translateY(-40%)}100%{transform:translateY(360%)}
}

/* right: the invitation */
.portal-cta{
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(30px,3.4vw,56px);
}
.portal-k{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);
}
.portal-h{
  font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.03;
  font-size:clamp(28px,3.4vw,48px);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.portal-h .ar{color:var(--yellow);transition:transform .5s var(--ease)}
.portal:hover .portal-h .ar{transform:translateX(8px)}
.portal-sub{color:var(--muted);font-size:clamp(14px,1.3vw,16.5px);max-width:44ch}
.portal-enter{
  margin-top:10px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:-.01em;
  background:var(--yellow);color:var(--ink);border-radius:var(--r-lg);
  padding:14px 26px;transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.portal-enter .ar{transition:transform .5s var(--ease)}
.portal:hover .portal-enter{box-shadow:0 14px 34px -12px rgba(255,212,0,.6)}
.portal:hover .portal-enter .ar{transform:translateX(5px)}

/* ── the lab object: a slowly tumbling wireframe cube in a scanning ring ── */
.lab-object{
  position:relative;justify-self:center;
  width:clamp(220px,26vw,300px);aspect-ratio:1;
  display:grid;place-items:center;
  perspective:900px;
}
.cube{
  position:relative;width:120px;height:120px;
  transform-style:preserve-3d;
  animation:cube-spin 18s linear infinite;
}
.cube .cf{
  position:absolute;inset:0;
  border:1px solid rgba(255,212,0,.42);
  background:rgba(255,212,0,.03);
  box-shadow:inset 0 0 30px rgba(255,212,0,.05);
}
.cf-f{transform:translateZ(60px)}
.cf-b{transform:rotateY(180deg) translateZ(60px)}
.cf-r{transform:rotateY(90deg) translateZ(60px)}
.cf-l{transform:rotateY(-90deg) translateZ(60px)}
.cf-t{transform:rotateX(90deg) translateZ(60px)}
.cf-d{transform:rotateX(-90deg) translateZ(60px)}
.cube-core{
  position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--yellow);
  box-shadow:0 0 22px 4px rgba(255,212,0,.7);
  animation:core-pulse 2.6s var(--ease) infinite;
}
@keyframes cube-spin{
  from{transform:rotateX(-24deg) rotateY(0deg)}
  to{transform:rotateX(-24deg) rotateY(360deg)}
}
@keyframes core-pulse{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.85)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
}
.lab-ring{
  position:absolute;border:1px solid var(--line);border-radius:50%;
  border-top-color:rgba(255,212,0,.5);
}
.lab-ring-1{width:78%;height:78%;animation:ring-spin 9s linear infinite}
.lab-ring-2{width:100%;height:100%;border-top-color:transparent;border-left-color:rgba(255,212,0,.35);animation:ring-spin 14s linear infinite reverse}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.lab-tag{
  position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}

/* ── drifting decorative shapes (2D) ─────────────────────────────── */
.floaters{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.floaters + .wrap,.floaters ~ .wrap{position:relative;z-index:1}
.fl{position:absolute;opacity:.5}
.fl-ring{
  width:120px;height:120px;border:1px solid var(--line);border-radius:50%;
  left:6%;top:22%;animation:fl-drift 22s ease-in-out infinite}
.fl-tri{
  width:0;height:0;right:9%;top:16%;
  border-left:34px solid transparent;border-right:34px solid transparent;
  border-bottom:58px solid rgba(255,212,0,.10);
  animation:fl-drift 26s ease-in-out infinite reverse}
.fl-plus{
  right:14%;bottom:16%;font-family:var(--display);font-weight:400;
  font-size:64px;line-height:1;color:var(--line);
  animation:fl-spin 30s linear infinite}
.fl-dot{
  width:12px;height:12px;border-radius:50%;background:var(--yellow);opacity:.35;
  left:16%;bottom:20%;animation:fl-drift 18s ease-in-out infinite}
@keyframes fl-drift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(14px,-26px)}
}
@keyframes fl-spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════════
   CLIENTS — the logo strip
   ══════════════════════════════════════════════════════════════════ */
.clients{
  padding-block:clamp(56px,6vw,88px);
  border-block:1px solid var(--line);overflow:hidden;
}
.clients-kick{
  text-align:center;margin-bottom:clamp(32px,4vw,52px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}
.logo-strip{overflow:hidden;position:relative}
.logo-strip::before,.logo-strip::after{
  content:'';position:absolute;top:0;bottom:0;width:clamp(60px,12vw,180px);z-index:2;
  pointer-events:none;
}
.logo-strip::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.logo-strip::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}

.logo-track{display:inline-flex;align-items:center;gap:clamp(46px,6vw,96px);will-change:transform}
.lg{flex:none;display:grid;place-items:center;height:46px}
.lg img{
  max-height:46px;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);
  opacity:.42;transition:opacity .5s var(--ease),filter .5s var(--ease);
}
.lg:hover img{opacity:1;filter:none}

/* ══════════════════════════════════════════════════════════════════
   FOUNDER — quirky, interactive
   ══════════════════════════════════════════════════════════════════ */
.founder{
  margin-top:clamp(56px,7vw,104px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(140deg,#181820,#101017);
  padding:clamp(28px,3.6vw,56px);
  display:grid;grid-template-columns:250px 1fr;gap:clamp(28px,4vw,64px);
  align-items:center;position:relative;overflow:hidden;
}
.founder::after{
  content:'';position:absolute;width:340px;height:340px;right:-90px;top:-120px;
  background:radial-gradient(circle,rgba(255,212,0,.10),transparent 66%);
  filter:blur(30px);pointer-events:none;
}

.avatar-3d{
  position:relative;width:100%;max-width:220px;margin-inline:auto;
  transition:transform .5s var(--ease);cursor:pointer;
}
.avatar-3d:hover{transform:translateY(-6px) rotate(-2deg)}
.avatar-3d.poked{animation:poke .6s cubic-bezier(.3,1.6,.4,1)}
@keyframes poke{
  0%{transform:none}
  25%{transform:rotate(-9deg) scale(1.06)}
  55%{transform:rotate(7deg) scale(1.04)}
  100%{transform:none}
}
.av-svg{width:100%;height:auto;display:block;overflow:visible}
.av-shadow{fill:rgba(0,0,0,.45)}
.av-hair-back,.av-hair{fill:#241C10}
.av-neck{fill:#D9A377}
.av-body{fill:var(--yellow)}
.av-face{fill:#F0BC8E}
.av-white{fill:#fff}
.av-pupil{fill:#1A1A22;transition:transform .12s linear}
.av-brow{stroke:#241C10;stroke-width:3.4;fill:none;stroke-linecap:round}
.av-smile{stroke:#7A3E28;stroke-width:3.6;fill:none;stroke-linecap:round}
.av-blush{fill:#F09090;opacity:.42}

.av-spark{
  position:absolute;top:4%;right:6%;color:var(--yellow);font-size:20px;
  opacity:0;transform:scale(.4);transition:.45s var(--ease);
}
.avatar-3d:hover .av-spark{opacity:1;transform:scale(1) rotate(20deg)}

.founder-badges{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:24px;
}
.fb{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--muted);
  transition:.4s var(--ease);cursor:default;
}
.fb:hover{transform:translateY(-2px) rotate(-2deg);border-color:var(--muted);color:var(--white)}
.fb.y{border-color:rgba(255,212,0,.45);color:var(--yellow)}

.founder-r blockquote p{
  font-family:var(--display);font-weight:400;
  font-size:clamp(18px,2.2vw,29px);line-height:1.36;letter-spacing:-.025em;
  color:var(--white);margin-top:6px;
}
.founder-r figcaption{margin-top:26px}
.f-name{
  display:block;font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:var(--yellow);
}
.f-role{display:block;color:var(--muted);font-size:14px;margin-top:3px}
.founder-poke{
  margin-top:20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);transition:color .4s var(--ease);
}

@media(max-width:820px){
  .founder{grid-template-columns:1fr;text-align:center}
  .founder-r figcaption,.founder-r .eyebrow{justify-content:center}
  .eyebrow{justify-content:flex-start}
  .founder .eyebrow{justify-content:center}
  .proof-cta{flex-direction:column;align-items:flex-start}
  .proof-cta .btn{width:100%;justify-content:center}
}

/* wordmark strip — until tight-cropped logo files exist */
.logo-track{align-items:center}
.lg{
  flex:none;font-family:var(--display);font-weight:500;
  font-size:clamp(19px,2.1vw,30px);letter-spacing:-.025em;
  color:var(--muted);white-space:nowrap;
  transition:color .45s var(--ease);
}
.lg:hover{color:var(--yellow)}
.lg-dot{flex:none;color:var(--line);font-size:12px}

/* ══ 🧪 WebGL hero backdrop ══════════════════════════════════════ */
.hero-gl{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
}
.hero.gl-on .noise{transition:opacity 1.6s var(--ease)}

/* ══ LOGO ════════════════════════════════════════════════════════
   Master file is the full lockup on white; fx.js crops to the bubble
   and keys the white out. Until that lands (or if canvas is blocked
   on file://), keep it small and unobtrusive rather than a white slab. */
.logo-img{
  height:29px;width:auto;object-fit:contain;
  opacity:0;transition:opacity .4s var(--ease);
}
.logo-img.keyed{opacity:1}
.logo-img.raw{opacity:1;mix-blend-mode:screen}   /* fallback: drop the white plate */
.foot-brand .logo-img{height:42px;margin-bottom:20px}

/* ── PORTAL · mobile stack ──────────────────────────────────────────
   Placed at end of file on purpose: the base .portal grid rule lives
   further down than the shared 680 block, so this override must come
   AFTER it to win the source-order tie (media queries add no specificity). */
@media(max-width:680px){
  .portal{grid-template-columns:1fr}
  .portal-scene{min-height:240px;border-right:none;border-bottom:1px solid var(--line)}
  .portal-cta{padding:26px 22px 30px}
  .portal-h{font-size:clamp(30px,9vw,42px)}
}