:root{
  --navy-900:#0A1428; --navy-850:#0C1A31; --navy-800:#101F3B; --navy-700:#152747; --navy-600:#1D3560;
  --gold:#E9B949; --gold-2:#C79A31; --gold-soft:rgba(233,185,73,.12);
  --white:#FFFFFF; --slate:#93A7C4; --slate-dim:#6D82A3;
  --line:rgba(147,167,196,.16); --line-2:rgba(147,167,196,.3);
  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --body:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(16px,2.6vw,40px); --maxw:1480px; --navh:94px; --navh-stuck:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--navh) + 20px)}
body{margin:0;background:var(--navy-900);color:var(--slate);font-family:var(--body);
  font-size:clamp(15.5px,.35vw + 14.8px,16.8px);line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1000px 620px at 82% -6%, rgba(233,185,73,.13), transparent 60%),
             radial-gradient(800px 560px at 0% 10%, rgba(29,53,96,.5), transparent 62%)}
#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--navy-900)}
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:2}
.skip{position:absolute;left:-9999px;background:var(--gold);color:var(--navy-900);padding:10px 16px;z-index:99;font-weight:700}
.skip:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* cursor */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .25s}
.cur-dot{width:6px;height:6px;background:var(--gold);margin:-3px 0 0 -3px}
.cur-ring{width:34px;height:34px;border:1.5px solid rgba(233,185,73,.55);margin:-17px 0 0 -17px;
  transition:opacity .25s,width .22s cubic-bezier(.2,.8,.3,1),height .22s cubic-bezier(.2,.8,.3,1),border-color .22s,background .22s,margin .22s}
body.cur-on .cur-dot,body.cur-on .cur-ring{opacity:1}
body.cur-hot .cur-ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(233,185,73,.1);border-color:var(--gold)}
body.cur-down .cur-ring{width:26px;height:26px;margin:-13px 0 0 -13px}
@media (hover:hover) and (pointer:fine){
  body.cur-on,body.cur-on a,body.cur-on button,body.cur-on canvas,body.cur-on .tab,body.cur-on select,body.cur-on .sk{cursor:none}
  body.cur-on input,body.cur-on textarea{cursor:text}
}

h1,h2,h3,h4{font-family:var(--display);color:var(--white);font-weight:800;letter-spacing:-.02em;line-height:1.06;margin:0}
h2{font-size:clamp(29px,4.4vw,50px);text-transform:uppercase}
h2 .g{color:var(--gold)}
h3{font-size:clamp(18px,1.5vw,22px);font-weight:700;line-height:1.25}
p{margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold)}
.lede{color:var(--slate);font-size:clamp(15.5px,1vw,17.5px);max-width:62ch}
.gold{color:var(--gold)}
.sec-head{margin-bottom:clamp(30px,4vw,52px);max-width:760px}
.sec-head h2{margin-bottom:16px}
.sec-head h2::after{content:"";display:block;width:64px;height:3px;background:var(--gold);margin-top:18px;border-radius:2px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center h2::after{margin-inline:auto}
.sec-head.center .lede{margin-inline:auto}
section{padding-block:clamp(54px,7vw,102px);position:relative;z-index:2}
.rule{height:1px;background:var(--line);max-width:var(--maxw);margin-inline:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:10px;
  text-decoration:none;font-weight:700;font-size:14.5px;font-family:var(--body);border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),background .2s,border-color .2s,color .2s,box-shadow .2s}
.btn-solid{background:var(--gold);color:var(--navy-900);box-shadow:0 8px 26px -12px rgba(233,185,73,.8)}
.btn-solid:hover{background:#F3C75F}
.btn-ghost{border-color:var(--line-2);color:var(--white)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:10px 18px;font-size:13.5px}

/* nav */
/* The header blurs whatever is behind it, and behind it is a canvas repainting
   at 60fps. On a display with a fractional device pixel ratio (a laptop at 125%
   or 150% scaling) Chrome re-samples that backdrop against a shifting subpixel
   grid every frame, which makes the header text shimmer. Giving the header its
   own compositor layer fixes the sampling, and the transition is limited to the
   two properties that actually change so nothing else is animated by accident. */
header.nav{position:sticky;top:0;z-index:50;background:rgba(10,20,40,.74);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease}
header.nav.stuck{border-bottom-color:var(--line);background:rgba(10,20,40,.95)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gold);z-index:2}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--navh);transition:height .3s cubic-bezier(.2,.8,.3,1)}
header.nav.stuck .nav-in{height:var(--navh-stuck)}
.nav-in{transition:height .28s cubic-bezier(.2,.8,.3,1)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:800;color:var(--white);font-size:18.5px;line-height:1.1}
.brand .glyph{width:38px;height:38px;border-radius:10px;flex:none;background:linear-gradient(150deg,var(--gold),var(--gold-2));display:grid;place-items:center;font-family:var(--display);font-size:16px;color:var(--navy-900);font-weight:800}
.brand small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-dim);font-weight:400;margin-top:2px}
.nav-links{display:none;gap:2px;align-items:center}
.nav-links a{text-decoration:none;color:var(--slate);font-size:13.8px;font-weight:500;padding:9px 11px;
  border-radius:8px;transition:.2s;white-space:nowrap}
