/* roulang page: index */
:root {
            --bg-deep: #0A2E1C;
            --bg-forest: #123E25;
            --bg-card: rgba(14, 53, 32, .86);
            --bg-soft: #0f3523;
            --gold: #FFD700;
            --gold-soft: #FEF08A;
            --amber: #FFB703;
            --red: #D32F2F;
            --mint: #D1F2EB;
            --text: #FFFFFF;
            --muted: #B8DCCF;
            --line: rgba(255, 215, 0, .24);
            --line-soft: rgba(209, 242, 235, .15);
            --shadow: 0 22px 60px rgba(0, 0, 0, .35);
            --shadow-gold: 0 16px 42px rgba(255, 215, 0, .18);
            --radius: 24px;
            --radius-lg: 34px;
            --radius-sm: 14px;
            --container: 1180px;
            --nav-h: 76px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 20% 10%, rgba(255, 215, 0, .10), transparent 34%),
                radial-gradient(circle at 86% 22%, rgba(211, 47, 47, .10), transparent 30%),
                linear-gradient(180deg, #071f14 0%, var(--bg-deep) 42%, #061b12 100%);
            line-height: 1.62;
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
        }

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

        button,
        input {
            font: inherit;
        }

        ::selection {
            color: #071f14;
            background: var(--gold);
        }

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

        .site-header {
            position: fixed;
            inset: 0 0 auto;
            z-index: 1040;
            min-height: var(--nav-h);
            background: rgba(7, 31, 20, .82);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
        }

        .nav-wrap {
            min-height: var(--nav-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            font-weight: 900;
            color: var(--text);
            letter-spacing: 0;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #082014;
            background: radial-gradient(circle at 35% 30%, #fff6b0 0%, var(--gold) 44%, #b98000 100%);
            box-shadow: 0 0 0 4px rgba(255, 215, 0, .12), 0 10px 24px rgba(255, 215, 0, .22);
        }

        .brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.08;
            max-width: 240px;
        }

        .brand-text strong {
            font-size: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .brand-text span {
            color: var(--gold-soft);
            font-size: .78rem;
            font-weight: 700;
        }

        .nav-main {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border: 1px solid var(--line-soft);
            border-radius: 999px;
            background: rgba(255, 255, 255, .045);
        }

        .nav-link-custom {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 40px;
            padding: 9px 14px;
            border-radius: 999px;
            color: var(--mint);
            font-weight: 750;
            font-size: .93rem;
            white-space: nowrap;
        }

        .nav-link-custom:hover,
        .nav-link-custom:focus {
            color: var(--gold);
            background: rgba(255, 215, 0, .09);
        }

        .nav-link-custom.active {
            color: #092217;
            background: var(--gold);
            box-shadow: 0 8px 24px rgba(255, 215, 0, .25);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
        }

        .btn {
            border-radius: 999px;
            font-weight: 850;
            letter-spacing: 0;
            border-width: 1px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
        }

        .btn:focus-visible,
        .nav-link-custom:focus-visible,
        .fab-support:focus-visible,
        .topic-pill:focus-visible {
            outline: 3px solid rgba(255, 215, 0, .55);
            outline-offset: 3px;
        }

        .btn:active {
            transform: translateY(1px) scale(.98);
        }

        .btn-gold {
            color: #092217;
            background: linear-gradient(135deg, #fff3a0 0%, var(--gold) 46%, #c88a00 100%);
            border-color: rgba(255, 215, 0, .8);
            box-shadow: var(--shadow-gold);
        }

        .btn-gold:hover {
            color: #061b12;
            box-shadow: 0 20px 48px rgba(255, 215, 0, .30);
            transform: translateY(-2px);
        }

        .btn-ghost {
            color: var(--gold-soft);
            background: transparent;
            border-color: rgba(255, 215, 0, .24);
        }

        .btn-ghost:hover {
            color: var(--text);
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 215, 0, .46);
        }

        .btn-red {
            color: #fff;
            background: linear-gradient(135deg, #ee524b 0%, var(--red) 100%);
            border-color: rgba(255, 255, 255, .12);
            box-shadow: 0 16px 36px rgba(211, 47, 47, .24);
        }

        .btn-red:hover {
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 20px 46px rgba(211, 47, 47, .32);
        }

        .mobile-toggle {
            display: none;
            width: 44px;
            height: 44px;
            padding: 0;
            border-radius: 50%;
            color: var(--gold);
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .06);
        }

        main {
            padding-top: var(--nav-h);
        }

        section {
            position: relative;
            padding: 78px 0;
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--gold);
            font-size: .82rem;
            font-weight: 900;
            padding: 7px 11px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: rgba(255, 215, 0, .08);
            margin-bottom: 14px;
        }

        .section-title {
            font-size: clamp(1.85rem, 3.1vw, 3rem);
            line-height: 1.14;
            font-weight: 950;
            margin: 0 0 14px;
            letter-spacing: 0;
        }

        .section-copy {
            color: var(--muted);
            max-width: 760px;
            margin: 0 0 28px;
            font-size: 1.04rem;
        }

        .hero {
            min-height: calc(100vh - var(--nav-h));
            display: flex;
            align-items: center;
            padding: 54px 0 46px;
            background-image:
                linear-gradient(180deg, rgba(7, 31, 20, .52), rgba(7, 31, 20, .82)),
                url("/assets/images/backpic/back-1.jpg");
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 140px;
            background: linear-gradient(180deg, transparent, #071f14);
            pointer-events: none;
        }

        .hero-stage {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 22px;
        }

        .hero-panel {
            width: min(980px, 100%);
            padding: clamp(28px, 5vw, 54px);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 215, 0, .35);
            background: linear-gradient(135deg, rgba(10, 46, 28, .84), rgba(18, 62, 37, .64));
            box-shadow: var(--shadow);
            backdrop-filter: blur(10px);
        }

        .group-strip {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
        }

        .live-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #35e66f;
            box-shadow: 0 0 0 8px rgba(53, 230, 111, .12);
            animation: pulseDot 1.5s infinite;
        }

        @keyframes pulseDot {
            50% {
                transform: scale(1.25);
                opacity: .72;
            }
        }

        .badge-soft {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 11px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: var(--mint);
            background: rgba(255, 255, 255, .055);
            font-size: .88rem;
            font-weight: 800;
        }

        .hero h1 {
            max-width: 1040px;
            margin: 0 0 18px;
            font-size: clamp(2.15rem, 5vw, 5.2rem);
            line-height: 1.04;
            font-weight: 1000;
            letter-spacing: 0;
        }

        .hero-lead {
            max-width: 810px;
            color: var(--mint);
            font-size: clamp(1rem, 1.6vw, 1.24rem);
            margin: 0 0 24px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 26px;
        }

        .hero-metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            max-width: 820px;
        }

        .metric-badge {
            padding: 16px;
            border-radius: 20px;
            background: rgba(255, 255, 255, .07);
            border: 1px solid var(--line-soft);
        }

        .metric-badge strong {
            display: block;
            color: var(--gold);
            font-size: 1.48rem;
            line-height: 1.1;
            font-weight: 950;
        }

        .metric-badge span {
            color: var(--muted);
            font-size: .9rem;
        }

        .quick-rail {
            margin-top: 8px;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 16px;
            align-items: stretch;
        }

        .deal-card,
        .trust-card,
        .game-card,
        .info-card,
        .plan-card,
        .review-card,
        .download-panel,
        .news-shell {
            border: 1px solid var(--line-soft);
            background: var(--bg-card);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
        }

        .deal-card {
            display: grid;
            grid-template-columns: 210px 1fr;
            min-height: 220px;
        }

        .deal-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .deal-body {
            padding: 24px;
        }

        .deal-body h2 {
            font-size: 1.55rem;
            font-weight: 950;
            margin: 0 0 10px;
        }

        .deal-body p,
        .trust-card p,
        .game-card p,
        .info-card p,
        .plan-card p,
        .review-card p {
            color: var(--muted);
            margin: 0;
        }

        .payment-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 18px;
        }

        .payment-badge {
            color: #092217;
            background: var(--gold-soft);
            border-radius: 999px;
            padding: 7px 10px;
            font-size: .82rem;
            font-weight: 900;
        }

        .trust-card {
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 18px;
            background:
                linear-gradient(135deg, rgba(255, 215, 0, .12), transparent),
                rgba(14, 53, 32, .90);
        }

        .trust-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .trust-mini {
            padding: 13px;
            border-radius: 18px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .055);
        }

        .trust-mini strong {
            display: block;
            color: var(--gold);
            font-size: 1.18rem;
            line-height: 1.1;
        }

        .track-section {
            background:
                linear-gradient(180deg, rgba(6, 35, 21, .44), rgba(10, 46, 28, .18)),
                radial-gradient(circle at 80% 20%, rgba(255, 215, 0, .08), transparent 28%);
        }

        .topic-strip {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding: 5px 0 18px;
            scrollbar-width: thin;
            scrollbar-color: var(--gold) rgba(255, 255, 255, .08);
        }

        .topic-pill {
            min-width: 210px;
            padding: 16px 18px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .06);
            color: var(--mint);
            font-weight: 900;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .topic-pill:hover {
            color: #092217;
            background: var(--gold);
            transform: translateY(-2px);
        }

        .game-row {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
            margin-top: 12px;
        }

        .game-card {
            position: relative;
            min-height: 260px;
            transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        }

        .game-card:hover {
            transform: translateY(-6px) scale(1.015);
            border-color: rgba(255, 215, 0, .68);
            box-shadow: 0 24px 58px rgba(255, 215, 0, .14);
        }

        .game-card img {
            width: 100%;
            aspect-ratio: 1.45 / 1;
            object-fit: cover;
        }

        .game-card-body {
            padding: 18px;
        }

        .game-card h3 {
            font-size: 1.12rem;
            font-weight: 950;
            margin: 0 0 7px;
        }

        .hot-tag,
        .new-tag {
            position: absolute;
            top: 14px;
            left: 14px;
            padding: 6px 9px;
            border-radius: 999px;
            color: #fff;
            background: var(--red);
            font-size: .75rem;
            font-weight: 950;
            box-shadow: 0 8px 20px rgba(211, 47, 47, .32);
        }

        .new-tag {
            background: #1fbf75;
        }

        .feature-layout {
            display: grid;
            grid-template-columns: .88fr 1.12fr;
            gap: 28px;
            align-items: center;
        }

        .feature-media {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }

        .feature-media img {
            width: 100%;
            height: 520px;
            object-fit: cover;
        }

        .feature-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent, rgba(6, 27, 18, .72));
        }

        .feature-stack {
            display: grid;
            gap: 14px;
        }

        .info-card {
            padding: 22px;
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 14px;
            align-items: start;
        }

        .icon-chip {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            border-radius: 16px;
            color: #092217;
            background: var(--gold);
            box-shadow: 0 12px 26px rgba(255, 215, 0, .2);
        }

        .info-card h3 {
            margin: 0 0 6px;
            font-size: 1.12rem;
            font-weight: 950;
        }

        .combo-grid {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 16px;
        }

        .big-reco {
            min-height: 438px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            position: relative;
            border: 1px solid var(--line);
            background-image:
                linear-gradient(90deg, rgba(7, 31, 20, .88), rgba(7, 31, 20, .36)),
                url("/assets/images/coverpic/cover-4.jpg");
            background-size: cover;
            background-position: center;
            padding: 34px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            box-shadow: var(--shadow);
        }

        .big-reco h2 {
            max-width: 620px;
            font-size: clamp(1.7rem, 3vw, 3rem);
            font-weight: 1000;
            line-height: 1.12;
            margin: 0 0 12px;
        }

        .big-reco p {
            max-width: 600px;
            color: var(--mint);
            margin-bottom: 18px;
        }

        .small-recos {
            display: grid;
            gap: 16px;
        }

        .small-reco {
            display: grid;
            grid-template-columns: 116px 1fr;
            gap: 14px;
            padding: 14px;
            border-radius: var(--radius);
            border: 1px solid var(--line-soft);
            background: rgba(255, 255, 255, .06);
            transition: transform .22s ease, border-color .22s ease, background .22s ease;
        }

        .small-reco:hover {
            transform: translateX(4px);
            border-color: var(--line);
            background: rgba(255, 255, 255, .085);
        }

        .small-reco img {
            height: 96px;
            width: 116px;
            object-fit: cover;
            border-radius: 16px;
        }

        .small-reco h3 {
            font-size: 1.02rem;
            font-weight: 950;
            margin: 0 0 6px;
        }

        .small-reco p {
            color: var(--muted);
            margin: 0 0 8px;
            font-size: .94rem;
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .category-tile {
            min-height: 330px;
            border-radius: var(--radius-lg);
            padding: 26px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: 1px solid var(--line);
            background-size: cover;
            background-position: center;
            box-shadow: var(--shadow);
        }

        .category-tile::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(7, 31, 20, .18), rgba(7, 31, 20, .92));
        }

        .category-tile > * {
            position: relative;
            z-index: 1;
        }

        .category-tile h3 {
            font-size: 1.45rem;
            font-weight: 1000;
            line-height: 1.2;
            margin: 0 0 10px;
        }

        .category-tile p {
            color: var(--mint);
            margin: 0;
        }

        .news-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 340px;
            gap: 22px;
            align-items: start;
        }

        .news-shell {
            padding: 10px;
        }

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

        .news-item a {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 16px;
            padding: 18px;
            border-radius: 18px;
            border: 1px solid transparent;
            background: rgba(255, 255, 255, .045);
        }

        .news-item a:hover {
            border-color: var(--line);
            background: rgba(255, 215, 0, .075);
            transform: translateY(-2px);
        }

        .news-title {
            display: block;
            font-weight: 900;
            color: var(--text);
            margin-bottom: 4px;
        }

        .news-excerpt {
            display: block;
            color: var(--muted);
            font-size: .94rem;
        }

        .news-meta {
            color: var(--gold-soft);
            font-size: .84rem;
            white-space: nowrap;
            text-align: right;
        }

        .empty-news {
            padding: 22px;
            color: var(--muted);
        }

        .side-recommend {
            padding: 24px;
            border-radius: var(--radius);
            background:
                linear-gradient(135deg, rgba(255, 215, 0, .14), rgba(211, 47, 47, .08)),
                rgba(255, 255, 255, .055);
            border: 1px solid var(--line);
            position: sticky;
            top: 96px;
        }

        .side-recommend h3 {
            font-size: 1.28rem;
            font-weight: 950;
            margin: 0 0 10px;
        }

        .side-recommend p {
            color: var(--mint);
            margin: 0 0 16px;
        }

        .plan-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }

        .plan-card {
            padding: 26px;
            position: relative;
            min-height: 360px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .plan-card.recommended {
            border-color: rgba(255, 215, 0, .7);
            box-shadow: 0 24px 60px rgba(255, 215, 0, .16);
            transform: translateY(-8px);
        }

        .plan-card h3 {
            font-size: 1.38rem;
            font-weight: 950;
            margin: 0;
        }

        .price-line {
            color: var(--gold);
            font-size: 2rem;
            font-weight: 1000;
            line-height: 1;
        }

        .plan-list {
            display: grid;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
            color: var(--mint);
        }

        .plan-list li {
            display: flex;
            gap: 9px;
            align-items: flex-start;
        }

        .plan-list i {
            color: var(--gold);
            margin-top: 5px;
        }

        .review-wall {
            display: grid;
            grid-template-columns: .78fr 1.22fr;
            gap: 24px;
            align-items: start;
        }

        .score-board {
            border-radius: var(--radius-lg);
            padding: 30px;
            background: linear-gradient(135deg, rgba(255, 215, 0, .18), rgba(255, 255, 255, .055));
            border: 1px solid var(--line);
        }

        .score-board strong {
            display: block;
            font-size: clamp(3rem, 6vw, 5.5rem);
            line-height: .95;
            color: var(--gold);
            font-weight: 1000;
        }

        .score-board p {
            color: var(--mint);
            margin: 14px 0 0;
        }

        .reviews {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .review-card {
            padding: 22px;
        }

        .review-card h3 {
            font-size: 1.08rem;
            font-weight: 950;
            margin: 0 0 8px;
        }

        .faq-section {
            background: rgba(255, 255, 255, .025);
        }

        .accordion {
            --bs-accordion-bg: transparent;
            --bs-accordion-border-color: rgba(255, 215, 0, .18);
            --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 215, 0, .20);
        }

        .accordion-item {
            margin-bottom: 12px;
            border-radius: 18px !important;
            overflow: hidden;
            background: rgba(255, 255, 255, .055);
            border: 1px solid var(--line-soft);
        }

        .accordion-button {
            color: var(--text);
            background: rgba(255, 255, 255, .04);
            font-weight: 950;
            padding: 19px 20px;
            box-shadow: none !important;
        }

        .accordion-button:not(.collapsed) {
            color: #092217;
            background: var(--gold);
        }

        .accordion-button::after {
            filter: invert(1);
        }

        .accordion-button:not(.collapsed)::after {
            filter: none;
        }

        .accordion-body {
            color: var(--mint);
            padding: 20px;
            background: rgba(6, 27, 18, .72);
        }

        .download-panel {
            display: grid;
            grid-template-columns: 1fr 330px;
            gap: 22px;
            padding: 34px;
            align-items: center;
            background:
                linear-gradient(135deg, rgba(255, 215, 0, .18), rgba(211, 47, 47, .10)),
                url("/assets/images/backpic/back-2.jpg");
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }

        .download-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(7, 31, 20, .76);
        }

        .download-panel > * {
            position: relative;
            z-index: 1;
        }

        .download-panel h2 {
            font-size: clamp(1.8rem, 3.2vw, 3.1rem);
            font-weight: 1000;
            line-height: 1.12;
            margin: 0 0 12px;
        }

        .download-panel p {
            color: var(--mint);
            margin: 0 0 20px;
            max-width: 760px;
        }

        .download-checks {
            display: grid;
            gap: 10px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .download-checks li {
            padding: 12px 14px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .075);
            color: var(--mint);
        }

        .site-footer {
            padding: 54px 0 28px;
            background: #061b12;
            border-top: 1px solid var(--line);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.2fr .8fr .8fr;
            gap: 28px;
            align-items: start;
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
            font-weight: 950;
        }

        .footer-brand .brand-mark {
            width: 38px;
            height: 38px;
        }

        .footer-text {
            color: var(--muted);
            max-width: 560px;
            margin: 0;
        }

        .footer-title {
            color: var(--gold);
            font-weight: 950;
            margin-bottom: 12px;
        }

        .footer-links {
            display: grid;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .footer-links a {
            color: var(--muted);
        }

        .footer-links a:hover {
            color: var(--gold);
            padding-left: 4px;
        }

        .footer-bottom {
            margin-top: 34px;
            padding-top: 20px;
            border-top: 1px solid var(--line-soft);
            color: rgba(209, 242, 235, .78);
            display: flex;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            font-size: .92rem;
        }

        .age-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            height: 32px;
            border-radius: 999px;
            color: #092217;
            background: var(--gold);
            font-weight: 1000;
        }

        .fab-support {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 1050;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: var(--gold);
            border: 3px solid var(--gold);
            background:
                radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .18), transparent 24%),
                linear-gradient(145deg, #15120a, #4a0007 54%, #111);
            box-shadow: 0 4px 20px rgba(255, 215, 0, .30);
            opacity: .72;
            animation: fabFloat 3s ease-in-out infinite;
        }

        .fab-support::before {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: inherit;
            border: 1px solid rgba(255, 246, 176, .7);
            opacity: .65;
        }

        .fab-support::after {
            content: "";
            position: absolute;
            top: 7px;
            right: 7px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #d71920;
            box-shadow: 0 0 0 4px rgba(215, 25, 32, .18);
            animation: pulseDot 1s infinite;
        }

        .fab-support i {
            font-size: 1.55rem;
            transition: transform .48s ease;
        }

        .fab-support:hover {
            opacity: 1;
            transform: scale(1.1);
            color: #fff4a3;
        }

        .fab-support:hover i {
            transform: rotate(360deg);
        }

        .fab-support:active {
            transform: scale(.95) translateY(2px);
        }

        @keyframes fabFloat {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-7px);
            }
        }

        @media (max-width: 1100px) {
            .nav-main {
                position: absolute;
                left: 16px;
                right: 16px;
                top: calc(var(--nav-h) + 10px);
                display: none;
                padding: 12px;
                border-radius: 22px;
                background: rgba(7, 31, 20, .96);
                box-shadow: var(--shadow);
                flex-wrap: wrap;
            }

            .nav-main.is-open {
                display: flex;
            }

            .mobile-toggle {
                display: inline-grid;
                place-items: center;
            }

            .brand-text {
                max-width: 190px;
            }

            .game-row,
            .category-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .feature-layout,
            .combo-grid,
            .quick-rail,
            .review-wall,
            .download-panel,
            .news-layout {
                grid-template-columns: 1fr;
            }

            .side-recommend {
                position: static;
            }

            .plan-grid {
                grid-template-columns: 1fr;
            }

            .plan-card.recommended {
                transform: none;
            }
        }

        @media (max-width: 768px) {
            :root {
                --nav-h: 68px;
            }

            body {
                line-height: 1.58;
            }

            section {
                padding: 56px 0;
            }

            .nav-wrap {
                gap: 10px;
            }

            .brand-mark {
                width: 38px;
                height: 38px;
            }

            .brand-text strong {
                font-size: .9rem;
            }

            .brand-text span {
                display: none;
            }

            .nav-actions {
                gap: 6px;
            }

            .nav-actions .btn {
                min-height: 40px;
                padding-inline: 10px;
                font-size: .86rem;
            }

            .hero {
                min-height: auto;
                padding-top: 42px;
            }

            .hero-panel {
                padding: 24px;
                border-radius: 26px;
            }

            .hero-metrics {
                grid-template-columns: 1fr;
            }

            .deal-card {
                grid-template-columns: 1fr;
            }

            .deal-card img {
                height: 210px;
            }

            .feature-media img {
                height: 340px;
            }

            .game-row,
            .category-grid,
            .reviews {
                grid-template-columns: 1fr;
            }

            .small-reco {
                grid-template-columns: 94px 1fr;
            }

            .small-reco img {
                width: 94px;
                height: 92px;
            }

            .news-item a {
                grid-template-columns: 1fr;
            }

            .news-meta {
                text-align: left;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 520px) {
            .container-custom {
                width: min(100% - 24px, var(--container));
            }

            .brand-text {
                max-width: 136px;
            }

            .nav-actions .btn-ghost {
                padding-inline: 8px;
            }

            .nav-actions .btn-gold {
                padding-inline: 9px;
            }

            .hero-actions .btn {
                width: 100%;
            }

            .trust-grid {
                grid-template-columns: 1fr;
            }

            .download-panel {
                padding: 24px;
            }

            .topic-pill {
                min-width: 184px;
                font-size: .88rem;
            }

            .fab-support {
                width: 56px;
                height: 56px;
                bottom: 86px;
            }
        }

/* roulang page: article */
:root {
            --bg-deep: #0A2E1C;
            --bg-forest: #123E25;
            --bg-card: rgba(14, 53, 32, .86);
            --bg-soft: #0f3523;
            --gold: #FFD700;
            --gold-soft: #FEF08A;
            --amber: #FFB703;
            --red: #D32F2F;
            --mint: #D1F2EB;
            --text: #FFFFFF;
            --muted: #B8DCCF;
            --line: rgba(255, 215, 0, .24);
            --line-soft: rgba(209, 242, 235, .15);
            --shadow: 0 22px 60px rgba(0, 0, 0, .35);
            --shadow-gold: 0 16px 42px rgba(255, 215, 0, .18);
            --radius: 24px;
            --radius-lg: 34px;
            --radius-sm: 14px;
            --container: 1180px;
            --nav-h: 76px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 18% 8%, rgba(255, 215, 0, .12), transparent 32%),
                radial-gradient(circle at 92% 24%, rgba(211, 47, 47, .12), transparent 30%),
                linear-gradient(180deg, #071f14 0%, var(--bg-deep) 44%, #061b12 100%);
            line-height: 1.62;
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
        }

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

        button,
        input {
            font: inherit;
        }

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

        .site-header {
            position: fixed;
            inset: 0 0 auto;
            z-index: 1040;
            min-height: var(--nav-h);
            background: rgba(7, 31, 20, .82);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
        }

        .nav-wrap {
            min-height: var(--nav-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            font-weight: 900;
            color: var(--text);
            letter-spacing: 0;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #082014;
            background: radial-gradient(circle at 35% 30%, #fff6b0 0%, var(--gold) 44%, #b98000 100%);
            box-shadow: 0 0 0 4px rgba(255, 215, 0, .12), 0 10px 24px rgba(255, 215, 0, .22);
        }

        .brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.08;
            max-width: 250px;
        }

        .brand-text strong {
            font-size: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .brand-text span {
            color: var(--gold-soft);
            font-size: .78rem;
            font-weight: 700;
        }

        .nav-main {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border: 1px solid var(--line-soft);
            border-radius: 999px;
            background: rgba(255, 255, 255, .045);
        }

        .nav-link-custom {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 40px;
            padding: 9px 14px;
            border-radius: 999px;
            color: var(--mint);
            font-weight: 750;
            font-size: .93rem;
            white-space: nowrap;
        }

        .nav-link-custom:hover,
        .nav-link-custom:focus {
            color: var(--gold);
            background: rgba(255, 215, 0, .09);
        }

        .nav-link-custom.active {
            color: #092217;
            background: var(--gold);
            box-shadow: 0 8px 24px rgba(255, 215, 0, .25);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
        }

        .btn {
            border-radius: 999px;
            font-weight: 850;
            letter-spacing: 0;
            border-width: 1px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
        }

        .btn:focus-visible,
        .nav-link-custom:focus-visible,
        .fab-support:focus-visible,
        .topic-pill:focus-visible {
            outline: 3px solid rgba(255, 215, 0, .55);
            outline-offset: 3px;
        }

        .btn:active {
            transform: translateY(1px) scale(.98);
        }

        .btn-gold {
            color: #092217;
            background: linear-gradient(135deg, #fff3a0 0%, var(--gold) 46%, #c88a00 100%);
            border-color: rgba(255, 215, 0, .8);
            box-shadow: var(--shadow-gold);
        }

        .btn-gold:hover {
            color: #061b12;
            box-shadow: 0 20px 48px rgba(255, 215, 0, .30);
            transform: translateY(-2px);
        }

        .btn-ghost {
            color: var(--gold-soft);
            background: transparent;
            border-color: rgba(255, 215, 0, .24);
        }

        .btn-ghost:hover {
            color: var(--text);
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 215, 0, .46);
        }

        .btn-red {
            color: #fff;
            background: linear-gradient(135deg, #ee524b 0%, var(--red) 100%);
            border-color: rgba(255, 255, 255, .12);
            box-shadow: 0 16px 36px rgba(211, 47, 47, .24);
        }

        .btn-red:hover {
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 20px 44px rgba(211, 47, 47, .34);
        }

        .article-hero {
            position: relative;
            min-height: 620px;
            padding: calc(var(--nav-h) + 64px) 0 72px;
            display: flex;
            align-items: end;
            background-image:
                linear-gradient(90deg, rgba(5, 23, 14, .88) 0%, rgba(5, 23, 14, .72) 48%, rgba(5, 23, 14, .28) 100%),
                url("/assets/images/backpic/back-2.jpg");
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid var(--line);
            overflow: hidden;
        }

        .article-hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 160px;
            background: linear-gradient(180deg, transparent, rgba(6, 27, 18, .96));
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: minmax(0, 1.12fr) minmax(300px, .58fr);
            gap: 32px;
            align-items: end;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            padding: 8px 12px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: var(--gold-soft);
            background: rgba(10, 46, 28, .72);
            font-weight: 800;
            font-size: .86rem;
        }

        .article-hero h1 {
            margin: 18px 0 16px;
            max-width: 860px;
            font-size: clamp(2.05rem, 5vw, 4.6rem);
            line-height: 1.05;
            font-weight: 950;
            letter-spacing: 0;
        }

        .hero-lead {
            max-width: 760px;
            margin: 0 0 24px;
            color: var(--mint);
            font-size: clamp(1rem, 1.8vw, 1.18rem);
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .countdown-card {
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, rgba(14, 53, 32, .88), rgba(7, 31, 20, .72));
            box-shadow: var(--shadow);
            padding: 22px;
            backdrop-filter: blur(14px);
        }

        .countdown-title {
            color: var(--gold);
            font-weight: 900;
            margin-bottom: 12px;
        }

        .timer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 9px;
            margin-bottom: 16px;
        }

        .timer-box {
            text-align: center;
            border-radius: 16px;
            padding: 12px 6px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 215, 0, .18);
        }

        .timer-box strong {
            display: block;
            color: var(--gold);
            font-size: 1.45rem;
            line-height: 1;
        }

        .timer-box span {
            color: var(--muted);
            font-size: .76rem;
            font-weight: 700;
        }

        .trust-row {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 14px;
        }

        .trust-badge,
        .topic-pill,
        .age-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border-radius: 999px;
            padding: 7px 11px;
            border: 1px solid var(--line-soft);
            color: var(--mint);
            background: rgba(255, 255, 255, .055);
            font-size: .84rem;
            font-weight: 800;
        }

        .age-badge {
            color: #092217;
            background: var(--gold);
            border-color: var(--gold);
            padding: 4px 8px;
        }

        main {
            position: relative;
            z-index: 1;
        }

        .section {
            padding: 72px 0;
        }

        .section-tight {
            padding: 46px 0;
        }

        .summary-strip {
            margin-top: -34px;
            position: relative;
            z-index: 4;
        }

        .summary-grid {
            display: grid;
            grid-template-columns: 1.05fr repeat(3, .65fr);
            gap: 14px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 14px;
            background: rgba(8, 32, 20, .9);
            box-shadow: var(--shadow);
            backdrop-filter: blur(16px);
        }

        .summary-item {
            min-height: 108px;
            border-radius: 20px;
            padding: 18px;
            background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
            border: 1px solid var(--line-soft);
        }

        .summary-item:first-child {
            background: linear-gradient(135deg, rgba(255, 215, 0, .18), rgba(211, 47, 47, .12));
        }

        .summary-label {
            color: var(--muted);
            font-size: .82rem;
            font-weight: 800;
            margin-bottom: 6px;
        }

        .summary-value {
            color: var(--gold-soft);
            font-size: 1.35rem;
            font-weight: 950;
            line-height: 1.15;
        }

        .layout-article {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 350px;
            gap: 32px;
            align-items: start;
        }

        .content-shell,
        .side-panel,
        .feature-card,
        .price-card,
        .case-panel,
        .faq-wrap,
        .cta-band {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: rgba(14, 53, 32, .72);
            box-shadow: var(--shadow);
            backdrop-filter: blur(12px);
        }

        .content-shell {
            overflow: hidden;
        }

        .article-cover {
            position: relative;
            min-height: 260px;
            background: #082014;
        }

        .article-cover img {
            width: 100%;
            height: 320px;
            object-fit: cover;
        }

        .article-cover::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 36%, rgba(7, 31, 20, .82));
        }

        .article-meta-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 20px 26px 0;
        }

        .article-body {
            padding: 26px;
            color: rgba(255, 255, 255, .91);
            font-size: 1.02rem;
        }

        .article-body h2,
        .article-body h3,
        .article-body h4 {
            color: var(--gold-soft);
            margin: 1.4em 0 .55em;
            font-weight: 900;
            line-height: 1.22;
        }

        .article-body h2 {
            font-size: clamp(1.55rem, 2.4vw, 2.15rem);
        }

        .article-body h3 {
            font-size: 1.35rem;
        }

        .article-body p {
            margin: 0 0 1.05em;
        }

        .article-body a {
            color: var(--gold);
            border-bottom: 1px solid rgba(255, 215, 0, .45);
        }

        .article-body ul,
        .article-body ol {
            padding-left: 1.25rem;
            margin-bottom: 1.1em;
        }

        .article-body li {
            margin-bottom: .45em;
        }

        .article-body blockquote {
            margin: 24px 0;
            padding: 18px 20px;
            border-left: 4px solid var(--gold);
            background: rgba(255, 215, 0, .08);
            border-radius: 0 18px 18px 0;
            color: var(--mint);
        }

        .empty-state {
            padding: 42px 26px;
            text-align: left;
        }

        .empty-state h2 {
            color: var(--gold);
            font-size: 1.8rem;
            margin-bottom: 10px;
        }

        .side-panel {
            position: sticky;
            top: calc(var(--nav-h) + 20px);
            padding: 22px;
        }

        .side-panel h2,
        .section-heading h2 {
            font-weight: 950;
            color: var(--text);
            letter-spacing: 0;
        }

        .side-panel h2 {
            font-size: 1.4rem;
            margin-bottom: 12px;
        }

        .side-list {
            display: grid;
            gap: 12px;
            margin: 18px 0;
            padding: 0;
            list-style: none;
        }

        .side-list li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            color: var(--mint);
        }

        .side-list i {
            color: var(--gold);
            margin-top: 4px;
        }

        .payment-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 18px;
        }

        .payment-badge {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 6px 10px;
            border-radius: 999px;
            color: #092217;
            background: var(--gold-soft);
            font-weight: 900;
            font-size: .82rem;
        }

        .section-heading {
            display: grid;
            grid-template-columns: minmax(0, .9fr) minmax(280px, .55fr);
            gap: 28px;
            align-items: end;
            margin-bottom: 28px;
        }

        .section-heading h2 {
            margin: 0;
            font-size: clamp(1.7rem, 3vw, 2.65rem);
            line-height: 1.12;
        }

        .section-heading p {
            margin: 0;
            color: var(--muted);
        }

        .feature-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 18px;
        }

        .feature-card {
            padding: 24px;
            min-height: 240px;
            overflow: hidden;
        }

        .feature-card.highlight {
            background:
                linear-gradient(145deg, rgba(255, 215, 0, .16), rgba(14, 53, 32, .80)),
                url("/assets/images/coverpic/cover-5.jpg");
            background-size: cover;
            background-position: center;
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            color: #092217;
            background: var(--gold);
            margin-bottom: 18px;
            box-shadow: var(--shadow-gold);
        }

        .feature-card h3 {
            margin: 0 0 10px;
            font-size: 1.35rem;
            font-weight: 930;
            color: var(--gold-soft);
        }

        .feature-card p {
            margin: 0;
            color: var(--mint);
        }

        .steps {
            display: grid;
            gap: 14px;
            counter-reset: step;
        }

        .step-row {
            counter-increment: step;
            display: grid;
            grid-template-columns: 52px 1fr;
            gap: 14px;
            align-items: start;
            padding: 18px;
            border: 1px solid var(--line-soft);
            border-radius: 20px;
            background: rgba(255, 255, 255, .045);
        }

        .step-row::before {
            content: counter(step);
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #092217;
            background: var(--gold);
            font-weight: 950;
        }

        .step-row h3 {
            margin: 0 0 5px;
            font-size: 1.1rem;
            color: var(--gold-soft);
            font-weight: 900;
        }

        .step-row p {
            margin: 0;
            color: var(--muted);
        }

        .case-panel {
            padding: 26px;
            display: grid;
            grid-template-columns: .78fr 1fr;
            gap: 26px;
            align-items: center;
            background:
                linear-gradient(135deg, rgba(7, 31, 20, .82), rgba(18, 62, 37, .76)),
                url("/assets/images/coverpic/cover-7.jpg");
            background-size: cover;
            background-position: center;
        }

        .case-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .stat-card {
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 18px;
            background: rgba(7, 31, 20, .78);
        }

        .stat-card strong {
            display: block;
            color: var(--gold);
            font-size: 1.75rem;
            line-height: 1;
            font-weight: 950;
        }

        .stat-card span {
            color: var(--mint);
            font-size: .9rem;
        }

        .case-copy h2 {
            color: var(--gold-soft);
            font-weight: 950;
            margin-bottom: 12px;
        }

        .case-copy p {
            color: var(--mint);
            margin-bottom: 16px;
        }

        .price-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }

        .price-card {
            padding: 24px;
            position: relative;
            overflow: hidden;
        }

        .price-card.recommend {
            border-color: rgba(255, 215, 0, .55);
            background: linear-gradient(145deg, rgba(255, 215, 0, .14), rgba(14, 53, 32, .82));
        }

        .price-card h3 {
            color: var(--gold-soft);
            font-weight: 950;
            margin-bottom: 8px;
        }

        .price {
            color: var(--gold);
            font-size: 2rem;
            font-weight: 950;
            margin: 14px 0;
        }

        .price small {
            color: var(--muted);
            font-size: .92rem;
            font-weight: 700;
        }

        .price-card ul {
            padding: 0;
            margin: 16px 0 22px;
            list-style: none;
            display: grid;
            gap: 10px;
            color: var(--mint);
        }

        .price-card li {
            display: flex;
            gap: 9px;
        }

        .price-card li i {
            color: var(--gold);
            margin-top: 4px;
        }

        .faq-wrap {
            padding: 10px;
        }

        .accordion-item {
            color: var(--text);
            background: transparent;
            border: 1px solid var(--line-soft);
            border-radius: 18px !important;
            overflow: hidden;
            margin: 10px;
        }

        .accordion-button {
            color: var(--gold-soft);
            background: rgba(255, 255, 255, .045);
            font-weight: 900;
            box-shadow: none;
            line-height: 1.35;
        }

        .accordion-button:not(.collapsed) {
            color: #092217;
            background: var(--gold);
        }

        .accordion-button:focus {
            box-shadow: 0 0 0 3px rgba(255, 215, 0, .28);
            border-color: var(--gold);
        }

        .accordion-button::after {
            filter: invert(1);
        }

        .accordion-button:not(.collapsed)::after {
            filter: none;
        }

        .accordion-body {
            color: var(--mint);
            background: rgba(7, 31, 20, .62);
        }

        .cta-band {
            padding: 34px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 24px;
            align-items: center;
            background:
                linear-gradient(135deg, rgba(255, 215, 0, .15), rgba(211, 47, 47, .14)),
                rgba(14, 53, 32, .86);
        }

        .cta-band h2 {
            margin: 0 0 8px;
            color: var(--gold-soft);
            font-weight: 950;
        }

        .cta-band p {
            margin: 0;
            color: var(--mint);
        }

        .site-footer {
            border-top: 1px solid var(--line);
            background: rgba(5, 21, 13, .96);
            padding: 54px 0 24px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.2fr .72fr .9fr;
            gap: 36px;
        }

        .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-weight: 950;
            color: var(--gold-soft);
            margin-bottom: 14px;
        }

        .footer-text {
            color: var(--muted);
            margin: 0;
            max-width: 560px;
        }

        .footer-title {
            color: var(--gold);
            font-weight: 900;
            margin-bottom: 12px;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 10px;
            color: var(--mint);
        }

        .footer-links a:hover {
            color: var(--gold);
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 36px;
            padding-top: 20px;
            border-top: 1px solid var(--line-soft);
            color: rgba(209, 242, 235, .78);
            font-size: .9rem;
        }

        .fab-support {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 1050;
            width: 62px;
            height: 62px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #092217;
            background:
                radial-gradient(circle at 35% 28%, #fff8c7 0%, var(--gold) 42%, #9d6900 74%, #181007 100%);
            border: 3px solid #FFD700;
            box-shadow: 0 4px 20px rgba(255, 215, 0, .30), inset 0 0 0 4px rgba(8, 32, 20, .25);
            opacity: .72;
            animation: fabFloat 2.8s ease-in-out infinite;
        }

        .fab-support i {
            font-size: 1.35rem;
            transition: transform .5s ease;
        }

        .fab-support::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 8px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: var(--red);
            box-shadow: 0 0 0 4px rgba(211, 47, 47, .22);
            animation: blinkDot 1.1s infinite;
        }

        .fab-support:hover {
            opacity: 1;
            transform: scale(1.1);
            color: #092217;
        }

        .fab-support:hover i {
            transform: rotate(360deg);
        }

        .fab-support:active {
            transform: scale(.95) translateY(2px);
        }

        @keyframes fabFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }

        @keyframes blinkDot {
            0%, 100% { opacity: 1; }
            50% { opacity: .28; }
        }

        @media (max-width: 1100px) {
            :root {
                --nav-h: 68px;
            }

            .nav-wrap {
                flex-wrap: wrap;
                padding: 10px 0;
            }

            .nav-main {
                order: 3;
                width: 100%;
                overflow-x: auto;
                justify-content: flex-start;
                scrollbar-width: none;
            }

            .nav-main::-webkit-scrollbar {
                display: none;
            }

            .article-hero {
                padding-top: calc(var(--nav-h) + 88px);
            }

            .hero-content,
            .layout-article,
            .section-heading {
                grid-template-columns: 1fr;
            }

            .side-panel {
                position: static;
            }

            .summary-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .feature-grid,
            .case-panel {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .brand-text {
                max-width: 180px;
            }

            .brand-text strong {
                font-size: .92rem;
            }

            .nav-actions .btn {
                min-height: 38px;
                padding: 7px 11px;
                font-size: .86rem;
            }

            .article-hero {
                min-height: 650px;
                padding-bottom: 58px;
            }

            .hero-content {
                gap: 22px;
            }

            .timer-grid,
            .summary-grid,
            .case-stats,
            .price-grid {
                grid-template-columns: 1fr;
            }

            .section {
                padding: 54px 0;
            }

            .article-body,
            .article-meta-bar,
            .empty-state {
                padding-left: 20px;
                padding-right: 20px;
            }

            .article-cover img {
                height: 240px;
            }

            .cta-band {
                grid-template-columns: 1fr;
                padding: 26px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 26px;
            }

            .footer-bottom {
                flex-direction: column;
            }
        }

        @media (max-width: 520px) {
            .container-custom {
                width: min(100% - 24px, var(--container));
            }

            .nav-wrap {
                gap: 10px;
            }

            .brand-mark {
                width: 38px;
                height: 38px;
            }

            .brand-text {
                max-width: 140px;
            }

            .brand-text span {
                display: none;
            }

            .nav-actions {
                gap: 6px;
            }

            .nav-actions .btn i {
                display: none;
            }

            .nav-link-custom {
                font-size: .86rem;
                padding: 8px 12px;
            }

            .hero-actions .btn,
            .countdown-card .btn,
            .side-panel .btn,
            .price-card .btn,
            .cta-band .btn {
                width: 100%;
            }

            .summary-item {
                min-height: auto;
            }

            .fab-support {
                width: 54px;
                height: 54px;
                left: 16px;
                bottom: 96px;
            }
        }

/* roulang page: category1 */
:root {
            --bg-deep: #0A2E1C;
            --bg-forest: #123E25;
            --bg-card: rgba(14, 53, 32, .86);
            --bg-soft: #0f3523;
            --gold: #FFD700;
            --gold-soft: #FEF08A;
            --amber: #FFB703;
            --red: #D32F2F;
            --mint: #D1F2EB;
            --text: #FFFFFF;
            --muted: #B8DCCF;
            --line: rgba(255, 215, 0, .24);
            --line-soft: rgba(209, 242, 235, .15);
            --shadow: 0 22px 60px rgba(0, 0, 0, .35);
            --shadow-gold: 0 16px 42px rgba(255, 215, 0, .18);
            --radius: 24px;
            --radius-lg: 34px;
            --radius-sm: 14px;
            --container: 1180px;
            --nav-h: 76px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 18% 4%, rgba(255, 215, 0, .11), transparent 26%),
                radial-gradient(circle at 88% 18%, rgba(211, 47, 47, .11), transparent 28%),
                linear-gradient(180deg, #071f14 0%, var(--bg-deep) 42%, #061b12 100%);
            line-height: 1.62;
            overflow-x: hidden;
        }
        a {
            color: inherit;
            text-decoration: none;
            transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
        }
        img { max-width: 100%; display: block; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        .container-custom {
            width: min(var(--container), calc(100% - 32px));
            margin-inline: auto;
        }

        .site-header {
            position: fixed;
            inset: 0 0 auto;
            z-index: 1040;
            min-height: var(--nav-h);
            background: rgba(7, 31, 20, .84);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
        }
        .nav-wrap {
            min-height: var(--nav-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            font-weight: 900;
            color: var(--text);
        }
        .brand-mark {
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #082014;
            background: radial-gradient(circle at 35% 30%, #fff6b0 0%, var(--gold) 44%, #b98000 100%);
            box-shadow: 0 0 0 4px rgba(255, 215, 0, .12), 0 10px 24px rgba(255, 215, 0, .22);
        }
        .brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.08;
            max-width: 245px;
        }
        .brand-text strong {
            font-size: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .brand-text span {
            color: var(--gold-soft);
            font-size: .78rem;
            font-weight: 700;
        }
        .nav-main {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border: 1px solid var(--line-soft);
            border-radius: 999px;
            background: rgba(255, 255, 255, .045);
        }
        .nav-link-custom {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 40px;
            padding: 9px 14px;
            border-radius: 999px;
            color: var(--mint);
            font-weight: 750;
            font-size: .91rem;
            white-space: nowrap;
        }
        .nav-link-custom:hover,
        .nav-link-custom:focus {
            color: var(--gold);
            background: rgba(255, 215, 0, .09);
        }
        .nav-link-custom.active {
            color: #092217;
            background: var(--gold);
            box-shadow: 0 8px 24px rgba(255, 215, 0, .25);
        }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
        }
        .btn {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            border-radius: 999px;
            padding: 10px 18px;
            font-weight: 850;
            border-width: 1px;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
        }
        .btn:active { transform: translateY(1px) scale(.98); }
        .btn:focus-visible,
        .nav-link-custom:focus-visible,
        .faq-button:focus-visible,
        .fab-support:focus-visible,
        .form-control:focus-visible {
            outline: 3px solid rgba(255, 215, 0, .58);
            outline-offset: 3px;
        }
        .btn-gold {
            color: #092217;
            background: linear-gradient(135deg, #fff3a0 0%, var(--gold) 46%, #c88a00 100%);
            border-color: rgba(255, 215, 0, .8);
            box-shadow: var(--shadow-gold);
        }
        .btn-gold:hover {
            color: #061b12;
            transform: translateY(-2px);
            box-shadow: 0 20px 48px rgba(255, 215, 0, .30);
        }
        .btn-ghost {
            color: var(--gold-soft);
            background: rgba(5, 26, 16, .24);
            border-color: rgba(255, 215, 0, .28);
        }
        .btn-ghost:hover {
            color: var(--text);
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 215, 0, .56);
            transform: translateY(-2px);
        }
        .btn-red {
            color: #fff;
            background: linear-gradient(135deg, #ee524b 0%, var(--red) 100%);
            border-color: rgba(255, 255, 255, .12);
            box-shadow: 0 16px 36px rgba(211, 47, 47, .24);
        }
        .btn-red:hover { color: #fff; transform: translateY(-2px); }

        main { padding-top: var(--nav-h); }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border: 1px solid rgba(255, 215, 0, .35);
            border-radius: 999px;
            color: var(--gold-soft);
            font-size: .78rem;
            font-weight: 850;
            letter-spacing: .04em;
            text-transform: uppercase;
            background: rgba(255, 215, 0, .07);
        }
        .eyebrow i { color: var(--gold); }
        .section {
            padding: 94px 0;
            position: relative;
        }
        .section-heading { max-width: 700px; }
        .section-heading h2,
        .content-copy h2,
        .security-panel h2,
        .form-card h2 {
            margin: 14px 0 14px;
            color: var(--text);
            font-size: clamp(1.8rem, 3vw, 2.65rem);
            line-height: 1.17;
            font-weight: 900;
            letter-spacing: -.035em;
        }
        .section-heading p,
        .content-copy p,
        .security-panel p,
        .form-card p {
            margin: 0;
            color: var(--muted);
            font-size: 1.02rem;
        }

        .page-hero {
            position: relative;
            isolation: isolate;
            min-height: 625px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background-image:
                linear-gradient(90deg, rgba(4, 25, 15, .94) 0%, rgba(7, 32, 19, .83) 45%, rgba(6, 31, 18, .38) 100%),
                url("/assets/images/backpic/back-2.jpg");
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid var(--line-soft);
        }
        .page-hero::before {
            content: "";
            position: absolute;
            width: 520px;
            height: 520px;
            right: -80px;
            top: 18px;
            z-index: -1;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 215, 0, .19) 0%, rgba(255, 215, 0, 0) 68%);
            filter: blur(8px);
        }
        .hero-grid {
            width: 100%;
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(350px, .78fr);
            align-items: center;
            gap: 58px;
            padding: 70px 0;
        }
        .hero-copy h1 {
            max-width: 730px;
            margin: 18px 0;
            font-size: clamp(2.45rem, 5vw, 4.45rem);
            line-height: 1.05;
            letter-spacing: -.055em;
            font-weight: 950;
        }
        .hero-copy h1 em {
            color: var(--gold);
            font-style: normal;
        }
        .hero-copy > p {
            max-width: 650px;
            margin: 0;
            color: var(--mint);
            font-size: 1.09rem;
        }
        .hero-points {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 19px;
            margin-top: 24px;
            color: var(--gold-soft);
            font-size: .92rem;
            font-weight: 750;
        }
        .hero-points span { display: inline-flex; align-items: center; gap: 7px; }
        .hero-points i { color: var(--gold); }
        .hero-form-wrap {
            padding: 1px;
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, rgba(255, 242, 140, .87), rgba(255, 215, 0, .12) 32%, rgba(255, 215, 0, .45));
            box-shadow: 0 30px 80px rgba(0, 0, 0, .46);
        }
        .hero-form {
            padding: 29px;
            border-radius: calc(var(--radius-lg) - 1px);
            background: linear-gradient(160deg, rgba(15, 57, 34, .98), rgba(7, 35, 21, .97));
        }
        .hero-form h2 {
            margin: 0 0 7px;
            font-size: 1.52rem;
            line-height: 1.2;
            font-weight: 900;
        }
        .hero-form p {
            margin: 0 0 20px;
            color: var(--muted);
            font-size: .94rem;
        }
        .input-group-custom { display: grid; gap: 12px; }
        .form-control {
            min-height: 51px;
            padding: 12px 15px;
            color: var(--text);
            border: 1px solid rgba(209, 242, 235, .22);
            border-radius: var(--radius-sm);
            background: rgba(255, 255, 255, .07);
            box-shadow: none;
        }
        .form-control::placeholder { color: rgba(209, 242, 235, .61); }
        .form-control:focus {
            color: var(--text);
            border-color: var(--gold);
            background: rgba(255, 255, 255, .10);
            box-shadow: 0 0 0 .22rem rgba(255, 215, 0, .12);
        }
        .form-note {
            display: flex;
            gap: 8px;
            margin: 14px 0 0;
            color: var(--muted);
            font-size: .78rem;
            line-height: 1.5;
        }
        .form-note i { margin-top: 3px; color: var(--gold); }

        .trust-strip {
            margin-top: -37px;
            position: relative;
            z-index: 2;
        }
        .trust-inner {
            display: grid;
            grid-template-columns: 1.15fr repeat(3, 1fr);
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: rgba(14, 53, 32, .94);
            box-shadow: var(--shadow);
        }
        .trust-cell {
            display: flex;
            align-items: center;
            gap: 13px;
            min-height: 102px;
            padding: 18px 24px;
            border-right: 1px solid var(--line-soft);
        }
        .trust-cell:last-child { border-right: 0; }
        .trust-icon {
            width: 43px;
            height: 43px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            color: #092217;
            border-radius: 14px;
            background: var(--gold);
        }
        .trust-cell strong { display: block; font-size: .96rem; }
        .trust-cell span { display: block; margin-top: 2px; color: var(--muted); font-size: .79rem; }

        .intro-layout {
            display: grid;
            grid-template-columns: .93fr 1.07fr;
            align-items: center;
            gap: 70px;
        }
        .image-frame {
            position: relative;
            overflow: hidden;
            min-height: 490px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }
        .image-frame::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 45%, rgba(4, 27, 15, .78) 100%);
            pointer-events: none;
        }
        .image-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
        }
        .image-frame:hover img { transform: scale(1.045); }
        .image-caption {
            position: absolute;
            z-index: 1;
            right: 22px;
            bottom: 20px;
            left: 22px;
            color: var(--gold-soft);
            font-size: .9rem;
            font-weight: 800;
        }
        .check-list {
            display: grid;
            gap: 16px;
            margin: 30px 0 0;
            padding: 0;
            list-style: none;
        }
        .check-list li {
            display: grid;
            grid-template-columns: 35px 1fr;
            gap: 14px;
            align-items: start;
        }
        .check-list i {
            width: 35px;
            height: 35px;
            display: grid;
            place-items: center;
            margin-top: 2px;
            color: #092217;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold-soft), var(--gold));
        }
        .check-list strong { display: block; margin-bottom: 2px; font-size: 1rem; }
        .check-list span { color: var(--muted); font-size: .94rem; }

        .process-section {
            background:
                linear-gradient(100deg, rgba(5, 25, 15, .83), rgba(13, 57, 34, .84)),
                url("/assets/images/backpic/back-1.jpg") center/cover;
            border-block: 1px solid var(--line-soft);
        }
        .process-layout {
            display: grid;
            grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
            gap: 76px;
            align-items: start;
        }
        .process-intro {
            position: sticky;
            top: 106px;
        }
        .process-intro .btn { margin-top: 27px; }
        .step-list { position: relative; }
        .step-item {
            position: relative;
            display: grid;
            grid-template-columns: 68px 1fr;
            gap: 21px;
            padding: 0 0 33px;
        }
        .step-item:not(:last-child)::before {
            content: "";
            position: absolute;
            top: 62px;
            bottom: 0;
            left: 33px;
            width: 1px;
            background: linear-gradient(var(--gold), rgba(255, 215, 0, .08));
        }
        .step-number {
            width: 66px;
            height: 66px;
            display: grid;
            place-items: center;
            position: relative;
            z-index: 1;
            color: #092217;
            border: 5px solid rgba(7, 36, 21, .98);
            border-radius: 50%;
            background: linear-gradient(135deg, #fff4a9, var(--gold) 62%, #c38700);
            box-shadow: 0 0 0 1px rgba(255, 215, 0, .58), 0 10px 26px rgba(0, 0, 0, .28);
            font-weight: 950;
            font-size: 1.08rem;
        }
        .step-content {
            padding: 15px 0 5px;
            border-bottom: 1px solid var(--line-soft);
        }
        .step-content h3 { margin: 0 0 6px; color: var(--gold-soft); font-size: 1.2rem; font-weight: 900; }
        .step-content p { margin: 0; color: var(--mint); font-size: .95rem; }

        .feature-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 22px;
            margin-top: 42px;
        }
        .feature-large,
        .feature-side {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--bg-card);
            box-shadow: 0 14px 40px rgba(0, 0, 0, .2);
        }
        .feature-large {
            display: grid;
            grid-template-columns: 1fr 1.03fr;
            min-height: 340px;
        }
        .feature-large .feature-image { min-height: 100%; }
        .feature-image { position: relative; overflow: hidden; }
        .feature-image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(8, 37, 21, .13), rgba(7, 29, 17, .63));
        }
        .feature-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
        .feature-large:hover img, .feature-side:hover img { transform: scale(1.055); }
        .feature-body { padding: 31px; }
        .feature-body h3 { margin: 13px 0 10px; font-size: 1.36rem; font-weight: 900; }
        .feature-body p { margin: 0; color: var(--muted); font-size: .94rem; }
        .mini-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--gold-soft);
            font-size: .76rem;
            font-weight: 850;
            letter-spacing: .035em;
            text-transform: uppercase;
        }
        .feature-stack { display: grid; gap: 22px; }
        .feature-side {
            display: grid;
            grid-template-columns: 142px 1fr;
            min-height: 159px;
        }
        .feature-side .feature-body { padding: 20px 23px; }
        .feature-side .feature-body h3 { margin: 7px 0 6px; font-size: 1.08rem; }
        .feature-side .feature-body p { font-size: .87rem; }

        .security-section { padding-top: 32px; }
        .security-layout {
            display: grid;
            grid-template-columns: .84fr 1.16fr;
            gap: 34px;
            align-items: stretch;
        }
        .security-panel {
            padding: 42px;
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, #174e30, #0b2d1b);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }
        .security-panel h2 { margin-top: 13px; }
        .payment-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 28px;
        }
        .payment-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            border: 1px solid rgba(255, 215, 0, .26);
            border-radius: 12px;
            color: var(--gold-soft);
            background: rgba(3, 25, 14, .28);
            font-size: .83rem;
            font-weight: 850;
        }
        .payment-badge i { color: var(--gold); }
        .guard-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        .guard-card {
            min-height: 166px;
            padding: 25px;
            border: 1px solid var(--line-soft);
            border-radius: var(--radius);
            background: rgba(255, 255, 255, .035);
            transition: transform .25s ease, background .25s ease, border-color .25s ease;
        }
        .guard-card:hover {
            transform: translateY(-5px);
            border-color: var(--line);
            background: rgba(255, 215, 0, .055);
        }
        .guard-card i { color: var(--gold); font-size: 1.45rem; }
        .guard-card h3 { margin: 14px 0 6px; color: var(--text); font-size: 1.03rem; font-weight: 900; }
        .guard-card p { margin: 0; color: var(--muted); font-size: .88rem; }

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 78px;
            align-items: start;
        }
        .faq-intro { position: sticky; top: 108px; }
        .faq-intro p { color: var(--muted); }
        .faq-list { display: grid; gap: 12px; }
        .faq-item {
            border: 1px solid var(--line-soft);
            border-radius: 18px;
            overflow: hidden;
            background: rgba(255, 255, 255, .035);
        }
        .faq-button {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding: 19px 21px;
            color: var(--text);
            border: 0;
            background: transparent;
            text-align: left;
            font-weight: 850;
        }
        .faq-button i {
            color: var(--gold);
            transition: transform .25s ease;
        }
        .faq-button[aria-expanded="true"] i { transform: rotate(45deg); }
        .faq-answer {
            padding: 0 21px 20px;
            color: var(--muted);
            font-size: .94rem;
        }

        .cta-wrap { padding-top: 20px; }
        .cta-panel {
            position: relative;
            overflow: hidden;
            padding: 57px clamp(25px, 6vw, 76px);
            border: 1px solid rgba(255, 215, 0, .54);
            border-radius: var(--radius-lg);
            text-align: center;
            background:
                radial-gradient(circle at 50% -40%, rgba(255, 215, 0, .30), transparent 52%),
                linear-gradient(135deg, #174b2e, #0a2e1c 64%, #0d4428);
            box-shadow: var(--shadow);
        }
        .cta-panel::before,
        .cta-panel::after {
            content: "♦";
            position: absolute;
            color: rgba(255, 215, 0, .11);
            font-size: 11rem;
            line-height: 1;
        }
        .cta-panel::before { left: 4%; bottom: -42px; transform: rotate(-18deg); }
        .cta-panel::after { right: 4%; top: -45px; transform: rotate(20deg); }
        .cta-panel > * { position: relative; z-index: 1; }
        .cta-panel h2 {
            max-width: 710px;
            margin: 13px auto 12px;
            font-size: clamp(1.9rem, 3.7vw, 3rem);
            line-height: 1.15;
            font-weight: 950;
            letter-spacing: -.04em;
        }
        .cta-panel p {
            max-width: 650px;
            margin: 0 auto;
            color: var(--mint);
        }
        .cta-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 26px;
        }

        .site-footer {
            margin-top: 82px;
            padding: 62px 0 23px;
            border-top: 1px solid var(--line);
            background: #061d11;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.3fr .8fr .95fr;
            gap: 54px;
        }
        .footer-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text);
            font-weight: 950;
            font-size: 1.05rem;
        }
        .footer-text {
            max-width: 470px;
            margin: 17px 0 0;
            color: var(--muted);
            font-size: .9rem;
        }
        .footer-title {
            margin: 8px 0 15px;
            color: var(--gold-soft);
            font-size: .83rem;
            font-weight: 900;
            letter-spacing: .06em;
            text-transform: uppercase;
        }
        .footer-links {
            display: grid;
            gap: 9px;
            margin: 0;
            padding: 0;
            color: var(--muted);
            list-style: none;
            font-size: .89rem;
        }
        .footer-links a:hover { color: var(--gold); }
        .age-badge {
            display: inline-grid;
            place-items: center;
            min-width: 31px;
            min-height: 24px;
            margin-right: 4px;
            color: #54110c;
            border-radius: 7px;
            background: var(--gold);
            font-weight: 950;
            font-size: .75rem;
        }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 24px;
            margin-top: 48px;
            padding-top: 20px;
            border-top: 1px solid var(--line-soft);
            color: rgba(184, 220, 207, .75);
            font-size: .79rem;
        }

        .fab-support {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 1030;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            color: var(--gold);
            border: 2px solid var(--gold);
            border-radius: 50%;
            background:
                radial-gradient(circle at 35% 28%, rgba(255,255,255,.17), transparent 19%),
                linear-gradient(145deg, #3d1010, #0b2416);
            box-shadow: 0 4px 20px rgba(255, 215, 0, .34), inset 0 1px 0 rgba(255,255,255,.26);
            opacity: .74;
            animation: fabFloat 3.3s ease-in-out infinite;
        }
        .fab-support::before {
            content: "";
            position: absolute;
            inset: 4px;
            border: 1px dashed rgba(255, 215, 0, .66);
            border-radius: 50%;
            animation: spinSlow 10s linear infinite;
        }
        .fab-support i { position: relative; z-index: 1; font-size: 1.3rem; transition: transform .35s ease; }
        .fab-support::after {
            content: "";
            position: absolute;
            top: 4px;
            right: 5px;
            width: 10px;
            height: 10px;
            border: 2px solid #5e0b0b;
            border-radius: 50%;
            background: #ff4136;
            animation: blink 1.3s infinite;
        }
        .fab-support:hover { color: #092217; background: var(--gold); opacity: 1; transform: scale(1.1); }
        .fab-support:hover i { transform: rotate(360deg); }
        .fab-support:active { transform: translateY(2px) scale(.95); }

        @keyframes fabFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        @keyframes spinSlow { to { transform: rotate(360deg); } }
        @keyframes blink { 50% { opacity: .25; } }

        @media (max-width: 1120px) {
            .nav-wrap { gap: 12px; }
            .nav-link-custom { padding-inline: 10px; font-size: .84rem; }
            .nav-actions .btn-ghost { display: none; }
            .hero-grid { gap: 34px; }
        }
        @media (max-width: 991px) {
            :root { --nav-h: 126px; }
            .nav-wrap {
                padding: 10px 0;
                min-height: var(--nav-h);
                flex-wrap: wrap;
            }
            .brand { order: 1; }
            .nav-actions { order: 2; margin-left: auto; }
            .nav-main {
                order: 3;
                width: 100%;
                overflow-x: auto;
                justify-content: flex-start;
                scrollbar-width: none;
            }
            .nav-main::-webkit-scrollbar { display: none; }
            .hero-grid,
            .intro-layout,
            .process-layout,
            .security-layout,
            .faq-layout { grid-template-columns: 1fr; }
            .hero-grid { padding: 58px 0; }
            .hero-copy { max-width: 740px; }
            .hero-form-wrap { max-width: 610px; }
            .trust-inner { grid-template-columns: repeat(2, 1fr); }
            .trust-cell:nth-child(2) { border-right: 0; }
            .trust-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
            .process-intro, .faq-intro { position: static; }
            .process-layout, .faq-layout { gap: 39px; }
            .image-frame { min-height: 390px; max-width: 670px; }
            .footer-grid { grid-template-columns: 1.2fr 1fr; }
            .footer-grid > :first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 767px) {
            .section { padding: 66px 0; }
            .page-hero { min-height: auto; }
            .hero-copy h1 { font-size: clamp(2.2rem, 10vw, 3.25rem); }
            .hero-form { padding: 23px; }
            .trust-strip { margin-top: -21px; }
            .trust-cell { min-height: 92px; padding: 15px; }
            .trust-icon { width: 38px; height: 38px; }
            .feature-grid { grid-template-columns: 1fr; }
            .feature-large { grid-template-columns: 1fr; }
            .feature-large .feature-image { min-height: 210px; }
            .feature-side { grid-template-columns: 128px 1fr; }
            .security-panel { padding: 30px; }
            .guard-grid { gap: 12px; }
            .guard-card { padding: 19px; min-height: 150px; }
            .footer-bottom { flex-direction: column; gap: 8px; }
        }
        @media (max-width: 520px) {
            :root { --nav-h: 121px; }
            .container-custom { width: min(100% - 24px, var(--container)); }
            .brand-text { max-width: 161px; }
            .brand-text strong { font-size: .89rem; }
            .brand-text span { font-size: .68rem; }
            .brand-mark { width: 37px; height: 37px; }
            .nav-actions { gap: 6px; }
            .nav-actions .btn { min-height: 38px; padding: 7px 11px; font-size: .78rem; }
            .nav-link-custom { min-height: 37px; padding: 8px 11px; }
            .hero-grid { padding: 46px 0 52px; }
            .hero-points { display: grid; gap: 8px; }
            .trust-inner { grid-template-columns: 1fr; }
            .trust-cell, .trust-cell:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line-soft); }
            .trust-cell:last-child { border-bottom: 0; }
            .image-frame { min-height: 310px; }
            .feature-side { grid-template-columns: 106px 1fr; }
            .feature-side .feature-body { padding: 16px; }
            .step-item { grid-template-columns: 52px 1fr; gap: 15px; }
            .step-number { width: 52px; height: 52px; border-width: 4px; }
            .step-item:not(:last-child)::before { top: 50px; left: 26px; }
            .guard-grid { grid-template-columns: 1fr; }
            .security-panel { padding: 25px; }
            .footer-grid { grid-template-columns: 1fr; gap: 29px; }
            .footer-grid > :first-child { grid-column: auto; }
            .cta-panel { padding: 44px 21px; }
            .fab-support { width: 53px; height: 53px; bottom: 75px; }
        }

