/* roulang page: index */
:root {
            --ink: #172433;
            --muted: #687789;
            --paper: #f5f7fa;
            --white: #ffffff;
            --line: #dfe6ee;
            --blue: #2468d8;
            --blue-dark: #164b9d;
            --cyan: #2eafbd;
            --gold: #d89b35;
            --navy: #101d31;
            --shadow: 0 16px 42px rgba(23, 42, 66, .10);
            --shadow-soft: 0 8px 22px rgba(23, 42, 66, .07);
            --radius: 14px;
            --container: 1180px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-size: 15px;
            line-height: 1.75;
        }
        a { color: inherit; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
        img { display: block; width: 100%; }
        button, input { font: inherit; }
        button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(36,104,216,.28); outline-offset: 3px; }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { line-height: 1.3; letter-spacing: 0; }
        .container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--blue);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--cyan); }
        .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
        .section-head h2 { margin: 8px 0 0; font-size: clamp(24px, 3vw, 34px); }
        .section-head p { max-width: 620px; color: var(--muted); margin: 0; }
        .text-link { color: var(--blue); font-weight: 700; white-space: nowrap; }
        .text-link:hover { color: var(--blue-dark); }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(255,255,255,.94);
            border-bottom: 1px solid rgba(223,230,238,.9);
            backdrop-filter: blur(18px);
        }
        .topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
        .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 245px; }
        .brand-mark {
            width: 40px; height: 40px; display: grid; place-items: center;
            border-radius: 11px; background: var(--navy); color: #fff; font-weight: 800; font-size: 17px;
            box-shadow: 0 7px 15px rgba(16,29,49,.18);
        }
        .brand-name { font-size: 15px; font-weight: 800; line-height: 1.25; }
        .brand-sub { color: var(--muted); font-size: 11px; display: block; margin-top: 3px; font-weight: 500; }
        .main-nav { display: flex; align-items: center; gap: 6px; }
        .main-nav a { padding: 9px 13px; color: var(--muted); font-size: 13px; font-weight: 600; border-radius: 8px; }
        .main-nav a:hover, .main-nav a.active { color: var(--blue); background: #edf4ff; }
        .nav-badge { color: #fff !important; background: var(--blue) !important; padding-inline: 16px !important; }
        .nav-badge:hover { background: var(--blue-dark) !important; transform: translateY(-1px); }
        .menu-toggle { display: none; border: 0; background: #edf4ff; color: var(--blue); border-radius: 8px; width: 42px; height: 42px; cursor: pointer; font-size: 20px; }

        .hero {
            position: relative;
            min-height: 590px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--navy);
            color: #fff;
        }
        .hero::before {
            content: "";
            position: absolute; inset: 0;
            background: linear-gradient(90deg, rgba(11,23,42,.94) 0%, rgba(11,23,42,.72) 46%, rgba(11,23,42,.22) 100%), url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1900&q=85") center/cover;
        }
        .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 100px; background: linear-gradient(transparent, var(--paper)); opacity: .2; }
        .hero-inner { position: relative; z-index: 1; padding: 86px 0 100px; }
        .hero-copy { max-width: 710px; }
        .hero .eyebrow { color: #8fdbe2; }
        .hero h1 { margin: 18px 0 18px; font-size: clamp(34px, 5vw, 65px); max-width: 730px; }
        .hero h1 strong { color: #8fdbe2; font-weight: 800; }
        .hero-lead { max-width: 690px; color: #dce7f4; font-size: 17px; line-height: 1.9; margin-bottom: 28px; }
        .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
        .button { margin: 0; border: 0; border-radius: 9px; padding: 12px 20px; font-weight: 700; font-size: 14px; line-height: 1.4; }
        .button.primary { color: #fff; background: var(--blue); box-shadow: 0 10px 24px rgba(36,104,216,.28); }
        .button.primary:hover { background: #3478e6; transform: translateY(-2px); }
        .button.ghost { color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.28); }
        .button.ghost:hover { background: rgba(255,255,255,.17); }
        .hero-note { margin: 23px 0 0; color: #9eb2c9; font-size: 12px; }

        main { overflow: hidden; }
        .section { padding: 82px 0; }
        .section.alt { background: #fff; }
        .section.dark { background: var(--navy); color: #fff; }
        .section.dark .section-head p, .section.dark .muted { color: #aab9cb; }
        .intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
        .intro-grid h2 { font-size: clamp(26px, 3vw, 40px); margin: 10px 0 18px; }
        .intro-grid p { color: var(--muted); }
        .signal-list { border-left: 2px solid #dbe8fa; padding-left: 22px; }
        .signal-item { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 13px 0; }
        .signal-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #eaf3ff; color: var(--blue); font-weight: 800; font-size: 12px; }
        .signal-item h3 { font-size: 16px; margin: 0 0 4px; }
        .signal-item p { font-size: 13px; margin: 0; }

        .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
        .content-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
        .content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #bfd4f2; }
        .card-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dce5ef; }
        .card-image img { height: 100%; object-fit: cover; transition: transform .35s ease; }
        .content-card:hover .card-image img { transform: scale(1.05); }
        .card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(12,26,48,.45)); pointer-events: none; }
        .badge { position: absolute; z-index: 1; left: 12px; top: 12px; padding: 3px 8px; border-radius: 5px; background: rgba(16,29,49,.86); color: #fff; font-size: 11px; font-weight: 700; }
        .badge.cyan { background: var(--cyan); }
        .card-body { padding: 16px; }
        .card-body h3 { margin: 0 0 8px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .card-body p { min-height: 48px; color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0 0 13px; }
        .card-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
        .score { color: var(--gold); font-weight: 800; }
        .rating { letter-spacing: 1px; }

        .feature-strip { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: stretch; }
        .feature-panel { min-height: 280px; border-radius: var(--radius); overflow: hidden; position: relative; background: #172b47; color: #fff; padding: 34px; display: flex; flex-direction: column; justify-content: end; }
        .feature-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,25,46,.92), rgba(12,25,46,.05)), url("https://images.unsplash.com/photo-1497366754035-f200968a6e 6e9997f1b?auto=format&fit=crop&w=1200&q=80"); background-size: cover; background-position: center; }
        .feature-panel > * { position: relative; z-index: 1; }
        .feature-panel h3 { margin: 0 0 8px; font-size: 25px; }
        .feature-panel p { color: #c3d1e1; margin: 0; max-width: 560px; }
        .feature-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
        .metric { padding: 25px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
        .metric strong { display: block; color: var(--blue); font-size: 32px; line-height: 1.2; }
        .metric span { color: var(--muted); font-size: 13px; }

        .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
        .category-card { min-height: 164px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; background: #f7faff; border: 1px solid #d9e6f6; border-radius: var(--radius); }
        .category-card:hover { background: #edf5ff; border-color: #bcd2ee; transform: translateY(-3px); }
        .category-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #dcecff; color: var(--blue); font-weight: 800; }
        .category-card h3 { font-size: 16px; margin: 14px 0 6px; }
        .category-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

        .rank-layout { display: grid; grid-template-columns: 1fr .85fr; gap: 28px; align-items: start; }
        .rank-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); }
        .rank-row { display: grid; grid-template-columns: 42px 1fr 86px 60px; gap: 14px; align-items: center; padding: 15px 20px; border-bottom: 1px solid #edf1f5; }
        .rank-row:last-child { border-bottom: 0; }
        .rank-row:hover { background: #f7faff; }
        .rank-no { color: var(--muted); font-size: 17px; font-weight: 800; }
        .rank-row:nth-child(-n+3) .rank-no { color: var(--blue); }
        .rank-title { font-weight: 700; font-size: 14px; }
        .rank-tag { justify-self: start; padding: 3px 7px; border-radius: 4px; color: var(--blue-dark); background: #e7f0ff; font-size: 11px; }
        .rank-hot { color: #d47734; font-size: 12px; font-weight: 700; }
        .ranking-note { background: #132640; color: #fff; border-radius: var(--radius); padding: 30px; min-height: 100%; }
        .ranking-note h3 { font-size: 23px; margin: 0 0 13px; }
        .ranking-note p { color: #b7c7d9; font-size: 13px; }
        .mini-line { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #d9e5f1; font-size: 13px; }
        .mini-line:last-child { border-bottom: 0; }

        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .news-card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft); }
        .news-card img { height: 92px; object-fit: cover; border-radius: 8px; }
        .news-card h3 { font-size: 14px; line-height: 1.5; margin: 3px 0 8px; }
        .news-card time { color: var(--muted); font-size: 11px; }
        .news-card:hover { border-color: #bcd2ee; transform: translateY(-3px); }

        .quote-section { background: #eef5fd; }
        .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .quote { padding: 24px; background: #fff; border: 1px solid #dce7f3; border-radius: var(--radius); }
        .quote-mark { color: var(--cyan); font-size: 32px; line-height: 1; font-weight: 800; }
        .quote p { color: #506174; font-size: 14px; margin: 10px 0 18px; }
        .quote strong { font-size: 13px; }
        .quote span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

        .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        .faq-item { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 20px 22px; }
        .faq-item h3 { position: relative; padding-right: 28px; margin: 0 0 8px; font-size: 15px; }
        .faq-item h3::after { content: "+"; position: absolute; right: 0; color: var(--blue); font-size: 20px; font-weight: 400; }
        .faq-item p { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.75; }

        .closing { padding: 70px 0; background: var(--blue); color: #fff; }
        .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .closing h2 { margin: 0 0 10px; font-size: clamp(25px, 3vw, 36px); }
        .closing p { color: #dce9fb; margin: 0; max-width: 670px; }
        .closing .button { background: #fff; color: var(--blue-dark); }
        .closing .button:hover { background: #eaf3ff; transform: translateY(-2px); }

        .site-footer { background: #0d192b; color: #d5dfeb; padding: 58px 0 25px; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: 40px; }
        .footer-brand p { max-width: 330px; color: #8fa2b8; font-size: 13px; margin: 16px 0 0; }
        .site-footer h3 { color: #fff; font-size: 14px; margin: 4px 0 15px; }
        .footer-links { display: grid; gap: 8px; }
        .footer-links a { color: #8fa2b8; font-size: 13px; }
        .footer-links a:hover { color: #fff; }
        .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: #7f93aa; font-size: 11px; }
        .age-note { color: #d8a14b; }

        @media (max-width: 1024px) {
            .main-nav { gap: 0; }
            .main-nav a { padding-inline: 9px; }
            .content-grid { grid-template-columns: repeat(3, 1fr); }
            .category-grid { grid-template-columns: repeat(3, 1fr); }
            .news-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .container { width: min(calc(100% - 30px), var(--container)); }
            .topbar { min-height: 68px; }
            .brand { min-width: 0; }
            .menu-toggle { display: block; }
            .main-nav {
                display: none; position: absolute; left: 15px; right: 15px; top: 76px;
                padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
                box-shadow: var(--shadow); flex-direction: column; align-items: stretch;
            }
            .main-nav.is-open { display: flex; }
            .main-nav a { padding: 12px 14px; }
            .hero { min-height: 570px; }
            .hero-inner { padding: 72px 0 82px; }
            .hero h1 { font-size: clamp(33px, 9vw, 50px); }
            .intro-grid, .feature-strip, .rank-layout { grid-template-columns: 1fr; gap: 30px; }
            .content-grid { grid-template-columns: repeat(2, 1fr); }
            .category-grid { grid-template-columns: repeat(2, 1fr); }
            .section { padding: 62px 0; }
            .section-head { display: block; }
            .section-head p { margin-top: 12px; }
            .section-head .text-link { display: inline-block; margin-top: 14px; }
            .closing-inner { display: block; }
            .closing .button { margin-top: 22px; }
            .footer-grid { grid-template-columns: repeat(2, 1  fr 2fr); }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-top: 8px; }
        }
        @media (max-width: 520px) {
            .container { width: min(calc(100% - 24px), var(--container)); }
            .brand-name { font-size: 13px; }
            .brand-sub { font-size: 10px; }
            .hero { min-height: 620px; }
            .hero-lead { font-size: 15px; }
            .hero-actions .button { width: 100%; text-align: center; }
            .content-grid, .category-grid, .news-grid, .quote-grid, .faq-grid { grid-template-columns: 1fr; }
            .feature-side { grid-template-columns: 1fr 1fr; }
            .metric { padding: 18px; }
            .metric strong { font-size: 26px; }
            .rank-row { grid-template-columns: 30px 1fr 54px; gap: 8px; padding-inline: 13px; }
            .rank-tag { display: none; }
            .news-card { grid-template-columns: 100px 1fr; }
            .news-card img { height: 82px; }
            .footer-grid { grid-template-columns: 1fr; gap: 26px; }
        }

/* roulang page: category1 */
:root {
      --ink:#172433;--muted:#687789;--paper:#f5f7fa;--white:#fff;--line:#dfe6ee;
      --blue:#2468d8;--blue-dark:#164b9d;--cyan:#2eafbd;--gold:#d89b35;--navy:#101d31;
      --shadow:0 16px 42px rgba(23,42,66,.10);--shadow-soft:0 8px 22px rgba(23,42,66,.07);
      --radius:14px;--container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.75}
    a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
    img{display:block;width:100%}
    button,input{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(36,104,216,.28);outline-offset:3px}
    .container{width:min(calc(100% - 40px),var(--container));margin:0 auto}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.08em}
    .eyebrow:before{content:"";width:24px;height:2px;background:var(--cyan)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
    .section-head h2{margin:8px 0 0;font-size:clamp(24px,3vw,34px);line-height:1.3}
    .section-head p{max-width:620px;color:var(--muted);margin:0}
    .text-link{color:var(--blue);font-weight:700;white-space:nowrap}
    .text-link:hover{color:var(--blue-dark)}
    .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(223,230,238,.9);backdrop-filter:blur(18px)}
    .topbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:inline-flex;align-items:center;gap:12px;min-width:245px}
    .brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--navy);color:#fff;font-weight:800;font-size:17px;box-shadow:0 7px 15px rgba(16,29,49,.18)}
    .brand-name{font-size:15px;font-weight:800;line-height:1.25}
    .brand-sub{color:var(--muted);font-size:11px;display:block;margin-top:3px;font-weight:500}
    .main-nav{display:flex;align-items:center;gap:6px}
    .main-nav a{padding:9px 13px;color:var(--muted);font-size:13px;font-weight:600;border-radius:8px}
    .main-nav a:hover,.main-nav a.active{color:var(--blue);background:#edf4ff}
    .nav-badge{color:#fff!important;background:var(--blue)!important;padding-inline:16px!important}
    .nav-badge:hover{background:var(--blue-dark)!important;transform:translateY(-1px)}
    .menu-toggle{display:none;border:0;background:#edf4ff;color:var(--blue);border-radius:8px;width:42px;height:42px;cursor:pointer;font-size:20px}
    .page-hero{background:var(--navy);color:#fff;padding:88px 0 82px;position:relative;overflow:hidden}
    .page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,23,42,.96),rgba(11,23,42,.68)),url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1900&q=85") center/cover}
    .page-hero .container{position:relative;z-index:1}
    .hero-copy{max-width:760px}
    .page-hero .eyebrow{color:#8fdbe2}
    .page-hero h1{font-size:clamp(35px,5vw,62px);line-height:1.2;margin:18px 0 18px}
    .page-hero h1 strong{color:#8fdbe2}
    .hero-lead{max-width:720px;color:#dce7f4;font-size:17px;margin:0 0 28px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .button{margin:0;border:0;border-radius:9px;padding:12px 20px;font-weight:700;font-size:14px;line-height:1.4}
    .button.primary{color:#fff;background:var(--blue);box-shadow:0 10px 24px rgba(36,104,216,.28)}
    .button.primary:hover{background:#3478e6;transform:translateY(-2px)}
    .button.ghost{color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.28)}
    .button.ghost:hover{background:rgba(255,255,255,.17)}
    .section{padding:78px 0}
    .section.alt{background:#fff}
    .section.dark{background:var(--navy);color:#fff}
    .section.dark .section-head p,.section.dark .muted{color:#aab9cb}
    .intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
    .intro-grid h2{font-size:clamp(26px,3vw,40px);line-height:1.35;margin:10px 0 18px}
    .intro-grid p{color:var(--muted)}
    .signal-list{border-left:2px solid #dbe8fa;padding-left:22px}
    .signal-item{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:13px 0}
    .signal-number{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#edf4ff;color:var(--blue);font-weight:800}
    .signal-item h3{font-size:16px;margin:0 0 4px}
    .signal-item p{font-size:13px;margin:0}
    .topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .topic-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow-soft);transition:.24s ease}
    .topic-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#bfd4f2}
    .topic-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#edf4ff;color:var(--blue);font-weight:800;font-size:18px}
    .topic-card h3{font-size:19px;margin:18px 0 8px}
    .topic-card p{color:var(--muted);font-size:14px;margin:0}
    .topic-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}
    .tag{display:inline-flex;padding:4px 9px;border-radius:5px;background:#f0f5fb;color:#52657a;font-size:12px}
    .feature-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
    .feature-panel{min-height:270px;padding:34px;border-radius:var(--radius);background:linear-gradient(135deg,#eaf3ff,#fff);border:1px solid #d8e6f8}
    .feature-panel h3{font-size:27px;margin:12px 0}
    .feature-panel p{max-width:580px;color:var(--muted)}
    .data-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-soft)}
    .data-panel h3{font-size:18px;margin:0 0 20px}
    .metric{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
    .metric:last-child{border-bottom:0}
    .metric span{color:var(--muted);font-size:13px}.metric strong{color:var(--blue);font-size:22px}
    .content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .content-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);transition:.24s ease}
    .content-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#bfd4f2}
    .card-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dce5ef}
    .card-image img{height:100%;object-fit:cover;transition:transform .35s ease}
    .content-card:hover .card-image img{transform:scale(1.05)}
    .badge{position:absolute;top:12px;left:12px;padding:4px 8px;border-radius:5px;background:var(--blue);color:#fff;font-size:11px;font-weight:800}
    .card-body{padding:17px}
    .card-body h3{font-size:16px;line-height:1.45;margin:0 0 8px}
    .card-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
    .rating{color:var(--gold);font-weight:800}
    .ranking-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px}
    .rank-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft)}
    .rank-item{display:grid;grid-template-columns:42px 1fr auto;gap:15px;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line)}
    .rank-item:last-child{border-bottom:0}
    .rank-no{color:var(--blue);font-size:20px;font-weight:800}
    .rank-title{font-weight:700}.rank-title small{display:block;color:var(--muted);font-size:12px;font-weight:400}
    .rank-score{font-weight:800;color:var(--gold)}
    .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .news-card{display:grid;grid-template-columns:116px 1fr;gap:16px;align-items:center;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-soft)}
    .news-card img{height:84px;object-fit:cover;border-radius:8px}
    .news-card h3{font-size:15px;line-height:1.5;margin:0 0 6px}
    .news-card time{color:var(--muted);font-size:12px}
    .quote-strip{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
    .quote-strip blockquote{margin:0;font-size:24px;line-height:1.55;font-weight:600}
    .quote-strip blockquote:before{content:"“";color:var(--cyan);font-size:52px;line-height:0;vertical-align:-18px;margin-right:8px}
    .quote-strip p{color:#aab9cb;margin:15px 0 0}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .faq-item{background:#fff;border:1px solid var(--line);border-radius:11px;padding:21px 24px}
    .faq-item h3{font-size:16px;margin:0 0 8px}.faq-item p{color:var(--muted);font-size:14px;margin:0}
    .cta-band{background:#eaf3ff;padding:52px 0;border-top:1px solid #d8e6f8;border-bottom:1px solid #d8e6f8}
    .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
    .cta-inner h2{margin:0 0 8px;font-size:28px}.cta-inner p{color:var(--muted);margin:0}
    .site-footer{background:#0d192b;color:#fff;padding:58px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px}
    .footer-brand p{color:#aab9cb;font-size:13px;max-width:310px;margin:18px 0 0}
    .site-footer .brand-name{color:#fff}.site-footer .brand-sub{color:#91a1b5}
    .site-footer h3{font-size:14px;margin:4px 0 15px}
    .footer-links{display:grid;gap:8px}.footer-links a{color:#aab9cb;font-size:13px}.footer-links a:hover{color:#8fdbe2}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:20px;color:#8293a8;font-size:12px}
    .age-note{color:#d4a454}
    @media(max-width:1024px){.main-nav{gap:2px}.main-nav a{padding:8px 9px}.content-grid{grid-template-columns:repeat(3,1fr)}.topic-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:768px){.container{width:min(calc(100% - 30px),var(--container))}.topbar{min-height:68px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;top:68px;left:15px;right:15px;padding:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;flex-direction:column;align-items:stretch}.main-nav.is-open{display:flex}.main-nav a{padding:11px 13px}.brand{min-width:0}.brand-name{font-size:13px}.page-hero{padding:68px 0}.intro-grid,.feature-layout,.ranking-layout,.quote-strip{grid-template-columns:1fr;gap:30px}.content-grid{grid-template-columns:repeat(2,1fr)}.news-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.cta-inner{align-items:flex-start;flex-direction:column}}
    @media(max-width:520px){.section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:10px}.topic-grid,.content-grid,.news-grid,.faq-grid{grid-template-columns:1fr}.hero-actions .button{width:100%;text-align:center}.page-hero h1{font-size:36px}.feature-panel{padding:25px}.rank-item{padding:14px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom .age-note{display:block;margin-top:8px}}