/* ============================================================
   ALL STACK LABS
   Cinematic dark. The field is a moment, not a wallpaper —
   it lives in the hero and never sits behind body copy.
   ============================================================ */
@font-face{font-family:'Sora';src:url('/fonts/sora-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Sora';src:url('/fonts/sora-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url('/fonts/manrope-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url('/fonts/manrope-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/geist-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --bg:#0F1216; --bg-2:#161A21; --bg-3:#1E242D;
  --fg:#ECEEF2; --fg-2:#A6AEBC; --fg-3:#767E8C;
  --gold:#FFB86B; --gold-2:#E9954A; --blue:#5BE3C4; --hot:#FFD9A8;
  --teal:#5BE3C4; --pink:#FFB86B; --violet:#5BE3C4;
  --fg-4:#525A67;
  --line:#FFFFFF14; --line-2:#FFFFFF26;
  --maxw:1240px; --gut:clamp(22px,4.5vw,52px);
  --ease:cubic-bezier(.22,.7,.2,1); --out:cubic-bezier(.16,1,.3,1);
  --disp:'Sora',sans-serif; --body:'Manrope',sans-serif; --mono:'Geist Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ---------------- nav ---------------- */
header{position:fixed;inset:0 0 auto;z-index:80;background:#0F1216ee;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px)}
.nav{max-width:var(--maxw);margin:0 auto;padding:20px var(--gut);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:16px;
  letter-spacing:-.01em}
.brand img{width:26px;height:26px}
.nav ul{margin-left:auto;display:flex;gap:6px;list-style:none}
.nav ul a{display:block;padding:9px 16px;border-radius:99px;font-size:14.5px;font-weight:500;
  color:var(--fg-2);transition:.24s var(--ease)}
.nav ul a:hover{color:var(--fg);background:#ffffff12}
.cta{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;padding:13px 22px;
  border-radius:99px;background:var(--fg);color:#0F1216;transition:.28s var(--ease);white-space:nowrap}
.cta:hover{background:var(--gold);color:#231603;box-shadow:0 10px 34px #ffb86b47;transform:translateY(-1px)}
.cta svg{transition:transform .3s var(--ease)}
.cta:hover svg{transform:translateX(4px)}
.cta--ghost{background:#ffffff08;color:var(--fg);border:1px solid var(--line-2)}
.cta--ghost:hover{border-color:#ffffff4d;background:#ffffff12}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:10px;
  padding:9px 11px;cursor:pointer}
.burger span{display:block;width:18px;height:1.6px;background:var(--fg);margin:4px 0}
@media(width<=880px){
  .nav ul{display:none;position:fixed;inset:70px 0 auto;flex-direction:column;gap:0;padding:8px var(--gut) 18px;
    background:#0F1216f8;border-bottom:1px solid var(--line)}
  .nav ul.open{display:flex}.nav ul a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--line)}
  .burger{display:block}.nav .cta{display:none}
}

/* ---------------- hero: the field lives here only ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate;
  overflow:hidden;padding:110px 0 60px}
#field{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.8s var(--out)}
#field.ready{opacity:1}
#field canvas{display:block;width:100%;height:100%}
/* readable copy is non-negotiable: hard scrim on the text side, solid at the seam */
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#0F1216f7 0%,#0F1216e0 38%,#0F121666 66%,#0F121600 100%),
             linear-gradient(180deg,#0F1216b8 0%,#0F121600 26%,#0F121600 62%,#0F1216 100%)}
.hero .wrap{position:relative;z-index:2}
.tagline{font-family:var(--mono);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--fg-3);display:flex;align-items:center;gap:13px;margin-bottom:22px}
.tagline i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);
  animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(36px,4.2vw,60px);line-height:1.04;
  letter-spacing:-.04em;max-width:19ch;margin-bottom:22px}
h1 em{font-style:normal;background:linear-gradient(96deg,var(--gold) 10%,var(--hot) 55%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(16px,1.1vw,18px);color:var(--fg-2);max-width:48ch;margin-bottom:28px}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.facts{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.facts b{color:var(--fg-2);font-weight:500}

/* ---------------- sections: solid, no bleed ---------------- */
main > section:not(.hero){background:var(--bg);position:relative;z-index:3}
section{padding:clamp(70px,9vh,120px) 0}
.head{margin-bottom:52px;max-width:66ch}
.num{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.9vw,52px);line-height:1.04;
  letter-spacing:-.038em}
.head p{color:var(--fg-2);font-size:17px;margin-top:16px}

/* index rows */
.idx{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:56px 1fr 1.15fr auto;gap:26px;align-items:center;
  padding:30px 0;border-bottom:1px solid var(--line);transition:.45s var(--ease);position:relative}
.row::before{content:'';position:absolute;inset:0 -26px;border-radius:12px;opacity:0;
  background:linear-gradient(90deg,#ffffff0c,transparent 72%);transition:opacity .45s var(--ease)}
.row:hover::before{opacity:1}
.row .i{font-family:var(--mono);font-size:12px;color:var(--fg-4);transition:color .35s}
.row:hover .i{color:var(--gold)}
.row h3{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.1vw,27px);letter-spacing:-.03em;
  transition:transform .45s var(--ease)}
.row:hover h3{transform:translateX(8px)}
.row p{color:var(--fg-3);font-size:15.5px;transition:color .35s}
.row:hover p{color:var(--fg-2)}
.row .go{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-4);white-space:nowrap;transition:.35s var(--ease)}
.row:hover .go{color:var(--gold);transform:translateX(5px)}
@media(width<=860px){.row{grid-template-columns:40px 1fr;gap:14px}.row p,.row .go{display:none}}

/* cards */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
@media(width<=820px){.g2,.g3{grid-template-columns:1fr}}
.cell{background:var(--bg-2);padding:clamp(26px,3.4vw,42px);transition:background .4s var(--ease)}
a.cell:hover{background:var(--bg-3)}
.cell .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px}
.cell h3{font-family:var(--disp);font-weight:600;font-size:clamp(18px,2vw,24px);letter-spacing:-.028em;
  margin-bottom:11px}
.cell p{color:var(--fg-3);font-size:15.5px}
.cell b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(34px,4.4vw,56px);
  letter-spacing:-.045em;line-height:1;margin-bottom:12px;
  background:linear-gradient(96deg,var(--gold),var(--hot));-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* people */
.who{display:flex;gap:18px;align-items:flex-start}
.who img{width:66px;height:66px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--line-2);filter:grayscale(1) contrast(1.06)}
.who .r{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:6px 0 10px}

/* closing */
.close{text-align:center;padding:clamp(90px,13vh,170px) 0}
.close h2{max-width:none;margin:0 auto 20px;font-size:clamp(32px,6vw,80px)}
.close p{color:var(--fg-2);max-width:50ch;margin:0 auto 36px;font-size:17px}

footer{border-top:1px solid var(--line);padding:56px 0 32px;background:var(--bg-2)}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;margin-bottom:44px}
@media(width<=720px){.fg{grid-template-columns:1fr 1fr}}
.fg p{color:var(--fg-3);font-size:14.5px;max-width:32ch;margin-top:13px}
.fg h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-4);margin-bottom:15px;font-weight:500}
.fg ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--fg-2)}
.fg a:hover{color:var(--gold)}
.fb{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-4)}

