/* roulang page: index */
:root {
            --ink: #171923;
            --muted: #737887;
            --soft: #f5f6f8;
            --paper: #ffffff;
            --line: #e6e8ee;
            --accent: #e56d8f;
            --accent-dark: #c94e72;
            --gold: #c89a54;
            --night: #242433;
            --night-2: #303044;
            --radius: 18px;
            --shadow: 0 14px 40px rgba(28, 30, 44, .08);
            --shadow-hover: 0 20px 50px rgba(28, 30, 44, .14);
            --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", system-ui, sans-serif;
            line-height: 1.75;
            font-size: 15px;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; width: 100%; object-fit: cover; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(229, 109, 143, .35); 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(--accent-dark);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--accent);
        }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { line-height: 1.22; letter-spacing: 0; }
        h2 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 16px; }
        h3 { font-size: 18px; margin-bottom: 8px; }
        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 24px;
            margin-bottom: 28px;
        }
        .section-head p { max-width: 620px; color: var(--muted); margin-bottom: 0; }
        .section { padding: 92px 0; }
        .section.alt { background: var(--soft); }
        .section.dark { color: #fff; background: var(--night); }
        .section.dark .section-head p,
        .section.dark .muted { color: #b9bbc9; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(255,255,255,.92);
            border-bottom: 1px solid rgba(230,232,238,.85);
            backdrop-filter: blur(16px);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 28px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            color: #fff;
            background: var(--accent);
            border-radius: 12px;
            font-weight: 900;
            font-size: 18px;
            box-shadow: 0 7px 17px rgba(229,109,143,.25);
        }
        .brand-name { font-weight: 850; letter-spacing: -.03em; }
        .brand-name small { display: block; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; }
        .main-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
        .main-nav a {
            padding: 9px 13px;
            color: #5d6270;
            border-radius: 10px;
            font-size: 14px;
            transition: .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--accent-dark); background: #fff1f4; }
        .nav-action {
            padding: 10px 16px;
            color: #fff !important;
            background: var(--ink) !important;
            border-radius: 10px !important;
            font-weight: 700;
        }
        .nav-action:hover { background: var(--accent-dark) !important; }

        .hero {
            position: relative;
            min-height: 650px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: #fff;
            background:
                linear-gradient(90deg, rgba(24,24,35,.94) 0%, rgba(24,24,35,.76) 48%, rgba(24,24,35,.28) 100%),
                url("https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?auto=format&fit=crop&w=1800&q=85") center/cover;
        }
        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 110px;
            background: linear-gradient(transparent, rgba(24,24,35,.42));
            pointer-events: none;
        }
        .hero-inner { position: relative; z-index: 1; width: 100%; }
        .hero-copy { max-width: 760px; padding: 82px 0 92px; }
        .hero .eyebrow { color: #f5b3c4; }
        .hero h1 { max-width: 720px; margin: 18px 0 20px; font-size: clamp(42px, 7vw, 78px); letter-spacing: -.05em; }
        .hero h1 em { color: #f3a9bd; font-style: normal; }
        .hero-lead { max-width: 690px; color: #e7e7ec; font-size: 17px; line-height: 1.9; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
        .btn {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-height: 46px;
            gap: 8px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 10px;
            font-weight: 750;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(20,20,30,.14); }
        .btn-primary { color: #fff; background: var(--accent); }
        .btn-primary:hover { background: var(--accent-dark); }
        .btn-light { color: var(--ink); background: #fff; }
        .btn-outline { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
        .hero-meta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 50px; }
        .hero-stat strong { display: block; font-size: 25px; color: #fff; }
        .hero-stat span { color: #c8c8d2; font-size: 12px; }

        .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .metric { padding: 25px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); }
        .metric strong { display: block; color: var(--accent-dark); font-size: 34px; line-height: 1; margin-bottom: 10px; }
        .metric span { color: var(--muted); font-size: 13px; }

        .feature-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 18px; }
        .feature { min-height: 240px; padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
        .feature.feature-main { color: #fff; background: var(--night); border-color: var(--night); }
        .feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: #fff1f4; color: var(--accent-dark); font-size: 21px; margin-bottom: 25px; }
        .feature-main .feature-icon { background: rgba(255,255,255,.12); color: #f4b2c4; }
        .feature p { color: var(--muted); margin-bottom: 0; }
        .feature-main p { color: #c9c9d3; }

        .content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
        .content-card { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); transition: .25s ease; }
        .content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
        .poster { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; }
        .poster img { height: 100%; transition: transform .45s ease; }
        .content-card:hover .poster img { transform: scale(1.05); }
        .poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(20,20,30,.5)); }
        .badge { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 4px 8px; border-radius: 6px; color: #fff; background: var(--accent); font-size: 11px; font-weight: 800; }
        .badge.blue { background: #4c83b8; }
        .badge.gold { background: var(--gold); }
        .card-body { padding: 17px; }
        .card-body h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .card-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
        .rating { color: var(--gold); font-weight: 800; }

        .wide-feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: center; }
        .wide-photo { overflow: hidden; min-height: 360px; border-radius: 24px; }
        .wide-photo img { height: 100%; }
        .check-list { display: grid; gap: 13px; padding: 0; margin: 24px 0 0; list-style: none; }
        .check-list li { display: flex; gap: 11px; align-items: flex-start; }
        .check-list b { color: var(--accent-dark); }
        .check-list span { color: var(--muted); }

        .category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
        .category-tile { min-height: 180px; display: flex; flex-direction: column; justify-content: end; padding: 22px; color: #fff; border-radius: var(--radius); overflow: hidden; background: linear-gradient(145deg, #35354a, #242433); transition: .2s ease; }
        .category-tile:hover { transform: translateY(-4px); background: linear-gradient(145deg, #7a3d56, #302738); }
        .category-tile strong { font-size: 19px; }
        .category-tile span { color: #c7c7d0; font-size: 12px; line-height: 1.6; }

        .ranking-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
        .ranking-intro { position: sticky; top: 110px; }
        .ranking-intro p { color: var(--muted); }
        .ranking-list { display: grid; gap: 8px; }
        .rank-item { display: grid; grid-template-columns: 45px 1fr auto auto; align-items: center; gap: 16px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
        .rank-num { color: var(--accent-dark); font-size: 20px; font-weight: 900; }
        .rank-title { font-weight: 750; }
        .rank-tag { padding: 3px 8px; color: var(--muted); background: var(--soft); border-radius: 6px; font-size: 11px; }
        .rank-hot { color: var(--accent-dark); font-size: 12px; }

        .news-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 28px; }
        .news-lead { position: relative; min-height: 360px; overflow: hidden; border-radius: var(--radius); color: #fff; background: #222; }
        .news-lead img { height: 100%; opacity: .75; }
        .news-lead div { position: absolute; inset: auto 28px 25px; }
        .news-lead h3 { font-size: 25px; }
        .news-list { display: grid; gap: 13px; }
        .news-item { display: grid; grid-template-columns: 105px 1fr; gap: 15px; align-items: center; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
        .news-item img { height: 72px; border-radius: 10px; }
        .news-item h3 { font-size: 15px; margin-bottom: 3px; }
        .news-item time { color: var(--muted); font-size: 12px; }

        .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .trust { padding: 25px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius); background: var(--night-2); }
        .trust strong { display: block; margin-bottom: 8px; color: #fff; }
        .trust p { margin: 0; color: #b9bbc9; font-size: 13px; }

        .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        details { padding: 20px 22px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
        summary { cursor: pointer; font-weight: 800; }
        details p { margin: 13px 0 0; color: var(--muted); font-size: 14px; }

        .final-cta { padding: 70px 0; color: #fff; background: var(--accent-dark); }
        .final-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
        .final-cta h2 { margin-bottom: 8px; }
        .final-cta p { max-width: 680px; margin-bottom: 0; color: #f9dfe7; }

        footer { color: #b9bbc9; background: #1c1c27; }
        .footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 35px; padding: 68px 0 48px; }
        footer .brand { color: #fff; margin-bottom: 16px; }
        footer .brand-name small { color: #9093a3; }
        footer p { max-width: 300px; font-size: 13px; }
        footer h3 { color: #fff; font-size: 14px; }
        footer a { display: block; margin: 8px 0; color: #b9bbc9; font-size: 13px; }
        footer a:hover { color: #f0a5bb; }
        .footer-bottom { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); color: #858897; font-size: 12px; }
        .footer-bottom span { color: #f0a5bb; }

        @media (max-width: 1024px) {
            .content-grid { grid-template-columns: repeat(3, 1fr); }
            .category-grid { grid-template-columns: repeat(3, 1fr); }
            .metric-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-main { grid-template-columns: 1.5fr 1fr 1fr; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 32px, var(--container)); }
            .nav-wrap { gap: 14px; }
            .main-nav { overflow-x: auto; white-space: nowrap; }
            .main-nav a { padding: 8px 9px; font-size: 13px; }
            .nav-action { display: none !important; }
            .hero { min-height: 610px; background-position: 65% center; }
            .hero-copy { padding: 70px 0 78px; }
            .hero h1 { font-size: clamp(38px, 10vw, 62px); }
            .feature-grid, .wide-feature, .ranking-layout, .news-layout { grid-template-columns: 1fr; }
            .ranking-intro { position: static; }
            .content-grid { grid-template-columns: repeat(2, 1fr); }
            .category-grid { grid-template-columns: repeat(2, 1fr); }
            .trust-grid { grid-template-columns: 1fr; }
            .footer-main { grid-template-columns: repeat(2, 1fr); }
            .final-cta-inner { align-items: flex-start; flex-direction: column; }
        }
        @media (max-width: 520px) {
            .section { padding: 64px 0; }
            .section-head { display: block; }
            .section-head p { margin-top: 12px; }
            .metric-grid, .content-grid, .category-grid, .faq-grid { grid-template-columns: 1fr; }
            .hero-meta { gap: 18px; margin-top: 35px; }
            .hero-stat strong { font-size: 21px; }
            .poster { aspect-ratio: 16 / 10; }
            .rank-item { grid-template-columns: 34px 1fr auto; gap: 10px; }
            .rank-tag { display: none; }
            .footer-main { grid-template-columns: 1fr 1fr; gap: 25px 15px; }
            .footer-main > div:first-child { grid-column: 1 / -1; }
            .brand-name { font-size: 14px; }
        }

/* roulang page: category1 */
:root{
 --ink:#171923;--muted:#737887;--soft:#f5f6f8;--paper:#fff;--line:#e6e8ee;
 --accent:#e56d8f;--accent-dark:#c94e72;--gold:#c89a54;--night:#242433;--night-2:#303044;
 --radius:18px;--shadow:0 14px 40px rgba(28,30,44,.08);--shadow-hover:0 20px 50px rgba(28,30,44,.14);
 --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",system-ui,sans-serif;line-height:1.75;font-size:15px}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;object-fit:cover}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(230,232,238,.9);backdrop-filter:blur(16px)}
.nav-wrap{min-height:76px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;color:#fff;background:var(--accent);border-radius:12px;font-weight:900;font-size:18px;box-shadow:0 7px 17px rgba(229,109,143,.25)}
.brand-name{font-weight:850;letter-spacing:-.03em}
.brand-name small{display:block;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.08em}
.main-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
.main-nav a{padding:9px 13px;color:#5d6270;border-radius:10px;font-size:14px;transition:.2s ease}
.main-nav a:hover,.main-nav a.active{color:var(--accent-dark);background:#fff1f4}
.nav-action{padding:10px 16px;color:#fff!important;background:var(--ink)!important;border-radius:10px!important;font-weight:700}
.nav-action:hover{background:var(--accent-dark)!important}
.section{padding:88px 0}
.section.alt{background:var(--soft)}
.section.dark{color:#fff;background:var(--night)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
.section-head h2{margin:8px 0 0;font-size:34px;line-height:1.25;letter-spacing:-.04em}
.section-head p{max-width:610px;color:var(--muted);margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent-dark);font-size:12px;font-weight:800;letter-spacing:.12em}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--accent)}
.hero{padding:70px 0 82px;background:#fbf8f9;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:70px;align-items:center}
.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.12;letter-spacing:-.06em;margin:18px 0 20px}
.hero h1 em{font-style:normal;color:var(--accent-dark)}
.hero-lead{max-width:680px;color:#555b69;font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;justify-content:center;align-items:center;min-height:46px;gap:8px;padding:0 20px;border:1px solid transparent;border-radius:10px;font-weight:750;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(20,20,30,.14)}
.btn-primary{color:#fff;background:var(--accent)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-dark{color:#fff;background:var(--ink)}
.btn-dark:hover{background:var(--accent-dark)}
.btn-outline{color:var(--ink);border-color:var(--line);background:#fff}
.cover-wrap{position:relative;max-width:470px;margin-left:auto}
.cover-wrap img{height:470px;border-radius:24px;box-shadow:var(--shadow-hover)}
.cover-tag{position:absolute;left:-18px;bottom:26px;padding:16px 20px;color:#fff;background:var(--night);border-radius:14px;box-shadow:var(--shadow)}
.cover-tag strong{display:block;font-size:22px}.cover-tag span{color:#c5c6d0;font-size:12px}
.contents{padding:25px;border:1px solid var(--line);background:#fff;border-radius:16px;box-shadow:var(--shadow)}
.contents h3{margin:0 0 14px;font-size:16px}
.contents ul{padding:0;margin:0;list-style:none;display:grid;gap:9px}
.contents li{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:13px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.contents li:last-child{border:0;padding-bottom:0}
.contents b{color:var(--ink);font-weight:600}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.metric{padding:25px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.metric strong{display:block;font-size:31px;line-height:1.2;color:var(--accent-dark)}
.metric span{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.matrix{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.matrix-main{padding:32px;border-radius:var(--radius);background:var(--night);color:#fff}
.matrix-main h3{font-size:25px;margin:0 0 12px}
.matrix-main p{color:#c4c5cf;margin:0 0 24px}
.topic-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.topic{padding:17px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.05)}
.topic b{display:block;color:#fff}.topic span{display:block;color:#aaaebb;font-size:12px;margin-top:3px}
.matrix-side{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.matrix-side h3{margin:0 0 16px}.matrix-side p{color:var(--muted);font-size:14px}
.progress{height:8px;margin:17px 0 9px;background:#f0e8eb;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:var(--accent);border-radius:inherit}
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.compare-card{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.2s}
.compare-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.compare-card.featured{border-color:#efb3c3;background:#fff7f9}
.compare-card h3{margin:0 0 8px;font-size:20px}.compare-card p{color:var(--muted);font-size:14px}
.compare-card ul{padding:0;margin:18px 0 0;list-style:none;display:grid;gap:9px;color:#555b69;font-size:13px}
.compare-card li:before{content:"✓";color:var(--accent-dark);font-weight:900;margin-right:8px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.milestone{position:relative;padding:25px 24px;border-top:2px solid #e4b3bf}
.milestone:before{content:"";position:absolute;top:-8px;left:24px;width:14px;height:14px;background:var(--accent);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #e4b3bf}
.milestone b{display:block;margin:7px 0;color:var(--accent-dark);font-size:13px}.milestone h3{margin:0 0 7px;font-size:18px}.milestone p{margin:0;color:var(--muted);font-size:13px}
.news-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
.news-lead{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.news-lead img{height:230px;border-radius:13px}
.news-lead h3{font-size:24px;line-height:1.4;margin:12px 0 8px}.news-lead p,.news-item p{color:var(--muted);font-size:13px}
.news-list{display:grid;gap:13px}
.news-item{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:10px;border-bottom:1px solid var(--line)}
.news-item img{height:72px;border-radius:10px}.news-item h3{margin:0;font-size:15px}.news-item p{margin:3px 0 0}
.assurance{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.assure{padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);background:var(--night-2)}
.assure .icon{color:#f2a9be;font-size:25px}.assure h3{margin:12px 0 6px;font-size:18px}.assure p{margin:0;color:#bfc0cb;font-size:13px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.faq{padding:22px 0;border-bottom:1px solid var(--line)}
.faq h3{margin:0 0 8px;font-size:17px}.faq p{margin:0;color:var(--muted);font-size:14px}
.cta{padding:54px 60px;border-radius:22px;color:#fff;background:var(--night);display:flex;justify-content:space-between;align-items:center;gap:28px}
.cta h2{margin:0 0 8px;font-size:31px}.cta p{margin:0;color:#c4c5cf}
footer{color:#d9d9e1;background:var(--night);padding:62px 0 24px}
.footer-main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
footer .brand-name{color:#fff}footer .brand-name small{color:#aaaebb}
footer .brand-mark{background:var(--accent)}
footer p{max-width:320px;color:#aaaebb;font-size:13px}
footer h3{margin:2px 0 14px;color:#fff;font-size:14px}
footer .footer-main a:not(.brand){display:block;color:#aaaebb;font-size:13px;margin:8px 0;transition:.2s}
footer .footer-main a:not(.brand):hover{color:#f4aec1}
.footer-bottom{margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:#9294a2;font-size:12px}
.footer-bottom span{color:#d5a1af}
:focus-visible{outline:3px solid rgba(229,109,143,.42);outline-offset:3px}
@media(max-width:1024px){
 .main-nav{gap:0}.main-nav a{padding:8px 8px}.nav-wrap{gap:15px}
 .hero-grid{gap:38px}.metric-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
 .container{width:min(var(--container),calc(100% - 32px))}
 .nav-wrap{min-height:68px;overflow-x:auto}.brand-name{font-size:14px}.main-nav{order:3;margin-left:0;flex:1;overflow-x:auto;white-space:nowrap}.nav-action{display:none}
 .hero{padding:54px 0 64px}.hero-grid,.matrix,.news-grid{grid-template-columns:1fr}.hero-copy{order:1}.cover-wrap{order:2;margin:0;max-width:none}.cover-wrap img{height:370px}
 .section{padding:64px 0}.section-head{display:block}.section-head p{margin-top:12px}.section-head h2{font-size:29px}
 .compare{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}.milestone{border-top:0;border-left:2px solid #e4b3bf}.milestone:before{top:25px;left:-8px}
 .news-lead{grid-template-columns:1fr}.news-lead img{height:220px}.assurance{grid-template-columns:1fr}.faq-grid{grid-template-columns:1fr}.cta{display:block;padding:36px 28px}.cta .btn{margin-top:22px}
 .footer-main{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:520px){
 .container{width:calc(100% - 28px)}.brand-name small{display:none}.main-nav a{font-size:12px;padding:7px 6px}
 .hero h1{font-size:43px}.hero-lead{font-size:15px}.hero-actions .btn{width:100%}
 .metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:18px 15px}.metric strong{font-size:25px}
 .topic-list,.timeline{grid-template-columns:1fr}.matrix-main,.matrix-side{padding:23px}.section-head h2{font-size:27px}
 .footer-main{grid-template-columns:1fr}.footer-bottom{margin-top:32px}
}