:root {
  color-scheme: dark;
  font: 16px/1.5 "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #09101d;
  --surface: #101a2b;
  --line: #24344a;
  --text: #f3f7ff;
  --muted: #a8b8cf;
  --accent: #68efcf;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(ellipse 42rem 26rem at 50% 0%, #13233a, transparent), var(--bg);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
[data-mode="demo"] [data-live-only],
[data-mode="live"] [data-demo-only],
[data-mode="live"]:not([data-subscription-ready]) .subscription,
[data-mode="live"]:not([data-subscription-ready]) .traffic { display: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.shell {
  max-width: 560px;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding-block: calc(20px + max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)))
    calc(20px + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)));
  padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
}

.masthead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: .06em; }
.brand-vpn { color: var(--muted); font-size: 11px; font-weight: 750; }
.preview-badge { border: 1px solid #36506c; border-radius: 100px; padding: 4px 10px; color: #d4e6ff; font-size: 12px; font-weight: 700; }
.intro { margin-block: 25px 21px; }
.kicker { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 5px 0 4px; font-size: clamp(32px, 9vw, 44px); line-height: 1.11; letter-spacing: -.052em; }
.intro > p:last-child { color: var(--muted); font-size: 14px; }

.subscription {
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 162px;
  overflow: hidden;
  border: 1px solid #335476;
  border-radius: 23px;
  padding: 20px;
  background:
    radial-gradient(ellipse at 94% 40%, #123b59, transparent 65%),
    linear-gradient(112deg, #11243c, #0b1a2c 71%);
}
.subscription::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(#96caff13 1px, transparent 1px), linear-gradient(90deg, #96caff13 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent 38%, #000);
  content: "";
}
.subscription-copy { z-index: 1; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #3c776f;
  border-radius: 100px;
  padding: 4px 10px;
  color: #a7ffe9;
  background: #143d3f;
  font-size: 12px;
  font-weight: 750;
}
.status-pill > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.subscription h2 { max-width: 230px; margin-block: 6px 1px; font-size: clamp(24px, 7vw, 34px); line-height: 1.13; letter-spacing: -.04em; }
.subscription p { color: #cfddf1; font-size: 13px; }
.shield-art { position: absolute; right: 8px; top: 50%; width: min(39%, 156px); height: auto; transform: translateY(-50%); }
.subscription[data-state]:not([data-state="active"], [data-state="trial"]) .shield-art { opacity: .35; }
.subscription[data-state]:not([data-state="active"], [data-state="trial"]) .status-pill { border-color: #465976; color: #c6d7ee; background: #25354d; }

.panel { border: 1px solid var(--line); border-radius: 19px; background: var(--surface); }
.live-notice { padding: 16px 17px; color: #cfddf1; font-size: 14px; }
.live-notice button { min-height: 44px; margin-top: 8px; border: 1px solid #3c5e79; border-radius: 12px; padding-inline: 12px; color: var(--text); background: #1a3047; cursor: pointer; }
.traffic { margin-top: 12px; padding: 14px 17px 13px; }
.traffic h2 { font-size: 13px; color: #c9d8ef; font-weight: 650; }
.traffic-value { margin: 1px 0 7px; font-size: 14px; color: var(--muted); }
.traffic-value strong { font-size: 29px; font-weight: 750; line-height: 1.2; letter-spacing: -.03em; color: var(--text); }
progress { display: block; width: 100%; height: 7px; appearance: none; border: 0; border-radius: 100px; color: var(--accent); background: #28364e; }
progress::-webkit-progress-bar { border-radius: 100px; background: #28364e; }
progress::-webkit-progress-value { border-radius: 100px; background: linear-gradient(90deg, #56adff, var(--accent)); }
progress::-moz-progress-bar { border-radius: 100px; background: linear-gradient(90deg, #56adff, var(--accent)); }
.traffic-caption { margin-top: 7px; color: var(--muted); font-size: 12px; }
.traffic-caption strong { color: #c9d8ef; font-weight: 650; }

.actions { margin-top: 21px; }
.actions h2 { margin-bottom: 8px; font-size: 15px; font-weight: 700; }
.action {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 13px;
  border-radius: 18px;
  cursor: pointer;
}
.action:hover, .action:focus-visible { background: #16263d; }
.action-list > a { border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; }
.action-list summary { list-style: none; }
.action-list summary::-webkit-details-marker { display: none; }
.action-icon { display: grid; place-items: center; flex: 0 0 35px; height: 35px; border: 1px solid #2e4c67; border-radius: 11px; background: #172b44; color: #9ed4ff; }
.action-icon svg, .action-end { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.action-end { flex: 0 0 18px; margin-left: auto; color: var(--muted); }
details[open] .chevron { transform: rotate(90deg); }
.action-text { display: grid; }
.action-text strong { font-size: 14px; font-weight: 700; }
.action-text > span { color: var(--muted); font-size: 12px; }
.guide { padding: 0 16px 13px; color: #cfddf1; font-size: 14px; }
.guide ol { margin: 0 0 5px; padding-left: 23px; }
.guide li + li { margin-top: 3px; }
.guide-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.demo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; padding-top: 11px; border-top: 1px solid var(--line); }
.demo-label { color: #d6e3f4; font-size: 12px; font-weight: 700; }
.demo-note { color: var(--muted); font-size: 12px; }
.switcher { display: flex; gap: 2px; border-radius: 12px; background: #0d1727; }
.switcher button { min-height: 44px; border: 1px solid transparent; border-radius: 12px; padding-inline: 8px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.switcher button[aria-pressed="true"] { border-color: #3c5e79; color: var(--text); background: #1a3047; }
.switcher button:hover { color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 600px) { .shell { padding-top: 34px; } }