@font-face{font-family:"Anton";src:url(fonts/anton.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#0d0908;--fg:#f3ebe4;--acc:#ff5a1f;--soft:rgba(243,235,228,.6);--line:rgba(243,235,228,.28);color-scheme:dark;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --pad:clamp(1.1rem,3.2vw,3rem);
  --ease:cubic-bezier(.2,.8,.2,1);
}
body.grab,body.grab *{cursor:grabbing}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:400 1.05rem/1.55 "Inter",system-ui,sans-serif;transition:background .9s var(--ease),color .9s var(--ease);overflow-x:clip}
body:not(.loaded){overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--acc);color:#0d0908;padding:.6rem 1rem;border-radius:8px;font-weight:600}
.skip:focus{top:1rem}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}

#scene{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* loader */
.loader{position:fixed;inset:0;z-index:100;background:#0d0908;color:#f3ebe4;display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad);transition:transform 1s var(--ease) .1s}
.l-name{font:400 clamp(4rem,16vw,12rem)/.8 "Anton",sans-serif;text-transform:uppercase}
.l-count{font-family:var(--mono);font-size:.9rem}
.l-count b{font-weight:400}
body.loaded .loader{transform:translateY(-101%)}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1.1rem var(--pad);font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.top::before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;pointer-events:none;background:linear-gradient(var(--bg) 35%,transparent);transition:background .9s var(--ease)}
.logo{font:400 1.5rem/1 "Anton",sans-serif;text-transform:lowercase;letter-spacing:.01em}
.logo sup{font:400 .6rem var(--mono);margin-left:2px}
.menu{display:flex;gap:1.6rem}
.menu a{position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.menu a:hover::after{transform:scaleX(1)}
.idx b{font-weight:400}

@media (max-width:1500px){.rail{display:none!important}}
.rail{position:fixed;left:var(--pad);top:50%;translate:0 -50%;z-index:40;display:flex;flex-direction:column;gap:.9rem}
.rail a{display:flex;align-items:center;gap:.6rem;font:400 .62rem var(--mono);text-transform:uppercase;letter-spacing:.08em}
.rail a::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid currentColor;transition:all .4s var(--ease)}
.rail a span{opacity:0;transform:translateX(-6px);transition:all .4s var(--ease)}
.rail a:hover span,.rail a.on span{opacity:1;transform:none}
.rail a.on::before{background:var(--acc);border-color:var(--fg);width:18px;border-radius:6px}

/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;display:none}
.cursor i{display:block;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;transition:transform .35s var(--ease)}
.cursor.big i{transform:scale(3.2)}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* shared */
main section{position:relative}
main section>*{position:relative;z-index:2}
.tag{margin-bottom:1.6rem;color:var(--soft)}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(255,90,31,.7);margin-right:.7rem;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}
.giant{font:400 clamp(3rem,9vw,9rem)/.88 "Anton",sans-serif;text-transform:uppercase;letter-spacing:-.005em}
.giant em{font-style:normal;display:inline-block;line-height:.86;padding:.06em .12em 0;margin-top:.06em;background:var(--acc);color:#0d0908;border-radius:.1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sw,.sl{display:inline-block;will-change:transform,opacity}
.sw{white-space:nowrap}
.mask{display:block;overflow:hidden;padding-bottom:.04em}
.ln{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--ease)}
.in .ln,.ln.in{transform:none}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.body{max-width:34ch;margin-top:1.4rem;color:var(--soft)}

