* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --gold: #D4AF37; --gold-bright: #F5C842; --bg: #080808; --card: #0d0d0d; --border: rgba(255,255,255,.08); }
html, body { background: var(--bg); color: #fff; font: 16px/1.45 -apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
.hidden { display: none !important; }

/* ─── Landing ────────────────────────────────────────────────── */
#landing { position: relative; min-height: 100vh; padding: 5rem 1.25rem 3rem; display: flex; flex-direction: column; align-items: center; }
#landing .bg { position: absolute; inset: 0; background: radial-gradient(ellipse at top, #1a1200 0%, #080808 60%); z-index: 0; }
#landing .bg::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 800px; height: 300px; background: rgba(212,175,55,.05); filter: blur(100px); border-radius: 50%; }
.container { position: relative; z-index: 1; max-width: 42rem; width: 100%; margin: 0 auto; text-align: center; }
.container.narrow { max-width: 36rem; }
.badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.3); color: var(--gold); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; padding: .5rem 1rem; border-radius: 999px; margin-bottom: 1.5rem; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
#landing h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.gold { color: var(--gold); }
.sub { font-size: clamp(1rem, 2.2vw, 1.25rem); color: rgba(255,255,255,.6); max-width: 32rem; margin: 0 auto 2rem; line-height: 1.5; }
.cta { display: flex; flex-direction: column; gap: .75rem; justify-content: center; align-items: stretch; max-width: 26rem; margin: 0 auto; }
@media (min-width: 640px) { .cta { flex-direction: row; align-items: center; max-width: none; } }
.btn-primary { font: inherit; font-weight: 700; font-size: 1rem; background: var(--gold); color: #000; border: none; padding: 1rem 2rem; border-radius: 999px; cursor: pointer; min-height: 56px; transition: background .15s, transform .1s, box-shadow .15s; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-primary:hover { background: var(--gold-bright); box-shadow: 0 0 30px rgba(212,175,55,.3); }
.btn-primary:active { transform: scale(.97); }
.btn-secondary { font: inherit; font-weight: 600; font-size: 1rem; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.2); padding: 1rem 2rem; border-radius: 999px; cursor: pointer; min-height: 56px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s; }
.btn-secondary:hover { border-color: rgba(212,175,55,.5); }
.trust { color: rgba(255,255,255,.3); font-size: .8rem; margin-top: 1.25rem; }
.hero-stats { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 22rem; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .hero-stats { display: flex; gap: 3rem; max-width: none; justify-content: center; } }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat .num { color: var(--gold); font-size: clamp(1.5rem, 4vw, 1.85rem); font-weight: 900; }
.stat .lbl { color: rgba(255,255,255,.4); font-size: .7rem; margin-top: .25rem; text-transform: uppercase; letter-spacing: .12em; text-align: center; line-height: 1.2; }

