:root {
  --bg: #050608;
  --bg-2: #0d1117;
  --panel: rgba(255,255,255,.06);
  --panel-strong: rgba(255,255,255,.1);
  --text: #f4f7fb;
  --muted: #a9b3c3;
  --line: rgba(255,255,255,.14);
  --accent: #ff5a1f;
  --accent-2: #f4b000;
  --steel: #9eabb8;
  --max: 1180px;
  --radius: 24px;
  --shadow: 0 30px 90px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background: radial-gradient(circle at 15% 10%, rgba(255,90,31,.18), transparent 28rem), radial-gradient(circle at 90% 0%, rgba(244,176,0,.12), transparent 24rem), var(--bg); line-height:1.5; }
a { color:inherit; text-decoration:none; }
.container { width:min(calc(100% - 32px), var(--max)); margin-inline:auto; }
.site-header { position:fixed; top:0; inset-inline:0; z-index:50; border-bottom:1px solid transparent; transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease; }
.site-header.is-scrolled { background:rgba(5,6,8,.78); border-color:var(--line); backdrop-filter:blur(18px); }
.site-header__inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.02em; }
.brand__mark { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03)); border-radius:12px; color:var(--accent-2); font-family:"Roboto Mono", monospace; }
.site-nav { display:flex; align-items:center; gap:22px; color:var(--muted); font-size:14px; }
.site-nav a:hover { color:var(--text); }
.nav-cta { padding:10px 16px; border:1px solid var(--line); border-radius:999px; color:var(--text)!important; background:rgba(255,255,255,.06); }
.nav-toggle { display:none; }
.hero { position:relative; min-height:100svh; display:grid; align-items:center; overflow:hidden; padding-top:76px; }
.hero__bg { position:absolute; inset:0; pointer-events:none; }
.grid-lines { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom, black, transparent 85%); }
.orb { position:absolute; border-radius:999px; filter:blur(8px); opacity:.65; }
.orb--one { width:460px; height:460px; background:rgba(255,90,31,.16); right:-140px; top:140px; }
.orb--two { width:300px; height:300px; background:rgba(244,176,0,.12); left:-80px; bottom:120px; }
.hero__inner { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(320px,.76fr); gap:clamp(36px,6vw,86px); align-items:center; padding-block:76px 110px; }
.kicker { margin:0 0 18px; color:var(--accent-2); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:900; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:920px; font-size:clamp(46px,7.4vw,104px); line-height:.92; letter-spacing:-.075em; margin-bottom:28px; }
h2 { font-size:clamp(34px,4.8vw,68px); line-height:.95; letter-spacing:-.055em; margin-bottom:18px; }
h3 { font-size:22px; letter-spacing:-.03em; margin-bottom:12px; }
.hero__lead,.section-head p,.split__copy p,.cta p,.statement p { color:var(--muted); font-size:clamp(17px,1.6vw,21px); max-width:790px; }
.hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:999px; border:1px solid var(--line); font-weight:900; font-size:14px; }
.btn--primary { background:linear-gradient(135deg,var(--accent),#ff7c3f); color:#180703; border-color:transparent; }
.btn--ghost { background:rgba(255,255,255,.06); color:var(--text); }
.tech-card { border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035)),rgba(10,14,20,.84); box-shadow:var(--shadow); border-radius:var(--radius); overflow:hidden; }
.tech-card--main { padding:18px; transform:perspective(1200px) rotateY(-7deg) rotateX(3deg); }
.tech-card__top { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-family:"Roboto Mono",monospace; font-size:12px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.frame-cube { position:relative; height:360px; display:grid; place-items:center; margin:10px 0 16px; background:radial-gradient(circle at center,rgba(255,90,31,.25),transparent 44%),linear-gradient(135deg,rgba(255,255,255,.08),transparent); border-radius:18px; overflow:hidden; }
.frame-cube::before,.frame-cube::after { content:""; position:absolute; width:220px; height:220px; border:14px solid rgba(220,228,238,.88); transform:rotate(45deg) skew(-8deg,-8deg); box-shadow:0 0 0 1px rgba(0,0,0,.2), inset 0 0 0 2px rgba(0,0,0,.28); }
.frame-cube::after { transform:translate(48px,-38px) rotate(45deg) skew(-8deg,-8deg); border-color:rgba(255,122,63,.76); opacity:.82; }
.frame-cube span { position:absolute; width:14px; height:260px; background:linear-gradient(#f4f7fb,#838d9a); border-radius:999px; opacity:.72; }
.frame-cube span:nth-child(1){transform:translate(-120px,0) rotate(34deg)} .frame-cube span:nth-child(2){transform:translate(120px,0) rotate(34deg)} .frame-cube span:nth-child(3){transform:translate(0,-92px) rotate(124deg)} .frame-cube span:nth-child(4){transform:translate(0,92px) rotate(124deg)}
.spec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.spec-grid div { padding:14px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); }
.spec-grid strong { display:block; font-size:22px; } .spec-grid span { color:var(--muted); font-size:11px; }
.marquee { position:absolute; left:0; right:0; bottom:0; z-index:3; border-block:1px solid var(--line); background:rgba(255,255,255,.04); overflow:hidden; }
.marquee__track { display:flex; width:max-content; animation:scroll 28s linear infinite; }
.marquee span { padding:16px 28px; color:var(--muted); text-transform:uppercase; letter-spacing:.15em; font-size:12px; font-weight:900; }
@keyframes scroll { to{transform:translateX(-50%)} }
.section { padding-block:clamp(76px,10vw,140px); } .section--tight { padding-block:clamp(58px,7vw,100px); }
.section-head { max-width:880px; margin-bottom:44px; }
.statement { max-width:1040px; padding:clamp(32px,6vw,72px); border:1px solid var(--line); border-radius:calc(var(--radius) + 8px); background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035)); box-shadow:var(--shadow); }
.cards-grid { display:grid; gap:16px; } .cards-grid--four { grid-template-columns:repeat(4,minmax(0,1fr)); } .cards-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.system-card { min-height:310px; padding:24px; border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); border:1px solid var(--line); transition:transform .25s ease,border-color .25s ease,background .25s ease; display:block; }
.system-card:hover { transform:translateY(-6px); border-color:rgba(255,90,31,.55); background:linear-gradient(180deg,rgba(255,90,31,.16),rgba(255,255,255,.04)); }
.system-card__eyebrow,.system-card span { font-family:"Roboto Mono",monospace; color:var(--accent-2); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.system-card p { color:var(--muted); } .system-card span { display:inline-block; margin-top:20px; color:var(--steel); }
.section--steel { background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),#080b10; border-block:1px solid var(--line); }
.section--dark-radial { background:radial-gradient(circle at 20% 20%, rgba(255,90,31,.11), transparent 26rem); }
.split__inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,82px); align-items:center; } .split__inner--reverse { grid-template-columns:1fr 1fr; }
.industrial-panel { min-height:520px; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 3px,transparent 3px 36px); box-shadow:var(--shadow); overflow:hidden; position:relative; }
.industrial-panel__bar { position:absolute; inset:42px auto 42px 52px; width:46px; background:linear-gradient(#e8edf5,#7d8794); border-radius:999px; }
.industrial-panel__mesh { position:absolute; inset:62px 44px 120px 128px; border:12px solid rgba(232,237,245,.82); border-radius:12px; background-image:linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%); background-size:18px 18px; }
.industrial-panel__caption { position:absolute; left:24px; right:24px; bottom:24px; padding:20px; border:1px solid var(--line); background:rgba(5,6,8,.72); backdrop-filter:blur(14px); border-radius:18px; } .industrial-panel__caption strong{display:block;margin-bottom:6px}.industrial-panel__caption span{color:var(--muted)}
.feature-list { padding:0; margin:30px 0 0; list-style:none; display:grid; gap:14px; } .feature-list li { padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.045); color:var(--muted); } .feature-list li::before { content:"▰"; color:var(--accent); margin-right:10px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .tag-cloud span { padding:10px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.055); color:var(--muted); font-size:13px; }
.seo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .seo-card { padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.055); min-height:230px; } .seo-card span { font-family:"Roboto Mono",monospace; color:var(--accent-2); display:inline-block; margin-bottom:32px; } .seo-card p { color:var(--muted); }
.timeline { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,.04); } .timeline--four { grid-template-columns:repeat(4,1fr); }
.timeline__item { padding:30px; min-height:260px; border-right:1px solid var(--line); } .timeline__item:last-child{border-right:0}.timeline__item span{display:inline-flex;margin-bottom:56px;font-family:"Roboto Mono",monospace;color:var(--accent-2)}.timeline__item p{color:var(--muted)}
.architecture-card,.pitch-list { display:grid; gap:14px; } .architecture-card div,.pitch-list div { padding:20px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.055); } .architecture-card strong,.pitch-list strong { display:block; margin-bottom:8px; } .architecture-card p,.pitch-list p { color:var(--muted); margin-bottom:0; }
.cta__inner { padding:clamp(34px,6vw,76px); border-radius:calc(var(--radius) + 10px); background:radial-gradient(circle at 80% 20%,rgba(255,90,31,.22),transparent 25rem),linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035)); border:1px solid var(--line); box-shadow:var(--shadow); }
.sub-hero { position:relative; overflow:hidden; padding-top:76px; min-height:70svh; display:grid; align-items:center; } .sub-hero__inner { position:relative; z-index:2; padding-block:96px 70px; } .sub-hero h1 { max-width:980px; }
.mini-stats { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .mini-stats span { padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); font-size:13px; font-weight:800; }
.visual-stack { display:grid; gap:16px; } .mock-window { min-height:360px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.03)); position:relative; overflow:hidden; } .mock-window span { position:absolute; background:linear-gradient(#dce5ef,#7b8795); border-radius:999px; } .mock-window span:nth-child(1){width:18px;height:300px;left:70px;top:30px}.mock-window span:nth-child(2){height:18px;left:60px;right:60px;top:90px}.mock-window span:nth-child(3){height:18px;left:60px;right:60px;bottom:80px}.metric-card { padding:22px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.06); }.metric-card p{color:var(--muted);margin-bottom:0}
.workstation-visual { min-height:430px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(255,90,31,.14),rgba(255,255,255,.04)); position:relative; box-shadow:var(--shadow); } .workstation-visual div { position:absolute; background:linear-gradient(#edf2f8,#828c98); border-radius:12px; } .workstation-visual div:nth-child(1){height:22px;left:60px;right:60px;top:180px}.workstation-visual div:nth-child(2){width:22px;height:210px;left:90px;top:190px}.workstation-visual div:nth-child(3){width:22px;height:210px;right:90px;top:190px}.workstation-visual div:nth-child(4){height:110px;left:120px;right:120px;top:60px;background:rgba(255,255,255,.11);border:1px solid var(--line)}
.product-demo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .product-demo-grid article { padding:24px; min-height:260px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); } .product-demo-grid span { color:var(--accent-2); font-family:"Roboto Mono",monospace; font-size:12px; text-transform:uppercase; } .product-demo-grid p { color:var(--muted); } .product-demo-grid a { color:var(--accent-2); font-weight:800; }
.code-card { border:1px solid var(--line); border-radius:var(--radius); background:#050608; overflow:hidden; box-shadow:var(--shadow); } .code-card pre { margin:0; padding:32px; overflow:auto; color:#d8e2ee; font-family:"Roboto Mono",monospace; }
.architecture-map { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; } .architecture-map div { position:relative; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035)); min-height:220px; } .architecture-map div:not(:last-child)::after { content:"→"; position:absolute; right:-24px; top:50%; transform:translateY(-50%); color:var(--accent-2); font-size:28px; z-index:2; } .architecture-map strong,.architecture-map span { display:block; } .architecture-map span { color:var(--muted); margin-top:48px; }
.site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:14px; background:#050608; } .site-footer__grid { display:grid; grid-template-columns:1.5fr .8fr 1fr; gap:36px; padding-block:52px; } .site-footer h3 { color:var(--text); font-size:14px; text-transform:uppercase; letter-spacing:.12em; } .site-footer a:not(.brand) { display:block; margin-bottom:10px; color:var(--muted); } .brand--footer { color:var(--text); margin-bottom:18px; } .site-footer__bottom { display:flex; justify-content:space-between; gap:18px; border-top:1px solid var(--line); padding-block:20px; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; } .reveal.is-visible { opacity:1; transform:translateY(0); } .reveal--delay { transition-delay:.16s; }
@media (max-width:1080px){.cards-grid--four,.timeline--four,.product-demo-grid{grid-template-columns:repeat(2,1fr)}.seo-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){.hero__inner,.split__inner,.split__inner--reverse{grid-template-columns:1fr}.timeline,.architecture-map{grid-template-columns:1fr}.timeline__item{border-right:0;border-bottom:1px solid var(--line)}.timeline__item:last-child{border-bottom:0}.tech-card--main{transform:none}.architecture-map div:not(:last-child)::after{display:none}.site-footer__grid{grid-template-columns:1fr}}
@media (max-width:760px){.nav-toggle{display:inline-flex;color:var(--text);background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:999px;padding:10px 14px}.site-nav{position:absolute;top:72px;right:16px;left:16px;display:none;flex-direction:column;align-items:stretch;padding:18px;border:1px solid var(--line);background:rgba(5,6,8,.94);border-radius:18px;backdrop-filter:blur(18px)}.site-nav.is-open{display:flex}.cards-grid--four,.cards-grid--three,.spec-grid,.seo-grid,.product-demo-grid{grid-template-columns:1fr}.hero{min-height:auto}.frame-cube{height:280px}.site-footer__bottom{flex-direction:column}.sub-hero{min-height:auto}.sub-hero__inner{padding-block:76px 48px}}