/* roulang page: index */
:root {
            --bg: #070A12;
            --bg-soft: #0B1220;
            --surface: rgba(20, 31, 52, .68);
            --surface-solid: #111b2d;
            --surface-deep: #090f1c;
            --primary: #35D6FF;
            --primary-strong: #14bfe9;
            --secondary: #8B5CFF;
            --accent: #FF4D8D;
            --text: #F4F7FC;
            --muted: #AAB5C8;
            --weak: #78869D;
            --border: rgba(130, 164, 210, .18);
            --border-bright: rgba(53, 214, 255, .48);
            --success: #55e6a5;
            --danger: #ff7185;
            --radius-sm: 10px;
            --radius-btn: 12px;
            --radius-card: 18px;
            --radius-xl: 26px;
            --shadow: 0 20px 55px rgba(0, 0, 0, .32);
            --glow: 0 14px 38px rgba(53, 214, 255, .14), 0 8px 24px rgba(139, 92, 255, .12);
            --nav-height: 76px;
            --transition: 220ms ease;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 110px; }
        body {
            margin: 0;
            min-width: 320px;
            overflow-x: hidden;
            color: var(--text);
            background:
                radial-gradient(circle at 80% 5%, rgba(139, 92, 255, .16), transparent 31rem),
                radial-gradient(circle at 8% 28%, rgba(53, 214, 255, .10), transparent 29rem),
                linear-gradient(180deg, #070A12 0%, #08101d 45%, #070A12 100%);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -2;
            pointer-events: none;
            opacity: .25;
            background-image:
                linear-gradient(rgba(130, 164, 210, .04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(130, 164, 210, .04) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(to bottom, #000, transparent 80%);
        }

        body::after {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            opacity: .12;
            background: repeating-linear-gradient(117deg, transparent 0 90px, rgba(53, 214, 255, .12) 91px, transparent 92px 180px);
        }

        ::selection { color: #06101b; background: var(--primary); }
        a { color: inherit; text-decoration: none; transition: color var(--transition), border-color var(--transition), transform var(--transition), background var(--transition); }
        a:hover { color: var(--primary); }
        img, svg { display: block; max-width: 100%; }
        button, input, select, textarea { font: inherit; }
        button { border: 0; }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--text); letter-spacing: -.03em; }
        h1 { font-size: clamp(2.15rem, 5vw, 4rem); line-height: 1.12; font-weight: 800; }
        h2 { font-size: clamp(1.85rem, 3.4vw, 2.55rem); line-height: 1.22; font-weight: 800; }
        h3 { font-size: clamp(1.18rem, 2vw, 1.45rem); line-height: 1.38; font-weight: 750; }
        p { color: var(--muted); }
        .container { max-width: 1280px; }
        .section { position: relative; padding: 104px 0; }
        .section-tight { padding: 78px 0; }
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 16px;
            color: var(--primary);
            font-size: .82rem;
            font-weight: 750;
            letter-spacing: .12em;
        }
        .section-kicker::before {
            content: "";
            width: 26px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            box-shadow: 0 0 12px rgba(53, 214, 255, .7);
        }
        .section-copy { max-width: 720px; margin-bottom: 0; font-size: 1.04rem; }
        .glass {
            background: rgba(20, 31, 52, .68);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        .site-header {
            position: fixed;
            top: 14px;
            right: 0;
            left: 0;
            z-index: 1040;
            padding: 0 14px;
        }
        .nav-shell {
            min-height: var(--nav-height);
            padding: 10px 14px 10px 20px;
            border: 1px solid rgba(130, 164, 210, .22);
            border-radius: 22px;
            background: rgba(8, 14, 26, .76);
            box-shadow: 0 16px 38px rgba(0, 0, 0, .32);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            transition: min-height var(--transition), background var(--transition);
        }
        .site-header.scrolled .nav-shell {
            min-height: 64px;
            background: rgba(7, 10, 18, .94);
        }
        .brand {
            display: flex;
            align-items: center;
            gap: 11px;
            max-width: 390px;
            color: var(--text);
            font-size: .94rem;
            font-weight: 800;
            line-height: 1.25;
        }
        .brand:hover { color: var(--text); }
        .brand-mark {
            display: grid;
            flex: 0 0 39px;
            width: 39px;
            height: 39px;
            place-items: center;
            border: 1px solid rgba(53, 214, 255, .46);
            border-radius: 12px;
            color: var(--primary);
            background: linear-gradient(145deg, rgba(53, 214, 255, .15), rgba(139, 92, 255, .16));
            box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 0 24px rgba(53, 214, 255, .12);
        }
        .nav-main { gap: 6px; }
        .nav-main .nav-link {
            position: relative;
            min-height: 42px;
            padding: 8px 15px !important;
            border: 1px solid transparent;
            border-radius: 999px;
            color: var(--muted);
            font-size: .94rem;
            font-weight: 680;
        }
        .nav-main .nav-link:hover {
            transform: translateY(-2px);
            border-color: var(--border);
            color: var(--text);
            background: rgba(255, 255, 255, .035);
        }
        .nav-main .nav-link.active {
            color: var(--text);
            border-color: rgba(53, 214, 255, .28);
            background: rgba(53, 214, 255, .09);
            box-shadow: inset 0 -2px rgba(53, 214, 255, .7);
        }
        .nav-actions { gap: 9px; }
        .age-badge, .status-badge, .soft-badge {
            display: inline-flex;
            min-height: 28px;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 760;
            white-space: nowrap;
        }
        .age-badge { color: #ffd5e3; border: 1px solid rgba(255, 77, 141, .55); background: rgba(255, 77, 141, .09); }
        .status-badge { color: #c9f6ff; border: 1px solid rgba(53, 214, 255, .38); background: rgba(53, 214, 255, .08); }
        .soft-badge { color: #dfd4ff; border: 1px solid rgba(139, 92, 255, .38); background: rgba(139, 92, 255, .09); }

        .btn {
            min-height: 46px;
            padding: 10px 19px;
            border-radius: var(--radius-btn);
            border: 1px solid transparent;
            font-weight: 760;
            transition: filter var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .btn-glow {
            color: #06111c;
            background: linear-gradient(110deg, var(--primary), #68deff 42%, #a98cff);
            box-shadow: inset 0 1px rgba(255, 255, 255, .56), 0 10px 30px rgba(53, 214, 255, .19);
        }
        .btn-glow:hover {
            color: #02070d;
            transform: translateY(-2px);
            filter: brightness(1.08);
            box-shadow: inset 0 1px rgba(255, 255, 255, .66), 0 14px 36px rgba(53, 214, 255, .28);
        }
        .btn-glow:active, .btn-outline-glass:active { transform: translateY(0); }
        .btn-outline-glass {
            color: var(--text);
            border-color: rgba(130, 164, 210, .32);
            background: rgba(18, 29, 49, .58);
        }
        .btn-outline-glass:hover {
            color: var(--primary);
            border-color: var(--border-bright);
            background: rgba(53, 214, 255, .07);
            transform: translateY(-2px);
        }
        .icon-button {
            display: inline-grid;
            width: 44px;
            height: 44px;
            place-items: center;
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            background: rgba(255, 255, 255, .035);
        }
        .icon-button:hover { color: var(--primary); border-color: var(--border-bright); transform: translateY(-2px); }
        :focus-visible { outline: 3px solid rgba(53, 214, 255, .72) !important; outline-offset: 3px; }
        .navbar-toggler { width: 46px; height: 46px; padding: 11px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); }
        .navbar-toggler:focus { box-shadow: none; }
        .menu-lines, .menu-lines::before, .menu-lines::after {
            display: block;
            width: 22px;
            height: 2px;
            border-radius: 2px;
            background: currentColor;
        }
        .menu-lines { position: relative; }
        .menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; }
        .menu-lines::before { top: -7px; }
        .menu-lines::after { top: 7px; }

        .hero {
            position: relative;
            min-height: 790px;
            padding: 150px 0 82px;
            overflow: hidden;
        }
        .hero::before {
            content: "";
            position: absolute;
            inset: 72px 2% 0;
            border-radius: 40px;
            background:
                linear-gradient(180deg, rgba(7, 10, 18, .13), rgba(7, 10, 18, .88)),
                radial-gradient(circle at 72% 36%, rgba(139, 92, 255, .25), transparent 30%),
                radial-gradient(circle at 22% 28%, rgba(53, 214, 255, .18), transparent 34%);
            border: 1px solid rgba(130, 164, 210, .10);
        }
        .hero-stage { position: relative; z-index: 1; text-align: center; }
        .hero-brand {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            padding: 7px 13px;
            border: 1px solid rgba(139, 92, 255, .38);
            border-radius: 999px;
            color: #e5ddff;
            background: rgba(139, 92, 255, .09);
            font-size: .84rem;
            font-weight: 750;
        }
        .hero h1 { max-width: 1020px; margin: 0 auto 24px; text-shadow: 0 5px 30px rgba(0, 0, 0, .48); }
        .text-gradient {
            color: transparent;
            background: linear-gradient(90deg, #f5f8ff 12%, #7ee8ff 57%, #b9a2ff);
            background-clip: text;
            -webkit-background-clip: text;
        }
        .hero-lead { max-width: 810px; margin: 0 auto 28px; color: #bfcaDA; font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 1.85; }
        .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
        .access-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            max-width: 780px;
            margin: 32px auto 38px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 17px;
            background: rgba(7, 13, 24, .66);
            backdrop-filter: blur(16px);
        }
        .access-state { position: relative; padding: 14px 16px; }
        .access-state + .access-state::before { content: ""; position: absolute; top: 13px; bottom: 13px; left: 0; width: 1px; background: var(--border); }
        .access-state strong { display: block; color: var(--text); font-size: .93rem; }
        .access-state span { color: var(--weak); font-size: .78rem; }

        .media-showcase {
            position: relative;
            max-width: 1080px;
            margin: 0 auto;
            padding: 18px;
            border-radius: var(--radius-xl);
            text-align: left;
        }
        .cover-stage {
            position: relative;
            min-height: 300px;
            overflow: hidden;
            border-radius: 19px;
            background:
                linear-gradient(125deg, rgba(7, 10, 18, .20), rgba(7, 10, 18, .76)),
                radial-gradient(circle at 30% 30%, rgba(53, 214, 255, .48), transparent 22%),
                radial-gradient(circle at 70% 36%, rgba(255, 77, 141, .21), transparent 25%),
                radial-gradient(circle at 55% 90%, rgba(139, 92, 255, .43), transparent 32%),
                #0b1727;
        }
        .cover-stage::before, .cover-stage::after {
            content: "";
            position: absolute;
            border-radius: 28px;
            transform: rotate(-9deg);
            border: 1px solid rgba(255, 255, 255, .13);
            box-shadow: var(--shadow);
        }
        .cover-stage::before { width: 250px; height: 340px; right: 12%; top: -43px; background: linear-gradient(145deg, rgba(53, 214, 255, .19), rgba(10, 18, 33, .88)); }
        .cover-stage::after { width: 205px; height: 280px; left: 13%; bottom: -80px; background: linear-gradient(145deg, rgba(139, 92, 255, .26), rgba(10, 18, 33, .91)); }
        .cover-caption { position: absolute; left: 30px; bottom: 26px; z-index: 2; max-width: 510px; }
        .cover-caption h2 { margin-bottom: 8px; font-size: clamp(1.45rem, 3vw, 2.35rem); }
        .cover-caption p { margin: 0; color: #c1ccdc; }
        .update-float {
            position: absolute;
            top: 26px;
            right: 28px;
            z-index: 3;
            max-width: 270px;
            padding: 16px 18px;
            border: 1px solid rgba(53, 214, 255, .31);
            border-radius: 15px;
            background: rgba(8, 15, 27, .82);
            box-shadow: var(--glow);
        }
        .update-float strong { display: block; margin-bottom: 4px; font-size: .93rem; }
        .update-float span { color: var(--muted); font-size: .82rem; }

        .problem-layout { display: grid; grid-template-columns: .82fr 1.35fr; gap: 58px; align-items: start; }
        .problem-intro { position: sticky; top: 108px; }
        .problem-number { color: rgba(53, 214, 255, .14); font-size: 5rem; font-weight: 900; line-height: 1; }
        .issue-list { position: relative; display: grid; gap: 14px; }
        .issue-list::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 31px; width: 1px; background: repeating-linear-gradient(to bottom, rgba(53, 214, 255, .44) 0 6px, transparent 6px 13px); }
        .issue-item {
            position: relative;
            display: grid;
            grid-template-columns: 58px 1fr auto;
            gap: 17px;
            align-items: center;
            min-height: 122px;
            padding: 21px 22px;
            border: 1px solid var(--border);
            border-radius: var(--radius-card);
            background: rgba(15, 25, 43, .60);
            transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
        }
        .issue-item:hover { transform: translateX(4px); border-color: rgba(53, 214, 255, .38); box-shadow: var(--glow); }
        .issue-icon {
            position: relative;
            z-index: 1;
            display: grid;
            width: 48px;
            height: 48px;
            place-items: center;
            border: 1px solid rgba(53, 214, 255, .30);
            border-radius: 14px;
            color: var(--primary);
            background: #0c1727;
        }
        .issue-item h3 { margin-bottom: 5px; font-size: 1.08rem; }
        .issue-item p { margin: 0; font-size: .91rem; line-height: 1.65; }
        .issue-state { color: var(--weak); font-size: .75rem; white-space: nowrap; }

        .feature-stack { display: grid; gap: 28px; margin-top: 44px; }
        .feature-panel {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 34px;
            align-items: center;
            padding: 28px;
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            background: linear-gradient(145deg, rgba(20, 31, 52, .75), rgba(10, 17, 30, .72));
            box-shadow: var(--shadow);
        }
        .feature-panel.reverse .feature-copy { order: 2; }
        .feature-panel.reverse .ui-preview { order: 1; }
        .feature-copy { padding: 10px 14px; }
        .feature-copy p { margin-bottom: 18px; }
        .check-list { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
        .check-list li { display: flex; gap: 10px; color: #c5cfdd; font-size: .94rem; }
        .check-list li::before { content: "✓"; flex: 0 0 24px; color: var(--primary); font-weight: 900; }
        .ui-preview {
            min-height: 300px;
            padding: 18px;
            border: 1px solid rgba(130, 164, 210, .17);
            border-radius: 18px;
            background: #09111e;
            box-shadow: inset 0 1px rgba(255, 255, 255, .05);
        }
        .filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 17px; }
        .filter-pill {
            min-height: 35px;
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--muted);
            background: rgba(255, 255, 255, .025);
            font-size: .8rem;
        }
        .filter-pill:hover, .filter-pill.active { color: #07121d; border-color: var(--primary); background: var(--primary); }
        .preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .mini-cover {
            position: relative;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 12px;
            background:
                radial-gradient(circle at 75% 20%, rgba(255, 77, 141, .22), transparent 30%),
                linear-gradient(135deg, rgba(53, 214, 255, .18), rgba(139, 92, 255, .22), #0b1424);
        }
        .mini-cover:nth-child(2) { background: radial-gradient(circle at 22% 30%, rgba(53, 214, 255, .25), transparent 28%), linear-gradient(145deg, #10182b, rgba(139, 92, 255, .31)); }
        .mini-cover:nth-child(3) { background: radial-gradient(circle at 66% 48%, rgba(139, 92, 255, .35), transparent 25%), linear-gradient(120deg, #0b1727, rgba(53, 214, 255, .15)); }
        .mini-cover:nth-child(4) { background: radial-gradient(circle at 30% 70%, rgba(255, 77, 141, .18), transparent 23%), linear-gradient(145deg, rgba(53, 214, 255, .15), #11152a); }
        .mini-cover span { position: absolute; right: 9px; bottom: 8px; left: 9px; color: #e7edf8; font-size: .74rem; font-weight: 700; }
        .privacy-console { display: grid; gap: 12px; }
        .console-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
        .console-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px rgba(85, 230, 165, .55); }
        .console-row strong { font-size: .86rem; }
        .console-row small { color: var(--weak); }

        .result-panel {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 44px;
            margin-top: 42px;
            padding: 36px;
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            background:
                radial-gradient(circle at 10% 10%, rgba(53, 214, 255, .09), transparent 32%),
                rgba(16, 26, 45, .69);
            box-shadow: var(--shadow);
        }
        .ability-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
        .ability {
            min-height: 118px;
            padding: 18px;
            border: 1px solid var(--border);
            border-radius: 15px;
            background: rgba(7, 14, 25, .48);
        }
        .ability strong { display: block; margin-bottom: 5px; color: var(--text); }
        .ability span { color: var(--muted); font-size: .87rem; }
        .journey { position: relative; padding-left: 34px; }
        .journey::before { content: ""; position: absolute; top: 13px; bottom: 13px; left: 10px; width: 2px; background: linear-gradient(var(--primary), var(--secondary), rgba(139,92,255,.1)); }
        .journey-step { position: relative; padding: 0 0 25px 18px; }
        .journey-step::before { content: ""; position: absolute; top: 8px; left: -31px; width: 12px; height: 12px; border: 2px solid var(--bg); border-radius: 50%; background: var(--primary); box-shadow: 0 0 16px rgba(53,214,255,.55); }
        .journey-step:last-child { padding-bottom: 0; }
        .journey-step strong { display: block; color: var(--text); }
        .journey-step span { color: var(--muted); font-size: .86rem; }

        .news-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; margin-top: 40px; }
        .news-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: rgba(16, 26, 45, .58); }
        .news-item {
            display: grid;
            grid-template-columns: 112px 1fr auto;
            gap: 20px;
            align-items: center;
            min-height: 120px;
            padding: 18px 22px;
            border-bottom: 1px solid var(--border);
        }
        .news-item:last-child { border-bottom: 0; }
        .news-item:hover { background: rgba(53, 214, 255, .035); }
        .news-item:hover h3 { color: var(--primary); }
        .news-label { color: var(--primary); font-size: .79rem; font-weight: 760; letter-spacing: .06em; }
        .news-item h3 { margin: 2px 0 4px; font-size: 1.03rem; transition: color var(--transition); }
        .news-item p { margin: 0; font-size: .85rem; }
        .news-arrow { color: var(--weak); font-size: 1.3rem; }
        .quote-stack { display: grid; gap: 16px; }
        .quote-card {
            position: relative;
            padding: 25px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: var(--radius-card);
            background: rgba(20, 31, 52, .70);
            box-shadow: var(--shadow);
        }
        .quote-card.main { min-height: 218px; border-color: rgba(139, 92, 255, .34); }
        .quote-card.main::before { content: "“"; position: absolute; top: -20px; right: 18px; color: rgba(139, 92, 255, .22); font-size: 8rem; line-height: 1; font-family: Georgia, serif; }
        .quote-card p { position: relative; margin-bottom: 18px; color: #d6deea; }
        .quote-meta { color: var(--weak); font-size: .79rem; }

        .cta-section { padding: 30px 0 92px; }
        .cta-banner {
            position: relative;
            overflow: hidden;
            padding: 70px 34px;
            border: 1px solid rgba(53, 214, 255, .25);
            border-radius: 30px;
            text-align: center;
            background:
                radial-gradient(circle at 50% 120%, rgba(53, 214, 255, .31), transparent 38%),
                radial-gradient(circle at 86% 10%, rgba(139, 92, 255, .22), transparent 25%),
                #0c1423;
            box-shadow: var(--shadow), var(--glow);
        }
        .cta-banner::before, .cta-banner::after { content: ""; position: absolute; width: 170px; height: 250px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; transform: rotate(17deg); }
        .cta-banner::before { top: -80px; left: 5%; }
        .cta-banner::after { right: 6%; bottom: -120px; transform: rotate(-15deg); }
        .cta-banner > * { position: relative; z-index: 1; }
        .cta-banner h2 { max-width: 760px; margin: 0 auto 15px; }
        .cta-banner p { max-width: 720px; margin: 0 auto 24px; }
        .cta-note { margin-top: 19px !important; color: var(--weak) !important; font-size: .82rem; }

        .faq-wrap { padding-top: 92px; }
        .accordion { display: grid; gap: 12px; }
        .accordion-item {
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 15px !important;
            background: rgba(17, 28, 47, .69);
        }
        .accordion-button {
            min-height: 68px;
            padding: 18px 22px;
            color: var(--text);
            background: transparent;
            font-weight: 720;
            box-shadow: none !important;
        }
        .accordion-button:not(.collapsed) { color: var(--primary); background: rgba(53, 214, 255, .045); }
        .accordion-button::after {
            width: 22px;
            height: 22px;
            color: var(--primary);
            background: none;
            content: "+";
            font-size: 1.45rem;
            line-height: 20px;
            text-align: center;
            transition: transform var(--transition);
        }
        .accordion-button:not(.collapsed)::after { content: "−"; transform: rotate(180deg); }
        .accordion-body { padding: 0 22px 21px; color: var(--muted); line-height: 1.8; }

        .site-footer { padding: 72px 0 24px; border-top: 1px solid var(--border); background: rgba(5, 9, 16, .66); }
        .footer-grid { display: grid; grid-template-columns: 1.1fr .65fr .8fr 1.35fr; gap: 36px; }
        .footer-brand { margin-bottom: 17px; max-width: none; }
        .footer-title { margin-bottom: 15px; color: var(--text); font-size: .94rem; font-weight: 780; }
        .footer-text, .footer-links a { color: var(--muted); font-size: .88rem; }
        .footer-links { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
        .footer-links a:hover { color: var(--primary); transform: translateX(2px); }
        .feedback-form { display: grid; gap: 12px; }
        .form-label { margin-bottom: 5px; color: #cbd5e3; font-size: .82rem; font-weight: 680; }
        .form-control, .form-select {
            min-height: 46px;
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 11px;
            background-color: #080f1b;
        }
        .form-control:focus, .form-select:focus {
            color: var(--text);
            border-color: var(--primary);
            background-color: #080f1b;
            box-shadow: 0 0 0 3px rgba(53, 214, 255, .12);
        }
        .form-control::placeholder { color: #66748b; }
        .form-select { color-scheme: dark; }
        textarea.form-control { min-height: 96px; resize: vertical; }
        .form-check-input {
            border-color: var(--border);
            background-color: #080f1b;
        }
        .form-check-input:checked { border-color: var(--primary); background-color: var(--primary); }
        .form-check-label { color: var(--muted); font-size: .78rem; }
        .form-message { display: none; padding: 10px 12px; border-radius: 10px; font-size: .8rem; }
        .form-message.success { display: block; color: #bdf8dd; border: 1px solid rgba(85,230,165,.35); background: rgba(85,230,165,.08); }
        .form-message.error { display: block; color: #ffd1d8; border: 1px solid rgba(255,113,133,.40); background: rgba(255,113,133,.08); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 21px; border-top: 1px solid var(--border); color: var(--weak); font-size: .78rem; }
        .footer-legal { display: flex; flex-wrap: wrap; gap: 14px; }

        .offcanvas {
            width: min(390px, 90vw) !important;
            color: var(--text);
            border-left: 1px solid var(--border) !important;
            background: #09111e;
        }
        .offcanvas-header { padding: 22px; border-bottom: 1px solid var(--border); }
        .offcanvas-body { padding: 24px 22px; }
        .btn-close { filter: invert(1) grayscale(1); opacity: .85; }
        .mobile-nav { display: grid; gap: 9px; }
        .mobile-nav a { padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.025); }
        .mobile-nav a.active { color: var(--primary); border-color: rgba(53,214,255,.4); background: rgba(53,214,255,.07); }
        .modal-content {
            color: var(--text);
            border: 1px solid var(--border);
            border-radius: 22px;
            background: #0b1321;
            box-shadow: var(--shadow);
        }
        .modal-header, .modal-footer { border-color: var(--border); }
        .search-results { display: grid; gap: 9px; margin-top: 16px; }
        .search-result { display: block; padding: 13px; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.025); }
        .search-result:hover { color: var(--primary); border-color: var(--border-bright); }
        .age-modal .modal-dialog { max-width: 610px; }
        .age-symbol { display: grid; width: 70px; height: 70px; margin: 0 auto 20px; place-items: center; border: 2px solid var(--accent); border-radius: 50%; color: #ffd6e4; background: rgba(255,77,141,.09); font-size: 1.55rem; font-weight: 900; box-shadow: 0 0 32px rgba(255,77,141,.16); }
        .age-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .btn-leave { color: #ffd7de; border-color: rgba(255,113,133,.48); background: rgba(255,113,133,.08); }
        .btn-leave:hover { color: #fff; border-color: var(--danger); background: rgba(255,113,133,.14); }

        @media (max-width: 1199.98px) {
            .brand { max-width: 310px; font-size: .82rem; }
            .nav-main .nav-link { padding-inline: 11px !important; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 991.98px) {
            :root { --nav-height: 66px; }
            .site-header { top: 9px; padding-inline: 9px; }
            .nav-shell { min-height: 66px; padding: 8px 10px 8px 14px; border-radius: 18px; }
            .brand { max-width: calc(100vw - 110px); }
            .hero { min-height: auto; padding-top: 124px; }
            .section { padding: 80px 0; }
            .problem-layout, .result-panel, .news-layout { grid-template-columns: 1fr; }
            .problem-intro { position: static; }
            .feature-panel { grid-template-columns: 1fr; }
            .feature-panel.reverse .feature-copy, .feature-panel.reverse .ui-preview { order: initial; }
            .result-panel { gap: 32px; }
        }
        @media (max-width: 767.98px) {
            .section { padding: 62px 0; }
            .section-tight { padding: 56px 0; }
            .hero::before { inset-inline: 8px; border-radius: 25px; }
            .hero-actions .btn { width: 100%; }
            .access-strip { grid-template-columns: 1fr; }
            .access-state + .access-state::before { top: 0; right: 18px; bottom: auto; left: 18px; width: auto; height: 1px; }
            .cover-stage { min-height: 390px; }
            .cover-caption { right: 22px; left: 22px; bottom: 22px; }
            .update-float { top: 18px; right: 18px; left: 18px; max-width: none; }
            .issue-item { grid-template-columns: 52px 1fr; }
            .issue-state { grid-column: 2; }
            .feature-panel { padding: 18px; }
            .feature-copy { padding: 5px; }
            .result-panel { padding: 22px; }
            .ability-list { grid-template-columns: 1fr; }
            .news-item { grid-template-columns: 82px 1fr; padding: 16px; }
            .news-arrow { display: none; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; }
            .cta-banner { padding: 55px 20px; border-radius: 23px; }
        }
        @media (max-width: 575.98px) {
            h1 { font-size: 2.15rem; }
            h2 { font-size: 1.8rem; }
            .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
            .brand-text { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .media-showcase { padding: 10px; border-radius: 20px; }
            .cover-stage { min-height: 410px; }
            .preview-grid { grid-template-columns: 1fr; }
            .mini-cover:nth-child(n+3) { display: none; }
            .issue-item { padding: 18px 15px; }
            .ui-preview { min-height: 250px; padding: 13px; }
            .news-item { grid-template-columns: 1fr; }
            .age-actions { grid-template-columns: 1fr; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
        }

/* roulang page: category1 */
:root{
--bg:#070A12;--bg-soft:#0B1220;--surface:rgba(20,31,52,.68);--surface-solid:#111b2d;
--surface-deep:#090f1c;--primary:#35D6FF;--primary-strong:#14bfe9;--secondary:#8B5CFF;
--accent:#FF4D8D;--text:#F4F7FC;--muted:#AAB5C8;--weak:#78869D;
--border:rgba(130,164,210,.18);--border-bright:rgba(53,214,255,.48);
--success:#55e6a5;--danger:#ff7185;--radius-sm:10px;--radius-btn:12px;
--radius-card:18px;--radius-xl:26px;--shadow:0 20px 55px rgba(0,0,0,.32);
--glow:0 14px 38px rgba(53,214,255,.14),0 8px 24px rgba(139,92,255,.12);
--transition:220ms ease;--nav-height:76px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;min-width:320px;overflow-x:hidden;color:var(--text);background:radial-gradient(circle at 82% 4%,rgba(139,92,255,.17),transparent 32rem),radial-gradient(circle at 6% 30%,rgba(53,214,255,.1),transparent 29rem),linear-gradient(180deg,#070A12,#08101d 48%,#070A12);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(130,164,210,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(130,164,210,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(#000,transparent 82%)}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.1;background:repeating-linear-gradient(117deg,transparent 0 90px,rgba(53,214,255,.12) 91px,transparent 92px 180px)}
a{color:inherit;text-decoration:none;transition:color var(--transition),border-color var(--transition),transform var(--transition),background var(--transition)}
a:hover{color:var(--primary)}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
button{border:0}
.container{max-width:1280px}
.site-header{position:fixed;top:14px;right:0;left:0;z-index:1040;padding:0 14px}
.nav-shell{min-height:var(--nav-height);padding:10px 14px 10px 20px;border:1px solid rgba(130,164,210,.22);border-radius:22px;background:rgba(8,14,26,.76);box-shadow:0 16px 38px rgba(0,0,0,.32);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:all var(--transition)}
.site-header.scrolled .nav-shell{min-height:64px;background:rgba(7,10,18,.94)}
.brand{display:flex;align-items:center;gap:11px;max-width:390px;color:var(--text);font-size:.94rem;font-weight:800;line-height:1.25}
.brand:hover{color:var(--text)}
.brand-mark{display:grid;flex:0 0 39px;width:39px;height:39px;place-items:center;border:1px solid rgba(53,214,255,.46);border-radius:12px;color:var(--primary);background:linear-gradient(145deg,rgba(53,214,255,.15),rgba(139,92,255,.16));box-shadow:inset 0 1px rgba(255,255,255,.14),0 0 24px rgba(53,214,255,.12)}
.nav-main{gap:6px}.nav-main .nav-link{position:relative;min-height:42px;padding:8px 15px!important;border:1px solid transparent;border-radius:999px;color:var(--muted);font-size:.94rem;font-weight:680}
.nav-main .nav-link:hover{transform:translateY(-2px);border-color:var(--border);color:var(--text);background:rgba(255,255,255,.035)}
.nav-main .nav-link.active{color:var(--text);border-color:rgba(53,214,255,.28);background:rgba(53,214,255,.09);box-shadow:inset 0 -2px rgba(53,214,255,.7)}
.nav-actions{gap:9px}.age-badge,.status-badge,.soft-badge{display:inline-flex;min-height:28px;align-items:center;justify-content:center;padding:3px 11px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.045);color:var(--muted);font-size:.77rem;font-weight:700;white-space:nowrap}
.age-badge{border-color:rgba(255,77,141,.55);color:#ff9abd;background:rgba(255,77,141,.09)}
.status-badge{border-color:rgba(53,214,255,.38);color:var(--primary);background:rgba(53,214,255,.08)}
.soft-badge{border-color:rgba(139,92,255,.38);color:#c1aaff;background:rgba(139,92,255,.1)}
.btn{min-height:46px;padding:10px 20px;border-radius:var(--radius-btn);font-weight:760;transition:all var(--transition)}
.btn-glow{color:#06101b;background:linear-gradient(100deg,var(--primary),#74e7ff 44%,var(--secondary));box-shadow:0 8px 22px rgba(53,214,255,.2),inset 0 1px rgba(255,255,255,.7)}
.btn-glow:hover{color:#06101b;transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 30px rgba(53,214,255,.3)}
.btn-glow:active{transform:translateY(0)}
.btn-glass{border:1px solid var(--border-bright);color:var(--text);background:rgba(20,31,52,.6)}
.btn-glass:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-2px)}
.btn:focus-visible,.icon-button:focus-visible,.nav-link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(53,214,255,.7);outline-offset:3px}
.icon-button{display:grid;width:42px;height:42px;place-items:center;border:1px solid var(--border);border-radius:50%;color:var(--muted);background:rgba(255,255,255,.04)}
.icon-button:hover{color:var(--primary);border-color:var(--border-bright);transform:translateY(-2px)}
.navbar-toggler{width:44px;height:42px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.04)}
.menu-lines,.menu-lines:before,.menu-lines:after{display:block;width:19px;height:2px;margin:auto;background:var(--primary);border-radius:3px;content:"";position:relative}
.menu-lines:before{position:absolute;top:-7px}.menu-lines:after{position:absolute;top:7px}
main{padding-top:112px}.section{padding:82px 0}.section-tight{padding:60px 0}
.section-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--primary);font-size:.82rem;font-weight:750;letter-spacing:.12em}
.section-kicker:before{width:26px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));box-shadow:0 0 12px rgba(53,214,255,.7);content:""}
h1,h2,h3{margin:0;color:var(--text);font-weight:800;line-height:1.16;letter-spacing:-.035em}
h1{font-size:clamp(2.35rem,5vw,4.2rem)}h2{font-size:clamp(1.9rem,3.3vw,2.8rem)}h3{font-size:1.22rem}
p{color:var(--muted)}.section-copy{max-width:740px;font-size:1.04rem}
.category-hero{position:relative;padding:70px 0 54px}
.breadcrumb{--bs-breadcrumb-divider:"/";margin-bottom:26px;color:var(--weak);font-size:.86rem}.breadcrumb-item+.breadcrumb-item:before{color:var(--weak)}.breadcrumb-item.active{color:var(--primary)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:58px;align-items:center}
.hero-summary{max-width:720px;margin:22px 0 26px;font-size:1.08rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.visual-panel{position:relative;min-height:355px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(145deg,rgba(20,31,52,.85),rgba(9,15,28,.72));box-shadow:var(--shadow),var(--glow)}
.visual-panel:before{position:absolute;inset:22px;border:1px solid rgba(53,214,255,.16);border-radius:20px;content:""}
.visual-orb{position:absolute;width:240px;height:240px;right:12%;top:14%;border-radius:50%;background:radial-gradient(circle,rgba(53,214,255,.48),rgba(139,92,255,.2) 42%,transparent 70%);filter:blur(4px)}
.visual-lines{position:absolute;inset:0;background:linear-gradient(135deg,transparent 46%,rgba(53,214,255,.18) 47%,transparent 48%),linear-gradient(45deg,transparent 54%,rgba(139,92,255,.18) 55%,transparent 56%);opacity:.8}
.visual-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:30px}
.visual-top{display:flex;justify-content:space-between;align-items:center}.visual-title{max-width:260px;font-size:1.8rem;font-weight:800;line-height:1.25}.visual-note{align-self:flex-end;width:210px;padding:15px;border:1px solid var(--border);border-radius:14px;background:rgba(7,10,18,.72);backdrop-filter:blur(12px)}
.visual-note strong{display:block;color:var(--primary);font-size:1.3rem}.visual-note small{color:var(--muted)}
.filter-wrap{position:sticky;top:92px;z-index:20;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(7,10,18,.84);backdrop-filter:blur(18px)}
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.filter-label{color:var(--weak);font-size:.82rem;font-weight:700}.filter-pill{padding:8px 14px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.035);font-size:.86rem;cursor:pointer}.filter-pill:hover,.filter-pill.active{color:var(--primary);border-color:var(--border-bright);background:rgba(53,214,255,.09)}
.search-field{min-width:190px;padding:9px 13px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--surface-deep)}.search-field::placeholder{color:var(--weak)}
.content-layout{display:grid;grid-template-columns:minmax(0,8fr) minmax(260px,4fr);gap:28px}.featured-card{display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow);margin-bottom:24px}
.cover{position:relative;min-height:245px;overflow:hidden;background:radial-gradient(circle at 65% 30%,rgba(53,214,255,.58),transparent 18%),linear-gradient(135deg,#101d3c,#271747 54%,#101322)}
.cover:after{position:absolute;inset:0;background:linear-gradient(135deg,transparent 35%,rgba(255,77,141,.18),transparent 66%);content:""}
.cover-label{position:absolute;z-index:1;top:18px;left:18px}
.featured-info{padding:30px}.featured-info p{margin:14px 0 18px}.card-tags{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.tag{padding:4px 9px;border-radius:7px;color:var(--muted);background:rgba(255,255,255,.06);font-size:.78rem}
.card-meta{display:flex;justify-content:space-between;gap:12px;color:var(--weak);font-size:.82rem}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.content-card{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:rgba(20,31,52,.54);transition:all var(--transition)}.content-card:hover{transform:translateY(-4px);border-color:var(--border-bright);box-shadow:var(--glow)}.content-card .cover{min-height:155px;aspect-ratio:16/9}.content-card:nth-child(2) .cover{background:radial-gradient(circle at 30% 30%,rgba(139,92,255,.65),transparent 22%),linear-gradient(135deg,#15204a,#321a43)}.content-card:nth-child(3) .cover{background:radial-gradient(circle at 70% 35%,rgba(255,77,141,.48),transparent 20%),linear-gradient(135deg,#182b3c,#241630)}.content-card-body{padding:19px}.content-card h3{font-size:1.08rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.content-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:9px 0 13px;font-size:.9rem}
.side-stack{display:flex;flex-direction:column;gap:18px}.side-card{padding:23px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:0 14px 34px rgba(0,0,0,.2)}.side-card h2{font-size:1.25rem;margin-bottom:14px}.side-card ul{padding:0;margin:0;list-style:none}.side-card li{padding:10px 0;border-bottom:1px solid var(--border);color:var(--muted);font-size:.9rem}.side-card li:last-child{border-bottom:0}.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}.tag-cloud a{padding:6px 10px;border:1px solid rgba(139,92,255,.32);border-radius:8px;color:#c5b6ff;background:rgba(139,92,255,.08);font-size:.8rem}.notice{border-left:3px solid var(--accent);padding-left:13px;color:var(--muted);font-size:.9rem}
.pagination .page-link{margin:0 4px;border:1px solid var(--border);border-radius:9px!important;color:var(--muted);background:var(--surface)}.pagination .page-link:hover,.pagination .active .page-link{color:var(--primary);border-color:var(--border-bright);background:rgba(53,214,255,.1)}
.related-strip{display:flex;gap:14px;overflow:auto;padding:5px 2px 16px}.related-item{min-width:210px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--muted)}.related-item:hover{border-color:var(--border-bright);transform:translateY(-3px)}
.faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:45px}.accordion-item{margin-bottom:10px;border:1px solid var(--border)!important;border-radius:14px!important;overflow:hidden;background:var(--surface)!important}.accordion-button{color:var(--text)!important;background:transparent!important;box-shadow:none!important;font-weight:700}.accordion-button:after{filter:invert(1);opacity:.7}.accordion-body{color:var(--muted);border-top:1px solid var(--border);font-size:.94rem}
.cta-band{padding:58px 30px;text-align:center;border:1px solid var(--border-bright);border-radius:var(--radius-xl);background:radial-gradient(circle at 50% 0,rgba(53,214,255,.2),transparent 44%),linear-gradient(120deg,rgba(20,31,52,.82),rgba(39,24,67,.75));box-shadow:var(--glow)}.cta-band p{max-width:620px;margin:15px auto 24px}
.site-footer{padding:66px 0 25px;border-top:1px solid var(--border);background:rgba(5,9,17,.72)}.footer-grid{display:grid;grid-template-columns:1.25fr .7fr .9fr 1.35fr;gap:34px}.footer-brand{margin-bottom:16px}.footer-text{max-width:280px;font-size:.88rem}.footer-title{margin-bottom:14px;color:var(--text);font-weight:760}.footer-links{padding:0;margin:0;list-style:none}.footer-links li{margin:9px 0;color:var(--muted);font-size:.9rem}.footer-links a:hover{color:var(--primary)}.feedback-form{display:grid;gap:11px}.form-label{display:block;margin-bottom:4px;color:var(--muted);font-size:.82rem}.form-control,.form-select{border:1px solid var(--border);border-radius:10px;color:var(--text);background:rgba(7,15,28,.86)}.form-control:focus,.form-select:focus{color:var(--text);border-color:var(--primary);background:rgba(7,15,28,.95);box-shadow:0 0 0 3px rgba(53,214,255,.13)}textarea.form-control{min-height:78px}.form-check-label{color:var(--weak);font-size:.78rem}.form-check-input{background-color:var(--surface-deep);border-color:var(--border)}.footer-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid var(--border);color:var(--weak);font-size:.78rem}.offcanvas{color:var(--text);background:#0b1220}.offcanvas .nav-link{padding:13px 0;color:var(--muted);border-bottom:1px solid var(--border)}.modal-content{border:1px solid var(--border-bright);border-radius:20px;color:var(--text);background:var(--surface-solid);box-shadow:var(--shadow)}.modal-header,.modal-footer{border-color:var(--border)}.modal .btn-close{filter:invert(1);opacity:.8}
.age-modal .modal-content{background:radial-gradient(circle at 80% 0,rgba(139,92,255,.2),transparent 55%),var(--surface-solid)}
@media(max-width:991.98px){.hero-grid,.content-layout{grid-template-columns:1fr}.hero-grid{gap:30px}.footer-grid{grid-template-columns:repeat(2,1fr)}.filter-wrap{top:82px}}
@media(max-width:767.98px){main{padding-top:96px}.section{padding:58px 0}.category-hero{padding:42px 0 32px}.featured-card{grid-template-columns:1fr}.featured-info{padding:22px}.card-grid{grid-template-columns:1fr}.visual-panel{min-height:285px}.faq-grid{grid-template-columns:1fr;gap:25px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}.filter-bar{align-items:stretch}.search-field{width:100%}}
@media(max-width:519.98px){.brand-text{max-width:205px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-shell{padding-left:13px}.brand-mark{flex-basis:35px;width:35px;height:35px}.hero-actions .btn{width:100%}.footer-grid{grid-template-columns:1fr}.visual-content{padding:22px}.visual-title{font-size:1.4rem}.content-card .cover{min-height:180px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}