:root { --ink:#e9f7ef; --muted:#a9c2b3; --bg:#07120d; --surface:#10231a; --line:#24553d; --teal:#35d78a; --gold:#f2c66d; --cyan:#58d5f7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font:16px/1.65 Inter, ui-sans-serif, system-ui, sans-serif; }
a { color:var(--teal); } a:hover { color:#8ef0bb; }
header, main, footer { width:min(1120px, calc(100% - 40px)); margin:auto; }
header { padding:28px 0 54px; }
nav { display:flex; justify-content:space-between; gap:18px; align-items:center; flex-wrap:wrap; }
.brand { color:var(--ink); font-size:1.1rem; font-weight:800; text-decoration:none; letter-spacing:.02em; }
.wordmark { display:block; width:100%; max-width:520px; margin:auto; border-radius:20px; }
nav ul { margin:0; padding:0; display:flex; gap:17px; list-style:none; }
nav a { text-decoration:none; font-size:.9rem; }
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:42px; align-items:center; padding:48px 0 34px; }
.eyebrow { color:var(--gold); text-transform:uppercase; font-size:.78rem; font-weight:800; letter-spacing:.13em; }
h1,h2,h3 { line-height:1.15; margin:0 0 14px; } h1 { font-size:clamp(2.5rem,6vw,5rem); letter-spacing:-.055em; } h2 { font-size:clamp(1.65rem,3.3vw,2.6rem); } h3 { font-size:1.1rem; }
.lede { color:var(--muted); font-size:1.15rem; max-width:61ch; }
.button { display:inline-block; padding:11px 17px; border:1px solid var(--teal); border-radius:9px; color:#07120d; background:var(--teal); font-weight:800; text-decoration:none; }
.button.ghost { color:var(--teal); background:transparent; margin-left:9px; }
.hero-visual,.card { background:linear-gradient(145deg,#133223,#0a1912); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 50px #0006; }
.hero-visual { padding:22px; min-height:310px; display:grid; place-items:center; }
.workflow { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--gold); }
.step-icon { width:24%; min-width:62px; aspect-ratio:1; padding:10px; display:grid; place-items:center; text-align:center; color:var(--ink); background:#08130e; border:1px solid #2a7150; border-radius:14px; font-size:.72rem; font-weight:700; }
.arrow { color:var(--teal); font-size:1.5rem; }
section { padding:58px 0; border-top:1px solid #183726; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .two { grid-template-columns:repeat(2,1fr); }
.card { padding:22px; } .card p,.muted { color:var(--muted); }
.number { color:var(--gold); font-weight:800; font-size:.85rem; letter-spacing:.08em; }
.screenshot { width:100%; border:1px solid var(--line); border-radius:16px; background:#021009; display:block; }
.caption { color:var(--muted); font-size:.9rem; margin-top:9px; }
.note { padding:17px 20px; background:#122b20; border-left:4px solid var(--gold); border-radius:5px; }
ol,ul { padding-left:22px; } li+li { margin-top:7px; }
table { width:100%; border-collapse:collapse; background:#0c1d14; } th,td { padding:12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--gold); }
footer { color:var(--muted); padding:36px 0 60px; font-size:.9rem; }
.legal { max-width:850px; } .legal h2 { margin-top:40px; font-size:1.6rem; } .legal h3 { margin-top:24px; }
@media (max-width:760px) { .hero,.grid,.two { grid-template-columns:1fr; } header,main,footer { width:min(100% - 28px,1120px); } .hero { padding-top:24px; } nav ul { gap:10px; } .hero-visual { min-height:220px; } }