/* ============================================================
   HASSNAIN — Portfolio
   Cinematic dark system. Hand-written, no framework.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:#050506;
  --bg-2:#0a0a0c;
  --ink:#f4f4f5;
  --ink-2:#a1a1aa;
  --ink-3:#6b6b75;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --cy:#22e6ff;
  --vi:#7b5cff;
  --wm:#ff7a45;

  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);

  --f-sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,.05,.36,1);

  --pad:clamp(20px,5vw,72px);
  --max:1320px;
  --nav-h:76px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100svh;
}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
svg{width:100%;height:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--cy);color:#04141a}
:focus-visible{outline:2px solid var(--cy);outline-offset:4px;border-radius:4px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- 3. GLOBAL FX ---------- */
.fx-aurora{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.85;
}
.fx-grid{
  position:fixed;inset:-2px;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:clamp(56px,7vw,96px) clamp(56px,7vw,96px);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 20%,transparent 78%);
}
.fx-grain{
  position:fixed;inset:-150%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 5.6s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-4%)} 50%{transform:translate(-3%,3%)}
  66%{transform:translate(4%,2%)}  83%{transform:translate(-2%,-2%)}
}
.fx-vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 110% 85% at 50% 45%,transparent 42%,rgba(0,0,0,.62) 100%);
}
main{position:relative;z-index:3}

/* ---------- 4. SCROLL PROGRESS ---------- */
.scrollbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:rgba(255,255,255,.05);
}
.scrollbar i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--vi),var(--cy) 60%,#fff);
  box-shadow:0 0 14px rgba(34,230,255,.7);
  transition:width .1s linear;
}

/* ---------- 5. CURSOR ---------- */
.cursor{position:fixed;top:0;left:0;z-index:200;pointer-events:none;mix-blend-mode:difference}
.cursor__dot{
  position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),background .3s,border-color .3s;
}
.cursor__text{
  font:500 9px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:#000;opacity:0;transition:opacity .2s;white-space:nowrap;
}
.cursor.is-active .cursor__ring{width:74px;height:74px;background:#fff;border-color:#fff}
.cursor.is-active .cursor__text{opacity:1}
.cursor.is-active .cursor__dot{opacity:0}
.cursor.is-hover .cursor__ring{width:54px;height:54px;border-color:rgba(255,255,255,.9)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- 6. PRELOADER ---------- */
/* hidden unless JS is running — it is JS that dismisses it */
.preloader{display:none}
html.js .preloader{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:grid;place-items:center;
}
.preloader__inner{width:min(560px,84vw);text-align:center}
.preloader__label{
  display:flex;justify-content:space-between;
  font:500 10px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:26px;
}
.preloader__word{
  display:flex;justify-content:center;gap:.02em;
  font-size:clamp(38px,8vw,84px);font-weight:800;letter-spacing:-.03em;line-height:1;
  margin-bottom:34px;
}
.preloader__word span{
  display:block;opacity:0;transform:translateY(90%) rotate(6deg);
  animation:plWord .8s var(--ease) forwards;
}
.preloader__word span:nth-child(1){animation-delay:.05s}
.preloader__word span:nth-child(2){animation-delay:.11s}
.preloader__word span:nth-child(3){animation-delay:.17s}
.preloader__word span:nth-child(4){animation-delay:.23s}
.preloader__word span:nth-child(5){animation-delay:.29s}
.preloader__word span:nth-child(6){animation-delay:.35s}
.preloader__word span:nth-child(7){animation-delay:.41s}
.preloader__word span:nth-child(8){animation-delay:.47s}
@keyframes plWord{to{opacity:1;transform:none}}
.preloader__bar{height:1px;background:rgba(255,255,255,.12);overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--vi),var(--cy))}
.preloader__count{
  margin-top:14px;font:500 11px/1 var(--f-mono);color:var(--ink-2);
  display:flex;justify-content:flex-end;gap:1px;
}
.preloader__count em{font-style:normal;color:var(--ink-3)}
.preloader__curtain{
  position:absolute;inset:0;background:var(--bg);transform:translateY(100%);
}
.preloader.is-done{pointer-events:none}
.preloader.is-done .preloader__inner{opacity:0;transform:translateY(-24px);transition:.5s var(--ease)}
.preloader.is-done{
  animation:plOut .9s var(--ease) .35s forwards;
}
@keyframes plOut{to{transform:translateY(-101%)}}

