/* roulang page: index */
:root {
            --ink: #14212b;
            --muted: #687781;
            --soft: #f4f8f6;
            --paper: #ffffff;
            --line: #dce7e2;
            --green: #0b8069;
            --green-deep: #075447;
            --mint: #bde8d7;
            --yellow: #f4c95d;
            --coral: #e7745e;
            --radius-sm: 10px;
            --radius-md: 18px;
            --radius-lg: 30px;
            --shadow: 0 18px 50px rgba(20, 56, 45, .10);
            --shadow-small: 0 8px 24px rgba(20, 56, 45, .08);
            --container: 1180px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            letter-spacing: 0;
        }
        img { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; }
        button, input { font: inherit; }
        button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(244, 201, 93, .8); 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(--green);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--yellow);
        }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--ink); line-height: 1.22; }
        h1 { margin-bottom: 22px; font-size: clamp(38px, 5.4vw, 74px); letter-spacing: -.04em; }
        h2 { margin-bottom: 18px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; }
        h3 { margin-bottom: 10px; font-size: 21px; }
        .section { padding: 104px 0; }
        .section-soft { background: var(--soft); }
        .section-deep { color: #eaf7f1; background: var(--green-deep); }
        .section-deep h2, .section-deep h3 { color: #fff; }
        .section-head { max-width: 720px; margin-bottom: 42px; }
        .section-head p { color: var(--muted); margin-bottom: 0; }
        .section-deep .section-head p { color: #b9d7cd; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(255,255,255,.94);
            border-bottom: 1px solid rgba(220,231,226,.85);
            backdrop-filter: blur(16px);
        }
        .nav-shell {
            min-height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            color: var(--ink);
            font-weight: 900;
            font-size: 22px;
            letter-spacing: -.04em;
            white-space: nowrap;
        }
        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            color: var(--green-deep);
            background: var(--yellow);
            border-radius: 12px 12px 12px 4px;
            font-weight: 950;
        }
        .main-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
        .main-nav a {
            padding: 9px 15px;
            border-radius: 9px;
            color: var(--muted);
            font-size: 15px;
            font-weight: 700;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--green-deep); background: #eaf6f0; }
        .nav-action, .button-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 46px;
            padding: 0 20px;
            color: #fff !important;
            background: var(--green);
            border: 1px solid var(--green);
            border-radius: 999px;
            box-shadow: 0 7px 16px rgba(11,128,105,.18);
            font-size: 14px;
            font-weight: 800;
        }
        .nav-action:hover, .button-primary:hover { color: #fff; background: var(--green-deep); transform: translateY(-2px); }
        .nav-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 23px; }

        .hero {
            position: relative;
            min-height: 690px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background:
                linear-gradient(100deg, rgba(8,54,45,.92) 0%, rgba(8,54,45,.75) 42%, rgba(8,54,45,.25) 100%),
                url("https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1800&q=85") center/cover;
        }
        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 130px;
            background: linear-gradient(transparent, rgba(7,84,71,.35));
            pointer-events: none;
        }
        .hero-content { position: relative; z-index: 1; max-width: 760px; padding: 108px 0 140px; color: #fff; }
        .hero .eyebrow { color: var(--yellow); }
        .hero h1 { color: #fff; max-width: 720px; }
        .hero-copy { max-width: 680px; color: #d9eee7; font-size: 18px; line-height: 1.9; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
        .button-light {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 22px;
            border: 1px solid rgba(255,255,255,.55);
            border-radius: 999px;
            color: #fff;
            background: rgba(255,255,255,.11);
            font-weight: 800;
        }
        .button-light:hover { color: var(--green-deep); background: #fff; }
        .hero-strip {
            position: absolute;
            z-index: 2;
            bottom: 28px;
            left: 50%;
            width: min(var(--container), calc(100% - 48px));
            transform: translateX(-50%);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            padding: 18px 22px;
            color: #fff;
            background: rgba(8,49,42,.76);
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 16px;
            backdrop-filter: blur(12px);
        }
        .hero-stat { padding: 0 22px; border-right: 1px solid rgba(255,255,255,.2); }
        .hero-stat:last-child { border-right: 0; }
        .hero-stat strong { display: block; color: var(--yellow); font-size: 25px; line-height: 1.2; }
        .hero-stat span { color: #d2e9e1; font-size: 13px; }

        .catalog-nav {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 8px;
            scrollbar-width: thin;
        }
        .catalog-nav a {
            flex: 0 0 auto;
            padding: 10px 17px;
            color: var(--muted);
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 999px;
            font-size: 14px;
            font-weight: 700;
        }
        .catalog-nav a:hover, .catalog-nav a.active { color: #fff; background: var(--green); border-color: var(--green); }
        .feature-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 18px; }
        .feature-card {
            min-height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 28px;
            overflow: hidden;
            position: relative;
            border-radius: var(--radius-md);
            background: #fff;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-small);
        }
        .feature-card.large { min-height: 330px; color: #fff; background: linear-gradient(145deg, rgba(7,84,71,.92), rgba(18,112,91,.68)), url("https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=900&q=80") center/cover; }
        .feature-card.large h3, .feature-card.large p { color: #fff; }
        .feature-card i { position: absolute; top: 26px; right: 28px; color: var(--green); font-size: 29px; }
        .feature-card.large i { color: var(--yellow); }
        .feature-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
        .feature-card.large p { color: #d6ece4; }

        .recommend-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 62px; align-items: center; }
        .recommend-image {
            min-height: 420px;
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, rgba(8,84,71,.2), rgba(244,201,93,.14)), url("https://images.unsplash.com/photo-1551103782-8ab07afd45c1?auto=format&fit=crop&w=1000&q=85") center/cover;
            box-shadow: var(--shadow);
        }
        .check-list { margin: 24px 0 0; padding: 0; list-style: none; }
        .check-list li { display: flex; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
        .check-list i { margin-top: 6px; color: var(--green); }
        .content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .content-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
        .content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
        .content-thumb { height: 180px; background-position: center; background-size: cover; }
        .thumb-one { background-image: url("https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?auto=format&fit=crop&w=800&q=80"); }
        .thumb-two { background-image: url("https://images.unsplash.com/photo-1605870445919-838d190e8e1b?auto=format&fit=crop&w=800&q=80"); }
        .thumb-three { background-image: url("https://images.unsplash.com/photo-1600080972464-8e5f35f63d08?auto=format&fit=crop&w=800&q=80"); }
        .content-body { padding: 23px; }
        .content-body h3 { font-size: 19px; }
        .content-body p { color: var(--muted); font-size: 14px; margin-bottom: 0; }
        .text-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; color: var(--green); font-size: 14px; font-weight: 800; }
        .text-link:hover { color: var(--coral); gap: 11px; }

        .share-band { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; align-items: center; }
        .share-box { padding: 28px; color: var(--ink); background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-small); }
        .share-box strong { display: block; margin-bottom: 6px; font-size: 20px; }
        .share-box p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
        .share-icons { display: flex; justify-content: flex-end; gap: 10px; }
        .share-icons a { width: 46px; height: 46px; display: grid; place-items: center; color: var(--green); background: #eaf6f0; border-radius: 50%; }
        .share-icons a:hover { color: #fff; background: var(--green); transform: translateY(-3px); }

        .topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
        .topic-item { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
        .topic-item span { display: block; margin-bottom: 12px; color: var(--green); font-size: 23px; }
        .topic-item h3 { font-size: 17px; }
        .topic-item p { margin-bottom: 0; color: var(--muted); font-size: 13px; }

        .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .quote-card { position: relative; padding: 29px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-md); }
        .quote-card::before { content: "“"; position: absolute; right: 23px; top: 8px; color: var(--yellow); font: 700 55px Georgia, serif; opacity: .8; }
        .quote-card p { color: #d5ebe4; font-size: 15px; }
        .quote-card strong { color: #fff; font-size: 14px; }
        .stars { margin-bottom: 15px; color: var(--yellow); letter-spacing: 3px; }

        .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
        .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; border-top: 2px solid var(--mint); }
        .timeline-item { position: relative; padding: 53px 22px 0 0; }
        .timeline-item::before { content: ""; position: absolute; top: 9px; left: 0; width: 19px; height: 19px; background: var(--yellow); border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--green); }
        .timeline-item strong { display: block; margin-bottom: 8px; color: var(--green); }
        .timeline-item p { color: var(--muted); font-size: 14px; }

        .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .compare-card { padding: 31px; border-radius: var(--radius-md); border: 1px solid var(--line); }
        .compare-card.old { background: #fff8f5; }
        .compare-card.new { color: #eaf7f1; background: var(--green-deep); border-color: var(--green-deep); }
        .compare-card h3 { color: inherit; }
        .compare-card ul { margin: 0; padding-left: 20px; color: var(--muted); }
        .compare-card.new ul { color: #c8e2d9; }

        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .faq-item { padding: 24px 27px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
        .faq-item h3 { display: flex; gap: 12px; font-size: 17px; }
        .faq-item h3::before { content: "问"; flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; color: #fff; background: var(--coral); border-radius: 7px; font-size: 12px; }
        .faq-item p { margin: 0 0 0 38px; color: var(--muted); font-size: 14px; }

        .cta-section { padding: 84px 0; background: var(--yellow); }
        .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
        .cta-inner h2 { margin-bottom: 8px; font-size: 36px; }
        .cta-inner p { margin-bottom: 0; color: #5e5431; }
        .button-dark { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 23px; color: #fff; background: var(--green-deep); border-radius: 999px; font-weight: 800; white-space: nowrap; }
        .button-dark:hover { color: #fff; background: var(--ink); transform: translateY(-2px); }

        .site-footer { padding: 66px 0 25px; color: #b7d2c9; background: #0d3029; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 38px; padding-bottom: 48px; }
        .site-footer .brand { color: #fff; margin-bottom: 17px; }
        .footer-intro { max-width: 300px; color: #9fbeb4; font-size: 14px; }
        .footer-title { margin-bottom: 15px; color: #fff; font-size: 15px; font-weight: 800; }
        .footer-links { margin: 0; padding: 0; list-style: none; }
        .footer-links li { margin-bottom: 8px; }
        .footer-links a { color: #9fbeb4; font-size: 14px; }
        .footer-links a:hover { color: var(--yellow); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: #87a99e; font-size: 13px; }

        @media (max-width: 1024px) {
            .hero { min-height: 640px; }
            .feature-grid { grid-template-columns: 1fr 1fr; }
            .feature-card.large { grid-column: span 2; }
            .topic-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 34px, var(--container)); }
            .section { padding: 76px 0; }
            .nav-shell { min-height: 68px; }
            .nav-toggle { display: block; }
            .main-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 12px 17px 18px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-small); }
            .main-nav.is-open { display: grid; }
            .main-nav a { padding: 12px 14px; }
            .nav-action { display: none; }
            .hero { min-height: 680px; align-items: flex-start; }
            .hero-content { padding: 82px 0 190px; }
            .hero-copy { font-size: 16px; }
            .hero-strip { bottom: 22px; grid-template-columns: repeat(2, 1fr); gap: 13px 0; padding: 15px; }
            .hero-stat { padding: 0 13px; border-right: 0; }
            .hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.2); }
            .hero-stat:nth-child(-n+2) { padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.2); }
            .recommend-layout, .share-band { grid-template-columns: 1fr; gap: 30px; }
            .recommend-image { min-height: 300px; }
            .content-grid, .quote-grid { grid-template-columns: 1fr; }
            .timeline { grid-template-columns: 1fr 1fr; gap: 20px 0; }
            .timeline::before { display: none; }
            .timeline-item { padding-top: 37px; }
            .faq-grid { grid-template-columns: 1fr; }
            .share-icons { justify-content: flex-start; }
            .cta-inner { align-items: flex-start; flex-direction: column; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 520px) {
            h1 { font-size: 39px; }
            h2 { font-size: 32px; }
            .brand { font-size: 19px; }
            .brand-mark { width: 34px; height: 34px; }
            .hero { min-height: 720px; }
            .hero-strip { width: calc(100% - 34px); }
            .feature-grid, .topic-grid, .compare { grid-template-columns: 1fr; }
            .feature-card.large { grid-column: auto; }
            .feature-card { min-height: 215px; }
            .timeline { grid-template-columns: 1fr; }
            .timeline-item { padding-top: 36px; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
            .footer-bottom { align-items: flex-start; flex-direction: column; }
        }

/* roulang page: category1 */
:root {
      --ink:#14212b;--muted:#687781;--soft:#f4f8f6;--paper:#fff;--line:#dce7e2;
      --green:#0b8069;--green-deep:#075447;--mint:#bde8d7;--yellow:#f4c95d;
      --coral:#e7745e;--radius-sm:10px;--radius-md:18px;--radius-lg:30px;
      --shadow:0 18px 50px rgba(20,56,45,.10);--shadow-small:0 8px 24px rgba(20,56,45,.08);
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.75;letter-spacing:0}
    h1,h2,h3,h4,p{margin-top:0}
    h1,h2,h3,h4{line-height:1.25;letter-spacing:-.025em}
    h1{font-size:clamp(42px,5vw,72px);margin-bottom:22px}
    h2{font-size:clamp(30px,3.4vw,48px);margin-bottom:18px}
    h3{font-size:22px;margin-bottom:12px}
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none;transition:color .25s ease,background .25s ease,transform .25s ease,box-shadow .25s ease}
    button,input{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(244,201,93,.8);outline-offset:3px}
    .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,.95);border-bottom:1px solid rgba(220,231,226,.85);backdrop-filter:blur(16px)}
    .nav-shell{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);font-weight:900;font-size:22px;letter-spacing:-.04em;white-space:nowrap}
    .brand-mark{width:38px;height:38px;display:grid;place-items:center;color:var(--green-deep);background:var(--yellow);border-radius:12px 12px 12px 4px;font-weight:950}
    .main-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
    .main-nav a{padding:9px 15px;border-radius:9px;color:var(--muted);font-size:15px;font-weight:700}
    .main-nav a:hover,.main-nav a.active{color:var(--green-deep);background:#eaf6f0}
    .nav-action,.button-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;color:#fff!important;background:var(--green);border:1px solid var(--green);border-radius:999px;box-shadow:0 7px 16px rgba(11,128,105,.18);font-size:14px;font-weight:800}
    .nav-action:hover,.button-primary:hover{background:var(--green-deep);transform:translateY(-2px)}
    .nav-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:23px}
    .section{padding:104px 0}.section-soft{background:var(--soft)}.section-deep{color:#eaf7f1;background:var(--green-deep)}
    .section-deep h2,.section-deep h3{color:#fff}
    .section-head{max-width:730px;margin-bottom:42px}.section-head p{color:var(--muted);margin-bottom:0}
    .section-deep .section-head p{color:#b9d7cd}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
    .eyebrow:before{content:"";width:24px;height:2px;background:var(--yellow)}
    .hero-category{padding:92px 0 86px;background:linear-gradient(135deg,#f5fbf8 0%,#edf7f1 58%,#fff8e2 100%);overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);align-items:center;gap:70px}
    .hero-category h1{max-width:650px;color:var(--green-deep)}
    .hero-copy{max-width:650px;color:var(--muted);font-size:18px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
    .button-outline{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border:1px solid var(--green);border-radius:999px;color:var(--green-deep);font-weight:800}
    .button-outline:hover{color:#fff;background:var(--green);transform:translateY(-2px)}
    .coupon-wall{position:relative;padding:27px;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)}
    .coupon-wall:before{content:"";position:absolute;inset:14px;border:1px dashed #b8d8ca;border-radius:18px;pointer-events:none}
    .coupon-top{position:relative;display:flex;justify-content:space-between;align-items:center;color:var(--green);font-size:13px;font-weight:800;letter-spacing:.08em}
    .coupon-main{position:relative;margin:24px 0;padding:28px 25px;color:#fff;background:var(--green-deep);border-radius:18px;overflow:hidden}
    .coupon-main:after{content:"PG";position:absolute;right:18px;bottom:-20px;color:rgba(255,255,255,.08);font-size:110px;font-weight:950;line-height:1}
    .coupon-main h2{position:relative;max-width:330px;color:#fff;font-size:36px;margin-bottom:9px}
    .coupon-main p{position:relative;max-width:310px;color:#c9e8dc;margin-bottom:0}
    .coupon-meta{position:relative;display:flex;justify-content:space-between;gap:14px;padding:0 4px 20px;color:var(--muted);font-size:13px}
    .coupon-meta strong{display:block;color:var(--ink);font-size:18px}
    .coupon-button{position:relative;width:100%;border:0;cursor:pointer}
    .metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:58px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
    .metric{padding:22px 24px;background:#fff}.metric strong{display:block;color:var(--green-deep);font-size:28px;line-height:1.2}.metric span{color:var(--muted);font-size:14px}
    .matrix{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px}
    .matrix-feature{grid-row:span 2;padding:32px;background:var(--green-deep);border-radius:var(--radius-md);color:#eaf7f1}
    .matrix-feature h3{color:#fff;font-size:28px}.matrix-feature p{color:#b9d7cd}
    .matrix-feature ul{margin:28px 0 0;padding:0;list-style:none}.matrix-feature li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}
    .matrix-feature li i{margin-right:10px;color:var(--yellow)}
    .info-card{padding:27px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-small);transition:transform .25s,box-shadow .25s}
    .info-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .icon-box{width:44px;height:44px;display:grid;place-items:center;margin-bottom:18px;color:var(--green-deep);background:#e5f5ed;border-radius:12px;font-size:19px}
    .info-card p{color:var(--muted);font-size:15px;margin-bottom:0}
    .compare-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:start}
    .compare-note{padding:28px 30px;background:#fff7dc;border-left:4px solid var(--yellow);border-radius:0 16px 16px 0;color:#5e5332}
    .compare-note strong{display:block;color:var(--ink);font-size:21px;margin-bottom:8px}
    .compare-list{border-top:1px solid var(--line)}
    .compare-item{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:19px 0;border-bottom:1px solid var(--line)}
    .compare-item span{color:var(--muted)}.compare-item strong{color:var(--green-deep)}
    .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.22)}
    .timeline-item{position:relative;padding:34px 28px 8px;border-right:1px solid rgba(255,255,255,.18)}
    .timeline-item:last-child{border-right:0}.timeline-item:before{content:"";position:absolute;top:-7px;left:28px;width:13px;height:13px;background:var(--yellow);border:3px solid var(--green-deep);border-radius:50%}
    .timeline-item small{color:var(--yellow);font-weight:800}.timeline-item h3{margin-top:13px}.timeline-item p{color:#b9d7cd;font-size:15px}
    .updates-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
    .update-main{min-height:310px;padding:34px;color:#fff;background:linear-gradient(135deg,rgba(7,84,71,.9),rgba(11,128,105,.78)),url("https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&w=1000&q=80") center/cover;border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:flex-end}
    .update-main h3{color:#fff;font-size:30px}.update-main p{max-width:570px;color:#d8eee5}
    .update-list{padding:11px 27px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md)}
    .update-list a{display:grid;grid-template-columns:82px 1fr;gap:17px;padding:17px 0;border-bottom:1px solid var(--line)}
    .update-list a:last-child{border-bottom:0}.update-list time{color:var(--green);font-size:13px;font-weight:800}.update-list strong{font-size:15px}.update-list a:hover strong{color:var(--green)}
    .security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.security-card{padding:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-md)}.security-card p{color:#b9d7cd;font-size:15px;margin-bottom:0}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.faq-item{padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md)}.faq-item h3{display:flex;gap:12px;font-size:18px}.faq-item h3 i{color:var(--coral);font-size:15px;margin-top:5px}.faq-item p{color:var(--muted);font-size:15px;margin:0}
    .cta-band{padding:70px 0;background:#fff7dc}.cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px}.cta-wrap p{max-width:620px;color:var(--muted);margin-bottom:0}
    .site-footer{padding:72px 0 24px;color:#c7ddd4;background:#103f36}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:45px}.site-footer .brand{color:#fff}.footer-intro{max-width:300px;margin:21px 0 0;color:#a9c8bc;font-size:14px}.footer-title{margin-bottom:16px;color:#fff;font-weight:800}.footer-links{margin:0;padding:0;list-style:none}.footer-links li{margin:8px 0}.footer-links a{color:#a9c8bc;font-size:14px}.footer-links a:hover{color:var(--yellow)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:54px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);color:#91b5a8;font-size:13px}
    @media(max-width:1024px){.hero-grid{gap:38px}.matrix{grid-template-columns:1fr 1fr}.matrix-feature{grid-row:auto;grid-column:span 2}.compare-layout{gap:30px}.footer-grid{grid-template-columns:1.3fr repeat(3,1fr);gap:25px}}
    @media(max-width:768px){.container{width:min(var(--container),calc(100% - 32px))}.nav-shell{min-height:70px}.nav-toggle{display:block;order:2}.main-nav{display:none;position:absolute;top:70px;left:16px;right:16px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.is-open{display:flex}.main-nav a{padding:12px 15px}.nav-action{display:none}.hero-category{padding:66px 0}.hero-grid,.compare-layout,.updates-grid{grid-template-columns:1fr}.coupon-wall{max-width:560px}.section{padding:74px 0}.metric-row{grid-template-columns:repeat(2,1fr);margin-top:40px}.timeline{grid-template-columns:1fr}.timeline-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding-left:28px}.security-grid,.faq-grid{grid-template-columns:1fr}.cta-wrap{display:block}.cta-wrap .button-primary{margin-top:24px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:span 2}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}}
    @media(max-width:520px){h1{font-size:40px}.hero-copy{font-size:16px}.hero-actions a{width:100%}.coupon-main h2{font-size:30px}.matrix{grid-template-columns:1fr}.matrix-feature{grid-column:auto}.metric{padding:18px 15px}.metric strong{font-size:23px}.compare-item{grid-template-columns:1fr;gap:3px}.update-list a{grid-template-columns:1fr;gap:2px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}}