/* Plantago — landing + legal pages. Brand tokens mirror docs/design/figma-scripts/00-foundation-variables.js */
:root {
  --bg-base: #161018;
  --bg-elev: #211826;
  --bg-elev-2: #2B2030;
  --stroke: #322637;
  --text-pri: #F6F1F4;
  --text-sec: #B5A9B6;
  --text-ter: #7C6F7E;
  --accent: #6366F1;
  --accent-soft: #252350;
  --success: #34D399;
  --success-soft: #123026;
  --danger: #FB5C6B;
  --warning: #F6C453;
  --radius-card: 20px;
  --radius-pill: 999px;
  --radius-field: 14px;
  --maxw: 960px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-pri);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* soft radial glow behind the hero */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 50% -5%, rgba(99,102,241,0.18), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(52,211,153,0.08), transparent 70%);
  pointer-events: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: rgba(22,16,24,0.72);
  border-bottom: 1px solid var(--stroke);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--text-pri); }
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), #8B8DF5);
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(99,102,241,0.4);
}
.brand .logo svg { width: 18px; height: 18px; }

.header-nav { display: flex; align-items: center; gap: 20px; }
.header-nav a { color: var(--text-sec); font-size: 14px; font-weight: 500; }
.header-nav a:hover { color: var(--text-pri); text-decoration: none; }

/* language toggle */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-elev);
}
.lang-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-ter);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

/* ---------- hero ---------- */
.hero { text-align: center; padding: 80px 0 56px; }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(99,102,241,0.35);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.08;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hero p.lead {
  font-size: clamp(17px, 2.4vw, 20px);
  color: var(--text-sec);
  max-width: 620px;
  margin: 0 auto 36px;
}

/* the one big button motif */
.connect-demo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin: 8px 0 4px;
}
.connect-btn {
  width: 148px; height: 148px;
  border-radius: 50%;
  border: none;
  cursor: default;
  background: radial-gradient(circle at 50% 35%, #7A7DF7, var(--accent));
  box-shadow: 0 0 0 10px rgba(99,102,241,0.10), 0 0 0 24px rgba(99,102,241,0.05), 0 20px 60px rgba(99,102,241,0.45);
  display: grid; place-items: center;
  color: #fff;
  animation: pulse 3.2s ease-in-out infinite;
}
.connect-btn svg { width: 52px; height: 52px; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 10px rgba(99,102,241,0.10), 0 0 0 24px rgba(99,102,241,0.05), 0 20px 60px rgba(99,102,241,0.45); }
  50% { box-shadow: 0 0 0 14px rgba(99,102,241,0.14), 0 0 0 32px rgba(99,102,241,0.06), 0 24px 70px rgba(99,102,241,0.55); }
}
.connect-caption { font-size: 15px; color: var(--text-ter); font-weight: 500; }

/* store badges */
.stores { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-field);
  padding: 10px 18px;
  color: var(--text-pri);
}
.store-badge:hover { text-decoration: none; border-color: var(--accent); }
.store-badge svg { width: 22px; height: 22px; }
.store-badge .small { display: block; font-size: 11px; color: var(--text-ter); line-height: 1.1; }
.store-badge .big { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }

/* ---------- features ---------- */
.section { padding: 56px 0; }
.section h2 {
  font-size: clamp(26px, 4vw, 34px);
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.section .sub { text-align: center; color: var(--text-sec); max-width: 560px; margin: 0 auto 44px; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.card {
  background: var(--bg-elev);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  padding: 26px;
}
.card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft);
  display: grid; place-items: center;
  margin-bottom: 16px;
  color: var(--accent);
}
.card .icon svg { width: 22px; height: 22px; }
.card.success .icon { background: var(--success-soft); color: var(--success); }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--text-sec); font-size: 15px; }

/* privacy strip */
.strip {
  background: linear-gradient(135deg, var(--bg-elev), var(--bg-elev-2));
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  padding: 40px;
  text-align: center;
}
.strip h2 { margin-top: 0; }
.strip .pill-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.strip .pill {
  font-size: 14px; color: var(--text-pri);
  background: var(--bg-base);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
}
.strip .pill::before { content: "✓ "; color: var(--success); font-weight: 700; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--stroke);
  margin-top: 40px;
  padding: 40px 0;
  color: var(--text-ter);
  font-size: 14px;
}
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; align-items: center; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--text-sec); }
.footer-links a:hover { color: var(--text-pri); text-decoration: none; }

/* ---------- legal / document pages ---------- */
.doc { padding: 56px 0 24px; }
.doc-header { text-align: center; margin-bottom: 8px; }
.doc-header h1 { font-size: clamp(30px, 5vw, 42px); margin: 0 0 10px; letter-spacing: -0.02em; }
.doc-meta { color: var(--text-ter); font-size: 14px; margin-bottom: 40px; text-align: center; }
.doc-body {
  background: var(--bg-elev);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-card);
  padding: clamp(24px, 5vw, 48px);
}
.doc-body h2 {
  font-size: 21px;
  margin: 34px 0 12px;
  padding-top: 8px;
  letter-spacing: -0.01em;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body p { color: var(--text-sec); margin: 0 0 14px; }
.doc-body ul { color: var(--text-sec); margin: 0 0 14px; padding-left: 22px; }
.doc-body li { margin-bottom: 8px; }
.doc-body strong { color: var(--text-pri); font-weight: 600; }
.doc-body .note {
  background: var(--accent-soft);
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: var(--radius-field);
  padding: 16px 18px;
  color: var(--text-sec);
  font-size: 14px;
  margin-bottom: 28px;
}
.back-link { display: inline-block; margin-top: 28px; color: var(--text-sec); font-size: 14px; }

/* language visibility — the pre-paint script sets html[data-lang] before render.
   We hide ONLY the inactive language, so each block keeps its own natural or
   component display (inline span, flex badge, block div). !important keeps this
   winning over component rules like `.store-badge .small { display: block }`. */
html[data-lang="ru"] [data-lang-block="en"],
html[data-lang="en"] [data-lang-block="ru"] { display: none !important; }

@media (max-width: 600px) {
  .header-nav .nav-link { display: none; }
  .hero { padding: 56px 0 40px; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
}