/* roulang page: index */
:root{
            --bg:#061120;
            --bg-2:#091a32;
            --panel:rgba(13, 34, 61, .72);
            --panel-strong:rgba(16, 43, 77, .9);
            --panel-soft:rgba(255,255,255,.06);
            --text:#eef6ff;
            --text-strong:#ffffff;
            --muted:#9fb5ce;
            --muted-2:#6f89a6;
            --primary:#58d8ff;
            --primary-2:#8b5cff;
            --accent:#ff7bd5;
            --accent-2:#ffd166;
            --success:#47e6a3;
            --danger:#ff6b84;
            --border:rgba(160, 206, 255, .18);
            --border-strong:rgba(123, 210, 255, .38);
            --shadow:0 22px 70px rgba(0, 0, 0, .36);
            --shadow-glow:0 0 34px rgba(88, 216, 255, .28), 0 0 78px rgba(139, 92, 255, .18);
            --radius-xl:32px;
            --radius-lg:24px;
            --radius-md:18px;
            --radius-sm:12px;
            --container:1180px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }

        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            min-height:100vh;
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
            color:var(--text);
            line-height:1.7;
            background:
                radial-gradient(circle at 16% 8%, rgba(88,216,255,.22), transparent 32%),
                radial-gradient(circle at 88% 16%, rgba(255,123,213,.18), transparent 30%),
                radial-gradient(circle at 55% 88%, rgba(139,92,255,.16), transparent 34%),
                linear-gradient(180deg, #061120 0%, #071527 48%, #050b16 100%);
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
            background-size:42px 42px;
            mask-image:linear-gradient(to bottom, rgba(0,0,0,.78), transparent 80%);
            z-index:-2;
        }
        body::after{
            content:"";
            position:fixed;
            inset:auto -18% -24% -18%;
            height:48vh;
            background:radial-gradient(ellipse at center, rgba(88,216,255,.14), transparent 65%);
            pointer-events:none;
            z-index:-1;
        }

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

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

        .site-header{
            position:sticky;
            top:18px;
            z-index:50;
            padding:14px 0 4px;
        }
        .dock-nav{
            width:min(980px, calc(100% - 28px));
            margin:0 auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:10px 12px 10px 16px;
            border:1px solid var(--border);
            border-radius:999px;
            background:rgba(7, 19, 36, .72);
            backdrop-filter:blur(22px);
            -webkit-backdrop-filter:blur(22px);
            box-shadow:0 18px 48px rgba(0,0,0,.32);
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:10px;
            min-width:max-content;
            font-weight:900;
            letter-spacing:.02em;
            color:var(--text-strong);
        }
        .brand-mark{
            width:36px;
            height:36px;
            border-radius:14px;
            display:grid;
            place-items:center;
            color:#061120;
            font-weight:950;
            background:linear-gradient(135deg, var(--primary), var(--accent));
            box-shadow:0 0 28px rgba(88,216,255,.35);
        }
        .brand-text{
            font-size:16px;
            white-space:nowrap;
        }
        .nav-links{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:6px;
            padding:4px;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.06);
        }
        .nav-link{
            display:inline-flex;
            align-items:center;
            min-height:38px;
            padding:0 18px;
            border-radius:999px;
            color:var(--muted);
            font-size:14px;
            font-weight:750;
            transition:color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
        }
        .nav-link:hover,
        .nav-link:focus-visible{
            color:#fff;
            background:rgba(88,216,255,.12);
            outline:none;
            transform:translateY(-1px);
        }
        .nav-link.active{
            color:#071426;
            background:linear-gradient(135deg, var(--primary), #b4f0ff);
            box-shadow:0 8px 22px rgba(88,216,255,.22);
        }
        .nav-actions{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .mini-search{
            width:190px;
            height:40px;
            display:flex;
            align-items:center;
            gap:8px;
            padding:0 12px;
            border:1px solid rgba(255,255,255,.1);
            border-radius:999px;
            background:rgba(255,255,255,.055);
            color:var(--muted);
        }
        .mini-search input{
            width:100%;
            border:0;
            outline:0;
            background:transparent;
            color:var(--text);
            font-size:13px;
        }
        .mini-search input::placeholder{color:var(--muted-2)}
        .menu-toggle{
            display:none;
            width:42px;
            height:42px;
            border-radius:50%;
            color:#fff;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
        }
        .menu-toggle span{
            display:block;
            width:17px;
            height:2px;
            margin:4px auto;
            border-radius:999px;
            background:currentColor;
            transition:transform .22s var(--ease), opacity .22s var(--ease);
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            min-height:46px;
            padding:0 20px;
            border-radius:999px;
            font-weight:850;
            letter-spacing:.01em;
            color:var(--text-strong);
            border:1px solid transparent;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
            user-select:none;
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:active{transform:translateY(0) scale(.98)}
        .btn:focus-visible{outline:3px solid rgba(88,216,255,.28);outline-offset:3px}
        .btn-primary{
            color:#061120;
            background:linear-gradient(135deg, var(--primary), #bdf3ff 52%, var(--accent));
            box-shadow:var(--shadow-glow);
        }
        .btn-primary:hover{box-shadow:0 0 40px rgba(88,216,255,.38), 0 0 86px rgba(255,123,213,.22)}
        .btn-ghost{
            background:rgba(255,255,255,.06);
            border-color:var(--border);
            color:var(--text);
        }
        .btn-ghost:hover{
            background:rgba(88,216,255,.1);
            border-color:var(--border-strong);
        }
        .btn-small{
            min-height:38px;
            padding:0 15px;
            font-size:13px;
        }

        .badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            font-size:13px;
            font-weight:800;
            color:#ccefff;
            background:rgba(88,216,255,.1);
            border:1px solid rgba(88,216,255,.24);
        }
        .badge-dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--success);
            box-shadow:0 0 14px rgba(71,230,163,.75);
        }
        .section{
            padding:82px 0;
            position:relative;
        }
        .section-tight{padding:58px 0}
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:28px;
            margin-bottom:30px;
        }
        .section-kicker{
            color:var(--primary);
            font-size:13px;
            font-weight:900;
            letter-spacing:.12em;
            text-transform:uppercase;
            margin-bottom:10px;
        }
        .section-title{
            font-size:clamp(28px, 4vw, 44px);
            line-height:1.16;
            letter-spacing:-.04em;
            color:var(--text-strong);
        }
        .section-desc{
            max-width:620px;
            color:var(--muted);
            font-size:16px;
            margin-top:12px;
        }
        .section-aside{
            max-width:360px;
            color:var(--muted);
            font-size:14px;
        }

        .glass{
            border:1px solid var(--border);
            background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
            box-shadow:var(--shadow);
        }
        .card{
            border-radius:var(--radius-lg);
            border:1px solid var(--border);
            background:rgba(12, 31, 56, .66);
            transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease);
            overflow:hidden;
        }
        .card:hover{
            transform:translateY(-5px);
            border-color:var(--border-strong);
            box-shadow:0 28px 70px rgba(0,0,0,.32), 0 0 36px rgba(88,216,255,.12);
            background:rgba(15, 40, 72, .78);
        }

        .hero{
            padding:72px 0 48px;
        }
        .hero-stage{
            position:relative;
            min-height:620px;
            display:grid;
            align-items:end;
            border-radius:42px;
            overflow:hidden;
            border:1px solid rgba(140, 220, 255, .22);
            box-shadow:0 32px 100px rgba(0,0,0,.46);
            background:
                linear-gradient(110deg, rgba(6,17,32,.96) 0%, rgba(7,20,38,.78) 42%, rgba(6,17,32,.38) 100%),
                radial-gradient(circle at 72% 28%, rgba(255,123,213,.32), transparent 28%),
                radial-gradient(circle at 78% 62%, rgba(88,216,255,.34), transparent 34%),
                linear-gradient(135deg, #0b2442, #061120);
        }
        .hero-stage::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
                linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
            background-size:58px 58px;
            mask-image:linear-gradient(100deg, #000 0%, rgba(0,0,0,.8) 42%, transparent 88%);
            opacity:.72;
        }
        .hero-orb{
            position:absolute;
            border-radius:999px;
            filter:blur(.2px);
            opacity:.9;
        }
        .hero-orb.one{
            width:300px;height:300px;right:9%;top:13%;
            background:radial-gradient(circle, rgba(88,216,255,.42), transparent 68%);
        }
        .hero-orb.two{
            width:220px;height:220px;right:21%;bottom:16%;
            background:radial-gradient(circle, rgba(255,123,213,.35), transparent 68%);
        }
        .hero-ribbons{
            position:absolute;
            right:-2%;
            top:16%;
            width:min(520px, 44vw);
            display:grid;
            gap:16px;
            transform:rotate(-5deg);
        }
        .ribbon{
            min-height:76px;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.16);
            background:rgba(255,255,255,.08);
            backdrop-filter:blur(16px);
            box-shadow:0 20px 60px rgba(0,0,0,.26);
        }
        .ribbon:nth-child(1){width:72%;margin-left:18%;background:linear-gradient(90deg, rgba(88,216,255,.18), rgba(255,255,255,.05))}
        .ribbon:nth-child(2){width:94%;background:linear-gradient(90deg, rgba(255,123,213,.18), rgba(255,255,255,.05))}
        .ribbon:nth-child(3){width:64%;margin-left:28%;background:linear-gradient(90deg, rgba(139,92,255,.18), rgba(255,255,255,.05))}
        .hero-content{
            position:relative;
            z-index:2;
            padding:58px;
            max-width:780px;
        }
        .hero h1{
            margin-top:18px;
            font-size:clamp(42px, 7vw, 82px);
            line-height:1.02;
            letter-spacing:-.065em;
            color:var(--text-strong);
        }
        .hero-lead{
            margin-top:22px;
            max-width:690px;
            color:#c8d9ec;
            font-size:clamp(16px, 2vw, 19px);
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:14px;
            margin-top:32px;
        }
        .hero-metrics{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:14px;
            margin-top:34px;
            max-width:720px;
        }
        .metric{
            padding:18px;
            border-radius:22px;
            background:rgba(255,255,255,.07);
            border:1px solid rgba(255,255,255,.12);
        }
        .metric strong{
            display:block;
            font-size:28px;
            line-height:1;
            color:#fff;
            letter-spacing:-.03em;
        }
        .metric span{
            display:block;
            margin-top:7px;
            color:var(--muted);
            font-size:13px;
        }
        .age-note{
            position:absolute;
            right:30px;
            bottom:30px;
            z-index:3;
            width:270px;
            padding:18px;
            border-radius:24px;
            background:rgba(5, 15, 30, .66);
            border:1px solid rgba(255,255,255,.14);
            backdrop-filter:blur(18px);
            color:#cfe4f7;
            font-size:13px;
        }
        .age-note b{
            display:block;
            color:#fff;
            font-size:15px;
            margin-bottom:6px;
        }

        .calendar-wrap{
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:22px;
            align-items:stretch;
        }
        .date-strip{
            display:grid;
            grid-template-columns:repeat(7, minmax(0, 1fr));
            gap:10px;
            margin-bottom:18px;
        }
        .date-pill{
            min-height:82px;
            padding:12px 10px;
            border-radius:18px;
            text-align:center;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.055);
            color:var(--muted);
        }
        .date-pill.active{
            color:#071120;
            background:linear-gradient(135deg, var(--primary), #d9f8ff);
            box-shadow:0 0 30px rgba(88,216,255,.24);
        }
        .date-pill small{display:block;font-weight:850}
        .date-pill b{display:block;margin-top:4px;font-size:22px;line-height:1}
        .calendar-panel{
            padding:24px;
            border-radius:var(--radius-xl);
        }
        .compact-list{
            display:grid;
            gap:12px;
        }
        .compact-item{
            display:grid;
            grid-template-columns:86px 1fr auto;
            gap:14px;
            align-items:center;
            padding:15px;
            border-radius:18px;
            background:rgba(255,255,255,.055);
            border:1px solid rgba(255,255,255,.08);
        }
        .compact-time{
            color:var(--primary);
            font-weight:900;
            font-size:14px;
        }
        .compact-item h3{
            font-size:16px;
            color:#fff;
            line-height:1.35;
        }
        .compact-item p{
            color:var(--muted);
            font-size:13px;
            margin-top:3px;
        }
        .status-tag{
            justify-self:end;
            font-size:12px;
            color:#071120;
            font-weight:900;
            padding:5px 9px;
            border-radius:999px;
            background:var(--accent-2);
        }
        .reminder-card{
            padding:28px;
            border-radius:var(--radius-xl);
            min-height:100%;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            background:
                radial-gradient(circle at 85% 8%, rgba(255,123,213,.22), transparent 32%),
                rgba(255,255,255,.06);
        }
        .reminder-card h3{
            font-size:26px;
            line-height:1.25;
            color:#fff;
            letter-spacing:-.03em;
        }
        .reminder-card p{
            margin-top:12px;
            color:var(--muted);
        }
        .notify-form{
            margin-top:24px;
            display:flex;
            gap:10px;
            padding:8px;
            border-radius:999px;
            background:rgba(0,0,0,.22);
            border:1px solid rgba(255,255,255,.1);
        }
        .notify-form input{
            min-width:0;
            flex:1;
            border:0;
            outline:0;
            color:#fff;
            background:transparent;
            padding:0 12px;
        }
        .notify-form input::placeholder{color:var(--muted-2)}
        .form-tip{
            margin-top:12px;
            color:var(--muted-2);
            font-size:12px;
        }

        .topic-layout{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:22px;
        }
        .topic-feature{
            min-height:410px;
            padding:30px;
            border-radius:var(--radius-xl);
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            background:
                linear-gradient(140deg, rgba(88,216,255,.15), rgba(255,123,213,.08)),
                rgba(255,255,255,.055);
        }
        .topic-feature h3{
            max-width:600px;
            font-size:36px;
            line-height:1.12;
            letter-spacing:-.04em;
            color:#fff;
        }
        .topic-feature p{
            max-width:620px;
            color:var(--muted);
            margin-top:14px;
        }
        .topic-badges{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .mini-badge{
            border:1px solid rgba(255,255,255,.14);
            background:rgba(255,255,255,.065);
            border-radius:999px;
            padding:8px 11px;
            color:#d7ebff;
            font-size:13px;
            font-weight:800;
        }
        .topic-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:14px;
        }
        .topic-card{
            padding:20px;
            border-radius:24px;
            min-height:198px;
        }
        .topic-icon{
            width:46px;
            height:46px;
            border-radius:17px;
            display:grid;
            place-items:center;
            margin-bottom:18px;
            color:#061120;
            font-weight:950;
            background:linear-gradient(135deg, var(--primary), var(--accent));
        }
        .topic-card h3{font-size:18px;color:#fff;line-height:1.3}
        .topic-card p{margin-top:9px;color:var(--muted);font-size:14px}

        .highlight-wall{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
        }
        .highlight-card{
            padding:22px;
            min-height:190px;
            border-radius:var(--radius-lg);
        }
        .highlight-card.large{grid-column:span 5}
        .highlight-card.mid{grid-column:span 4}
        .highlight-card.small{grid-column:span 3}
        .highlight-card h3{
            color:#fff;
            font-size:20px;
            margin-top:14px;
        }
        .highlight-card p{
            color:var(--muted);
            font-size:14px;
            margin-top:8px;
        }
        .progress-line{
            height:10px;
            margin-top:20px;
            border-radius:999px;
            background:rgba(255,255,255,.08);
            overflow:hidden;
        }
        .progress-line span{
            display:block;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--primary), var(--accent));
            box-shadow:0 0 18px rgba(88,216,255,.45);
        }

        .dashboard{
            display:grid;
            grid-template-columns:.85fr 1.15fr;
            gap:22px;
        }
        .score-card{
            padding:30px;
            border-radius:var(--radius-xl);
            background:
                radial-gradient(circle at 16% 14%, rgba(88,216,255,.18), transparent 36%),
                rgba(255,255,255,.055);
        }
        .score-ring{
            width:180px;
            height:180px;
            margin:10px auto 24px;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:
                conic-gradient(from 210deg, var(--primary), var(--accent), var(--primary-2), rgba(255,255,255,.1) 78%),
                rgba(255,255,255,.06);
            box-shadow:0 0 42px rgba(88,216,255,.18);
            position:relative;
        }
        .score-ring::after{
            content:"";
            position:absolute;
            inset:14px;
            border-radius:50%;
            background:#08172b;
            border:1px solid rgba(255,255,255,.1);
        }
        .score-ring strong{
            position:relative;
            z-index:1;
            color:#fff;
            font-size:44px;
            letter-spacing:-.05em;
        }
        .score-card h3{
            color:#fff;
            font-size:24px;
            text-align:center;
        }
        .score-card p{
            color:var(--muted);
            margin-top:10px;
            text-align:center;
        }
        .stats-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:16px;
        }
        .stat-card{
            padding:24px;
            border-radius:var(--radius-lg);
        }
        .stat-card strong{
            display:block;
            color:#fff;
            font-size:34px;
            line-height:1;
            letter-spacing:-.04em;
        }
        .stat-card span{
            display:block;
            margin-top:9px;
            color:var(--muted);
            font-size:14px;
        }
        .stat-card em{
            display:inline-block;
            margin-top:16px;
            font-style:normal;
            color:var(--success);
            font-weight:850;
            font-size:13px;
        }

        .news-layout{
            display:grid;
            grid-template-columns:1fr 360px;
            gap:24px;
            align-items:start;
        }
        .news-list{
            border-radius:var(--radius-xl);
            overflow:hidden;
        }
        .news-item{
            display:grid;
            grid-template-columns:112px 1fr;
            gap:18px;
            padding:20px;
            border-bottom:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.045);
            transition:background .22s var(--ease), transform .22s var(--ease);
        }
        .news-item:last-child{border-bottom:0}
        .news-item:hover{background:rgba(88,216,255,.08);transform:translateX(4px)}
        .news-date{
            align-self:start;
            color:var(--primary);
            font-weight:900;
            font-size:14px;
            padding:9px 12px;
            border-radius:14px;
            background:rgba(88,216,255,.1);
            text-align:center;
        }
        .news-item h3{
            color:#fff;
            font-size:18px;
            line-height:1.35;
        }
        .news-item p{
            color:var(--muted);
            margin-top:7px;
            font-size:14px;
        }
        .recommend{
            padding:24px;
            border-radius:var(--radius-xl);
            position:sticky;
            top:104px;
        }
        .recommend h3{color:#fff;font-size:22px;margin-bottom:15px}
        .rec-link{
            display:flex;
            justify-content:space-between;
            gap:12px;
            padding:14px 0;
            border-bottom:1px solid rgba(255,255,255,.08);
            color:#d8ecff;
            transition:color .2s var(--ease), padding-left .2s var(--ease);
        }
        .rec-link:hover{color:var(--primary);padding-left:5px}
        .rec-link:last-child{border-bottom:0}
        .rec-link span{color:var(--muted-2);font-size:13px;white-space:nowrap}

        .guide-flow{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:16px;
            counter-reset:step;
        }
        .guide-step{
            padding:24px;
            border-radius:var(--radius-lg);
            position:relative;
        }
        .guide-step::before{
            counter-increment:step;
            content:"0" counter(step);
            display:inline-grid;
            place-items:center;
            width:42px;
            height:42px;
            border-radius:15px;
            margin-bottom:18px;
            color:#061120;
            font-weight:950;
            background:linear-gradient(135deg, var(--primary), var(--accent));
        }
        .guide-step h3{color:#fff;font-size:18px}
        .guide-step p{color:var(--muted);font-size:14px;margin-top:8px}

        .faq-wrap{
            display:grid;
            grid-template-columns:380px 1fr;
            gap:26px;
            align-items:start;
        }
        .faq-intro{
            padding:28px;
            border-radius:var(--radius-xl);
        }
        .faq-intro h2{
            color:#fff;
            font-size:34px;
            line-height:1.15;
            letter-spacing:-.04em;
        }
        .faq-intro p{
            margin-top:14px;
            color:var(--muted);
        }
        .faq-list{
            display:grid;
            gap:12px;
        }
        .faq-item{
            border-radius:20px;
            border:1px solid var(--border);
            background:rgba(255,255,255,.052);
            overflow:hidden;
        }
        .faq-question{
            width:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:19px 20px;
            color:#fff;
            background:transparent;
            text-align:left;
            font-weight:850;
        }
        .faq-question:hover{background:rgba(88,216,255,.07)}
        .faq-question:focus-visible{outline:3px solid rgba(88,216,255,.28);outline-offset:-3px}
        .faq-question i{
            width:24px;height:24px;
            display:grid;place-items:center;
            border-radius:50%;
            color:#061120;
            background:var(--primary);
            font-style:normal;
            transition:transform .2s var(--ease);
        }
        .faq-answer{
            display:none;
            padding:0 20px 20px;
            color:var(--muted);
            font-size:14px;
        }
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question i{transform:rotate(45deg)}

        .pricing-strip{
            display:grid;
            grid-template-columns:1fr 1fr 1fr;
            gap:16px;
        }
        .plan{
            padding:24px;
            border-radius:var(--radius-lg);
            position:relative;
        }
        .plan.featured{
            border-color:rgba(88,216,255,.45);
            box-shadow:var(--shadow-glow);
        }
        .plan h3{color:#fff;font-size:22px}
        .plan-price{
            margin-top:12px;
            color:#fff;
            font-size:34px;
            font-weight:950;
            letter-spacing:-.04em;
        }
        .plan-price small{
            color:var(--muted);
            font-size:14px;
            font-weight:700;
        }
        .plan ul{
            list-style:none;
            margin:18px 0 22px;
            display:grid;
            gap:10px;
            color:var(--muted);
            font-size:14px;
        }
        .plan li{
            display:flex;
            gap:9px;
        }
        .plan li::before{
            content:"✓";
            color:var(--success);
            font-weight:950;
        }

        .cta-panel{
            padding:36px;
            border-radius:34px;
            display:grid;
            grid-template-columns:1fr auto;
            gap:28px;
            align-items:center;
            background:
                radial-gradient(circle at 18% 30%, rgba(88,216,255,.18), transparent 35%),
                radial-gradient(circle at 76% 20%, rgba(255,123,213,.14), transparent 32%),
                rgba(255,255,255,.065);
        }
        .cta-panel h2{
            color:#fff;
            font-size:clamp(28px, 4vw, 44px);
            line-height:1.14;
            letter-spacing:-.04em;
        }
        .cta-panel p{
            max-width:720px;
            color:var(--muted);
            margin-top:12px;
        }

        .site-footer{
            padding:54px 0 32px;
            border-top:1px solid rgba(255,255,255,.08);
            background:rgba(3, 8, 16, .36);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr .8fr;
            gap:28px;
            align-items:start;
        }
        .footer-brand{
            display:flex;
            align-items:center;
            gap:12px;
            color:#fff;
            font-size:18px;
            font-weight:950;
        }
        .footer-text{
            margin-top:14px;
            max-width:520px;
            color:var(--muted);
            font-size:14px;
        }
        .footer-col h3{
            color:#fff;
            font-size:15px;
            margin-bottom:12px;
        }
        .footer-col a,
        .footer-col span{
            display:block;
            color:var(--muted);
            font-size:14px;
            padding:5px 0;
        }
        .footer-col a:hover{color:var(--primary)}
        .footer-bottom{
            margin-top:34px;
            padding-top:20px;
            border-top:1px solid rgba(255,255,255,.08);
            display:flex;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            color:var(--muted-2);
            font-size:13px;
        }

        @media (max-width:1024px){
            .dock-nav{width:min(940px, calc(100% - 24px))}
            .mini-search{display:none}
            .hero-stage{min-height:560px}
            .hero-ribbons{opacity:.55;width:52vw}
            .age-note{position:relative;right:auto;bottom:auto;margin:0 28px 28px;width:auto}
            .calendar-wrap,.topic-layout,.dashboard,.news-layout,.faq-wrap{grid-template-columns:1fr}
            .recommend{position:static}
            .highlight-card.large,.highlight-card.mid,.highlight-card.small{grid-column:span 6}
            .guide-flow{grid-template-columns:repeat(2, minmax(0,1fr))}
            .pricing-strip{grid-template-columns:1fr}
            .cta-panel{grid-template-columns:1fr}
        }
        @media (max-width:768px){
            .container{width:min(100% - 28px, var(--container))}
            .site-header{top:10px}
            .dock-nav{
                border-radius:26px;
                flex-wrap:wrap;
                justify-content:space-between;
                padding:10px;
            }
            .brand-text{font-size:14px}
            .menu-toggle{display:block}
            .nav-links{
                order:3;
                width:100%;
                display:none;
                margin-top:8px;
                padding:8px;
                border-radius:18px;
                justify-content:flex-start;
                overflow-x:auto;
            }
            .dock-nav.menu-open .nav-links{display:flex}
            .nav-link{min-height:40px;padding:0 16px}
            .hero{padding-top:48px}
            .hero-stage{border-radius:30px;min-height:auto}
            .hero-ribbons{display:none}
            .hero-content{padding:34px 24px}
            .hero-metrics{grid-template-columns:1fr}
            .section{padding:62px 0}
            .section-head{display:block}
            .section-aside{margin-top:14px}
            .date-strip{grid-template-columns:repeat(4, minmax(0,1fr))}
            .compact-item{grid-template-columns:1fr;gap:8px}
            .status-tag{justify-self:start}
            .topic-grid{grid-template-columns:1fr}
            .highlight-card.large,.highlight-card.mid,.highlight-card.small{grid-column:span 12}
            .stats-grid{grid-template-columns:1fr}
            .news-item{grid-template-columns:1fr}
            .guide-flow{grid-template-columns:1fr}
            .footer-grid{grid-template-columns:1fr}
        }
        @media (max-width:520px){
            .dock-nav{width:calc(100% - 16px)}
            .brand-mark{width:34px;height:34px;border-radius:13px}
            .nav-actions .btn{display:none}
            .hero-content{padding:28px 18px}
            .hero h1{font-size:38px;letter-spacing:-.05em}
            .hero-actions{display:grid}
            .hero-actions .btn{width:100%}
            .date-strip{grid-template-columns:repeat(2, minmax(0,1fr))}
            .notify-form{border-radius:20px;display:grid}
            .notify-form .btn{width:100%}
            .section-title{font-size:30px}
            .topic-feature{min-height:auto;padding:24px}
            .topic-feature h3{font-size:28px}
            .cta-panel{padding:26px}
            .footer-bottom{display:block}
        }