/* roulang page: index */
:root{
            --ink:#101827;
            --muted:#687386;
            --soft:#f5f7fb;
            --line:#e6eaf1;
            --blue:#315bea;
            --blue-dark:#2444bd;
            --cyan:#16b8d4;
            --navy:#0d1425;
            --navy-2:#141f37;
            --white:#fff;
            --radius-lg:28px;
            --radius-md:18px;
            --shadow:0 22px 60px rgba(25,40,80,.12);
            --shadow-soft:0 12px 30px rgba(25,40,80,.08);
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased}
        a{text-decoration:none;color:inherit}
        button,input{font:inherit}
        button{cursor:pointer;border:0}
        img{max-width:100%;display:block}
        .container{width:min(1160px,calc(100% - 40px));margin:0 auto}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
        .eyebrow:before{content:"";width:22px;height:2px;background:var(--blue);border-radius:4px}
        .section{padding:104px 0}
        .section-head{max-width:700px;margin-bottom:44px}
        .section-head h2{font-size:clamp(30px,4vw,48px);line-height:1.15;letter-spacing:-.045em;margin:14px 0 16px}
        .section-head p{font-size:16px;color:var(--muted);max-width:650px}
        .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(230,234,241,.9)}
        .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
        .brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.04em;font-size:20px;white-space:nowrap}
        .brand-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px rgba(49,91,234,.27)}
        .nav-links{display:flex;align-items:center;gap:28px;margin-left:auto}
        .nav-links a{font-size:14px;color:#586275;font-weight:700;transition:.2s}
        .nav-links a:hover,.nav-links a.active{color:var(--blue)}
        .nav-actions{display:flex;align-items:center;gap:12px}
        .search{height:40px;width:150px;border:1px solid var(--line);border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:8px;color:#9aa4b5;background:#fafbfe}
        .search input{width:100%;border:0;outline:0;background:transparent;font-size:13px;color:var(--ink)}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;padding:12px 19px;font-size:14px;font-weight:800;transition:transform .2s,box-shadow .2s,background .2s}
        .btn:hover{transform:translateY(-2px)}
        .btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 22px rgba(49,91,234,.22)}
        .btn-primary:hover{background:var(--blue-dark);box-shadow:0 14px 28px rgba(49,91,234,.3)}
        .btn-dark{background:var(--navy);color:#fff}
        .btn-light{background:#fff;color:var(--ink);border:1px solid var(--line)}
        .menu-toggle{display:none;background:transparent;color:var(--ink);font-size:22px}
        .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f9fbff 0%,#eef3ff 100%);padding:86px 0 92px}
        .hero:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-180px;top:-180px;background:radial-gradient(circle,rgba(58,103,246,.18),transparent 68%);pointer-events:none}
        .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:70px;position:relative;z-index:1}
        .hero h1{font-size:clamp(42px,6vw,74px);line-height:1.06;letter-spacing:-.065em;max-width:650px;margin:18px 0 24px}
        .hero h1 span{color:var(--blue)}
        .hero-copy{font-size:18px;color:#5d687a;max-width:650px}
        .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
        .hero-proof{display:flex;gap:26px;flex-wrap:wrap;margin-top:35px;padding-top:24px;border-top:1px solid rgba(140,155,190,.25)}
        .proof-item strong{font-size:22px;display:block;letter-spacing:-.04em}
        .proof-item small{color:var(--muted);font-size:12px}
        .console{border:1px solid rgba(255,255,255,.12);background:var(--navy);border-radius:26px;box-shadow:var(--shadow);padding:18px;color:#dbe5ff;position:relative;overflow:hidden}
        .console:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(49,91,234,.24),transparent 45%,rgba(22,184,212,.12));pointer-events:none}
        .console-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;padding:4px 3px 17px;border-bottom:1px solid rgba(255,255,255,.1)}
        .dots{display:flex;gap:6px}.dots i{width:8px;height:8px;border-radius:50%;background:#ff6e6e}.dots i:nth-child(2){background:#f6c85f}.dots i:nth-child(3){background:#4dd393}
        .console-label{font-size:12px;color:#9cabc7}
        .console-body{position:relative;z-index:1;padding:28px 10px 12px}
        .connection-state{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
        .connection-state small{display:block;color:#91a0bd;font-size:12px}.connection-state strong{font-size:26px;color:#fff;display:block;margin-top:4px}
        .live{display:flex;align-items:center;gap:6px;color:#6be1bb;font-size:12px}.live i{width:7px;height:7px;background:#52dfaa;border-radius:50%;box-shadow:0 0 0 5px rgba(82,223,170,.1)}
        .chart{height:130px;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid rgba(255,255,255,.12);background:repeating-linear-gradient(to top,transparent 0,transparent 31px,rgba(255,255,255,.05) 32px)}
        .bar{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(to top,#315bea,#5ccfe2);min-height:25px;opacity:.88}
        .endpoint-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
        .endpoint{padding:12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:12px;color:#aebbd3;display:flex;justify-content:space-between}
        .endpoint b{color:#fff;font-weight:700}
        .ticker{background:var(--navy);color:#d9e4ff;padding:13px 0;font-size:13px;overflow:hidden}
        .ticker-line{display:flex;gap:34px;white-space:nowrap;animation:slide 24s linear infinite}
        .ticker strong{color:#65d8ed}.ticker i{color:#657696;font-style:normal}
        @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-25%)}}
        .countdown{background:#fff;padding:42px 0;border-bottom:1px solid var(--line)}
        .count-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
        .count-copy h3{font-size:24px;letter-spacing:-.03em}.count-copy p{color:var(--muted);font-size:14px;margin-top:4px}
        .timer{display:flex;align-items:center;gap:9px}.time-box{min-width:62px;text-align:center;background:#f1f4fb;border:1px solid #e3e8f4;border-radius:13px;padding:9px 8px}.time-box strong{font-size:25px;display:block;color:var(--blue)}.time-box span{font-size:11px;color:var(--muted)}
        .highlight-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
        .highlight-main,.highlight-side{border-radius:var(--radius-lg);padding:36px;overflow:hidden;position:relative}
        .highlight-main{background:linear-gradient(135deg,#1c326f,#315bea);color:#fff;min-height:300px}
        .highlight-main:after{content:"";position:absolute;width:250px;height:250px;border:1px solid rgba(255,255,255,.2);border-radius:50%;right:-50px;bottom:-90px;box-shadow:0 0 0 28px rgba(255,255,255,.04),0 0 0 56px rgba(255,255,255,.03)}
        .highlight-main h3,.highlight-side h3{font-size:28px;letter-spacing:-.045em;max-width:430px;line-height:1.2}.highlight-main p{color:#d8e3ff;max-width:460px;margin-top:15px;font-size:15px}
        .highlight-main .mini-tag{background:rgba(255,255,255,.15);color:#fff}
        .highlight-side{background:#f5f7fc;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
        .highlight-side p{font-size:14px;color:var(--muted);margin-top:13px}.highlight-side .icon-box{color:var(--blue);background:#e2eaff}
        .mini-tag{display:inline-flex;padding:6px 10px;border-radius:99px;background:#eaf0ff;color:var(--blue);font-size:11px;font-weight:800;margin-bottom:20px}
        .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .benefit{padding:27px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;transition:.25s;box-shadow:0 4px 0 rgba(20,30,55,.02)}
        .benefit:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);border-color:#cbd7fb}
        .icon-box{height:45px;width:45px;border-radius:13px;background:#edf2ff;color:var(--blue);display:grid;place-items:center;font-size:18px;margin-bottom:22px}
        .benefit h3{font-size:19px;margin-bottom:9px}.benefit p{color:var(--muted);font-size:14px}
        .dark-section{background:var(--navy);color:#fff}.dark-section .section-head p{color:#a4b1ca}.dark-section .eyebrow{color:#72d7ea}.dark-section .eyebrow:before{background:#72d7ea}
        .matrix{display:grid;grid-template-columns:1fr 1fr;gap:18px}
        .matrix-item{display:flex;gap:18px;padding:23px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.045);transition:.2s}
        .matrix-item:hover{background:rgba(255,255,255,.08);transform:translateY(-3px)}
        .matrix-item .icon-box{flex:none;background:rgba(84,125,255,.18);color:#8ea9ff;margin:0}.matrix-item h3{font-size:17px}.matrix-item p{color:#a9b6cc;font-size:13px;margin-top:5px}
        .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
        .steps:before{content:"";position:absolute;top:28px;left:10%;right:10%;height:1px;background:#dfe5f0}
        .step{position:relative;z-index:1;padding:0 14px;text-align:center}
        .step-num{width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid #dce4f4;color:var(--blue);display:grid;place-items:center;margin:0 auto 21px;font-weight:900;box-shadow:0 0 0 8px #fff}
        .step h3{font-size:17px}.step p{font-size:13px;color:var(--muted);margin-top:8px}
        .plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
        .plan{border:1px solid var(--line);border-radius:18px;padding:23px;background:#fff;position:relative}.plan.featured{border:2px solid var(--blue);padding:22px;box-shadow:var(--shadow-soft)}.plan-badge{position:absolute;right:16px;top:15px;color:var(--blue);font-size:11px;font-weight:900}.plan h3{font-size:18px}.plan p{font-size:13px;color:var(--muted);margin:8px 0 22px}.price{font-size:28px;font-weight:900;letter-spacing:-.05em}.price small{font-size:12px;font-weight:500;color:var(--muted)}.plan ul{list-style:none;border-top:1px solid var(--line);padding-top:16px;margin-top:18px}.plan li{font-size:12px;color:#657085;margin:9px 0}.plan li i{color:#32ba8c;margin-right:6px}
        .resource-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}.resource-feature{min-height:310px;border-radius:var(--radius-lg);padding:32px;background:linear-gradient(145deg,#101a30,#203b78);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.resource-feature:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;border:1px solid rgba(130,170,255,.25);right:-80px;top:-100px;box-shadow:0 0 0 35px rgba(130,170,255,.06),0 0 0 70px rgba(130,170,255,.04)}.resource-feature>*{position:relative}.resource-feature p{color:#b9c9e8;font-size:14px;max-width:500px;margin-top:10px}.resource-list{display:flex;flex-direction:column;gap:12px}.resource-item{flex:1;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}.resource-item span{font-size:11px;color:var(--blue);font-weight:800}.resource-item h3{font-size:16px;margin:6px 0}.resource-item p{font-size:13px;color:var(--muted)}
        .security-strip{background:#f5f7fb;border-radius:var(--radius-lg);padding:30px;display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:center}.security-strip h3{font-size:25px;letter-spacing:-.04em}.security-strip p{font-size:14px;color:var(--muted);margin-top:8px}.security-points{display:grid;grid-template-columns:1fr 1fr;gap:14px}.security-points div{font-size:13px;color:#526075;display:flex;gap:9px;align-items:center}.security-points i{color:#27b98a}
        .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.quote{padding:27px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px rgba(20,30,55,.04)}.stars{color:#f4b83f;font-size:12px;letter-spacing:2px}.quote p{font-size:14px;line-height:1.8;margin:16px 0 22px;color:#4e5c71}.user{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800}.avatar{width:35px;height:35px;border-radius:50%;background:linear-gradient(135deg,#dbe6ff,#9cb5ff);display:grid;place-items:center;color:#315bea}
        .faq-list{max-width:820px;margin:0 auto}.faq{border-bottom:1px solid var(--line);padding:20px 0}.faq button{width:100%;display:flex;justify-content:space-between;text-align:left;background:none;color:var(--ink);font-weight:800;font-size:16px}.faq button i{color:var(--blue);transition:.2s}.faq-answer{color:var(--muted);font-size:14px;max-width:700px;padding-top:11px;display:none}.faq.open .faq-answer{display:block}.faq.open button i{transform:rotate(45deg)}
        .final-cta{background:linear-gradient(120deg,#142657,#315bea);color:#fff;border-radius:30px;padding:58px 65px;display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:hidden;position:relative}.final-cta:after{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(255,255,255,.14);border-radius:50%;right:-120px;top:-140px;box-shadow:0 0 0 36px rgba(255,255,255,.04)}.final-cta>*{position:relative;z-index:1}.final-cta h2{font-size:clamp(28px,4vw,46px);line-height:1.12;letter-spacing:-.05em}.final-cta p{color:#dbe4ff;margin-top:12px;max-width:620px;font-size:15px}.final-cta .btn-light{border:0;margin-top:22px}
        footer{background:#0b1221;color:#a5b2c8;padding:58px 0 22px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}.footer-brand{color:#fff}.footer-brand p{font-size:13px;max-width:280px;margin-top:14px;color:#8796af}.footer-title{color:#fff;font-size:13px;font-weight:800;margin-bottom:15px}.footer-links{list-style:none}.footer-links li{margin:9px 0;font-size:13px}.footer-links a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;gap:18px;font-size:12px}.footer-bottom a{color:#b9c8e7}
        :focus-visible{outline:3px solid rgba(49,91,234,.35);outline-offset:3px}
        @media(max-width:1024px){.nav-links{gap:16px}.search{display:none}.hero-grid{gap:35px}.plan-grid{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:768px){.container{width:min(100% - 30px,600px)}.section{padding:74px 0}.nav-wrap{height:68px}.nav-links,.nav-actions{display:none}.menu-toggle{display:block}.nav-wrap.menu-open .nav-links{display:flex;position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:18px 20px;flex-direction:column;align-items:flex-start;gap:16px}.nav-wrap.menu-open .nav-actions{display:flex;position:absolute;top:270px;left:20px}.hero{padding:66px 0}.hero-grid,.highlight-grid,.resource-grid,.security-strip{grid-template-columns:1fr}.hero h1{font-size:48px}.hero-copy{font-size:16px}.count-wrap{align-items:flex-start;flex-direction:column}.benefit-grid,.quote-grid{grid-template-columns:1fr}.matrix{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr;gap:34px 10px}.steps:before{display:none}.step{padding:0}.footer-grid{grid-template-columns:1fr 1fr}.final-cta{padding:40px 28px;display:block}.security-points{margin-top:15px}}
        @media(max-width:520px){.hero h1{font-size:40px}.hero-proof{gap:16px}.console{padding:13px}.highlight-main,.highlight-side{padding:26px}.plan-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}.timer{width:100%;justify-content:space-between}.time-box{min-width:0;flex:1}.endpoint-list{grid-template-columns:1fr}}