.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--out),transform .8s var(--out)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
}

/* ============================================================
   MOTION LAYER
   ============================================================ */

/* scroll progress */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:90;background:#ffffff0d}
.progress i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--hot) 55%,var(--blue));
  transition:transform .12s linear;box-shadow:0 0 14px #ffc46b66}

/* masked word reveal */

/* cursor spotlight */
.row,.cell{--mx:50%;--my:50%}
.row::after,.cell::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(320px circle at var(--mx) var(--my),#ffc46b1f,transparent 68%)}
.row:hover::after,.cell:hover::after{opacity:1}
.cell{position:relative;overflow:hidden}

/* sweep line across a row on hover */
.row .sweep{position:absolute;left:0;right:0;bottom:-1px;height:1px;transform:scaleX(0);
  transform-origin:0 50%;transition:transform .7s var(--out);
  background:linear-gradient(90deg,var(--gold),var(--blue) 70%,transparent)}
.row:hover .sweep{transform:scaleX(1)}

/* stat numbers */
.cell b{font-variant-numeric:tabular-nums}

/* flowing divider */
.divider{position:relative;height:120px;margin:0;overflow:hidden}
.divider canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* marquee */
.strip{border-block:1px solid var(--line);padding:18px 0;overflow:hidden;background:var(--bg-2)}
.strip .track{display:flex;gap:52px;white-space:nowrap;animation:slide 38s linear infinite;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3)}
.strip .track b{color:var(--gold);font-weight:500}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip:hover .track{animation-play-state:paused}

