/* ============================================================
   Sulaymon Ruziboev — home page
   Dark editorial system: near-black canvas, hairline borders,
   violet→cyan accent used only as light. Motion by Motion
   (js/vendor/motion.js) — see js/home.js.
   The other pages (cutlass, cv, soon) keep css/style.css.
   ============================================================ */

@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── tokens ────────────────────────────────────────────────── */
:root{
  --bg:        #07070a;
  --bg-2:      #0c0c11;
  --card:      #0f0f15;
  --ink:       #f3f2ef;
  --ink-soft:  #b4b3bd;   /* also the cursor trail colour (js/cursor.js) */
  --muted:     #75747f;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  --accent:    #8b6cff;
  --accent-2:  #2ec5ff;
  --accent-3:  #ff4d9d;
  --grad:      linear-gradient(100deg, #a58cff 0%, #7c8bff 45%, #39c8ff 100%);

  --r-sm: 10px; --r: 18px; --r-lg: 28px; --r-pill: 999px;
  --pad: clamp(16px, 5vw, 72px);
  --maxw: 1240px;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);

  /* the 3D cursor (js/cursor.js): brighter tail + glow so it reads on black */
  --cursor-tip:  #ffffff;
  --cursor-tail: #7a52ff;
  --cursor-glow: drop-shadow(0 0 5px rgba(139,108,255,.75)) drop-shadow(0 0 14px rgba(57,200,255,.25));
  color-scheme: dark;
}

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,dl,dd{ margin:0; }
svg{ display:block; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--accent); color:#fff; }

.skip{ position:absolute; left:-9999px; top:12px; z-index:200; padding:10px 16px;
  background:var(--ink); color:var(--bg); border-radius:var(--r-pill); }
.skip:focus{ left:16px; }

/* ── type ──────────────────────────────────────────────────── */
.label{
  font:500 12px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
.h2{
  font:500 clamp(36px, 5.6vw, 72px)/1.02 var(--font-display);
  letter-spacing:-.035em;
}
.h2 em, .contact__title em{
  font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  /* room for descenders (g, y, p) — background-clip text cuts them at the line box */
  display:inline-block; padding-bottom:.1em; margin-bottom:-.1em;
}
.sec-head{ max-width:var(--maxw); margin:0 auto 56px; padding:0 var(--pad); }
h1, h2, h3, .hero__lede, .sec-lede{ text-wrap:balance; }
p{ text-wrap:pretty; }
.sec-lede{ max-width:520px; margin-top:22px; color:var(--ink-soft); font-size:17px; }

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  height:46px; padding:0 22px; border-radius:var(--r-pill);
  font:500 15px/1 var(--font-body); white-space:nowrap;
  transition:transform .4s var(--ease-out), background .3s, border-color .3s, color .3s;
}
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--ease-out); }
button.btn{ cursor:pointer; font-family:var(--font-body); }
.btn--sm{ height:38px; padding:0 16px; font-size:14px; }
.btn--lg{ height:54px; padding:0 26px; font-size:16px; }
.btn--light{ background:var(--ink); color:var(--bg); }
.btn--light:hover{ background:#fff; }
.btn--ghost{ border:1px solid var(--line-2); color:var(--ink); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.06); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:scale(.97); }

/* shine sweep on the primary hero button */
.btn--go{ overflow:hidden; }
.btn--go::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 30%, rgba(139,108,255,.35) 50%, transparent 70%);
}
.btn--go:hover::after{ transform:translateX(120%); transition:transform .9s var(--ease-out); }

.icon-btn{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-2); color:var(--ink-soft); transition:color .3s, border-color .3s;
}
.icon-btn:hover{ color:var(--ink); border-color:rgba(255,255,255,.3); }
.icon-btn svg{ width:17px; height:17px; }

