/* DrafterPro promo site — brand tokens lifted from the app's web design
   (dark #141414 base, #286BFF accent, #16BFA6 teal, IBM Plex). Self-contained. */
:root {
  --bg:#141414; --surface:#1A1D23; --surface2:#16181C; --footer:#101215;
  --border:#2E333B; --border2:#26292F; --text:#F2F3F5; --text2:#C2C8D4;
  --muted:#9AA3B2; --subtle:#6B7382; --faint:#4B515E; --grid:#20242C;
  --accent:#286BFF; --accent-border:#2E4372; --teal:#16BFA6; --teal-border:#26313A;
  --font-sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-sans); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }

/* header */
header {
  position:sticky; top:0; z-index:50; background:rgba(20,20,20,0.82);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border2);
}
.hrow { display:flex; align-items:center; gap:20px; height:62px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { width:30px; height:30px; border-radius:7px; display:block; }
.brand span { font-weight:600; font-size:17px; letter-spacing:-0.01em; color:var(--text); }
nav.top { display:flex; gap:4px; margin-left:6px; }
nav.top a { color:var(--muted); font-size:14px; font-weight:500; padding:8px 12px; border-radius:6px; }
nav.top a:hover { color:var(--text); text-decoration:none; background:var(--surface); }
.cta-mini { margin-left:auto; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border-radius:8px; font-weight:600; font-size:14px;
  background:var(--accent); color:#fff; border:1px solid var(--accent); cursor:pointer;
}
.btn:hover { text-decoration:none; filter:brightness(1.08); }
.btn.ghost { background:transparent; color:var(--text); border-color:var(--border); }

/* hero */
.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--border2); }
.hero .grid-bg {
  position:absolute; inset:0; opacity:0.30;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 72% 34%, #000 30%, transparent 76%);
  mask-image:radial-gradient(ellipse 75% 70% at 72% 34%, #000 30%, transparent 76%);
}
.hero .glow { position:absolute; top:-140px; right:-100px; width:560px; height:560px; background:radial-gradient(circle, rgba(40,107,255,0.18), transparent 62%); pointer-events:none; }
.hero-inner { position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; padding:86px 0 92px; }
.badge {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:0.04em; color:var(--teal);
  border:1px solid var(--teal-border); background:rgba(22,191,166,0.08); padding:5px 12px; border-radius:999px;
}
.badge .dot { width:6px; height:6px; border-radius:50%; background:var(--teal); }
h1 { font-size:52px; line-height:1.07; letter-spacing:-0.02em; font-weight:600; margin:22px 0 0; }
h1 .sub { color:var(--subtle); }
.lead { font-size:18px; color:var(--text2); margin:20px 0 0; max-width:520px; }
.hero-cta { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; align-items:center; }
.hero-note { font-size:13px; color:var(--muted); margin-top:14px; }
.hero-art { display:flex; justify-content:center; }
.hero-art img { width:220px; height:220px; border-radius:44px; box-shadow:0 24px 60px rgba(0,0,0,0.5); border:1px solid var(--border); }

/* sections */
section.block { padding:78px 0; border-bottom:1px solid var(--border2); }
.eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal); }
h2 { font-size:34px; letter-spacing:-0.02em; font-weight:600; margin:10px 0 0; }
.section-lead { color:var(--muted); font-size:16px; margin:12px 0 0; max-width:640px; }

.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px; }
.card h3 { margin:0 0 8px; font-size:18px; font-weight:600; }
.card ul { margin:8px 0 0; padding-left:0; list-style:none; }
.card li { position:relative; padding-left:22px; color:var(--text2); font-size:14.5px; margin:6px 0; }
.card li::before { content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* pricing */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.price { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:26px; position:relative; }
.price.best { border-color:var(--accent-border); box-shadow:0 0 0 1px var(--accent-border); }
.price .tag { position:absolute; top:-11px; left:24px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:0.04em; padding:3px 9px; border-radius:5px; }
.price .plan { font-size:16px; font-weight:600; }
.price .amt { font-size:34px; font-weight:700; margin:8px 0 2px; }
.price .cad { font-size:13px; color:var(--muted); }
.price .desc { font-size:13.5px; color:var(--text2); margin-top:12px; }

/* footer */
footer { background:var(--footer); padding:40px 0; }
.frow { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
footer a { color:var(--muted); font-size:14px; }
footer a:hover { color:var(--text); }
.copyright { color:var(--subtle); font-size:13px; }
.spacer { margin-left:auto; }

/* legal / support article */
.doc { max-width:780px; margin:0 auto; padding:56px 24px 90px; }
.doc h1 { font-size:30px; margin:0; }
.doc .updated { color:var(--subtle); font-size:14px; margin-top:6px; }
.doc h2 { font-size:20px; margin-top:34px; }
.doc p, .doc li { color:var(--text2); }
.doc table { border-collapse:collapse; width:100%; margin:14px 0; }
.doc th, .doc td { border:1px solid var(--border); padding:8px 10px; text-align:left; font-size:14px; }
.back { font-family:var(--font-mono); font-size:12.5px; color:var(--muted); }

@media (max-width:820px) {
  .hero-inner { grid-template-columns:1fr; gap:32px; padding:56px 0 60px; }
  .hero-art { order:-1; } .hero-art img { width:150px; height:150px; border-radius:32px; }
  h1 { font-size:38px; } h2 { font-size:27px; }
  .feature-grid, .price-grid { grid-template-columns:1fr; }
  nav.top { display:none; }
}