:root{
  --bg:#07111f; --bg-2:#0d1728; --bg-3:#101b2d; --card:#101c2f; --card-2:#13233a;
  --stroke:rgba(255,255,255,.08); --text:#e8eef8; --muted:#9db0cb; --accent:#7c9cff;
  --accent-2:#6ee7f9; --accent-3:#ffd75e; --success:#98ffb7; --danger:#ff9d9d;
  --shadow:0 18px 60px rgba(0,0,0,.35); --radius:24px; --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:radial-gradient(circle at top left, rgba(124,156,255,.14), transparent 28%),radial-gradient(circle at top right, rgba(110,231,249,.08), transparent 22%),linear-gradient(180deg, #06101d 0%, #0a1322 45%, #08111d 100%);color:var(--text)}
img{max-width:100%;display:block} a{color:inherit;text-decoration:none}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.topbar{position:sticky; top:0; z-index:40; backdrop-filter: blur(16px); background:rgba(7,17,31,.78); border-bottom:1px solid rgba(255,255,255,.06)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand__logo{width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid; place-items:center; color:#07111f; font-weight:900; box-shadow:var(--shadow)}
.brand__name{font-weight:900; letter-spacing:.08em; font-size:1rem}
.brand__tag{font-size:.82rem; color:var(--muted)}
.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.nav a{padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color:#dfe8f7; font-weight:700; font-size:.92rem; transition:.2s transform,.2s background,.2s border-color}
.nav a:hover,.nav a.active{transform:translateY(-1px); background:rgba(124,156,255,.14); border-color:rgba(124,156,255,.28)}
.hero{padding:58px 0 36px}
.hero__grid{display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:center}
.eyebrow,.section-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; font-weight:900; color:var(--accent-2)}
.hero h1,.page-hero h1{font-size:clamp(2.2rem, 4vw, 4.4rem); line-height:1.02; margin:10px 0 16px; max-width:12ch}
.page-hero h1{max-width:none}
.lead{font-size:1.06rem; line-height:1.8; color:#d2def0; max-width:64ch}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 18px; border-radius:16px; font-weight:900; transition:.22s transform,.22s opacity,.22s background}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:linear-gradient(135deg,var(--accent),#92a7ff); color:#07111f; box-shadow:var(--shadow)}
.btn--ghost{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.btn--amazon{background:linear-gradient(135deg,#ffd75e,#ffb921); color:#201500; box-shadow:0 14px 28px rgba(255,185,33,.18)}
.hero__bullets,.info-grid,.chips{display:grid; gap:12px; padding:0; margin:20px 0 0; list-style:none}
.hero__bullets{grid-template-columns:repeat(3,1fr)}
.hero__bullets li,.trust-card,.guide-card,.product-card,.table-wrap,.faq-list details,.footer__inner,.page-hero,.ad-banner,.mini-card,.newsletter,.category-callout{border:1px solid var(--stroke); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow:var(--shadow)}
.hero__bullets li{padding:14px 16px; border-radius:18px; color:#dce7f9; min-height:80px}
.hero__bullets strong{display:block; font-size:1.05rem; color:#fff; margin-bottom:4px}
.hero__media,.page-hero__media{position:relative}
.hero__card,.page-hero__card{overflow:hidden; border-radius:30px; min-height:440px; border:1px solid var(--stroke); box-shadow:var(--shadow); position:relative}
.hero__card img,.page-hero__card img{width:100%; height:100%; object-fit:cover}
.hero__badge{position:absolute; left:20px; bottom:20px; background:rgba(7,17,31,.82); border:1px solid rgba(255,255,255,.08); padding:14px 16px; border-radius:18px; max-width:320px}
section{padding:26px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px}
.section-head h2{font-size:clamp(1.6rem,2.4vw,2.3rem); margin:8px 0 0}
.section-head p{margin:8px 0 0; color:var(--muted); max-width:60ch; line-height:1.7}
.grid{display:grid; gap:18px}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}
.product-card,.mini-card,.guide-card,.trust-card,.newsletter,.page-hero,.category-callout,.ad-banner{border-radius:24px}
.product-card{overflow:hidden}
.card-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:#111}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease}
.product-card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:18px}
.kicker{display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(124,156,255,.15); border:1px solid rgba(124,156,255,.18); color:#cfe1ff; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em}
.product-card h3,.mini-card h3,.guide-card h3,.trust-card h3{margin:12px 0 10px; font-size:1.2rem}
.product-card p,.mini-card p,.guide-card p,.trust-card p,.newsletter p,.ad-banner p,.category-callout p{color:var(--muted); line-height:1.72; margin:0 0 16px}
.specs{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px}
.specs span,.chips li{padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#d8e3f6; font-size:.86rem; font-weight:700}
.price-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}
.price-row strong{font-size:1.2rem}
.ad-banner{padding:28px; display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center; background:radial-gradient(circle at left top, rgba(255,215,94,.16), transparent 30%),linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02))}
.ad-banner__label{font-size:.78rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-3)}
.ad-banner__box{padding:18px; border-radius:20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06)}
.muted{color:var(--muted)}
.page-hero{padding:28px; display:grid; grid-template-columns:1fr .9fr; gap:20px; align-items:center}
.guides{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.guide-card,.trust-card,.mini-card,.newsletter,.category-callout{padding:22px}
.newsletter{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:center}
.fake-form{display:flex; gap:10px; flex-wrap:wrap}
.fake-form input{flex:1 1 220px; min-height:50px; border-radius:14px; padding:0 16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--text)}
.footer{padding:24px 0 48px}
.footer__inner{padding:24px; border-radius:24px; display:grid; grid-template-columns:1.3fr .7fr; gap:18px}
.footer small,.footer p{color:var(--muted); line-height:1.7}
.sticky-cta{position:fixed; right:18px; bottom:18px; z-index:60; transition:.22s opacity,.22s transform}
.sticky-cta.is-hidden{opacity:0; pointer-events:none; transform:translateY(14px)}
.rank{position:absolute; top:14px; left:14px; background:rgba(7,17,31,.84); color:#fff; border:1px solid rgba(255,255,255,.08); padding:8px 10px; border-radius:12px; font-weight:900; font-size:.82rem}
.disclosure{font-size:.9rem; color:var(--muted); line-height:1.75; padding:18px; border-radius:18px; border:1px dashed rgba(255,255,255,.12); background:rgba(255,255,255,.02)}
@media (max-width:1100px){.hero__grid,.page-hero,.newsletter,.ad-banner,.footer__inner{grid-template-columns:1fr}.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3,.guides{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.topbar__inner{align-items:flex-start; flex-direction:column}.hero__bullets,.grid--4,.grid--3,.guides{grid-template-columns:1fr}.hero__card,.page-hero__card{min-height:300px}.container{width:min(var(--max), calc(100% - 22px))}.hero{padding-top:34px}}