/* ── nav ───────────────────────────────────────────────────── */
.nav{
  position:fixed; z-index:100; top:14px; left:50%; transform:translateX(-50%);
  width:min(calc(100% - 24px), 1080px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px 8px 8px 14px; border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:transform .5s var(--ease-out), background .4s, border-color .4s, backdrop-filter .4s;
}
.nav.is-stuck{
  background:rgba(12,12,17,.72); border-color:var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
}
.nav.is-hidden{ transform:translate(-50%, -140%); }
.nav__logo{ display:flex; align-items:center; gap:10px; font:500 15px/1 var(--font-display); letter-spacing:-.01em; }
.nav__logo img{ border-radius:8px; }
.nav__links{ position:relative; display:flex; gap:4px; }
.nav__links a{
  position:relative; z-index:1; padding:9px 14px; border-radius:var(--r-pill); font-size:14px; color:var(--ink-soft);
  transition:color .25s;
}
.nav__links a:hover, .nav__links a.is-active{ color:var(--ink); }
/* one highlight that slides between links (Framer-style shared layout) */
.nav__pill{
  position:absolute; z-index:0; top:0; left:0; height:100%; width:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); border:1px solid var(--line); opacity:0;
}
.nav__actions{ display:flex; align-items:center; gap:8px; }
.nav__burger{
  display:none; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.06); cursor:pointer;
  position:relative;
}
.nav__burger span{ position:absolute; left:14px; right:14px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease-out); }
.nav__burger span:first-child{ top:18px; } .nav__burger span:last-child{ top:25px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; justify-content:center;
  gap:6px; padding:0 28px; background:rgba(7,7,10,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; }
.mobile-menu a{ font:500 38px/1.25 var(--font-display); letter-spacing:-.03em; color:var(--ink-soft); }
.mobile-menu a:hover{ color:var(--ink); }

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__actions .btn, .nav__actions .icon-btn{ display:none; }
  .nav__burger{ display:block; }
  .nav__logo span{ font-size:14px; }
}

/* ── flowing paths (hero + contact background) ─────────────── */
.paths{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  /* quiet the lines behind the text, keep them strong at the edges */
  -webkit-mask-image:radial-gradient(ellipse 55% 45% at 50% 50%, rgba(0,0,0,.25), #000 100%);
          mask-image:radial-gradient(ellipse 55% 45% at 50% 50%, rgba(0,0,0,.25), #000 100%);
}
.paths--soft{ opacity:.5; }

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:grid; place-items:center; padding:120px var(--pad) 90px; overflow:clip; isolation:isolate;
}
.hero__glow{
  position:absolute; z-index:-1; left:50%; top:46%; width:min(900px, 120vw); aspect-ratio:1.6;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(124,92,255,.22), rgba(46,197,255,.06) 55%, transparent 75%);
  filter:blur(10px);
}
.hero__spot{    /* soft light that follows the pointer */
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .6s;
  background:radial-gradient(520px circle at var(--hx, 50%) var(--hy, 50%), rgba(139,108,255,.16), transparent 65%);
}
.hero:hover .hero__spot{ opacity:1; }
.hero__inner{ will-change:transform, filter, opacity; transform-style:preserve-3d; }
.hero__title{ will-change:transform; }
.hero::after{   /* fade the paths into the page below */
  content:""; position:absolute; inset:auto 0 0 0; height:180px; z-index:-1;
  background:linear-gradient(to bottom, transparent, var(--bg));
}
.hero__inner{ position:relative; max-width:980px; text-align:center; display:flex; flex-direction:column; align-items:center; }

.pill{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 12px; margin-bottom:34px;
  border:1px solid var(--line-2); border-radius:var(--r-pill); background:rgba(255,255,255,.03);
  font:500 13px/1 var(--font-mono); letter-spacing:.04em; color:var(--ink-soft);
}
.pill__dot{ width:7px; height:7px; border-radius:50%; background:#3ee08f; box-shadow:0 0 0 0 rgba(62,224,143,.6);
  animation:ping 2.4s infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(62,224,143,.55) } 70%,100%{ box-shadow:0 0 0 9px rgba(62,224,143,0) } }

.hero__title{
  font:500 clamp(48px, 10.5vw, 148px)/.94 var(--font-display); letter-spacing:-.055em;
}
.hero__line{ display:block; white-space:nowrap; }
.hero__line .word{ display:inline-block; white-space:nowrap; margin-right:.22em; }
.hero__line .word:last-child{ margin-right:0; }
.hero__line .ch{ display:inline-block; will-change:transform; }
.hero__line--grad .ch{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  /* every letter paints the whole gradient across the line, not its own slice */
  background-size:var(--line-w, 100%) 100%; background-position:calc(var(--ch-x, 0px) * -1) 0;
  padding-bottom:.06em;
}

.hero__lede{ max-width:560px; margin-top:30px; font-size:clamp(16px, 1.6vw, 19px); color:var(--ink-soft); }
.hero__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:36px; }

