/* Luch VPN marketing page.
   The page is one long sunrise: it opens in the dark of the blocked internet and
   ends in daylight gold. Every band starts on the colour the band above ended on,
   so scrolling is the beam arriving. Nothing else on the page glows. */

@font-face {
  font-family: "Onest";
  src: url("/static/onest-cyrillic.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url("/static/onest-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  src: url("/static/golos-cyrillic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  src: url("/static/golos-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/jbmono-cyrillic.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/jbmono-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  --dark: #07090f;
  --light: #f3efe6;
  --ink: #1a1205;
  --ink-mute: rgba(26, 18, 5, 0.68);
  --light-mute: rgba(243, 239, 230, 0.82);
  --beam: #ffb703;
  --hair-dark: rgba(243, 239, 230, 0.16);
  --hair-gold: rgba(26, 18, 5, 0.22);

  --display: "Onest", system-ui, sans-serif;
  --body: "Golos Text", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --page: min(1360px, 100% - 56px);
  --step: clamp(30px, 4.4vw, 64px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--light);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  margin: 0;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(40px, 7.1vw, 92px);
  font-weight: 800;
  line-height: 0.94;
}

h2 {
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.04;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 3px;
}

.wrap {
  width: var(--page);
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── the sunrise ────────────────────────────────────────────── */

.band {
  padding: calc(var(--step) * 1.25) 0;
}

.band--hero {
  background: var(--dark);
  padding: 0 0 calc(var(--step) * 1.6);
  position: relative;
  overflow: hidden;
}

/* The dark run warms but stays dark, so light text keeps its contrast all the
   way down. The sun crests between the steps and the price: one deliberate
   horizon, lit from below, instead of a long muddy fade. */
.band--probe {
  background: linear-gradient(180deg, #07090f, #1c1305);
}

.band--how {
  background: linear-gradient(180deg, #1c1305, #332206);
}

.band--steps {
  background: linear-gradient(180deg, #332206, #513608);
}

.band--price {
  background:
    radial-gradient(70% 220px at 50% 0, rgba(255, 236, 170, 0.85), transparent 70%),
    linear-gradient(180deg, #e9ae26, #f7cb51);
  color: var(--ink);
  padding-top: calc(var(--step) * 1.6);
}

.band--faq {
  background: linear-gradient(180deg, #f7cb51, #ffe08c);
  color: var(--ink);
}

.band--foot {
  background: #ffe08c;
  color: var(--ink);
  padding: 26px 0 48px;
}

.on-dark .eyebrow {
  color: rgba(243, 239, 230, 0.6);
}

.on-gold .eyebrow {
  color: var(--ink-mute);
}

/* ── header + hero ──────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: baseline;
  padding: 26px 0;
}

.masthead__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 26px;
  font-size: 15px;
}

.masthead nav a {
  text-decoration: none;
  color: var(--light-mute);
}

.masthead nav a:hover {
  color: var(--light);
}

.hero {
  padding-top: clamp(30px, 7vw, 96px);
  position: relative;
  z-index: 1;
}

.hero h1 span {
  color: var(--beam);
}

.hero__lead {
  margin-top: 26px;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--light-mute);
}

.hero__cta {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hero__note {
  font-size: 14px;
  color: rgba(243, 239, 230, 0.62);
}

/* First light: one warm rise at the bottom of the dark, seeding the gradient the
   rest of the page walks through. */
.band--hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -280px;
  width: 140vw;
  height: 440px;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%, rgba(255, 183, 3, 0.4), transparent 70%);
  animation: dawn 1400ms 200ms ease-out both;
  pointer-events: none;
}

@keyframes dawn {
  from {
    opacity: 0;
    transform: translate(-50%, 40px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border-radius: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 120ms ease, background-color 120ms ease;
}

.btn--primary {
  background: var(--beam);
  color: #1b1300;
}

.btn--primary:hover {
  transform: translateY(-1px);
  background: #ffc734;
}

.btn--ghost {
  border-color: var(--hair-gold);
  color: inherit;
}

.btn--ghost:hover {
  border-color: var(--ink);
}

/* ── the measurement: the page's signature ──────────────────── */

.probe__head {
  margin-bottom: 28px;
}

.probe__head h2 {
  margin-top: 10px;
}

.probe table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.probe th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.45);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair-dark);
}

.probe td {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair-dark);
  font-size: 16px;
}

.probe td:first-child {
  font-weight: 500;
}

.probe .ms {
  font-family: var(--mono);
  text-align: right;
  width: 96px;
  white-space: nowrap;
}

/* The bar is the datum, not decoration: its width is the measured value. */
.probe .bar {
  width: 46%;
}

.probe .bar i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--beam);
  opacity: 0.9;
}

.probe__note {
  margin-top: 20px;
  font-size: 14px;
  color: rgba(243, 239, 230, 0.66);
}

/* ── sections ───────────────────────────────────────────────── */

.section__head {
  margin-bottom: 32px;
}


.section__head h2 {
  margin-top: 10px;
}

.section__head p {
  margin-top: 16px;
  color: var(--light-mute);
}

.on-gold .section__head p {
  color: var(--ink-mute);
}

.path {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
  border-radius: 14px;
  overflow: hidden;
}

.path > div {
  background: rgba(243, 239, 230, 0.07);
  padding: 24px;
}

.path b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  margin-bottom: 6px;
}

.path span {
  color: var(--light-mute);
  font-size: 15px;
}

.path > div:first-child {
  box-shadow: inset 3px 0 0 var(--beam);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  counter-reset: step;
  padding: 0;
  margin: 0;
}

.steps > li {
  counter-increment: step;
  list-style: none;
  padding-top: 18px;
  border-top: 2px solid rgba(243, 239, 230, 0.5);
}

.steps > li::before {
  content: counter(step);
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(243, 239, 230, 0.65);
}

.steps h3 {
  margin: 6px 0 8px;
}

.steps p {
  color: var(--light-mute);
  font-size: 16px;
}

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 32px;
  color: var(--light-mute);
}

