/* ============================================================
   StealHacks — Binance-inspired design system
   Single accent: Binance Yellow #FCD535 on near-black canvas #0b0e11
   Fonts: Kanit (display/body, TH-friendly) + IBM Plex Mono (numbers)
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand & Accent */
  --primary: #fcd535;
  --primary-active: #f0b90b;
  --primary-disabled: #3a3a1f;

  /* Surfaces — dark (marketing default) */
  --canvas-dark: #0b0e11;
  --surface-card-dark: #1e2329;
  --surface-elevated-dark: #2b3139;

  /* Surfaces — light (footer / forms) */
  --canvas-light: #ffffff;
  --surface-soft-light: #fafafa;
  --surface-strong-light: #f5f5f5;

  /* Hairlines & borders */
  --hairline-dark: #2b3139;
  --hairline-light: #eaecef;
  --border-strong: #cdd1d6;

  /* Text */
  --ink: #181a20;
  --body-dark: #eaecef;
  --body-light: #181a20;
  --muted: #707a8a;
  --muted-strong: #929aa5;
  --on-primary: #181a20;
  --on-dark: #ffffff;

  /* Trading semantics */
  --trading-up: #0ecb81;
  --trading-down: #f6465d;

  /* Info / focus */
  --info: #3b82f6;

  /* Radius scale */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 9999px;

  /* Spacing */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 80px;

  /* Typography — Kanit for TH + EN */
  --font-display: 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-display);
  background: var(--canvas-dark);
  color: var(--body-dark);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
svg { display: block; }

/* SVG icons inherit color */
.svc-icon, .pf-icon, .note-icon, .serp-flag, .check svg {
  color: var(--primary);
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--s-lg); }
.section { padding: var(--s-section) 0; }
.section-alt { background: var(--surface-card-dark); }

.section-head { max-width: 760px; margin-bottom: var(--s-xxl); }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--primary); margin-bottom: var(--s-md);
}
.section-title {
  font-size: 40px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px;
  color: var(--on-dark); margin-bottom: var(--s-md);
}
.section-desc {
  font-size: 16px; line-height: 1.7; color: var(--muted-strong);
}
.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xxl); align-items: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; line-height: 1;
  padding: 12px 24px; border-radius: var(--r-md);
  transition: background-color .15s ease, transform .1s ease, border-color .15s ease;
  white-space: nowrap; cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid rgba(252, 213, 53, 0.9);
  outline-offset: 2px;
}
.btn-primary { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); }
.btn-primary:hover { background: var(--primary-active); border-color: var(--primary-active); }
.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: 0.68;
  cursor: not-allowed;
  background: var(--primary-disabled);
  border-color: var(--primary-disabled);
}
.btn-pill { border-radius: var(--r-pill); padding: 14px 32px; }
.btn-secondary-dark {
  background: var(--surface-elevated-dark); color: var(--on-dark);
  border: 1px solid var(--hairline-dark);
}
.btn-secondary-dark:hover { background: var(--surface-card-dark); border-color: var(--muted); }
.btn-subtle {
  background: transparent; color: var(--muted-strong);
  border: 1px solid var(--hairline-dark);
}
.btn-subtle:hover { color: var(--body-dark); border-color: var(--muted); }
.btn-danger { background: var(--trading-down); color: var(--on-dark); border: 1px solid var(--trading-down); }
.btn-danger:hover { opacity: .9; }
.btn-block { width: 100%; }

/* ---------- Cookie consent ---------- */
.cookie-consent {
  position: fixed; bottom: var(--s-lg); left: 50%; transform: translateX(-50%);
  z-index: 200; width: calc(100% - var(--s-xl)); max-width: 640px;
  background: var(--canvas-light); color: var(--body-light);
  border-radius: var(--r-lg); padding: var(--s-md);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.cookie-inner { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; }
.cookie-inner p { flex: 1; min-width: 220px; font-size: 14px; }
.cookie-actions { display: flex; gap: var(--s-xs); }

/* ---------- Top nav ---------- */
.topnav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 14, 17, 0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline-dark);
}
.nav-inner {
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg);
}
.brand { display: flex; align-items: center; gap: var(--s-sm); font-weight: 600; }
.brand-mark {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.brand-name { font-size: 20px; color: var(--on-dark); letter-spacing: -0.3px; }
.nav-links { display: flex; gap: var(--s-xl); }
.nav-links a {
  font-size: 15px; font-weight: 400; color: var(--body-dark); opacity: .85;
  transition: opacity .15s ease, color .15s ease;
}
.nav-links a:hover { opacity: 1; color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: var(--s-md); }
.lang-toggle {
  font-size: 14px; font-weight: 500; color: var(--muted-strong);
  padding: 6px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-dark); transition: color .15s ease, border-color .15s ease;
}
.lang-toggle:hover { color: var(--primary); border-color: var(--muted); }
body[data-lang="th"] .lang-th,
body[data-lang="en"] .lang-en { color: var(--primary); }
.lang-divider { margin: 0 2px; color: var(--muted); opacity: .5; }

.hamburger {
  display: none; width: 40px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.hamburger span {
  width: 20px; height: 2px; background: var(--on-dark); border-radius: 2px;
  transition: transform .25s ease, opacity .15s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding: var(--s-section) 0 var(--s-xxl); }
.hero-inner { max-width: 880px; }
.hero-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  color: var(--primary); margin-bottom: var(--s-lg);
}
.hero-title {
  font-size: 60px; font-weight: 600; line-height: 1.15; letter-spacing: -0.5px;
  color: var(--on-dark); margin-bottom: var(--s-lg);
}
.hero-sub {
  font-size: 18px; line-height: 1.7; color: var(--muted-strong);
  max-width: 720px; margin-bottom: var(--s-xl);
}
.hero-search { display: flex; gap: var(--s-sm); margin-bottom: var(--s-xl); max-width: 640px; width: 100%; }
.search-input {
  flex: 1; min-width: 0; height: 48px; padding: 0 var(--s-md);
  background: var(--surface-card-dark); color: var(--on-dark);
  border: 1px solid var(--hairline-dark); border-radius: var(--r-lg);
  font-family: inherit; font-size: 15px; transition: border-color .15s ease;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: none; border-color: var(--primary); }
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--s-lg); }
.badge-item {
  display: flex; align-items: center; gap: var(--s-xs);
  font-size: 15px; font-weight: 400; color: var(--body-dark);
}
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.up { background: var(--trading-up); }

/* ---------- Stat band ---------- */
.stat-band { padding: var(--s-xxl) 0; border-top: 1px solid var(--hairline-dark); border-bottom: 1px solid var(--hairline-dark); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg); }
.stat-num {
  font-family: var(--font-mono); font-size: 40px; font-weight: 700;
  line-height: 1.1; color: var(--primary); letter-spacing: -0.3px;
}
.stat-num span { font-size: 22px; margin-left: 4px; }
.stat-label { font-size: 14px; color: var(--muted-strong); margin-top: var(--s-xs); }

/* ---------- Services ---------- */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg); }
.svc-card {
  background: var(--surface-card-dark);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl);
  padding: var(--s-lg); transition: border-color .2s ease, transform .2s ease;
}
.svc-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.svc-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: rgba(252, 213, 53, 0.1);
  display: grid; place-items: center; margin-bottom: var(--s-md);
}
.svc-card h3 { font-size: 18px; font-weight: 500; color: var(--on-dark); margin-bottom: var(--s-xs); }
.svc-card p { font-size: 14px; line-height: 1.6; color: var(--muted-strong); }
.svc-feature { position: relative; }
.svc-tag {
  display: inline-block; margin-top: var(--s-md);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--primary);
}

