/* roulang page: index */
:root {
            --ink: #f7fbff;
            --muted: #aeb9c9;
            --muted-2: #7e8ca2;
            --bg: #0b0a19;
            --bg-2: #11132b;
            --panel: rgba(24, 25, 57, .82);
            --panel-strong: #191a3c;
            --line: rgba(151, 165, 255, .18);
            --cyan: #00e8ff;
            --lime: #c9ff31;
            --pink: #ff3eaa;
            --purple: #8d61ff;
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 24px 70px rgba(0, 0, 0, .34);
            --glow: 0 0 30px rgba(0, 232, 255, .2);
            --container: 1180px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background:
                radial-gradient(circle at 9% 7%, rgba(141, 97, 255, .15), transparent 27rem),
                radial-gradient(circle at 93% 20%, rgba(0, 232, 255, .08), transparent 24rem),
                var(--bg);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }
        body:before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .2;
            background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(to bottom, black, transparent 78%);
        }
        a { color: inherit; text-decoration: none; transition: .25s ease; }
        img { max-width: 100%; display: block; }
        button, input { font: inherit; }
        button:focus-visible, a:focus-visible, input:focus-visible {
            outline: 3px solid rgba(201,255,49,.8);
            outline-offset: 3px;
        }
        .container {
            width: min(var(--container), calc(100% - 40px));
            margin-inline: auto;
        }
        .site-header {
            position: fixed;
            z-index: 40;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(11, 10, 25, .86);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }
        .nav-shell {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 28px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: max-content;
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -.03em;
        }
        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            color: #0b0a19;
            background: linear-gradient(135deg, var(--lime), var(--cyan));
            border-radius: 12px;
            box-shadow: 0 0 24px rgba(0,232,255,.28);
            font-size: 20px;
        }
        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            flex: 1;
        }
        .main-nav a {
            color: var(--muted);
            padding: 10px 13px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }
        .main-nav a:hover, .main-nav a.active {
            color: var(--ink);
            background: rgba(0,232,255,.1);
        }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: max-content;
        }
        .login-link {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
        }
        .login-link:hover { color: var(--cyan); }
        .signup-link {
            padding: 11px 17px;
            color: #0b0a19;
            background: var(--lime);
            border-radius: 10px;
            font-size: 13px;
            font-weight: 800;
            box-shadow: 0 0 20px rgba(201,255,49,.22);
        }
        .signup-link:hover { transform: translateY(-2px); background: #e0ff85; }
        .hero {
            min-height: 680px;
            padding: 150px 0 75px;
            position: relative;
            display: flex;
            align-items: center;
            background:
                linear-gradient(90deg, rgba(8,7,20,.94) 0%, rgba(10,9,28,.72) 48%, rgba(10,9,28,.35) 100%),
                url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            border-bottom: 1px solid var(--line);
        }
        .hero:after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 150px;
            background: linear-gradient(transparent, var(--bg));
        }
        .hero-inner { position: relative; z-index: 1; }
        .hero-copy { max-width: 760px; }
        .eyebrow, .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--lime);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .eyebrow:before, .section-kicker:before {
            content: "";
            width: 25px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }
        h1, h2, h3, p { margin-top: 0; }
        h1 {
            max-width: 850px;
            margin: 20px 0 22px;
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(37px, 6vw, 72px);
            line-height: 1.05;
            letter-spacing: -.065em;
            font-weight: 700;
        }
        h1 span {
            color: var(--cyan);
            text-shadow: 0 0 24px rgba(0,232,255,.35);
        }
        .hero-lead {
            max-width: 690px;
            color: #d1d7e6;
            font-size: clamp(16px, 2vw, 19px);
            line-height: 1.7;
            margin-bottom: 30px;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 34px; }
        .button-primary, .button-secondary {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-height: 49px;
            padding: 12px 21px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 800;
            transition: .25s ease;
        }
        .button-primary {
            color: #0b0a19;
            background: linear-gradient(100deg, var(--lime), #edff9b);
            box-shadow: 0 12px 30px rgba(201,255,49,.18);
        }
        .button-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 35px rgba(201,255,49,.32); }
        .button-secondary {
            color: var(--ink);
            border: 1px solid rgba(0,232,255,.5);
            background: rgba(0,232,255,.08);
        }
        .button-secondary:hover { border-color: var(--cyan); background: rgba(0,232,255,.16); transform: translateY(-3px); }
        .hero-proof {
            display: flex;
            flex-wrap: wrap;
            gap: 22px;
            color: var(--muted);
            font-size: 12px;
        }
        .hero-proof strong { display: block; color: var(--ink); font-size: 19px; font-family: "Space Grotesk"; }
        .hero-side {
            position: absolute;
            right: 0;
            bottom: 8px;
            width: 300px;
            padding: 20px;
            background: rgba(17,19,43,.84);
            border: 1px solid rgba(0,232,255,.35);
            border-radius: 20px;
            box-shadow: var(--glow);
        }
        .hero-side-title { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
        .signal {
            display: flex;
            align-items: center;
            gap: 9px;
            margin: 11px 0 17px;
            font-size: 13px;
            font-weight: 700;
        }
        .signal i {
            width: 9px; height: 9px; border-radius: 50%;
            background: var(--lime); box-shadow: 0 0 15px var(--lime);
        }
        .hero-side-list { margin: 0; padding: 0; list-style: none; }
        .hero-side-list li {
            display: flex; justify-content: space-between;
            padding: 9px 0;
            border-top: 1px solid var(--line);
            color: var(--muted);
            font-size: 12px;
        }
        .hero-side-list b { color: var(--cyan); }
        .section { padding: 92px 0; position: relative; }
        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 30px;
            margin-bottom: 34px;
        }
        .section-head h2 {
            max-width: 650px;
            margin: 10px 0 0;
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 4vw, 44px);
            line-height: 1.12;
            letter-spacing: -.05em;
        }
        .section-head p { max-width: 520px; margin: 0; color: var(--muted); }
        .countdown-band {
            margin-top: -5px;
            padding: 25px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            background: linear-gradient(105deg, rgba(255,62,170,.15), rgba(141,97,255,.16));
            border: 1px solid rgba(255,62,170,.27);
            border-radius: var(--radius-md);
        }
        .countdown-band h3 { margin: 0 0 4px; font-size: 18px; }
        .countdown-band p { color: var(--muted); margin: 0; font-size: 13px; }
        .timer { display: flex; align-items: center; gap: 8px; }
        .timer-box { min-width: 54px; padding: 8px 9px; text-align: center; background: rgba(8,7,20,.6); border-radius: 10px; }
        .timer-box b { display: block; color: var(--cyan); font: 700 23px/1 "Space Grotesk"; }
        .timer-box small { color: var(--muted-2); font-size: 9px; text-transform: uppercase; }
        .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .feature {
            min-height: 210px;
            padding: 23px;
            position: relative;
            overflow: hidden;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            transition: .3s ease;
        }
        .feature:hover { transform: translateY(-5px); border-color: rgba(0,232,255,.55); box-shadow: var(--glow); }
        .feature:after {
            content: "";
            width: 100px; height: 100px;
            position: absolute; right: -38px; bottom: -44px;
            border-radius: 50%;
            background: rgba(0,232,255,.1);
        }
        .feature-icon {
            width: 43px; height: 43px; display: grid; place-items: center;
            margin-bottom: 24px;
            color: var(--lime);
            background: rgba(201,255,49,.1);
            border: 1px solid rgba(201,255,49,.32);
            border-radius: 12px;
            font-size: 20px;
        }
        .feature h3 { margin-bottom: 8px; font-size: 17px; }
        .feature p { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.6; }
        .split-section { background: rgba(17,19,43,.52); }
        .criteria-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 55px; align-items: center; }
        .criteria-image { position: relative; min-height: 410px; }
        .criteria-image img { width: 100%; height: 410px; object-fit: cover; border-radius: var(--radius-lg); opacity: .9; }
        .image-label {
            position: absolute; left: 22px; bottom: 22px;
            max-width: 220px;
            padding: 13px 15px;
            background: rgba(11,10,25,.84);
            border-left: 3px solid var(--lime);
            border-radius: 0 12px 12px 0;
            font-size: 13px; font-weight: 700;
        }
        .criteria-copy h2 { margin: 10px 0 16px; font: 700 clamp(28px,4vw,43px)/1.12 "Space Grotesk"; letter-spacing: -.05em; }
        .criteria-copy > p { color: var(--muted); max-width: 560px; }
        .criteria-list { list-style: none; padding: 0; margin: 27px 0 0; }
        .criteria-list li { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
        .check { color: var(--lime); font-size: 19px; line-height: 1.4; }
        .criteria-list strong { display: block; margin-bottom: 2px; font-size: 14px; }
        .criteria-list span { color: var(--muted); font-size: 13px; }
        .comparison { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .compare-item {
            padding: 25px;
            background: linear-gradient(145deg, rgba(28,29,66,.96), rgba(18,19,46,.9));
            border: 1px solid var(--line);
            border-radius: 20px;
            position: relative;
        }
        .compare-item.featured { border-color: rgba(201,255,49,.6); box-shadow: 0 0 28px rgba(201,255,49,.08); }
        .compare-tag {
            display: inline-block;
            margin-bottom: 20px;
            padding: 5px 9px;
            color: #0b0a19;
            background: var(--lime);
            border-radius: 6px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .08em;
        }
        .compare-item h3 { margin-bottom: 9px; font-size: 20px; }
        .compare-item p { min-height: 70px; color: var(--muted); font-size: 13px; }
        .compare-item ul { list-style: none; padding: 0; margin: 20px 0 0; }
        .compare-item li { padding: 8px 0; border-top: 1px solid var(--line); color: #d9e1ee; font-size: 13px; }
        .compare-item li:before { content: "↗"; margin-right: 8px; color: var(--cyan); }
        .news-area { display: grid; grid-template-columns: 1.35fr .65fr; gap: 30px; }
        .news-list { border-top: 1px solid var(--line); }
        .news-row {
            display: grid; grid-template-columns: 1fr auto; gap: 20px;
            padding: 20px 0;
            border-bottom: 1px solid var(--line);
        }
        .news-row a { font-weight: 700; font-size: 16px; }
        .news-row a:hover { color: var(--cyan); }
        .news-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted-2); font-size: 11px; }
        .news-summary { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
        .news-arrow { color: var(--cyan); font-size: 21px; }
        .recommendation {
            padding: 24px;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
        }
        .recommendation img { height: 145px; width: 100%; object-fit: cover; border-radius: 14px; margin-bottom: 18px; }
        .recommendation h3 { font-size: 20px; margin-bottom: 9px; }
        .recommendation p { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
        .steps-section { background: linear-gradient(180deg, rgba(13,14,35,.8), rgba(17,19,43,.4)); }
        .steps-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
        .steps-intro h2 { margin: 10px 0 15px; font: 700 clamp(29px,4vw,43px)/1.12 "Space Grotesk"; letter-spacing: -.05em; }
        .steps-intro p { color: var(--muted); }
        .progress-track { height: 9px; margin: 26px 0 13px; background: #292b50; border-radius: 99px; overflow: hidden; }
        .progress-fill { width: 76%; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--lime)); border-radius: inherit; box-shadow: 0 0 15px var(--cyan); }
        .progress-note { color: var(--muted); font-size: 12px; }
        .step-list { margin: 0; padding: 0; list-style: none; }
        .step-list li { display: grid; grid-template-columns: 48px 1fr; gap: 17px; padding: 0 0 27px; position: relative; }
        .step-list li:not(:last-child):after { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; border-left: 1px dashed rgba(0,232,255,.4); }
        .step-no { width: 48px; height: 48px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(0,232,255,.55); background: rgba(0,232,255,.08); border-radius: 50%; font: 700 16px "Space Grotesk"; }
        .step-list h3 { margin: 4px 0 4px; font-size: 17px; }
        .step-list p { color: var(--muted); font-size: 13px; margin: 0; }
        .trust-strip { padding: 24px 0; border-block: 1px solid var(--line); background: rgba(0,0,0,.14); }
        .trust-inner { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; }
        .trust-title { color: var(--muted); font-size: 12px; }
        .trust-badges { display: flex; flex-wrap: wrap; gap: 10px; }
        .trust-badge { padding: 8px 12px; color: #dce5f0; background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }
        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 44px; }
        .faq-item { padding: 19px 0; border-top: 1px solid var(--line); }
        .faq-item h3 { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 16px; }
        .faq-item h3 span { color: var(--cyan); }
        .faq-item p { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.7; }
        .cta-section { padding: 90px 0 115px; }
        .cta-box {
            position: relative;
            overflow: hidden;
            padding: 52px clamp(25px, 7vw, 85px);
            text-align: center;
            background: linear-gradient(112deg, #27215e, #14163d 56%, #21113f);
            border: 1px solid rgba(0,232,255,.34);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }
        .cta-box:before, .cta-box:after { content: ""; position: absolute; border-radius: 50%; filter: blur(3px); pointer-events: none; }
        .cta-box:before { width: 280px; height: 280px; background: rgba(0,232,255,.13); top: -180px; right: -50px; }
        .cta-box:after { width: 220px; height: 220px; background: rgba(255,62,170,.13); bottom: -155px; left: -20px; }
        .cta-box > * { position: relative; z-index: 1; }
        .cta-box h2 { margin: 10px auto 13px; max-width: 740px; font: 700 clamp(29px,4vw,46px)/1.1 "Space Grotesk"; letter-spacing: -.05em; }
        .cta-box p { max-width: 650px; margin: 0 auto 25px; color: #ccd4e4; }
        .signup-form { max-width: 570px; margin: 0 auto; display: flex; gap: 10px; }
        .signup-form input { min-width: 0; flex: 1; height: 49px; padding: 0 16px; color: var(--ink); background: rgba(8,7,20,.55); border: 1px solid rgba(255,255,255,.2); border-radius: 11px; }
        .signup-form input::placeholder { color: var(--muted-2); }
        .form-note { color: var(--muted-2); font-size: 11px; margin: 13px 0 0; }
        .site-footer { padding: 48px 0 32px; border-top: 1px solid var(--line); background: #080813; }
        .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 35px; }
        .footer-brand p { max-width: 300px; margin-top: 16px; color: var(--muted); font-size: 13px; }
        .footer-col h3 { margin-bottom: 14px; color: var(--ink); font-size: 13px; }
        .footer-col a { display: block; width: fit-content; margin: 8px 0; color: var(--muted); font-size: 12px; }
        .footer-col a:hover { color: var(--cyan); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 38px; padding-top: 21px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 11px; }
        .age-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 8px; color: var(--lime); border: 1px solid var(--lime); border-radius: 50%; font-size: 11px; font-weight: 800; }
        .fab {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 50;
            min-width: 58px;
            height: 52px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 16px;
            color: var(--cyan);
            background: rgba(7,8,20,.82);
            border: 1px solid var(--cyan);
            border-radius: 30px;
            box-shadow: 0 0 18px rgba(0,232,255,.5);
            backdrop-filter: blur(12px);
            opacity: .7;
            font-size: 12px;
            font-weight: 800;
            transition: .3s ease;
            animation: breathe 3s ease-in-out infinite;
        }
        .fab:hover { opacity: 1; transform: scale(1.08); box-shadow: 0 0 30px rgba(0,232,255,.8); }
        .fab-icon { color: var(--lime); font-size: 21px; }
        .fab-dot { width: 7px; height: 7px; position: absolute; right: 8px; top: 5px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 10px var(--pink); }
        .bottom-bar { position: fixed; z-index: 35; bottom: 0; left: 0; right: 0; padding: 10px 16px; background: rgba(8,8,19,.9); border-top: 1px solid var(--line); backdrop-filter: blur(14px); }
        .bottom-bar-inner { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 12px; }
        .bottom-bar-inner span { color: var(--muted); }
        @keyframes breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

        @media (max-width: 1024px) {
            .hero-side { position: relative; right: auto; bottom: auto; margin-top: 35px; width: min(100%, 390px); }
            .hero { padding-top: 135px; }
            .feature-grid { grid-template-columns: repeat(2, 1fr); }
            .criteria-layout, .steps-layout { gap: 32px; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 30px, 620px); }
            .nav-shell { min-height: 70px; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
            .brand { font-size: 14px; }
            .brand-mark { width: 33px; height: 33px; }
            .main-nav { order: 3; width: 100%; flex-basis: 100%; overflow-x: auto; padding-bottom: 2px; }
            .main-nav a { padding: 7px 9px; font-size: 12px; }
            .nav-actions { margin-left: auto; }
            .login-link, .signup-link { font-size: 11px; }
            .signup-link { padding: 9px 11px; }
            .hero { min-height: auto; padding: 155px 0 75px; }
            h1 { font-size: clamp(34px, 9vw, 54px); }
            .hero-side { display: none; }
            .section { padding: 68px 0; }
            .section-head { display: block; margin-bottom: 27px; }
            .section-head p { margin-top: 13px; }
            .countdown-band { display: block; padding: 22px; }
            .timer { margin-top: 20px; }
            .criteria-layout, .steps-layout, .news-area { grid-template-columns: 1fr; }
            .criteria-image { min-height: 280px; }
            .criteria-image img { height: 280px; }
            .comparison { grid-template-columns: 1fr; }
            .compare-item p { min-height: 0; }
            .faq-grid { grid-template-columns: 1fr; gap: 0; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 520px) {
            .nav-shell { gap: 8px; }
            .brand { max-width: 190px; line-height: 1.15; }
            .nav-actions { gap: 8px; }
            .hero-actions, .hero-actions a { width: 100%; }
            .hero-actions a { text-align: center; }
            .hero-proof { gap: 15px; }
            .feature-grid { grid-template-columns: 1fr; }
            .feature { min-height: 0; }
            .news-row { grid-template-columns: 1fr; gap: 7px; }
            .signup-form { display: block; }
            .signup-form input, .signup-form button { width: 100%; }
            .signup-form button { margin-top: 10px; }
            .footer-grid { grid-template-columns: 1fr; gap: 22px; }
            .bottom-bar-inner { justify-content: space-between; }
            .bottom-bar-inner span { max-width: 190px; line-height: 1.3; }
            .fab { left: 12px; bottom: 92px; }
        }

/* roulang page: article */
:root {
            --ink: #f7fbff;
            --muted: #aeb9c9;
            --muted-2: #7e8ca2;
            --bg: #0b0a19;
            --bg-2: #11132b;
            --panel: rgba(24, 25, 57, .82);
            --panel-strong: #191a3c;
            --panel-soft: rgba(17, 19, 43, .74);
            --line: rgba(151, 165, 255, .18);
            --line-strong: rgba(0, 232, 255, .42);
            --cyan: #00e8ff;
            --lime: #c9ff31;
            --pink: #ff3eaa;
            --purple: #8d61ff;
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 24px 70px rgba(0, 0, 0, .34);
            --glow: 0 0 30px rgba(0, 232, 255, .2);
            --container: 1180px;
        }

        html {
            scroll-behavior: smooth;
        }

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

        body {
            margin: 0;
            color: var(--ink);
            background:
                radial-gradient(circle at 9% 7%, rgba(141, 97, 255, .15), transparent 27rem),
                radial-gradient(circle at 93% 20%, rgba(0, 232, 255, .08), transparent 24rem),
                var(--bg);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .2;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(to bottom, black, transparent 78%);
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: .25s ease;
        }

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

        button,
        input {
            font: inherit;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(201,255,49,.8);
            outline-offset: 3px;
        }

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

        .site-header {
            position: fixed;
            z-index: 40;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(11, 10, 25, .86);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }

        .nav-shell {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: max-content;
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -.03em;
        }

        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            color: #0b0a19;
            background: linear-gradient(135deg, var(--lime), var(--cyan));
            border-radius: 12px;
            box-shadow: 0 0 24px rgba(0,232,255,.28);
            font-size: 20px;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            flex: 1;
        }

        .main-nav a {
            color: var(--muted);
            padding: 10px 13px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--ink);
            background: rgba(0,232,255,.1);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: max-content;
        }

        .login-link {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
        }

        .login-link:hover {
            color: var(--cyan);
        }

        .signup-link {
            color: #0b0a19;
            background: var(--lime);
            border-radius: 10px;
            padding: 10px 15px;
            font-size: 13px;
            font-weight: 800;
            box-shadow: 0 8px 22px rgba(201,255,49,.16);
        }

        .signup-link:hover {
            color: #0b0a19;
            background: #e3ff7a;
            transform: translateY(-2px);
        }

        .article-hero {
            position: relative;
            padding: 154px 0 82px;
            min-height: 570px;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(8,7,20,.97) 0%, rgba(10,9,28,.86) 43%, rgba(10,9,28,.45) 100%),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            border-bottom: 1px solid var(--line);
        }

        .article-hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 160px;
            background: linear-gradient(transparent, var(--bg));
            pointer-events: none;
        }

        .article-hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 5fr 7fr;
            align-items: center;
            gap: 56px;
        }

        .article-hero-copy {
            position: relative;
            z-index: 2;
        }

        .eyebrow,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--lime);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .eyebrow::before,
        .section-kicker::before {
            content: "";
            width: 25px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }

        h1,
        h2,
        h3 {
            margin-top: 0;
            font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
            letter-spacing: -.045em;
        }

        h1 {
            max-width: 650px;
            margin: 18px 0 20px;
            font-size: clamp(36px, 5vw, 65px);
            line-height: 1.06;
            font-weight: 700;
        }

        .gradient-text {
            background: linear-gradient(100deg, var(--lime), var(--cyan) 56%, #b9a2ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-lead {
            max-width: 650px;
            color: #d1d7e6;
            font-size: clamp(16px, 2vw, 18px);
            line-height: 1.72;
            margin-bottom: 25px;
        }

        .meta-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 20px;
            color: var(--muted);
            font-size: 12px;
        }

        .meta-row span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .meta-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 12px var(--lime);
        }

        .hero-visual {
            position: relative;
            min-height: 365px;
            transform: translate(18px, 13px) rotate(2.2deg);
        }

        .hero-image-frame {
            position: relative;
            width: min(100%, 570px);
            margin-left: auto;
            overflow: hidden;
            border: 1px solid rgba(0,232,255,.5);
            border-radius: 31px;
            box-shadow: 18px 25px 70px rgba(0,0,0,.48), 0 0 35px rgba(0,232,255,.14);
            background: var(--panel-strong);
        }

        .hero-image-frame::before {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0;
            background: linear-gradient(145deg, rgba(0,232,255,.13), transparent 42%, rgba(255,62,170,.2));
            pointer-events: none;
        }

        .hero-image-frame img {
            width: 100%;
            height: 365px;
            object-fit: cover;
            opacity: .84;
        }

        .visual-caption {
            position: absolute;
            z-index: 2;
            left: 22px;
            right: 22px;
            bottom: 21px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 18px;
        }

        .visual-caption p {
            margin: 0;
            color: #e9edff;
            font-size: 14px;
            font-weight: 700;
        }

        .visual-caption small {
            display: block;
            margin-top: 4px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 500;
        }

        .score-badge {
            flex: 0 0 auto;
            min-width: 72px;
            padding: 9px 10px;
            color: #0b0a19;
            text-align: center;
            background: var(--lime);
            border-radius: 13px;
            box-shadow: 0 0 20px rgba(201,255,49,.28);
        }

        .score-badge strong {
            display: block;
            font-family: "Space Grotesk", sans-serif;
            font-size: 22px;
            line-height: 1;
        }

        .score-badge span {
            display: block;
            margin-top: 3px;
            font-size: 10px;
            font-weight: 800;
        }

        .float-stat {
            position: absolute;
            z-index: 3;
            left: -26px;
            top: 31px;
            width: 150px;
            padding: 15px;
            border: 1px solid rgba(201,255,49,.3);
            border-radius: 17px;
            background: rgba(18, 19, 49, .92);
            box-shadow: var(--shadow);
            transform: rotate(-5deg);
        }

        .float-stat span {
            display: block;
            color: var(--muted-2);
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .float-stat strong {
            display: block;
            margin-top: 3px;
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 22px;
        }

        .article-main {
            position: relative;
            z-index: 2;
            padding: 74px 0 30px;
        }

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

        .article-content-panel {
            min-width: 0;
        }

        .article-content {
            color: #d5dbea;
            font-size: 16px;
            line-height: 1.8;
        }

        .article-content > *:first-child {
            margin-top: 0;
        }

        .article-content h2 {
            position: relative;
            margin: 39px 0 15px;
            padding-left: 17px;
            color: var(--ink);
            font-size: clamp(25px, 3vw, 34px);
            line-height: 1.2;
        }

        .article-content h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: 5px;
            bottom: 5px;
            width: 4px;
            border-radius: 4px;
            background: linear-gradient(var(--lime), var(--cyan));
        }

        .article-content h3 {
            margin: 28px 0 10px;
            color: #edf2ff;
            font-size: 21px;
        }

        .article-content p {
            margin: 0 0 18px;
        }

        .article-content a {
            color: var(--cyan);
            text-decoration: underline;
            text-decoration-color: rgba(0,232,255,.4);
            text-underline-offset: 3px;
        }

        .article-content a:hover {
            color: var(--lime);
        }

        .article-content ul,
        .article-content ol {
            margin: 0 0 22px 22px;
            padding-left: 17px;
        }

        .article-content li {
            margin-bottom: 9px;
            padding-left: 5px;
        }

        .article-content li::marker {
            color: var(--lime);
        }

        .article-content blockquote {
            margin: 28px 0;
            padding: 20px 23px;
            color: #eef4ff;
            border-left: 3px solid var(--pink);
            border-radius: 0 15px 15px 0;
            background: rgba(255,62,170,.08);
        }

        .article-content img {
            width: 100%;
            margin: 25px 0;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
        }

        .article-content table {
            width: 100%;
            margin: 25px 0;
            border-collapse: collapse;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: rgba(24,25,57,.56);
        }

        .article-content th,
        .article-content td {
            padding: 12px 14px;
            text-align: left;
            border-bottom: 1px solid var(--line);
        }

        .article-content th {
            color: var(--lime);
            font-weight: 700;
        }

        .article-content tr:last-child td {
            border-bottom: 0;
        }

        .article-aside {
            position: sticky;
            top: 103px;
        }

        .aside-box {
            padding: 23px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: linear-gradient(145deg, rgba(24,25,57,.92), rgba(16,17,39,.72));
            box-shadow: 0 18px 50px rgba(0,0,0,.2);
        }

        .aside-box + .aside-box {
            margin-top: 18px;
        }

        .aside-box h2,
        .aside-box h3 {
            margin-bottom: 15px;
            color: var(--ink);
            font-size: 18px;
            letter-spacing: -.025em;
        }

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

        .toc-list a {
            display: block;
            padding: 9px 10px;
            color: var(--muted);
            border-left: 2px solid transparent;
            border-radius: 0 9px 9px 0;
            font-size: 13px;
        }

        .toc-list a:hover {
            color: var(--ink);
            border-left-color: var(--cyan);
            background: rgba(0,232,255,.08);
            padding-left: 14px;
        }

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

        .trust-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
        }

        .trust-icon {
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            display: grid;
            place-items: center;
            color: var(--lime);
            border: 1px solid rgba(201,255,49,.35);
            border-radius: 8px;
            font-size: 12px;
        }

        .quick-facts {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin: 52px 0 65px;
            padding: 23px;
            border: 1px solid rgba(0,232,255,.22);
            border-radius: var(--radius-md);
            background: linear-gradient(105deg, rgba(0,232,255,.09), rgba(141,97,255,.08));
        }

        .fact {
            padding: 3px 17px;
            border-right: 1px solid var(--line);
        }

        .fact:last-child {
            border-right: 0;
        }

        .fact strong {
            display: block;
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 25px;
            line-height: 1.1;
        }

        .fact span {
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 12px;
        }

        .section-heading {
            max-width: 700px;
            margin-bottom: 28px;
        }

        .section-heading h2 {
            margin: 12px 0 11px;
            color: var(--ink);
            font-size: clamp(28px, 4vw, 42px);
            line-height: 1.12;
        }

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

        .criteria-section {
            padding: 58px 0 70px;
            border-top: 1px solid var(--line);
        }

        .criteria-layout {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 50px;
            align-items: start;
        }

        .criteria-list {
            display: grid;
            gap: 0;
            margin: 0;
            padding: 0;
            list-style: none;
            border-top: 1px solid var(--line);
        }

        .criteria-list li {
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 17px;
            padding: 19px 0;
            border-bottom: 1px solid var(--line);
        }

        .criteria-number {
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 25px;
            font-weight: 700;
        }

        .criteria-list strong {
            display: block;
            margin-bottom: 4px;
            color: var(--ink);
            font-size: 16px;
        }

        .criteria-list span {
            display: block;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .device-panel {
            min-height: 340px;
            padding: 31px;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background:
                linear-gradient(145deg, rgba(25,26,60,.74), rgba(11,10,25,.82)),
                url('/assets/images/coverpic/cover-3.jpg') center/cover no-repeat;
        }

        .device-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, rgba(0,232,255,.14), transparent 45%, rgba(255,62,170,.16));
            pointer-events: none;
        }

        .device-panel-content {
            position: relative;
            z-index: 1;
            max-width: 350px;
        }

        .device-panel h3 {
            margin: 12px 0 12px;
            color: var(--ink);
            font-size: 27px;
            line-height: 1.15;
        }

        .device-panel p {
            margin-bottom: 22px;
            color: #d0d7e7;
            font-size: 14px;
        }

        .platform-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
        }

        .platform-tag,
        .label-chip {
            display: inline-flex;
            align-items: center;
            min-height: 31px;
            padding: 5px 10px;
            color: var(--ink);
            border: 1px solid rgba(0,232,255,.35);
            border-radius: 9px;
            background: rgba(0,232,255,.09);
            font-size: 11px;
            font-weight: 700;
        }

        .label-chip {
            color: var(--lime);
            border-color: rgba(201,255,49,.3);
            background: rgba(201,255,49,.08);
        }

        .faq-section {
            padding: 66px 0 76px;
            background: linear-gradient(180deg, rgba(17,19,43,.35), rgba(11,10,25,.1));
            border-top: 1px solid var(--line);
        }

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

        .faq-intro {
            position: sticky;
            top: 100px;
        }

        .faq-intro h2 {
            margin: 12px 0;
            color: var(--ink);
            font-size: clamp(28px, 4vw, 40px);
            line-height: 1.12;
        }

        .faq-intro p {
            margin: 0;
            color: var(--muted);
        }

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

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

        .faq-item summary {
            position: relative;
            padding: 19px 38px 19px 0;
            color: var(--ink);
            cursor: pointer;
            font-size: 15px;
            font-weight: 700;
            list-style: none;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary::after {
            content: "+";
            position: absolute;
            top: 14px;
            right: 3px;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 25px;
            font-weight: 500;
        }

        .faq-item[open] summary::after {
            content: "−";
            color: var(--lime);
        }

        .faq-answer {
            max-width: 700px;
            padding: 0 25px 19px 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.7;
        }

        .not-found {
            padding: 70px 30px;
            text-align: center;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: rgba(24,25,57,.66);
        }

        .not-found h2 {
            margin: 0 0 20px;
            color: var(--ink);
            font-size: 28px;
        }

        .not-found a {
            display: inline-flex;
            align-items: center;
            min-height: 46px;
            padding: 10px 18px;
            color: #0b0a19;
            border-radius: 11px;
            background: var(--lime);
            font-size: 14px;
            font-weight: 800;
        }

        .not-found a:hover {
            background: #e8ff91;
            transform: translateY(-2px);
        }

        .cta-section {
            padding: 32px 0 86px;
        }

        .cta-box {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 28px;
            align-items: center;
            padding: 40px 45px;
            border: 1px solid rgba(0,232,255,.32);
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 84% 20%, rgba(255,62,170,.2), transparent 18rem),
                linear-gradient(110deg, rgba(0,232,255,.13), rgba(141,97,255,.14));
            box-shadow: var(--glow);
        }

        .cta-box::before {
            content: "777";
            position: absolute;
            right: 27%;
            bottom: -45px;
            color: rgba(255,255,255,.035);
            font-family: "Space Grotesk", sans-serif;
            font-size: 180px;
            font-weight: 700;
            line-height: 1;
            pointer-events: none;
        }

        .cta-copy,
        .cta-form {
            position: relative;
            z-index: 1;
        }

        .cta-copy h2 {
            margin: 10px 0 9px;
            color: var(--ink);
            font-size: clamp(25px, 3vw, 36px);
            line-height: 1.15;
        }

        .cta-copy p {
            max-width: 610px;
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .cta-form {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cta-form label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
        }

        .cta-form input {
            width: 220px;
            height: 48px;
            padding: 0 14px;
            color: var(--ink);
            border: 1px solid var(--line-strong);
            border-radius: 11px;
            outline: 0;
            background: rgba(11,10,25,.72);
        }

        .cta-form input::placeholder {
            color: var(--muted-2);
        }

        .cta-form input:focus {
            border-color: var(--cyan);
            box-shadow: 0 0 0 4px rgba(0,232,255,.12);
        }

        .button-primary,
        .button-secondary {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-height: 49px;
            padding: 12px 21px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 800;
            transition: .25s ease;
        }

        .button-primary {
            color: #0b0a19;
            border: 0;
            background: linear-gradient(100deg, var(--lime), #edff9b);
            box-shadow: 0 12px 30px rgba(201,255,49,.18);
            cursor: pointer;
        }

        .button-primary:hover {
            color: #0b0a19;
            transform: translateY(-3px);
            box-shadow: 0 16px 35px rgba(201,255,49,.32);
        }

        .button-primary:active,
        .button-secondary:active {
            transform: translateY(1px);
        }

        .button-secondary {
            color: var(--ink);
            border: 1px solid rgba(0,232,255,.5);
            background: rgba(0,232,255,.08);
        }

        .button-secondary:hover {
            color: var(--ink);
            border-color: var(--cyan);
            background: rgba(0,232,255,.16);
            transform: translateY(-3px);
        }

        .site-footer {
            padding: 57px 0 24px;
            border-top: 1px solid var(--line);
            background: rgba(8,7,18,.78);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 35px;
            padding-bottom: 42px;
        }

        .footer-brand .brand {
            margin-bottom: 18px;
        }

        .footer-brand p {
            max-width: 340px;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .footer-col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 9px;
        }

        .footer-col h3 {
            margin: 0 0 9px;
            color: var(--ink);
            font-size: 14px;
            letter-spacing: -.02em;
        }

        .footer-col a {
            color: var(--muted);
            font-size: 12px;
        }

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

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 20px;
            color: var(--muted-2);
            border-top: 1px solid var(--line);
            font-size: 11px;
        }

        .age-badge {
            display: inline-grid;
            width: 28px;
            height: 22px;
            margin-right: 7px;
            place-items: center;
            color: var(--lime);
            border: 1px solid rgba(201,255,49,.5);
            border-radius: 7px;
            font-size: 10px;
            font-weight: 800;
        }

        .fab {
            position: fixed;
            z-index: 50;
            left: 16px;
            bottom: 96px;
            width: 56px;
            height: 56px;
            display: grid;
            place-items: center;
            color: var(--cyan);
            border: 1px solid transparent;
            border-radius: 17px;
            background:
                linear-gradient(rgba(11,10,25,.94), rgba(11,10,25,.94)) padding-box,
                linear-gradient(135deg, var(--cyan), var(--pink), var(--lime)) border-box;
            box-shadow: 0 0 18px rgba(0,232,255,.35), 0 15px 30px rgba(0,0,0,.3);
            opacity: .72;
            transition: .25s ease;
            animation: fabBreath 3s ease-in-out infinite;
        }

        .fab:hover {
            color: var(--lime);
            opacity: 1;
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(0,232,255,.58), 0 15px 35px rgba(0,0,0,.4);
        }

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

        .fab-icon {
            font-family: "Space Grotesk", sans-serif;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: -.1em;
        }

        .fab-dot {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--pink);
            box-shadow: 0 0 12px var(--pink);
            animation: blinkDot 1.8s ease-in-out infinite;
        }

        @keyframes fabBreath {
            0%, 100% { box-shadow: 0 0 18px rgba(0,232,255,.35), 0 15px 30px rgba(0,0,0,.3); }
            50% { box-shadow: 0 0 27px rgba(0,232,255,.52), 0 15px 30px rgba(0,0,0,.3); }
        }

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

        @media screen and (max-width: 1024px) {
            .nav-shell {
                gap: 15px;
            }

            .main-nav a {
                padding-inline: 9px;
                font-size: 12px;
            }

            .article-hero-grid {
                gap: 35px;
            }

            .article-layout {
                grid-template-columns: minmax(0, 1fr) 275px;
                gap: 32px;
            }

            .cta-box {
                padding: 34px;
            }
        }

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

            .site-header {
                position: fixed;
            }

            .nav-shell {
                min-height: 70px;
                flex-wrap: wrap;
                gap: 0;
                padding: 10px 0;
            }

            .brand {
                font-size: 15px;
            }

            .brand-mark {
                width: 34px;
                height: 34px;
                border-radius: 10px;
            }

            .main-nav {
                order: 3;
                width: 100%;
                flex-basis: 100%;
                overflow-x: auto;
                padding-top: 7px;
                scrollbar-width: none;
            }

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

            .main-nav a {
                padding: 7px 10px;
                font-size: 11px;
            }

            .nav-actions {
                margin-left: auto;
                gap: 8px;
            }

            .login-link,
            .signup-link {
                font-size: 11px;
            }

            .signup-link {
                padding: 9px 11px;
            }

            .article-hero {
                padding: 158px 0 55px;
            }

            .article-hero-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }

            h1 {
                font-size: clamp(35px, 10vw, 52px);
            }

            .hero-visual {
                min-height: 280px;
                transform: translate(8px, 5px) rotate(1deg);
            }

            .hero-image-frame {
                width: calc(100% - 12px);
            }

            .hero-image-frame img {
                height: 280px;
            }

            .float-stat {
                left: -5px;
                top: 19px;
            }

            .article-main {
                padding-top: 50px;
            }

            .article-layout,
            .criteria-layout,
            .faq-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }

            .article-aside,
            .faq-intro {
                position: static;
            }

            .article-aside {
                order: -1;
            }

            .quick-facts {
                margin: 40px 0 52px;
            }

            .criteria-section,
            .faq-section {
                padding: 48px 0 57px;
            }

            .cta-box {
                grid-template-columns: 1fr;
                padding: 30px 24px;
            }

            .cta-form {
                width: 100%;
            }

            .cta-form input {
                flex: 1;
                width: auto;
            }

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

            .footer-brand {
                grid-column: 1 / -1;
            }

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

        @media screen and (max-width: 520px) {
            body {
                font-size: 15px;
            }

            .container {
                width: min(var(--container), calc(100% - 24px));
            }

            .brand span:last-child {
                max-width: 155px;
                white-space: normal;
                line-height: 1.15;
            }

            .login-link {
                display: inline-block;
            }

            .article-hero {
                padding-top: 164px;
            }

            .hero-lead {
                font-size: 15px;
            }

            .meta-row {
                gap: 8px 13px;
                font-size: 11px;
            }

            .hero-visual {
                min-height: 235px;
            }

            .hero-image-frame img {
                height: 235px;
            }

            .visual-caption {
                left: 14px;
                right: 14px;
                bottom: 14px;
            }

            .visual-caption p {
                font-size: 12px;
            }

            .score-badge {
                min-width: 62px;
                padding: 7px;
            }

            .score-badge strong {
                font-size: 18px;
            }

            .float-stat {
                width: 125px;
                padding: 11px;
            }

            .float-stat strong {
                font-size: 18px;
            }

            .quick-facts {
                grid-template-columns: 1fr;
                gap: 0;
                padding: 14px 18px;
            }

            .fact {
                padding: 14px 0;
                border-right: 0;
                border-bottom: 1px solid var(--line);
            }

            .fact:last-child {
                border-bottom: 0;
            }

            .article-content {
                font-size: 15px;
            }

            .device-panel {
                min-height: 290px;
                padding: 24px;
            }

            .cta-form {
                align-items: stretch;
                flex-direction: column;
            }

            .cta-form input,
            .cta-form .button-primary {
                width: 100%;
            }

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

            .footer-brand {
                grid-column: 1 / -1;
            }

            .footer-col h3 {
                font-size: 13px;
            }

            .fab {
                left: 14px;
                bottom: 83px;
                width: 52px;
                height: 52px;
            }
        }

