/* roulang page: index */
:root {
            --ink: #071b14;
            --forest: #0b2e1e;
            --forest-2: #10442b;
            --gold: #f3b51b;
            --gold-light: #ffe39a;
            --mint: #d8f4df;
            --cream: #fffaf0;
            --muted: #a9b9ad;
            --line: rgba(255, 227, 154, .19);
            --red: #b92828;
            --shadow: 0 22px 60px rgba(0, 0, 0, .28);
            --radius: 18px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--cream);
            background: var(--ink);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button, a { transition: all .25s ease; }
        button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
        .container { max-width: 1180px; }
        .eyebrow {
            color: var(--gold-light);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        .section-heading { max-width: 700px; margin-bottom: 2.6rem; }
        .section-heading h2 {
            margin: .55rem 0 .9rem;
            color: var(--cream);
            font-size: clamp(1.8rem, 3vw, 3rem);
            line-height: 1.12;
            letter-spacing: -.03em;
        }
        .section-heading p { margin: 0; color: var(--muted); font-size: 1.02rem; }
        .gold-text { color: var(--gold-light); }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(5, 31, 20, .9);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }
        .navbar { min-height: 78px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: .7rem;
            color: var(--cream);
            font-weight: 850;
            line-height: 1.05;
            max-width: 275px;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            color: var(--ink);
            background: linear-gradient(145deg, #fff0ae, var(--gold));
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(243,181,27,.12);
            font-size: 1.25rem;
        }
        .brand small { display: block; color: var(--gold-light); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; }
        .navbar-nav .nav-link {
            position: relative;
            padding: .55rem .75rem !important;
            color: #c5d5c8;
            font-size: .9rem;
            font-weight: 650;
        }
        .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--gold-light); }
        .navbar-nav .nav-link.active::after {
            position: absolute;
            right: .75rem;
            bottom: .1rem;
            left: .75rem;
            height: 2px;
            background: var(--gold);
            content: "";
        }
        .btn-gold {
            color: #1b220c;
            background: linear-gradient(135deg, #ffe69a, var(--gold));
            border: 1px solid #ffe49a;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(243,181,27,.18);
            font-weight: 800;
        }
        .btn-gold:hover { color: #101a0e; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(243,181,27,.3); }
        .btn-outline-gold {
            color: var(--gold-light);
            border: 1px solid rgba(243,181,27,.6);
            border-radius: 10px;
            font-weight: 750;
        }
        .btn-outline-gold:hover { color: var(--ink); background: var(--gold-light); }
        .hero {
            position: relative;
            min-height: 680px;
            display: flex;
            align-items: center;
            background:
                linear-gradient(90deg, rgba(3, 26, 18, .94) 0%, rgba(3, 26, 18, .72) 48%, rgba(3, 26, 18, .36) 100%),
                url('/assets/images/79925db474df9c7e.jpg') center/cover;
            border-bottom: 1px solid var(--line);
        }
        .hero::after {
            position: absolute;
            inset: auto 0 0;
            height: 100px;
            background: linear-gradient(transparent, var(--ink));
            content: "";
        }
        .hero-content { position: relative; z-index: 1; padding: 7.5rem 0 6.5rem; }
        .hero h1 {
            max-width: 780px;
            margin: .9rem 0 1.2rem;
            color: #fffdf5;
            font-size: clamp(2.35rem, 5vw, 5rem);
            line-height: 1.04;
            letter-spacing: -.055em;
        }
        .hero-lead { max-width: 710px; color: #d6e4d7; font-size: 1.12rem; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
        .trust-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2.4rem; }
        .trust-pill, .tag {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .48rem .72rem;
            color: var(--gold-light);
            background: rgba(5,31,20,.72);
            border: 1px solid var(--line);
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 700;
        }
        .hero-stack { position: relative; min-height: 410px; margin-top: 3rem; }
        .hero-panel {
            position: absolute;
            width: 82%;
            padding: 1.35rem;
            background: rgba(8, 37, 24, .85);
            border: 1px solid rgba(255,227,154,.28);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            backdrop-filter: blur(14px);
        }
        .hero-panel.main-panel { top: 5%; right: 0; z-index: 2; }
        .hero-panel.side-panel.one { top: 0; left: 0; width: 58%; transform: rotate(-5deg); }
        .hero-panel.side-panel.two { right: 5%; bottom: 0; width: 65%; transform: rotate(4deg); }
        .panel-label { color: var(--muted); font-size: .75rem; }
        .panel-value { margin: .3rem 0; color: var(--gold-light); font-size: 2rem; font-weight: 850; }
        .panel-line { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .86rem; }
        .panel-line:last-child { border-bottom: 0; }
        .status-dot { display: inline-block; width: 8px; height: 8px; margin-right: .35rem; background: #42d78b; border-radius: 50%; box-shadow: 0 0 12px #42d78b; }
        section { position: relative; padding: 6.5rem 0; }
        .section-dark { background: var(--ink); }
        .section-forest { background: linear-gradient(145deg, #09271a, #0b3321); }
        .section-warm { background: #102d20; }
        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
        .feature-card, .solution-card, .scene-card, .quote-card, .security-card {
            height: 100%;
            padding: 1.6rem;
            background: rgba(255,255,255,.045);
            border: 1px solid var(--line);
            border-radius: var(--radius);
        }
        .feature-card:hover, .solution-card:hover, .scene-card:hover { transform: translateY(-5px); border-color: rgba(243,181,27,.55); box-shadow: 0 18px 42px rgba(0,0,0,.2); }
        .feature-icon {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            margin-bottom: 1.2rem;
            color: var(--ink);
            background: var(--gold);
            border-radius: 13px;
            font-size: 1.35rem;
        }
        .feature-card h3, .solution-card h3, .scene-card h3 { margin: 0 0 .7rem; font-size: 1.15rem; color: var(--cream); }
        .feature-card p, .solution-card p, .scene-card p { margin: 0; color: var(--muted); font-size: .92rem; }
        .data-strip { padding: 1.2rem 0; background: #061c13; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
        .data-point { padding: .6rem 1rem; border-left: 1px solid var(--line); }
        .data-point:first-child { border-left: 0; }
        .data-number { color: var(--gold-light); font-size: 1.7rem; font-weight: 850; }
        .data-label { color: var(--muted); font-size: .8rem; }
        .split-media { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
        .media-frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
        .media-frame img { width: 100%; aspect-ratio: 1.05; object-fit: cover; }
        .media-caption { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; padding: .95rem; color: var(--cream); background: rgba(5,31,20,.84); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px); }
        .check-list { padding: 0; margin: 1.5rem 0 0; list-style: none; }
        .check-list li { display: flex; gap: .7rem; padding: .7rem 0; color: #d6e6d9; border-bottom: 1px solid rgba(255,255,255,.08); }
        .check-list i { color: var(--gold); }
        .matrix { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 1rem; }
        .solution-card.featured { background: linear-gradient(145deg, rgba(243,181,27,.16), rgba(255,255,255,.045)); border-color: rgba(243,181,27,.5); }
        .solution-price { margin: 1rem 0; color: var(--gold-light); font-size: 1.5rem; font-weight: 850; }
        .solution-list { padding-left: 1.1rem; margin: 0; color: var(--muted); font-size: .9rem; }
        .solution-list li { padding: .3rem 0; }
        .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        .category-card { min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; background-position: center; background-size: cover; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
        .category-card.live { background-image: linear-gradient(0deg, rgba(4,20,13,.95), rgba(4,20,13,.1)), url('/assets/images/e430f46f23704f09.png'); }
        .category-card.payment { background-image: linear-gradient(0deg, rgba(4,20,13,.95), rgba(4,20,13,.1)), url('/assets/images/31422d1d7cd913f8.png'); }
        .category-card.mobile { background-image: linear-gradient(0deg, rgba(4,20,13,.95), rgba(4,20,13,.1)), url('/assets/images/c84bef42e3d6d9df.jpg'); }
        .category-card h3 { margin: 0 0 .45rem; font-size: 1.15rem; }
        .category-card p { margin: 0; color: #c8d9cb; font-size: .88rem; }
        .category-card .arrow { margin-top: .8rem; color: var(--gold-light); }
        .security-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; }
        .security-image { overflow: hidden; border-radius: 22px; }
        .security-image img { width: 100%; aspect-ratio: 1.2; object-fit: cover; }
        .security-items { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .security-card { padding: 1.2rem; }
        .security-card i { display: block; margin-bottom: .7rem; color: var(--gold); font-size: 1.5rem; }
        .security-card h3 { margin: 0 0 .4rem; font-size: 1rem; }
        .security-card p { margin: 0; color: var(--muted); font-size: .86rem; }
        .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: process; }
        .step { position: relative; padding: 1.25rem 1.15rem; border-top: 2px solid var(--gold); }
        .step::before { counter-increment: process; content: "0" counter(process); color: var(--gold); font-size: .75rem; font-weight: 850; letter-spacing: .1em; }
        .step h3 { margin: .7rem 0 .45rem; font-size: 1rem; }
        .step p { margin: 0; color: var(--muted); font-size: .88rem; }
        .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .quote-card { position: relative; padding: 1.6rem 1.7rem; }
        .quote-card::before { color: var(--gold); content: "“"; font-family: Georgia, serif; font-size: 4rem; line-height: .7; }
        .quote-card p { margin: .7rem 0 1rem; color: #d7e5d9; }
        .quote-author { color: var(--gold-light); font-weight: 750; font-size: .88rem; }
        .news-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.3rem; }
        .news-list { display: grid; gap: .75rem; }
        .news-item { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: center; padding: .75rem; border-bottom: 1px solid var(--line); }
        .news-item img { width: 110px; height: 78px; object-fit: cover; border-radius: 10px; }
        .news-item h3 { margin: 0 0 .25rem; font-size: 1rem; line-height: 1.3; }
        .news-item p { margin: 0; color: var(--muted); font-size: .82rem; }
        .news-meta { color: var(--gold-light); font-size: .72rem; }
        .news-feature { padding: 1.5rem; background: #0d3a25; border: 1px solid var(--line); border-radius: var(--radius); }
        .news-feature h3 { margin: .8rem 0; font-size: 1.35rem; }
        .news-feature p { color: var(--muted); font-size: .9rem; }
        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .accordion-item { background: transparent; border: 1px solid var(--line); border-radius: 12px !important; overflow: hidden; }
        .accordion-button { color: var(--cream); background: rgba(255,255,255,.04); box-shadow: none !important; font-weight: 700; }
        .accordion-button:not(.collapsed) { color: var(--gold-light); background: rgba(243,181,27,.08); }
        .accordion-button::after { filter: brightness(0) invert(1); }
        .accordion-body { color: var(--muted); background: rgba(0,0,0,.1); font-size: .9rem; }
        .final-cta { padding: 5.5rem 0; text-align: center; background: linear-gradient(135deg, #123e27, #071d14); border-top: 1px solid var(--line); }
        .final-cta h2 { max-width: 760px; margin: .65rem auto 1rem; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; }
        .final-cta p { max-width: 720px; margin: 0 auto; color: var(--muted); }
        .footer { padding: 4rem 0 2rem; background: #04150d; border-top: 1px solid var(--line); }
        .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
        .footer h3 { margin-bottom: 1rem; color: var(--gold-light); font-size: .9rem; }
        .footer p, .footer a { color: var(--muted); font-size: .86rem; }
        .footer a:hover { color: var(--gold-light); }
        .footer-links { display: grid; gap: .45rem; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); color: #789080; font-size: .78rem; }
        .fab {
            position: fixed;
            z-index: 1050;
            left: 1rem;
            bottom: 6rem;
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            color: var(--gold-light);
            background: #111c17;
            border: 2px solid var(--gold);
            border-radius: 50%;
            box-shadow: 0 6px 25px rgba(245,158,11,.35);
            font-size: 1.35rem;
        }
        .fab:hover { color: var(--ink); background: var(--gold); transform: scale(1.1) rotate(360deg); }
        .fab::after { position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; background: #dc2626; border: 2px solid var(--cream); border-radius: 50%; content: ""; }
        @media (max-width: 991px) {
            .hero { min-height: auto; }
            .hero-content { padding: 6rem 0 4rem; }
            .hero-stack { min-height: 380px; }
            .feature-grid, .category-grid { grid-template-columns: repeat(2, 1fr); }
            .matrix { grid-template-columns: 1fr 1fr; }
            .matrix .featured { grid-column: span 2; }
            .steps { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
            .footer-grid > div:first-child { grid-column: span 3; }
        }
        @media (max-width: 767px) {
            .navbar { min-height: 70px; }
            .brand { max-width: 230px; font-size: .86rem; }
            .brand-mark { width: 35px; height: 35px; flex-basis: 35px; }
            .nav-actions { display: flex; gap: .4rem; margin-top: .7rem; }
            .nav-actions .btn { flex: 1; }
            .hero h1 { font-size: clamp(2.2rem, 10vw, 3.3rem); }
            .hero-lead { font-size: 1rem; }
            section { padding: 4.7rem 0; }
            .feature-grid, .category-grid, .matrix, .case-grid, .faq-grid, .security-layout, .split-media, .news-layout { grid-template-columns: 1fr; }
            .matrix .featured { grid-column: auto; }
            .data-grid { grid-template-columns: repeat(2, 1fr); }
            .data-point:nth-child(3) { border-left: 0; }
            .hero-stack { min-height: 350px; }
            .hero-panel { width: 88%; }
            .hero-panel.side-panel.one { width: 62%; }
            .hero-panel.side-panel.two { width: 70%; }
            .security-items { grid-template-columns: 1fr 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid > div:first-child { grid-column: span 2; }
            .footer-bottom { flex-direction: column; }
        }
        @media (max-width: 520px) {
            .hero-actions .btn { width: 100%; }
            .trust-row { gap: .4rem; }
            .trust-pill { font-size: .7rem; }
            .data-number { font-size: 1.35rem; }
            .security-items, .steps { grid-template-columns: 1fr; }
            .news-item { grid-template-columns: 88px 1fr; }
            .news-item img { width: 88px; height: 72px; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-grid > div:first-child { grid-column: auto; }
        }

/* roulang page: category1 */
:root {
            --ink: #071b14;
            --forest: #0b2e1e;
            --forest-2: #10442b;
            --gold: #f3b51b;
            --gold-light: #ffe39a;
            --mint: #d8f4df;
            --cream: #fffaf0;
            --muted: #a9b9ad;
            --line: rgba(255, 227, 154, .19);
            --red: #b92828;
            --shadow: 0 22px 60px rgba(0, 0, 0, .28);
            --radius: 18px;
        }
        html { scroll-behavior: smooth; }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            color: var(--cream);
            background: var(--ink);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button, a { transition: all .25s ease; }
        button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
        .container { max-width: 1180px; }
        .eyebrow {
            color: var(--gold-light);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        .section-heading { max-width: 720px; margin-bottom: 2.5rem; }
        .section-heading h2 {
            margin: .55rem 0 .9rem;
            color: var(--cream);
            font-size: clamp(1.8rem, 3vw, 3rem);
            line-height: 1.12;
            letter-spacing: -.03em;
        }
        .section-heading p { margin: 0; color: var(--muted); font-size: 1.02rem; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(5, 31, 20, .92);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }
        .navbar { min-height: 78px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: .7rem;
            color: var(--cream);
            font-weight: 850;
            line-height: 1.05;
            max-width: 275px;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            color: var(--ink);
            background: linear-gradient(145deg, #fff0ae, var(--gold));
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(243,181,27,.12);
            font-size: 1.25rem;
        }
        .brand small {
            display: block;
            color: var(--gold-light);
            font-size: .63rem;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .navbar-nav .nav-link {
            position: relative;
            padding: .55rem .75rem !important;
            color: #c5d5c8;
            font-size: .9rem;
            font-weight: 650;
        }
        .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--gold-light); }
        .navbar-nav .nav-link.active::after {
            position: absolute;
            right: .75rem;
            bottom: .1rem;
            left: .75rem;
            height: 2px;
            background: var(--gold);
            content: "";
        }
        .btn-gold {
            color: #1b220c;
            background: linear-gradient(135deg, #ffe69a, var(--gold));
            border: 1px solid #ffe49a;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(243,181,27,.18);
            font-weight: 800;
        }
        .btn-gold:hover {
            color: #101a0e;
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(243,181,27,.3);
        }
        .btn-outline-gold {
            color: var(--gold-light);
            border: 1px solid rgba(243,181,27,.6);
            border-radius: 10px;
            font-weight: 750;
        }
        .btn-outline-gold:hover { color: var(--ink); background: var(--gold-light); }
        .hero {
            position: relative;
            min-height: 650px;
            display: flex;
            align-items: center;
            background:
                linear-gradient(90deg, rgba(3, 26, 18, .96) 0%, rgba(3, 26, 18, .75) 50%, rgba(3, 26, 18, .35) 100%),
                url('/assets/images/cc04f947615efbf1.jpg') center/cover;
            border-bottom: 1px solid var(--line);
        }
        .hero::after {
            position: absolute;
            inset: auto 0 0;
            height: 100px;
            background: linear-gradient(transparent, var(--ink));
            content: "";
        }
        .hero-content { position: relative; z-index: 1; padding: 7rem 0 6rem; }
        .hero h1 {
            max-width: 800px;
            margin: .9rem 0 1.2rem;
            color: #fffdf5;
            font-size: clamp(2.25rem, 5vw, 4.8rem);
            line-height: 1.04;
            letter-spacing: -.055em;
        }
        .hero-lead { max-width: 710px; color: #d6e4d7; font-size: 1.12rem; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
        .trust-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2.4rem; }
        .trust-pill, .tag {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .48rem .72rem;
            color: var(--gold-light);
            background: rgba(5,31,20,.72);
            border: 1px solid var(--line);
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 700;
        }
        .hero-board {
            position: relative;
            z-index: 1;
            padding: 1.4rem;
            background: rgba(8, 37, 24, .86);
            border: 1px solid rgba(255,227,154,.3);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            backdrop-filter: blur(14px);
        }
        .board-image {
            width: 100%;
            height: 225px;
            object-fit: cover;
            border-radius: 13px;
            opacity: .88;
        }
        .board-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
        .live-dot { color: #8ef0a7; font-size: .78rem; font-weight: 800; }
        .live-dot::before { display: inline-block; width: 8px; height: 8px; margin-right: .4rem; background: #54dc7d; border-radius: 50%; content: ""; box-shadow: 0 0 12px #54dc7d; }
        .board-score { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
        .score-item { padding: .9rem; background: rgba(255,255,255,.05); border-radius: 12px; }
        .score-item small { display: block; color: var(--muted); font-size: .72rem; }
        .score-item strong { color: var(--gold-light); font-size: 1.1rem; }
        section { position: relative; padding: 6rem 0; }
        .section-dark { background: var(--ink); }
        .section-forest { background: linear-gradient(145deg, #09271a, #0b3321); }
        .section-warm { background: #102d20; }
        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
        .feature-card, .scene-card, .quote-card, .security-card {
            height: 100%;
            padding: 1.6rem;
            background: rgba(255,255,255,.045);
            border: 1px solid var(--line);
            border-radius: var(--radius);
        }
        .feature-card:hover, .scene-card:hover, .quote-card:hover {
            transform: translateY(-5px);
            border-color: rgba(255,227,154,.55);
            box-shadow: 0 18px 36px rgba(0,0,0,.18);
        }
        .icon-tile {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            margin-bottom: 1.2rem;
            color: var(--ink);
            background: linear-gradient(145deg, #fff0ae, var(--gold));
            border-radius: 14px;
            font-size: 1.35rem;
        }
        .feature-card h3, .scene-card h3, .security-card h3 { margin: 0 0 .65rem; color: var(--cream); font-size: 1.16rem; }
        .feature-card p, .scene-card p, .security-card p { margin: 0; color: var(--muted); }
        .split-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; }
        .visual-frame { position: relative; }
        .visual-frame img { width: 100%; min-height: 380px; object-fit: cover; border-radius: 22px; border: 1px solid var(--line); }
        .visual-caption {
            position: absolute;
            right: -24px;
            bottom: 24px;
            max-width: 240px;
            padding: 1rem;
            background: var(--forest);
            border: 1px solid var(--gold);
            border-radius: 14px;
            box-shadow: var(--shadow);
        }
        .visual-caption strong { display: block; color: var(--gold-light); font-size: 1.4rem; }
        .visual-caption span { color: var(--muted); font-size: .82rem; }
        .check-list { padding: 0; margin: 1.5rem 0 0; list-style: none; }
        .check-list li { display: flex; gap: .7rem; margin: .85rem 0; color: #d6e4d7; }
        .check-list i { color: var(--gold); font-size: 1.1rem; }
        .scene-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 1.2rem; }
        .scene-card.featured { min-height: 290px; background: linear-gradient(120deg, rgba(16,68,43,.95), rgba(16,68,43,.45)), url('/assets/images/e430f46f23704f09.png') center/cover; }
        .scene-card.featured p { max-width: 450px; color: #e2f0df; }
        .payment-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
        .payment-badge { padding: .65rem .9rem; color: var(--cream); background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 10px; font-weight: 750; }
        .metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 2.5rem; background: var(--line); border: 1px solid var(--line); }
        .metric { padding: 1.4rem; background: var(--forest); }
        .metric strong { display: block; color: var(--gold-light); font-size: 1.65rem; }
        .metric span { color: var(--muted); font-size: .83rem; }
        .quote-card { position: relative; }
        .quote-card::before { color: var(--gold); font-size: 3rem; line-height: .8; content: "“"; }
        .quote-card p { color: #dae8dc; }
        .quote-card strong { color: var(--gold-light); font-size: .86rem; }
        .faq-wrap { max-width: 900px; }
        .accordion-item { margin-bottom: .7rem; overflow: hidden; background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: 12px !important; }
        .accordion-button { color: var(--cream); background: transparent; box-shadow: none !important; font-weight: 750; }
        .accordion-button:not(.collapsed) { color: var(--gold-light); background: rgba(243,181,27,.08); }
        .accordion-button::after { filter: brightness(0) invert(1); }
        .accordion-body { color: var(--muted); background: rgba(0,0,0,.12); }
        .cta-band { padding: 4.5rem 0; background: linear-gradient(115deg, #174f32, #0b2e1e); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .cta-band h2 { max-width: 680px; margin: 0 0 .7rem; color: var(--cream); font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.1; }
        .cta-band p { max-width: 660px; margin: 0; color: var(--mint); }
        .footer { padding: 4.5rem 0 1.4rem; background: #05160f; border-top: 1px solid var(--line); }
        .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
        .footer p { max-width: 330px; color: var(--muted); font-size: .9rem; }
        .footer h3 { margin: .2rem 0 1rem; color: var(--gold-light); font-size: .95rem; }
        .footer-links { display: grid; gap: .55rem; }
        .footer-links a { color: var(--muted); font-size: .87rem; }
        .footer-links a:hover { color: var(--gold-light); transform: translateX(3px); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.2rem; color: #789081; border-top: 1px solid var(--line); font-size: .78rem; }
        .fab {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 1050;
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            color: var(--ink);
            background: radial-gradient(circle at 35% 25%, #fff4bc, var(--gold) 58%, #b87508);
            border: 2px solid #ffe49a;
            border-radius: 50%;
            box-shadow: 0 6px 25px rgba(245,158,11,.35);
            font-size: 1.4rem;
            animation: float 3s ease-in-out infinite;
        }
        .fab:hover { color: var(--ink); transform: scale(1.1) rotate(360deg); }
        .fab::after {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 13px;
            height: 13px;
            background: #dc2626;
            border: 2px solid #fff;
            border-radius: 50%;
            content: "";
        }
        @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
        @media (max-width: 991px) {
            .navbar-collapse { padding: 1rem 0; }
            .nav-actions { margin-top: .75rem; }
            .split-layout { grid-template-columns: 1fr; gap: 2rem; }
            .visual-caption { right: 16px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 767px) {
            .hero { min-height: auto; }
            .hero-content { padding: 5.5rem 0 4.5rem; }
            .hero h1 { font-size: clamp(2.1rem, 11vw, 3.4rem); }
            section { padding: 4.5rem 0; }
            .feature-grid, .scene-grid { grid-template-columns: 1fr; }
            .metric-strip { grid-template-columns: 1fr 1fr; }
            .hero-board { margin-top: 2rem; }
            .brand { max-width: 230px; font-size: .91rem; }
            .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
        }
        @media (max-width: 520px) {
            .hero-actions .btn { width: 100%; }
            .trust-row { gap: .45rem; }
            .trust-pill { font-size: .71rem; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; }
            .visual-caption { position: relative; right: auto; bottom: auto; margin: -1.5rem 1rem 0; }
            .metric strong { font-size: 1.35rem; }
        }

/* roulang page: category2 */
:root {
            --ink: #071b14;
            --forest: #0b2e1e;
            --forest-2: #10442b;
            --gold: #f3b51b;
            --gold-light: #ffe39a;
            --mint: #d8f4df;
            --cream: #fffaf0;
            --muted: #a9b9ad;
            --line: rgba(255, 227, 154, .19);
            --red: #b92828;
            --shadow: 0 22px 60px rgba(0, 0, 0, .28);
            --radius: 18px;
        }
        body { background: var(--ink); color: var(--cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
        .hero {
            background: linear-gradient(90deg, rgba(5,31,20,.95) 0%, rgba(11,46,30,.92) 50%, rgba(16,68,43,.88) 100%),
                        url('/assets/images/79925db474df9c7e.jpg') center/cover no-repeat;
            min-height: 620px;
            display: flex;
            align-items: center;
            position: relative;
        }
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent, rgba(0,0,0,.65));
        }
        .hero-content { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
        .hero h1 { font-size: clamp(2.8rem, 5.5vw, 4.8rem); line-height: 1.05; letter-spacing: -.04em; }
        .hero-lead { font-size: 1.35rem; color: var(--mint); max-width: 820px; }
        .btn-gold { background: linear-gradient(135deg, #ffe69a, var(--gold)); color: #1b220c; border: none; font-weight: 800; padding: .95rem 2.25rem; border-radius: 12px; }
        .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(243,181,27,.4); }
        .feature-card {
            background: rgba(255,255,255,.05);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 2rem;
            transition: all .3s ease;
        }
        .feature-card:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 25px 50px rgba(0,0,0,.4); }
        .hot-tag { background: #b92828; color: white; font-size: .78rem; padding: .3rem .85rem; border-radius: 999px; font-weight: 700; }
        .payment-badge {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            background: rgba(255,255,255,.08);
            padding: .6rem 1rem;
            border-radius: 999px;
            font-size: .9rem;
        }
        .section-dark { background: #0a1f18; }
        .game-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        .game-card {
            background: rgba(11,46,30,.85);
            border: 2px solid var(--gold);
            border-radius: var(--radius);
            overflow: hidden;
            transition: all .3s ease;
        }
        .game-card:hover { transform: scale(1.03); box-shadow: 0 20px 40px rgba(243,181,27,.25); }
        .game-card img { width: 100%; height: 220px; object-fit: cover; }
        .footer-brand { color: var(--cream); font-weight: 850; }

/* roulang page: article */
:root {
            --ink: #071b14;
            --forest: #0b2e1e;
            --forest-2: #10442b;
            --gold: #f3b51b;
            --gold-light: #ffe39a;
            --mint: #d8f4df;
            --cream: #fffaf0;
            --muted: #a9b9ad;
            --line: rgba(255, 227, 154, .19);
            --red: #b92828;
            --shadow: 0 22px 60px rgba(0, 0, 0, .28);
            --radius: 18px;
        }

        html { scroll-behavior: smooth; }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            color: var(--cream);
            background: var(--ink);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button, a { transition: all .25s ease; }
        button:focus-visible, a:focus-visible {
            outline: 3px solid var(--gold);
            outline-offset: 3px;
        }
        .container { max-width: 1180px; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(5, 31, 20, .92);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }
        .navbar { min-height: 78px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: .7rem;
            color: var(--cream);
            font-weight: 850;
            line-height: 1.05;
            max-width: 290px;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            color: var(--ink);
            background: linear-gradient(145deg, #fff0ae, var(--gold));
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(243,181,27,.12);
            font-size: 1.25rem;
        }
        .brand small {
            display: block;
            color: var(--gold-light);
            font-size: .63rem;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .navbar-nav .nav-link {
            position: relative;
            padding: .55rem .75rem !important;
            color: #c5d5c8;
            font-size: .9rem;
            font-weight: 650;
        }
        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active { color: var(--gold-light); }
        .navbar-nav .nav-link.active::after {
            position: absolute;
            right: .75rem;
            bottom: .1rem;
            left: .75rem;
            height: 2px;
            background: var(--gold);
            content: "";
        }
        .btn-gold {
            color: #1b220c;
            background: linear-gradient(135deg, #ffe69a, var(--gold));
            border: 1px solid #ffe49a;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(243,181,27,.18);
            font-weight: 800;
        }
        .btn-gold:hover {
            color: #101a0e;
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(243,181,27,.3);
        }
        .btn-outline-gold {
            color: var(--gold-light);
            border: 1px solid rgba(243,181,27,.6);
            border-radius: 10px;
            font-weight: 750;
        }
        .btn-outline-gold:hover {
            color: var(--ink);
            background: var(--gold-light);
        }
        .article-hero {
            position: relative;
            min-height: 450px;
            display: flex;
            align-items: end;
            background:
                linear-gradient(90deg, rgba(3, 26, 18, .96) 0%, rgba(3, 26, 18, .78) 55%, rgba(3, 26, 18, .38) 100%),
                url('/assets/images/1b959d48839ef101.jpg') center/cover;
            border-bottom: 1px solid var(--line);
        }
        .article-hero::after {
            position: absolute;
            inset: auto 0 0;
            height: 130px;
            background: linear-gradient(transparent, var(--ink));
            content: "";
        }
        .article-hero-content {
            position: relative;
            z-index: 1;
            width: 100%;
            padding: 6.5rem 0 4.8rem;
        }
        .eyebrow {
            color: var(--gold-light);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        .article-hero h1 {
            max-width: 900px;
            margin: .9rem 0 1.15rem;
            color: #fffdf5;
            font-size: clamp(2.25rem, 5vw, 4.65rem);
            line-height: 1.06;
            letter-spacing: -.055em;
        }
        .hero-summary {
            max-width: 760px;
            margin: 0;
            color: #d6e4d7;
            font-size: 1.12rem;
        }
        .meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: .65rem 1.25rem;
            margin-top: 1.55rem;
            color: var(--gold-light);
            font-size: .87rem;
        }
        .meta-row span { display: inline-flex; align-items: center; gap: .4rem; }
        section { position: relative; padding: 5.8rem 0; }
        .section-dark { background: var(--ink); }
        .section-forest { background: linear-gradient(145deg, #09271a, #0b3321); }
        .section-warm { background: #102d20; }
        .article-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 3.5rem;
            align-items: start;
        }
        .article-body {
            min-width: 0;
            color: #d7e5d8;
            font-size: 1.05rem;
        }
        .article-body > *:first-child { margin-top: 0; }
        .article-body h2,
        .article-body h3 {
            color: var(--cream);
            line-height: 1.2;
            letter-spacing: -.025em;
        }
        .article-body h2 { margin: 2.5rem 0 1rem; font-size: 2rem; }
        .article-body h3 { margin: 1.8rem 0 .8rem; font-size: 1.35rem; }
        .article-body p { margin: 0 0 1.15rem; }
        .article-body ul,
        .article-body ol {
            margin: 1rem 0 1.5rem;
            padding-left: 1.3rem;
        }
        .article-body li { margin-bottom: .55rem; }
        .article-body a {
            color: var(--gold-light);
            text-decoration: underline;
            text-decoration-color: rgba(255, 227, 154, .45);
            text-underline-offset: 3px;
        }
        .article-body blockquote {
            margin: 2rem 0;
            padding: 1.35rem 1.5rem;
            color: var(--gold-light);
            background: rgba(255,255,255,.045);
            border-left: 3px solid var(--gold);
            border-radius: 0 var(--radius) var(--radius) 0;
        }
        .article-body img {
            width: 100%;
            margin: 1.8rem 0;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        .article-sidebar {
            position: sticky;
            top: 105px;
        }
        .side-panel,
        .payment-panel,
        .security-panel {
            padding: 1.5rem;
            background: rgba(255,255,255,.045);
            border: 1px solid var(--line);
            border-radius: var(--radius);
        }
        .side-panel + .side-panel { margin-top: 1rem; }
        .side-panel h2,
        .side-panel h3 {
            margin: 0 0 .9rem;
            color: var(--cream);
            font-size: 1.15rem;
        }
        .side-panel p { color: var(--muted); font-size: .92rem; }
        .side-list {
            display: grid;
            gap: .7rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .side-list li {
            display: flex;
            align-items: flex-start;
            gap: .65rem;
            color: #cbdccc;
            font-size: .92rem;
        }
        .side-list i { color: var(--gold); }
        .payment-badges {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-top: 1rem;
        }
        .payment-badge,
        .tag {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .45rem .65rem;
            color: var(--gold-light);
            background: rgba(5,31,20,.72);
            border: 1px solid var(--line);
            border-radius: 999px;
            font-size: .76rem;
            font-weight: 700;
        }
        .article-divider {
            height: 1px;
            margin: 3rem 0 2rem;
            background: var(--line);
        }
        .trust-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.1rem;
        }
        .trust-card {
            height: 100%;
            padding: 1.45rem;
            background: rgba(255,255,255,.045);
            border: 1px solid var(--line);
            border-radius: var(--radius);
        }
        .trust-card i {
            display: inline-grid;
            place-items: center;
            width: 42px;
            height: 42px;
            margin-bottom: 1rem;
            color: var(--ink);
            background: var(--gold-light);
            border-radius: 12px;
            font-size: 1.2rem;
        }
        .trust-card h3 {
            margin: 0 0 .55rem;
            color: var(--cream);
            font-size: 1.08rem;
        }
        .trust-card p { margin: 0; color: var(--muted); font-size: .92rem; }
        .faq-list { display: grid; gap: .8rem; }
        .faq-item {
            overflow: hidden;
            background: rgba(255,255,255,.045);
            border: 1px solid var(--line);
            border-radius: 14px;
        }
        .faq-item summary {
            cursor: pointer;
            padding: 1.15rem 1.3rem;
            color: var(--cream);
            font-weight: 750;
            list-style: none;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            float: right;
            color: var(--gold);
            content: "+";
            font-size: 1.25rem;
        }
        .faq-item[open] summary::after { content: "−"; }
        .faq-answer {
            padding: 0 1.3rem 1.2rem;
            color: var(--muted);
            font-size: .95rem;
        }
        .conversion {
            padding: 4rem 0;
            background:
                linear-gradient(100deg, rgba(7,27,20,.9), rgba(16,68,43,.82)),
                url('/assets/images/cc04f947615efbf1.jpg') center/cover;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }
        .conversion-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
        }
        .conversion h2 {
            max-width: 700px;
            margin: 0 0 .65rem;
            color: var(--cream);
            font-size: clamp(1.8rem, 3vw, 3rem);
            line-height: 1.12;
        }
        .conversion p { margin: 0; color: var(--mint); }
        .footer {
            padding: 4.5rem 0 1.5rem;
            background: #06150f;
            border-top: 1px solid var(--line);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 2rem;
        }
        .footer p { max-width: 330px; color: var(--muted); font-size: .92rem; }
        .footer h3 {
            margin: .25rem 0 1rem;
            color: var(--gold-light);
            font-size: .92rem;
            text-transform: uppercase;
            letter-spacing: .08em;
        }
        .footer-links { display: grid; gap: .55rem; }
        .footer-links a { color: var(--muted); font-size: .9rem; }
        .footer-links a:hover { color: var(--gold-light); }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 3rem;
            padding-top: 1.25rem;
            color: #829688;
            border-top: 1px solid rgba(255,255,255,.08);
            font-size: .78rem;
        }
        .fab-support {
            position: fixed;
            left: 1rem;
            bottom: 6rem;
            z-index: 50;
            display: grid;
            place-items: center;
            width: 56px;
            height: 56px;
            color: var(--ink);
            background: radial-gradient(circle at 30% 25%, #fff1a8, var(--gold) 58%, #a96d0b);
            border: 2px solid #f8d86a;
            border-radius: 50%;
            box-shadow: 0 6px 25px rgba(245,158,11,.35);
            font-size: 1.25rem;
        }
        .fab-support:hover { transform: scale(1.1) rotate(8deg); }
        .fab-support::after {
            position: absolute;
            top: -3px;
            right: -2px;
            width: 13px;
            height: 13px;
            background: #d62828;
            border: 2px solid var(--cream);
            border-radius: 50%;
            content: "";
        }
        .not-found {
            padding: 3rem;
            text-align: center;
            background: rgba(255,255,255,.045);
            border: 1px solid var(--line);
            border-radius: var(--radius);
        }
        .not-found h1 { margin-bottom: 1rem; color: var(--cream); }
        .not-found p { color: var(--muted); }

        @media (max-width: 991.98px) {
            .navbar-collapse {
                padding: 1rem 0;
                border-top: 1px solid rgba(255,255,255,.08);
            }
            .nav-actions { margin-top: .8rem; }
            .article-layout { grid-template-columns: 1fr; gap: 2rem; }
            .article-sidebar { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
            .side-panel + .side-panel { margin-top: 0; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 767.98px) {
            .article-hero { min-height: 500px; }
            .article-hero-content { padding: 5rem 0 3.7rem; }
            section { padding: 4.5rem 0; }
            .article-hero h1 { font-size: clamp(2.1rem, 10vw, 3.1rem); }
            .trust-grid { grid-template-columns: 1fr; }
            .conversion-inner { align-items: flex-start; flex-direction: column; }
            .article-sidebar { grid-template-columns: 1fr; }
            .footer-bottom { align-items: flex-start; flex-direction: column; }
        }
        @media (max-width: 520px) {
            .brand { max-width: 225px; font-size: .88rem; }
            .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
            .nav-actions { display: flex; width: 100%; }
            .nav-actions .btn { flex: 1; }
            .article-body { font-size: 1rem; }
            .footer-grid { grid-template-columns: 1fr; }
            .fab-support { bottom: 5rem; }
        }

/* roulang page: category3 */
:root {
            --ink: #071b14;
            --forest: #0b2e1e;
            --forest-2: #10442b;
            --gold: #f3b51b;
            --gold-light: #ffe39a;
            --mint: #d8f4df;
            --cream: #fffaf0;
            --muted: #a9b9ad;
            --line: rgba(255, 227, 154, .19);
            --red: #b92828;
            --shadow: 0 22px 60px rgba(0, 0, 0, .28);
            --radius: 18px;
        }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--cream);
            background: var(--ink);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button, a { transition: all .25s ease; }
        button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
        .container { max-width: 1180px; }
        .eyebrow {
            color: var(--gold-light);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        .section-heading { max-width: 700px; margin-bottom: 2.6rem; }
        .section-heading h2 {
            margin: .55rem 0 .9rem;
            color: var(--cream);
            font-size: clamp(1.8rem, 3vw, 3rem);
            line-height: 1.12;
            letter-spacing: -.03em;
        }
        .section-heading p { margin: 0; color: var(--muted); font-size: 1.02rem; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(5, 31, 20, .9);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }
        .navbar { min-height: 78px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: .7rem;
            color: var(--cream);
            font-weight: 850;
            line-height: 1.05;
            max-width: 275px;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            color: var(--ink);
            background: linear-gradient(145deg, #fff0ae, var(--gold));
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(243,181,27,.12);
            font-size: 1.25rem;
        }
        .brand small { display: block; color: var(--gold-light); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; }
        .navbar-nav .nav-link {
            position: relative;
            padding: .55rem .75rem !important;
            color: #c5d5c8;
            font-size: .9rem;
            font-weight: 650;
        }
        .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--gold-light); }
        .navbar-nav .nav-link.active::after {
            position: absolute;
            right: .75rem;
            bottom: .1rem;
            left: .75rem;
            height: 2px;
            background: var(--gold);
            content: "";
        }
        .btn-gold {
            color: #1b220c;
            background: linear-gradient(135deg, #ffe69a, var(--gold));
            border: 1px solid #ffe49a;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(243,181,27,.18);
            font-weight: 800;
        }
        .btn-gold:hover { color: #101a0e; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(243,181,27,.3); }
        .btn-outline-gold {
            color: var(--gold-light);
            border: 1px solid rgba(243,181,27,.6);
            border-radius: 10px;
            font-weight: 750;
        }
        .btn-outline-gold:hover { color: var(--ink); background: var(--gold-light); }
        .hero {
            position: relative;
            min-height: 680px;
            display: flex;
            align-items: center;
            background:
                linear-gradient(90deg, rgba(3, 26, 18, .94) 0%, rgba(3, 26, 18, .72) 48%, rgba(3, 26, 18, .36) 100%),
                url('/assets/images/79925db474df9c7e.jpg') center/cover;
            border-bottom: 1px solid var(--line);
        }
        .hero::after {
            position: absolute;
            inset: auto 0 0;
            height: 100px;
            background: linear-gradient(transparent, var(--ink));
            content: "";
        }
        .hero-content { position: relative; z-index: 1; padding: 7.5rem 0 6.5rem; }
        .hero h1 {
            max-width: 780px;
            margin: .9rem 0 1.2rem;
            color: #fffdf5;
            font-size: clamp(2.35rem, 5vw, 5rem);
            line-height: 1.04;
            letter-spacing: -.055em;
        }
        .hero-lead { max-width: 710px; color: #d6e4d7; font-size: 1.12rem; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
        .trust-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2.4rem; }
        .trust-pill, .tag {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .48rem .72rem;
            color: var(--gold-light);
            background: rgba(5,31,20,.72);
            border: 1px solid var(--line);
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 700;
        }
        .hero-stack { position: relative; min-height: 410px; margin-top: 3rem; }
        .hero-panel {
            position: absolute;
            width: 82%;
            padding: 1.35rem;
            background: rgba(8, 37, 24, .85);
            border: 1px solid rgba(255,227,154,.28);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            backdrop-filter: blur(14px);
        }
        .hero-panel.main-panel { top: 5%; right: 0; z-index: 2; }
        .hero-panel.side-panel.one { top: 0; left: 0; width: 58%; transform: rotate(-5deg); }
        .hero-panel.side-panel.two { right: 5%; bottom: 0; width: 65%; transform: rotate(4deg); }
        section { position: relative; padding: 6.5rem 0; }
        .section-dark { background: var(--ink); }
        .section-forest { background: linear-gradient(145deg, #09271a, #0b3321); }
        .section-warm { background: #102d20; }
        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
        .feature-card, .solution-card, .scene-card, .quote-card, .security-card {
            height: 100%;
            padding: 1.6rem;
            background: rgba(255,255,255,.045);
            border: 1px solid var(--line);
            border-radius: var(--radius);
        }
        .feature-card:hover, .solution-card:hover, .scene-card:hover { transform: translateY(-5px); border-color: var(--gold); }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-item:last-child { border-bottom: none; }
        .faq-item h3 { cursor: pointer; }
        .fixed-fab {
            position: fixed;
            left: 1rem;
            bottom: 6rem;
            width: 56px;
            height: 56px;
            background: linear-gradient(145deg, #ffe69a, var(--gold));
            border-radius: 50%;
            box-shadow: 0 10px 30px rgba(243,181,27,.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            z-index: 999;
            border: 3px solid #fff;
        }
        @media (max-width: 768px) {
            .hero h1 { font-size: 2.8rem; }
            .feature-grid { grid-template-columns: repeat(1, 1fr); }
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}