/* ============================================
   SEOSource – Main Stylesheet
   Aesthetic: Editorial / Magazine + Dark Tech
   ============================================ */

:root {
  --navy: #0a0f1e;
  --navy-mid: #111827;
  --navy-light: #1a2540;
  --green: #00e87a;
  --green-dim: #00b85f;
  --green-glow: rgba(0,232,122,0.12);
  --white: #f8faff;
  --grey-light: #e2e8f4;
  --grey-mid: #8b96b0;
  --grey-dark: #3a4560;
  --accent2: #ff6b35;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --radius: 12px;
  --shadow: 0 8px 40px rgba(0,0,0,0.35);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

a { color: var(--green); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green-dim); }

img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }

/* ============ TYPOGRAPHY — 2026 ============ */
/* Fraunces (variable optical size + weight) for display heads  */
/* Plus Jakarta Sans for body, UI, nav — geometric humanist     */

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.02em; }

h1 {
  font-size: clamp(3rem, 7.5vw, 5.8rem);
  font-weight: 900;
  font-variation-settings: 'opsz' 72, 'SOFT' 0;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  font-weight: 700;
  font-variation-settings: 'opsz' 48;
  letter-spacing: -0.025em;
}
h3 {
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  font-weight: 700;
  font-variation-settings: 'opsz' 24;
  letter-spacing: -0.018em;
}
h4 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  font-family: var(--font-body);
}

/* Body text — Plus Jakarta Sans readable at all sizes */
p, li, td, th { letter-spacing: -0.005em; }

/* Inline code */
code, pre, .kbd, .dd-kbd {
  font-family: var(--font-mono);
  font-size: 0.88em;
  font-feature-settings: 'liga' 0;
}

.accent { color: var(--green); }

/* Nav + UI element overrides — Plus Jakarta Sans */
.navbar, .nav-links, .dropdown-toggle, .dd-label, .dd-desc,
.nav-cta-solid, .nav-cta-outline, .btn, .btn-primary, .btn-outline,
.page-nav-btn, .sidebar-widget, .footer-links, .footer-bottom,
.section-tag, .stat-banner, .table-wrap table {
  font-family: var(--font-body);
}

/* Display accents — keep Fraunces for pull-quotes and hero callouts */
.hero-title, .page-card h3, blockquote, .expert-quote blockquote {
  font-family: var(--font-display);
}

/* Numerals in stats — tabular */
.sb-val, .nc-num, .hero-stat-num {
  font-family: var(--font-display);
  font-feature-settings: 'tnum' 1;
  font-variation-settings: 'opsz' 36;
}


/* ═══════════════════════════════════════════════════════════════
   SEOSource — Modern Navigation 2026
   Replaces all previous navbar styles
═══════════════════════════════════════════════════════════════ */

/* ── Accessibility ──────────────────────────────────────────── */
#skip-link{position:fixed;top:-100px;left:16px;z-index:9999;background:#1D9E75;color:#fff;padding:10px 20px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;transition:top .2s}
#skip-link:focus{top:0}
#readingProgress{position:fixed;top:0;left:0;height:3px;z-index:1001;background:linear-gradient(90deg,#1D9E75,#0F6E56);width:0%;transition:width .1s linear;pointer-events:none}

/* ── Back to top ────────────────────────────────────────────── */
#backToTop{position:fixed;bottom:28px;right:28px;z-index:900;width:44px;height:44px;border-radius:50%;background:#1D9E75;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(29,158,117,.35);opacity:0;transform:translateY(12px) scale(.9);transition:opacity .3s,transform .3s;pointer-events:none}
#backToTop.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#backToTop:hover{background:#0F6E56;transform:translateY(-2px) scale(1.05)}
#backToTop:focus-visible{outline:2px solid #1D9E75;outline-offset:3px}

/* ── Navbar shell ───────────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(0,0,0,.07);transition:box-shadow .2s,background .2s}
.navbar.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.08)}

/* Dark mode */
@media(prefers-color-scheme:dark){
  .navbar{background:rgba(15,15,14,.92);border-bottom-color:rgba(255,255,255,.08)}
}

.nav-container{max-width:1280px;margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;gap:2px}

/* ── Logo ───────────────────────────────────────────────────── */
.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:1.45rem;font-weight:900;color:var(--white);text-decoration:none;margin-right:20px;flex-shrink:0;letter-spacing:-.03em;transition:opacity .2s}
.logo:hover{opacity:.85;color:var(--white)}
.logo-mark{width:28px;height:28px;border-radius:8px;background:#1D9E75;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo span{color:#1D9E75}

/* ── Nav items ──────────────────────────────────────────────── */
.nav-links{display:flex;list-style:none;align-items:center;gap:1px;flex:1}

.nav-links>li>a,.dropdown-toggle{display:flex;align-items:center;gap:4px;padding:6px 11px;border-radius:8px;font-family:var(--font-body);font-size:.86rem;font-weight:400;color:var(--grey-mid);background:none;border:none;cursor:pointer;text-decoration:none;transition:background .14s,color .14s;white-space:nowrap}
.nav-links>li>a:hover,.dropdown-toggle:hover,.dropdown.open>.dropdown-toggle{background:rgba(255,255,255,.08);color:var(--white)}
.nav-links>li>a.active,.dropdown-toggle.active{color:var(--white);font-weight:500}
.nav-links>li>a:focus-visible,.dropdown-toggle:focus-visible{outline:2px solid #1D9E75;outline-offset:2px}

/* Chevron on dropdown toggle */
.dropdown-toggle::after{content:'';display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;transition:transform .22s;flex-shrink:0}
.dropdown.open>.dropdown-toggle::after{transform:rotate(180deg);opacity:.9}

/* ── Dropdown panels ────────────────────────────────────────── */
.dropdown{position:relative}

.dropdown-menu{
  position:absolute;top:calc(100% + 10px);left:0;
  background:var(--white);border:1px solid rgba(0,0,0,.09);
  border-radius:14px;padding:8px;
  box-shadow:0 16px 48px rgba(0,0,0,.14),0 4px 16px rgba(0,0,0,.06);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-8px) scale(.97);transform-origin:top left;
  transition:opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .18s;
  z-index:200;min-width:230px;
}
@media(prefers-color-scheme:dark){
  .dropdown-menu{background:#1a1a18;border-color:rgba(255,255,255,.1);box-shadow:0 16px 48px rgba(0,0,0,.6)}
}
.dropdown.open>.dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.dropdown-menu.mega{min-width:480px;display:none;grid-template-columns:1fr 1fr}
.dropdown.open>.dropdown-menu.mega{display:grid}
.dropdown-menu.align-right{left:auto;right:0}

/* Section headers */
.dd-section{font-size:10.5px;font-weight:600;color:var(--grey-dark);text-transform:uppercase;letter-spacing:.07em;padding:8px 11px 3px;user-select:none}

/* Items */
.dd-item{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;cursor:pointer;text-decoration:none;transition:background .12s;width:100%}
.dd-item:hover,.dd-item.active{background:rgba(0,0,0,.05)}
@media(prefers-color-scheme:dark){.dd-item:hover,.dd-item.active{background:rgba(255,255,255,.06)}}
.dd-icon{width:32px;height:32px;border-radius:8px;background:rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.dd-item.active .dd-icon{background:#E1F5EE}
@media(prefers-color-scheme:dark){.dd-icon{background:rgba(255,255,255,.07)}.dd-item.active .dd-icon{background:rgba(29,158,117,.2)}}
.dd-body{flex:1;min-width:0}
.dd-label{font-size:13.5px;color:var(--text, #111);display:block;white-space:nowrap;font-weight:400}
.dd-item.active .dd-label{color:#0F6E56;font-weight:500}
@media(prefers-color-scheme:dark){.dd-label{color:#f0f0ee}.dd-item.active .dd-label{color:#5DCAA5}}
.dd-desc{font-size:11.5px;color:var(--grey-mid);display:block;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-badge{font-size:10px;padding:2px 7px;border-radius:50px;background:#E1F5EE;color:#085041;font-weight:600;flex-shrink:0}
.dd-divider{height:1px;background:rgba(0,0,0,.07);margin:5px 0}
@media(prefers-color-scheme:dark){.dd-divider{background:rgba(255,255,255,.07)}}

/* Search inside dropdown */
.dd-search{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.04);margin:2px 0 5px;cursor:text}
@media(prefers-color-scheme:dark){.dd-search{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.05)}}
.dd-search span{font-size:13px;color:var(--grey-mid);flex:1;user-select:none}
.dd-kbd{font-size:10.5px;padding:1px 5px;border-radius:4px;border:1px solid rgba(0,0,0,.12);color:var(--grey-mid);font-family:monospace;background:rgba(0,0,0,.04)}
@media(prefers-color-scheme:dark){.dd-kbd{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06)}}

/* ── Right-side CTAs ────────────────────────────────────────── */
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-cta-outline{padding:6px 14px;border-radius:50px;font-size:13px;color:var(--grey-light);border:1px solid rgba(255,255,255,.18);background:none;cursor:pointer;font-family:var(--font-body);text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:background .15s,border-color .15s;white-space:nowrap}
.nav-cta-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:var(--white)}
.nav-cta-solid{padding:7px 16px;border-radius:50px;font-size:13px;font-weight:600;color:#fff;background:#1D9E75;border:none;cursor:pointer;font-family:var(--font-body);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .15s,transform .12s;white-space:nowrap}
.nav-cta-solid:hover{background:#0F6E56;transform:translateY(-1px)}
.nav-cta-solid:active{transform:translateY(0)}
.nav-cta-solid:focus-visible,.nav-cta-outline:focus-visible{outline:2px solid #1D9E75;outline-offset:3px}

/* ── Hamburger ──────────────────────────────────────────────── */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:9px 10px;border-radius:9px;transition:border-color .2s}
.hamburger:hover{border-color:rgba(255,255,255,.35)}
.hamburger:focus-visible{outline:2px solid #1D9E75;outline-offset:3px}
.hamburger span{display:block;width:19px;height:1.5px;background:var(--white);border-radius:1px;transition:transform .25s,opacity .25s;transform-origin:center}
.hamburger.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile overlay */
body.nav-open::before{content:'';position:fixed;inset:0;z-index:998;background:rgba(0,0,0,.5);backdrop-filter:blur(3px)}

/* Mobile panel */
.mobile-nav-panel{display:none;position:fixed;top:62px;left:0;right:0;bottom:0;z-index:999;background:var(--navy);overflow-y:auto;border-top:1px solid rgba(255,255,255,.08)}
.mobile-nav-panel.open{display:block}

.mob-group-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--font-body);font-size:.92rem;font-weight:500;color:var(--white);cursor:pointer}
.mob-group-btn svg{transition:transform .22s;opacity:.5}
.mob-group-btn.open svg{transform:rotate(180deg);opacity:.9}
.mob-items{display:none;background:rgba(0,0,0,.2)}
.mob-items.open{display:block}
.mob-item{display:flex;align-items:center;gap:10px;padding:11px 24px;text-decoration:none;color:var(--grey-mid);font-size:.87rem;transition:background .12s,color .12s;border-bottom:1px solid rgba(255,255,255,.04)}
.mob-item:hover,.mob-item.active{background:rgba(255,255,255,.05);color:var(--white)}
.mob-item.active{color:#5DCAA5}
.mob-ctas{padding:20px 24px;display:flex;gap:10px}
.mob-ctas a{flex:1;justify-content:center;text-align:center}

/* ── Scroll-reveal ──────────────────────────────────────────── */
.reveal-ready{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal-ready.revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1!important;transform:none!important;transition:none!important}}

/* ── Focus improvements ─────────────────────────────────────── */
:focus{outline:none}
:focus-visible{outline:2px solid #1D9E75;outline-offset:3px;border-radius:4px}

/* ── Print ──────────────────────────────────────────────────── */
@media print{.navbar,#backToTop,#readingProgress,#skip-link,.mobile-nav-panel{display:none!important}}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1024px){.nav-container{padding:0 20px}}

@media(max-width:960px){
  .nav-links,.nav-right{display:none}
  .hamburger{display:flex}
}

@media(max-width:480px){
  .mob-ctas{flex-direction:column}
  .nav-cta-solid,.nav-cta-outline{width:100%;justify-content:center}
}


/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 50px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  transition: all var(--transition); cursor: pointer; border: 2px solid transparent;
}
.btn-primary {
  background: var(--green); color: var(--navy);
}
.btn-primary:hover {
  background: var(--green-dim); color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,232,122,0.3);
}
.btn-outline {
  background: transparent; color: var(--white); border-color: var(--grey-dark);
}
.btn-outline:hover {
  border-color: var(--green); color: var(--green);
  background: var(--green-glow);
}

/* ============ HERO ============ */
.hero {
  min-height: 100vh; padding-top: 70px;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 60px;
  position: relative; overflow: hidden;
  padding-left: calc((100vw - 1200px)/2 + 24px);
  padding-right: calc((100vw - 1200px)/2 + 24px);
}

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,232,122,0.06) 0%, transparent 70%),
              linear-gradient(135deg, var(--navy) 0%, #0d1829 100%);
}

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.hero-content { position: relative; z-index: 1; }
.hero-visual { position: relative; z-index: 1; }

.hero-badge {
  display: inline-block;
  background: var(--green-glow); border: 1px solid rgba(0,232,122,0.3);
  color: var(--green); padding: 6px 16px; border-radius: 50px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-title { color: var(--white); margin-bottom: 24px; letter-spacing: -0.03em; }

.hero-sub {
  font-size: 1.15rem; color: var(--grey-mid); margin-bottom: 40px;
  max-width: 480px; line-height: 1.8;
}

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 52px; }

.hero-stats {
  display: flex; align-items: center; gap: 28px;
}
.stat strong { display: block; font-size: 1.8rem; font-weight: 700; color: var(--green); line-height: 1; }
.stat span { font-size: 0.8rem; color: var(--grey-mid); }
.stat-divider { width: 1px; height: 36px; background: var(--grey-dark); }

/* Rank card */
.rank-card {
  background: var(--navy-light);
  border: 1px solid var(--grey-dark);
  border-radius: 20px; padding: 32px;
  box-shadow: var(--shadow);
}
.rank-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-mid); margin-bottom: 24px; }
.rank-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-row span { font-size: 0.82rem; color: var(--grey-mid); width: 24px; }
.bar {
  height: 10px; background: linear-gradient(90deg, var(--green), var(--green-dim));
  border-radius: 50px; transition: width 1s ease;
}
.rank-note { font-size: 0.78rem; color: var(--grey-mid); text-align: center; }

/* ============ INTRO STRIP ============ */
.intro-strip {
  background: var(--navy-light);
  border-top: 1px solid var(--grey-dark);
  border-bottom: 1px solid var(--grey-dark);
  padding: 40px 0;
}
.intro-text {
  font-size: 1.15rem; line-height: 1.8; color: var(--grey-light);
  max-width: 800px; margin: 0 auto; text-align: center;
}
.intro-text strong { color: var(--green); }

/* ============ SECTION HEADERS ============ */
.section-header { text-align: center; margin-bottom: 64px; }
.section-tag {
  display: inline-block;
  background: var(--green-glow); border: 1px solid rgba(0,232,122,0.25);
  color: var(--green); padding: 4px 14px; border-radius: 50px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 16px;
}
.section-header h2 { margin-bottom: 16px; }
.section-header p { color: var(--grey-mid); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* ============ CARDS ============ */
.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.card-featured { grid-column: span 2; }
.card-full { grid-column: span 3; }

.page-card {
  background: var(--navy-light);
  border: 1px solid var(--grey-dark);
  border-radius: var(--radius); padding: 32px;
  transition: all var(--transition);
  position: relative; overflow: hidden;
}
.page-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), transparent);
  opacity: 0; transition: opacity var(--transition);
}
.page-card:hover { border-color: rgba(0,232,122,0.25); transform: translateY(-4px); box-shadow: var(--shadow); }
.page-card:hover::before { opacity: 1; }

.card-number {
  font-family: var(--font-display); font-size: 3rem; font-weight: 900;
  color: rgba(255,255,255,0.04); line-height: 1; margin-bottom: 4px;
}
.card-icon { font-size: 2rem; margin-bottom: 12px; }
.page-card h3 { margin-bottom: 12px; }
.page-card h3 a { color: var(--white); }
.page-card h3 a:hover { color: var(--green); }
.page-card p { color: var(--grey-mid); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.7; }
.card-link {
  display: inline-flex; align-items: center;
  color: var(--green); font-weight: 600; font-size: 0.88rem;
  transition: gap var(--transition);
}
.card-link:hover { color: var(--green); gap: 6px; }

/* ============ WHY SEO ============ */
.why-seo { background: var(--navy-mid); }
.why-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.why-text h2 { margin: 12px 0 20px; }
.why-text p { color: var(--grey-mid); margin-bottom: 28px; line-height: 1.8; }
.why-list { list-style: none; margin-bottom: 36px; display: flex; flex-direction: column; gap: 12px; }
.why-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--grey-light); font-size: 0.95rem; }
.check { color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 2px; }