/* roulang page: category1 */
:root {
            --ink: #f7fbff;
            --muted: #aeb9c9;
            --muted-2: #7e8ca2;
            --bg: #0b0a19;
            --bg-2: #11132b;
            --panel: rgba(24, 25, 57, .82);
            --panel-strong: #191a3c;
            --line: rgba(151, 165, 255, .18);
            --cyan: #00e8ff;
            --lime: #c9ff31;
            --pink: #ff3eaa;
            --purple: #8d61ff;
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 24px 70px rgba(0, 0, 0, .34);
            --glow: 0 0 30px rgba(0, 232, 255, .2);
            --container: 1180px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            color: var(--ink);
            background:
                radial-gradient(circle at 9% 7%, rgba(141, 97, 255, .15), transparent 27rem),
                radial-gradient(circle at 93% 20%, rgba(0, 232, 255, .08), transparent 24rem),
                var(--bg);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .2;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(to bottom, black, transparent 78%);
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: .25s ease;
        }

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

        button,
        input {
            font: inherit;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(201,255,49,.8);
            outline-offset: 3px;
        }

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

        .site-header {
            position: fixed;
            z-index: 40;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(11, 10, 25, .86);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }

        .nav-shell {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: max-content;
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -.03em;
        }

        .brand:hover {
            color: var(--lime);
        }

        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            color: #0b0a19;
            background: linear-gradient(135deg, var(--lime), var(--cyan));
            border-radius: 12px;
            box-shadow: 0 0 24px rgba(0,232,255,.28);
            font-size: 20px;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            flex: 1;
        }

        .main-nav a {
            color: var(--muted);
            padding: 10px 13px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--ink);
            background: rgba(0,232,255,.1);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: max-content;
        }

        .login-link {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
        }

        .login-link:hover {
            color: var(--cyan);
        }

        .signup-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            padding: 9px 15px;
            color: #0b0a19;
            background: var(--lime);
            border-radius: 10px;
            font-size: 12px;
            font-weight: 800;
            box-shadow: 0 8px 25px rgba(201,255,49,.18);
        }

        .signup-link:hover {
            color: #0b0a19;
            background: #e6ff81;
            transform: translateY(-2px);
        }

        .category-hero {
            position: relative;
            min-height: 680px;
            padding: 145px 0 84px;
            display: flex;
            align-items: center;
            background:
                linear-gradient(90deg, rgba(8,7,20,.96) 0%, rgba(10,9,28,.84) 48%, rgba(10,9,28,.44) 100%),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            border-bottom: 1px solid var(--line);
        }

        .category-hero::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 170px;
            background: linear-gradient(transparent, var(--bg));
            pointer-events: none;
        }

        .hero-inner {
            position: relative;
            z-index: 1;
        }

        .hero-copy {
            padding-right: 28px;
        }

        .eyebrow,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--lime);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .eyebrow::before,
        .section-kicker::before {
            content: "";
            width: 25px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }

        h1,
        h2,
        h3,
        p {
            margin-top: 0;
        }

        h1,
        h2,
        h3 {
            font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
            letter-spacing: -.045em;
        }

        h1 {
            max-width: 760px;
            margin: 17px 0 20px;
            font-size: clamp(38px, 5.2vw, 70px);
            line-height: 1.05;
            font-weight: 700;
        }

        h1 span {
            color: var(--cyan);
        }

        .hero-lead {
            max-width: 700px;
            margin-bottom: 29px;
            color: #d1d7e6;
            font-size: clamp(16px, 2vw, 19px);
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
            margin-bottom: 33px;
        }

        .button-primary,
        .button-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 49px;
            padding: 12px 21px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 800;
            transition: .25s ease;
        }

        .button-primary {
            color: #0b0a19;
            background: linear-gradient(100deg, var(--lime), #edff9b);
            box-shadow: 0 12px 30px rgba(201,255,49,.18);
        }

        .button-primary:hover {
            color: #0b0a19;
            transform: translateY(-3px);
            box-shadow: 0 16px 35px rgba(201,255,49,.32);
        }

        .button-secondary {
            color: var(--ink);
            border: 1px solid rgba(0,232,255,.5);
            background: rgba(0,232,255,.08);
        }

        .button-secondary:hover {
            color: var(--ink);
            border-color: var(--cyan);
            background: rgba(0,232,255,.16);
            transform: translateY(-3px);
        }

        .hero-proof {
            display: flex;
            flex-wrap: wrap;
            gap: 23px;
            color: var(--muted);
            font-size: 12px;
        }

        .hero-proof strong {
            display: block;
            color: var(--ink);
            font-family: "Space Grotesk", sans-serif;
            font-size: 19px;
        }

        .rank-panel {
            position: relative;
            margin-left: auto;
            max-width: 455px;
            padding: 25px;
            background: rgba(17, 19, 43, .82);
            border: 1px solid rgba(0,232,255,.3);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow), var(--glow);
            backdrop-filter: blur(15px);
        }

        .rank-panel::before {
            content: "";
            position: absolute;
            top: -1px;
            right: 38px;
            left: 38px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--lime), var(--cyan), transparent);
            box-shadow: 0 0 16px var(--cyan);
        }

        .panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            padding-bottom: 18px;
            border-bottom: 1px solid var(--line);
        }

        .panel-label {
            margin-bottom: 4px;
            color: var(--cyan);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .panel-head h2 {
            margin-bottom: 0;
            font-size: 21px;
            line-height: 1.2;
        }

        .live-badge,
        .data-badge,
        .mini-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
        }

        .live-badge {
            padding: 6px 9px;
            color: var(--lime);
            background: rgba(201,255,49,.1);
        }

        .live-badge::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 10px var(--lime);
            animation: pulse-dot 1.8s infinite;
        }

        .rank-list {
            margin: 5px 0 0;
            padding: 0;
            list-style: none;
        }

        .rank-row {
            display: grid;
            grid-template-columns: 35px 1fr auto;
            align-items: center;
            gap: 13px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(151,165,255,.11);
        }

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

        .rank-number {
            color: var(--pink);
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
        }

        .rank-name {
            display: block;
            color: var(--ink);
            font-size: 13px;
            font-weight: 700;
        }

        .rank-note {
            display: block;
            margin-top: 2px;
            color: var(--muted-2);
            font-size: 11px;
        }

        .rank-score {
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 15px;
            font-weight: 700;
        }

        .data-badge {
            padding: 5px 8px;
            color: var(--cyan);
            background: rgba(0,232,255,.08);
            border: 1px solid rgba(0,232,255,.18);
        }

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

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

        .section-heading {
            max-width: 680px;
            margin-bottom: 42px;
        }

        .section-heading h2 {
            margin: 13px 0 13px;
            font-size: clamp(30px, 4vw, 48px);
            line-height: 1.12;
        }

        .section-heading p {
            max-width: 650px;
            margin-bottom: 0;
            color: var(--muted);
            line-height: 1.7;
        }

        .trust-strip {
            position: relative;
            z-index: 2;
            margin-top: -37px;
        }

        .trust-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: rgba(18, 19, 45, .92);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .trust-item {
            min-height: 116px;
            padding: 23px 25px;
            border-right: 1px solid var(--line);
        }

        .trust-item:last-child {
            border-right: 0;
        }

        .trust-value {
            display: block;
            margin-bottom: 3px;
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 25px;
            font-weight: 700;
        }

        .trust-item p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 12px;
        }

        .split-layout {
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: 72px;
            align-items: center;
        }

        .visual-frame {
            position: relative;
            min-height: 430px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(0,232,255,.22);
            box-shadow: var(--shadow);
        }

        .visual-frame img {
            width: 100%;
            height: 100%;
            min-height: 430px;
            object-fit: cover;
            opacity: .86;
        }

        .visual-frame::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, transparent 35%, rgba(11,10,25,.96) 100%),
                linear-gradient(90deg, rgba(11,10,25,.28), transparent);
        }

        .visual-caption {
            position: absolute;
            z-index: 1;
            right: 24px;
            bottom: 23px;
            left: 24px;
        }

        .visual-caption strong {
            display: block;
            margin-bottom: 5px;
            color: var(--ink);
            font-family: "Space Grotesk", sans-serif;
            font-size: 22px;
        }

        .visual-caption span {
            color: #c7d0df;
            font-size: 13px;
        }

        .content-copy h2 {
            margin: 13px 0 17px;
            font-size: clamp(30px, 4vw, 46px);
            line-height: 1.12;
        }

        .content-copy > p {
            color: var(--muted);
            line-height: 1.75;
        }

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

        .check-list li {
            position: relative;
            padding: 16px 0 16px 33px;
            color: #dfe7f2;
            font-size: 14px;
            border-top: 1px solid var(--line);
        }

        .check-list li:last-child {
            border-bottom: 1px solid var(--line);
        }

        .check-list li::before {
            content: "✓";
            position: absolute;
            top: 15px;
            left: 0;
            display: grid;
            place-items: center;
            width: 20px;
            height: 20px;
            color: #0b0a19;
            background: var(--lime);
            border-radius: 50%;
            font-size: 12px;
            font-weight: 800;
        }

        .criteria-section {
            background: linear-gradient(180deg, rgba(17,19,43,.25), rgba(17,19,43,.78));
            border-top: 1px solid rgba(151,165,255,.08);
            border-bottom: 1px solid rgba(151,165,255,.08);
        }

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

        .criteria-intro {
            position: sticky;
            top: 110px;
        }

        .criteria-intro h2 {
            margin: 13px 0 15px;
            font-size: clamp(29px, 3.5vw, 43px);
            line-height: 1.12;
        }

        .criteria-intro p {
            color: var(--muted);
            line-height: 1.75;
        }

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

        .criterion-item {
            min-height: 220px;
            padding: 25px;
            background: rgba(24,25,57,.7);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            transition: .3s ease;
        }

        .criterion-item:hover {
            transform: translateY(-5px);
            border-color: rgba(0,232,255,.55);
            box-shadow: 0 17px 35px rgba(0,0,0,.22), 0 0 25px rgba(0,232,255,.1);
        }

        .criterion-icon {
            display: grid;
            place-items: center;
            width: 43px;
            height: 43px;
            margin-bottom: 22px;
            color: var(--cyan);
            background: rgba(0,232,255,.1);
            border: 1px solid rgba(0,232,255,.25);
            border-radius: 13px;
            font-size: 20px;
        }

        .criterion-item:nth-child(2) .criterion-icon {
            color: var(--lime);
            background: rgba(201,255,49,.09);
            border-color: rgba(201,255,49,.22);
        }

        .criterion-item:nth-child(3) .criterion-icon {
            color: var(--pink);
            background: rgba(255,62,170,.09);
            border-color: rgba(255,62,170,.22);
        }

        .criterion-item h3 {
            margin-bottom: 9px;
            font-size: 18px;
            line-height: 1.25;
        }

        .criterion-item p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.65;
        }

        .scenario-section {
            padding-bottom: 95px;
        }

        .scenario-layout {
            display: grid;
            grid-template-columns: 1.13fr .87fr;
            gap: 24px;
            align-items: stretch;
        }

        .scenario-feature {
            position: relative;
            min-height: 445px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(141,97,255,.3);
        }

        .scenario-feature img {
            width: 100%;
            height: 100%;
            min-height: 445px;
            object-fit: cover;
            opacity: .74;
            transition: transform .5s ease;
        }

        .scenario-feature:hover img {
            transform: scale(1.04);
        }

        .scenario-feature::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(11,10,25,.98), rgba(11,10,25,.12) 75%);
        }

        .scenario-feature-content {
            position: absolute;
            z-index: 1;
            right: 30px;
            bottom: 28px;
            left: 30px;
        }

        .scenario-feature-content h3 {
            max-width: 520px;
            margin: 10px 0 8px;
            font-size: 30px;
            line-height: 1.15;
        }

        .scenario-feature-content p {
            max-width: 550px;
            margin-bottom: 0;
            color: #cad3e1;
            font-size: 14px;
        }

        .scenario-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .scenario-item {
            flex: 1;
            display: grid;
            grid-template-columns: 53px 1fr;
            gap: 16px;
            align-items: center;
            padding: 20px;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            transition: .25s ease;
        }

        .scenario-item:hover {
            transform: translateX(5px);
            border-color: rgba(201,255,49,.45);
            background: rgba(28,31,69,.9);
        }

        .scenario-number {
            display: grid;
            place-items: center;
            width: 53px;
            height: 53px;
            color: var(--bg);
            background: linear-gradient(135deg, var(--cyan), var(--purple));
            border-radius: 16px;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 800;
        }

        .scenario-item h3 {
            margin-bottom: 4px;
            font-size: 17px;
        }

        .scenario-item p {
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.55;
        }

        .comparison-band {
            padding: 31px;
            background:
                linear-gradient(110deg, rgba(0,232,255,.1), rgba(141,97,255,.14)),
                rgba(24,25,57,.74);
            border: 1px solid rgba(0,232,255,.22);
            border-radius: var(--radius-lg);
        }

        .comparison-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 25px;
            margin-bottom: 25px;
        }

        .comparison-head h2 {
            max-width: 650px;
            margin: 10px 0 0;
            font-size: 31px;
            line-height: 1.15;
        }

        .comparison-head p {
            max-width: 330px;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .comparison-rows {
            display: grid;
            gap: 10px;
        }

        .comparison-row {
            display: grid;
            grid-template-columns: 58px 1fr 180px 105px;
            gap: 15px;
            align-items: center;
            min-height: 62px;
            padding: 10px 14px;
            background: rgba(11,10,25,.48);
            border: 1px solid rgba(151,165,255,.11);
            border-radius: 13px;
        }

        .comparison-row:hover {
            border-color: rgba(0,232,255,.35);
            background: rgba(11,10,25,.72);
        }

        .row-index {
            color: var(--pink);
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
        }

        .row-title {
            color: var(--ink);
            font-size: 13px;
            font-weight: 700;
        }

        .row-title small {
            display: block;
            color: var(--muted-2);
            font-size: 11px;
            font-weight: 400;
        }

        .progress-line {
            height: 7px;
            overflow: hidden;
            background: rgba(174,185,201,.15);
            border-radius: 99px;
        }

        .progress-line span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--purple), var(--cyan));
        }

        .row-status {
            justify-self: end;
            color: var(--lime);
            font-size: 11px;
            font-weight: 800;
        }

        .process-section {
            padding-top: 94px;
        }

        .process-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 75px;
            align-items: start;
        }

        .process-intro h2 {
            margin: 13px 0 16px;
            font-size: clamp(30px, 3.8vw, 46px);
            line-height: 1.1;
        }

        .process-intro p {
            margin-bottom: 24px;
            color: var(--muted);
            line-height: 1.75;
        }

        .mini-badge {
            padding: 8px 11px;
            color: var(--lime);
            border: 1px solid rgba(201,255,49,.3);
            background: rgba(201,255,49,.08);
        }

        .steps {
            display: grid;
            gap: 0;
        }

        .step {
            display: grid;
            grid-template-columns: 59px 1fr;
            gap: 19px;
            padding: 20px 0;
            border-top: 1px solid var(--line);
        }

        .step:last-child {
            border-bottom: 1px solid var(--line);
        }

        .step-number {
            display: grid;
            place-items: center;
            width: 47px;
            height: 47px;
            color: var(--bg);
            background: var(--lime);
            border-radius: 14px;
            font-family: "Space Grotesk", sans-serif;
            font-size: 18px;
            font-weight: 800;
        }

        .step h3 {
            margin-bottom: 5px;
            font-size: 18px;
        }

        .step p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.65;
        }

        .faq-section {
            background: rgba(17,19,43,.48);
            border-top: 1px solid rgba(151,165,255,.08);
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 74px;
            align-items: start;
        }

        .faq-intro h2 {
            margin: 13px 0 15px;
            font-size: clamp(30px, 3.8vw, 45px);
            line-height: 1.12;
        }

        .faq-intro p {
            color: var(--muted);
            line-height: 1.75;
        }

        .faq-list {
            display: grid;
            gap: 10px;
        }

        .faq-list details {
            background: rgba(24,25,57,.74);
            border: 1px solid var(--line);
            border-radius: 14px;
            transition: .25s ease;
        }

        .faq-list details[open] {
            border-color: rgba(0,232,255,.42);
            background: rgba(28,30,68,.9);
        }

        .faq-list summary {
            position: relative;
            cursor: pointer;
            padding: 19px 48px 19px 21px;
            color: var(--ink);
            font-size: 14px;
            font-weight: 700;
            list-style: none;
        }

        .faq-list summary::-webkit-details-marker {
            display: none;
        }

        .faq-list summary::after {
            content: "+";
            position: absolute;
            top: 14px;
            right: 19px;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 24px;
            font-weight: 400;
        }

        .faq-list details[open] summary::after {
            content: "−";
            color: var(--lime);
        }

        .faq-answer {
            padding: 0 21px 20px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .cta-section {
            padding: 96px 0 112px;
        }

        .cta-box {
            position: relative;
            overflow: hidden;
            padding: 58px 40px;
            text-align: center;
            background:
                radial-gradient(circle at 15% 20%, rgba(0,232,255,.19), transparent 19rem),
                radial-gradient(circle at 87% 80%, rgba(255,62,170,.18), transparent 18rem),
                linear-gradient(120deg, #191a3c, #11132b);
            border: 1px solid rgba(0,232,255,.3);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }

        .cta-box::before,
        .cta-box::after {
            content: "";
            position: absolute;
            width: 150px;
            height: 150px;
            border: 1px solid rgba(201,255,49,.2);
            border-radius: 50%;
        }

        .cta-box::before {
            top: -76px;
            left: -55px;
        }

        .cta-box::after {
            right: -55px;
            bottom: -76px;
        }

        .cta-box > * {
            position: relative;
            z-index: 1;
        }

        .cta-box h2 {
            max-width: 760px;
            margin: 12px auto 15px;
            font-size: clamp(29px, 4vw, 46px);
            line-height: 1.1;
        }

        .cta-box p {
            max-width: 690px;
            margin: 0 auto 27px;
            color: var(--muted);
            line-height: 1.75;
        }

        .cta-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
        }

        .site-footer {
            position: relative;
            padding: 68px 0 25px;
            background: #080713;
            border-top: 1px solid var(--line);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.55fr repeat(3, 1fr);
            gap: 45px;
            padding-bottom: 48px;
        }

        .footer-brand p {
            max-width: 350px;
            margin: 18px 0 0;
            color: var(--muted-2);
            font-size: 13px;
            line-height: 1.7;
        }

        .footer-col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .footer-col h3 {
            margin: 0 0 8px;
            color: var(--ink);
            font-size: 14px;
        }

        .footer-col a {
            color: var(--muted-2);
            font-size: 12px;
        }

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

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding-top: 22px;
            color: var(--muted-2);
            font-size: 11px;
            border-top: 1px solid rgba(151,165,255,.12);
        }

        .age-badge {
            display: inline-grid;
            place-items: center;
            width: 29px;
            height: 29px;
            margin-right: 7px;
            color: var(--bg);
            background: var(--lime);
            border-radius: 9px;
            font-size: 11px;
            font-weight: 800;
        }

        .floating-help {
            position: fixed;
            z-index: 50;
            left: 16px;
            bottom: 96px;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-height: 50px;
            padding: 10px 15px 10px 11px;
            color: var(--cyan);
            background: rgba(0,0,0,.66);
            border: 1px solid transparent;
            border-radius: 999px;
            box-shadow: 0 0 15px rgba(0,240,255,.42);
            backdrop-filter: blur(12px);
            opacity: .72;
            animation: float-button 3.4s ease-in-out infinite;
        }

        .floating-help::before {
            content: "";
            position: absolute;
            inset: -1px;
            z-index: -1;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, var(--cyan), var(--pink), var(--lime));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        .floating-help:hover {
            color: var(--lime);
            opacity: 1;
            transform: scale(1.06);
            box-shadow: 0 0 28px rgba(0,240,255,.65);
        }

        .floating-icon {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            color: var(--bg);
            background: var(--cyan);
            border-radius: 50%;
            font-size: 15px;
            transition: transform .4s ease;
        }

        .floating-help:hover .floating-icon {
            transform: rotate(360deg);
        }

        .floating-help small {
            font-size: 11px;
            font-weight: 800;
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .42; transform: scale(.75); }
        }

        @keyframes float-button {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        @media (max-width: 1024px) {
            .nav-shell {
                gap: 15px;
            }

            .main-nav a {
                padding-inline: 9px;
                font-size: 12px;
            }

            .hero-copy {
                padding-right: 0;
            }

            .rank-panel {
                margin-top: 35px;
            }

            .split-layout,
            .criteria-layout,
            .process-layout,
            .faq-layout {
                gap: 42px;
            }

            .comparison-row {
                grid-template-columns: 50px 1fr 140px 90px;
            }

            .footer-grid {
                gap: 25px;
            }
        }

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

            .site-header {
                position: relative;
            }

            .nav-shell {
                min-height: 0;
                flex-wrap: wrap;
                gap: 11px;
                padding: 13px 0 12px;
            }

            .brand {
                font-size: 15px;
            }

            .brand-mark {
                width: 34px;
                height: 34px;
                border-radius: 10px;
            }

            .nav-actions {
                margin-left: auto;
                gap: 9px;
            }

            .login-link {
                font-size: 12px;
            }

            .signup-link {
                min-height: 36px;
                padding: 7px 11px;
                font-size: 11px;
            }

            .main-nav {
                order: 3;
                flex-basis: 100%;
                width: 100%;
                overflow-x: auto;
                scrollbar-width: none;
                padding-bottom: 2px;
            }

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

            .main-nav a {
                padding: 8px 11px;
                font-size: 11px;
            }

            .category-hero {
                min-height: auto;
                padding: 83px 0 65px;
            }

            h1 {
                font-size: clamp(35px, 10vw, 52px);
            }

            .hero-lead {
                font-size: 15px;
            }

            .hero-proof {
                gap: 16px;
            }

            .hero-proof strong {
                font-size: 17px;
            }

            .rank-panel {
                padding: 20px;
            }

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

            .trust-item {
                min-height: 100px;
                padding: 18px;
                border-bottom: 1px solid var(--line);
            }

            .trust-item:nth-child(2) {
                border-right: 0;
            }

            .trust-item:nth-child(3),
            .trust-item:nth-child(4) {
                border-bottom: 0;
            }

            .section {
                padding: 72px 0;
            }

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

            .split-layout,
            .criteria-layout,
            .process-layout,
            .faq-layout,
            .scenario-layout {
                grid-template-columns: 1fr;
                gap: 34px;
            }

            .criteria-intro {
                position: static;
            }

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

            .visual-frame,
            .visual-frame img,
            .scenario-feature,
            .scenario-feature img {
                min-height: 340px;
            }

            .comparison-head {
                display: block;
            }

            .comparison-head p {
                margin-top: 14px;
            }

            .comparison-band {
                padding: 23px 17px;
            }

            .comparison-row {
                grid-template-columns: 37px 1fr auto;
                gap: 10px;
            }

            .progress-line {
                display: none;
            }

            .row-status {
                font-size: 10px;
            }

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

            .footer-brand {
                grid-column: 1 / -1;
            }

            .footer-bottom {
                display: block;
                line-height: 1.8;
            }

            .footer-bottom > div + div {
                margin-top: 8px;
            }
        }

        @media (max-width: 520px) {
            .hero-actions,
            .cta-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

            .button-primary,
            .button-secondary {
                width: 100%;
            }

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

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

            .scenario-feature-content {
                right: 20px;
                bottom: 21px;
                left: 20px;
            }

            .scenario-feature-content h3 {
                font-size: 25px;
            }

            .scenario-item {
                grid-template-columns: 45px 1fr;
                padding: 17px;
            }

            .scenario-number {
                width: 45px;
                height: 45px;
            }

            .rank-row {
                grid-template-columns: 29px 1fr auto;
                gap: 9px;
            }

            .rank-score {
                font-size: 13px;
            }

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

            .footer-brand {
                grid-column: auto;
            }

            .floating-help {
                left: 12px;
                bottom: 22px;
            }

            .floating-help small {
                display: none;
            }

            .floating-help {
                width: 50px;
                height: 50px;
                justify-content: center;
                padding: 8px;
            }

            .floating-icon {
                width: 32px;
                height: 32px;
            }
        }