/* ---------- SERP ---------- */
.check-list { display: grid; gap: var(--s-sm); margin-top: var(--s-xl); }
.check-row { display: flex; align-items: center; gap: var(--s-sm); font-size: 15px; color: var(--body-dark); }
.check {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--r-sm);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center;
}
.serp-mock {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); padding: var(--s-lg);
}
.serp-mock-bar {
  display: flex; align-items: center; gap: var(--s-sm);
  padding-bottom: var(--s-md); border-bottom: 1px solid var(--hairline-dark); margin-bottom: var(--s-md);
}
.serp-glyph {
  width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--trading-up), var(--primary), var(--trading-down), var(--info));
}
.serp-url { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.serp-result {
  display: flex; gap: var(--s-md); align-items: flex-start;
  padding: var(--s-md) 0; border-bottom: 1px solid var(--hairline-dark);
}
.serp-result:last-child { border-bottom: none; }
.serp-flag { flex-shrink: 0; margin-top: 3px; display: grid; place-items: center; }
.serp-flag.up { color: var(--trading-up); }
.serp-flag.down { color: var(--trading-down); }
.serp-result.serp-bad { opacity: .55; }
.serp-title { font-size: 15px; font-weight: 500; color: var(--on-dark); margin-bottom: 2px; }
.serp-result.serp-bad .serp-title { text-decoration: line-through; color: var(--muted-strong); }
.serp-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ---------- Removal platforms ---------- */
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-md); margin-bottom: var(--s-xl); }
.platform {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-lg); padding: var(--s-md) var(--s-lg);
  display: flex; align-items: center; gap: var(--s-sm);
  font-size: 14px; font-weight: 400; color: var(--body-dark);
  transition: border-color .15s ease;
}
.platform:hover { border-color: var(--primary); }
.removal-note {
  display: flex; gap: var(--s-md); align-items: flex-start;
  background: var(--surface-elevated-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-lg); padding: var(--s-lg);
}
.removal-note p { font-size: 14px; line-height: 1.6; color: var(--muted-strong); }

/* ---------- Process steps ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg); }
.step-card {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); padding: var(--s-lg);
}
.step-num {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--primary); display: block; margin-bottom: var(--s-md);
}
.step-card h3 { font-size: 18px; font-weight: 500; color: var(--on-dark); margin-bottom: var(--s-xs); }
.step-card p { font-size: 14px; line-height: 1.6; color: var(--muted-strong); }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); align-items: stretch; }
.price-card {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); padding: var(--s-xl);
  display: flex; flex-direction: column;
}
.price-featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); position: relative; }
.price-flag {
  position: absolute; top: -12px; left: var(--s-xl);
  background: var(--primary); color: var(--on-primary);
  font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: var(--r-pill);
}
.price-card h3 { font-size: 20px; font-weight: 500; color: var(--on-dark); margin-bottom: var(--s-sm); }
.price-num {
  font-family: var(--font-mono); font-size: 40px; font-weight: 700; color: var(--primary);
  line-height: 1.1; margin-bottom: var(--s-xs);
}
.price-num span { font-size: 22px; }
.price-unit { font-size: 13px; color: var(--muted); margin-bottom: var(--s-lg); }
.price-list { display: grid; gap: var(--s-sm); margin-bottom: var(--s-xl); flex: 1; }
.price-list li {
  font-size: 14px; color: var(--body-dark); padding-left: 24px; position: relative;
}
.price-list li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--trading-up);
}
.price-card .btn { width: 100%; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 880px; }
.faq-list { display: grid; gap: var(--s-xs); }
.faq-item {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-md); overflow: hidden;
}
.faq-q {
  width: 100%; text-align: left; padding: var(--s-lg);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-md);
  font-family: inherit; font-size: 16px; font-weight: 500; color: var(--on-dark);
}
.faq-chevron {
  font-size: 24px; font-weight: 300; color: var(--primary); transition: transform .2s ease;
  flex-shrink: 0; line-height: 1;
}
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-a p { padding: 0 var(--s-lg) var(--s-lg); font-size: 15px; line-height: 1.7; color: var(--muted-strong); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  padding: var(--s-section) 0;
  background: linear-gradient(180deg, rgba(252, 213, 53, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(252, 213, 53, 0.14), transparent 28%), radial-gradient(circle at 16% 20%, rgba(59, 130, 246, 0.08), transparent 22%);
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-inner {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); padding: var(--s-xxl);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-xl); flex-wrap: wrap;
}
.cta-text h2 { font-size: 32px; font-weight: 600; color: var(--on-dark); margin-bottom: var(--s-sm); letter-spacing: -0.3px; }
.cta-text p { font-size: 16px; color: var(--muted-strong); max-width: 540px; }
.cta-actions { display: flex; gap: var(--s-md); flex-shrink: 0; }

/* ---------- Footer (light, Binance signature) ---------- */
.footer { background: var(--surface-soft-light); color: var(--body-light); padding: var(--s-xxl) 0 var(--s-xl); }

/* ---------- Blacklistseller Special Section ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xl); }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }
.check-list { display: flex; flex-direction: column; gap: var(--s-md); }
.check-row { display: flex; gap: var(--s-sm); align-items: start; }
.check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--r-sm);
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center;
}

/* ---------- Footer (light, Binance signature) ---------- */
.footer { background: var(--surface-soft-light); color: var(--body-light); padding: var(--s-xxl) 0 var(--s-xl); }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-xl);
  padding-bottom: var(--s-xxl); border-bottom: 1px solid var(--hairline-light);
}
.footer-brand .brand-name { color: var(--ink); }
.footer-tagline { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: var(--s-md); max-width: 360px; }
.footer-col { display: grid; gap: var(--s-sm); align-content: start; }
.footer-col h4 { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: var(--s-xs); }
.footer-col a { font-size: 14px; color: var(--muted); transition: color .15s ease; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: var(--s-md); flex-wrap: wrap;
  padding-top: var(--s-lg); font-size: 13px; color: var(--muted);
}
.footer-legal { max-width: 540px; text-align: right; }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--canvas-dark);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: var(--s-xl); }
.mobile-menu a { font-size: 20px; font-weight: 500; color: var(--on-dark); }
.mobile-menu a.btn { font-size: 16px; }

/* ============================================================
   BLOG PAGE
   ============================================================ */
.page-header {
  padding: var(--s-xxl) 0 var(--s-xl);
  border-bottom: 1px solid var(--hairline-dark);
}
.page-header .container { max-width: 880px; }
.page-title { font-size: 48px; font-weight: 600; color: var(--on-dark); margin-bottom: var(--s-sm); letter-spacing: -0.3px; }
.page-subtitle { font-size: 17px; color: var(--muted-strong); }

.blog-list { padding: var(--s-xxl) 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.blog-card {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.blog-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.blog-thumb {
  aspect-ratio: 16/9; background: var(--surface-elevated-dark);
  display: grid; place-items: center; color: var(--primary);
  font-family: var(--font-mono); font-size: 32px; font-weight: 700;
}
.blog-body { padding: var(--s-lg); display: flex; flex-direction: column; flex: 1; }
.blog-cat {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1px;
  color: var(--primary); text-transform: uppercase; margin-bottom: var(--s-sm);
}
.blog-card h3 { font-size: 18px; font-weight: 500; color: var(--on-dark); margin-bottom: var(--s-sm); line-height: 1.4; }
.blog-excerpt { font-size: 14px; color: var(--muted-strong); line-height: 1.6; flex: 1; margin-bottom: var(--s-md); }
.blog-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  padding-top: var(--s-sm); border-top: 1px solid var(--hairline-dark);
}

/* Empty state */
.empty-state {
  text-align: center; padding: var(--s-xxl) var(--s-lg); color: var(--muted-strong);
}
.empty-state h3 { font-size: 22px; font-weight: 500; color: var(--on-dark); margin-bottom: var(--s-sm); }

/* ---------- Blog article ---------- */
.article { padding: var(--s-xxl) 0; }
.article-inner { max-width: 760px; margin: 0 auto; }
.article-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--muted-strong); margin-bottom: var(--s-xl);
  transition: color .15s ease;
}
.article-back:hover { color: var(--primary); }
.article-meta {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin-bottom: var(--s-md);
}
.article h1 { font-size: 40px; font-weight: 600; color: var(--on-dark); margin-bottom: var(--s-lg); line-height: 1.2; letter-spacing: -0.3px; }
.article-body { font-size: 17px; line-height: 1.8; color: var(--body-dark); }
.article-body p { margin-bottom: var(--s-lg); }
.article-body h2 { font-size: 24px; font-weight: 600; color: var(--on-dark); margin: var(--s-xl) 0 var(--s-md); }
.article-body ul { margin: 0 0 var(--s-lg) var(--s-lg); }
.article-body li { margin-bottom: var(--s-xs); list-style: disc; }

/* ============================================================
   FEATURED ARTICLE (inline spotlight on blog page)
   ============================================================ */