.nav-links a:hover{color:var(--white);background:rgba(147,167,196,.08)}
.nav-links a.active{color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:10px}
.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:10px;background:none;cursor:pointer}
.burger span{display:block;width:17px;height:1.8px;background:var(--white);border-radius:2px;transition:.25s}
.burger span+span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}
.mobile-menu{display:none;border-top:1px solid var(--line);background:rgba(10,20,40,.98);padding:10px var(--pad) 20px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;text-decoration:none;color:var(--slate);padding:13px 0;border-bottom:1px solid var(--line);font-weight:600}
.mobile-menu a:hover{color:var(--gold)}

/* hero */
.hero{padding-top:clamp(40px,5.5vw,74px);padding-bottom:clamp(56px,6vw,96px);position:relative;overflow:hidden;
  min-height:min(940px, 104vh);display:flex;align-items:center;isolation:isolate}
.spacefx{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease .15s;cursor:grab}
.hero.space-ready .spacefx{opacity:1}
.hero.space-grab .spacefx{cursor:grabbing}
.hero.space-hold .spacefx{cursor:move}
/* name tag for a double-clicked body */
.space-label{position:absolute;z-index:5;transform:translate(-50%,-190%);pointer-events:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-900);background:var(--gold);padding:5px 11px;border-radius:999px;white-space:nowrap;
  opacity:0;transition:opacity .25s;box-shadow:0 10px 26px -12px rgba(0,0,0,.9)}
.space-label::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--gold)}
.space-label.on{opacity:1}
.hero.no-space .spacefx{display:none}
/* readability scrim: dark on the copy side, clear over the system */
.space-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(6,12,26,.94) 0%, rgba(6,12,26,.86) 26%, rgba(7,14,30,.5) 48%, rgba(8,16,34,.12) 68%, rgba(8,16,34,0) 84%),
             radial-gradient(120% 80% at 50% 120%, rgba(10,20,40,.85), transparent 62%),
             linear-gradient(180deg, rgba(10,20,40,.55), transparent 22%, transparent 74%, rgba(10,20,40,.9))}
@media(max-width:900px){
  /* the copy stacks on top and the scene lives underneath it, so the hero needs
     a deep band below the buttons or there is nothing left to interact with */
  .hero{min-height:auto;padding-bottom:clamp(360px,86vw,560px)}
  .space-scrim{background:
    linear-gradient(180deg, rgba(8,16,32,.94) 0%, rgba(8,16,32,.92) 46%, rgba(8,16,32,.62) 66%, rgba(8,16,32,.1) 82%, rgba(8,16,32,0) 100%),
    radial-gradient(120% 60% at 50% 108%, rgba(10,20,40,.7), transparent 60%)}
  .space-hint{display:flex;bottom:12px}
}
.hero.dragging{user-select:none;-webkit-user-select:none}
.hero{touch-action:pan-y}
.space-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:4;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-dim);border:1px solid var(--line);
  background:rgba(10,20,40,.6);padding:6px 13px;border-radius:999px;pointer-events:none;
  opacity:0;animation:hintIn .8s 2.2s forwards}
.space-hint i{width:6px;height:6px;border-radius:50%;background:#5CE1A6;box-shadow:0 0 0 0 rgba(92,225,166,.6);animation:pulseG 2.4s infinite}
@keyframes pulseG{70%{box-shadow:0 0 0 8px rgba(92,225,166,0)}100%{box-shadow:0 0 0 0 rgba(92,225,166,0)}}
@keyframes hintIn{to{opacity:1}}
@media(max-width:720px){.space-hint{display:none}}
/* the shell box spans the full content width, so left as-is it swallows every
   click meant for the scene behind it. Only the copy column itself needs to
   catch pointer events. */
.hero .shell{position:relative;z-index:2;pointer-events:none}
.hero .hero-grid > *{pointer-events:auto}

.hero-grid{display:grid;gap:clamp(30px,4vw,52px);align-items:center}
/* the solar system owns the right side, so the copy column stays narrow */
@media(min-width:1200px){ .hero-grid{--hero-copy:600px} }
@media(min-width:1500px){ .hero-grid{--hero-copy:660px} }
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(233,185,73,.32);background:var(--gold-soft);padding:7px 14px;border-radius:999px;margin-bottom:22px}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(233,185,73,.55)}70%{box-shadow:0 0 0 9px rgba(233,185,73,0)}100%{box-shadow:0 0 0 0 rgba(233,185,73,0)}}
.hero h1{font-size:clamp(36px,5.6vw,64px);font-weight:800;letter-spacing:-.035em;text-transform:uppercase;line-height:1;margin-bottom:14px}
.hero h1 .g{color:var(--gold);display:block}
.hero .role{font-family:var(--mono);font-size:clamp(12px,1.05vw,14.5px);color:var(--white);letter-spacing:.06em;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line);display:inline-block}
.hero .role span{color:var(--gold)}
.hero p.lede{margin-bottom:13px;font-size:clamp(15px,.95vw,16.5px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

/* 3D stage */
.stage{position:relative;border:1px solid rgba(147,167,196,.22);border-radius:20px;
  background:linear-gradient(165deg,rgba(18,34,64,.42),rgba(8,16,34,.28));
  backdrop-filter:blur(9px) saturate(115%);-webkit-backdrop-filter:blur(9px) saturate(115%);
  box-shadow:0 40px 90px -50px #000, inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;min-height:380px}
.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;opacity:.5;mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent)}
#stack3d{display:block;width:100%;height:clamp(390px,46vw,530px);position:relative;z-index:1;touch-action:pan-y}
.stage-tag{position:absolute;top:16px;left:16px;z-index:3;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-dim);border:1px solid var(--line);background:rgba(10,20,40,.7);padding:6px 11px;border-radius:999px}
.stage-read{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;border:1px solid var(--line);background:rgba(10,20,40,.86);backdrop-filter:blur(8px);border-radius:13px;padding:14px 16px;min-height:74px}
.stage-read .lay{font-family:var(--display);font-weight:800;color:var(--white);font-size:16px;display:flex;align-items:center;gap:9px}
.stage-read .lay i{width:8px;height:8px;border-radius:2px;background:var(--gold);flex:none}
.stage-read .tech{font-family:var(--mono);font-size:11.5px;color:var(--gold);margin-top:6px}
.stage-read .hint{font-size:12.5px;color:var(--slate-dim);margin-top:5px}
.fallback3d{display:none;padding:46px 20px;perspective:900px}
.fallback3d .fl{height:52px;margin:-4px auto;max-width:320px;border:1px solid var(--gold);border-radius:8px;background:linear-gradient(180deg,rgba(29,53,96,.9),rgba(16,31,59,.9));transform:rotateX(58deg) rotateZ(-40deg);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--white)}
.no-webgl #stack3d{display:none}
.no-webgl .fallback3d{display:block}

/* ticker — two rows travelling in opposite directions */
.ticker{border-block:1px solid var(--line);padding:16px 0;overflow:hidden;position:relative;z-index:2;
  background:linear-gradient(180deg,rgba(12,26,49,.7),rgba(10,20,40,.5));
  display:grid;gap:11px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 130% at 50% 50%, rgba(233,185,73,.07), transparent 70%)}
.ticker-row{overflow:hidden;display:flex}
.ticker-track{display:flex;width:max-content;will-change:transform;animation:slideL 52s linear infinite}
.ticker-row.rev .ticker-track{animation:slideR 46s linear infinite}
.ticker-row:hover .ticker-track{animation-play-state:paused}
@keyframes slideL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tk{display:inline-flex;align-items:center;gap:10px;margin-right:11px;padding:9px 17px 9px 13px;white-space:nowrap;
  color:var(--slate);border:1px solid var(--line);border-radius:999px;
  background:linear-gradient(180deg,rgba(29,53,96,.34),rgba(12,26,49,.24));
  position:relative;transition:color .28s,border-color .28s,transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,background .28s}
.tk::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:radial-gradient(120% 160% at 50% -40%, rgba(255,255,255,.10), transparent 60%)}
.tk svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  color:var(--tc,#93A7C4);opacity:.9;transition:opacity .28s,filter .28s,transform .28s}
.tk b{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:var(--white);opacity:.88;transition:opacity .28s}
.tk:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--tc) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tc) 16%, transparent), rgba(12,26,49,.34));
  box-shadow:0 14px 34px -18px var(--tc), 0 0 0 1px color-mix(in srgb, var(--tc) 22%, transparent) inset}
.tk:hover svg{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 9px var(--tc))}
.tk:hover b{opacity:1}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .tk:hover{border-color:var(--tc);box-shadow:0 14px 34px -18px var(--tc)}
}

