:root {
    color-scheme: dark;
    --page: #050d13;
    --panel: #09131c;
    --panel-raised: #101b29;
    --line: #192b3a;
    --muted: #a3afbd;
    --text: #f2f5fb;
    --blue: #168cff;
    --purple: #a21cff;
    --pink: #d73fff;
    --shell: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--page); }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: radial-gradient(ellipse at 50% -15%, #0b1d2e 0, var(--page) 42rem);
    color: var(--text);
    font: 400 14px/1.55 Inter, Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
a:hover { color: #c793ff; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
.site-shell { width: min(var(--shell), calc(100% - 44px)); margin-inline: auto; }
.site-header { z-index: 5; background: rgba(4, 11, 17, .96); border-bottom: 1px solid #192936; }
.header-inner { min-height: 112px; display: flex; align-items: end; justify-content: space-between; gap: 34px; }
.brand { flex: 0 0 310px; align-self: center; }
.brand img { width: 100%; height: auto; }
.primary-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.55vw, 27px); padding: 0 0 23px; }
.primary-nav a { color: #e4e9f1; font-size: 11px; font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: color .18s ease; }
.primary-nav a:hover { color: #b86aff; }
.primary-nav .nav-search { width: 22px; height: 22px; margin-left: 1px; }
.nav-search svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.menu-toggle { display: none; }
.site-main { flex: 1 0 auto; padding-top: 0; padding-bottom: 28px; }
.site-footer { border-top: 1px solid #1b2c3b; background: #071119; }
.footer-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-brand { display: grid; line-height: 1.1; }
.footer-brand strong { color: white; font: 800 25px/1 'Barlow Condensed', Impact, sans-serif; letter-spacing: -.04em; text-shadow: 0 0 15px #6ca8ff; }
.footer-brand strong span { font-size: .7em; }
.footer-brand small { margin: 5px 0 0 3px; color: #bac4d0; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.footer-inner nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 25px; }
.footer-inner nav a { color: #b2bdc9; font-size: 11px; }

/* Homepage */
.home-template .site-main { width: 100%; max-width: none; padding: 0 0 30px; }
.home-template .site-main > :not(.hero) { width: min(var(--shell), calc(100% - 44px)); margin-inline: auto; }
.hero { position: relative; height: clamp(340px, 31vw, 440px); overflow: hidden; background: #07121c; border-bottom: 1px solid #111f2b; }
.hero::before { position: absolute; inset: 0; content: ''; background: radial-gradient(ellipse at 76% 50%, rgba(72, 106, 148, .4), transparent 36%), radial-gradient(ellipse at 83% 84%, rgba(105, 46, 160, .18), transparent 38%), linear-gradient(100deg, #06121a 3%, #07131c 42%, #121827 70%, #253140 100%); }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; background-position: center, center 46%; background-size: cover; transition: opacity .55s ease, visibility .55s ease; }
.hero-slide.is-active { z-index: 1; opacity: 1; visibility: visible; }
.hero-copy { position: relative; z-index: 2; width: min(var(--shell), calc(100% - 56px)); margin-inline: auto; padding: 35px 12px 46px; }
.hero-copy > * { max-width: 470px; }
.eyebrow, .category-chip { display: inline-flex; align-items: center; background: #7118dd; color: #fff; padding: 4px 8px; font-size: 10px; font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: .035em; }
.hero-copy h1 { margin: 12px 0 9px; font-size: clamp(32px, 3.1vw, 43px); line-height: 1.07; letter-spacing: -.04em; text-shadow: 0 2px 16px #000; }
.hero-copy p { margin: 0 0 18px; color: #e2e7ed; font-size: 14px; font-weight: 600; line-height: 1.5; text-shadow: 0 1px 10px #000; }
.button-outline { display: inline-flex; min-width: 156px; align-items: center; justify-content: space-between; gap: 25px; padding: 11px 15px; border: 1px solid #a326ff; border-radius: 6px; box-shadow: 0 0 14px rgba(135, 39, 255, .25); color: white; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.button-outline:hover { background: #8217dc; color: white; }
.button-outline span { font-size: 18px; line-height: .7; }
.hero-empty { display: flex; align-items: center; }
.hero-controls { position: absolute; z-index: 2; right: max(32px, calc((100% - var(--shell))/2 + 8px)); bottom: 20px; display: flex; align-items: center; gap: 10px; }
.hero-dot { width: 9px; height: 9px; padding: 0; border: 1px solid #c5d2df; border-radius: 50%; background: transparent; cursor: pointer; }
.hero-dot.is-active { border-color: #bd51ff; background: #bd51ff; box-shadow: 0 0 9px #a020ff; }
.hero-arrow { padding: 0 2px; border: 0; background: transparent; color: white; font-size: 25px; font-weight: 600; line-height: 1; cursor: pointer; }
.home-columns { display: grid; grid-template-columns: minmax(0, 1fr) 258px; gap: 26px; padding-top: 18px; }
.home-content { min-width: 0; }
.content-section { min-width: 0; margin: 0 0 22px; }
.section-heading { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.section-heading h2, .trends h2 { margin: 0; color: #eef2f8; font: 800 19px/1.15 'Barlow Condensed', Impact, sans-serif; text-transform: uppercase; }
.section-heading h2 { position: relative; padding-left: 12px; white-space: nowrap; }
.section-heading h2::before { position: absolute; top: 1px; bottom: 1px; left: 0; width: 4px; background: var(--blue); content: ''; }
.heading-rule { width: 52px; height: 1px; background: #c428ef; }
.section-heading > a { margin-left: auto; color: #b4c0cc; font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.section-heading > a span { margin-left: 3px; font-size: 14px; }
.news-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.news-card, .rating-card { min-width: 0; overflow: hidden; border: 1px solid #1a2d3c; background: linear-gradient(160deg, #09141e, #061018 90%); }
.news-card { display: flex; flex-direction: column; }
.card-image { position: relative; display: block; overflow: hidden; background: #0c1c2a; aspect-ratio: 1.47; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
.news-card:hover .card-image img, .rating-card:hover .card-image img { transform: scale(1.04); }
.image-placeholder { display: block; width: 100%; height: 100%; background: radial-gradient(ellipse at 66% 42%, rgba(99, 139, 194, .6), transparent 21%), radial-gradient(ellipse at 58% 53%, rgba(56, 68, 110, .8), transparent 39%), linear-gradient(130deg, #102a3e, #09131f 54%, #1d1234); }
.card-content { display: flex; flex: 1; flex-direction: column; padding: 9px 10px 8px; }
.category-chip { align-self: flex-start; margin: -23px 0 7px; position: relative; z-index: 1; padding: 4px 6px; font-size: 9px; }
.news-card h3, .rating-card h3 { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.3; }
.news-card p { margin: 6px 0 10px; color: #b4bec9; font-size: 11px; line-height: 1.45; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 9px; color: #8996a5; font-size: 10px; font-weight: 600; }
.card-meta a { color: #8493a3; }
.home-sidebar { min-width: 0; }
.newsletter-card { padding: 15px 14px 17px; border: 1px solid #233347; border-radius: 5px; background: linear-gradient(145deg, #101829, #0b131e); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.newsletter-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font: 800 16px 'Barlow Condensed', Impact, sans-serif; text-transform: uppercase; }
.newsletter-card h2 span { color: #da37ff; }
.newsletter-card h3 { margin: 0 0 4px; font-size: 13px; font-weight: 800; }
.newsletter-card p { margin: 0 0 10px; color: #bdc6d0; font-size: 11px; line-height: 1.45; }
.newsletter-card form { display: grid; gap: 9px; }
.newsletter-card input, .newsletter-card select { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #24374b; border-radius: 4px; outline: 0; background: #08111b; color: white; font-size: 11px; }
.newsletter-card input:focus, .newsletter-card select:focus { border-color: #9143ed; }
.newsletter-card button { padding: 11px 12px; border: 0; border-radius: 4px; background: linear-gradient(100deg, #8624df, #5718bf); color: white; font-size: 10px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.newsletter-card button:hover { filter: brightness(1.14); }
.trends { margin-top: 20px; }
.trends h2 { margin-bottom: 8px; }
.trends h2 span { margin-right: 8px; }
.trends ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.trends li { border-bottom: 1px solid var(--line); }
.trends li a { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; min-height: 39px; color: #d7dee7; font-size: 10px; font-weight: 600; line-height: 1.25; }
.trends li a span { display: grid; width: 28px; height: 29px; place-items: center; border: 1px solid #27394b; border-radius: 4px; background: linear-gradient(#172535, #101a27); color: #f1f4fa; font-size: 14px; font-weight: 800; }
.rating-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.rating-card .card-image { aspect-ratio: 1.15; }
.rating-content { padding: 8px; }
.rating-card h3 { font-size: 12px; }
.rating-content p { margin: 2px 0; color: #9ca8b5; font-size: 10px; }
.stars { color: #ffd400; font-size: 17px; letter-spacing: -2px; white-space: nowrap; }
.feature-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.feature-grid .news-card h3 { font-size: 12px; }
.feature-grid .news-card p { font-size: 10px; }
.empty-state { padding: 20px; border: 1px solid var(--line); color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.newsletter-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { margin: 8px 0; padding: 8px; border-radius: 4px; font-size: 11px; }
.notice.error { border: 1px solid #6a2634; background: #33121d; color: #ffbdc7; }

/* Shared CMS pages and listings */
.listing-template .site-main, .blog-template .site-main, .page-template .site-main { padding-top: 28px; }
.listing-template .site-main > h1, .blog-template .site-main > h1, .page-template .site-main > h1,
.listing-template h1, .blog-template h1, .page-template h1 { color: #f4f6fb; font-size: clamp(28px, 4vw, 42px); line-height: 1.12; letter-spacing: -.035em; }
.page-template .page-panel { margin: 0 0 22px; padding: clamp(18px, 3vw, 34px); border: 1px solid var(--line); background: rgba(8, 17, 25, .86); }
.page-template .page-panel > h1 { margin-top: 0; }
.newsletter-thanks { margin: 32px 0; padding: 28px; border: 1px solid var(--line); background: var(--panel); }
.blog-template .site-main > article, .blog-template .site-main > section, .page-template .site-main > article,
.page-template .site-main > section, .listing-template .site-main > section { margin: 0 0 22px; padding: clamp(18px, 3vw, 34px); border: 1px solid var(--line); background: rgba(8, 17, 25, .86); }
.blog-template .site-main > article { max-width: 940px; margin-inline: auto; }
.blog-template .site-main > article h1 { margin: 0 0 10px; }
.meta { color: var(--muted); font-size: 12px; }
.tag { display: inline-block; padding: 3px 8px; border: 1px solid #273b50; border-radius: 3px; background: #101e2c; color: #c18cff; font-size: 11px; }
.thumb { width: 100%; max-height: 320px; object-fit: cover; margin: 0 0 12px; }
.cover { width: 100%; max-height: 540px; object-fit: cover; margin: 22px 0 26px; }
.excerpt { color: #c0c9d3; }
.back { margin: 20px 0; color: #b9c3ce; }
.content { color: #d5dce5; font-size: 16px; line-height: 1.8; }
.content h2, .page-body h2 { margin-top: 1.7em; color: white; }
.content a, .page-body a { color: #c48cff; text-decoration: underline; }
.category-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.category-list a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #26394b; border-radius: 4px; color: #c8d1da; }
.category-list a.active { border-color: #8b32de; background: #601bb0; color: #fff; }
.category-list span { color: inherit; opacity: .7; font-size: .9em; }
.deal-search { margin: 16px 0 18px; }
.deal-search label { display: block; margin-bottom: 7px; color: #d9e0e8; font-weight: 700; }
.deal-search div { display: flex; align-items: center; gap: 8px; }
.deal-search input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid #26394b; border-radius: 4px; background: #07111b; color: white; }
.deal-search button, .button-link { display: inline-block; padding: 10px 15px; border: 0; border-radius: 4px; background: #751dc8; color: white; font-weight: 700; cursor: pointer; }
.deal-search a { color: #c18cff; }
.deal-category { margin-top: 22px; }
.deal-card { margin: 14px 0; padding: 20px; border: 1px solid var(--line); background: #09141e; }
.deal-card img { width: 100%; max-height: 300px; object-fit: cover; margin-bottom: 14px; }
.deal-card h2, .deal-card h3 { margin-top: 0; }
.price { color: #fff; font-size: 20px; font-weight: 800; }
.price del { margin-right: 8px; color: #8e9aa7; font-weight: 500; }
.pagination { display: flex; justify-content: center; gap: 6px; margin: 28px 0; padding: 0; list-style: none; }
.pagination li a { display: block; min-width: 38px; padding: 8px 11px; border: 1px solid #26394b; border-radius: 4px; color: #d6deea; text-align: center; }
.pagination li.active a { border-color: #8523d5; background: #6618b5; }
.pagination li.disabled a { opacity: .45; }
.newsletter { margin: 25px 0; padding: 20px; border: 1px solid var(--line); background: var(--panel); }
.newsletter form { display: grid; max-width: 480px; gap: 9px; }
.newsletter input, .newsletter select { padding: 10px; border: 1px solid #26394b; border-radius: 4px; background: #07111b; color: white; }
.newsletter button { justify-self: start; padding: 10px 15px; border: 0; border-radius: 4px; background: #751dc8; color: white; cursor: pointer; }

@media (max-width: 1080px) {
    .header-inner { min-height: 96px; align-items: center; }
    .brand { flex-basis: 260px; }
    .primary-nav { gap: 12px; padding-bottom: 0; }
    .primary-nav a { font-size: 9px; }
    .home-columns { grid-template-columns: minmax(0, 1fr) 235px; gap: 18px; }
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .site-shell { width: min(var(--shell), calc(100% - 30px)); }
    .header-inner { position: relative; min-height: 82px; align-items: center; }
    .brand { flex-basis: min(250px, 68vw); }
    .menu-toggle { display: grid; gap: 5px; width: 40px; height: 40px; place-content: center; border: 1px solid #26394b; border-radius: 4px; background: #0a1621; }
    .menu-toggle span { display: block; width: 18px; height: 2px; background: white; }
    .primary-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-wrap: wrap; justify-content: flex-start; gap: 0; padding: 7px 15px 13px; border: 1px solid #1b2d3b; border-top: 0; background: #071119; }
    .primary-nav.is-open { display: flex; }
    .primary-nav a { padding: 12px 10px; font-size: 10px; }
    .primary-nav .nav-search { display: none; }
    .home-template .site-main > :not(.hero) { width: min(var(--shell), calc(100% - 30px)); }
    .hero { height: 370px; }
    .hero-copy { width: calc(100% - 30px); padding: 25px 0 38px; }
    .hero-copy > * { max-width: 390px; }
    .hero-copy h1 { font-size: clamp(30px, 8vw, 40px); }
    .hero-copy p { font-size: 13px; }
    .hero-controls { right: 17px; bottom: 14px; }
    .home-columns { grid-template-columns: 1fr; gap: 3px; padding-top: 18px; }
    .home-sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; }
    .trends { margin-top: 0; }
    .rating-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .feature-columns { grid-template-columns: 1fr; gap: 0; }
    .footer-inner { align-items: flex-start; flex-direction: column; padding-top: 19px; padding-bottom: 19px; }
    .footer-inner nav { justify-content: flex-start; gap: 10px 20px; }
    .listing-template .site-main, .blog-template .site-main, .page-template .site-main { padding-top: 18px; }
}
@media (max-width: 520px) {
    .site-shell { width: calc(100% - 24px); }
    .home-template .site-main > :not(.hero) { width: calc(100% - 24px); }
    .header-inner { min-height: 72px; }
    .brand { flex-basis: min(220px, 67vw); }
    .hero { height: 350px; }
    .hero-slide { background-position: center, 58% center; }
    .hero-copy h1 { font-size: 32px; }
    .hero-copy p { max-width: 310px; font-size: 12px; }
    .home-sidebar { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .news-card h3 { font-size: 12px; }
    .news-card p { font-size: 10px; }
    .card-content { padding: 8px; }
    .section-heading { gap: 8px; }
    .section-heading h2, .trends h2 { font-size: 17px; }
    .heading-rule { width: 25px; }
    .section-heading > a { font-size: 8px; }
    .rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-template .site-main > article, .blog-template .site-main > section, .page-template .site-main > article,
    .page-template .site-main > section, .listing-template .site-main > section { padding: 16px; }
    .deal-search div { flex-wrap: wrap; }
    .deal-search input { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}