:root{
  --bg:#0a0a0b; --bg2:#111114; --line:rgba(255,255,255,.08); --fg:#f4f4f5; --mut:#8a8a93;
  --or:#ff6a1a; --bl:#2f6bff; --ye:#ffd400; --red:#ff3b3b;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;overflow-anchor:none;overflow-x:clip;-webkit-text-size-adjust:100%}
body{position:relative;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.5}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60vw 40vw at 85% 0%,rgba(47,107,255,.10),transparent 60%),radial-gradient(40vw 30vw at 0% 30%,rgba(255,106,26,.05),transparent 60%);}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto;position:relative;z-index:1}
.dim{color:var(--mut)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:22px;display:block;width:max-content;max-width:100%}
h1,h2,h3{letter-spacing:-.035em;line-height:.98;font-weight:800}
h1{font-size:clamp(52px,8.6vw,124px)}
h2{font-size:clamp(36px,5.4vw,76px);max-width:16ch;margin-bottom:48px}
h2.big{font-size:clamp(42px,7vw,104px);max-width:14ch}
h3{font-size:20px;letter-spacing:-.02em;line-height:1.15}

/* nav */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);z-index:60;box-shadow:0 0 12px rgba(255,59,59,.7)}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;padding:16px max(24px,calc((100% - 1200px)/2));
  background:linear-gradient(var(--bg),rgba(10,10,11,.6) 70%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-weight:800;letter-spacing:-.04em;font-size:18px}.logo span{color:var(--or)}