/* ---------- 7. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:110;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-inline:var(--pad);
  transition:transform .5s var(--ease),background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,6,8,.72);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-102%)}

.nav__brand{display:flex;align-items:center;gap:10px}
.nav__mark{width:26px;height:26px;color:var(--cy);flex:none;transition:transform .5s var(--ease)}
.nav__brand:hover .nav__mark{transform:rotate(120deg)}
.nav__name{font-weight:700;letter-spacing:-.02em;font-size:16px}
.nav__name i{font-style:normal;color:var(--ink-3);font-weight:500}

.nav__links{position:relative;display:flex;align-items:center;gap:2px}
.nav__links a{
  position:relative;z-index:2;padding:9px 15px;border-radius:99px;
  font-size:13.5px;font-weight:500;color:var(--ink-2);
  transition:color .3s;
}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__pill{
  position:absolute;z-index:1;top:0;left:0;height:100%;width:0;border-radius:99px;
  background:var(--glass-2);border:1px solid var(--line);
  opacity:0;transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s;
}
.nav__links:hover .nav__pill,.nav__pill.is-on{opacity:1}
@media (max-width:1000px){.nav__links{display:none}}

.nav__right{display:flex;align-items:center;gap:12px}
.nav__burger{
  display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;
  place-items:center;gap:5px;flex-direction:column;background:var(--glass);
}
.nav__burger i{display:block;width:16px;height:1.5px;background:var(--ink);transition:.35s var(--ease)}
.nav__burger.is-on i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger.is-on i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:1000px){.nav__burger{display:flex}}

/* drawer */
.drawer{
  position:fixed;inset:0;z-index:105;background:rgba(5,5,6,.96);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;gap:40px;
  padding:var(--nav-h) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
.drawer.is-open{clip-path:inset(0 0 0 0)}
.drawer__links{display:flex;flex-direction:column;gap:4px}
.drawer__links a{
  font-size:clamp(30px,9vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.15;
  display:flex;align-items:baseline;gap:14px;
  opacity:0;transform:translateY(26px);transition:.6s var(--ease);
}
.drawer.is-open .drawer__links a{opacity:1;transform:none}
.drawer.is-open .drawer__links a:nth-child(1){transition-delay:.12s}
.drawer.is-open .drawer__links a:nth-child(2){transition-delay:.18s}
.drawer.is-open .drawer__links a:nth-child(3){transition-delay:.24s}
.drawer.is-open .drawer__links a:nth-child(4){transition-delay:.30s}
.drawer.is-open .drawer__links a:nth-child(5){transition-delay:.36s}
.drawer__links em{font:500 12px/1 var(--f-mono);color:var(--cy);font-style:normal}
.drawer__foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:22px;border-top:1px solid var(--line);
  font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}

/* ---------- 8. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:99px;overflow:hidden;
  font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  border:1px solid var(--line-2);
  transition:border-color .35s,color .35s,transform .3s var(--ease);
}
.btn--sm{padding:10px 20px;font-size:13px}
.btn__label{position:relative;z-index:2}
.btn__glow{
  position:absolute;inset:0;z-index:1;opacity:0;
  background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),rgba(34,230,255,.35),transparent 70%);
  transition:opacity .35s;
}
.btn:hover .btn__glow{opacity:1}
.btn:hover{border-color:rgba(34,230,255,.5)}
.btn--solid{
  background:linear-gradient(180deg,#fff,#d8d8dd);color:#08080a;border-color:transparent;
  box-shadow:0 10px 40px -12px rgba(255,255,255,.35);
}
.btn--solid .btn__glow{background:radial-gradient(120px 60px at var(--mx,50%) var(--my,50%),rgba(34,230,255,.55),transparent 70%)}
.btn--ghost{background:var(--glass)}

/* ---------- 9. HERO ---------- */
.hero{
  position:relative;padding-top:var(--nav-h);
  min-height:100vh;min-height:100svh;   /* svh with a vh fallback */
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.hero__stage{
  position:relative;flex:1;
  min-height:min(70vh,640px);min-height:min(70svh,640px);
  display:grid;place-items:center;
  padding-inline:var(--pad);
}

/* giant kinetic name */
.hero__type{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:100%;text-align:center;pointer-events:none;z-index:1;
  line-height:.82;
}
.hero__type-row{display:flex;justify-content:center;align-items:center}
.ht{
  display:block;
  font-size:clamp(72px,18.4vw,290px);
  font-weight:900;letter-spacing:-.055em;
  background:linear-gradient(180deg,#ffffff 6%,#8e8e99 52%,#2b2b31 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(.42em) rotate(4deg);
  animation:htIn 1.05s var(--ease) forwards;
}
.hero__type-row .ht:nth-child(1){animation-delay:.10s}
.hero__type-row .ht:nth-child(2){animation-delay:.16s}
.hero__type-row .ht:nth-child(3){animation-delay:.22s}
.hero__type-row .ht:nth-child(4){animation-delay:.28s}
.hero__type-row .ht:nth-child(5){animation-delay:.34s}
.hero__type-row .ht:nth-child(6){animation-delay:.40s}
.hero__type-row .ht:nth-child(7){animation-delay:.46s}
.hero__type-row .ht:nth-child(8){animation-delay:.52s}
@keyframes htIn{to{opacity:1;transform:none}}

/* portrait */
.hero__portrait{
  position:relative;z-index:2;
  height:min(74vh,720px);height:min(74svh,720px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transform:translateY(40px) scale(.97);
  animation:portraitIn 1.4s var(--ease) .35s forwards;
}
@keyframes portraitIn{to{opacity:1;transform:none}}
.portrait{position:relative;height:100%}
/* Two nested masks instead of one composited mask: the frame dissolves the
   left and right edges, the inner clip dissolves top and bottom. Nesting
   multiplies them without needing mask-composite. The photo keeps its office
   background — it is dark enough to sit on #050506 — so every edge of the
   rectangle has to be dissolved or it reads as a pasted-in crop. */
.portrait__frame{
  position:relative;height:100%;aspect-ratio:54/133;overflow:hidden;
  /* Stops are measured against the silhouette, not eyeballed: in this crop his
     left sleeve reaches 6.9% and his right shoulder 75.0% of the frame width,
     so the left fade must be finished by 6% and the right may not begin before
     78%. Widening either one starts eating the figure. */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 2.5%,#000 6%,#000 78%,rgba(0,0,0,.72) 86%,rgba(0,0,0,.34) 93%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 2.5%,#000 6%,#000 78%,rgba(0,0,0,.72) 86%,rgba(0,0,0,.34) 93%,transparent 100%);
}
/* Top fade clears his hair at 9.8%; bottom fade covers the source frame cutting
   him off mid-shin, which would otherwise end on a hard horizontal line. */
.portrait__clip{
  position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 86%,rgba(0,0,0,.38) 96%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 86%,rgba(0,0,0,.38) 96%,transparent 100%);
}
/* exact crop: source region x 240→780, y 270→1600 of the 900×1600 photo.
   The left bound is not arbitrary — the DOMITREX wall sign and its glow end at
   x=228, so cropping any wider than 240 brings another company's branding back
   into the hero. That constraint is why he sits left of centre: the only room
   for a generous edge dissolve is on his right. */
.portrait__frame img{
  position:absolute;
  width:166.667%;height:120.301%;
  left:-44.444%;top:-20.301%;
  max-width:none;object-fit:fill;
  filter:contrast(1.06) saturate(.92) brightness(.98);
}
/* cyan rim-light on the shadow side — makes the falloff read as deliberate */
.portrait__rim{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent 2%,rgba(34,230,255,.22) 8%,transparent 18%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 10%,#000 28%,#000 70%,transparent 90%);
          mask-image:linear-gradient(to bottom,transparent 10%,#000 28%,#000 70%,transparent 90%);
}
.portrait__grade{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(150deg,rgba(123,92,255,.55),transparent 45%,rgba(34,230,255,.5));
}
.portrait__scan{
  position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.14) 3px 4px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 60%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 60%,transparent);
}
.portrait__halo{
  position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:190%;height:80%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(34,230,255,.18),rgba(123,92,255,.13) 42%,transparent 70%);
  filter:blur(28px);
  animation:halo 9s var(--ease-2) infinite alternate;
}
@keyframes halo{to{opacity:.55;transform:scale(1.12)}}

/* glass chips */
.hero__chip{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:12px;
  padding:13px 17px;border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9);
  opacity:0;animation:chipIn .9s var(--ease) forwards;
}
@keyframes chipIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1}}
.hero__chip b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.hero__chip i{display:block;font-style:normal;font-size:11px;line-height:1.45;color:var(--ink-3)}
.hero__chip svg{width:17px;height:17px;color:var(--cy);flex:none}
.hero__chip--a{left:2%;top:20%;animation-delay:1.05s}
.hero__chip--b{right:3%;top:29%;animation-delay:1.2s}
.hero__chip--c{left:4%;bottom:22%;animation-delay:1.35s}
.hero__chip--d{right:2%;bottom:17%;animation-delay:1.5s}
.chip__stat b{font-size:30px;font-weight:800;letter-spacing:-.045em;line-height:1}
.chip__stat b sup{font-size:.44em;vertical-align:super;color:var(--cy)}
.chip__bars{display:flex;align-items:flex-end;gap:2.5px;height:24px}
.chip__bars i{width:3px;background:linear-gradient(180deg,var(--cy),var(--vi));border-radius:2px;animation:bars 1.5s var(--ease-2) infinite alternate}
.chip__bars i:nth-child(1){height:40%;animation-delay:0s}
.chip__bars i:nth-child(2){height:75%;animation-delay:.15s}
.chip__bars i:nth-child(3){height:55%;animation-delay:.3s}
.chip__bars i:nth-child(4){height:95%;animation-delay:.45s}
.chip__bars i:nth-child(5){height:65%;animation-delay:.6s}
@keyframes bars{to{height:25%}}
.dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.dot--live{background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.float{animation-fill-mode:forwards}

@media (max-width:900px){
  .hero__chip--b,.hero__chip--d{display:none}
  .hero__chip--a{left:auto;right:2%;top:14%}
  .hero__chip--c{left:2%;bottom:6%;max-width:66vw}
}

/* hero base */
.hero__base{
  position:relative;z-index:4;width:100%;max-width:var(--max);margin-inline:auto;
  padding:0 var(--pad) clamp(28px,5vh,54px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  gap:clamp(20px,4vw,60px);
}
.hero__lede{max-width:46ch}
.hero__lede p{font-size:clamp(15px,1.55vw,19px);color:var(--ink-2);line-height:1.62}
.hero__lede em{font-family:var(--f-serif);font-style:italic;color:var(--ink);font-size:1.12em}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;justify-self:end}
.hero__scroll{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;
  font:500 10px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  margin-top:6px;
}
.hero__scroll-line{position:relative;width:54px;height:1px;background:var(--line-2);overflow:hidden}
.hero__scroll-line i{position:absolute;inset:0;width:40%;background:var(--cy);animation:scrollLine 2.2s var(--ease-2) infinite}
@keyframes scrollLine{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (max-width:860px){
  .hero__base{grid-template-columns:1fr}
  .hero__actions{justify-self:start}
}

/* ---------- 10. TICKER ---------- */
.ticker{
  position:relative;z-index:4;padding:clamp(26px,4vw,44px) 0;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
  display:flex;flex-direction:column;gap:14px;overflow:hidden;
}
.ticker__row{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker__row--rev{animation-direction:reverse;animation-duration:44s;opacity:.42}
.ticker__track{display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px)}
.ticker__track span{
  font-size:clamp(24px,4vw,52px);font-weight:700;letter-spacing:-.04em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.32);
  transition:color .3s,-webkit-text-stroke-color .3s;
}
.ticker__row:hover .ticker__track span{color:rgba(255,255,255,.06)}
.ticker__track b{color:var(--cy);font-size:clamp(11px,1.4vw,18px);opacity:.7}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- 11. SECTION PRIMITIVES ---------- */
.section{position:relative;padding-block:clamp(78px,11vw,168px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
}
.eyebrow i{width:26px;height:1px;background:linear-gradient(90deg,var(--cy),transparent);display:block}
.h2{
  font-size:clamp(31px,5.6vw,72px);font-weight:800;letter-spacing:-.045em;line-height:1.02;
  max-width:17ch;
}
.h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--cy),var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent}
.head{margin-bottom:clamp(38px,6vw,72px)}
.head--split{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,4vw,60px);align-items:end}
.head__sub{color:var(--ink-2);max-width:44ch;font-size:clamp(14.5px,1.4vw,17px);margin-top:18px}
@media (max-width:820px){.head--split{grid-template-columns:1fr}}