/* hero */
.hero{height:230svh;position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:6.2rem var(--pad) 1.6rem}
.hero .ln{transform:none;transition:none}
.hero-top,.hero .lead,.hero .ribbon{opacity:0}
.hero .giant{opacity:0;will-change:transform,opacity}
.hero .giant{position:relative;z-index:0;font-size:clamp(4.5rem,33vw,42rem);line-height:.8;text-align:center;margin:auto 0;letter-spacing:-.01em}
.hero .giant .ln{color:rgba(243,235,228,.05);-webkit-text-stroke:2px var(--fg)}
.hero .giant .mask{padding-top:.12em;margin-top:-.12em}
@media(max-width:820px){.hero .giant .ln{-webkit-text-stroke:1.5px var(--fg)}}
.hero-top{color:var(--fg)}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.hero .lead{max-width:30ch;font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.35;font-weight:600}
.scroll{display:flex;align-items:center;gap:.8rem}
.scroll i{display:block;width:1px;height:46px;background:currentColor;transform-origin:top;animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ribbon{position:absolute!important;z-index:0!important;left:0;right:0;bottom:7.5rem;overflow:hidden;pointer-events:none}
.track{display:flex;gap:3rem;width:max-content;font:400 clamp(1.4rem,3vw,2.6rem)/1 "Anton",sans-serif;text-transform:uppercase;white-space:nowrap;will-change:transform}
.track span::after{content:"✦";margin-left:3rem;color:var(--fg)}

/* manifest */
.manifest{min-height:130vh;padding:22vh var(--pad) 18vh;display:flex;flex-direction:column;justify-content:center}
.scrub{max-width:20ch;font:400 clamp(2rem,5.6vw,6rem)/1.02 "Anton",sans-serif;text-transform:uppercase}
.scrub .w{opacity:.14;transition:opacity .25s linear}
.scrub .w.on{opacity:1}
.manifest .tag{margin-left:0}

/* services */
.services{padding:14vh var(--pad) 16vh}
.svc-head{margin-bottom:6vh}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.4rem}
.svc{position:relative;padding:1.8rem 1.8rem 2.2rem;border:1.5px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--bg) 58%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;transition:background .5s var(--ease),color .5s var(--ease),transform .3s var(--ease);will-change:transform}
.svc h3{font:400 clamp(2rem,4vw,3.6rem)/.95 "Anton",sans-serif;text-transform:uppercase;margin:3.2rem 0 1rem}
.svc p{max-width:36ch;color:var(--soft);transition:color .5s}
.svc .n{color:var(--soft)}
.svc .bar{position:absolute;left:0;bottom:0;height:6px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.svc:hover{background:var(--acc);color:#0d0908}
.svc:hover p,.svc:hover .n{color:#0d0908}
.svc:hover .bar{transform:scaleX(1);background:#0d0908}
.svc.a{grid-column:1/7}
.svc.b{grid-column:8/13;margin-top:7rem}
.svc.c{grid-column:3/8}
.svc.d{grid-column:9/13;margin-top:4rem}

/* demo */
.demo-sec{min-height:100svh;padding:12vh var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center}
.demo-copy .giant.s{margin-bottom:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.chips button{padding:.6rem 1.1rem;border:1.5px solid var(--line);border-radius:99px;font-weight:600;font-size:.92rem;transition:all .3s var(--ease)}
.chips button:hover{background:var(--acc);color:#0d0908;border-color:#0d0908}
.note{margin-top:1.6rem;max-width:44ch;color:var(--soft);text-transform:none;letter-spacing:0}
.chat{border:1.5px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;height:min(34rem,72svh);overflow:hidden}
.chat-bar{display:flex;align-items:center;padding:1rem 1.3rem;border-bottom:1.5px solid var(--line)}
.chat-bar .live{margin-right:.6rem}
.chat-bar b{font-weight:600}
.chat-bar .mono{margin-left:auto;color:var(--soft)}
.chat-body{flex:1;overflow-y:auto;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;scrollbar-width:thin}
.hint{color:var(--soft);margin:auto;text-align:center}
.msg{max-width:86%;padding:.7rem 1rem;border-radius:18px;font-size:.96rem;line-height:1.45;animation:pop .5s var(--ease) both}
.msg.me{align-self:flex-end;background:var(--fg);color:var(--bg);border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;border:1.5px solid var(--line);border-bottom-left-radius:4px}
.msg.draft{background:var(--acc);color:#0d0908;border:0}
.msg.draft small{display:block;font:400 .66rem var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;opacity:.7}
.step{align-self:flex-start;font:400 .76rem var(--mono);color:var(--soft);animation:pop .4s var(--ease) both}
.step b{color:var(--fg);font-weight:400;background:color-mix(in srgb,var(--acc) 70%,transparent);color:#0d0908;padding:0 .35em;border-radius:4px}
.dots{align-self:flex-start;display:flex;gap:4px;padding:.6rem .9rem;border:1.5px solid var(--line);border-radius:18px}
.dots i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.approve{align-self:flex-start;display:flex;gap:.5rem;animation:pop .4s var(--ease) both}
.approve button{padding:.45rem .9rem;border:1.5px solid var(--line);border-radius:99px;font-weight:600;font-size:.85rem;transition:all .3s}
.approve button:hover{background:var(--fg);color:var(--bg)}
.chat-in{display:flex;gap:.6rem;padding:.9rem;border-top:1.5px solid var(--line)}
.chat-in input{flex:1;min-width:0;background:transparent;border:1.5px solid var(--line);border-radius:99px;padding:.75rem 1.1rem;outline-offset:2px}
.chat-in input::placeholder{color:var(--soft)}
.send{padding:.75rem 1.4rem;border-radius:99px;background:var(--acc);color:#0d0908;font-weight:600;transition:transform .3s var(--ease),opacity .3s}
.send:disabled{opacity:.45;cursor:default}

/* finale */
.finale{min-height:100svh;padding:16vh var(--pad) 1.6rem;display:flex;flex-direction:column;justify-content:flex-end}
.mega{font-size:clamp(4rem,19.5vw,26rem);line-height:.82;margin-bottom:2rem;position:relative;z-index:0}
.lead2{max-width:32ch;font-size:clamp(1.05rem,1.7vw,1.5rem);font-weight:600;line-height:1.3}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0 6vh}
.btn{display:inline-flex;align-items:center;padding:1rem 1.8rem;border-radius:99px;font-weight:600;border:1.5px solid var(--line);transition:background .4s var(--ease),color .4s var(--ease),transform .3s var(--ease)}
.btn.big{background:var(--acc);color:#0d0908;border-color:var(--acc)}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.2rem;border-top:1.5px solid var(--line);color:var(--soft)}

.progress-bar{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0);z-index:55}

@media (max-width:820px){
  .rail,.idx{display:none}
  .menu{gap:.8rem;font-size:.66rem}
  .menu a:first-child{display:none}
  .hero .giant{font-size:34vw}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:1rem}
  .ribbon{bottom:9rem}
  .manifest{min-height:110vh}
  .grid{grid-template-columns:1fr;gap:1rem}
  .svc.a,.svc.b,.svc.c,.svc.d{grid-column:1;margin-top:0}
  .svc h3{margin-top:2rem}
  .demo-sec{grid-template-columns:1fr;padding-top:10vh}
  .chat{height:30rem}
  .mega{font-size:22vw}
}
@media (prefers-reduced-motion:reduce){
  .grain,.live,.scroll i{animation:none}
  .ln,.reveal{transition:none;transform:none;opacity:1}
}