/* about */
.about{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
.photo-wrap{position:relative;max-width:330px}
.photo-wrap::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1.5px solid var(--gold);border-radius:18px;z-index:0}
.photo-wrap img{position:relative;z-index:1;border-radius:18px;border:1px solid var(--line-2);width:100%}
.photo-badge{position:absolute;z-index:2;right:-14px;bottom:-14px;background:var(--gold);color:var(--navy-900);border-radius:12px;padding:11px 15px;font-family:var(--display);font-weight:800;font-size:12.5px;line-height:1.3;text-align:right}
.edu{display:grid;gap:12px;margin-top:26px}
.edu-item{display:flex;gap:16px;align-items:baseline;border-top:1px solid var(--line);padding-top:12px}
.edu-item .yr{font-family:var(--mono);font-size:11.5px;color:var(--gold);flex:none;width:96px}
.edu-item b{color:var(--white);font-weight:700;font-size:15.5px;display:block}
.edu-item span{font-size:14px;color:var(--slate-dim)}
.counters{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.counter{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:rgba(16,31,59,.4);transition:.25s}
.counter:hover{border-color:var(--gold);transform:translateY(-4px)}
.counter b{display:block;font-family:var(--display);font-size:clamp(22px,2.6vw,30px);color:var(--gold);font-weight:800;line-height:1}
.counter span{font-size:12.5px;color:var(--slate-dim);display:block;margin-top:6px}

/* cards */
.grid{display:grid;gap:14px;grid-template-columns:1fr}
.who-grid{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:1fr;align-items:stretch}
.who-cards{display:grid;gap:14px;grid-template-columns:1fr}
.who-stack{display:flex;flex-direction:column}
.who-stack-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.who-stack h3{font-family:var(--display);font-size:clamp(20px,2vw,27px);font-weight:800;
  letter-spacing:-.03em;color:var(--white);line-height:1.1;margin-bottom:9px}
.who-stack h3 .g{color:var(--gold)}
.who-stack > p{color:var(--slate);font-size:14.4px;margin-bottom:16px;max-width:46ch}
.who-stack .stage{flex:1;min-height:0}
@media(min-width:900px){
  .who-cards{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1120px){
  /* cards 2x2 on the left, the diagram filling the column beside them */
  .who-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
  /* the diagram column stretches to the cards, so both bottoms line up */
  .who-cards{align-content:start}
  .who-stack .stage{min-height:0}
}
.card{position:relative;border:1px solid var(--line);border-radius:16px;background:linear-gradient(170deg,rgba(21,39,71,.62),rgba(12,26,49,.4));padding:26px 24px;
  transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .3s;overflow:hidden;transform-style:preserve-3d}
.card::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--gold);transition:width .35s cubic-bezier(.2,.8,.3,1)}
.card:hover{border-color:var(--line-2);box-shadow:0 26px 50px -32px #000}
.card:hover::after{width:100%}
.card p{font-size:15px}
.card>*{transform:translateZ(18px)}
.ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(233,185,73,.3);background:var(--gold-soft);margin-bottom:18px;transition:.3s}
.card:hover .ico{background:var(--gold);border-color:var(--gold)}
.ico svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:.3s}
.card:hover .ico svg{stroke:var(--navy-900)}
.card h3{margin-bottom:9px}
.k{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.16em;text-transform:uppercase;margin-bottom:13px}

/* skills */
.skills-wrap{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
.sphere{position:relative;width:100%;aspect-ratio:1;max-width:420px;margin-inline:auto;touch-action:pan-y}
.sphere::after{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(233,185,73,.14),transparent 70%);pointer-events:none}
.sk{position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;color:var(--slate);white-space:nowrap;
  will-change:transform,opacity;transition:color .2s;padding:3px 7px;border-radius:6px}
.sk:hover,.sk.on{color:var(--gold);background:var(--gold-soft)}
.sphere-hint{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-dim);margin-top:6px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tab{font-family:var(--body);font-weight:600;font-size:13.5px;color:var(--slate);background:none;border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.22s}
.tab:hover{color:var(--white);border-color:var(--line-2)}
.tab[aria-selected="true"],.tab.on{background:var(--gold);color:var(--navy-900);border-color:var(--gold);font-weight:700}
.panel[hidden]{display:none}
.panel{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--mono);font-size:12.5px;color:var(--white);border:1px solid var(--line);border-radius:9px;padding:9px 14px;background:rgba(21,39,71,.55);transition:.22s}
.chip:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.panel .why{color:var(--slate);font-size:15px;margin-top:18px;max-width:70ch}


/* architecture flow */
.flow-card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(170deg,rgba(21,39,71,.55),rgba(12,26,49,.4));
  padding:clamp(14px,2vw,26px);perspective:1400px}
