:root{--bg:#05070d;--panel:#0b0f19cc;--line:#ffffff14;--text:#f5f4f1;--muted:#9ba0b4;--purple:#7b4dff;--blue:#21b8ff;--cyan:#7ee7ff}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 80% 5%,#17264f 0%,transparent 34%),radial-gradient(circle at 25% 20%,#1b1148 0%,transparent 34%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.01em;overflow-x:hidden}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.14;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");mix-blend-mode:screen}
.nav{position:fixed;top:0;left:0;right:0;height:84px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 44px;background:linear-gradient(#05070de8,#05070d00);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:white;font-size:25px;letter-spacing:.42em}.glyph{width:46px;height:46px;border:3px solid var(--purple);border-radius:50%;display:inline-block;position:relative;box-shadow:0 0 28px #6c4cff80}.glyph i{position:absolute;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--purple));top:12px;left:12px}.glyph b{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--purple);right:-4px;top:2px;box-shadow:0 0 16px var(--purple);transform-origin:-18px 15px;animation:logo-orbit 40s linear infinite}
.nav nav{display:flex;gap:28px;align-items:center}.nav a{color:#d7d8e5;text-decoration:none;font-size:14px}.nav-cta{border:1px solid var(--line);padding:12px 18px;border-radius:999px;background:#ffffff08}
.hero{min-height:100vh;padding:190px 8vw 90px;position:relative;display:grid;align-content:center}.hero-bg{position:absolute;inset:0;overflow:hidden;opacity:.8}.arch{position:absolute;border-radius:50%;border:1px solid #ffffff1f;transform:rotate(-12deg)}.arch-one{width:980px;height:330px;right:-170px;top:90px;background:linear-gradient(180deg,#ffffff16,#ffffff03);box-shadow:inset 0 0 60px #fff1}.arch-two{width:660px;height:160px;right:130px;top:280px;background:#ffffff0c}.orbital-large{position:absolute;right:16vw;top:18vh;width:150px;height:150px;border:2px solid #7657ff;border-radius:50%;box-shadow:0 0 45px #7657ff66}.orbital-large span{position:absolute;right:9px;top:8px;width:22px;height:22px;background:#7657ff;border-radius:50%;box-shadow:0 0 28px #7657ff}
.kicker,.eyebrow{color:#a9a3ff;font-size:13px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:24px}h1{font-size:clamp(58px,8vw,132px);line-height:.92;margin:0;max-width:1120px;font-weight:500;letter-spacing:-.07em}.lede{font-size:clamp(20px,2vw,30px);line-height:1.45;color:#c6c8d3;max-width:760px;margin:34px 0 38px}.actions{display:flex;gap:16px;margin-bottom:60px}.button{padding:16px 24px;border-radius:999px;text-decoration:none;color:white;border:1px solid var(--line)}.primary{background:linear-gradient(135deg,var(--purple),#4d9fff);box-shadow:0 0 44px #654cff66}.ghost{background:#ffffff08}
.terminal{width:min(720px,100%);border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#0b1020cc,#070a12dd);box-shadow:0 30px 120px #000}.terminal-top{height:52px;display:flex;align-items:center;gap:9px;padding:0 18px;border-bottom:1px solid var(--line);color:#8f94a8;font-size:12px;letter-spacing:.18em}.terminal-top span{width:10px;height:10px;border-radius:50%;background:#ffffff22}.terminal-top strong{margin-left:12px;font-weight:500}.log{padding:26px 28px;font-family:"SF Mono",ui-monospace,monospace;color:#dfe3ff}.log p{margin:14px 0}.log time{color:#7ee7ff;margin-right:22px}
.statement{padding:150px 8vw;text-align:center}.statement p{font-size:28px;color:#a8adbd}.statement h2{font-size:clamp(44px,6vw,92px);font-weight:400;margin:0;letter-spacing:-.06em}
.flow{padding:100px 8vw;text-align:center}.flow-card{margin:auto;max-width:1100px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}.flow-card span{padding:18px 26px;border:1px solid var(--line);border-radius:999px;background:#ffffff08}.flow p{font-size:30px;color:#d4d6e3;margin:54px auto 0;max-width:850px}
.primitives{padding:100px 8vw;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.primitives article{min-height:270px;border:1px solid var(--line);border-radius:28px;padding:28px;background:#ffffff06}.primitives span{color:#756cff}.primitives h3{font-size:26px;margin:60px 0 16px}.primitives p{color:#aeb3c4;line-height:1.55}
.demo{padding:120px 8vw;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.demo h2,.final h2{font-size:clamp(42px,5vw,82px);line-height:1;letter-spacing:-.06em;font-weight:420;margin:0 0 26px}.demo p,.final p{font-size:21px;line-height:1.5;color:#b6bac8}.artifact-stack{display:grid;gap:18px}.artifact{border:1px solid var(--line);border-radius:26px;padding:26px;background:linear-gradient(180deg,#ffffff0b,#ffffff04)}.artifact span{font-size:12px;color:#9a7cff;text-transform:uppercase;letter-spacing:.12em}.artifact h4{font-size:22px;margin:14px 0 8px}.artifact p{font-size:15px;margin:0;color:#8e93a7}
.final{padding:140px 8vw 180px;text-align:center}.final em{font-style:normal;color:#8d6cff;text-shadow:0 0 10px rgba(123,92,255,.45),0 0 28px rgba(123,92,255,.38),0 0 70px rgba(123,92,255,.22),0 0 140px rgba(123,92,255,.10)}
@media(max-width:900px){.nav{padding:0 22px}.nav nav{display:none}.brand{font-size:18px}.primitives,.demo{grid-template-columns:1fr}h1{font-size:56px}}

/* Material motion */
.button{cursor:pointer;transition:transform 250ms ease,filter 250ms ease,box-shadow 250ms ease}
.button:hover{transform:translateY(-3px);filter:brightness(1.06)}
.button.primary:hover{box-shadow:0 8px 54px #654cff80}
.button.ghost:hover{box-shadow:0 8px 34px #654cff26}

.nav nav a{position:relative;isolation:isolate;transition:color 250ms ease,text-shadow 250ms ease}
.nav nav a:not(.nav-cta)::before{position:absolute;inset:-9px -12px;z-index:-1;border:1px solid transparent;border-radius:999px;background:#ffffff00;content:"";transition:background 250ms ease,border-color 250ms ease,box-shadow 250ms ease}
.nav nav a:not(.nav-cta):hover::before{border-color:#ffffff0b;background:#ffffff0a;box-shadow:0 0 22px #7657ff1f}
.nav nav a:hover{color:#f5f4ff;text-shadow:0 0 16px #9a7cff4d}
.nav-cta{transition:transform 250ms ease,background 250ms ease,border-color 250ms ease,box-shadow 250ms ease,color 250ms ease!important}
.nav-cta:hover{transform:translateY(-3px);border-color:#ffffff24;background:#ffffff0d;box-shadow:0 8px 30px #7657ff26}

.terminal,.primitives article,.artifact{position:relative;transition:transform 300ms ease,border-color 300ms ease,box-shadow 300ms ease,backdrop-filter 300ms ease,-webkit-backdrop-filter 300ms ease}
.primitives article,.artifact{overflow:hidden}
.terminal:hover,.primitives article:hover,.artifact:hover{transform:translateY(-4px);border-color:#ffffff26;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 28px 80px #00000066,0 16px 46px #654cff1f}
.terminal::after,.primitives article::after,.artifact::after{position:absolute;inset:-50% auto -50% -55%;width:24%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff0d,transparent);content:"";transform:skewX(-16deg);animation:glass-light 26s ease-in-out infinite}
.primitives article:nth-child(2)::after,.artifact:nth-child(2)::after{animation-delay:2s}
.primitives article:nth-child(3)::after,.artifact:nth-child(3)::after{animation-delay:4s}
.primitives article:nth-child(4)::after{animation-delay:6s}
.primitives article:nth-child(5)::after{animation-delay:8s}

.hero-bg{animation:atmosphere-drift 16s ease-in-out infinite alternate}
.log p{transition:opacity 320ms ease}
.log p.is-changing{opacity:0}

.reveal{opacity:0;transform:translateY(12px);transition:opacity 500ms ease,transform 500ms ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

@keyframes atmosphere-drift{
  from{opacity:.78;transform:translate3d(-3px,2px,0)}
  to{opacity:.82;transform:translate3d(4px,-2px,0)}
}

@keyframes logo-orbit{
  to{transform:rotate(360deg)}
}

@keyframes glass-light{
  0%,72%{left:-55%;opacity:0}
  76%{opacity:.22}
  88%{opacity:.16}
  92%,100%{left:135%;opacity:0}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glyph b,.hero-bg,.terminal::after,.primitives article::after,.artifact::after{animation:none}
  .button,.nav nav a,.nav nav a::before,.nav-cta,.terminal,.primitives article,.artifact,.log p,.reveal{transition:none}
  .button:hover,.nav-cta:hover,.terminal:hover,.primitives article:hover,.artifact:hover{transform:none}
  .reveal,.reveal.is-visible{opacity:1;transform:none}
}