/* Funnel */
.funnel { display: flex; flex-direction: column; gap: 4px; }
.funnel-step {
  background: var(--navy-light); border: 1px solid var(--grey-dark);
  border-radius: 10px; padding: 20px 28px; text-align: center;
  font-weight: 600; font-size: 1rem;
  transition: all var(--transition);
}
.funnel-step small { display: block; color: var(--grey-mid); font-weight: 400; font-size: 0.8rem; }
.f1 { border-color: var(--green); color: var(--green); }
.f2 { margin: 0 12px; }
.f3 { margin: 0 24px; }
.f4 { margin: 0 36px; background: var(--green-glow); border-color: rgba(0,232,122,0.3); color: var(--green); }

/* ============ LEARNING PATH ============ */
.path-steps { display: flex; flex-direction: column; gap: 0; }
.path-step {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 28px 0;
}
.path-num {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--green-glow); border: 2px solid rgba(0,232,122,0.4);
  color: var(--green); font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.path-info h4 a { color: var(--white); }
.path-info h4 a:hover { color: var(--green); }
.path-info p { color: var(--grey-mid); font-size: 0.9rem; margin-top: 4px; }
.path-connector {
  width: 2px; height: 32px; background: var(--grey-dark);
  margin-left: 23px;
}

/* ============ FAQ ============ */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.faq-item {
  background: var(--navy-light); border: 1px solid var(--grey-dark);
  border-radius: var(--radius); padding: 32px;
}
.faq-item h3 {
  font-size: 1.05rem; margin-bottom: 12px; color: var(--white);
}
.faq-item p { color: var(--grey-mid); font-size: 0.93rem; line-height: 1.75; }