.howit { margin-top: 6rem; position: relative; z-index: 1; padding: 0 1.25rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.howit h2 { font-size: clamp(1.5rem, 4vw, 1.85rem); font-weight: 700; margin-bottom: .5rem; text-align: center; }
.howit-sub { color: rgba(255,255,255,.4); font-size: .9rem; text-align: center; margin-bottom: 2rem; }
.steps { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.step { background: #111; border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-start; }
@media (min-width: 640px) { .step { flex-direction: column; gap: .5rem; } }
.step .num { color: var(--gold); font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; margin-top: .1rem; flex-shrink: 0; }
.step .step-body h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.step .step-body p { color: rgba(255,255,255,.4); font-size: .88rem; line-height: 1.5; }
.howit-cta { margin-top: 2rem; }
.howit-cta .btn-primary { width: 100%; }

.seo-blurb { max-width: 36rem; margin: 3rem auto 0; padding: 0 1rem; color: rgba(255,255,255,.2); font-size: .72rem; line-height: 1.55; text-align: center; position: relative; z-index: 1; }
.fade-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 6rem; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; z-index: 0; }

/* ─── Quiz ───────────────────────────────────────────────────── */
#quiz { min-height: 100vh; padding: 4rem 1.25rem 2rem; display: flex; flex-direction: column; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.05); z-index: 200; }
.progress-bar { height: 100%; background: var(--gold); width: 0; transition: width .35s ease; box-shadow: 0 0 14px rgba(212,175,55,.55); }
.quiz-c { max-width: 36rem; margin: auto; }
.quiz-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.back { background: transparent; border: none; color: rgba(255,255,255,.5); font: inherit; cursor: pointer; padding: .5rem .75rem; min-height: 44px; font-weight: 600; }
.back:hover { color: #fff; }
.counter { color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.q-text { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 900; text-align: center; margin-bottom: 1.75rem; line-height: 1.2; }
.q-opts { display: flex; flex-direction: column; gap: .75rem; }
.opt { background: #111; border: 1px solid var(--border); color: #fff; font: inherit; font-weight: 600; font-size: 1rem; padding: 1rem 1.25rem; border-radius: 1rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; text-align: left; min-height: 64px; transition: background .12s, border-color .12s; }
.opt:hover { background: #1a1a1a; border-color: rgba(212,175,55,.5); }
.opt:active, .opt.selected { background: var(--gold); border-color: var(--gold); color: #000; }
.opt .letter { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 900; color: rgba(255,255,255,.5); }
.opt:active .letter, .opt.selected .letter { border-color: #000; color: #000; }

/* ─── Results (Tailwind-accurate) ─────────────────────────── */
.results-body { background: var(--bg); }
/* fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 sm:px-6 sm:py-4 bg-[#080808]/90 backdrop-blur-md border-b border-white/5 */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; background: rgba(8,8,8,.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.05); animation: navin .5s ease both; }
@media (min-width: 640px) { .topbar { padding: 1rem 1.5rem; } }
@keyframes navin { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
/* text-2xl font-black tracking-tight */
.topbar .logo { background: transparent; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 1.5rem; font-weight: 900; letter-spacing: -.025em; text-decoration: none; transition: opacity .2s; }
.topbar .logo:hover { opacity: .8; }
.topbar .logo .porn { color: #fff; }
.topbar .logo .dna { color: var(--gold); }
.logo { color: var(--gold); font-weight: 900; font-size: 1.1rem; letter-spacing: .05em; text-decoration: none; }
.retake { color: rgba(255,255,255,.6); font-size: .9rem; text-decoration: none; padding: .5rem .9rem; border: 1px solid var(--border); border-radius: 999px; }
.retake:hover { color: #fff; border-color: rgba(212,175,55,.5); }

/* min-h-screen px-4 pt-20 pb-10 */
.results { min-height: 100vh; padding: 5rem 1rem 2.5rem; }
/* w-full max-w-6xl mx-auto */
.results-inner { width: 100%; max-width: 72rem; margin: 0 auto; }
/* text-center mb-8 */
.results-head { text-align: center; margin-bottom: 2rem; animation: rfade .35s ease both; }
@keyframes rfade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* inline-flex items-center gap-2 bg-[#D4AF37]/10 border border-[#D4AF37]/30 text-[#D4AF37] text-xs font-semibold uppercase tracking-widest px-4 py-2 rounded-full mb-4 */
.match-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.3); color: var(--gold); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: .5rem 1rem; border-radius: 9999px; margin-bottom: 1rem; }
.match-badge .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--gold); }
/* text-2xl sm:text-4xl font-black text-white mb-2 */
.results-head h1 { font-size: 1.5rem; font-weight: 900; color: #fff; margin-bottom: .5rem; line-height: 1.15; }
@media (min-width: 640px) { .results-head h1 { font-size: 2.25rem; } }
/* text-white/50 text-sm sm:text-base */
.results-head .hint { color: rgba(255,255,255,.5); font-size: .875rem; }
@media (min-width: 640px) { .results-head .hint { font-size: 1rem; } }

/* flex flex-col gap-4 mb-8 ${!theater ? "lg:flex-row" : ""} */
.results-layout { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; animation: rfadein .4s ease .1s both; }
@keyframes rfadein { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1024px) { .results-layout:not(.theater) { flex-direction: row; } }
/* w-full lg:flex-1 min-w-0 (non-theater) | w-full (theater) */
.main-stage { width: 100%; min-width: 0; }
@media (min-width: 1024px) { .results-layout:not(.theater) .main-stage { flex: 1 1 0%; } }
/* w-full lg:w-[260px] shrink-0 flex flex-col gap-3 (non-theater) | grid grid-cols-1 sm:grid-cols-3 gap-3 (theater) */
.sidebar { display: flex; flex-direction: column; gap: .75rem; width: 100%; }
@media (min-width: 1024px) { .results-layout:not(.theater) .sidebar { width: 260px; flex-shrink: 0; } }
.results-layout.theater .sidebar { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .results-layout.theater .sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* rounded-2xl overflow-hidden bg-[#0d0d0d] border border-white/8 */
.large-card { background: #0d0d0d; border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; overflow: hidden; }
/* relative w-full aspect-video bg-black overflow-hidden */
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.player .thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* absolute inset-0 bg-black/25 */
.player .thumb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.25); cursor: pointer; }
/* w-full h-full object-contain cursor-pointer */
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; cursor: pointer; }
.player.is-playing .thumb, .player.is-playing .thumb-overlay, .player.is-playing .big-play, .player.is-playing .duration-badge { display: none; }
.player.is-playing video, .player.is-ended video { display: block; }
/* w-20 h-20 rounded-full bg-[#D4AF37] shadow-2xl shadow-black/60 */
.big-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5rem; height: 5rem; border-radius: 9999px; background: var(--gold); color: #000; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); transition: background .2s, transform .2s; z-index: 2; }
.big-play:hover { background: var(--gold-bright); transform: translate(-50%,-50%) scale(1.1); }
.big-play:active { transform: translate(-50%,-50%) scale(.95); }
/* w-8 h-8 text-black ml-1.5 */
.big-play svg { width: 2rem; height: 2rem; margin-left: .375rem; }
/* absolute top-3 right-3 bg-black/80 text-white text-xs font-bold px-2.5 py-1 rounded-md */
.duration-badge { position: absolute; top: .75rem; right: .75rem; background: rgba(0,0,0,.8); color: #fff; font-size: .75rem; font-weight: 700; padding: .25rem .625rem; border-radius: .375rem; z-index: 2; }

/* absolute inset-0 flex items-end justify-center pb-16 pointer-events-none opacity-0 group-hover/player:opacity-100 transition-opacity */
.hover-hint { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4rem; pointer-events: none; opacity: 0; transition: opacity .2s; }
.player.is-playing:hover .hover-hint { opacity: 1; }
.player.is-ended .hover-hint { display: none; }
/* bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-full */
.hover-hint span { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); color: rgba(255,255,255,.8); font-size: .75rem; font-weight: 600; padding: .375rem .75rem; border-radius: 9999px; }

/* w-16 h-16 rounded-full bg-black/55 backdrop-blur-sm */
.paused-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 4rem; height: 4rem; border-radius: 9999px; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; pointer-events: none; }
/* w-7 h-7 text-white ml-1 */
.paused-icon svg { width: 1.75rem; height: 1.75rem; color: #fff; margin-left: .25rem; }
.player.is-playing.is-paused .paused-icon { display: flex; }

/* bg-black/88 flex flex-col items-center justify-center gap-4 p-6 text-center */
.ended-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.88); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; text-align: center; }
.player.is-ended .ended-overlay { display: flex; }
/* w-12 h-12 rounded-full border-2 border-[#D4AF37]/50 */
.ended-overlay .lock { width: 3rem; height: 3rem; border-radius: 9999px; border: 2px solid rgba(212,175,55,.5); display: flex; align-items: center; justify-content: center; color: var(--gold); }
/* w-5 h-5 */
.ended-overlay .lock svg { width: 1.25rem; height: 1.25rem; }
/* text-white font-black text-xl mb-1 */
.ended-overlay .ended-text .t { color: #fff; font-weight: 900; font-size: 1.25rem; margin-bottom: .25rem; }
/* text-white/60 text-sm */
.ended-overlay .ended-text .s { color: rgba(255,255,255,.6); font-size: .875rem; }
/* bg-[#D4AF37] text-black font-bold text-sm px-8 py-3 rounded-full shadow-lg shadow-[#D4AF37]/20 */
.ended-overlay .ended-cta { background: var(--gold); color: #000; font-weight: 700; font-size: .875rem; padding: .75rem 2rem; border-radius: 9999px; text-decoration: none; transition: background .2s, transform .15s; box-shadow: 0 10px 15px -3px rgba(212,175,55,.2), 0 4px 6px -4px rgba(212,175,55,.2); }
.ended-overlay .ended-cta:hover { background: var(--gold-bright); }
.ended-overlay .ended-cta:active { transform: scale(.95); }

/* absolute bottom-0 left-0 right-0 */
.controls { position: absolute; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity .2s; }
.player.is-playing:hover .controls,
.player.is-playing.is-paused .controls { opacity: 1; }
/* w-full h-1.5 bg-white/20 cursor-pointer hover:h-2.5 transition-all duration-100 */
.progress-bar { width: 100%; height: 6px; background: rgba(255,255,255,.2); cursor: pointer; transition: height .1s; }
.progress-bar:hover { height: 10px; }
/* h-full bg-[#D4AF37] relative */
.progress-bar .fill { height: 100%; background: var(--gold); position: relative; width: 0%; }
/* absolute right-0 top-1/2 -translate-y-1/2 w-3.5 h-3.5 bg-[#D4AF37] rounded-full shadow-md scale-0 group-hover/bar:scale-100 transition-transform */
.progress-bar .knob { position: absolute; right: 0; top: 50%; transform: translate(50%, -50%) scale(0); width: 14px; height: 14px; background: var(--gold); border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); transition: transform .15s; }
.progress-bar:hover .knob { transform: translate(50%, -50%) scale(1); }
/* flex items-center gap-0.5 px-3 py-2 bg-gradient-to-t from-black to-transparent */
.controls .bar { display: flex; align-items: center; gap: 2px; padding: .5rem .75rem; background: linear-gradient(to top, #000, transparent); }

/* Default icon button (w-9 h-9) */
.btn-icon { background: transparent; border: none; color: rgba(255,255,255,.6); width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: color .15s; flex-shrink: 0; }
.btn-icon:hover { color: #fff; }
.btn-icon svg { width: 1.25rem; height: 1.25rem; }
/* Play/Pause: text-white hover:text-[#D4AF37] */
.btn-icon.play-pause { color: #fff; width: 2.25rem; height: 2.25rem; }
.btn-icon.play-pause:hover { color: var(--gold); }
.play-pause .ic-pause, .play-pause .ic-play { width: 1.25rem; height: 1.25rem; }
.play-pause .ic-play { margin-left: 2px; display: none; }
.player.is-paused .play-pause .ic-pause, .player.is-ended .play-pause .ic-pause { display: none; }
.player.is-paused .play-pause .ic-play, .player.is-ended .play-pause .ic-play { display: inline; }
/* -5s / +5s: text-[11px] font-bold */
.btn-icon.btn-text { font-size: 11px; font-weight: 700; font-family: inherit; }
/* time: text-white/50 text-[11px] font-mono tabular-nums ml-1 */
.controls .time { color: rgba(255,255,255,.5); font-size: 11px; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; margin-left: .25rem; white-space: nowrap; flex-shrink: 0; }
.controls .spacer { flex: 1; }
/* Volume button: w-8 h-8 */
.controls .vol-btn { width: 2rem; height: 2rem; }
.controls .vol-btn svg { width: 1rem; height: 1rem; }
/* w-20 h-1 */
.controls input[type=range] { width: 5rem; height: 4px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }
/* Theater & Fullscreen: w-8 h-8 */
.controls #theaterBtn, .controls #fullBtn { width: 2rem; height: 2rem; }
.controls #theaterBtn { margin-left: .25rem; }
.controls #theaterBtn svg, .controls #fullBtn svg { width: 1.25rem; height: 1.25rem; }
.vol-btn .ic-vol-high, .vol-btn .ic-vol-mid, .vol-btn .ic-vol-mute { display: none; }
.vol-btn.v-high .ic-vol-high { display: inline; }
.vol-btn.v-mid .ic-vol-mid { display: inline; }
.vol-btn.v-mute .ic-vol-mute { display: inline; }

/* Card info: p-4 */
.large-card .info { padding: 1rem; }
/* text-white font-bold text-base sm:text-lg leading-snug mb-2 line-clamp-2 */
.large-card .title { font-size: 1rem; font-weight: 700; line-height: 1.375; margin-bottom: .5rem; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) { .large-card .title { font-size: 1.125rem; } }
/* flex items-center gap-2 mb-3 */
.large-card .tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
/* text-[#D4AF37] text-xs font-bold uppercase tracking-wider bg-[#D4AF37]/10 px-2 py-0.5 rounded-full border border-[#D4AF37]/20 */
.large-card .tag { background: rgba(212,175,55,.1); color: var(--gold); border: 1px solid rgba(212,175,55,.2); font-size: .75rem; font-weight: 700; padding: .125rem .5rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: .05em; }
/* series: text-white/30 text-xs (no chip) */
.large-card .tag.series { background: transparent; border: none; color: rgba(255,255,255,.3); text-transform: none; letter-spacing: 0; padding: 0; font-size: .75rem; font-weight: 400; }
/* flex items-center gap-1 text-[#D4AF37] text-xs font-bold */
.large-card .watch-link { display: inline-flex; align-items: center; gap: .25rem; color: var(--gold); font-size: .75rem; font-weight: 700; text-decoration: none; transition: color .2s; }
.large-card .watch-link:hover { color: var(--gold-bright); }
.large-card .watch-link svg { width: .75rem; height: .75rem; }

/* w-full text-left rounded-xl overflow-hidden bg-[#0d0d0d] border border-white/8 hover:border-[#D4AF37]/40 */
.small-card { display: flex; width: 100%; background: #0d0d0d; border: 1px solid rgba(255,255,255,.08); border-radius: .75rem; overflow: hidden; cursor: pointer; text-align: left; color: inherit; transition: border-color .2s; font: inherit; padding: 0; }
.small-card:hover { border-color: rgba(212,175,55,.4); }
/* relative w-[130px] shrink-0 aspect-video bg-[#111] */
.small-card .thumb-wrap { position: relative; width: 130px; aspect-ratio: 16/9; flex-shrink: 0; background: #111; }
.small-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
/* absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/50 */
.small-card .thumb-mask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); transition: background .2s; }
.small-card:hover .thumb-mask { background: rgba(0,0,0,.5); }
/* w-9 h-9 rounded-full bg-[#D4AF37] shadow-md */
.small-card .play-dot { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: var(--gold); display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.small-card:hover .play-dot { background: var(--gold-bright); transform: scale(1.1); }
/* w-4 h-4 text-black ml-0.5 */
.small-card .play-dot svg { width: 1rem; height: 1rem; color: #000; margin-left: 2px; }
/* absolute bottom-1 right-1 bg-black/80 text-white text-[10px] font-bold px-1.5 py-0.5 rounded */
.small-card .dur { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,.8); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
/* flex-1 p-2.5 min-w-0 */
.small-card .meta { flex: 1 1 0%; padding: .625rem; min-width: 0; }
/* text-white text-xs sm:text-sm font-bold leading-snug mb-1.5 line-clamp-3 */
.small-card .meta h4 { font-size: .75rem; font-weight: 700; color: #fff; line-height: 1.375; margin-bottom: .375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
@media (min-width: 640px) { .small-card .meta h4 { font-size: .875rem; } }
.small-card:hover .meta h4 { color: var(--gold-bright); }
/* text-[#D4AF37] text-[10px] font-bold uppercase tracking-wider */
.small-card .niche { color: var(--gold); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* flex flex-col gap-3 */
.bottom-ctas { display: flex; flex-direction: column; gap: .75rem; animation: rfadein .4s ease .5s both; }
/* w-full bg-[#D4AF37] text-black font-bold text-base px-8 py-4 rounded-2xl text-center min-h-[56px] flex items-center justify-center */
.bottom-ctas .btn-primary,
.bottom-ctas .btn-secondary { width: 100%; min-height: 56px; padding: 1rem 2rem; font-size: 1rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; text-align: center; transition: background .2s, border-color .2s, transform .1s; text-decoration: none; }
.bottom-ctas .btn-primary { background: var(--gold); color: #000; font-weight: 700; border: none; box-shadow: none; }
.bottom-ctas .btn-primary:hover { background: var(--gold-bright); }
.bottom-ctas .btn-primary:active { transform: scale(.97); }
.bottom-ctas .btn-secondary { background: transparent; color: #fff; font-weight: 600; border: 1px solid rgba(255,255,255,.2); }
.bottom-ctas .btn-secondary:hover { border-color: rgba(212,175,55,.5); }
.bottom-ctas .btn-secondary:active { transform: scale(.97); }

.empty { text-align: center; padding: 3rem 1rem; color: rgba(255,255,255,.6); }
.empty p { margin-bottom: 1rem; }

/* ─── Loader / DNA helix ─────────────────────────────────────── */
#loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.loader-wrap { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.helix { position: relative; width: 4rem; height: 10rem; }
.helix .dot { position: absolute; width: .75rem; height: .75rem; border-radius: 50%; opacity: .85;
              animation: helixMove 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
.helix .dot.left  { background: var(--gold); left: 10%; top: calc(var(--i) * 9.1%); }
.helix .dot.right { background: #fff; left: 70%; top: calc(var(--i) * 9.1%); animation-name: helixMoveRight; }
.helix .rung { position: absolute; height: 1px; background: rgba(255,255,255,.1); left: 15%; right: 15%;
               top: calc(var(--i) * 9.1%); animation: rungFade 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes helixMove { 0%,100% { transform: translateX(0) scale(1); opacity: .85; } 50% { transform: translateX(20px) scale(.6); opacity: .3; } }
@keyframes helixMoveRight { 0%,100% { transform: translateX(0) scale(1); opacity: .85; } 50% { transform: translateX(-20px) scale(.6); opacity: .3; } }
@keyframes rungFade { 0%,100% { opacity: .1; } 50% { opacity: .4; } }
.loader-title { font-size: 1.25rem; font-weight: 800; }
.loader-sub { color: rgba(255,255,255,.4); font-size: .9rem; min-height: 1.5rem; }

/* ─── Navbar ─────────────────────────────────────────────────── */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: .75rem 1.25rem; background: rgba(8,8,8,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.brand { color: #fff; font-weight: 900; font-size: 1.4rem; letter-spacing: -.02em; text-decoration: none; }
.brand .gold { color: var(--gold); }
.nav-cta { background: var(--gold); color: #000; font-size: .85rem; font-weight: 700; padding: .55rem 1.15rem; border-radius: 999px; text-decoration: none; transition: background .15s; }
.nav-cta:hover { background: var(--gold-bright); }

/* ─── Articles section on landing ────────────────────────────── */
.articles-section { position: relative; z-index: 1; max-width: 64rem; margin: 6rem auto 0; padding: 0 1.25rem; }
.articles-heading { text-align: center; margin-bottom: 2.5rem; }
.articles-heading .kicker { color: var(--gold); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.articles-heading h2 { font-size: 1.75rem; font-weight: 900; margin: .5rem 0 .25rem; }
.articles-heading .sub { color: rgba(255,255,255,.4); font-size: .9rem; }
.articles-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .articles-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .articles-grid { grid-template-columns: 1fr 1fr 1fr; } }
.article-card { display: flex; flex-direction: column; background: #111; border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.article-card:hover { border-color: rgba(212,175,55,.3); background: #161616; }
.article-card .cat { align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: .25rem .7rem; border: 1px solid; border-radius: 999px; margin-bottom: 1rem; }
.article-card h3 { font-size: 1rem; font-weight: 800; line-height: 1.35; margin-bottom: .65rem; transition: color .15s; flex: 1; }
.article-card:hover h3 { color: var(--gold); }
.article-card p { color: rgba(255,255,255,.4); font-size: .85rem; line-height: 1.5; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.05); }
.article-card .readtime { color: rgba(255,255,255,.3); font-size: .72rem; }
.article-card .read-link { color: var(--gold); font-size: .72rem; font-weight: 700; }
.articles-section-cta { text-align: center; margin-top: 2rem; padding-bottom: 3rem; }

/* ─── Articles list page ────────────────────────────────────── */
.articles-main { padding: 6rem 1.25rem 4rem; min-height: 100vh; }
.articles-main .container.narrow { text-align: left; }
.articles-header { margin-bottom: 2.5rem; text-align: left; }
.articles-header .kicker { color: var(--gold); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.articles-header h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; line-height: 1.15; margin: .65rem 0; }
.articles-header .sub { color: rgba(255,255,255,.4); font-size: 1rem; }
.article-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 3rem; }
.article-row { display: flex; flex-direction: column; gap: .65rem; background: #111; border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.article-row:hover { border-color: rgba(212,175,55,.3); background: #141414; }
.article-row-head { display: flex; align-items: center; gap: .65rem; }
.article-row-head .cat { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: .25rem .7rem; border: 1px solid; border-radius: 999px; }
.article-row-head .readtime { color: rgba(255,255,255,.25); font-size: .72rem; }
.article-row-title { font-size: 1.05rem; font-weight: 800; line-height: 1.35; color: #fff; transition: color .15s; }
.article-row:hover .article-row-title { color: var(--gold-bright); }
.article-row-excerpt { color: rgba(255,255,255,.4); font-size: .9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.read-link { color: var(--gold); font-size: .8rem; font-weight: 700; }
.articles-cta { background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.2); border-radius: 1rem; padding: 1.75rem; text-align: center; }
.articles-cta .cta-title { font-size: 1.1rem; font-weight: 800; margin-bottom: .25rem; }
.articles-cta .cta-sub { color: rgba(255,255,255,.5); font-size: .9rem; margin-bottom: 1.25rem; }

/* ─── Article detail page ───────────────────────────────────── */
.article-main { padding: 6rem 1.25rem 4rem; min-height: 100vh; }
.article-main .article { max-width: 42rem; text-align: left; }
.article-header { margin-bottom: 2.5rem; }
.breadcrumb { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; font-size: .85rem; }
.breadcrumb a { color: rgba(255,255,255,.4); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumb a:hover { color: rgba(255,255,255,.7); }
.breadcrumb a svg { width: .9rem; height: .9rem; }
.breadcrumb .sep { color: rgba(255,255,255,.2); }
.breadcrumb .cat-inline { color: var(--gold); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.article-title { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 900; line-height: 1.2; margin-bottom: 1rem; }
.article-meta { display: flex; gap: 1rem; color: rgba(255,255,255,.4); font-size: .9rem; }
.article-meta .readtime { display: inline-flex; align-items: center; gap: .35rem; }
.article-meta .readtime svg { width: 1rem; height: 1rem; }
.article-content { color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.75; }
.article-content > * { margin-bottom: 1.5rem; }
.article-content h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: #fff; margin-top: 2.5rem; margin-bottom: 1rem; }
.article-content h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: #fff; margin-top: 1.5rem; margin-bottom: .75rem; }
.article-content p { color: rgba(255,255,255,.75); }
.article-content p strong { color: #fff; font-weight: 700; }
.article-content p a { color: var(--gold); text-decoration: underline; }
.article-content ul { padding-left: 1.25rem; }
.article-content li { color: rgba(255,255,255,.75); margin-bottom: .55rem; }
.article-content li::marker { color: var(--gold); }
.article-cta { background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.2); border-radius: 1rem; padding: 1.75rem; text-align: center; margin: 2.5rem 0; }
.article-cta .cta-title { font-size: 1.1rem; font-weight: 800; margin-bottom: .25rem; }
.article-cta .cta-sub { color: rgba(255,255,255,.5); font-size: .9rem; margin-bottom: 1.25rem; }

.related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.related h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 1rem; color: rgba(255,255,255,.7); }
.related-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .related-grid { grid-template-columns: 1fr 1fr; } }
.related-card { background: #111; border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; text-decoration: none; transition: border-color .15s; display: flex; flex-direction: column; gap: .55rem; }
.related-card:hover { border-color: rgba(212,175,55,.3); }
.related-card .cat { align-self: flex-start; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: .2rem .55rem; border: 1px solid; border-radius: 999px; }
.related-card h4 { font-size: .92rem; font-weight: 700; color: #fff; line-height: 1.35; }
.article-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }