:root {
  --bg: #07100f;
  --bg-soft: #0b1514;
  --panel: #101c1a;
  --panel-2: #142320;
  --line: rgba(205, 255, 231, 0.14);
  --line-strong: rgba(205, 255, 231, 0.24);
  --text: #f4f7f3;
  --muted: #98aaa4;
  --lime: #b9ff5a;
  --mint: #78f2c2;
  --purple: #9f8cff;
  --orange: #ff9c59;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 100; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' 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='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.section-shell { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 76px; display: flex; align-items: center; gap: 50px; padding: 0 max(24px, calc((100vw - var(--max)) / 2)); background: rgba(7, 16, 15, .78); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 730; letter-spacing: -.03em; font-size: 20px; white-space: nowrap; }
.brand b { color: var(--lime); font-weight: 750; }
.brand-mark { width: 29px; height: 29px; display: inline-flex; align-items: center; gap: 3px; transform: skewX(-18deg); }
.brand-mark i { display: block; width: 7px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 16px rgba(185,255,90,.35); }
.brand-mark i:nth-child(1) { height: 15px; opacity: .55; }.brand-mark i:nth-child(2) { height: 24px; }.brand-mark i:nth-child(3) { height: 19px; opacity: .8; }
.nav { display: flex; gap: 34px; margin-right: auto; }
.nav a { color: #b7c3bf; font-size: 14px; transition: .2s; }.nav a:hover { color: var(--lime); }
.header-cta { padding: 10px 16px; border: 1px solid var(--line-strong); font-size: 13px; border-radius: 4px; transition: .2s; }.header-cta span { color: var(--lime); margin-left: 8px; }.header-cta:hover { border-color: var(--lime); background: rgba(185,255,90,.06); }
.menu-button { display: none; background: none; border: 0; width: 38px; height: 38px; padding: 9px; }.menu-button span { display: block; height: 1px; background: white; margin: 6px 0; }

.hero { min-height: 780px; padding-top: 150px; display: grid; grid-template-columns: 1.02fr .98fr; gap: 58px; align-items: center; position: relative; }
.hero::before { content: ""; position: absolute; width: 600px; height: 600px; left: -370px; top: 120px; border: 1px solid rgba(185,255,90,.1); border-radius: 50%; box-shadow: 0 0 120px rgba(57, 255, 168, .035); }
.eyebrow,.section-kicker { color: var(--mint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .16em; font-weight: 700; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid rgba(120,242,194,.24); background: rgba(120,242,194,.05); border-radius: 3px; }.eyebrow span { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
h1,h2 { margin: 0; letter-spacing: -.055em; line-height: 1.04; font-weight: 560; }
h1 { font-size: clamp(58px, 6.5vw, 92px); margin-top: 28px; } h1 em,h2 em { color: var(--lime); font-style: normal; }
.hero-lead { max-width: 590px; margin: 30px 0 0; color: #aebcb7; font-size: 17px; line-height: 1.85; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 49px; padding: 0 20px; border-radius: 3px; font-size: 14px; font-weight: 650; transition: transform .2s, box-shadow .2s, border-color .2s; }.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--lime); color: #0c140d; box-shadow: 0 12px 40px rgba(185,255,90,.12); }.button.primary:hover { box-shadow: 0 16px 44px rgba(185,255,90,.23); }
.button.secondary { border: 1px solid var(--line-strong); color: #d9e2df; }.button.secondary:hover { border-color: rgba(185,255,90,.6); }
.hero-proof { display: flex; gap: 0; margin-top: 56px; padding-top: 23px; border-top: 1px solid var(--line); }.hero-proof div { min-width: 150px; padding-right: 30px; margin-right: 30px; border-right: 1px solid var(--line); }.hero-proof div:last-child { border: 0; margin: 0; }.hero-proof strong,.hero-proof span { display: block; }.hero-proof strong { font-size: 13px; }.hero-proof span { color: var(--muted); font-size: 11px; margin-top: 3px; }

.hero-visual { min-height: 600px; position: relative; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; inset: 4% -12%; background-image: linear-gradient(rgba(120,242,194,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,242,194,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle, black, transparent 67%); transform: perspective(600px) rotateX(55deg) rotateZ(-8deg); }
.orbit { position: absolute; border: 1px solid rgba(185,255,90,.18); border-radius: 50%; }.orbit-one { width: 490px; height: 490px; animation: spin 28s linear infinite; }.orbit-two { width: 370px; height: 370px; border-style: dashed; animation: spin 22s linear reverse infinite; }.orbit::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); top: 12%; left: 20%; box-shadow: 0 0 18px var(--lime); }
.glow-core { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(103,255,202,.15), rgba(103,255,202,.03) 38%, transparent 70%); filter: blur(2px); }
.code-window { width: min(490px, 93%); position: relative; z-index: 3; overflow: hidden; background: rgba(11,20,19,.94); border: 1px solid rgba(158,255,218,.26); border-radius: 8px; box-shadow: 0 45px 100px rgba(0,0,0,.5), inset 0 0 60px rgba(88,255,190,.02); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); }
.window-bar { height: 45px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line); color: #7f918b; font: 10px ui-monospace, monospace; }.window-dots { display: flex; gap: 6px; }.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #34423e; }.live { justify-self: end; color: var(--mint); }.live i,.system-status i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
pre { margin: 0; overflow: auto; } .code-window pre { padding: 25px 23px; min-height: 270px; } code { font: 12px/1.85 ui-monospace, SFMono-Regular, Menlo, monospace; color: #d9e3df; }.code-muted { color: #667872; }.code-purple { color: #c4b9ff; }.code-green { color: #aef0ca; }
.response-row { display: flex; gap: 25px; border-top: 1px solid var(--line); padding: 12px 17px; color: #758882; font: 10px ui-monospace, monospace; }.response-row span:first-child { color: var(--mint); margin-right: auto; }.response-row i { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--mint); margin-right:5px; }
.model-pill { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: rgba(15,27,25,.94); border: 1px solid var(--line-strong); border-radius: 5px; box-shadow: 0 16px 35px rgba(0,0,0,.35); font-size: 11px; animation: float 5s ease-in-out infinite; }.model-pill i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 4px; background: #eae6ff; color: #17151d; font-style: normal; font-weight: 800; }.model-pill b { color: var(--mint); font: 8px ui-monospace,monospace; margin-left: 7px; }.pill-a { top: 13%; right: 1%; }.pill-b { bottom: 18%; left: 0; animation-delay: -1.5s; }.pill-c { bottom: 8%; right: 9%; animation-delay: -3s; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes float { 50% { transform: translateY(-8px); } }

.signal-strip { border-block: 1px solid var(--line); min-height: 76px; display: flex; align-items: center; justify-content: center; gap: clamp(30px,5vw,85px); color: #7f918b; font: 10px ui-monospace,monospace; letter-spacing: .1em; white-space: nowrap; overflow: hidden; }.signal-strip div { display: flex; gap: 9px; align-items: center; }.signal-strip span { color: var(--mint); font-size: 15px; }
.models,.features,.integration,.cta-section { padding-top: 132px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }.section-heading h2 { font-size: clamp(42px,5vw,68px); margin-top: 13px; }.section-heading > p { max-width: 430px; color: var(--muted); font-size: 14px; margin: 0 0 5px; }
.model-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.model-card { min-height: 250px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(18,31,29,.95), rgba(11,20,19,.95)); position: relative; overflow: hidden; transition: .25s; }.model-card::after { content:""; position:absolute; width:140px; height:140px; border-radius:50%; right:-80px; top:-80px; border:1px solid rgba(185,255,90,.08); }.model-card:hover { transform: translateY(-4px); border-color: rgba(185,255,90,.38); }.model-card.featured { background: linear-gradient(145deg, rgba(25,43,37,.95), rgba(12,23,21,.96)); }.card-top { display: flex; align-items: start; justify-content: space-between; }.model-logo { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 7px; font-weight: 750; }.model-logo.claude { color: var(--orange); }.model-logo.gemini { color: #8cbcff; font-size: 24px; }.model-logo.deepseek { color: #8faeff; }.model-logo.qwen { color: #ca9cff; }.status { color: var(--mint); font: 8px ui-monospace,monospace; text-transform: uppercase; }.status::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--mint); margin-right:5px; box-shadow:0 0 8px var(--mint); }.model-card h3 { font-size: 21px; margin: 34px 0 2px; }.model-card p { margin: 0; color: var(--muted); font-size: 12px; }.tags { display:flex; gap:6px; margin-top:auto; }.tags span { padding: 4px 6px; border:1px solid var(--line); color:#789087; font:7px ui-monospace,monospace; }.more-card { align-items:center; justify-content:center; text-align:center; }.more-card h3 { margin:16px 0 0; }.more-card a { color:var(--lime); font-size:11px; margin-top:22px; }.plus-ring { width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(185,255,90,.35); border-radius:50%; color:var(--lime); font-size:25px; }

.feature-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }.feature-card { min-height:310px; padding:27px; border:1px solid var(--line); background:rgba(11,21,19,.7); position:relative; }.feature-index { font: 9px ui-monospace,monospace; color:#64766f; }.feature-icon { height:105px; margin:28px 0 8px; position:relative; }.route-icon { display:flex; align-items:center; justify-content:center; gap:23px; }.route-icon::before,.route-icon::after { content:""; position:absolute; width:100px; height:1px; background:linear-gradient(90deg,transparent,var(--mint),transparent); }.route-icon i { width:18px; height:18px; border:1px solid var(--mint); transform:rotate(45deg); background:rgba(120,242,194,.08); box-shadow:0 0 20px rgba(120,242,194,.08); }.route-icon i:nth-child(2){width:30px;height:30px;background:rgba(185,255,90,.14);border-color:var(--lime)}
.pulse-icon { display:grid; place-items:center; }.pulse-icon::before,.pulse-icon::after,.pulse-icon i { content:""; position:absolute; border-radius:50%; border:1px solid rgba(120,242,194,.22); }.pulse-icon::before { width:95px;height:95px; }.pulse-icon::after { width:62px;height:62px; }.pulse-icon i { width:19px;height:19px;background:var(--mint);box-shadow:0 0 35px var(--mint); }
.chart-icon { display:flex; align-items:end; justify-content:center; gap:8px; }.chart-icon i { width:13px; background:linear-gradient(var(--lime),rgba(185,255,90,.1)); border-top:1px solid var(--lime); }.chart-icon i:nth-child(1){height:27px}.chart-icon i:nth-child(2){height:49px}.chart-icon i:nth-child(3){height:72px}.chart-icon i:nth-child(4){height:93px}
.feature-card h3 { font-size:19px; margin:20px 0 10px; }.feature-card p { color:var(--muted); font-size:13px; margin:0; }.feature-card.wide { grid-column:1/-1; min-height:230px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:65px; padding:37px 48px; background:linear-gradient(110deg,rgba(18,34,30,.95),rgba(12,23,21,.8)); }.feature-card.wide h3 { font-size:28px; }.feature-card.wide p { max-width:560px; }.terminal-mini { border:1px solid var(--line); background:#09110f; padding:18px 20px; }.terminal-mini div { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font:10px ui-monospace,monospace; }.terminal-mini div:last-child {border:0}.terminal-mini span{color:#62736e}.terminal-mini b{font-weight:500;color:#cad6d2}.terminal-mini .green{color:var(--mint)}

.integration-panel { display:grid; grid-template-columns:.8fr 1.2fr; border:1px solid var(--line); background:linear-gradient(135deg,#111e1b,#0a1312); }.integration-copy { padding:55px; border-right:1px solid var(--line); }.integration-copy h2 { font-size:44px; margin:10px 0 35px; }.integration-copy ol { list-style:none; padding:0;margin:0; }.integration-copy li { display:flex; gap:17px; padding:18px 0; border-top:1px solid var(--line); }.integration-copy li>span { display:grid; place-items:center; flex:0 0 28px; height:28px; border:1px solid rgba(185,255,90,.38); color:var(--lime); border-radius:50%; font:10px ui-monospace,monospace; }.integration-copy strong{font-size:14px}.integration-copy li p{color:var(--muted);font-size:11px;margin:1px 0 0}.integration-code { min-width:0; position:relative; padding-top:48px; }.code-tabs { position:absolute; top:0;left:0;right:0;height:48px;display:flex;border-bottom:1px solid var(--line); }.code-tabs button { padding:0 23px;border:0;border-right:1px solid var(--line);background:transparent;color:#6d817a;font:9px ui-monospace,monospace;cursor:pointer}.code-tabs button.active{color:var(--lime);background:rgba(185,255,90,.035)}.integration-code pre { padding:39px 38px; min-height:340px; }.copy-button{position:absolute;right:15px;top:62px;background:#172622;color:#99aba5;border:1px solid var(--line);padding:6px 10px;border-radius:3px;font-size:10px;cursor:pointer}
.cta-section { padding-bottom:110px; }.cta-panel { min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; border:1px solid rgba(185,255,90,.27); background:radial-gradient(circle at 50% 100%,rgba(185,255,90,.16),transparent 45%),#0d1916; }.cta-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(185,255,90,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(185,255,90,.045) 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(transparent,black,transparent)}.cta-panel>*:not(.cta-grid){position:relative}.cta-panel h2{font-size:clamp(42px,5vw,66px);margin:16px 0 12px}.cta-panel>p:not(.section-kicker){color:var(--muted);font-size:14px}.button.light{margin-top:22px;padding-inline:25px}
.site-footer { padding:50px 0 25px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:40px}.footer-brand p{color:var(--muted);font-size:12px}.footer-links{display:flex;justify-content:flex-end;gap:90px}.footer-links div{display:flex;flex-direction:column;gap:8px}.footer-links strong{font-size:11px;margin-bottom:8px}.footer-links a{color:var(--muted);font-size:11px}.footer-links a:hover{color:var(--lime)}.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:28px;border-top:1px solid var(--line);color:#53645e;font:9px ui-monospace,monospace}.system-status{color:#6f877e}
.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s ease; }.reveal.visible {opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}

@media (max-width: 960px) {
  .site-header{gap:20px}.nav{gap:18px}.hero{grid-template-columns:1fr;padding-top:140px}.hero-copy{max-width:720px}.hero-visual{min-height:560px}.model-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:1fr 1fr}.feature-card:nth-child(3){grid-column:1/-1}.integration-panel{grid-template-columns:1fr}.integration-copy{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width: 700px) {
  .section-shell{width:min(100% - 30px,var(--max))}.site-header{height:66px;padding:0 16px}.nav,.header-cta{display:none}.menu-button{display:block;margin-left:auto}.site-header.open .nav{display:flex;position:absolute;top:66px;left:0;right:0;padding:20px;flex-direction:column;background:#0a1412;border-bottom:1px solid var(--line)}
  .hero{padding-top:118px;min-height:auto;gap:25px}.hero::before{display:none}h1{font-size:52px}.hero-lead{font-size:15px}.hero-actions{flex-direction:column}.button{width:100%}.hero-proof{overflow-x:auto}.hero-proof div{min-width:125px;padding-right:18px;margin-right:18px}.hero-visual{min-height:460px}.orbit-one{width:390px;height:390px}.orbit-two{width:300px;height:300px}.code-window{transform:none}.model-pill{display:none}.signal-strip{justify-content:flex-start;padding:0 20px;gap:35px}
  .models,.features,.integration,.cta-section{padding-top:90px}.section-heading{align-items:start;flex-direction:column;margin-bottom:30px}.section-heading h2{font-size:43px}.model-grid,.feature-grid{grid-template-columns:1fr}.feature-card:nth-child(3){grid-column:auto}.feature-card.wide{grid-column:auto;grid-template-columns:1fr;padding:30px;gap:30px}.integration-copy{padding:35px 25px}.integration-code pre{padding:35px 20px;min-height:360px}.integration-code code{font-size:10px}.cta-panel{padding:45px 25px;min-height:390px}.site-footer{grid-template-columns:1fr}.footer-links{justify-content:flex-start;gap:50px}.footer-bottom{flex-direction:column;gap:10px}.cta-section{padding-bottom:80px}
}