.hero__stats{
  display:flex; gap:clamp(24px, 6vw, 72px); margin-top:64px; padding-top:28px; border-top:1px solid var(--line);
}
.hero__stats div{ display:flex; flex-direction:column-reverse; gap:6px; }
.hero__stats dt{ font:500 12px/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hero__stats dd{ font:500 clamp(28px, 3.4vw, 40px)/1 var(--font-display); letter-spacing:-.03em; }

.hero__scroll{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:24px; height:38px; border:1.5px solid var(--line-2); border-radius:14px; }
.hero__scroll span{ position:absolute; left:50%; top:8px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px;
  background:var(--ink-soft); animation:wheel 2s var(--ease-out) infinite; }
@keyframes wheel{ 0%{ transform:translateY(0); opacity:1 } 80%,100%{ transform:translateY(12px); opacity:0 } }

@media (max-width: 600px){
  .hero{ padding-top:110px; }
  .hero__title{ font-size:clamp(46px, 15vw, 72px); }
  .hero__line{ white-space:normal; }
  .hero__stats{ gap:20px; width:100%; justify-content:space-between; }
  .hero__stats dt{ font-size:10.5px; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .hero__actions{ width:100%; }
  .hero__scroll{ display:none; }
}

/* ── marquee — velocity rows (js/home.js drives them) ──────── */
.marquee{
  overflow:hidden; padding:30px 0; border-block:1px solid var(--line); display:flex; flex-direction:column; gap:14px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__row{ overflow:visible; }
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__set{ display:flex; flex-shrink:0; }
.marquee__set li{
  display:flex; align-items:center; gap:28px; padding-right:28px; white-space:nowrap;
  font:500 clamp(18px, 2vw, 24px)/1 var(--font-display); letter-spacing:-.01em; color:var(--muted);
}
.marquee__set li::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.7; }
.marquee__row--alt .marquee__set li{
  font-size:clamp(34px, 5vw, 64px); font-weight:600; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.22);
}
.marquee__row--alt .marquee__set li::after{ width:10px; height:10px; background:var(--accent-2); }

/* ── intro curtain ─────────────────────────────────────────── */
.intro{
  position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad); padding-bottom:clamp(28px, 6vh, 64px); background:#050507; color:var(--ink);
}
.no-js .intro, .intro.is-skip{ display:none; }
.intro__name{ overflow:hidden; font:500 clamp(44px, 9vw, 132px)/.95 var(--font-display); letter-spacing:-.05em; padding-bottom:.08em; }
.intro__name span{ display:inline-block; }
.intro__meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px;
  font:500 13px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.intro__meta b{ font:500 clamp(28px, 4vw, 48px)/1 var(--font-display); letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.intro__bar{ height:1px; margin-top:18px; background:var(--line-2); overflow:hidden; }
.intro__bar span{ display:block; height:100%; background:var(--grad); transform-origin:0 50%; transform:scaleX(0); }

/* ── border beam — a spark that runs around an edge ────────── */
@property --beam-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.beam{
  position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--beam-a), transparent 0 78%, rgba(139,108,255,.0) 80%, #a58cff 90%, #39c8ff 96%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:beam 7s linear infinite; animation-delay:var(--beam-delay, 0s);
}
@keyframes beam{ to{ --beam-a:360deg; } }

/* ── split headings ────────────────────────────────────────── */
.wd{ display:inline-block; will-change:transform, filter, opacity; }
.h2 em.is-split{ background:none; color:inherit; }
.h2 em.is-split .wd{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.1em; margin-bottom:-.1em;
}
.work__grid{ perspective:1400px; }
.contact__title .hero__line{ white-space:nowrap; }
.contact__title .ch{ display:inline-block; transform-origin:50% 100%; }
.js-motion .h2 .wd, .js-motion .work__sub h3 .wd{ opacity:0; }

/* ── about — scroll-lit words ──────────────────────────────── */
.about{ position:relative; height:220vh; }
.about__sticky{
  position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
}
.about__text{
  font:500 clamp(26px, 4vw, 52px)/1.18 var(--font-display); letter-spacing:-.03em;
}
.about__text .w{ opacity:.14; transition:opacity .2s linear; }
.no-js .about__text .w, .about__text.is-static .w{ opacity:1; }
@media (max-width: 600px){ .about{ height:180vh; } }

/* ── work — featured tilt ──────────────────────────────────── */
.work{ position:relative; padding-bottom:120px; }
.tilt{ position:relative; height:200vh; }
.tilt__sticky{
  position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px var(--pad) 40px; perspective:1000px;
}
.tilt__head{ text-align:center; margin-bottom:clamp(24px, 4vh, 48px); }
.tilt__head .h2{ font-size:clamp(30px, 4.6vw, 62px); }
.tilt__device{
  /* sized by height too, so head + screen + caption fit one viewport */
  width:min(100%, 1040px, (100vh - 390px) * 1.85); padding:10px; border-radius:30px;
  background:linear-gradient(#24242c, #121217); border:1px solid #34343e;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 9px 20px rgba(0,0,0,.3), 0 37px 37px rgba(0,0,0,.26), 0 84px 50px rgba(0,0,0,.15), 0 -10px 80px rgba(124,92,255,.10);
  transform-origin:50% 0; will-change:transform;
}
.tilt__screen{ position:relative; border-radius:21px; overflow:hidden; background:#000; aspect-ratio:1600/866; }
.tilt__screen img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  opacity:0; transform:scale(1.025); transition:opacity .6s var(--ease-out), transform 1s var(--ease-out);
}
.tilt__screen img.is-on{ opacity:1; transform:none; }
.tilt__tabs{
  position:relative; display:flex; gap:4px; margin-top:18px; padding:4px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:rgba(255,255,255,.02);
}
.tilt__tabs button{
  position:relative; z-index:1; border:0; background:none; cursor:pointer;
  padding:9px 16px; border-radius:var(--r-pill); font:500 13.5px/1 var(--font-body); color:var(--muted);
  transition:color .3s;
}
.tilt__tabs button:hover{ color:var(--ink-soft); }
.tilt__tabs button[aria-selected="true"]{ color:var(--bg); }
.tilt__tabs .tabs__pill{ position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; border-radius:var(--r-pill); background:var(--ink); }
.tilt__foot{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  width:min(100%, 1040px); margin-top:28px;
}
@media (min-width: 761px){ .tilt__device{ min-width:min(100%, 560px); } }
.tilt__foot p{ max-width:640px; color:var(--ink-soft); font-size:15.5px; }
@media (max-width: 760px){
  .tilt__tabs{ max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .tilt__tabs button{ padding:9px 12px; font-size:12.5px; white-space:nowrap; }
  .tilt{ height:auto; }
  .tilt__sticky{ position:relative; height:auto; padding-top:100px; }
  .tilt__foot{ flex-direction:column; align-items:flex-start; }
}

/* ── spotlight surfaces (cards, caps, kit) ─────────────────── */
.spot{
  position:relative; isolation:isolate; overflow:clip;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  --mx:50%; --my:50%; --spot:0;
}
.spot::before{   /* soft light under the pointer */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(139,108,255,.13), transparent 60%);
  opacity:var(--spot); transition:opacity .35s;
}
.spot::after{    /* the border lights up where the pointer is */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(165,140,255,.85), rgba(57,200,255,.35) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:var(--spot); transition:opacity .35s;
}

/* ── work grid ─────────────────────────────────────────────── */
.work__sub{
  max-width:var(--maxw); margin:40px auto 28px; padding:0 var(--pad);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px 32px; flex-wrap:wrap;
}
.work__sub h3{ font:500 clamp(22px, 2.4vw, 30px)/1.15 var(--font-display); letter-spacing:-.025em; }
.work__sub p{ color:var(--muted); font-size:15px; }
.work__grid{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px;
}
.card{ display:flex; flex-direction:column; transition:border-color .3s; will-change:transform; }
.card__glare{   /* a sheet of light that slides across as the card tilts */
  position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .4s;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.0) 60%);
  background-size:250% 250%; background-position:var(--gx, 50%) var(--gy, 50%);
}
.card:hover .card__glare{ opacity:1; }
.card__link{ position:absolute; inset:0; z-index:2; border-radius:inherit; }
.card__media{ position:relative; aspect-ratio:16/9; margin:10px 10px 0; border-radius:20px; overflow:hidden; background:#000; }
.card__media img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 1.1s var(--ease-out), filter .6s; }
.card:hover .card__media img{ transform:scale(1.04); filter:brightness(.8); }
.card__visit{
  position:absolute; z-index:1; top:14px; right:14px; display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:var(--r-pill); background:var(--ink); color:var(--bg);
  font:500 13px/1 var(--font-body); opacity:0; transform:translateY(-8px) scale(.94);
  transition:opacity .35s, transform .5s var(--ease-out);
}
.card__visit svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.card:hover .card__visit{ opacity:1; transform:none; }
.card__body{ display:flex; flex-direction:column; gap:14px; padding:22px 24px 26px; flex:1; }
.card__top{ display:flex; align-items:center; justify-content:space-between; }
.card__idx{ font:500 12px/1 var(--font-mono); color:var(--muted); letter-spacing:.1em; }
.status{ font:500 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:var(--r-pill);
  color:#3ee08f; background:rgba(62,224,143,.08); border:1px solid rgba(62,224,143,.2); }
.status--dim{ color:var(--ink-soft); background:rgba(255,255,255,.04); border-color:var(--line-2); }
.card h3{ font:500 23px/1.18 var(--font-display); letter-spacing:-.02em; }
.card p{ color:var(--ink-soft); font-size:15px; }
.card__note{ font-size:13.5px !important; color:var(--muted) !important; padding-left:12px; border-left:2px solid var(--accent); }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }
.tags li{ font:500 12px/1 var(--font-mono); padding:7px 10px; border-radius:8px; color:var(--ink-soft); background:rgba(255,255,255,.04); border:1px solid var(--line); }
.card__repo{
  position:relative; z-index:3; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--ink-soft); padding:8px 12px; border-radius:var(--r-pill); border:1px solid var(--line-2);
  transition:color .25s, border-color .25s;
}
.card__repo:hover{ color:var(--ink); border-color:rgba(255,255,255,.32); }
.card__repo svg{ width:15px; height:15px; }
@media (max-width: 860px){ .work__grid{ grid-template-columns:1fr; } }

