/* Blesq AI corporate site: single stylesheet.
   Visual language follows the brand kit: near-black surfaces, the warm champagne
   of the four-point star, off-white wordmark, large-radius cards, pill chips. */

:root {
  --bg: #0b0b0d;
  --surface: #151518;
  --surface-2: #202025;
  --line: rgba(255, 255, 255, 0.08);
  --text: #ebe8e4;
  --muted: #a29fa8;
  --gold: #eec89c;
  --gold-deep: #c0905f;
  --radius-card: 24px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--gold);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 11, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 650;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 28px;
}

.nav-links {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.nav-links a {
  color: var(--muted);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--text);
  text-decoration: none;
}

.nav-links a[aria-current="page"] {
  color: var(--gold);
}

/* Burger, shown only at phone widths (see the 600px block). The checkbox is the state:
   kept in the layout but invisible, so it stays keyboard-reachable and Space still opens
   the menu; the label is what the finger hits. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle:focus-visible ~ .nav-burger {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}

.lang-switch a {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 999px;
  transition: color 0.15s ease;
}

.lang-switch a:hover {
  text-decoration: none;
  color: var(--text);
}

.lang-switch a[aria-current="true"] {
  background: var(--surface-2);
  color: var(--text);
}

/* ---------- Buttons & chips ---------- */

.btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #171204;
  font-weight: 650;
  font-size: 1rem;
  padding: 13px 28px;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(233, 190, 95, 0.25);
}

.btn-small {
  padding: 9px 20px;
  font-size: 0.9rem;
}

.btn-ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
}

.btn-ghost:hover {
  box-shadow: none;
  border-color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-block;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 550;
  padding: 8px 18px;
  border-radius: 999px;
}

.chip.is-gold {
  background: var(--gold);
  color: #171204;
}

/* ---------- Type ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "✦";
  font-size: 0.9em;
}

.display {
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 18px 0 22px;
}

.display .gold {
  background: linear-gradient(100deg, var(--gold) 20%, var(--gold-deep) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 620px;
}

/* ---------- Sections ---------- */

.section {
  padding: 96px 0;
}

.section + .section {
  padding-top: 0;
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 14px 0 12px;
}

.section-head p {
  color: var(--muted);
  font-size: 1.05rem;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 110px 0 120px;
  text-align: center;
  overflow: hidden;
}

.hero .lead {
  margin: 0 auto;
}

.hero .chips {
  justify-content: center;
  margin-top: 34px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 42px;
  flex-wrap: wrap;
}

/* Signature: constellation of the app-icon sparkles behind the headline. */
.sparkfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--gold);
}

.spark {
  position: absolute;
  animation: spark-float 7s ease-in-out infinite;
}

.spark:nth-child(2n) {
  animation-delay: -2.5s;
}

.spark:nth-child(3n) {
  animation-delay: -5s;
}

@keyframes spark-float {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-14px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .spark {
    animation: none;
  }
  .btn {
    transition: none;
  }
}

/* ---------- Cards ---------- */

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

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 28px;
}

.card .spark-icon {
  color: var(--gold);
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.card h3 {
  font-size: 1.15rem;
  font-weight: 650;
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
  font-size: 0.98rem;
}

/* ---------- Steps (real sequence: effect → photo → result) ---------- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 28px;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}

.steps h3 {
  font-size: 1.1rem;
  font-weight: 650;
  margin-bottom: 8px;
}

.steps p {
  color: var(--muted);
  font-size: 0.98rem;
}

/* ---------- Split (text + media) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split-media {
  display: flex;
  justify-content: center;
}

.phone {
  width: min(300px, 80vw);
  border-radius: 40px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 56px 48px;
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.cta-band p {
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto 30px;
}

/* ---------- Legal details (contacts) ---------- */

.legal {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 40px;
}

.legal dt {
  color: var(--muted);
  font-size: 0.95rem;
}

.legal dd {
  font-size: 1rem;
}

/* ---------- Prose (privacy policy) ---------- */

.prose {
  max-width: 720px;
}

.prose h1 {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 16px 0 10px;
}

.prose h2 {
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 44px 0 12px;
}

.prose p,
.prose li {
  color: var(--muted);
  margin-bottom: 12px;
}

.prose ul {
  padding-left: 22px;
  margin-bottom: 16px;
}

.prose .updated {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 40px 0 48px;
}

/* Two columns whose widths are decided, not left to chance: the links keep their natural
   width on the right, the registration details take what is left and wrap. Wrapping a legal
   line costs nothing; wrapping navigation into ragged rows costs the reader. Flex with
   space-between used to break the wide layout on Russian pages, where the same four links
   are half again as long as in English and pushed the whole block onto its own row. */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
}

.footer-legal p {
  color: var(--muted);
  font-size: 0.88rem;
}

.footer-legal a {
  color: var(--muted);
  text-decoration: underline;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 20px;
}

.footer-links a {
  color: var(--muted);
  font-size: 0.88rem;
}

.footer-links a:hover {
  color: var(--text);
}

/* ---------- Responsive ---------- */

/* Two columns only while both can breathe. The four Russian links need ~630px, so below
   this the details column would be squeezed into a six-line sliver; the footer stacks
   instead, details first and links under them, sharing one left edge. */
@media (max-width: 1100px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 720px) {
  .nav-inner {
    gap: 16px;
  }
  .nav-links {
    gap: 16px;
  }
  /* A squeezed link breaks mid-phrase ("О / компании") and the header grows a second,
     ragged storey. Better to keep every item whole and let the row wrap deliberately
     (see the 600px block below). */
  .nav-links a {
    white-space: nowrap;
  }
  .nav .btn-small {
    display: none;
  }
  .section {
    padding: 72px 0;
  }
  .hero {
    padding: 80px 0 90px;
  }
  .sparkfield {
    display: none;
  }
  .legal {
    grid-template-columns: 1fr;
    gap: 4px 0;
    padding: 28px 24px;
  }
  .legal dt {
    margin-top: 14px;
  }
  .cta-band {
    padding: 40px 24px;
  }
}

/* Phone width: the brand, three links and the language toggle no longer fit on one line,
   so the links move under a burger. The open state is the checkbox's — no script on the
   site, and none needed here. Nothing is dropped from the menu: the footer carries neither
   Product nor About, so hiding them outright would strand those sections on a phone. */
@media (max-width: 600px) {
  .nav-inner {
    flex-wrap: wrap;
    height: auto;
    /* Keeps .container's own side padding — a shorthand without it pins the menu
       items to the screen edge. */
    padding: 10px 24px;
    gap: 10px 14px;
  }
  .nav-burger {
    display: flex;
    order: 4;
  }
  .lang-switch {
    margin-left: auto;
  }
  .nav-links {
    display: none;
    order: 5;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    padding-bottom: 6px;
    border-top: 1px solid var(--line);
  }
  .nav-toggle:checked ~ .nav-links {
    display: flex;
  }
  .nav-links a {
    padding: 14px 2px;
    font-size: 1rem;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* The footer becomes one column: links first as a plain list, in the same vertical
     rhythm and behind the same hairline as the open menu above, then the registration
     details — a legal footnote reads last on a phone. Side by side they would either
     break "Пользовательское соглашение" mid-phrase or scatter across the width. */
  .footer {
    margin-top: 24px;
    padding: 24px 0 36px;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-links {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .footer-links a {
    padding: 13px 0;
    font-size: 0.95rem;
  }
  .footer-legal {
    order: 2;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .footer-legal p {
    font-size: 0.82rem;
    line-height: 1.65;
  }
}