/* ============ INNER PAGE STYLES ============ */
.page-hero {
  background: var(--navy-mid);
  padding: 130px 0 80px;
  border-bottom: 1px solid var(--grey-dark);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; right: -200px; top: -100px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,232,122,0.06), transparent 70%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .section-tag { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 20px; }
.page-hero p { font-size: 1.1rem; color: var(--grey-mid); max-width: 640px; line-height: 1.8; }

.breadcrumb {
  display: flex; gap: 8px; align-items: center;
  font-size: 0.82rem; color: var(--grey-mid); margin-bottom: 20px;
}
.breadcrumb a { color: var(--grey-mid); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span { color: var(--grey-dark); }

/* Main content layout */
.content-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 60px;
  align-items: start; padding: 80px 0;
}
.content-main { min-width: 0; }
.content-sidebar { position: sticky; top: 90px; }

.content-main h2 {
  font-size: 1.8rem; margin: 48px 0 16px; color: var(--white);
  padding-bottom: 12px; border-bottom: 1px solid var(--grey-dark);
}
.content-main h2:first-child { margin-top: 0; }
.content-main h3 { font-size: 1.25rem; margin: 32px 0 12px; color: var(--white); }
.content-main p { color: var(--grey-mid); line-height: 1.85; margin-bottom: 20px; font-size: 0.98rem; }
.content-main ul, .content-main ol {
  color: var(--grey-mid); padding-left: 24px; margin-bottom: 24px;
}
.content-main li { margin-bottom: 8px; line-height: 1.75; }
.content-main strong { color: var(--white); }

/* Info boxes */
.info-box {
  border-radius: var(--radius); padding: 24px 28px; margin: 32px 0;
}
.info-box.tip {
  background: rgba(0,232,122,0.06); border-left: 4px solid var(--green);
}
.info-box.warning {
  background: rgba(255,107,53,0.06); border-left: 4px solid var(--accent2);
}
.info-box.note {
  background: rgba(255,255,255,0.03); border-left: 4px solid var(--grey-dark);
}
.info-box strong { color: var(--green); display: block; margin-bottom: 8px; }
.info-box p { margin: 0; font-size: 0.93rem; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 28px 0; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--grey-dark); font-size: 0.92rem; }
th { background: var(--navy-light); color: var(--green); font-weight: 600; }
td { color: var(--grey-light); }
tr:hover td { background: rgba(255,255,255,0.02); }

