/* Bitcoineri premium visual layer */
:root {
  --btc-orange: #ff9d2e;
  --btc-orange-dark: #ff7a00;
  --brand-blue: #8bc5ff;
  --dark-bg: #06080c;
  --card-bg: rgba(18, 23, 31, .64);
  --card-border: rgba(255, 255, 255, .10);
  --text-primary: #f7f8fa;
  --text-secondary: #aeb6c2;
  --text-muted: #747f8f;
  --accent-green: #66e3b4;
  --radius: 18px;
  --radius-lg: 32px;
  --shadow-card: 0 30px 80px rgba(0, 0, 0, .34);
  --shadow-glow: 0 30px 120px rgba(255, 147, 26, .13);
  --max-width: 1280px;
  --ease-lux: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-padding-top: 92px; }

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 28%, rgba(30, 104, 255, .055), transparent 28rem),
    radial-gradient(circle at 92% 62%, rgba(255, 142, 36, .045), transparent 32rem),
    #06080c;
  letter-spacing: -.012em;
}

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

::selection { background: rgba(255, 157, 46, .34); color: #fff; }

.page-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 3000;
  background: rgba(255, 255, 255, .04);
}

.page-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff7a00, #ffd2a1);
  box-shadow: 0 0 16px rgba(255, 157, 46, .72);
}

.container { padding-inline: clamp(20px, 4vw, 42px); }

h1, h2, h3, h4 { letter-spacing: -.045em; }

h1 { font-size: clamp(3.35rem, 6.5vw, 6.65rem); line-height: .94; }

h2 { font-size: clamp(2.35rem, 4.6vw, 4.4rem); line-height: 1; }

.section-header { margin-bottom: clamp(34px, 5vw, 64px); }

.section-label {
  color: #ffb25b;
  letter-spacing: .18em;
  font-size: .69rem;
}

.section-subtitle { max-width: 680px; font-size: 1.08rem; line-height: 1.75; }

.btn {
  min-height: 50px;
  border-radius: 14px;
  letter-spacing: -.01em;
  transition: transform .35s var(--ease-lux), box-shadow .35s var(--ease-lux), border-color .35s ease, background .35s ease;
}

