:root { color-scheme: dark; --bg:#071018; --panel:#0b1720; --line:rgba(130,190,205,.16); --text:#d8e7ec; --muted:#7f98a1; --cyan:#74d2e7; --cyan2:#9ae8f5; --warn:#e8c17e; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI", system-ui, sans-serif; color:var(--text); background: radial-gradient(circle at 72% 12%, rgba(116,210,231,.12), transparent 28%), var(--bg); }
a { color:var(--cyan2); }
.shell { max-width:1120px; margin:auto; padding:28px; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0 46px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.mark { width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(116,210,231,.5); color:var(--cyan); clip-path:polygon(15% 0,100% 0,100% 85%,85% 100%,0 100%,0 15%); }
.ai { color:#061219; background:linear-gradient(135deg,var(--cyan2),var(--cyan)); border-radius:5px; padding:1px 6px; margin-left:5px; letter-spacing:.12em; }
nav { display:flex; gap:18px; font-size:13px; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; }
.eyebrow { color:var(--cyan); font:11px Consolas, monospace; letter-spacing:.18em; }
h1 { font-size:clamp(38px,6vw,72px); line-height:.95; letter-spacing:-.05em; margin:10px 0 18px; }
.lead { color:#95aeb6; font-size:18px; line-height:1.65; }
.panel { border:1px solid var(--line); background:rgba(11,23,32,.82); border-radius:14px; padding:22px; box-shadow:0 24px 80px rgba(0,0,0,.28); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:42px 0; }
.card { border:1px solid var(--line); background:rgba(255,255,255,.018); border-radius:12px; padding:18px; }
.card h3 { margin:0 0 8px; font-size:16px; }
.card p,.panel p,li { color:var(--muted); line-height:1.55; }
.cta { display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:8px; color:#061219; background:var(--cyan); text-decoration:none; font-weight:700; }
.warning { border-color:rgba(232,193,126,.28); background:rgba(232,193,126,.06); }
footer { border-top:1px solid var(--line); margin-top:44px; padding-top:20px; color:#66808a; font-size:12px; }
@media (max-width:800px){ .hero,.grid{grid-template-columns:1fr} header{align-items:flex-start;flex-direction:column} }