/* ── capabilities bento ────────────────────────────────────── */
.caps{ padding:120px 0; }
.bento{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;
}
.cap{ padding:30px; display:flex; flex-direction:column; gap:12px; min-height:250px; }
.cap--wide{ grid-column:span 2; }
.cap__ico{ width:40px; height:40px; padding:9px; margin-bottom:18px; border-radius:12px; border:1px solid var(--line-2);
  fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; background:rgba(255,255,255,.03); }
.cap h3{ font:500 22px/1.2 var(--font-display); letter-spacing:-.02em; }
.cap p{ color:var(--ink-soft); font-size:15px; max-width:520px; }
.cap__rows{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:18px; }
.cap__rows span{ font:400 12.5px/1 var(--font-mono); padding:9px 12px; border-radius:8px; color:var(--ink-soft);
  background:rgba(0,0,0,.35); border:1px solid var(--line); }
.cap__rows b{ color:var(--accent); font-weight:500; margin-right:4px; }
.cap__curve{ margin-top:auto; padding-top:16px; height:76px; }
.cap__curve svg{ width:100%; height:100%; overflow:visible; }
.cap__curve path{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
@media (max-width: 860px){
  .bento{ grid-template-columns:1fr; }
  .cap--wide{ grid-column:auto; }
}

/* ── toolkit ───────────────────────────────────────────────── */
.kit{ padding:40px 0 120px; }
.kit__grid{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px;
}
.kit__card{ padding:24px; display:flex; flex-direction:column; gap:10px; border-radius:var(--r); }
.kit__card h3{ font:500 18px/1.25 var(--font-display); letter-spacing:-.015em; }
.kit__card p{ color:var(--muted); font-size:14px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:10px; }
.chips li{ font-size:13px; padding:6px 11px; border-radius:var(--r-pill); color:var(--ink-soft); border:1px solid var(--line-2); }

/* ── build log — scroll beam timeline ──────────────────────── */
.log{ padding:40px 0 140px; }
.log__list{ position:relative; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.log__rail{
  position:absolute; top:8px; bottom:8px; left:calc(var(--pad) + 9px); width:2px;
  background:linear-gradient(to bottom, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent);
}
.log__beam{
  position:absolute; inset:0 0 auto 0; height:100%; transform-origin:top; transform:scaleY(var(--beam, 0));
  background:linear-gradient(to bottom, var(--accent), var(--accent-2) 80%, transparent);
  border-radius:2px;
}
.log__item{ position:relative; display:grid; grid-template-columns:minmax(150px, 300px) 1fr; gap:24px; padding:0 0 72px; }
.log__item:last-child{ padding-bottom:0; }
.log__when{
  position:sticky; top:120px; align-self:start; display:flex; align-items:baseline; gap:14px; padding-left:44px;
}
.log__node{ position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%; background:var(--bg);
  border:1px solid var(--line-2); display:grid; place-items:center; }
.log__node::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); transition:background .4s, box-shadow .4s; }
.log__item.is-on .log__node::after{ background:var(--accent-2); box-shadow:0 0 12px var(--accent-2); }
.log__when b{ font:500 clamp(28px, 3.6vw, 48px)/1 var(--font-display); letter-spacing:-.03em; color:var(--muted); transition:color .4s; }
.log__item.is-on .log__when b{ color:var(--ink); }
.log__when span{ font:500 13px/1 var(--font-mono); color:var(--muted); }
.log__body h3{ font:500 24px/1.2 var(--font-display); letter-spacing:-.02em; margin-bottom:10px; }
.log__body p{ color:var(--ink-soft); max-width:600px; }
@media (max-width: 760px){
  .log__item{ grid-template-columns:1fr; gap:14px; padding-bottom:56px; }
  .log__when{ position:relative; top:0; }
  .log__body{ padding-left:44px; }
}