/* roulang page: category2 */
:root {
            --ink: #f7fbff;
            --muted: #aeb9c9;
            --muted-2: #7e8ca2;
            --bg: #0b0a19;
            --bg-2: #11132b;
            --panel: rgba(24, 25, 57, .82);
            --panel-strong: #191a3c;
            --line: rgba(151, 165, 255, .18);
            --cyan: #00e8ff;
            --lime: #c9ff31;
            --pink: #ff3eaa;
            --purple: #8d61ff;
            --radius-lg: 28px;
            --radius-md: 18px;
            --radius-sm: 12px;
            --shadow: 0 24px 70px rgba(0, 0, 0, .34);
            --glow: 0 0 30px rgba(0, 232, 255, .2);
            --container: 1180px;
        }

        html {
            scroll-behavior: smooth;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            color: var(--ink);
            background:
                radial-gradient(circle at 9% 7%, rgba(141, 97, 255, .15), transparent 27rem),
                radial-gradient(circle at 93% 20%, rgba(0, 232, 255, .08), transparent 24rem),
                var(--bg);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

        body:before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .2;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(to bottom, black, transparent 78%);
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: .25s ease;
        }

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

        button,
        input {
            font: inherit;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(201,255,49,.8);
            outline-offset: 3px;
        }

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

        .site-header {
            position: fixed;
            z-index: 40;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(11, 10, 25, .86);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(18px);
        }

        .nav-shell {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: max-content;
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: 0;
        }

        .brand-mark {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            color: #0b0a19;
            background: linear-gradient(135deg, var(--lime), var(--cyan));
            border-radius: 12px;
            box-shadow: 0 0 24px rgba(0,232,255,.28);
            font-size: 20px;
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            flex: 1;
        }

        .main-nav a {
            color: var(--muted);
            padding: 10px 13px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--ink);
            background: rgba(0,232,255,.1);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: max-content;
        }

        .login-link {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
        }

        .login-link:hover {
            color: var(--cyan);
        }

        .signup-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 10px 16px;
            color: #0b0a19;
            background: var(--lime);
            border-radius: 10px;
            font-size: 13px;
            font-weight: 800;
            box-shadow: 0 8px 22px rgba(201,255,49,.18);
        }

        .signup-link:hover {
            background: #e5ff78;
            transform: translateY(-2px);
        }

        .page-banner {
            position: relative;
            min-height: 515px;
            padding: 150px 0 78px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(8,7,20,.96) 0%, rgba(10,9,28,.78) 54%, rgba(10,9,28,.36) 100%),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            border-bottom: 1px solid var(--line);
        }

        .page-banner:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 130px;
            background: linear-gradient(transparent, var(--bg));
        }

        .banner-inner {
            position: relative;
            z-index: 1;
        }

        .banner-copy {
            max-width: 760px;
        }

        .eyebrow,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--lime);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .eyebrow:before,
        .section-kicker:before {
            content: "";
            width: 25px;
            height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan);
        }

        h1,
        h2,
        h3,
        p {
            margin-top: 0;
        }

        h1,
        h2,
        h3 {
            font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
            letter-spacing: 0;
        }

        h1 {
            max-width: 780px;
            margin: 17px 0 20px;
            font-size: clamp(36px, 5vw, 68px);
            line-height: 1.06;
            font-weight: 700;
        }

        .banner-lead {
            max-width: 700px;
            margin-bottom: 28px;
            color: #d1d7e6;
            font-size: clamp(16px, 2vw, 19px);
            line-height: 1.7;
        }

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

        .button-primary,
        .button-secondary {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            min-height: 49px;
            padding: 12px 21px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 800;
            transition: .25s ease;
        }

        .button-primary {
            color: #0b0a19;
            background: linear-gradient(100deg, var(--lime), #edff9b);
            box-shadow: 0 12px 30px rgba(201,255,49,.18);
        }

        .button-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 35px rgba(201,255,49,.32);
        }

        .button-secondary {
            color: var(--ink);
            border: 1px solid rgba(0,232,255,.5);
            background: rgba(0,232,255,.08);
        }

        .button-secondary:hover {
            border-color: var(--cyan);
            background: rgba(0,232,255,.16);
            transform: translateY(-3px);
        }

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

        .section-heading {
            max-width: 700px;
            margin-bottom: 38px;
        }

        .section-heading h2 {
            margin: 12px 0 13px;
            font-size: clamp(28px, 3.4vw, 44px);
            line-height: 1.12;
        }

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

        .quick-strip {
            position: relative;
            z-index: 4;
            margin-top: -42px;
        }

        .quick-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: rgba(17,19,43,.93);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .quick-item {
            padding: 23px 25px;
            border-right: 1px solid var(--line);
        }

        .quick-item:last-child {
            border-right: 0;
        }

        .quick-item strong {
            display: block;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 25px;
            line-height: 1.1;
            margin-bottom: 6px;
        }

        .quick-item span {
            display: block;
            color: var(--muted);
            font-size: 12px;
        }

        .intro-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
            gap: 70px;
            align-items: center;
        }

        .intro-copy h2 {
            margin: 12px 0 18px;
            font-size: clamp(28px, 3.2vw, 43px);
            line-height: 1.13;
        }

        .intro-copy p {
            color: var(--muted);
            line-height: 1.75;
        }

        .intro-copy p:last-of-type {
            margin-bottom: 0;
        }

        .portrait-stage {
            position: relative;
            max-width: 420px;
            min-height: 515px;
            margin-left: auto;
            padding: 13px;
            border-radius: 34px;
            background: linear-gradient(145deg, rgba(201,255,49,.8), rgba(0,232,255,.55) 45%, rgba(255,62,170,.65));
            box-shadow: 0 22px 65px rgba(0,0,0,.4), 0 0 34px rgba(0,232,255,.13);
            transform: rotate(2deg);
        }

        .portrait-frame {
            position: relative;
            height: 489px;
            overflow: hidden;
            border-radius: 25px;
            background: var(--panel-strong);
        }

        .portrait-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .portrait-frame:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 36%, rgba(8,7,20,.86) 100%);
        }

        .portrait-caption {
            position: absolute;
            z-index: 2;
            left: 26px;
            right: 26px;
            bottom: 25px;
        }

        .portrait-caption span {
            display: block;
            color: var(--lime);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            margin-bottom: 7px;
        }

        .portrait-caption strong {
            display: block;
            color: white;
            font-family: "Space Grotesk", sans-serif;
            font-size: 23px;
            line-height: 1.18;
        }

        .floating-badge {
            position: absolute;
            z-index: 3;
            right: -26px;
            top: 76px;
            padding: 12px 15px;
            color: #0b0a19;
            background: var(--lime);
            border-radius: 13px;
            box-shadow: 0 12px 24px rgba(0,0,0,.28);
            font-size: 12px;
            font-weight: 800;
            transform: rotate(-5deg);
        }

        .criteria-band {
            background: rgba(17,19,43,.55);
            border-top: 1px solid rgba(151,165,255,.1);
            border-bottom: 1px solid rgba(151,165,255,.1);
        }

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

        .criteria-layout .section-heading {
            margin-bottom: 0;
            position: sticky;
            top: 115px;
        }

        .criteria-list {
            display: grid;
            gap: 0;
        }

        .criteria-row {
            display: grid;
            grid-template-columns: 57px 1fr;
            gap: 18px;
            padding: 22px 0;
            border-bottom: 1px solid var(--line);
        }

        .criteria-row:first-child {
            padding-top: 0;
        }

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

        .number-badge {
            width: 43px;
            height: 43px;
            display: grid;
            place-items: center;
            color: var(--lime);
            border: 1px solid rgba(201,255,49,.45);
            border-radius: 13px;
            background: rgba(201,255,49,.07);
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
        }

        .criteria-row h3 {
            margin: 0 0 6px;
            color: var(--ink);
            font-size: 18px;
        }

        .criteria-row p {
            margin-bottom: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.7;
        }

        .steps-section {
            overflow: hidden;
        }

        .steps-layout {
            display: grid;
            grid-template-columns: .92fr 1.08fr;
            gap: 60px;
            align-items: start;
        }

        .step-visual {
            position: relative;
            min-height: 365px;
            padding: 33px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            background:
                linear-gradient(135deg, rgba(141,97,255,.72), rgba(13,18,49,.8) 58%),
                url('/assets/images/coverpic/cover-2.jpg') center/cover;
            box-shadow: var(--shadow);
        }

        .step-visual:before {
            content: "01";
            position: absolute;
            right: 20px;
            bottom: -28px;
            color: rgba(255,255,255,.08);
            font-family: "Space Grotesk", sans-serif;
            font-size: 190px;
            font-weight: 700;
            line-height: 1;
        }

        .step-visual h3 {
            position: relative;
            max-width: 280px;
            margin: 0 0 15px;
            font-size: 28px;
            line-height: 1.13;
        }

        .step-visual p {
            position: relative;
            max-width: 300px;
            color: #e0e5f1;
            margin-bottom: 0;
            font-size: 14px;
        }

        .step-list {
            display: grid;
            gap: 16px;
        }

        .step-card {
            display: grid;
            grid-template-columns: 51px 1fr;
            gap: 17px;
            align-items: start;
            padding: 20px 21px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: rgba(24,25,57,.68);
            transition: .25s ease;
        }

        .step-card:hover {
            border-color: rgba(0,232,255,.5);
            background: rgba(24,25,57,.9);
            transform: translateX(5px);
            box-shadow: var(--glow);
        }

        .step-icon {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            color: #0b0a19;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--cyan), #a5f6ff);
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
        }

        .step-card h3 {
            margin: 0 0 5px;
            font-size: 17px;
        }

        .step-card p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.65;
        }

        .device-section {
            padding-top: 25px;
        }

        .device-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .device-card {
            position: relative;
            min-height: 285px;
            padding: 31px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            border: 1px solid var(--line);
            background: var(--panel);
        }

        .device-card.ios {
            background:
                linear-gradient(115deg, rgba(0,232,255,.13), transparent 45%),
                var(--panel);
        }

        .device-card.android {
            background:
                linear-gradient(115deg, rgba(255,62,170,.13), transparent 45%),
                var(--panel);
        }

        .device-card:hover {
            border-color: rgba(201,255,49,.5);
            box-shadow: var(--shadow);
        }

        .device-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--cyan);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .07em;
            text-transform: uppercase;
        }

        .android .device-label {
            color: var(--pink);
        }

        .device-card h3 {
            max-width: 300px;
            margin: 14px 0 9px;
            font-size: 27px;
            line-height: 1.14;
        }

        .device-card p {
            max-width: 390px;
            color: var(--muted);
            margin-bottom: 20px;
            font-size: 14px;
        }

        .device-points {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 5px 10px;
            color: #dbe4f5;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: rgba(11,10,25,.38);
            font-size: 11px;
            font-weight: 600;
        }

        .device-art {
            position: absolute;
            right: 27px;
            bottom: 21px;
            color: rgba(255,255,255,.08);
            font-family: "Space Grotesk", sans-serif;
            font-size: 80px;
            font-weight: 700;
            line-height: 1;
        }

        .check-section {
            padding-top: 65px;
            padding-bottom: 90px;
        }

        .check-layout {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 56px;
            align-items: center;
        }

        .check-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 13px 28px;
            margin: 22px 0 0;
            padding: 0;
            list-style: none;
        }

        .check-list li {
            position: relative;
            padding: 13px 0 13px 28px;
            color: #d8deea;
            border-bottom: 1px solid rgba(151,165,255,.13);
            font-size: 14px;
        }

        .check-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 12px;
            color: var(--lime);
            font-weight: 800;
        }

        .payment-panel {
            padding: 29px;
            border-radius: var(--radius-lg);
            background:
                linear-gradient(140deg, rgba(0,232,255,.13), transparent 52%),
                rgba(24,25,57,.84);
            border: 1px solid rgba(0,232,255,.25);
            box-shadow: var(--glow);
        }

        .payment-panel h3 {
            margin-bottom: 10px;
            font-size: 23px;
        }

        .payment-panel p {
            color: var(--muted);
            margin-bottom: 22px;
            font-size: 13px;
        }

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

        .payment-badge {
            padding: 14px 12px;
            color: var(--ink);
            border: 1px solid rgba(201,255,49,.25);
            border-radius: var(--radius-sm);
            background: rgba(11,10,25,.42);
            font-size: 13px;
            font-weight: 700;
        }

        .payment-badge small {
            display: block;
            color: var(--muted-2);
            font-size: 10px;
            font-weight: 500;
        }

        .faq-section {
            background: rgba(17,19,43,.5);
            border-top: 1px solid rgba(151,165,255,.1);
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .75fr 1.25fr;
            gap: 75px;
            align-items: start;
        }

        .faq-layout .section-heading {
            margin-bottom: 0;
        }

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

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

        .faq-item summary {
            position: relative;
            padding: 20px 40px 20px 0;
            cursor: pointer;
            color: var(--ink);
            font-size: 16px;
            font-weight: 700;
            list-style: none;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-item summary:after {
            content: "+";
            position: absolute;
            right: 3px;
            top: 17px;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 24px;
            font-weight: 500;
        }

        .faq-item[open] summary:after {
            content: "−";
            color: var(--lime);
        }

        .faq-answer {
            max-width: 680px;
            padding: 0 30px 20px 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.75;
        }

        .cta-section {
            padding: 88px 0;
        }

        .cta-panel {
            position: relative;
            overflow: hidden;
            padding: 54px 62px;
            border-radius: var(--radius-lg);
            background:
                linear-gradient(100deg, rgba(141,97,255,.38), rgba(0,232,255,.15)),
                var(--panel-strong);
            border: 1px solid rgba(0,232,255,.32);
            box-shadow: var(--shadow);
        }

        .cta-panel:after {
            content: "✦";
            position: absolute;
            right: 52px;
            top: 11px;
            color: rgba(201,255,49,.16);
            font-size: 170px;
            line-height: 1;
        }

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

        .cta-content h2 {
            margin: 11px 0 13px;
            font-size: clamp(28px, 4vw, 43px);
            line-height: 1.12;
        }

        .cta-content p {
            max-width: 640px;
            color: #d5dced;
            margin-bottom: 24px;
        }

        .site-footer {
            padding: 64px 0 24px;
            background: #080714;
            border-top: 1px solid var(--line);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 40px;
            padding-bottom: 46px;
        }

        .footer-brand p {
            max-width: 340px;
            margin: 18px 0 0;
            color: var(--muted-2);
            font-size: 13px;
            line-height: 1.75;
        }

        .footer-col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .footer-col h3 {
            margin: 0 0 7px;
            color: var(--ink);
            font-size: 14px;
        }

        .footer-col a {
            color: var(--muted-2);
            font-size: 13px;
        }

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

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 22px;
            color: var(--muted-2);
            border-top: 1px solid var(--line);
            font-size: 11px;
        }

        .age-badge {
            display: inline-grid;
            width: 29px;
            height: 24px;
            place-items: center;
            margin-right: 7px;
            color: var(--lime);
            border: 1px solid rgba(201,255,49,.55);
            border-radius: 7px;
            font-weight: 800;
        }

        .fab {
            position: fixed;
            left: 16px;
            bottom: 24px;
            z-index: 50;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            color: var(--cyan);
            border: 1px solid var(--cyan);
            border-radius: 50%;
            background: rgba(0,0,0,.67);
            box-shadow: 0 0 15px rgba(0,240,255,.5);
            font-family: "Space Grotesk", sans-serif;
            font-size: 18px;
            font-weight: 700;
            opacity: .72;
            animation: fabFloat 3.2s ease-in-out infinite;
        }

        .fab:before {
            content: "";
            position: absolute;
            inset: -4px;
            border: 1px solid rgba(201,255,49,.52);
            border-radius: 50%;
            animation: orbitGlow 2.8s linear infinite;
        }

        .fab:after {
            content: "MỚI";
            position: absolute;
            right: -14px;
            top: -10px;
            padding: 2px 5px;
            color: #0b0a19;
            background: var(--pink);
            border-radius: 5px;
            font-size: 8px;
            font-weight: 800;
        }

        .fab:hover {
            color: #0b0a19;
            background: var(--cyan);
            box-shadow: 0 0 27px rgba(0,232,255,.8);
            opacity: 1;
            transform: scale(1.1);
        }

        .fab:active {
            transform: scale(.95);
        }

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

        @keyframes orbitGlow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @media (max-width: 1024px) {
            .nav-shell {
                gap: 16px;
            }

            .main-nav a {
                padding-inline: 8px;
                font-size: 12px;
            }

            .intro-layout,
            .steps-layout,
            .check-layout {
                gap: 40px;
            }

            .criteria-layout,
            .faq-layout {
                gap: 42px;
            }

            .footer-grid {
                gap: 25px;
            }
        }

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

            .nav-shell {
                min-height: 70px;
                gap: 10px;
            }

            .brand {
                font-size: 14px;
            }

            .brand-mark {
                width: 34px;
                height: 34px;
                border-radius: 10px;
            }

            .main-nav {
                order: 4;
                position: absolute;
                top: 70px;
                left: 15px;
                right: 15px;
                display: flex;
                overflow-x: auto;
                padding: 8px;
                border: 1px solid var(--line);
                border-radius: 13px;
                background: rgba(17,19,43,.97);
                box-shadow: var(--shadow);
                scrollbar-width: none;
            }

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

            .main-nav a {
                flex: 0 0 auto;
                padding: 9px 11px;
            }

            .nav-actions {
                margin-left: auto;
                gap: 9px;
            }

            .login-link {
                font-size: 12px;
            }

            .signup-link {
                min-height: 38px;
                padding: 8px 11px;
                font-size: 11px;
            }

            .page-banner {
                min-height: 535px;
                padding: 145px 0 70px;
            }

            h1 {
                font-size: clamp(34px, 9vw, 51px);
            }

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

            .quick-item:nth-child(2) {
                border-right: 0;
            }

            .quick-item:nth-child(-n+2) {
                border-bottom: 1px solid var(--line);
            }

            .quick-item {
                padding: 18px;
            }

            .intro-layout,
            .steps-layout,
            .criteria-layout,
            .check-layout,
            .faq-layout {
                grid-template-columns: 1fr;
            }

            .intro-layout {
                gap: 47px;
            }

            .portrait-stage {
                margin: 0 auto;
                min-height: 440px;
                transform: none;
            }

            .portrait-frame {
                height: 414px;
            }

            .floating-badge {
                right: 13px;
            }

            .criteria-layout .section-heading {
                position: static;
            }

            .criteria-row:first-child {
                padding-top: 0;
            }

            .step-visual {
                min-height: 290px;
            }

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

            .check-list {
                gap: 0 18px;
            }

            .faq-layout .section-heading {
                margin-bottom: 14px;
            }

            .cta-panel {
                padding: 38px 28px;
            }

            .cta-panel:after {
                right: 8px;
                font-size: 120px;
            }

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

            .footer-brand {
                grid-column: 1 / -1;
            }

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

        @media (max-width: 520px) {
            .container {
                width: calc(100% - 28px);
            }

            .brand span:last-child {
                max-width: 145px;
                white-space: normal;
                line-height: 1.12;
            }

            .nav-actions {
                gap: 7px;
            }

            .login-link {
                font-size: 11px;
            }

            .signup-link {
                padding-inline: 9px;
                font-size: 10px;
            }

            .page-banner {
                min-height: 575px;
                padding-top: 148px;
            }

            .banner-lead {
                font-size: 15px;
            }

            .hero-actions {
                align-items: stretch;
                flex-direction: column;
                max-width: 285px;
            }

            .button-primary,
            .button-secondary {
                width: 100%;
            }

            .section {
                padding: 68px 0;
            }

            .quick-item strong {
                font-size: 21px;
            }

            .quick-item span {
                font-size: 11px;
            }

            .portrait-stage {
                min-height: 390px;
                padding: 9px;
            }

            .portrait-frame {
                height: 372px;
            }

            .portrait-caption {
                left: 19px;
                right: 19px;
                bottom: 19px;
            }

            .portrait-caption strong {
                font-size: 19px;
            }

            .criteria-row {
                grid-template-columns: 45px 1fr;
                gap: 12px;
            }

            .number-badge {
                width: 38px;
                height: 38px;
            }

            .device-card,
            .payment-panel {
                padding: 23px;
            }

            .device-card h3 {
                font-size: 24px;
            }

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

            .cta-content h2 {
                font-size: 29px;
            }

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

            .footer-brand {
                grid-column: 1 / -1;
            }

            .fab {
                left: 16px;
                bottom: 18px;
            }
        }