:root { color-scheme:dark; --bg:#090a0d; --surface:#111318; --card:#171a20; --line:#2b2f38; --muted:#979da8; --ink:#f5f2e9; --brass:#f0b766; --brass-soft:#ffdca5; --green:#7bd6b5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
body:before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 12% 8%,rgba(240,183,102,.09),transparent 28%),radial-gradient(circle at 90% 27%,rgba(71,84,128,.1),transparent 24%); }
a { color:#e8be80; text-underline-offset:3px; transition:.18s ease; }
a:hover { color:var(--brass-soft); }
.shell { width:min(1040px,calc(100% - 40px)); margin:0 auto; padding-bottom:84px; }
nav { min-height:78px; display:flex; gap:18px; align-items:center; border-bottom:1px solid rgba(255,255,255,.07); }
.brand { display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; font-weight:820; letter-spacing:-.04em; font-size:20px; }
.mark { width:25px; height:25px; flex:0 0 25px; fill:var(--brass); margin-right:10px; }
.brand span { color:var(--brass); }
.navlinks { margin-left:auto; display:flex; gap:8px; align-items:center; }
.navlinks a { color:#aeb4bf; text-decoration:none; font-size:12px; font-weight:650; padding:9px 11px; border-radius:9px; }
.navlinks a:hover { color:#fff; background:rgba(255,255,255,.05); }
.button,button { min-height:39px; display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; border-radius:10px; border:1px solid #383d47; background:#191c22; color:#ebe9e3; font:inherit; font-size:12px; font-weight:680; cursor:pointer; text-decoration:none; transition:.18s ease; }
.button:hover,button:hover { color:#fff; background:#242830; border-color:#505661; }
.button.primary,button.primary { color:#1c1409; background:var(--brass); border-color:var(--brass); font-weight:780; box-shadow:0 10px 28px rgba(240,183,102,.09); }
.button.primary:hover,button.primary:hover { color:#1c1409; background:var(--brass-soft); border-color:var(--brass-soft); transform:translateY(-1px); }
.button.danger,button.danger { color:#ffaaa2; border-color:#653a36; background:#251716; }
.button.danger:hover,button.danger:hover { background:#341c1a; border-color:#8a4942; }
main { padding:72px 0 26px; }
.eyebrow { display:inline-block; padding:6px 9px; border:1px solid rgba(240,183,102,.2); border-radius:999px; background:rgba(240,183,102,.06); color:#dfb87e; font-size:9px; font-weight:820; text-transform:uppercase; letter-spacing:.14em; }
h1 { max-width:850px; font-size:clamp(42px,7vw,68px); line-height:1.02; letter-spacing:-.055em; margin:16px 0 19px; }
h2 { margin:48px 0 11px; color:#efede6; font-size:25px; letter-spacing:-.035em; }
h3 { margin:26px 0 6px; color:#dddce0; font-size:16px; }
p,li { color:#a7adb7; }
.lede { max-width:760px; margin-bottom:34px; color:#aeb4bd; font-size:18px; line-height:1.65; }
.card { padding:25px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(150deg,#171a20,#121419); margin:18px 0; box-shadow:0 12px 34px rgba(0,0,0,.1); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.grid .card { margin:0; min-height:175px; }
.card h2,.card h3 { margin-top:0; }
.card h2 { font-size:20px; }
.muted { color:var(--muted); }
.notice { border:1px solid rgba(240,183,102,.17); border-left:3px solid var(--brass); padding:13px 15px; background:rgba(240,183,102,.055); color:#c9b185; border-radius:4px 10px 10px 4px; }
.status { min-height:24px; color:#e5bb79; }
label { display:block; color:#bfc4cd; font-size:11px; font-weight:700; margin:15px 0 6px; }
input { width:100%; min-height:43px; padding:10px 12px; border:1px solid #373c46; border-radius:10px; background:#101318; color:#fff; font:inherit; transition:.18s ease; }
input:hover { border-color:#4a505b; }
input:focus,button:focus-visible,a:focus-visible { outline:3px solid rgba(240,183,102,.14); outline-offset:2px; border-color:#987748; }
.form { max-width:500px; padding:29px; }
.form button { margin-top:18px; width:100%; }
.usage { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin:25px 0; }
.usage div { padding:18px; border:1px solid var(--line); background:linear-gradient(150deg,#171a20,#121419); border-radius:13px; }
.usage strong { display:block; color:#f1eee7; font-size:23px; letter-spacing:-.025em; }
.usage span { color:#858c98; font-size:10px; font-weight:720; text-transform:uppercase; letter-spacing:.08em; }
footer { border-top:1px solid var(--line); margin-top:62px; padding:29px 0; color:#737a86; font-size:11px; display:flex; gap:15px; flex-wrap:wrap; }
footer a { color:#8f96a1; text-decoration:none; }
footer a:hover { color:#fff; }
@media(max-width:700px) { .shell{width:min(100% - 32px,1040px)}main{padding-top:48px}.navlinks a:not(.button){display:none}.grid,.usage{grid-template-columns:1fr 1fr}h1{font-size:clamp(40px,13vw,58px)} }
@media(max-width:460px) { .grid,.usage{grid-template-columns:1fr}.card,.form{padding:21px}.brand{font-size:18px}.mark{width:22px;height:22px;flex-basis:22px} }

/* Pricing */
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin:26px 0 8px; align-items:start; }
.plan { position:relative; padding:24px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(150deg,#151a23,#11141b); }
.plan-featured { border-color:rgba(224,164,88,.5); box-shadow:0 0 0 1px rgba(224,164,88,.14),0 18px 44px rgba(0,0,0,.3); }
.plan-tag { position:absolute; top:-11px; left:24px; padding:4px 10px; border-radius:999px; background:var(--brass); color:#1a1408; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.plan h2 { margin:0 0 6px; font-size:17px; }
.plan-price { margin:0 0 4px; font-size:40px; font-weight:800; letter-spacing:-.04em; color:#fff; }
.plan-price small { font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0; margin-left:3px; }
.plan-blurb { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.5; min-height:38px; }
.plan-list { list-style:none; margin:0 0 20px; padding:0; }
.plan-list li { padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px; color:#cdd3dd; }
.plan-list li:last-child { border-bottom:0; }
.plan .button { display:block; text-align:center; }
.faq h3 { margin:20px 0 5px; font-size:15px; }
.faq p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }