/* roulang page: index */
:root {
            --background: #06101f;
            --background-deep: #030a15;
            --surface: #0b1930;
            --surface-strong: #10213d;
            --glass: rgba(13, 31, 57, .66);
            --glass-light: rgba(19, 44, 77, .58);
            --primary: #56b8ff;
            --primary-strong: #288fe4;
            --secondary: #6df5e2;
            --accent: #8f86ff;
            --text: #edf6ff;
            --text-soft: #b5c7da;
            --muted: #7f96ae;
            --border: rgba(148, 194, 235, .16);
            --border-active: rgba(86, 184, 255, .52);
            --success: #69e9ad;
            --warning: #f2c879;
            --danger: #ff8d9d;
            --radius-sm: 12px;
            --radius-md: 18px;
            --radius-lg: 28px;
            --shadow: 0 24px 70px rgba(0, 6, 18, .34);
            --glow: 0 0 34px rgba(61, 166, 255, .24);
            --container: 1240px;
            --header-height: 78px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 100px;
        }

        body {
            margin: 0;
            min-width: 320px;
            overflow-x: hidden;
            color: var(--text);
            background:
                radial-gradient(circle at 48% -10%, rgba(48, 127, 210, .16), transparent 32rem),
                radial-gradient(circle at 100% 32%, rgba(111, 83, 213, .09), transparent 29rem),
                linear-gradient(180deg, var(--background-deep) 0%, var(--background) 26%, #071425 100%);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }

        body.menu-open {
            overflow: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        button, input, select, textarea {
            color: inherit;
            font: inherit;
        }

        button {
            border: 0;
            cursor: pointer;
        }

        img, svg {
            display: block;
            max-width: 100%;
        }

        ::selection {
            color: #02101e;
            background: var(--secondary);
        }

        .site-container {
            width: min(calc(100% - 48px), var(--container));
            margin-inline: auto;
        }

        .section {
            position: relative;
            padding: 104px 0;
        }

        .section-line {
            border-top: 1px solid var(--border);
        }

        .glass-card {
            border: 1px solid var(--border);
            background: linear-gradient(145deg, rgba(17, 39, 69, .72), rgba(7, 20, 39, .74));
            box-shadow: var(--shadow);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--primary);
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .08em;
        }

        .eyebrow::before {
            width: 22px;
            height: 1px;
            content: "";
            background: linear-gradient(90deg, var(--primary), transparent);
        }

        .section-heading {
            max-width: 690px;
        }

        .section-heading h2 {
            margin: 14px 0 16px;
            color: var(--text);
            font-size: clamp(1.85rem, 3.7vw, 3rem);
            font-weight: 720;
            line-height: 1.22;
            letter-spacing: -.035em;
        }

        .section-heading p {
            margin: 0;
            color: var(--text-soft);
            font-size: 1.02rem;
            line-height: 1.9;
        }

        .site-header {
            position: sticky;
            z-index: 80;
            top: 0;
            height: var(--header-height);
            border-bottom: 1px solid var(--border);
            background: rgba(3, 10, 21, .78);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .nav-shell {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 0;
            color: var(--text);
            font-size: 1rem;
            font-weight: 720;
            letter-spacing: .01em;
        }

        .brand-mark {
            position: relative;
            display: grid;
            flex: 0 0 auto;
            width: 30px;
            height: 30px;
            place-items: center;
            border: 1px solid rgba(86, 184, 255, .48);
            border-radius: 10px;
            background: rgba(86, 184, 255, .09);
            box-shadow: inset 0 0 18px rgba(86, 184, 255, .07);
        }

        .brand-mark::before {
            width: 0;
            height: 0;
            margin-left: 2px;
            content: "";
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 8px solid var(--secondary);
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 34px;
        }

        .nav-link {
            position: relative;
            padding: 26px 0 23px;
            color: var(--muted);
            font-size: .94rem;
            transition: color .22s ease;
        }

        .nav-link::after {
            position: absolute;
            right: 50%;
            bottom: 17px;
            left: 50%;
            height: 2px;
            content: "";
            border-radius: 2px;
            background: var(--primary);
            box-shadow: 0 0 13px rgba(86, 184, 255, .68);
            transition: right .22s ease, left .22s ease;
        }

        .nav-link:hover,
        .nav-link:focus-visible,
        .nav-link.active {
            color: var(--text);
        }

        .nav-link:hover::after,
        .nav-link:focus-visible::after,
        .nav-link.active::after {
            right: 0;
            left: 0;
        }

        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            border-radius: 13px;
            background: rgba(13, 31, 57, .62);
        }

        .menu-toggle span,
        .menu-toggle span::before,
        .menu-toggle span::after {
            display: block;
            width: 18px;
            height: 1.5px;
            border-radius: 4px;
            background: var(--text);
            transition: transform .22s ease, opacity .22s ease;
        }

        .menu-toggle span {
            position: relative;
        }

        .menu-toggle span::before,
        .menu-toggle span::after {
            position: absolute;
            left: 0;
            content: "";
        }

        .menu-toggle span::before { top: -6px; }
        .menu-toggle span::after { top: 6px; }

        .menu-toggle[aria-expanded="true"] span {
            background: transparent;
        }

        .menu-toggle[aria-expanded="true"] span::before {
            top: 0;
            transform: rotate(45deg);
        }

        .menu-toggle[aria-expanded="true"] span::after {
            top: 0;
            transform: rotate(-45deg);
        }

        .mobile-nav {
            position: fixed;
            z-index: 70;
            top: var(--header-height);
            right: 16px;
            left: 16px;
            display: none;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: rgba(7, 18, 35, .97);
            box-shadow: var(--shadow);
            backdrop-filter: blur(22px);
        }

        .mobile-nav.open {
            display: grid;
        }

        .mobile-nav a {
            min-height: 48px;
            padding: 11px 14px;
            border-radius: 11px;
            color: var(--text-soft);
        }

        .mobile-nav a:hover,
        .mobile-nav a:focus-visible,
        .mobile-nav a.active {
            color: var(--text);
            background: rgba(86, 184, 255, .09);
        }

        .hero {
            position: relative;
            min-height: 720px;
            padding: 105px 0 72px;
            overflow: hidden;
        }

        .hero::before {
            position: absolute;
            top: 55px;
            left: 50%;
            width: min(880px, 90vw);
            height: 480px;
            content: "";
            border-radius: 50%;
            background: radial-gradient(circle, rgba(50, 143, 228, .16), transparent 67%);
            transform: translateX(-50%);
            pointer-events: none;
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            opacity: .18;
            background-image:
                linear-gradient(rgba(116, 177, 229, .08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(116, 177, 229, .08) 1px, transparent 1px);
            background-size: 52px 52px;
            mask-image: linear-gradient(to bottom, black, transparent 84%);
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 980px;
            margin-inline: auto;
            text-align: center;
        }

        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 7px 13px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-soft);
            background: rgba(12, 29, 52, .62);
            font-size: .84rem;
        }

        .status-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--success);
            box-shadow: 0 0 12px rgba(105, 233, 173, .74);
        }

        .hero h1 {
            max-width: 900px;
            margin: 28px auto 23px;
            color: var(--text);
            font-size: clamp(2.65rem, 7vw, 5.85rem);
            font-weight: 760;
            line-height: 1.03;
            letter-spacing: -.065em;
        }

        .hero h1 span {
            color: transparent;
            background: linear-gradient(100deg, #eaf7ff 5%, var(--primary) 57%, var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
        }

        .hero-description {
            max-width: 790px;
            margin: 0 auto;
            color: var(--text-soft);
            font-size: clamp(1rem, 2vw, 1.14rem);
            line-height: 1.95;
        }

        .search-stage {
            position: relative;
            max-width: 790px;
            margin: 37px auto 0;
            padding: 8px;
            border: 1px solid rgba(86, 184, 255, .24);
            border-radius: 21px;
            background: rgba(10, 25, 47, .8);
            box-shadow: 0 18px 65px rgba(0, 5, 16, .35), 0 0 30px rgba(86, 184, 255, .08);
            backdrop-filter: blur(18px);
        }

        .search-form {
            display: grid;
            grid-template-columns: 48px 1fr auto;
            align-items: center;
        }

        .search-icon {
            display: grid;
            width: 48px;
            color: var(--muted);
            place-items: center;
        }

        .search-input {
            width: 100%;
            min-width: 0;
            height: 54px;
            border: 0;
            outline: 0;
            color: var(--text);
            background: transparent;
        }

        .search-input::placeholder {
            color: #7189a2;
        }

        .btn-primary,
        .btn-secondary {
            display: inline-flex;
            min-height: 48px;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 0 20px;
            border-radius: 13px;
            font-weight: 680;
            transition: transform .2s ease, border-color .2s ease, filter .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .btn-primary {
            color: #03111e;
            background: linear-gradient(110deg, var(--primary), var(--secondary));
            box-shadow: 0 0 27px rgba(73, 177, 244, .24);
        }

        .btn-primary:hover {
            filter: brightness(1.08);
            box-shadow: 0 0 34px rgba(73, 177, 244, .38);
            transform: translateY(-2px);
        }

        .btn-secondary {
            border: 1px solid var(--border);
            color: var(--text);
            background: rgba(15, 35, 62, .56);
        }

        .btn-secondary:hover {
            border-color: var(--border-active);
            background: rgba(25, 55, 91, .63);
            transform: translateY(-2px);
        }

        .btn-primary:active,
        .btn-secondary:active {
            filter: brightness(.92);
            transform: translateY(0);
        }

        .btn-primary:focus-visible,
        .btn-secondary:focus-visible,
        .menu-toggle:focus-visible,
        .nav-link:focus-visible,
        .faq-button:focus-visible,
        .card-link:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        a:focus-visible {
            outline: 3px solid rgba(109, 245, 226, .38);
            outline-offset: 3px;
        }

        button:disabled {
            cursor: not-allowed;
            filter: grayscale(.45);
            opacity: .5;
            box-shadow: none;
            transform: none;
        }

        .quick-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 18px;
        }

        .quick-link {
            padding: 6px 11px;
            border: 1px solid transparent;
            border-radius: 999px;
            color: var(--muted);
            font-size: .86rem;
            transition: color .2s ease, border-color .2s ease, background .2s ease;
        }

        .quick-link:hover {
            border-color: var(--border);
            color: var(--primary);
            background: rgba(86, 184, 255, .06);
        }

        .hero-status {
            display: grid;
            max-width: 920px;
            grid-template-columns: 1fr 1.15fr 1fr;
            margin: 56px auto 0;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: rgba(8, 22, 41, .56);
            text-align: left;
            backdrop-filter: blur(15px);
        }

        .hero-status > div {
            padding: 17px 22px;
        }

        .hero-status > div + div {
            border-left: 1px solid var(--border);
        }

        .hero-status small {
            display: block;
            color: var(--muted);
            font-size: .75rem;
        }

        .hero-status strong {
            display: block;
            margin-top: 3px;
            color: var(--text);
            font-size: .92rem;
            font-weight: 620;
        }

        .metric-strip {
            display: grid;
            grid-template-columns: 1.25fr .85fr 1.1fr .8fr;
            gap: 12px;
            margin-top: 42px;
        }

        .metric {
            position: relative;
            min-height: 176px;
            padding: 23px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: rgba(12, 29, 52, .57);
            transition: transform .22s ease, border-color .22s ease;
        }

        .metric:hover {
            border-color: rgba(86, 184, 255, .34);
            transform: translateY(-3px);
        }

        .metric-label {
            color: var(--muted);
            font-size: .78rem;
        }

        .metric-value {
            display: block;
            margin: 14px 0 8px;
            color: var(--text);
            font-size: clamp(1.45rem, 3vw, 2.45rem);
            font-weight: 730;
            line-height: 1.1;
        }

        .metric p {
            margin: 0;
            color: var(--text-soft);
            font-size: .86rem;
            line-height: 1.65;
        }

        .mini-bars {
            position: absolute;
            right: 20px;
            bottom: 20px;
            display: flex;
            height: 30px;
            align-items: end;
            gap: 4px;
            opacity: .7;
        }

        .mini-bars i {
            width: 4px;
            border-radius: 4px;
            background: linear-gradient(to top, var(--primary), var(--secondary));
        }

        .progress {
            height: 3px;
            margin-top: 19px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(150, 192, 226, .1);
        }

        .progress span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            box-shadow: 0 0 12px rgba(86, 184, 255, .45);
        }

        .matrix {
            display: grid;
            grid-template-columns: 1.35fr .85fr .85fr;
            grid-template-rows: auto auto;
            gap: 16px;
            margin-top: 44px;
        }

        .matrix-card {
            position: relative;
            display: flex;
            min-height: 245px;
            flex-direction: column;
            justify-content: space-between;
            padding: 27px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: rgba(11, 27, 50, .68);
            transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
        }

        .matrix-card::after {
            position: absolute;
            right: -50px;
            bottom: -80px;
            width: 180px;
            height: 180px;
            content: "";
            border-radius: 50%;
            background: radial-gradient(circle, rgba(86, 184, 255, .13), transparent 68%);
            transition: transform .35s ease;
        }

        .matrix-card:hover {
            border-color: rgba(86, 184, 255, .4);
            box-shadow: 0 18px 58px rgba(0, 7, 20, .36);
            transform: translateY(-4px);
        }

        .matrix-card:hover::after {
            transform: scale(1.25);
        }

        .matrix-card.featured {
            grid-row: span 2;
            min-height: 506px;
            background:
                linear-gradient(155deg, rgba(27, 67, 111, .75), rgba(8, 22, 42, .78)),
                rgba(11, 27, 50, .68);
        }

        .matrix-card.wide {
            grid-column: span 2;
        }

        .card-number {
            color: rgba(197, 223, 244, .46);
            font-size: .75rem;
            letter-spacing: .12em;
        }

        .card-icon {
            display: grid;
            width: 46px;
            height: 46px;
            margin-top: 26px;
            place-items: center;
            border: 1px solid rgba(109, 245, 226, .25);
            border-radius: 15px;
            color: var(--secondary);
            background: rgba(109, 245, 226, .07);
        }

        .matrix-card h3 {
            margin: 22px 0 10px;
            font-size: 1.35rem;
            font-weight: 690;
        }

        .matrix-card.featured h3 {
            max-width: 390px;
            font-size: clamp(1.7rem, 3.5vw, 2.65rem);
            line-height: 1.18;
        }

        .matrix-card p {
            max-width: 510px;
            margin: 0;
            color: var(--text-soft);
            font-size: .92rem;
        }

        .card-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-top: 24px;
            color: var(--muted);
            font-size: .78rem;
        }

        .card-link {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--primary);
            font-weight: 640;
        }

        .card-link span {
            transition: transform .2s ease;
        }

        .card-link:hover span {
            transform: translateX(4px);
        }

        .compare-grid {
            display: grid;
            grid-template-columns: 1fr 64px 1fr;
            align-items: stretch;
            margin-top: 44px;
        }

        .compare-panel {
            padding: 34px;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
        }

        .compare-panel.before {
            color: var(--text-soft);
            background: rgba(8, 19, 35, .5);
            opacity: .78;
        }

        .compare-panel.after {
            border-color: rgba(86, 184, 255, .3);
            background: linear-gradient(145deg, rgba(23, 55, 91, .74), rgba(8, 24, 45, .74));
            box-shadow: var(--glow);
        }

        .compare-direction {
            position: relative;
            display: grid;
            z-index: 2;
            width: 48px;
            height: 48px;
            align-self: center;
            justify-self: center;
            place-items: center;
            border: 1px solid var(--border-active);
            border-radius: 50%;
            color: var(--primary);
            background: var(--surface);
        }

        .compare-panel h3 {
            margin: 14px 0 23px;
            color: var(--text);
            font-size: 1.45rem;
        }

        .compare-list {
            display: grid;
            gap: 14px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .compare-list li {
            display: grid;
            grid-template-columns: 22px 1fr;
            gap: 11px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
            font-size: .92rem;
        }

        .compare-list li:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }

        .compare-check {
            color: var(--secondary);
        }

        .content-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
            gap: 42px;
            margin-top: 45px;
        }

        .news-list {
            border-top: 1px solid var(--border);
        }

        .news-item {
            display: grid;
            grid-template-columns: 92px minmax(0, 1fr) auto;
            align-items: center;
            gap: 20px;
            min-height: 112px;
            padding: 20px 4px;
            border-bottom: 1px solid var(--border);
            transition: padding .2s ease, background .2s ease;
        }

        .news-item:hover {
            padding-right: 12px;
            padding-left: 12px;
            background: rgba(86, 184, 255, .035);
        }

        .news-date {
            color: var(--muted);
            font-size: .78rem;
        }

        .news-copy h3 {
            margin: 0 0 7px;
            color: var(--text);
            font-size: 1.05rem;
        }

        .news-copy p {
            margin: 0;
            color: var(--muted);
            font-size: .86rem;
        }

        .news-arrow {
            color: var(--primary);
            transition: transform .2s ease;
        }

        .news-item:hover .news-arrow {
            transform: translateX(5px);
        }

        .calendar-card {
            position: sticky;
            top: 106px;
            height: fit-content;
            padding: 27px;
            border-radius: var(--radius-lg);
        }

        .calendar-card h3 {
            margin: 0;
            font-size: 1.25rem;
        }

        .calendar-card > p {
            margin: 8px 0 22px;
            color: var(--text-soft);
            font-size: .88rem;
        }

        .calendar-list {
            display: grid;
            gap: 4px;
        }

        .calendar-row {
            display: grid;
            grid-template-columns: 52px 1fr;
            gap: 14px;
            padding: 14px 0;
            border-top: 1px solid var(--border);
        }

        .calendar-day {
            color: var(--primary);
            font-size: .78rem;
            font-weight: 680;
        }

        .calendar-row strong {
            display: block;
            font-size: .91rem;
        }

        .calendar-row small {
            color: var(--muted);
            font-size: .76rem;
        }

        .timeline {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            margin-top: 48px;
        }

        .timeline-item {
            position: relative;
            padding: 30px 25px 0 0;
            border-top: 1px solid var(--border);
        }

        .timeline-item::before {
            position: absolute;
            top: -5px;
            left: 0;
            width: 10px;
            height: 10px;
            content: "";
            border: 2px solid var(--background);
            border-radius: 50%;
            background: var(--primary);
            box-shadow: 0 0 12px rgba(86, 184, 255, .62);
        }

        .timeline-item small {
            color: var(--primary);
            font-size: .74rem;
        }

        .timeline-item h3 {
            margin: 9px 0 8px;
            font-size: 1.03rem;
        }

        .timeline-item p {
            margin: 0;
            color: var(--muted);
            font-size: .84rem;
            line-height: 1.7;
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 70px;
            margin-top: 42px;
        }

        .faq-note {
            color: var(--text-soft);
        }

        .faq-note strong {
            display: block;
            margin-bottom: 10px;
            color: var(--text);
            font-size: 1.35rem;
        }

        .faq-list {
            border-top: 1px solid var(--border);
        }

        .faq-item {
            border-bottom: 1px solid var(--border);
        }

        .faq-button {
            display: grid;
            width: 100%;
            min-height: 74px;
            grid-template-columns: 34px 1fr 28px;
            align-items: center;
            gap: 12px;
            padding: 17px 4px;
            color: var(--text);
            background: transparent;
            text-align: left;
        }

        .faq-index {
            color: var(--muted);
            font-size: .74rem;
        }

        .faq-question {
            font-size: 1rem;
            font-weight: 630;
        }

        .faq-plus {
            position: relative;
            width: 20px;
            height: 20px;
        }

        .faq-plus::before,
        .faq-plus::after {
            position: absolute;
            top: 9px;
            left: 3px;
            width: 14px;
            height: 1.5px;
            content: "";
            background: var(--primary);
            transition: transform .22s ease;
        }

        .faq-plus::after {
            transform: rotate(90deg);
        }

        .faq-button[aria-expanded="true"] .faq-plus::after {
            transform: rotate(0);
        }

        .faq-answer {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .25s ease;
        }

        .faq-answer > div {
            overflow: hidden;
        }

        .faq-answer p {
            margin: 0;
            padding: 0 42px 22px 50px;
            color: var(--text-soft);
            font-size: .92rem;
            line-height: 1.9;
        }

        .faq-item.open .faq-answer {
            grid-template-rows: 1fr;
        }

        .form-panel {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 55px;
            padding: 52px;
            border-radius: 32px;
            background:
                radial-gradient(circle at 5% 10%, rgba(86, 184, 255, .13), transparent 25rem),
                linear-gradient(135deg, rgba(18, 44, 76, .8), rgba(7, 19, 37, .88));
        }

        .form-copy h2 {
            margin: 15px 0;
            font-size: clamp(2rem, 4vw, 3.2rem);
            line-height: 1.17;
            letter-spacing: -.04em;
        }

        .form-copy p {
            color: var(--text-soft);
        }

        .form-points {
            display: grid;
            gap: 12px;
            margin-top: 28px;
        }

        .form-point {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-soft);
            font-size: .88rem;
        }

        .form-point i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--secondary);
            box-shadow: 0 0 9px rgba(109, 245, 226, .55);
        }

        .feedback-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            padding: 27px;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: rgba(5, 16, 31, .58);
        }

        .field {
            display: grid;
            gap: 8px;
        }

        .field.full {
            grid-column: 1 / -1;
        }

        .field label {
            color: var(--text-soft);
            font-size: .82rem;
            font-weight: 610;
        }

        .field label span {
            color: var(--danger);
        }

        .field input,
        .field select,
        .field textarea {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 12px;
            outline: 0;
            color: var(--text);
            background: rgba(13, 31, 56, .78);
            transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }

        .field input,
        .field select {
            height: 50px;
            padding: 0 14px;
        }

        .field textarea {
            min-height: 108px;
            padding: 12px 14px;
            resize: vertical;
        }

        .field input::placeholder,
        .field textarea::placeholder {
            color: #70879d;
        }

        .field input:hover,
        .field select:hover,
        .field textarea:hover {
            border-color: rgba(148, 194, 235, .28);
        }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            border-color: var(--primary);
            background: rgba(16, 38, 68, .9);
            box-shadow: 0 0 0 4px rgba(86, 184, 255, .09);
        }

        .field-error {
            display: none;
            color: var(--danger);
            font-size: .76rem;
        }

        .field.invalid .field-error {
            display: block;
        }

        .field.invalid input,
        .field.invalid textarea {
            border-color: var(--danger);
        }

        .form-actions {
            display: flex;
            grid-column: 1 / -1;
            align-items: center;
            gap: 14px;
        }

        .form-message {
            min-height: 24px;
            color: var(--success);
            font-size: .82rem;
        }

        .site-footer {
            padding: 64px 0 110px;
            border-top: 1px solid var(--border);
            background: rgba(3, 10, 20, .58);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.35fr .65fr .65fr;
            gap: 60px;
        }

        .footer-brand p {
            max-width: 440px;
            margin: 18px 0 0;
            color: var(--muted);
            font-size: .88rem;
        }

        .footer-group h3 {
            margin: 0 0 15px;
            color: var(--text-soft);
            font-size: .82rem;
        }

        .footer-links {
            display: grid;
            gap: 9px;
        }

        .footer-links a {
            color: var(--muted);
            font-size: .86rem;
            transition: color .2s ease, transform .2s ease;
        }

        .footer-links a:hover {
            color: var(--primary);
            transform: translateX(3px);
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 52px;
            padding-top: 24px;
            border-top: 1px solid var(--border);
            color: #6f8499;
            font-size: .78rem;
        }

        .floating-cta {
            position: fixed;
            z-index: 60;
            right: 22px;
            bottom: 20px;
            left: 22px;
            display: flex;
            width: min(calc(100% - 44px), 760px);
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-inline: auto;
            padding: 10px 11px 10px 20px;
            border: 1px solid rgba(86, 184, 255, .28);
            border-radius: 17px;
            background: rgba(7, 20, 39, .91);
            box-shadow: 0 15px 55px rgba(0, 5, 16, .5), 0 0 22px rgba(86, 184, 255, .09);
            backdrop-filter: blur(20px);
            transition: opacity .25s ease, transform .25s ease;
        }

        .floating-cta.hidden-bar {
            pointer-events: none;
            opacity: 0;
            transform: translateY(25px);
        }

        .floating-copy {
            min-width: 0;
        }

        .floating-copy strong {
            display: block;
            font-size: .88rem;
        }

        .floating-copy small {
            display: block;
            overflow: hidden;
            color: var(--muted);
            font-size: .75rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .search-result-note {
            display: none;
            margin-top: 13px;
            color: var(--secondary);
            font-size: .84rem;
        }

        .search-result-note.show {
            display: block;
        }

        @media (max-width: 1024px) {
            .section { padding: 86px 0; }
            .metric-strip { grid-template-columns: 1fr 1fr; }
            .matrix { grid-template-columns: 1fr 1fr; }
            .matrix-card.featured {
                grid-row: auto;
                grid-column: span 2;
                min-height: 380px;
            }
            .matrix-card.wide { grid-column: span 2; }
            .content-layout { gap: 28px; }
            .faq-layout { gap: 40px; }
            .form-panel { gap: 32px; padding: 40px; }
        }

        @media (max-width: 768px) {
            :root { --header-height: 68px; }
            .site-container { width: min(calc(100% - 32px), var(--container)); }
            .desktop-nav { display: none; }
            .menu-toggle { display: flex; }
            .hero {
                min-height: auto;
                padding: 78px 0 55px;
            }
            .hero h1 {
                margin-top: 24px;
                letter-spacing: -.045em;
            }
            .search-form { grid-template-columns: 40px 1fr; }
            .search-form .btn-primary {
                grid-column: 1 / -1;
                margin-top: 5px;
            }
            .hero-status {
                grid-template-columns: 1fr;
                margin-top: 38px;
            }
            .hero-status > div + div {
                border-top: 1px solid var(--border);
                border-left: 0;
            }
            .compare-grid {
                grid-template-columns: 1fr;
                gap: 0;
            }
            .compare-direction {
                margin: -7px 0;
                transform: rotate(90deg);
            }
            .content-layout,
            .faq-layout,
            .form-panel,
            .footer-grid {
                grid-template-columns: 1fr;
            }
            .calendar-card {
                position: static;
                order: -1;
            }
            .timeline {
                grid-template-columns: 1fr 1fr;
                gap: 24px 0;
            }
            .form-panel { padding: 30px; }
            .footer-grid { gap: 35px; }
        }

        @media (max-width: 640px) {
            .section { padding: 72px 0; }
            .section-heading h2 { font-size: 2rem; }
            .metric-strip,
            .matrix {
                grid-template-columns: 1fr;
            }
            .matrix-card.featured,
            .matrix-card.wide {
                grid-column: auto;
                min-height: 290px;
            }
            .metric { min-height: 154px; }
            .news-item {
                grid-template-columns: 70px 1fr;
                gap: 12px;
            }
            .news-arrow { display: none; }
            .timeline { grid-template-columns: 1fr; }
            .faq-layout { gap: 26px; }
            .faq-answer p { padding-right: 8px; padding-left: 46px; }
            .feedback-form {
                grid-template-columns: 1fr;
                padding: 18px;
            }
            .field.full,
            .form-actions { grid-column: auto; }
            .form-actions {
                align-items: stretch;
                flex-direction: column;
            }
            .form-actions .btn-primary { width: 100%; }
            .footer-bottom {
                align-items: flex-start;
                flex-direction: column;
            }
            .floating-cta {
                right: 12px;
                bottom: 10px;
                left: 12px;
                width: calc(100% - 24px);
                padding-left: 14px;
            }
            .floating-copy small { max-width: 190px; }
        }

        @media (max-width: 375px) {
            .site-container { width: calc(100% - 24px); }
            .brand { font-size: .92rem; }
            .brand-mark { width: 28px; height: 28px; }
            .hero h1 { font-size: 2.4rem; }
            .hero-description { font-size: .95rem; }
            .quick-links { justify-content: flex-start; }
            .compare-panel { padding: 25px; }
            .form-panel { padding: 22px 14px; }
            .floating-copy small { display: none; }
        }

        @media (min-width: 1440px) {
            .hero { padding-top: 120px; }
            .section { padding-top: 116px; padding-bottom: 116px; }
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                scroll-behavior: auto !important;
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
            }
        }

