/* roulang page: index */
:root {
            --navy: #10233f;
            --navy-deep: #08172c;
            --blue: #2563eb;
            --blue-dark: #1d4ed8;
            --cyan: #20b8c9;
            --ink: #18263a;
            --muted: #6f7d91;
            --soft: #f4f7fb;
            --paper: #ffffff;
            --line: #dfe7f1;
            --gold: #f5b942;
            --red: #e85c68;
            --radius: 16px;
            --radius-sm: 10px;
            --shadow: 0 16px 42px rgba(20, 52, 91, .09);
            --shadow-hover: 0 22px 48px rgba(20, 52, 91, .16);
            --max: 1180px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }

        body.menu-open {
            overflow: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            display: block;
            width: 100%;
            max-width: 100%;
            object-fit: cover;
        }

        button,
        input {
            font: inherit;
        }

        button {
            border: 0;
            cursor: pointer;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(32, 184, 201, .42);
            outline-offset: 3px;
        }

        .container {
            width: min(var(--max), calc(100% - 40px));
            margin: 0 auto;
        }

        .section {
            padding: 92px 0;
        }

        .section-soft {
            background: var(--soft);
        }

        .section-dark {
            color: #fff;
            background: var(--navy-deep);
        }

        .section-heading {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 34px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--blue);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .eyebrow::before {
            width: 22px;
            height: 2px;
            content: "";
            background: var(--cyan);
        }

        h1,
        h2,
        h3,
        p {
            margin-top: 0;
        }

        h1,
        h2,
        h3 {
            color: var(--navy);
            line-height: 1.25;
        }

        h2 {
            margin-bottom: 12px;
            font-size: clamp(28px, 4vw, 42px);
            letter-spacing: 0;
        }

        h3 {
            margin-bottom: 8px;
            font-size: 19px;
        }

        .section-heading p {
            max-width: 570px;
            margin: 0;
            color: var(--muted);
        }

        .section-dark h2,
        .section-dark h3 {
            color: #fff;
        }

        .section-dark .section-heading p {
            color: #b9c9dd;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(255, 255, 255, .94);
            border-bottom: 1px solid rgba(223, 231, 241, .9);
            backdrop-filter: blur(18px);
        }

        .nav-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 78px;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: max-content;
            font-weight: 800;
            color: var(--navy);
        }

        .brand-mark {
            display: grid;
            width: 40px;
            height: 40px;
            place-items: center;
            color: #fff;
            background: var(--blue);
            border-radius: 12px;
            box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
            font-size: 17px;
            font-weight: 900;
        }

        .brand-name {
            font-size: 17px;
            letter-spacing: .01em;
        }

        .nav-menu {
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .nav-menu a {
            position: relative;
            color: #53647b;
            font-size: 14px;
            font-weight: 700;
            transition: color .2s ease;
        }

        .nav-menu a::after {
            position: absolute;
            right: 0;
            bottom: -10px;
            left: 0;
            height: 2px;
            content: "";
            background: var(--blue);
            transform: scaleX(0);
            transition: transform .2s ease;
        }

        .nav-menu a:hover,
        .nav-menu a.active {
            color: var(--blue);
        }

        .nav-menu a:hover::after,
        .nav-menu a.active::after {
            transform: scaleX(1);
        }

        .nav-entry {
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            padding: 0 17px;
            color: #fff !important;
            background: var(--navy);
            border-radius: 9px;
            transition: background .2s ease, transform .2s ease;
        }

        .nav-entry::after {
            display: none;
        }

        .nav-entry:hover {
            color: #fff !important;
            background: var(--blue);
            transform: translateY(-2px);
        }

        .menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            color: var(--navy);
            background: var(--soft);
            border-radius: 10px;
            font-size: 22px;
        }

        .hero {
            position: relative;
            min-height: 620px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: #fff;
            background:
                linear-gradient(90deg, rgba(8, 23, 44, .96) 0%, rgba(8, 23, 44, .8) 48%, rgba(8, 23, 44, .18) 100%),
                url("https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=2000&q=88") center/cover;
        }

        .hero::after {
            position: absolute;
            inset: auto 0 0;
            height: 90px;
            content: "";
            background: linear-gradient(transparent, rgba(8, 23, 44, .36));
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 92px 0 104px;
        }

        .hero-copy {
            max-width: 720px;
        }

        .hero .eyebrow {
            color: #8ce2e8;
        }

        .hero h1 {
            max-width: 720px;
            margin: 18px 0 18px;
            color: #fff;
            font-size: clamp(38px, 6vw, 72px);
            font-weight: 800;
            letter-spacing: 0;
        }

        .hero h1 span {
            color: #6de0e7;
        }

        .hero-subtitle {
            margin-bottom: 16px;
            color: #e6f0fa;
            font-size: clamp(19px, 2.3vw, 26px);
            font-weight: 700;
        }

        .hero-text {
            max-width: 655px;
            margin-bottom: 30px;
            color: #bfd0e4;
            font-size: 17px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 13px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 800;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(8, 23, 44, .18);
        }

        .btn-primary {
            color: #fff;
            background: var(--blue);
        }

        .btn-primary:hover {
            background: var(--blue-dark);
        }

        .btn-light {
            color: var(--navy);
            background: #fff;
        }

        .btn-outline {
            color: #fff;
            border-color: rgba(255, 255, 255, .46);
            background: transparent;
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, .12);
        }

        .hero-proof {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 46px;
            padding-top: 22px;
            border-top: 1px solid rgba(255, 255, 255, .18);
        }

        .proof-item strong {
            display: block;
            color: #fff;
            font-size: 24px;
        }

        .proof-item span {
            color: #adc1d7;
            font-size: 13px;
        }

        .metric-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .metric {
            padding: 24px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow);
        }

        .metric strong {
            display: block;
            color: var(--blue);
            font-size: 32px;
            line-height: 1;
        }

        .metric span {
            display: block;
            margin-top: 9px;
            color: var(--muted);
            font-size: 13px;
        }

        .content-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .content-card {
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: 0 8px 26px rgba(20, 52, 91, .06);
            transition: transform .22s ease, box-shadow .22s ease;
        }

        .content-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .cover {
            position: relative;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            background: #dfe7f1;
        }

        .cover img {
            height: 100%;
            transition: transform .35s ease;
        }

        .content-card:hover .cover img {
            transform: scale(1.04);
        }

        .cover::after {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(180deg, transparent 45%, rgba(8, 23, 44, .62));
            pointer-events: none;
        }

        .status-badge {
            position: absolute;
            top: 13px;
            left: 13px;
            z-index: 1;
            padding: 4px 8px;
            color: #fff;
            background: rgba(16, 35, 63, .82);
            border-radius: 5px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .04em;
        }

        .rating {
            position: absolute;
            right: 13px;
            bottom: 12px;
            z-index: 1;
            color: #fff;
            font-size: 13px;
            font-weight: 800;
        }

        .card-body {
            padding: 17px 17px 19px;
        }

        .card-body h3 {
            margin-bottom: 4px;
            font-size: 17px;
        }

        .card-body p {
            min-height: 48px;
            margin-bottom: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.65;
        }

        .tag-row {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 13px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 0 8px;
            color: #49627e;
            background: #edf3fa;
            border-radius: 5px;
            font-size: 11px;
            font-weight: 700;
        }

        .tag.accent {
            color: #167f8a;
            background: #e3f8f9;
        }

        .link-more {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--blue);
            font-size: 14px;
            font-weight: 800;
            white-space: nowrap;
        }

        .link-more:hover {
            color: var(--blue-dark);
        }

        .featured-grid {
            display: grid;
            grid-template-columns: 1.25fr .75fr;
            gap: 22px;
        }

        .feature-large,
        .feature-small {
            position: relative;
            overflow: hidden;
            min-height: 345px;
            border-radius: var(--radius);
            background: var(--navy);
        }

        .feature-small {
            min-height: 166px;
        }

        .feature-large img,
        .feature-small img {
            position: absolute;
            inset: 0;
            height: 100%;
            opacity: .75;
        }

        .feature-large::after,
        .feature-small::after {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(0deg, rgba(8, 23, 44, .9), rgba(8, 23, 44, .05));
        }

        .feature-copy {
            position: absolute;
            right: 28px;
            bottom: 24px;
            left: 28px;
            z-index: 1;
            color: #fff;
        }

        .feature-copy h3 {
            margin: 9px 0 4px;
            color: #fff;
            font-size: 24px;
        }

        .feature-copy p {
            margin: 0;
            color: #d4e2f0;
            font-size: 13px;
        }

        .feature-stack {
            display: grid;
            gap: 13px;
        }

        .feature-small .feature-copy {
            right: 20px;
            bottom: 17px;
            left: 20px;
        }

        .feature-small .feature-copy h3 {
            font-size: 18px;
        }

        .channel-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        .channel {
            position: relative;
            padding: 25px;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            background: #fff;
            transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
        }

        .channel:hover {
            border-color: #b7ccef;
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }

        .channel-number {
            display: inline-grid;
            width: 32px;
            height: 32px;
            place-items: center;
            margin-bottom: 18px;
            color: var(--blue);
            background: #eaf1ff;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 900;
        }

        .channel p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .ranking-wrap {
            display: grid;
            grid-template-columns: 1fr .38fr;
            gap: 30px;
            align-items: start;
        }

        .ranking-list {
            margin: 0;
            padding: 0;
            list-style: none;
            border-top: 1px solid var(--line);
        }

        .ranking-item {
            display: grid;
            grid-template-columns: 42px 1fr 90px 70px 74px;
            align-items: center;
            gap: 14px;
            min-height: 68px;
            border-bottom: 1px solid var(--line);
        }

        .rank {
            color: #9aabc0;
            font-size: 21px;
            font-weight: 900;
            text-align: center;
        }

        .rank.top {
            color: var(--blue);
        }

        .rank-title {
            font-weight: 800;
        }

        .rank-sub {
            display: block;
            color: var(--muted);
            font-size: 12px;
        }

        .rank-hot,
        .rank-score {
            color: var(--muted);
            font-size: 13px;
            text-align: right;
        }

        .rank-score {
            color: var(--blue);
            font-weight: 800;
        }

        .rank-label {
            justify-self: end;
        }

        .side-note {
            padding: 26px;
            color: #d5e1ee;
            background: var(--navy);
            border-radius: var(--radius);
        }

        .side-note h3 {
            color: #fff;
        }

        .side-note p {
            color: #bdccdc;
            font-size: 14px;
        }

        .side-note ul {
            margin: 20px 0 0;
            padding: 0;
            list-style: none;
        }

        .side-note li {
            display: flex;
            gap: 10px;
            padding: 11px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .13);
            font-size: 13px;
        }

        .side-note li::before {
            content: "✓";
            color: #72dbe0;
            font-weight: 900;
        }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        .news-card {
            display: grid;
            grid-template-columns: 112px 1fr;
            gap: 16px;
            padding: 13px;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            background: #fff;
            transition: box-shadow .2s ease, transform .2s ease;
        }

        .news-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }

        .news-card img {
            height: 92px;
            border-radius: 8px;
        }

        .news-card h3 {
            margin: 2px 0 7px;
            font-size: 15px;
            line-height: 1.45;
        }

        .news-card time {
            color: #94a2b4;
            font-size: 12px;
        }

        .quote-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        .quote {
            position: relative;
            padding: 26px;
            border: 1px solid rgba(255, 255, 255, .13);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, .06);
        }

        .quote::before {
            display: block;
            margin-bottom: 10px;
            color: #72dbe0;
            content: "“";
            font-size: 42px;
            line-height: .6;
        }

        .quote p {
            color: #d9e5f1;
            font-size: 14px;
        }

        .quote strong {
            color: #fff;
            font-size: 13px;
        }

        .quote span {
            display: block;
            color: #91a8c0;
            font-size: 12px;
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
            counter-reset: step;
        }

        .step {
            position: relative;
            padding: 27px 26px 26px 76px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
        }

        .step::before {
            position: absolute;
            top: 25px;
            left: 25px;
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            color: #fff;
            background: var(--blue);
            border-radius: 50%;
            content: counter(step);
            counter-increment: step;
            font-weight: 900;
        }

        .step p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px 20px;
        }

        details {
            padding: 19px 22px;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            background: #fff;
        }

        summary {
            cursor: pointer;
            color: var(--navy);
            font-weight: 800;
        }

        details p {
            margin: 13px 0 0;
            color: var(--muted);
            font-size: 14px;
        }

        .conversion {
            padding: 58px 0;
            color: #fff;
            background: var(--blue);
        }

        .conversion-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
        }

        .conversion h2 {
            max-width: 680px;
            margin-bottom: 9px;
            color: #fff;
            font-size: clamp(27px, 4vw, 42px);
        }

        .conversion p {
            max-width: 700px;
            margin: 0;
            color: #dceaff;
        }

        .site-footer {
            color: #aec0d4;
            background: var(--navy-deep);
        }

        .footer-main {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 44px;
            padding: 64px 0 48px;
        }

        .footer-brand {
            color: #fff;
        }

        .footer-brand p {
            max-width: 320px;
            margin-top: 17px;
            color: #98acc4;
            font-size: 13px;
        }

        .footer-column h3 {
            margin-bottom: 16px;
            color: #fff;
            font-size: 14px;
        }

        .footer-column a,
        .footer-column span {
            display: block;
            margin: 9px 0;
            color: #9eb2c9;
            font-size: 13px;
        }

        .footer-column a:hover {
            color: #72dbe0;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 20px 0;
            border-top: 1px solid rgba(255, 255, 255, .12);
            color: #8096af;
            font-size: 12px;
        }

        .age-notice {
            color: #72dbe0 !important;
        }

        @media (max-width: 1024px) {
            .content-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .metric-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .ranking-wrap {
                grid-template-columns: 1fr;
            }

            .side-note {
                display: none;
            }

            .footer-main {
                grid-template-columns: 1.4fr repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .container {
                width: min(var(--max), calc(100% - 30px));
            }

            .section {
                padding: 68px 0;
            }

            .nav-wrap {
                min-height: 68px;
            }

            .menu-toggle {
                display: block;
            }

            .nav-menu {
                position: fixed;
                top: 69px;
                right: 15px;
                left: 15px;
                display: none;
                align-items: stretch;
                flex-direction: column;
                gap: 0;
                padding: 10px;
                background: #fff;
                border: 1px solid var(--line);
                border-radius: 13px;
                box-shadow: var(--shadow-hover);
            }

            .nav-menu.open {
                display: flex;
            }

            .nav-menu a {
                padding: 13px 14px;
                border-radius: 7px;
            }

            .nav-menu a::after {
                display: none;
            }

            .nav-menu a:hover,
            .nav-menu a.active {
                background: var(--soft);
            }

            .nav-entry {
                justify-content: center;
                margin-top: 5px;
            }

            .hero {
                min-height: auto;
                background-position: 63% center;
            }

            .hero-content {
                padding: 75px 0 85px;
            }

            .hero-text {
                font-size: 15px;
            }

            .content-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .featured-grid {
                grid-template-columns: 1fr;
            }

            .channel-grid,
            .news-grid,
            .quote-grid,
            .steps {
                grid-template-columns: repeat(2, 1fr);
            }

            .conversion-inner {
                align-items: flex-start;
                flex-direction: column;
            }

            .footer-main {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }

            .footer-brand {
                grid-column: span 2;
            }
        }

        @media (max-width: 520px) {
            .section-heading {
                display: block;
            }

            .section-heading .link-more {
                margin-top: 17px;
            }

            .hero h1 {
                font-size: 40px;
            }

            .hero-subtitle {
                font-size: 18px;
            }

            .hero-proof {
                gap: 18px;
            }

            .proof-item strong {
                font-size: 20px;
            }

            .metric-grid,
            .content-grid,
            .channel-grid,
            .news-grid,
            .quote-grid,
            .steps,
            .faq-grid {
                grid-template-columns: 1fr;
            }

            .content-grid .content-card {
                display: grid;
                grid-template-columns: 112px 1fr;
            }

            .content-grid .cover {
                aspect-ratio: auto;
                min-height: 155px;
            }

            .content-grid .card-body {
                padding: 14px;
            }

            .content-grid .card-body p {
                min-height: auto;
                font-size: 12px;
            }

            .ranking-item {
                grid-template-columns: 34px 1fr 58px;
                gap: 8px;
            }

            .rank-hot,
            .rank-label {
                display: none;
            }

            .rank-score {
                font-size: 12px;
            }

            .news-card {
                grid-template-columns: 96px 1fr;
            }

            .footer-main {
                grid-template-columns: 1fr 1fr;
            }

            .footer-brand {
                grid-column: span 2;
            }

            .footer-bottom {
                display: block;
            }

            .footer-bottom span {
                display: block;
                margin-top: 5px;
            }
        }

/* roulang page: category1 */
:root {
      --navy: #10233f;
      --navy-deep: #08172c;
      --blue: #2563eb;
      --blue-dark: #1d4ed8;
      --cyan: #20b8c9;
      --ink: #18263a;
      --muted: #6f7d91;
      --soft: #f4f7fb;
      --paper: #ffffff;
      --line: #dfe7f1;
      --gold: #f5b942;
      --red: #e85c68;
      --radius: 16px;
      --radius-sm: 10px;
      --shadow: 0 16px 42px rgba(20, 52, 91, .09);
      --shadow-hover: 0 22px 48px rgba(20, 52, 91, .16);
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; max-width: 100%; object-fit: cover; }
    button, input { font: inherit; }
    button { border: 0; cursor: pointer; }
    button:focus-visible, a:focus-visible, input:focus-visible {
      outline: 3px solid rgba(32, 184, 201, .42);
      outline-offset: 3px;
    }
    .container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
    .section { padding: 88px 0; }
    .section-soft { background: var(--soft); }
    .section-dark { color: #fff; background: var(--navy-deep); }
    .section-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 34px;
    }
    .section-heading h2 { margin: 8px 0 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
    .section-heading p { max-width: 560px; margin: 0; color: var(--muted); }
    .section-dark .section-heading p { color: #b9c9dd; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--blue);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
    }
    .eyebrow::before { width: 22px; height: 2px; content: ""; background: var(--cyan); }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.94);
      border-bottom: 1px solid rgba(223,231,241,.9);
      backdrop-filter: blur(18px);
    }
    .nav-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 78px;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
      color: var(--navy);
      font-weight: 800;
    }
    .brand-mark {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      color: #fff;
      background: var(--blue);
      border-radius: 12px;
      box-shadow: 0 8px 18px rgba(37,99,235,.22);
      font-size: 17px;
      font-weight: 900;
    }
    .brand-name { font-size: 17px; letter-spacing: .01em; }
    .nav-menu { display: flex; align-items: center; gap: 28px; }
    .nav-menu a {
      position: relative;
      color: #53647b;
      font-size: 14px;
      font-weight: 700;
      transition: color .2s ease;
    }
    .nav-menu a::after {
      position: absolute;
      right: 0;
      bottom: -10px;
      left: 0;
      height: 2px;
      content: "";
      background: var(--blue);
      transform: scaleX(0);
      transition: transform .2s ease;
    }
    .nav-menu a:hover, .nav-menu a.active { color: var(--blue); }
    .nav-menu a:hover::after, .nav-menu a.active::after { transform: scaleX(1); }
    .nav-entry {
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      padding: 0 17px;
      color: #fff !important;
      background: var(--navy);
      border-radius: 9px;
      transition: background .2s ease, transform .2s ease;
    }
    .nav-entry::after { display: none; }
    .nav-entry:hover { color: #fff !important; background: var(--blue); transform: translateY(-2px); }
    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      color: var(--navy);
      background: var(--soft);
      border-radius: 10px;
      font-size: 22px;
    }

    .category-hero {
      position: relative;
      overflow: hidden;
      padding: 92px 0 100px;
      color: #fff;
      background:
        linear-gradient(100deg, rgba(8,23,44,.98), rgba(16,35,63,.86) 55%, rgba(16,35,63,.54)),
        url("https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=2000&q=88") center/cover;
    }
    .category-hero::after {
      position: absolute;
      right: 8%;
      bottom: -110px;
      width: 340px;
      height: 340px;
      content: "";
      border: 1px solid rgba(140,226,232,.22);
      border-radius: 50%;
    }
    .hero-inner { position: relative; z-index: 1; }
    .hero-copy { max-width: 760px; }
    .category-hero .eyebrow { color: #8ce2e8; }
    .category-hero h1 {
      max-width: 760px;
      margin: 18px 0;
      color: #fff;
      font-size: clamp(38px, 6vw, 70px);
      line-height: 1.12;
      letter-spacing: -.02em;
    }
    .category-hero h1 strong { color: #8ce2e8; font-weight: 800; }
    .category-hero p { max-width: 700px; margin: 0; color: #d3dfed; font-size: 18px; }
    .hero-search {
      display: flex;
      max-width: 680px;
      margin-top: 34px;
      padding: 7px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 13px;
      backdrop-filter: blur(12px);
    }
    .hero-search input {
      flex: 1;
      min-width: 0;
      padding: 12px 16px;
      color: #fff;
      background: transparent;
      border: 0;
      outline: 0;
    }
    .hero-search input::placeholder { color: #b9c9dd; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 20px;
      border-radius: 9px;
      font-weight: 800;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .btn-primary { color: #fff; background: var(--blue); box-shadow: 0 10px 24px rgba(37,99,235,.2); }
    .btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(37,99,235,.3); }
    .btn-light { color: var(--navy); background: #fff; }
    .btn-light:hover { color: var(--blue); transform: translateY(-2px); }
    .quick-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    .quick-tags a {
      padding: 7px 13px;
      color: #d9e6f2;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 99px;
      font-size: 13px;
      transition: background .2s ease, border-color .2s ease;
    }
    .quick-tags a:hover { background: rgba(255,255,255,.12); border-color: #8ce2e8; }

    .metric-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    .metric {
      padding: 25px 24px;
      background: #fff;
    }
    .metric strong { display: block; color: var(--navy); font-size: 30px; line-height: 1; }
    .metric span { display: block; margin-top: 9px; color: var(--muted); font-size: 14px; }

    .matrix {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .matrix-card {
      position: relative;
      min-height: 230px;
      padding: 26px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .matrix-card:hover { transform: translateY(-5px); border-color: #b8cdf8; box-shadow: var(--shadow-hover); }
    .matrix-card::after {
      position: absolute;
      right: -30px;
      bottom: -42px;
      width: 130px;
      height: 130px;
      content: "";
      border: 18px solid #eef5ff;
      border-radius: 50%;
    }
    .matrix-icon {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      margin-bottom: 23px;
      color: var(--blue);
      background: #edf4ff;
      border-radius: 12px;
      font-size: 19px;
      font-weight: 900;
    }
    .matrix-card h3 { position: relative; z-index: 1; margin: 0 0 8px; font-size: 20px; }
    .matrix-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 14px; }

    .feature-layout {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 26px;
      align-items: stretch;
    }
    .feature-image {
      min-height: 430px;
      padding: 34px;
      display: flex;
      align-items: end;
      color: #fff;
      border-radius: var(--radius);
      overflow: hidden;
      background:
        linear-gradient(0deg, rgba(8,23,44,.9), rgba(8,23,44,.08)),
        url("https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=1200&q=85") center/cover;
    }
    .feature-image h3 { max-width: 450px; margin: 0 0 8px; font-size: 32px; line-height: 1.2; }
    .feature-image p { max-width: 470px; margin: 0; color: #d7e3f0; }
    .feature-list { display: grid; gap: 13px; }
    .feature-item {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 16px;
      align-items: center;
      padding: 13px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      box-shadow: 0 8px 24px rgba(20,52,91,.05);
    }
    .feature-item img { width: 82px; height: 78px; border-radius: 8px; }
    .feature-item h4 { margin: 0 0 4px; font-size: 16px; }
    .feature-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 8px;
      color: var(--blue);
      background: #edf4ff;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 800;
    }

    .editorial-grid {
      display: grid;
      grid-template-columns: 1.25fr .75fr .75fr;
      gap: 20px;
    }
    .editorial-card {
      min-height: 260px;
      padding: 25px;
      color: #fff;
      border-radius: var(--radius);
      background-position: center;
      background-size: cover;
      box-shadow: var(--shadow);
      transition: transform .25s ease;
    }
    .editorial-card:hover { transform: translateY(-5px); }
    .editorial-card:first-child { min-height: 340px; }
    .editorial-card h3 { margin: 110px 0 7px; font-size: 24px; line-height: 1.25; }
    .editorial-card:first-child h3 { margin-top: 190px; font-size: 30px; }
    .editorial-card p { margin: 0; color: #d9e4ef; font-size: 14px; }
    .editorial-one { background-image: linear-gradient(0deg, rgba(8,23,44,.88), rgba(8,23,44,.1)), url("https://images.unsplash.com/photo-1496747611176-843222e1e57c?auto=format&fit=crop&w=1200&q=85"); }
    .editorial-two { background-image: linear-gradient(0deg, rgba(8,23,44,.88), rgba(8,23,44,.08)), url("https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=900&q=85"); }
    .editorial-three { background-image: linear-gradient(0deg, rgba(8,23,44,.88), rgba(8,23,44,.08)), url("https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?auto=format&fit=crop&w=900&q=85"); }

    .rank-layout { display: grid; grid-template-columns: 1fr .82fr; gap: 34px; }
    .rank-list { margin: 0; padding: 0; list-style: none; }
    .rank-item {
      display: grid;
      grid-template-columns: 42px 1fr auto auto;
      gap: 16px;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid rgba(223,231,241,.15);
    }
    .rank-number { color: #8ce2e8; font-size: 22px; font-weight: 900; }
    .rank-title { color: #fff; font-weight: 700; }
    .rank-meta { color: #aebed1; font-size: 13px; }
    .rating { color: var(--gold); font-weight: 800; }
    .rank-aside {
      padding: 28px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
    }
    .rank-aside h3 { margin: 0 0 12px; font-size: 24px; }
    .rank-aside p { margin: 0 0 23px; color: #b9c9dd; }
    .signal { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.13); }
    .signal span { color: #b9c9dd; }
    .signal strong { color: #fff; }

    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .faq-item {
      padding: 23px 25px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      box-shadow: 0 8px 24px rgba(20,52,91,.05);
    }
    .faq-item h3 { margin: 0 0 8px; font-size: 17px; }
    .faq-item p { margin: 0; color: var(--muted); font-size: 14px; }

    .access-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding: 42px 46px;
      color: #fff;
      background: var(--blue);
      border-radius: var(--radius);
      box-shadow: 0 18px 42px rgba(37,99,235,.22);
    }
    .access-panel h2 { margin: 0 0 8px; font-size: 31px; }
    .access-panel p { max-width: 620px; margin: 0; color: #dce8ff; }
    .access-panel .btn { flex: 0 0 auto; }

    .site-footer { color: #bdcbe0; background: var(--navy-deep); }
    .footer-main {
      display: grid;
      grid-template-columns: 1.45fr repeat(3, 1fr);
      gap: 46px;
      padding: 66px 0 52px;
    }
    .footer-brand .brand { color: #fff; }
    .footer-brand p { max-width: 330px; margin: 20px 0 15px; font-size: 14px; }
    .age-notice {
      display: inline-flex;
      padding: 6px 10px;
      color: #8ce2e8;
      background: rgba(32,184,201,.1);
      border: 1px solid rgba(32,184,201,.24);
      border-radius: 6px;
      font-size: 12px;
    }
    .footer-column { display: grid; align-content: start; gap: 10px; }
    .footer-column h3 { margin: 0 0 10px; color: #fff; font-size: 15px; }
    .footer-column a, .footer-column span { color: #9fb0c7; font-size: 14px; transition: color .2s ease; }
    .footer-column a:hover { color: #8ce2e8; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 19px 0 24px;
      border-top: 1px solid rgba(255,255,255,.12);
      color: #8294ad;
      font-size: 12px;
    }

    @media (max-width: 1024px) {
      .nav-menu { gap: 16px; }
      .matrix { grid-template-columns: repeat(2, 1fr); }
      .editorial-grid { grid-template-columns: 1fr 1fr; }
      .editorial-card:first-child { grid-column: 1 / -1; min-height: 310px; }
      .editorial-card:first-child h3 { margin-top: 150px; }
      .rank-layout, .feature-layout { grid-template-columns: 1fr; }
      .feature-image { min-height: 360px; }
      .footer-main { grid-template-columns: 1.4fr 1fr 1fr; }
      .footer-column:last-child { grid-column: 2 / 4; }
    }
    @media (max-width: 768px) {
      .container { width: min(var(--max), calc(100% - 30px)); }
      .section { padding: 66px 0; }
      .nav-wrap { min-height: 68px; }
      .menu-toggle { display: block; }
      .nav-menu {
        position: fixed;
        top: 68px;
        right: 15px;
        left: 15px;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 9px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow-hover);
      }
      .nav-menu.open { display: flex; }
      .nav-menu a { padding: 12px 14px; }
      .nav-menu a::after { display: none; }
      .nav-entry { justify-content: center; margin-top: 5px; }
      .category-hero { padding: 70px 0 76px; }
      .metric-strip { grid-template-columns: 1fr 1fr; }
      .section-heading { display: block; }
      .section-heading p { margin-top: 13px; }
      .footer-main { grid-template-columns: 1fr 1fr; gap: 32px 25px; }
      .footer-column:last-child { grid-column: auto; }
      .access-panel { display: block; padding: 32px 27px; }
      .access-panel .btn { margin-top: 23px; }
    }
    @media (max-width: 520px) {
      .brand-name { max-width: 170px; font-size: 14px; line-height: 1.25; }
      .hero-search { display: block; padding: 8px; }
      .hero-search input { width: 100%; min-height: 45px; }
      .hero-search .btn { width: 100%; }
      .matrix, .editorial-grid, .faq-grid { grid-template-columns: 1fr; }
      .editorial-card:first-child { grid-column: auto; }
      .editorial-card:first-child, .editorial-card { min-height: 260px; }
      .editorial-card:first-child h3 { margin-top: 125px; font-size: 26px; }
      .rank-item { grid-template-columns: 30px 1fr auto; gap: 10px; }
      .rank-meta { display: none; }
      .footer-main { grid-template-columns: 1fr; }
      .footer-bottom { display: block; }
      .footer-bottom span { display: block; margin-top: 5px; }
    }