.featured-post {
  padding: var(--s-xxl) 0 var(--s-section);
  position: relative;
  border-bottom: 1px solid var(--hairline-dark);
}
.featured-post::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 45% 40% at 15% 10%, rgba(252,213,53,.05), transparent),
    radial-gradient(ellipse 35% 35% at 90% 80%, rgba(14,203,129,.03), transparent);
  pointer-events: none; z-index: 0;
}
.featured-article {
  max-width: 820px; margin: 0 auto;
  position: relative; z-index: 1;
}
.featured-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--primary); background: rgba(252,213,53,.1);
  padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: var(--s-lg);
  border: 1px solid rgba(252,213,53,.25);
}
.featured-meta {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  margin-bottom: var(--s-md); display: flex; gap: var(--s-sm); flex-wrap: wrap; align-items: center;
}
.featured-meta .sep { opacity: .4; }
.featured-article h1.fa-title {
  font-size: clamp(28px, 4.2vw, 46px); font-weight: 600; color: var(--on-dark);
  line-height: 1.18; letter-spacing: -0.4px; margin-bottom: var(--s-md);
}
.fa-title .accent {
  background: linear-gradient(135deg, var(--primary) 30%, var(--trading-up) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.featured-lede {
  font-size: 18px; line-height: 1.7; color: var(--muted-strong); margin-bottom: var(--s-xl);
}

/* hero image */
.fa-hero {
  margin: 0 0 var(--s-xl); border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--hairline-dark); position: relative; background: var(--surface-card-dark);
}
.fa-hero img { width: 100%; display: block; aspect-ratio: 21/9; object-fit: cover; }
.fa-hero .fa-hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(11,14,17,.7) 100%);
  pointer-events: none;
}
.fa-hero-cap {
  position: absolute; left: var(--s-lg); bottom: var(--s-md);
  font-family: var(--font-mono); font-size: 12px; color: var(--muted-strong);
  background: rgba(11,14,17,.6); padding: 4px 10px; border-radius: var(--r-sm);
  backdrop-filter: blur(4px);
}

/* rich body */
.fa-body { font-size: 17px; line-height: 1.85; color: var(--body-dark); }
.fa-body h2 {
  font-size: 26px; font-weight: 600; color: var(--on-dark);
  margin: var(--s-xxl) 0 var(--s-md); letter-spacing: -0.2px;
  display: flex; align-items: center; gap: var(--s-sm); scroll-margin-top: 90px;
}
.fa-body h2::before {
  content: ''; width: 4px; height: 26px; border-radius: 2px;
  background: linear-gradient(var(--primary), var(--trading-up)); flex-shrink: 0;
}
.fa-body h3 { font-size: 18px; font-weight: 600; color: var(--primary); margin: var(--s-lg) 0 var(--s-sm); }
.fa-body p { margin-bottom: var(--s-md); }
.fa-body strong { color: var(--on-dark); font-weight: 600; }
.fa-body a { color: var(--primary); border-bottom: 1px dashed rgba(252,213,53,.5); }
.fa-body a:hover { color: var(--primary-active); }

.fa-body ul { margin: 0 0 var(--s-md); display: grid; gap: 6px; }
.fa-body ul li { list-style: none; position: relative; padding-left: 26px; }
.fa-body ul li::before {
  content: ''; position: absolute; left: 4px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 3px rgba(252,213,53,.12);
}
.fa-body ol { counter-reset: st; margin: 0 0 var(--s-md); display: grid; gap: var(--s-sm); }
.fa-body ol li {
  list-style: none; counter-increment: st; position: relative;
  padding-left: 42px; min-height: 30px; display: flex; align-items: flex-start;
}
.fa-body ol li::before {
  content: counter(st); position: absolute; left: 0; top: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}

/* note / callout boxes */
.fa-note {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-left: 4px solid var(--primary); border-radius: var(--r-lg);
  padding: var(--s-md) var(--s-lg); margin: var(--s-lg) 0; font-size: 15px; line-height: 1.7;
}
.fa-note.warn { border-left-color: var(--trading-down); background: rgba(246,70,93,.06); }
.fa-note.tip { border-left-color: var(--trading-up); background: rgba(14,203,129,.06); }
.fa-note strong { color: var(--primary); }
.fa-note.warn strong { color: var(--trading-down); }
.fa-note.tip strong { color: var(--trading-up); }

/* quote / form link */
.fa-quote {
  background: rgba(252,213,53,.08); border: 1px solid rgba(252,213,53,.25);
  border-radius: var(--r-lg); padding: var(--s-md) var(--s-lg);
  text-align: center; font-family: var(--font-mono); font-weight: 700;
  color: var(--primary); margin: var(--s-md) 0; font-size: 16px; letter-spacing: .3px;
}

/* ---- Action pills (form → FB flow) — soft tint, on-brand, readable ---- */
.fa-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm);
  margin: var(--s-md) 0; padding: var(--s-md);
  background: var(--surface-elevated-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-lg);
}
.fa-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap; border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.fa-pill svg { flex-shrink: 0; }
.fa-pill:hover { transform: translateY(-1px); }

/* Step 1 — form: brand yellow, soft tint */
.fa-pill-form {
  background: rgba(252, 213, 53, .1);
  border-color: rgba(252, 213, 53, .35);
  color: var(--primary);
}
.fa-pill-form:hover {
  background: rgba(252, 213, 53, .18);
  border-color: rgba(252, 213, 53, .6);
}

/* Step 2 — FB: calm sky-blue tint (readable on dark, not jarring) */
.fa-pill-fb {
  background: rgba(96, 165, 250, .1);
  border-color: rgba(96, 165, 250, .35);
  color: #93c5fd;
}
.fa-pill-fb:hover {
  background: rgba(96, 165, 250, .18);
  border-color: rgba(96, 165, 250, .6);
}

.fa-pill-then {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--muted); letter-spacing: .5px; padding: 0 4px;
}
@media (max-width: 600px) {
  .fa-actions { flex-direction: column; align-items: stretch; gap: var(--s-xs); }
  .fa-pill { justify-content: center; white-space: normal; text-align: center; }
  .fa-pill-then { text-align: center; transform: rotate(90deg); padding: 8px 0; }
}

/* inline figure */
.fa-fig { margin: var(--s-lg) 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hairline-dark); background: var(--surface-card-dark); }
.fa-fig img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.fa-fig figcaption { font-size: 13px; color: var(--muted); padding: var(--s-sm) var(--s-md); background: var(--surface-elevated-dark); display: flex; align-items: center; gap: 6px; }

/* case card */
.fa-case {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); padding: var(--s-lg) var(--s-xl) var(--s-md); margin: var(--s-xl) 0;
  position: relative; overflow: hidden;
}
.fa-case::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--trading-up));
  opacity: .7;
}
.fa-case-num {
  position: absolute; top: var(--s-md); right: var(--s-lg);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--primary); background: rgba(252,213,53,.1);
  padding: 4px 12px; border-radius: var(--r-pill);
}
.fa-case > h2 { margin-top: var(--s-sm); }

/* split boxes (case A / B) */
.fa-split { display: grid; gap: var(--s-md); margin: var(--s-md) 0; }
@media (min-width: 600px) { .fa-split { grid-template-columns: 1fr 1fr; } }
.fa-split .fa-box { border: 1px solid var(--hairline-dark); border-radius: var(--r-lg); padding: var(--s-md) var(--s-lg); background: var(--surface-elevated-dark); }
.fa-split .fa-box h4 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.fa-split .fa-box.a h4 { color: var(--trading-up); }
.fa-split .fa-box.b h4 { color: var(--primary); }
.fa-split .fa-box p { font-size: 14px; color: var(--muted-strong); margin: 0; line-height: 1.6; }

/* flow diagram (ABC scam) */
.fa-flow { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin: var(--s-md) 0; align-items: stretch; }
.fa-flow .fa-step {
  flex: 1 1 130px; background: var(--surface-elevated-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-md); padding: var(--s-sm) var(--s-md); font-size: 14px; color: var(--muted-strong); line-height: 1.5;
}
.fa-flow .fa-step b { display: block; color: var(--primary); font-family: var(--font-mono); font-size: 12px; margin-bottom: 4px; letter-spacing: .5px; }
.fa-flow .fa-arrow { align-self: center; color: var(--primary); font-weight: 700; }
@media (max-width: 600px) { .fa-flow .fa-arrow { transform: rotate(90deg); width: 100%; text-align: center; } }

.fa-divider { border: none; border-top: 1px solid var(--hairline-dark); margin: var(--s-xl) 0; }

