/* roulang page: index */
:root{
            --bg:#07111f;
            --bg-2:#0b1730;
            --bg-3:#101f3b;
            --card:rgba(11,17,32,.76);
            --card-2:rgba(16,31,59,.72);
            --line:rgba(255,255,255,.10);
            --line-2:rgba(124,92,255,.22);
            --text:#e9efff;
            --muted:#a5b4d4;
            --muted-2:#7f8daf;
            --primary:#7c5cff;
            --primary-2:#54d1ff;
            --accent:#2fd3a5;
            --accent-2:#ffbf69;
            --danger:#ff6b8b;
            --shadow:0 20px 60px rgba(0,0,0,.36);
            --shadow-2:0 12px 28px rgba(7,17,31,.28);
            --radius-xl:30px;
            --radius-lg:22px;
            --radius-md:16px;
            --radius-sm:12px;
            --space:24px;
            --container:1180px;
            --transition:.24s ease;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            line-height:1.7;
            background:
                radial-gradient(circle at 15% 10%, rgba(47,211,165,.12), transparent 30%),
                radial-gradient(circle at 85% 20%, rgba(124,92,255,.22), transparent 32%),
                radial-gradient(circle at 70% 85%, rgba(84,209,255,.10), transparent 26%),
                linear-gradient(180deg, #08111f 0%, #091425 48%, #07111f 100%);
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
            background-size:90px 90px;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.42), transparent 90%);
            opacity:.6;
        }

        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(124,92,255,.35);color:#fff}

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

        .site-header{
            position:sticky;
            top:14px;
            z-index:100;
            padding:0 0 8px;
        }
        .nav-shell{
            display:flex;
            align-items:center;
            gap:16px;
            padding:14px 18px;
            background:rgba(7,17,31,.72);
            border:1px solid rgba(255,255,255,.10);
            border-radius:24px;
            box-shadow:var(--shadow-2);
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            min-width:0;
            font-weight:800;
            letter-spacing:.4px;
            font-size:1.08rem;
            white-space:nowrap;
        }
        .brand-mark{
            width:42px;height:42px;border-radius:14px;
            display:grid;place-items:center;
            background:
                linear-gradient(135deg, rgba(124,92,255,1), rgba(84,209,255,1));
            box-shadow:0 12px 24px rgba(124,92,255,.25);
            color:#fff;
            position:relative;
            overflow:hidden;
        }
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:9px;
            border-radius:10px;
            border:1px solid rgba(255,255,255,.38);
        }
        .brand span:last-child{
            color:var(--text);
        }

        .menu-toggle{
            display:none;
            margin-left:auto;
            width:44px;height:44px;
            border:1px solid rgba(255,255,255,.12);
            border-radius:14px;
            background:rgba(255,255,255,.04);
            color:var(--text);
            align-items:center;
            justify-content:center;
            transition:transform var(--transition), background var(--transition), border-color var(--transition);
        }
        .menu-toggle:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.07);
            border-color:rgba(124,92,255,.36);
        }
        .menu-toggle:focus-visible,
        .nav-link:focus-visible,
        .btn:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        summary:focus-visible{
            outline:3px solid rgba(84,209,255,.42);
            outline-offset:3px;
        }

        .nav-links{
            display:flex;
            align-items:center;
            gap:8px;
            margin-left:auto;
        }
        .nav-link{
            padding:11px 14px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            transition:background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
        }
        .nav-link:hover,
        .nav-link.active{
            color:#fff;
            background:rgba(124,92,255,.16);
            border-color:rgba(124,92,255,.24);
            transform:translateY(-1px);
        }
        .nav-cta{
            padding:11px 16px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            color:#fff;
            font-weight:700;
            box-shadow:0 14px 28px rgba(124,92,255,.24);
            transition:transform var(--transition), box-shadow var(--transition), filter var(--transition);
        }
        .nav-cta:hover{
            transform:translateY(-1px);
            box-shadow:0 18px 32px rgba(124,92,255,.30);
            filter:saturate(1.04);
        }

        main{
            position:relative;
            padding:10px 0 130px;
        }

        .hero{
            padding:16px 0 24px;
        }
        .hero-panel{
            position:relative;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.12);
            border-radius:34px;
            background:
                linear-gradient(135deg, rgba(16,31,59,.88), rgba(7,17,31,.84)),
                radial-gradient(circle at 18% 18%, rgba(47,211,165,.18), transparent 32%),
                radial-gradient(circle at 92% 10%, rgba(124,92,255,.28), transparent 24%);
            box-shadow:var(--shadow);
            padding:28px;
        }
        .hero-panel::before{
            content:"";
            position:absolute;
            inset:auto -120px -140px auto;
            width:340px;height:340px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(124,92,255,.28), transparent 65%);
            filter:blur(8px);
            pointer-events:none;
        }
        .hero-panel::after{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(120deg, rgba(255,255,255,.05), transparent 28%),
                linear-gradient(300deg, rgba(47,211,165,.08), transparent 30%);
            pointer-events:none;
        }
        .hero-grid{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:1.16fr .84fr;
            gap:22px;
            align-items:stretch;
        }
        .hero-copy{
            padding:8px 4px 8px 4px;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            align-self:flex-start;
            color:#cfe8ff;
            background:rgba(84,209,255,.12);
            border:1px solid rgba(84,209,255,.22);
            border-radius:999px;
            padding:8px 13px;
            font-size:.92rem;
            letter-spacing:.2px;
            margin-bottom:18px;
        }
        .eyebrow::before{
            content:"";
            width:8px;height:8px;border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 6px rgba(47,211,165,.12);
        }
        h1{
            margin:0;
            font-size:clamp(2.2rem, 4.2vw, 4.4rem);
            line-height:1.08;
            letter-spacing:-.04em;
            max-width:12ch;
        }
        .hero-copy p{
            margin:18px 0 0;
            font-size:1.03rem;
            color:var(--muted);
            max-width:58ch;
        }
        .hero-badges{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:22px 0 0;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 13px;
            border-radius:999px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.10);
            color:#dfe8ff;
            font-size:.92rem;
        }
        .badge i{
            width:8px;height:8px;border-radius:50%;
            background:var(--accent);
            display:inline-block;
            box-shadow:0 0 0 5px rgba(47,211,165,.10);
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin:26px 0 0;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:48px;
            padding:0 18px;
            border-radius:14px;
            border:1px solid transparent;
            font-weight:700;
            transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
            will-change:transform;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, var(--primary), #5a8dff 54%, var(--primary-2));
            box-shadow:0 16px 28px rgba(124,92,255,.24);
        }
        .btn-primary:hover{
            box-shadow:0 20px 34px rgba(124,92,255,.30);
        }
        .btn-secondary{
            color:#f2f7ff;
            background:rgba(255,255,255,.06);
            border-color:rgba(255,255,255,.12);
        }
        .btn-secondary:hover{
            background:rgba(255,255,255,.10);
            border-color:rgba(124,92,255,.28);
        }
        .btn-ghost{
            color:#d8e7ff;
            background:transparent;
            border-color:rgba(84,209,255,.24);
        }
        .btn-ghost:hover{
            background:rgba(84,209,255,.09);
        }

        .hero-points{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:12px;
            margin-top:24px;
        }
        .hero-point{
            padding:14px 15px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(255,255,255,.04);
            color:var(--muted);
            font-size:.94rem;
            min-height:72px;
        }
        .hero-point strong{
            display:block;
            color:#fff;
            margin-bottom:6px;
            font-size:.98rem;
        }

        .apply-card{
            position:relative;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(18,33,62,.92), rgba(11,17,32,.96));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
            padding:22px;
            overflow:hidden;
        }
        .apply-card::before{
            content:"";
            position:absolute;
            inset:-80px auto auto -80px;
            width:180px;height:180px;
            border-radius:50%;
            background:rgba(47,211,165,.18);
            filter:blur(18px);
        }
        .apply-card h2{
            margin:6px 0 8px;
            font-size:1.35rem;
            line-height:1.25;
        }
        .form-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 11px;
            border-radius:999px;
            background:rgba(47,211,165,.12);
            color:#d9fff4;
            border:1px solid rgba(47,211,165,.22);
            font-size:.88rem;
        }
        .apply-card p{
            margin:0;
            color:var(--muted);
            font-size:.96rem;
        }
        .apply-form{
            display:grid;
            gap:12px;
            margin-top:18px;
        }
        .field-row{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
        }
        .field{
            display:flex;
            flex-direction:column;
            gap:8px;
        }
        .field label{
            font-size:.9rem;
            color:#cedaf9;
        }
        .field input,
        .field select,
        .field textarea{
            width:100%;
            background:rgba(255,255,255,.05);
            color:#fff;
            border:1px solid rgba(255,255,255,.12);
            border-radius:14px;
            padding:13px 14px;
            transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
        }
        .field textarea{
            resize:vertical;
            min-height:92px;
        }
        .field input::placeholder,
        .field textarea::placeholder{
            color:#8fa1c6;
        }
        .field input:focus,
        .field select:focus,
        .field textarea:focus{
            background:rgba(255,255,255,.07);
            border-color:rgba(84,209,255,.45);
            box-shadow:0 0 0 4px rgba(84,209,255,.12);
            outline:none;
        }
        .form-note{
            color:var(--muted-2);
            font-size:.89rem;
            min-height:1.4em;
        }
        .apply-submit{
            width:100%;
        }
        .apply-proof{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:10px;
            margin-top:14px;
        }
        .proof-item{
            padding:12px 10px;
            border-radius:16px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            text-align:center;
        }
        .proof-item strong{
            display:block;
            font-size:1.1rem;
            color:#fff;
            margin-bottom:3px;
        }
        .proof-item span{
            color:var(--muted);
            font-size:.84rem;
        }

        .section{
            padding:26px 0;
        }
        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:end;
            gap:20px;
            margin-bottom:18px;
        }
        .section-title{
            margin:0;
            font-size:clamp(1.45rem, 2vw, 2.1rem);
            line-height:1.18;
            letter-spacing:-.03em;
        }
        .section-desc{
            margin:0;
            color:var(--muted);
            max-width:62ch;
            font-size:.98rem;
        }

        .metrics-grid{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:14px;
        }
        .metric-card{
            position:relative;
            overflow:hidden;
            padding:18px;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(16,31,59,.82), rgba(10,19,36,.92));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
        }
        .metric-card::before{
            content:"";
            position:absolute;
            inset:auto -40px -48px auto;
            width:120px;height:120px;
            border-radius:50%;
            background:rgba(124,92,255,.12);
            pointer-events:none;
        }
        .metric-label{
            color:var(--muted);
            font-size:.92rem;
            margin-bottom:14px;
        }
        .metric-value{
            font-size:2.1rem;
            font-weight:800;
            letter-spacing:-.04em;
            line-height:1;
        }
        .metric-foot{
            margin-top:10px;
            color:#c8d7ff;
            font-size:.92rem;
        }

        .about-grid{
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:18px;
        }
        .about-panel,
        .note-panel{
            border-radius:28px;
            padding:22px;
            background:linear-gradient(180deg, rgba(16,31,59,.84), rgba(11,17,32,.94));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
        }
        .about-panel h3,
        .note-panel h3{
            margin:0 0 10px;
            font-size:1.24rem;
        }
        .about-panel p,
        .note-panel p{
            margin:0;
            color:var(--muted);
        }
        .story-list{
            list-style:none;
            padding:0;
            margin:18px 0 0;
            display:grid;
            gap:12px;
        }
        .story-list li{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:13px 14px;
            border-radius:16px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            color:#dfe9ff;
        }
        .story-list .dot{
            width:10px;height:10px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--primary-2));
            margin-top:6px;
            box-shadow:0 0 0 5px rgba(47,211,165,.10);
            flex:0 0 auto;
        }
        .note-grid{
            display:grid;
            gap:12px;
            grid-template-columns:repeat(2,minmax(0,1fr));
        }
        .mini-note{
            padding:16px;
            border-radius:18px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
        }
        .mini-note strong{
            display:block;
            font-size:1.05rem;
            margin-bottom:8px;
        }
        .mini-note span{
            color:var(--muted);
            font-size:.94rem;
        }

        .news-layout{
            display:grid;
            grid-template-columns:1.25fr .75fr;
            gap:18px;
        }
        .news-panel,
        .news-side{
            border-radius:28px;
            background:linear-gradient(180deg, rgba(16,31,59,.84), rgba(11,17,32,.94));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
            overflow:hidden;
        }
        .news-list{
            list-style:none;
            margin:0;
            padding:8px 18px 18px;
        }
        .news-item{
            display:grid;
            grid-template-columns:auto 1fr auto;
            gap:14px;
            align-items:start;
            padding:16px 0;
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .news-item:last-child{border-bottom:0}
        .news-tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            background:rgba(84,209,255,.10);
            color:#d8f6ff;
            border:1px solid rgba(84,209,255,.20);
            font-size:.82rem;
            white-space:nowrap;
        }
        .news-main{
            min-width:0;
        }
        .news-title{
            display:inline-block;
            font-weight:700;
            line-height:1.45;
            margin-bottom:6px;
            transition:color var(--transition), transform var(--transition);
        }
        .news-title:hover{
            color:#ffffff;
        }
        .news-excerpt{
            color:var(--muted);
            font-size:.94rem;
            margin:0;
        }
        .news-meta{
            color:var(--muted-2);
            font-size:.84rem;
            white-space:nowrap;
            padding-top:4px;
        }
        .news-side{
            display:flex;
            flex-direction:column;
        }
        .spotlight{
            padding:18px;
            border-bottom:1px solid rgba(255,255,255,.08);
            background:
                radial-gradient(circle at 20% 0%, rgba(47,211,165,.12), transparent 32%),
                linear-gradient(180deg, rgba(124,92,255,.08), transparent 55%);
        }
        .spotlight .spot-badge{
            display:inline-flex;
            padding:7px 11px;
            border-radius:999px;
            background:rgba(47,211,165,.10);
            color:#ddfff5;
            border:1px solid rgba(47,211,165,.18);
            font-size:.82rem;
        }
        .spotlight h3{
            margin:12px 0 10px;
            font-size:1.28rem;
            line-height:1.3;
        }
        .spotlight p{
            margin:0;
            color:var(--muted);
        }
        .hot-list{
            margin:0;
            padding:10px 18px 18px;
            list-style:none;
            display:grid;
            gap:12px;
        }
        .hot-list li{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:14px;
            border-radius:16px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
        }
        .rank{
            width:34px;height:34px;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:rgba(124,92,255,.18);
            color:#fff;
            font-weight:800;
            flex:0 0 auto;
        }
        .hot-list strong{
            display:block;
            margin-bottom:4px;
        }
        .hot-list span{
            color:var(--muted);
            font-size:.92rem;
        }

        .service-grid{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:14px;
        }
        .service-card{
            padding:18px;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(16,31,59,.82), rgba(11,17,32,.94));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
            transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
        }
        .service-card:hover{
            transform:translateY(-3px);
            border-color:rgba(124,92,255,.26);
            box-shadow:0 18px 36px rgba(0,0,0,.25);
        }
        .service-icon{
            width:48px;height:48px;
            border-radius:16px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(124,92,255,.18), rgba(47,211,165,.12));
            border:1px solid rgba(255,255,255,.10);
            color:#fff;
            font-weight:800;
            margin-bottom:14px;
        }
        .service-card h3{
            margin:0 0 8px;
            font-size:1.1rem;
        }
        .service-card p{
            margin:0 0 14px;
            color:var(--muted);
            font-size:.95rem;
        }
        .service-list{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:8px;
        }
        .service-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:#dbe4f8;
            font-size:.93rem;
        }
        .service-list li::before{
            content:"";
            width:8px;height:8px;
            border-radius:50%;
            background:var(--accent);
            margin-top:7px;
            flex:0 0 auto;
        }

        .media-row{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:14px;
        }
        .media-track{
            display:flex;
            gap:14px;
            overflow-x:auto;
            padding-bottom:10px;
            scroll-snap-type:x proximity;
        }
        .media-track::-webkit-scrollbar{height:10px}
        .media-track::-webkit-scrollbar-thumb{
            background:rgba(255,255,255,.12);
            border-radius:999px;
        }
        .media-card{
            flex:0 0 290px;
            scroll-snap-align:start;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(16,31,59,.86), rgba(11,17,32,.96));
            border:1px solid rgba(255,255,255,.10);
            overflow:hidden;
            box-shadow:var(--shadow-2);
        }
        .media-visual{
            min-height:146px;
            padding:18px;
            position:relative;
            overflow:hidden;
            background:
                linear-gradient(135deg, rgba(124,92,255,.18), rgba(47,211,165,.08)),
                radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 22%),
                linear-gradient(180deg, rgba(25,45,80,.72), rgba(10,19,36,.88));
        }
        .media-visual::after{
            content:"";
            position:absolute;
            inset:auto -24px -28px auto;
            width:120px;height:120px;
            border-radius:50%;
            background:rgba(255,255,255,.08);
            filter:blur(6px);
        }
        .media-visual .tag{
            display:inline-flex;
            padding:7px 10px;
            border-radius:999px;
            background:rgba(7,17,31,.42);
            border:1px solid rgba(255,255,255,.12);
            font-size:.82rem;
        }
        .media-visual strong{
            display:block;
            margin-top:16px;
            font-size:1.24rem;
            line-height:1.35;
            max-width:12ch;
        }
        .media-visual span{
            display:block;
            margin-top:10px;
            color:#d8e3ff;
            font-size:.92rem;
        }
        .media-body{
            padding:16px 18px 18px;
        }
        .media-body p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }

        .compare-wrap{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:14px;
        }
        .price-card{
            position:relative;
            padding:22px;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(16,31,59,.86), rgba(11,17,32,.96));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
            overflow:hidden;
        }
        .price-card.featured{
            border-color:rgba(124,92,255,.34);
            box-shadow:0 22px 44px rgba(124,92,255,.16);
            transform:translateY(-4px);
        }
        .price-top{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            margin-bottom:14px;
        }
        .price-name{
            font-size:1.18rem;
            margin:0;
        }
        .price-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            background:rgba(124,92,255,.14);
            color:#e8e2ff;
            border:1px solid rgba(124,92,255,.24);
            font-size:.82rem;
            white-space:nowrap;
        }
        .price{
            display:flex;
            align-items:baseline;
            gap:6px;
            margin:12px 0 8px;
        }
        .price strong{
            font-size:2rem;
            line-height:1;
        }
        .price span{
            color:var(--muted);
            font-size:.94rem;
        }
        .checklist{
            list-style:none;
            padding:0;
            margin:16px 0 18px;
            display:grid;
            gap:10px;
        }
        .checklist li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:#dbe6ff;
            font-size:.94rem;
        }
        .checklist li::before{
            content:"✓";
            color:var(--accent);
            font-weight:800;
            flex:0 0 auto;
            margin-top:1px;
        }
        .price-card .btn{
            width:100%;
        }

        .guide-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:14px;
        }
        .guide-card{
            padding:20px;
            border-radius:24px;
            background:linear-gradient(180deg, rgba(16,31,59,.82), rgba(11,17,32,.94));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
        }
        .step{
            display:inline-flex;
            width:40px;height:40px;
            align-items:center;
            justify-content:center;
            border-radius:14px;
            background:linear-gradient(135deg, rgba(124,92,255,.24), rgba(84,209,255,.16));
            border:1px solid rgba(255,255,255,.10);
            font-weight:800;
            margin-bottom:14px;
        }
        .guide-card h3{
            margin:0 0 8px;
            font-size:1.08rem;
        }
        .guide-card p{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
        }
        .guide-mini{
            margin:14px 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:8px;
        }
        .guide-mini li{
            color:#dfe8ff;
            font-size:.92rem;
            display:flex;
            gap:8px;
        }
        .guide-mini li::before{
            content:"•";
            color:var(--accent-2);
            font-weight:800;
        }

        .app-wrap{
            display:grid;
            grid-template-columns:1.02fr .98fr;
            gap:18px;
        }
        .app-panel,
        .device-panel{
            padding:22px;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(16,31,59,.84), rgba(11,17,32,.94));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
        }
        .app-panel h3,
        .device-panel h3{
            margin:0 0 10px;
            font-size:1.28rem;
        }
        .app-panel p,
        .device-panel p{
            margin:0;
            color:var(--muted);
        }
        .app-features{
            margin:18px 0 0;
            display:grid;
            gap:12px;
        }
        .feature-row{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:14px;
            border-radius:18px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
        }
        .feature-row .icon{
            width:36px;height:36px;
            flex:0 0 auto;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:rgba(47,211,165,.10);
            border:1px solid rgba(47,211,165,.16);
            color:#dffff4;
            font-weight:800;
        }
        .feature-row strong{
            display:block;
            margin-bottom:4px;
        }
        .feature-row span{
            color:var(--muted);
            font-size:.92rem;
        }
        .app-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:20px;
        }
        .device-panel{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:18px;
        }
        .phone-frame{
            border-radius:28px;
            padding:16px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
                rgba(7,17,31,.72);
            border:1px solid rgba(255,255,255,.10);
        }
        .phone-top{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:14px;
            color:#d8e3ff;
            font-size:.92rem;
        }
        .qr-box{
            width:min(220px,100%);
            aspect-ratio:1;
            margin:0 auto;
            border-radius:20px;
            background:
                linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
                linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
                radial-gradient(circle at 25% 25%, #fff 0 10%, transparent 11%),
                radial-gradient(circle at 75% 25%, #fff 0 10%, transparent 11%),
                radial-gradient(circle at 25% 75%, #fff 0 10%, transparent 11%),
                linear-gradient(135deg, rgba(124,92,255,.35), rgba(47,211,165,.16));
            background-size:22px 22px,22px 22px,100% 100%,100% 100%,100% 100%,100% 100%;
            border:1px solid rgba(255,255,255,.10);
            box-shadow:inset 0 0 0 16px rgba(7,17,31,.22);
        }
        .device-points{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:10px;
        }
        .device-pill{
            padding:12px 10px;
            text-align:center;
            border-radius:16px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            color:#dfe8ff;
            font-size:.9rem;
        }

        .faq-wrap{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }
        .faq-card{
            border-radius:22px;
            padding:2px;
            background:linear-gradient(135deg, rgba(124,92,255,.14), rgba(47,211,165,.08));
            border:1px solid rgba(255,255,255,.08);
        }
        details{
            background:linear-gradient(180deg, rgba(16,31,59,.90), rgba(11,17,32,.95));
            border-radius:20px;
            padding:18px 18px 16px;
            border:1px solid rgba(255,255,255,.08);
        }
        summary{
            list-style:none;
            cursor:pointer;
            display:flex;
            justify-content:space-between;
            gap:16px;
            align-items:center;
            font-weight:700;
            color:#eef4ff;
        }
        summary::-webkit-details-marker{display:none}
        summary::after{
            content:"+";
            width:30px;height:30px;
            border-radius:10px;
            display:grid;
            place-items:center;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color:#fff;
            transition:transform var(--transition), background var(--transition);
            flex:0 0 auto;
        }
        details[open] summary::after{
            content:"–";
            background:rgba(47,211,165,.10);
        }
        details p{
            margin:12px 0 0;
            color:var(--muted);
            font-size:.95rem;
        }

        .float-cta{
            position:fixed;
            left:50%;
            transform:translateX(-50%);
            bottom:18px;
            z-index:90;
            width:min(var(--container),calc(100% - 28px));
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:18px;
            padding:16px 18px;
            border-radius:22px;
            background:rgba(7,17,31,.78);
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
        }
        .float-copy strong{
            display:block;
            font-size:1rem;
            margin-bottom:4px;
        }
        .float-copy span{
            color:var(--muted);
            font-size:.92rem;
        }
        .float-actions{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }

        footer{
            padding:22px 0 34px;
        }
        .footer-shell{
            border-radius:28px;
            padding:20px 22px;
            background:linear-gradient(180deg, rgba(16,31,59,.84), rgba(11,17,32,.94));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-2);
        }
        .footer-top{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:20px;
        }
        .footer-brand{
            max-width:48ch;
        }
        .footer-brand .brand{
            margin-bottom:12px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            justify-content:flex-end;
        }
        .footer-links a{
            padding:9px 13px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(255,255,255,.04);
            color:#dbe5ff;
            transition:background var(--transition), border-color var(--transition), transform var(--transition);
        }
        .footer-links a:hover{
            transform:translateY(-1px);
            background:rgba(124,92,255,.12);
            border-color:rgba(124,92,255,.24);
        }
        .footer-meta{
            display:flex;
            flex-wrap:wrap;
            gap:12px 18px;
            justify-content:space-between;
            margin-top:18px;
            padding-top:16px;
            border-top:1px solid rgba(255,255,255,.08);
            color:var(--muted-2);
            font-size:.9rem;
        }

        .section-sep{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
            margin:22px 0 0;
        }

        @media (max-width: 1120px){
            .metrics-grid,
            .service-grid{
                grid-template-columns:repeat(2,minmax(0,1fr));
            }
            .compare-wrap,
            .guide-grid{
                grid-template-columns:1fr;
            }
            .faq-wrap{
                grid-template-columns:1fr;
            }
            .hero-grid,
            .about-grid,
            .news-layout,
            .app-wrap{
                grid-template-columns:1fr;
            }
        }

        @media (max-width: 768px){
            .site-header{
                top:0;
                padding-top:0;
            }
            .nav-shell{
                border-radius:0 0 22px 22px;
                padding:12px 14px;
                flex-wrap:wrap;
            }
            .menu-toggle{
                display:inline-flex;
            }
            .nav-links{
                width:100%;
                order:4;
                margin-left:0;
                display:grid;
                gap:8px;
                max-height:0;
                overflow:hidden;
                transition:max-height var(--transition);
            }
            .nav-shell.open .nav-links{
                max-height:140px;
                padding-top:6px;
            }
            .nav-link,
            .nav-cta{
                width:100%;
                text-align:center;
                justify-content:center;
            }
            .nav-cta{
                order:3;
            }
            .hero-panel{
                padding:20px;
                border-radius:28px;
            }
            .hero-points,
            .apply-proof,
            .note-grid,
            .device-points{
                grid-template-columns:1fr;
            }
            .hero-actions{
                flex-direction:column;
            }
            .btn{
                width:100%;
            }
            .section{
                padding:22px 0;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .metrics-grid,
            .service-grid{
                grid-template-columns:1fr;
            }
            .news-item{
                grid-template-columns:1fr;
                gap:8px;
            }
            .news-meta{
                padding-top:0;
            }
            .float-cta{
                bottom:10px;
                flex-direction:column;
                align-items:stretch;
            }
            .float-actions{
                width:100%;
            }
            .float-actions .btn{
                width:100%;
            }
            .footer-top{
                flex-direction:column;
            }
            .footer-links{
                justify-content:flex-start;
            }
            main{
                padding-bottom:180px;
            }
        }

        @media (max-width: 520px){
            .container{
                width:min(var(--container),calc(100% - 22px));
            }
            h1{
                max-width:100%;
            }
            .hero-panel,
            .apply-card,
            .about-panel,
            .note-panel,
            .news-panel,
            .news-side,
            .service-card,
            .price-card,
            .guide-card,
            .app-panel,
            .device-panel,
            .footer-shell{
                border-radius:22px;
            }
            .media-track{
                padding-bottom:12px;
            }
            .media-card{
                flex-basis:84%;
            }
            .float-cta{
                width:calc(100% - 14px);
                padding:14px;
            }
        }