/* word-split statement */
.statement{
  font-size:clamp(24px,4.4vw,58px);font-weight:600;letter-spacing:-.04em;line-height:1.14;
  max-width:19ch;margin-bottom:clamp(48px,7vw,96px);
}
.statement em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--cy)}
.statement .w{display:inline-block;overflow:hidden;vertical-align:top}
.statement .w > i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%);opacity:0;
  transition:transform .85s var(--ease),opacity .85s var(--ease);
  transition-delay:calc(var(--i) * 32ms);
}
.statement.is-in .w > i{transform:none;opacity:1}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
.reveal[data-delay="4"]{transition-delay:.4s}
.reveal[data-delay="5"]{transition-delay:.5s}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 12. ABOUT ---------- */
.about__grid{
  display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,5vw,84px);
  align-items:start;
}
@media (max-width:900px){.about__grid{grid-template-columns:1fr}}
.about__media{position:sticky;top:calc(var(--nav-h) + 30px)}
@media (max-width:900px){.about__media{position:static}}
.avatar{position:relative;width:min(228px,100%);margin-bottom:26px}
.avatar__frame{
  position:relative;width:100%;aspect-ratio:280/370;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);
}
/* exact crop: source region x 348→628, y 190→560 (head & shoulders) */
.avatar__frame img{
  position:absolute;width:308.571%;height:320%;
  left:-124.286%;top:-51.351%;max-width:none;object-fit:fill;
  filter:contrast(1.05) saturate(.92);
}
.avatar__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(5,5,6,.9) 0%,transparent 34%),
    linear-gradient(115deg,rgba(123,92,255,.22),transparent 50%,rgba(34,230,255,.2));
}
.avatar__ring{
  position:absolute;inset:-10px;border-radius:26px;pointer-events:none;
  border:1px dashed rgba(34,230,255,.3);
}
.avatar__ring::before{
  content:"";position:absolute;inset:-18px;border-radius:38px;
  background:radial-gradient(circle at 30% 25%,rgba(34,230,255,.16),transparent 62%);
  filter:blur(12px);animation:halo 8s var(--ease-2) infinite alternate;
}
.about__id b{display:block;font-size:19px;font-weight:700;letter-spacing:-.025em}
.about__id > span{display:block;font-size:13px;color:var(--ink-3);margin-top:3px}
.about__cert{
  display:flex!important;align-items:flex-start;gap:8px;margin-top:16px;
  padding:11px 13px;border-radius:12px;
  background:var(--glass);border:1px solid var(--line);
  font-size:11.5px!important;line-height:1.45;color:var(--ink-2)!important;
}
.about__cert svg{width:14px;height:14px;color:var(--cy);flex:none;margin-top:2px}
.about__copy p{
  font-size:clamp(15px,1.45vw,17.5px);color:var(--ink-2);margin-bottom:22px;max-width:62ch;
}
.about__copy p:first-child{color:var(--ink);font-size:clamp(16.5px,1.7vw,20px)}
.about__list{margin-top:34px;border-top:1px solid var(--line)}
.about__list li{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.about__list span{font:500 10.5px/1.6 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.about__list b{font-size:14.5px;font-weight:600}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(52px,8vw,110px);
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--bg);padding:clamp(22px,3.2vw,38px);text-align:center}
.stat b{
  display:block;font-size:clamp(34px,5.2vw,62px);font-weight:800;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(180deg,#fff,#7a7a85);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{display:block;margin-top:9px;font:500 10px/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- 13. BENTO CARDS ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.bento{grid-template-columns:1fr}}
.card--lg{grid-row:span 2}
.card--wide{grid-column:span 2}
@media (max-width:640px){.card--lg{grid-row:auto}.card--wide{grid-column:auto}}

.card{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(22px,2.6vw,34px);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .4s,transform .5s var(--ease),background .4s;
}
.card:hover{border-color:var(--line-2);transform:translateY(-4px)}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(340px 220px at var(--mx,50%) var(--my,0%),rgba(34,230,255,.14),transparent 68%);
}
.card:hover::before{opacity:1}
.card__num{
  position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(20px,2.4vw,30px);
  font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;color:var(--ink-3);
}
.card__icon{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--glass);color:var(--cy);
  margin-bottom:20px;transition:transform .5s var(--ease),color .4s;
}
.card__icon svg{width:21px;height:21px}
.card:hover .card__icon{transform:translateY(-2px) rotate(-6deg)}
.card h3{font-size:clamp(17px,1.9vw,22px);font-weight:700;letter-spacing:-.028em;margin-bottom:11px}
.card p{font-size:14.2px;color:var(--ink-2);line-height:1.6;flex:1}
.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.card__tags span{
  font:500 10px/1 var(--f-mono);letter-spacing:.06em;padding:6px 10px;border-radius:99px;
  border:1px solid var(--line);color:var(--ink-3);background:rgba(0,0,0,.25);
}
.card__beam{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cy),transparent);
  opacity:0;transform:scaleX(.3);transition:opacity .45s,transform .7s var(--ease);
}
.card:hover .card__beam{opacity:.9;transform:scaleX(1)}
.card--lg p{font-size:15px}
.card--lg h3{font-size:clamp(20px,2.4vw,27px)}

