/* ARDESvpn — the bot's visual identity on the web.
   Palette sampled straight out of static/img/main.png: warm near-black space
   (#0c0807), ember browns for surfaces, and the globe's amber glow (#f9b94b →
   #ff9417) as the single accent.

   No web fonts and no CSS framework, on purpose. The people who need this site
   are on a throttled connection at the moment they need it, so everything here
   is one file. Every "effect" below is a gradient, a transform or a shadow —
   things the compositor does for free — not an image or a script. */

:root {
  --bg:        #0c0807;
  --bg-2:      #140b08;
  --card:      #1a100b;
  --card-2:    #23150e;
  --line:      #3a2317;
  --line-soft: #2a190f;

  --text:      #f8ece0;
  --muted:     #b3927a;
  --dim:       #8a6e5b;

  --amber:     #ffb347;
  --amber-hot: #ff9417;
  --amber-dim: #f9b94b;
  --glow:      rgba(255, 160, 45, .28);

  --danger:    #ff6b5a;
  --ok:        #5fd07a;

  --radius: 16px;
  --radius-sm: 10px;
  --pad: 20px;
  --bar-h: 62px;

  /* Content width. Below ~1870px this is a fixed comfortable column; above it
     the page switches to 60vw so the gutters settle at 20% a side and a large
     monitor actually gets used instead of showing two acres of background.
     Capped so line length on an ultrawide stays readable. */
  --maxw: clamp(1120px, 60vw, 1760px);
  --readw: 720px;   /* pages that are mostly prose keep a narrow measure */
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 16px);   /* anchors clear the pinned bar */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-image:
    radial-gradient(1200px 560px at 50% -180px, rgba(255, 148, 23, .16), transparent 70%),
    radial-gradient(800px 400px at 100% 6%, rgba(255, 179, 71, .07), transparent 70%),
    radial-gradient(700px 420px at 0% 42%, rgba(255, 148, 23, .05), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a { color: var(--amber); }
a:hover { color: var(--amber-dim); }

/* --- pinned header ------------------------------------------------------ */

.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 8, 7, .82);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}

.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  min-height: var(--bar-h);
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding: 10px var(--pad);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 16px var(--glow); }
.wordmark i { font-style: normal; color: var(--amber); }

nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
nav form { display: contents; }   /* the button joins the row, not a box of its own */

/* Links and the logout button share one class so they cannot land on
   different baselines — which is what pushed "Выйти" out of the row. */
.navlink {
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: color .15s ease, background .15s ease;
}
.navlink:hover { color: var(--text); background: rgba(255, 179, 71, .09); }

.cta-link { color: var(--amber); border: 1px solid rgba(255, 148, 23, .45); }
.cta-link:hover { color: #2a1503; background: var(--amber); border-color: var(--amber); }

/* --- layout ------------------------------------------------------------- */

main {
  width: min(100%, var(--readw));
  margin: 0 auto;
  padding: 28px var(--pad) 56px;
}
main.wide { width: min(100%, var(--maxw)); }

.card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 22px;
}
.card.narrow { max-width: 440px; margin-left: auto; margin-right: auto; }

h1 { font-size: 26px; margin: 0 0 10px; letter-spacing: -.01em; }
h2 { font-size: 21px; margin: 0 0 16px; letter-spacing: -.01em; }
h3 { font-size: 16px; margin: 26px 0 8px; }

.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.small { font-size: 14px; }
.centered { text-align: center; }

/* Two-column page shell: main content plus a sidebar, stacked on narrow. */
.split { display: grid; gap: 22px; align-items: start; }
@media (min-width: 940px) {
  .split { grid-template-columns: 1.6fr 1fr; }
  .split > .card { margin-bottom: 0; }
}

/* --- hero --------------------------------------------------------------- */

.hero { margin: 8px 0 34px; text-align: center; }

.hero-img {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px -30px rgba(255, 148, 23, .55);
}
.hero-img img { display: block; width: 100%; height: auto; }
.hero-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(12, 8, 7, .85) 100%);
  pointer-events: none;
}
@keyframes ember { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hero-img::before {
  content: "";
  position: absolute; inset: -30%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 148, 23, .22), transparent 60%);
  animation: ember 6s ease-in-out infinite;
  pointer-events: none;
}

