/* roulang page: index */
:root {
            --ink: #071923;
            --ink-soft: #0d2735;
            --ocean: #0e4051;
            --ocean-light: #146078;
            --cyan: #00e9f5;
            --cyan-soft: #95fbff;
            --lime: #c8ff3d;
            --white: #f4fcff;
            --mist: #c2d4d9;
            --muted: #7f9ca5;
            --line: rgba(126, 226, 239, .18);
            --line-bright: rgba(0, 233, 245, .48);
            --danger: #ff557c;
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 30px;
            --shadow: 0 22px 70px rgba(0, 0, 0, .3);
            --glow: 0 0 28px rgba(0, 233, 245, .19);
            --container: 1180px;
            --ease: cubic-bezier(.2, .8, .2, 1);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            padding-top: 78px;
            background:
                radial-gradient(circle at 10% 12%, rgba(0, 233, 245, .08), transparent 26rem),
                radial-gradient(circle at 90% 66%, rgba(200, 255, 61, .055), transparent 24rem),
                var(--ink);
            color: var(--white);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

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

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

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

        button {
            cursor: pointer;
        }

        ::selection {
            background: var(--cyan);
            color: var(--ink);
        }

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

        .skip-link {
            position: fixed;
            top: -100px;
            left: 18px;
            z-index: 1000;
            padding: 10px 16px;
            border-radius: 8px;
            background: var(--lime);
            color: var(--ink);
            font-weight: 800;
        }

        .skip-link:focus {
            top: 15px;
        }

        .site-header {
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            width: 100%;
            border-bottom: 1px solid rgba(126, 226, 239, .14);
            background: rgba(5, 18, 27, .88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

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

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: max-content;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -.02em;
        }

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

        .brand-mark {
            position: relative;
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 12px 4px 12px 4px;
            color: var(--cyan);
            font-size: 17px;
            box-shadow: inset 0 0 15px rgba(0, 233, 245, .15), 0 0 14px rgba(0, 233, 245, .18);
        }

        .brand-mark::after {
            position: absolute;
            right: -4px;
            bottom: -4px;
            width: 9px;
            height: 9px;
            border: 2px solid var(--ink);
            border-radius: 50%;
            background: var(--lime);
            content: "";
        }

        .brand-copy {
            max-width: 185px;
            line-height: 1.18;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }

        .nav-link {
            position: relative;
            padding: 10px 12px;
            color: var(--mist);
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        .nav-link::after {
            position: absolute;
            right: 12px;
            bottom: 4px;
            left: 12px;
            height: 2px;
            transform: scaleX(0);
            transform-origin: left;
            background: var(--cyan);
            content: "";
            transition: transform .25s var(--ease);
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--white);
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            transform: scaleX(1);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-left: 8px;
        }

        .login-link {
            padding: 10px 9px;
            color: var(--mist);
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }

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

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            gap: 9px;
            padding: 0 19px;
            border: 1px solid transparent;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .01em;
            line-height: 1;
            transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
        }

        .btn:focus,
        .nav-link:focus,
        .login-link:focus,
        .text-link:focus,
        .faq-item summary:focus {
            outline: 3px solid rgba(0, 233, 245, .38);
            outline-offset: 3px;
        }

        .btn:hover {
            transform: translateY(-3px);
        }

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

        .btn-primary {
            border-color: var(--lime);
            background: var(--lime);
            color: #101e18;
            box-shadow: 0 8px 25px rgba(200, 255, 61, .16);
        }

        .btn-primary:hover {
            background: #dcff72;
            box-shadow: 0 12px 30px rgba(200, 255, 61, .28);
            color: #101e18;
        }

        .btn-outline {
            border-color: var(--line-bright);
            background: rgba(0, 233, 245, .04);
            color: var(--cyan-soft);
        }

        .btn-outline:hover {
            border-color: var(--cyan);
            background: rgba(0, 233, 245, .12);
            color: var(--white);
            box-shadow: 0 0 20px rgba(0, 233, 245, .17);
        }

        .btn-ghost {
            border-color: rgba(255, 255, 255, .16);
            background: rgba(255, 255, 255, .04);
            color: var(--white);
        }

        .btn-ghost:hover {
            border-color: var(--cyan);
            background: rgba(0, 233, 245, .1);
        }

        .menu-toggle {
            display: none;
            width: 42px;
            height: 42px;
            margin-left: auto;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: transparent;
            color: var(--white);
        }

        .hero {
            position: relative;
            min-height: 685px;
            display: flex;
            align-items: center;
            isolation: isolate;
            background:
                linear-gradient(90deg, rgba(4, 16, 24, .96) 0%, rgba(4, 16, 24, .79) 42%, rgba(4, 16, 24, .68) 100%),
                url("/assets/images/backpic/back-1.jpg") center / cover no-repeat;
            overflow: hidden;
        }

        .hero::before {
            position: absolute;
            z-index: -1;
            inset: 0;
            background-image:
                linear-gradient(rgba(0, 233, 245, .05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 233, 245, .05) 1px, transparent 1px);
            background-size: 52px 52px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 95%);
            content: "";
        }

        .hero::after {
            position: absolute;
            z-index: -1;
            right: -8%;
            bottom: -20%;
            width: 48rem;
            height: 48rem;
            border: 1px solid rgba(0, 233, 245, .13);
            border-radius: 50%;
            box-shadow: 0 0 0 28px rgba(0, 233, 245, .025), 0 0 0 58px rgba(0, 233, 245, .018);
            content: "";
        }

        .hero-inner {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(250px, .9fr) minmax(300px, 1.2fr) minmax(220px, .72fr);
            align-items: center;
            gap: clamp(28px, 4vw, 66px);
            padding-top: 54px;
            padding-bottom: 64px;
        }

        .eyebrow,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .15em;
            line-height: 1.4;
            text-transform: uppercase;
        }

        .eyebrow::before,
        .section-kicker::before {
            width: 22px;
            height: 2px;
            background: var(--lime);
            content: "";
        }

        .hero-copy h1 {
            max-width: 540px;
            margin: 18px 0 20px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(38px, 4.6vw, 66px);
            font-weight: 700;
            letter-spacing: -.055em;
            line-height: 1.03;
        }

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

        .hero-description {
            max-width: 530px;
            margin: 0;
            color: var(--mist);
            font-size: 16px;
        }

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

        .hero-points {
            display: grid;
            gap: 14px;
            margin-top: 38px;
        }

        .hero-point {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            color: var(--mist);
            font-size: 13px;
            line-height: 1.5;
        }

        .point-icon {
            display: grid;
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            place-items: center;
            border: 1px solid rgba(200, 255, 61, .5);
            border-radius: 8px;
            color: var(--lime);
            font-size: 13px;
        }

        .visual-stage {
            position: relative;
            min-height: 440px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 25px;
        }

        .visual-stage::before,
        .visual-stage::after {
            position: absolute;
            border: 1px solid rgba(0, 233, 245, .27);
            border-radius: 50%;
            content: "";
            pointer-events: none;
        }

        .visual-stage::before {
            width: 380px;
            height: 380px;
            box-shadow: 0 0 50px rgba(0, 233, 245, .13), inset 0 0 45px rgba(0, 233, 245, .1);
        }

        .visual-stage::after {
            width: 300px;
            height: 300px;
            border-style: dashed;
            border-color: rgba(200, 255, 61, .28);
            animation: rotate-ring 22s linear infinite;
        }

        .stage-image {
            position: relative;
            z-index: 1;
            width: min(100%, 365px);
            aspect-ratio: .82;
            overflow: hidden;
            border: 1px solid rgba(0, 233, 245, .72);
            border-radius: 24px 7px 24px 7px;
            background: var(--ocean);
            box-shadow: 0 0 0 7px rgba(0, 233, 245, .04), 0 25px 60px rgba(0, 0, 0, .5), 0 0 38px rgba(0, 233, 245, .22);
            transform: rotate(-3deg);
        }

        .stage-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .83;
        }

        .stage-image::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(160deg, transparent 28%, rgba(4, 18, 26, .25) 50%, rgba(3, 12, 19, .91) 100%);
            content: "";
        }

        .stage-label {
            position: absolute;
            z-index: 2;
            top: 17px;
            left: 17px;
            padding: 6px 9px;
            border: 1px solid rgba(200, 255, 61, .6);
            border-radius: 6px;
            background: rgba(7, 25, 35, .72);
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .1em;
        }

        .stage-data {
            position: absolute;
            z-index: 2;
            right: 17px;
            bottom: 17px;
            left: 17px;
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .stage-data div {
            padding: 9px 10px;
            border-left: 2px solid var(--cyan);
            background: rgba(3, 13, 20, .7);
            line-height: 1.25;
        }

        .stage-data strong {
            display: block;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 16px;
        }

        .stage-data span {
            display: block;
            margin-top: 3px;
            color: var(--muted);
            font-size: 9px;
        }

        .hero-aside {
            position: relative;
            padding: 24px 22px;
            border-top: 2px solid var(--cyan);
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            border-left: 1px solid var(--line);
            border-radius: 16px;
            background: rgba(7, 25, 35, .72);
            box-shadow: var(--shadow);
        }

        .aside-status {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 22px;
            color: var(--lime);
            font-size: 11px;
            font-weight: 700;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 0 5px rgba(200, 255, 61, .09), 0 0 14px var(--lime);
            animation: blink 1.8s infinite;
        }

        .hero-aside h2 {
            margin: 0 0 12px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 22px;
            line-height: 1.15;
        }

        .hero-aside p {
            margin: 0 0 19px;
            color: var(--muted);
            font-size: 13px;
        }

        .aside-list {
            display: grid;
            gap: 11px;
            margin: 0 0 22px;
            padding: 0;
            list-style: none;
        }

        .aside-list li {
            display: flex;
            align-items: center;
            gap: 9px;
            color: var(--mist);
            font-size: 12px;
        }

        .aside-list li::before {
            color: var(--cyan);
            content: "↗";
        }

        .full-width {
            width: 100%;
        }

        .section {
            padding: 104px 0;
        }

        .section-dark {
            background: rgba(6, 22, 31, .62);
            border-top: 1px solid rgba(126, 226, 239, .07);
            border-bottom: 1px solid rgba(126, 226, 239, .07);
        }

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

        .section-heading h2 {
            margin: 13px 0 13px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 3.3vw, 44px);
            letter-spacing: -.045em;
            line-height: 1.12;
        }

        .section-heading p {
            max-width: 670px;
            margin: 0;
            color: var(--muted);
            font-size: 15px;
        }

        .section-heading.split {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 30px;
            max-width: none;
        }

        .section-heading.split > div {
            max-width: 700px;
        }

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--cyan);
            font-size: 13px;
            font-weight: 800;
            white-space: nowrap;
        }

        .text-link:hover {
            color: var(--lime);
            transform: translateX(3px);
        }

        .channel-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.5fr) minmax(270px, .75fr);
            gap: 30px;
            align-items: start;
        }

        .channel-list {
            display: grid;
            gap: 14px;
        }

        .channel-row {
            display: grid;
            grid-template-columns: 150px 1fr auto;
            align-items: center;
            gap: 22px;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: linear-gradient(100deg, rgba(14, 64, 81, .62), rgba(8, 29, 40, .6));
            transition: transform .28s var(--ease), border-color .28s ease, box-shadow .28s ease;
        }

        .channel-row:hover {
            border-color: var(--line-bright);
            box-shadow: var(--glow);
            transform: translateX(5px);
        }

        .channel-thumb {
            position: relative;
            height: 98px;
            overflow: hidden;
            border-radius: 13px 5px 13px 5px;
        }

        .channel-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s var(--ease);
        }

        .channel-row:hover .channel-thumb img {
            transform: scale(1.08);
        }

        .channel-thumb::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(0, 16, 24, .05), rgba(0, 16, 24, .68));
            content: "";
        }

        .hot-badge {
            position: absolute;
            z-index: 1;
            top: 8px;
            left: 8px;
            padding: 3px 7px;
            border-radius: 5px;
            background: var(--danger);
            color: var(--white);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .06em;
        }

        .channel-copy h3 {
            margin: 0 0 7px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 20px;
            line-height: 1.2;
        }

        .channel-copy p {
            max-width: 450px;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.55;
        }

        .channel-arrow {
            display: grid;
            width: 39px;
            height: 39px;
            place-items: center;
            border: 1px solid var(--line-bright);
            border-radius: 50%;
            color: var(--cyan);
            font-size: 17px;
        }

        .channel-row:hover .channel-arrow {
            background: var(--cyan);
            color: var(--ink);
        }

        .highlight-panel {
            position: relative;
            min-height: 350px;
            padding: 28px;
            overflow: hidden;
            border-radius: var(--radius-lg);
            background:
                linear-gradient(155deg, rgba(5, 20, 30, .25), rgba(5, 20, 30, .95)),
                url("/assets/images/backpic/back-2.jpg") center / cover;
            box-shadow: var(--shadow);
        }

        .highlight-panel::before {
            position: absolute;
            top: -60px;
            right: -60px;
            width: 180px;
            height: 180px;
            border: 1px solid rgba(200, 255, 61, .35);
            border-radius: 50%;
            content: "";
        }

        .highlight-panel h3 {
            position: relative;
            max-width: 220px;
            margin: 0 0 15px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 27px;
            line-height: 1.15;
        }

        .highlight-panel p {
            position: relative;
            max-width: 245px;
            margin: 0 0 28px;
            color: var(--mist);
            font-size: 13px;
        }

        .highlight-items {
            position: absolute;
            right: 28px;
            bottom: 25px;
            left: 28px;
            display: grid;
            gap: 10px;
        }

        .highlight-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(255,255,255,.17);
            color: var(--white);
            font-size: 12px;
            font-weight: 600;
        }

        .highlight-item b {
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
        }

        .metrics-section {
            padding: 33px 0;
            background: var(--ocean);
        }

        .metrics-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            align-items: center;
        }

        .metric {
            min-height: 65px;
            padding: 0 27px;
            border-right: 1px solid rgba(200, 255, 61, .18);
        }

        .metric:first-child {
            padding-left: 0;
        }

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

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

        .metric span {
            display: block;
            margin-top: 6px;
            color: var(--mist);
            font-size: 12px;
        }

        .lead-section {
            position: relative;
            background:
                radial-gradient(circle at 82% 18%, rgba(0, 233, 245, .12), transparent 19rem),
                var(--ink);
        }

        .lead-layout {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: clamp(35px, 8vw, 115px);
            align-items: start;
        }

        .lead-copy h2 {
            max-width: 480px;
            margin: 14px 0 18px;
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(30px, 3.4vw, 46px);
            letter-spacing: -.045em;
            line-height: 1.1;
        }

        .lead-copy > p {
            max-width: 490px;
            margin: 0;
            color: var(--muted);
            font-size: 15px;
        }

        .lead-benefits {
            display: grid;
            gap: 12px;
            margin: 32px 0 0;
            padding: 0;
            list-style: none;
        }

        .lead-benefits li {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            color: var(--mist);
            font-size: 13px;
        }

        .lead-benefits li::before {
            flex: 0 0 20px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(200, 255, 61, .13);
            color: var(--lime);
            content: "✓";
            font-size: 12px;
            font-weight: 800;
            line-height: 20px;
            text-align: center;
        }

        .lead-form {
            padding: clamp(23px, 4vw, 38px);
            border: 1px solid var(--line);
            border-top: 2px solid var(--cyan);
            border-radius: 21px;
            background: rgba(13, 39, 53, .58);
            box-shadow: var(--shadow);
        }

        .lead-form h3 {
            margin: 0 0 7px;
            font-family: "Space Grotesk", sans-serif;
            font-size: 24px;
        }

        .lead-form > p {
            margin: 0 0 24px;
            color: var(--muted);
            font-size: 13px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

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

        .form-field label {
            display: block;
            margin-bottom: 7px;
            color: var(--mist);
            font-size: 12px;
            font-weight: 700;
        }

        .form-field input,
        .form-field select,
        .form-field textarea {
            width: 100%;
            margin: 0;
            border: 1px solid rgba(126, 226, 239, .24);
            border-radius: 9px;
            outline: 0;
                       padding: 12px 14px;
            background: rgba(3, 17, 25, .72);
            color: var(--white);
            font-size: 13px;
            transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
        }

        .form-field textarea {
            min-height: 96px;
            resize: vertical;
        }

        .form-field input::placeholder,
        .form-field textarea::placeholder {
            color: #68838b;
        }

        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus {
            border-color: var(--cyan);
            background: rgba(3, 17, 25, .95);
            box-shadow: 0 0 0 3px rgba(0, 233, 245, .1);
        }

        .form-note {
            margin: 14px 0 0;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.5;
        }

        .news-section {
            background:
                linear-gradient(180deg, rgba(9, 35, 47, .62), rgba(6, 22, 31, .88)),
                url("/assets/images/backpic/back-3.jpg") center / cover fixed;
        }

        .news-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
            gap: 28px;
            align-items: start;
        }

        .news-list {
            display: grid;
            gap: 0;
            border-top: 1px solid var(--line);
        }

        .news-item {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 22px;
            align-items: center;
            padding: 22px 0;
            border-bottom: 1px solid var(--line);
        }

        .news-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 11px;
            margin-bottom: 7px;
            color: var(--muted);
            font-size: 11px;
        }

        .news-category {
            color: var(--cyan);
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .news-item h3 {
            margin: 0 0 6px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 19px;
            line-height: 1.25;
        }

        .news-item h3 a:hover {
            color: var(--cyan);
        }

        .news-item p {
            max-width: 670px;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.55;
        }

        .news-date {
            min-width: 74px;
            color: var(--mist);
            font-family: "Space Grotesk", sans-serif;
            font-size: 11px;
            text-align: right;
        }

        .news-empty {
            padding: 32px 0;
            color: var(--muted);
            font-size: 14px;
        }

        .featured-news {
            position: relative;
            min-height: 330px;
            overflow: hidden;
            border: 1px solid var(--line-bright);
            border-radius: var(--radius-md);
            background:
                linear-gradient(180deg, rgba(4, 17, 25, .08), rgba(4, 17, 25, .96)),
                url("/assets/images/coverpic/cover-5.jpg") center / cover;
        }

        .featured-news-content {
            position: absolute;
            right: 24px;
            bottom: 23px;
            left: 24px;
        }

        .featured-news-content .hot-badge {
            position: static;
            display: inline-block;
            margin-bottom: 12px;
        }

        .featured-news h3 {
            margin: 0 0 9px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 25px;
            line-height: 1.15;
        }

        .featured-news p {
            margin: 0 0 18px;
            color: var(--mist);
            font-size: 13px;
        }

        .trust-section {
            padding: 90px 0;
            background: var(--ink-soft);
        }

        .trust-layout {
            display: grid;
            grid-template-columns: .86fr 1.14fr;
            gap: clamp(35px, 7vw, 100px);
            align-items: center;
        }

        .trust-copy h2 {
            margin: 13px 0 16px;
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 3vw, 42px);
            letter-spacing: -.045em;
            line-height: 1.12;
        }

        .trust-copy p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .trust-points {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 13px;
            margin-top: 27px;
            padding: 0;
            list-style: none;
        }

        .trust-points li {
            padding: 13px;
            border-left: 2px solid var(--cyan);
            background: rgba(255,255,255,.035);
            color: var(--mist);
            font-size: 12px;
            line-height: 1.45;
        }

        .trust-points strong {
            display: block;
            margin-bottom: 4px;
            color: var(--white);
            font-size: 13px;
        }

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

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

        .faq-item summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 20px 0;
            color: var(--white);
            cursor: pointer;
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 600;
            list-style: none;
        }

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

        .faq-item summary::after {
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            border: 1px solid var(--line-bright);
            border-radius: 50%;
            color: var(--cyan);
            content: "+";
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: 400;
            line-height: 25px;
            text-align: center;
        }

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

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

        .cta-section {
            padding: 86px 0;
            background:
                linear-gradient(100deg, rgba(2, 22, 30, .96), rgba(11, 67, 81, .84)),
                url("/assets/images/backpic/back-2.jpg") center / cover;
            text-align: center;
        }

        .cta-section h2 {
            max-width: 780px;
            margin: 13px auto 14px;
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(30px, 4vw, 51px);
            letter-spacing: -.05em;
            line-height: 1.08;
        }

        .cta-section p {
            max-width: 680px;
            margin: 0 auto 26px;
            color: var(--mist);
            font-size: 15px;
        }

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

        .site-footer {
            padding: 58px 0 25px;
            border-top: 1px solid var(--line);
            background: #041018;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr .8fr .8fr 1fr;
            gap: 35px;
            padding-bottom: 44px;
        }

        .footer-brand p {
            max-width: 300px;
            margin: 17px 0 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.65;
        }

        .footer-title {
            margin: 3px 0 16px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 13px;
            font-weight: 700;
        }

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

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

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

        .payment-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .payment-badge {
            padding: 7px 9px;
            border: 1px solid rgba(200, 255, 61, .3);
            border-radius: 6px;
            color: var(--lime);
            font-size: 10px;
            font-weight: 800;
        }

        .footer-security {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 17px;
            color: var(--mist);
            font-size: 11px;
            line-height: 1.45;
        }

        .footer-security b {
            color: var(--cyan);
            font-size: 18px;
            line-height: 1;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(126, 226, 239, .12);
            color: #63818a;
            font-size: 11px;
        }

        .footer-bottom span:last-child {
            text-align: right;
        }

        .floating-support {
            position: fixed;
            z-index: 90;
            left: 16px;
            bottom: 96px;
            display: grid;
            width: 58px;
            height: 58px;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 17px 5px 17px 5px;
            background: rgba(3, 19, 29, .86);
            color: var(--cyan);
            box-shadow: 0 0 15px rgba(0, 240, 255, .5);
            font-size: 25px;
            opacity: .72;
            transition: opacity .25s ease, transform .3s var(--ease), box-shadow .25s ease, color .25s ease;
            animation: float-button 3.5s ease-in-out infinite;
        }

        .floating-support::before {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 10px;
            height: 10px;
            border: 2px solid var(--ink);
            border-radius: 50%;
            background: var(--danger);
            content: "";
            animation: blink 1.3s infinite;
        }

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

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

        @keyframes rotate-ring {
            to { transform: rotate(360deg); }
        }

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

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

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

            .brand-copy {
                max-width: 150px;
                font-size: 15px;
            }

            .nav-link {
                padding-right: 8px;
                padding-left: 8px;
                font-size: 12px;
            }

            .nav-link::after {
                right: 8px;
                left: 8px;
            }

            .hero-inner {
                grid-template-columns: minmax(230px, .9fr) minmax(280px, 1fr);
            }

            .hero-aside {
                grid-column: 1 / -1;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                align-items: center;
            }

            .hero-aside h2,
            .hero-aside p {
                margin-bottom: 8px;
            }

            .aside-list {
                margin: 0;
            }

            .hero-aside .btn {
                align-self: end;
            }
        }

        @media (max-width: 860px) {
            body {
                padding-top: 70px;
            }

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

            .menu-toggle {
                display: block;
            }

            .nav-links {
                position: absolute;
                top: 69px;
                right: 20px;
                left: 20px;
                display: none;
                padding: 10px;
                border: 1px solid var(--line);
                border-radius: 13px;
                background: rgba(5, 18, 27, .98);
                box-shadow: var(--shadow);
            }

            .nav-links.is-open {
                display: grid;
            }

            .nav-link {
                padding: 12px 14px;
            }

            .nav-link::after {
                right: 14px;
                bottom: 7px;
                left: 14px;
            }

            .nav-actions {
                margin-left: 0;
            }

            .hero {
                min-height: auto;
            }

            .hero-inner {
                grid-template-columns: 1fr 1fr;
                gap: 26px;
                padding-top: 70px;
                padding-bottom: 70px;
            }

            .hero-copy {
                grid-column: 1 / -1;
            }

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

            .hero-description {
                max-width: 670px;
            }

            .visual-stage {
                min-height: 380px;
            }

            .channel-layout,
            .news-layout,
            .trust-layout {
                grid-template-columns: 1fr;
            }

            .highlight-panel {
                min-height: 300px;
            }

            .featured-news {
                min-height: 300px;
            }

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

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

            .footer-brand p {
                max-width: 540px;
            }
        }

        @media (max-width: 620px) {
            .container {
                width: min(100% - 28px, var(--container));
            }

            .brand-copy {
                max-width: 132px;
                font-size: 13px;
            }

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

            .nav-actions {
                gap: 2px;
            }

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

            .nav-actions .btn {
                min-height: 39px;
                padding: 0 11px;
                font-size: 11px;
            }

            .menu-toggle {
                width: 38px;
                height: 38px;
            }

            .hero-inner {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                padding-top: 54px;
                padding-bottom: 54px;
            }

            .hero-copy h1 {
                margin-top: 15px;
                font-size: 38px;
            }

            .hero-description {
                font-size: 14px;
            }

            .hero-actions .btn {
                flex: 1 1 auto;
            }

            .hero-points {
                margin-top: 27px;
            }

            .visual-stage {
                min-height: 345px;
                order: 2;
                padding: 10px;
            }

            .visual-stage::before {
                width: 300px;
                height: 300px;
            }

            .visual-stage::after {
                width: 235px;
                height: 235px;
            }

            .stage-image {
                width: min(100%, 285px);
            }

            .hero-aside {
                display: block;
                order: 3;
                padding: 21px 18px;
            }

            .aside-list {
                margin-bottom: 20px;
            }

            .section {
                padding: 70px 0;
            }

            .section-heading {
                margin-bottom: 30px;
            }

            .section-heading.split {
                display: block;
            }

            .section-heading.split .text-link {
                margin-top: 18px;
            }

            .channel-row {
                grid-template-columns: 106px 1fr auto;
                gap: 12px;
                padding: 10px;
            }

            .channel-thumb {
                height: 88px;
            }

            .channel-copy h3 {
                font-size: 16px;
            }

            .channel-copy p {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 11px;
            }

            .channel-arrow {
                width: 31px;
                height: 31px;
                font-size: 14px;
            }

            .metrics-section {
                padding: 22px 0;
            }

            .metrics-bar {
                grid-template-columns: 1fr 1fr;
                row-gap: 22px;
            }

            .metric {
                min-height: 52px;
                padding: 0 14px;
            }

            .metric:nth-child(3) {
                padding-left: 0;
                border-right: 1px solid rgba(200, 255, 61, .18);
            }

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

            .metric:nth-child(4) {
                border-right: 0;
            }

            .metric strong {
                font-size: 22px;
            }

            .metric span {
                font-size: 10px;
            }

            .lead-layout {
                grid-template-columns: 1fr;
                gap: 31px;
            }

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

            .form-field.full {
                grid-column: auto;
            }

            .news-item {
                grid-template-columns: 1fr;
                gap: 7px;
                padding: 18px 0;
            }

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

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

            .faq-item summary {
                font-size: 15px;
            }

            .faq-answer {
                padding-right: 0;
                font-size: 13px;
            }

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

            .cta-section h2 {
                font-size: 31px;
            }

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

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

            .footer-bottom {
                display: block;
            }

            .footer-bottom span {
                display: block;
            }

            .footer-bottom span:last-child {
                margin-top: 8px;
                text-align: left;
            }

            .floating-support {
                left: 14px;
                bottom: 78px;
                width: 52px;
                height: 52px;
            }
        }

        @media (max-width: 420px) {
            .brand-copy {
                max-width: 115px;
                font-size: 11px;
            }

            .nav-actions .login-link {
                display: none;
            }

            .hero-copy h1 {
                font-size: 33px;
            }

            .hero-actions {
                display: grid;
            }

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

            .channel-row {
                grid-template-columns: 88px 1fr;
            }

            .channel-arrow {
                display: none;
            }

            .channel-thumb {
                height: 78px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *, *::before, *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }
        }

