:root { color-scheme: dark; --bg:#07111f; --panel:#0c1b2b; --line:#1b3851; --text:#edf6ff; --muted:#8297ad; --mint:#83e9cd; --blue:#87a9ff; font-family: Inter,Segoe UI,system-ui,-apple-system,sans-serif; }
code { color:#9cb1ff; font-size:9px; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; overflow-x:hidden; color:var(--text); background:radial-gradient(circle at 50% -10%,#173d5d 0,transparent 36rem),var(--bg); } a { color:inherit; }
.glow { position:fixed; z-index:-1; width:26rem; height:26rem; border-radius:50%; filter:blur(90px); opacity:.16; pointer-events:none; } .glow-a { top:32rem; left:-16rem; background:#66e4c8; } .glow-b { top:48rem; right:-17rem; background:#778fff; }
.page { width:min(1120px,calc(100% - 40px)); margin:auto; padding:24px 0 34px; } .nav { display:flex; align-items:center; justify-content:space-between; min-height:38px; } .brand { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:800; text-decoration:none; letter-spacing:-.03em; } .brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#06101a; background:linear-gradient(135deg,var(--mint),var(--blue)); font-weight:900; box-shadow:0 0 32px #62e2c944; } .nav-note { color:var(--muted); font-size:11px; }
.hero { max-width:710px; padding:116px 0 72px; } .eyebrow,.section-label { color:var(--mint); font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } .live-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 13px var(--mint); } h1 { margin:18px 0 19px; font-size:clamp(47px,8vw,92px); line-height:.93; letter-spacing:-.075em; } h1 em { color:#95aefb; font-style:normal; } .hero-copy { max-width:535px; margin:0; color:var(--muted); font-size:15px; line-height:1.65; } .actions { display:flex; align-items:center; gap:18px; margin-top:30px; } .download { display:flex; align-items:center; gap:18px; padding:13px 15px 13px 18px; border-radius:12px; color:#07111f; background:linear-gradient(110deg,var(--mint),#9ab5ff); box-shadow:0 16px 44px #65dacb1f; font-size:13px; font-weight:800; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; } .download:hover { transform:translateY(-2px); box-shadow:0 19px 52px #65dacb3d; } .download b { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#07111f1f; font-size:18px; } .build { color:#7f96ae; font-size:10px; }
.preview { position:relative; max-width:690px; margin:0 0 90px auto; overflow:hidden; border:1px solid #28516b; border-radius:19px; background:linear-gradient(145deg,#10283b,#0a1727); box-shadow:0 30px 90px #0008,0 0 0 8px #0d2233aa; transform:rotate(1.5deg); } .preview:after { content:""; position:absolute; top:-6rem; right:-4rem; width:16rem; height:16rem; border-radius:50%; background:#6ae4ca14; filter:blur(20px); } .preview-top { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #20435a; color:#8298ad; font-size:10px; } .traffic { display:flex; gap:4px; } .traffic i { width:7px; height:7px; border-radius:50%; background:#466578; } .window-controls { color:#5e778d; } .preview-body { display:grid; justify-items:center; gap:10px; padding:48px 30px 42px; } .shield { display:grid; place-items:center; width:116px; height:116px; margin-bottom:5px; border:1px solid #39718a; border-radius:50%; box-shadow:0 0 0 12px #143346,0 0 0 13px #1c4b62,0 0 46px #5de1c855; } .shield div { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; color:#07111f; background:linear-gradient(145deg,var(--mint),var(--blue)); font-weight:900; } .preview-body strong { font-size:19px; letter-spacing:-.04em; } .preview-body small { color:#8298ad; font-size:11px; } .preview-select,.preview-button { width:min(280px,100%); padding:11px 12px; border-radius:9px; font-size:11px; } .preview-select { margin-top:13px; border:1px solid #294963; color:#899fb3; background:#091727; } .preview-select span { float:right; color:#eff7ff; } .preview-button { color:#07111f; background:linear-gradient(100deg,var(--mint),#8faeff); text-align:center; font-weight:800; }
.protocols,.steps { padding:0 0 85px; } .protocol-grid,.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; } .protocol-grid article { display:flex; align-items:center; gap:13px; padding:18px; border:1px solid var(--line); border-radius:14px; background:#0b1b2ad9; } .icon { display:grid; place-items:center; flex:0 0 auto; width:35px; height:35px; border-radius:10px; font-size:12px; font-weight:900; } .blue { color:#adbeff; background:#748cff22; } .violet { color:#d0b4ff; background:#b07aff20; } .mint { color:#9ff4dd; background:#65e3c522; } h2 { margin:0; font-size:13px; letter-spacing:-.02em; } p { color:var(--muted); } article p,.step-grid p { margin:5px 0 0; font-size:11px; line-height:1.4; } .step-grid > div { padding:19px; border-top:1px solid #294963; } .step-grid span { color:var(--mint); font-size:10px; font-weight:800; letter-spacing:.1em; }
.notice { display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border:1px solid #28526b; border-radius:13px; background:#0b2132aa; } .notice > span { color:var(--mint); font-size:20px; } .notice p { margin:0; font-size:11px; line-height:1.55; } footer { display:flex; justify-content:space-between; gap:20px; padding-top:28px; color:#5d738b; font-size:10px; }
.download-box { min-width:min(100%,390px); padding:13px; border:1px solid #294963; border-radius:13px; background:#0b1c2ddd; } .code-label { margin-bottom:8px; color:#91a7bd; font-size:10px; letter-spacing:.08em; text-transform:uppercase; } .code-row { display:flex; gap:8px; } .code-row input { width:145px; min-width:0; padding:12px; border:1px solid #2a526b; border-radius:9px; outline:0; color:#edf6ff; background:#081625; font:inherit; font-size:13px; letter-spacing:.12em; } .code-row input:focus { border-color:var(--mint); } .code-row button { display:flex; align-items:center; gap:12px; padding:10px 12px; border:0; border-radius:9px; color:#07111f; background:linear-gradient(110deg,var(--mint),#9ab5ff); font:inherit; font-size:11px; font-weight:800; cursor:pointer; } .code-row button b { font-size:17px; } .download-state { min-height:14px; margin-top:8px; color:#7890a7; font-size:10px; } .download-state.error { color:#ffbd7d; }
@media (max-width:700px) { .page { width:min(100% - 28px,560px); } .nav-note { display:none; } .hero { padding:90px 0 60px; } .actions { align-items:flex-start; flex-direction:column; gap:11px; } .preview { margin-bottom:70px; } .protocol-grid,.step-grid { grid-template-columns:1fr; } .protocol-grid article { padding:15px; } footer { flex-direction:column; gap:8px; } }