:root {
  color-scheme: light;
  --bg:#fff8fb;
  --ink:#16161a;
  --muted:#646b76;
  --line:#f0dce7;
  --panel:#ffffff;
  --accent:#ff4f9a;
  --accent-dark:#d92775;
  --accent-2:#35d39c;
  --gold:#ffd43d;
  --blue:#17a8ff;
  --dark:#1d171d;
  --soft:#fff0f7;
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  background:linear-gradient(180deg, #fff 0, var(--bg) 46%, #fff 100%);
  color:var(--ink);
}

.siteHeader {
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px clamp(22px, 5vw, 72px);
  border-bottom:1px solid rgba(228,231,236,.82);
  background:#fff;
  box-shadow:0 10px 34px rgba(29,23,29,.05);
}

.brand {
  display:flex;
  align-items:center;
  color:var(--ink);
  text-decoration:none;
}

.brand img {
  width:236px;
  height:82px;
  object-fit:contain;
  clip-path:inset(1px);
}

nav {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

nav a,
.navButton {
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  transition:color .18s ease, transform .18s ease;
}

nav a:hover,
.navButton:hover {
  color:var(--accent-dark);
  transform:translateY(-1px);
}

.navButton {
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}

.langButton {
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  color:var(--ink);
  font-weight:850;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(29,23,29,.06);
}

main {
  width:min(1220px, calc(100% - 44px));
  margin:0 auto;
}

.hero {
  min-height:calc(100vh - 68px);
  display:grid;
  grid-template-columns:minmax(0, 620px) minmax(420px, 1fr);
  gap:72px;
  align-items:center;
  padding:56px 0 72px;
}

.heroCopy {
  position:relative;
}

.heroCopy h1,
.section h2,
.pricing h2 {
  margin:0;
  line-height:1;
  letter-spacing:0;
}

.heroCopy h1 {
  max-width:620px;
  font-size:clamp(44px, 5.6vw, 76px);
}

.lead {
  max-width:560px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:21px;
  line-height:1.42;
}

.eyebrow {
  margin:0 0 14px;
  color:var(--accent);
  font-weight:900;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:0;
}

.heroActions,
.priceCard .button {
  margin-top:28px;
}

.button {
  border:0;
  border-radius:8px;
  padding:14px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  text-decoration:none;
  font-family:inherit;
  font-size:16px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.button.primary {
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff;
  box-shadow:0 14px 30px rgba(255,79,154,.26);
}

.button.secondary {
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  margin-left:10px;
}

.button:hover {
  transform:translateY(-2px);
}

.heroPreview {
  width:100%;
  max-width:560px;
  min-height:500px;
  justify-self:end;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:linear-gradient(145deg, #261b25 0%, #160f16 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:34px;
  box-shadow:0 34px 90px rgba(255,79,154,.25), inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}

.heroPreview::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, rgba(255,79,154,.18), transparent 42%, rgba(255,212,61,.10));
  pointer-events:none;
}

.heroPreview > * {
  position:relative;
}

.previewTitle {
  font-size:58px;
  font-weight:950;
  text-shadow:0 5px 12px rgba(0,0,0,.50), 0 0 26px rgba(255,255,255,.18);
}

.previewTimer {
  margin-top:10px;
  font-size:54px;
  font-weight:950;
}

.previewWord {
  margin-top:36px;
  display:flex;
  justify-content:center;
  gap:0;
}

.previewWord span {
  width:64px;
  height:78px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #b9b9b9, #929292);
  border:1px solid rgba(255,255,255,.18);
  font-size:42px;
  font-weight:950;
  box-shadow:0 12px 24px rgba(0,0,0,.24);
}

.previewRule {
  margin-top:26px;
  font-size:26px;
  font-weight:900;
  text-align:center;
}

.section,
.pricing {
  padding:84px 0;
  border-top:1px solid var(--line);
}

.sectionHeading {
  max-width:760px;
}

.section h2,
.pricing h2 {
  font-size:clamp(34px, 5vw, 58px);
}

.sectionHeading p:not(.eyebrow),
.pricing p {
  color:var(--muted);
  font-size:19px;
  line-height:1.5;
}

.featureGrid {
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.featureGrid article,
.priceCard,
.signupForm {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  box-shadow:0 14px 42px rgba(29,23,29,.05);
}

.featureGrid article {
  border-top:4px solid var(--accent);
}

.featureGrid h3 {
  margin:0 0 10px;
  font-size:22px;
}

.featureGrid p {
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.pricing {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:32px;
  align-items:start;
}

.priceGame {
  color:var(--accent);
  font-weight:950;
}

.priceValue {
  margin-top:8px;
  font-size:44px;
  font-weight:950;
}

.pricePeriod {
  margin-top:4px;
  color:var(--muted);
  font-size:17px;
  font-weight:850;
}

.priceCard ul {
  padding-left:20px;
  color:var(--muted);
  line-height:1.8;
}

.priceCard {
  background:linear-gradient(180deg, #fff, var(--soft));
}

.signupSection {
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(320px, 1fr);
  gap:32px;
  align-items:start;
}

.signupForm {
  display:grid;
  gap:14px;
}

.signupStep {
  display:grid;
  gap:14px;
}

.signupStep[hidden] {
  display:none;
}

.signupStep h3 {
  margin:0;
  font-size:24px;
}

.signupStepLabel {
  margin:0;
  color:var(--accent);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
}

.signupStepText {
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.signupForm label {
  display:grid;
  gap:7px;
  color:var(--muted);
  font-weight:750;
}

.signupForm input,
.signupForm select {
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 14px;
  color:var(--ink);
  background:#fff;
  font-size:16px;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.signupForm input:focus,
.signupForm select:focus,
.modalForm input:focus {
  outline:0;
  border-color:rgba(255,79,154,.75);
  box-shadow:0 0 0 4px rgba(255,79,154,.12);
}

.signupForm input.inputInvalid {
  border-color:#c4344d;
  box-shadow:0 0 0 4px rgba(196,52,77,.12);
}

.passwordField {
  position:relative;
  display:block;
}

.passwordField input {
  padding-right:98px;
}

.passwordToggle {
  position:absolute;
  top:50%;
  right:8px;
  min-width:78px;
  min-height:36px;
  transform:translateY(-50%);
  border:0;
  border-left:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font:inherit;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
}

.passwordToggle:hover,
.passwordToggle:focus-visible {
  color:var(--accent-dark);
}

.fieldMessage {
  min-height:20px;
  margin:0;
  font-size:14px;
  font-weight:800;
}

.fieldMessage.error { color:#c4344d; }
.fieldMessage.ok { color:#118a61; }

.formStatus {
  min-height:22px;
  margin:0;
  color:var(--muted);
  font-weight:750;
}

.formStatus.ok { color:#118a61; }
.formStatus.error { color:#c4344d; }

.modalOverlay {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(22,22,26,.34);
  backdrop-filter:blur(10px);
}

.modalOverlay[hidden] {
  display:none;
}

.modalCard {
  position:relative;
  width:min(500px, 100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px;
  box-shadow:0 28px 90px rgba(22,22,26,.18);
}

.modalCard img {
  width:190px;
  height:auto;
  display:block;
  margin-bottom:18px;
  clip-path:inset(1px);
}

.modalCard h2 {
  margin:0;
  font-size:34px;
  line-height:1.06;
}

.modalCard p {
  color:var(--muted);
  line-height:1.45;
}

.modalClose {
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.modalForm {
  display:grid;
  gap:13px;
  margin-top:18px;
}

.modalForm label {
  display:grid;
  gap:7px;
  color:var(--muted);
  font-weight:750;
}

.modalForm input {
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:13px 14px;
  color:var(--ink);
  background:#fff;
  font-size:16px;
}

.linkButton {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:4px 0;
  font-weight:850;
  text-align:left;
  cursor:pointer;
}

.inlineLink {
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:900;
  text-decoration:underline;
  cursor:pointer;
}

footer {
  width:min(1120px, calc(100% - 36px));
  margin:0 auto;
  padding:32px 0 46px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-weight:750;
}

.footerLinks {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.footerLinks a {
  color:var(--muted);
  text-decoration:none;
  font-weight:850;
}

.footerLinks a:hover {
  color:var(--accent-dark);
}

.policyPage {
  max-width:860px;
  padding:82px 0 96px;
}

.policyPage h1 {
  margin:0;
  font-size:clamp(44px, 6vw, 72px);
  line-height:1;
}

.policyUpdated {
  margin:18px 0 0;
  color:var(--muted);
  font-size:18px;
  font-weight:750;
}

.policyContent {
  margin-top:44px;
  display:grid;
  gap:26px;
}

.policyContent section {
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}

.policyContent h2 {
  margin:0 0 12px;
  font-size:24px;
}

.policyContent p {
  margin:10px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.58;
}

.vpnBanner {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  width:min(300px, calc(100vw - 32px));
  min-height:92px;
  padding:10px 14px 10px 10px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(18,24,44,.94), rgba(29,23,29,.94));
  color:#fff;
  text-decoration:none;
  box-shadow:0 18px 46px rgba(0,0,0,.22), 0 0 0 1px rgba(53,211,156,.16);
  animation:vpnBannerFloat 4.6s ease-in-out infinite;
  isolation:isolate;
  overflow:hidden;
}

.vpnBanner::before {
  content:"";
  position:absolute;
  inset:-40%;
  z-index:-1;
  background:radial-gradient(circle at 30% 30%, rgba(53,211,156,.34), transparent 34%),
    radial-gradient(circle at 72% 72%, rgba(255,79,154,.36), transparent 36%);
  animation:vpnBannerGlow 5.2s ease-in-out infinite alternate;
}

.vpnBanner img {
  width:76px;
  height:76px;
  flex:0 0 auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));
}

.vpnBannerText {
  display:grid;
  gap:2px;
  min-width:0;
}

.vpnBannerText strong {
  font-size:18px;
  line-height:1.05;
}

.vpnBannerText span {
  color:rgba(255,255,255,.74);
  font-size:13px;
  font-weight:800;
}

.vpnBanner:hover {
  transform:translateY(-3px) scale(1.02);
}

@keyframes vpnBannerFloat {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}

@keyframes vpnBannerGlow {
  from { transform:rotate(0deg) scale(1); opacity:.7; }
  to { transform:rotate(10deg) scale(1.08); opacity:1; }
}

@media (max-width: 860px) {
  .siteHeader {
    align-items:flex-start;
    flex-direction:column;
  }

  nav {
    justify-content:flex-start;
  }

  .hero,
  .pricing,
  .signupSection,
  .featureGrid {
    grid-template-columns:1fr;
  }

  .hero {
    min-height:auto;
  }

  .heroPreview {
    min-height:420px;
  }

  .previewWord span {
    width:52px;
    height:68px;
  }

  .button.secondary {
    margin-left:0;
    margin-top:10px;
  }

  footer {
    flex-direction:column;
  }

  .vpnBanner {
    right:14px;
    bottom:14px;
    width:220px;
    min-height:74px;
    padding:8px 10px 8px 8px;
  }

  .vpnBanner img {
    width:58px;
    height:58px;
  }

  .vpnBannerText strong {
    font-size:15px;
  }

  .vpnBannerText span {
    font-size:12px;
  }
}