/* roulang page: category1 */
:root {
            --ink: #071923;
            --ink-soft: #0d2735;
            --ocean: #0e4051;
            --ocean-light: #146078;
            --cyan: #00e9f5;
            --cyan-soft: #95fbff;
            --lime: #c8ff3d;
            --white: #f4fcff;
            --mist: #c2d4d9;
            --muted: #7f9ca5;
            --line: rgba(126, 226, 239, .18);
            --line-bright: rgba(0, 233, 245, .48);
            --danger: #ff557c;
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 30px;
            --shadow: 0 22px 70px rgba(0, 0, 0, .3);
            --glow: 0 0 28px rgba(0, 233, 245, .19);
            --container: 1180px;
            --ease: cubic-bezier(.2, .8, .2, 1);
        }

        html {
            scroll-behavior: smooth;
        }

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

        body {
            margin: 0;
            padding-top: 78px;
            background:
                radial-gradient(circle at 10% 12%, rgba(0, 233, 245, .08), transparent 26rem),
                radial-gradient(circle at 90% 66%, rgba(200, 255, 61, .055), transparent 24rem),
                var(--ink);
            color: var(--white);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }

        body::before {
            position: fixed;
            z-index: -1;
            inset: 0;
            background-image: linear-gradient(rgba(0, 233, 245, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 233, 245, .025) 1px, transparent 1px);
            background-size: 54px 54px;
            content: "";
            pointer-events: none;
        }

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

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

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

        button {
            cursor: pointer;
        }

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

        .site-header {
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            width: 100%;
            border-bottom: 1px solid rgba(126, 226, 239, .14);
            background: rgba(5, 18, 27, .88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

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

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: max-content;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -.02em;
        }

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

        .brand-mark {
            position: relative;
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 12px 4px 12px 4px;
            color: var(--cyan);
            font-size: 17px;
            box-shadow: inset 0 0 15px rgba(0, 233, 245, .15), 0 0 14px rgba(0, 233, 245, .18);
        }

        .brand-mark::after {
            position: absolute;
            right: -4px;
            bottom: -4px;
            width: 9px;
            height: 9px;
            border: 2px solid var(--ink);
            border-radius: 50%;
            background: var(--lime);
            content: "";
        }

        .brand-copy {
            max-width: 185px;
            line-height: 1.18;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }

        .nav-link {
            position: relative;
            padding: 10px 12px;
            color: var(--mist);
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        .nav-link::after {
            position: absolute;
            right: 12px;
            bottom: 4px;
            left: 12px;
            height: 2px;
            transform: scaleX(0);
            transform-origin: left;
            background: var(--cyan);
            content: "";
            transition: transform .25s var(--ease);
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--white);
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            transform: scaleX(1);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-left: 8px;
        }

        .login-link {
            padding: 10px 7px;
            color: var(--mist);
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }

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

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            gap: 9px;
            padding: 0 19px;
            border: 1px solid transparent;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .01em;
            line-height: 1;
            transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
        }

        .btn:focus,
        .nav-link:focus,
        .login-link:focus,
        .text-link:focus,
        .faq-item summary:focus,
        input:focus,
        textarea:focus {
            outline: 3px solid rgba(0, 233, 245, .38);
            outline-offset: 3px;
        }

        .btn:hover {
            transform: translateY(-3px);
        }

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

        .btn-primary {
            border-color: var(--lime);
            background: var(--lime);
            color: #101e18;
            box-shadow: 0 8px 25px rgba(200, 255, 61, .16);
        }

        .btn-primary:hover {
            background: #dcff72;
            box-shadow: 0 12px 30px rgba(200, 255, 61, .28);
            color: #101e18;
        }

        .btn-outline {
            border-color: var(--line-bright);
            background: rgba(0, 233, 245, .04);
            color: var(--cyan-soft);
        }

        .btn-outline:hover {
            border-color: var(--cyan);
            background: rgba(0, 233, 245, .12);
            color: var(--white);
            box-shadow: 0 0 20px rgba(0, 233, 245, .17);
        }

        .nav-toggle {
            display: none;
            width: 42px;
            height: 42px;
            margin-left: auto;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: rgba(0, 233, 245, .06);
            color: var(--cyan);
            font-size: 22px;
        }

        .page-banner {
            position: relative;
            isolation: isolate;
            min-height: 480px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(7, 25, 35, .96) 12%, rgba(7, 25, 35, .7) 52%, rgba(7, 25, 35, .3)),
                url('/assets/images/backpic/back-2.jpg') center / cover no-repeat;
        }

        .page-banner::after {
            position: absolute;
            z-index: -1;
            right: 8%;
            bottom: -100px;
            width: 420px;
            height: 420px;
            border: 1px solid rgba(0, 233, 245, .25);
            border-radius: 50%;
            box-shadow: 0 0 0 28px rgba(0, 233, 245, .03), 0 0 0 58px rgba(0, 233, 245, .02);
            content: "";
        }

        .banner-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(270px, .95fr);
            align-items: center;
            gap: 70px;
            padding: 84px 0;
        }

        .eyebrow,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

        .eyebrow::before,
        .section-kicker::before {
            width: 25px;
            height: 1px;
            background: var(--cyan);
            content: "";
            box-shadow: 8px 0 0 rgba(0, 233, 245, .35);
        }

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

        h1, h2, h3 {
            font-family: "Space Grotesk", "Be Vietnam Pro", sans-serif;
            line-height: 1.12;
        }

        h1 {
            max-width: 740px;
            margin: 19px 0 22px;
            font-size: clamp(2.4rem, 5.2vw, 4.65rem);
            letter-spacing: -.065em;
        }

        .banner-copy {
            max-width: 690px;
            color: var(--mist);
            font-size: 18px;
            line-height: 1.7;
        }

        .banner-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 30px;
        }

        .portrait-stage {
            position: relative;
            width: min(100%, 340px);
            min-height: 390px;
            justify-self: end;
            padding: 15px;
            border: 1px solid rgba(0, 233, 245, .4);
            border-radius: 26px;
            background: rgba(5, 18, 27, .55);
            box-shadow: 0 24px 60px rgba(0, 0, 0, .38), 0 0 35px rgba(0, 233, 245, .13);
            transform: rotate(2deg);
        }

        .portrait-stage::before {
            position: absolute;
            top: 21px;
            right: 21px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 17px var(--lime);
            content: "";
        }

        .portrait-image {
            position: relative;
            height: 258px;
            overflow: hidden;
            border-radius: 17px;
        }

        .portrait-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: saturate(1.1) contrast(1.05);
        }

        .portrait-image::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 48%, rgba(7, 25, 35, .9));
            content: "";
        }

        .portrait-play {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            display: grid;
            width: 58px;
            height: 58px;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 50%;
            background: rgba(7, 25, 35, .72);
            color: var(--cyan);
            font-size: 20px;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 25px rgba(0, 233, 245, .36);
        }

        .portrait-label {
            position: absolute;
            z-index: 3;
            bottom: 16px;
            left: 17px;
            color: var(--white);
            font-size: 12px;
            font-weight: 700;
        }

        .portrait-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            padding: 20px 5px 5px;
        }

        .portrait-stat strong {
            display: block;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 25px;
            line-height: 1;
        }

        .portrait-stat span {
            display: block;
            margin-top: 7px;
            color: var(--muted);
            font-size: 11px;
        }

        .section {
            padding: 96px 0;
        }

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

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

        .section-heading h2 {
            margin: 13px 0 12px;
            font-size: clamp(2rem, 4vw, 3.25rem);
            letter-spacing: -.055em;
        }

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

        .metrics-strip {
            position: relative;
            z-index: 2;
            margin-top: -42px;
        }

        .metrics-panel {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: rgba(13, 39, 53, .82);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .metric {
            position: relative;
            padding: 27px 30px;
        }

        .metric + .metric {
            border-left: 1px solid var(--line);
        }

        .metric-value {
            display: block;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 32px;
            font-weight: 700;
            line-height: 1;
        }

        .metric-label {
            display: block;
            margin-top: 8px;
            color: var(--mist);
            font-size: 13px;
        }

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

        .metric-note::before {
            display: inline-block;
            width: 6px;
            height: 6px;
            margin: 0 7px 1px 0;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 9px var(--lime);
            content: "";
        }

        .criteria-layout {
            display: grid;
            grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
            gap: 78px;
            align-items: start;
        }

        .criteria-intro h2 {
            margin: 13px 0 18px;
            font-size: clamp(2rem, 4vw, 3.2rem);
            letter-spacing: -.055em;
        }

        .criteria-intro p {
            color: var(--mist);
        }

        .criteria-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 18px;
            color: var(--cyan);
            font-size: 13px;
            font-weight: 800;
        }

        .criteria-link:hover {
            color: var(--lime);
            transform: translateX(4px);
        }

        .check-panel {
            border-top: 1px solid var(--line-bright);
        }

        .check-row {
            display: grid;
            grid-template-columns: 58px 1fr auto;
            gap: 18px;
            align-items: center;
            padding: 23px 0;
            border-bottom: 1px solid var(--line);
        }

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

        .check-row h3 {
            margin: 0 0 5px;
            color: var(--white);
            font-size: 18px;
        }

        .check-row p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .check-status {
            padding: 6px 10px;
            border: 1px solid rgba(200, 255, 61, .3);
            border-radius: 999px;
            color: var(--lime);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .matrix-section {
            background: linear-gradient(110deg, rgba(13, 39, 53, .72), rgba(7, 25, 35, .2));
        }

        .matrix-layout {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 65px;
            align-items: end;
        }

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

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

        .matrix-item {
            display: grid;
            grid-template-columns: 1fr 150px;
            gap: 24px;
            align-items: center;
            padding: 19px 0;
            border-bottom: 1px solid var(--line);
        }

        .matrix-item strong {
            display: block;
            margin-bottom: 3px;
            color: var(--white);
            font-size: 15px;
        }

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

        .progress {
            height: 7px;
            overflow: hidden;
            border-radius: 99px;
            background: rgba(255,255,255,.1);
        }

        .progress i {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--cyan), var(--lime));
            box-shadow: 0 0 13px rgba(0, 233, 245, .5);
        }

        .scene-layout {
            display: grid;
            grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
            gap: 58px;
            align-items: center;
        }

        .scene-image {
            position: relative;
            min-height: 420px;
            overflow: hidden;
            border-radius: var(--radius-lg) 8px var(--radius-lg) 8px;
            box-shadow: var(--shadow);
        }

        .scene-image img {
            width: 100%;
            height: 100%;
            min-height: 420px;
            object-fit: cover;
        }

        .scene-image::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 45%, rgba(7, 25, 35, .9));
            content: "";
        }

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

        .scene-caption strong {
            display: block;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 22px;
        }

        .scene-caption span {
            color: var(--cyan-soft);
            font-size: 12px;
        }

        .scene-points {
            display: grid;
            gap: 18px;
        }

        .scene-point {
            display: grid;
            grid-template-columns: 43px 1fr;
            gap: 16px;
            align-items: start;
        }

        .scene-icon {
            display: grid;
            width: 43px;
            height: 43px;
            place-items: center;
            border: 1px solid var(--line-bright);
            border-radius: 12px 4px 12px 4px;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
        }

        .scene-point h3 {
            margin: 1px 0 5px;
            font-size: 17px;
        }

        .scene-point p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .flow-section {
            padding-top: 75px;
        }

        .flow-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border-top: 1px solid var(--line-bright);
        }

        .flow-item {
            position: relative;
            padding: 29px 30px 20px 0;
        }

        .flow-item + .flow-item {
            padding-left: 30px;
            border-left: 1px solid var(--line);
        }

        .flow-item::before {
            position: absolute;
            top: -5px;
            left: 0;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--lime);
            box-shadow: 0 0 14px var(--lime);
            content: "";
        }

        .flow-item + .flow-item::before {
            left: -5px;
        }

        .flow-step {
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .08em;
        }

        .flow-item h3 {
            margin: 13px 0 8px;
            font-size: 20px;
        }

        .flow-item p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 74px;
            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: 21px 42px 21px 0;
            color: var(--white);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
        }

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

        .faq-item summary::after {
            position: absolute;
            top: 20px;
            right: 4px;
            color: var(--cyan);
            content: "+";
            font-family: "Space Grotesk", sans-serif;
            font-size: 24px;
            font-weight: 400;
            transition: transform .25s ease;
        }

        .faq-item[open] summary::after {
            transform: rotate(45deg);
        }

        .faq-answer {
            max-width: 650px;
            padding: 0 30px 21px 0;
            color: var(--muted);
            font-size: 13px;
        }

        .cta-section {
            padding: 80px 0 100px;
        }

        .cta-panel {
            position: relative;
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 55px;
            overflow: hidden;
            padding: 48px;
            border: 1px solid var(--line-bright);
            border-radius: var(--radius-lg);
            background:
                linear-gradient(105deg, rgba(20, 96, 120, .78), rgba(7, 25, 35, .94)),
                url('/assets/images/backpic/back-3.jpg') center / cover;
            box-shadow: var(--shadow), var(--glow);
        }

        .cta-panel::after {
            position: absolute;
            right: -75px;
            bottom: -105px;
            width: 300px;
            height: 300px;
            border: 1px solid rgba(200,255,61,.28);
            border-radius: 50%;
            content: "";
        }

        .cta-content {
            position: relative;
            z-index: 1;
        }

        .cta-content h2 {
            margin: 13px 0 16px;
            font-size: clamp(2rem, 4vw, 3.25rem);
            letter-spacing: -.06em;
        }

        .cta-content p {
            max-width: 440px;
            margin-bottom: 0;
            color: var(--mist);
        }

        .support-note {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-top: 27px;
            color: var(--cyan-soft);
            font-size: 12px;
        }

        .support-note b {
            display: grid;
            width: 25px;
            height: 25px;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 50%;
            color: var(--cyan);
        }

        .support-form {
            position: relative;
            z-index: 1;
            padding: 25px;
            border: 1px solid rgba(126,226,239,.22);
            border-radius: var(--radius-md);
            background: rgba(5, 18, 27, .66);
        }

        .support-form label {
            display: block;
            margin-bottom: 7px;
            color: var(--mist);
            font-size: 12px;
            font-weight: 700;
        }

        .support-form input,
        .support-form textarea {
            width: 100%;
            margin-bottom: 16px;
            padding: 12px 14px;
            border: 1px solid rgba(126,226,239,.22);
            border-radius: 9px;
            outline: none;
            background: rgba(255,255,255,.06);
            color: var(--white);
            font-size: 13px;
        }

        .support-form input::placeholder,
        .support-form textarea::placeholder {
            color: #78919a;
        }

        .support-form input:focus,
        .support-form textarea:focus {
            border-color: var(--cyan);
            box-shadow: 0 0 0 3px rgba(0,233,245,.1);
        }

        .support-form textarea {
            min-height: 89px;
            resize: vertical;
        }

        .form-status {
            min-height: 22px;
            margin: 12px 0 0;
            color: var(--lime);
            font-size: 12px;
        }

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

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr .75fr .95fr 1.1fr;
            gap: 42px;
        }

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

        .footer-brand p {
            max-width: 360px;
            margin-bottom: 20px;
            color: var(--muted);
            font-size: 13px;
        }

        .footer-security {
            display: flex;
            gap: 9px;
            align-items: flex-start;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.5;
        }

        .footer-security b {
            color: var(--cyan);
            font-size: 14px;
        }

        .footer-title {
            margin: 3px 0 17px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 14px;
        }

        .footer-links {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 10px;
        }

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

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

        .payment-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 19px;
        }

        .payment-badge {
            padding: 7px 9px;
            border: 1px solid var(--line);
            border-radius: 7px;
            color: var(--cyan-soft);
            font-size: 10px;
            font-weight: 700;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 52px;
            padding-top: 21px;
            border-top: 1px solid rgba(126,226,239,.12);
            color: #6d8790;
            font-size: 11px;
        }

        .floating-support {
            position: fixed;
            z-index: 50;
            bottom: 24px;
            left: 16px;
            display: grid;
            width: 56px;
            height: 56px;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 17px 5px 17px 5px;
            background: rgba(5, 18, 27, .9);
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 22px;
            box-shadow: 0 0 22px rgba(0,233,245,.38);
            opacity: .72;
            animation: floatButton 3.5s ease-in-out infinite;
        }

        .floating-support::before {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 10px;
            height: 10px;
            border: 2px solid var(--ink);
            border-radius: 50%;
            background: var(--danger);
            box-shadow: 0 0 10px var(--danger);
            content: "";
        }

        .floating-support:hover {
            opacity: 1;
            color: var(--lime);
            transform: scale(1.1);
            box-shadow: 0 0 33px rgba(0,233,245,.65);
        }

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

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

            .nav-links {
                gap: 0;
            }

            .nav-link {
                padding-right: 8px;
                padding-left: 8px;
                font-size: 12px;
            }

            .nav-link::after {
                right: 8px;
                left: 8px;
            }

            .banner-grid {
                gap: 35px;
            }

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

            .footer-grid {
                grid-template-columns: 1.3fr .8fr .9fr;
            }

            .footer-payments {
                grid-column: span 3;
            }
        }

        @media (max-width: 800px) {
            body {
                padding-top: 70px;
            }

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

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

            .brand-copy {
                max-width: 145px;
                font-size: 14px;
            }

            .nav-toggle {
                display: block;
                order: 3;
            }

            .nav-links {
                position: absolute;
                top: 70px;
                right: 15px;
                left: 15px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 8px;
                border: 1px solid var(--line);
                border-radius: 14px;
                background: rgba(5,18,27,.98);
                box-shadow: var(--shadow);
            }

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

            .nav-link {
                padding: 13px 14px;
            }

            .nav-link::after {
                right: 14px;
                bottom: 6px;
                left: 14px;
            }

            .nav-actions {
                margin-left: auto;
                order: 2;
            }

            .login-link {
                padding-right: 2px;
                padding-left: 2px;
                font-size: 12px;
            }

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

            .banner-grid,
            .criteria-layout,
            .matrix-layout,
            .scene-layout,
            .faq-layout,
            .cta-panel {
                grid-template-columns: 1fr;
            }

            .page-banner {
                min-height: auto;
            }

            .banner-grid {
                padding: 72px 0 105px;
            }

            .portrait-stage {
                justify-self: start;
                width: min(100%, 380px);
                min-height: 350px;
                transform: rotate(0);
            }

            .portrait-image {
                height: 230px;
            }

            .metrics-strip {
                margin-top: -55px;
            }

            .criteria-layout,
            .matrix-layout,
            .scene-layout,
            .faq-layout {
                gap: 38px;
            }

            .cta-panel {
                gap: 28px;
                padding: 31px 24px;
            }

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

            .footer-payments {
                grid-column: span 2;
            }
        }

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

            .brand {
                gap: 7px;
                font-size: 14px;
            }

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

            .brand-copy {
                max-width: 125px;
                font-size: 12px;
            }

            .nav-actions {
                gap: 5px;
            }

            .nav-actions .login-link {
                display: none;
            }

            .nav-actions .btn {
                min-height: 38px;
                padding: 0 10px;
            }

            h1 {
                font-size: clamp(2.25rem, 12vw, 3.4rem);
            }

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

            .banner-actions {
                align-items: stretch;
                flex-direction: column;
            }

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

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

            .metric {
                padding: 20px 22px;
            }

            .metric + .metric {
                border-top: 1px solid var(--line);
                border-left: 0;
            }

            .section {
                padding: 70px 0;
            }

            .section-heading {
                margin-bottom: 30px;
            }

            .check-row {
                grid-template-columns: 37px 1fr;
                gap: 12px;
            }

            .check-status {
                grid-column: 2;
                justify-self: start;
            }

            .matrix-item {
                grid-template-columns: 1fr;
                gap: 11px;
            }

            .scene-image,
            .scene-image img {
                min-height: 300px;
            }

            .flow-grid {
                display: block;
            }

            .flow-item,
            .flow-item + .flow-item {
                padding: 25px 0 25px 25px;
                border-bottom: 1px solid var(--line);
                border-left: 0;
            }

            .flow-item::before,
            .flow-item + .flow-item::before {
                top: 29px;
                left: 0;
            }

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

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

            .footer-bottom {
                align-items: flex-start;
                flex-direction: column;
                gap: 7px;
                margin-top: 35px;
            }

            .floating-support {
                bottom: 18px;
                left: 14px;
            }
        }

