/* ProtonVPN 站点样式 - 深蓝+青色系 */
:root{--navy:#0b1220;--ink:#0f1b2d;--muted:#5b6b84;--brand:#0e9f9c;--brand2:#0ea5e9;--accent:#10b981;--line:#e6ebf2;--bg:#f5f8fb;--card:#fff;--soft:#eef6f6;--gold:#f59e0b}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;font-size:16px}
a{color:var(--brand2);text-decoration:none;transition:.2s}
a:hover{color:var(--brand)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:8px 16px;z-index:999}
.skip:focus{left:0}
/* 导航 */
.nav{position:sticky;top:0;z-index:100;background:rgba(11,18,32,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:18px}
.logo img{width:34px;height:34px}
.logo b{color:var(--brand)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:#cdd6e4;font-size:15px;font-weight:500}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex;align-items:center;gap:12px}
.lang a{color:#cdd6e4;font-size:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;border:none;line-height:1.2}
.btn-brand{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.btn-brand:hover{color:#fff;filter:brightness(1.08)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{color:#fff;border-color:#fff}
.btn-lg{padding:14px 30px;font-size:16px}
/* Hero */
.hero{background:radial-gradient(1200px 600px at 80% -10%,rgba(14,159,156,.28),transparent 60%),radial-gradient(900px 500px at 10% 20%,rgba(14,165,233,.22),transparent 55%),var(--navy);color:#fff;padding:72px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:42px;line-height:1.22;margin-bottom:18px;font-weight:800}
.hero h1 span{color:var(--brand)}
.hero p.lead{font-size:18px;color:#c4cfdd;margin-bottom:28px;max-width:540px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.hero-badges span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:7px 14px;border-radius:20px;font-size:13px;color:#dbe4ee}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
/* 客户端模拟器 */
.sim{background:#101a2c;border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden}
.sim-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#0c1524;border-bottom:1px solid rgba(255,255,255,.08)}
.sim-dot{width:12px;height:12px;border-radius:50%}
.sim-dot.r{background:#ff5f57}.sim-dot.y{background:#febc2e}.sim-dot.g{background:#28c840}
.sim-bar .sim-url{flex:1;margin-left:10px;background:#1a2638;border-radius:6px;padding:6px 12px;color:#8fa1b8;font-size:13px;display:flex;align-items:center;gap:6px}
.sim-body{padding:22px}
.sim-status{display:flex;align-items:center;gap:10px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.sim-status .dot{width:10px;height:10px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px rgba(16,185,129,.2);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(16,185,129,.2)}50%{box-shadow:0 0 0 8px rgba(16,185,129,.08)}}
.sim-status b{color:#fff;font-size:15px}
.sim-status small{color:#9db3c8;margin-left:auto;font-size:12px}
.sim-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);color:#c7d2e0;font-size:14px}
.sim-row b{color:#fff}
.sim-row .val{color:var(--accent);font-family:ui-monospace,Menlo,Consolas,monospace}
.sim-loc{display:flex;align-items:center;gap:8px;background:#1a2638;border-radius:8px;padding:10px 12px;margin-top:16px;color:#cdd7e3;font-size:14px}
.sim-loc img{width:22px;height:16px;border-radius:2px;object-fit:cover}
.sim-connect{display:block;text-align:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:700;padding:14px;border-radius:10px;margin-top:18px}
.sim-connect:hover{color:#fff;filter:brightness(1.08)}
/* 区块通用 */
.section{padding:76px 0}
.section-alt{background:#fff}
.sec-head{text-align:center;max-width:720px;margin:0 auto 48px}
.sec-head .tag{display:inline-block;color:var(--brand);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.sec-head h2{font-size:32px;font-weight:800;margin-bottom:14px;color:var(--ink)}
.sec-head p{color:var(--muted);font-size:16px}
/* 核心功能 */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;transition:.25s}
.feat:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,27,45,.1);border-color:var(--brand)}
.feat .ico{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;background:var(--soft)}
.feat h3{font-size:18px;font-weight:700;margin-bottom:10px}
.feat p{color:var(--muted);font-size:14.5px}
/* 公告区 */
.notice{background:linear-gradient(135deg,#0f766e,#0e9f9c);color:#fff;padding:22px 0}
.notice-in{display:flex;align-items:center;gap:16px}
.notice-in .badge{background:rgba(255,255,255,.2);padding:5px 12px;border-radius:6px;font-size:13px;font-weight:700;white-space:nowrap}
.notice-in p{flex:1;font-size:15px}
/* 信任背书 */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.trust{text-align:center;padding:26px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.trust .num{font-size:34px;font-weight:800;color:var(--brand);line-height:1.1}
.trust p{color:var(--muted);font-size:14px;margin-top:6px}
/* 应用场景 */
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.scene{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
.scene h3{font-size:17px;margin-bottom:10px}
.scene p{color:var(--muted);font-size:14.5px}
/* 对比表 */
.cmp-wrap{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(15,27,45,.06)}
.cmp th,.cmp td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--line);font-size:14.5px}
.cmp th{background:var(--navy);color:#fff;font-weight:600}
.cmp td:first-child{text-align:left;font-weight:600;color:var(--ink)}
.cmp tr:hover td{background:var(--soft)}
.cmp .yes{color:var(--accent);font-weight:700}
.cmp .no{color:#c5ccd6}
/* 新闻 */
.news-tabs input{display:none}
.news-tabs{max-width:900px;margin:0 auto}
.news-tabs .tabs{display:flex;gap:6px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
.news-tabs .tabs label{padding:9px 20px;border-radius:22px;background:#e9eef5;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.news-tabs .tab-pane{display:none}
#tab1:checked~.panes .pane1,#tab2:checked~.panes .pane2,#tab3:checked~.panes .pane3{display:block}
#tab1:checked~.tabs label[for=tab1],#tab2:checked~.tabs label[for=tab2],#tab3:checked~.tabs label[for=tab3]{background:var(--navy);color:#fff}
.news-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-item{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.news-item img{height:150px;width:100%;object-fit:cover}
.news-item .body{padding:18px}
.news-item .cat{color:var(--brand);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.news-item h4{font-size:15.5px;margin:8px 0;line-height:1.5}
.news-item h4 a{color:var(--ink)}
.news-item h4 a:hover{color:var(--brand2)}
.news-item time{color:var(--muted);font-size:12.5px}
/* 评论 */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.rev .stars{color:var(--gold);letter-spacing:2px;font-size:16px;margin-bottom:12px}
.rev p{color:var(--ink);font-size:15px;margin-bottom:16px}
.rev .who{display:flex;align-items:center;gap:12px}
.rev .who .ava{width:40px;height:40px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--brand)}
.rev .who b{font-size:14px;display:block}
.rev .who small{color:var(--muted);font-size:12.5px}
/* 下载 */
.dl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.dl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 18px;text-align:center;transition:.2s}
.dl:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(15,27,45,.1)}
.dl .ico{font-size:34px;margin-bottom:14px}
.dl h3{font-size:16px;margin-bottom:6px}
.dl small{color:var(--muted);font-size:12.5px;display:block;margin-bottom:16px}
.dl .btn{width:100%;justify-content:center;padding:10px}
/* FAQ */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:20px 24px;font-weight:700;font-size:16px;list-style:none;position:relative;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";font-size:22px;color:var(--brand);transition:.2s}
.faq-item[open] summary:after{content:"−"}
.faq-item .faq-body{padding:0 24px 22px;color:var(--muted);font-size:15px}
.faq-item .faq-body ol{padding-left:20px;margin-top:10px}
.faq-item .faq-body li{margin-bottom:8px}
/* CTA */
.cta{background:radial-gradient(800px 400px at 50% 0,rgba(14,159,156,.3),transparent 60%),var(--navy);color:#fff;text-align:center;padding:80px 0}
.cta h2{font-size:34px;font-weight:800;margin-bottom:14px}
.cta p{color:#c4cfdd;margin-bottom:28px;font-size:16px}
/* 页脚 */
.footer{background:#070c16;color:#93a3b8;padding:56px 0 0;font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px}
.footer h4{color:#fff;font-size:15px;margin-bottom:16px}
.footer a{color:#93a3b8;display:block;margin-bottom:10px;font-size:13.5px}
.footer a:hover{color:#fff}
.footer .logo{color:#fff;margin-bottom:14px}
.footer .desc{font-size:13.5px;margin-bottom:16px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:12.5px}
.footer-bottom a{display:inline;margin:0}
/* 面包屑 */
.breadcrumb{background:#fff;border-bottom:1px solid var(--line);padding:14px 0;font-size:13.5px;color:var(--muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li+li:before{content:"/";margin-right:6px;color:#c5ccd6}
.breadcrumb a{color:var(--muted)}
/* 内页 */
.page-hero{background:var(--navy);color:#fff;padding:60px 0}
.page-hero h1{font-size:34px;font-weight:800;margin-bottom:12px}
.page-hero p{color:#c4cfdd;max-width:680px}
.article{display:grid;grid-template-columns:1fr 300px;gap:40px;padding:48px 0}
.article-main h1{font-size:30px;font-weight:800;margin-bottom:16px;line-height:1.35}
.article-meta{display:flex;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:13.5px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.article-meta .cat{color:var(--brand);font-weight:700}
.article-body{font-size:16px;line-height:1.85;color:#22304a}
.article-body p{margin-bottom:18px}
.article-body h2{font-size:23px;font-weight:700;margin:32px 0 14px;color:var(--ink);border-left:4px solid var(--brand);padding-left:14px}
.article-body h3{font-size:18px;font-weight:700;margin:22px 0 10px}
.article-body ul,.article-body ol{margin:0 0 18px 22px}
.article-body li{margin-bottom:8px;list-style:disc}
.article-body ol li{list-style:decimal}
.article-body blockquote{background:var(--soft);border-left:4px solid var(--brand2);padding:16px 20px;border-radius:0 8px 8px 0;margin:0 0 18px;color:#33415c}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.article-body th{background:var(--soft);font-weight:700}
.article-body img{border-radius:10px;margin:0 0 18px}
.article-body figcaption{font-size:13px;color:var(--muted);text-align:center;margin:-10px 0 20px}
.article-toc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:24px}
.article-toc b{display:block;margin-bottom:10px;font-size:15px}
.article-toc a{display:block;color:var(--muted);font-size:14px;margin-bottom:7px}
.article-toc a:hover{color:var(--brand2)}
.sidebar{position:sticky;top:84px;align-self:start}
.side-widget{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:20px}
.side-widget h4{font-size:15px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--brand);display:inline-block}
.side-widget ul li{margin-bottom:11px}
.side-widget ul li a{color:var(--muted);font-size:14px;line-height:1.5}
.side-widget ul li a:hover{color:var(--brand2)}
.side-widget .hot-item{display:flex;gap:10px;align-items:flex-start}
.side-widget .hot-item .n{color:var(--brand);font-weight:800;font-size:18px;line-height:1.2}
.prevnext{display:flex;justify-content:space-between;gap:16px;margin:32px 0}
.prevnext a{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;color:var(--ink);font-size:14px}
.prevnext a:hover{border-color:var(--brand);color:var(--brand2)}
.prevnext small{color:var(--muted);display:block;font-size:12px;margin-bottom:4px}
.backlist{display:inline-block;margin-top:8px}
/* 404 */
.err404{text-align:center;padding:100px 0}
.err404 h1{font-size:90px;font-weight:800;color:var(--brand);line-height:1}
.err404 p{color:var(--muted);font-size:18px;margin:20px 0 30px}
/* sitemap */
.sitemap ul{margin-left:20px}
.sitemap li{margin-bottom:8px}
.sitemap a{color:var(--muted)}
.sitemap h3{margin:20px 0 10px;color:var(--ink)}
@media(max-width:960px){.hero-grid,.article,.footer-grid{grid-template-columns:1fr}.feat-grid,.scene-grid,.trust-grid,.dl-grid,.news-list,.rev-grid{grid-template-columns:repeat(2,1fr)}.nav-links{display:none}.hero h1{font-size:30px}.article{display:block}}
@media(max-width:560px){.feat-grid,.scene-grid,.trust-grid,.dl-grid,.news-list,.rev-grid{grid-template-columns:1fr}.dl-grid{grid-template-columns:repeat(2,1fr)}}