/* ── contact ───────────────────────────────────────────────── */
.contact{ position:relative; overflow:clip; isolation:isolate; padding:160px var(--pad) 170px; border-top:1px solid var(--line); text-align:center; }
.contact::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 50% at 50% 55%, rgba(124,92,255,.16), transparent 70%); }
.contact__inner{ position:relative; display:flex; flex-direction:column; align-items:center; }
.contact__title{ font:500 clamp(52px, 10vw, 140px)/.92 var(--font-display); letter-spacing:-.055em; margin-bottom:48px; }

/* interactive hover button: the dot grows to fill, the label swaps */
.hover-btn{
  position:relative; display:inline-flex; align-items:center; gap:12px; overflow:hidden;
  height:62px; padding:0 30px 0 24px; border-radius:var(--r-pill); border:1px solid var(--line-2);
  background:rgba(255,255,255,.03); font:500 clamp(15px, 1.8vw, 19px)/1 var(--font-body);
  max-width:100%;
}
.hover-btn__dot{ position:relative; z-index:1; width:10px; height:10px; flex-shrink:0; border-radius:50%; background:var(--ink);
  transition:transform .6s var(--ease-out); }
.hover-btn__text{ transition:transform .5s var(--ease-out), opacity .4s; overflow:hidden; text-overflow:ellipsis; }
.hover-btn__over{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--bg); opacity:0; transform:translateX(40px); transition:transform .5s var(--ease-out), opacity .4s;
}
.hover-btn__over svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hover-btn:hover .hover-btn__dot{ transform:scale(80); }
.hover-btn:hover .hover-btn__text{ transform:translateX(40px); opacity:0; }
.hover-btn:hover .hover-btn__over{ transform:none; opacity:1; }

.contact__socials{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:28px; }
.contact__socials a{
  display:inline-block; padding:11px 18px; border-radius:var(--r-pill); font-size:14.5px; color:var(--ink-soft);
  border:1px solid var(--line); transition:color .25s, border-color .25s, background .25s;
}
.contact__socials a:hover{ color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.04); }
@media (max-width: 600px){
  .hover-btn{ height:56px; padding:0 20px; font-size:14.5px; }
}

/* ── footer — brand, three link columns, a quiet bottom bar ─── */
.foot{ position:relative; background:var(--bg-2); border-top:1px solid var(--line); }
.foot::before{   /* a hairline of accent light along the top edge */
  content:""; position:absolute; top:-1px; left:50%; width:min(560px, 70%); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(139,108,255,.7), rgba(57,200,255,.5), transparent);
}
.foot__inner{
  max-width:var(--maxw); margin:0 auto; padding:72px var(--pad) 56px;
  display:grid; grid-template-columns:minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap:48px 32px;
}
.foot__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; max-width:380px; }
.foot__logo{ display:flex; align-items:center; gap:12px; }
.foot__logo img{ border-radius:10px; }
.foot__logo span{ display:flex; flex-direction:column; gap:3px; }
.foot__logo b{ font:500 17px/1.1 var(--font-display); letter-spacing:-.01em; }
.foot__logo i{ font:normal 400 13px/1.2 var(--font-body); color:var(--muted); }
.foot__brand > p{ color:var(--ink-soft); font-size:14.5px; text-wrap:pretty; }
.foot__mail{
  font:500 15px/1 var(--font-body); color:var(--ink);
  background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom:4px;
  transition:background-size .5s var(--ease-out);
}
.foot__mail:hover{ background-size:100% 1px; }
.foot__status{ display:inline-flex; align-items:center; gap:9px; font:500 12.5px/1 var(--font-mono) !important; color:var(--muted) !important; }