/* roulang page: article */
:root {
            --ink: #071923;
            --ink-soft: #0d2735;
            --ocean: #0e4051;
            --ocean-light: #146078;
            --cyan: #00e9f5;
            --cyan-soft: #95fbff;
            --lime: #c8ff3d;
            --white: #f4fcff;
            --mist: #c2d4d9;
            --muted: #7f9ca5;
            --line: rgba(126, 226, 239, .18);
            --line-bright: rgba(0, 233, 245, .48);
            --danger: #ff557c;
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 30px;
            --shadow: 0 22px 70px rgba(0, 0, 0, .3);
            --glow: 0 0 28px rgba(0, 233, 245, .19);
            --container: 1180px;
            --ease: cubic-bezier(.2, .8, .2, 1);
        }

        html {
            scroll-behavior: smooth;
        }

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

        body {
            margin: 0;
            padding-top: 78px;
            overflow-x: hidden;
            background:
                radial-gradient(circle at 10% 12%, rgba(0, 233, 245, .08), transparent 26rem),
                radial-gradient(circle at 90% 66%, rgba(200, 255, 61, .055), transparent 24rem),
                var(--ink);
            color: var(--white);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
        }

        body::before {
            position: fixed;
            z-index: -1;
            inset: 0;
            opacity: .2;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(0, 233, 245, .035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 233, 245, .035) 1px, transparent 1px);
            background-size: 48px 48px;
            content: "";
        }

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

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

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

        button {
            cursor: pointer;
        }

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

        .site-header {
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            width: 100%;
            border-bottom: 1px solid rgba(126, 226, 239, .14);
            background: rgba(5, 18, 27, .88);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

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

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: max-content;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -.02em;
        }

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

        .brand-mark {
            position: relative;
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 12px 4px 12px 4px;
            color: var(--cyan);
            font-size: 17px;
            box-shadow: inset 0 0 15px rgba(0, 233, 245, .15), 0 0 14px rgba(0, 233, 245, .18);
        }

        .brand-mark::after {
            position: absolute;
            right: -4px;
            bottom: -4px;
            width: 9px;
            height: 9px;
            border: 2px solid var(--ink);
            border-radius: 50%;
            background: var(--lime);
            content: "";
        }

        .brand-copy {
            max-width: 185px;
            line-height: 1.18;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }

        .nav-link {
            position: relative;
            padding: 10px 12px;
            color: var(--mist);
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        .nav-link::after {
            position: absolute;
            right: 12px;
            bottom: 4px;
            left: 12px;
            height: 2px;
            transform: scaleX(0);
            transform-origin: left;
            background: var(--cyan);
            content: "";
            transition: transform .25s var(--ease);
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--white);
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            transform: scaleX(1);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-left: 8px;
        }

        .login-link {
            padding: 10px 8px;
            color: var(--mist);
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }

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

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            gap: 9px;
            padding: 0 19px;
            border: 1px solid transparent;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .01em;
            line-height: 1;
            transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
        }

        .btn:focus,
        .nav-link:focus,
        .login-link:focus,
        .text-link:focus,
        .faq-item summary:focus,
        input:focus,
        select:focus {
            outline: 3px solid rgba(0, 233, 245, .38);
            outline-offset: 3px;
        }

        .btn:hover {
            transform: translateY(-3px);
        }

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

        .btn-primary {
            border-color: var(--lime);
            background: var(--lime);
            color: #101e18;
            box-shadow: 0 8px 25px rgba(200, 255, 61, .16);
        }

        .btn-primary:hover {
            background: #dcff72;
            box-shadow: 0 12px 30px rgba(200, 255, 61, .28);
            color: #101e18;
        }

        .btn-outline {
            border-color: var(--line-bright);
            background: rgba(0, 233, 245, .04);
            color: var(--cyan-soft);
        }

        .btn-outline:hover {
            border-color: var(--cyan);
            background: rgba(0, 233, 245, .12);
            color: var(--white);
            box-shadow: 0 0 20px rgba(0, 233, 245, .17);
        }

        .btn-ghost {
            border-color: rgba(255, 255, 255, .16);
            background: rgba(255, 255, 255, .04);
            color: var(--mist);
        }

        .btn-ghost:hover {
            border-color: var(--cyan);
            color: var(--white);
        }

        .article-banner {
            position: relative;
            min-height: 465px;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(5, 18, 27, .96) 4%, rgba(5, 18, 27, .76) 45%, rgba(5, 18, 27, .25) 100%),
                url("/assets/images/backpic/back-2.jpg") center / cover no-repeat;
        }

        .article-banner::after {
            position: absolute;
            inset: 0;
            opacity: .42;
            background: linear-gradient(0deg, var(--ink) 0%, transparent 36%);
            content: "";
            pointer-events: none;
        }

        .banner-content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 80px 0 66px;
        }

        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 25px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        .breadcrumb a:hover {
            color: var(--cyan);
        }

        .breadcrumb span:last-child {
            color: var(--cyan-soft);
        }

        .eyebrow,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .15em;
            text-transform: uppercase;
        }

        .eyebrow::before,
        .section-kicker::before {
            width: 24px;
            height: 1px;
            background: var(--lime);
            content: "";
        }

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

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

        .banner-content h1 {
            max-width: 850px;
            margin-bottom: 20px;
            color: var(--white);
            font-size: clamp(2.25rem, 5.3vw, 4.65rem);
            font-weight: 700;
            line-height: 1.03;
        }

        .banner-summary {
            max-width: 750px;
            margin-bottom: 22px;
            color: var(--mist);
            font-size: 17px;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 22px;
            color: var(--muted);
            font-size: 13px;
        }

        .meta-pill,
        .category-badge,
        .payment-badge,
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: rgba(7, 25, 35, .68);
        }

        .meta-pill {
            padding: 6px 11px;
        }

        .meta-pill strong {
            color: var(--cyan-soft);
        }

        .video-action {
            position: absolute;
            z-index: 3;
            right: 11%;
            bottom: 118px;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .play-button {
            display: grid;
            width: 76px;
            height: 76px;
            place-items: center;
            padding-left: 5px;
            border: 1px solid var(--cyan);
            border-radius: 50%;
            background: rgba(7, 25, 35, .7);
            color: var(--cyan);
            font-size: 25px;
            box-shadow: 0 0 0 10px rgba(0, 233, 245, .07), 0 0 32px rgba(0, 233, 245, .3);
            transition: transform .3s var(--ease), background .3s ease, color .3s ease;
        }

        .play-button:hover {
            transform: scale(1.1);
            background: var(--cyan);
            color: var(--ink);
        }

        .play-caption {
            max-width: 150px;
            color: var(--white);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.4;
        }

        .section {
            padding: 92px 0;
        }

        .section-compact {
            padding: 62px 0;
        }

        .section-head {
            max-width: 680px;
            margin-bottom: 34px;
        }

        .section-head h2 {
            margin-bottom: 12px;
            color: var(--white);
            font-size: clamp(1.8rem, 3vw, 2.8rem);
            line-height: 1.12;
        }

        .section-head p {
            margin-bottom: 0;
            color: var(--mist);
        }

        .metric-strip {
            position: relative;
            z-index: 4;
            margin-top: -1px;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: rgba(13, 39, 53, .65);
        }

        .metric-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .metric {
            min-height: 132px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 25px 28px;
            border-right: 1px solid var(--line);
        }

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

        .metric-number {
            margin-bottom: 3px;
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 30px;
            font-weight: 700;
            line-height: 1.1;
        }

        .metric-label {
            color: var(--mist);
            font-size: 13px;
        }

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

        .article-column {
            min-width: 0;
        }

        .article-cover {
            position: relative;
            overflow: hidden;
            margin-bottom: 30px;
            border-radius: var(--radius-md);
            background: var(--ink-soft);
            box-shadow: var(--shadow);
        }

        .article-cover img {
            width: 100%;
            aspect-ratio: 16 / 8;
            object-fit: cover;
            opacity: .9;
        }

        .article-cover::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(0, 233, 245, .12), transparent 48%, rgba(200, 255, 61, .08));
            content: "";
        }

        .article-richtext {
            color: var(--mist);
            font-size: 17px;
            line-height: 1.78;
        }

        .article-richtext h2,
        .article-richtext h3 {
            margin: 35px 0 13px;
            color: var(--white);
            line-height: 1.25;
        }

        .article-richtext h2 {
            font-size: 28px;
        }

        .article-richtext h3 {
            font-size: 21px;
        }

        .article-richtext p {
            margin-bottom: 20px;
        }

        .article-richtext strong {
            color: var(--cyan-soft);
        }

        .article-richtext a {
            color: var(--cyan);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .article-richtext ul,
        .article-richtext ol {
            margin: 0 0 24px 23px;
            padding: 0;
        }

        .article-richtext li {
            margin-bottom: 8px;
            padding-left: 5px;
        }

        .article-richtext blockquote {
            margin: 30px 0;
            padding: 23px 28px;
            border-left: 3px solid var(--lime);
            background: rgba(0, 233, 245, .06);
            color: var(--white);
            font-size: 20px;
            font-weight: 600;
            line-height: 1.5;
        }

        .article-richtext table {
            width: 100%;
            margin: 25px 0;
            border-collapse: collapse;
            background: rgba(13, 39, 53, .45);
        }

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

        .article-richtext th {
            color: var(--cyan-soft);
        }

        .empty-article {
            padding: 48px 30px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: rgba(13, 39, 53, .45);
            text-align: left;
        }

        .empty-article h2 {
            margin-bottom: 10px;
            color: var(--white);
            font-size: 26px;
        }

        .empty-article p {
            margin-bottom: 23px;
            color: var(--mist);
        }

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

        .aside-panel {
            margin-bottom: 18px;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: linear-gradient(145deg, rgba(20, 96, 120, .28), rgba(7, 25, 35, .74));
        }

        .aside-panel h3 {
            margin-bottom: 17px;
            color: var(--white);
            font-size: 18px;
        }

        .aside-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .aside-list li {
            display: flex;
            gap: 11px;
            padding: 11px 0;
            border-bottom: 1px solid rgba(126, 226, 239, .12);
            color: var(--mist);
            font-size: 13px;
        }

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

        .aside-list b {
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
        }

        .aside-note {
            color: var(--muted);
            font-size: 13px;
        }

        .pull-quote {
            margin: 0;
            padding: 52px max(24px, calc((100vw - var(--container)) / 2));
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background:
                linear-gradient(90deg, rgba(0, 233, 245, .1), transparent 60%),
                var(--ink-soft);
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(1.45rem, 2.5vw, 2.35rem);
            font-weight: 600;
            letter-spacing: -.035em;
            line-height: 1.25;
        }

        .pull-quote span {
            display: block;
            margin-top: 16px;
            color: var(--cyan);
            font-family: "Be Vietnam Pro", sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .criteria-section {
            background: linear-gradient(180deg, rgba(13, 39, 53, .5), transparent);
        }

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

        .criteria-intro h2 {
            margin-bottom: 15px;
            color: var(--white);
            font-size: clamp(1.9rem, 3vw, 2.7rem);
            line-height: 1.1;
        }

        .criteria-intro p {
            color: var(--mist);
        }

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

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

        .criteria-index {
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border: 1px solid var(--line-bright);
            border-radius: 10px;
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
        }

        .criteria-item h3 {
            margin-bottom: 5px;
            color: var(--white);
            font-size: 18px;
        }

        .criteria-item p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .comparison-section {
            padding-top: 85px;
        }

        .comparison-wrap {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: rgba(13, 39, 53, .42);
        }

        .comparison-row {
            display: grid;
            grid-template-columns: 1.1fr .9fr .9fr;
            border-bottom: 1px solid var(--line);
        }

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

        .comparison-row > div {
            padding: 17px 21px;
            border-right: 1px solid var(--line);
            color: var(--mist);
            font-size: 14px;
        }

        .comparison-row > div:last-child {
            border-right: 0;
        }

        .comparison-row.header > div {
            color: var(--cyan-soft);
            background: rgba(0, 233, 245, .07);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .07em;
            text-transform: uppercase;
        }

        .comparison-row strong {
            color: var(--white);
        }

        .check {
            color: var(--lime);
            font-weight: 800;
        }

        .faq-section {
            padding-top: 74px;
        }

        .faq-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        .faq-item {
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            background: rgba(13, 39, 53, .42);
            transition: border-color .25s ease, background .25s ease;
        }

        .faq-item:hover {
            border-color: var(--line-bright);
            background: rgba(13, 39, 53, .66);
        }

        .faq-item summary {
            position: relative;
            padding: 20px 48px 20px 21px;
            color: var(--white);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
        }

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

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

        .faq-item[open] summary::after {
            content: "−";
        }

        .faq-answer {
            padding: 0 21px 20px;
            color: var(--mist);
            font-size: 14px;
        }

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

        .cta-panel {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 55px;
            align-items: center;
            padding: 48px;
            border: 1px solid var(--line-bright);
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 90% 18%, rgba(200, 255, 61, .15), transparent 17rem),
                linear-gradient(125deg, rgba(14, 64, 81, .88), rgba(7, 25, 35, .92));
            box-shadow: var(--glow);
        }

        .cta-panel h2 {
            margin-bottom: 12px;
            color: var(--white);
            font-size: clamp(1.9rem, 3.5vw, 3rem);
            line-height: 1.08;
        }

        .cta-panel p {
            max-width: 650px;
            margin-bottom: 25px;
            color: var(--mist);
        }

        .support-form {
            display: grid;
            gap: 12px;
        }

        .support-form label {
            color: var(--mist);
            font-size: 12px;
            font-weight: 700;
        }

        .support-form input,
        .support-form select {
            width: 100%;
            min-height: 46px;
            margin: 4px 0 2px;
            padding: 0 14px;
            border: 1px solid var(--line-bright);
            border-radius: 9px;
            outline: 0;
            background: rgba(7, 25, 35, .72);
            color: var(--white);
        }

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

        .form-status {
            min-height: 21px;
            margin: 0;
            color: var(--lime);
            font-size: 12px;
        }

        .fab-support {
            position: fixed;
            z-index: 50;
            bottom: 96px;
            left: 16px;
            display: inline-flex;
            min-width: 58px;
            min-height: 50px;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 0 15px;
            border: 1px solid var(--cyan);
            border-radius: 999px;
            background: rgba(0, 0, 0, .68);
            color: var(--cyan-soft);
            box-shadow: 0 0 15px rgba(0, 240, 255, .38);
            opacity: .72;
            backdrop-filter: blur(12px);
            animation: fabBreath 3.5s ease-in-out infinite;
        }

        .fab-support:hover {
            transform: scale(1.08);
            color: var(--white);
            opacity: 1;
            box-shadow: 0 0 30px rgba(0, 240, 255, .65);
        }

        .fab-icon {
            font-size: 18px;
        }

        .fab-label {
            font-size: 12px;
            font-weight: 800;
        }

        .fab-notice {
            position: absolute;
            top: -3px;
            right: -1px;
            width: 10px;
            height: 10px;
            border: 2px solid var(--ink);
            border-radius: 50%;
            background: var(--danger);
            animation: noticeBlink 1.8s ease-in-out infinite;
        }

        .site-footer {
            padding: 70px 0 22px;
            border-top: 1px solid var(--line);
            background: #05121b;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.45fr .7fr .9fr 1fr;
            gap: 38px;
            padding-bottom: 45px;
        }

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

        .footer-brand p {
            max-width: 350px;
            margin-bottom: 20px;
            color: var(--muted);
            font-size: 13px;
        }

        .footer-title {
            margin: 5px 0 17px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 14px;
            letter-spacing: -.02em;
        }

        .footer-links {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 10px;
        }

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

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

        .footer-security {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .footer-security b {
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
        }

        .payment-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .payment-badge {
            padding: 7px 10px;
            color: var(--cyan-soft);
            font-size: 11px;
            font-weight: 700;
        }

        .footer-payments .footer-security {
            margin-top: 19px;
        }

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

        @keyframes fabBreath {
            0%, 100% { transform: translateY(0); opacity: .68; }
            50% { transform: translateY(-5px); opacity: .88; }
        }

        @keyframes noticeBlink {
            0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(255, 85, 124, 0); }
            50% { opacity: .38; box-shadow: 0 0 12px rgba(255, 85, 124, .9); }
        }

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

            .nav-links {
                gap: 0;
            }

            .nav-link {
                padding-right: 8px;
                padding-left: 8px;
                font-size: 12px;
            }

            .metric {
                padding: 22px 17px;
            }

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

            .footer-grid {
                grid-template-columns: 1.3fr .7fr .9fr;
            }

            .footer-payments {
                grid-column: span 3;
            }
        }

        @media (max-width: 768px) {
            body {
                padding-top: 133px;
            }

            .site-header {
                position: absolute;
            }

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

            .brand {
                font-size: 14px;
            }

            .brand-copy {
                max-width: 155px;
            }

            .nav-actions {
                margin-left: auto;
            }

            .nav-links {
                order: 3;
                width: 100%;
                justify-content: flex-start;
                margin-left: 0;
                overflow-x: auto;
                border-top: 1px solid rgba(126, 226, 239, .1);
                padding-top: 7px;
            }

            .nav-link {
                padding-top: 7px;
                padding-bottom: 7px;
            }

            .article-banner {
                min-height: 520px;
            }

            .banner-content {
                padding-bottom: 54px;
            }

            .video-action {
                top: 105px;
                right: 7%;
                bottom: auto;
            }

            .play-button {
                width: 60px;
                height: 60px;
                font-size: 20px;
            }

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

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

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

            .article-layout,
            .criteria-layout,
            .cta-panel {
                grid-template-columns: 1fr;
            }

            .article-aside {
                position: static;
            }

            .criteria-layout {
                gap: 30px;
            }

            .cta-panel {
                gap: 30px;
                padding: 33px 25px;
            }

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

            .footer-payments {
                grid-column: span 2;
            }
        }

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

            body {
                padding-top: 143px;
                font-size: 15px;
            }

            .brand-mark {
                width: 32px;
                height: 32px;
                border-radius: 9px 3px 9px 3px;
                font-size: 14px;
            }

            .brand-copy {
                max-width: 128px;
                font-size: 12px;
            }

            .nav-actions {
                gap: 3px;
            }

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

            .nav-actions .btn {
                min-height: 37px;
                padding: 0 10px;
                font-size: 10px;
            }

            .article-banner {
                min-height: 555px;
            }

            .banner-content h1 {
                font-size: 2.25rem;
            }

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

            .video-action {
                top: 68px;
                right: 50%;
                transform: translateX(50%);
            }

            .video-action:hover {
                transform: translateX(50%) scale(1.03);
            }

            .play-caption {
                display: none;
            }

            .section {
                padding: 65px 0;
            }

            .metric {
                min-height: 112px;
                padding: 18px 14px;
            }

            .metric-number {
                font-size: 24px;
            }

            .metric-label {
                font-size: 11px;
            }

            .article-richtext {
                font-size: 16px;
            }

            .pull-quote {
                padding: 38px 20px;
                font-size: 1.45rem;
            }

            .comparison-wrap {
                overflow-x: auto;
            }

            .comparison-row {
                min-width: 620px;
            }

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

            .cta-panel h2 {
                font-size: 2rem;
            }

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

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

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

            .fab-support {
                bottom: 76px;
                left: 13px;
            }
        }

/* roulang page: category2 */
:root {
            --ink: #071923;
            --ink-soft: #0d2735;
            --ocean: #0e4051;
            --ocean-light: #146078;
            --cyan: #00e9f5;
            --cyan-soft: #95fbff;
            --lime: #c8ff3d;
            --white: #f4fcff;
            --mist: #c2d4d9;
            --muted: #7f9ca5;
            --line: rgba(126, 226, 239, .18);
            --line-bright: rgba(0, 233, 245, .48);
            --danger: #ff557c;
            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 30px;
            --shadow: 0 22px 70px rgba(0, 0, 0, .3);
            --glow: 0 0 28px rgba(0, 233, 245, .19);
            --container: 1180px;
            --ease: cubic-bezier(.2, .8, .2, 1);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            padding-top: 78px;
            background:
                radial-gradient(circle at 12% 10%, rgba(0, 233, 245, .09), transparent 27rem),
                radial-gradient(circle at 90% 59%, rgba(200, 255, 61, .06), transparent 23rem),
                var(--ink);
            color: var(--white);
            font-family: "Be Vietnam Pro", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.65;
            overflow-x: hidden;
        }
        a {
            color: inherit;
            text-decoration: none;
            transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
        }
        img { display: block; max-width: 100%; height: auto; }
        button, input, textarea { font: inherit; }
        button { cursor: pointer; }
        ::selection { background: var(--cyan); color: var(--ink); }

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

        .site-header {
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            width: 100%;
            border-bottom: 1px solid rgba(126, 226, 239, .14);
            background: rgba(5, 18, 27, .89);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .nav-shell {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 28px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: max-content;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 17px;
            font-weight: 700;
            letter-spacing: -.02em;
        }
        .brand:hover { color: var(--cyan-soft); }
        .brand-mark {
            position: relative;
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 12px 4px 12px 4px;
            color: var(--cyan);
            font-size: 17px;
            box-shadow: inset 0 0 15px rgba(0, 233, 245, .15), 0 0 14px rgba(0, 233, 245, .18);
        }
        .brand-mark::after {
            position: absolute;
            right: -4px;
            bottom: -4px;
            width: 9px;
            height: 9px;
            border: 2px solid var(--ink);
            border-radius: 50%;
            background: var(--lime);
            content: "";
        }
        .brand-copy { max-width: 185px; line-height: 1.18; }
        .nav-links {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }
        .nav-link {
            position: relative;
            padding: 10px 12px;
            color: var(--mist);
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }
        .nav-link::after {
            position: absolute;
            right: 12px;
            bottom: 4px;
            left: 12px;
            height: 2px;
            transform: scaleX(0);
            transform-origin: left;
            background: var(--cyan);
            content: "";
            transition: transform .25s var(--ease);
        }
        .nav-link:hover, .nav-link.active { color: var(--white); }
        .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-left: 8px;
        }
        .login-link {
            padding: 9px 7px;
            color: var(--mist);
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }
        .login-link:hover { color: var(--cyan-soft); }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            gap: 9px;
            padding: 0 19px;
            border: 1px solid transparent;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .01em;
            line-height: 1;
            transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
        }
        .btn:hover { transform: translateY(-3px); }
        .btn:active { transform: translateY(1px) scale(.98); }
        .btn-primary {
            border-color: var(--lime);
            background: var(--lime);
            color: #101e18;
            box-shadow: 0 8px 25px rgba(200, 255, 61, .16);
        }
        .btn-primary:hover {
            background: #dcff72;
            color: #101e18;
            box-shadow: 0 12px 30px rgba(200, 255, 61, .28);
        }
        .btn-outline {
            border-color: var(--line-bright);
            background: rgba(0, 233, 245, .04);
            color: var(--cyan-soft);
        }
        .btn-outline:hover {
            border-color: var(--cyan);
            background: rgba(0, 233, 245, .12);
            color: var(--white);
            box-shadow: 0 0 20px rgba(0, 233, 245, .17);
        }
        .btn-small { min-height: 40px; padding: 0 15px; font-size: 12px; }
        .btn:focus, .nav-link:focus, .login-link:focus, input:focus, .faq-item summary:focus {
            outline: 3px solid rgba(0, 233, 245, .38);
            outline-offset: 3px;
        }

        .page-hero {
            position: relative;
            min-height: 592px;
            display: flex;
            align-items: center;
            overflow: hidden;
            border-bottom: 1px solid var(--line);
            background:
                linear-gradient(90deg, rgba(4, 20, 30, .97) 0%, rgba(5, 30, 43, .85) 49%, rgba(4, 19, 29, .55) 100%),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
        }
        .page-hero::before {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(0, 233, 245, .14) 1px, transparent 1px);
            background-size: 32px 32px;
            opacity: .18;
            content: "";
            pointer-events: none;
        }
        .hero-layout {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 450px;
            gap: 62px;
            align-items: center;
            padding: 70px 0;
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 17px;
            color: var(--cyan-soft);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            width: 25px;
            height: 1px;
            background: var(--cyan);
            box-shadow: 0 0 8px var(--cyan);
            content: "";
        }
        h1, h2, h3, p { margin-top: 0; }
        h1 {
            max-width: 760px;
            margin-bottom: 20px;
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(37px, 4.45vw, 64px);
            font-weight: 700;
            letter-spacing: -.055em;
            line-height: 1.05;
        }
        .hero-copy {
            max-width: 640px;
            margin-bottom: 28px;
            color: var(--mist);
            font-size: 17px;
            line-height: 1.72;
        }
        .hero-steps {
            display: flex;
            flex-wrap: wrap;
            gap: 9px 20px;
            margin: 0 0 29px;
            padding: 0;
            list-style: none;
            color: var(--white);
            font-size: 13px;
            font-weight: 600;
        }
        .hero-steps li {
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .hero-steps li::before {
            display: grid;
            width: 18px;
            height: 18px;
            place-items: center;
            border: 1px solid var(--line-bright);
            border-radius: 50%;
            color: var(--lime);
            font-size: 11px;
            content: "✓";
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

        .coupon-wall {
            position: relative;
            padding: 10px 0 10px 22px;
        }
        .coupon-wall::before {
            position: absolute;
            top: 50%;
            left: 0;
            width: 104%;
            height: 72%;
            transform: translateY(-50%) rotate(-4deg);
            border: 1px solid rgba(0, 233, 245, .19);
            background: rgba(7, 38, 54, .43);
            box-shadow: var(--glow);
            content: "";
        }
        .coupon {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0, 233, 245, .52);
            border-radius: 18px;
            background: linear-gradient(135deg, #123f55, #092532 72%);
            box-shadow: 0 24px 65px rgba(0, 0, 0, .42), inset 0 1px rgba(255,255,255,.09);
        }
        .coupon::after {
            position: absolute;
            top: -80px;
            right: -78px;
            width: 210px;
            height: 210px;
            border: 1px solid rgba(200, 255, 61, .3);
            border-radius: 50%;
            box-shadow: 0 0 0 22px rgba(200, 255, 61, .035), 0 0 0 44px rgba(0, 233, 245, .025);
            content: "";
        }
        .coupon-top {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 15px;
            padding: 23px 25px 15px;
            border-bottom: 1px dashed rgba(149, 251, 255, .5);
        }
        .coupon-label {
            display: block;
            margin-bottom: 7px;
            color: var(--cyan-soft);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .coupon-title {
            margin: 0;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 21px;
            font-weight: 700;
            line-height: 1.12;
        }
        .coupon-seal {
            display: grid;
            width: 53px;
            height: 53px;
            flex: 0 0 53px;
            place-items: center;
            border: 1px solid var(--lime);
            border-radius: 50%;
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 15px;
            font-weight: 700;
            box-shadow: 0 0 18px rgba(200, 255, 61, .2);
        }
        .coupon-body { position: relative; z-index: 1; padding: 21px 25px 25px; }
        .coupon-value {
            margin: 0 0 5px;
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 42px;
            font-weight: 700;
            letter-spacing: -.05em;
            line-height: 1;
        }
        .coupon-desc { margin-bottom: 20px; color: var(--mist); font-size: 13px; }
        .coupon-meta {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin: 18px 0 0;
            padding-top: 14px;
            border-top: 1px solid rgba(126, 226, 239, .14);
            color: var(--muted);
            font-size: 11px;
        }
        .coupon .btn { width: 100%; }

        main { padding: 0 0 90px; }
        .section { padding: 92px 0; }
        .section-line { border-top: 1px solid var(--line); }
        .section-kicker {
            margin-bottom: 10px;
            color: var(--cyan);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .section-heading {
            max-width: 730px;
            margin-bottom: 16px;
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 3.1vw, 43px);
            font-weight: 700;
            letter-spacing: -.045em;
            line-height: 1.12;
        }
        .section-intro {
            max-width: 705px;
            margin-bottom: 0;
            color: var(--mist);
            font-size: 16px;
        }
        .heading-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 25px;
            margin-bottom: 40px;
        }

        .metric-board {
            display: grid;
            grid-template-columns: 1.3fr repeat(3, 1fr);
            gap: 1px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: var(--line);
            box-shadow: var(--shadow);
        }
        .metric-main, .metric-cell {
            min-height: 196px;
            background: rgba(10, 35, 47, .94);
        }
        .metric-main {
            position: relative;
            padding: 30px;
            overflow: hidden;
            background:
                linear-gradient(130deg, rgba(0, 233, 245, .1), transparent 63%),
                rgba(10, 35, 47, .97);
        }
        .metric-main::after {
            position: absolute;
            right: -30px;
            bottom: -60px;
            color: rgba(0, 233, 245, .13);
            font-family: "Space Grotesk", sans-serif;
            font-size: 155px;
            font-weight: 700;
            content: "3D";
        }
        .metric-main h3 {
            position: relative;
            z-index: 1;
            max-width: 315px;
            margin-bottom: 11px;
            font-family: "Space Grotesk", sans-serif;
            font-size: 25px;
            line-height: 1.2;
        }
        .metric-main p {
            position: relative;
            z-index: 1;
            max-width: 390px;
            margin-bottom: 0;
            color: var(--mist);
            font-size: 13px;
        }
        .metric-cell {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 25px;
        }
        .metric-num {
            display: block;
            margin-bottom: 5px;
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 33px;
            font-weight: 700;
            line-height: 1.1;
        }
        .metric-cell strong { font-size: 14px; }
        .metric-cell span:last-child { margin-top: 5px; color: var(--muted); font-size: 12px; }

        .sea-showcase {
            display: grid;
            grid-template-columns: 42% 1fr;
            gap: 55px;
            align-items: center;
        }
        .image-panel {
            position: relative;
            min-height: 480px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-sm);
            background: var(--ink-soft);
        }
        .image-panel img {
            width: 100%;
            height: 100%;
            min-height: 480px;
            object-fit: cover;
            opacity: .86;
        }
        .image-panel::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 42%, rgba(4, 24, 34, .93));
            content: "";
        }
        .image-caption {
            position: absolute;
            z-index: 1;
            right: 22px;
            bottom: 20px;
            left: 22px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.3;
        }
        .matrix-list { margin-top: 35px; border-top: 1px solid var(--line); }
        .matrix-item {
            display: grid;
            grid-template-columns: 54px 1fr auto;
            gap: 18px;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid var(--line);
        }
        .matrix-icon {
            display: grid;
            width: 45px;
            height: 45px;
            place-items: center;
            border: 1px solid rgba(0, 233, 245, .36);
            border-radius: 13px 5px 13px 5px;
            color: var(--cyan);
            font-size: 20px;
            box-shadow: inset 0 0 14px rgba(0, 233, 245, .08);
        }
        .matrix-item h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; }
        .matrix-item p { margin: 0; color: var(--muted); font-size: 13px; }
        .matrix-tag {
            padding: 6px 10px;
            border: 1px solid rgba(200, 255, 61, .25);
            border-radius: 999px;
            background: rgba(200, 255, 61, .06);
            color: var(--lime);
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
        }

        .compare-wrap {
            overflow: hidden;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }
        .compare-row {
            display: grid;
            grid-template-columns: 1.1fr 1fr 1fr;
            align-items: stretch;
            border-bottom: 1px solid var(--line);
        }
        .compare-row:last-child { border-bottom: 0; }
        .compare-row > div {
            display: flex;
            align-items: center;
            padding: 19px 22px;
            border-right: 1px solid var(--line);
            font-size: 14px;
        }
        .compare-row > div:last-child { border-right: 0; }
        .compare-head > div {
            min-height: 64px;
            background: rgba(14, 64, 81, .45);
            color: var(--cyan-soft);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
        }
        .compare-head > div:nth-child(2) { color: var(--lime); }
        .compare-row > div:first-child { color: var(--mist); font-weight: 700; }
        .compare-row > div:nth-child(2) { background: rgba(200, 255, 61, .035); color: var(--white); }
        .check { margin-right: 8px; color: var(--lime); font-size: 16px; }
        .subtle { color: var(--muted); }

        .scene-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 30px;
            align-items: stretch;
        }
        .scene-copy {
            padding: 10px 35px 10px 0;
        }
        .scene-copy .section-heading { margin-bottom: 19px; }
        .scene-list {
            margin: 28px 0 0;
            padding: 0;
            list-style: none;
        }
        .scene-list li {
            position: relative;
            margin-bottom: 15px;
            padding-left: 29px;
            color: var(--mist);
            font-size: 14px;
        }
        .scene-list li::before {
            position: absolute;
            top: .55em;
            left: 0;
            width: 13px;
            height: 13px;
            border: 1px solid var(--cyan);
            border-radius: 50%;
            box-shadow: inset 0 0 0 3px var(--ink), 0 0 9px rgba(0,233,245,.25);
            content: "";
        }
        .scene-card {
            position: relative;
            display: flex;
            min-height: 400px;
            align-items: flex-end;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: var(--ink-soft);
        }
        .scene-card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .6;
            transition: transform .6s var(--ease);
        }
        .scene-card:hover img { transform: scale(1.06); }
        .scene-card::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(4,20,29,.05) 18%, rgba(4,20,29,.95) 96%);
            content: "";
        }
        .scene-card-content { position: relative; z-index: 1; padding: 30px; }
        .scene-card-content span { color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
        .scene-card-content h3 { margin: 8px 0 10px; font-family: "Space Grotesk", sans-serif; font-size: 27px; line-height: 1.15; }
        .scene-card-content p { margin: 0; color: var(--mist); font-size: 14px; }

        .journey-layout {
            display: grid;
            grid-template-columns: 34% 1fr;
            gap: 55px;
            align-items: start;
        }
        .journey-intro {
            position: sticky;
            top: 100px;
        }
        .journey-intro p { color: var(--mist); }
        .journey-list { border-left: 1px solid var(--line-bright); }
        .journey-step {
            position: relative;
            padding: 0 0 34px 42px;
        }
        .journey-step:last-child { padding-bottom: 0; }
        .step-number {
            position: absolute;
            top: 0;
            left: -16px;
            display: grid;
            width: 31px;
            height: 31px;
            place-items: center;
            border: 1px solid var(--cyan);
            border-radius: 50%;
            background: var(--ink);
            color: var(--cyan);
            font-family: "Space Grotesk", sans-serif;
            font-size: 12px;
            font-weight: 700;
        }
        .journey-step h3 { margin-bottom: 5px; font-size: 17px; }
        .journey-step p { max-width: 670px; margin: 0; color: var(--muted); font-size: 14px; }

        .faq-layout {
            display: grid;
            grid-template-columns: 32% 1fr;
            gap: 65px;
            align-items: start;
        }
        .faq-aside p { color: var(--mist); }
        .faq-aside .btn { margin-top: 12px; }
        .faq-stack { border-top: 1px solid var(--line); }
        .faq-item {
            border-bottom: 1px solid var(--line);
        }
        .faq-item summary {
            position: relative;
            padding: 21px 43px 21px 0;
            color: var(--white);
            cursor: pointer;
            font-size: 16px;
            font-weight: 700;
            list-style: none;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            position: absolute;
            top: 20px;
            right: 4px;
            color: var(--cyan);
            font-size: 25px;
            font-weight: 400;
            line-height: 1;
            content: "+";
            transition: transform .25s var(--ease);
        }
        .faq-item[open] summary::after { transform: rotate(45deg); color: var(--lime); }
        .faq-answer {
            max-width: 760px;
            padding: 0 30px 22px 0;
            color: var(--mist);
            font-size: 14px;
        }
        .faq-answer p { margin: 0; }

        .contact-section { padding-bottom: 0; }
        .cta-panel {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0, 233, 245, .34);
            border-radius: var(--radius-lg);
            background:
                linear-gradient(112deg, rgba(10, 70, 87, .92), rgba(5, 29, 40, .96)),
                url('/assets/images/backpic/back-3.jpg') center/cover;
            box-shadow: var(--shadow), var(--glow);
        }
        .cta-panel::after {
            position: absolute;
            right: -8%;
            bottom: -95%;
            width: 480px;
            height: 480px;
            border: 1px solid rgba(200,255,61,.32);
            border-radius: 50%;
            box-shadow: 0 0 0 32px rgba(0,233,245,.035), 0 0 0 64px rgba(200,255,61,.025);
            content: "";
        }
        .cta-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 440px;
            gap: 52px;
            align-items: center;
            padding: 53px 58px;
        }
        .cta-grid h2 {
            max-width: 600px;
            margin-bottom: 13px;
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(29px, 3vw, 42px);
            letter-spacing: -.045em;
            line-height: 1.12;
        }
        .cta-grid p { max-width: 590px; margin-bottom: 0; color: var(--mist); }
        .support-form {
            padding: 22px;
            border: 1px solid rgba(149, 251, 255, .22);
            border-radius: var(--radius-md);
            background: rgba(4, 24, 34, .62);
            backdrop-filter: blur(8px);
        }
        .support-form label {
            display: block;
            margin-bottom: 8px;
            color: var(--cyan-soft);
            font-size: 12px;
            font-weight: 700;
        }
        .input-wrap { position: relative; }
        .support-form input {
            width: 100%;
            height: 48px;
            padding: 0 108px 0 14px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: rgba(255,255,255,.06);
            color: var(--white);
            font-size: 13px;
        }
        .support-form input::placeholder { color: #86a2ac; }
        .support-form input:focus {
            border-color: var(--cyan);
            background: rgba(0,233,245,.06);
            box-shadow: 0 0 0 3px rgba(0,233,245,.1);
            outline: none;
        }
        .support-form .btn {
            position: absolute;
            top: 4px;
            right: 4px;
            min-height: 40px;
            padding: 0 12px;
        }
        .form-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

        .site-footer {
            margin-top: 92px;
            border-top: 1px solid var(--line);
            background: #06151e;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.35fr .7fr .85fr 1.1fr;
            gap: 42px;
            padding: 65px 0 45px;
        }
        .footer-brand .brand { margin-bottom: 17px; }
        .footer-brand > p {
            max-width: 365px;
            margin-bottom: 20px;
            color: var(--muted);
            font-size: 13px;
        }
        .footer-title {
            margin: 5px 0 17px;
            color: var(--white);
            font-family: "Space Grotesk", sans-serif;
            font-size: 15px;
            font-weight: 700;
        }
        .footer-links { margin: 0; padding: 0; list-style: none; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: var(--muted); font-size: 13px; }
        .footer-links a:hover { color: var(--cyan-soft); padding-left: 3px; }
        .footer-security {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.55;
        }
        .footer-security b {
            color: var(--lime);
            font-family: "Space Grotesk", sans-serif;
            font-size: 15px;
            line-height: 1.35;
        }
        .payment-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 19px; }
        .payment-badge {
            display: inline-flex;
            align-items: center;
            min-height: 29px;
            padding: 0 9px;
            border: 1px solid rgba(149,251,255,.21);
            border-radius: 7px;
            background: rgba(255,255,255,.04);
            color: var(--mist);
            font-size: 11px;
            font-weight: 700;
        }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 19px 0 23px;
            border-top: 1px solid var(--line);
            color: #66838d;
            font-size: 11px;
        }

        .fab-support {
            position: fixed;
            z-index: 90;
            bottom: 96px;
            left: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            border: 1px solid transparent;
            border-radius: 17px 7px 17px 7px;
            background:
                linear-gradient(var(--ink), var(--ink)) padding-box,
                linear-gradient(135deg, var(--lime), var(--cyan)) border-box;
            box-shadow: 0 0 16px rgba(0,240,255,.38), inset 0 0 18px rgba(0,233,245,.1);
            color: var(--cyan);
            font-size: 24px;
            opacity: .7;
            animation: floatFab 3s ease-in-out infinite;
        }
        .fab-support::after {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--danger);
            box-shadow: 0 0 10px var(--danger);
            content: "";
            animation: blink 1.1s ease-in-out infinite;
        }
        .fab-support:hover {
            transform: scale(1.1);
            box-shadow: 0 0 28px rgba(0,240,255,.7), 0 0 16px rgba(200,255,61,.26);
            color: var(--lime);
            opacity: 1;
            animation: none;
        }
        .fab-support:active { transform: scale(.95); }
        @keyframes floatFab {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: .25; }
        }

        @media (max-width: 1024px) {
            .nav-shell { gap: 16px; }
            .nav-link { padding-right: 8px; padding-left: 8px; }
            .hero-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 35px; }
            .coupon-wall { padding-left: 8px; }
            .metric-board { grid-template-columns: 1fr 1fr; }
            .metric-main { grid-column: span 2; }
            .sea-showcase, .faq-layout { gap: 40px; }
            .cta-grid { grid-template-columns: 1fr 380px; padding: 45px; }
            .footer-grid { gap: 25px; }
        }

        @media (max-width: 768px) {
            body { padding-top: 72px; }
            .container { width: min(100% - 30px, var(--container)); }
            .nav-shell { min-height: 72px; gap: 10px; }
            .brand { font-size: 14px; }
            .brand-mark { width: 34px; height: 34px; }
            .brand-copy { max-width: 130px; }
            .nav-links {
                position: absolute;
                right: 0;
                bottom: -43px;
                left: 0;
                width: 100%;
                justify-content: center;
                gap: 0;
                overflow-x: auto;
                border-bottom: 1px solid var(--line);
                background: rgba(5, 18, 27, .95);
            }
            .nav-link { padding: 11px 10px; font-size: 12px; }
            .nav-link::after { right: 10px; left: 10px; bottom: 5px; }
            .nav-actions { margin-left: auto; gap: 3px; }
            .login-link { display: none; }
            .nav-actions .btn { min-height: 37px; padding: 0 10px; font-size: 11px; }
            .page-hero { min-height: auto; margin-top: 39px; }
            .hero-layout { grid-template-columns: 1fr; gap: 34px; padding: 58px 0 62px; }
            h1 { font-size: clamp(34px, 9vw, 50px); }
            .hero-copy { font-size: 15px; }
            .coupon-wall { max-width: 500px; padding-left: 10px; }
            .section { padding: 68px 0; }
            .heading-row { display: block; margin-bottom: 30px; }
            .section-heading { font-size: 32px; }
            .metric-board { grid-template-columns: 1fr 1fr; }
            .metric-cell { min-height: 160px; }
            .sea-showcase, .scene-grid, .journey-layout, .faq-layout, .cta-grid { grid-template-columns: 1fr; }
            .sea-showcase { gap: 35px; }
            .image-panel, .image-panel img { min-height: 340px; }
            .scene-copy { padding-right: 0; }
            .journey-layout, .faq-layout { gap: 30px; }
            .journey-intro { position: static; }
            .cta-grid { gap: 28px; padding: 37px 27px; }
            .footer-grid { grid-template-columns: 1fr 1fr; padding: 50px 0 33px; }
        }

        @media (max-width: 520px) {
            .container { width: min(100% - 28px, var(--container)); }
            .brand-copy { max-width: 118px; font-size: 12px; }
            .nav-actions .btn { padding: 0 8px; }
            h1 { font-size: 34px; }
            .hero-steps { display: block; }
            .hero-steps li { margin-bottom: 8px; }
            .hero-actions .btn { width: 100%; }
            .coupon-top, .coupon-body { padding-right: 19px; padding-left: 19px; }
            .coupon-value { font-size: 36px; }
            .metric-board { grid-template-columns: 1fr; }
            .metric-main { grid-column: auto; min-height: 180px; padding: 25px; }
            .metric-cell { min-height: 135px; }
            .matrix-item { grid-template-columns: 45px 1fr; gap: 13px; }
            .matrix-tag { display: none; }
            .compare-wrap { margin-right: -14px; margin-left: -14px; overflow-x: auto; }
            .compare-row { min-width: 620px; }
            .compare-row > div { padding: 16px 15px; font-size: 12px; }
            .scene-card { min-height: 340px; }
            .scene-card-content { padding: 23px; }
            .faq-answer { padding-right: 5px; }
            .support-form input { padding-right: 14px; }
            .support-form .btn { position: static; width: 100%; margin-top: 10px; }
            .footer-grid { grid-template-columns: 1fr; gap: 25px; }
            .footer-bottom { display: block; line-height: 1.8; }
            .footer-bottom span { display: block; }
            .fab-support { bottom: 22px; left: 14px; width: 53px; height: 53px; }
        }