/* roulang page: index */
:root {
            --ink: #17211f;
            --ink-soft: #52625f;
            --paper: #f5f3ee;
            --paper-deep: #e9e7df;
            --white: #fffefa;
            --line: #d9ded7;
            --green: #1d5b4f;
            --green-deep: #123d36;
            --mint: #b8d8c7;
            --coral: #d8735e;
            --gold: #c49a51;
            --radius: 18px;
            --radius-sm: 10px;
            --shadow: 0 18px 45px rgba(24, 47, 41, .10);
            --shadow-soft: 0 8px 22px rgba(24, 47, 41, .07);
            --container: 1180px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
            line-height: 1.75;
            letter-spacing: 0;
        }
        body, button, input { font-size: 15px; }
        img { display: block; width: 100%; max-width: 100%; object-fit: cover; }
        a { color: inherit; text-decoration: none; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(216,115,94,.55); 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(--coral);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--coral);
        }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { line-height: 1.2; letter-spacing: 0; }
        h2 { margin-bottom: 16px; font-size: clamp(28px, 4vw, 48px); }
        .section-head { max-width: 700px; margin-bottom: 36px; }
        .section-head p { color: var(--ink-soft); max-width: 660px; margin-bottom: 0; }
        .section-head.split {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            max-width: none;
        }
        .section-head.split p { max-width: 470px; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(245,243,238,.92);
            border-bottom: 1px solid rgba(217,222,215,.85);
            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: 215px;
            font-weight: 900;
            color: var(--green-deep);
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            color: var(--white);
            background: var(--green);
            font-size: 20px;
            box-shadow: 5px 5px 0 var(--mint);
        }
        .brand-name { font-size: 16px; line-height: 1.25; }
        .brand-name small {
            display: block;
            margin-top: 3px;
            color: var(--ink-soft);
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .1em;
        }
        .main-nav { display: flex; align-items: center; gap: 7px; }
        .main-nav a {
            padding: 9px 13px;
            border-radius: 8px;
            color: var(--ink-soft);
            font-size: 14px;
            transition: .2s ease;
        }
        .main-nav a:hover, .main-nav a.active {
            color: var(--green-deep);
            background: var(--mint);
        }
        .nav-action {
            padding: 11px 17px !important;
            color: var(--white) !important;
            background: var(--coral) !important;
            font-weight: 800;
        }
        .nav-action:hover { background: #bb5948 !important; transform: translateY(-2px); }
        .menu-toggle { display: none; border: 0; background: transparent; color: var(--green); font-size: 24px; }

        .hero {
            position: relative;
            min-height: 680px;
            display: flex;
            align-items: end;
            color: var(--white);
            background:
                linear-gradient(90deg, rgba(14,35,31,.94) 0%, rgba(14,35,31,.68) 45%, rgba(14,35,31,.12) 100%),
                url("https://images.unsplash.com/photo-1556910103-1c02745aae4d?auto=format&fit=crop&w=1800&q=88") center/cover;
        }
        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 180px;
            background: linear-gradient(transparent, rgba(14,35,31,.75));
        }
        .hero-content {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 105px 0 78px;
        }
        .hero-copy { max-width: 710px; }
        .hero .eyebrow { color: var(--mint); }
        .hero .eyebrow::before { background: var(--mint); }
        .hero h1 {
            margin: 20px 0 20px;
            max-width: 690px;
            color: var(--white);
            font-size: clamp(40px, 6vw, 76px);
            font-weight: 900;
        }
        .hero h1 span { color: #f0bd76; }
        .hero-lead {
            max-width: 650px;
            margin-bottom: 28px;
            color: rgba(255,254,250,.85);
            font-size: 17px;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 46px;
            padding: 11px 19px;
            border: 1px solid transparent;
            border-radius: 9px;
            font-weight: 800;
            transition: .2s ease;
        }
        .btn-primary { color: var(--white); background: var(--coral); }
        .btn-primary:hover { background: #bb5948; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(216,115,94,.22); }
        .btn-outline { color: var(--white); border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
        .btn-outline:hover { color: var(--green-deep); background: var(--white); }
        .btn-dark { color: var(--white); background: var(--green); }
        .btn-dark:hover { background: var(--green-deep); transform: translateY(-2px); }
        .btn-light { color: var(--green-deep); border-color: var(--line); background: var(--white); }
        .btn-light:hover { border-color: var(--green); background: var(--mint); }

        section { padding: 88px 0; }
        .section-paper { background: var(--paper); }
        .section-white { background: var(--white); }
        .section-green { color: var(--white); background: var(--green-deep); }
        .section-green .section-head p { color: rgba(255,255,255,.68); }

        .signal-bar {
            border-bottom: 1px solid var(--line);
            background: var(--white);
        }
        .signal-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
        }
        .signal-item {
            padding: 22px 24px;
            border-right: 1px solid var(--line);
        }
        .signal-item:first-child { padding-left: 0; }
        .signal-item:last-child { border-right: 0; }
        .signal-number { display: block; color: var(--green); font-size: 27px; font-weight: 900; line-height: 1.1; }
        .signal-label { color: var(--ink-soft); font-size: 13px; }

        .story-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 58px;
            align-items: center;
        }
        .story-image { position: relative; min-height: 430px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
        .story-image img { height: 100%; min-height: 430px; }
        .story-caption {
            position: absolute;
            right: 18px;
            bottom: 18px;
            max-width: 230px;
            padding: 14px 16px;
            color: var(--white);
            background: rgba(18,61,54,.9);
            border-left: 3px solid var(--coral);
            font-size: 13px;
        }
        .story-copy p { color: var(--ink-soft); }
        .check-list { display: grid; gap: 15px; margin: 26px 0 0; padding: 0; list-style: none; }
        .check-list li { display: flex; gap: 12px; align-items: start; }
        .check-list strong { display: block; margin-bottom: 3px; color: var(--green-deep); }
        .check-list span { color: var(--ink-soft); font-size: 14px; }
        .check-icon {
            flex: 0 0 25px;
            width: 25px;
            height: 25px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--green-deep);
            background: var(--mint);
            font-weight: 900;
        }

        .scene-strip {
            display: grid;
            grid-template-columns: 1fr 1fr 1.2fr;
            gap: 16px;
        }
        .scene-card {
            position: relative;
            min-height: 300px;
            overflow: hidden;
            border-radius: var(--radius);
            background: var(--green-deep);
        }
        .scene-card.large { grid-row: span 2; min-height: 616px; }
        .scene-card img { height: 100%; transition: transform .5s ease; }
        .scene-card:hover img { transform: scale(1.05); }
        .scene-card::after {
            content: "";
            position: absolute;
            inset: 30% 0 0;
            background: linear-gradient(transparent, rgba(12,28,24,.9));
        }
        .scene-text { position: absolute; right: 20px; bottom: 19px; left: 20px; z-index: 1; color: var(--white); }
        .scene-text h3 { margin-bottom: 5px; font-size: 21px; }
        .scene-text p { margin: 0; color: rgba(255,255,255,.74); font-size: 13px; }

        .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
        .media-card {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            background: var(--white);
            box-shadow: var(--shadow-soft);
            transition: .25s ease;
        }
        .media-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
        .media-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
        .media-image img { height: 100%; transition: transform .35s ease; }
        .media-card:hover .media-image img { transform: scale(1.05); }
        .badge {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 4px 8px;
            border-radius: 5px;
            color: var(--white);
            background: var(--coral);
            font-size: 11px;
            font-weight: 900;
        }
        .badge.green { background: var(--green); }
        .badge.gold { color: var(--ink); background: #eccb8e; }
        .media-body { padding: 16px; }
        .media-body h3 { margin-bottom: 7px; font-size: 17px; }
        .media-body p { min-height: 48px; margin-bottom: 12px; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
        .meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ink-soft); font-size: 12px; }
        .rating { color: var(--gold); font-weight: 900; }

        .topic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
        .topic-card {
            min-height: 190px;
            padding: 22px 18px;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            background: var(--white);
            transition: .2s ease;
        }
        .topic-card:hover { border-color: var(--coral); box-shadow: var(--shadow-soft); }
        .topic-index { color: var(--coral); font-size: 12px; font-weight: 900; }
        .topic-card h3 { margin: 18px 0 8px; font-size: 18px; }
        .topic-card p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }

        .rank-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: start; }
        .rank-list { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.18); }
        .rank-item {
            display: grid;
            grid-template-columns: 45px 1fr 90px 68px;
            align-items: center;
            gap: 12px;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,.14);
        }
        .rank-no { color: #eabf7e; font-size: 21px; font-weight: 900; }
        .rank-title { font-weight: 800; }
        .rank-type { display: inline-block; width: fit-content; margin-top: 3px; padding: 2px 7px; color: var(--mint); border: 1px solid rgba(184,216,199,.35); border-radius: 4px; font-size: 11px; }
        .rank-hot, .rank-score { color: rgba(255,255,255,.68); font-size: 12px; text-align: right; }
        .rank-score { color: #eabf7e; font-weight: 900; }
        .rank-note { padding: 26px; border: 1px solid rgba(184,216,199,.22); border-radius: var(--radius); background: rgba(255,255,255,.06); }
        .rank-note h3 { margin-bottom: 14px; font-size: 24px; }
        .rank-note p { color: rgba(255,255,255,.7); font-size: 14px; }
        .mini-stat { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); }
        .mini-stat strong { color: var(--white); }

        .news-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; }
        .featured-news { position: relative; min-height: 420px; overflow: hidden; border-radius: var(--radius); }
        .featured-news img { height: 100%; }
        .featured-news::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(12,28,24,.9)); }
        .featured-news .news-text { position: absolute; z-index: 1; right: 25px; bottom: 22px; left: 25px; color: var(--white); }
        .featured-news h3 { max-width: 560px; margin-bottom: 8px; font-size: 28px; }
        .news-list { display: grid; gap: 12px; }
        .news-item { display: grid; grid-template-columns: 125px 1fr; gap: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
        .news-item img { height: 92px; border-radius: 8px; }
        .news-item h3 { margin: 2px 0 5px; font-size: 16px; }
        .news-item p { margin: 0; color: var(--ink-soft); font-size: 12px; }
        .news-date { color: var(--coral); font-size: 11px; font-weight: 800; }

        .compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .plan {
            position: relative;
            padding: 28px 24px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
        }
        .plan.featured { border: 2px solid var(--coral); box-shadow: var(--shadow); }
        .plan-label { color: var(--coral); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
        .plan h3 { margin: 13px 0 8px; font-size: 23px; }
        .plan p { min-height: 58px; color: var(--ink-soft); font-size: 13px; }
        .plan ul { margin: 20px 0 25px; padding: 0; list-style: none; }
        .plan li { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; }
        .plan li::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 900; }

        .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
        .trust-item { padding: 22px; border-top: 3px solid var(--mint); background: rgba(255,255,255,.06); }
        .trust-item strong { display: block; margin-bottom: 7px; color: var(--white); font-size: 17px; }
        .trust-item span { color: rgba(255,255,255,.67); font-size: 13px; }

        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .faq-item { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
        .faq-item h3 { display: flex; gap: 12px; margin-bottom: 9px; font-size: 17px; }
        .faq-item h3::before { content: "问"; display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 5px; color: var(--white); background: var(--coral); font-size: 12px; }
        .faq-item p { margin: 0; color: var(--ink-soft); font-size: 13px; }

        .cta-section { padding: 76px 0; background: var(--coral); color: var(--white); }
        .cta-wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
        .cta-wrap h2 { margin-bottom: 9px; font-size: 36px; }
        .cta-wrap p { max-width: 650px; margin: 0; color: rgba(255,255,255,.82); }
        .cta-form { display: flex; gap: 8px; min-width: 360px; }
        .cta-form input { min-width: 0; flex: 1; padding: 12px 14px; border: 0; border-radius: 8px; color: var(--ink); background: var(--white); }
        .cta-form button { border: 0; color: var(--green-deep); background: #f4d39a; }

        footer { color: rgba(255,255,255,.68); background: #102f2b; }
        .footer-main { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 40px; padding: 64px 0 48px; }
        footer .brand { color: var(--white); }
        footer .brand-name small { color: rgba(255,255,255,.5); }
        .footer-intro { max-width: 270px; margin: 20px 0 0; font-size: 13px; }
        footer h3 { margin: 0 0 15px; color: var(--white); font-size: 15px; }
        .footer-links { display: grid; gap: 9px; }
        .footer-links a { font-size: 13px; transition: color .2s ease; }
        .footer-links a:hover { color: #f4d39a; }
        .footer-bottom { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; }
        .footer-bottom span { color: rgba(255,255,255,.42); }

        @media (max-width: 1024px) {
            .content-grid { grid-template-columns: repeat(3, 1fr); }
            .topic-grid { grid-template-columns: repeat(3, 1fr); }
            .scene-strip { grid-template-columns: 1fr 1fr; }
            .scene-card.large { grid-column: span 2; grid-row: auto; min-height: 380px; }
            .hero { min-height: 620px; }
        }
        @media (max-width: 768px) {
            .container { width: min(var(--container), calc(100% - 34px)); }
            section { padding: 65px 0; }
            .menu-toggle { display: block; }
            .main-nav {
                position: absolute;
                top: 78px;
                right: 17px;
                left: 17px;
                display: none;
                padding: 10px;
                border: 1px solid var(--line);
                border-radius: 12px;
                background: var(--white);
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: grid; }
            .main-nav a { padding: 12px; }
            .brand { min-width: auto; }
            .brand-name { max-width: 170px; font-size: 14px; }
            .signal-grid { grid-template-columns: repeat(2, 1fr); }
            .signal-item:nth-child(2) { border-right: 0; }
            .signal-item:nth-child(3), .signal-item:nth-child(4) { border-top: 1px solid var(--line); }
            .signal-item:first-child { padding-left: 24px; }
            .story-grid, .rank-layout, .news-layout { grid-template-columns: 1fr; gap: 30px; }
            .content-grid { grid-template-columns: repeat(2, 1fr); }
            .topic-grid { grid-template-columns: repeat(2, 1fr); }
            .trust-grid { grid-template-columns: repeat(2, 1fr); }
            .compare { grid-template-columns: 1fr; }
            .section-head.split { display: block; }
            .section-head.split p { margin-top: 14px; }
            .cta-wrap { display: block; }
            .cta-form { min-width: 0; margin-top: 25px; }
            .footer-main { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 520px) {
            .hero { min-height: 660px; background-position: 58% center; }
            .hero-content { padding: 90px 0 66px; }
            .hero h1 { font-size: 43px; }
            .hero-lead { font-size: 15px; }
            .hero-actions .btn { width: 100%; }
            .content-grid, .topic-grid, .trust-grid, .faq-grid { grid-template-columns: 1fr; }
            .scene-strip { grid-template-columns: 1fr; }
            .scene-card.large { grid-column: auto; min-height: 340px; }
            .scene-card { min-height: 260px; }
            .story-image, .story-image img { min-height: 300px; }
            .rank-item { grid-template-columns: 34px 1fr 58px; }
            .rank-hot { display: none; }
            .news-item { grid-template-columns: 105px 1fr; }
            .news-item img { height: 80px; }
            .cta-form { display: grid; }
            .footer-main { grid-template-columns: 1fr; gap: 28px; padding: 48px 0 36px; }
        }

/* roulang page: category1 */
:root {
      --ink:#17211f;
      --ink-soft:#52625f;
      --paper:#f5f3ee;
      --paper-deep:#e9e7df;
      --white:#fffefa;
      --line:#d9ded7;
      --green:#1d5b4f;
      --green-deep:#123d36;
      --mint:#b8d8c7;
      --coral:#d8735e;
      --gold:#c49a51;
      --radius:18px;
      --radius-sm:10px;
      --shadow:0 18px 45px rgba(24,47,41,.10);
      --shadow-soft:0 8px 22px rgba(24,47,41,.07);
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.75;letter-spacing:0}
    body,button,input{font-size:15px}
    img{display:block;width:100%;max-width:100%;object-fit:cover}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
    .eyebrow:before{content:"";width:28px;height:2px;background:var(--coral)}
    .section-head{max-width:700px;margin-bottom:36px}
    .section-head p{color:var(--ink-soft);max-width:660px;margin:10px 0 0}
    .section-head.split{display:flex;align-items:end;justify-content:space-between;gap:24px;max-width:none}
    .section-head.split p{max-width:470px}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(245,243,238,.92);border-bottom:1px solid rgba(217,222,215,.85);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:215px;font-weight:900;color:var(--green-deep)}
    .brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--white);background:var(--green);font-size:20px;box-shadow:5px 5px 0 var(--mint)}
    .brand-name{font-size:16px;line-height:1.25}
    .brand-name small{display:block;margin-top:3px;color:var(--ink-soft);font-size:10px;font-weight:600;letter-spacing:.1em}
    .main-nav{display:flex;align-items:center;gap:7px}
    .main-nav a{padding:9px 13px;border-radius:8px;color:var(--ink-soft);font-size:14px;transition:.2s ease}
    .main-nav a:hover,.main-nav a.active{color:var(--green-deep);background:var(--mint)}
    .main-nav .nav-action{padding:11px 17px;color:var(--white);background:var(--coral);font-weight:800}
    .main-nav .nav-action:hover{color:var(--white);background:#bb5948;transform:translateY(-2px)}
    .menu-toggle{display:none;border:0;background:transparent;color:var(--green);font-size:24px}
    section{padding:88px 0}
    .section-paper{background:var(--paper)}
    .section-white{background:var(--white)}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(38px,5vw,68px);line-height:1.12;margin-bottom:20px;letter-spacing:0}
    h2{font-size:clamp(27px,3vw,42px);line-height:1.25;margin:10px 0}
    h3{line-height:1.35}
    .page-hero{padding:92px 0 78px;background:var(--green-deep);color:var(--white);position:relative;overflow:hidden}
    .page-hero:after{content:"";position:absolute;right:-100px;top:-180px;width:500px;height:500px;border:1px solid rgba(184,216,199,.25);border-radius:50%;box-shadow:0 0 0 30px rgba(184,216,199,.04),0 0 0 60px rgba(184,216,199,.03)}
    .page-hero .eyebrow{color:var(--mint)}
    .page-hero .eyebrow:before{background:var(--mint)}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);align-items:end;gap:70px;position:relative;z-index:1}
    .page-hero h1{max-width:760px}
    .page-hero h1 span{color:#f0bd76}
    .hero-summary{color:rgba(255,254,250,.78);font-size:17px;max-width:680px}
    .hero-note{padding:26px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);background:rgba(255,255,255,.08)}
    .hero-note strong{display:block;color:#f0bd76;font-size:36px;line-height:1;margin-bottom:12px}
    .hero-note p{margin-bottom:0;color:rgba(255,255,255,.72)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 19px;border:1px solid transparent;border-radius:9px;font-weight:800;transition:.2s ease}
    .btn-primary{color:var(--white);background:var(--coral)}
    .btn-primary:hover{background:#bb5948;transform:translateY(-2px);box-shadow:0 10px 20px rgba(216,115,94,.22)}
    .btn-light{color:var(--green-deep);border-color:var(--line);background:var(--white)}
    .btn-light:hover{border-color:var(--green);background:var(--mint)}
    .intro-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
    .intro-layout p{color:var(--ink-soft);font-size:17px}
    .quote-box{padding:28px 30px;border-left:4px solid var(--coral);background:var(--paper-deep);font-size:21px;font-weight:800;line-height:1.55}
    .quote-box small{display:block;margin-top:15px;color:var(--ink-soft);font-size:13px;font-weight:500}
    .feature-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
    .feature-main,.feature-side{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--green-deep);color:var(--white);box-shadow:var(--shadow)}
    .feature-main img{height:390px;opacity:.72}
    .feature-main .feature-copy{position:absolute;inset:auto 0 0;padding:30px;background:linear-gradient(transparent,rgba(10,29,25,.92))}
    .feature-copy h3{font-size:28px;margin:8px 0}
    .feature-copy p{margin:0;color:rgba(255,255,255,.75)}
    .feature-side{display:grid;grid-template-rows:1fr 1fr;gap:1px;background:var(--line);box-shadow:none}
    .mini-story{padding:25px;background:var(--white);color:var(--ink)}
    .mini-story h3{margin:9px 0 7px;font-size:20px}
    .mini-story p{margin:0;color:var(--ink-soft);font-size:14px}
    .tag{display:inline-flex;padding:4px 9px;border-radius:20px;background:var(--mint);color:var(--green-deep);font-size:11px;font-weight:800}
    .matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .matrix-item{padding:24px 20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);transition:.2s ease}
    .matrix-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--mint)}
    .matrix-item .number{color:var(--coral);font-size:13px;font-weight:900}
    .matrix-item h3{margin:16px 0 8px;font-size:20px}
    .matrix-item p{margin:0;color:var(--ink-soft);font-size:14px}
    .timeline-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
    .timeline-intro{position:sticky;top:110px;align-self:start}
    .timeline-intro p{color:var(--ink-soft)}
    .timeline{border-left:1px solid var(--line);padding-left:28px}
    .timeline-item{position:relative;padding:0 0 32px}
    .timeline-item:before{content:"";position:absolute;left:-34px;top:8px;width:10px;height:10px;border:3px solid var(--coral);border-radius:50%;background:var(--paper)}
    .timeline-item:last-child{padding-bottom:0}
    .timeline-item time{color:var(--coral);font-size:12px;font-weight:900;letter-spacing:.1em}
    .timeline-item h3{margin:6px 0;font-size:21px}
    .timeline-item p{color:var(--ink-soft);margin-bottom:0}
    .ranking{background:var(--green);color:var(--white)}
    .ranking .section-head p{color:rgba(255,255,255,.72)}
    .rank-list{display:grid;grid-template-columns:1fr 1fr;gap:0 50px}
    .rank-item{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:15px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16)}
    .rank-no{color:#f0bd76;font-size:25px;font-weight:900}
    .rank-item h3{font-size:16px;margin:0 0 3px}
    .rank-item p{margin:0;color:rgba(255,255,255,.58);font-size:12px}
    .rank-score{color:#f0bd76;font-weight:900}
    .news-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
    .news-lead{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:var(--white);border-radius:var(--radius);overflow:hidden}
    .news-lead img{height:100%;min-height:250px}
    .news-lead-copy{padding:28px}
    .news-lead-copy h3{font-size:25px;margin:14px 0}
    .news-lead-copy p{color:var(--ink-soft)}
    .news-list{display:grid;gap:10px}
    .news-row{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white)}
    .news-row img{height:70px;border-radius:7px}
    .news-row h3{font-size:15px;margin:0 0 4px}
    .news-row time{color:var(--ink-soft);font-size:12px}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    details{padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white)}
    summary{cursor:pointer;font-weight:800;list-style:none;padding-right:20px;position:relative}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";position:absolute;right:0;color:var(--coral);font-size:22px;line-height:1}
    details[open] summary:after{content:"−"}
    details p{margin:14px 0 0;color:var(--ink-soft);font-size:14px}
    .cta-band{padding:64px 0;background:var(--paper-deep)}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta-inner p{color:var(--ink-soft);margin:8px 0 0}
    footer{background:var(--green-deep);color:var(--white);padding-top:64px}
    .footer-main{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;padding-bottom:50px}
    .footer-intro{max-width:280px;margin:24px 0 0;color:rgba(255,255,255,.62);font-size:14px}
    footer h3{font-size:15px;margin:4px 0 18px;color:#f0bd76}
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:rgba(255,255,255,.68);font-size:14px;transition:.2s ease}
    .footer-links a:hover{color:var(--mint);padding-left:4px}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55);font-size:12px}
    :focus-visible{outline:3px solid rgba(216,115,94,.5);outline-offset:3px}
    @media (max-width:1024px){
      .main-nav{gap:2px}.main-nav a{padding:8px 8px;font-size:13px}
      .hero-grid,.timeline-layout{gap:35px}.matrix{grid-template-columns:repeat(2,1fr)}
      .footer-main{grid-template-columns:1.4fr 1fr 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:14px}
      .main-nav{display:none;position:absolute;left:16px;right:16px;top:72px;padding:10px;flex-direction:column;align-items:stretch;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
      .main-nav.open{display:flex}.main-nav a{padding:12px 14px}
      .menu-toggle{display:block}
      .hero-grid,.intro-layout,.timeline-layout,.news-layout{grid-template-columns:1fr}
      .page-hero{padding:70px 0 62px}.hero-note{max-width:430px}
      .timeline-intro{position:static}.feature-grid{grid-template-columns:1fr}
      .rank-list{grid-template-columns:1fr}.news-lead{grid-template-columns:1fr}
      .news-lead img{height:220px}.faq-grid{grid-template-columns:1fr}
      .cta-inner{align-items:flex-start;flex-direction:column}
      .footer-main{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:5px}
    }
    @media (max-width:520px){
      section{padding:64px 0}.page-hero h1{font-size:40px}
      .matrix{grid-template-columns:1fr}.feature-main img{height:300px}
      .section-head.split{display:block}.section-head.split p{margin-top:12px}
      .footer-main{grid-template-columns:1fr}.brand-name{max-width:190px}
    }