:root {
  --bg: #f4f1ea;
  --paper: #fffdf8;
  --ink: #1d232a;
  --muted: #65707c;
  --line: #d9d6cf;
  --graphite: #20262d;
  --graphite-2: #2c333b;
  --accent: #d34a28;
  --accent-2: #ef6d3d;
  --blue: #426a8c;
  --violet: #6f5a8a;
  --green: #2d775a;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(31, 39, 47, .10);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(rgba(66,106,140,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66,106,140,.035) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px;
  line-height: 1.65;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(211,74,40,.35); outline-offset: 3px; }
code, pre, .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.section { padding: 88px 0; }
.section-sm { padding: 58px 0; }
.section-dark { background: var(--graphite); color: #f6f3ed; }
.section-paper { background: rgba(255,253,248,.82); border-block: 1px solid var(--line); }
.eyebrow { margin: 0 0 12px; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.section-dark .eyebrow { color: #ff936e; }
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -.035em; margin: 0 0 18px; }
h1 { font-size: clamp(2.8rem, 6vw, 5.8rem); max-width: 950px; }
h2 { font-size: clamp(2rem, 4vw, 3.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.65rem); }
p { margin: 0 0 18px; }
.lead { font-size: clamp(1.08rem, 1.8vw, 1.28rem); color: var(--muted); max-width: 760px; }
.section-dark .lead, .section-dark .muted { color: #b9c0c8; }
.muted { color: var(--muted); }
.kicker { font-size: .88rem; font-weight: 700; color: var(--blue); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,241,234,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(217,214,207,.85);
}
.navbar { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 900; letter-spacing: -.04em; }
.brand-mark { width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 9px; display: grid; place-items: center; color: var(--accent); font-family: monospace; font-weight: 900; transform: rotate(-2deg); }
.nav-links { margin-left: auto; display: flex; gap: 24px; align-items: center; font-size: .96rem; font-weight: 650; }
.nav-links a:hover { color: var(--accent); }
.nav-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span { display:block; width:20px; height:2px; background:var(--ink); margin:4px auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 800; border: 1px solid transparent; transition: transform .18s ease, background .18s ease, border-color .18s ease; cursor: pointer; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(211,74,40,.18); }
.btn-primary:hover { background: #ba3d20; }
.btn-secondary { border-color: var(--line); background: var(--paper); }
.btn-dark { background: var(--graphite); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,.18); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero { padding: 90px 0 68px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 54px; align-items: center; }
.hero-copy h1 span { color: var(--accent); }
.hero-copy .lead { margin-top: 24px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.pill { padding: 7px 11px; border-radius: 999px; background: #ece8df; border: 1px solid var(--line); font-size:.84rem; font-weight:700; color:#525d68; }
.code-window { background: #1e242b; border-radius: 24px; box-shadow: 0 28px 70px rgba(30,36,43,.22); overflow: hidden; border: 1px solid #39414b; transform: rotate(1deg); }
.window-bar { height: 48px; display:flex; align-items:center; gap:8px; padding:0 16px; background:#282f37; border-bottom:1px solid #3a424c; }
.dot { width:10px; height:10px; border-radius:50%; background:#66717e; }.dot:nth-child(1){background:#db6243}.dot:nth-child(2){background:#d8a33e}.dot:nth-child(3){background:#4f9e72}
.file-tab { margin-left:14px; color:#c7cdd4; font:600 .78rem/1 monospace; }
.code-body { display:grid; grid-template-columns: 44px 1fr; padding:24px 0; font: .92rem/1.8 monospace; overflow:auto; }
.line-nos { color:#5f6b78; text-align:right; padding-right:12px; user-select:none; }
.code-lines { color:#d7dee6; white-space:pre; padding-right:20px; }
.syntax-key { color:#c792ea; }.syntax-type { color:#82aaff; }.syntax-string { color:#c3e88d; }.syntax-fn { color:#ffcb6b; }.syntax-comment { color:#77828f; }
.console { margin:0 18px 18px; padding:14px 16px; border:1px solid #3a424c; background:#171c21; border-radius:12px; color:#8fd6aa; font: .8rem/1.6 monospace; }

.fact-strip { background: var(--paper); border-block:1px solid var(--line); }
.facts { display:grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding:26px; border-right:1px solid var(--line); }.fact:last-child{border-right:0}
.fact strong { display:block; font-size:1.05rem; }.fact span{color:var(--muted); font-size:.9rem}

.split { display:grid; grid-template-columns: 1fr 1fr; gap:52px; align-items:center; }
.info-panel { padding:30px; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow); }
.stack-list { display:grid; gap:12px; margin-top:22px; }
.stack-item { display:grid; grid-template-columns: 44px 1fr; gap:14px; padding:15px; background:#f3efe7; border-radius:14px; }
.stack-icon { width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:var(--graphite); color:white; font-family:monospace; }
.stack-item strong{display:block}.stack-item span{font-size:.92rem;color:var(--muted)}

.path-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:34px; position:relative; }
.path-grid::before { content:""; position:absolute; left:6%; right:6%; top:37px; height:2px; background:linear-gradient(90deg,var(--accent),var(--blue),var(--violet)); z-index:0; }
.path-step { position:relative; z-index:1; padding:18px 14px 22px; text-align:center; }
.path-node { width:56px; height:56px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center; background:var(--paper); border:2px solid var(--graphite); font:800 .85rem monospace; box-shadow:0 0 0 7px var(--bg); }
.path-step:nth-child(4) .path-node, .path-step:nth-child(5) .path-node, .path-step:nth-child(6) .path-node { border-color:var(--accent); }
.path-step p { font-size:.86rem;color:var(--muted); }

.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.section-head > div { max-width:760px; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product-card { background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; min-height:100%; transition:transform .18s ease, box-shadow .18s ease; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.product-cover { min-height:190px; padding:20px; background:linear-gradient(140deg,#252c34,#39434d); color:white; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }
.product-cover::before { content:"{ }"; position:absolute; right:-8px; top:10px; font:900 7rem/1 monospace; opacity:.07; }
.product-cover::after { content:""; position:absolute; width:130px; height:130px; border:1px solid rgba(255,255,255,.14); border-radius:30px; right:-38px; bottom:-54px; transform:rotate(28deg); }
.product-cover[data-product="1"]{background:linear-gradient(145deg,#35414a,#556771)}
.product-cover[data-product="2"]{background:linear-gradient(145deg,#5a3d72,#8a5f9b)}
.product-cover[data-product="3"]{background:linear-gradient(145deg,#365d78,#477fa4)}
.product-cover[data-product="4"]{background:linear-gradient(145deg,#5c3427,#b04e2d)}
.product-cover[data-product="5"]{background:linear-gradient(145deg,#294d4a,#3f7b72)}
.product-cover[data-product="6"]{background:linear-gradient(145deg,#30314b,#625c96)}
.product-cover[data-product="7"]{background:linear-gradient(145deg,#4e2a26,#d05232)}
.product-cover[data-product="8"]{background:linear-gradient(145deg,#182833,#9a4a2f)}
.cover-top { display:flex; justify-content:space-between; font:.75rem monospace; text-transform:uppercase; letter-spacing:.08em; opacity:.9; }
.cover-name { font-size:1.55rem; font-weight:900; letter-spacing:-.04em; max-width:190px; line-height:1.05; }
.cover-code { font:.75rem/1.45 monospace; opacity:.72; }
.product-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.product-topline { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:10px; }
.badge { display:inline-flex; align-items:center; min-height:28px; padding:0 9px; border-radius:999px; background:#ede8df; border:1px solid var(--line); font-size:.74rem; font-weight:800; }
.price { font-weight:900; font-size:1.08rem; }
.product-body h3 { margin-bottom:8px; }.product-tagline{font-weight:700;color:#4d5863;min-height:48px}.product-desc{font-size:.92rem;color:var(--muted)}
.topic-list { display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 18px; }
.topic-list span { font-size:.73rem; padding:5px 8px; border-radius:8px; background:#f2eee6; color:#59636e; border:1px solid #e2ddd4; }
.product-body .btn { margin-top:auto; }
.catalog-error { grid-column:1/-1; padding:28px; border:1px solid #dcb5aa; background:#fff5f1; border-radius:16px; color:#703a2e; }

.featured { display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; align-items:stretch; }
.featured-cover .product-cover { min-height:100%; border-radius:22px; }
.featured-content { padding:38px; border-radius:22px; background:#2b323a; color:white; }
.module-preview { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:24px 0; }
.module-chip { padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.04); font-size:.88rem; }

.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.topic-card { padding:24px; background:var(--paper); border:1px solid var(--line); border-radius:16px; }
.topic-icon { width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#f0e9df;color:var(--accent);font:900 1rem monospace;margin-bottom:16px }
.topic-card p { color:var(--muted);font-size:.92rem;margin-bottom:0 }

.process-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:process; }
.process-card { counter-increment:process; padding:22px; border-top:3px solid var(--accent); background:var(--paper); border-radius:0 0 16px 16px; }
.process-card::before { content:"0" counter(process); display:block; font:800 .78rem monospace; color:var(--accent); margin-bottom:14px; }
.process-card p { color:var(--muted);font-size:.9rem;margin:0 }

.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.benefit { padding:26px; border-radius:18px; border:1px solid #3a424c; background:#262d34; }
.benefit strong { display:block; margin-bottom:8px; }.benefit p{color:#b8c0c8;margin:0;font-size:.92rem}

.lesson-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }
.lesson-code { background:#1e242b;border-radius:18px;overflow:hidden; }
.lesson-notes { display:grid; gap:14px; }
.note-card { padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--paper); }
.note-card .mono { color:var(--accent);font-weight:800;font-size:.8rem; }
.output-box { margin-top:14px;padding:14px;background:#edf7f0;border:1px solid #cfe4d5;border-radius:12px;font: .82rem/1.5 monospace;color:#24543c; }

.levels { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.level-card { padding:28px;border-radius:18px;background:var(--paper);border:1px solid var(--line); }
.level-card h3{display:flex;align-items:center;justify-content:space-between}.level-count{font:.76rem monospace;color:var(--muted)}
.level-products { display:grid;gap:10px;margin-top:18px; }
.level-product { padding:11px 12px;border-radius:10px;background:#f2eee7;display:flex;justify-content:space-between;gap:12px;font-size:.9rem; }

.faq-list { max-width:900px; margin:34px auto 0; border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-question { width:100%; text-align:left; border:0; background:transparent; color:inherit; padding:21px 46px 21px 0; font-weight:800; cursor:pointer; position:relative; }
.faq-question::after { content:"+";position:absolute;right:4px;top:17px;font-size:1.5rem;color:var(--accent);font-weight:500; }
.faq-question[aria-expanded="true"]::after { content:"−"; }
.faq-answer { display:none; padding:0 0 22px; color:var(--muted); max-width:780px; }
.faq-answer.open { display:block; }

.cta-panel { padding:44px; border-radius:24px; background:linear-gradient(135deg,#f0e4d9,#fffaf3); border:1px solid #dfd3c7; display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center; }
.cta-panel p { color:var(--muted);max-width:700px;margin:0 }

.site-footer { background:#191f25;color:#d9dfe5;padding:58px 0 30px; }
.footer-grid { display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px; }
.footer-brand p{color:#9fa8b1;max-width:370px}.footer-col h4{font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;color:#fff}.footer-col a{display:block;color:#aeb7c0;margin:8px 0;font-size:.92rem}.footer-col a:hover{color:#fff}
.footer-bottom { margin-top:38px;padding-top:22px;border-top:1px solid #303840;display:flex;justify-content:space-between;gap:20px;color:#8d98a3;font-size:.86rem; }

.page-hero { padding:72px 0 52px; border-bottom:1px solid var(--line); background:rgba(255,253,248,.72); }
.page-hero .lead{max-width:820px}.breadcrumbs{font-size:.84rem;color:var(--muted);margin-bottom:22px}.breadcrumbs a:hover{color:var(--accent)}
.prose-wrap { display:grid;grid-template-columns:230px 1fr;gap:46px;align-items:start; }
.prose-nav { position:sticky;top:105px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--paper); }
.prose-nav a{display:block;padding:8px 0;color:var(--muted);font-size:.9rem}.prose-nav a:hover{color:var(--accent)}
.prose { max-width:820px; }.prose h2{font-size:2rem;margin-top:42px}.prose h3{margin-top:28px}.prose ul{padding-left:22px}.prose li{margin:8px 0}.callout{padding:20px 22px;border-left:4px solid var(--accent);background:#fff7f2;border-radius:0 14px 14px 0;margin:24px 0}

.product-hero { padding:64px 0; }
.product-hero-grid { display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center; }
.product-hero h1{font-size:clamp(2.7rem,5vw,4.9rem)}
.product-details-row { display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px; }
.detail-chip { padding:8px 11px;border-radius:10px;background:#ebe6dd;font-size:.84rem;font-weight:750; }
.product-price-large { font-size:2rem;font-weight:950;margin-top:20px; }
.product-cover-large { min-height:470px;border-radius:26px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow); }
.product-cover-large .cover-name{font-size:3rem;max-width:360px}.product-cover-large .cover-code{font-size:.9rem}
.product-layout { display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start; }
.product-main { display:grid;gap:24px; }
.content-card { padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--paper); }
.content-card h2{font-size:1.8rem}.content-card h3{margin-top:24px}.check-list{list-style:none;padding:0;margin:18px 0 0}.check-list li{padding:8px 0 8px 28px;position:relative}.check-list li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}.module-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;counter-reset:mods;list-style:none;padding:0}.module-list li{counter-increment:mods;padding:14px 14px 14px 48px;background:#f3efe7;border-radius:12px;position:relative;font-size:.92rem}.module-list li::before{content:counter(mods,decimal-leading-zero);position:absolute;left:14px;top:14px;font:.78rem monospace;color:var(--accent)}
.product-sidebar { position:sticky;top:100px;display:grid;gap:16px; }.buy-box{padding:24px;border-radius:18px;background:var(--graphite);color:white}.buy-box p{color:#b8c0c8;font-size:.9rem}.buy-box .btn{width:100%;margin-top:8px}.mini-list{display:grid;gap:8px;margin:18px 0}.mini-list span{font-size:.86rem;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.related-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.related-card { padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--paper); }.related-card p{color:var(--muted);font-size:.88rem}.related-card strong{display:block;margin-bottom:7px}

.contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px; }
.contact-card { padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--paper); }
.contact-card ul{padding-left:20px}.email-link{font-size:1.2rem;font-weight:900;color:var(--accent);overflow-wrap:anywhere}

.loading-page { min-height:100vh;display:grid;place-items:center;padding:30px;background:var(--bg); }
.loading-card { width:min(100%,560px);text-align:center;padding:42px;border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow); }
.spinner { width:48px;height:48px;margin:0 auto 22px;border-radius:50%;border:4px solid #e1ddd4;border-top-color:var(--accent);animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-card .brand{justify-content:center;margin-bottom:24px}.loading-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}

@media (max-width: 1020px) {
  .hero-grid,.split,.featured,.lesson-grid,.product-hero-grid,.product-layout,.contact-grid{grid-template-columns:1fr}
  .hero-copy h1{max-width:850px}.hero-grid{gap:34px}.code-window{transform:none;max-width:760px}.product-grid{grid-template-columns:repeat(2,1fr)}
  .topic-grid{grid-template-columns:repeat(2,1fr)}.path-grid{grid-template-columns:repeat(3,1fr)}.path-grid::before{display:none}.process-grid{grid-template-columns:repeat(2,1fr)}.benefit-grid{grid-template-columns:repeat(2,1fr)}.levels{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}.footer-grid .footer-col:last-child{grid-column:2/4}.product-sidebar{position:static}.product-cover-large{min-height:380px}.prose-wrap{grid-template-columns:1fr}.prose-nav{position:static;display:flex;flex-wrap:wrap;gap:10px}.prose-nav a{padding:5px 8px;background:#f2eee7;border-radius:8px}
}
@media (max-width: 760px) {
  .container{width:min(calc(100% - 28px),var(--container))}.section{padding:64px 0}.navbar{min-height:68px}.nav-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:14px;right:14px;margin:0;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:4px}.nav-links.open{display:flex}.nav-links a{padding:10px 12px;border-radius:10px}.nav-links .btn{margin-top:4px}.hero{padding-top:58px}.facts{grid-template-columns:repeat(2,1fr)}.fact:nth-child(2){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}.path-grid{grid-template-columns:repeat(2,1fr)}.product-grid,.topic-grid,.benefit-grid,.related-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}.module-preview,.module-list{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.cta-panel{grid-template-columns:1fr;padding:30px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid .footer-col:last-child{grid-column:auto}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column}.product-cover-large .cover-name{font-size:2.35rem}.product-cover-large{min-height:330px}.code-body{font-size:.78rem}.hero-meta{margin-bottom:4px}
}
@media (max-width: 520px) {
  h1{font-size:2.65rem}.hero{padding-bottom:48px}.fact{padding:20px 14px}.path-grid{grid-template-columns:1fr 1fr}.path-step{padding-inline:5px}.product-card{border-radius:16px}.product-cover{min-height:175px}.page-hero{padding-top:52px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.btn-row .btn{width:100%}.loading-card{padding:30px 20px}.product-cover-large{min-height:300px;padding:22px}.product-cover-large .cover-name{font-size:2rem}.content-card{padding:22px}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* --- Premium covers, unified grid background, and visual assets --- */
body {
  background-attachment: fixed;
}
.section-paper,
.section-dark,
.fact-strip,
.page-hero,
.loading-page {
  background: transparent;
  color: var(--ink);
}
.section-dark .eyebrow,
.section-dark .lead,
.section-dark .muted {
  color: inherit;
}
.fact-strip { border-block: 0; }
.facts,
.info-panel,
.path-grid,
.cta-panel,
.content-card,
.contact-card,
.level-card,
.topic-card,
.process-card,
.related-card,
.prose-nav,
.loading-card,
.buy-box {
  box-shadow: var(--shadow);
}
.facts {
  background: rgba(255,253,248,.82);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}
.site-footer {
  background: transparent;
  color: #d9dfe5;
  padding: 24px 0 30px;
}
.site-footer .container {
  background:#191f25;
  border:1px solid #303840;
  border-radius:28px;
  padding:48px 32px 28px;
}
.hero { padding: 92px 0 72px; }
.hero-grid { align-items: center; }
.hero-visual { position: relative; min-height: 650px; }
.hero-photo-card {
  position: relative;
  width: min(100%, 510px);
  margin-left: auto;
  border-radius: 28px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(31,39,47,.16);
}
.hero-photo-card img,
.image-panel img,
.asset-card img,
.product-cover-img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-photo-card::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(17,23,29,0) 55%, rgba(17,23,29,.55) 100%);
}
.floating-covers { position:absolute; left:0; bottom:18px; width: 280px; height: 320px; pointer-events:none; }
.floating-cover {
  position:absolute; width:190px; border-radius:18px; overflow:hidden;
  box-shadow:0 18px 38px rgba(31,39,47,.22);
  border:1px solid rgba(255,255,255,.6);
  background:#fff;
}
.floating-cover img { display:block; width:100%; height:auto; }
.floating-cover-back { left:0; bottom:44px; transform:rotate(-10deg); }
.floating-cover-front { right:4px; bottom:0; transform:rotate(8deg); }
.image-panel {
  min-height: 460px;
  border-radius: 24px;
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.asset-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.asset-card {
  background: rgba(255,253,248,.92);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.asset-card img { aspect-ratio: 4 / 3; }
.asset-copy { padding: 22px; }
.asset-copy p { color: var(--muted); margin-bottom: 0; }
.product-grid { gap: 22px; }
.product-card {
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(31,39,47,.08);
}
.product-cover {
  min-height: 300px;
  padding: 0;
  background: #e9ecef;
  color: white;
}
.product-cover.product-cover-large { min-height: 680px; }
.product-cover-img { position:absolute; inset:0; }
.product-cover-overlay {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,24,31,0.08) 0%, rgba(18,24,31,0.1) 34%, rgba(18,24,31,.8) 100%);
}
.cover-top,
.cover-bottom {
  position: absolute;
  left: 18px; right: 18px; z-index: 2;
}
.cover-top { top: 16px; }
.cover-bottom { bottom: 18px; }
.cover-top span {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.18);
  padding: 6px 10px;
  border-radius: 999px;
}
.cover-name { max-width: none; font-size: 1.9rem; text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.product-cover-large .cover-name { font-size: 3.35rem; max-width: 380px; }
.cover-code {
  margin-top: 10px;
  display: inline-block;
  max-width: 90%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,20,26,.42);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  font: 500 .88rem/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
}
.featured-cover .product-cover,
.featured-content,
.buy-box,
.benefit,
.module-chip,
.note-card,
.code-window,
.lesson-code {
  border-radius: 24px;
}
.featured-content,
.buy-box,
.benefit {
  background: #20262d;
  color: #f6f3ed;
}
.featured-content .muted,
.buy-box p,
.benefit p { color: #c0c8d0; }
.page-hero,
.section-paper { border-block: 0; }
.page-hero .container,
.section-paper > .container:first-child {
  position: relative;
}
.loading-card { background: rgba(255,253,248,.94); }
.split-reverse-mobile { align-items: center; }
@media (max-width: 1020px) {
  .hero-visual { min-height: auto; }
  .hero-photo-card { margin: 0 auto; }
  .floating-covers { position: relative; width:100%; height:250px; margin-top: 18px; }
  .floating-cover-back { left: 20px; }
  .floating-cover-front { right: 20px; }
  .asset-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .split-reverse-mobile { display:flex; flex-direction:column-reverse; }
  .hero-visual { display:grid; gap:16px; }
  .hero-photo-card { width:100%; }
  .floating-covers { height: 220px; }
  .floating-cover { width: 150px; }
  .product-cover { min-height: 260px; }
  .product-cover.product-cover-large { min-height: 520px; }
  .site-footer .container { padding: 36px 22px 24px; }
}

/* --- Final premium polish --- */
body {
  background:
    linear-gradient(rgba(66,106,140,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66,106,140,.024) 1px, transparent 1px),
    var(--bg);
  background-size: 36px 36px;
  background-attachment: fixed;
}
h1, h2 {
  font-family: Georgia, "Times New Roman", ui-serif, serif;
  font-weight: 700;
  letter-spacing: -.045em;
}
h3, h4 { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.brand { letter-spacing: -.03em; }
.brand-mark {
  position:relative;
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:#20262d;
  color:#fffdf8;
  transform:none;
  overflow:hidden;
  box-shadow:0 7px 18px rgba(31,39,47,.12);
}
.brand-mark b {
  font:900 17px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  position:absolute;
  left:8px;
  top:8px;
}
.brand-mark i {
  font:900 24px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  color:var(--accent);
  position:absolute;
  right:6px;
  top:4px;
  transform:skewX(-9deg);
}
.btn { border-radius:12px; min-height:48px; padding-inline:20px; }
.pill { border-radius:10px; }
.badge { border-radius:8px; }
.hero h1 { line-height: .98; }
.hero-copy h1 span { font-style: italic; }
.hero-photo-card { aspect-ratio: 4 / 5; }
.hero-photo-card img { object-position:center center; }
.floating-covers { left:-30px; bottom:24px; width:230px; height:300px; }
.floating-cover { width:205px; border-radius:14px; }
.floating-cover-front { right:auto; left:0; bottom:0; transform:rotate(-4deg); }
.product-card { overflow:hidden; }
.product-cover {
  position:relative;
  aspect-ratio:3 / 4;
  min-height:0;
  overflow:hidden;
  background:#e8e5df;
}
.product-cover-img { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.product-card:hover { transform:translateY(-3px); box-shadow:0 22px 52px rgba(31,39,47,.13); }
.product-card:hover .product-cover-img { transform:scale(1.015); }
.cover-collection {
  position:absolute;
  z-index:2;
  top:13px;
  left:13px;
  right:13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.cover-collection span {
  padding:6px 8px;
  border-radius:8px;
  background:rgba(255,253,248,.9);
  border:1px solid rgba(255,255,255,.8);
  color:#20262d;
  font:800 .65rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.08em;
  box-shadow:0 6px 20px rgba(31,39,47,.08);
  backdrop-filter:blur(8px);
}
.cover-top, .cover-bottom, .product-cover-overlay { display:none !important; }
.product-body h3 { font-size:1.35rem; margin-bottom:7px; }
.product-tagline { min-height:auto; margin-bottom:9px; }
.book-mockup {
  position:relative;
  width:min(90%, 440px);
  margin:0 auto;
  padding:28px 22px 38px 36px;
  perspective:1200px;
}
.book-mockup .product-cover-large {
  aspect-ratio:3 / 4;
  min-height:0;
  border-radius:8px 18px 18px 8px;
  overflow:hidden;
  transform:rotateY(-7deg) rotateZ(1deg);
  transform-origin:left center;
  box-shadow:25px 28px 50px rgba(31,39,47,.22), 7px 8px 16px rgba(31,39,47,.12);
  border:1px solid rgba(255,255,255,.7);
}
.book-spine {
  position:absolute;
  z-index:3;
  left:18px;
  top:37px;
  bottom:48px;
  width:33px;
  border-radius:8px 0 0 8px;
  background:linear-gradient(180deg,#252c34,#171d22);
  color:#fffdf8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  box-shadow:-8px 14px 24px rgba(31,39,47,.16);
}
.book-spine span:first-child {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font:800 .62rem/1 Inter, sans-serif;
  letter-spacing:.15em;
}
.book-spine span:last-child { font:800 .65rem/1 monospace; color:#ff8b66; }
.book-shadow {
  position:absolute;
  left:55px;
  right:12px;
  bottom:16px;
  height:42px;
  background:rgba(31,39,47,.18);
  filter:blur(22px);
  border-radius:50%;
  transform:skewX(-12deg);
}
.book-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:18px 12px 0 8px;
  color:var(--muted);
  font:800 .68rem/1.2 monospace;
  letter-spacing:.09em;
}
.product-hero-grid { grid-template-columns:1.05fr .95fr; }
.product-hero .lead { max-width:700px; }
.topic-card, .process-card, .level-card, .content-card, .contact-card, .info-panel, .note-card, .related-card {
  background:rgba(255,253,248,.88);
  backdrop-filter:blur(7px);
}
.image-panel img { object-position:center center; }
.asset-card img { object-position:center center; }
.benefit-grid { grid-template-columns:repeat(3,1fr); }
.benefit { border:1px solid #333b44; box-shadow:0 18px 40px rgba(31,39,47,.11); }
.site-footer .brand-mark { background:#fffdf8; color:#20262d; }
.site-footer .brand-mark b { color:#20262d; }
.site-footer .brand-mark i { color:var(--accent); }
@media (max-width: 1020px) {
  .book-mockup { width:min(70%,430px); }
  .product-hero-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .floating-covers { display:none; }
  .hero-photo-card { aspect-ratio: 4 / 4.8; }
  .product-cover { aspect-ratio:3 / 4; }
  .book-mockup { width:min(88%,390px); padding-left:30px; }
  .book-mockup .product-cover-large { transform:rotateY(-4deg) rotateZ(.5deg); }
  .book-spine { left:13px; width:29px; }
  .benefit-grid { grid-template-columns:1fr; }
}


/* --- Typography balance pass --- */
:root {
  --display-serif: Georgia, "Times New Roman", ui-serif, serif;
  --ui-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
body { font-family: var(--ui-sans); }

/* Default headings stay clean and consistent. */
h1, h2, h3, h4 {
  font-family: var(--ui-sans);
  font-style: normal;
  letter-spacing: -.035em;
}
h2 {
  font-size: clamp(1.9rem, 3.1vw, 3.05rem);
  line-height: 1.06;
  font-weight: 760;
  max-width: 920px;
}
h3 {
  font-size: clamp(1.18rem, 1.7vw, 1.5rem);
  line-height: 1.15;
  font-weight: 760;
}

/* Serif is reserved for true display titles only. */
.hero h1,
.page-hero h1,
.product-hero h1 {
  font-family: var(--display-serif);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.045em;
}
.hero h1 {
  font-size: clamp(2.75rem, 4.7vw, 4.65rem);
  line-height: 1.01;
  max-width: 720px;
}
.hero-copy h1 span {
  font-family: inherit;
  font-style: normal;
  color: var(--accent);
}
.page-hero h1 {
  font-size: clamp(2.45rem, 4.3vw, 4.3rem);
  line-height: 1.02;
  max-width: 900px;
}
.product-hero h1 {
  font-size: clamp(2.6rem, 4.4vw, 4.45rem);
  line-height: 1.01;
}

/* Monospace is only a technical accent, never a competing display font. */
code, pre, .mono, .file-tab, .code-body, .console, .book-meta {
  font-family: var(--ui-mono);
}
.eyebrow {
  font-family: var(--ui-sans);
  font-size: .74rem;
  letter-spacing: .12em;
}
.cover-collection span,
.book-spine span:first-child {
  font-family: var(--ui-sans);
}
.book-spine span:last-child {
  font-family: var(--ui-mono);
}

/* More breathing room prevents headings from looking like stacked type samples. */
.section-head > div { max-width: 850px; }
.section-head h2 { margin-bottom: 14px; }
.lead { line-height: 1.6; }
.brand { font-family: var(--ui-sans); }

@media (max-width: 1020px) {
  .hero h1 { max-width: 820px; }
}
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(2.45rem, 11vw, 3.45rem); max-width: 100%; }
  .page-hero h1, .product-hero h1 { font-size: clamp(2.3rem, 10vw, 3.35rem); }
  h2 { font-size: clamp(1.8rem, 7.8vw, 2.55rem); }
}
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(2.25rem, 10.5vw, 3rem); }
  .eyebrow { letter-spacing: .095em; }
}

/* Structural expansion */
.nav-links{white-space:nowrap}.nav-links a.active{color:var(--accent)}.footer-grid-3{grid-template-columns:1.05fr .8fr .8fr}.footer-col{display:flex;flex-direction:column;gap:10px}.social-mini{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.social-mini a{display:inline-flex!important;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:10px}.social-tile{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#fffdf8;color:#20262d;font-weight:800}.center-action{text-align:center;margin-top:28px}.free-guide-panel{display:grid;grid-template-columns:minmax(240px,360px) 1fr;gap:50px;align-items:center;padding:34px;border:1px solid var(--line);border-radius:24px;background:rgba(255,253,248,.9);box-shadow:0 22px 50px rgba(31,39,47,.08)}.update-grid,.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.contact-form{display:grid;gap:15px}.contact-form label{display:grid;gap:7px;font-weight:700}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:#fffdf8;color:var(--ink);font:inherit}.form-note{font-size:.9rem;color:var(--muted)}.form-warning{color:#8a4028;font-weight:700}.role-line{font-size:.9rem;color:var(--muted);margin:8px 0 12px}.fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.final-product-block{display:grid;grid-template-columns:1fr minmax(230px,.35fr);gap:32px;align-items:center}.final-cta{padding:24px;border-left:1px solid var(--line)}.related-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}.related-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,253,248,.9);text-decoration:none;color:inherit}.extra-module{display:none}.extra-module.shown{display:list-item}.key-characteristics{margin-top:20px}.loading-card{max-width:720px;margin:8vh auto;padding:46px;border:1px solid var(--line);border-radius:24px;background:#fffdf8;text-align:center}.loading-spinner{width:46px;height:46px;margin:0 auto 22px;border:4px solid #d8d5ce;border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}.loading-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1180px){.nav-links{gap:14px}.nav-links a{font-size:.9rem}}
@media(max-width:920px){body.nav-open{overflow:hidden}.nav-toggle{display:flex;position:relative;z-index:1002}.nav-links{position:fixed;z-index:1001;inset:0;display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:92px 24px 32px;background:rgba(26,31,37,.98);overflow-y:auto;transform:translateX(100%);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .28s ease;white-space:normal}.nav-links.open{transform:translateX(0);opacity:1;pointer-events:auto}.nav-links a{font-size:1.25rem;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff}.footer-grid-3,.update-grid,.contact-split,.fit-grid,.final-product-block,.related-row,.free-guide-panel{grid-template-columns:1fr}.final-cta{border-left:0;border-top:1px solid var(--line);padding-left:0}.free-guide-panel{gap:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}


/* --- Revision: richer homepage, stable hero, contact/footer, policies --- */
.hero-visual{isolation:isolate}.hero-photo-card{z-index:1}.floating-covers{z-index:3}.hero-photo-badge{z-index:4}
.hero-photo-card>img{position:absolute;inset:0}.hero-photo-card{min-height:0}
.topic-grid{grid-template-columns:repeat(3,1fr)}
.process-grid{grid-template-columns:repeat(5,1fr)}
.footer-shell{overflow:hidden}
.footer-grid-3{grid-template-columns:1.18fr .72fr .72fr;gap:54px}
.contact-details-block{display:grid;gap:9px}.contact-details-block p{margin:0;color:#c9d1d8;line-height:1.55}.contact-details-block strong:not(.placeholder-token){color:#f6f3ed}.placeholder-token{display:inline-block;padding:1px 5px;border-radius:4px;background:rgba(85,142,162,.16);color:#b9d9e3;border-bottom:1px solid rgba(119,183,203,.42);font-weight:800}
.social-mini{margin-top:17px}.social-mini a{transition:transform .18s ease,border-color .18s ease,background .18s ease}.social-mini a:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.035)}
.social-light a{color:var(--ink)!important;border-color:var(--line)!important;background:rgba(255,253,248,.72)}.social-light .social-tile{background:var(--graphite);color:#fff}

.contact-form-grid{grid-template-columns:1fr 1fr;gap:15px 16px}.contact-form-grid .form-full{grid-column:1/-1}.form-actions{display:flex!important;align-items:center;gap:16px;grid-template-columns:none!important}.form-actions .form-note{margin:0;flex:1}.contact-form select{font:inherit}.contact-form textarea{resize:vertical;min-height:120px}
.contact-information-card .contact-details-block p{color:var(--ink)}.contact-information-card .contact-details-block strong:not(.placeholder-token){color:var(--ink)}.contact-safety-note{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.policy-hero .policy-updated{font-weight:800;color:var(--muted);margin:-4px 0 18px}.policy-layout{max-width:980px}.policy-prose{max-width:900px;margin:0 auto}.policy-prose h2{font-family:var(--ui-sans);font-size:clamp(1.35rem,2.5vw,2rem);margin-top:44px;margin-bottom:14px;letter-spacing:-.025em}.policy-prose h2:first-child{margin-top:0}.policy-prose p{color:#3f4954}.policy-prose ul,.policy-prose ol{padding-left:25px;margin:4px 0 24px}.policy-prose li{margin:8px 0;color:#3f4954}.policy-crosslink{color:var(--blue);text-decoration:underline;text-underline-offset:3px;font-weight:700}.policy-crosslink:hover{color:var(--accent)}.policy-prose .placeholder-token{color:#315f70;background:rgba(66,106,140,.1);border-bottom-color:rgba(66,106,140,.35)}
@media(max-width:1020px){.topic-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.footer-grid-3{grid-template-columns:1.2fr 1fr 1fr;gap:30px}}
@media(max-width:920px){.footer-grid-3{grid-template-columns:1fr}.contact-form-grid{grid-template-columns:1fr}.contact-form-grid .form-full{grid-column:auto}.form-actions{align-items:flex-start;flex-direction:column}.topic-grid,.process-grid{grid-template-columns:1fr}.hero-visual{width:min(100%,620px);margin:0 auto}}
@media(max-width:760px){.hero-photo-card>img{position:relative}.hero-photo-card{min-height:auto}.facts{grid-template-columns:1fr 1fr}.policy-prose h2{margin-top:34px}}
@media(max-width:520px){.facts{grid-template-columns:1fr}.fact{border-right:0!important;border-bottom:1px solid var(--line)}.fact:last-child{border-bottom:0}}

.footer-grid-3 .footer-col:last-child{grid-column:auto}

/* --- Refined footer + unique editorial visuals --- */
.site-footer {
  width: 100%;
  margin: 0;
  padding: 56px 0 24px;
  background: #191f25;
  color: #d9dfe5;
  border-top: 1px solid #303840;
}
.site-footer .container {
  width: min(calc(100% - 40px), var(--container));
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.footer-shell { overflow: visible; }
.footer-grid-3 {
  grid-template-columns: 1.16fr .78fr .78fr;
  gap: 64px;
  align-items: start;
}
.footer-col h4 { color: #fffdf8; margin-bottom: 12px; }
.footer-contact .contact-details-block p { margin-bottom: 9px; }
.footer-col > a { color: #cfd6dc; }
.footer-col > a:hover { color: #fff; }
.footer-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid #303840;
}
.site-footer .social-mini { margin-top: 18px; }
.site-footer .social-mini a { background: rgba(255,255,255,.025); }

.image-panel img[src*="visual-"],
.asset-card img[src*="visual-"] {
  object-fit: cover;
  object-position: center;
}
.asset-card img[src*="visual-"] { aspect-ratio: 3 / 2; }
.contact-form-intro {
  margin: -4px 0 18px;
  color: var(--muted);
  max-width: 640px;
}
.contact-card:has(.contact-form) {
  box-shadow: 0 18px 46px rgba(31,39,47,.08);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(211,74,40,.65);
  box-shadow: 0 0 0 3px rgba(211,74,40,.09);
  outline: none;
}

@media (max-width: 920px) {
  .site-footer { padding-top: 44px; }
  .footer-grid-3 { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { margin-top: 30px; }
}
@media (max-width: 760px) {
  .site-footer .container { width: min(calc(100% - 28px), var(--container)); padding: 0; }
}