/* end-of-article CTA */
.fa-cta {
  margin-top: var(--s-xl);
  background: linear-gradient(135deg, var(--surface-card-dark), var(--surface-elevated-dark));
  border: 1px solid rgba(252,213,53,.3); border-radius: var(--r-xl);
  padding: var(--s-xl); text-align: center; position: relative; overflow: hidden;
}
.fa-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(252,213,53,.08), transparent);
  pointer-events: none;
}
.fa-cta h3 { font-size: 22px; font-weight: 600; color: var(--on-dark); margin-bottom: var(--s-xs); position: relative; }
.fa-cta p { color: var(--muted-strong); margin-bottom: var(--s-lg); position: relative; }
.fa-cta .btn { position: relative; }

/* broken-image themed fallback */
img[data-fallback="1"] {
  background: linear-gradient(135deg, var(--surface-elevated-dark), var(--surface-card-dark));
}

/* ============================================================
   BLOG — PRO MAGAZINE LAYOUT
   ============================================================ */
.blog-magazine-hero {
  position: relative; padding: 80px 0 56px; overflow: hidden;
  border-bottom: 1px solid var(--hairline-dark);
}
.blog-magazine-hero::before {
  content: ''; position: absolute; inset: -20% -10% 0 -10%; z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(252,213,53,.08), transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(14,203,129,.05), transparent 60%);
  animation: magAurora 16s ease-in-out infinite alternate;
  filter: blur(40px);
}
@keyframes magAurora {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px,-15px) scale(1.04); }
}
.blog-magazine-hero .container { position: relative; z-index: 1; }
.blog-magazine-hero .hero-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-xxl); align-items: center;
}
@media (max-width: 900px) { .blog-magazine-hero .hero-grid { grid-template-columns: 1fr; gap: var(--s-xl); } }
.mag-text .mag-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: var(--primary); text-transform: uppercase; margin-bottom: var(--s-lg);
}
.mag-kicker .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--trading-up);
  box-shadow: 0 0 0 0 rgba(14,203,129,.5);
  animation: pulseDot 2s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(14,203,129,.5); }
  100% { box-shadow: 0 0 0 12px rgba(14,203,129,0); }
}
.mag-title {
  font-size: clamp(36px, 5.5vw, 64px); font-weight: 700; line-height: 1.05;
  letter-spacing: -1px; color: var(--on-dark); margin-bottom: var(--s-lg);
}
.mag-title .grad {
  background: linear-gradient(120deg, var(--primary) 0%, var(--trading-up) 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mag-sub { font-size: 17px; line-height: 1.7; color: var(--muted-strong); max-width: 540px; margin-bottom: var(--s-xl); }
.mag-stats { display: flex; gap: var(--s-xl); flex-wrap: wrap; }
.mag-stat-num {
  font-family: var(--font-mono); font-size: 28px; font-weight: 700;
  color: var(--primary); line-height: 1;
}
.mag-stat-num span { font-size: 14px; color: var(--muted-strong); margin-left: 4px; font-weight: 400; }
.mag-stat-label { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* right: search + categories */
.mag-side {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); padding: var(--s-xl); position: relative;
}
.mag-side::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(252,213,53,.3), transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.mag-search-wrap { position: relative; margin-bottom: var(--s-lg); }
.mag-search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.mag-search {
  width: 100%; height: 48px; padding: 0 var(--s-md) 0 44px;
  background: var(--canvas-dark); color: var(--on-dark);
  border: 1px solid var(--hairline-dark); border-radius: var(--r-lg);
  font-family: inherit; font-size: 15px; transition: border-color .15s ease;
}
.mag-search:focus { outline: none; border-color: var(--primary); }
.mag-side h4 {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-md);
}
.mag-cats { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.mag-cat {
  font-size: 13px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface-elevated-dark); color: var(--body-dark);
  border: 1px solid var(--hairline-dark); cursor: pointer;
  transition: all .15s ease;
}
.mag-cat:hover, .mag-cat.active {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}

/* FEATURED SPOTLIGHT — large hero article card */
.featured-spotlight { padding: var(--s-xxl) 0; }
.spotlight-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); overflow: hidden; cursor: pointer;
  transition: border-color .25s ease, transform .25s ease;
  position: relative;
}
.spotlight-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.spotlight-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--trading-up), var(--primary));
  background-size: 200% 100%; opacity: 0; transition: opacity .3s ease;
}
.spotlight-card:hover::after { opacity: 1; animation: shimmerBar 2s linear infinite; }
.spotlight-img {
  position: relative; min-height: 320px; overflow: hidden; background: var(--surface-elevated-dark);
}
.spotlight-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.spotlight-card:hover .spotlight-img img { transform: scale(1.05); }
.spotlight-img .img-ov {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, var(--surface-card-dark) 100%);
}
.spotlight-img .spot-badge {
  position: absolute; top: var(--s-md); left: var(--s-md);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary); color: var(--on-primary);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill);
}
.spotlight-body { padding: var(--s-xxl); display: flex; flex-direction: column; justify-content: center; }
.spotlight-cat {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--trading-up); text-transform: uppercase; margin-bottom: var(--s-md);
}
.spotlight-title {
  font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.2;
  color: var(--on-dark); margin-bottom: var(--s-md); letter-spacing: -0.4px;
}
.spotlight-excerpt { font-size: 16px; line-height: 1.7; color: var(--muted-strong); margin-bottom: var(--s-xl); }
.spotlight-meta { display: flex; align-items: center; gap: var(--s-md); margin-top: auto; }
.spotlight-author {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--trading-up));
  display: grid; place-items: center; color: var(--on-primary); font-weight: 700; font-size: 14px;
}
.spotlight-meta-text { font-size: 13px; color: var(--muted); }
.spotlight-meta-text strong { display: block; color: var(--body-dark); font-weight: 500; font-size: 14px; }
.spotlight-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  font-weight: 600; color: var(--primary); font-size: 14px;
}
@media (max-width: 900px) {
  .spotlight-card { grid-template-columns: 1fr; }
  .spotlight-img { min-height: 220px; }
  .spotlight-img .img-ov { background: linear-gradient(0deg, var(--surface-card-dark) 5%, transparent 60%); }
  .spotlight-body { padding: var(--s-xl); }
}

/* SECTION HEADER (blog) */
.blog-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg);
  margin-bottom: var(--s-xl); flex-wrap: wrap;
}
.blog-section-head h2 {
  font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--on-dark);
  display: flex; align-items: center; gap: var(--s-sm); letter-spacing: -0.3px;
}
.blog-section-head h2 .bar { width: 4px; height: 24px; background: var(--primary); border-radius: 2px; }
.blog-section-head .head-meta { font-size: 14px; color: var(--muted); font-family: var(--font-mono); }

/* Improved blog grid cards */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.blog-card {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.blog-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.blog-card .blog-thumb {
  aspect-ratio: 16/9; background: var(--surface-elevated-dark);
  display: grid; place-items: center; color: var(--primary);
  font-family: var(--font-mono); font-size: 32px; font-weight: 700;
}
.blog-card .blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-static .featured-thumb { position: relative; }
.featured-static .featured-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-static .featured-tag {
  position: absolute; top: var(--s-sm); right: var(--s-sm);
  background: var(--primary); color: var(--on-primary);
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
}
.blog-body { padding: var(--s-lg); display: flex; flex-direction: column; flex: 1; }
.blog-cat {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1px;
  color: var(--primary); text-transform: uppercase; margin-bottom: var(--s-sm);
}
.blog-card h3 { font-size: 18px; font-weight: 500; color: var(--on-dark); margin-bottom: var(--s-sm); line-height: 1.4; }
.blog-card:hover h3 { color: var(--primary); }
.blog-excerpt { font-size: 14px; color: var(--muted-strong); line-height: 1.6; flex: 1; margin-bottom: var(--s-md); }
.blog-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  padding-top: var(--s-sm); border-top: 1px solid var(--hairline-dark);
}

/* Empty state */
.empty-state {
  text-align: center; padding: var(--s-xxl) var(--s-lg); color: var(--muted-strong);
}
.empty-state h3 { font-size: 22px; font-weight: 500; color: var(--on-dark); margin-bottom: var(--s-sm); }