.pricing-grid {
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
            margin-top: 52px;
        }
        .price-card {
            position: relative;
            min-height: 100%;
            padding: 28px;
            border: 1px solid var(--line-soft);
            border-radius: var(--radius);
            background: rgba(8, 37, 23, .72);
            transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
        }
        .price-card:hover {
            transform: translateY(-6px);
            border-color: rgba(255, 215, 0, .55);
            box-shadow: var(--shadow);
        }
        .price-card.featured {
            border-color: rgba(255, 215, 0, .7);
            background: linear-gradient(155deg, rgba(255, 215, 0, .15), rgba(14, 53, 32, .92) 50%);
            box-shadow: var(--shadow-gold);
        }
        .price-card h3 {
            margin: 16px 0 6px;
            color: var(--text);
            font-size: 1.3rem;
            font-weight: 850;
        }
        .price {
            margin: 0 0 20px;
            color: var(--gold);
            font-size: 2rem;
            font-weight: 900;
            letter-spacing: -.04em;
        }
        .price-card ul {
            display: grid;
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
            color: var(--muted);
            font-size: .94rem;
        }
        .price-card li {
            position: relative;
            padding-left: 24px;
        }
        .price-card li::before {
            position: absolute;
            top: 5px;
            left: 0;
            width: 14px;
            height: 14px;
            content: "✓";
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #092217;
            background: var(--gold);
            font-size: .66rem;
            font-weight: 900;
        }
        .security-section {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 92% 15%, rgba(255, 215, 0, .12), transparent 26%),
                linear-gradient(135deg, rgba(7, 31, 20, .95), rgba(18, 62, 37, .8));
            border-top: 1px solid var(--line-soft);
            border-bottom: 1px solid var(--line-soft);
        }
        .security-section::after {
            position: absolute;
            width: 390px;
            height: 390px;
            right: -160px;
            bottom: -185px;
            content: "";
            border: 1px solid rgba(255, 215, 0, .15);
            border-radius: 50%;
            box-shadow: 0 0 0 48px rgba(255, 215, 0, .025), 0 0 0 96px rgba(255, 215, 0, .018);
            pointer-events: none;
        }
        .security-layout {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(260px, .86fr) minmax(400px, 1.14fr);
            gap: 70px;
            align-items: center;
        }
        .security-panel h2 {
            max-width: 530px;
            margin: 14px 0 18px;
            color: var(--text);
            font-size: clamp(2rem, 3.1vw, 3.35rem);
            line-height: 1.12;
            letter-spacing: -.045em;
            font-weight: 900;
        }
        .security-panel > p {
            max-width: 545px;
            margin: 0;
            color: var(--muted);
            font-size: 1.03rem;
        }
        .payment-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 28px;
        }
        .payment-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 8px 13px;
            border: 1px solid rgba(255, 215, 0, .32);
            border-radius: 999px;
            color: var(--gold-soft);
            background: rgba(255, 215, 0, .07);
            font-size: .88rem;
            font-weight: 800;
        }
        .payment-badge i {
            color: var(--gold);
        }
        .guard-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }
        .guard-card {
            min-height: 192px;
            padding: 23px;
            border: 1px solid var(--line-soft);
            border-radius: var(--radius-sm);
            background: rgba(3, 24, 14, .48);
            transition: transform .22s ease, border-color .22s ease, background .22s ease;
        }
        .guard-card:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 215, 0, .48);
            background: rgba(11, 58, 34, .72);
        }
        .guard-card > i {
            display: grid;
            width: 40px;
            height: 40px;
            place-items: center;
            margin-bottom: 16px;
            border-radius: 12px;
            color: #092217;
            background: linear-gradient(135deg, #fff0a4, var(--gold));
            font-size: 1.05rem;
        }
        .guard-card h3 {
            margin: 0 0 8px;
            color: var(--text);
            font-size: 1.02rem;
            font-weight: 850;
        }
        .guard-card p {
            margin: 0;
            color: var(--muted);
            font-size: .9rem;
            line-height: 1.58;
        }
        .scenario-section {
            position: relative;
        }
        .scenario-layout {
            display: grid;
            grid-template-columns: minmax(260px, .85fr) minmax(430px, 1.15fr);
            gap: 82px;
            align-items: start;
        }
        .scenario-layout h2 {
            max-width: 475px;
            margin: 14px 0 18px;
            color: var(--text);
            font-size: clamp(2rem, 3vw, 3.15rem);
            line-height: 1.12;
            letter-spacing: -.04em;
            font-weight: 900;
        }
        .section-lead {
            max-width: 470px;
            margin: 0;
            color: var(--muted);
            font-size: 1.03rem;
        }
        .scenario-list {
            border-top: 1px solid var(--line-soft);
        }
        .scenario-item {
            display: grid;
            grid-template-columns: 62px 1fr;
            gap: 20px;
            padding: 23px 0;
            border-bottom: 1px solid var(--line-soft);
            transition: padding-left .22s ease, background .22s ease;
        }
        .scenario-item:hover {
            padding-left: 12px;
            background: linear-gradient(90deg, rgba(255, 215, 0, .07), transparent);
        }
        .scenario-item > span {
            display: grid;
            width: 48px;
            height: 48px;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: 15px;
            color: var(--gold);
            background: rgba(255, 215, 0, .07);
            font-size: .91rem;
            font-weight: 900;
        }
        .scenario-item h3 {
            margin: 0 0 6px;
            color: var(--text);
            font-size: 1.13rem;
            font-weight: 850;
        }
        .scenario-item p {
            margin: 0;
            color: var(--muted);
            font-size: .96rem;
        }
        .case-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 52px;
            padding-top: 25px;
            border-top: 1px solid var(--line-soft);
        }
        .case-card {
            display: grid;
            grid-template-columns: 42px 1fr;
            column-gap: 13px;
            align-items: center;
            padding: 17px 12px 17px 0;
            border-right: 1px solid var(--line-soft);
        }
        .case-card:last-child {
            border-right: 0;
        }
        .case-card i {
            grid-row: span 2;
            display: grid;
            width: 39px;
            height: 39px;
            place-items: center;
            border-radius: 50%;
            color: #092217;
            background: var(--gold);
        }
        .case-card strong {
            color: var(--gold-soft);
            font-size: 1.05rem;
            font-weight: 900;
        }
        .case-card span {
            color: var(--muted);
            font-size: .83rem;
            line-height: 1.45;
        }
        .faq-layout {
            display: grid;
            grid-template-columns: minmax(270px, .72fr) minmax(480px, 1.28fr);
            gap: 80px;
            align-items: start;
        }
        .faq-intro {
            position: sticky;
            top: 105px;
        }
        .faq-intro h2 {
            margin: 14px 0 18px;
            color: var(--text);
            font-size: clamp(2rem, 2.85vw, 3.05rem);
            line-height: 1.13;
            letter-spacing: -.04em;
            font-weight: 900;
        }
        .faq-intro p {
            margin: 0;
            color: var(--muted);
            font-size: 1rem;
        }
        .faq-list {
            border-top: 1px solid var(--line-soft);
        }
        .faq-item {
            border-bottom: 1px solid var(--line-soft);
        }
        .faq-button {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 23px 0;
            border: 0;
            color: var(--text);
            background: transparent;
            text-align: left;
            font-size: 1.05rem;
            font-weight: 850;
            cursor: pointer;
        }
        .faq-button:hover,
        .faq-button:focus {
            color: var(--gold);
        }
        .faq-button:focus-visible {
            outline: 3px solid rgba(255, 215, 0, .45);
            outline-offset: 3px;
        }
        .faq-button i {
            flex: 0 0 auto;
            display: grid;
            width: 28px;
            height: 28px;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: 50%;
            color: var(--gold);
            font-size: .77rem;
            transition: transform .22s ease, background .22s ease;
        }
        .faq-button[aria-expanded="true"] i {
            transform: rotate(45deg);
            color: #092217;
            background: var(--gold);
        }
        .faq-answer {
            max-width: 720px;
            padding: 0 42px 23px 0;
            color: var(--muted);
            font-size: .98rem;
        }
        .cta-wrap {
            padding-top: 48px;
            padding-bottom: 88px;
        }
        .cta-panel {
            position: relative;
            overflow: hidden;
            padding: 65px clamp(26px, 7vw, 92px);
            border: 1px solid rgba(255, 215, 0, .48);
            border-radius: var(--radius-lg);
            background:
                linear-gradient(100deg, rgba(9, 45, 27, .97) 0%, rgba(12, 62, 37, .9) 58%, rgba(116, 72, 3, .72) 100%),
                url("/assets/images/backpic/back-3.jpg") center/cover;
            text-align: center;
            box-shadow: var(--shadow), var(--shadow-gold);
        }
        .cta-panel::before,
        .cta-panel::after {
            position: absolute;
            content: "";
            border-radius: 50%;
            pointer-events: none;
        }
        .cta-panel::before {
            width: 260px;
            height: 260px;
            top: -168px;
            left: -60px;
            border: 1px solid rgba(255, 215, 0, .25);
            box-shadow: 0 0 0 38px rgba(255, 215, 0, .035);
        }
        .cta-panel::after {
            width: 180px;
            height: 180px;
            right: -68px;
            bottom: -105px;
            background: rgba(255, 215, 0, .10);
            filter: blur(5px);
        }
        .cta-panel > * {
            position: relative;
            z-index: 1;
        }
        .cta-panel .eyebrow {
            justify-content: center;
        }
        .cta-panel h2 {
            max-width: 800px;
            margin: 15px auto 18px;
            color: var(--text);
            font-size: clamp(2rem, 3.5vw, 3.45rem);
            line-height: 1.1;
            letter-spacing: -.05em;
            font-weight: 900;
        }
        .cta-panel p {
            max-width: 675px;
            margin: 0 auto;
            color: var(--mint);
            font-size: 1.04rem;
        }
        .cta-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-top: 29px;
        }
        .site-footer {
            padding: 62px 0 24px;
            border-top: 1px solid var(--line);
            background: #061b12;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.6fr .85fr 1fr;
            gap: 48px;
            padding-bottom: 44px;
        }
        .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            color: var(--text);
            font-size: 1.12rem;
            font-weight: 900;
        }
        .footer-brand .brand-mark {
            width: 38px;
            height: 38px;
            box-shadow: 0 0 0 3px rgba(255, 215, 0, .10);
        }
        .footer-text {
            max-width: 490px;
            margin: 19px 0 0;
            color: var(--muted);
            font-size: .93rem;
            line-height: 1.65;
        }
        .footer-title {
            margin: 7px 0 15px;
            color: var(--gold-soft);
            font-size: .88rem;
            font-weight: 900;
            letter-spacing: .04em;
            text-transform: uppercase;
        }
        .footer-links {
            display: grid;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
            color: var(--muted);
            font-size: .91rem;
        }
        .footer-links a:hover {
            color: var(--gold);
        }
        .age-badge {
            display: inline-grid;
            min-width: 30px;
            min-height: 21px;
            place-items: center;
            margin-right: 5px;
            border: 1px solid var(--gold);
            border-radius: 6px;
            color: var(--gold);
            font-size: .72rem;
            font-weight: 900;
            vertical-align: middle;
        }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding-top: 22px;
            border-top: 1px solid var(--line-soft);
            color: rgba(184, 220, 207, .72);
            font-size: .8rem;
        }
        .fab-support {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 1030;
            display: grid;
            width: 58px;
            height: 58px;
            place-items: center;
            border: 2px solid var(--gold);
            border-radius: 50%;
            color: #092217;
            background:
                radial-gradient(circle at 34% 28%, #fff6ba 0%, var(--gold) 42%, #b57a00 100%);
            box-shadow: 0 6px 24px rgba(255, 215, 0, .32), inset 0 2px 3px rgba(255, 255, 255, .62);
            font-size: 1.28rem;
            opacity: .78;
            animation: royalFloat 2.8s ease-in-out infinite;
        }
        .fab-support::after {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 10px;
            height: 10px;
            content: "";
            border: 2px solid #7d0710;
            border-radius: 50%;
            background: var(--red);
            box-shadow: 0 0 10px rgba(211, 47, 47, .9);
            animation: alertPulse 1.2s infinite;
        }
        .fab-support:hover {
            color: #092217;
            opacity: 1;
            transform: scale(1.1);
        }
        .fab-support:hover i {
            animation: supportSpin .5s ease;
        }
        .fab-support:active {
            transform: translateY(2px) scale(.95);
        }
        @keyframes royalFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }
        @keyframes alertPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .4; transform: scale(.72); }
        }
        @keyframes supportSpin {
            to { transform: rotate(360deg); }
        }
        @media (max-width: 1100px) {
            .nav-main {
                gap: 2px;
            }
            .nav-link-custom {
                padding-inline: 10px;
                font-size: .84rem;
            }
            .nav-actions .btn {
                min-height: 40px;
                padding-inline: 13px;
                font-size: .87rem;
            }
            .security-layout,
            .scenario-layout,
            .faq-layout {
                gap: 45px;
            }
        }
        @media (max-width: 991.98px) {
            :root {
                --nav-h: auto;
            }
            .site-header {
                position: sticky;
            }
            .nav-wrap {
                flex-wrap: wrap;
                justify-content: center;
                padding: 10px 0;
                gap: 9px 14px;
            }
            .brand {
                margin-right: auto;
            }
            .nav-main {
                order: 3;
                width: 100%;
                overflow-x: auto;
                justify-content: flex-start;
                scrollbar-width: none;
            }
            .nav-main::-webkit-scrollbar {
                display: none;
            }
            .nav-actions {
                margin-left: auto;
            }
            .nav-actions .btn {
                min-height: 38px;
                padding-inline: 11px;
                font-size: .79rem;
            }
            .page-hero {
                padding-top: 70px;
            }
            .hero-grid,
            .security-layout,
            .scenario-layout,
            .faq-layout {
                grid-template-columns: 1fr;
            }
            .hero-copy {
                max-width: 760px;
            }
            .hero-form-wrap {
                max-width: 650px;
            }
            .process-layout {
                grid-template-columns: 1fr;
                gap: 38px;
            }
            .process-intro {
                max-width: 620px;
            }
            .security-panel {
                max-width: 680px;
            }
            .faq-intro {
                position: static;
                max-width: 690px;
            }
            .feature-grid {
                grid-template-columns: 1fr;
            }
            .feature-stack {
                grid-template-columns: repeat(2, 1fr);
            }
            .feature-side {
                display: block;
            }
            .feature-side .feature-image {
                width: 100%;
                height: 170px;
            }
        }
        @media (max-width: 767.98px) {
            .container-custom {
                width: min(100% - 24px, var(--container));
            }
            .brand-text {
                max-width: 184px;
            }
            .brand-text strong {
                font-size: .88rem;
            }
            .brand-text span {
                font-size: .68rem;
            }
            .brand-mark {
                width: 37px;
                height: 37px;
            }
            .nav-actions {
                gap: 6px;
            }
            .nav-actions .btn {
                min-height: 36px;
                padding: 8px 9px;
                font-size: .72rem;
            }
            .nav-link-custom {
                min-height: 36px;
                padding: 8px 11px;
                font-size: .8rem;
            }
            .page-hero {
                padding: 54px 0 50px;
            }
            .hero-copy h1 {
                font-size: clamp(2.25rem, 10vw, 3.25rem);
            }
            .hero-copy p {
                font-size: .98rem;
            }
            .hero-form-wrap {
                padding: 6px;
            }
            .hero-form {
                padding: 23px 19px;
            }
            .trust-inner {
                grid-template-columns: repeat(2, 1fr);
            }
            .trust-cell {
                min-height: 95px;
                padding: 15px 12px;
            }
            .trust-cell strong {
                font-size: .82rem;
            }
            .trust-cell span:not(.trust-icon) {
                font-size: .72rem;
            }
            .section {
                padding: 68px 0;
            }
            .intro-layout {
                grid-template-columns: 1fr;
                gap: 34px;
            }
            .image-frame {
                max-width: 560px;
            }
            .content-copy h2,
            .process-intro h2,
            .section-heading h2,
            .security-panel h2,
            .scenario-layout h2,
            .faq-intro h2 {
                font-size: clamp(1.9rem, 8vw, 2.55rem);
            }
            .feature-stack {
                grid-template-columns: 1fr;
            }
            .pricing-grid,
            .case-row {
                grid-template-columns: 1fr;
            }
            .price-card {
                padding: 24px;
            }
            .guard-grid {
                grid-template-columns: 1fr;
            }
            .guard-card {
                min-height: auto;
            }
            .case-row {
                gap: 0;
            }
            .case-card {
                border-right: 0;
                border-bottom: 1px solid var(--line-soft);
            }
            .case-card:last-child {
                border-bottom: 0;
            }
            .scenario-layout,
            .faq-layout {
                gap: 35px;
            }
            .faq-answer {
                padding-right: 8px;
                font-size: .93rem;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }
            .footer-bottom {
                flex-direction: column;
                gap: 7px;
            }
        }
        @media (max-width: 519.98px) {
            .brand-text {
                max-width: 145px;
            }
            .brand-text strong {
                font-size: .8rem;
            }
            .brand-text span {
                display: none;
            }
            .nav-actions .btn:first-child {
                display: none;
            }
            .nav-actions .btn {
                padding-inline: 10px;
                font-size: .71rem;
            }
            .hero-points {
                grid-template-columns: 1fr;
            }
            .trust-inner {
                grid-template-columns: 1fr;
            }
            .trust-cell {
                min-height: auto;
            }
            .image-frame img {
                height: 245px;
            }
            .feature-image,
            .feature-side .feature-image {
                height: 190px;
            }
            .step-item {
                grid-template-columns: 47px 1fr;
                gap: 13px;
                padding: 17px 0;
            }
            .step-number {
                width: 39px;
                height: 39px;
                font-size: .76rem;
            }
            .step-content h3 {
                font-size: 1rem;
            }
            .step-content p {
                font-size: .9rem;
            }
            .scenario-item {
                grid-template-columns: 48px 1fr;
                gap: 13px;
            }
            .scenario-item > span {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                font-size: .77rem;
            }
            .faq-button {
                padding: 19px 0;
                font-size: .95rem;
            }
            .cta-actions {
                flex-direction: column;
            }
            .cta-actions .btn {
                width: 100%;
            }
            .cta-panel {
                border-radius: 25px;
            }
        }