/* Sidebar */
.sidebar-widget {
  background: var(--navy-light); border: 1px solid var(--grey-dark);
  border-radius: var(--radius); padding: 28px; margin-bottom: 24px;
}
.sidebar-widget h4 {
  color: var(--white); margin-bottom: 16px; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
.sidebar-nav { list-style: none; }
.sidebar-nav li { border-bottom: 1px solid var(--grey-dark); }
.sidebar-nav li:last-child { border: none; }
.sidebar-nav a {
  display: block; padding: 10px 0; color: var(--grey-mid);
  font-size: 0.88rem; transition: all var(--transition);
}
.sidebar-nav a:hover, .sidebar-nav a.active { color: var(--green); padding-left: 8px; }

.sidebar-cta {
  background: linear-gradient(135deg, var(--green-glow), rgba(0,232,122,0.05));
  border: 1px solid rgba(0,232,122,0.2);
}
.sidebar-cta h4 { color: var(--green); }
.sidebar-cta p { color: var(--grey-mid); font-size: 0.85rem; margin-bottom: 16px; }

/* Steps */
.steps { display: flex; flex-direction: column; gap: 24px; margin: 32px 0; }
.step {
  display: flex; gap: 20px;
  background: var(--navy-light); border: 1px solid var(--grey-dark);
  border-radius: var(--radius); padding: 24px;
}
.step-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-glow); border: 2px solid rgba(0,232,122,0.4);
  color: var(--green); font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-content h4 { color: var(--white); margin-bottom: 6px; }
.step-content p { color: var(--grey-mid); font-size: 0.9rem; margin: 0; }

/* Highlight grid */
.highlight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0; }
.highlight-item {
  background: var(--navy-light); border: 1px solid var(--grey-dark);
  border-radius: var(--radius); padding: 24px;
}
.highlight-item .hi-icon { font-size: 1.8rem; margin-bottom: 10px; }
.highlight-item h4 { color: var(--white); margin-bottom: 8px; font-size: 1rem; }
.highlight-item p { color: var(--grey-mid); font-size: 0.88rem; margin: 0; }

/* Nav between pages */
.page-nav {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 48px 0; border-top: 1px solid var(--grey-dark); margin-top: 48px;
}
.page-nav-btn {
  background: var(--navy-light); border: 1px solid var(--grey-dark);
  border-radius: var(--radius); padding: 20px 28px;
  color: var(--white); transition: all var(--transition);
  flex: 1; max-width: 280px;
}
.page-nav-btn:hover { border-color: var(--green); color: var(--white); background: var(--green-glow); }
.page-nav-btn small { display: block; color: var(--grey-mid); font-size: 0.78rem; margin-bottom: 6px; }
.page-nav-btn strong { display: block; color: var(--white); font-size: 0.95rem; }
.page-nav-btn.next { text-align: right; }

/* Checklist styles */
.checklist-section { margin-bottom: 40px; }
.checklist-section h3 { margin-bottom: 16px; font-size: 1.2rem; }
.checklist-items { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checklist-items li {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--navy-light); border: 1px solid var(--grey-dark);
  border-radius: 8px; padding: 14px 18px; cursor: pointer;
  transition: all var(--transition); color: var(--grey-light); font-size: 0.93rem;
}
.checklist-items li:hover { border-color: rgba(0,232,122,0.2); }
.checklist-items li.done { text-decoration: line-through; color: var(--grey-dark); border-color: transparent; }
.checklist-items li.done::before { content: '✓'; color: var(--green); }
.checklist-items li::before { content: '○'; color: var(--grey-dark); font-size: 1rem; flex-shrink: 0; }