/* Newsletter band */
.blog-newsletter {
  margin: var(--s-section) 0; padding: var(--s-xxl);
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); position: relative; overflow: hidden;
}
.blog-newsletter::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 100% at 20% 50%, rgba(252,213,53,.06), transparent);
  pointer-events: none;
}
.blog-newsletter .nl-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-xl); flex-wrap: wrap;
}
.blog-newsletter h3 { font-size: 24px; font-weight: 700; color: var(--on-dark); margin-bottom: var(--s-xs); }
.blog-newsletter p { color: var(--muted-strong); }
.nl-form { display: flex; gap: var(--s-sm); min-width: 320px; flex: 1; max-width: 460px; }
.nl-form input {
  flex: 1; height: 48px; padding: 0 var(--s-md);
  background: var(--canvas-dark); color: var(--on-dark);
  border: 1px solid var(--hairline-dark); border-radius: var(--r-lg);
  font-family: inherit; font-size: 15px;
}
.nl-form input:focus { outline: none; border-color: var(--primary); }
@media (max-width: 600px) { .nl-form { min-width: 0; flex-direction: column; } .nl-form .btn { width: 100%; } }

/* READING PROGRESS BAR (top of article view) */
.reading-progress {
  position: fixed; top: 64px; left: 0; right: 0; height: 3px; z-index: 90;
  background: transparent; pointer-events: none;
}
.reading-progress .bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--primary), var(--trading-up));
  transition: width .1s linear;
}

/* ARTICLE SHELL — premium reading experience */
#articleView { background: var(--canvas-dark); }
.article { padding: var(--s-xxl) 0 var(--s-section); position: relative; }
.article-inner { max-width: 760px; margin: 0 auto; position: relative; }

/* article header */
.article-inner > .article-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--muted-strong); margin-bottom: var(--s-xl);
  transition: color .15s ease; font-weight: 500;
}
.article-inner > .article-back:hover { color: var(--primary); }
.article-meta {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin-bottom: var(--s-md);
  display: flex; gap: var(--s-sm); flex-wrap: wrap; align-items: center;
}
.article-meta .sep { opacity: .4; }
.article-inner > h1 {
  font-size: clamp(30px, 4.5vw, 44px); font-weight: 700; color: var(--on-dark);
  margin-bottom: var(--s-lg); line-height: 1.2; letter-spacing: -0.5px;
}
.article-body { font-size: 17px; line-height: 1.8; color: var(--body-dark); }
.article-body p { margin-bottom: var(--s-lg); }
.article-body h2 { font-size: 26px; font-weight: 600; color: var(--on-dark); margin: var(--s-xl) 0 var(--s-md); }
.article-body ul { margin: 0 0 var(--s-lg) var(--s-lg); }
.article-body li { margin-bottom: var(--s-xs); list-style: disc; }

/* Floating share rail (desktop) */
.share-rail {
  position: absolute; left: calc(-1 * (var(--s-section))); top: 120px;
  display: flex; flex-direction: column; gap: var(--s-sm);
}
@media (max-width: 1100px) { .share-rail { display: none; } }
.share-btn {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  color: var(--muted-strong); display: grid; place-items: center;
  cursor: pointer; transition: all .15s ease;
}
.share-btn:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); }

/* Article tags + author footer */
.article-tags { display: flex; gap: var(--s-xs); flex-wrap: wrap; margin-top: var(--s-xl); padding-top: var(--s-xl); border-top: 1px solid var(--hairline-dark); }
.article-tag {
  font-size: 13px; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--surface-card-dark); color: var(--muted-strong);
  border: 1px solid var(--hairline-dark);
}
.article-author-card {
  display: flex; gap: var(--s-md); align-items: center;
  margin-top: var(--s-xl); padding: var(--s-lg);
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl);
}
.article-author-card .av {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--trading-up));
  display: grid; place-items: center; color: var(--on-primary); font-weight: 700; font-size: 18px;
}
.article-author-card h4 { font-size: 16px; font-weight: 600; color: var(--on-dark); margin-bottom: 4px; }
.article-author-card p { font-size: 14px; color: var(--muted-strong); margin: 0; }

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.portfolio-list { padding: var(--s-xxl) 0; }
.portfolio-filters { display: flex; gap: var(--s-xs); flex-wrap: wrap; margin-bottom: var(--s-xl); }
.filter-btn {
  padding: 8px 18px; border-radius: var(--r-pill);
  background: var(--surface-card-dark); color: var(--body-dark);
  border: 1px solid var(--hairline-dark); font-size: 14px; font-weight: 400;
  transition: all .15s ease;
}
.filter-btn:hover { border-color: var(--primary); }
.filter-btn.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.case-card {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.case-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.case-thumb {
  position: relative; aspect-ratio: 16/10; background: var(--surface-elevated-dark);
  overflow: hidden;
  color: var(--primary);
}
.case-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.case-thumb-overlay {
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--s-md); background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.48) 100%);
}
.case-cat-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(252, 213, 53, 0.15); color: var(--primary);
}
.case-status {
  font-family: var(--font-mono); font-size: 12px; color: var(--trading-up);
  display: inline-flex; align-items: center; gap: 6px;
}
.case-status .dot { width: 6px; height: 6px; }
.case-body { padding: var(--s-lg); }
.case-body h3 { font-size: 18px; font-weight: 500; color: var(--on-dark); margin-bottom: var(--s-sm); line-height: 1.4; }
.case-desc { font-size: 14px; color: var(--muted-strong); line-height: 1.6; margin-bottom: var(--s-md); }
.case-metrics { display: grid; gap: var(--s-sm); padding-top: var(--s-md); border-top: 1px solid var(--hairline-dark); }
.case-metric { display: flex; justify-content: space-between; font-size: 13px; }
.case-metric .m-label { color: var(--muted); }
.case-metric .m-val { font-family: var(--font-mono); color: var(--trading-up); font-weight: 700; }

/* ============================================================
   ADMIN PAGE
   ============================================================ */
.admin-body { background: var(--canvas-dark); min-height: 100vh; }
.login-card {
  max-width: 400px; margin: var(--s-section) auto;
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); padding: var(--s-xxl);
}
.login-card h1 { font-size: 24px; font-weight: 600; color: var(--on-dark); margin-bottom: var(--s-xs); text-align: center; }
.login-card .login-sub { font-size: 14px; color: var(--muted-strong); text-align: center; margin-bottom: var(--s-xl); }
.form-group { margin-bottom: var(--s-lg); }
.form-group label {
  display: block; font-size: 14px; font-weight: 500; color: var(--body-dark); margin-bottom: var(--s-xs);
}
.form-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted-strong);
  line-height: 1.5;
}
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 14px var(--s-md);
  background: rgba(255, 255, 255, 0.06);
  color: var(--body-dark);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  font-family: inherit; font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255, 255, 255, 0.62); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(252, 213, 53, 0.16);
  background: rgba(255, 255, 255, 0.12);
}
.form-textarea { resize: vertical; min-height: 140px; line-height: 1.75; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.login-error {
  display: none; padding: var(--s-sm) var(--s-md); margin-bottom: var(--s-lg);
  background: rgba(246, 70, 93, 0.1); border: 1px solid var(--trading-down);
  border-radius: var(--r-md); font-size: 13px; color: var(--trading-down);
}
.login-error.show { display: block; }

/* Admin dashboard */
.admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-sidebar {
  background: var(--surface-card-dark); border-right: 1px solid var(--hairline-dark);
  padding: var(--s-lg); display: flex; flex-direction: column;
}
.admin-sidebar .brand { margin-bottom: var(--s-xl); }
.admin-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--s-md); border-radius: var(--r-md);
  font-size: 14px; font-weight: 400; color: var(--body-dark);
  transition: background .15s ease, color .15s ease;
}
.admin-nav a:hover { background: var(--surface-elevated-dark); }
.admin-nav a.active { background: var(--primary); color: var(--on-primary); font-weight: 500; }
.admin-nav a svg { flex-shrink: 0; }
.admin-logout {
  margin-top: auto; color: var(--trading-down) !important;
}
.admin-main { padding: var(--s-xl); overflow-y: auto; }
.admin-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-xl);
}
.admin-header h1 { font-size: 28px; font-weight: 600; color: var(--on-dark); }

/* Admin table */
.admin-table-wrap {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-xl); overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left; padding: var(--s-md) var(--s-lg);
  font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--hairline-dark);
}
.admin-table td {
  padding: var(--s-md) var(--s-lg); font-size: 14px; color: var(--body-dark);
  border-bottom: 1px solid var(--hairline-dark);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--surface-elevated-dark); }
.admin-table .t-title { font-weight: 500; color: var(--on-dark); }
.admin-table .t-mono { font-family: var(--font-mono); color: var(--muted); font-size: 13px; }
.row-actions { display: flex; gap: var(--s-xs); }
.icon-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--surface-elevated-dark); color: var(--muted-strong);
  display: grid; place-items: center; transition: all .15s ease;
}
.icon-btn:hover { color: var(--on-dark); }
.icon-btn.danger:hover { color: var(--trading-down); }