/* ---------- 14. PROJECTS ---------- */
.projects{border-top:1px solid var(--line)}
.project{
  position:relative;display:grid;
  grid-template-columns:72px minmax(0,1fr) 240px;
  gap:clamp(18px,3vw,52px);align-items:center;
  max-width:var(--max);margin-inline:auto;
  padding:clamp(30px,4.4vw,58px) var(--pad);
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);
}
@media (max-width:980px){
  .project{grid-template-columns:1fr;gap:20px}
  .project__stats{justify-content:flex-start!important}
}
.project:hover{background:rgba(255,255,255,.02)}
.project__index{font:500 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--ink-3);transition:color .4s}
.project:hover .project__index{color:var(--cy)}
.project__title{
  font-size:clamp(28px,4.6vw,60px);font-weight:800;letter-spacing:-.05em;line-height:1;
  margin-bottom:16px;
}
.project__title span{
  background:linear-gradient(180deg,#fff,#a5a5ae);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.project__title em{
  font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
  color:var(--ink-3);transition:color .45s var(--ease);
}
.project:hover .project__title em{color:var(--cy)}
.project__desc{font-size:clamp(14px,1.35vw,16.5px);color:var(--ink-2);max-width:60ch;margin-bottom:20px}
.project__meta{display:flex;flex-wrap:wrap;gap:10px 32px}
.project__meta span{display:block;font:500 9.5px/1.6 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.project__meta b{font-size:13px;font-weight:600;color:var(--ink)}
.project__stats{display:flex;gap:30px;justify-content:flex-end}
.project__stats b{
  display:block;font-size:clamp(22px,2.6vw,34px);font-weight:800;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(100deg,var(--cy),var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.project__stats span{display:block;margin-top:6px;font:500 9.5px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.project__line{
  position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--cy),var(--vi),transparent);
  transition:width .8s var(--ease);
}
.project:hover .project__line{width:100%}
.project__glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px 200px at var(--mx,50%) var(--my,50%),rgba(123,92,255,.10),transparent 70%);
}
.project:hover .project__glow{opacity:1}

/* ---------- 15. STACK ---------- */
.stack__groups{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
@media (max-width:900px){.stack__groups{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stack__groups{grid-template-columns:1fr}}
.stack__group{background:var(--bg);padding:clamp(22px,2.8vw,34px)}
.stack__group h4{
  font:500 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cy);
  margin-bottom:18px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  position:relative;padding:9px 15px;border-radius:99px;font-size:13px;font-weight:500;
  border:1px solid var(--line);background:var(--glass);color:var(--ink-2);
  transition:color .3s,border-color .3s,transform .3s var(--ease),background .3s;
  cursor:default;
}
.chip:hover{color:var(--ink);border-color:rgba(34,230,255,.45);background:rgba(34,230,255,.07);transform:translateY(-2px)}

/* ---------- 16. TIMELINE ---------- */
.timeline{position:relative;padding-left:clamp(22px,4vw,60px)}
.timeline__rail{position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.timeline__rail i{
  position:absolute;left:0;top:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--cy),var(--vi));
  box-shadow:0 0 12px rgba(34,230,255,.6);transition:height .18s linear;
}
.tl{position:relative;display:grid;grid-template-columns:190px 1fr;gap:clamp(16px,3vw,48px);padding-block:clamp(20px,3vw,34px)}
@media (max-width:760px){.tl{grid-template-columns:1fr;gap:12px}}
.tl::before{
  content:"";position:absolute;left:calc(clamp(22px,4vw,60px) * -1);top:calc(clamp(20px,3vw,34px) + 9px);
  width:9px;height:9px;border-radius:50%;translate:-4px 0;
  background:var(--bg);border:1px solid var(--cy);box-shadow:0 0 0 4px var(--bg),0 0 14px rgba(34,230,255,.5);
}
.tl__year{font:500 11px/1.6 var(--f-mono);letter-spacing:.14em;color:var(--cy);padding-top:4px}
.tl__card{
  padding:clamp(20px,2.6vw,30px);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--line);transition:border-color .4s,transform .5s var(--ease);
}
.tl__card:hover{border-color:var(--line-2);transform:translateX(5px)}
.tl__card h3{font-size:clamp(17px,2vw,22px);font-weight:700;letter-spacing:-.03em;margin-bottom:10px}
.tl__card h3 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--ink-3)}
.tl__card p{font-size:14.5px;color:var(--ink-2);max-width:64ch}
.tl__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tl__tags span{font:500 10px/1 var(--f-mono);padding:6px 10px;border-radius:99px;border:1px solid var(--line);color:var(--ink-3)}