.foot__col h2{ font:500 12px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.foot__col ul{ display:flex; flex-direction:column; gap:12px; }
.foot__col a{ position:relative; font-size:14.5px; color:var(--ink-soft); transition:color .25s; }
.foot__col a:hover{ color:var(--ink); }

.foot__bar{
  max-width:var(--maxw); margin:0 auto; padding:22px var(--pad) 28px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
  border-top:1px solid var(--line); font:400 12.5px/1.4 var(--font-mono); color:var(--muted);
}
.foot__time time{ color:var(--ink-soft); font-variant-numeric:tabular-nums; margin:0 4px; }
.foot__time i{ font-style:normal; opacity:.7; }
.foot__top{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); transition:color .25s; }
.foot__top:hover{ color:var(--ink); }
.foot__top svg{ width:28px; height:28px; padding:6px; border-radius:50%; border:1px solid var(--line-2);
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease-out), border-color .3s; }
.foot__top:hover svg{ transform:translateY(-3px); border-color:rgba(255,255,255,.32); }

@media (max-width: 900px){
  .foot__inner{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .foot__brand{ grid-column:1 / -1; max-width:none; }
}
@media (max-width: 520px){
  .foot__inner{ grid-template-columns:1fr 1fr; padding-top:56px; }
  .foot__bar{ flex-direction:column; align-items:flex-start; }
}

/* ── scroll progress + grain ───────────────────────────────── */
.progress{ position:fixed; z-index:120; top:0; left:0; right:0; height:2px; pointer-events:none; }
.progress span{ display:block; height:100%; background:var(--grad); transform-origin:0 50%; transform:scaleX(0); }
.grain{
  position:fixed; inset:-50%; z-index:110; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ inner pages (cutlass, cv, soon) ═══════════════════════════
   Same tokens and components as the home page; these are the
   pieces only the inner pages use. */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.page-hero{ position:relative; overflow:clip; isolation:isolate; padding:clamp(140px, 20vh, 200px) 0 clamp(40px, 6vh, 72px); }
.page-hero .paths{ opacity:.55; }
.page-hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:160px; z-index:-1; background:linear-gradient(to bottom, transparent, var(--bg)); }
.page-hero__glow{ position:absolute; z-index:-1; left:50%; top:40%; width:min(1000px, 130vw); aspect-ratio:1.7; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(124,92,255,.22), rgba(46,197,255,.06) 55%, transparent 75%); }

.back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:34px; padding:8px 14px 8px 10px;
  border-radius:var(--r-pill); border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  font:500 13px/1 var(--font-body); color:var(--ink-soft); transition:color .25s, border-color .25s;
}
.back:hover{ color:var(--ink); border-color:rgba(255,255,255,.3); }
.back svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease-out); }
.back:hover svg{ transform:translateX(-3px); }

