
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;color:#1d343d;background:#f7fafb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;line-height:1.8;overflow-wrap:break-word}img{max-width:100%;height:auto}table{font-variant-numeric:tabular-nums}a{color:#145773;text-underline-offset:3px}a:hover{color:#0c394a}.wrap{width:min(1100px,calc(100% - 38px));margin:auto}.skip{position:absolute;left:-999px}.skip:focus{left:15px;top:10px;background:white;z-index:3}.header{background:white;border-bottom:1px solid #dfe8eb;position:sticky;top:0;z-index:2}.header-inner{display:flex;justify-content:space-between;align-items:center;gap:25px;min-height:75px}.logo{text-decoration:none;color:#123c50;font-weight:800;font-size:1.3rem;white-space:nowrap}.logo-icon{display:inline-grid;place-items:center;background:#123c50;color:white;width:34px;height:34px;border-radius:10px;margin-right:5px}.header nav{display:flex;flex-wrap:wrap;gap:18px}.header nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px}.header nav a{text-decoration:none;color:#264a59;font-size:.92rem}.mobile-menu{display:none}.hero{margin:38px 0 28px;padding:48px;background:#123c50;color:#fff;border-radius:22px}.hero h1{font-size:clamp(2rem,4vw,3.1rem);margin:.2em 0}.hero p{color:#cbdfe7;max-width:690px}.hero a{color:#fff}.eyebrow{letter-spacing:.07em;color:#7bc7d2;font-weight:700;font-size:.84rem}.button{display:inline-block;padding:10px 18px;background:#167a95;color:white!important;text-decoration:none;border-radius:8px;font-weight:700}.button.secondary{background:#edf6f8;color:#12556f!important}.section{margin:34px 0 55px}.section h2{font-size:1.65rem;line-height:1.35}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{display:block;border:1px solid #dce8ec;border-radius:15px;padding:22px;background:white;text-decoration:none;color:inherit}.card:hover{border-color:#89b7c4}.card h3{margin:0 0 8px;font-size:1.1rem;color:#123c50}.card p{color:#526771;margin:0}.tag{display:inline-block;font-size:.78rem;font-weight:700;background:#ebf4f6;color:#22637a;border-radius:99px;padding:2px 10px;margin-bottom:10px}.article{background:white;border:1px solid #e0e8eb;border-radius:16px;padding:clamp(20px,4vw,44px);margin:24px 0 55px;max-width:850px}.article h1{font-size:clamp(1.8rem,3vw,2.45rem);line-height:1.35}.article h2{margin-top:1.8em;font-size:1.5rem;line-height:1.4}.article h3{margin-top:1.3em}.article p,.article li{color:#314b56}.article ul,.article ol{padding-left:1.5rem}.notice{border-left:4px solid #1a8796;background:#f0f8f9;padding:14px 18px;border-radius:5px}.muted{color:#61757f;font-size:.9rem}.crumb{display:flex;gap:9px;font-size:.84rem;color:#6a7d86;flex-wrap:wrap;margin:18px 0}.crumb a{color:#55727d}.table-caption{text-align:left;caption-side:top;padding:12px 0;color:#526771;font-size:.9rem}.comparison{width:100%;border-collapse:collapse;display:block;overflow-x:auto}.comparison th,.comparison td{padding:12px;border-bottom:1px solid #d7e3e7;text-align:left;min-width:130px}.comparison th{background:#eef5f7}.cta{background:#edf6f8;border-radius:14px;padding:22px;margin:26px 0}.cta p{margin:5px 0 14px}footer{background:#eaf1f4;margin-top:65px;padding:30px 0;color:#49616b}footer a{margin-right:20px}.footer-inner{font-size:.9rem}@media(max-width:760px){.header-inner{position:relative;align-items:center;flex-direction:row;padding:12px 0;gap:12px}.header #primary-navigation{display:none}.mobile-menu{display:block;position:relative}.mobile-menu nav{position:absolute;right:0;top:100%;width:min(280px,85vw);box-shadow:0 12px 26px rgba(18,60,80,.16);z-index:9}.mobile-menu nav a{font-size:.95rem}.hero{padding:26px 23px;margin-top:22px}.cards{grid-template-columns:1fr}.article{padding:23px;margin-top:12px}footer a{display:inline-block;margin-bottom:5px}}
.mobile-menu summary{cursor:pointer;font-weight:700;color:#123c50;padding:7px 12px;border:1px solid #bed3dc;border-radius:8px;list-style-position:inside}.mobile-menu nav{display:grid;gap:3px;padding:8px;background:white;border:1px solid #dce8ec;border-radius:8px;margin-top:4px}.mobile-menu nav a{padding:7px 10px;white-space:normal}.article.wide{max-width:1100px}.table-wrap{overflow-x:auto;max-width:100%}.table-wrap .comparison{display:table;width:100%;min-width:740px}.table-wrap th{min-width:135px} .filters{background:#eef5f7;border:1px solid #d8e8ed;padding:16px;border-radius:12px;display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px}.filters label{font-weight:650}.filters select,.filters button{font:inherit;border:1px solid #97bbc8;border-radius:8px;padding:7px;background:white;color:#123c50}.filters button{cursor:pointer}.filters p{width:100%;margin:0}.comparison [hidden]{display:none!important} a:focus-visible{outline:3px solid #148aa2;outline-offset:3px} @media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important}}

/* Mobile product cards replace the wide comparison table on narrow screens. */
.product-cards{display:none}
.product-card{background:#fff;border:1px solid #dce8ec;border-radius:13px;padding:17px}
.product-card h3{margin:0 0 8px;font-size:1.12rem}
.product-card dl{margin:0}.product-card dl>div{padding:8px 0;border-bottom:1px solid #e6edef}
.product-card dt{font-weight:700;color:#34515f;font-size:.85rem}.product-card dd{margin:2px 0 0;color:#314b56}
.product-card-link{display:inline-block;margin-top:12px;font-weight:700}
.product-card[hidden]{display:none!important}
@media(max-width:760px){.product-cards{display:grid;grid-template-columns:1fr;gap:13px}.desktop-comparison{display:none}.filters{align-items:stretch}.filters select{max-width:100%}}

.recommendation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 24px}.recommendation{border:1px solid #dce8ec;border-radius:13px;padding:20px;background:#f8fbfc}.recommendation h3{font-size:1.12rem;margin:3px 0 8px;color:#123c50}.recommendation p{margin:8px 0}.recommendation a{font-weight:650}@media(max-width:760px){.recommendation-grid{grid-template-columns:1fr}.recommendation{padding:17px}}

 .plan-calculator{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#eef7f8;border:1px solid #c9e1e7;padding:18px;border-radius:12px}.plan-calculator label{font-weight:700}.plan-calculator select{font:inherit;background:white;border:1px solid #83acb9;border-radius:7px;padding:8px}.plan-calculator p{flex-basis:100%;margin:0}.plan-calculator #plan-output{font-size:1.18rem;color:#143e4b;font-weight:750}@media(max-width:760px){.plan-calculator{align-items:stretch;flex-direction:column}} 

.client-shots{margin:1.1rem 0 1.6rem}.shot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}.shot{margin:0;min-width:0;overflow:hidden;border:1px solid var(--border,#d9dfe9);border-radius:14px;background:var(--card,#fff)}.shot a{display:block;background:#191b3d;text-align:center}.shot img{display:block;max-width:100%;height:auto;margin:auto;max-height:480px;object-fit:contain}.shot-desktop img{width:100%;max-height:none}.shot figcaption{padding:.75rem .9rem;font-size:.88rem;line-height:1.55}.shot figcaption strong{display:block;margin-bottom:.25rem}.shot figcaption span{display:block;color:var(--muted,#64748b)}.shot-note{font-size:.86rem;color:var(--muted,#64748b);line-height:1.7}@media(max-width:640px){.shot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.shot figcaption{padding:.55rem;font-size:.77rem}.shot img{max-height:350px}.shot-desktop{grid-column:1/-1}}

.compare-jumps{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0;margin:12px 0 24px}.compare-jumps a{display:inline-block;padding:7px 12px;border:1px solid #bed6df;background:#f0f7f9;border-radius:7px;font-size:.92rem;text-decoration:none}.article h2[id]{scroll-margin-top:100px}.budget-tool input[aria-invalid="true"]{outline:2px solid #b42318;outline-offset:2px}
.article-jump{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.1rem 0 1.4rem}.article-jump a{display:inline-flex;align-items:center;border:1px solid var(--border,#dce2ed);border-radius:999px;padding:.45rem .8rem;text-decoration:none;font-size:.91rem}.article-jump a:hover,.article-jump a:focus-visible{background:var(--card,#f4f6fc);outline-offset:3px}

/* VPN Observer — premium midnight design system */
:root{color-scheme:dark;--night:#080f24;--panel:#101c37;--card:#111e3b;--border:rgba(120,179,245,.20);--muted:#a0b6d3;--cyan:#56e7f9;--blue:#5c91ff;--purple:#a275ff;--text:#eef5ff}
html{scroll-behavior:smooth;background:var(--night)}
body{background:radial-gradient(ellipse 75% 530px at 90% 2%,rgba(58,65,165,.23),transparent 75%),radial-gradient(ellipse 55% 600px at 0% 35%,rgba(0,138,205,.10),transparent 70%),#080f24;color:var(--text)}
a{color:#84e9ff}a:hover{color:#bff7ff}
.wrap{width:min(1180px,calc(100% - 42px))}
.header{background:rgba(8,15,36,.89);border-bottom:1px solid rgba(104,154,238,.17);backdrop-filter:blur(20px);box-shadow:0 6px 35px rgba(0,0,0,.14)}
.header-inner{min-height:82px}.logo{display:inline-flex;align-items:center;flex-shrink:0}.logo img{display:block;width:215px;height:auto;max-height:70px;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 9px rgba(44,197,255,.18))}
.header nav a{color:#cfddf5;font-size:.94rem;font-weight:600}.header nav a:hover{color:var(--cyan)}.header nav a[aria-current="page"]{color:#67eaff;text-decoration:none}
.hero{position:relative;overflow:hidden;isolation:isolate;margin:42px 0 40px;padding:clamp(32px,6vw,72px);background:linear-gradient(125deg,rgba(25,47,103,.98),rgba(13,25,62,.97) 58%,rgba(42,28,101,.94));border:1px solid rgba(111,171,255,.25);border-radius:28px;box-shadow:0 24px 100px rgba(0,0,0,.23),inset 0 1px 0 rgba(200,232,255,.12)}
.hero:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 82% 45%,rgba(62,215,242,.20),transparent 29%),repeating-linear-gradient(90deg,transparent,transparent 62px,rgba(112,184,255,.035) 63px),repeating-linear-gradient(0deg,transparent,transparent 62px,rgba(112,184,255,.035) 63px);pointer-events:none}
.hero:after{content:"";position:absolute;z-index:-1;width:340px;height:340px;right:-90px;top:-130px;border-radius:50%;border:1px solid rgba(93,224,252,.24);box-shadow:0 0 0 44px rgba(66,181,247,.035),0 0 0 95px rgba(66,181,247,.027);pointer-events:none}
.hero h1{font-weight:850;letter-spacing:-.035em;line-height:1.23;max-width:750px;font-size:clamp(2.05rem,4.5vw,3.6rem);background:linear-gradient(120deg,#fff 34%,#afe7ff 78%,#bdadff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.08rem;color:#c4d5ef;max-width:720px;line-height:1.95}.eyebrow{color:#58e5ff;letter-spacing:.12em}
.button,.button.secondary,.button-secondary{display:inline-block;background:linear-gradient(110deg,#168def,#4d6df6 65%,#7666f5);border:1px solid rgba(145,209,255,.34);border-radius:12px;color:white!important;font-weight:750;text-decoration:none;padding:12px 23px;box-shadow:0 9px 28px rgba(30,97,255,.22);transition:transform .2s,box-shadow .2s}
.button:hover,.button.secondary:hover,.button-secondary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(48,130,255,.33)}
.button-secondary,.button.secondary{background:rgba(129,169,247,.11);border:1px solid rgba(142,199,255,.33)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.section h2{font-size:clamp(1.5rem,3vw,2rem);color:#f4f8ff;letter-spacing:-.02em}.section{margin:38px 0 60px}
.cards{gap:18px}.card,.recommendation,.product-card{background:linear-gradient(150deg,rgba(24,41,80,.96),rgba(12,25,53,.98));border:1px solid rgba(125,180,248,.21);color:#eaf2ff;border-radius:20px;padding:25px;box-shadow:0 11px 34px rgba(0,0,0,.12);transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover,.recommendation:hover,.product-card:hover{transform:translateY(-3px);border-color:rgba(74,220,255,.54);box-shadow:0 15px 38px rgba(3,8,22,.36)}
.card h3,.recommendation h3,.product-card h3{color:#f2f8ff}.card p,.recommendation p,.product-card dd,.product-card dt{color:#b6c8e6}.tag{background:rgba(46,215,239,.11);color:#62e5f6;border:1px solid rgba(69,216,245,.20)}
.article{background:linear-gradient(150deg,rgba(18,32,65,.97),rgba(11,24,49,.99));border:1px solid rgba(107,151,231,.20);border-radius:22px;box-shadow:0 20px 80px rgba(0,0,0,.16);color:#e9f1ff}
.article h1,.article h2,.article h3{color:#f3f7ff}.article p,.article li{color:#c5d2e9}.article h2{border-bottom:1px solid rgba(140,185,255,.13);padding-bottom:.3em}
.article a{color:#83e6ff}.muted,.crumb,.table-caption,.shot figcaption span,.shot-note{color:#a5bbd8}.crumb a{color:#90d7f5}
.notice,.cta,.filters,.plan-calculator,.recommendation{background:rgba(35,65,111,.34);border-color:rgba(97,172,234,.23);color:#d1e0f7}.cta p{color:#c7d7ee}
.comparison th{background:#1c3154;color:#f5f9ff}.comparison td,.comparison th{border-color:rgba(145,177,237,.18);color:#d6e5f8}.comparison tr:hover td{background:rgba(48,99,164,.10)}
.filters select,.filters button,.plan-calculator select,.budget-tool input{background:#152849!important;color:#edf7ff!important;border:1px solid #4a6b9b!important}
.mobile-menu summary{color:#e8f3ff;border-color:#355888;background:rgba(85,130,209,.12)}.mobile-menu nav{background:#132345;border:1px solid #33517a;box-shadow:0 18px 45px rgba(0,0,0,.42)}
footer{background:#091329;border-top:1px solid rgba(109,159,232,.18);color:#99b2d2}footer a{color:#9cdaf5}
.product-card dl>div{border-color:rgba(150,184,240,.14)}.shot{background:#122044;border-color:rgba(128,182,246,.24)}.shot a{background:#101735}.shot figcaption{color:#e8f2ff}
.article-jump a,.compare-jumps a{background:rgba(42,77,130,.30);color:#a9eaff;border:1px solid rgba(96,183,246,.32)}.article-jump a:hover,.compare-jumps a:hover{background:rgba(60,134,202,.23)}
.skip:focus{background:#132d51;color:white;z-index:20}
@media(max-width:760px){.logo img{width:158px;max-height:57px}.header-inner{min-height:70px}.hero{margin-top:23px;padding:34px 25px;border-radius:22px}.cards{grid-template-columns:1fr}.card{padding:20px}.article{padding:21px}.section{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){.button,.card,.recommendation,.product-card{transition:none}}
