:root {
  --ink: #0f0e12;
  --ink-2: #18141f;
  --paper: #f6f3f0;
  --white: #fff;
  --muted: #6e6874;
  --line: rgba(15, 14, 18, .13);
  --purple: #7246ff;
  --purple-soft: #e7dfff;
  --display: "Barlow Condensed", Impact, sans-serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --container: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .17; pointer-events: none; background-image: linear-gradient(rgba(15,14,18,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(15,14,18,.13) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 580px); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { color: inherit; font: inherit; }
.container { width: var(--container); margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 14px; color: var(--white); background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header { position: sticky; top: 12px; z-index: 60; width: var(--container); margin: 12px auto 0; }
.site-header > .container { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 72px; padding: 10px 12px 10px 22px; color: var(--white); background: rgba(15,14,18,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; box-shadow: 0 18px 50px rgba(15,14,18,.14); backdrop-filter: blur(18px); }
.brand img { width: 158px; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 700; }
.main-nav > a:not(.btn) { opacity: .72; transition: opacity .2s ease, color .2s ease; }
.main-nav > a:not(.btn):hover, .main-nav [aria-current="page"] { color: #bdaaff; opacity: 1; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions > .btn { display: none; }
.btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: -.01em; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--white); background: var(--purple); box-shadow: 0 10px 28px rgba(114,70,255,.28); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 11px; border: 0; border-radius: 50%; background: var(--purple); }
.nav-toggle span { display: block; height: 2px; margin: 4px 0; background: var(--white); }
.nav-toggle span { transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.is-active span:first-child { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:last-child { transform: translateY(-6px) rotate(-45deg); }
.nav-scrim { display: none; }

.page-head { padding: 124px 0 72px; }
.page-head .container { max-width: 1180px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 30px; padding: 0; list-style: none; color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.breadcrumb li + li::before { content: "/"; margin-right: 7px; opacity: .45; }
.page-head h1 { max-width: 1060px; margin: 0; font-family: var(--display); font-size: clamp(64px, 8.8vw, 130px); font-weight: 900; line-height: .79; letter-spacing: -.035em; text-transform: uppercase; }
.page-head h1 .accent { color: var(--purple); }
.page-head > .container > p { max-width: 760px; margin: 28px 0 0; color: var(--muted); font-size: clamp(17px, 1.7vw, 21px); }

.post-list { padding: 0 0 120px; border-top: 1px solid var(--line); }
.post-card { position: relative; display: grid; grid-template-columns: 190px 1fr 64px; gap: 28px; align-items: start; padding: 42px 0; border-bottom: 1px solid var(--line); transition: color .25s ease, padding-left .25s ease; }
.post-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--purple); transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.post-card:hover { padding-left: 22px; color: var(--white); }
.post-card:hover::before { transform: scaleY(1); }
.post-meta { padding-top: 8px; color: var(--muted); font-family: var(--mono); font-size: 11px; line-height: 1.4; text-transform: uppercase; }
.post-card:hover .post-meta { color: rgba(255,255,255,.72); }
.post-card h2 { max-width: 820px; margin: 0; font-family: var(--display); font-size: clamp(38px, 4.3vw, 62px); font-weight: 800; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; }
.post-card p { max-width: 760px; margin: 15px 0 0; color: var(--muted); font-size: 15px; }
.post-card:hover p { color: rgba(255,255,255,.76); }
.post-go { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 24px; transition: transform .25s ease; }
.post-card:hover .post-go { transform: rotate(-35deg); }

.article-body { max-width: 850px; margin: 0 auto; padding: 12px 0 120px; }
.article-body > p:first-child { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.48; letter-spacing: -.02em; }
.article-body h2 { margin: 72px 0 20px; font-family: var(--display); font-size: clamp(42px, 5vw, 68px); font-weight: 800; line-height: .88; letter-spacing: -.025em; text-transform: uppercase; }
.article-body h3 { margin: 42px 0 14px; font-family: var(--display); font-size: 32px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.article-body p, .article-body li { color: #38323e; font-size: 17px; }
.article-body strong { color: var(--ink); }
.article-body a:not(.btn) { color: #5330d0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li { margin-bottom: 10px; }
.stat-block { display: grid; gap: 12px; margin: 54px 0; padding: 38px; color: var(--white); background: var(--ink); border-radius: 22px; box-shadow: 18px 18px 0 var(--purple-soft); }
.stat-num { color: #9e82ff; font-family: var(--display); font-size: clamp(72px, 10vw, 126px); font-weight: 900; line-height: .7; text-transform: uppercase; }
.stat-desc { max-width: 680px; font-size: 18px; font-weight: 700; line-height: 1.45; }
.stat-block cite { color: rgba(255,255,255,.56); font-family: var(--mono); font-size: 10px; font-style: normal; text-transform: uppercase; }
.sources { margin-top: 76px; padding-top: 2px; border-top: 1px solid var(--line); }
.sources h2 { font-size: 46px; }
.sources li { font-size: 14px; }
.article-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 58px 0 0; }
.article-links a { padding: 22px; color: var(--ink) !important; background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-decoration: none !important; }
.article-links span { display: block; margin-bottom: 8px; color: var(--purple); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.article-links strong { display: block; font-family: var(--display); font-size: 26px; line-height: 1; text-transform: uppercase; }
.article-cta { margin-top: 76px; padding: 44px; color: var(--white); background: linear-gradient(130deg, var(--purple), #4c25d2); border-radius: 24px; }
.article-cta h2 { margin: 0; font-size: clamp(44px, 6vw, 70px); }
.article-cta p { max-width: 620px; color: rgba(255,255,255,.8); }
.article-cta .btn { margin-top: 10px; color: var(--ink); background: var(--white); text-decoration: none; }

.site-footer { padding: 68px 0 22px; color: var(--white); background: var(--ink); }
.footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 60px; }
.footer-brand img { width: 158px; }
.footer-brand p { max-width: 480px; color: rgba(255,255,255,.55); }
.footer-col h5 { margin: 0 0 14px; color: #9e82ff; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: rgba(255,255,255,.7); font-size: 14px; }
.footer-bottom { margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.42); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.float-actions { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; gap: 8px; }
.back-to-top { display: none; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 50%; color: var(--white); background: var(--ink); }
.whatsapp-btn { display: none; }

@media (max-width: 900px) {
  :root { --container: min(100% - 28px, 720px); }
  .site-header { top: 8px; margin-top: 8px; }
  .site-header > .container { min-height: 64px; padding-left: 18px; }
  .main-nav { position: fixed; inset: 84px 14px auto; z-index: 70; display: grid; gap: 0; padding: 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 80px rgba(15,14,18,.2); opacity: 0; pointer-events: none; transform: translateY(-12px); transition: .25s ease; }
  .main-nav.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .main-nav > a { padding: 12px 14px; }
  .main-nav .btn { margin-top: 8px; }
  .nav-toggle { display: block; }
  .page-head { padding: 88px 0 58px; }
  .post-card { grid-template-columns: 1fr 48px; gap: 18px; }
  .post-meta { grid-column: 1 / -1; }
  .post-go { width: 46px; height: 46px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --container: calc(100vw - 24px); }
  .brand img { width: 140px; }
  .page-head { padding-top: 70px; }
  .page-head h1 { font-size: clamp(52px, 16vw, 78px); }
  .page-head > .container > p { font-size: 16px; }
  .post-list { padding-bottom: 78px; }
  .post-card { padding: 30px 0; }
  .post-card:hover { padding-left: 12px; }
  .post-card h2 { font-size: 39px; }
  .post-card p { font-size: 14px; }
  .article-body { padding-bottom: 80px; }
  .article-body h2 { margin-top: 58px; font-size: 44px; }
  .article-body p, .article-body li { font-size: 16px; }
  .stat-block { padding: 28px 24px; box-shadow: 8px 8px 0 var(--purple-soft); }
  .article-links { grid-template-columns: 1fr; }
  .article-cta { padding: 30px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 34px; }
  .footer-brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}