.kicker{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:22px; }
.kicker .label{ margin:0; }
.badge{
  font:500 12px/1 var(--font-mono); letter-spacing:.04em; padding:7px 11px; border-radius:var(--r-pill);
  color:#c9bbff; background:rgba(139,108,255,.1); border:1px solid rgba(139,108,255,.3);
}
.page-h1{ font:500 clamp(42px, 7.4vw, 104px)/.98 var(--font-display); letter-spacing:-.05em; max-width:14ch; }
.page-h1 em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; padding-bottom:.1em; margin-bottom:-.1em; }
.lede{ max-width:620px; margin-top:28px; font-size:clamp(16px, 1.6vw, 19px); color:var(--ink-soft); }
.lede strong{ color:var(--ink); font-weight:500; }
.page-hero .tags{ margin-top:28px; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.sec{ padding:clamp(70px, 11vh, 130px) 0; }
.sec--tight{ padding:clamp(30px, 5vh, 60px) 0; }
.copy{ color:var(--ink-soft); max-width:62ch; font-size:16.5px; }
.copy + .copy{ margin-top:14px; }
.copy strong{ color:var(--ink); font-weight:500; }
.sec .h2{ margin-bottom:24px; }

/* screenshot in a window frame */
.shot{ position:relative; border-radius:var(--r-lg); padding:8px; }
.shot__frame{ display:flex; align-items:center; gap:10px; padding:6px 10px 12px; }
.shot__dots{ display:flex; gap:6px; }
.shot__dots i{ width:10px; height:10px; border-radius:50%; background:var(--line-2); }
.shot__name{ font:500 12px/1 var(--font-mono); color:var(--muted); letter-spacing:.04em; }
.shot img{ width:100%; height:auto; border-radius:18px; }
.feature{ display:grid; grid-template-columns:1fr; gap:clamp(28px, 4vw, 64px); align-items:center; }
@media (min-width: 900px){
  .feature{ grid-template-columns:1.25fr .75fr; }
  .feature--flip{ grid-template-columns:.75fr 1.25fr; }
  .feature--flip .shot{ order:2; }
}
.feature h2{ font:500 clamp(28px, 3.4vw, 44px)/1.08 var(--font-display); letter-spacing:-.035em; margin-bottom:18px; }

/* the two-operator diagram: commands travel along the wires */
.diagram{ display:grid; gap:16px; margin-top:44px; grid-template-columns:1fr; align-items:center; }
@media (min-width: 760px){ .diagram{ grid-template-columns:1fr 56px minmax(180px, .8fr) 56px 1fr; gap:0; } }
.node{ padding:26px; border-radius:var(--r); }
.node h3{ font:500 19px/1.2 var(--font-display); letter-spacing:-.015em; margin-bottom:8px; }
.node p{ color:var(--ink-soft); font-size:14.5px; }
.node--bus{ text-align:center; overflow:visible; }
.node--bus b{ display:block; font:500 17px/1.2 var(--font-display); background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.node--bus span{ display:block; margin-top:6px; font:500 12px/1.3 var(--font-mono); color:var(--muted); }
.wire{ display:none; position:relative; height:2px; background:var(--line-2); overflow:hidden; }
@media (min-width: 760px){ .wire{ display:block; } }
.wire::after{ content:""; position:absolute; top:0; left:-24px; width:24px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #a58cff, #39c8ff); box-shadow:0 0 10px #8b6cff;
  animation:wire 1.8s cubic-bezier(.6,0,.4,1) infinite; }
.wire--rev::after{ animation-name:wire-rev; animation-delay:-.9s; background:linear-gradient(270deg, transparent, #a58cff, #39c8ff); }
@keyframes wire{ from{ left:-24px; } to{ left:100%; } }
@keyframes wire-rev{ from{ left:100%; } to{ left:-24px; } }

.points{ display:grid; gap:16px; grid-template-columns:1fr; margin-top:36px; }
@media (min-width: 760px){ .points{ grid-template-columns:repeat(2, 1fr); } }
.point{ padding:26px; border-radius:var(--r); }
.point h3{ display:flex; align-items:center; gap:10px; font:500 19px/1.2 var(--font-display); letter-spacing:-.015em; margin-bottom:8px; }
.point h3 svg{ width:22px; height:22px; padding:4px; border-radius:7px; border:1px solid var(--line-2); fill:none; stroke:var(--accent-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.point p{ color:var(--ink-soft); font-size:14.5px; }
.note{
  position:relative; margin-top:34px; padding:22px 26px; border-radius:var(--r); max-width:66ch;
  background:linear-gradient(135deg, rgba(139,108,255,.08), rgba(57,200,255,.03)); border:1px solid rgba(139,108,255,.25);
  color:var(--ink-soft); font-size:15.5px;
}
.note b{ color:var(--ink); font-weight:500; }

.end{ position:relative; overflow:clip; isolation:isolate; padding:clamp(110px, 16vh, 170px) var(--pad); text-align:center; border-top:1px solid var(--line); }
.end::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 55% at 50% 60%, rgba(124,92,255,.16), transparent 70%); }
.end .h2{ margin-bottom:18px; }
.end .copy{ margin:0 auto; }
.end .actions{ justify-content:center; }

/* ── scroll reveals (js/home.js adds .is-in) ───────────────── */
.js-motion .reveal{ opacity:0; transform:translateY(32px); }

/* ── reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .beam{ animation:none; opacity:0; }
  .intro{ display:none; }
  .about{ height:auto; } .about__sticky{ position:relative; min-height:0; padding-block:120px; }
  .tilt{ height:auto; } .tilt__sticky{ position:relative; height:auto; }
}