.flow-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.flowsvg{display:block;width:100%;min-width:720px;height:auto;transition:transform .5s cubic-bezier(.2,.8,.3,1);transform-style:preserve-3d}
.wires use{fill:none;stroke:var(--line-2);stroke-width:2}
.wires .dash{stroke-dasharray:6 7;stroke:rgba(233,185,73,.45);animation:dashmove 1.6s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-26}}
.wlabel text{font-family:'JetBrains Mono',monospace;font-size:10.5px;fill:var(--slate-dim);letter-spacing:.1em;text-transform:uppercase}
.packets circle{fill:var(--gold);filter:url(#glow)}
.packets .back{fill:#8CC8AC}
.node{cursor:pointer}
.node rect{fill:url(#nodeFill);stroke:var(--line-2);stroke-width:1.5;transition:stroke .25s,filter .25s}
.node .nt{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;fill:#fff;text-anchor:middle;letter-spacing:-.01em}
.node .ns{font-family:'JetBrains Mono',monospace;font-size:10.5px;fill:var(--slate-dim);text-anchor:middle}
.node:hover rect,.node:focus rect,.node.on rect{stroke:var(--gold);filter:drop-shadow(0 0 14px rgba(233,185,73,.5))}
.node:hover .ns,.node.on .ns{fill:var(--gold)}
.node:focus{outline:none}
.flow-read{margin-top:18px;border-top:1px solid var(--line);padding-top:18px;min-height:92px}
.flow-read b{display:block;font-family:var(--display);font-weight:800;color:var(--white);font-size:17px;margin-bottom:7px}
.flow-read p{font-size:15px;color:var(--slate);max-width:76ch}
.chip.flash{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 3px rgba(233,185,73,.15)}
.sk{cursor:pointer}

/* work */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.search-wrap{position:relative;display:flex;flex:1;min-width:220px}
.search-wrap input{width:100%;background:rgba(10,20,40,.65);border:1px solid var(--line);border-radius:999px;padding:11px 18px 11px 46px;color:var(--white);font-family:var(--body);font-size:14px}
.search-wrap input:focus{outline:none;border-color:var(--gold)}
.search-wrap svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--slate-dim);fill:none;stroke-width:2;pointer-events:none;z-index:2}
.count{font-family:var(--mono);font-size:11.5px;color:var(--slate-dim);margin-bottom:22px}
.count b{color:var(--gold)}
.work{display:grid;gap:18px;grid-template-columns:1fr;grid-auto-flow:dense}
/* a filter that returns one or two projects should not leave a lonely column */
@media(min-width:860px){
  .work.n1{grid-template-columns:minmax(0,820px);justify-content:center}
  .work.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.proj{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(170deg,rgba(21,39,71,.6),rgba(12,26,49,.35));
  transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .3s;transform-style:preserve-3d}
.proj:hover{border-color:var(--line-2);box-shadow:0 30px 60px -34px #000}
.proj.hide{display:none}
.mock{position:relative;aspect-ratio:16/9;border-bottom:1px solid var(--line);overflow:hidden;background:var(--navy-850)}
.mock .bar{position:absolute;inset:0 0 auto 0;height:30px;z-index:2;background:rgba(8,16,32,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
.mock .bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block}
.mock .bar b{margin-left:10px;font-family:var(--mono);font-size:10px;color:var(--slate-dim);font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* contain, never crop: whole screenshot always visible */
.mock{background:
  radial-gradient(120% 120% at 50% 0%, rgba(29,53,96,.42), transparent 70%), #070E1C}
.mock .shot{position:absolute;inset:30px 0 0;width:100%;height:calc(100% - 30px);
  object-fit:contain;object-position:center;background:transparent;
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.proj:hover .mock .shot{transform:scale(1.035)}
.mock-open{position:absolute;inset:30px 0 0;z-index:3;display:grid;place-items:center;text-decoration:none;
  background:linear-gradient(180deg,rgba(8,16,32,.1),rgba(8,16,32,.72));opacity:0;transition:opacity .3s}
.mock-open span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--navy-900);
  background:var(--gold);padding:11px 20px;border-radius:999px;transform:translateY(8px);transition:transform .3s;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.9)}
.proj:hover .mock-open{opacity:1}
.proj:hover .mock-open span{transform:none}
.mock-open:focus-visible{opacity:1}

/* technology tabs */
.tech-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.tech-tab{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--body);font-size:13.4px;font-weight:600;color:var(--slate);
  border:1px solid var(--line);border-radius:999px;padding:10px 14px;
  background:linear-gradient(180deg,rgba(29,53,96,.26),rgba(12,26,49,.2));
  transition:color .25s,border-color .25s,background .25s,transform .25s,box-shadow .25s}
.tech-tab .tt-dot{width:8px;height:8px;border-radius:50%;background:var(--tc);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tc) 18%, transparent);transition:box-shadow .25s}
.tech-tab em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--slate-dim);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;transition:.25s}
.tech-tab:hover{color:var(--white);transform:translateY(-2px);border-color:var(--line-2)}
.tech-tab.on{color:var(--navy-900);background:var(--gold);border-color:var(--gold);
  box-shadow:0 12px 30px -16px rgba(233,185,73,.95)}
.tech-tab.on .tt-dot{box-shadow:0 0 0 3px rgba(10,20,40,.22)}
.tech-tab.on em{color:rgba(10,20,40,.72);border-color:rgba(10,20,40,.28)}
.tech-blurb{color:var(--slate-dim);font-size:14.2px;max-width:66ch;margin-bottom:22px;
  border-left:2px solid var(--gold);padding-left:14px}
.work-more{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.work-more span{font-size:13.6px;color:var(--slate-dim)}
.work-more .btn svg{flex:none}
.work-more .btn #allCount{color:inherit;font-weight:800}
/* on a phone the tabs become a single swipeable strip instead of five wrapped rows */
@media(max-width:720px){
  .tech-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:8px;margin-inline:calc(var(--pad,20px)*-1);padding-inline:var(--pad,20px);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tech-tabs::-webkit-scrollbar{display:none}
  .tech-tab{flex:none;scroll-snap-align:start}
}
.proj-in{padding:24px 22px}
.type{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:block}
.proj h3{margin-bottom:11px}
.proj p{font-size:15px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{font-family:var(--mono);font-size:11px;color:var(--slate);border:1px solid var(--line);border-radius:7px;padding:5px 9px}
.proj-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.tlink{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:13.5px;font-weight:700;color:var(--gold)}
.tlink svg{transition:transform .2s}
.tlink:hover svg{transform:translate(3px,-3px)}
.empty{border:1px dashed var(--line-2);border-radius:16px;padding:40px 20px;text-align:center;color:var(--slate-dim);font-size:14.5px}

/* testimonials */
/* the carousel throws cards past the viewport edge; without clipping here the
   whole page can be swiped sideways on a phone */
.tstage{position:relative;perspective:1400px;height:var(--tstage-h,580px);margin-bottom:26px;
  overflow:hidden;padding-block:6px}
.tcard{position:absolute;top:0;left:50%;width:min(620px,88%);border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(170deg,rgba(21,39,71,.92),rgba(12,26,49,.92));padding:clamp(24px,3vw,36px);
  transition:transform .6s cubic-bezier(.2,.8,.3,1),opacity .5s,filter .5s;transform-origin:50% 50%;backface-visibility:hidden}
.tcard .quote{font-family:var(--display);font-weight:600;color:var(--white);font-size:clamp(15.5px,1.5vw,18.5px);line-height:1.5;letter-spacing:-.01em}
.tcard .qmark{font-family:var(--display);font-size:56px;color:var(--gold);opacity:.35;line-height:.7;display:block;margin-bottom:10px}
.tcard .who{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.tcard .av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--gold-soft);border:1px solid rgba(233,185,73,.35);
  font-family:var(--display);font-weight:800;color:var(--gold);font-size:16px}
.tcard .who b{display:block;color:var(--white);font-size:15px}
.tcard .who span{font-size:13px;color:var(--slate-dim)}
.tcard .src{margin-left:auto;text-align:right;font-family:var(--mono);font-size:10.5px;color:var(--slate-dim);line-height:1.5;flex:none}
.tcard .src i{display:block;font-style:normal;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-size:9.5px}
.tcard .who{flex-wrap:wrap}
.tnav{display:flex;align-items:center;justify-content:center;gap:14px}
.tbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--white);display:grid;place-items:center;cursor:pointer;transition:.24s}
.tbtn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-soft)}
.tbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tdots{display:flex;gap:8px}
.tdots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--line-2);cursor:pointer;padding:0;transition:.25s}
.tdots button.on{background:var(--gold);width:26px;border-radius:5px}

