/* ============================================================
   BULBVPN — account.html interim state
   The personal cabinet (phase E.01) is not built yet. Until it
   ships, this page must not imply an account exists. It reuses
   the brand tokens and the self-hosted faces, but none of the
   artboard's absolute-positioning scaffold: it is a real fluid
   layout, so it stays honest at every width.
   ============================================================ */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--c-black);
  color: var(--c-text-light);
  font-family: var(--font-body);
  line-height: 1.55;
  /* A single soft brand wash instead of the 7 MB raster backdrop the
     artboard shipped — same mood, no page weight. */
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, rgba(197, 71, 255, 0.28), transparent 60%),
    radial-gradient(50rem 36rem at 95% 110%, rgba(81, 220, 255, 0.22), transparent 60%);
  background-attachment: fixed;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-white);
  color: var(--c-text-dark);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  z-index: 10;
}
.skip-link:focus { left: 16px; top: 16px; }

.panel {
  width: min(720px, 100%);
  padding: clamp(28px, 6vw, 56px);
  border: 1px solid var(--c-purple);
  border-radius: var(--r-card);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  text-align: center;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 clamp(20px, 4vw, 32px);
  font-family: var(--font-heading);
  font-weight: var(--w-black);
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: var(--ls-pill);
  text-decoration: none;
  color: var(--c-text-light);
}
.brand span {
  background: var(--grad-stat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1 {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: var(--w-bold);
  font-size: clamp(26px, 5.5vw, 44px);
  line-height: 1.15;
}

.lede {
  margin: 0 auto clamp(24px, 5vw, 36px);
  max-width: 46ch;
  font-size: clamp(15px, 2.2vw, 18px);
  color: rgba(255, 255, 255, 0.78);
}

.what {
  margin: 0 auto clamp(28px, 5vw, 40px);
  padding: 0;
  max-width: 42ch;
  list-style: none;
  text-align: left;
  display: grid;
  gap: 10px;
  font-size: clamp(14px, 2vw, 16px);
  color: rgba(255, 255, 255, 0.72);
}
.what li {
  position: relative;
  padding-left: 26px;
}
.what li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad-menu);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-card);
  border: 2px solid var(--c-cyan);
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: clamp(14px, 2vw, 17px);
  letter-spacing: var(--ls-pill);
  text-decoration: none;
  color: var(--c-text-light);
  transition: background-color 140ms ease, color 140ms ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--c-cyan);
  color: var(--c-text-dark);
}
.btn--ghost { border-color: rgba(255, 255, 255, 0.35); }
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-text-dark);
}

:focus-visible {
  outline: 3px solid var(--c-cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}