/* body */
:root{
    --brand-gradient: linear-gradient(90deg, #3558F2 0%, #7B4EF1 50%, #B84DDA 100%);
    --blue: #2980FE;
    --blue-dark: #1768E8;
    --text: #182033;
    --muted: #657085;
    --light: #F5F7FB;
    --line: #E6EAF2;
    --white: #FFFFFF;
    --panel: #F8FAFF;
    --radius: 28px;
    --shadow: 0 20px 45px rgba(32, 49, 86, .10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.72;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{margin:0 0 14px}
h1,h2,h3{line-height:1.22;margin:0 0 16px}
ul,ol{padding-left:20px}
.container{width:min(1120px, calc(100% - 36px));margin:0 auto}
.section{padding:70px 0}
.section-soft{background:var(--light)}
.section-title{max-width:760px;margin:0 auto 32px;text-align:center}
.section-title h2{font-size:clamp(28px,4vw,44px)}
.section-title p{color:var(--muted)}
.eyebrow,.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(41,128,254,.10);
    color:var(--blue);
    font-size:14px;
    font-weight:700;
}
.text-link{color:var(--blue);font-weight:700}
.text-link:hover{color:var(--blue-dark)}
/* header */
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(160%) blur(16px);
    border-bottom:1px solid rgba(230,234,242,.88);
}
.header-inner{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
/* logo */
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px}
.logo{width:42px;height:42px;border-radius:13px;object-fit:cover;box-shadow:0 8px 20px rgba(41,128,254,.18)}
/* responsive nav */
.site-nav{
    display:none;
    position:absolute;
    left:16px;
    right:16px;
    top:72px;
    padding:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow);
}
.site-nav.open{display:grid;gap:6px}
.site-nav a{padding:10px 12px;border-radius:12px;color:#34405A;font-weight:650;font-size:15px}
.site-nav a:hover,.site-nav a.active{background:#EEF4FF;color:var(--blue)}
/* mobile nav */
.nav-toggle{
    width:44px;
    height:44px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
    display:grid;
    place-items:center;
    gap:0;
    cursor:pointer;
}
.nav-toggle span{display:block;width:20px;height:2px;background:#25304A;border-radius:2px;margin:2px 0}
/* desktop nav */
@media (min-width: 980px){
    .nav-toggle{display:none}
    .site-nav{
        position:static;
        display:flex;
        align-items:center;
        gap:2px;
        padding:0;
        border:0;
        box-shadow:none;
        background:transparent;
    }
}
/* unified download button */
.download-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 24px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-weight:800;
    box-shadow:0 14px 28px rgba(41,128,254,.28);
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.download-btn:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 18px 34px rgba(23,104,232,.28)}
/* vpn saas hero */
.vpn-saas-hero{
    position:relative;
    padding:48px 0 72px;
    background:var(--brand-gradient);
    color:#fff;
    overflow:hidden;
}
.vpn-saas-hero:after{
    content:"";
    position:absolute;
    left:-10%;
    right:-10%;
    bottom:-80px;
    height:170px;
    background:#fff;
    transform:skewY(-4deg);
    transform-origin:left top;
}
.hero-grid{position:relative;z-index:1;display:grid;gap:34px;align-items:center}
.hero-copy h1{font-size:clamp(38px,6vw,68px);letter-spacing:-1.8px}
.hero-copy p{font-size:18px;max-width:680px;color:rgba(255,255,255,.9)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:26px 0}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px}
.hero-tags span,.floating-label{
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.14);
    color:#fff;
    padding:8px 12px;
    border-radius:999px;
    font-weight:700;
    font-size:14px;
}
.hero-visual{position:relative;min-height:360px;display:grid;place-items:center}
.product-card{
    width:min(420px, 92%);
    padding:22px;
    border-radius:36px;
    background:rgba(255,255,255,.96);
    box-shadow:0 30px 80px rgba(16,34,88,.25);
}
.product-card img{border-radius:26px;margin:auto;max-height:420px;object-fit:contain}
.floating-label{position:absolute;color:#3558F2;background:#fff;border:1px solid rgba(255,255,255,.65);box-shadow:0 16px 35px rgba(22,43,98,.16)}
.floating-label.one{top:14%;left:2%}
.floating-label.two{top:20%;right:2%}
.floating-label.three{bottom:21%;left:6%}
.floating-label.four{bottom:13%;right:5%}
/* product highlights */
.product-highlights{position:relative;z-index:2;margin-top:-32px}
.highlight-grid{display:grid;grid-template-columns:1fr;gap:16px}
.highlight-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:22px;
    box-shadow:0 14px 36px rgba(32,49,86,.08);
}
.highlight-card .tag{display:inline-flex;margin-bottom:14px;padding:4px 10px;border-radius:999px;background:rgba(41,128,254,.10);color:var(--blue);font-size:13px;font-weight:800}
.highlight-card p{color:var(--muted)}
/* content container */
.feature-section{padding:64px 0}
.feature-panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow);
}
.split{display:grid;gap:28px;align-items:center}
.split.reverse .media{order:-1}
.media{
    background:linear-gradient(180deg,#F6F9FF,#EEF4FF);
    border:1px solid var(--line);
    border-radius:30px;
    padding:18px;
    min-height:260px;
    display:grid;
    place-items:center;
}
.media img{max-height:390px;object-fit:contain;border-radius:24px}
.feature-list{display:grid;gap:12px;margin:20px 0}
.feature-list div,.mini-card{
    padding:14px 16px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
}
.feature-list strong,.mini-card strong{display:block;margin-bottom:4px}
/* vpn connection section */
.vpn-connection-section .feature-panel{background:linear-gradient(180deg,#fff,#FAFCFF)}
/* high speed section */
.high-speed-section{background:#F5F8FF}
.speed-metrics{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.speed-metrics .metric{padding:18px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.metric strong{display:block;font-size:22px;color:var(--blue)}
/* global nodes section */
.node-stack{display:grid;gap:12px}
.node-line{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff}
/* privacy protection section */
.privacy-protection-section .privacy-board{
    display:grid;
    gap:18px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:32px;
    padding:24px;
    box-shadow:var(--shadow);
}
.privacy-cards{display:grid;gap:14px}
.privacy-card{padding:18px;border-radius:22px;background:#F7FAFF;border:1px solid var(--line)}
/* no log policy section */
.no-log-policy-section .policy-grid{display:grid;gap:16px}
.policy-card{padding:22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 26px rgba(32,49,86,.06)}
/* multi device section */
.device-grid{display:grid;gap:16px}
.device-card{padding:20px;border-radius:24px;background:#fff;border:1px solid var(--line)}
/* encryption protocol section */
.protocol-panel{
    border-radius:32px;
    background:linear-gradient(135deg,#F8FAFF,#EEF4FF);
    border:1px solid var(--line);
    padding:26px;
}
.protocol-grid{display:grid;gap:14px;margin-top:20px}
.protocol-grid div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}
/* gradient background */
.gradient-band{background:var(--brand-gradient);color:#fff;border-radius:34px;padding:34px;overflow:hidden}
/* safety panel */
.safety-panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:30px;
    padding:24px;
    box-shadow:var(--shadow);
}
/* process steps */
.process-steps{display:grid;gap:16px;counter-reset:step}
.process-step{
    position:relative;
    padding:22px;
    border-radius:24px;
    background:#fff;
    border:1px solid var(--line);
}
.step-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;margin-bottom:12px}
/* risk grid */
.risk-grid{display:grid;gap:16px}
.risk-card{
    border:1px solid var(--line);
    border-left:5px solid var(--blue);
    border-radius:22px;
    background:#fff;
    padding:20px;
}
.risk-card p{color:var(--muted)}
/* FAQ item */
.faq-list{display:grid;gap:14px}
.faq-item{
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:20px;
}
.faq-item h3{font-size:19px;margin-bottom:8px}
.faq-item p{color:var(--muted)}
/* cta section */
.cta-section{padding:70px 0}
.cta-card{
    text-align:center;
    background:var(--brand-gradient);
    color:#fff;
    border-radius:36px;
    padding:42px 22px;
    box-shadow:0 24px 70px rgba(60,83,190,.22);
}
.cta-card p{max-width:700px;margin:0 auto 22px;color:rgba(255,255,255,.9)}
.cta-card .download-btn{background:var(--blue);color:#fff}
/* page layouts */
.page-hero{
    padding:54px 0;
    background:linear-gradient(180deg,#F7FAFF,#FFFFFF);
}
.page-hero .container{max-width:960px}
.page-hero h1{font-size:clamp(32px,5vw,52px)}
.page-hero p{color:var(--muted);font-size:18px}
.page-grid{display:grid;gap:22px;align-items:start}
.content-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:28px;
    padding:24px;
    box-shadow:0 12px 30px rgba(32,49,86,.06);
}
.aside-card{
    background:#F7FAFF;
    border:1px solid var(--line);
    border-radius:24px;
    padding:20px;
}
.check-list{display:grid;gap:12px;margin-top:18px}
.check-item{padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:#fff}
.download-wrap{margin-top:24px}
.notice-box{
    margin-top:20px;
    padding:18px;
    border-radius:22px;
    background:#F7FAFF;
    border:1px solid var(--line);
}
.steps-list{display:grid;gap:12px;margin-top:18px}
.steps-list li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.card-grid{display:grid;gap:16px}
.about-values{display:grid;gap:16px}
.about-values div{padding:20px;border:1px solid var(--line);border-radius:22px;background:#fff}
/* footer */
.site-footer{background:#111827;color:#D4DAE8;padding:56px 0 22px}
.footer-grid{display:grid;gap:24px}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:12px}
.footer-brand img{width:40px;height:40px;border-radius:12px;object-fit:cover}
.site-footer h3{color:#fff;font-size:17px;margin-bottom:12px}
.site-footer a{display:block;color:#D4DAE8;margin:8px 0}
.site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;text-align:center;color:#A8B0C2}
@media (min-width: 680px){
    .highlight-grid{grid-template-columns:repeat(2,1fr)}
    .speed-metrics,.privacy-cards,.policy-grid,.device-grid,.protocol-grid,.risk-grid,.card-grid,.about-values{grid-template-columns:repeat(2,1fr)}
    .process-steps{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 980px){
    .section{padding:92px 0}
    .vpn-saas-hero{padding:82px 0 110px}
    .hero-grid{grid-template-columns:1.02fr .98fr}
    .highlight-grid{grid-template-columns:repeat(4,1fr)}
    .split{grid-template-columns:1.03fr .97fr}
    .split.reverse .media{order:0}
    .privacy-protection-section .privacy-board{grid-template-columns:1.1fr .9fr;padding:34px}
    .policy-grid{grid-template-columns:repeat(3,1fr)}
    .device-grid,.protocol-grid,.risk-grid{grid-template-columns:repeat(3,1fr)}
    .process-steps{grid-template-columns:repeat(3,1fr)}
    .page-grid{grid-template-columns:minmax(0,1fr) 320px}
    .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
    .feature-panel{padding:34px}
}
@media (max-width: 520px){
    .container{width:min(100% - 28px, 1120px)}
    .hero-actions{align-items:stretch}
    .download-btn{width:100%}
    .floating-label{display:none}
    .product-card{width:100%;padding:14px;border-radius:28px}
    .section{padding:54px 0}
    .feature-section{padding:46px 0}
    .cta-card,.gradient-band{border-radius:26px}
}