/* nav links get an underline that draws */
.nav ul a{position:relative}
.nav ul a::after{content:'';position:absolute;left:16px;right:100%;bottom:5px;height:1px;
  background:var(--gold);transition:right .34s var(--ease)}
.nav ul a:hover::after{right:16px}

@media(prefers-reduced-motion:reduce){
  .strip .track{animation:none!important}
}

/* ---------------- hero: two-column with a live panel ---------------- */
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.5vw,62px);align-items:center}
@media(width<=1000px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.hero{background:radial-gradient(1100px 560px at 72% 38%,#141726 0%,#0F1216 68%)}
.hero::after{display:none}
.hero h1{max-width:19ch}
.panel{position:relative;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
  background:linear-gradient(168deg,#1A1F27,#141820);box-shadow:0 26px 64px #00000073;box-shadow:0 40px 90px #00000080}
.panel-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.dots{display:flex;gap:5px}.dots i{width:9px;height:9px;border-radius:50%;background:#ffffff14}
.dots i:nth-child(1){background:#ff6b5e40}.dots i:nth-child(2){background:#ffc46b40}
.dots i:nth-child(3){background:#50dcbe40}
.panel .live{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--gold)}
.panel .live b{width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold);animation:pulse 1.9s infinite}
#hero{display:block;width:100%;height:420px}
@media(width<=560px){#hero{height:330px}}
.panel-foot{display:flex;gap:20px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4)}
.panel-foot b{color:var(--fg-2);font-weight:500}


/* ============================================================
   COLOUR LAYER — lit sections, gradient edges, glow
   ============================================================ */
body{background:
  radial-gradient(1100px 720px at 92% 2%, #FFB86B14, transparent 62%),
  radial-gradient(1000px 680px at 4% 46%, #5BE3C412, transparent 62%),
  radial-gradient(1100px 800px at 60% 104%, #FFB86B10, transparent 64%),
  var(--bg)}
main > section{position:relative}
main > section::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0}
#build::before{background:radial-gradient(760px 420px at 88% 12%,#5BE3C40F,transparent 64%)}
#work::before{background:radial-gradient(820px 460px at 6% 40%,#FFB86B0E,transparent 62%)}
#diff::before{background:radial-gradient(900px 500px at 78% 60%,#5BE3C410,transparent 62%)}
#live::before{background:radial-gradient(760px 420px at 14% 30%,#FFB86B0E,transparent 62%)}
#team::before{background:radial-gradient(800px 440px at 92% 30%,#5BE3C40E,transparent 62%)}
main > section > .wrap{position:relative;z-index:1}

.hero{background:
  radial-gradient(900px 620px at 78% 26%,#3A2A1C 0%,transparent 62%),
  radial-gradient(820px 600px at 10% 88%,#0E3038 0%,transparent 60%),
  radial-gradient(1400px 820px at 50% 0%,#191F28 0%,#0F1216 74%)}

/* gradient-edged panels */
.panel,.pcard{position:relative}
.panel::before,.pcard::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,#FFB86B70,#FFB86B14 34%,#5BE3C41A 62%,#5BE3C470);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* discipline cards, each with its own live panel */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(width<=1040px){.pgrid{grid-template-columns:1fr 1fr}}
@media(width<=640px){.pgrid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:linear-gradient(168deg,#1A1F27,#141820);box-shadow:0 20px 50px #00000066;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
a.pcard:hover{transform:translateY(-6px);box-shadow:0 26px 60px #00000073}
.pcard canvas{display:block;width:100%;height:186px}
.pcard .body{padding:20px 22px 24px;border-top:1px solid var(--line)}
.pcard h3{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.028em;margin-bottom:8px}
.pcard p{color:var(--fg-3);font-size:14.5px}
.pcard .go{display:inline-flex;align-items:center;gap:7px;margin-top:15px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
a.pcard:hover .go{color:var(--hot)}

/* wide panel (chart / logs) */
.wide{display:grid;grid-template-columns:1.45fr .55fr;gap:22px;align-items:stretch}
@media(width<=900px){.wide{grid-template-columns:1fr}}
.wide .panel canvas{display:block;width:100%;height:330px}
.sidestat{display:flex;flex-direction:column;gap:14px}
.sidestat div{flex:1;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  background:linear-gradient(168deg,#1A1F27,#141820);box-shadow:0 20px 50px #00000066;display:flex;flex-direction:column;justify-content:center}
.sidestat b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.2vw,42px);
  letter-spacing:-.04em;line-height:1;margin-bottom:8px;
  background:linear-gradient(100deg,var(--gold),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sidestat span{font-size:14px;color:var(--fg-3)}

/* accent recolouring */
.num{color:var(--teal)}
.cell .k{color:var(--pink)}
h1 em{background:linear-gradient(100deg,var(--gold) 4%,var(--hot) 44%,var(--teal) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.progress i{background:linear-gradient(90deg,var(--gold),var(--hot) 45%,var(--teal))}
.strip .track b{color:var(--pink)}
.cell b{background:linear-gradient(100deg,var(--gold),var(--hot) 42%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.row:hover .i{color:var(--pink)}
.row .sweep{background:linear-gradient(90deg,var(--gold),var(--teal) 70%,transparent)}
.row::after,.cell::after{background:radial-gradient(320px circle at var(--mx) var(--my),#FFB86B14,transparent 68%)}
#live .panel canvas{display:block;width:100%;height:212px}
#live .panel canvas{display:block;width:100%;height:212px}
.close h2 em{font-style:normal;background:linear-gradient(100deg,var(--gold),var(--hot) 42%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* light-theme corrections */

.strip{background:var(--bg-2)}
footer{background:var(--bg-3)}
.cell{border-radius:0}
.grid{background:var(--line)}
.pcard .body{border-top:1px solid var(--line)}
.hero .panel{background:linear-gradient(168deg,#1A1F27,#141820)}

/* --- 2. service/page hero panels had NO canvas height, so they fell back to
       the HTML default of 300x150. That's why the visuals looked tiny. --- */
.hero .panel canvas{display:block;width:100%;height:392px}
@media(width<=1000px){.hero .panel canvas{height:320px}}
@media(width<=560px){.hero .panel canvas{height:264px}}

/* ---------------- testimonial ---------------- */
.quote-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:stretch}
@media(width<=900px){.quote-wrap{grid-template-columns:1fr}}
.tq{border:1px solid var(--line-2);border-radius:20px;padding:clamp(28px,3.6vw,44px);
  background:linear-gradient(168deg,#1A1F27,#141820);box-shadow:0 24px 60px #00000059;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.tq::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,#FFB86B66,#FFB86B10 40%,#5BE3C41A 66%,#5BE3C466);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.tq .stars{color:var(--gold);letter-spacing:4px;font-size:17px;margin-bottom:20px}
.tq blockquote{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.2vw,27px);
  line-height:1.34;letter-spacing:-.022em;margin-bottom:26px}
.tq blockquote span{color:var(--teal)}
.tq .by{display:flex;align-items:center;gap:15px}
.tq .by img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2)}
.tq .by .n{font-family:var(--disp);font-weight:600;font-size:16.5px}
.tq .by .c{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-top:5px}
.outcomes{display:flex;flex-direction:column;gap:14px}
.outcomes div{flex:1;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  background:var(--bg-2);display:flex;flex-direction:column;justify-content:center}
.outcomes b{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:8px;font-weight:500}
.outcomes p{color:var(--fg-2);font-size:15px}