:root{
  --bg:#f8fafc; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --accent:#0ea5e9; --accent2:#8b5cf6; --dark:#0f172a; --warn:#fef3c7; --ok:#dcfce7;
  --r:18px; --shadow:0 10px 30px rgba(15,23,42,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:18px}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--ink); line-height:1.6}
a{color:var(--accent); text-decoration:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.progress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); z-index:99; transition:width .1s}
.hero{background:linear-gradient(180deg,#ffffff 0%, #f0f9ff 100%); border-bottom:1px solid var(--line)}
.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; padding:18px 0 16px; align-items:start}
.badge{display:inline-block; font:600 11px Inter; letter-spacing:.06em; text-transform:uppercase; background:#0f172a; color:#fff; padding:5px 9px; border-radius:999px}
.hero h1{font-family:Manrope; font-weight:800; font-size:30px; line-height:.98; margin:10px 0 8px; letter-spacing:-.02em}
.accent{background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.lead{color:var(--muted); font-size:14px; max-width:54ch; line-height:1.55}
.hero__cta{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 8px}
.btn{appearance:none; border:1px solid var(--line); background:#fff; padding:10px 14px; border-radius:999px; font:600 14px Inter; cursor:pointer}
.btn--primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn--ghost{background:#fff}
.btn.small{padding:7px 12px; font-size:13px}
.hero__meta{display:flex; gap:8px; color:var(--muted); font-size:12px; flex-wrap:wrap}
.hero__card{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:12px 14px; align-self:start}
.hero__card-head{font:800 11px Manrope; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.checklist{list-style:none; padding:0; margin:0 0 10px; display:grid; gap:6px}
.checklist li{position:relative; padding-left:20px; font:500 13px Inter; line-height:1.35}
.checklist li::before{content:"✓"; position:absolute; left:0; top:1px; width:16px; height:16px; display:grid; place-items:center; background:var(--ok); border-radius:50%; font-size:10px}
.hero__demo{background:#0f172a; color:#fff; border-radius:10px; padding:10px 12px}
.demo__label{font:600 10px Inter; letter-spacing:.07em; text-transform:uppercase; opacity:.7}
.demo__type{font:500 12px JetBrains Mono; margin-top:4px; min-height:1.4em; color:#7dd3fc}

.layout{display:grid; grid-template-columns:260px 1fr; gap:22px; padding:22px 20px 0}
.toc{position:sticky; top:16px; align-self:start; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:var(--shadow)}
.toc__title{font:800 12px Manrope; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.toc__nav{display:grid; gap:4px; margin:10px 0 14px}
.toc__nav a{padding:7px 10px; border-radius:10px; color:var(--ink); font:500 13px Inter; border:1px solid transparent}
.toc__nav a.active{background:#0f172a; color:#fff}
.toc__foot{border-top:1px solid var(--line); padding-top:12px; display:grid; gap:10px}
.toc__progress{display:flex; align-items:center; gap:8px; font:600 12px Inter; color:var(--muted)}
.toc__bar{flex:1; height:6px; background:#e2e8f0; border-radius:999px; overflow:hidden}
.toc__bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2))}
.toc__tg{font:700 13px Inter; text-align:center; padding:8px; border-radius:10px; background:#f0f9ff; border:1px solid #e0f2fe}

.content{display:grid; gap:18px; padding-bottom:30px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow)}
.card--dark{background:var(--dark); color:#fff; border-color:#1e293b}
.card--dark .muted{color:#94a3b8}
.card--warn{background:linear-gradient(180deg,#fffbeb, #ffffff); border-color:#fde68a}
.kicker{font:800 11px Manrope; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.kicker--light{color:#7dd3fc}
.card h2{font:800 26px Manrope; line-height:1.15; margin:6px 0 10px}
.card h3{font:700 15px Manrope; margin:10px 0 6px}
.muted{color:var(--muted)}
.small{font-size:13px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px}
.mini{background:#f8fafc; border:1px solid var(--line); border-radius:14px; padding:14px}
.mini--accent{background:linear-gradient(180deg,#f0f9ff,#ffffff); border-color:#e0f2fe}
.mini ul{margin:6px 0 0; padding-left:18px}
.prompt-example{display:grid; gap:6px; margin-top:10px}
.prompt-example code{background:#0f172a; color:#e2e8f0; padding:8px 10px; border-radius:10px; font:500 12px JetBrains Mono; display:block}
.prompt-example code.good{background:#ecfeff; color:#0f172a; border:1px solid #bae6fd}
.callout{background:#f0f9ff; border:1px solid #e0f2fe; padding:12px 14px; border-radius:12px; margin-top:12px; font:500 14px Inter}
.callout--dark{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#e2e8f0}

/* map tabs */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px}
.tab{padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; font:600 13px Inter; cursor:pointer}
.tab.active{background:#0f172a; color:#fff; border-color:#0f172a}
.map-grid{border:1px solid var(--line); border-radius:14px; overflow:hidden}
.map-pane{display:none; padding:14px; grid-template-columns:repeat(3,1fr); gap:10px}
.map-pane.active{display:grid}
.service{background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:12px}
.service b{display:block; font:700 13px Inter}
.service span{color:var(--muted); font-size:12px}
.demo-box{grid-column:1/-1; background:linear-gradient(90deg,#f0f9ff,#faf5ff); border:1px dashed #cbd5e1; border-radius:12px; padding:10px 12px; font:500 13px Inter}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.stat{background:#0f172a; color:#fff; border-radius:14px; padding:12px; text-align:center}
.stat strong{display:block; font:800 20px Manrope}
.stat span{opacity:.7; font-size:12px}

/* steps */
.steps{display:grid; gap:14px; margin-top:10px}
.step{display:grid; grid-template-columns:44px 1fr; gap:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px}
.step__num{width:44px; height:44px; display:grid; place-items:center; background:#fff; color:#0f172a; border-radius:50%; font:800 16px Manrope}
.copybox{position:relative; background:#fff; color:#0f172a; border-radius:12px; padding:10px 44px 10px 12px; border:1px solid #e2e8f0; margin-top:8px}
.copybox pre{margin:0; white-space:pre-wrap; word-break:break-word; font:500 12px JetBrains Mono}
.copy{position:absolute; top:8px; right:8px; padding:6px 8px; border-radius:999px; border:1px solid var(--line); background:#fff; font:700 11px Inter; cursor:pointer}
.copy:active{transform:scale(.98)}

/* prompts */
.prompts{display:grid; gap:12px; margin-top:10px}
.prompt{border:1px solid var(--line); border-radius:14px; overflow:hidden}
.prompt__head{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:#f8fafc; border-bottom:1px solid var(--line)}
.prompt__head h3{margin:0; font-size:14px}
.prompt pre{margin:0; padding:12px; font:500 12px JetBrains Mono; white-space:pre-wrap; word-break:break-word; background:#fff}
.builder{margin-top:14px; border:1px solid var(--line); border-radius:14px; padding:14px; background:linear-gradient(180deg,#ffffff,#f8fafc)}
.builder__grid{display:grid; grid-template-columns:1fr 1fr 160px; gap:10px; margin:10px 0}
.builder__grid label{font:600 12px Inter; color:var(--muted); display:grid; gap:6px}
.builder__grid input,.builder__grid select{padding:9px 10px; border:1px solid var(--line); border-radius:10px; font:500 13px Inter; background:#fff}
.builder__out{background:#0f172a; color:#e2e8f0; padding:12px; border-radius:12px; font:500 12px JetBrains Mono; white-space:pre-wrap; min-height:48px}

/* cases */
.cases{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px}
.case{border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff}
.case__icon{font-size:20px}
.case h3{margin:6px 0}
.case ul{margin:0; padding-left:18px; font-size:13px; color:var(--muted)}
.compare{margin-top:14px; border:1px solid var(--line); border-radius:14px; padding:14px; background:#f8fafc}
.compare__row{display:grid; gap:8px; font:500 13px Inter}
.tag{padding:2px 8px; border-radius:999px; font:700 11px Inter}
.tag--bad{background:#fee2e2}
.tag--good{background:#dcfce7}
.compare input{width:100%; margin:10px 0}
.compare__foot{display:flex; justify-content:space-between; font:600 13px Inter}

/* errors */
.errors{display:grid; gap:10px; margin-top:10px}
.error{display:grid; grid-template-columns:32px 1fr; gap:10px; background:#fff; border:1px solid #fde68a; border-radius:12px; padding:12px}
.error__n{width:32px; height:32px; display:grid; place-items:center; background:#f59e0b; color:#fff; border-radius:50%; font:800 13px Manrope}
.error h3{margin:0 0 4px; font-size:14px}
.error p{margin:0; color:var(--muted); font-size:13px}

/* roadmap */
.roadmap__switch{display:flex; gap:8px; margin:10px 0}
.road{display:grid; gap:8px}
.hidden{display:none}
.day{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
.day__head{width:100%; display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:#fff; border:0; font:700 14px Inter; cursor:pointer}
.day__body{display:none; padding:0 14px 14px; color:var(--muted); font-size:13px}
.day.open .day__body{display:block}
.weeks{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.week{border:1px solid var(--line); border-radius:12px; padding:14px; background:#f8fafc}
.dict{margin:8px 0 0}
.dict dt{font:700 13px Inter}
.dict dd{margin:0 0 8px; color:var(--muted); font-size:13px}
.check{display:grid; gap:8px}
.check label{display:flex; gap:8px; align-items:center; font:500 13px Inter; background:#fff; border:1px solid var(--line); padding:8px 10px; border-radius:10px}
.check__bar{height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden; position:relative}
.check__bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2))}
#checkTxt{font:700 12px Inter; color:var(--muted)}
.links{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.links a{padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); font:600 13px Inter; color:var(--ink)}
.final-cta{background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; border-radius:16px; padding:16px; margin-top:14px}
.final-cta h3{color:#fff; margin:0 0 6px}
.final-cta .muted{color:#94a3b8}
.final-cta__btns{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0}
.footer{display:flex; justify-content:space-between; align-items:center; padding:10px 2px; color:var(--muted); font:500 12px Inter; border-top:1px solid var(--line); margin-top:4px}
.fab{display:none; position:fixed; right:14px; bottom:14px; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#0f172a; color:#fff; font-size:18px; z-index:20}
.mobile-toc{display:none; position:fixed; right:14px; bottom:66px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; max-width:220px; z-index:20}
.mobile-toc a{display:block; padding:8px 10px; border-radius:10px; color:var(--ink); font:500 13px Inter}
.mobile-toc.open{display:grid}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .toc{display:none}
  .grid2{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr 1fr}
  .map-pane{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr 1fr}
  .builder__grid{grid-template-columns:1fr}
  .weeks{grid-template-columns:1fr}
  .fab{display:grid; place-items:center}
}
@media (max-width: 560px){
  .hero h1{font-size:24px}
  .hero__grid{padding:14px 0 12px; gap:12px}
  .cases{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}
@media print{
  .progress,.toc,.fab,.mobile-toc,.hero__cta{display:none !important}
  body{background:#fff}
  .hero,.card{box-shadow:none; border-color:#ddd}
  .layout{grid-template-columns:1fr}
}