/* roulang page: index */
:root {
            --ink: #171b1b;
            --ink-soft: #242b2a;
            --paper: #f5f3ee;
            --paper-deep: #e9e7e0;
            --white: #fffefa;
            --teal: #9fe4c5;
            --teal-deep: #237d65;
            --orange: #ef9c54;
            --muted: #69716e;
            --line: #d8d9d2;
            --line-dark: #3c4541;
            --radius-lg: 18px;
            --radius-md: 12px;
            --radius-sm: 8px;
            --shadow: 0 16px 34px rgba(23, 27, 27, .08);
            --shadow-dark: 0 18px 36px rgba(0, 0, 0, .2);
            --container: 1240px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background: var(--paper);
            color: var(--ink);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { border: 0; cursor: pointer; }
        :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .eyebrow {
            color: var(--teal-deep);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }
        .section { padding: 88px 0; }
        .section-heading {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 28px;
            margin-bottom: 34px;
        }
        .section-heading h2 {
            max-width: 650px;
            font-size: clamp(28px, 4vw, 46px);
            line-height: 1.18;
            letter-spacing: 0;
        }
        .section-heading p { max-width: 410px; color: var(--muted); }
        .section-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--teal-deep);
            font-size: 14px;
            font-weight: 800;
            white-space: nowrap;
        }
        .section-link:hover { color: var(--orange); }
        .topbar {
            background: var(--ink);
            color: #f5f8f1;
            border-bottom: 1px solid #303936;
        }
        .nav-wrap {
            min-height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: 230px;
        }
        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border: 1px solid var(--teal);
            border-radius: 50%;
            color: var(--teal);
            font-size: 20px;
            line-height: 1;
        }
        .brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
        .brand-copy strong { font-size: 16px; font-weight: 800; }
        .brand-copy span { margin-top: 4px; color: #aeb9b2; font-size: 11px; }
        .main-nav { display: flex; align-items: center; gap: 4px; }
        .main-nav a {
            position: relative;
            padding: 27px 14px 24px;
            color: #c8d0ca;
            font-size: 14px;
            white-space: nowrap;
            transition: color .2s ease;
        }
        .main-nav a::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 15px;
            height: 2px;
            background: var(--teal);
            transform: scaleX(0);
            transition: transform .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: #fff; }
        .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
        .header-actions { display: flex; align-items: center; gap: 10px; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 46px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 9px;
            font-size: 14px;
            font-weight: 800;
            transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn-primary { background: var(--teal); color: var(--ink); }
        .btn-primary:hover { background: #c0f1d8; }
        .btn-dark { background: var(--ink); color: #fff; }
        .btn-dark:hover { background: var(--teal-deep); }
        .btn-outline { border-color: #69746e; color: #edf6ef; }
        .btn-outline:hover { border-color: var(--teal); color: var(--teal); }
        .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid #55615b; border-radius: 8px; background: transparent; color: #fff; font-size: 23px; }
        .notice-bar { background: #222927; color: #cad2cc; border-bottom: 1px solid #3a4540; }
        .notice-inner { display: flex; align-items: center; min-height: 38px; gap: 12px; font-size: 12px; }
        .notice-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(159, 228, 197, .12); }
        .notice-label { color: var(--teal); font-weight: 800; }
        .hero {
            position: relative;
            min-height: 600px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--ink);
            color: #fff;
        }
        .hero::before, .hero::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }
        .hero::before {
            width: 52vw;
            height: 52vw;
            right: -17vw;
            top: -22vw;
            border: 1px solid rgba(159, 228, 197, .17);
            border-radius: 50%;
            box-shadow: 0 0 0 46px rgba(159, 228, 197, .035), 0 0 0 92px rgba(159, 228, 197, .025);
        }
        .hero::after {
            right: 7%;
            bottom: 16%;
            width: 170px;
            height: 170px;
            border: 1px solid rgba(239, 156, 84, .32);
            transform: rotate(45deg);
        }
        .hero .container { position: relative; z-index: 1; }
        .hero-content { max-width: 820px; padding: 78px 0 48px; }
        .hero .eyebrow { color: var(--teal); margin-bottom: 18px; }
        .hero h1 {
            max-width: 900px;
            font-size: clamp(38px, 6vw, 76px);
            line-height: 1.08;
            letter-spacing: 0;
            font-weight: 850;
        }
        .hero h1 em { color: var(--teal); font-style: normal; }
        .hero-lead {
            max-width: 650px;
            margin-top: 25px;
            color: #c9d2cb;
            font-size: 18px;
            line-height: 1.9;
        }
        .hero-actions { display: flex; gap: 12px; margin-top: 34px; }
        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 22px;
            margin-top: 52px;
            padding-top: 22px;
            border-top: 1px solid #3a4540;
            color: #aebbb2;
            font-size: 13px;
        }
        .hero-meta strong { display: block; color: #fff; font-size: 20px; }
        .hero-board {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 360px;
            padding: 22px;
            background: #232b28;
            border: 1px solid #46534c;
            border-bottom: 0;
            border-radius: 18px 18px 0 0;
            box-shadow: var(--shadow-dark);
        }
        .board-head { display: flex; justify-content: space-between; color: #c6d0c8; font-size: 12px; }
        .live-tag { color: var(--teal); font-weight: 800; }
        .board-title { margin: 24px 0 16px; font-size: 22px; font-weight: 800; }
        .board-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 0;
            border-top: 1px solid #3c4741;
            color: #d9e0da;
            font-size: 13px;
        }
        .board-row span:first-child { color: #a7b3aa; }
        .board-row b { color: var(--orange); font-weight: 800; }
        .hero-strip {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 8px;
            background: var(--teal);
        }
        .entry-section { padding: 72px 0 82px; }
        .entry-grid { display: grid; grid-template-columns: 1.25fr .9fr .9fr; gap: 14px; }
        .entry-item {
            min-height: 170px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: var(--white);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .entry-item:first-child { grid-row: span 2; min-height: 354px; background: var(--ink); color: #fff; }
        .entry-item:nth-child(5) { grid-column: span 2; }
        .entry-item:hover { transform: translateY(-4px); border-color: var(--teal-deep); box-shadow: var(--shadow); }
        .entry-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        .entry-tag, .pill {
            display: inline-flex;
            width: fit-content;
            align-items: center;
            min-height: 25px;
            padding: 2px 9px;
            border-radius: 99px;
            background: #e0f3e9;
            color: var(--teal-deep);
            font-size: 11px;
            font-weight: 800;
        }
        .entry-item:first-child .entry-tag { background: #334f45; color: var(--teal); }
        .entry-arrow { font-size: 22px; color: var(--orange); }
        .entry-item h3 { margin-top: 22px; font-size: 22px; line-height: 1.3; }
        .entry-item:not(:first-child) h3 { font-size: 18px; }
        .entry-item p { margin-top: 8px; color: var(--muted); font-size: 13px; }
        .entry-item:first-child p { color: #b9c7be; }
        .timeline-section { background: #ebe9e2; }
        .timeline { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #b9bdb5; }
        .timeline-item { position: relative; min-height: 220px; padding: 28px 24px 20px 0; border-right: 1px solid #c9cbc4; }
        .timeline-item:not(:first-child) { padding-left: 24px; }
        .timeline-item:last-child { border-right: 0; }
        .timeline-item::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--teal-deep); }
        .timeline-item:not(:first-child)::before { left: 24px; }
        .timeline-time { color: var(--teal-deep); font-size: 13px; font-weight: 850; }
        .timeline-item h3 { margin-top: 20px; font-size: 20px; line-height: 1.35; }
        .timeline-item p { margin-top: 10px; color: var(--muted); font-size: 13px; }
        .status { display: inline-flex; margin-top: 20px; color: #68716c; font-size: 12px; font-weight: 700; }
        .status::before { content: ""; width: 6px; height: 6px; margin: 8px 7px 0 0; border-radius: 50%; background: var(--orange); }
        .feature-section { background: var(--paper); }
        .feature-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
        .feature-main {
            min-height: 410px;
            position: relative;
            display: flex;
            align-items: end;
            padding: 34px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            background: #2b3935;
            color: #fff;
        }
        .feature-main::before {
            content: "FOOTBALL";
            position: absolute;
            right: -8px;
            top: 42px;
            color: rgba(159, 228, 197, .14);
            font-size: 84px;
            font-weight: 900;
            letter-spacing: 0;
            transform: rotate(-90deg);
        }
        .feature-main > div { position: relative; z-index: 1; max-width: 520px; }
        .feature-main .pill { background: var(--teal); color: var(--ink); }
        .feature-main h3 { margin-top: 18px; font-size: clamp(28px, 4vw, 43px); line-height: 1.15; }
        .feature-main p { margin-top: 15px; color: #c8d5ce; }
        .feature-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
        .feature-list a {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px 0 20px 25px;
            border-bottom: 1px solid var(--line);
            transition: padding .2s ease, color .2s ease;
        }
        .feature-list a:hover { padding-left: 33px; color: var(--teal-deep); }
        .feature-list small { color: var(--muted); font-size: 12px; }
        .feature-list h4 { margin-top: 9px; font-size: 18px; line-height: 1.4; }
        .basket-section { background: var(--white); }
        .basket-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: stretch; }
        .basket-intro { padding: 26px 0; }
        .basket-intro h2 { margin-top: 12px; font-size: clamp(30px, 4vw, 50px); line-height: 1.15; }
        .basket-intro p { margin-top: 18px; color: var(--muted); }
        .topic-list { margin-top: 28px; display: grid; gap: 12px; }
        .topic-list li { display: flex; align-items: center; gap: 12px; list-style: none; font-size: 14px; }
        .topic-list li::before { content: "↗"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e0f3e9; color: var(--teal-deep); }
        .scoreboard { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 28px; }
        .scoreboard-head { display: flex; justify-content: space-between; color: #b4c1b9; font-size: 13px; }
        .score-line { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; gap: 16px; padding: 36px 0; border-bottom: 1px solid #39433f; text-align: center; }
        .team { font-size: 18px; font-weight: 800; }
        .team:first-child { text-align: right; }
        .team:last-child { text-align: left; }
        .score-placeholder { color: var(--orange); font-size: 13px; line-height: 1.3; }
        .score-foot { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 22px; }
        .score-foot span { padding: 7px 11px; border: 1px solid #45524b; border-radius: 6px; color: #c4d0c7; font-size: 12px; }
        .esports-section { background: var(--ink-soft); color: #fff; }
        .esports-section .section-heading p { color: #aebbb2; }
        .esports-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 18px; }
        .esports-title { padding: 30px; border: 1px solid #46534c; border-radius: var(--radius-md); }
        .esports-title h3 { margin-top: 24px; font-size: 34px; line-height: 1.25; }
        .esports-title p { margin-top: 15px; color: #adbbb2; font-size: 14px; }
        .esports-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .esports-card { padding: 23px; border: 1px solid #46534c; border-radius: var(--radius-md); background: #2a3430; transition: border-color .2s ease, transform .2s ease; }
        .esports-card:hover { transform: translateY(-3px); border-color: var(--teal); }
        .esports-card .pill { background: #3d5148; color: var(--teal); }
        .esports-card h4 { margin-top: 17px; font-size: 17px; line-height: 1.45; }
        .esports-card small { display: block; margin-top: 15px; color: #94a49a; }
        .latest-section { background: var(--paper); }
        .latest-layout { display: grid; grid-template-columns: 1.45fr .55fr; gap: 42px; }
        .news-list { border-top: 2px solid var(--ink); }
        .news-item {
            display: grid;
            grid-template-columns: 96px 1fr 30px;
            align-items: center;
            gap: 20px;
            min-height: 112px;
            border-bottom: 1px solid var(--line);
            transition: padding .2s ease, background .2s ease;
        }
        .news-item:hover { padding-left: 12px; background: rgba(255, 254, 250, .8); }
        .news-date { color: var(--muted); font-size: 12px; }
        .news-date strong { display: block; color: var(--ink); font-size: 18px; }
        .news-content h3 { font-size: 17px; line-height: 1.4; }
        .news-content p { overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
        .news-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
        .news-arrow { color: var(--orange); font-size: 21px; }
        .focus-box { padding: 24px; border-left: 3px solid var(--orange); background: #ebe9e2; }
        .focus-box h3 { font-size: 21px; }
        .focus-box p { margin-top: 12px; color: var(--muted); font-size: 13px; }
        .focus-index { display: grid; gap: 14px; margin-top: 24px; }
        .focus-index a { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #d2d1ca; color: #4d5751; font-size: 13px; }
        .focus-index a:hover { color: var(--teal-deep); }
        .calendar-section { background: var(--white); }
        .calendar-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
        .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
        .filter {
            padding: 9px 15px;
            border: 1px solid var(--line);
            border-radius: 99px;
            background: transparent;
            color: var(--muted);
            font-size: 13px;
            transition: .2s ease;
        }
        .filter:hover, .filter.active { border-color: var(--teal-deep); background: #e0f3e9; color: var(--teal-deep); }
        .calendar-list { border-top: 1px solid var(--ink); }
        .calendar-row { display: grid; grid-template-columns: 120px 100px 1fr 110px; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
        .calendar-row time { font-weight: 800; }
        .calendar-row .sport { color: var(--teal-deep); font-size: 13px; font-weight: 800; }
        .calendar-row h3 { font-size: 16px; }
        .calendar-row .status { margin: 0; justify-self: end; }
        .calendar-row .status::before { background: var(--teal-deep); }
        .data-section { background: #deded6; }
        .data-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid #c5c7be; border-radius: var(--radius-md); background: #c5c7be; }
        .data-cell { min-height: 155px; padding: 25px; background: var(--paper); }
        .data-cell small { color: var(--muted); font-size: 12px; }
        .data-number { display: block; margin-top: 13px; font-size: 36px; font-weight: 850; line-height: 1; }
        .data-cell p { margin-top: 12px; color: var(--muted); font-size: 13px; }
        .data-note { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 18px; color: var(--muted); font-size: 13px; }
        .download-section { padding: 92px 0; background: var(--ink); color: #fff; }
        .download-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; }
        .download-copy h2 { margin-top: 13px; font-size: clamp(32px, 4vw, 58px); line-height: 1.12; }
        .download-copy > p { max-width: 510px; margin-top: 19px; color: #bdc9c1; }
        .device-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
        .device-tags span { padding: 7px 12px; border: 1px solid #4a574f; border-radius: 6px; color: #cbd8ce; font-size: 12px; }
        .download-panel { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; padding: 27px; border: 1px solid #46534c; border-radius: var(--radius-lg); background: #242d29; }
        .qr-placeholder { aspect-ratio: 1; display: grid; place-items: center; border: 10px solid #fff; background: repeating-linear-gradient(45deg, #202725 0 4px, #fff 4px 8px); color: var(--ink); }
        .qr-placeholder span { padding: 6px; background: #fff; font-size: 11px; font-weight: 800; }
        .download-panel h3 { font-size: 23px; }
        .download-panel p { margin-top: 8px; color: #aebcb2; font-size: 13px; }
        .download-panel .btn { margin-top: 18px; }
        .guide-section { background: var(--paper); }
        .guide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
        .guide-step { min-height: 190px; padding: 26px 23px 20px 0; border-bottom: 1px solid var(--line); }
        .guide-step:not(:first-child) { padding-left: 23px; border-left: 1px solid var(--line); }
        .step-no { color: var(--orange); font-size: 13px; font-weight: 850; }
        .guide-step h3 { margin-top: 27px; font-size: 18px; }
        .guide-step p { margin-top: 8px; color: var(--muted); font-size: 13px; }
        .announcement-section { background: #ebe9e2; }
        .announcement-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .announcement { padding: 23px; border: 1px solid #d0d1c9; border-radius: var(--radius-md); background: var(--paper); }
        .announcement-top { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
        .announcement h3 { margin-top: 22px; font-size: 17px; line-height: 1.45; }
        .announcement p { margin-top: 9px; color: var(--muted); font-size: 13px; }
        .faq-section { background: var(--white); }
        .faq-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--ink); }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; background: transparent; color: var(--ink); text-align: left; font-size: 17px; font-weight: 800; }
        .faq-question span:last-child { color: var(--teal-deep); font-size: 24px; font-weight: 400; transition: transform .2s ease; }
        .faq-answer { display: none; max-width: 760px; padding: 0 40px 22px 0; color: var(--muted); font-size: 14px; }
        .faq-item.open .faq-answer { display: block; }
        .faq-item.open .faq-question span:last-child { transform: rotate(45deg); }
        .final-cta { padding: 62px 0; background: var(--orange); color: var(--ink); }
        .final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .final-cta h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.2; }
        .final-cta p { margin-top: 8px; color: #57351f; }
        .cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
        .final-cta .btn-dark:hover { background: #fff; color: var(--ink); }
        footer { padding: 58px 0 24px; background: var(--ink); color: #c6d0c8; }
        .footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr .9fr; gap: 45px; padding-bottom: 48px; border-bottom: 1px solid #3a4540; }
        .footer-brand .brand { min-width: 0; color: #fff; }
        .footer-brand p { max-width: 300px; margin-top: 19px; color: #9eaba2; font-size: 13px; }
        .footer-title { margin-bottom: 17px; color: #fff; font-size: 14px; font-weight: 800; }
        .footer-links { display: grid; gap: 10px; }
        .footer-links a { color: #aebbb2; font-size: 13px; }
        .footer-links a:hover { color: var(--teal); }
        .support-box { padding: 17px; border: 1px solid #46534c; border-radius: var(--radius-sm); }
        .support-box strong { display: block; color: var(--teal); font-size: 15px; }
        .support-box span { display: block; margin-top: 6px; color: #aebbb2; font-size: 12px; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; color: #89958c; font-size: 12px; }
        .footer-bottom a { color: #aebbb2; }
        .footer-bottom a:hover { color: var(--teal); }
        @media (max-width: 1024px) {
            .main-nav a { padding-left: 9px; padding-right: 9px; font-size: 13px; }
            .main-nav a::after { left: 9px; right: 9px; }
            .brand { min-width: 205px; }
            .hero-board { right: 24px; width: 310px; }
            .entry-grid { grid-template-columns: 1fr 1fr; }
            .entry-item:first-child { grid-row: auto; min-height: 250px; }
            .entry-item:nth-child(5) { grid-column: auto; }
            .latest-layout, .download-layout { gap: 28px; }
            .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
            .footer-grid > :last-child { grid-column: span 3; }
        }
        @media (max-width: 768px) {
            .container { width: min(var(--container), calc(100% - 32px)); }
            .section { padding: 62px 0; }
            .nav-wrap { min-height: 68px; }
            .header-actions .btn { display: none; }
            .menu-toggle { display: block; }
            .main-nav {
                position: absolute;
                z-index: 10;
                top: 68px;
                left: 16px;
                right: 16px;
                display: none;
                padding: 8px;
                border: 1px solid #46534c;
                border-radius: 10px;
                background: var(--ink-soft);
                box-shadow: var(--shadow-dark);
            }
            .main-nav.open { display: grid; }
            .main-nav a { padding: 13px 14px; border-radius: 6px; }
            .main-nav a::after { display: none; }
            .main-nav a:hover, .main-nav a.active { background: #33413b; color: var(--teal); }
            .notice-inner { min-height: 42px; }
            .hero { min-height: auto; }
            .hero-content { padding: 68px 0 54px; }
            .hero h1 { font-size: clamp(38px, 11vw, 61px); }
            .hero-lead { font-size: 16px; }
            .hero-board { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 34px; }
            .hero-meta { margin-top: 34px; }
            .section-heading { display: block; margin-bottom: 27px; }
            .section-heading p { margin-top: 13px; }
            .section-heading .section-link { margin-top: 17px; }
            .entry-grid, .feature-layout, .basket-layout, .esports-layout, .latest-layout, .download-layout { grid-template-columns: 1fr; }
            .entry-item:first-child { min-height: 230px; }
            .timeline { display: flex; overflow-x: auto; }
            .timeline-item { min-width: 245px; }
            .timeline-item:last-child { padding-right: 0; }
            .feature-main { min-height: 330px; }
            .feature-list a { min-height: 108px; }
            .esports-list { grid-template-columns: 1fr 1fr; }
            .news-item { grid-template-columns: 74px 1fr 20px; gap: 12px; }
            .news-content p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
            .calendar-row { grid-template-columns: 90px 72px 1fr; gap: 12px; }
            .calendar-row .status { grid-column: 3; justify-self: start; margin-top: -10px; }
            .data-strip { grid-template-columns: 1fr 1fr; }
            .download-panel { max-width: 620px; }
            .guide-grid { grid-template-columns: 1fr 1fr; }
            .guide-step:nth-child(3) { border-left: 0; }
            .announcement-list { grid-template-columns: 1fr; }
            .final-cta-inner { display: block; }
            .cta-actions { margin-top: 24px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
            .footer-grid > :last-child { grid-column: span 2; }
            .footer-bottom { display: block; }
            .footer-bottom p + p { margin-top: 8px; }
        }
        @media (max-width: 520px) {
            .hero-actions, .cta-actions { display: grid; grid-template-columns: 1fr; }
            .hero-actions .btn, .cta-actions .btn { width: 100%; }
            .hero-board { padding: 18px; }
            .entry-grid { grid-template-columns: 1fr; }
            .entry-item:first-child { min-height: 210px; }
            .esports-list { grid-template-columns: 1fr; }
            .score-line { grid-template-columns: 1fr 66px 1fr; gap: 8px; }
            .team { font-size: 15px; }
            .download-panel { grid-template-columns: 1fr; }
            .qr-placeholder { width: 145px; }
            .guide-grid { grid-template-columns: 1fr; }
            .guide-step, .guide-step:not(:first-child) { min-height: auto; padding: 22px 0; border-left: 0; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-grid > :last-child { grid-column: auto; }
        }

/* roulang page: article */
:root {
            --ink:#171b1b;
            --ink-soft:#242b2a;
            --paper:#f5f3ee;
            --paper-deep:#e9e7e0;
            --white:#fffefa;
            --teal:#9fe4c5;
            --teal-deep:#237d65;
            --orange:#ef9c54;
            --muted:#69716e;
            --line:#d8d9d2;
            --line-dark:#3c4541;
            --radius-lg:18px;
            --radius-md:12px;
            --radius-sm:8px;
            --shadow:0 16px 34px rgba(23,27,27,.08);
            --shadow-dark:0 18px 36px rgba(0,0,0,.2);
            --container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:var(--paper);
            color:var(--ink);
            font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
            font-size:16px;
            line-height:1.7;
            overflow-x:hidden;
        }
        a{color:inherit;text-decoration:none}
        a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{border:0;cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .topbar{background:var(--ink);color:#f5f8f1;border-bottom:1px solid #303936}
        .nav-wrap{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
        .brand{display:inline-flex;align-items:center;gap:12px;min-width:230px}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--teal);border-radius:50%;color:var(--teal);font-size:20px;line-height:1}
        .brand-copy{display:flex;flex-direction:column;line-height:1.2}
        .brand-copy strong{font-size:16px;font-weight:800}
        .brand-copy span{margin-top:4px;color:#aeb9b2;font-size:11px}
        .main-nav{display:flex;align-items:center;gap:4px}
        .main-nav a{position:relative;padding:27px 14px 24px;color:#c8d0ca;font-size:14px;white-space:nowrap;transition:color .2s ease}
        .main-nav a:after{content:"";position:absolute;left:14px;right:14px;bottom:15px;height:2px;background:var(--teal);transform:scaleX(0);transition:transform .2s ease}
        .main-nav a:hover,.main-nav a.active{color:#fff}
        .main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
        .header-actions{display:flex;align-items:center;gap:10px}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
        .btn:hover{transform:translateY(-2px)}
        .btn-primary{background:var(--teal);color:var(--ink)}
        .btn-primary:hover{background:#c0f1d8}
        .btn-dark{background:var(--ink);color:#fff}
        .btn-dark:hover{background:var(--teal-deep)}
        .btn-outline{border-color:#69746e;color:#edf6ef}
        .btn-outline:hover{border-color:var(--teal);color:var(--teal)}
        .menu-toggle{display:none;width:44px;height:44px;border:1px solid #55615b;border-radius:8px;background:transparent;color:#fff;font-size:23px}
        .notice-bar{background:var(--ink-soft);color:#bac5be;font-size:13px}
        .notice-inner{min-height:36px;display:flex;align-items:center;gap:10px}
        .notice-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(159,228,197,.12)}
        .article-head{padding:74px 0 58px;background:var(--white);border-bottom:1px solid var(--line)}
        .breadcrumbs{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin-bottom:28px;flex-wrap:wrap}
        .breadcrumbs a:hover{color:var(--teal-deep)}
        .crumb-sep{color:#a5aca7}
        .category-tag,.article-label{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;background:#e2f5eb;color:var(--teal-deep);font-size:12px;font-weight:800}
        .article-head h1{max-width:900px;margin:16px 0 20px;font-size:clamp(32px,5vw,62px);line-height:1.18;letter-spacing:-1px;font-weight:850}
        .article-intro{max-width:780px;color:var(--muted);font-size:18px}
        .article-meta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px;color:var(--muted);font-size:13px}
        .meta-item{display:inline-flex;align-items:center;gap:7px}
        .meta-item strong{color:var(--ink);font-weight:700}
        .article-layout{display:grid;grid-template-columns:minmax(0,820px) 280px;gap:64px;align-items:start;padding:76px 0 88px}
        .article-content{min-width:0;background:var(--white);padding:clamp(26px,4vw,58px);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
        .article-content:after{content:"";display:block;clear:both}
        .article-content h2{margin:34px 0 14px;font-size:30px;line-height:1.3}
        .article-content h3{margin:28px 0 12px;font-size:22px;line-height:1.4}
        .article-content p{margin:0 0 20px;color:#39413e}
        .article-content ul,.article-content ol{margin:14px 0 24px;padding-left:1.5em;color:#39413e}
        .article-content li{margin:8px 0}
        .article-content blockquote{margin:28px 0;padding:18px 22px;border-left:4px solid var(--teal-deep);background:#edf7f0;color:#45504b;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
        .article-content table{width:100%;margin:24px 0;border-collapse:collapse;display:block;overflow-x:auto}
        .article-content th,.article-content td{padding:12px 14px;border:1px solid var(--line);text-align:left;white-space:nowrap}
        .article-content th{background:var(--paper-deep)}
        .article-content img{width:auto;margin:26px auto;border-radius:var(--radius-md)}
        .article-empty{text-align:center;padding:70px 20px;color:var(--muted)}
        .article-empty strong{display:block;margin-bottom:18px;color:var(--ink);font-size:24px}
        .article-aside{position:sticky;top:24px}
        .aside-card{padding:24px;background:var(--ink);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-dark);margin-bottom:18px}
        .aside-card h2{margin:0 0 18px;font-size:20px}
        .aside-card p{margin:0;color:#bdc8c0;font-size:14px}
        .aside-list{margin:20px 0 0;padding:0;list-style:none}
        .aside-list li{padding:13px 0;border-top:1px solid var(--line-dark);color:#d6dfd8;font-size:14px}
        .aside-list li:before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 2px 0;border-radius:50%;background:var(--teal)}
        .support-card{padding:23px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg)}
        .support-card h3{margin:0 0 10px;font-size:18px}
        .support-card p{margin:0 0 17px;color:var(--muted);font-size:14px}
        .article-bottom{padding:0 0 80px}
        .bottom-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;background:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-lg)}
        .bottom-panel strong{font-size:20px}
        .bottom-panel span{display:block;color:var(--muted);font-size:14px;margin-top:4px}
        .bottom-actions{display:flex;gap:10px;flex-wrap:wrap}
        footer{background:var(--ink);color:#dce5de;padding:62px 0 24px}
        .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:38px}
        .footer-brand p{max-width:310px;margin:20px 0 0;color:#aeb9b2;font-size:14px}
        .footer-title{margin-bottom:15px;color:var(--teal);font-size:13px;font-weight:800}
        .footer-links{display:grid;gap:9px}
        .footer-links a{color:#c4cec7;font-size:14px;transition:color .2s ease}
        .footer-links a:hover{color:var(--teal)}
        .support-box{display:grid;gap:6px;padding:16px;border:1px solid var(--line-dark);border-radius:var(--radius-md)}
        .support-box strong{font-size:14px}
        .support-box span{color:#aeb9b2;font-size:13px}
        .support-box .section-link{color:var(--teal);font-size:13px}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line-dark);color:#8f9b94;font-size:12px}
        .footer-bottom p{margin:0}
        .footer-bottom a{color:#b8c5bd}
        @media(max-width:1024px){
            .main-nav a{padding-left:9px;padding-right:9px;font-size:13px}
            .main-nav a:after{left:9px;right:9px}
            .header-actions .btn-outline{display:none}
            .article-layout{grid-template-columns:minmax(0,1fr) 240px;gap:30px}
            .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
            .footer-grid>div:last-child{grid-column:2 / 4}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .nav-wrap{min-height:68px}
            .brand{min-width:0}
            .menu-toggle{display:block}
            .header-actions{margin-left:auto}
            .main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;z-index:20;padding:8px;background:var(--ink-soft);border:1px solid var(--line-dark);border-radius:var(--radius-md);box-shadow:var(--shadow-dark);flex-direction:column;align-items:stretch}
            .main-nav.open{display:flex}
            .main-nav a{padding:13px 14px}
            .main-nav a:after{display:none}
            .article-head{padding:52px 0 42px}
            .article-layout{display:block;padding:44px 0 58px}
            .article-content{padding:25px 20px}
            .article-aside{position:static;margin-top:24px}
            .bottom-panel{display:block;padding:24px}
            .bottom-actions{margin-top:20px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
            .footer-grid>div:last-child{grid-column:auto}
            .footer-bottom{display:block;margin-top:35px}
            .footer-bottom p+p{margin-top:9px}
        }
        @media(max-width:520px){
            .brand-copy strong{font-size:14px}
            .brand-mark{width:34px;height:34px;font-size:17px}
            .header-actions .btn{min-height:40px;padding:0 12px;font-size:12px}
            .article-head h1{font-size:34px;letter-spacing:0}
            .article-intro{font-size:16px}
            .article-meta{gap:10px 16px}
            .bottom-actions .btn{width:100%}
            .footer-grid{grid-template-columns:1fr}
            .footer-grid>div:last-child{grid-column:auto}
        }

/* roulang page: category1 */
:root {
            --ink: #171b1b;
            --ink-soft: #242b2a;
            --paper: #f5f3ee;
            --paper-deep: #e9e7e0;
            --white: #fffefa;
            --teal: #9fe4c5;
            --teal-deep: #237d65;
            --orange: #ef9c54;
            --muted: #69716e;
            --line: #d8d9d2;
            --line-dark: #3c4541;
            --red: #c86c51;
            --radius-lg: 18px;
            --radius-md: 12px;
            --radius-sm: 8px;
            --shadow: 0 16px 34px rgba(23, 27, 27, .08);
            --shadow-dark: 0 18px 36px rgba(0, 0, 0, .2);
            --container: 1240px;
        }
        html { scroll-behavior: smooth; }
        *, *::before, *::after { box-sizing: border-box; }
        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { border: 0; cursor: pointer; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .topbar { background: var(--ink); color: #f5f8f1; border-bottom: 1px solid #303936; }
        .nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
        .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 230px; }
        .brand-mark {
            width: 38px; height: 38px; display: grid; place-items: center;
            border: 1px solid var(--teal); border-radius: 50%; color: var(--teal);
            font-size: 20px; line-height: 1;
        }
        .brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
        .brand-copy strong { font-size: 16px; font-weight: 800; }
        .brand-copy span { margin-top: 4px; color: #aeb9b2; font-size: 11px; }
        .main-nav { display: flex; align-items: center; gap: 4px; }
        .main-nav a {
            position: relative; padding: 27px 14px 24px; color: #c8d0ca;
            font-size: 14px; white-space: nowrap; transition: color .2s ease;
        }
        .main-nav a::after {
            content: ""; position: absolute; left: 14px; right: 14px; bottom: 15px;
            height: 2px; background: var(--teal); transform: scaleX(0); transition: transform .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: #fff; }
        .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
        .header-actions { display: flex; align-items: center; gap: 10px; }
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            min-height: 46px; padding: 0 20px; border: 1px solid transparent;
            border-radius: 9px; font-size: 14px; font-weight: 800;
            transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
        }
        .btn:hover { transform: translateY(-2px); }
        .btn:focus-visible, .main-nav a:focus-visible, .section-link:focus-visible, summary:focus-visible {
            outline: 3px solid rgba(159, 228, 197, .75); outline-offset: 3px;
        }
        .btn-primary { background: var(--teal); color: var(--ink); }
        .btn-primary:hover { background: #c0f1d8; }
        .btn-dark { background: var(--ink); color: #fff; }
        .btn-dark:hover { background: var(--teal-deep); }
        .btn-outline { border-color: #69746e; color: #edf6ef; }
        .btn-outline:hover { border-color: var(--teal); color: var(--teal); }
        .menu-toggle {
            display: none; width: 44px; height: 44px; border: 1px solid #55615b;
            border-radius: 8px; background: transparent; color: #fff; font-size: 23px;
        }
        .notice-strip { background: var(--ink-soft); color: #c8d0ca; border-bottom: 1px solid #3c4541; }
        .notice-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; }
        .notice-live { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 800; }
        .notice-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
        .section { padding: 84px 0; }
        .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
        .section-heading h2 { max-width: 650px; margin: 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.18; font-weight: 850; }
        .section-heading p { max-width: 430px; margin: 0; color: var(--muted); }
        .eyebrow { color: var(--teal-deep); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
        .section-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-deep); font-size: 14px; font-weight: 800; white-space: nowrap; }
        .section-link:hover { color: var(--orange); }
        .category-hero { padding: 72px 0 66px; background: var(--white); border-bottom: 1px solid var(--line); }
        .category-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: end; gap: 60px; }
        .category-hero h1 { max-width: 760px; margin: 14px 0 18px; font-size: clamp(38px, 5vw, 68px); line-height: 1.12; font-weight: 850; }
        .category-hero p { max-width: 700px; margin: 0; color: var(--muted); font-size: 18px; }
        .update-panel { padding: 22px; background: var(--ink); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-dark); }
        .update-panel small { display: block; color: var(--teal); font-weight: 800; margin-bottom: 8px; }
        .update-panel strong { display: block; font-size: 23px; line-height: 1.35; }
        .update-panel span { display: block; color: #b9c4bc; margin-top: 10px; font-size: 13px; }
        .filter-band { padding: 24px 0; background: var(--paper-deep); border-bottom: 1px solid var(--line); }
        .filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
        .filter-label { margin-right: 10px; color: var(--muted); font-size: 13px; font-weight: 800; }
        .filter-chip {
            min-height: 38px; padding: 0 15px; border: 1px solid var(--line);
            border-radius: 20px; background: var(--white); color: var(--ink-soft);
            font-size: 13px; transition: .2s ease;
        }
        .filter-chip:hover, .filter-chip.active { background: var(--ink); color: var(--teal); border-color: var(--ink); }
        .content-section { padding: 86px 0; }
        .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 52px; align-items: start; }
        .article-list { border-top: 2px solid var(--ink); }
        .article-item {
            display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; gap: 22px;
            align-items: center; padding: 25px 0; border-bottom: 1px solid var(--line);
            transition: padding .2s ease, background .2s ease;
        }
        .article-item:hover { padding-left: 12px; background: rgba(255, 254, 250, .7); }
        .article-index { color: var(--orange); font-size: 13px; font-weight: 850; }
        .article-copy h3 { margin: 5px 0 6px; font-size: 20px; line-height: 1.4; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .article-copy p { margin: 0; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .article-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
        .tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 5px; background: #dff4e8; color: var(--teal-deep); font-size: 11px; font-weight: 800; white-space: nowrap; }
        .tag.orange { background: #f9e5d2; color: #a75c25; }
        .arrow { color: var(--teal-deep); font-size: 22px; transition: transform .2s ease; }
        .article-item:hover .arrow { transform: translateX(4px); }
        .side-index { position: sticky; top: 24px; padding: 24px; background: var(--ink); color: #fff; border-radius: var(--radius-md); }
        .side-index h3 { margin: 0 0 20px; font-size: 20px; }
        .side-index ul { list-style: none; margin: 0; padding: 0; }
        .side-index li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-dark); color: #c4cec7; font-size: 13px; }
        .side-index li:last-child { border-bottom: 0; }
        .side-index b { color: var(--teal); font-weight: 800; }
        .empty-state { padding: 46px 24px; border: 1px dashed #aeb5ae; color: var(--muted); text-align: center; background: rgba(255, 254, 250, .55); }
        .feature-section { padding: 84px 0; background: var(--paper-deep); }
        .feature-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
        .feature-main { min-height: 300px; padding: 34px; display: flex; flex-direction: column; justify-content: end; background: var(--ink); color: #fff; border-radius: var(--radius-lg); position: relative; overflow: hidden; }
        .feature-main::after { content: "⚽"; position: absolute; right: 34px; top: 24px; color: rgba(159,228,197,.18); font-size: 116px; }
        .feature-main > * { position: relative; z-index: 1; }
        .feature-main h3 { max-width: 560px; margin: 15px 0 12px; font-size: 32px; line-height: 1.25; }
        .feature-main p { max-width: 570px; margin: 0; color: #becac1; }
        .feature-main .eyebrow { color: var(--teal); }
        .feature-side { display: grid; gap: 18px; }
        .feature-note { padding: 25px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); }
        .feature-note h4 { margin: 12px 0 6px; font-size: 18px; line-height: 1.4; }
        .feature-note p { margin: 0; color: var(--muted); font-size: 13px; }
        .timeline-section { padding: 84px 0; }
        .timeline { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
        .timeline-item { min-height: 170px; padding: 22px 20px 10px 0; border-right: 1px solid var(--line); position: relative; }
        .timeline-item:not(:first-child) { padding-left: 20px; }
        .timeline-item:last-child { border-right: 0; }
        .timeline-item::before { content: ""; width: 10px; height: 10px; position: absolute; top: -6px; left: 0; border-radius: 50%; background: var(--orange); border: 3px solid var(--paper); }
        .timeline-item:not(:first-child)::before { left: 15px; }
        .timeline-time { color: var(--teal-deep); font-size: 13px; font-weight: 850; }
        .timeline-item h3 { margin: 12px 0 8px; font-size: 17px; line-height: 1.45; }
        .timeline-item p { margin: 0; color: var(--muted); font-size: 13px; }
        .support-section { padding: 84px 0; background: var(--ink-soft); color: #fff; }
        .support-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
        .support-section h2 { margin: 12px 0 16px; font-size: clamp(28px, 4vw, 46px); line-height: 1.2; }
        .support-section p { margin: 0; color: #c1ccc4; }
        .support-section .eyebrow { color: var(--teal); }
        .support-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .support-card { padding: 21px; border: 1px solid #46504b; border-radius: var(--radius-md); background: #2b3330; }
        .support-card strong { display: block; margin-bottom: 5px; color: var(--teal); }
        .support-card span { color: #c1ccc4; font-size: 13px; }
        .faq-section { padding: 84px 0; }
        .faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line-dark); }
        details { border-bottom: 1px solid var(--line); }
        summary { list-style: none; cursor: pointer; padding: 20px 4px; display: flex; justify-content: space-between; gap: 20px; font-weight: 800; }
        summary::-webkit-details-marker { display: none; }
        summary::after { content: "+"; color: var(--teal-deep); font-size: 22px; line-height: 1; }
        details[open] summary::after { content: "−"; }
        details p { margin: -7px 42px 20px 4px; color: var(--muted); font-size: 14px; }
        .bottom-cta { padding: 62px 0; background: var(--orange); }
        .cta-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
        .cta-row h2 { margin: 0; font-size: clamp(26px, 4vw, 42px); line-height: 1.2; }
        .cta-row p { margin: 8px 0 0; color: #5c3822; }
        .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
        .cta-actions .btn-dark { background: var(--ink); }
        footer { padding: 58px 0 22px; background: var(--ink); color: #eaf1eb; }
        .footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .9fr 1fr; gap: 38px; padding-bottom: 42px; }
        .footer-brand p { max-width: 330px; margin: 18px 0 0; color: #aeb9b2; font-size: 13px; }
        .footer-title { margin-bottom: 14px; color: var(--teal); font-size: 13px; font-weight: 800; }
        .footer-links { display: grid; gap: 8px; }
        .footer-links a { color: #b8c2ba; font-size: 13px; transition: color .2s ease; }
        .footer-links a:hover { color: var(--teal); }
        .support-box { padding: 18px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); }
        .support-box strong { display: block; font-size: 14px; }
        .support-box span { display: block; margin-top: 7px; color: #aeb9b2; font-size: 12px; }
        .support-box .section-link { color: var(--teal); font-size: 12px; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid var(--line-dark); color: #829088; font-size: 12px; }
        .footer-bottom p { margin: 0; }
        .footer-bottom a { color: var(--teal); }
        @media (max-width: 1080px) {
            .main-nav a { padding-left: 9px; padding-right: 9px; font-size: 13px; }
            .main-nav a::after { left: 9px; right: 9px; }
            .header-actions .btn { padding: 0 14px; }
            .category-hero-grid { gap: 30px; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .container { width: min(var(--container), calc(100% - 32px)); }
            .nav-wrap { min-height: 70px; }
            .brand { min-width: auto; }
            .brand-copy strong { font-size: 14px; }
            .header-actions .btn { display: none; }
            .menu-toggle { display: block; }
            .main-nav {
                display: none; position: absolute; z-index: 20; top: 70px; left: 0; right: 0;
                padding: 8px 16px 16px; background: var(--ink); border-top: 1px solid var(--line-dark);
                flex-direction: column; align-items: stretch;
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 14px 10px; border-bottom: 1px solid var(--line-dark); }
            .main-nav a::after { display: none; }
            .notice-inner { min-height: 42px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 0; padding: 7px 0; }
            .notice-inner > span:last-child { display: none; }
            .section, .content-section, .feature-section, .timeline-section, .support-section, .faq-section { padding: 58px 0; }
            .category-hero { padding: 54px 0 48px; }
            .category-hero-grid, .content-layout, .feature-grid, .support-grid { grid-template-columns: 1fr; }
            .category-hero h1 { font-size: clamp(34px, 10vw, 52px); }
            .category-hero p { font-size: 16px; }
            .update-panel { max-width: 460px; }
            .section-heading { display: block; margin-bottom: 26px; }
            .section-heading p { margin-top: 13px; }
            .article-item { grid-template-columns: 45px minmax(0, 1fr) 20px; gap: 12px; }
            .article-copy h3 { font-size: 17px; }
            .article-meta { flex-wrap: wrap; gap: 6px; }
            .side-index { position: static; }
            .timeline { display: flex; overflow-x: auto; padding-bottom: 10px; }
            .timeline-item { flex: 0 0 235px; }
            .support-grid { gap: 28px; }
            .support-list { grid-template-columns: 1fr; }
            .cta-row { align-items: flex-start; flex-direction: column; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
            .footer-bottom { flex-direction: column; gap: 7px; }
        }
        @media (max-width: 520px) {
            .brand-mark { width: 34px; height: 34px; font-size: 17px; }
            .brand-copy span { font-size: 10px; }
            .category-hero h1 { font-size: 35px; }
            .filter-label { width: 100%; margin: 0 0 2px; }
            .article-item { align-items: start; padding: 20px 0; }
            .article-index { padding-top: 4px; }
            .article-copy p { -webkit-line-clamp: 3; }
            .feature-main { min-height: 320px; padding: 26px; }
            .feature-main h3 { font-size: 26px; }
            .feature-main::after { right: 15px; font-size: 88px; }
            .cta-actions { width: 100%; }
            .cta-actions .btn { flex: 1; min-width: 140px; }
        }

/* roulang page: category2 */
:root{
            --ink:#171b1b;
            --ink-soft:#242b2a;
            --paper:#f5f3ee;
            --paper-deep:#e9e7e0;
            --white:#fffefa;
            --teal:#9fe4c5;
            --teal-deep:#237d65;
            --orange:#ef9c54;
            --muted:#69716e;
            --line:#d8d9d2;
            --line-dark:#3c4541;
            --radius-lg:18px;
            --radius-md:12px;
            --radius-sm:8px;
            --shadow:0 16px 34px rgba(23,27,27,.08);
            --shadow-dark:0 18px 36px rgba(0,0,0,.2);
            --container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{border:0;cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .topbar{background:var(--ink);color:#f5f8f1;border-bottom:1px solid #303936}
        .nav-wrap{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
        .brand{display:inline-flex;align-items:center;gap:12px;min-width:230px}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--teal);border-radius:50%;color:var(--teal);font-size:20px;line-height:1}
        .brand-copy{display:flex;flex-direction:column;line-height:1.2}
        .brand-copy strong{font-size:16px;font-weight:800}
        .brand-copy span{margin-top:4px;color:#aeb9b2;font-size:11px}
        .main-nav{display:flex;align-items:center;gap:4px}
        .main-nav a{position:relative;padding:27px 14px 24px;color:#c8d0ca;font-size:14px;white-space:nowrap;transition:color .2s ease}
        .main-nav a:after{content:"";position:absolute;left:14px;right:14px;bottom:15px;height:2px;background:var(--teal);transform:scaleX(0);transition:transform .2s ease}
        .main-nav a:hover,.main-nav a.active{color:#fff}
        .main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
        .header-actions{display:flex;align-items:center;gap:10px}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
        .btn:hover{transform:translateY(-2px)}
        .btn-primary{background:var(--teal);color:var(--ink)}
        .btn-primary:hover{background:#c0f1d8}
        .btn-dark{background:var(--ink);color:#fff}
        .btn-dark:hover{background:var(--teal-deep)}
        .btn-outline{border-color:#69746e;color:#edf6ef}
        .btn-outline:hover{border-color:var(--teal);color:var(--teal)}
        .menu-toggle{display:none;width:44px;height:44px;border:1px solid #55615b;border-radius:8px;background:transparent;color:#fff;font-size:23px}
        .notice-bar{background:var(--ink-soft);color:#c9d2cb;font-size:13px}
        .notice-inner{min-height:38px;display:flex;align-items:center;gap:12px}
        .notice-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(159,228,197,.12)}
        .page-intro{padding:72px 0 62px;background:var(--ink);color:#fff;position:relative;overflow:hidden}
        .page-intro:after{content:"";position:absolute;width:400px;height:400px;right:-120px;top:-190px;border:1px solid rgba(159,228,197,.2);border-radius:50%;box-shadow:0 0 0 42px rgba(159,228,197,.04),0 0 0 84px rgba(159,228,197,.025)}
        .intro-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end}
        .eyebrow{color:var(--teal-deep);font-size:12px;font-weight:800;letter-spacing:1.5px}
        .page-intro .eyebrow{color:var(--teal)}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(36px,5vw,64px);line-height:1.12;letter-spacing:-1px;margin:16px 0 20px}
        .intro-copy{max-width:720px;color:#c9d2cb;font-size:18px;line-height:1.9;margin-bottom:0}
        .intro-side{border-left:1px solid #56615b;padding-left:28px;color:#b6c0b9}
        .intro-side strong{display:block;color:#fff;font-size:24px;margin-bottom:8px}
        .intro-side span{display:block;font-size:14px}
        .section{padding:82px 0}
        .section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:32px}
        .section-heading h2{max-width:650px;font-size:clamp(28px,4vw,44px);line-height:1.2;margin:8px 0 0}
        .section-heading p{max-width:440px;color:var(--muted);margin-bottom:0}
        .filter-bar{display:flex;flex-wrap:wrap;gap:10px;padding:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:30px}
        .filter{padding:9px 16px;border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--muted);font-size:14px;transition:.2s}
        .filter:hover,.filter.active{background:var(--ink);border-color:var(--ink);color:#fff}
        .content-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.65fr);gap:28px;align-items:start}
        .news-list{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
        .news-item{display:grid;grid-template-columns:92px 1fr auto;gap:22px;align-items:center;padding:24px 26px;border-bottom:1px solid var(--line);transition:background .2s ease}
        .news-item:last-child{border-bottom:0}
        .news-item:hover{background:#f0f7f1}
        .date-block{color:var(--teal-deep);font-weight:800;font-size:14px;line-height:1.35}
        .date-block small{display:block;color:var(--muted);font-weight:500;margin-top:3px}
        .news-item h3{font-size:18px;line-height:1.4;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .news-item p{color:var(--muted);font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .tag{display:inline-flex;align-items:center;padding:4px 9px;border-radius:5px;background:#e3f4e9;color:var(--teal-deep);font-size:12px;font-weight:800;white-space:nowrap}
        .news-arrow{font-size:22px;color:var(--orange);transition:transform .2s}
        .news-item:hover .news-arrow{transform:translateX(4px)}
        .side-panel{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-dark)}
        .side-panel h3{font-size:22px;margin:0 0 22px}
        .side-row{padding:17px 0;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;font-size:14px}
        .side-row span{color:#aeb9b2}
        .side-row strong{color:var(--teal);font-weight:700;text-align:right}
        .empty-state{padding:54px 28px;text-align:center;color:var(--muted)}
        .empty-state b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}
        .feature-section{background:var(--paper-deep)}
        .feature-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
        .feature-card{min-height:280px;padding:34px;border-radius:var(--radius-lg);background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
        .feature-card:before{content:"";position:absolute;width:260px;height:260px;right:-70px;top:-80px;border:1px solid rgba(159,228,197,.25);border-radius:50%}
        .feature-card>*{position:relative;z-index:1}
        .feature-card h3{font-size:32px;line-height:1.25;margin:14px 0 10px}
        .feature-card p{color:#c6d0c9;max-width:540px;margin-bottom:0}
        .mini-stack{display:grid;gap:12px}
        .mini-card{padding:22px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);transition:.2s}
        .mini-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
        .mini-card h3{font-size:17px;margin:10px 0 5px}
        .mini-card p{font-size:13px;color:var(--muted);margin:0}
        .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);background:var(--white);border-radius:var(--radius-lg);overflow:hidden}
        .timeline-item{padding:25px 22px;border-right:1px solid var(--line);min-height:170px}
        .timeline-item:last-child{border-right:0}
        .timeline-item time{color:var(--orange);font-weight:800;font-size:14px}
        .timeline-item h3{font-size:18px;line-height:1.4;margin:13px 0 8px}
        .timeline-item p{color:var(--muted);font-size:13px;margin:0}
        .guide{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
        .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
        .guide-step{padding:26px 0;border-top:3px solid var(--teal-deep)}
        .step-no{font-size:13px;color:var(--orange);font-weight:800}
        .guide-step h3{font-size:20px;margin:10px 0 6px}
        .guide-step p{color:var(--muted);font-size:14px;margin:0}
        .download-panel{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:42px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
        .download-panel h2{font-size:34px;line-height:1.25;margin:10px 0}
        .download-panel p{color:#c6d0c9;max-width:650px;margin-bottom:20px}
        .device-tags{display:flex;flex-wrap:wrap;gap:8px}
        .device-tag{border:1px solid #53605a;color:#cbd8ce;border-radius:5px;padding:6px 11px;font-size:12px}
        .download-code{width:132px;height:132px;border:10px solid #fff;background:repeating-linear-gradient(45deg,#171b1b 0 5px,#fff 5px 10px);display:grid;place-items:center;color:#fff;text-align:center;font-size:11px;line-height:1.2}
        .faq-list{border-top:1px solid var(--line)}
        .faq{padding:20px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:30px}
        .faq h3{font-size:17px;margin:0}
        .faq p{max-width:600px;color:var(--muted);font-size:14px;margin:0;text-align:right}
        .cta{padding:62px 0;background:var(--teal)}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
        .cta h2{font-size:34px;line-height:1.25;margin:0}
        footer{background:var(--ink);color:#dbe5dd;padding:62px 0 22px}
        .footer-grid{display:grid;grid-template-columns:1.4fr .8fr .9fr 1fr;gap:36px}
        .footer-brand p{color:#aeb9b2;max-width:300px;font-size:14px;margin:18px 0 0}
        .footer-title{color:#fff;font-weight:800;margin-bottom:15px}
        .footer-links{display:grid;gap:9px}
        .footer-links a{color:#aeb9b2;font-size:14px;transition:color .2s}
        .footer-links a:hover,.footer-bottom a:hover{color:var(--teal)}
        .support-box{border:1px solid #46524c;border-radius:var(--radius-md);padding:18px}
        .support-box strong{display:block;color:var(--teal);font-size:14px}
        .support-box span{display:block;color:#aeb9b2;font-size:13px;margin-top:8px}
        .footer-bottom{border-top:1px solid #38433e;margin-top:48px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#8d9991;font-size:12px}
        .footer-bottom p{margin:0}
        .footer-bottom a{color:#c1cec5}
        :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1024px){
            .main-nav a{padding-left:9px;padding-right:9px;font-size:13px}
            .main-nav a:after{left:9px;right:9px}
            .header-actions .btn{padding:0 13px}
            .intro-grid,.content-layout,.feature-grid{grid-template-columns:1fr}
            .timeline{grid-template-columns:repeat(2,1fr)}
            .timeline-item:nth-child(2){border-right:0}
            .timeline-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
            .footer-grid{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .nav-wrap{min-height:68px}
            .main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;z-index:10;padding:8px;background:var(--ink-soft);border:1px solid #46524c;border-radius:var(--radius-md);flex-direction:column;align-items:stretch}
            .main-nav.open{display:flex}
            .main-nav a{padding:13px 15px;border-bottom:1px solid #38433e}
            .main-nav a:last-child{border-bottom:0}
            .main-nav a:after{display:none}
            .header-actions .btn{display:none}
            .menu-toggle{display:block}
            .notice-inner{font-size:12px}
            .page-intro{padding:55px 0 48px}
            .intro-side{border-left:0;border-top:1px solid #56615b;padding:20px 0 0}
            .section{padding:58px 0}
            .section-heading{display:block;margin-bottom:24px}
            .section-heading p{margin-top:12px}
            .news-item{grid-template-columns:72px 1fr auto;gap:13px;padding:20px 16px}
            .news-item h3{font-size:16px}
            .news-item p{font-size:13px}
            .timeline{grid-template-columns:1fr}
            .timeline-item{border-right:0!important;border-bottom:1px solid var(--line)}
            .timeline-item:last-child{border-bottom:0}
            .guide-grid{grid-template-columns:1fr;gap:10px}
            .guide-step{padding:20px 0}
            .download-panel{grid-template-columns:1fr;padding:28px}
            .download-panel h2{font-size:28px}
            .faq{display:block}
            .faq p{text-align:left;margin-top:8px}
            .cta-inner{display:block}
            .cta .btn{margin-top:22px}
            .footer-grid{grid-template-columns:1fr;gap:28px}
            .footer-bottom{display:block}
            .footer-bottom p+p{margin-top:8px}
        }
        @media(max-width:520px){
            h1{font-size:35px}
            .intro-copy{font-size:16px}
            .feature-card{min-height:245px;padding:25px}
            .feature-card h3{font-size:26px}
            .download-code{width:112px;height:112px}
        }

/* roulang page: category3 */
:root{
            --ink:#171b1b;--ink-soft:#242b2a;--paper:#f5f3ee;--paper-deep:#e9e7e0;
            --white:#fffefa;--teal:#9fe4c5;--teal-deep:#237d65;--orange:#ef9c54;
            --muted:#69716e;--line:#d8d9d2;--line-dark:#3c4541;--radius-lg:18px;
            --radius-md:12px;--radius-sm:8px;--shadow:0 16px 34px rgba(23,27,27,.08);
            --shadow-dark:0 18px 36px rgba(0,0,0,.2);--container:1240px
        }
        *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
        a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input{font:inherit}button{border:0;cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}.topbar{background:var(--ink);color:#f5f8f1;border-bottom:1px solid #303936}
        .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:230px}
        .brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--teal);border-radius:50%;color:var(--teal);font-size:20px;line-height:1}
        .brand-copy{display:flex;flex-direction:column;line-height:1.2}.brand-copy strong{font-size:16px;font-weight:800}.brand-copy span{margin-top:4px;color:#aeb9b2;font-size:11px}
        .main-nav{display:flex;align-items:center;gap:4px}.main-nav a{position:relative;padding:27px 14px 24px;color:#c8d0ca;font-size:14px;white-space:nowrap;transition:.2s}
        .main-nav a:after{content:"";position:absolute;left:14px;right:14px;bottom:15px;height:2px;background:var(--teal);transform:scaleX(0);transition:.2s}
        .main-nav a:hover,.main-nav a.active{color:#fff}.main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
        .header-actions{display:flex;align-items:center;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:800;transition:.2s}
        .btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--teal);color:var(--ink)}.btn-primary:hover{background:#c0f1d8}.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--teal-deep)}
        .btn-outline{border-color:#69746e;color:#edf6ef}.btn-outline:hover{border-color:var(--teal);color:var(--teal)}.menu-toggle{display:none;width:44px;height:44px;border:1px solid #55615b;border-radius:8px;background:transparent;color:#fff;font-size:23px}
        .notice-strip{background:var(--ink-soft);color:#b9c5be;font-size:13px}.notice-inner{min-height:38px;display:flex;align-items:center;gap:12px}.notice-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(159,228,197,.12)}
        .page-head{background:var(--ink);color:#fff;padding:70px 0 74px;position:relative;overflow:hidden}.page-head:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(159,228,197,.16);border-radius:50%;right:-120px;top:-220px;box-shadow:0 0 0 42px rgba(159,228,197,.035),0 0 0 84px rgba(159,228,197,.025)}
        .page-head .container{position:relative;z-index:1}.eyebrow{color:var(--teal-deep);font-size:12px;font-weight:800;letter-spacing:1.5px}.page-head .eyebrow{color:var(--teal);margin-bottom:14px}
        h1,h2,h3,p{margin-top:0}.page-head h1{max-width:800px;margin-bottom:16px;font-size:clamp(38px,6vw,68px);line-height:1.1;font-weight:850}.page-head p{max-width:700px;color:#c9d2cb;font-size:18px;margin-bottom:22px}.head-meta{display:flex;gap:10px;flex-wrap:wrap;color:#aeb9b2;font-size:13px}
        .tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:99px;background:#e7f7ee;color:var(--teal-deep);font-size:12px;font-weight:800}.tag.orange{background:#fff0df;color:#a95d20}.tag.dark{background:#36413d;color:#d8f4e4}
        .section{padding:82px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:32px}.section-heading h2{max-width:680px;margin:5px 0 0;font-size:clamp(28px,4vw,44px);line-height:1.18}.section-heading p{max-width:450px;color:var(--muted);margin-bottom:0}
        .filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:28px}.filter-bar button{padding:8px 15px;background:transparent;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:13px;transition:.2s}.filter-bar button:hover,.filter-bar button.active{background:var(--ink);border-color:var(--ink);color:var(--teal)}
        .content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px}.news-list{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}.news-item{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:22px;align-items:center;padding:25px 28px;border-bottom:1px solid var(--line);transition:.2s}.news-item:last-child{border-bottom:0}.news-item:hover{background:#fbfaf5}.news-date{color:var(--muted);font-size:13px;line-height:1.35}.news-date strong{display:block;color:var(--ink);font-size:24px;line-height:1.1}.news-copy h3{margin:8px 0 5px;font-size:19px;line-height:1.4}.news-copy p{margin:0;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.arrow{color:var(--teal-deep);font-size:22px;transition:.2s}.news-item:hover .arrow{color:var(--orange);transform:translateX(4px)}
        .side-panel{display:flex;flex-direction:column;gap:16px}.side-card{padding:25px;background:var(--ink);color:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-dark)}.side-card h3{font-size:21px;margin:10px 0}.side-card p{color:#b9c5be;font-size:14px}.side-card .line{display:flex;justify-content:space-between;border-top:1px solid var(--line-dark);padding:12px 0;color:#dce6df;font-size:14px}.side-card .line span:last-child{color:var(--teal)}
        .feature-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}.feature-main,.feature-mini{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}.feature-main{min-height:240px;background:linear-gradient(135deg,#fffefa 0%,#e8f5ed 100%);display:flex;flex-direction:column;justify-content:space-between}.feature-main h3{max-width:600px;font-size:30px;line-height:1.25;margin:16px 0}.feature-main p,.feature-mini p{color:var(--muted);font-size:14px}.feature-stack{display:grid;gap:20px}.feature-mini h3{font-size:18px;line-height:1.4;margin:12px 0 5px}
        .timeline{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);gap:0}.timeline-item{position:relative;padding:25px 20px 10px;border-right:1px solid var(--line)}.timeline-item:last-child{border-right:0}.timeline-item:before{content:"";position:absolute;top:-7px;left:20px;width:12px;height:12px;border-radius:50%;background:var(--orange);border:3px solid var(--paper)}.timeline-item time{color:var(--teal-deep);font-weight:800;font-size:13px}.timeline-item h3{font-size:17px;margin:10px 0 5px}.timeline-item p{color:var(--muted);font-size:13px;margin:0}
        .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.guide-card{padding:24px;background:var(--paper-deep);border-radius:var(--radius-md);border-left:3px solid var(--teal-deep)}.guide-card b{display:block;font-size:19px;margin:12px 0 5px}.guide-card p{color:var(--muted);font-size:14px;margin:0}.step-no{color:var(--orange);font-size:12px;font-weight:800}
        .faq-list{max-width:900px;border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:19px 0}summary{cursor:pointer;font-weight:800;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:15px}summary:after{content:"+";color:var(--teal-deep);font-size:24px;font-weight:400}details[open] summary:after{content:"−"}details p{color:var(--muted);max-width:760px;margin:12px 30px 0 0;font-size:14px}
        .cta-band{background:var(--teal);padding:52px 0}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.cta-band h2{font-size:clamp(26px,4vw,42px);margin:0}.cta-band p{margin:7px 0 0;color:#315b4c}.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
        footer{background:var(--ink);color:#eef5ef;padding:62px 0 24px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:38px}.footer-brand p{max-width:320px;color:#aeb9b2;font-size:14px;margin-top:20px}.footer-title{font-weight:800;margin-bottom:15px}.footer-links{display:grid;gap:8px;color:#aeb9b2;font-size:14px}.footer-links a:hover{color:var(--teal)}.support-box{display:grid;gap:5px;padding:17px;border:1px solid var(--line-dark);border-radius:var(--radius-md);color:#cbd6ce;font-size:13px}.support-box strong{color:var(--teal);font-size:15px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line-dark);margin-top:48px;padding-top:20px;color:#8f9c94;font-size:12px}.footer-bottom p{margin:0}.footer-bottom a{color:#b9c5be}.footer-bottom a:hover{color:var(--teal)}
        a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
        @media(max-width:1024px){.main-nav a{padding-left:8px;padding-right:8px}.main-nav a:after{left:8px;right:8px}.header-actions .btn-outline{display:none}.content-layout{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}.footer-grid>div:last-child{grid-column:span 3}}
        @media(max-width:768px){.container{width:min(var(--container),calc(100% - 32px))}.nav-wrap{min-height:68px}.brand{min-width:auto}.main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;z-index:10;padding:8px;background:var(--ink-soft);border:1px solid var(--line-dark);border-radius:10px;flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:13px 15px}.main-nav a:after{display:none}.menu-toggle{display:block}.header-actions{margin-left:auto}.header-actions .btn{min-height:40px;padding:0 13px}.page-head{padding:55px 0 58px}.section{padding:58px 0}.section-heading{display:block}.section-heading p{margin-top:12px}.news-item{grid-template-columns:70px minmax(0,1fr);padding:21px 18px;gap:14px}.news-item .arrow{grid-column:2;grid-row:1;justify-self:end;margin-top:-35px}.feature-grid,.guide-grid{grid-template-columns:1fr}.timeline{display:flex;overflow-x:auto;padding-bottom:15px}.timeline-item{min-width:220px}.side-panel{grid-template-columns:1fr}.cta-inner{display:block}.cta-actions{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:last-child{grid-column:span 2}.footer-bottom{display:block}.footer-bottom p+p{margin-top:8px}}
        @media(max-width:520px){.page-head h1{font-size:39px}.page-head p{font-size:16px}.feature-main h3{font-size:25px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:last-child{grid-column:auto}.notice-inner{font-size:12px}.cta-actions .btn{width:100%}}