/* process */
.steps{display:grid;gap:14px;grid-template-columns:1fr}
.step{border:1px solid var(--line);border-radius:16px;padding:24px 22px;background:rgba(16,31,59,.42);transition:.3s;transform-style:preserve-3d}
.step:hover{border-color:var(--line-2)}
.step .n{font-family:var(--display);font-weight:800;font-size:34px;color:rgba(233,185,73,.24);line-height:1;margin-bottom:12px;display:block;transition:color .25s}
.step:hover .n{color:var(--gold)}
.step h3{margin-bottom:8px}
.step p{font-size:14.6px}

/* faq */
.faq-card{max-width:880px;margin-inline:auto;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(170deg,rgba(21,39,71,.55),rgba(12,26,49,.35));padding:4px clamp(18px,3vw,32px)}
.qa{border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qa h3{margin:0;font-size:inherit}
.qa button{width:100%;background:none;border:0;color:var(--white);font-family:var(--display);font-weight:700;
  font-size:clamp(15px,1.25vw,17.5px);text-align:left;padding:22px 42px 22px 0;cursor:pointer;position:relative;line-height:1.4;transition:color .2s}
.qa button:hover{color:var(--gold)}
.qa button::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.qa[data-open="1"] button::after{transform:rotate(-135deg);margin-top:-2px}
.qa .a{overflow:hidden;height:0;transition:height .34s cubic-bezier(.2,.8,.3,1)}
.qa .a-in{padding:0 30px 22px 0;font-size:15px;color:var(--slate)}

/* contact */
.contact-grid{display:grid;gap:32px;grid-template-columns:1fr}
.detail{display:flex;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.detail:first-of-type{border-top:1px solid var(--line)}
.detail .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-dim);width:78px;flex:none}
.detail a,.detail span.v{text-decoration:none;color:var(--white);font-size:15px;font-weight:500;word-break:break-word}
.detail a:hover{color:var(--gold)}
.copy{margin-left:auto;flex:none;background:none;border:1px solid var(--line);color:var(--slate-dim);border-radius:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;cursor:pointer;transition:.2s}
.copy:hover{color:var(--gold);border-color:var(--gold)}
form{border:1px solid var(--line);border-radius:18px;padding:26px;background:linear-gradient(170deg,rgba(21,39,71,.6),rgba(12,26,49,.4))}
.field{margin-bottom:16px}
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-dim);margin-bottom:8px}
input[type=text],input[type=email],textarea,select{width:100%;background:rgba(10,20,40,.7);border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--white);font-family:var(--body);font-size:15px;transition:border-color .2s}
input[type=text]:focus,input[type=email]:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical;min-height:128px}
.form-note{font-size:13px;color:var(--slate-dim);margin-top:13px}

/* band */
.band{border:1px solid rgba(233,185,73,.34);border-radius:22px;background:linear-gradient(140deg,rgba(233,185,73,.13),rgba(21,39,71,.5));padding:clamp(30px,4.5vw,54px);text-align:center}
.band h2{margin-bottom:16px}
.band .lede{margin-inline:auto;text-align:center}
.band .hero-cta{justify-content:center}

