/* ============================================================
   style.css — Rewise Consultancy
   Shared across all pages. No Tailwind. Pure CSS.
   ============================================================ */

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-stretch: normal; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: #0a0a0f; color: #e8e8f0; font-family: 'DM Sans', sans-serif; font-weight: 400; font-stretch: normal; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1,h2,h3,h4,h5,h6 { font-family: 'Syne', sans-serif; font-stretch: normal; font-style: normal; line-height: 1.15; }
p { line-height: 1.7; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; background: none; border: none; font-family: inherit; font-stretch: normal; }
input, select, textarea { font-family: inherit; font-stretch: normal; }
strong { font-weight: 600; }
img { display: block; max-width: 100%; }
ul, ol { padding-left: 1.5rem; }

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --ink:       #0a0a0f;
  --accent:    #c8f135;
  --accent-dk: #a8d118;
  --muted:     #6b6b7a;
  --surface:   #13131a;
  --border:    #22222f;
  --dim:       #1c1c26;
  --text:      #e8e8f0;
}

/* ── NOISE TEXTURE ───────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: .4;
}

/* ── UTILITIES ───────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #c8f135 0%, #e8ff80 50%, #a0d010 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-accent { color: var(--accent); }
.text-muted  { color: var(--muted); }
.text-white  { color: #fff; }
.glow-accent { box-shadow: 0 0 60px rgba(200,241,53,.15), 0 0 120px rgba(200,241,53,.05); }
.glow-sm     { box-shadow: 0 0 20px rgba(200,241,53,.2); }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseDot { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes ticker   { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.anim-1 { opacity:0; animation: fadeUp .6s ease 0s   forwards; }
.anim-2 { opacity:0; animation: fadeUp .6s ease .15s forwards; }
.anim-3 { opacity:0; animation: fadeUp .6s ease .3s  forwards; }
.anim-4 { opacity:0; animation: fadeUp .6s ease .45s forwards; }
.pulse-dot { animation: pulseDot 2s ease-in-out infinite; }

/* ── ADSENSE SLOTS ───────────────────────────────────────── */
.ad-top     { background:#f0f0f0; min-height:90px;  text-align:center; }
.ad-mid     { background:#f0f0f0; min-height:280px; text-align:center; border-radius:.5rem; overflow:hidden; margin-bottom:4rem; }
.ad-sidebar { background:#f0f0f0; min-height:600px; text-align:center; border-radius:.5rem; }
.ad-article { background:#f0f0f0; min-height:280px; text-align:center; border-radius:.5rem; overflow:hidden; margin:2.5rem 0; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
#cookieBanner {
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:var(--surface); border-top:1px solid var(--border);
  padding:1rem 1.5rem; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:.75rem;
  transform:translateY(100%); transition:transform .4s ease;
}
#cookieBanner.show { transform:translateY(0); }
.cb-title { font-size:.875rem; color:#fff; font-weight:500; margin-bottom:.2rem; }
.cb-desc  { font-size:.75rem; color:var(--muted); }
.cb-link  { color:var(--accent); text-decoration:underline; cursor:pointer; }
.cb-btns  { display:flex; gap:.625rem; flex-shrink:0; flex-wrap:wrap; }
.btn-cookie-reject { font-family:'DM Mono',monospace; font-size:.75rem; border:1px solid var(--border); color:var(--muted); padding:.5rem 1rem; border-radius:.5rem; transition:all .2s; }
.btn-cookie-reject:hover { border-color:var(--accent); color:var(--accent); }
.btn-cookie-accept { font-family:'DM Mono',monospace; font-size:.75rem; background:var(--accent); color:var(--ink); padding:.5rem 1.25rem; border-radius:.5rem; font-weight:600; transition:background .2s; }
.btn-cookie-accept:hover { background:var(--accent-dk); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:10000; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--surface); border:1px solid var(--border); border-radius:1rem; max-width:680px; width:100%; max-height:85vh; overflow-y:auto; padding:2rem; position:relative; }
.modal-box::-webkit-scrollbar { width:5px; }
.modal-box::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.modal-close { position:absolute; top:1rem; right:1rem; color:var(--muted); font-size:1.25rem; transition:color .2s; }
.modal-close:hover { color:#fff; }
.modal-title { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; color:#fff; font-size:1.5rem; margin-bottom:.25rem; }
.modal-date  { font-size:.75rem; color:var(--muted); margin-bottom:1.5rem; }
.modal-section { margin-bottom:1.25rem; font-size:.875rem; color:var(--muted); line-height:1.75; }
.modal-section h3 { font-family:'Syne',sans-serif; font-weight:600; font-stretch:normal; color:#fff; margin-bottom:.4rem; font-size:1rem; }
.modal-section a { color:var(--accent); text-decoration:underline; }
.btn-modal-close { margin-top:2rem; width:100%; background:var(--accent); color:var(--ink); font-family:'DM Mono',monospace; font-weight:600; padding:.625rem; border-radius:.75rem; font-size:.875rem; transition:background .2s; }
.btn-modal-close:hover { background:var(--accent-dk); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.sticky-nav { position:sticky; top:0; z-index:100; background:rgba(10,10,15,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:1280px; margin:0 auto; padding:.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-logo { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.nav-logo-icon { width:2rem; height:2rem; border-radius:.5rem; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-logo-text { font-family:'Syne',sans-serif; font-weight:800; font-stretch:normal; font-size:1.125rem; color:#fff; white-space:nowrap; letter-spacing:-.01em; }
.nav-logo-text span { color:var(--accent); }
/* Custom logo image — displays when logo.png is uploaded to root */
.nav-logo-img { height:36px; width:auto; max-width:180px; object-fit:contain; display:block; }
.nav-links { display:none; align-items:center; gap:1.75rem; list-style:none; }
@media(min-width:768px) { .nav-links { display:flex; } }
.nav-links a { font-size:.875rem; color:var(--muted); transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--accent); }
.nav-cta { font-family:'DM Mono',monospace; font-size:.75rem; background:var(--accent); color:var(--ink); padding:.5rem 1rem; border-radius:.5rem; font-weight:600; transition:background .2s; white-space:nowrap; }
.nav-cta:hover { background:var(--accent-dk); }
.mobile-menu-btn { display:none; color:var(--muted); padding:.25rem; }
@media(max-width:767px) { .mobile-menu-btn { display:block; } }
.mobile-menu { display:none; flex-direction:column; gap:.75rem; padding:.75rem 1.5rem 1rem; border-top:1px solid var(--border); background:rgba(10,10,15,.97); }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:.875rem; color:var(--muted); padding:.25rem 0; transition:color .2s; }
.mobile-menu a:hover { color:var(--accent); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker-wrap { overflow:hidden; white-space:nowrap; background:var(--surface); border-bottom:1px solid var(--border); padding:.5rem 0; position:relative; z-index:10; }
.ticker-inner { display:inline-flex; gap:3rem; animation:ticker 32s linear infinite; }
.ticker-item { display:inline-flex; align-items:center; gap:.375rem; font-family:'DM Mono',monospace; font-size:.75rem; color:var(--muted); flex-shrink:0; }
.ticker-item .sym { color:var(--text); }
.ticker-item .up  { color:var(--accent); }
.ticker-item .dn  { color:#f87171; }
.ticker-live { position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-family:'DM Mono',monospace; font-size:.65rem; color:var(--muted); background:var(--surface); padding:0 .5rem; pointer-events:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; z-index:10; overflow:hidden; }
.hero-grid { position:absolute; inset:0; opacity:.05; background-image:linear-gradient(var(--accent) 1px,transparent 1px),linear-gradient(90deg,var(--accent) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.hero-orb  { position:absolute; top:0; left:50%; transform:translateX(-50%); width:600px; height:300px; border-radius:50%; opacity:.1; background:radial-gradient(ellipse,var(--accent) 0%,transparent 70%); filter:blur(40px); pointer-events:none; }
.hero-inner { position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:5rem 1.5rem 4rem; text-align:center; }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:9999px; padding:.375rem 1rem; font-family:'DM Mono',monospace; font-size:.75rem; color:var(--muted); margin-bottom:1.75rem; }
.hero-badge .dot { width:.375rem; height:.375rem; border-radius:50%; background:var(--accent); display:inline-block; }
.hero-title { font-family:'Syne',sans-serif; font-weight:800; font-stretch:normal; font-style:normal; font-size:clamp(2.25rem,5.5vw,4.5rem); line-height:1.1; letter-spacing:-.02em; margin-bottom:1.5rem; color:#fff; }
.hero-sub   { font-family:'DM Sans',sans-serif; font-size:clamp(1rem,2vw,1.25rem); color:var(--muted); max-width:42rem; margin:0 auto 2.5rem; line-height:1.75; }
.hero-ctas  { display:flex; flex-direction:column; align-items:center; gap:1rem; }
@media(min-width:480px) { .hero-ctas { flex-direction:row; justify-content:center; } }
.hero-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:3.5rem; font-family:'DM Mono',monospace; font-size:.75rem; color:var(--muted); }
.hero-trust span { display:flex; align-items:center; gap:.375rem; }
.hero-trust .chk { color:var(--accent); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary   { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:1rem; background:var(--accent); color:var(--ink); padding:.875rem 2rem; border-radius:.75rem; transition:background .2s; box-shadow:0 0 40px rgba(200,241,53,.15); white-space:nowrap; display:inline-block; }
.btn-primary:hover { background:var(--accent-dk); }
.btn-secondary { font-family:'DM Sans',sans-serif; font-size:1rem; border:1px solid var(--border); color:var(--muted); padding:.875rem 2rem; border-radius:.75rem; transition:all .2s; white-space:nowrap; display:inline-block; }
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { font-family:'DM Mono',monospace; font-size:.8125rem; background:var(--accent); color:var(--ink); padding:.5rem 1.25rem; border-radius:.5rem; font-weight:600; transition:background .2s; display:inline-block; }
.btn-sm:hover { background:var(--accent-dk); }
.btn-outline { font-family:'DM Mono',monospace; font-size:.8125rem; border:1px solid var(--border); color:var(--muted); padding:.5rem 1.25rem; border-radius:.5rem; transition:all .2s; display:inline-block; }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }

/* ============================================================
   PAGE WRAPPER & LAYOUT
   ============================================================ */
.page-wrap { position:relative; z-index:10; max-width:1280px; margin:0 auto; padding:0 1.5rem 6rem; }
.main-grid { display:grid; grid-template-columns:1fr 300px; gap:2rem; align-items:start; }
@media(max-width:1023px) { .main-grid { grid-template-columns:1fr; } }

/* ── SECTION ─────────────────────────────────────────────── */
.section { margin-bottom:4rem; scroll-margin-top:5rem; }
.section-label { font-family:'DM Mono',monospace; font-size:.7rem; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.5rem; display:block; }
.section-title { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:clamp(1.75rem,3vw,2.25rem); color:#fff; margin-bottom:1rem; }
.section-desc  { color:var(--muted); line-height:1.75; max-width:42rem; }

/* ── CARD ────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; overflow:hidden; }
.card-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
@media(min-width:640px) { .card-header { padding:1.5rem 2rem; } }
.card-body { padding:1.5rem; }
@media(min-width:640px) { .card-body { padding:2rem; } }
.card-title { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:1.25rem; color:#fff; }
.card-sub   { font-size:.875rem; color:var(--muted); margin-top:.25rem; }
.live-badge { font-family:'DM Mono',monospace; font-size:.7rem; background:var(--dim); color:var(--accent); border:1px solid var(--border); padding:.375rem .75rem; border-radius:.5rem; }

/* ============================================================
   CALCULATOR
   ============================================================ */
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:540px) { .calc-grid { grid-template-columns:1fr; } }
.calc-full { grid-column:1/-1; }
.field-label { display:block; font-family:'DM Mono',monospace; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; }
.input-wrap   { position:relative; }
.input-prefix { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); font-family:'DM Mono',monospace; font-size:.875rem; color:var(--muted); pointer-events:none; }
.calc-input { background:var(--dim); border:1px solid var(--border); color:var(--text); border-radius:.625rem; padding:.75rem 1rem; width:100%; font-family:'DM Mono',monospace; font-size:.9375rem; transition:border-color .2s,box-shadow .2s; outline:none; -webkit-appearance:none; appearance:none; }
.calc-input.has-prefix { padding-left:1.75rem; }
.calc-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,241,53,.12); }
.calc-input::placeholder { color:#44445a; }
input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:4px; background:var(--border); border-radius:4px; outline:none; cursor:pointer; margin:.25rem 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(200,241,53,.5); cursor:pointer; transition:transform .15s; }
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.2); }
input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; }
.risk-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.risk-pct-val { font-family:'DM Mono',monospace; color:var(--accent); font-size:.875rem; font-weight:600; }
.slider-hints { display:flex; justify-content:space-between; font-family:'DM Mono',monospace; font-size:.65rem; color:var(--muted); margin-top:.375rem; }
.result-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2rem; }
@media(max-width:600px) { .result-grid { grid-template-columns:1fr 1fr; } }
.result-card { background:var(--dim); border:1px solid var(--border); border-radius:.75rem; padding:1rem; transition:border-color .3s,box-shadow .3s; min-width:0; }
.result-card.updated { border-color:var(--accent); box-shadow:0 0 20px rgba(200,241,53,.2); }
.result-label { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-val   { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:1.5rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-val.accent { color:var(--accent); }
.result-unit  { font-size:.75rem; color:var(--muted); margin-top:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.risk-meter { background:var(--dim); border:1px solid var(--border); border-radius:.75rem; padding:1rem; margin-top:1.5rem; }
.risk-meter-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.risk-meter-label  { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.risk-tag   { font-family:'DM Mono',monospace; font-size:.65rem; padding:.15rem .5rem; border-radius:.25rem; color:var(--ink); background:var(--accent); }
.risk-track { height:.5rem; background:var(--border); border-radius:9999px; overflow:hidden; }
.risk-fill  { height:100%; border-radius:9999px; width:0; background:var(--accent); transition:width .5s ease,background .5s ease; }
.risk-advice { font-size:.75rem; color:var(--muted); margin-top:.5rem; line-height:1.5; }
.rr-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
@media(max-width:480px) { .rr-grid { grid-template-columns:1fr; } }
.btn-reset { width:100%; margin-top:1.5rem; border:1px solid var(--border); color:var(--muted); font-family:'DM Mono',monospace; font-size:.875rem; padding:.625rem; border-radius:.75rem; transition:all .2s; }
.btn-reset:hover { border-color:var(--accent); color:var(--accent); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2.5rem; }
@media(max-width:767px) { .steps-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .steps-grid { grid-template-columns:1fr; } }
.step-card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1.5rem; transition:border-color .2s; }
.step-card:hover { border-color:rgba(200,241,53,.4); }
.step-num { width:2.5rem; height:2.5rem; border-radius:.625rem; background:rgba(200,241,53,.1); border:1px solid rgba(200,241,53,.2); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-family:'Syne',sans-serif; font-weight:800; font-stretch:normal; color:var(--accent); font-size:1.125rem; transition:background .2s; }
.step-card:hover .step-num { background:rgba(200,241,53,.2); }
.step-title { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:1rem; color:#fff; margin-bottom:.5rem; }
.step-desc  { font-size:.875rem; color:var(--muted); line-height:1.75; }
.formula-box { background:var(--surface); border:1px solid rgba(200,241,53,.2); border-radius:1rem; padding:1.5rem 2rem; margin-bottom:2rem; box-shadow:0 0 60px rgba(200,241,53,.05); }
.formula-title { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; color:#fff; font-size:1.125rem; margin-bottom:1.25rem; }
.formula-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:600px) { .formula-grid { grid-template-columns:1fr; } }
.formula-cell { background:var(--dim); border-radius:.75rem; padding:1rem; text-align:center; }
.formula-step { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--muted); text-transform:uppercase; margin-bottom:.5rem; }
.formula-eq  { font-family:'DM Mono',monospace; font-size:.875rem; color:#fff; }
.formula-val { font-family:'DM Mono',monospace; font-size:.875rem; color:var(--accent); }
.risk-table  { width:100%; border-collapse:collapse; font-size:.875rem; }
.risk-table th { text-align:left; font-family:'DM Mono',monospace; font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:.75rem 1rem .75rem 0; white-space:nowrap; border-bottom:1px solid var(--border); }
.risk-table td { padding:.75rem 1rem .75rem 0; vertical-align:middle; border-bottom:1px solid var(--border); }
.risk-table tr:last-child td { border-bottom:none; }
.risk-table tr:hover td { background:var(--dim); }
.rtag { display:inline-block; font-family:'DM Mono',monospace; font-size:.65rem; padding:.15rem .5rem; border-radius:.25rem; border:1px solid; white-space:nowrap; }
.rtag-blue   { background:#172554; color:#93c5fd; border-color:#1e40af; }
.rtag-green  { background:#052e16; color:#86efac; border-color:#166534; }
.rtag-yellow { background:#422006; color:#fde047; border-color:#92400e; }
.rtag-red    { background:#450a0a; color:#fca5a5; border-color:#991b1b; }
.td-mono  { font-family:'DM Mono',monospace; color:#fff; }
.td-muted { color:var(--muted); font-size:.8125rem; }

/* ============================================================
   BLOG CARDS (used on index + blog listing)
   ============================================================ */
.blog-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:767px) { .blog-grid { grid-template-columns:1fr; } }
.blog-card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1.5rem; transition:border-color .2s,transform .2s; display:flex; flex-direction:column; }
.blog-card:hover { border-color:rgba(200,241,53,.4); transform:translateY(-2px); }
.blog-tag   { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.blog-title { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:1.0625rem; color:#fff; margin:.75rem 0 .625rem; line-height:1.35; }
.blog-body  { font-size:.875rem; color:var(--muted); line-height:1.75; margin-bottom:.875rem; flex:1; }
.blog-meta  { font-family:'DM Mono',monospace; font-size:.7rem; color:var(--muted); margin-bottom:.625rem; }
.blog-cta   { font-family:'DM Mono',monospace; font-size:.75rem; color:var(--accent); display:flex; align-items:center; gap:.375rem; margin-top:auto; }
.blog-cta:hover { text-decoration:underline; }

/* Blog listing page grid (3 col) */
.blog-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media(max-width:900px)  { .blog-grid-3 { grid-template-columns:1fr 1fr; } }
@media(max-width:540px)  { .blog-grid-3 { grid-template-columns:1fr; } }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-wrap { max-width:1280px; margin:0 auto; padding:3rem 1.5rem 6rem; display:grid; grid-template-columns:1fr 300px; gap:3rem; align-items:start; position:relative; z-index:10; }
@media(max-width:1023px) { .article-wrap { grid-template-columns:1fr; } }

.article-header { margin-bottom:2.5rem; }
.article-breadcrumb { font-family:'DM Mono',monospace; font-size:.75rem; color:var(--muted); margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.article-breadcrumb a { color:var(--muted); transition:color .2s; }
.article-breadcrumb a:hover { color:var(--accent); }
.article-breadcrumb span { color:var(--border); }
.article-tag    { font-family:'DM Mono',monospace; font-size:.7rem; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.875rem; display:block; }
.article-title  { font-family:'Syne',sans-serif; font-weight:800; font-stretch:normal; font-size:clamp(1.875rem,4vw,3rem); color:#fff; line-height:1.1; margin-bottom:1.25rem; letter-spacing:-.02em; }
.article-meta   { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; font-family:'DM Mono',monospace; font-size:.75rem; color:var(--muted); padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
.article-meta span { display:flex; align-items:center; gap:.375rem; }

/* Article body typography */
.article-body { color:var(--text); font-size:1rem; line-height:1.8; }
.article-body h2 { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:1.5rem; color:#fff; margin:2.5rem 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.article-body h3 { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:1.125rem; color:#fff; margin:2rem 0 .75rem; }
.article-body p  { color:var(--muted); margin-bottom:1.25rem; }
.article-body p:last-child { margin-bottom:0; }
.article-body strong { color:#fff; font-weight:600; }
.article-body ul, .article-body ol { color:var(--muted); margin-bottom:1.25rem; display:flex; flex-direction:column; gap:.5rem; }
.article-body li { line-height:1.7; }
.article-body blockquote { border-left:3px solid var(--accent); padding:1rem 1.25rem; background:var(--dim); border-radius:0 .5rem .5rem 0; margin:1.5rem 0; font-style:italic; color:var(--text); }
.article-body .highlight-box { background:var(--dim); border:1px solid var(--border); border-radius:.75rem; padding:1.25rem 1.5rem; margin:1.5rem 0; }
.article-body .highlight-box h4 { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; color:var(--accent); margin-bottom:.5rem; font-size:.9375rem; }

/* Article CTA box */
.article-cta-box { background:var(--surface); border:1px solid rgba(200,241,53,.2); border-radius:1rem; padding:1.5rem 2rem; margin-top:2.5rem; text-align:center; }
.article-cta-box h3 { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; color:#fff; margin-bottom:.5rem; }
.article-cta-box p  { color:var(--muted); font-size:.875rem; margin-bottom:1.25rem; }

/* Related articles */
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
@media(max-width:540px) { .related-grid { grid-template-columns:1fr; } }
.related-card { background:var(--dim); border:1px solid var(--border); border-radius:.75rem; padding:1rem; transition:border-color .2s; }
.related-card:hover { border-color:rgba(200,241,53,.4); }
.related-tag   { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.375rem; }
.related-title { font-family:'Syne',sans-serif; font-weight:600; font-stretch:normal; font-size:.9375rem; color:#fff; line-height:1.3; }

/* Article sidebar */
.article-sidebar { display:none; }
@media(min-width:1024px) { .article-sidebar { display:block; } }
.article-sidebar-inner { position:sticky; top:80px; display:flex; flex-direction:column; gap:1.5rem; }
.toc-card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1.25rem; }
.toc-title { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:.9375rem; color:#fff; margin-bottom:1rem; }
.toc-list  { list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.toc-list a { font-size:.8125rem; color:var(--muted); transition:color .2s; display:block; padding:.25rem 0; border-left:2px solid var(--border); padding-left:.75rem; }
.toc-list a:hover { color:var(--accent); border-color:var(--accent); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:.75rem; overflow:hidden; margin-bottom:.75rem; }
.faq-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; text-align:left; transition:background .2s; gap:1rem; }
.faq-trigger:hover { background:var(--dim); }
.faq-question { font-family:'DM Sans',sans-serif; font-size:.9375rem; font-weight:500; color:#fff; }
.faq-chevron { width:1.25rem; height:1.25rem; color:var(--muted); flex-shrink:0; transition:transform .3s ease; }
.faq-chevron.open { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-answer.open { max-height:600px; }
.faq-body { padding:0 1.5rem 1rem; font-size:.875rem; color:var(--muted); line-height:1.75; }

/* ============================================================
   ABOUT & CONTACT
   ============================================================ */
.about-grid   { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; margin-bottom:2rem; }
@media(max-width:767px) { .about-grid { grid-template-columns:1fr; } }
.about-body   { font-size:.9375rem; color:var(--muted); line-height:1.8; }
.about-body p { margin-bottom:1rem; }
.about-body strong { color:#fff; }
.stat-stack   { display:flex; flex-direction:column; gap:1rem; }
.stat-card    { background:var(--dim); border:1px solid var(--border); border-radius:.75rem; padding:1.25rem; }
.stat-val     { font-family:'Syne',sans-serif; font-weight:800; font-stretch:normal; font-size:1.875rem; color:var(--accent); margin-bottom:.25rem; }
.stat-desc    { font-size:.875rem; color:var(--muted); }
.values-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; }
@media(max-width:600px) { .values-grid { grid-template-columns:1fr; } }
.value-card   { background:var(--dim); border-radius:.75rem; padding:1rem; }
.value-icon   { font-size:1.25rem; margin-bottom:.5rem; }
.value-title  { font-family:'Syne',sans-serif; font-weight:600; font-stretch:normal; color:#fff; font-size:.875rem; margin-bottom:.375rem; }
.value-desc   { font-size:.75rem; color:var(--muted); line-height:1.6; }
.section-divider { border:none; border-top:1px solid var(--border); margin:2rem 0; }
.subsection-title { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; color:#fff; font-size:1.125rem; margin-bottom:1rem; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
@media(max-width:767px) { .contact-grid { grid-template-columns:1fr; } }
.contact-desc  { font-size:.9375rem; color:var(--muted); line-height:1.75; margin-bottom:1.5rem; }
.contact-info-list { display:flex; flex-direction:column; gap:1rem; }
.contact-info-item { display:flex; align-items:flex-start; gap:.75rem; background:var(--dim); border:1px solid var(--border); border-radius:.75rem; padding:1rem; }
.ci-icon  { font-size:1.25rem; margin-top:.1rem; flex-shrink:0; }
.ci-label { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.25rem; }
.ci-val   { font-family:'DM Mono',monospace; font-size:.875rem; color:#fff; }
.ci-val a { color:#fff; transition:color .2s; }
.ci-val a:hover { color:var(--accent); }
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.contact-input { background:var(--dim); border:1px solid var(--border); color:var(--text); border-radius:.625rem; padding:.75rem 1rem; width:100%; font-family:'DM Sans',sans-serif; font-size:.875rem; transition:border-color .2s,box-shadow .2s; outline:none; -webkit-appearance:none; appearance:none; }
.contact-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,241,53,.1); }
.contact-input::placeholder { color:#44445a; }
textarea.contact-input { resize:vertical; min-height:6rem; }
.btn-send { width:100%; background:var(--accent); color:var(--ink); font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:1rem; padding:.75rem; border-radius:.75rem; transition:background .2s; box-shadow:0 0 20px rgba(200,241,53,.2); }
.btn-send:hover { background:var(--accent-dk); }
.form-msg { font-size:.75rem; text-align:center; display:none; margin-top:.25rem; }
.form-msg.error   { color:#f87171; display:block; }
.form-msg.success { color:var(--accent); display:block; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar { display:none; min-width:0; }
@media(min-width:1024px) { .sidebar { display:block; } }
.sidebar-inner { position:sticky; top:80px; display:flex; flex-direction:column; gap:1.5rem; }
.tips-card    { padding:1.25rem; }
.tips-title   { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:.875rem; color:#fff; margin-bottom:1rem; }
.tips-list    { list-style:none; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.tips-list li { display:flex; gap:.5rem; font-size:.75rem; color:var(--muted); line-height:1.5; }
.tip-arrow    { color:var(--accent); flex-shrink:0; }
.summary-card  { background:var(--surface); border:1px solid rgba(200,241,53,.2); border-radius:1rem; padding:1.25rem; }
.summary-title { font-family:'Syne',sans-serif; font-weight:700; font-stretch:normal; font-size:.875rem; color:#fff; margin-bottom:.875rem; }
.summary-rows  { display:flex; flex-direction:column; gap:.375rem; }
.summary-row   { display:flex; justify-content:space-between; font-family:'DM Mono',monospace; font-size:.75rem; color:var(--muted); }
.summary-val   { color:#fff; }
.summary-val.accent { color:var(--accent); font-weight:600; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:var(--surface); border-top:1px solid var(--border); position:relative; z-index:10; }
.footer-inner { max-width:1280px; margin:0 auto; padding:3rem 1.5rem; }
.footer-grid  { display:grid; grid-template-columns:1fr; gap:2rem; margin-bottom:2.5rem; }
@media(min-width:640px)  { .footer-grid { grid-template-columns:1fr 1fr; } }
@media(min-width:1024px) { .footer-grid { grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.footer-brand-desc { font-size:.75rem; color:var(--muted); line-height:1.6; margin:.75rem 0; }
.footer-email { font-family:'DM Mono',monospace; font-size:.75rem; color:var(--accent); }
.footer-email:hover { text-decoration:underline; }
.footer-col-title { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
.footer-links { list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.footer-links a, .footer-links button { font-size:.75rem; color:var(--muted); text-align:left; transition:color .2s; }
.footer-links a:hover, .footer-links button:hover { color:var(--accent); }
.footer-disclaimer { font-size:.75rem; color:var(--muted); line-height:1.6; }
.footer-disclaimer strong { color:#fff; }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.5rem; display:flex; flex-direction:column; gap:1rem; align-items:center; }
@media(min-width:640px) { .footer-bottom { flex-direction:row; justify-content:space-between; } }
.footer-copy   { font-family:'DM Mono',monospace; font-size:.75rem; color:var(--muted); }
.footer-legal  { display:flex; gap:1.5rem; }
.footer-legal a, .footer-legal button { font-size:.75rem; color:var(--muted); transition:color .2s; }
.footer-legal a:hover, .footer-legal button:hover { color:var(--accent); }