:root{--bg:#0b0d10;--bg2:#0f1216;--fg:#dfe5ea;--dim:#5a6470;--line:#1a2028;--ice:#a6dcff;
    --sans:"Inter Tight",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
    --ease:cubic-bezier(.2,.7,0,1);--pad:3vw}
  *{box-sizing:border-box;margin:0;padding:0}
  html{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}
  body{overflow-x:hidden;cursor:none}
  a{color:inherit;text-decoration:none;cursor:none}
  ::selection{background:var(--ice);color:#05070a}
  .mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

  /* film grain — keeps flat black from looking "default" */
  body::after{content:"";position:fixed;inset:0;z-index:90;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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 1s steps(4) infinite}
  @keyframes grain{25%{background-position:-40px 30px}50%{background-position:30px -50px}75%{background-position:-20px 50px}}

  /* ---------- cursor ---------- */
  #cur{position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:100;pointer-events:none;mix-blend-mode:difference;
    transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease)}
  #cur svg{width:100%;height:100%;fill:#fff;animation:spin 9s linear infinite}
  #cur.big{width:120px;height:120px;margin:-60px 0 0 -60px}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (hover:none){body,a{cursor:auto}#cur{display:none}}

  /* ---------- intro ---------- */
  #intro{position:fixed;inset:0;z-index:80;background:#05070a;display:flex;align-items:center;justify-content:center;
    clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease) .1s}
  #intro svg{width:56px;fill:var(--ice);animation:introSpin 1.1s var(--ease) forwards}
  #intro .c{position:absolute;bottom:var(--pad);right:var(--pad);font-variant-numeric:tabular-nums}
  @keyframes introSpin{from{transform:rotate(-300deg) scale(.4)}to{transform:rotate(0) scale(1)}}
  .ready #intro{clip-path:inset(0 0 100% 0)}

  /* ---------- header ---------- */
  header{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--pad);mix-blend-mode:difference;color:#fff}
  header img{height:18px;display:block}
  header .mono{color:#fff;opacity:.72}
  header .r{justify-self:end;display:flex;gap:28px}
  header a.mono{opacity:1}

  /* ---------- HERO ---------- */
  .hero{height:230vh;position:relative}
  .hero .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) var(--pad)}
  .hero .top{position:absolute;top:18vh;left:var(--pad);right:var(--pad);display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw}
  .hero .top h1{grid-column:1/7;font-size:clamp(30px,3.4vw,54px);line-height:1.02;letter-spacing:-.035em;font-weight:600}
  .hero .top h1 em{font-style:normal;color:var(--dim)}
  .hero .top .meta{grid-column:9/13;display:flex;flex-direction:column;gap:10px;padding-top:10px}
  .hero .top .meta span{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px}
  .hero .top .meta b{color:var(--fg);font-weight:400}
  .logo{display:flex;align-items:flex-end;font-weight:800;letter-spacing:-.045em;line-height:.76;font-size:20vw;white-space:nowrap;user-select:none}
  .logo .l{display:inline-block;will-change:transform}
  .logo .m{display:inline-block;overflow:hidden;padding-bottom:.06em;vertical-align:bottom}
  .logo .i{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
  .ready .logo .i{transform:none}
  /* asterisk: vector, drawn at its MAX size and scaled down — never upscaled, stays sharp */
  .logo .ast{position:relative;width:.4em;height:.4em;align-self:flex-start;margin:.02em 0 0 .05em;will-change:auto}
  .logo .ast .m,.logo .ast .i{display:block;width:100%;height:100%;overflow:visible;padding:0}
  .logo .ast svg{position:absolute;left:50%;top:50%;width:180%;height:180%;fill:var(--ice);overflow:visible;
    transform:translate(-50%,-50%) scale(.5556);shape-rendering:geometricPrecision}
  .scrollhint{position:absolute;right:var(--pad);bottom:calc(var(--pad) + 1vw);writing-mode:vertical-rl}
  .fade{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .9s,transform 1s var(--ease) .9s}
  .ready .fade{opacity:1;transform:none}

  /* ---------- 01 TWO DIRECTIONS ---------- */
  .dirs{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:88vh;min-height:560px;position:relative}
  .dir{flex:1;position:relative;overflow:hidden;padding:5vw var(--pad) var(--pad);display:flex;flex-direction:column;transition:flex 1s var(--ease),background .6s}
  .dir+.dir{border-left:1px solid var(--line)}
  .dirs:hover .dir{flex:.75}
  .dirs .dir:hover{flex:1.5;background:var(--bg2)}
  .dir .tape{position:absolute;left:0;right:0;top:46%;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#262f3a;pointer-events:none}
  .dir .tape div{display:inline-block;animation:tape 40s linear infinite}
  .dir.b .tape div{animation-direction:reverse}
  .dir:hover .tape{color:#3a4654}
  @keyframes tape{to{transform:translateX(-50%)}}
  .dir h2{margin-top:auto;font-size:clamp(56px,8.4vw,150px);font-weight:800;letter-spacing:-.055em;line-height:.85;transition:color .5s}
  .dirs:hover .dir:not(:hover) h2{color:#2a323d}
  .dir ul{list-style:none;margin-top:3vw;display:grid;grid-template-columns:1fr 1fr;gap:0 2vw;max-width:560px}
  .dir li{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:10px 0;border-top:1px solid var(--line)}
  .dirs .hub{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;fill:var(--ice);z-index:2;transition:left 1s var(--ease),transform 1s var(--ease);pointer-events:none}

  /* ---------- 02 POSITION ---------- */
  .manifesto{padding:26vh var(--pad);display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw}
  .manifesto .mono{grid-column:1/3;padding-top:14px}
  .manifesto p{grid-column:3/12;font-size:clamp(32px,4.6vw,76px);line-height:1.04;letter-spacing:-.04em;font-weight:700}
  .manifesto .wd{color:#1f2731;transition:color .35s}
  .manifesto .wd.lit{color:var(--fg)}
  .manifesto .wd.acc.lit{color:var(--ice)}

  /* ---------- 03 LIFECYCLE ---------- */
  .spec{padding:0 var(--pad) 22vh}
  .spec .head{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;padding-bottom:16px;border-bottom:1px solid var(--fg)}
  .row{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;border-bottom:1px solid var(--line);padding:26px 0;position:relative;overflow:hidden}
  .row::before{content:"";position:absolute;inset:0;background:var(--ice);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:0}
  .row:hover::before{transform:scaleY(1);transform-origin:top}
  .row>*{position:relative;z-index:1;transition:color .35s}
  .row:hover>*{color:#05070a}
  .row .n{grid-column:1/2;font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:14px}
  .row h3{grid-column:2/7;font-size:clamp(40px,5.4vw,88px);font-weight:800;letter-spacing:-.05em;line-height:.95;overflow:hidden}
  .row h3 span{display:inline-block;transform:translateY(100%);transition:transform 1s var(--ease)}
  .row.in h3 span{transform:none}
  .row p{grid-column:7/11;color:#8e99a5;line-height:1.5;align-self:center;opacity:0;transition:opacity 1s .2s,color .35s}
  .row.in p{opacity:1}
  .row .k{grid-column:11/13;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);align-self:center;text-align:right;line-height:1.8}

  /* ---------- 04 CONTACT ---------- */
  .contact{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:14vh var(--pad) var(--pad);border-top:1px solid var(--line);overflow:hidden}
  .contact .info{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:5vw}
  .contact .info a{font-family:var(--mono);font-size:clamp(14px,1.3vw,18px);letter-spacing:.02em;color:var(--fg);border-bottom:1px solid var(--dim);padding-bottom:4px;transition:color .3s,border-color .3s}
  .contact .info a:hover{color:var(--ice);border-color:var(--ice)}
  a.cta{display:flex;align-items:flex-start;font-size:16vw;font-weight:800;letter-spacing:-.05em;line-height:.8;white-space:nowrap;margin-top:auto}
  a.cta .u{display:inline-block;transition:transform .5s var(--ease),color .3s;will-change:transform}
  a.cta .sp{width:.26em}
  a.cta .ast{color:var(--ice);font-size:.55em;margin-left:.04em;transition:transform 1.2s var(--ease)}
  a.cta:hover .ast{transform:rotate(300deg)}

  footer{display:grid;grid-template-columns:repeat(3,1fr);gap:0 2vw;padding:26px var(--pad);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);line-height:1.8;border-top:1px solid var(--line)}
  footer b{color:var(--fg);font-weight:500}
  footer>div:last-child{text-align:right}
  footer a:hover{color:var(--fg)}

  @media (max-width:860px){
    header{grid-template-columns:1fr auto}header>.mono:nth-child(2){display:none}header .clock{display:none}
    .hero .top{grid-template-columns:1fr}.hero .top h1,.hero .top .meta{grid-column:1}.hero .top .meta{margin-top:30px}
    .dirs{flex-direction:column;height:auto}.dir{min-height:60vh}.dir+.dir{border-left:0;border-top:1px solid var(--line)}
    .dirs:hover .dir,.dirs .dir:hover{flex:1}.dirs .hub{display:none}.dir ul{grid-template-columns:1fr}
    .manifesto,.spec .head,.row{grid-template-columns:1fr}.manifesto>*,.row>*{grid-column:1/-1!important;text-align:left!important}
    .spec .head span:nth-child(n+3){display:none}.row p{margin-top:12px}
    .contact .info{flex-direction:column;align-items:flex-start}
    .hero .top .meta span{flex-direction:column;gap:4px}.scrollhint{display:none}
    footer{grid-template-columns:1fr 1fr;row-gap:20px}footer>div:last-child{text-align:left}
  }
  @media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}