.hero h1 { font-size: 34px; line-height: 1.15; margin: 26px 0 12px; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--amber-dim), var(--amber-hot) 60%, var(--amber-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero p { margin: 0 auto; max-width: 34em; color: var(--muted); font-size: 17px; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* --- stat band ---------------------------------------------------------- */

.statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.statband li {
  padding: 18px;
  text-align: center;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease;
}
.statband li:hover { border-color: rgba(255, 148, 23, .5); transform: translateY(-2px); }
.statband .v {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--amber-dim), var(--amber-hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.statband .k { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* --- forms -------------------------------------------------------------- */

label { display: block; margin: 18px 0 6px; font-size: 14px; color: var(--muted); }

input[type=text], input[type=email], input[type=number], select {
  width: 100%;
  padding: 13px 14px;
  font-size: 16px;            /* 16px keeps iOS Safari from zooming on focus */
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
input::placeholder { color: var(--dim); }
input:focus, select:focus {
  outline: none;
  border-color: var(--amber-hot);
  box-shadow: 0 0 0 3px rgba(255, 148, 23, .18);
}
input.code {
  font-size: 26px;
  letter-spacing: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-left: 24px;
}

button, .btn {
  display: inline-block;
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: #2a1503;
  background: linear-gradient(180deg, var(--amber), var(--amber-hot));
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 8px 26px -12px rgba(255, 148, 23, .9);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
button:hover, .btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -12px rgba(255, 148, 23, 1);
  color: #2a1503;
}
button:active, .btn:active { transform: translateY(0); }
button[disabled] { opacity: .55; cursor: progress; transform: none; }

.btn-ghost { color: var(--text); background: transparent; border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { color: var(--text); border-color: var(--amber-hot); filter: none; }

button.link {
  padding: 0; font-size: 14px; font-weight: 400;
  color: var(--muted); background: none; box-shadow: none;
  text-decoration: underline; transform: none;
}
button.link:hover { color: var(--amber); filter: none; transform: none; box-shadow: none; }

button.danger {
  padding: 9px 14px; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, #b8493c, #96382d); box-shadow: none;
}

.inline-form { display: inline; margin: 0; }
.stack > button { width: 100%; margin-top: 20px; }
form > button { margin-top: 20px; }
.plans form > button, .promo-row button, .copyrow button, nav form > button { margin-top: 0; }

/* --- gauges ------------------------------------------------------------- */
/* conic-gradient ring: no SVG, no script, one element. --v is 0..100. */

.gauge {
  position: relative;
  flex: 0 0 auto;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: conic-gradient(var(--amber-hot) calc(var(--v) * 1%), rgba(255, 255, 255, .07) 0);
  display: grid;
  place-items: center;
}
.gauge::before {
  content: "";
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: var(--card);
}
.gauge span {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bar-track { height: 6px; margin-top: 10px; background: rgba(255, 255, 255, .07); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--amber-dim), var(--amber-hot)); border-radius: 999px; }

/* --- stats (account) ---------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 22px 0;
  padding: 0;
}
.stats > div {
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.stats dt { font-size: 13px; color: var(--muted); }
.stats dd { margin: 5px 0 0; font-size: 22px; font-weight: 700; color: var(--amber); }

.sub-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 20px 0 4px; }
.sub-hero .lede { font-size: 15px; color: var(--muted); }
.sub-hero .lede b { display: block; font-size: 20px; color: var(--text); font-weight: 700; }
.days-left {
  flex: 0 0 auto;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
/* Inline, so it reads as one phrase — "128 дней", not a number with a label
   stacked under it the way the ring used to show it. */
.days-left small { margin-left: 8px; font-size: 15px; font-weight: 600; color: var(--muted); }

/* --- subscription link -------------------------------------------------- */

.copyrow { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.copyrow input { flex: 1 1 220px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.copyrow button { white-space: nowrap; }

.qr {
  width: 210px;
  margin: 20px auto 8px;
  padding: 12px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 38px -6px var(--glow);
}
.qr svg { display: block; width: 100%; height: auto; }

/* --- lists / grids ------------------------------------------------------ */

.plans, .devices, .features, .servers { list-style: none; margin: 0; padding: 0; }

.plans { display: grid; gap: 12px; }
.plans li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.plans li:hover { border-color: rgba(255, 148, 23, .5); transform: translateY(-2px); }
.plans li.best {
  border-color: var(--amber-hot);
  box-shadow: 0 0 0 1px rgba(255, 148, 23, .25), 0 0 34px -16px var(--glow);
}
.plans .term { font-weight: 700; font-size: 18px; }
.plans .per-day { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.plans .tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #2a1503;
  background: var(--amber-dim);
  border-radius: 999px;
  vertical-align: 2px;
}
.plans .save { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--ok); }
.plans button, .plans .btn { min-width: 106px; }
.plans .was { opacity: .55; font-weight: 500; margin-right: 3px; }

@media (min-width: 760px) {
  .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .plans li { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px; }
  .plans li form, .plans li .btn, .plans li button { width: 100%; }
  .plans .term { font-size: 21px; }
}

.promo-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.promo-row input { flex: 1 1 180px; text-transform: uppercase; letter-spacing: .06em; }
.promo-row button { white-space: nowrap; }

.features { display: grid; gap: 2px; }
.features li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.features .ico { flex: 0 0 auto; font-size: 20px; line-height: 1.3; }
.features b { display: block; font-weight: 600; }
.features span.d { color: var(--muted); font-size: 14px; }
.features li:last-child { border-bottom: 0; }

@media (min-width: 720px) {
  .features { grid-template-columns: 1fr 1fr; gap: 4px 34px; }
  .features li:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 1180px) {
  .features { grid-template-columns: repeat(3, 1fr); }
  .features li:nth-last-child(-n+3) { border-bottom: 0; }
}

.devices li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.devices li:last-child { border-bottom: 0; }

/* --- server cards ------------------------------------------------------- */

.servers {
  display: grid;
  /* 230px is the narrowest a card can be and still fit flag + country + gauge
     on one line. Anything wider and a 1080px-content desktop only fits three
     cards, leaving the row looking half-empty. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.server {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: linear-gradient(180deg, rgba(35, 21, 14, .9), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* An accent rail that lights up on hover — the whole card reads as one control. */
.server::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber-hot));
  opacity: 0;
  transition: opacity .2s ease;
}
.server:hover {
  border-color: rgba(255, 148, 23, .55);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(255, 148, 23, .8);
}
.server:hover::before { opacity: 1; }
.server.offline { opacity: .68; }
.server.offline:hover { transform: none; }

.server-head { display: flex; align-items: center; gap: 12px; }
.server-id { flex: 1 1 auto; min-width: 0; }
.server .place {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
}
.server .place span { min-width: 0; }
.server .flag {
  flex: 0 0 auto;
  width: 26px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 2px 9px 2px 7px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
}
.pill.up { color: var(--ok); background: rgba(95, 208, 122, .1); border-color: rgba(95, 208, 122, .3); }
.pill.down { color: var(--danger); background: rgba(255, 107, 90, .1); border-color: rgba(255, 107, 90, .3); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pill.up .dot { animation: pulse 2.4s ease-in-out infinite; }

.server-load {
  margin-top: auto;          /* sit at the bottom of the card, rows stay aligned */
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.server-load-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}
.server-load-row span { font-size: 11px; color: var(--dim); letter-spacing: .02em; }
.server-load-row b { font-size: 14px; font-weight: 700; color: var(--text); }
.loadbar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.loadbar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber-hot));
  transition: width .4s ease;
}
.loadbar.hot i { background: linear-gradient(90deg, #ff7a5a, #ff3b30); }

/* --- notices ------------------------------------------------------------ */

.notice {
  padding: 13px 15px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--amber-hot);
  border-radius: var(--radius-sm);
}
.notice.ok { border-left-color: var(--ok); }

.error {
  padding: 11px 13px; margin: 0 0 14px; font-size: 14px;
  color: #ffb3aa; background: rgba(255, 107, 90, .11);
  border: 1px solid rgba(255, 107, 90, .3); border-radius: var(--radius-sm);
}

details { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
details:last-of-type { border-bottom: 0; }
summary { cursor: pointer; font-weight: 600; }
summary::marker { color: var(--amber); }
details p { margin: 10px 0 0; color: var(--muted); }

@media (min-width: 1000px) {
  .faq-grid { columns: 2; column-gap: 34px; }
  .faq-grid details { break-inside: avoid; }
}

/* --- footer ------------------------------------------------------------- */

footer { border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--dim); }
.footer-inner { width: min(100%, var(--maxw)); margin: 0 auto; padding: 26px var(--pad) 44px; }
footer a { color: var(--muted); }
footer p { margin: 6px 0; }

.htmx-request button { opacity: .55; cursor: progress; }

/* --- desktop hero: side by side once there's room ----------------------- */

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: 48px;
    text-align: left;
    margin-bottom: 40px;
  }
  .hero-copy { order: 1; }
  .hero-img  { order: 2; }
  .hero h1 { font-size: 42px; margin-top: 0; }
  .hero p { margin: 0; font-size: 18px; }
  .hero .cta { justify-content: flex-start; }
}
@media (min-width: 1500px) {
  .hero { gap: 64px; }
  .hero h1 { font-size: 50px; }
  .hero p { font-size: 19px; }
}

@media (max-width: 560px) {
  :root { --pad: 16px; }
  .hero h1 { font-size: 27px; }
  .card { padding: 19px; }
  h1 { font-size: 23px; }
  nav { gap: 2px; }
  .navlink { padding: 0 9px; font-size: 14px; }
  .statband .v { font-size: 25px; }
}