/* Admin stats */
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg); margin-bottom: var(--s-xl); }
.stat-box {
  background: var(--surface-card-dark); border: 1px solid var(--hairline-dark);
  border-radius: var(--r-lg); padding: var(--s-lg);
}
.stat-box .label { font-size: 13px; color: var(--muted-strong); margin-bottom: var(--s-xs); }
.stat-box .value { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--primary); }

/* Editor */
.editor-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-xl); padding: var(--s-xl);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.16);
  max-width: 760px;
  width: 100%;
}
.editor-card h2 { font-size: 20px; font-weight: 500; color: var(--on-dark); margin-bottom: var(--s-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); margin-bottom: var(--s-lg); }
.editor-actions { display: flex; gap: var(--s-md); margin-top: var(--s-lg); }

/* Toast */
.toast {
  position: fixed; bottom: var(--s-xl); right: var(--s-xl); z-index: 300;
  background: var(--surface-card-dark); border: 1px solid var(--trading-up);
  border-radius: var(--r-md); padding: var(--s-md) var(--s-lg);
  font-size: 14px; color: var(--on-dark);
  transform: translateY(20px); opacity: 0; transition: all .25s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { border-color: var(--trading-down); }

/* ============================================================
   VISUAL EFFECTS — particles, 3D tilt, aurora, floating shapes
   ============================================================ */

/* --- Particle canvas behind hero --- */
#hero {
  position: relative;
  overflow: hidden;
}
#particleCanvas {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }

/* --- Aurora gradient background (animated) --- */
.hero::before {
  content: '';
  position: absolute; inset: -40%; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(252,213,53,.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(14,203,129,.04) 0%, transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 90%, rgba(59,130,246,.04) 0%, transparent 70%);
  animation: aurora 12s ease-in-out infinite alternate;
  filter: blur(60px);
}
@keyframes aurora {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(30px, -20px) rotate(1deg) scale(1.05); }
  66%  { transform: translate(-20px, 15px) rotate(-1deg) scale(.97); }
  100% { transform: translate(10px, -10px) rotate(.5deg) scale(1.02); }
}

/* --- 3D Tilt cards --- */
.svc-card, .blog-card, .case-card, .price-card, .step-card, .platform, .stat-box {
  transform-style: preserve-3d;
  perspective: 800px;
  will-change: transform;
}

/* --- Glow on hover for service cards --- */
.svc-card::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: var(--r-xl);
  background: conic-gradient(
    from 180deg at 50% 50%,
    var(--primary) 0deg,
    transparent 60deg,
    transparent 300deg,
    var(--primary) 360deg
  );
  opacity: 0;
  transition: opacity .4s ease;
  z-index: -1;
  filter: blur(12px);
}
.svc-card:hover::after { opacity: .25; }

/* --- Floating wireframe shapes (decorative) --- */
.floater {
  position: absolute; pointer-events: none; z-index: 0;
  opacity: .06;
  animation: floatSpin 20s linear infinite;
}
.floater-2 { animation-duration: 25s; animation-direction: reverse; }
.floater-3 { animation-duration: 30s; animation-direction: reverse; opacity: .04; }

@keyframes floatSpin {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-15px) rotate(90deg); }
  50%  { transform: translateY(5px) rotate(180deg); }
  75%  { transform: translateY(-10px) rotate(270deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

/* --- Scroll reveal (fade + slide up) --- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* --- Stat counter pulse on appear --- */
.stat-num {
  display: inline-block;
}
.stat-num.pulse {
  animation: counterPulse .6s ease-out;
}
@keyframes counterPulse {
  0%   { transform: scale(.8); opacity: 0; }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Hero title gradient text --- */
.hero-title {
  background: linear-gradient(135deg, var(--on-dark) 40%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Animated gradient border for featured price card --- */
.price-featured {
  position: relative;
  background: var(--surface-card-dark);
}
.price-featured::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: calc(var(--r-xl) + 2px);
  background: linear-gradient(135deg, var(--primary), var(--trading-up), var(--primary));
  background-size: 200% 200%;
  z-index: -1;
  animation: gradientBorder 4s ease infinite;
}
@keyframes gradientBorder {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* --- CTA band animated background --- */
.cta-band::before {
  content: '';
  position: absolute; inset: 0; border-radius: var(--r-xl);
  background: radial-gradient(ellipse 80% 80% at 10% 50%, rgba(252,213,53,.06), transparent),
              radial-gradient(ellipse 60% 60% at 90% 50%, rgba(14,203,129,.04), transparent);
  animation: ctaGlow 6s ease-in-out infinite alternate;
  z-index: 0;
}
.cta-inner { position: relative; z-index: 1; }

@keyframes ctaGlow {
  0%   { opacity: .6; }
  100% { opacity: 1; }
}

/* --- Blog card image shine effect --- */
.blog-card .blog-thumb {
  position: relative;
  overflow: hidden;
}
.blog-card .blog-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(252,213,53,.08) 45%, rgba(252,213,53,.12) 50%, rgba(252,213,53,.08) 55%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.blog-card:hover .blog-thumb::after {
  transform: translateX(100%);
}

/* --- Portfolio case card glow --- */
.case-card {
  position: relative;
  overflow: hidden;
}
.case-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--trading-up), var(--primary));
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .3s ease;
}
.case-card:hover::after {
  opacity: 1;
  animation: shimmerBar 2s linear infinite;
}
@keyframes shimmerBar {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- SERP mock animated cursor --- */
.serp-mock::after {
  content: '';
  position: absolute; bottom: var(--s-lg); right: var(--s-lg);
  width: 20px; height: 20px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: serpCursor 4s ease-in-out 2s infinite;
}
.serp-mock { position: relative; overflow: hidden; }
@keyframes serpCursor {
  0%   { opacity: 0; transform: scale(.8); }
  20%  { opacity: .5; }
  80%  { opacity: .5; }
  100% { opacity: 0; transform: scale(1.2); }
}

/* --- Hero search bar glow --- */
.hero-search {
  position: relative;
}
.hero-search::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: calc(var(--r-lg) + 2px);
  background: linear-gradient(90deg, var(--hairline-dark), var(--primary), var(--hairline-dark));
  background-size: 200% 100%;
  animation: searchGlow 3s ease-in-out infinite;
  z-index: -1;
  filter: blur(4px);
  opacity: .4;
}
@keyframes searchGlow {
  0%, 100% { background-position: 0% 50%; opacity: .3; }
  50%      { background-position: 100% 50%; opacity: .6; }
}

/* --- Section alt subtle grid pattern --- */
.section-alt {
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* --- Smooth section bg blend --- */
.section, .section-alt {
  position: relative;
}

/* --- Navbar active glow line --- */
.nav-links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transition: width .25s ease, left .25s ease;
}
.nav-links a {
  position: relative;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%; left: 0;
}

/* --- Blog page + Portfolio page particle background --- */
.blog-list, .portfolio-list, .page-header {
  position: relative;
}
.blog-list::before, .portfolio-list::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 40% at 85% 10%, rgba(252,213,53,.04), transparent),
    radial-gradient(ellipse 30% 30% at 10% 80%, rgba(59,130,246,.03), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   RESPONSIVE — comprehensive mobile-first breakpoints
   Order: 1280 → 1024 → 900 → 768 → 600 → 480 → 360
   Targets: desktop / iPad / iPad mini / iPhone Plus / iPhone SE / small phones
   ============================================================ */

/* ---- Tablet landscape & small desktop (≤1024px) ---- */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-xl) var(--s-lg); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; gap: var(--s-xl); }
  .hero-title { font-size: 44px; }
  .section-title { font-size: 32px; }
  .blog-grid, .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 56px 0; }
  .section-head { margin-bottom: var(--s-xl); }
}

/* ---- Blog magazine hero (≤900px) ---- */
@media (max-width: 900px) {
  .blog-magazine-hero .hero-grid { grid-template-columns: 1fr; gap: var(--s-xl); }
  .spotlight-card { grid-template-columns: 1fr; }
  .spotlight-img { min-height: 220px; }
  .spotlight-img .img-ov { background: linear-gradient(0deg, var(--surface-card-dark) 5%, transparent 60%); }
  .spotlight-body { padding: var(--s-xl); }
  .mag-stats { gap: var(--s-lg); }
}