.on-gold .cols {
  color: var(--ink-mute);
}

/* ── price ──────────────────────────────────────────────────── */

.price {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.plan {
  border: 1px solid var(--hair-gold);
  border-radius: 14px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.66);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan--year {
  border-color: var(--ink);
}

.plan__amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 50px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan__unit {
  color: var(--ink-mute);
}

.plan__tag {
  align-self: flex-start;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: #ffda78;
  padding: 5px 9px;
  border-radius: 4px;
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ── faq ────────────────────────────────────────────────────── */

.honest {
  border-left: 3px solid var(--ink);
  padding: 2px 0 2px 20px;
  margin-bottom: 36px;
}

.honest .eyebrow {
  display: block;
  margin-bottom: 8px;
}

.faq details {
  border-top: 1px solid var(--hair-gold);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--hair-gold);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 20px;
  color: var(--ink-mute);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  padding: 0 0 24px;
  color: var(--ink-mute);
}

.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--ink-mute);
}

.foot a {
  color: var(--ink);
}

@media (max-width: 860px) {
  /* The bars are the point of the table, so on a phone the row stacks instead:
     country and number on one line, the measurement drawn full width beneath. */
  .probe thead {
    display: none;
  }

  .probe tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--hair-dark);
  }

  .probe td {
    border: 0;
    padding: 0;
  }

  .probe .ms {
    grid-row: 1;
    grid-column: 2;
    width: auto;
  }

  .probe .bar {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 10px;
  }

  .masthead nav {
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .band--hero::after {
    animation: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* ── document pages ─────────────────────────────────────────── */

.band--doc {
  background: linear-gradient(180deg, #07090f, #241905);
}

.doc__title {
  padding: clamp(24px, 5vw, 56px) 0 clamp(20px, 3vw, 34px);
}

.doc__title h1 {
  margin-top: 10px;
  font-size: clamp(36px, 5.4vw, 68px);
}

.doc__meta {
  margin-top: 16px;
  color: var(--light-mute);
}

.doc {
  max-width: 78ch;
}

.doc h2 {
  font-size: clamp(21px, 2vw, 26px);
  margin: 38px 0 12px;
}

.doc h2:first-child {
  margin-top: 0;
}

.doc p,
.doc li {
  color: var(--light-mute);
}

.doc p + p {
  margin-top: 12px;
}

.doc ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.doc li {
  margin-bottom: 8px;
}

.doc a {
  color: var(--beam);
}

.doc__contact {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hair-dark);
}