/* ================================================
   BLOG ARTICLE — Dark design, Inter font
   Shared CSS for all blog articles
   ================================================ */

/* === TOKENS === */
:root {
  --bg:    #000000;
  --bg2:   #0a0a0a;
  --bg3:   #111111;
  --sf:    rgba(255,255,255,.04);
  --sf2:   rgba(255,255,255,.06);
  --bd:    rgba(255,255,255,.08);
  --bd2:   rgba(255,255,255,.14);
  --ink:   #ffffff;
  --ink2:  rgba(255,255,255,.65);
  --muted: rgba(255,255,255,.4);
  --acc:   #FF6200;
  --acch:  #e85500;
  --acc-bg:rgba(255,98,0,.10);
  --acc-bd:rgba(255,98,0,.22);
  --r:     14px;
}

/* === LIGHT MODE === */
[data-theme="light"] {
  --bg:    #f8f8f8;
  --bg2:   #f0f0f0;
  --bg3:   #e8e8e8;
  --sf:    rgba(0,0,0,.03);
  --sf2:   rgba(0,0,0,.05);
  --bd:    rgba(0,0,0,.08);
  --bd2:   rgba(0,0,0,.14);
  --ink:   #0a0a0a;
  --ink2:  rgba(0,0,0,.65);
  --muted: rgba(0,0,0,.4);
  --acc:   #FF6200;
  --acch:  #e85500;
  --acc-bg:rgba(255,98,0,.08);
  --acc-bd:rgba(255,98,0,.20);
}
[data-theme="light"] body { background: #f8f8f8; color: #0a0a0a; }
[data-theme="light"] .nav { background: rgba(252,252,252,.96); border-color: rgba(0,0,0,.08); box-shadow: 0 2px 20px rgba(0,0,0,.06); }
[data-theme="light"] .nav.scrolled { background: rgba(252,252,252,.98); box-shadow: 0 4px 32px rgba(0,0,0,.08); }
[data-theme="light"] .nav-logo { color: #18140d; }
[data-theme="light"] .nav-gem { background: #FF6200; color: #fff; box-shadow: 0 0 14px rgba(255,98,0,.3); }
[data-theme="light"] .nav-lnk { color: #333; }
[data-theme="light"] .nav-lnk:hover { color: #000; background: rgba(0,0,0,.04); }
[data-theme="light"] .nav-cta { background: #18140d; color: #fff; }
[data-theme="light"] .nav-cta:hover { background: #333; }
[data-theme="light"] .nav-drawer { background: rgba(255,255,255,.97); border-color: rgba(0,0,0,.08); box-shadow: 0 12px 40px rgba(0,0,0,.10); }
[data-theme="light"] .nav-drawer .nav-lnk { color: #333; }
[data-theme="light"] .nav-drawer .nav-lnk:hover { color: #000; background: rgba(0,0,0,.04); }
[data-theme="light"] .nav-burger span { background: #18140d; }
[data-theme="light"] .breadcrumb a { color: rgba(0,0,0,.4); }
[data-theme="light"] .breadcrumb span { color: rgba(0,0,0,.3); }

/* === RESET === */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1;
}
::selection { background: var(--acc-bg); color: var(--ink); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
a { color: inherit; text-decoration: none; }

/* === NAV === */
.nav-outer {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; justify-content: center;
  padding: 12px 16px 0;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  height: 54px; max-width: 1100px; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 20px;
  background: rgba(16,16,16,.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 100px;
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
  transition: background .35s, border-color .35s, box-shadow .35s;
  z-index: 900; position: relative;
}
.nav.scrolled { background: rgba(16,16,16,.98); box-shadow: 0 4px 32px rgba(0,0,0,.3); }
.nav-logo {
  font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 800;
  letter-spacing: -.03em; color: #fff;
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; cursor: pointer; flex-shrink: 0;
}
.logo-wordmark { font-family: 'Epilogue', 'Inter', sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; color: inherit; }
.logo-wordmark--lg { font-size: 2rem; }
.logo-accent { color: #FF6200; }
.nav-gem {
  width: 28px; height: 28px; border-radius: 8px;
  background: #FF6200; color: #fff;
  font-size: .68rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(255,98,0,.45);
}
.nav-mid { display: flex; align-items: center; gap: 2px; }
.nav-lnk {
  font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.65);
  background: none; border: none; padding: .38rem .85rem; border-radius: 8px;
  cursor: pointer; font-family: 'Inter', sans-serif; transition: color .18s, background .18s;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.nav-lnk:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-end { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-cta {
  font-size: .82rem; font-weight: 700; font-family: 'Inter', sans-serif;
  background: #fff; color: #0d0d0d;
  border: none; padding: .44rem 1.1rem; border-radius: 100px;
  cursor: pointer; letter-spacing: -.01em; transition: all .22s; white-space: nowrap;
}
.nav-cta:hover { background: #e8e8e8; transform: translateY(-1px); }
.nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; padding:8px; cursor:pointer; background:none; border:none; }
.nav-burger span { display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .3s, opacity .3s; }
.nav-drawer {
  display:none; position:absolute; top: calc(100% + 8px); left:0; right:0;
  background: rgba(24,24,24,.97); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
  padding:12px 0 16px; flex-direction:column; gap:2px; z-index:899;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.nav-drawer .nav-lnk { text-align:left; padding:10px 24px; border-radius:0; width:100%; color: rgba(255,255,255,.6); }
.nav-drawer .nav-lnk:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-drawer .nav-cta { margin:10px 20px 0; display:block; text-align:center; border-radius: 100px; }
#nav.open .nav-drawer { display:flex; }
#nav.open .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#nav.open .nav-burger span:nth-child(2) { opacity:0; }
#nav.open .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* === THEME TOGGLE === */
.theme-sw { position:relative; width:52px; height:28px; border-radius:100px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); cursor:pointer; flex-shrink:0; outline:none; transition:background .3s,border-color .3s,box-shadow .3s; }
.theme-sw-knob { position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .32s cubic-bezier(.34,1.56,.64,1); display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1; pointer-events:none; }
[data-theme="dark"] .theme-sw { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
[data-theme="dark"] .theme-sw-knob { transform: translateX(24px); }
[data-theme="light"] .theme-sw { background:#FF6200; border-color:#FF6200; box-shadow:0 0 12px rgba(255,98,0,.4); }
[data-theme="light"] .theme-sw-knob { transform:none; background:#fff; }

/* === ARTICLE LAYOUT === */
.ba-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; color: var(--muted);
  margin-bottom: 2rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--acc); }
.breadcrumb span { color: rgba(255,255,255,.2); }

/* Meta */
.art-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 1.2rem; flex-wrap: wrap;
}
.art-cat {
  display: inline-block;
  font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.55); background: rgba(255,255,255,.07);
  border-radius: 100px; padding: 4px 12px;
}
.art-info { font-size: .75rem; color: var(--muted); }

/* Title */
.art-h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
  color: var(--ink); margin-bottom: 2.5rem;
}

/* Body */
.art-body {
  font-size: 1rem; line-height: 1.8; color: var(--ink2);
}
.art-body p { margin-bottom: 1.4rem; }
.art-body h2 {
  font-size: 1.35rem; font-weight: 700;
  color: var(--ink); margin: 2.8rem 0 1rem;
  padding-left: 14px; border-left: 3px solid var(--acc);
  letter-spacing: -.02em; line-height: 1.3;
}
.art-body h3 {
  font-size: 1.05rem; font-weight: 700;
  color: var(--ink); margin: 1.8rem 0 .7rem;
  letter-spacing: -.01em;
}
.art-body ul, .art-body ol { margin: 0 0 1.4rem 1.2rem; }
.art-body li { margin-bottom: .5rem; line-height: 1.7; }
.art-body strong { color: var(--ink); font-weight: 600; }
.art-body a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.art-body a:hover { color: var(--acch); }

/* Blockquote */
.art-body blockquote {
  border-left: 3px solid var(--acc);
  padding: 1rem 1.4rem; margin: 1.8rem 0;
  background: var(--acc-bg); border-radius: 0 10px 10px 0;
  font-style: italic; color: var(--ink);
}

/* Stat box */
.stat-box {
  background: var(--sf2); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 1.4rem 2rem;
  margin: 1.8rem 0; text-align: center;
}
.stat-box .stat-number {
  font-size: 2rem; font-weight: 900; color: var(--acc);
  display: block; margin-bottom: .3rem; letter-spacing: -.02em;
}
.stat-box .stat-label { font-size: .84rem; color: var(--ink2); }

/* Key takeaway */
.key-takeaway {
  background: var(--sf); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 1.4rem 1.8rem; margin: 1.8rem 0;
}
.key-takeaway-title {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--acc); margin-bottom: .8rem;
}
.key-takeaway ul { margin: 0 0 0 1rem; }
.key-takeaway li { margin-bottom: .4rem; font-size: .9rem; line-height: 1.6; color: var(--ink2); }

/* CTA block */
.art-cta {
  background: var(--acc-bg); border: 1px solid var(--acc-bd);
  border-radius: var(--r); padding: 2.5rem 2rem;
  text-align: center; margin-top: 3rem;
}
.art-cta h2 {
  font-size: 1.5rem; font-weight: 800; color: var(--ink);
  margin-bottom: .6rem; border: none; padding: 0; letter-spacing: -.02em;
}
.art-cta p { color: var(--muted); margin-bottom: 1.4rem; font-size: .9rem; }
.btn-main {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 700; font-family: inherit;
  background: #FF6200; color: #fff;
  border: none; padding: 12px 28px; border-radius: 10px;
  cursor: pointer; letter-spacing: -.01em;
  transition: all .22s; text-decoration: none;
  box-shadow: 0 4px 20px rgba(255,98,0,.35);
}
.btn-main:hover { background: #e85500; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,98,0,.45); }

/* FAQ */
.faq-section { margin-top: 2.5rem; }
.faq-section > h2 {
  font-size: 1.35rem; font-weight: 700;
  color: var(--ink); margin-bottom: 1.2rem;
  padding-left: 14px; border-left: 3px solid var(--acc);
  letter-spacing: -.02em;
}
.faq-item {
  border: 1px solid var(--bd); border-radius: var(--r);
  padding: 1.1rem 1.4rem; margin-bottom: .8rem; background: var(--sf);
}
.faq-item h3 { font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.faq-item p { font-size: .88rem; color: var(--ink2); line-height: 1.7; margin: 0; }

/* Error/tip cards */
.error-card, .step-card, .tip-box, .alert-box {
  border: 1px solid var(--bd); border-radius: var(--r);
  padding: 1.2rem 1.5rem; margin: 1.2rem 0; background: var(--sf);
}
.tip-box { border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.05); }
.alert-box { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.05); }

/* Comparison table */
.art-body table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font-size: .88rem;
}
.art-body th {
  background: var(--sf2); color: var(--ink);
  font-weight: 600; padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--bd);
}
.art-body td {
  padding: 10px 14px; border-bottom: 1px solid var(--bd);
  color: var(--ink2); vertical-align: top;
}
.art-body tr:last-child td { border-bottom: none; }

/* === FOOTER === */
.footer { border-top: 1px solid var(--bd); padding: 52px max(32px,6%) 32px; position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid var(--bd); margin-bottom: 2rem; }
.ft-logo { font-size: 1.1rem; font-weight: 800; letter-spacing: -.025em; color: var(--ink); display: flex; align-items: center; gap: 9px; margin-bottom: 1rem; }
.ft-gem { width: 26px; height: 26px; border-radius: 7px; background: var(--acc); display: flex; align-items: center; justify-content: center; font-size: .6rem; color: #000; font-weight: 900; }
.ft-tagline { font-size: .78rem; color: var(--muted); line-height: 1.7; max-width: 240px; }
.ft-col-title { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.ft-col { display: flex; flex-direction: column; gap: .6rem; }
.ft-lnk { font-size: .8rem; color: var(--muted); background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; text-align: left; transition: color .2s; padding: 0; }
.ft-lnk:hover { color: var(--ink); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.ft-copy { font-size: .7rem; color: var(--muted); }
.ft-bottom-links { display: flex; gap: 1.5rem; }
.ft-bl { font-size: .7rem; color: var(--muted); background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; transition: color .2s; }
.ft-bl:hover { color: var(--ink); }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .nav-outer { padding: 8px 10px 0; }
  .nav { padding: 0 6px 0 16px; height: 50px; }
  .nav-mid { display: none; }
  .nav-burger { display: flex; }
  #nav-cta-desk { display: none; }
  .nav-outer, .nav { max-width: 100vw; box-sizing: border-box; }
}
@media (max-width: 700px) {
  .ba-article { padding: 82px 16px 60px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer { padding: 40px 20px 28px; }
}