/* roulang page: category3 */
:root {
            --bg-deep: #0A2E1C;
            --bg-forest: #123E25;
            --bg-card: rgba(14, 53, 32, .86);
            --bg-soft: #0f3523;
            --gold: #FFD700;
            --gold-soft: #FEF08A;
            --amber: #FFB703;
            --red: #D32F2F;
            --mint: #D1F2EB;
            --text: #FFFFFF;
            --muted: #B8DCCF;
            --line: rgba(255, 215, 0, .24);
            --line-soft: rgba(209, 242, 235, .15);
            --shadow: 0 22px 60px rgba(0, 0, 0, .35);
            --shadow-gold: 0 16px 42px rgba(255, 215, 0, .18);
            --radius: 24px;
            --radius-lg: 34px;
            --radius-sm: 14px;
            --container: 1180px;
            --nav-h: 76px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 20% 10%, rgba(255, 215, 0, .10), transparent 34%),
                radial-gradient(circle at 86% 22%, rgba(211, 47, 47, .10), transparent 30%),
                linear-gradient(180deg, #071f14 0%, var(--bg-deep) 42%, #061b12 100%);
            line-height: 1.62;
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
        }

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

        button,
        input {
            font: inherit;
        }

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

        .site-header {
            position: fixed;
            inset: 0 0 auto;
            z-index: 1040;
            min-height: var(--nav-h);
            background: rgba(7, 31, 20, .82);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
        }

        .nav-wrap {
            min-height: var(--nav-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            font-weight: 900;
            color: var(--text);
            letter-spacing: 0;
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #082014;
            background: radial-gradient(circle at 35% 30%, #fff6b0 0%, var(--gold) 44%, #b98000 100%);
            box-shadow: 0 0 0 4px rgba(255, 215, 0, .12), 0 10px 24px rgba(255, 215, 0, .22);
        }

        .brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.08;
            max-width: 240px;
        }

        .brand-text strong {
            font-size: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .brand-text span {
            color: var(--gold-soft);
            font-size: .78rem;
            font-weight: 700;
        }

        .nav-main {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border: 1px solid var(--line-soft);
            border-radius: 999px;
            background: rgba(255, 255, 255, .045);
        }

        .nav-link-custom {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 40px;
            padding: 9px 14px;
            border-radius: 999px;
            color: var(--mint);
            font-weight: 750;
            font-size: .93rem;
            white-space: nowrap;
        }

        .nav-link-custom:hover,
        .nav-link-custom:focus {
            color: var(--gold);
            background: rgba(255, 215, 0, .09);
        }

        .nav-link-custom.active {
            color: #092217;
            background: var(--gold);
            box-shadow: 0 8px 24px rgba(255, 215, 0, .25);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
        }

        .btn {
            border-radius: 999px;
            font-weight: 850;
            letter-spacing: 0;
            border-width: 1px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
        }

        .btn:focus-visible,
        .nav-link-custom:focus-visible,
        .fab-support:focus-visible,
        .topic-pill:focus-visible,
        .form-control:focus {
            outline: 3px solid rgba(255, 215, 0, .55);
            outline-offset: 3px;
            box-shadow: none;
        }

        .btn:active {
            transform: translateY(1px) scale(.98);
        }

        .btn-gold {
            color: #092217;
            background: linear-gradient(135deg, #fff3a0 0%, var(--gold) 46%, #c88a00 100%);
            border-color: rgba(255, 215, 0, .8);
            box-shadow: var(--shadow-gold);
        }

        .btn-gold:hover {
            color: #061b12;
            box-shadow: 0 20px 48px rgba(255, 215, 0, .30);
            transform: translateY(-2px);
        }

        .btn-ghost {
            color: var(--gold-soft);
            background: transparent;
            border-color: rgba(255, 215, 0, .24);
        }

        .btn-ghost:hover {
            color: var(--text);
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 215, 0, .46);
        }

        .btn-red {
            color: #fff;
            background: linear-gradient(135deg, #ee524b 0%, var(--red) 100%);
            border-color: rgba(255, 255, 255, .12);
            box-shadow: 0 16px 36px rgba(211, 47, 47, .24);
        }

        .btn-red:hover {
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 20px 48px rgba(211, 47, 47, .32);
        }

        .page-shell {
            padding-top: var(--nav-h);
        }

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

        .section-tight {
            padding: 58px 0;
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--gold-soft);
            font-weight: 850;
            font-size: .86rem;
            padding: 7px 12px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: rgba(255, 215, 0, .08);
            margin-bottom: 16px;
        }

        .section-title {
            font-size: clamp(2rem, 4vw, 3.35rem);
            line-height: 1.08;
            font-weight: 950;
            letter-spacing: 0;
            margin: 0 0 18px;
        }

        .section-lead {
            color: var(--muted);
            font-size: 1.06rem;
            max-width: 760px;
            margin: 0;
        }

        .payment-hero {
            min-height: 690px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(5, 20, 13, .96) 0%, rgba(8, 34, 21, .88) 42%, rgba(8, 34, 21, .50) 100%),
                url("/assets/images/backpic/back-2.jpg") center/cover no-repeat;
            border-bottom: 1px solid var(--line);
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
            gap: 42px;
            align-items: center;
            padding: 76px 0 58px;
        }

        .hero-copy {
            max-width: 720px;
        }

        .hero-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 18px;
        }

        .badge-soft {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border-radius: 999px;
            padding: 8px 12px;
            color: var(--mint);
            background: rgba(255, 255, 255, .075);
            border: 1px solid var(--line-soft);
            font-weight: 800;
            font-size: .88rem;
        }

        .badge-hot {
            color: #300a0a;
            background: linear-gradient(135deg, #fff0a0, var(--gold));
            border-color: rgba(255, 215, 0, .74);
        }

        .payment-hero h1 {
            font-size: clamp(2.35rem, 6vw, 5.15rem);
            line-height: .98;
            font-weight: 950;
            margin: 0 0 22px;
            letter-spacing: 0;
        }

        .hero-subtitle {
            color: var(--mint);
            font-size: clamp(1.02rem, 2vw, 1.22rem);
            max-width: 660px;
            margin-bottom: 28px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px;
        }

        .poster-panel {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            min-height: 535px;
            border: 1px solid rgba(255, 215, 0, .38);
            box-shadow: var(--shadow), 0 0 60px rgba(255, 215, 0, .12);
            background: #0b2418;
            isolation: isolate;
        }

        .poster-panel img {
            width: 100%;
            height: 535px;
            object-fit: cover;
            filter: saturate(1.08) contrast(1.08);
        }

        .poster-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 22%, rgba(4, 17, 11, .42) 56%, rgba(4, 17, 11, .94) 100%);
            z-index: 1;
        }

        .poster-content {
            position: absolute;
            left: 24px;
            right: 24px;
            bottom: 24px;
            z-index: 2;
        }

        .poster-title {
            font-size: 1.42rem;
            font-weight: 950;
            margin-bottom: 10px;
        }

        .poster-meta {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 16px;
        }

        .meta-chip {
            padding: 11px 12px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .10);
            border: 1px solid rgba(255, 255, 255, .16);
            backdrop-filter: blur(10px);
        }

        .meta-chip strong {
            display: block;
            color: var(--gold);
            font-size: 1.05rem;
            line-height: 1.1;
        }

        .meta-chip span {
            color: var(--mint);
            font-size: .78rem;
            font-weight: 750;
        }

        .floating-heat {
            position: absolute;
            top: 22px;
            right: 22px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 14px;
            border-radius: 999px;
            color: #fff;
            background: linear-gradient(135deg, var(--red), #9f1717);
            border: 1px solid rgba(255, 255, 255, .22);
            box-shadow: 0 16px 34px rgba(211, 47, 47, .34);
            font-weight: 900;
        }

        .value-strip {
            margin-top: -42px;
            position: relative;
            z-index: 5;
        }

        .strip-inner {
            display: grid;
            grid-template-columns: 1.1fr repeat(3, .8fr);
            gap: 14px;
            padding: 18px;
            border-radius: var(--radius);
            background: rgba(11, 44, 28, .92);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            backdrop-filter: blur(18px);
        }

        .strip-item {
            padding: 16px 18px;
            border-radius: 18px;
            background: rgba(255, 255, 255, .055);
            border: 1px solid var(--line-soft);
        }

        .strip-item strong {
            display: block;
            color: var(--gold);
            font-size: 1.35rem;
            line-height: 1.1;
            margin-bottom: 4px;
        }

        .strip-item span {
            color: var(--muted);
            font-weight: 700;
            font-size: .92rem;
        }

        .feature-layout {
            display: grid;
            grid-template-columns: .78fr 1.22fr;
            gap: 36px;
            align-items: start;
        }

        .feature-panel {
            position: sticky;
            top: calc(var(--nav-h) + 24px);
            padding: 30px;
            border-radius: var(--radius);
            background:
                linear-gradient(145deg, rgba(255, 215, 0, .12), rgba(14, 53, 32, .86)),
                url("/assets/images/coverpic/cover-5.jpg") center/cover no-repeat;
            border: 1px solid var(--line);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .feature-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(7, 31, 20, .30), rgba(7, 31, 20, .92));
        }

        .feature-panel > * {
            position: relative;
            z-index: 1;
        }

        .feature-panel h2 {
            font-size: clamp(1.8rem, 3vw, 2.55rem);
            line-height: 1.12;
            font-weight: 950;
            margin-bottom: 14px;
        }

        .feature-panel p {
            color: var(--mint);
            margin-bottom: 22px;
        }

        .method-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
        }

        .method-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #092217;
            background: var(--gold);
            border-radius: 999px;
            padding: 8px 12px;
            font-size: .84rem;
            font-weight: 900;
        }

        .feature-stack {
            display: grid;
            gap: 16px;
        }

        .feature-card {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 18px;
            align-items: center;
            padding: 22px;
            border-radius: var(--radius);
            background: rgba(255, 255, 255, .055);
            border: 1px solid var(--line-soft);
            transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
        }

        .feature-card:hover {
            transform: translateY(-4px);
            border-color: var(--line);
            background: rgba(255, 255, 255, .075);
            box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
        }

        .icon-box {
            width: 56px;
            height: 56px;
            display: grid;
            place-items: center;
            border-radius: 18px;
            color: #092217;
            background: linear-gradient(135deg, #fff7b7, var(--gold));
            box-shadow: 0 12px 28px rgba(255, 215, 0, .20);
            font-size: 1.25rem;
        }

        .feature-card h3 {
            font-size: 1.15rem;
            font-weight: 930;
            margin: 0 0 5px;
        }

        .feature-card p {
            color: var(--muted);
            margin: 0;
        }

        .feature-arrow {
            color: var(--gold-soft);
        }

        .scenario-zone {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
                rgba(0, 0, 0, .10);
            border-block: 1px solid var(--line-soft);
        }

        .scenario-grid {
            display: grid;
            grid-template-columns: 1.12fr .88fr;
            gap: 34px;
            align-items: center;
        }

        .scenario-list {
            display: grid;
            gap: 14px;
            margin-top: 28px;
        }

        .scenario-item {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--line-soft);
        }

        .scenario-item:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .scenario-item i {
            width: 38px;
            height: 38px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--gold);
            background: rgba(255, 215, 0, .10);
            border: 1px solid var(--line);
        }

        .scenario-item h3 {
            font-size: 1.08rem;
            font-weight: 900;
            margin: 0 0 5px;
        }

        .scenario-item p {
            margin: 0;
            color: var(--muted);
        }

        .phone-ledger {
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, rgba(6, 27, 18, .96), rgba(18, 62, 37, .86));
            border: 1px solid var(--line);
            padding: 24px;
            box-shadow: var(--shadow);
        }

        .ledger-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 18px;
        }

        .ledger-title {
            font-weight: 950;
            font-size: 1.2rem;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--mint);
            border: 1px solid rgba(50, 205, 50, .35);
            background: rgba(50, 205, 50, .10);
            border-radius: 999px;
            padding: 7px 10px;
            font-size: .82rem;
            font-weight: 850;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #32cd32;
            box-shadow: 0 0 12px rgba(50, 205, 50, .8);
        }

        .ledger-row {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 15px 0;
            border-bottom: 1px solid var(--line-soft);
        }

        .ledger-row:last-child {
            border-bottom: 0;
        }

        .ledger-row span {
            color: var(--muted);
        }

        .ledger-row strong {
            color: var(--gold-soft);
            text-align: right;
        }

        .proof-grid {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 32px;
            align-items: stretch;
        }

        .proof-image {
            min-height: 430px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            position: relative;
        }

        .proof-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .proof-image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent, rgba(7, 31, 20, .64));
        }

        .proof-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .case-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
            margin-top: 26px;
        }

        .case-card {
            padding: 20px;
            border-radius: var(--radius);
            background: rgba(255, 255, 255, .055);
            border: 1px solid var(--line-soft);
        }

        .case-card strong {
            display: block;
            color: var(--gold);
            font-size: 1.5rem;
            line-height: 1.1;
            margin-bottom: 8px;
        }

        .case-card span {
            color: var(--muted);
        }

        .pricing-wrap {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 30px;
            align-items: center;
        }

        .price-table {
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .055);
            box-shadow: var(--shadow);
        }

        .price-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 18px;
            padding: 18px 20px;
            border-bottom: 1px solid var(--line-soft);
        }

        .price-row:last-child {
            border-bottom: 0;
        }

        .price-row span {
            color: var(--muted);
        }

        .price-row strong {
            color: var(--gold-soft);
            white-space: nowrap;
        }

        .notice-box {
            padding: 24px;
            border-radius: var(--radius);
            background: linear-gradient(145deg, rgba(211, 47, 47, .16), rgba(255, 215, 0, .08));
            border: 1px solid rgba(255, 215, 0, .28);
        }

        .notice-box h3 {
            font-size: 1.28rem;
            font-weight: 950;
            margin-bottom: 10px;
        }

        .notice-box p {
            color: var(--mint);
            margin-bottom: 0;
        }

        .faq-wrap {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 34px;
            align-items: start;
        }

        .accordion {
            display: grid;
            gap: 12px;
        }

        .accordion-item {
            color: var(--text);
            background: rgba(255, 255, 255, .055);
            border: 1px solid var(--line-soft);
            border-radius: var(--radius) !important;
            overflow: hidden;
        }

        .accordion-button {
            color: var(--text);
            background: transparent;
            font-weight: 900;
            padding: 20px 22px;
            border-radius: var(--radius) !important;
            box-shadow: none;
        }

        .accordion-button:not(.collapsed) {
            color: var(--gold);
            background: rgba(255, 215, 0, .08);
            box-shadow: none;
        }

        .accordion-button:focus {
            border-color: var(--line);
            box-shadow: 0 0 0 .25rem rgba(255, 215, 0, .16);
        }

        .accordion-button::after {
            filter: invert(1);
        }

        .accordion-body {
            color: var(--muted);
            padding: 0 22px 22px;
        }

        .cta-band {
            padding: 46px;
            border-radius: var(--radius-lg);
            background:
                linear-gradient(135deg, rgba(255, 215, 0, .17), rgba(211, 47, 47, .13)),
                url("/assets/images/backpic/back-3.jpg") center/cover no-repeat;
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            overflow: hidden;
            position: relative;
        }

        .cta-band::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(7, 31, 20, .94), rgba(7, 31, 20, .70));
        }

        .cta-content {
            position: relative;
            z-index: 1;
            max-width: 790px;
        }

        .cta-content h2 {
            font-size: clamp(1.95rem, 4vw, 3.15rem);
            line-height: 1.12;
            font-weight: 950;
            margin-bottom: 14px;
        }

        .cta-content p {
            color: var(--mint);
            margin-bottom: 24px;
        }

        .topic-pill {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-height: 42px;
            padding: 9px 14px;
            border-radius: 999px;
            border: 1px solid var(--line);
            color: var(--gold-soft);
            background: rgba(255, 215, 0, .08);
            font-weight: 850;
        }

        .fab-support {
            position: fixed;
            left: 1rem;
            bottom: 6rem;
            z-index: 1050;
            width: 62px;
            height: 62px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #082014;
            background:
                radial-gradient(circle at 35% 28%, #fff9c4 0%, #ffd700 42%, #946300 100%);
            border: 3px solid #FFD700;
            box-shadow: 0 4px 20px rgba(255, 215, 0, .30), inset 0 2px 8px rgba(255, 255, 255, .55);
            opacity: .72;
            animation: floatFab 3.4s ease-in-out infinite;
        }

        .fab-support::after {
            content: "";
            position: absolute;
            top: 7px;
            right: 7px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #D32F2F;
            border: 2px solid #ffcfcb;
            box-shadow: 0 0 0 2px rgba(211, 47, 47, .25);
            animation: blinkDot 1.3s infinite;
        }

        .fab-support i {
            font-size: 1.35rem;
            transition: transform .35s ease;
        }

        .fab-support:hover {
            opacity: 1;
            color: #082014;
            transform: scale(1.1);
            box-shadow: 0 6px 28px rgba(255, 215, 0, .48), inset 0 2px 8px rgba(255, 255, 255, .55);
        }

        .fab-support:hover i {
            transform: rotate(360deg);
        }

        .fab-support:active {
            transform: translateY(2px) scale(.95);
        }

        .site-footer {
            padding: 68px 0 26px;
            background: #061b12;
            border-top: 1px solid var(--line);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.35fr .8fr 1fr;
            gap: 42px;
            padding-bottom: 40px;
        }

        .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-size: 1.1rem;
            font-weight: 950;
            margin-bottom: 15px;
        }

        .footer-text {
            color: var(--muted);
            max-width: 500px;
            margin: 0;
        }

        .footer-title {
            color: var(--gold);
            font-size: .92rem;
            font-weight: 950;
            margin-bottom: 14px;
        }

        .footer-links {
            padding: 0;
            margin: 0;
            list-style: none;
            display: grid;
            gap: 10px;
            color: var(--muted);
        }

        .footer-links a:hover {
            color: var(--gold);
        }

        .age-badge {
            display: inline-grid;
            place-items: center;
            min-width: 33px;
            padding: 2px 6px;
            border-radius: 7px;
            color: #270808;
            background: var(--gold);
            font-size: .75rem;
            font-weight: 950;
            margin-right: 4px;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 24px;
            border-top: 1px solid var(--line-soft);
            color: rgba(184, 220, 207, .78);
            font-size: .87rem;
        }

        @keyframes floatFab {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }

        @keyframes blinkDot {
            0%, 100% { opacity: 1; }
            50% { opacity: .25; }
        }

        @media (max-width: 1120px) {
            .nav-link-custom {
                padding-inline: 10px;
                font-size: .85rem;
            }

            .hero-grid,
            .scenario-grid,
            .proof-grid,
            .pricing-wrap,
            .faq-wrap {
                gap: 26px;
            }
        }

        @media (max-width: 1024px) {
            :root {
                --nav-h: 70px;
            }

            .nav-wrap {
                flex-wrap: wrap;
                justify-content: center;
                padding: 9px 0;
            }

            .brand {
                margin-right: auto;
            }

            .nav-main {
                order: 3;
                width: 100%;
                justify-content: center;
                overflow-x: auto;
                scrollbar-width: none;
            }

            .nav-main::-webkit-scrollbar {
                display: none;
            }

            .page-shell {
                padding-top: 126px;
            }

            .payment-hero {
                min-height: auto;
            }

            .hero-grid {
                grid-template-columns: 1fr;
                padding-top: 56px;
            }

            .hero-copy {
                max-width: 850px;
            }

            .poster-panel {
                min-height: 420px;
            }

            .poster-panel img {
                height: 420px;
            }

            .value-strip {
                margin-top: -24px;
            }

            .strip-inner {
                grid-template-columns: repeat(2, 1fr);
            }

            .strip-item:first-child {
                grid-column: span 2;
            }

            .feature-layout {
                grid-template-columns: 1fr;
            }

            .feature-panel {
                position: relative;
                top: auto;
            }
        }

        @media (max-width: 768px) {
            .container-custom {
                width: min(var(--container), calc(100% - 24px));
            }

            .nav-actions .btn-ghost {
                display: none;
            }

            .brand-text {
                max-width: 185px;
            }

            .brand-text strong {
                font-size: .91rem;
            }

            .nav-link-custom {
                min-height: 38px;
                padding: 8px 11px;
            }

            .nav-link-custom i {
                display: none;
            }

            .section {
                padding: 64px 0;
            }

            .section-tight {
                padding: 44px 0;
            }

            .payment-hero h1 {
                font-size: clamp(2.35rem, 12vw, 4rem);
            }

            .hero-grid {
                padding: 42px 0 46px;
            }

            .poster-panel,
            .poster-panel img {
                min-height: 370px;
                height: 370px;
            }

            .poster-content {
                left: 18px;
                right: 18px;
                bottom: 18px;
            }

            .poster-meta {
                gap: 7px;
            }

            .meta-chip {
                padding: 9px;
            }

            .feature-card {
                grid-template-columns: auto 1fr;
            }

            .feature-arrow {
                display: none;
            }

            .scenario-grid,
            .proof-grid,
            .pricing-wrap,
            .faq-wrap {
                grid-template-columns: 1fr;
            }

            .proof-image {
                min-height: 315px;
            }

            .cta-band {
                padding: 32px 24px;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }

            .footer-grid > :first-child {
                grid-column: span 2;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 8px;
            }
        }

        @media (max-width: 520px) {
            .page-shell {
                padding-top: 119px;
            }

            .brand-mark {
                width: 38px;
                height: 38px;
            }

            .brand-text span {
                display: none;
            }

            .nav-actions .btn {
                min-height: 40px;
                min-width: 40px;
                padding: 8px 12px;
                font-size: 0;
            }

            .nav-actions .btn i {
                font-size: 1rem;
            }

            .nav-main {
                justify-content: flex-start;
            }

            .nav-link-custom {
                font-size: .8rem;
                padding-inline: 10px;
            }

            .hero-actions .btn {
                width: 100%;
            }

            .strip-inner {
                grid-template-columns: 1fr;
                padding: 12px;
            }

            .strip-item:first-child {
                grid-column: auto;
            }

            .poster-panel,
            .poster-panel img {
                min-height: 340px;
                height: 340px;
            }

            .floating-heat {
                top: 14px;
                right: 14px;
                padding: 8px 11px;
                font-size: .82rem;
            }

            .poster-title {
                font-size: 1.18rem;
            }

            .meta-chip strong {
                font-size: .9rem;
            }

            .meta-chip span {
                font-size: .68rem;
            }

            .feature-panel,
            .feature-card,
            .case-card {
                padding: 20px;
            }

            .case-list {
                grid-template-columns: 1fr;
            }

            .price-row {
                grid-template-columns: 1fr;
                gap: 4px;
            }

            .price-row strong {
                text-align: left;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .footer-grid > :first-child {
                grid-column: auto;
            }

            .fab-support {
                left: 1rem;
                bottom: 5.5rem;
                width: 56px;
                height: 56px;
            }
        }

/* roulang page: category2 */
:root {
            --bg-deep: #0A2E1C;
            --bg-forest: #123E25;
            --bg-card: rgba(14, 53, 32, .86);
            --bg-soft: #0f3523;
            --gold: #FFD700;
            --gold-soft: #FEF08A;
            --amber: #FFB703;
            --red: #D32F2F;
            --mint: #D1F2EB;
            --text: #FFFFFF;
            --muted: #B8DCCF;
            --line: rgba(255, 215, 0, .24);
            --line-soft: rgba(209, 242, 235, .15);
            --shadow: 0 22px 60px rgba(0, 0, 0, .35);
            --shadow-gold: 0 16px 42px rgba(255, 215, 0, .18);
            --radius: 24px;
            --radius-lg: 34px;
            --radius-sm: 14px;
            --container: 1180px;
            --nav-h: 76px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at 12% 4%, rgba(255,215,0,.11), transparent 25%),
                radial-gradient(circle at 88% 28%, rgba(211,47,47,.09), transparent 28%),
                linear-gradient(180deg, #071f14 0%, var(--bg-deep) 46%, #061b12 100%);
            line-height: 1.62;
            overflow-x: hidden;
        }
        a {
            color: inherit;
            text-decoration: none;
            transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
        }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        ::selection { color: #062014; background: var(--gold); }

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

        .site-header {
            position: fixed;
            top: 0; right: 0; left: 0;
            z-index: 1040;
            min-height: var(--nav-h);
            background: rgba(7,31,20,.84);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
            box-shadow: 0 10px 30px rgba(0,0,0,.22);
        }
        .nav-wrap {
            min-height: var(--nav-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            font-weight: 900;
            color: var(--text);
        }
        .brand-mark {
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #082014;
            background: radial-gradient(circle at 35% 30%, #fff6b0 0%, var(--gold) 44%, #b98000 100%);
            box-shadow: 0 0 0 4px rgba(255,215,0,.12), 0 10px 24px rgba(255,215,0,.22);
        }
        .brand-text {
            display: flex;
            flex-direction: column;
            line-height: 1.08;
            max-width: 245px;
        }
        .brand-text strong {
            font-size: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .brand-text span {
            color: var(--gold-soft);
            font-size: .76rem;
            font-weight: 700;
        }
        .nav-main {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px;
            border: 1px solid var(--line-soft);
            border-radius: 999px;
            background: rgba(255,255,255,.045);
        }
        .nav-link-custom {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 40px;
            padding: 9px 14px;
            border-radius: 999px;
            color: var(--mint);
            font-weight: 750;
            font-size: .9rem;
            white-space: nowrap;
        }
        .nav-link-custom:hover, .nav-link-custom:focus {
            color: var(--gold);
            background: rgba(255,215,0,.09);
        }
        .nav-link-custom.active {
            color: #092217;
            background: var(--gold);
            box-shadow: 0 8px 24px rgba(255,215,0,.25);
        }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 9px;
            flex: 0 0 auto;
        }
        .btn {
            border-radius: 999px;
            font-weight: 850;
            letter-spacing: 0;
            border-width: 1px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
        }
        .btn:focus-visible, .nav-link-custom:focus-visible, .fab-support:focus-visible, .faq-button:focus-visible {
            outline: 3px solid rgba(255,215,0,.58);
            outline-offset: 3px;
        }
        .btn:active { transform: translateY(1px) scale(.98); }
        .btn-gold {
            color: #092217;
            background: linear-gradient(135deg, #fff3a0 0%, var(--gold) 48%, #c88a00 100%);
            border-color: rgba(255,215,0,.8);
            box-shadow: var(--shadow-gold);
        }
        .btn-gold:hover {
            color: #061b12;
            transform: translateY(-2px);
            box-shadow: 0 20px 48px rgba(255,215,0,.3);
        }
        .btn-ghost {
            color: var(--gold-soft);
            border-color: rgba(255,215,0,.28);
            background: rgba(255,255,255,.025);
        }
        .btn-ghost:hover {
            color: var(--text);
            background: rgba(255,255,255,.09);
            border-color: rgba(255,215,0,.54);
        }
        .btn-login {
            color: var(--mint);
            min-height: 40px;
            padding-inline: 10px;
            font-size: .9rem;
        }
        .btn-login:hover { color: var(--gold); }

        main { padding-top: var(--nav-h); }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--gold-soft);
            font-size: .82rem;
            font-weight: 850;
            letter-spacing: .075em;
            text-transform: uppercase;
        }
        .eyebrow i { color: var(--gold); }
        .section {
            position: relative;
            padding: 92px 0;
        }
        .section-heading {
            max-width: 720px;
            margin-bottom: 38px;
        }
        .section-heading h2 {
            margin: 9px 0 12px;
            color: var(--text);
            font-size: clamp(1.8rem, 3vw, 2.7rem);
            line-height: 1.18;
            font-weight: 900;
            letter-spacing: -.035em;
        }
        .section-heading p {
            margin: 0;
            color: var(--muted);
            font-size: 1.02rem;
        }

        .install-hero {
            position: relative;
            isolation: isolate;
            min-height: 620px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(6,27,18,.96) 0%, rgba(6,27,18,.89) 46%, rgba(6,27,18,.55) 100%),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
        }
        .install-hero::after {
            content: "";
            position: absolute;
            z-index: -1;
            width: 460px;
            height: 460px;
            right: -120px;
            top: 55px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,215,0,.18), rgba(255,215,0,0) 68%);
            pointer-events: none;
        }
        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, .94fr) minmax(440px, .86fr);
            gap: 44px;
            align-items: center;
            padding: 78px 0 70px;
        }
        .hero-copy h1 {
            max-width: 720px;
            margin: 14px 0 18px;
            font-size: clamp(2.35rem, 4.5vw, 4.45rem);
            line-height: 1.04;
            font-weight: 950;
            letter-spacing: -.055em;
        }
        .hero-copy h1 span { color: var(--gold); }
        .hero-copy p {
            max-width: 665px;
            margin: 0;
            color: var(--mint);
            font-size: 1.08rem;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 28px;
        }
        .trust-line {
            display: flex;
            flex-wrap: wrap;
            gap: 17px;
            margin-top: 27px;
            color: var(--muted);
            font-size: .89rem;
            font-weight: 700;
        }
        .trust-line span { display: inline-flex; align-items: center; gap: 7px; }
        .trust-line i { color: var(--gold); }

        .choice-panel {
            position: relative;
            padding: 12px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: linear-gradient(145deg, rgba(20,66,40,.94), rgba(7,32,20,.9));
            box-shadow: var(--shadow);
        }
        .choice-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(255,215,0,.12), transparent 36%);
            pointer-events: none;
        }
        .choice-head {
            position: relative;
            padding: 16px 17px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 13px;
        }
        .choice-head strong { display: block; font-size: 1.08rem; }
        .choice-head small { color: var(--muted); font-weight: 650; }
        .choice-flag {
            padding: 5px 10px;
            border-radius: 999px;
            color: #3a2700;
            background: var(--gold);
            font-size: .72rem;
            font-weight: 900;
            white-space: nowrap;
        }
        .choice-option {
            position: relative;
            display: grid;
            grid-template-columns: 48px 1fr auto;
            gap: 13px;
            align-items: center;
            margin-top: 8px;
            padding: 17px;
            border: 1px solid var(--line-soft);
            border-radius: 20px;
            background: rgba(255,255,255,.04);
        }
        .choice-option.recommended {
            border-color: rgba(255,215,0,.72);
            background: linear-gradient(100deg, rgba(255,215,0,.16), rgba(255,255,255,.04));
            box-shadow: inset 0 0 0 1px rgba(255,215,0,.08), 0 10px 24px rgba(0,0,0,.14);
        }
        .choice-icon {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            border-radius: 15px;
            color: var(--gold);
            background: rgba(255,215,0,.1);
            font-size: 1.22rem;
        }
        .choice-option h3 {
            margin: 0 0 3px;
            font-size: 1rem;
            font-weight: 900;
        }
        .choice-option p {
            margin: 0;
            color: var(--muted);
            font-size: .84rem;
            line-height: 1.48;
        }
        .choice-check {
            color: var(--gold);
            font-size: 1.15rem;
        }
        .choice-footer {
            padding: 17px 7px 6px;
            text-align: center;
            color: var(--mint);
            font-size: .84rem;
        }
        .choice-footer i { color: var(--gold); margin-right: 5px; }

        .quick-stats {
            position: relative;
            z-index: 3;
            margin-top: -39px;
        }
        .stats-shell {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            background: rgba(11,47,29,.94);
            box-shadow: var(--shadow);
        }
        .stat-item {
            min-height: 112px;
            padding: 21px 24px;
            border-right: 1px solid var(--line-soft);
        }
        .stat-item:last-child { border-right: 0; }
        .stat-item strong {
            display: block;
            color: var(--gold);
            font-size: 1.45rem;
            line-height: 1.1;
            font-weight: 950;
        }
        .stat-item span { color: var(--muted); font-size: .84rem; font-weight: 650; }

        .device-section { padding-top: 105px; }
        .compat-layout {
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: 65px;
            align-items: center;
        }
        .feature-image {
            position: relative;
            min-height: 470px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }
        .feature-image img {
            width: 100%;
            height: 100%;
            min-height: 470px;
            object-fit: cover;
        }
        .feature-image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 36%, rgba(5,27,17,.78) 100%);
        }
        .image-note {
            position: absolute;
            z-index: 1;
            right: 18px;
            bottom: 18px;
            left: 18px;
            padding: 18px;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 18px;
            background: rgba(7,31,20,.74);
            backdrop-filter: blur(12px);
        }
        .image-note strong { display: block; color: var(--gold-soft); font-size: .95rem; }
        .image-note span { display: block; margin-top: 3px; color: var(--mint); font-size: .84rem; }
        .compat-content h2 {
            margin: 10px 0 14px;
            font-size: clamp(1.9rem, 3.1vw, 2.75rem);
            line-height: 1.17;
            font-weight: 900;
            letter-spacing: -.035em;
        }
        .compat-content > p { color: var(--muted); margin-bottom: 24px; }
        .check-list {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .check-list li {
            display: grid;
            grid-template-columns: 31px 1fr;
            gap: 12px;
            padding: 13px 0;
            border-bottom: 1px solid var(--line-soft);
            color: var(--mint);
        }
        .check-list li:last-child { border-bottom: 0; }
        .check-list i {
            width: 27px;
            height: 27px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: #142611;
            background: var(--gold);
            font-size: .76rem;
        }
        .check-list strong { color: var(--text); }

        .flow-section {
            background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
            border-top: 1px solid rgba(255,255,255,.05);
            border-bottom: 1px solid rgba(255,255,255,.05);
        }
        .flow-layout {
            display: grid;
            grid-template-columns: 285px 1fr;
            gap: 58px;
            align-items: start;
        }
        .side-label {
            position: sticky;
            top: 112px;
        }
        .side-label h2 {
            margin: 9px 0 12px;
            font-size: clamp(1.75rem, 2.8vw, 2.5rem);
            line-height: 1.18;
            font-weight: 900;
        }
        .side-label p { color: var(--muted); margin: 0; }
        .steps-list {
            position: relative;
            padding: 0;
            margin: 0;
            list-style: none;
            counter-reset: install-step;
        }
        .steps-list::before {
            content: "";
            position: absolute;
            top: 29px;
            bottom: 29px;
            left: 29px;
            width: 1px;
            background: linear-gradient(var(--gold), rgba(255,215,0,.08));
        }
        .step-item {
            position: relative;
            display: grid;
            grid-template-columns: 60px 1fr;
            gap: 20px;
            padding: 0 0 25px;
        }
        .step-item:last-child { padding-bottom: 0; }
        .step-no {
            position: relative;
            z-index: 1;
            width: 59px;
            height: 59px;
            display: grid;
            place-items: center;
            border: 1px solid var(--gold);
            border-radius: 50%;
            color: var(--gold);
            background: var(--bg-deep);
            font-weight: 950;
            box-shadow: 0 0 0 7px rgba(10,46,28,.9);
        }
        .step-copy {
            padding: 3px 0 19px;
            border-bottom: 1px solid var(--line-soft);
        }
        .step-item:last-child .step-copy { border-bottom: 0; }
        .step-copy h3 { margin: 0 0 6px; font-size: 1.12rem; font-weight: 900; }
        .step-copy p { margin: 0; color: var(--muted); }

        .security-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 28px;
            align-items: stretch;
        }
        .security-intro {
            padding: 42px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background:
                linear-gradient(125deg, rgba(255,215,0,.13), transparent 42%),
                url('/assets/images/coverpic/cover-6.jpg') center/cover no-repeat;
            box-shadow: var(--shadow);
        }
        .security-intro h2 {
            max-width: 580px;
            margin: 10px 0 13px;
            font-size: clamp(1.85rem, 3vw, 2.65rem);
            line-height: 1.15;
            font-weight: 900;
        }
        .security-intro p { max-width: 570px; color: var(--mint); }
        .security-actions { margin-top: 25px; }
        .security-points {
            display: grid;
            gap: 13px;
        }
        .security-point {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 21px;
            border: 1px solid var(--line-soft);
            border-radius: 20px;
            background: rgba(255,255,255,.035);
        }
        .security-point:hover {
            border-color: var(--line);
            background: rgba(255,215,0,.055);
            transform: translateX(4px);
        }
        .security-point .icon-box {
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            color: var(--gold);
            background: rgba(255,215,0,.11);
        }
        .security-point h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 900; }
        .security-point p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }

        .notice-strip {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            margin-top: 30px;
            padding: 19px 21px;
            border-left: 3px solid var(--amber);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            background: rgba(255,183,3,.08);
            color: var(--mint);
        }
        .notice-strip i { margin-top: 4px; color: var(--gold); }
        .notice-strip strong { color: var(--gold-soft); }

        .faq-layout {
            display: grid;
            grid-template-columns: .73fr 1.27fr;
            gap: 60px;
            align-items: start;
        }
        .faq-intro h2 {
            margin: 9px 0 13px;
            font-size: clamp(1.85rem, 3vw, 2.65rem);
            line-height: 1.16;
            font-weight: 900;
        }
        .faq-intro p { color: var(--muted); margin: 0; }
        .faq-contact {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 24px;
            color: var(--gold-soft);
            font-weight: 850;
        }
        .faq-contact:hover { color: var(--gold); transform: translateX(3px); }
        .accordion-item {
            margin-bottom: 12px;
            overflow: hidden;
            border: 1px solid var(--line-soft) !important;
            border-radius: var(--radius-sm) !important;
            background: rgba(255,255,255,.035);
        }
        .accordion-button {
            padding: 19px 21px;
            color: var(--text);
            background: transparent;
            font-weight: 850;
            box-shadow: none !important;
        }
        .accordion-button:not(.collapsed) {
            color: var(--gold-soft);
            background: rgba(255,215,0,.07);
        }
        .accordion-button::after {
            filter: brightness(0) saturate(100%) invert(86%) sepia(72%) saturate(573%) hue-rotate(2deg) brightness(104%);
        }
        .accordion-body {
            padding: 0 21px 20px;
            color: var(--muted);
            background: rgba(255,215,0,.025);
        }

        .final-cta { padding-top: 24px; padding-bottom: 96px; }
        .cta-shell {
            position: relative;
            overflow: hidden;
            padding: 55px clamp(25px, 6vw, 75px);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            text-align: center;
            background:
                radial-gradient(circle at 50% -20%, rgba(255,215,0,.26), transparent 50%),
                linear-gradient(135deg, #174b2d, #092718);
            box-shadow: var(--shadow);
        }
        .cta-shell::before, .cta-shell::after {
            content: "♦";
            position: absolute;
            color: rgba(255,215,0,.1);
            font-family: Georgia, serif;
            font-size: 13rem;
            line-height: 1;
            pointer-events: none;
        }
        .cta-shell::before { left: -28px; bottom: -78px; transform: rotate(-18deg); }
        .cta-shell::after { right: -18px; top: -83px; transform: rotate(17deg); }
        .cta-shell > * { position: relative; z-index: 1; }
        .cta-shell h2 {
            max-width: 760px;
            margin: 11px auto 13px;
            font-size: clamp(2rem, 3.6vw, 3.25rem);
            line-height: 1.12;
            font-weight: 950;
            letter-spacing: -.04em;
        }
        .cta-shell p { max-width: 670px; margin: 0 auto; color: var(--mint); }
        .cta-shell .hero-actions { justify-content: center; margin-top: 27px; }

        .site-footer {
            padding: 56px 0 24px;
            border-top: 1px solid var(--line);
            background: #061b12;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.45fr .85fr 1.05fr;
            gap: 48px;
        }
        .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--text);
            font-weight: 900;
            font-size: 1.05rem;
        }
        .footer-brand .brand-mark { width: 38px; height: 38px; }
        .footer-text {
            max-width: 495px;
            margin: 16px 0 0;
            color: var(--muted);
            font-size: .9rem;
        }
        .footer-title {
            margin-bottom: 14px;
            color: var(--gold-soft);
            font-weight: 900;
            font-size: .92rem;
        }
        .footer-links {
            padding: 0;
            margin: 0;
            list-style: none;
            color: var(--muted);
            font-size: .89rem;
        }
        .footer-links li { margin-bottom: 9px; }
        .footer-links a:hover { color: var(--gold); padding-left: 3px; }
        .age-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            padding: 2px 6px;
            margin-right: 4px;
            border: 1px solid var(--gold);
            border-radius: 7px;
            color: var(--gold);
            font-size: .76rem;
            font-weight: 950;
        }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            margin-top: 39px;
            padding-top: 21px;
            border-top: 1px solid var(--line-soft);
            color: #8cbbaa;
            font-size: .79rem;
        }

        .fab-support {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 1035;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            border: 2px solid var(--gold);
            border-radius: 50%;
            color: var(--gold);
            background: radial-gradient(circle at 30% 25%, #245d3b, #071f14 72%);
            box-shadow: 0 4px 20px rgba(255,215,0,.32), inset 0 0 0 3px rgba(255,255,255,.08);
            opacity: .75;
            animation: floatFab 3s ease-in-out infinite;
        }
        .fab-support::after {
            content: "";
            position: absolute;
            top: 3px;
            right: 5px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--red);
            border: 1px solid #ffb1b1;
            box-shadow: 0 0 10px rgba(211,47,47,.9);
            animation: blinkDot 1.15s ease-in-out infinite;
        }
        .fab-support i { font-size: 1.33rem; }
        .fab-support:hover {
            color: #082014;
            background: var(--gold);
            opacity: 1;
            transform: scale(1.1);
        }
        .fab-support:hover i { animation: spinIcon .45s ease; }
        .fab-support:active { transform: translateY(2px) scale(.95); }

        @keyframes floatFab {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }
        @keyframes blinkDot { 50% { opacity: .25; } }
        @keyframes spinIcon { to { transform: rotate(360deg); } }

        @media (max-width: 1190px) {
            .nav-wrap { gap: 10px; }
            .nav-link-custom { padding-inline: 10px; font-size: .82rem; }
            .brand-text { max-width: 180px; }
            .nav-actions .btn-gold { padding-inline: 13px; }
        }
        @media (max-width: 1024px) {
            :root { --nav-h: auto; }
            .site-header { position: sticky; }
            .nav-wrap { flex-wrap: wrap; padding: 11px 0; }
            .nav-main { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
            .nav-main::-webkit-scrollbar { display: none; }
            main { padding-top: 0; }
            .hero-grid { grid-template-columns: 1fr; gap: 34px; }
            .hero-copy { max-width: 780px; }
            .choice-panel { max-width: 690px; }
            .compat-layout, .faq-layout { gap: 38px; }
            .flow-layout { grid-template-columns: 245px 1fr; gap: 38px; }
        }
        @media (max-width: 768px) {
            .section { padding: 68px 0; }
            .install-hero { min-height: auto; }
            .hero-grid { padding: 61px 0 62px; }
            .hero-copy h1 { font-size: clamp(2.15rem, 10vw, 3.55rem); }
            .stats-shell { grid-template-columns: repeat(2, 1fr); }
            .stat-item:nth-child(2) { border-right: 0; }
            .stat-item:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
            .compat-layout, .security-grid, .faq-layout { grid-template-columns: 1fr; }
            .feature-image, .feature-image img { min-height: 355px; }
            .flow-layout { grid-template-columns: 1fr; gap: 28px; }
            .side-label { position: static; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
            .footer-grid > :first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 520px) {
            .container-custom { width: min(100% - 24px, var(--container)); }
            .nav-wrap { gap: 8px; }
            .brand-mark { width: 37px; height: 37px; }
            .brand-text { max-width: 155px; }
            .brand-text strong { font-size: .89rem; }
            .brand-text span { font-size: .67rem; }
            .btn-login { display: none; }
            .nav-actions .btn { min-height: 39px; padding: 7px 12px; font-size: .8rem; }
            .nav-link-custom { min-height: 37px; padding: 8px 11px; font-size: .78rem; }
            .nav-link-custom i { display: none; }
            .hero-grid { padding: 50px 0; }
            .hero-copy p { font-size: .97rem; }
            .hero-actions .btn { width: 100%; }
            .trust-line { gap: 10px 15px; font-size: .81rem; }
            .choice-option { grid-template-columns: 42px 1fr; padding: 14px; }
            .choice-icon { width: 42px; height: 42px; }
            .choice-check { display: none; }
            .quick-stats { margin-top: -21px; }
            .stat-item { min-height: 94px; padding: 17px 15px; }
            .stat-item strong { font-size: 1.2rem; }
            .feature-image, .feature-image img { min-height: 290px; }
            .security-intro { padding: 29px 23px; }
            .security-point { padding: 17px; }
            .step-item { grid-template-columns: 48px 1fr; gap: 15px; }
            .step-no { width: 48px; height: 48px; }
            .steps-list::before { left: 24px; top: 25px; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
            .footer-grid > :first-child { grid-column: auto; }
            .footer-bottom { flex-direction: column; gap: 7px; }
            .fab-support { bottom: 72px; width: 53px; height: 53px; }
        }