/* ============================================
   PRIEM landing — brand tokens from web/design-tokens.css
   ============================================ */
:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --purple: #8b5cf6;
  --emerald: #34d399;
  --rose: #f43f5e;
  --bg: #f8f9fe;
  --bg-secondary: #f1f5f9;
  --card: #ffffff;
  --text: #1a1d2e;
  --text-secondary: #64748b;
  --border: #e0e7ff;
  --dark-bg: #020617;
  --dark-surface: #1e293b;
  --gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --shadow-card: 0 2px 8px rgba(99,102,241,.05);
  --shadow-elevated: 0 4px 16px rgba(99,102,241,.1);
  --shadow-strong: 0 8px 32px rgba(99,102,241,.2);
  --shadow-button: 0 10px 25px rgba(99,102,241,.3);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

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

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,249,254,.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.nav.is-scrolled { border-color: var(--border); box-shadow: var(--shadow-card); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; }
.brand__mark { border-radius: 9px; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { color: var(--text-secondary); font-weight: 500; font-size: 15px; transition: color .2s; }
.nav__links a:hover { color: var(--primary); }
.nav__actions { display: flex; align-items: center; gap: 16px; }
.link-muted { color: var(--text-secondary); font-weight: 500; font-size: 14px; transition: color .2s; }
.link-muted:hover { color: var(--primary); }

.lang { display: inline-flex; background: var(--bg-secondary); border-radius: 9999px; padding: 3px; }
.lang__btn {
  border: 0; background: transparent; cursor: pointer;
  font: 600 12px/1 var(--font); color: var(--text-secondary);
  padding: 6px 11px; border-radius: 9999px; transition: all .2s;
}
.lang__btn.is-active { background: var(--card); color: var(--primary); box-shadow: var(--shadow-card); }

.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; }

/* ============ HERO ============ */
.hero { position: relative; overflow: hidden; padding: 72px 0 88px; }
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(700px 500px at 10% 10%, rgba(99,102,241,.16), transparent 55%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center;
}
.eyebrow {
  display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--primary);
  background: rgba(99,102,241,.1); padding: 6px 14px; border-radius: 9999px; margin-bottom: 20px;
}
.hero__title { font-size: clamp(34px, 5vw, 54px); font-weight: 900; }
.hero__sub { margin-top: 18px; font-size: 18px; color: var(--text-secondary); max-width: 520px; }

.store-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.store-badges--center { justify-content: center; }
.store-badge { display: inline-flex; transition: transform .2s; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge img { display: block; height: 52px; width: auto; border-radius: 12px; }

.hero__points { list-style: none; margin-top: 28px; display: grid; gap: 12px; }
.hero__points li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-secondary); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px rgba(52,211,153,.5); flex: none; }

/* Phone mockup */
.hero__device { display: flex; justify-content: center; }
.phone {
  position: relative; width: 278px; height: 568px; border-radius: 44px;
  background: #0b1020; padding: 12px;
  box-shadow: var(--shadow-strong), 0 30px 60px rgba(2,6,23,.35);
  border: 1px solid rgba(255,255,255,.08);
}
.phone__notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 26px; background: #0b1020; border-radius: 0 0 16px 16px; z-index: 2;
}
.phone__screen {
  width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #1e293b, #020617);
  display: flex; align-items: center; justify-content: center;
}
.call { text-align: center; color: #fff; padding: 0 24px; width: 100%; }
.call__status { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald); margin-bottom: 28px; font-weight: 600; }
.call__avatar {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--gradient); display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 700; box-shadow: var(--shadow-strong);
}
.call__name { font-size: 26px; font-weight: 700; }
.call__timer { font-size: 16px; color: #94a3b8; margin-top: 6px; font-variant-numeric: tabular-nums; }
.call__lock { margin-top: 10px; font-size: 13px; color: #cbd5e1; }
.call__controls { display: flex; justify-content: center; gap: 22px; margin-top: 44px; }
.cc { width: 56px; height: 56px; border-radius: 50%; display: inline-block; background: rgba(255,255,255,.12); }
.cc--end { background: var(--rose); box-shadow: 0 8px 24px rgba(244,63,94,.45); }
.cc--mute, .cc--speaker { backdrop-filter: blur(8px); }

/* ============ SECTIONS ============ */
section { padding: 80px 0; }
.section__title { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; text-align: center; }
.section__lead { text-align: center; color: var(--text-secondary); font-size: 18px; max-width: 620px; margin: 16px auto 0; }

.grid { display: grid; gap: 24px; margin-top: 48px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Security cards */
.security { background: var(--bg-secondary); }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 32px 28px; box-shadow: var(--shadow-card); transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); }
.card h3 { font-size: 20px; margin: 18px 0 10px; }
.card p { color: var(--text-secondary); font-size: 15px; }
.card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--gradient); position: relative; box-shadow: var(--shadow-button); }
.card__icon::after, .feature__icon::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 26px; mask-size: 26px;
}

/* Features */
.feature { padding: 28px 24px; border-radius: 20px; transition: background .3s; }
.feature:hover { background: var(--card); box-shadow: var(--shadow-card); }
.feature h3 { font-size: 18px; margin: 16px 0 8px; }
.feature p { color: var(--text-secondary); font-size: 15px; }
.feature__icon { width: 48px; height: 48px; border-radius: 13px; background: rgba(99,102,241,.1); position: relative; }
.feature__icon::after { background: var(--primary); -webkit-mask-size: 24px; mask-size: 24px; }

/* Icon masks */
.ic-shield::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ic-lock::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.ic-eye::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 20 20'/%3E%3Cpath d='M6.7 6.7A11 11 0 0 0 1 12s4 7 11 7a10 10 0 0 0 5.3-1.5'/%3E%3Cpath d='M9.9 4.2A11 11 0 0 1 12 4c7 0 11 8 11 8a18 18 0 0 1-2.2 3.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 20 20'/%3E%3Cpath d='M6.7 6.7A11 11 0 0 0 1 12s4 7 11 7a10 10 0 0 0 5.3-1.5'/%3E%3Cpath d='M9.9 4.2A11 11 0 0 1 12 4c7 0 11 8 11 8a18 18 0 0 1-2.2 3.2'/%3E%3C/svg%3E"); }
.ic-phone::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.ic-users::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.ic-mail::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E"); }
.ic-history::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3.05 13A9 9 0 1 0 6 5.3L3 8'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3.05 13A9 9 0 1 0 6 5.3L3 8'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); }
.ic-bell::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.ic-devices::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='14' height='12' rx='2'/%3E%3Cpath d='M2 15h14'/%3E%3Crect x='17' y='8' width='5' height='13' rx='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='14' height='12' rx='2'/%3E%3Cpath d='M2 15h14'/%3E%3Crect x='17' y='8' width='5' height='13' rx='1.5'/%3E%3C/svg%3E"); }

/* How it works */
.how { background: var(--bg-secondary); }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 32px 28px; box-shadow: var(--shadow-card); }
.step__num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--gradient); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; margin-bottom: 18px;
}
.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { color: var(--text-secondary); font-size: 15px; }

/* CTA */
.cta { background: var(--gradient); color: #fff; text-align: center; }
.cta__inner { max-width: 720px; }
.cta h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; }
.cta p { margin-top: 14px; font-size: 18px; opacity: .92; }
.cta .store-badges { margin-top: 32px; }
.cta__weblink { display: inline-block; margin-top: 24px; color: #fff; font-weight: 600; opacity: .92; }
.cta__weblink:hover { color: #fff; opacity: 1; }

/* Footer */
.footer { background: var(--dark-bg); color: #94a3b8; padding: 48px 0; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer__brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 18px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a { color: #94a3b8; font-size: 14px; transition: color .2s; }
.footer__links a:hover { color: #fff; }
.footer__copy { width: 100%; font-size: 13px; color: #475569; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .store-badges, .hero__points { justify-content: center; }
  .hero__points { max-width: 320px; margin-left: auto; margin-right: auto; }
  .grid--3, .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__links.is-open {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--card); padding: 16px 24px; box-shadow: var(--shadow-elevated);
  }
  .nav__links.is-open a { padding: 10px 0; }
}
@media (max-width: 560px) {
  section { padding: 56px 0; }
  .grid--3, .steps { grid-template-columns: 1fr; }
  .nav__actions .link-muted { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ============ LEGAL PAGES ============ */
html[lang="ru"] .only-en { display: none; }
html[lang="en"] .only-ru { display: none; }
.legal { max-width: 800px; padding-top: 48px; padding-bottom: 72px; }
.legal h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.legal .updated { color: var(--text-secondary); font-size: 14px; margin-top: 8px; }
.legal h2 { font-size: 22px; margin: 36px 0 12px; }
.legal p, .legal li { color: var(--text-secondary); font-size: 16px; margin-top: 10px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--primary); }
.legal .back { display: inline-block; margin-top: 40px; font-weight: 600; color: var(--primary); }