/* ---- Tablet portrait / large phone (≤768px) ---- */
@media (max-width: 768px) {
  /* Nav → hamburger */
  .nav-links { display: none; }
  .nav-actions .btn-pill { display: none; }
  .hamburger { display: flex; }

  /* Sections */
  .section { padding: var(--s-xxl) 0; }
  .hero { padding: var(--s-xxl) 0 var(--s-xl); }
  .hero-title { font-size: 34px; letter-spacing: -0.3px; }
  .hero-sub { font-size: 16px; }
  .hero-search { flex-direction: column; width: 100%; max-width: 100%; }
  .hero-search .search-input { width: 100%; min-width: 0; }
  .hero-search .btn { width: 100%; }
  .section-title { font-size: 26px; }
  .page-title { font-size: 32px; }

  /* Grids collapse to 1 col */
  .card-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--s-lg); }
  .stat-num { font-size: 32px; }
  .blog-grid, .portfolio-grid { grid-template-columns: 1fr; }

  /* CTA band */
  .cta-inner { padding: var(--s-xl); flex-direction: column; align-items: flex-start; }
  .cta-actions { width: 100%; flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-lg); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-legal { text-align: left; max-width: 100%; }

  /* Cookie consent */
  .cookie-consent { width: calc(100% - var(--s-lg)); bottom: var(--s-md); }
  .cookie-inner { flex-direction: column; align-items: stretch; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; }

  /* Article reading: hero title shrink, body font comfortable */
  .article { padding: var(--s-xl) 0 var(--s-xxl); }
  .article-inner > h1 { font-size: 30px; line-height: 1.25; }
  .article-body { font-size: 16px; }
  .fa-body { font-size: 16px; }
  .fa-body h2 { font-size: 22px; }
  .fa-hero img { aspect-ratio: 16/9; }
  .fa-case { padding: var(--s-md) var(--s-lg) var(--s-sm); }
  .fa-case-num { position: static; display: inline-block; margin-bottom: var(--s-xs); }
  .fa-case > h2 { margin-top: 0; }
  .fa-cta { padding: var(--s-lg); }
  .fa-cta h3 { font-size: 20px; }

  /* Magazine hero text tightening */
  .blog-magazine-hero { padding: 56px 0 40px; }
  .mag-title { font-size: clamp(30px, 8vw, 40px); }
  .mag-side { padding: var(--s-lg); }
  .mag-stats { gap: var(--s-lg); }
  .mag-stat-num { font-size: 24px; }

  /* Section heads stack */
  .blog-section-head { flex-direction: column; align-items: flex-start; gap: var(--s-xs); }

  /* Spotlight mobile */
  .spotlight-body { padding: var(--s-lg); }
  .spotlight-title { font-size: 22px; }

  /* Newsletter */
  .blog-newsletter { padding: var(--s-xl); }
  .nl-inner { flex-direction: column; align-items: stretch; }

  /* Admin */
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar {
    border-right: none; border-bottom: 1px solid var(--hairline-dark);
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s-xs);
  }
  .admin-sidebar .brand { margin-bottom: 0; margin-right: auto; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-nav a { padding: 6px 12px; font-size: 13px; }
  .admin-nav a span { display: none; }
  .admin-logout { margin-top: 0; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .admin-table { font-size: 13px; }
  .admin-table th, .admin-table td { padding: var(--s-sm) var(--s-md); }
  .admin-table .hide-mobile { display: none; }

  /* Legal pages */
  .legal-body { padding: var(--s-xl) 0 var(--s-xxl); }
  .legal-body h1 { font-size: 28px; }
  .legal-body h2 { font-size: 18px; }
}

/* ---- Medium phone (≤600px) — iPhone 12/13/14 ---- */
@media (max-width: 600px) {
  :root {
    --s-section: 56px;
    --s-xxl: 36px;
  }
  .container { padding: 0 var(--s-md); }
  .section { padding: var(--s-xxl) 0; }
  .nav-inner { height: 56px; }
  .brand-name { font-size: 18px; }
  .reading-progress { top: 56px; }

  /* Hero */
  .hero-title { font-size: 28px; }
  .hero-sub { font-size: 15px; }
  .hero-badges { gap: var(--s-md); }

  /* Section title */
  .section-title { font-size: 23px; }
  .page-title { font-size: 28px; }
  .section-head { margin-bottom: var(--s-lg); }

  /* Stat band → 2 col compact */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--s-lg); }
  .stat-num { font-size: 28px; }
  .stat-num span { font-size: 18px; }

  /* Pricing */
  .price-card { padding: var(--s-lg); }
  .price-num { font-size: 34px; }

  /* FAQ */
  .faq-q { padding: var(--s-md); font-size: 15px; }
  .faq-a p { padding: 0 var(--s-md) var(--s-md); font-size: 14px; }

  /* Blog magazine hero */
  .blog-magazine-hero { padding: 40px 0 32px; }
  .mag-title { font-size: 30px; line-height: 1.1; }
  .mag-sub { font-size: 15px; }
  .mag-stats { gap: var(--s-md); flex-wrap: wrap; }
  .mag-stat-num { font-size: 22px; }
  .mag-stat-num span { font-size: 12px; }
  .mag-side { padding: var(--s-md); }

  /* Spotlight */
  .featured-spotlight { padding: var(--s-xl) 0; }
  .spotlight-img { min-height: 180px; }
  .spotlight-body { padding: var(--s-md); }
  .spotlight-title { font-size: 20px; }
  .spotlight-excerpt { font-size: 14px; }
  .spotlight-meta { flex-wrap: wrap; gap: var(--s-sm); }
  .spotlight-cta { margin-left: 0; width: 100%; }

  /* Article reading */
  .article-inner > h1 { font-size: 24px; }
  .article-body { font-size: 15.5px; line-height: 1.75; }
  .fa-body { font-size: 15.5px; line-height: 1.8; }
  .fa-body h2 { font-size: 19px; margin: var(--s-xl) 0 var(--s-sm); }
  .fa-body h2::before { height: 20px; }
  .fa-body h3 { font-size: 16px; }
  .fa-hero img { aspect-ratio: 4/3; }
  .fa-note { font-size: 14px; padding: var(--s-sm) var(--s-md); }
  .fa-fig figcaption { font-size: 12px; }
  .fa-case { padding: var(--s-md); margin: var(--s-lg) 0; }
  .fa-cta { padding: var(--s-md); }
  .fa-cta h3 { font-size: 18px; }
  .fa-cta p { font-size: 14px; }

  /* Footer */
  .footer { padding: var(--s-xl) 0 var(--s-lg); }
  .footer-tagline { font-size: 13px; }
  .footer-col a { font-size: 13px; }

  /* Newsletter */
  .blog-newsletter { padding: var(--s-lg); margin: var(--s-xl) 0; }
  .blog-newsletter h3 { font-size: 20px; }
  .nl-form { flex-direction: column; min-width: 0; }
  .nl-form .btn { width: 100%; }

  /* Back to top */
  .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }

  /* Toast */
  .sh-toast { bottom: 16px; padding: 12px 18px; font-size: 13px; }

  /* Legal */
  .legal-body h1 { font-size: 24px; }
  .legal-body { padding: var(--s-lg) 0 var(--s-xl); }
  .legal-body p, .legal-body li { font-size: 14.5px; line-height: 1.7; }
}