.links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--mut)}
.links a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--fg);color:#0a0a0b;font-weight:600;font-size:15px;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-1px);background:#fff}.btn span{transition:transform .2s}.btn:hover span{transform:translateX(3px)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-sm{padding:9px 16px;font-size:13px}
.burger{display:none;margin-left:auto;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);position:relative}
.burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--fg);transition:transform .3s}
.burger i:first-child{top:16px}.burger i:last-child{top:23px}
.burger[aria-expanded=true] i:first-child{transform:translateY(3.5px) rotate(45deg)}.burger[aria-expanded=true] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:45;background:rgba(10,10,11,.96);backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;padding:0 28px;gap:6px;opacity:0;pointer-events:none;transition:opacity .3s}
.sheet a{font-size:40px;font-weight:800;letter-spacing:-.04em;padding:4px 0}
.sheet.open{opacity:1;pointer-events:auto}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;padding-top:110px;padding-bottom:60px}
.hero h1{margin-bottom:28px}
.lead{font-size:clamp(16px,1.4vw,19px);color:var(--mut);max-width:44ch;margin-bottom:34px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;width:max-content;max-width:100%;margin-bottom:46px}
.meta{display:flex;gap:28px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--mut);width:max-content;max-width:100%}
.meta b{color:var(--fg);font-weight:500}
.knot{position:relative;width:100%;aspect-ratio:1/1;max-height:640px}
.knot canvas{display:block;width:100%!important;height:100%!important}
.knot-fallback{display:none;position:absolute;inset:12%;border-radius:50%;background:conic-gradient(from 0deg,var(--bl),var(--ye),var(--bl));filter:blur(30px);animation:spin 8s linear infinite}
.knot.fallback .knot-fallback{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* sections */
.sec{padding:130px 0 40px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cap{position:relative;padding:28px 24px 30px;border-radius:20px;background:linear-gradient(180deg,#141417,#0f0f12);border:1px solid var(--line);min-height:260px;display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.cap:hover{border-color:rgba(47,107,255,.5);transform:translateY(-3px);box-shadow:0 20px 60px -20px rgba(47,107,255,.35)}
.cap .ico{font-style:normal;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.05);margin-bottom:auto;color:var(--ye);font-size:18px}
.cap h3{margin:40px 0 10px}.cap p{color:var(--mut);font-size:14.5px}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case{text-align:left;border-radius:22px;overflow:hidden;background:#111114;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .35s,border-color .3s}
.case:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.cover{position:relative;aspect-ratio:4/3;overflow:hidden}
.c1{background:radial-gradient(circle at 70% 70%,#ffd400 0,transparent 45%),radial-gradient(circle at 25% 25%,#2f6bff 0,transparent 55%),#0d1020}
.c2{background:conic-gradient(from 210deg at 60% 45%,#0a0a0b,#2f6bff,#22d3ee,#22d38a,#0a0a0b)}
.c3{background:radial-gradient(circle at 75% 35%,#22d38a 0,transparent 40%),linear-gradient(135deg,#0d5c4a,#0a0a0b 70%)}
.case-body{padding:22px 24px 26px}.case small,.post small{font-family:var(--mono);font-size:11.5px;color:var(--mut);display:block;margin-bottom:10px}
.case h3{font-size:22px;margin-bottom:14px}.case code{font-family:var(--mono);font-size:13px;color:var(--ye)}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:30px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:64px;width:max-content;animation:marq 30s linear infinite}
.track span{font-size:26px;font-weight:700;letter-spacing:-.02em;color:#6b6b74;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}
.quote{margin-top:56px;font-size:clamp(20px,2.4vw,30px);line-height:1.3;letter-spacing:-.02em;max-width:30ch;font-weight:500}
.quote cite{display:block;margin-top:18px;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--mut);letter-spacing:0}
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.body{color:var(--mut);font-size:17px;max-width:52ch}
.stats{display:grid;gap:14px}
.stat{padding:22px 24px;border-radius:18px;border:1px solid var(--line);background:#101013;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.stat b{font-size:clamp(40px,4.5vw,60px);letter-spacing:-.04em;font-weight:800}
.stat span{color:var(--mut);font-size:13px;text-align:right}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{padding:26px 24px 30px;border-radius:20px;border:1px solid var(--line);background:#0f0f12;transition:border-color .3s}
.post:hover{border-color:rgba(255,106,26,.5)}.post h3{margin-bottom:12px}.post p{color:var(--mut);font-size:14.5px}
.contact{padding-bottom:120px}
.mail{display:inline-block;font-size:clamp(18px,2vw,24px);border-bottom:1px solid var(--or);padding-bottom:4px;margin-bottom:48px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px}
.form textarea{grid-column:1/-1}.form .btn{width:max-content}
.form input,.form textarea{background:#111114;border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--fg);font:inherit;font-size:16px;outline:none;transition:border-color .2s;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--bl)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px 0 110px;border-top:1px solid var(--line);color:var(--mut);font-size:13px;font-family:var(--mono)}

/* ===== build system ===== */
.ub{opacity:0}
.vis{opacity:1}
.w{display:inline-block;white-space:nowrap}
.ch{opacity:0;position:relative}
.ch.on{opacity:1}
.ch.cur::after{content:"";position:absolute;right:-2px;top:8%;bottom:8%;width:2px;background:var(--bl);box-shadow:0 0 8px var(--bl)}
.tint{transition:filter 1.1s cubic-bezier(.2,.8,.2,1)}
.ub .tint,.tinting .tint{filter:grayscale(1) brightness(.35)}
.tinting.tinted .tint{filter:none}
.tint::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.tinted .tint::after{animation:sweep 1s ease forwards}
@keyframes sweep{to{transform:translateX(120%)}}

#stage{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.ghost{position:absolute;border:1px dashed rgba(255,255,255,.16);border-radius:6px;transition:opacity .35s;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.018) 0 6px,transparent 6px 12px)}
.ghost::before{content:attr(data-tag);position:absolute;top:-1px;left:-1px;transform:translateY(-100%);font:500 9.5px/1 var(--mono);color:rgba(255,255,255,.28);padding:0 0 4px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ghost.out{opacity:0}
.sel{position:absolute;border:1.5px solid var(--bl);clip-path:inset(0 100% 100% 0);transition:clip-path .32s cubic-bezier(.65,0,.35,1),opacity .35s;background:rgba(47,107,255,.04)}
.sel.in{clip-path:inset(-30px -60px -30px -30px)}
.sel.done{opacity:0}
.sel .h{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid var(--bl)}
.sel .tl{left:-5px;top:-5px}.sel .tr{right:-5px;top:-5px}.sel .bl{left:-5px;bottom:-5px}.sel .br{right:-5px;bottom:-5px}
.sel em{position:absolute;left:50%;bottom:-8px;transform:translate(-50%,100%);background:var(--bl);color:#fff;font:500 10.5px/1 var(--mono);font-style:normal;padding:4px 6px;border-radius:4px;white-space:nowrap}
.sel b{position:absolute;left:-1.5px;top:-6px;transform:translateY(-100%);color:var(--bl);font:500 10.5px/1 var(--mono);white-space:nowrap}
.guide{position:absolute;opacity:.9;transition:opacity .5s, transform .45s cubic-bezier(.65,0,.35,1)}
.guide.hz{left:0;right:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 6px rgba(255,59,59,.8)}
.guide.vt{width:1px;background:var(--bl);transform:scaleY(0);transform-origin:50% 0;box-shadow:0 0 6px rgba(47,107,255,.8)}
.guide.go{transform:none}.guide.fade{opacity:0}
.agent{position:absolute;left:0;top:0;opacity:0;will-change:transform;transition-property:transform,opacity;transition-duration:500ms,250ms;transition-timing-function:cubic-bezier(.22,1,.36,1),ease}
.agent.on{opacity:1}
.agent svg{display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.agent span{position:absolute;left:13px;top:15px;background:var(--c);color:#0a0a0b;font:600 10px/1 var(--mono);padding:3px 6px;border-radius:999px;white-space:nowrap}

/* intro */
#intro{position:fixed;inset:0;z-index:90;background:#050506;transition:opacity .7s ease,clip-path .8s cubic-bezier(.65,0,.35,1);clip-path:inset(0)}
#intro.gone{opacity:0;clip-path:inset(0 0 100% 0);pointer-events:none}
#intro .spark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--ye);font-size:26px;text-shadow:0 0 18px var(--ye),0 0 40px rgba(255,212,0,.6);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.35) rotate(45deg);opacity:.7}}
.streak{position:absolute;height:3px;border-radius:3px;animation:drift var(--t) ease-in-out infinite alternate,flick 1.1s steps(2) infinite;opacity:.9}
@keyframes drift{to{transform:translateY(var(--dy)) translateX(var(--dx))}}
@keyframes flick{50%{opacity:.35}}

/* toolbar */
#toolbar{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:10px;padding:7px 7px 7px 16px;border-radius:999px;
  background:rgba(20,20,24,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 40px rgba(0,0,0,.5);font:500 12px/1 var(--mono);color:#c9c9d1;white-space:nowrap;transition:padding .3s}
#toolbar .spin{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);border-top-color:var(--ye);animation:spin .7s linear infinite;display:none}
#toolbar.scanning .spin{display:block}#toolbar.scanning .dot{display:none}
#toolbar .dot{width:7px;height:7px;border-radius:50%;background:var(--or);box-shadow:0 0 10px var(--or)}
#toolbar.busy .dot{animation:blink .6s infinite}
@keyframes blink{50%{opacity:.3}}
.tb-bar{width:56px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.tb-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bl),var(--ye));transition:width .4s}
#toolbar button{border-radius:999px;padding:8px 13px;font:600 12px/1 var(--sans)}
#rebuild{background:var(--fg);color:#0a0a0b}
#tb-min{background:rgba(255,255,255,.08);padding:8px 11px!important}
#toolbar.min #tb-text,#toolbar.min .tb-bar,#toolbar.min #rebuild{display:none}
#toolbar.min{padding:7px 7px 7px 14px}

/* modal + toast */
dialog{margin:auto;width:min(760px,calc(100% - 28px));max-height:88vh;overflow:auto;background:#111114;color:var(--fg);border:1px solid var(--line);border-radius:24px;padding:0}
dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
dialog[open]{animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.98)}}
dialog .cover{aspect-ratio:21/9}
dialog small{display:block;font-family:var(--mono);font-size:12px;color:var(--or);margin:26px 28px 8px;text-transform:uppercase;letter-spacing:.14em}
dialog h3{font-size:clamp(26px,4vw,38px);margin:0 28px 24px}
.cm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:0 28px 32px}
.cm-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:8px;font-weight:500}
.cm-grid p{font-size:14.5px;color:#d4d4d8}
dialog .x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);font-size:22px;z-index:2}
#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--fg);color:#0a0a0b;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;opacity:0;transition:.35s;z-index:96;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* responsive */
@media (max-width:1000px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .cases,.posts{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr}
}
@media (max-width:767px){
  .wrap{width:calc(100% - 36px)}
  .links,.nav-cta{display:none}.burger{display:block}
  .nav{padding:12px 18px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:96px;gap:8px}
  .hero h1{font-size:clamp(50px,15vw,72px);margin-bottom:20px}
  .lead{margin-bottom:26px}.ctas{margin-bottom:26px}
  .meta{gap:14px 20px;font-size:11px}
  .knot{height:260px;aspect-ratio:auto;max-width:360px;margin:0 auto}
  .sec{padding-top:90px}
  h2{margin-bottom:32px}
  .grid4,.cases,.posts,.cm-grid,.form{grid-template-columns:1fr}
  .cap{min-height:0}.cap h3{margin-top:26px}
  .track span{font-size:20px}.track{gap:40px}
  .stat b{font-size:44px}
  #toolbar{gap:8px;padding:6px 6px 6px 12px;font-size:11px}
  #rebuild span{display:none}.tb-bar{width:34px}
  .sel em{font-size:9.5px}.agent span{font-size:9px;padding:2px 5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track,.knot-fallback,#intro .spark{animation:none}
}