/* footer */
footer{border-top:1px solid var(--line);padding-block:30px;position:relative;z-index:2}
.foot{display:grid;gap:18px;justify-items:center;text-align:center}
.foot p{font-family:var(--mono);font-size:12px;color:var(--slate-dim)}
.foot a.tel{font-family:var(--mono);font-size:12.5px;color:var(--slate);text-decoration:none}
.foot a.tel:hover{color:var(--gold)}
.socials{display:flex;gap:12px;justify-content:center}
.socials a{width:46px;height:46px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;transition:.24s;color:var(--slate)}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px);background:var(--gold-soft)}
.socials svg{width:19px;height:19px;fill:currentColor}
/* every mark keeps its own brand colours rather than inheriting the slate */
.socials a.brandmark,.socials a.fiverr{color:inherit}
.socials a.brandmark svg,.socials a.fiverr svg{width:22px;height:22px;fill:none}
.socials a.fiverr:hover{border-color:#1DBF73;background:rgba(29,191,115,.12)}
.socials a.brandmark:hover{border-color:var(--line-2);background:rgba(255,255,255,.06)}
.socials{flex-wrap:wrap}

/* floating scroll-to-top */
.to-top{position:fixed;right:clamp(16px,3vw,32px);bottom:calc(clamp(16px,3vw,32px) + 108px);z-index:60;width:50px;height:50px;border-radius:14px;
  border:1px solid rgba(233,185,73,.4);background:rgba(10,20,40,.85);backdrop-filter:blur(10px);color:var(--gold);display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.3,1),visibility .3s,background .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top.show:hover,.to-top.show:focus-visible{background:var(--gold);color:var(--navy-900);transform:translateY(-6px) scale(1.07);box-shadow:0 14px 30px -12px rgba(233,185,73,.75)}
.to-top.show:active{transform:translateY(-2px) scale(1.02)}
body.chat-open .to-top{opacity:0;visibility:hidden}
.to-top svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}


/* ---------- chatbot ---------- */
.chat-launch{position:fixed;right:clamp(16px,3vw,32px);bottom:calc(clamp(16px,3vw,32px) + 40px);z-index:70;width:58px;height:58px;border-radius:18px;
  border:0;background:linear-gradient(150deg,var(--gold),var(--gold-2));color:var(--navy-900);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 14px 34px -12px rgba(233,185,73,.85);transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s}
.chat-launch:hover{transform:translateY(-5px) scale(1.06);box-shadow:0 20px 40px -12px rgba(233,185,73,.95)}
.chat-launch svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-launch .badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#E0234E;color:#fff;
  font-family:var(--mono);font-size:11px;display:grid;place-items:center;padding:0 5px;border:2px solid var(--navy-900)}
.chat-launch .badge[hidden]{display:none}
body.chat-open .chat-launch{transform:scale(.85);opacity:0;visibility:hidden}
/* sits to the left of the two floating buttons and vertically between them,
   so it never covers the scroll-up control */
.chat-ping{position:fixed;right:calc(clamp(16px,3vw,32px) + 72px);
  bottom:calc(clamp(16px,3vw,32px) + 74px);z-index:69;max-width:min(258px,64vw);
  background:var(--navy-700);border:1px solid var(--line-2);color:var(--white);font-size:13px;font-weight:600;padding:10px 14px;border-radius:12px;
  box-shadow:0 14px 30px -14px #000;max-width:210px;opacity:0;transform:translateX(10px);transition:.4s;pointer-events:none}
.chat-ping.show{opacity:1;transform:none}
body.chat-open .chat-ping{opacity:0}

.chat-panel{position:fixed;right:clamp(12px,3vw,32px);bottom:clamp(12px,3vw,32px);z-index:71;width:min(380px,calc(100vw - 24px));
  height:min(560px,calc(100vh - 100px));background:linear-gradient(180deg,#0E1E38,#0A1428);border:1px solid var(--line-2);border-radius:20px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 80px -30px #000;
  opacity:0;visibility:hidden;transform:translateY(20px) scale(.97);transform-origin:100% 100%;
  transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.3,1),visibility .3s}
.chat-panel.open{opacity:1;visibility:visible;transform:none}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 16px;border-bottom:1px solid var(--line);background:rgba(21,39,71,.6);flex:none}
.chat-head .av{width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,var(--gold),var(--gold-2));display:grid;place-items:center;
  font-family:var(--display);font-weight:800;color:var(--navy-900);font-size:17px;flex:none;position:relative}
.chat-head .av i{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:#3FBF7F;border:2px solid #0E1E38}
.chat-head b{display:block;color:var(--white);font-family:var(--display);font-size:15px;font-weight:800;line-height:1.2}
.chat-head span{font-size:11.5px;color:var(--slate-dim);font-family:var(--mono)}
.chat-close{margin-left:auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--slate);cursor:pointer;display:grid;place-items:center;transition:.2s}
.chat-close:hover{color:var(--gold);border-color:var(--gold)}
.chat-close svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:14.2px;line-height:1.55;animation:msgIn .32s cubic-bezier(.2,.8,.3,1) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.bot{background:rgba(29,53,96,.75);border:1px solid var(--line);color:var(--white);align-self:flex-start;border-bottom-left-radius:5px}
.msg.me{background:var(--gold);color:var(--navy-900);align-self:flex-end;font-weight:600;border-bottom-right-radius:5px}
.msg a{color:var(--gold);font-weight:600}
.msg.me a{color:var(--navy-900)}
.typing{display:flex;gap:4px;align-self:flex-start;background:rgba(29,53,96,.75);border:1px solid var(--line);padding:13px 15px;border-radius:14px;border-bottom-left-radius:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--slate);animation:bob 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.chat-chips button{background:rgba(233,185,73,.1);border:1px solid rgba(233,185,73,.4);color:var(--gold);font-family:var(--body);
  font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:999px;cursor:pointer;transition:.2s;animation:msgIn .3s both}
