/* roulang page: index */
:root {
            --ink: #18222d;
            --muted: #6d7882;
            --paper: #f7f6f2;
            --surface: #ffffff;
            --line: #e3e5e1;
            --teal: #176b68;
            --teal-dark: #0f4f4d;
            --coral: #db745c;
            --gold: #c89a4b;
            --soft-teal: #e2f0ed;
            --soft-coral: #fae9e2;
            --radius: 14px;
            --shadow: 0 18px 45px rgba(25, 39, 48, .08);
            --container: 1180px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "Noto Sans SC", "Manrope", sans-serif;
            font-size: 16px;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(219,116,92,.45); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--teal);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--coral);
        }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { line-height: 1.2; letter-spacing: 0; }
        h1 { font-size: clamp(42px, 6vw, 76px); margin-bottom: 24px; font-weight: 900; }
        h2 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 16px; font-weight: 800; }
        h3 { font-size: 18px; margin-bottom: 8px; }
        .section { padding: 108px 0; }
        .section--white { background: var(--surface); }
        .section--dark { color: #eff8f6; background: #183538; }
        .section-head { max-width: 720px; margin-bottom: 42px; }
        .section-head p { color: var(--muted); margin-bottom: 0; max-width: 680px; }
        .section--dark .section-head p { color: #bbcfcc; }
        .section-kicker { margin-bottom: 14px; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(247,246,242,.92);
            border-bottom: 1px solid rgba(227,229,225,.82);
            backdrop-filter: blur(16px);
        }
        .nav-wrap {
            min-height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 260px; }
        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            color: #fff;
            background: var(--teal);
            border-radius: 10px;
            font-size: 15px;
            font-weight: 900;
        }
        .brand-name { font-size: 17px; font-weight: 900; white-space: nowrap; }
        .brand-note { color: var(--muted); font-size: 11px; display: block; line-height: 1.2; }
        .nav-links { display: flex; align-items: center; gap: 26px; }
        .nav-links a {
            position: relative;
            color: #53606a;
            font-size: 14px;
            font-weight: 700;
            transition: color .2s ease;
        }
        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 100%;
            bottom: -8px;
            height: 2px;
            background: var(--coral);
            transition: right .2s ease;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--teal-dark); }
        .nav-links a:hover::after, .nav-links a.active::after { right: 0; }
        .nav-tools { display: flex; gap: 10px; align-items: center; }
        .nav-button, .menu-button {
            border: 1px solid var(--line);
            background: var(--surface);
            color: var(--teal-dark);
            border-radius: 9px;
            min-height: 42px;
            padding: 0 15px;
            font-weight: 800;
            transition: .2s ease;
        }
        .nav-button:hover { border-color: var(--teal); box-shadow: 0 5px 15px rgba(23,107,104,.12); }
        .menu-button { display: none; padding: 0 12px; }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 78px 0 92px;
            background: #eef2ed;
            border-bottom: 1px solid var(--line);
        }
        .hero::before {
            content: "";
            position: absolute;
            inset: 0 0 auto;
            height: 7px;
            background: var(--coral);
        }
        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
            gap: 66px;
            align-items: center;
        }
        .hero h1 span { color: var(--coral); }
        .hero-lead { max-width: 650px; color: #4f5d65; font-size: 18px; margin-bottom: 30px; }
        .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
        .button {
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 9px;
            font-weight: 800;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(26,50,53,.13); }
        .button--primary { color: #fff; background: var(--teal); }
        .button--primary:hover { background: var(--teal-dark); }
        .button--light { color: var(--teal-dark); background: transparent; border-color: #aac9c3; }
        .button--light:hover { background: #fff; }
        .hero-board {
            position: relative;
            min-height: 350px;
            padding: 27px;
            background: #fff;
            border: 1px solid #d8e2dd;
            border-radius: 18px;
            box-shadow: var(--shadow);
        }
        .board-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
        .board-label { color: var(--teal); font-size: 13px; font-weight: 800; }
        .live-dot { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
        .live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
        .timeline { padding: 25px 0 3px 7px; }
        .timeline-item { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 18px; min-height: 70px; }
        .timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 20px; bottom: -9px; width: 1px; background: #d5dfdb; }
        .timeline-date { color: var(--coral); font-size: 12px; font-weight: 800; }
        .timeline-dot { position: absolute; left: 0; top: 4px; width: 11px; height: 11px; background: #fff; border: 3px solid var(--teal); border-radius: 50%; }
        .timeline-copy { padding-left: 19px; }
        .timeline-copy strong { display: block; font-size: 15px; }
        .timeline-copy span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

        .signal-strip { background: var(--teal-dark); color: #fff; }
        .signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
        .signal { padding: 25px 28px; border-right: 1px solid rgba(255,255,255,.16); }
        .signal:last-child { border-right: 0; }
        .signal strong { display: block; color: #fff; font-size: 28px; line-height: 1.1; }
        .signal span { color: #b9d3cf; font-size: 13px; }

        .split {
            display: grid;
            grid-template-columns: .75fr 1.25fr;
            gap: 76px;
            align-items: start;
        }
        .split-copy p { color: var(--muted); }
        .quote-line { border-left: 3px solid var(--coral); padding-left: 22px; font-size: 21px; font-weight: 700; line-height: 1.55; }
        .feature-list { display: grid; gap: 14px; }
        .feature-row {
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: 16px;
            padding: 18px 0;
            border-bottom: 1px solid var(--line);
        }
        .feature-no { color: var(--coral); font-size: 20px; font-weight: 900; }
        .feature-row p { color: var(--muted); margin: 0; font-size: 14px; }

        .demo-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
        .demo-panel { min-height: 300px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfbf8; }
        .demo-panel--accent { color: #fff; background: var(--teal); border-color: var(--teal); }
        .demo-panel h3 { font-size: 24px; }
        .demo-panel p { color: var(--muted); }
        .demo-panel--accent p { color: #c9e1dc; }
        .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
        .tag { display: inline-flex; padding: 5px 10px; color: var(--teal-dark); background: var(--soft-teal); border-radius: 5px; font-size: 12px; font-weight: 800; }
        .demo-panel--accent .tag { color: #fff; background: rgba(255,255,255,.13); }
        .result-list { display: grid; gap: 12px; }
        .result-item { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.17); }
        .result-item span { color: #b9d3cf; font-size: 13px; }
        .result-item strong { font-size: 15px; }

        .stuck-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .stuck-card { padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
        .stuck-card:nth-child(2) { background: var(--soft-coral); border-color: #f2d2c7; }
        .stuck-icon { color: var(--coral); font-size: 27px; font-weight: 900; }
        .stuck-card p { color: var(--muted); font-size: 14px; margin-bottom: 0; }

        .path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid #426c69; border-bottom: 1px solid #426c69; }
        .path-step { min-height: 210px; padding: 28px 24px; border-right: 1px solid #426c69; }
        .path-step:last-child { border-right: 0; }
        .path-step b { color: #e8a38d; font-size: 13px; }
        .path-step h3 { margin: 18px 0 10px; }
        .path-step p { color: #bdd2cf; margin: 0; font-size: 14px; }

        .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); transition: transform .2s ease, box-shadow .2s ease; }
        .content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
        .content-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #dce6e2; }
        .content-image img { height: 100%; object-fit: cover; transition: transform .4s ease; }
        .content-card:hover .content-image img { transform: scale(1.05); }
        .status { position: absolute; left: 12px; top: 12px; padding: 3px 8px; color: #fff; background: var(--teal); border-radius: 4px; font-size: 11px; font-weight: 800; }
        .score { position: absolute; right: 12px; top: 12px; padding: 3px 7px; color: #fff; background: rgba(24,34,45,.82); border-radius: 4px; font-size: 11px; font-weight: 800; }
        .content-body { padding: 17px; }
        .content-body h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .content-body p { min-height: 48px; color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 13px; }
        .meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
        .meta strong { color: var(--coral); }

        .hot-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; }
        .feature-content { position: relative; min-height: 410px; overflow: hidden; border-radius: var(--radius); }
        .feature-content img { height: 100%; object-fit: cover; }
        .feature-content::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(10,25,29,.84)); }
        .feature-caption { position: absolute; z-index: 1; right: 28px; bottom: 25px; left: 28px; color: #fff; }
        .feature-caption h3 { font-size: 28px; }
        .feature-caption p { color: #d9e5e2; margin-bottom: 0; }
        .hot-side { display: grid; gap: 12px; }
        .hot-row { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 13px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
        .hot-row img { height: 62px; object-fit: cover; border-radius: 7px; }
        .hot-row h3 { font-size: 15px; margin: 0; }
        .hot-row span { color: var(--muted); font-size: 12px; }
        .hot-score { color: var(--coral); font-size: 15px; font-weight: 900; }

        .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
        .category-item { min-height: 190px; padding: 23px 19px; border-top: 3px solid var(--teal); background: #f4f5f0; transition: background .2s ease, transform .2s ease; }
        .category-item:nth-child(2n) { border-color: var(--coral); }
        .category-item:hover { background: #fff; transform: translateY(-4px); box-shadow: var(--shadow); }
        .category-item h3 { font-size: 17px; }
        .category-item p { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
        .category-item a { color: var(--teal); font-size: 12px; font-weight: 800; }

        .ranking-wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 50px; align-items: start; }
        .ranking-intro { color: var(--muted); }
        .ranking-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
        .rank-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
        .rank-no { color: #b8c1c1; font-size: 20px; font-weight: 900; }
        .rank-row:nth-child(-n+3) .rank-no { color: var(--coral); }
        .rank-row strong { display: block; font-size: 14px; }
        .rank-row span { color: var(--muted); font-size: 11px; }
        .rank-score { color: var(--teal); font-size: 13px; font-weight: 900; }

        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .news-item { display: grid; grid-template-columns: 115px 1fr; gap: 16px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
        .news-item img { height: 92px; object-fit: cover; border-radius: 7px; }
        .news-item h3 { font-size: 15px; margin: 3px 0 8px; }
        .news-item p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
        .news-date { color: var(--coral); font-size: 11px; font-weight: 800; }

        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 42px; }
        .faq-item { padding: 19px 0; border-bottom: 1px solid #406c69; }
        .faq-item h3 { display: flex; gap: 12px; color: #fff; font-size: 16px; }
        .faq-item h3::before { content: "问"; display: grid; flex: 0 0 24px; height: 24px; place-items: center; color: var(--teal-dark); background: #f0bb9f; border-radius: 50%; font-size: 12px; }
        .faq-item p { color: #bdd2cf; font-size: 14px; margin: 0 0 0 36px; }

        .closing { padding: 82px 0; background: var(--coral); color: #fff; }
        .closing-inner { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
        .closing h2 { max-width: 630px; margin-bottom: 8px; }
        .closing p { max-width: 650px; color: #fff2ed; margin: 0; }
        .closing .button { color: var(--coral); background: #fff; }
        .closing .button:hover { background: #fff6f2; }

        footer { padding: 65px 0 25px; color: #b9c4c5; background: #182a2d; }
        .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 45px; }
        footer .brand-name { color: #fff; }
        footer .brand-note { color: #90a6a6; }
        .footer-intro { max-width: 300px; font-size: 13px; line-height: 1.8; }
        .footer-col h3 { color: #fff; font-size: 14px; margin-bottom: 16px; }
        .footer-col a { display: block; color: #aabbbb; font-size: 13px; margin: 9px 0; transition: color .2s ease; }
        .footer-col a:hover { color: #f0bb9f; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid #304548; color: #839797; font-size: 12px; }
        .age-note { color: #efb09a; }

        @media (max-width: 1024px) {
            .hero-grid, .split, .ranking-wrap { gap: 35px; }
            .content-grid { grid-template-columns: repeat(3, 1fr); }
            .category-grid { grid-template-columns: repeat(3, 1fr); }
            .signal-grid { grid-template-columns: repeat(2, 1fr); }
            .signal:nth-child(2) { border-right: 0; }
            .signal:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
            .news-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            .container { width: min(var(--container), calc(100% - 32px)); }
            .nav-wrap { min-height: 68px; }
            .brand { min-width: 0; }
            .brand-name { font-size: 15px; }
            .brand-note, .nav-button { display: none; }
            .menu-button { display: block; }
            .nav-links {
                display: none;
                position: absolute;
                top: 68px;
                right: 16px;
                left: 16px;
                padding: 14px;
                background: #fff;
                border: 1px solid var(--line);
                border-radius: 10px;
                box-shadow: var(--shadow);
            }
            .nav-links.is-open { display: grid; gap: 0; }
            .nav-links a { padding: 10px 8px; }
            .nav-links a::after { display: none; }
            .section { padding: 72px 0; }
            .hero { padding: 60px 0 65px; }
            .hero-grid, .split, .demo-grid, .hot-layout, .ranking-wrap { grid-template-columns: 1fr; }
            .hero-board { min-height: auto; }
            .path { grid-template-columns: 1fr 1fr; }
            .path-step:nth-child(2) { border-right: 0; }
            .path-step:nth-child(-n+2) { border-bottom: 1px solid #426c69; }
            .content-grid { grid-template-columns: repeat(2, 1fr); }
            .stuck-grid { grid-template-columns: 1fr; }
            .category-grid { grid-template-columns: repeat(2, 1fr); }
            .ranking-list { grid-template-columns: 1fr; }
            .closing-inner { align-items: flex-start; flex-direction: column; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-intro { grid-column: 1 / -1; }
        }

        @media (max-width: 520px) {
            h1 { font-size: 42px; }
            .hero-lead { font-size: 16px; }
            .hero-actions, .hero-actions .button { width: 100%; }
            .hero-actions .button { justify-content: center; }
            .signal-grid, .content-grid, .category-grid, .news-grid, .faq-grid { grid-template-columns: 1fr; }
            .signal:nth-child(2) { border-right: 0; }
            .signal { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
            .signal:last-child { border-bottom: 0; }
            .path { grid-template-columns: 1fr; }
            .path-step, .path-step:nth-child(2) { border-right: 0; border-bottom: 1px solid #426c69; }
            .path-step:last-child { border-bottom: 0; }
            .news-item { grid-template-columns: 95px 1fr; }
            .news-item img { height: 85px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 18px; }
            .footer-bottom { flex-direction: column; gap: 5px; }
        }

/* roulang page: category1 */
:root {
            --ink:#18222d;
            --muted:#6d7882;
            --paper:#f7f6f2;
            --surface:#fff;
            --line:#e3e5e1;
            --teal:#176b68;
            --teal-dark:#0f4f4d;
            --coral:#db745c;
            --gold:#c89a4b;
            --soft-teal:#e2f0ed;
            --soft-coral:#fae9e2;
            --radius:14px;
            --shadow:0 18px 45px rgba(25,39,48,.08);
            --container:1180px;
        }
        * { box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body {
            margin:0;
            color:var(--ink);
            background:var(--paper);
            font-family:"Noto Sans SC","Manrope",sans-serif;
            font-size:16px;
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
        }
        a { color:inherit; text-decoration:none; }
        img { display:block; width:100%; object-fit:cover; }
        button,input { font:inherit; }
        button { cursor:pointer; }
        h1,h2,h3,p { margin-top:0; }
        h1,h2,h3 { line-height:1.25; }
        .container { width:min(var(--container),calc(100% - 48px)); margin:0 auto; }
        .eyebrow {
            display:inline-flex; align-items:center; gap:8px;
            color:var(--teal); font-size:12px; font-weight:800;
            letter-spacing:.16em; text-transform:uppercase;
        }
        .eyebrow::before { content:""; width:24px; height:2px; background:var(--coral); }
        .section { padding:100px 0; }
        .section--white { background:var(--surface); }
        .section--dark { color:#eff8f6; background:#183538; }
        .section-head { max-width:720px; margin-bottom:42px; }
        .section-head h2 { margin:12px 0 14px; font-size:clamp(28px,4vw,44px); }
        .section-head p { color:var(--muted); margin-bottom:0; }
        .section--dark .section-head p { color:#bbcfcc; }
        .site-header {
            position:sticky; top:0; z-index:20;
            background:rgba(247,246,242,.92);
            border-bottom:1px solid rgba(227,229,225,.82);
            backdrop-filter:blur(16px);
        }
        .nav-wrap {
            min-height:78px; display:flex; align-items:center;
            justify-content:space-between; gap:24px;
        }
        .brand { display:inline-flex; align-items:center; gap:12px; min-width:260px; }
        .brand-mark {
            width:38px; height:38px; display:grid; place-items:center;
            color:#fff; background:var(--teal); border-radius:10px;
            font-size:15px; font-weight:900;
        }
        .brand-name { font-size:17px; font-weight:900; white-space:nowrap; }
        .brand-note { color:var(--muted); font-size:11px; display:block; line-height:1.2; }
        .nav-links { display:flex; align-items:center; gap:26px; }
        .nav-links a {
            position:relative; color:#53606a; font-size:14px; font-weight:700;
            transition:color .2s ease;
        }
        .nav-links a::after {
            content:""; position:absolute; left:0; right:100%; bottom:-8px;
            height:2px; background:var(--coral); transition:right .2s ease;
        }
        .nav-links a:hover,.nav-links a.active { color:var(--teal-dark); }
        .nav-links a:hover::after,.nav-links a.active::after { right:0; }
        .nav-tools { display:flex; gap:10px; align-items:center; }
        .nav-button,.menu-button {
            border:1px solid var(--line); background:var(--surface);
            color:var(--teal-dark); border-radius:9px; min-height:42px;
            padding:0 15px; font-weight:800; transition:.2s ease;
        }
        .nav-button:hover { border-color:var(--teal); box-shadow:0 5px 15px rgba(23,107,104,.12); }
        .menu-button { display:none; padding:0 12px; }
        .hero {
            position:relative; overflow:hidden; padding:78px 0 92px;
            background:#eef2ed; border-bottom:1px solid var(--line);
        }
        .hero::before { content:""; position:absolute; inset:0 0 auto; height:7px; background:var(--coral); }
        .hero-grid {
            display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
            gap:68px; align-items:center;
        }
        .hero h1 { max-width:680px; margin:14px 0 20px; font-size:clamp(40px,6vw,72px); letter-spacing:0; }
        .hero h1 span { color:var(--coral); }
        .hero-lead { max-width:650px; color:#4f5d65; font-size:18px; margin-bottom:30px; }
        .hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
        .button {
            min-height:48px; display:inline-flex; align-items:center; justify-content:center;
            gap:9px; padding:0 20px; border:1px solid transparent; border-radius:9px;
            font-weight:800; transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
        }
        .button:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(26,50,53,.13); }
        .button--primary { color:#fff; background:var(--teal); }
        .button--primary:hover { background:var(--teal-dark); }
        .button--light { color:var(--teal-dark); background:transparent; border-color:#aac9c3; }
        .button--light:hover { background:#fff; }
        .hero-panel {
            position:relative; min-height:370px; padding:30px;
            background:#fff; border:1px solid #d8e2dd; border-radius:18px;
            box-shadow:var(--shadow);
        }
        .panel-top { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:28px; }
        .panel-top h3 { margin:0; font-size:20px; }
        .panel-count { color:var(--coral); font:800 32px/1 "Manrope",sans-serif; }
        .signal-list { display:grid; gap:0; }
        .signal-item {
            display:grid; grid-template-columns:42px 1fr auto; gap:14px;
            align-items:center; padding:17px 0; border-bottom:1px solid var(--line);
        }
        .signal-icon {
            width:34px; height:34px; display:grid; place-items:center;
            color:var(--teal); background:var(--soft-teal); border-radius:50%; font-weight:900;
        }
        .signal-item strong { display:block; font-size:15px; }
        .signal-item small { color:var(--muted); font-size:12px; }
        .signal-item b { color:var(--coral); font:700 13px "Manrope",sans-serif; }
        .category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
        .category-card {
            position:relative; min-height:220px; padding:28px;
            border:1px solid var(--line); border-radius:var(--radius);
            background:var(--surface); overflow:hidden; transition:.25s ease;
        }
        .category-card:hover { transform:translateY(-5px); border-color:#a8c9c3; box-shadow:var(--shadow); }
        .category-card::after {
            content:""; position:absolute; width:110px; height:110px; right:-38px; bottom:-42px;
            border:18px solid var(--soft-teal); border-radius:50%;
        }
        .category-no { color:var(--coral); font:800 13px "Manrope",sans-serif; }
        .category-card h3 { margin:20px 0 10px; font-size:22px; }
        .category-card p { color:var(--muted); font-size:14px; margin-bottom:0; max-width:290px; }
        .category-card .line { width:36px; height:3px; margin-top:22px; background:var(--gold); }
        .editorial-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:stretch; }
        .feature-story { position:relative; min-height:420px; overflow:hidden; border-radius:16px; background:#243f40; }
        .feature-story img { height:100%; opacity:.78; }
        .feature-overlay {
            position:absolute; inset:auto 0 0; padding:30px;
            color:#fff; background:linear-gradient(transparent,rgba(16,34,35,.92));
        }
        .feature-overlay h3 { max-width:500px; margin:12px 0 8px; font-size:30px; }
        .feature-overlay p { color:#d3e4df; max-width:540px; margin:0; }
        .story-list { display:grid; gap:14px; }
        .story-item {
            display:grid; grid-template-columns:112px 1fr; gap:17px; padding:13px;
            background:#fff; border:1px solid var(--line); border-radius:12px;
            transition:.2s ease;
        }
        .story-item:hover { border-color:#a8c9c3; transform:translateX(4px); }
        .story-item img { height:96px; border-radius:8px; }
        .story-item h3 { margin:5px 0 5px; font-size:16px; }
        .story-item p { color:var(--muted); margin:0; font-size:13px; line-height:1.55; }
        .tag-row { display:flex; flex-wrap:wrap; gap:8px; }
        .tag,.badge {
            display:inline-flex; align-items:center; min-height:25px; padding:0 9px;
            border-radius:999px; color:var(--teal-dark); background:var(--soft-teal);
            font-size:11px; font-weight:800;
        }
        .badge--coral { color:#9c4937; background:var(--soft-coral); }
        .standard-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }
        .standard-intro h2 { margin:12px 0 18px; font-size:clamp(30px,4vw,48px); }
        .standard-intro p { color:var(--muted); }
        .standard-list { display:grid; gap:0; }
        .standard-row { display:grid; grid-template-columns:54px 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--line); }
        .standard-row strong { display:block; margin-bottom:4px; font-size:17px; }
        .standard-row p { color:var(--muted); margin:0; font-size:14px; }
        .standard-no { color:var(--coral); font:800 22px "Manrope",sans-serif; }
        .rank-layout { display:grid; grid-template-columns:1fr .88fr; gap:25px; }
        .rank-list { background:#214244; border:1px solid rgba(220,239,232,.12); border-radius:15px; padding:8px 24px; }
        .rank-row { display:grid; grid-template-columns:42px 1fr auto auto; gap:15px; align-items:center; padding:16px 0; border-bottom:1px solid rgba(220,239,232,.13); }
        .rank-row:last-child { border-bottom:0; }
        .rank-number { color:#a6c9c1; font:800 18px "Manrope",sans-serif; }
        .rank-row strong { color:#eff8f6; font-size:14px; }
        .rank-row small { display:block; color:#93b3ae; font-size:11px; }
        .rank-score { color:#ffd596; font:700 14px "Manrope",sans-serif; }
        .rank-hot { color:#f2a28f; font-size:12px; }
        .trend-box { padding:30px; background:#f1e9d8; color:var(--ink); border-radius:15px; }
        .trend-box h3 { margin:0 0 14px; font-size:25px; }
        .trend-box p { color:#6e6659; font-size:14px; }
        .trend-line { display:flex; align-items:flex-end; gap:9px; height:130px; padding:14px 0 0; border-bottom:1px solid #cfc2a9; }
        .bar { flex:1; min-width:12px; background:var(--teal); border-radius:4px 4px 0 0; opacity:.82; }
        .bar:nth-child(2),.bar:nth-child(5) { background:var(--coral); }
        .bar:nth-child(1) { height:38%; }.bar:nth-child(2) { height:54%; }.bar:nth-child(3) { height:48%; }
        .bar:nth-child(4) { height:72%; }.bar:nth-child(5) { height:64%; }.bar:nth-child(6) { height:88%; }
        .trend-labels { display:flex; justify-content:space-between; color:#8d806a; font-size:11px; margin-top:8px; }
        .insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
        .insight-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:13px; transition:.2s ease; }
        .insight-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
        .insight-card img { height:170px; }
        .insight-body { padding:20px; }
        .insight-body time { color:var(--coral); font:700 11px "Manrope",sans-serif; }
        .insight-body h3 { margin:9px 0 8px; font-size:17px; }
        .insight-body p { color:var(--muted); font-size:13px; margin:0; }
        .faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
        .faq-item { padding:22px 24px; background:#fff; border:1px solid var(--line); border-radius:12px; }
        .faq-item h3 { margin:0 0 9px; font-size:16px; }
        .faq-item p { color:var(--muted); font-size:14px; margin:0; }
        .cta-band { padding:72px 0; background:var(--soft-coral); }
        .cta-wrap { display:flex; justify-content:space-between; align-items:center; gap:30px; }
        .cta-wrap h2 { margin:10px 0 8px; font-size:clamp(27px,4vw,42px); }
        .cta-wrap p { color:#745c55; margin:0; max-width:650px; }
        .subscribe-form { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
        .subscribe-form input {
            min-height:48px; width:220px; padding:0 15px; border:1px solid #d9b9af;
            border-radius:9px; color:var(--ink); background:#fff; outline:none;
        }
        .subscribe-form input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(23,107,104,.12); }
        footer { padding:66px 0 22px; background:#152d30; color:#eff8f6; }
        .footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:45px; }
        .footer-intro p { max-width:310px; color:#a9c1bd; font-size:13px; margin:18px 0 0; }
        footer .brand-name { color:#fff; }
        footer .brand-note { color:#a9c1bd; }
        footer .brand-mark { background:var(--coral); }
        .footer-col { display:flex; flex-direction:column; gap:9px; }
        .footer-col h3 { margin:0 0 8px; color:#fff; font-size:14px; }
        .footer-col a { color:#a9c1bd; font-size:13px; transition:color .2s ease; }
        .footer-col a:hover { color:#fff; }
        .footer-bottom {
            display:flex; justify-content:space-between; gap:20px; margin-top:54px;
            padding-top:20px; border-top:1px solid rgba(220,239,232,.14);
            color:#8da8a3; font-size:12px;
        }
        .age-note { color:#e4b09f; }
        @media (max-width:1024px) {
            .nav-links { gap:16px; }
            .brand { min-width:auto; }
            .brand-name { font-size:15px; }
            .hero-grid,.editorial-layout,.standard-layout,.rank-layout { gap:32px; }
            .category-grid { grid-template-columns:repeat(2,1fr); }
        }
        @media (max-width:768px) {
            .container { width:min(var(--container),calc(100% - 32px)); }
            .section { padding:72px 0; }
            .nav-wrap { min-height:70px; }
            .nav-links {
                display:none; position:absolute; top:70px; left:16px; right:16px;
                padding:16px; flex-direction:column; align-items:stretch; gap:0;
                background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
            }
            .nav-links.open { display:flex; }
            .nav-links a { padding:11px 8px; border-bottom:1px solid #eef0ed; }
            .nav-links a:last-child { border-bottom:0; }
            .nav-links a::after { bottom:5px; left:8px; right:100%; }
            .menu-button { display:block; }
            .nav-button { display:none; }
            .hero { padding:60px 0 70px; }
            .hero-grid,.editorial-layout,.standard-layout,.rank-layout { grid-template-columns:1fr; }
            .hero-panel { min-height:auto; }
            .feature-story { min-height:360px; }
            .insight-grid { grid-template-columns:repeat(2,1fr); }
            .cta-wrap { align-items:flex-start; flex-direction:column; }
            .subscribe-form { justify-content:flex-start; }
            .footer-grid { grid-template-columns:repeat(2,1fr); gap:34px 24px; }
        }
        @media (max-width:520px) {
            .brand-name { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
            .hero h1 { font-size:40px; }
            .hero-lead { font-size:16px; }
            .category-grid,.insight-grid,.faq-grid { grid-template-columns:1fr; }
            .category-card { min-height:190px; }
            .story-item { grid-template-columns:92px 1fr; }
            .story-item img { height:82px; }
            .rank-list { padding:8px 15px; }
            .rank-row { grid-template-columns:30px 1fr auto; gap:9px; }
            .rank-hot { display:none; }
            .footer-grid { grid-template-columns:1fr 1fr; }
            .footer-intro { grid-column:1 / -1; }
            .footer-bottom { flex-direction:column; gap:7px; }
            .subscribe-form { width:100%; }
            .subscribe-form input { width:100%; }
            .subscribe-form .button { width:100%; }
        }