/* Tools grid */
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0; }
.tool-card {
  background: var(--navy-light); border: 1px solid var(--grey-dark);
  border-radius: var(--radius); padding: 24px;
  transition: all var(--transition);
}
.tool-card:hover { border-color: rgba(0,232,122,0.25); transform: translateY(-2px); }
.tool-card .tool-badge {
  display: inline-block; padding: 3px 10px; border-radius: 50px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.badge-free { background: rgba(0,232,122,0.15); color: var(--green); }
.badge-paid { background: rgba(255,107,53,0.15); color: var(--accent2); }
.badge-freemium { background: rgba(255,255,255,0.08); color: var(--grey-light); }
.tool-card h4 { color: var(--white); margin-bottom: 8px; }
.tool-card p { color: var(--grey-mid); font-size: 0.88rem; margin: 0; }

/* ============ FOOTER ============ */
.footer {
  background: var(--navy-mid);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 80px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand .logo { font-size: 1.4rem; display: block; margin-bottom: 16px; }
.footer-brand p { color: var(--grey-mid); font-size: 0.88rem; line-height: 1.75; max-width: 280px; margin-bottom: 12px; }
.footer-meta { font-size: 0.75rem !important; color: var(--grey-dark) !important; }

.footer-links h4 {
  color: var(--white); margin-bottom: 14px;
  font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.09em; font-family: var(--font-body);
}
.footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.footer-links a {
  color: var(--grey-mid); font-size: 0.84rem;
  transition: all var(--transition); display: inline-flex; align-items: center; gap: 4px;
}
.footer-links a:hover { color: var(--green); transform: translateX(3px); }
.footer-links a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }

/* Footer CTA strip */
.footer-cta-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  background: var(--green-glow); border: 1px solid rgba(0,232,122,0.18);
  border-radius: var(--radius); padding: 28px 36px; margin-bottom: 40px;
}
.footer-cta-text strong { display: block; color: var(--white); font-size: 1.05rem; margin-bottom: 4px; }
.footer-cta-text span  { color: var(--grey-mid); font-size: 0.9rem; }
.footer-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 28px 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.footer-bottom p { color: var(--grey-dark); font-size: 0.78rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1280px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: span 3; }
  .nav-container { padding: 0 20px; }
}

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding: 120px 24px 80px; }
  .hero-visual { display: none; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-sub { margin: 0 auto 40px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .card-featured, .card-full { grid-column: span 2; }
  .why-inner { grid-template-columns: 1fr; }
  .why-visual { display: none; }
  .content-layout { grid-template-columns: 1fr; }
  .content-sidebar { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 3; }
  .skills-matrix { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* Nav collapse threshold */
  .hamburger { display: flex; }

  .nav-links {
    display: none;
    position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
    background: var(--navy-mid);
    flex-direction: column;
    padding: 20px 0 40px;
    gap: 0;
    overflow-y: auto;
    z-index: 999;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .nav-links.open { display: flex; }

  /* Mobile top-level items */
  .nav-links > li { width: 100%; }
  .nav-links > li > a,
  .nav-links > li > .dropdown-toggle {
    width: 100%; padding: 14px 24px;
    border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.95rem; justify-content: space-between;
  }
  .nav-links > li > a:hover,
  .nav-links > li > .dropdown-toggle:hover {
    padding-left: 28px;
  }

  /* Mobile CTA items */
  .nav-cta { border-radius: 0; margin: 0; width: 100%; justify-content: center; }

  /* Mobile dropdown: accordion not absolute */
  .dropdown-menu {
    position: static;
    transform: none !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0,0,0,0.2);
    padding: 4px 0 4px 16px;
    min-width: 0;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .dropdown.open .dropdown-menu { display: block; }
  .dropdown-menu.mega { grid-template-columns: 1fr; }
  .dropdown.open .dropdown-menu.mega { display: block; }

  .dropdown-menu li a { padding: 11px 24px; border-radius: 0; font-size: 0.9rem; }
  .dropdown-menu li a:hover { padding-left: 30px; }
  .dd-header { padding: 10px 24px 4px; }
}

@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .card-grid { grid-template-columns: 1fr; }
  .card-featured, .card-full { grid-column: span 1; }
  .faq-grid { grid-template-columns: 1fr; }
  .highlight-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
  .footer-cta-strip { flex-direction: column; text-align: center; padding: 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .page-nav { flex-direction: column; }
  .page-nav-btn { max-width: 100%; }
  .do-dont { grid-template-columns: 1fr; }
  .stat-banner { grid-template-columns: repeat(2, 1fr); }
  .prose-cols { grid-template-columns: 1fr; }
  #backToTop { bottom: 20px; right: 16px; width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .hero-stats { flex-direction: column; gap: 16px; align-items: center; }
  .stat-divider { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .concept-grid { grid-template-columns: 1fr; }
  .stat-banner { grid-template-columns: 1fr 1fr; }
  .skills-matrix { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: center; }
}

/* High contrast / forced colours support */
@media (forced-colors: active) {
  .navbar, .dropdown-menu { border: 1px solid ButtonText; }
  .btn-primary { background: Highlight; color: HighlightText; }
}



/* ══════════════════════════════════════════════════════════════
   NAV TYPOGRAPHY UPGRADES — 2026 Plus Jakarta Sans refinements
══════════════════════════════════════════════════════════════ */

/* Nav items — tighter tracking, slightly larger for readability */
.nav-links>li>a,.dropdown-toggle{
  font-family:var(--font-body);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:-0.01em;
}

/* Dropdown labels — clear hierarchy */
.dd-label{
  font-family:var(--font-body);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:-0.01em;
}
.dd-desc{
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:0;
  opacity:.8;
}
.dd-section{
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.08em;
}

/* CTAs — prominent weight */
.nav-cta-solid,.nav-cta-outline{
  font-family:var(--font-body);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:-.005em;
}

/* Mobile nav */
.mob-group-btn{
  font-family:var(--font-body);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:-.012em;
}
.mob-item{
  font-family:var(--font-body);
  font-size:.875rem;
  font-weight:400;
  letter-spacing:-.005em;
}

/* ── Content typography improvements ─────────────────────────── */

/* Section tags above headings */
.section-tag{
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Step numbers — use display font for character */
.step-num{
  font-family:var(--font-display);
  font-variation-settings:'opsz' 24;
}

/* Table cells */
.table-wrap table th{
  font-family:var(--font-body);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.table-wrap table td{
  font-family:var(--font-body);
  font-size:.9rem;
}

/* Sidebar nav */
.sidebar-nav a{
  font-family:var(--font-body);
  font-size:.875rem;
  font-weight:400;
  letter-spacing:-.005em;
}
.sidebar-widget h4{
  font-family:var(--font-body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* FAQ items */
.faq-question{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:-.015em;
}

/* Stat banner values — Fraunces for editorial numerics */
.sb-val{
  font-family:var(--font-display);
  font-variation-settings:'opsz' 48;
  font-weight:700;
  letter-spacing:-.03em;
}

/* Hero badge */
.hero-badge{
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
}

/* Page card titles */
.page-card h3{
  font-family:var(--font-display);
  font-variation-settings:'opsz' 20;
  letter-spacing:-.02em;
}

/* Breadcrumb */
.breadcrumb{
  font-family:var(--font-body);
  font-size:.8125rem;
  font-weight:400;
}

/* Footer headings */
.footer-links h4{
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.08em;
}
.footer-links a{
  font-family:var(--font-body);
  font-size:.875rem;
}

/* Concept card headings */
.concept-card h4{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:-.012em;
}

/* Timeline dates */
.tl-date{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.04em;
}

/* Checklist items */
.checklist-items li{
  font-family:var(--font-body);
  font-size:.9375rem;
}

/* Hero sub */
.hero-sub, .hero-content > p{
  font-family:var(--font-body);
  font-weight:300;
  letter-spacing:-.005em;
  line-height:1.75;
}

/* ════════════════════════════════════════════════════════════════
   NAV COLOUR FIX — high-contrast on frosted-glass white navbar
   Replaces low-contrast grey-mid (#8b96b0) with readable dark values
════════════════════════════════════════════════════════════════ */

/* Top-level nav items — dark slate on white background */
.nav-links>li>a,
.dropdown-toggle {
  color: #374151 !important;
}
.nav-links>li>a:hover,
.dropdown-toggle:hover,
.dropdown.open>.dropdown-toggle {
  color: #0a0f1e !important;
  background: rgba(10,15,30,0.06) !important;
}
.nav-links>li>a.active,
.dropdown-toggle.active {
  color: #0a0f1e !important;
  font-weight: 600 !important;
}

/* Chevron — match text */
.dropdown-toggle::after {
  opacity: 1 !important;
  border-top-color: #374151;
}
.dropdown.open>.dropdown-toggle::after {
  border-top-color: #0a0f1e;
}

/* Dropdown panel items */
.dd-label {
  color: #111827 !important;
}
.dd-desc {
  color: #6b7280 !important;
  opacity: 1 !important;
}
.dd-section {
  color: #9ca3af !important;
}
.dd-item:hover .dd-label {
  color: #0a0f1e !important;
}
.dd-item.active .dd-label {
  color: #0F6E56 !important;
}

/* Search bar placeholder text */
.dd-search span {
  color: #9ca3af !important;
}
.dd-kbd {
  color: #9ca3af !important;
}

/* CTA outline button — dark on white */
.nav-cta-outline {
  color: #374151 !important;
  border-color: rgba(55,65,81,0.3) !important;
}
.nav-cta-outline:hover {
  color: #0a0f1e !important;
  background: rgba(10,15,30,0.06) !important;
  border-color: rgba(10,15,30,0.25) !important;
}

/* Mobile panel — stays on dark background so lighter text is fine */
.mob-group-btn {
  color: #f8faff !important;
}
.mob-item {
  color: #8b96b0 !important;
}
.mob-item:hover {
  color: #f8faff !important;
}
.mob-ctas .nav-cta-outline {
  color: #f8faff !important;
  border-color: rgba(248,250,255,0.25) !important;
}
.mob-ctas .nav-cta-outline:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

/* ================================================================
   RELATED ARTICLES COMPONENT
================================================================ */
.related-articles{padding:64px 0;border-top:1px solid var(--grey-dark);background:var(--navy-mid)}
.ra-header{margin-bottom:32px}
.ra-label{font-size:.72rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;font-family:var(--font-body)}
.ra-heading{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:var(--white);font-family:var(--font-display);font-variation-settings:'opsz' 32;letter-spacing:-.025em;margin:0}
.ra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ra-card{background:var(--navy);border:1px solid var(--grey-dark);border-radius:var(--radius);padding:24px;display:flex;gap:16px;align-items:flex-start;transition:border-color var(--transition),transform var(--transition)}
.ra-card:hover{border-color:rgba(0,232,122,.3);transform:translateY(-3px)}
.ra-icon{font-size:1.5rem;flex-shrink:0;width:44px;height:44px;background:var(--navy-light);border-radius:10px;display:flex;align-items:center;justify-content:center;transition:background var(--transition)}
.ra-card:hover .ra-icon{background:var(--green-glow)}
.ra-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ra-title{font-family:var(--font-body);font-size:.95rem;font-weight:600;line-height:1.3;letter-spacing:-.012em;margin:0}
.ra-title a{color:var(--white);text-decoration:none;transition:color var(--transition)}
.ra-title a:hover{color:var(--green)}
.ra-desc{font-size:.82rem;color:var(--grey-mid);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ra-link{display:inline-flex;align-items:center;gap:5px;font-size:.79rem;font-weight:600;color:var(--green);text-decoration:none;margin-top:4px;transition:gap var(--transition);font-family:var(--font-body)}
.ra-link:hover{gap:8px}
@media(max-width:900px){.ra-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ra-grid{grid-template-columns:1fr}.related-articles{padding:48px 0}}

/* ================================================================
   TABLE OF CONTENTS COMPONENT
================================================================ */

/* ── Sidebar TOC widget ─────────────────────────────────────── */
.toc-widget {
  background: var(--navy-light);
  border: 1px solid var(--grey-dark);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.toc-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.toc-widget-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--grey-mid);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-family: var(--font-body);
}

.toc-progress-text {
  font-size: .68rem;
  color: var(--grey-dark);
  font-family: var(--font-mono);
  font-weight: 500;
}

.toc-progress-bar {
  height: 3px;
  background: var(--grey-dark);
  border-radius: 50px;
  margin-bottom: 16px;
  overflow: hidden;
}

.toc-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 50px;
  width: 0%;
  transition: width .15s ease;
}

.toc-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-nav li a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: .82rem;
  color: var(--grey-mid);
  text-decoration: none;
  line-height: 1.4;
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
  font-family: var(--font-body);
  font-weight: 400;
  border-left: 2px solid transparent;
}

.toc-nav li a:hover {
  background: var(--green-glow);
  color: var(--white);
  padding-left: 12px;
}

.toc-nav li a.toc-active {
  color: var(--green);
  background: var(--green-glow);
  border-left-color: var(--green);
  font-weight: 600;
  padding-left: 12px;
}

.toc-nav li a .toc-num {
  font-size: .65rem;
  color: var(--grey-dark);
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-top: 2px;
  min-width: 16px;
  transition: color var(--transition);
}

.toc-nav li a.toc-active .toc-num {
  color: var(--green);
}

/* ── Mobile inline TOC (shown when sidebar hidden) ──────────── */
.toc-mobile {
  display: none;
  background: var(--navy-light);
  border: 1px solid var(--grey-dark);
  border-radius: var(--radius);
  margin-bottom: 28px;
  overflow: hidden;
}

.toc-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  color: var(--white);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.toc-mobile-toggle:hover { background: var(--green-glow); }

.toc-mobile-toggle-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--grey-mid);
  font-size: .75rem;
  font-weight: 400;
}

.toc-mobile-toggle svg {
  transition: transform .25s;
  flex-shrink: 0;
}

.toc-mobile.open .toc-mobile-toggle svg {
  transform: rotate(180deg);
}

.toc-mobile-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.toc-mobile.open .toc-mobile-body {
  max-height: 600px;
}

.toc-mobile-list {
  list-style: none;
  padding: 4px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-mobile-list li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .85rem;
  color: var(--grey-mid);
  text-decoration: none;
  transition: color var(--transition);
  font-family: var(--font-body);
}

.toc-mobile-list li:last-child a { border: none; }
.toc-mobile-list li a:hover { color: var(--green); }

.toc-mobile-list li a .toc-num {
  font-size: .7rem;
  color: var(--grey-dark);
  font-family: var(--font-mono);
  flex-shrink: 0;
  margin-top: 2px;
  min-width: 18px;
}

@media (max-width: 1024px) {
  .toc-mobile { display: block; }
}

@media (max-width: 560px) {
  .toc-mobile-toggle { padding: 12px 16px; font-size: .82rem; }
  .toc-mobile-list { padding: 4px 16px 14px; }
}

/* ── H2 anchors ──────────────────────────────────────────────── */
.content-main h2 {
  scroll-margin-top: 90px;
}

.h2-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  opacity: 0;
  color: var(--grey-dark);
  text-decoration: none;
  font-size: .7em;
  transition: opacity var(--transition), color var(--transition);
  vertical-align: middle;
}

.content-main h2:hover .h2-anchor { opacity: 1; }
.h2-anchor:hover { color: var(--green); opacity: 1; }

/* ================================================================
   SEO QUIZ COMPONENT
================================================================ */
.quiz-component {
  background: var(--navy-mid);
  border: 1px solid var(--grey-dark);
  border-radius: var(--radius);
  padding: 32px;
  margin: 48px 0 0;
}
.quiz-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.quiz-badge {
  background: var(--green);
  color: var(--navy);
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-family: var(--font-body);
  white-space: nowrap;
}
.quiz-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-variation-settings: 'opsz' 24;
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0;
}
.quiz-progress-bar {
  height: 4px;
  background: var(--navy-light);
  border-radius: 50px;
  margin-bottom: 28px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 50px;
  transition: width .4s ease;
  width: 0%;
}
.quiz-question-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.55;
  margin-bottom: 18px;
  font-family: var(--font-body);
  letter-spacing: -.012em;
}
.quiz-step-label {
  font-size: .72rem;
  color: var(--grey-dark);
  font-family: var(--font-mono);
  font-weight: 500;
  margin-bottom: 8px;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--grey-dark);
  background: var(--navy-light);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--grey-light);
  line-height: 1.5;
  text-align: left;
  width: 100%;
}
.quiz-option:hover:not([disabled]) {
  border-color: rgba(0,232,122,.4);
  background: var(--green-glow);
  color: var(--white);
}
.quiz-option[disabled] { cursor: default; }
.quiz-option.correct {
  border-color: var(--green);
  background: rgba(0,232,122,.1);
  color: var(--green);
}
.quiz-option.wrong {
  border-color: rgba(255,107,53,.5);
  background: rgba(255,107,53,.08);
  color: #ff9147;
}
.quiz-opt-letter {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
  transition: all var(--transition);
}
.quiz-option.correct .quiz-opt-letter { background: var(--green); color: var(--navy); }
.quiz-option.wrong .quiz-opt-letter { background: rgba(255,107,53,.3); color: #ff9147; }
.quiz-explanation {
  background: rgba(0,0,0,.2);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  font-size: .84rem;
  color: var(--grey-mid);
  line-height: 1.65;
  margin-bottom: 20px;
  display: none;
  font-family: var(--font-body);
}
.quiz-explanation.show { display: block; }
.quiz-explanation strong { color: var(--white); }
.quiz-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.quiz-btn {
  padding: 10px 22px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}
.quiz-btn-primary {
  background: var(--green);
  color: var(--navy);
}
.quiz-btn-primary:hover { background: var(--green-dim); transform: translateY(-1px); }
.quiz-btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.quiz-btn-ghost {
  background: transparent;
  color: var(--grey-mid);
  border: 1px solid var(--grey-dark);
}
.quiz-btn-ghost:hover { border-color: var(--grey-mid); color: var(--white); }
.quiz-score-display {
  font-size: .82rem;
  color: var(--grey-mid);
  font-family: var(--font-mono);
}
/* Result screen */
.quiz-result {
  display: none;
  text-align: center;
  padding: 16px 0;
}
.quiz-result.show { display: block; }
.quiz-result-score {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  font-variation-settings: 'opsz' 48;
  line-height: 1;
  margin-bottom: 8px;
}
.quiz-result-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--grey-light);
  margin-bottom: 12px;
  font-family: var(--font-body);
}
.quiz-result-msg {
  font-size: .88rem;
  color: var(--grey-mid);
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto 24px;
  font-family: var(--font-body);
}
.quiz-result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .quiz-component { padding: 20px; }
  .quiz-controls { flex-direction: column; align-items: stretch; }
  .quiz-btn { width: 100%; text-align: center; }
}