/* ---- Small phone (≤480px) — iPhone SE / mini ---- */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .hero { padding: var(--s-xl) 0 var(--s-lg); }
  .hero-title { font-size: 24px; letter-spacing: -0.2px; }
  .hero-sub { font-size: 14px; }
  .hero-badges { gap: var(--s-sm); font-size: 13px; }
  .hero-search { gap: var(--s-xs); }

  .section-title { font-size: 21px; }
  .page-title { font-size: 24px; }
  .page-subtitle { font-size: 14px; }

  /* Stat band → 1 col */
  .stat-grid { grid-template-columns: 1fr; gap: var(--s-lg); }
  .stat-num { font-size: 30px; }

  /* Services card */
  .svc-card { padding: var(--s-md); }
  .svc-card h3 { font-size: 16px; }

  /* Pricing */
  .price-card { padding: var(--s-md); }
  .price-card h3 { font-size: 18px; }
  .price-num { font-size: 30px; }

  /* FAQ */
  .faq-q { padding: var(--s-md) var(--s-sm); font-size: 14px; }
  .faq-chevron { font-size: 20px; }

  /* Blog magazine */
  .blog-magazine-hero { padding: 32px 0 24px; }
  .mag-kicker { font-size: 11px; }
  .mag-title { font-size: 26px; line-height: 1.1; }
  .mag-sub { font-size: 14px; }
  .mag-stats { gap: var(--s-md); }
  .mag-stat-num { font-size: 20px; }
  .mag-side { padding: var(--s-md); }
  .mag-search { height: 44px; font-size: 14px; }
  .mag-cat { font-size: 12px; padding: 6px 12px; }

  /* Spotlight */
  .featured-spotlight { padding: var(--s-lg) 0; }
  .spotlight-img { min-height: 160px; }
  .spotlight-body { padding: var(--s-md); }
  .spotlight-cat { font-size: 11px; }
  .spotlight-title { font-size: 18px; }
  .spotlight-excerpt { font-size: 13.5px; }
  .spotlight-author { width: 36px; height: 36px; font-size: 13px; }
  .spotlight-meta-text strong { font-size: 13px; }
  .spotlight-meta-text { font-size: 12px; }
  .spotlight-cta { font-size: 13px; }

  /* Blog section heads */
  .blog-section-head h2 { font-size: 18px; }
  .blog-section-head h2 .bar { height: 18px; }
  .blog-section-head .head-meta { font-size: 12px; }

  /* Blog cards */
  .blog-body { padding: var(--s-md); }
  .blog-card h3 { font-size: 16px; }
  .blog-excerpt { font-size: 13.5px; }

  /* Article */
  .article-inner > h1 { font-size: 22px; }
  .article-meta { font-size: 12px; }
  .article-back { font-size: 13px; margin-bottom: var(--s-lg); }
  .fa-body { font-size: 15px; }
  .fa-body h2 { font-size: 18px; }
  .fa-hero img { aspect-ratio: 4/3; }
  .fa-case { padding: var(--s-sm) var(--s-md); margin: var(--s-md) 0; }
  .fa-note { padding: var(--s-sm) var(--s-md); font-size: 13.5px; }
  .fa-split { gap: var(--s-sm); }
  .fa-split .fa-box { padding: var(--s-sm) var(--s-md); }
  .fa-split .fa-box h4 { font-size: 14px; }
  .fa-split .fa-box p { font-size: 13px; }
  .fa-flow .fa-step { flex: 1 1 100%; font-size: 13px; }
  .fa-fig figcaption { font-size: 11px; padding: var(--s-xs) var(--s-sm); }
  .fa-cta { padding: var(--s-md); }
  .fa-cta .btn { padding: 10px 18px; font-size: 14px; }
  .article-tags { gap: 6px; }
  .article-tag { font-size: 12px; padding: 5px 10px; }
  .article-author-card { padding: var(--s-md); flex-direction: column; text-align: center; }
  .article-author-card .av { width: 48px; height: 48px; }

  /* Footer */
  .footer { padding: var(--s-xl) 0 var(--s-md); }
  .footer-grid { padding-bottom: var(--s-xl); gap: var(--s-lg); }

  /* Cookie */
  .cookie-consent { padding: var(--s-md); }
  .cookie-inner p { font-size: 13px; }

  /* Mobile menu */
  .mobile-menu a { font-size: 18px; }
}

/* ---- Very small phone (≤360px) — iPhone 5/SE1, Galaxy Fold cover ---- */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .hero-title { font-size: 22px; }
  .section-title { font-size: 19px; }
  .mag-title { font-size: 23px; }
  .article-inner > h1 { font-size: 20px; }
  .spotlight-title { font-size: 16px; }
  .fa-body h2 { font-size: 17px; }
  .brand-name { font-size: 16px; }
  .brand-mark { width: 28px; height: 28px; font-size: 12px; }
  .mag-stat-num { font-size: 18px; }
  .spotlight-body { padding: var(--s-sm) var(--s-md); }
}

/* ---- Landscape phone (height < 500px) — avoid cramped layouts ---- */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .mobile-menu nav { gap: var(--s-lg); }
  .mobile-menu a { font-size: 16px; }
  .blog-magazine-hero { padding: 32px 0 24px; }
}

/* ---- Print ---- */
@media print {
  .topnav, .footer, .mobile-menu, .back-to-top, .share-rail,
  .reading-progress, .fa-cta, .blog-newsletter, .cookie-consent { display: none !important; }
  body { background: #fff; color: #000; }
  .fa-body, .article-body { color: #000; }
}

/* ============================================================
   COMPONENTS — back-to-top, toast, consent, nav-scrolled, form-error
   ============================================================ */

/* --- Nav scrolled state (shadow + solid border) --- */
.topnav.nav-scrolled {
  background: rgba(11, 14, 17, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline-dark);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

/* --- Back to top button --- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--r-pill);
  background: var(--surface-card-dark);
  color: var(--primary);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease, color .2s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--primary);
  color: var(--on-primary);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- Toast notification --- */
.sh-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 14px 22px;
  border-radius: var(--r-lg);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--on-dark);
  background: var(--surface-elevated-dark);
  border: 1px solid var(--hairline-dark);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.sh-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.sh-toast-ok  { border-left: 3px solid var(--trading-up); }
.sh-toast-error { border-left: 3px solid var(--trading-down); }

/* --- Consent checkbox in contact form --- */
.form-consent { margin-top: var(--s-sm); }
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-strong);
}
.consent-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  cursor: pointer;
}
.consent-check a { color: var(--primary); text-decoration: underline; }

/* --- Inline form error --- */
.form-error {
  margin: 0 0 var(--s-lg);
  padding: 12px 16px;
  font-size: 14px;
  border-radius: var(--r-lg);
  color: var(--trading-down);
  background: rgba(246, 70, 93, .08);
  border: 1px solid rgba(246, 70, 93, .3);
}
.form-error[hidden] { display: none; }

/* --- Footer legal links row --- */
.footer-links {
  display: flex;
  gap: var(--s-xs);
  align-items: center;
  font-size: 13px;
}
.footer-links a { color: var(--muted-strong); transition: color .2s ease; }
.footer-links a:hover { color: var(--primary); }

/* --- Legal/article page base (privacy/terms) --- */
.legal-body {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-xxl) 0 var(--s-section);
}
.legal-body h1 { font-size: 36px; margin-bottom: var(--s-sm); color: var(--on-dark); }
.legal-body .legal-updated { color: var(--muted); font-size: 13px; margin-bottom: var(--s-xl); }
.legal-body h2 { font-size: 20px; margin: var(--s-xl) 0 var(--s-sm); color: var(--on-dark); }
.legal-body p, .legal-body li { color: var(--body-dark); line-height: 1.75; margin-bottom: var(--s-sm); }
.legal-body ul { padding-left: var(--s-md); margin-bottom: var(--s-sm); }
.legal-body a { color: var(--primary); text-decoration: underline; }
.legal-body .callout {
  margin: var(--s-lg) 0;
  padding: var(--s-md) var(--s-lg);
  border-left: 3px solid var(--primary);
  background: rgba(252, 213, 53, .05);
  border-radius: var(--r-md);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   SEARCH RESULT + RECORD SUBMISSION (ประวัติเสีย)
   ============================================================ */
.search-result-section { scroll-margin-top: 90px; }
.search-result-section .section-head { text-align: center; margin-bottom: var(--s-xl); }
.search-result-section #searchResultName { color: var(--primary); }
#searchResultName { font-weight: 600; }

.search-engines { max-width: 920px; margin: 0 auto; }
.search-engines-hint {
  text-align: center; color: var(--muted); font-size: 14px;
  margin-bottom: var(--s-md);
}
.search-engines-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-md);
}
.engine-btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-sm);
  background: var(--surface-card-dark); color: var(--on-dark);
  border: 1px solid var(--hairline-dark); border-radius: var(--r-lg);
  padding: var(--s-md) var(--s-lg); font-family: inherit; font-size: 15px; font-weight: 500;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
  text-decoration: none;
}
.engine-btn:hover {
  border-color: var(--primary);
  background: rgba(252, 213, 53, 0.08);
  transform: translateY(-2px);
}
.engine-btn .engine-arrow { color: var(--primary); font-weight: 700; font-size: 16px; }

.search-submit-card { max-width: 760px; margin-left: auto; margin-right: auto; }
.search-submit-card h2 { text-align: center; }

@media (max-width: 560px) {
  .search-engines-grid { grid-template-columns: 1fr; }
  .engine-btn { width: 100%; }
}