:root{--page-base:#0c131c}html,body{background:var(--page-base)}main,.hero,.legacy-how,.features-section,.apps-section,.locations-section,.device-network{background-color:transparent}.legacy-how{background:transparent;border:0}.hero{background:radial-gradient(ellipse at 75% 15%,#1f344329,transparent 65%)}.device-network{background:radial-gradient(ellipse at 50% 60%,#18324724,transparent 65%)}.accounting-section{background:linear-gradient(125deg,#19283bc2,#13202e9c)}
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:26px;padding-bottom:32px;border-top:0}.trust-strip .trust-card{position:relative;display:flex;align-items:center;gap:15px;padding:22px 18px;min-width:0;border:1px solid #8fb5f51c;border-radius:15px;background:linear-gradient(135deg,#21324760,#17212d40);transition:transform .3s,border-color .3s}.trust-card>.icon{width:24px;height:24px;color:#a1c4f4;flex-shrink:0}.trust-card div{display:block}.trust-card strong{font-size:13px;color:#edf3fa}.trust-card p{font-size:10px;line-height:1.7;color:#91a6be;margin:6px 0 0}.trust-decoration{margin-left:auto;color:#8fb5f550;font-size:13px}.trust-card:hover{transform:translateY(-4px);border-color:#8fb5f54a}
.section-seam{position:relative;width:min(1180px,calc(100% - 64px));height:48px;margin:0 auto;overflow:hidden;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:16px}.section-seam::before,.section-seam::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#8fb5f544)}.section-seam::after{transform:rotate(180deg)}.section-seam span{width:7px;height:7px;border:1px solid #8fb5f580;transform:rotate(45deg);box-shadow:0 0 25px #8fb5f544}.section-seam i{position:absolute;top:50%;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,#b7d5ff,transparent) no-repeat -80px 0 / 80px 100%;mask-image:linear-gradient(90deg,#000 calc(50% - 20px),transparent calc(50% - 20px) calc(50% + 20px),#000 calc(50% + 20px));animation:seamSignal 9s linear infinite;opacity:.6}.section-seam::selection{background:transparent}@keyframes seamSignal{to{background-position:calc(100% + 80px) 0}}
.network-connect{display:block;width:fit-content;margin:0 auto 25px;font-size:12px;color:#abc9f5}.network-connect:hover{color:#fff}.device-network .ill-node{cursor:pointer}
.billing{margin-top:40px;overflow:visible}.billing button{position:relative}.billing button[data-discount]::before{content:attr(data-discount);position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;padding:4px 9px;border-radius:6px;background:#243c55;border:1px solid #8fb5f53b;color:#c6dcff;white-space:nowrap}.billing button[data-discount].selected::before{background:#a6c7fb;color:#14233a;box-shadow:0 0 20px #8fb5f526}
.traffic-calculator{position:relative;overflow:hidden;background:linear-gradient(145deg,#132131,#101923)}.calc-results>div{position:relative;padding-bottom:32px}.traffic-track{position:absolute;bottom:8px;left:0;right:0;height:8px;overflow:hidden;border-radius:6px;background:#32445c55}.traffic-track i{display:block;width:var(--traffic-fill,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#547daa,#a9cfff);transition:width .35s cubic-bezier(.2,.8,.2,1);position:relative}.traffic-track i::after{content:'';position:absolute;inset:0;width:35px;background:linear-gradient(90deg,transparent,#fff8,transparent);animation:trafficSignal 2s linear infinite}.traffic-track.whitelist i{background:linear-gradient(90deg,#725aad,#c0abf3)}.calc-results>div:nth-child(2) strong{color:#c0abf3}.traffic-calculator input{accent-color:#a5c8f5}.traffic-calculator.is-adjusting{box-shadow:0 0 40px #8fb5f51c}.traffic-calculator .calc-results strong{font-variant-numeric:tabular-nums}@keyframes trafficSignal{from{left:-35px}to{left:100%}}
.legacy-how{--accent:#22c55e;--accent-hi:#4ade80}.legacy-how .about-flow{margin-top:10px}.legacy-how #aboutFlow.animation{min-height:240px;--about-safe:#22c55e}.legacy-how #aboutResult{opacity:1;filter:none;transform:none;background:#1b2938;border-color:#36475b;pointer-events:auto;transition:background .8s,border-color .8s}.legacy-how #aboutResult .item{opacity:1;transform:none;animation:none;position:relative;transition:filter .6s,opacity .6s,border-color .6s}.legacy-how #aboutResult .item.is-locked{filter:grayscale(.9);opacity:.5;border-color:#ff5a7238}.legacy-how #aboutResult .item.is-locked::after{content:'×';position:absolute;right:-5px;top:-6px;width:18px;height:18px;display:grid;place-items:center;background:#612d3a;border:1px solid #ff5a7270;border-radius:50%;color:#ffd6dd;font-size:13px}.legacy-how #aboutResult .result-check{background:#46556b;color:#b8c5d6}.legacy-how[data-route-state="online"] #aboutResult{background:linear-gradient(120deg,#17372d77,#1b2938);border-color:#22c55e50}.legacy-how[data-route-state="online"] .result-check{background:#22c55e;color:#092b19}.legacy-how #aboutFlow .flow-lines{inset:0;width:100%;height:100%}.legacy-how #aboutFlow .icon-user{color:#91b9f4!important}.legacy-how #aboutFlow .icon-browser{color:#4ade80!important}.legacy-how[data-route-state="direct"] #aboutFlow .icon-vpn{opacity:.4;box-shadow:none}.legacy-how #aboutFlow .icon-vpn{transition:opacity .7s,box-shadow .7s,color .7s}.route-status{font:500 10px var(--mono);color:#94a9c3;text-align:center;min-height:20px;margin-top:-10px;margin-bottom:12px}.route-path{fill:none;stroke-width:3;stroke-linecap:round;transition:opacity .6s}.route-direct{stroke:#8fb5f5;opacity:.65;stroke-dasharray:6 9}.route-orb{fill:#b6d2ff;filter:drop-shadow(0 0 6px #8fb5f5)}
@media(max-width:720px){.trust-strip{grid-template-columns:1fr;gap:9px}.trust-strip .trust-card{padding:15px}.trust-card p{font-size:11px}.section-seam{width:calc(100% - 36px);height:28px}.billing button[data-discount]::before{font-size:9px;top:-21px}.legacy-how #aboutFlow.animation{min-height:210px}.legacy-how .flow-caption{font-size:7px;letter-spacing:0}.legacy-how .result-head{font-size:15px}}
@media(prefers-reduced-motion:reduce){.section-seam i,.traffic-track i::after{animation:none}.traffic-track i{transition:none}}
.legacy-how .route-status{display:block;border:0;padding:0;margin:0;min-height:16px;color:#91a5bd}.hero{border-bottom:0}.hero::before{mask-image:linear-gradient(#000 65%,transparent)}
.map-view-switch{position:absolute;left:15px;top:14px;display:flex;gap:3px;padding:4px;border:1px solid #8fb5f527;border-radius:10px;background:#101c2bea;z-index:3}.map-view-switch button{font:500 10px Manrope,sans-serif;color:#97abc5;padding:7px 11px;border:0;border-radius:6px;background:none;cursor:pointer}.map-view-switch button[aria-pressed=true]{background:#2a415c;color:#d4e5ff}.legacy-block .netmap-panel{background:radial-gradient(ellipse at 50% 30%,#203d5a70,transparent 70%),#111d2a;overflow:hidden}.legacy-block .srv-card:focus-visible{outline:2px solid #9bc1f4;outline-offset:3px}.desktop-nav a{position:relative}.desktop-nav a.is-current{color:#b6d4ff}.desktop-nav a.is-current::after{content:'';position:absolute;bottom:-12px;left:30%;right:30%;height:2px;border-radius:3px;background:#9bc1f4;box-shadow:0 0 12px #9bc1f466}
.section-seam:not(.motion-visible) i,.traffic-calculator:not(.motion-visible) .traffic-track i::after{animation-play-state:paused}
@media(max-width:720px){.map-view-switch{left:10px;top:12px}.map-view-switch button{padding:6px 8px;font-size:9px}.legacy-block .netmap-refresh{right:10px;top:12px}}
@media(max-width:720px){.device-network .illustration__svg{width:100%;margin-left:0;min-height:210px}.device-network .ill-label{font-size:16px}.network-glass{padding-top:0}.network-connect{font-size:11px}.legacy-how .about__container .sechead{margin-bottom:0}}
.network-mobile{display:none}@media(max-width:720px){.device-network .illustration__svg{display:none}.network-mobile{display:block;padding:22px 16px}.network-mobile-core{display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid #8fb5f53a;border-radius:13px;background:#23385080;margin-bottom:22px;box-shadow:0 0 30px #8fb5f511}.network-mobile-core strong{font-size:14px}.network-mobile-core span{margin-left:auto;color:#a5cbf5;font-size:24px}.network-mobile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;position:relative}.network-mobile-grid:before{content:'';position:absolute;left:50%;height:22px;top:-22px;width:1px;background:linear-gradient(#8fb5f580,#8fb5f51a)}.network-mobile-grid button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;min-height:83px;border:1px solid #8fb5f51f;border-radius:11px;background:#1c2b3c;color:#afc5df;transition:background .3s,border-color .3s;cursor:pointer}.network-mobile-grid button[aria-pressed=true]{background:#294664;border-color:#a5cbf5}.network-mobile-grid svg{width:25px;height:25px}.network-mobile-grid button span{font-size:10px}.network-connect{margin-top:4px}}
.legacy-how[data-route-state=online] #aboutResult .result-check{background:#22c55e;color:#092b19}
/* Semantic states: success green, blocked red, actions blue. */
:root{--success:#4ade80;--success-soft:#4ade801a;--warning:#fbbf24;--error:#fb7185}
.mini-check,.green,.plan-card li>.icon{color:var(--success)}.connected-mark svg{stroke:var(--success)}.floating-note>.icon{color:var(--success)}.is-connected .connection-title{color:#9aefbc}.is-connected .power-button{border-color:var(--success)}.is-connected .connection-orbit{border-color:#4ade8070}
.legacy-block .srv-card .pingval.good,.legacy-block .tip-ping:not(.mid):not(.bad):not(.wait){color:var(--success)}.legacy-block .pingbar.good i{background:#22c55e}.legacy-block .tip-ping:not(.mid):not(.bad):not(.wait){background:#22c55e18}.legacy-block .srv-card .pingval.down{color:var(--error)}
.legacy-how #aboutFlow.animation .icon.is-accent-green{color:var(--success)}.legacy-how[data-route-state=online] #aboutResult .result-head{color:#d9fbe5}.legacy-how #aboutResult .item:not(.is-locked){border-color:#4ade8030}.legacy-how #aboutResult .item.is-locked{border-color:#fb71854a}
.plan-payment>span{color:#8de9b0}.network-status-dot,.live-dot{background:#4ade80}.network-mobile-grid button[aria-pressed=true]{border-color:#4ade8070;box-shadow:inset 0 0 22px #4ade8009}
.calc-results>div{padding-bottom:0}.traffic-packets{display:flex;gap:7px;margin-top:8px;min-height:46px;align-items:center}.traffic-packets i{display:grid;place-items:center;width:37px;height:37px;background:#8fb5f510;border:1px solid #8fb5f540;border-radius:10px;color:#aecfff;transform-origin:center}.traffic-packets svg{width:23px;height:23px}.traffic-packets.whitelist i{background:#b99aff10;border-color:#b99aff45;color:#c6aff8}.packets-play .traffic-packets i{animation:trafficMultiply .65s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--packet-index)*.15s)}.calc-results small{top:18px;bottom:auto;padding:2px 6px;border:1px solid #8fb5f520;border-radius:4px}.traffic-calculator.is-adjusting{box-shadow:none}@keyframes trafficMultiply{0%{opacity:0;transform:translateX(-20px) scale(.6) rotate(-12deg)}65%{opacity:1;transform:translateX(0) scale(1.09)}100%{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.packets-play .traffic-packets i{animation:none}}


/* Compact trial banner and accent colors below the hero */
.hero .trust-card:nth-child(1) { --trust-accent: #91dfc4; }
.hero .trust-card:nth-child(2) { --trust-accent: #c9b6ff; }
.hero .trust-card:nth-child(3) { --trust-accent: #f4ce92; }
.hero .trust-strip .trust-card > .icon {
  color: var(--trust-accent);
  background: color-mix(in srgb, var(--trust-accent) 9%, #1b2b40);
  border-color: color-mix(in srgb, var(--trust-accent) 26%, transparent);
}
.trial-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(760px, calc(100% - 40px));
  margin: clamp(16px, 2vw, 24px) auto 0;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid #a994e460;
  border-radius: 16px;
  background: linear-gradient(105deg, #292a46, #182639 78%);
}
.trial-banner-icon { flex: 0 0 21px; width: 21px; height: 21px; color: #d1baff; }
.trial-banner-copy { flex: 1 1 auto; min-width: 0; }
.trial-banner-copy strong { color: #f2eaff; font-size: 15px; }
.trial-banner-copy p { margin: 2px 0 0; color: #b8c7dc; font-size: 13px; }
.trial-banner a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 10px;
  border-radius: 8px;
  color: #dfceff;
  font-size: 13px;
  font-weight: 750;
}
.trial-banner a:is(:hover, :focus-visible) { background: #c6a8ff22; }
.trial-banner a .icon { width: 15px; height: 15px; }
@media (max-width: 600px) {
  .trial-banner { display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: 7px 12px; }
  .trial-banner a { grid-column: 2; justify-self: start; padding-inline: 0; }
}

/* Route diagram and feature accents */
.legacy-how #aboutFlow.animation {
  --route-idle: #8eb6ee;
  --route-live: #4ade80;
  --route-warning: #ffb454;
  --route-node-size: clamp(36px, 6vw, 64px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 60px clamp(28px, 5vw, 64px) 54px;
  min-height: 172px;
  background: radial-gradient(circle, #8eb6ee22 1px, transparent 1.5px) center / 12px 12px;
  border-radius: 20px;
}
.legacy-how #aboutFlow.animation .icon {
  width: var(--route-node-size);
  height: var(--route-node-size);
  background: var(--page-base);
  box-shadow: none;
}
.legacy-how #aboutFlow.animation .icon svg { width: 72%; height: 72%; }
.legacy-how #aboutFlow.animation .icon-user { justify-self: start; }
.legacy-how #aboutFlow.animation .icon-browser { justify-self: end; }
.legacy-how #aboutFlow.animation .flow-caption { color: #b8cbe2; letter-spacing: 0; text-transform: none; }
.route-tunnel { fill: none; stroke: var(--route-idle); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .58; }
.route-tunnel-active { stroke: var(--route-live); opacity: 1; }
.route-leg { position: absolute; z-index: 2; transform: translate(-50%, -50%); color: var(--route-idle); pointer-events: none; }
.route-leg svg { display: block; width: 32px; height: 32px; padding: 6px; box-sizing: border-box; border-radius: 50%; background: var(--page-base); }
.route-leg span { position: absolute; top: calc(50% + var(--route-node-size) / 2 + 12px); left: 50%; transform: translateX(-50%); color: #b8cbe2; font-size: 12px; white-space: nowrap; }
.legacy-how .route-leg.is-lit, .legacy-how[data-route-state=online] .route-leg { color: var(--route-live); }
@media (max-width: 720px) {
  .route-leg span { display: none; }
  .route-leg svg { width: 24px; height: 24px; padding: 4px; }
}
.legacy-block .why__tab[data-feature=encryption] { --feature-ink: #91dfc4; }
.legacy-block .why__tab[data-feature=speed] { --feature-ink: #f4ce92; }
.legacy-block .why__tab[data-feature=devices] { --feature-ink: #c9b6ff; }
.legacy-block .why__tab[data-feature=logs] { --feature-ink: #a6c8ff; }
.legacy-block .why__tabs .why__tab[data-feature] .icon {
  color: var(--feature-ink);
  background: color-mix(in srgb, var(--feature-ink) 9%, transparent);
  border-color: color-mix(in srgb, var(--feature-ink) 25%, transparent);
}
.legacy-block .why__tabs .why__tab.is-active[data-feature] .icon {
  background: color-mix(in srgb, var(--feature-ink) 16%, transparent);
  border-color: color-mix(in srgb, var(--feature-ink) 45%, transparent);
}
.legacy-block .speedometer .speedometer__fill { filter: none; }
.legacy-block .speedometer__arrow { color: #94b9f4; }

.legacy-how #aboutFlow.animation .icon:is(.icon-user,.icon-vpn,.icon-browser) {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.legacy-how #aboutFlow.animation .icon-glow { display: none; }
.legacy-how #aboutFlow.animation .icon > :is(svg,img) {
  filter: drop-shadow(0 0 10px #8fb5f550);
}
.legacy-how #aboutFlow.animation .route-logo {
  width: 70%;
  height: 80%;
  object-fit: contain;
}
.legacy-how #aboutFlow.animation .icon-browser.route-rejected::after {
  content: '!';
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #51391f;
  color: var(--route-warning);
  box-shadow: 0 0 12px #ffb45444;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
}
.route-leg svg { transition: filter .22s ease; }
.route-leg.is-lit svg, [data-route-state=online] .route-leg svg { filter: drop-shadow(0 0 7px var(--route-live)); }

.legacy-how #aboutFlow.animation .icon:hover { transform: none; }
.legacy-how #aboutFlow.animation .route-direct {
  stroke: var(--route-warning);
  stroke-width: 1.6;
  opacity: .8;
}
.legacy-how:not([data-route-state=direct]) #aboutFlow .route-direct { opacity: 0; }
.legacy-how .route-orb-direct { fill: var(--route-warning); filter: drop-shadow(0 0 6px var(--route-warning)); }
.legacy-how .route-orb-vpn { fill: var(--route-live); filter: drop-shadow(0 0 6px var(--route-live)); }
.legacy-how .route-tunnel, .legacy-how .route-leg { transition: opacity .35s ease; }
.legacy-how[data-route-state=direct] :is(.route-tunnel,.route-leg) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .legacy-how[data-route-state=direct] .route-direct { animation: direct-dashes .6s linear infinite; }
  .legacy-how:not([data-route-state=direct]) .route-tunnel { animation: tunnel-dashes .45s linear infinite; }
}
@keyframes direct-dashes { to { stroke-dashoffset: -15; } }
@keyframes tunnel-dashes { to { stroke-dashoffset: -8; } }

.hero .trust-strip { align-items: stretch; grid-auto-rows: 1fr; }
.hero .trust-strip .trust-card:hover { transform: none; }

.legacy-block .speedometer .speedometer__fill { stroke: url(#speed-spectrum); }

.legacy-block .dev-cell:nth-child(1), #apps [data-network-device=windows], #apps [data-mobile-device=windows] { --device-ink: #91c4ff; }
.legacy-block .dev-cell:nth-child(2), #apps [data-network-device=android], #apps [data-mobile-device=android] { --device-ink: #83dfb1; }
.legacy-block .dev-cell:nth-child(3), #apps [data-network-device=ios], #apps [data-mobile-device=ios] { --device-ink: #d1b8ff; }
.legacy-block .dev-cell:nth-child(4), #apps [data-network-device=linux], #apps [data-mobile-device=linux] { --device-ink: #f5cf87; }
#apps [data-network-device=mac], #apps [data-mobile-device=mac] { --device-ink: #9edfe6; }
#apps [data-network-device=tv], #apps [data-mobile-device=tv] { --device-ink: #f3a9bf; }
.legacy-block .devices .dev-cell > .icon {
  color: var(--device-ink);
  background: color-mix(in srgb, var(--device-ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--device-ink) 32%, transparent);
}
#apps :is([data-network-device],[data-mobile-device]) [fill="#94A3B8"] { fill: var(--device-ink); }
#apps :is([data-network-device],[data-mobile-device]) [stroke="#94A3B8"] { stroke: var(--device-ink); }
#apps .ill-node > circle:first-child { stroke: color-mix(in srgb, var(--device-ink) 40%, transparent); }

.legacy-how #how .sechead { margin-bottom: 0; }
.legacy-how #how .about-flow { margin-top: clamp(20px, 3vw, 32px); }
.legacy-how[data-route-state=connecting] #aboutResult .result-check {
  color: #c3d8ff;
  background: #293f68;
  box-shadow: 0 0 0 5px #8fb5f51a;
}
.legacy-how[data-route-state=connecting] #aboutResult .result-check svg { display: none; }
.legacy-how[data-route-state=connecting] #aboutResult .result-check::after {
  content: '';
  width: 17px;
  height: 17px;
  border: 2px solid #b9d1ff50;
  border-top-color: currentColor;
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .legacy-how[data-route-state=connecting] #aboutResult .result-check::after { animation: route-loading .7s linear infinite; }
}
@keyframes route-loading { to { transform: rotate(1turn); } }



@media (max-width: 720px) {
  .legacy-how #aboutFlow.animation {
    --route-node-size: clamp(32px, 8vw, 44px);
    min-height: 128px;
    padding: 34px 25px 44px;
  }
  .legacy-how #aboutFlow.animation .flow-caption {
    width: 84px;
    white-space: normal;
    text-align: center;
    font-size: 10px;
    line-height: 1.25;
  }
}