/* roulang page: category1 */
:root{
 --background:#06101f;--background-deep:#030a15;--surface:#0b1930;--surface-strong:#10213d;
 --glass:rgba(13,31,57,.66);--glass-light:rgba(19,44,77,.58);--primary:#56b8ff;
 --primary-strong:#288fe4;--secondary:#6df5e2;--accent:#8f86ff;--text:#edf6ff;
 --text-soft:#b5c7da;--muted:#7f96ae;--border:rgba(148,194,235,.16);
 --border-active:rgba(86,184,255,.52);--success:#69e9ad;--warning:#f2c879;
 --danger:#ff8d9d;--radius-sm:12px;--radius-md:18px;--radius-lg:28px;
 --shadow:0 24px 70px rgba(0,6,18,.34);--glow:0 0 34px rgba(61,166,255,.24);
 --container:1240px;--header-height:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;min-width:320px;overflow-x:hidden;color:var(--text);background:
 radial-gradient(circle at 48% -10%,rgba(48,127,210,.16),transparent 32rem),
 radial-gradient(circle at 100% 32%,rgba(111,83,213,.09),transparent 29rem),
 linear-gradient(180deg,var(--background-deep) 0%,var(--background) 26%,#071425 100%);
 font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
 font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{color:inherit;font:inherit}
button{border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
.site-container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}
.site-header{position:sticky;z-index:80;top:0;height:var(--header-height);border-bottom:1px solid var(--border);background:rgba(3,10,21,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.nav-shell{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:0;color:var(--text);font-size:1rem;font-weight:720;letter-spacing:.01em}
.brand-mark{position:relative;display:grid;flex:0 0 auto;width:30px;height:30px;place-items:center;border:1px solid rgba(86,184,255,.48);border-radius:10px;background:rgba(86,184,255,.09);box-shadow:inset 0 0 18px rgba(86,184,255,.07)}
.brand-mark:before{width:0;height:0;margin-left:2px;content:"";border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--secondary)}
.desktop-nav{display:flex;align-items:center;gap:34px}
.nav-link{position:relative;padding:22px 0 19px;color:var(--muted);font-size:.94rem;transition:color .22s ease}
.nav-link:after{position:absolute;right:50%;bottom:14px;left:50%;height:2px;content:"";border-radius:2px;background:var(--primary);box-shadow:0 0 13px rgba(86,184,255,.68);transition:right .22s,left .22s}
.nav-link:hover,.nav-link:focus-visible,.nav-link.active{color:var(--text)}
.nav-link:hover:after,.nav-link:focus-visible:after,.nav-link.active:after{right:0;left:0}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:rgba(14,34,61,.7);position:relative}
.menu-toggle span,.menu-toggle:before,.menu-toggle:after{position:absolute;left:12px;width:17px;height:1px;background:var(--text);content:"";transition:.25s}
.menu-toggle span{top:20px}.menu-toggle:before{top:14px}.menu-toggle:after{top:26px}
.mobile-menu{display:none;border-top:1px solid var(--border);background:rgba(3,10,21,.96);padding:10px 24px 20px}
.mobile-menu a{display:block;padding:13px 0;border-bottom:1px solid var(--border);color:var(--text-soft)}
.mobile-menu a.active{color:var(--primary)}
.page-intro{padding:86px 0 54px;border-bottom:1px solid var(--border)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--primary);font-size:.78rem;font-weight:700;letter-spacing:.08em}
.eyebrow:before{width:22px;height:1px;content:"";background:linear-gradient(90deg,var(--primary),transparent)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:70px;align-items:end}
h1{margin:16px 0 18px;max-width:760px;font-size:clamp(2.3rem,5vw,4.7rem);font-weight:750;line-height:1.12;letter-spacing:-.055em}
.intro-copy{max-width:700px;color:var(--text-soft);font-size:1.06rem;line-height:1.9}
.index-panel{padding:24px;border:1px solid var(--border-active);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(20,52,88,.78),rgba(7,20,40,.72));box-shadow:var(--glow)}
.index-panel h2{margin:0 0 20px;font-size:1rem}
.status-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--border);color:var(--text-soft);font-size:.9rem}
.status-row:last-child{border-bottom:0;padding-bottom:0}
.status-row strong{color:var(--text);font-weight:650}
.status-dot{display:inline-flex;align-items:center;gap:7px;color:var(--success)}
.status-dot:before{width:7px;height:7px;border-radius:50%;content:"";background:var(--success);box-shadow:0 0 10px var(--success)}
.section{position:relative;padding:78px 0}
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start}
.section-heading{margin-bottom:28px}
.section-heading h2{margin:13px 0 12px;font-size:clamp(1.75rem,3vw,2.65rem);font-weight:720;line-height:1.25;letter-spacing:-.035em}
.section-heading p{margin:0;color:var(--text-soft);line-height:1.85}
.video-list{display:grid;gap:15px}
.video-card{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:22px;align-items:center;padding:17px;border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(145deg,rgba(17,39,69,.7),rgba(7,20,39,.76));box-shadow:0 16px 40px rgba(0,5,18,.2);transition:transform .24s,border-color .24s,box-shadow .24s}
.video-card:hover{transform:translateY(-2px);border-color:var(--border-active);box-shadow:var(--glow),0 20px 48px rgba(0,5,18,.26)}
.cover{position:relative;display:flex;aspect-ratio:16/9;align-items:flex-end;justify-content:space-between;overflow:hidden;padding:12px;border-radius:12px;background:linear-gradient(135deg,#123b61 0%,#162052 52%,#241c50 100%)}
.cover:before{position:absolute;inset:0;content:"";background:linear-gradient(135deg,transparent 30%,rgba(109,245,226,.2),transparent 72%)}
.cover small,.play-symbol{position:relative;z-index:1}
.cover small{color:#c9edff;font-size:.7rem;letter-spacing:.08em}
.play-symbol{display:grid;width:30px;height:30px;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(4,14,29,.46);color:var(--secondary);font-size:.75rem}
.card-meta{display:flex;align-items:center;gap:10px;margin-bottom:7px;color:var(--muted);font-size:.78rem}
.badge{display:inline-flex;align-items:center;padding:3px 9px;border:1px solid rgba(86,184,255,.28);border-radius:30px;background:rgba(86,184,255,.1);color:var(--primary);font-size:.73rem}
.video-card h3{margin:0 0 5px;font-size:1.08rem;line-height:1.45}
.video-card p{margin:0;color:var(--text-soft);font-size:.88rem;line-height:1.65}
.card-link{white-space:nowrap;color:var(--primary);font-size:.87rem;transition:color .2s}
.card-link:hover{color:var(--secondary)}
.side-stack{display:grid;gap:16px}
.side-card{padding:23px;border:1px solid var(--border);border-radius:var(--radius-md);background:rgba(11,25,48,.72)}
.side-card h2,.side-card h3{margin:0 0 15px;font-size:1.02rem}
.side-card p{margin:0;color:var(--text-soft);font-size:.9rem;line-height:1.8}
.tag-cloud{display:flex;flex-wrap:wrap;gap:9px}
.tag{padding:7px 11px;border:1px solid var(--border);border-radius:9px;color:var(--text-soft);font-size:.8rem;transition:.2s}
.tag:hover{border-color:var(--border-active);color:var(--primary);background:rgba(86,184,255,.08)}
.mini-list{display:grid;gap:0}
.mini-list a{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);color:var(--text-soft);font-size:.86rem}
.mini-list a:last-child{border-bottom:0}
.mini-list a:hover{color:var(--primary)}
.info-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--border)}
.info-item{padding:24px;background:rgba(13,31,57,.74)}
.info-item strong{display:block;margin-bottom:5px;color:var(--primary);font-size:1.8rem;line-height:1.2}
.info-item span{color:var(--text-soft);font-size:.86rem}
.faq-list{max-width:850px;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-question{display:flex;width:100%;justify-content:space-between;gap:20px;padding:20px 0;text-align:left;background:none;color:var(--text);font-size:1rem;font-weight:650}
.faq-question:after{content:"＋";color:var(--primary);font-size:1.2rem;transition:transform .2s}
.faq-item.open .faq-question:after{transform:rotate(45deg)}
.faq-answer{display:none;padding:0 45px 20px 0;color:var(--text-soft);font-size:.92rem;line-height:1.85}
.faq-item.open .faq-answer{display:block}
.feedback-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:46px;align-items:start;padding:40px;border:1px solid var(--border-active);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(19,49,83,.82),rgba(7,18,37,.9));box-shadow:var(--glow)}
.feedback-wrap h2{margin:12px 0;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.25}
.feedback-wrap p{margin:0;color:var(--text-soft);line-height:1.85}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px}.field.full{grid-column:1/-1}
.field label{color:var(--text-soft);font-size:.83rem}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:11px;outline:0;background:rgba(3,13,27,.58);padding:12px 14px;color:var(--text);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:100px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#66809b}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(86,184,255,.13)}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:17px;padding:12px 20px;border:1px solid rgba(125,211,255,.62);border-radius:11px;background:linear-gradient(135deg,#3aa7ee,#286dd0);box-shadow:0 8px 25px rgba(40,143,228,.27);color:white;font-weight:700;transition:.22s}
.primary-button:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(40,143,228,.42);filter:brightness(1.08)}
.primary-button:active{transform:translateY(0);filter:brightness(.95)}
.primary-button:focus-visible,.nav-link:focus-visible,.menu-toggle:focus-visible,.faq-question:focus-visible{outline:3px solid rgba(109,245,226,.48);outline-offset:3px}
.form-message{display:none;margin-top:12px;color:var(--success);font-size:.86rem}
.site-footer{padding:58px 0 22px;border-top:1px solid var(--border);background:rgba(3,10,21,.38)}
.footer-grid{display:grid;grid-template-columns:1.6fr .7fr .8fr;gap:55px;padding-bottom:45px}
.footer-brand p{max-width:430px;margin:17px 0 0;color:var(--muted);font-size:.87rem;line-height:1.8}
.footer-group h3{margin:3px 0 14px;color:var(--text);font-size:.9rem}
.footer-links{display:grid;gap:8px;color:var(--muted);font-size:.86rem}
.footer-links a{transition:color .2s}.footer-links a:hover{color:var(--primary)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--border);color:#66809b;font-size:.78rem}
@media(max-width:900px){.intro-grid{grid-template-columns:1fr;gap:30px}.content-layout{grid-template-columns:1fr}.side-stack{grid-template-columns:repeat(2,1fr)}.feedback-wrap{grid-template-columns:1fr;gap:24px}}
@media(max-width:700px){.site-container{width:min(calc(100% - 32px),var(--container))}.desktop-nav{display:none}.menu-toggle{display:block}.mobile-menu{display:none}.site-header.menu-visible + .mobile-menu{display:block}.page-intro{padding:58px 0 38px}.section{padding:58px 0}h1{font-size:clamp(2.15rem,11vw,3.5rem)}.video-card{grid-template-columns:112px minmax(0,1fr);gap:14px}.card-link{grid-column:2}.video-card h3{font-size:.98rem}.video-card p{font-size:.82rem}.side-stack{grid-template-columns:1fr}.info-band{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.feedback-wrap{padding:25px}.footer-grid{grid-template-columns:1fr;gap:28px;padding-bottom:32px}.footer-bottom{flex-direction:column;gap:5px}}
@media(max-width:390px){.video-card{grid-template-columns:1fr}.card-link{grid-column:auto}.cover{max-width:220px}.footer-bottom{font-size:.72rem}}

/* roulang page: category2 */
:root {
      --background:#06101f;
      --background-deep:#030a15;
      --surface:#0b1930;
      --surface-strong:#10213d;
      --glass:rgba(13,31,57,.66);
      --glass-light:rgba(19,44,77,.58);
      --primary:#56b8ff;
      --primary-strong:#288fe4;
      --secondary:#6df5e2;
      --accent:#8f86ff;
      --text:#edf6ff;
      --text-soft:#b5c7da;
      --muted:#7f96ae;
      --border:rgba(148,194,235,.16);
      --border-active:rgba(86,184,255,.52);
      --success:#69e9ad;
      --warning:#f2c879;
      --danger:#ff8d9d;
      --radius-sm:12px;
      --radius-md:18px;
      --radius-lg:28px;
      --shadow:0 24px 70px rgba(0,6,18,.34);
      --glow:0 0 34px rgba(61,166,255,.24);
      --container:1240px;
      --header-height:68px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:92px}
    body{
      margin:0;min-width:320px;overflow-x:hidden;color:var(--text);
      background:
        radial-gradient(circle at 48% -10%,rgba(48,127,210,.16),transparent 32rem),
        radial-gradient(circle at 100% 32%,rgba(111,83,213,.09),transparent 29rem),
        linear-gradient(180deg,var(--background-deep) 0%,var(--background) 26%,#071425 100%);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
      font-size:16px;line-height:1.75;text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{color:inherit;font:inherit}
    button{border:0;cursor:pointer}
    img,svg{display:block;max-width:100%}
    .site-container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}
    .section{position:relative;padding:94px 0}
    .section-line{border-top:1px solid var(--border)}
    .glass-card{
      border:1px solid var(--border);
      background:linear-gradient(145deg,rgba(17,39,69,.72),rgba(7,20,39,.74));
      box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
    }
    .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--primary);font-size:.78rem;font-weight:700;letter-spacing:.08em}
    .eyebrow::before{width:22px;height:1px;content:"";background:linear-gradient(90deg,var(--primary),transparent)}
    .section-heading{max-width:700px}
    .section-heading h2{margin:14px 0 16px;color:var(--text);font-size:clamp(1.85rem,3.7vw,3rem);font-weight:720;line-height:1.22;letter-spacing:-.035em}
    .section-heading p{margin:0;color:var(--text-soft);font-size:1.02rem;line-height:1.9}
    .site-header{
      position:sticky;z-index:80;top:0;height:var(--header-height);
      border-bottom:1px solid var(--border);background:rgba(3,10,21,.78);
      backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
    }
    .nav-shell{display:flex;align-items:center;justify-content:space-between;height:100%}
    .brand{display:inline-flex;align-items:center;gap:11px;min-width:0;color:var(--text);font-size:1rem;font-weight:720;letter-spacing:.01em}
    .brand-mark{
      position:relative;display:grid;flex:0 0 auto;width:30px;height:30px;place-items:center;
      border:1px solid rgba(86,184,255,.48);border-radius:10px;background:rgba(86,184,255,.09);
      box-shadow:inset 0 0 18px rgba(86,184,255,.07)
    }
    .brand-mark::before{width:0;height:0;margin-left:2px;content:"";border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--secondary)}
    .desktop-nav{display:flex;align-items:center;gap:34px}
    .nav-link{position:relative;padding:23px 0 20px;color:var(--muted);font-size:.94rem;transition:color .22s ease}
    .nav-link::after{position:absolute;right:50%;bottom:14px;left:50%;height:2px;content:"";border-radius:2px;background:var(--primary);box-shadow:0 0 13px rgba(86,184,255,.68);transition:right .22s ease,left .22s ease}
    .nav-link:hover,.nav-link:focus-visible,.nav-link.active{color:var(--text)}
    .nav-link:hover::after,.nav-link:focus-visible::after,.nav-link.active::after{right:0;left:0}
    .menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:rgba(13,31,57,.7)}
    .menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:18px;height:2px;margin:auto;border-radius:2px;background:var(--text);transition:.2s}
    .menu-toggle span{position:relative}.menu-toggle span::before,.menu-toggle span::after{position:absolute;content:"";left:0}.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}
    .mobile-menu{display:none;border-bottom:1px solid var(--border);background:rgba(3,10,21,.97)}
    .mobile-menu a{display:block;padding:14px 24px;color:var(--text-soft);border-top:1px solid rgba(148,194,235,.09)}
    .mobile-menu a:hover,.mobile-menu a.active{color:var(--primary);background:rgba(86,184,255,.06)}
    .page-hero{padding:82px 0 76px;border-bottom:1px solid var(--border)}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:78px;align-items:center}
    .hero-title{max-width:720px;margin:17px 0 22px;font-size:clamp(2.6rem,6vw,5.5rem);font-weight:760;line-height:1.08;letter-spacing:-.065em}
    .hero-copy{max-width:650px;color:var(--text-soft);font-size:1.08rem;line-height:1.95}
    .hero-actions{display:flex;align-items:center;gap:24px;margin-top:34px}
    .button-primary,.button-ghost{
      display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:13px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s
    }
    .button-primary{color:#03111f;background:linear-gradient(135deg,var(--secondary),var(--primary));box-shadow:0 10px 28px rgba(61,166,255,.24)}
    .button-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(61,166,255,.4)}
    .button-primary:active,.button-ghost:active{transform:translateY(1px)}
    .button-ghost{border:1px solid var(--border-active);color:var(--text-soft);background:rgba(13,31,57,.42)}
    .button-ghost:hover{color:var(--text);border-color:var(--primary);background:rgba(86,184,255,.1)}
    a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(109,245,226,.65);outline-offset:4px}
    .index-panel{position:relative;padding:25px;border-radius:var(--radius-lg);overflow:hidden}
    .index-panel::before{position:absolute;inset:0;content:"";background:linear-gradient(135deg,rgba(86,184,255,.13),transparent 48%,rgba(143,134,255,.08));pointer-events:none}
    .panel-top,.panel-row{position:relative;display:flex;align-items:center;justify-content:space-between}
    .panel-top{padding-bottom:20px;border-bottom:1px solid var(--border);color:var(--text-soft)}
    .live-dot{display:inline-flex;align-items:center;gap:8px;color:var(--success);font-size:.82rem}.live-dot::before{width:7px;height:7px;content:"";border-radius:50%;background:var(--success);box-shadow:0 0 12px var(--success)}
    .panel-row{padding:18px 0;border-bottom:1px solid rgba(148,194,235,.1)}
    .panel-row:last-child{border-bottom:0;padding-bottom:2px}
    .panel-number{color:var(--text);font-size:1.6rem;font-weight:750}.panel-label{color:var(--muted);font-size:.86rem}
    .signal{width:112px;height:28px;position:relative;background:repeating-linear-gradient(90deg,rgba(86,184,255,.12) 0 2px,transparent 2px 12px);overflow:hidden}
    .signal::after{position:absolute;inset:9px 0 auto;height:2px;content:"";background:linear-gradient(90deg,transparent,var(--secondary),var(--primary),transparent);transform:skewY(-8deg)}
    .crumbs{display:flex;align-items:center;gap:10px;margin-bottom:23px;color:var(--muted);font-size:.86rem}.crumbs span{color:var(--primary)}
    .rail-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
    .feature-card{position:relative;min-height:350px;padding:30px;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(135deg,#112b4b,#0a1931)}
    .feature-card::after{position:absolute;right:-10%;bottom:-38%;width:65%;height:90%;content:"";border-radius:50%;background:radial-gradient(circle,rgba(86,184,255,.25),transparent 67%);filter:blur(4px)}
    .media-placeholder{position:relative;display:flex;align-items:center;justify-content:center;height:145px;margin-bottom:28px;border:1px solid rgba(148,194,235,.2);border-radius:18px;background:linear-gradient(135deg,rgba(86,184,255,.12),rgba(143,134,255,.1)),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 13px)}
    .play-ring{display:grid;width:55px;height:55px;place-items:center;border:1px solid var(--secondary);border-radius:50%;box-shadow:0 0 28px rgba(109,245,226,.25)}
    .play-ring::after{width:0;height:0;margin-left:4px;content:"";border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid var(--secondary)}
    .tag{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border:1px solid rgba(86,184,255,.3);border-radius:99px;color:var(--primary);background:rgba(86,184,255,.08);font-size:.76rem}
    .feature-card h3{position:relative;z-index:1;margin:0 0 8px;font-size:1.6rem;line-height:1.35}.feature-card p{position:relative;z-index:1;max-width:570px;margin:0;color:var(--text-soft)}
    .feature-meta{position:relative;z-index:1;display:flex;gap:18px;margin-top:23px;color:var(--muted);font-size:.82rem}
    .update-list{padding:22px;border-radius:var(--radius-md)}
    .update-list h3{margin:0 0 7px;font-size:1.05rem}.update-list>p{margin:0 0 16px;color:var(--muted);font-size:.85rem}
    .update-item{display:flex;gap:13px;padding:15px 0;border-top:1px solid var(--border);transition:.2s}.update-item:hover{padding-left:4px}
    .update-time{flex:0 0 48px;color:var(--secondary);font-size:.77rem}.update-item strong{display:block;font-size:.91rem;font-weight:650}.update-item small{display:block;margin-top:3px;color:var(--muted);font-size:.76rem}
    .content-rail{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:18px;margin-top:30px}
    .rail-card{padding:21px;border-radius:var(--radius-md);transition:transform .2s,border-color .2s,box-shadow .2s}
    .rail-card:hover{transform:translateY(-3px);border-color:var(--border-active);box-shadow:var(--glow)}
    .rail-card .rail-index{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem}.rail-card h3{margin:20px 0 8px;font-size:1.08rem}.rail-card p{margin:0;color:var(--text-soft);font-size:.87rem;line-height:1.75}.rail-card a{display:inline-block;margin-top:16px;color:var(--primary);font-size:.84rem}
    .status-strip{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1px;margin-top:42px;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--border)}
    .status-cell{padding:21px 24px;background:rgba(8,23,43,.78)}.status-cell span{display:block;color:var(--muted);font-size:.78rem}.status-cell strong{display:block;margin-top:5px;font-size:1.05rem}
    .faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;align-items:start}
    .faq-list{border-top:1px solid var(--border)}
    .faq-item{border-bottom:1px solid var(--border)}
    .faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;padding:12px 0;text-align:left;background:none;color:var(--text);font-weight:650}
    .faq-question::after{content:"+";color:var(--primary);font-size:1.35rem;font-weight:400;transition:transform .2s}.faq-item.open .faq-question::after{transform:rotate(45deg)}
    .faq-answer{max-height:0;overflow:hidden;color:var(--text-soft);font-size:.92rem;line-height:1.85;transition:max-height .25s ease}.faq-item.open .faq-answer{max-height:150px}.faq-answer p{margin:0 0 17px}
    .cta-panel{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:34px 38px;border:1px solid var(--border-active);border-radius:var(--radius-lg);background:linear-gradient(110deg,rgba(18,53,87,.9),rgba(12,29,57,.78));box-shadow:var(--glow)}
    .cta-panel h2{margin:0 0 8px;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.3}.cta-panel p{max-width:680px;margin:0;color:var(--text-soft)}
    .site-footer{padding:68px 0 27px;border-top:1px solid var(--border);background:rgba(2,9,18,.4)}
    .footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:70px}.footer-brand p{max-width:470px;margin:18px 0 0;color:var(--muted);font-size:.88rem;line-height:1.9}
    .footer-group h3{margin:2px 0 15px;color:var(--text);font-size:.9rem}.footer-links{display:grid;gap:9px}.footer-links a{color:var(--muted);font-size:.86rem;transition:color .2s}.footer-links a:hover{color:var(--primary)}
    .footer-bottom{display:flex;justify-content:space-between;gap:18px;margin-top:55px;padding-top:20px;border-top:1px solid var(--border);color:var(--muted);font-size:.76rem}
    @media(max-width:1024px){.hero-grid{gap:38px}.rail-wrap{grid-template-columns:1fr}.update-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px}.update-list h3,.update-list>p{grid-column:1/-1}.faq-layout{gap:40px}.footer-grid{gap:35px}}
    @media(max-width:768px){.site-container{width:min(calc(100% - 36px),var(--container))}.desktop-nav{display:none}.menu-toggle{display:block}.mobile-menu.is-open{display:block}.page-hero{padding:60px 0}.hero-grid{grid-template-columns:1fr}.hero-title{font-size:clamp(2.55rem,12vw,4rem)}.hero-copy{font-size:1rem}.section{padding:72px 0}.status-strip{grid-template-columns:1fr 1fr}.status-cell:first-child{grid-column:1/-1}.content-rail{grid-template-columns:repeat(3,280px);overflow-x:auto;padding-bottom:10px;scrollbar-width:none}.content-rail::-webkit-scrollbar{display:none}.faq-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
    @media(max-width:560px){.site-container{width:min(calc(100% - 30px),var(--container))}.hero-actions{align-items:stretch;flex-direction:column;gap:13px}.hero-actions a{width:100%}.index-panel{padding:20px}.update-list{display:block}.status-strip{grid-template-columns:1fr}.status-cell:first-child{grid-column:auto}.feature-card{min-height:320px;padding:22px}.cta-panel{grid-template-columns:1fr;padding:27px 23px}.cta-panel .button-primary{width:100%}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{align-items:flex-start;flex-direction:column;margin-top:38px}.section-heading h2{font-size:2rem}}