.chat-chips button:hover{background:var(--gold);color:var(--navy-900)}
.chat-chips a{display:inline-flex;align-items:center;gap:7px;background:rgba(233,185,73,.1);border:1px solid rgba(233,185,73,.4);color:var(--gold);
  font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:999px;text-decoration:none;transition:.2s}
.chat-chips a:hover{background:var(--gold);color:var(--navy-900)}
.chat-chips svg{width:14px;height:14px;fill:currentColor}
.chat-foot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:rgba(21,39,71,.5);flex:none}
.chat-foot input{flex:1;background:rgba(10,20,40,.8);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--white);font-family:var(--body);font-size:14px}
.chat-foot input:focus{outline:none;border-color:var(--gold)}
.chat-foot button{width:44px;flex:none;border:0;border-radius:11px;background:var(--gold);color:var(--navy-900);cursor:pointer;display:grid;place-items:center;transition:.2s}
.chat-foot button:hover{background:#F3C75F}
.chat-foot svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chat-note{font-family:var(--mono);font-size:9.5px;color:var(--slate-dim);text-align:center;padding:0 12px 10px;letter-spacing:.06em}

/* reveal */
.rv{opacity:0;transform:translateY(24px) rotateX(6deg);transform-origin:50% 100%;
  transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}

@media(min-width:600px){
  .tstage{--tstage-h:500px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .counters{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:940px){
  .tstage{--tstage-h:430px}
  .nav-links{display:flex}
  .burger{display:none}
  .grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .work{grid-template-columns:repeat(2,1fr)}
  .work .proj.wide{grid-column:span 2}
  .work .proj.wide .mock{aspect-ratio:21/9}
  .hero-grid{grid-template-columns:minmax(0,var(--hero-copy,560px))}
  .about{grid-template-columns:330px 1fr}
  .contact-grid{grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
  .skills-wrap{grid-template-columns:.9fr 1.1fr}
  .foot{grid-template-columns:1fr auto 1fr;align-items:center}
  .foot p{justify-self:start;text-align:left}
  .foot .tel{justify-self:end}
}
/* --- narrow band where the full nav fits but only just --- */
@media(min-width:940px) and (max-width:1180px){
  .nav-links a{font-size:12.9px;padding:8px 8px}
  .nav-links{gap:0}
  .brand .sub{display:none}
}
/* --- tablets in portrait: two columns read better than three --- */
@media(min-width:720px) and (max-width:939px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .work{grid-template-columns:repeat(2,1fr)}
  .work .proj.wide{grid-column:span 2}
  .contact-grid{grid-template-columns:1fr;gap:34px}
}
/* --- large desktops --- */
@media(min-width:1700px){
  :root{--maxw:1620px;--pad:48px}
  html{font-size:17px}
  .who-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
/* --- 4K and living-room TVs: read from further away --- */
@media(min-width:2200px){
  :root{--maxw:1900px;--pad:64px;--navh:110px;--navh-stuck:92px}
  html{font-size:19px}
  .work{grid-template-columns:repeat(3,1fr)}
  .work .proj.wide{grid-column:span 3}
  .grid{grid-template-columns:repeat(4,1fr)}
  .hero-grid{--hero-copy:780px}
}
/* --- 5K/8K --- */
@media(min-width:3000px){
  :root{--maxw:2400px;--pad:88px;--navh:132px;--navh-stuck:110px}
  html{font-size:23px}
  .socials a{width:60px;height:60px}
  .socials a svg{width:28px;height:28px}
}
/* --- short landscape phones: stop the hero eating the whole screen --- */
@media(max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:64px 48px}
  .space-hint{display:none}
}
/* --- coarse pointers: give every control a real tap target --- */
@media(pointer:coarse){
  .nav-links a,.tbtn,.tech-tab,.chip{min-height:44px;display:inline-flex;align-items:center}
  .socials a{width:50px;height:50px}
}

/* Backdrop blur is expensive on mobile GPUs and, layered over a canvas that
   repaints every frame, some Android builds composite it as a washed-out sheet
   over the page. Solid backgrounds below 900px: same look, none of the risk. */
@media(max-width:900px){
  header.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,17,36,.97)}
  header.nav.stuck{background:rgba(9,17,36,.99)}
  .pf-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,20,40,.97)}
  .stage{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(165deg,rgba(18,34,64,.92),rgba(8,16,34,.88))}
  .mobile-menu{backdrop-filter:none;-webkit-backdrop-filter:none}
  #bgfx{display:none}          /* the hero canvas already carries the atmosphere */
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
  .status .dot{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important}
}