/* ---------- 17. PROCESS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:clamp(22px,2.6vw,32px);border-radius:20px;border:1px solid var(--line);background:var(--glass);overflow:hidden}
.step b{
  display:block;font:500 11px/1 var(--f-mono);letter-spacing:.18em;color:var(--cy);margin-bottom:22px;
}
.step h4{font-size:19px;font-weight:700;letter-spacing:-.03em;margin-bottom:9px}
.step p{font-size:13.8px;color:var(--ink-2)}
.step::after{
  content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,92,255,.16),transparent 70%);
}

/* ---------- 18. CONTACT ---------- */
.contact{position:relative;overflow:hidden;text-align:center}
.contact__aura{
  position:absolute;left:50%;top:38%;translate:-50% -50%;
  width:min(1100px,120vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(34,230,255,.14),rgba(123,92,255,.10) 38%,transparent 66%);
  filter:blur(20px);animation:halo 11s var(--ease-2) infinite alternate;
}
.contact .eyebrow{justify-content:center}
.contact__title{
  font-size:clamp(34px,7.2vw,104px);font-weight:800;letter-spacing:-.055em;line-height:.98;
  max-width:14ch;margin:0 auto clamp(36px,5vw,60px);
}
.contact__title .w{display:inline-block;overflow:hidden;vertical-align:top}
.contact__title .w > i{
  display:inline-block;font-style:normal;
  transform:translateY(105%);opacity:0;
  transition:transform .9s var(--ease),opacity .9s var(--ease);
  transition-delay:calc(var(--i) * 45ms);
}
.contact__title.is-in .w > i{transform:none;opacity:1}
.contact__mail{
  display:inline-flex;align-items:center;gap:14px;
  font-size:clamp(19px,3.2vw,42px);font-weight:700;letter-spacing:-.04em;
  padding-bottom:10px;border-bottom:1px solid var(--line-2);
  transition:color .35s,border-color .35s,gap .35s var(--ease);
}
.contact__mail svg{width:.62em;height:.62em;color:var(--cy);transition:transform .45s var(--ease)}
.contact__mail:hover{color:var(--cy);border-color:var(--cy);gap:20px}
.contact__mail:hover svg{transform:translate(3px,-3px)}
.contact__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(52px,7vw,96px);
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-align:left;
}
@media (max-width:820px){.contact__grid{grid-template-columns:repeat(2,1fr)}}
.contact__cell{background:var(--bg);padding:clamp(20px,2.6vw,30px)}
.contact__cell span{display:block;font:500 10px/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.contact__cell b{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.contact__cell b.live{color:#3ddc84}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(34px,4vw,52px)}
.socials a{
  padding:11px 22px;border-radius:99px;font-size:13.5px;font-weight:500;
  border:1px solid var(--line);background:var(--glass);color:var(--ink-2);
  transition:.35s var(--ease);
}
.socials a:hover{color:var(--ink);border-color:rgba(34,230,255,.5);background:rgba(34,230,255,.08)}

/* ---------- 19. FOOTER ---------- */
.footer{position:relative;z-index:3;border-top:1px solid var(--line);padding-block:clamp(34px,4vw,52px);overflow:hidden}
.footer__in{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
@media (max-width:760px){.footer__in{grid-template-columns:1fr}}
.footer__mark{
  grid-column:1/-1;
  font-size:clamp(46px,15vw,190px);font-weight:900;letter-spacing:-.06em;line-height:.85;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13);
  margin-bottom:clamp(18px,3vw,34px);user-select:none;
}
.footer__meta{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:12.5px;color:var(--ink-3)}
.footer__clock b{color:var(--ink-2);font-family:var(--f-mono);font-weight:500}
.footer__top{
  display:inline-flex;align-items:center;gap:9px;justify-self:end;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  padding:12px 18px;border-radius:99px;border:1px solid var(--line);background:var(--glass);
  transition:.35s var(--ease);
}
@media (max-width:760px){.footer__top{justify-self:start}}
.footer__top svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.footer__top:hover{color:var(--ink);border-color:rgba(34,230,255,.5)}
.footer__top:hover svg{transform:translateY(-3px)}

/* ---------- 20. ENTRANCE GATE ----------
   Hero choreography stays parked until the preloader lifts, so the
   reveal is actually seen instead of playing behind the curtain.
   Scoped to html.js so that with JavaScript off the page still renders
   fully — nothing is gated behind a script that never runs. */
html.js .ht,
html.js .hero__portrait,
html.js .hero__chip{animation-play-state:paused}
html.js body.is-ready .ht,
html.js body.is-ready .hero__portrait,
html.js body.is-ready .hero__chip{animation-play-state:running}

/* clipped-word masks need room for descenders (g, y, p) */
.statement .w,.contact__title .w{padding-bottom:.14em;margin-bottom:-.14em}
.contact__title .w > i{font-style:inherit}

/* ---------- 21. MOTION SAFETY ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .statement .w > i,.contact__title .w > i{transform:none;opacity:1}
  .fx-grain{display:none}
  /* kill the entrance choreography outright rather than leaving it
     parked on frame zero, which would hold the hero at opacity:0 */
  html.js .ht,html.js .hero__portrait,html.js .hero__chip,
  .ht,.hero__portrait,.hero__chip,.preloader__word span{
    animation:none!important;opacity:1!important;transform:none!important;
  }
}