:root { color-scheme: dark; --bg:#05070a; --surface:rgba(13,18,24,.78); --surface-strong:rgba(17,24,31,.94); --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.24); --text:#f6f8f9; --muted:#9ca7b1; --accent:#3cddc1; --gold:#ffd166; --max:1180px; }
* { box-sizing:border-box; }
html, body { width:100%; min-height:100%; }
body { margin:0; overflow:hidden; background:var(--bg); color:var(--text); font-family:Manrope,"Noto Sans SC",sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
button, a { font:inherit; }
::selection { background:var(--accent); color:#04130f; }
#space-canvas { position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; background:#030509; }
#meteor-layer { position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.meteor { position:absolute; left:var(--start-x); top:var(--start-y); width:var(--length); height:1px; opacity:0; background:linear-gradient(90deg,transparent,hsla(var(--hue),90%,75%,.92)); box-shadow:0 0 8px hsla(var(--hue),90%,70%,.42); transform:rotate(23deg); animation:meteor-flight var(--duration) linear var(--delay) infinite; will-change:transform,opacity; }
.meteor::after { content:""; position:absolute; right:-1px; top:-1px; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 9px hsla(var(--hue),90%,78%,.85); }
.page-vignette { position:fixed; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(2,4,7,.26),transparent 30%,transparent 70%,rgba(2,4,7,.44)); }
.page-vignette::before { content:""; position:absolute; inset:12% 20%; background:radial-gradient(ellipse at center,rgba(60,221,193,.12),rgba(30,105,110,.055) 36%,transparent 70%); animation:nebula-pulse 4.8s ease-in-out infinite alternate; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; height:68px; padding:0 max(24px,calc((100vw - var(--max))/2)); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(255,255,255,.09); background:rgba(5,7,10,.67); backdrop-filter:blur(18px); }
.brand { width:max-content; font-size:15px; font-weight:800; }
.site-nav { display:flex; gap:34px; color:#9aa4ad; font-size:13px; }
.site-nav a { position:relative; transition:color .2s ease; }
.site-nav a:hover, .site-nav a.active { color:#fff; }
.site-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-24px; height:2px; background:var(--accent); }
.header-download { justify-self:end; display:inline-flex; align-items:center; gap:7px; color:#dfe5e8; font-size:13px; font-weight:700; }
.header-download svg { width:16px; }
.screen-page { position:relative; z-index:2; min-height:100svh; padding:92px 24px 76px; }
.home-page { position:relative; display:grid; place-items:center; }
.home-hero { width:min(980px,100%); text-align:center; transform:translateY(-18px); }
.eyebrow, .section-index { margin:0 0 16px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:0; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; }
.eyebrow span { width:28px; height:1px; background:var(--accent); }
.home-hero h1 { margin:0; font-size:clamp(66px,9vw,132px); line-height:.92; font-weight:800; letter-spacing:0; text-shadow:0 18px 60px rgba(0,0,0,.72); }
.hero-lead { margin:28px 0 0; font-size:clamp(22px,2.8vw,36px); font-weight:700; }
.hero-copy { width:min(700px,100%); margin:14px auto 0; color:#b6c0c8; font-size:15px; }
.hero-actions { margin-top:30px; display:flex; justify-content:center; gap:12px; }
.button { min-height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:6px; font-size:14px; font-weight:800; transition:transform .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease; }
.button:hover { transform:translateY(-2px); }
.button svg { width:18px; }
.button-primary { background:var(--accent); color:#051a16; box-shadow:0 14px 48px rgba(60,221,193,.22); }
.button-primary:hover { background:#6cebd6; }
.button-secondary { border-color:var(--line-strong); background:rgba(8,12,17,.48); backdrop-filter:blur(12px); }
.button-secondary:hover { border-color:rgba(255,255,255,.42); }
.button[aria-disabled="true"] { pointer-events:none; opacity:.58; }
.tool-rail { position:absolute; left:max(24px,calc((100vw - var(--max))/2)); right:max(24px,calc((100vw - var(--max))/2)); bottom:79px; padding-top:14px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.16); color:#87919a; font-size:10px; }
.tool-rail b { color:#dce3e6; }
.tool-rail code { color:#c9d2d7; }
.tool-rail span:first-child { color:var(--accent); }
.tool-rail i { width:6px; height:6px; display:inline-block; margin-right:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); animation:pulse 1.8s ease-in-out infinite; }
.content-page { display:grid; place-items:center; }
.page-content { width:min(var(--max),100%); }
.page-heading { margin-bottom:32px; display:flex; justify-content:space-between; align-items:end; gap:44px; }
.page-heading h1, .install-copy > h1 { margin:0; font-size:clamp(36px,4.8vw,64px); line-height:1.05; }
.page-heading > p { max-width:390px; margin:0; color:var(--muted); }
.capability-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.capability-grid article { position:relative; min-height:190px; padding:24px 26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(11,16,22,.64); backdrop-filter:blur(9px); transition:background .25s ease,border-color .25s ease,transform .25s ease; }
.capability-grid article:hover { z-index:1; transform:translateY(-3px); background:rgba(20,29,37,.9); border-color:rgba(60,221,193,.44); }
.capability-grid article > svg { width:25px; color:var(--accent); }
.capability-grid article > span { position:absolute; top:22px; right:24px; color:#5c6670; font:700 10px monospace; }
.capability-grid h2 { margin:30px 0 7px; font-size:17px; }
.capability-grid p { margin:0; color:var(--muted); font-size:13px; }
.workflow-track { display:grid; grid-template-columns:1fr 68px 1fr 68px 1fr; align-items:stretch; }
.workflow-track article { min-height:245px; padding:28px; border:1px solid var(--line); border-radius:6px; background:rgba(12,18,24,.72); backdrop-filter:blur(10px); }
.workflow-track article > span { color:#68727b; font:700 11px monospace; }
.workflow-track article > svg { width:32px; height:32px; display:block; margin-top:42px; color:var(--gold); }
.workflow-track h2 { margin:17px 0 7px; font-size:19px; }
.workflow-track p { margin:0; color:var(--muted); font-size:13px; }
.track-arrow { display:grid; place-items:center; color:#68727b; }
.track-arrow svg { width:20px; }
.verification-rail { margin-top:22px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:rgba(8,12,17,.62); backdrop-filter:blur(10px); }
.verification-rail div { padding:17px 20px; border-right:1px solid var(--line); }
.verification-rail div:last-child { border:0; }
.verification-rail strong, .verification-rail span { display:block; }
.verification-rail strong { font-size:13px; }
.verification-rail span { margin-top:4px; color:var(--muted); font-size:11px; }
.install-layout { display:grid; grid-template-columns:1fr .9fr; gap:90px; align-items:center; }
.install-steps { margin:28px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.install-steps li { min-height:94px; padding:18px 0; display:grid; grid-template-columns:58px 1fr; border-bottom:1px solid var(--line); }
.install-steps li > span { color:var(--accent); font:700 11px monospace; }
.install-steps h2 { margin:0 0 7px; font-size:17px; }
.install-steps p { margin:0; color:var(--muted); font-size:13px; }
.install-steps code { display:inline-block; padding:6px 8px; border-radius:4px; background:rgba(19,27,35,.9); color:#d7dfe3; font-size:11px; }
.download-panel { padding:38px; border:1px solid var(--line-strong); border-radius:7px; background:rgba(12,18,24,.78); backdrop-filter:blur(15px); box-shadow:0 38px 100px rgba(0,0,0,.45); }
.download-panel h2 { margin:0; font-size:38px; }
.download-panel > p:not(.section-index) { min-height:48px; color:var(--muted); }
.button-large { width:100%; min-height:56px; }
.download-panel dl { margin:26px 0 0; border-top:1px solid var(--line); }
.download-panel dl div { padding:12px 0; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); }
.download-panel dt { color:var(--muted); }
.download-panel dd { margin:0; color:#e1e6e9; font-weight:700; }
.site-footer { position:fixed; inset:auto 0 0; z-index:20; height:58px; padding:0 max(24px,calc((100vw - var(--max))/2)); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-top:1px solid rgba(255,255,255,.1); background:rgba(5,7,10,.76); backdrop-filter:blur(18px); color:#828d96; font-size:11px; }
.site-footer > span { justify-self:start; }
.icp-mark { grid-column:2; color:rgba(224,231,235,.8); font-size:13px; font-weight:700; transition:color .2s ease; }
.icp-mark:hover { color:#fff; }
@keyframes pulse { 0%,100%{opacity:.5;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes meteor-flight { 0%{opacity:0;transform:translate3d(-28vw,-20vh,0) rotate(23deg)} 8%{opacity:1} 72%{opacity:.85} 100%{opacity:0;transform:translate3d(128vw,62vh,0) rotate(23deg)} }
@keyframes nebula-pulse { from{opacity:.35} to{opacity:1} }
@media (max-width:900px) {
  body { overflow:auto; }
  .site-header { grid-template-columns:1fr auto; padding:0 20px; }
  .site-nav { position:fixed; left:0; right:0; bottom:58px; height:48px; padding:0 16px; justify-content:space-around; align-items:center; gap:8px; border-top:1px solid var(--line); background:rgba(5,7,10,.9); backdrop-filter:blur(16px); }
  .site-nav a.active::after { bottom:-14px; }
  .header-download span { display:none; }
  .screen-page { min-height:100svh; padding:90px 20px 130px; }
  .tool-rail { bottom:122px; }
  .tool-rail span:nth-child(2), .tool-rail span:nth-child(3), .tool-rail span:nth-child(5) { display:none; }
  .page-heading { display:block; }
  .page-heading > p { margin-top:12px; }
  .capability-grid { grid-template-columns:repeat(2,1fr); }
  .workflow-track { grid-template-columns:1fr; gap:10px; }
  .track-arrow { height:24px; transform:rotate(90deg); }
  .verification-rail { grid-template-columns:repeat(2,1fr); }
  .verification-rail div:nth-child(2) { border-right:0; }
  .verification-rail div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .install-layout { grid-template-columns:1fr; gap:34px; }
  .site-footer { padding:0 20px; grid-template-columns:1fr auto; }
  .site-footer > span { display:none; }
  .icp-mark { grid-column:1 / -1; justify-self:center; }
}
@media (max-width:600px) {
  .brand { font-size:13px; }
  .site-nav { font-size:11px; }
  .home-hero { transform:none; }
  .home-hero h1 { font-size:58px; }
  .hero-lead { font-size:21px; }
  .hero-copy { font-size:13px; }
  .hero-actions { display:grid; }
  .button { width:100%; }
  .tool-rail { left:20px; right:20px; }
  .page-heading h1, .install-copy > h1 { font-size:38px; }
  .capability-grid { grid-template-columns:1fr; }
  .capability-grid article { min-height:165px; }
  .workflow-track article { min-height:210px; }
  .workflow-track article > svg { margin-top:26px; }
  .verification-rail { grid-template-columns:1fr; }
  .verification-rail div { border-right:0; border-bottom:1px solid var(--line); }
  .download-panel { padding:26px 22px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }