/* ===== 绿茶VPN官网（复刻参考站 SaaS 双栏模板 · 淡紫底 #f8f6fe + 紫 #6d3bff）===== */
:root{
    --bg: #f8f6fe; --surface: #ffffff; --surface-alt: #efeafd;
    --text: #191330; --text-muted: #615a7a; --border: #e6dffb;
    --accent: #6d3bff; --accent-2: #c026d3; --on-accent: #ffffff;
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
    --shadow: 0 1px 3px rgba(15,23,42,.08), 0 6px 16px rgba(15,23,42,.06);
    --border-style: 1px solid var(--border);
    --spacing-base: clamp(16px, 1.9vw, 24px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.68}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(var(--spacing-base)*.75);padding:calc(var(--spacing-base)*.55) calc(var(--spacing-base)*.8);background:color-mix(in srgb,var(--surface) 88%,var(--bg));border-bottom:var(--border-style)}
.brand{display:inline-flex;align-items:center;gap:calc(var(--spacing-base)*.45);min-width:max-content}
.brand img{width:calc(var(--spacing-base)*1.55);height:calc(var(--spacing-base)*1.55);border-radius:var(--r-sm);object-fit:contain;border:var(--border-style);background:var(--surface)}
.brand-name{font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:1rem}
.top-links{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing-base)*.35);font-size:.9rem;color:var(--text-muted)}
.top-links a{padding:calc(var(--spacing-base)*.25) calc(var(--spacing-base)*.45);border-radius:var(--r-sm)}
.top-links a:hover{background:var(--surface-alt);color:var(--text)}
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--spacing-base)*.45)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--spacing-base)*.3);border:var(--border-style);border-radius:var(--r-sm);padding:calc(var(--spacing-base)*.42) calc(var(--spacing-base)*.72);font-weight:700;font-family:"Outfit",system-ui,sans-serif;line-height:1.2}
.button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.button.secondary{background:var(--surface);color:var(--text)}
.button.subtle{background:var(--surface-alt);color:var(--text)}
.button:hover{box-shadow:var(--shadow)}
/* 兼容旧 .btn 类 */
.btn{display:inline-flex;align-items:center;justify-content:center;border:var(--border-style);border-radius:var(--r-sm);padding:calc(var(--spacing-base)*.42) calc(var(--spacing-base)*.72);font-weight:700;font-family:"Outfit",system-ui,sans-serif;line-height:1.2;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:hover{box-shadow:var(--shadow)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}

/* 双栏 shell */
.site-shell{display:grid;grid-template-columns:minmax(calc(var(--spacing-base)*8.5),calc(var(--spacing-base)*10.5)) minmax(0,1fr)}
.sidebar-drawer{position:sticky;top:calc(var(--spacing-base)*3);height:calc(100vh - var(--spacing-base)*3);padding:calc(var(--spacing-base)*.85);border-right:var(--border-style);background:var(--surface);align-self:start;overflow:auto}
.side-title{display:flex;align-items:center;gap:calc(var(--spacing-base)*.35);font-family:"Outfit",system-ui,sans-serif;font-weight:700;margin-bottom:calc(var(--spacing-base)*.75)}
.side-dot{width:calc(var(--spacing-base)*.45);height:calc(var(--spacing-base)*.45);border-radius:var(--r-pill);background:var(--accent)}
.side-group{border-bottom:var(--border-style);padding-bottom:calc(var(--spacing-base)*.65);margin-bottom:calc(var(--spacing-base)*.65)}
.side-group strong{display:block;font-family:"Outfit",system-ui,sans-serif;font-size:.76rem;text-transform:uppercase;color:var(--text-muted);margin-bottom:calc(var(--spacing-base)*.28)}
.side-group a{display:flex;align-items:center;gap:calc(var(--spacing-base)*.35);padding:calc(var(--spacing-base)*.24) 0;color:var(--text-muted);font-size:.9rem}
.side-group a:hover{color:var(--accent)}
.content{min-width:0}

/* section */
.section{position:relative;padding:calc(var(--spacing-base)*2.65) clamp(calc(var(--spacing-base)*.8),4vw,calc(var(--spacing-base)*3));border-bottom:var(--border-style);overflow:hidden}
.section-inner{position:relative;z-index:1;max-width:calc(var(--spacing-base)*48);margin:0 auto}
.section-kicker{display:flex;align-items:center;gap:calc(var(--spacing-base)*.45);font-family:"Outfit",system-ui,sans-serif;font-weight:700;color:var(--accent);font-size:.8rem;text-transform:uppercase}
.section-kicker::before{content:"";width:calc(var(--spacing-base)*1.7);height:1px;background:var(--accent)}
.section h2,.section h1{font-family:"Outfit",system-ui,sans-serif;font-weight:700;line-height:1.05;margin:calc(var(--spacing-base)*.45) 0 calc(var(--spacing-base)*.7)}
h1{font-size:clamp(2.35rem,5vw,4.4rem);max-width:calc(var(--spacing-base)*24)}
h2{font-size:clamp(1.8rem,3vw,2.6rem);max-width:calc(var(--spacing-base)*26)}
h3{font-family:"Outfit",system-ui,sans-serif;font-weight:700;margin:0 0 calc(var(--spacing-base)*.25);line-height:1.2}
p{margin:0;color:var(--text-muted)}
.deck{font-size:1.05rem;max-width:calc(var(--spacing-base)*28)}

/* hero 三栏 */
.hero{padding-top:calc(var(--spacing-base)*2.2)}
.hero-grid{display:grid;grid-template-columns:minmax(calc(var(--spacing-base)*7),.35fr) minmax(0,.9fr) minmax(calc(var(--spacing-base)*14),.95fr);gap:calc(var(--spacing-base)*1.2);align-items:stretch}
.hero-rail,.product-window,.surface-panel,.free-card,.platform-card,.review-item,.term-item{background:var(--surface);border:var(--border-style);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.hero-rail{padding:calc(var(--spacing-base)*.8);display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--spacing-base)*.65)}
.rail-step{padding-bottom:calc(var(--spacing-base)*.55);border-bottom:var(--border-style)}
.rail-step:last-child{border-bottom:0}
.rail-step span{display:inline-flex;width:calc(var(--spacing-base)*1.2);height:calc(var(--spacing-base)*1.2);align-items:center;justify-content:center;border:var(--border-style);border-radius:var(--r-pill);color:var(--accent);font-family:"Outfit",system-ui,sans-serif;font-weight:700;margin-bottom:calc(var(--spacing-base)*.25)}
.rail-step strong{display:block;font-family:"Outfit",system-ui,sans-serif}
.rail-step small{display:block;color:var(--text-muted)}
.hero-copy{padding:calc(var(--spacing-base)*.4) 0}
.badge-row{display:flex;flex-wrap:wrap;gap:calc(var(--spacing-base)*.35);margin:calc(var(--spacing-base)*.8) 0}
.badge{display:inline-flex;align-items:center;gap:calc(var(--spacing-base)*.25);border:var(--border-style);border-radius:var(--r-pill);background:var(--surface);padding:calc(var(--spacing-base)*.16) calc(var(--spacing-base)*.45);font-size:.86rem;color:var(--text-muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:calc(var(--spacing-base)*.45);margin-top:calc(var(--spacing-base)*1)}
.product-window{overflow:hidden;align-self:stretch}
.window-toolbar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing-base)*.45);padding:calc(var(--spacing-base)*.55) calc(var(--spacing-base)*.7);border-bottom:var(--border-style);background:var(--surface-alt)}
.toolbar-pills{display:flex;gap:calc(var(--spacing-base)*.2)}
.toolbar-pills span{width:calc(var(--spacing-base)*.42);height:calc(var(--spacing-base)*.42);border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent) 55%,var(--surface))}
.window-body{padding:calc(var(--spacing-base)*.95);display:grid;gap:calc(var(--spacing-base)*.75)}
.route-map{position:relative;min-height:calc(var(--spacing-base)*7.5);border:var(--border-style);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface-alt) 72%,var(--surface));overflow:hidden}
.route-map svg{position:absolute;inset:calc(var(--spacing-base)*1);width:calc(100% - var(--spacing-base)*2);height:calc(100% - var(--spacing-base)*2);color:var(--accent)}
.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--spacing-base)*.45)}
.status-chip{border:var(--border-style);border-radius:var(--r-md);padding:calc(var(--spacing-base)*.45);background:var(--surface)}
.status-chip strong{display:block;font-family:"Outfit",system-ui,sans-serif}
.status-chip span{display:block;color:var(--text-muted);font-size:.85rem}

/* 两栏区块 */
.two-col{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:calc(var(--spacing-base)*1)}
.free-card{padding:calc(var(--spacing-base)*1);align-self:start}
.price{font-family:"Outfit",system-ui,sans-serif;font-size:3rem;font-weight:800;color:var(--accent);line-height:1;margin:calc(var(--spacing-base)*.55) 0}
.check-list{display:grid;gap:calc(var(--spacing-base)*.45);margin-top:calc(var(--spacing-base)*.8)}
.check-item,.metric-row{display:flex;gap:calc(var(--spacing-base)*.45);align-items:flex-start;padding:calc(var(--spacing-base)*.45);border-bottom:var(--border-style)}
.check-item svg{flex:0 0 auto}

/* FAQ 折叠 */
.faq-list,.accordion-list{display:grid;gap:calc(var(--spacing-base)*.45)}
details{background:var(--surface);border:var(--border-style);border-radius:var(--r-md);padding:calc(var(--spacing-base)*.65)}
summary{cursor:pointer;font-family:"Outfit",system-ui,sans-serif;font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
details p{margin-top:calc(var(--spacing-base)*.35)}

/* 平台卡 */
.platform-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--spacing-base)*.55)}
.platform-card{padding:calc(var(--spacing-base)*.75);display:flex;flex-direction:column;gap:calc(var(--spacing-base)*.55);min-height:calc(var(--spacing-base)*8)}
.platform-card .icon-box,.module-icon{width:calc(var(--spacing-base)*1.8);height:calc(var(--spacing-base)*1.8);border-radius:var(--r-md);display:grid;place-items:center;background:var(--surface-alt);color:var(--accent)}
.platform-card a{margin-top:auto}

/* 模块网格 */
.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--spacing-base)*.7)}
.surface-panel{padding:calc(var(--spacing-base)*.9);border-radius:var(--r-md)}
.surface-panel p + p{margin-top:calc(var(--spacing-base)*.35)}

/* 对比 */
.comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--spacing-base)*.75)}
.comparison .surface-panel{border-radius:var(--r-lg)}

/* 评价 */
.review-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--spacing-base)*.65)}
.review-item{padding:calc(var(--spacing-base)*.8)}
.review-item blockquote{margin:0;color:var(--text);font-family:"Outfit",system-ui,sans-serif;font-size:1.02rem;line-height:1.45}
.review-item cite{display:block;margin-top:calc(var(--spacing-base)*.55);font-style:normal;color:var(--text-muted);font-size:.9rem}

/* 时间线 */
.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--spacing-base)*.6)}
.timeline .surface-panel{position:relative;padding-top:calc(var(--spacing-base)*1.15)}
.timeline .surface-panel::before{content:"";position:absolute;top:calc(var(--spacing-base)*.55);left:calc(var(--spacing-base)*.9);width:calc(var(--spacing-base)*1.5);height:1px;background:var(--accent)}

/* 术语表 */
.glossary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--spacing-base)*.55)}
.term-item{padding:calc(var(--spacing-base)*.65);border-radius:var(--r-md)}

/* 最终 CTA */
.final-cta{background:var(--surface-alt)}
.final-box{display:grid;grid-template-columns:1fr auto;gap:calc(var(--spacing-base)*1);align-items:center;border:var(--border-style);border-radius:var(--r-lg);background:var(--surface);padding:calc(var(--spacing-base)*1.1);box-shadow:var(--shadow)}

/* footer */
.footer{padding:calc(var(--spacing-base)*1.1) clamp(calc(var(--spacing-base)*.8),4vw,calc(var(--spacing-base)*3));background:var(--surface)}
.footer-inner{max-width:calc(var(--spacing-base)*48);margin:0 auto}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing-base)*.75);padding-bottom:calc(var(--spacing-base)*.7);border-bottom:var(--border-style)}
.footer-groups{display:flex;flex-wrap:wrap;gap:calc(var(--spacing-base)*1.1);padding:calc(var(--spacing-base)*.75) 0;border-bottom:var(--border-style)}
.footer-group{min-width:calc(var(--spacing-base)*7.2)}
.footer-group h3{font-size:.95rem}
.footer-group a,.footer-group span{display:block;color:var(--text-muted);font-size:.88rem;padding:calc(var(--spacing-base)*.08) 0}
.footer-group a:hover{color:var(--accent)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:calc(var(--spacing-base)*.7);padding-top:calc(var(--spacing-base)*.65);color:var(--text-muted);font-size:.85rem}

/* 内容页（副页）*/
.inner{padding:calc(var(--spacing-base)*3) clamp(calc(var(--spacing-base)*.8),4vw,calc(var(--spacing-base)*3));max-width:calc(var(--spacing-base)*48);margin:0 auto}
.inner h1{font-size:clamp(2rem,4vw,3rem);margin:calc(var(--spacing-base)*.45) 0 calc(var(--spacing-base)*.7)}
.inner h2{font-size:1.4rem;margin:calc(var(--spacing-base)*1.2) 0 calc(var(--spacing-base)*.5)}
.inner p{margin-bottom:calc(var(--spacing-base)*.5)}
.inner .meta{color:var(--text-muted);font-size:.9rem;margin-bottom:calc(var(--spacing-base)*.8)}
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--spacing-base)*.7)}
.dl-card{background:var(--surface);border:var(--border-style);border-radius:var(--r-lg);padding:calc(var(--spacing-base)*.9);text-align:center;box-shadow:var(--shadow)}
.dl-card img{width:64px;height:64px;margin:0 auto calc(var(--spacing-base)*.5);border-radius:var(--r-md)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--spacing-base)*.7)}
.plan{background:var(--surface);border:var(--border-style);border-radius:var(--r-lg);padding:calc(var(--spacing-base)*1);position:relative;box-shadow:var(--shadow)}
.plan.featured{border:2px solid var(--accent)}
.plan .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;padding:3px 14px;border-radius:var(--r-pill)}
.plan ul{list-style:none;padding:0;margin:calc(var(--spacing-base)*.6) 0 calc(var(--spacing-base)*.8)}
.plan li{padding:calc(var(--spacing-base)*.2) 0;font-size:.92rem}
.plan li::before{content:"✓";color:var(--accent);font-weight:700;margin-right:8px}
.faq-list{max-width:calc(var(--spacing-base)*36)}

/* 响应式 */
@media (max-width:1120px){
    .site-shell{grid-template-columns:1fr}
    .sidebar-drawer{display:none}
    .hero-grid{grid-template-columns:1fr}
    .hero-rail{display:grid;grid-template-columns:repeat(3,1fr)}
    .rail-step{border-bottom:0;border-right:var(--border-style);padding-right:calc(var(--spacing-base)*.55)}
    .rail-step:last-child{border-right:0}
}
@media (max-width:820px){
    .brand-name{display:none}
    .top-links{display:none}
    h1{font-size:clamp(2rem,11vw,3rem)}
    .two-col,.comparison,.final-box{grid-template-columns:1fr}
    .platform-strip,.module-grid,.review-list,.timeline,.glossary-grid,.dl-grid,.pricing-grid{grid-template-columns:1fr}
    .status-grid,.hero-rail{grid-template-columns:1fr}
    .rail-step{border-right:0;border-bottom:var(--border-style);padding-right:0}
    .rail-step:last-child{border-bottom:0}
}

.compare{padding:56px 24px}
.compare h2{margin-bottom:12px;font-size:1.6rem;color:#0f172a;text-align:center}
.compare p{color:#64748b;margin-bottom:20px;text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.cmp-table{width:100%;max-width:900px;margin:0 auto;border-collapse:collapse;font-size:15px;border:2px solid #6d3bff;border-radius:12px;overflow:hidden;background:#fff}
.cmp-table th,.cmp-table td{padding:15px 18px;border:1px solid #e2e8f0;text-align:center}
.cmp-table thead th{background:#6d3bff;color:#ffffff;font-weight:600}
.cmp-table td:first-child{text-align:left;font-weight:600;color:#0f172a;background:#fafafa}
.cmp-table tbody tr td:nth-child(2){color:#6d3bff;font-weight:800;background:#f5f3ff}
.cmp-table tbody tr:hover td{background:#f9fafb}
.faq-card{max-width:900px;margin:0 auto 16px}
.faq-card .container{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:22px 26px}
.faq-card h2{font-size:1.2rem;margin:0 0 8px;color:#0f172a}
.faq-card p{font-size:1rem;line-height:1.8;color:#475569;margin:0}

.footer-legal{text-align:center;padding:16px 0 8px;font-size:14px;background:#fff}
.footer-legal a{color:#8a8a8a;text-decoration:none;margin:0 4px}
.footer-legal a:hover{color:#6d3bff}