.btn-primary {
  color: #0a0907;
  background: linear-gradient(135deg, #ffb45f, #ff8611 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 12px 30px rgba(255, 128, 0, .2);
}

.btn-primary:hover {
  color: #050403;
  background: linear-gradient(135deg, #ffc276, #ff9427 72%);
  transform: translateY(-3px);
  box-shadow: inset 0 1px rgba(255,255,255,.6), 0 18px 42px rgba(255,128,0,.3);
}

.btn-outline {
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
}

.btn-outline:hover {
  color: #fff;
  border-color: rgba(255, 178, 91, .5);
  background: rgba(255,255,255,.075);
  transform: translateY(-3px);
}

/* Navigation */
.navbar { padding: 20px 0; }

.navbar::before {
  content: '';
  position: absolute;
  inset: 8px max(12px, calc((100vw - 1360px) / 2)) 0;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

.navbar.scrolled { padding: 14px 0; background: transparent; border: 0; backdrop-filter: none; }

.navbar.scrolled::before {
  opacity: 1;
  background: rgba(10, 13, 18, .72);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 16px 60px rgba(0,0,0,.32);
  backdrop-filter: blur(24px) saturate(150%);
}

.navbar .container { position: relative; z-index: 1; }

.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffc06d, #f47700);
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 8px 24px rgba(247,147,26,.16);
}

.logo-text { font-size: 1.08rem; letter-spacing: -.04em; }
.logo-dot { color: #ff9d2e; }
.nav-links { gap: 34px; }
.nav-links a { font-size: .86rem; letter-spacing: .02em; }
.nav-links a::after { height: 1px; background: #ffad51; }

/* Hero */
.hero {
  min-height: 100svh;
  padding: 150px 0 86px;
  background: transparent;
  isolation: isolate;
}

.hero::before {
  inset: auto;
  top: -10%;
  right: -8%;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle, rgba(255,140,20,.105), transparent 64%);
  filter: blur(10px);
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 220px;
  background: linear-gradient(transparent, #06080c);
  z-index: -1;
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 72% at 55% 38%, #000 5%, transparent 70%);
}

.hero-aurora {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .26;
  pointer-events: none;
}

.hero-aurora-one { width: 34rem; height: 21rem; left: -12rem; top: 8rem; background: #124cba; }
.hero-aurora-two { width: 28rem; height: 24rem; right: -7rem; top: 19rem; background: #c96710; }

.hero .container { grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); gap: clamp(46px, 7vw, 104px); }

.hero-content { max-width: 690px; }

.hero-badge {
  margin-bottom: 30px;
  padding: 8px 13px 8px 10px;
  color: #d8dee8;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.11);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  font-size: .72rem;
  letter-spacing: .04em;
}

.hero-badge .pulse { background: #ff9d2e; box-shadow: 0 0 14px rgba(255,157,46,.75); }

.hero h1 { margin-bottom: 28px; max-width: 760px; }

.hero h1 .highlight {
  display: inline;
  color: transparent;
  background: linear-gradient(100deg, #fff 0%, #ffd7aa 40%, #ff9c2e 95%);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero-description { max-width: 620px; margin-bottom: 34px; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.72; }
.hero-buttons { gap: 12px; }
.hero-buttons .btn-lg { padding: 17px 24px; font-size: .98rem; }
.hero-buttons .btn-outline { padding-inline: 22px; }

.hero-social-proof { margin-top: 30px; gap: 14px; }
.live-indicator { color: #98a3b2; font-size: .78rem; }
.proof-mark { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(102,227,180,.36); border-radius: 50%; color: var(--accent-green); font-size: .7rem; }
.avatar-stack .avatar { border: 2px solid #0b0e13; filter: saturate(.72); }
.avatar-text { color: #c0c7d1; }

.hero-stats {
  width: fit-content;
  margin-top: 38px;
  padding-top: 24px;
  gap: 0;
  border-top-color: rgba(255,255,255,.085);
}

.stat-item { min-width: 128px; padding-right: 28px; }
.stat-item + .stat-item { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.08); }
.stat-number { color: #f7f8fa; font-size: 1.48rem; letter-spacing: -.05em; }
.stat-label { margin-top: 2px; color: #707b8c; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; }

.hero-visual { min-height: 650px; perspective: 1200px; transform-style: preserve-3d; }

.visual-orbit {
  position: absolute;
  width: 470px;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-9deg);
  box-shadow: 0 0 0 80px rgba(255,255,255,.012), 0 0 0 160px rgba(255,255,255,.008);
}

.hero-card-stack { position: absolute; inset: 0; transform-style: preserve-3d; }

.showcase-card {
  position: absolute;
  width: min(390px, 78%);
  left: 50%;
  top: 50%;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  box-shadow: 0 38px 80px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.13);
  backdrop-filter: blur(20px) saturate(140%);
  transition: transform .18s ease-out;
  will-change: transform;
}

.showcase-card img { width: 100%; filter: drop-shadow(0 16px 20px rgba(0,0,0,.3)); }
.showcase-card-back { opacity: .42; transform: translate(-60%, -90%) rotate(-16deg) scale(.8); }
.showcase-card-mid { opacity: .68; transform: translate(-30%, -68%) rotate(14deg) scale(.88); }
.showcase-card-front { z-index: 3; transform: translate(-48%, -39%) rotate(-4deg); padding: 48px 17px 17px; }

.card-rank {
  position: absolute;
  inset: 14px 16px auto;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #a9b2bf;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.card-rank span { color: #ffad50; font-weight: 800; }

.card-score {
  position: absolute;
  right: 7px;
  bottom: -42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  color: #fff;
  background: rgba(12,15,20,.74);
  box-shadow: 0 16px 34px rgba(0,0,0,.3);
  backdrop-filter: blur(16px);
}

.card-score strong { color: #ffad50; font-size: 1.25rem; }
.card-score span { max-width: 58px; color: #8d98a7; font-size: .61rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; }

.metric-pill {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(12,16,22,.66);
  box-shadow: 0 18px 44px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
}

.metric-pill-one { top: 24%; left: 2%; }
.metric-pill-two { right: -1%; bottom: 24%; }
.metric-label { color: #7d8999; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; }
.metric-pill strong { font-size: 1rem; color: #f2f4f7; }

.visual-caption {
  position: absolute;
  z-index: 5;
  left: 8%;
  bottom: 7%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 15px 18px;
  border-left: 1px solid rgba(255,157,46,.7);
  color: #fff;
}

.visual-caption > span { color: #737f8f; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.visual-caption strong { font-size: .82rem; letter-spacing: 0; }

/* Trust bar */
.trust-bar { position: relative; padding: 0 0 72px; background: transparent; border: 0; }
.trust-bar .container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; padding: 1px; border: 1px solid rgba(255,255,255,.075); border-radius: 20px; background: rgba(255,255,255,.04); overflow: hidden; }
.trust-item { min-height: 70px; justify-content: center; color: #8e99a8; background: rgba(9,12,17,.72); font-size: .72rem; letter-spacing: .035em; text-transform: uppercase; }
.trust-icon { color: #ff9d2e; filter: grayscale(1); opacity: .8; }

/* Section rhythm and premium glass surfaces */
.spotlight, .featured-partners, .quiz-section, .featured-reviews, .comparison,
.exchange-spotlight, .calculator, .testimonials, .categories, .how-it-works,
.faq-section, .investing-guides, .articles, .newsletter { padding-block: clamp(78px, 10vw, 140px); }
body .spotlight, body .featured-partners { padding-block: clamp(78px, 10vw, 140px); }

.spot-card, .fp-card, .quiz-box, .podium-card, .review-card, .comparison-table-wrap,
.exchange-card, .calc-box, .testimonial-card, .category-card, .step-card,
.faq-item, .guide-card, .article-card, .newsletter-box {
  border-color: rgba(255,255,255,.095) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 28px 80px rgba(0,0,0,.2);
  backdrop-filter: blur(18px) saturate(125%);
}

body .spot-card { padding: clamp(32px, 5vw, 64px); border-radius: 34px; }
.spotlight .spot-glow { opacity: .75; filter: blur(28px); }
.spot-right img { transform: rotate(4deg); transition: transform .6s var(--ease-lux); }
.spot-card:hover .spot-right img { transform: rotate(1deg) translateY(-7px); }

.featured-partners { background: linear-gradient(180deg, transparent, rgba(255,255,255,.012), transparent); }
body .fp-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
body .fp-card { padding: 32px 24px; border-radius: 22px; }
body .fp-card:hover, .review-card:hover, .category-card:hover, .article-card:hover { transform: translateY(-8px); border-color: rgba(255,157,46,.3) !important; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 36px 90px rgba(0,0,0,.3), 0 0 0 1px rgba(255,157,46,.06); }
.fp-logo, .rc-logo-img, .product-icon-img { box-shadow: 0 12px 28px rgba(0,0,0,.22); }

.partner-logos { border-block-color: rgba(255,255,255,.06); background: rgba(255,255,255,.012); }
.logos-track { filter: saturate(.65); opacity: .72; }

.quiz-section { position: relative; background: transparent; }
.quiz-section::before { content: ''; position: absolute; width: 46rem; height: 38rem; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(39,105,218,.08); filter: blur(100px); pointer-events: none; }
.quiz-box { position: relative; border-radius: 34px; overflow: hidden; }
.quiz-header { padding-top: 52px; }
.quiz-option { border-radius: 17px; border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.025); }
.quiz-option:hover { transform: translateY(-3px); background: rgba(255,255,255,.06); border-color: rgba(255,157,46,.36); }
.progress-bar { background: linear-gradient(90deg, #ff8210, #ffd19a); }

.top-three { gap: 18px; align-items: stretch; }
.podium-card { border-radius: 28px; }
.podium-card.gold { border-color: rgba(255,170,69,.34) !important; background: linear-gradient(145deg, rgba(255,157,46,.13), rgba(255,255,255,.025)) !important; }
.podium-card-img img { transition: transform .55s var(--ease-lux); }
.podium-card:hover .podium-card-img img { transform: translateY(-8px) rotate(-2deg); }
.reviews-grid { gap: 16px; }
.review-card { border-radius: 22px; transition: transform .45s var(--ease-lux), border-color .35s ease, box-shadow .45s var(--ease-lux); }
.rc-cta, .table-btn { color: #ffad50; }

.comparison { background: radial-gradient(circle at 50% 50%, rgba(44,99,180,.07), transparent 45%); }
.comparison-table-wrap { border-radius: 24px; overflow: hidden; }
.comparison-table th { color: #7d8998; background: rgba(255,255,255,.025); letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; }
.comparison-table tr { border-color: rgba(255,255,255,.055); }
.comparison-table tbody tr:hover { background: rgba(255,255,255,.035); }

.calculator, .how-it-works, .investing-guides { background: rgba(255,255,255,.009); }
.calc-box, .newsletter-box { border-radius: 34px; }
.calc-header p, .calc-control label { color: var(--text-muted); }
.calc-spend-display { color: var(--text-primary); }
.calc-spend-display .calc-currency { color: #ffad50; }
.calc-spend-display .calc-suffix, .calc-range-labels { color: var(--text-muted); }
#calcSpend { background: linear-gradient(90deg, #ff9624 var(--pct, 15%), rgba(255,255,255,.1) var(--pct, 15%)); }
#calcSpend::-webkit-slider-thumb { background: #10151d; border-color: #ff9d2e; box-shadow: 0 4px 18px rgba(255,157,46,.3); }
#calcSpend::-moz-range-thumb { background: #10151d; border-color: #ff9d2e; }
.calc-row { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
.calc-row.calc-row-top { border-color: rgba(255,157,46,.3); background: linear-gradient(135deg, rgba(255,157,46,.11), rgba(255,255,255,.025)); }
.calc-row .cr-logo { border-color: rgba(255,255,255,.1); }
.calc-row .cr-name { color: var(--text-primary); }
.calc-row .cr-rate { color: var(--text-muted); }
.calc-row .cr-amount, .calc-row.calc-row-top .cr-amount { color: #ffb45f; }
.calc-row:hover { background: rgba(255,255,255,.055); transform: translateX(4px); }

.testimonial-card, .category-card, .step-card, .guide-card, .article-card { border-radius: 22px; }
.testimonial-stars { color: #ffad50; }
.faq-list { gap: 10px; }
.faq-item { border-radius: 18px; }
.faq-question { padding: 22px 24px; }
.faq-item.open { border-color: rgba(255,157,46,.24) !important; }

.newsletter-box { overflow: hidden; }
.newsletter-form input { border-color: rgba(255,255,255,.11); background: rgba(4,7,11,.6); }
.newsletter-form input:focus { border-color: rgba(255,157,46,.5); box-shadow: 0 0 0 4px rgba(255,157,46,.08); }

.footer { border-top: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); }
.affiliate-disclosure { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.025); border-radius: 16px; }

.fade-in { transform: translateY(28px); transition: opacity .85s var(--ease-lux), transform .85s var(--ease-lux); }
.fade-in.visible { transform: translateY(0); }

@media (max-width: 1080px) {
  .hero .container { grid-template-columns: 1fr 440px; gap: 32px; }
  h1 { font-size: clamp(3.2rem, 6.4vw, 5.4rem); }
  .hero-visual { min-height: 570px; }
  .metric-pill-one { left: 0; }
  .metric-pill-two { right: 0; }
}

@media (max-width: 900px) {
  .hero { padding-top: 132px; }
  .hero .container { grid-template-columns: 1fr; text-align: left; }
  .hero-content { max-width: 760px; }
  .hero-visual { min-height: 580px; width: min(620px, 100%); margin: -20px auto 0; }
  .hero-description { margin-inline: 0; }
  .hero-buttons, .hero-avatars { justify-content: flex-start; }
  .hero-stats { margin-inline: 0; }
  .trust-bar .container { grid-template-columns: repeat(2, 1fr); }
  .trust-item:last-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  h1 { font-size: clamp(3.05rem, 14.8vw, 4.7rem); }
  h2 { font-size: clamp(2.15rem, 11vw, 3.2rem); }
  .hero { padding: 118px 0 58px; }
  .hero-badge { margin-bottom: 24px; }
  .hero-buttons { display: grid; }
  .hero-buttons .btn { width: 100%; }
  .hero-stats { width: 100%; overflow: hidden; }
  .stat-item { min-width: 0; flex: 1; padding-right: 12px; }
  .stat-item + .stat-item { padding-left: 12px; }
  .stat-number { font-size: 1.18rem; }
  .stat-label { font-size: .56rem; }
  .hero-visual { min-height: 470px; transform: scale(.96); }
  .showcase-card { width: 76%; }
  .metric-pill { padding: 9px 11px; gap: 8px; }
  .metric-pill-one { top: 17%; }
  .metric-pill-two { bottom: 19%; }
  .visual-caption { left: 2%; bottom: 2%; }
  .trust-bar .container { grid-template-columns: 1fr; }
  .trust-item:last-child { grid-column: auto; }
  .spot-card, .quiz-box, .calc-box, .newsletter-box { border-radius: 24px; }
  body .spot-card { padding: 28px 22px; }
}

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

/* Refined editorial hero */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: var(--text-secondary);
  background: rgba(255,255,255,.035);
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
  margin-left: 24px;
}

.navbar .container { justify-content: flex-start; }
.navbar .nav-links { margin-left: auto; }
.navbar .nav-cta { margin-left: 10px; }

.theme-toggle:hover { color: var(--text-primary); border-color: rgba(255,157,46,.3); }
.theme-toggle-track { position: relative; width: 30px; height: 17px; border-radius: 999px; background: #303844; box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.theme-toggle-knob { position: absolute; width: 11px; height: 11px; left: 3px; top: 3px; border-radius: 50%; background: #f6f7f8; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .35s var(--ease-lux), background .25s ease; }
.theme-toggle-label { min-width: 28px; text-align: left; }

.hero .container { align-items: center; }
.hero-visual { min-height: 640px; display: block; }

.product-report {
  position: absolute;
  inset: 4% 0 2%;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025)),
    rgba(9,12,17,.56);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 50px 120px rgba(0,0,0,.42);
  backdrop-filter: blur(28px) saturate(135%);
  overflow: hidden;
}

.product-report::before {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  right: -130px;
  top: 70px;
  border-radius: 50%;
  background: rgba(255,145,30,.12);
  filter: blur(70px);
  pointer-events: none;
}

.report-topline {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.report-stage {
  position: relative;
  flex: 1;
  min-height: 300px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.report-stage::before {
  content: '';
  position: absolute;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(255,255,255,.018), 0 0 0 108px rgba(255,255,255,.009);
}

.report-rank {
  position: absolute;
  left: 8px;
  top: 42%;
  z-index: -1;
  color: rgba(255,255,255,.035);
  font-size: clamp(8rem, 17vw, 13rem);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.12em;
}

.report-stage img {
  position: relative;
  z-index: 2;
  width: min(390px, 84%);
  transform: rotate(-7deg);
  filter: drop-shadow(0 34px 35px rgba(0,0,0,.42));
  transition: transform .7s var(--ease-lux);
}

.product-report:hover .report-stage img { transform: rotate(-3deg) translateY(-8px); }

.report-verdict {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 2px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.report-kicker { display: block; margin-bottom: 5px; color: #ffad50; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.report-verdict h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.45rem); letter-spacing: -.055em; }
.report-score { display: flex; align-items: baseline; white-space: nowrap; }
.report-score strong { color: #ffad50; font-size: 2.25rem; letter-spacing: -.06em; }
.report-score span { color: var(--text-muted); font-size: .73rem; }

.report-metrics { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid rgba(255,255,255,.08); }
.report-metrics > div { padding: 14px 10px; }
.report-metrics > div + div { border-left: 1px solid rgba(255,255,255,.08); }
.report-metrics span, .report-metrics strong { display: block; }
.report-metrics span { margin-bottom: 4px; color: var(--text-muted); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.report-metrics strong { color: var(--text-primary); font-size: .8rem; }
.report-link { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 17px 2px 1px; color: var(--text-primary); font-size: .78rem; }
.report-link:hover { color: #ffad50; }

/* True light mode */
html { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;
  --dark-bg: #f4f1ea;
  --card-bg: rgba(255,255,255,.7);
  --card-border: rgba(25,30,38,.11);
  --text-primary: #12161d;
  --text-secondary: #505967;
  --text-muted: #7b8390;
  --brand-blue: #245fa7;
  --accent-green: #087a59;
  --shadow-card: 0 26px 70px rgba(32,37,44,.1);
  --gradient-hero: linear-gradient(135deg, #f4f1ea 0%, #ece9e2 45%, #f7f4ee 100%);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% 24%, rgba(40,100,180,.08), transparent 30rem),
    radial-gradient(circle at 92% 58%, rgba(226,119,14,.08), transparent 31rem),
    #f4f1ea;
}

html[data-theme="light"] body::before { opacity: .13; mix-blend-mode: multiply; }
html[data-theme="light"] .hero::after { background: linear-gradient(transparent, #f4f1ea); }
html[data-theme="light"] .hero-grid { opacity: .3; background-image: linear-gradient(rgba(15,22,30,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15,22,30,.07) 1px, transparent 1px); }
html[data-theme="light"] .hero-aurora-one { background: #8db6e7; opacity: .2; }
html[data-theme="light"] .hero-aurora-two { background: #edb16d; opacity: .22; }
html[data-theme="light"] .hero h1 .highlight { background: linear-gradient(100deg, #161a20, #a84f00 88%); background-clip: text; -webkit-background-clip: text; }
html[data-theme="light"] .hero-badge,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .btn-outline { background: rgba(255,255,255,.56); border-color: rgba(20,26,34,.12); }
html[data-theme="light"] .btn-outline { color: #161b22; }
html[data-theme="light"] .btn-outline:hover { color: #161b22; background: rgba(255,255,255,.86); }
html[data-theme="light"] .theme-toggle-track { background: #ded8ce; }
html[data-theme="light"] .theme-toggle-knob { transform: translateX(13px); background: #ed871a; }
html[data-theme="light"] .navbar.scrolled::before { background: rgba(248,246,241,.78); border-color: rgba(20,25,32,.1); box-shadow: 0 16px 50px rgba(40,44,50,.1); }
html[data-theme="light"] .logo-text, html[data-theme="light"] .nav-logo:hover { color: #11151b; }
html[data-theme="light"] .nav-links a:hover { color: #11151b; }

html[data-theme="light"] .product-report {
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.55)), rgba(255,255,255,.72);
  border-color: rgba(25,31,38,.11);
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 45px 100px rgba(45,50,57,.14);
}

html[data-theme="light"] .product-report::before { background: rgba(241,145,43,.15); }
html[data-theme="light"] .report-topline,
html[data-theme="light"] .report-verdict,
html[data-theme="light"] .report-metrics { border-color: rgba(25,31,38,.1); }
html[data-theme="light"] .report-stage::before { border-color: rgba(25,31,38,.09); box-shadow: 0 0 0 54px rgba(20,28,36,.024), 0 0 0 108px rgba(20,28,36,.012); }
html[data-theme="light"] .report-rank { color: rgba(16,24,32,.045); }
html[data-theme="light"] .report-metrics > div + div { border-color: rgba(25,31,38,.1); }

html[data-theme="light"] .trust-bar .container { border-color: rgba(25,31,38,.1); background: rgba(25,31,38,.06); }
html[data-theme="light"] .trust-item { color: #69727f; background: rgba(255,255,255,.68); }
html[data-theme="light"] .partner-logos { background: rgba(255,255,255,.26); border-block-color: rgba(25,31,38,.08); }

html[data-theme="light"] .spot-card,
html[data-theme="light"] .fp-card,
html[data-theme="light"] .quiz-box,
html[data-theme="light"] .podium-card,
html[data-theme="light"] .review-card,
html[data-theme="light"] .comparison-table-wrap,
html[data-theme="light"] .exchange-card,
html[data-theme="light"] .calc-box,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .step-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .guide-card,
html[data-theme="light"] .article-card,
html[data-theme="light"] .newsletter-box {
  border-color: rgba(25,31,38,.1) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.48)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 24px 60px rgba(37,42,49,.08);
}

html[data-theme="light"] .podium-card.gold { background: linear-gradient(145deg, rgba(255,166,64,.14), rgba(255,255,255,.65)) !important; }
html[data-theme="light"] .quiz-option,
html[data-theme="light"] .calc-row { border-color: rgba(25,31,38,.1); background: rgba(255,255,255,.5); }
html[data-theme="light"] .quiz-option:hover,
html[data-theme="light"] .calc-row:hover { background: rgba(255,255,255,.9); }
html[data-theme="light"] .comparison-table th { color: #68717e; background: rgba(25,31,38,.035); }
html[data-theme="light"] .comparison-table tr { border-color: rgba(25,31,38,.08); }
html[data-theme="light"] .comparison-table tbody tr:hover { background: rgba(255,255,255,.55); }
html[data-theme="light"] .calc-row.calc-row-top { background: linear-gradient(135deg, rgba(255,157,46,.14), rgba(255,255,255,.72)); }
html[data-theme="light"] .newsletter-form input { color: #151a21; background: rgba(255,255,255,.72); border-color: rgba(25,31,38,.12); }
html[data-theme="light"] .footer { border-color: rgba(25,31,38,.09); background: linear-gradient(180deg, rgba(255,255,255,.25), transparent); }
html[data-theme="light"] .affiliate-disclosure { border-color: rgba(25,31,38,.09); background: rgba(255,255,255,.46); }

@media (max-width: 900px) {
  .theme-toggle { margin-left: auto; }
  .hero-visual { width: min(600px, 100%); min-height: 620px; }
  body .fp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .theme-toggle { padding: 7px; }
  .theme-toggle-label { display: none; }
  .product-report { inset: 2% 0; padding: 17px; border-radius: 24px; }
  .hero-visual { min-height: 540px; transform: none; }
  .report-stage { min-height: 250px; }
  .report-stage img { width: 90%; }
  .report-metrics > div { padding-inline: 7px; }
  .report-metrics strong { font-size: .7rem; }
  body .fp-grid { grid-template-columns: 1fr; }
}