/* MVM CARD — Landing style.css
   Токены 1-в-1 из css/style.css визитки — чтобы регистрация и сама
   карточка выглядели как один продукт, а не два разных сайта. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@600;700&family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;800&display=swap');

:root{
  --void:#0A0A0F;
  --void-2:#14141B;
  --card-border:rgba(255,255,255,0.06);
  --frost-bg:rgba(10,10,15,0.55);
  --frost-border:rgba(255,255,255,0.15);
  --line:rgba(198,169,105,0.35);
  --gold:#c79b63;
  --gold-2:#C6A969;
  --gold-soft:rgba(198,169,105,0.16);
  --ink:#F2EFE9;
  --ink-dim:#A9A5A0;
  --ink-faint:#6F6B67;

  /* ЕДИНЫЙ шрифт для UI/заголовков на ВСЕХ языках — 'Rajdhani' не
     поддерживает кириллицу (только Latin+Devanagari, проверено на
     офиц. странице Google Fonts), поэтому русский текст молча
     проваливался на другой шрифт. Теперь везде один Inter (жирный
     вес заменяет характер, который раньше давала форма Rajdhani),
     плюс Noto Sans SC в конце цепочки — для китайского. */
  --f-ui:'Inter','Noto Sans SC',sans-serif;
  --f-body:'Inter','Noto Sans SC',sans-serif;
  --f-mono:'DM Mono',monospace;

  /* Только для литеры бренда "MVM CARD" — она всегда на латинице,
     не переводится ни на одном языке, поэтому ей можно спокойно
     оставить фирменный Rajdhani без риска рассинхрона со скриптом. */
  --f-wordmark:'Rajdhani','Inter',sans-serif;

  --wrap:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void); color:var(--ink); font-family:var(--f-body);
  overflow-x:hidden;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{display:block; max-width:100%;}

.brandmark{font-family:var(--f-mono); color:var(--gold); font-weight:500;}
.wordmark{font-family:var(--f-wordmark); font-weight:700; letter-spacing:0.06em;}

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,15,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--card-border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo-block{display:flex; align-items:center; gap:10px;}
.logo-mark{
  width:38px; height:38px; border:1.5px solid var(--gold); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); color:var(--gold); font-size:15px;
}
.logo-text{font-size:15px;}
.logo-text b{color:var(--gold-2); font-weight:700;}

.main-nav{display:flex; align-items:center; gap:36px;}
.main-nav a{
  font-family:var(--f-ui); font-weight:700; font-size:13px;
  letter-spacing:0.04em; color:var(--ink-dim); transition:color .15s ease;
}
.main-nav a:hover{color:var(--ink);}

.header-right{display:flex; align-items:center; gap:16px;}
.btn-signin{
  font-family:var(--f-ui); font-weight:700; font-size:12.5px; letter-spacing:0.04em;
  border:1px solid var(--gold); color:var(--gold-2);
  padding:9px 20px; border-radius:100px;
  transition:background .15s ease;
}
.btn-signin:hover{background:var(--gold-soft);}

.lang-switch{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--card-border); border-radius:100px;
  padding:8px 14px; color:var(--ink-dim); font-family:var(--f-ui); font-size:12.5px; font-weight:600;
}
.lang-btn svg{width:11px; height:11px; stroke:var(--ink-dim); transition:transform .15s ease;}
.lang-btn.open svg{transform:rotate(180deg);}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--void-2); border:1px solid var(--card-border); border-radius:12px;
  padding:6px; min-width:170px; display:none; flex-direction:column; gap:2px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4); z-index:60;
}
.lang-menu.open{display:flex;}
.lang-menu button{
  background:none; border:none; text-align:left; color:var(--ink-dim);
  font-family:var(--f-body); font-size:13px; padding:9px 11px; border-radius:8px;
}
.lang-menu button:hover{background:rgba(255,255,255,0.05); color:var(--ink);}
.lang-menu button.active{color:var(--gold-2);}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;
}
.nav-toggle span{width:22px; height:2px; background:var(--ink); border-radius:2px;}

.mobile-nav{
  display:none; flex-direction:column; gap:2px;
  background:var(--void-2); border-bottom:1px solid var(--card-border);
  padding:8px 32px 18px;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{
  font-family:var(--f-ui); font-weight:600; font-size:14px; letter-spacing:0.02em;
  color:var(--ink-dim); padding:12px 0; border-bottom:1px solid var(--card-border);
}

/* ================= HERO ================= */
/* Картинка — теперь настоящий CSS-фон (background-size:cover), а не
   <img> с фиксированной шириной: обрезается по контейнеру аккуратно,
   исказить пропорции здесь в принципе невозможно. Тёмный градиент
   поверх — чтобы текст слева всегда читался, независимо от того, что
   именно на фото. */
.hero{
  position:relative;
  padding:88px 0 72px;
  background-image:
    linear-gradient(100deg, var(--void) 0%, rgba(10,10,15,0.88) 30%, rgba(10,10,15,0.55) 52%, rgba(10,10,15,0.18) 100%),
    url('../landpict/hero-card-phone.jpg');
  background-size: cover, cover;
  background-position: center, top right;
  background-repeat: no-repeat, no-repeat;
}
.hero-overlay{
  position:absolute;
  top:0;
  right:0;
  max-width:46%;
  height:auto;
  z-index:1;
  pointer-events:none;
}
.hero-glow{
  position:absolute; top:8%; right:-6%; width:560px; height:560px;
  background:radial-gradient(circle, rgba(199,155,99,0.16) 0%, rgba(199,155,99,0) 68%);
  border-radius:50%; pointer-events:none; z-index:1;
}
.hero .wrap{position:relative; z-index:2;}
.hero-content{max-width:600px;}

.hero-eyebrow{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.18em; color:var(--gold-2);
  margin-bottom:18px;
}
.hero h1{
  font-family:var(--f-ui); font-weight:800; font-size:52px; line-height:1.06;
  letter-spacing:-0.01em; color:var(--ink);
}
.hero-tagline{
  font-family:var(--f-ui); font-weight:700; font-size:15px; letter-spacing:0.08em;
  color:var(--gold-2); margin:20px 0 18px;
}
.hero-lead{
  font-size:16px; line-height:1.6; color:var(--ink-dim); max-width:460px; margin-bottom:34px;
}

.hero-form{
  background:rgba(20,20,27,0.9);
  backdrop-filter:blur(8px);
  border:1px solid var(--card-border); border-radius:16px;
  padding:22px; max-width:460px;
}
.email-row{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:10px;
  padding:12px 14px; margin-bottom:12px;
}
.email-row svg{width:16px; height:16px; stroke:var(--ink-faint); flex-shrink:0;}
.email-row input{
  flex:1; background:none; border:none; outline:none; color:var(--ink); font-size:14px; font-family:var(--f-body);
}
.email-row input::placeholder{color:var(--ink-faint);}
.btn-cta{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg, var(--gold-2), var(--gold));
  color:var(--void); border:none; border-radius:10px; padding:15px;
  font-family:var(--f-ui); font-weight:700; font-size:14px; letter-spacing:0.03em;
  transition:transform .12s ease;
}
.btn-cta:active{transform:scale(0.98);}
.btn-cta svg{width:15px; height:15px;}
.form-note{
  font-size:11.5px; color:var(--ink-faint); text-align:center; margin-top:12px; line-height:1.5;
}

/* --- согласие на обработку данных --- */
.consent-row{
  display:flex; align-items:flex-start; gap:10px;
  margin:16px 0 14px; cursor:pointer; position:relative;
}
.consent-row input[type="checkbox"]{
  position:absolute; opacity:0; width:20px; height:20px; margin:0; cursor:pointer;
}
.consent-box{
  flex-shrink:0; width:19px; height:19px; margin-top:1px;
  border:1.5px solid var(--frost-border); border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, background .15s ease;
}
.consent-check{width:12px; height:12px; color:var(--void); opacity:0; transition:opacity .1s ease;}
.consent-row input[type="checkbox"]:checked + .consent-box{background:var(--gold); border-color:var(--gold);}
.consent-row input[type="checkbox"]:checked + .consent-box .consent-check{opacity:1;}
.consent-row input[type="checkbox"]:focus-visible + .consent-box{border-color:var(--gold-2);}
.consent-row.shake .consent-box{border-color:#e08a8a;}
.consent-row.shake{animation:consentShake .4s ease;}
@keyframes consentShake{
  0%, 100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}
.consent-text{font-size:12px; line-height:1.5; color:var(--ink-dim);}
.consent-text a{color:var(--gold-2); text-decoration:underline; text-underline-offset:2px;}
.consent-text a:hover{color:var(--gold);}

.form-divider{
  display:flex; align-items:center; gap:12px;
  margin:18px 0 14px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.12em; color:var(--ink-faint);
}
.form-divider::before, .form-divider::after{
  content:""; flex:1; height:1px; background:var(--card-border);
}

.btn-telegram{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--card-border);
  color:var(--ink); border-radius:10px; padding:14px;
  font-family:var(--f-ui); font-weight:700; font-size:13.5px; letter-spacing:0.02em;
  transition:border-color .15s ease, background .15s ease;
}
.btn-telegram:hover{border-color:#2AABEE; background:rgba(42,171,238,0.08);}
.btn-telegram svg{width:17px; height:17px; color:#2AABEE; flex-shrink:0;}

.telegram-gift{
  text-align:center; font-size:11.5px; color:var(--gold-2);
  margin-top:10px; letter-spacing:0.01em;
}
.already-row{
  margin-top:18px; font-size:13.5px; color:var(--ink-dim);
}
.already-row a{color:var(--gold-2); font-weight:600;}
.already-row a:hover{text-decoration:underline;}

/* --- trust badges --- */
.trust-row{
  margin-top:56px; padding-top:40px; border-top:1px solid var(--card-border);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
.trust-item{display:flex; align-items:flex-start; gap:12px;}
.trust-item svg{width:22px; height:22px; stroke:var(--gold); flex-shrink:0; margin-top:2px;}
.trust-title{font-family:var(--f-ui); font-weight:700; font-size:12px; letter-spacing:0.03em;}
.trust-sub{font-size:12.5px; color:var(--ink-faint); margin-top:3px;}

/* ================= HOW IT WORKS ================= */
.how-section{padding:96px 0; border-top:1px solid var(--card-border);}
.section-head{text-align:center; margin-bottom:64px;}
.section-eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:0.18em; color:var(--gold-2); margin-bottom:14px;
}
.section-title{
  font-family:var(--f-ui); font-weight:800; font-size:34px; letter-spacing:-0.005em;
}

.steps-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;}

/* Иконка и номер шага — в одну строку, номер крупный и акцентный,
   заголовок шага уже отдельной строкой ниже (было: всё вертикально
   и номер маленький, сливался с остальным текстом). */
.step-head{display:flex; align-items:center; gap:16px; margin-bottom:18px;}
.step-icon{
  width:56px; height:56px; flex-shrink:0;
  border:1px solid var(--gold); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.step-icon svg{width:24px; height:24px; stroke:var(--gold);}
.step-number{
  font-family:var(--f-mono); font-size:36px; font-weight:500; color:var(--gold);
  letter-spacing:0.01em; line-height:1;
}
.step-title{
  font-family:var(--f-ui); font-weight:800; font-size:19px; letter-spacing:0.02em; margin-bottom:12px;
}
.step-desc{font-size:14px; line-height:1.6; color:var(--ink-dim); max-width:300px;}

/* ================= FEATURES STRIP ================= */
/* Грид с фиксированным числом колонок вместо flex-wrap — чтобы
   разделительные линии между блоками были ровными вертикальными
   чертами, а не расползались хаотично при переносе на новую строку. */
.features-strip{
  border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border);
  padding:0;
}
.features-strip .wrap{padding:0 32px;}
.features-grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
}
.feature-item{
  display:flex; align-items:center; gap:12px;
  padding:32px 20px;
  border-right:1px solid var(--card-border);
}
.feature-item:last-child{border-right:none;}
.feature-item svg{width:22px; height:22px; stroke:var(--gold-2); flex-shrink:0;}
.feature-title{font-family:var(--f-ui); font-weight:700; font-size:12.5px; letter-spacing:0.02em;}
.feature-sub{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}

/* ================= FOOTER ================= */
.site-footer{padding:80px 0 0;}
.footer-top{
  display:grid; grid-template-columns:1.3fr 0.7fr 0.7fr 0.7fr 1fr; gap:40px;
  padding-bottom:56px;
}
.footer-about{
  border-right:1px solid var(--card-border);
  padding-right:36px;
}
.footer-about .logo-block{margin-bottom:18px;}
.footer-desc{font-size:13.5px; line-height:1.6; color:var(--ink-dim); max-width:320px; margin-bottom:16px;}
.footer-learn{
  font-family:var(--f-ui); font-weight:700; font-size:12.5px; letter-spacing:0.02em; color:var(--gold-2);
  display:inline-flex; align-items:center; gap:6px;
}
.footer-learn svg{width:12px; height:12px;}

.footer-col-title{
  font-family:var(--f-ui); font-weight:700; font-size:11.5px; letter-spacing:0.1em;
  color:var(--ink-faint); margin-bottom:16px;
}
.footer-col a{
  display:block; font-size:13.5px; color:var(--ink-dim); margin-bottom:12px; transition:color .15s ease;
}
.footer-col a:hover{color:var(--ink);}

/* Превью-картинка — тоже фон (было: <img> с фиксированной высотой
   110px и жёстким object-fit:cover, обрезало почти всё изображение).
   Текст лежит поверх, на градиенте снизу для читаемости — как в
   карточках экспонатов. */
.footer-preview{
  position:relative;
  min-height:172px;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background-image:
    linear-gradient(180deg, rgba(10,10,15,0) 25%, rgba(10,10,15,0.94) 100%),
    url('../landpict/card-preview-thumb.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.footer-preview-body{padding:16px; position:relative; z-index:2;}
.footer-preview-title{
  font-family:var(--f-ui); font-weight:700; font-size:11.5px; letter-spacing:0.03em; margin-bottom:6px;
}
.footer-preview-desc{
  font-size:12px; color:var(--gold-2); display:flex; align-items:center; gap:5px;
}
.footer-preview-desc svg{width:11px; height:11px;}

.footer-bottom{
  border-top:1px solid var(--card-border); padding:22px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-bottom-text{font-size:12px; color:var(--ink-faint);}
.footer-social{display:flex; gap:14px;}
.footer-social a{
  width:32px; height:32px; border:1px solid var(--card-border); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.footer-social svg{width:14px; height:14px; stroke:var(--ink-dim);}
.footer-social a:hover svg{stroke:var(--gold-2);}

/* ================= WAITLIST MODAL ================= */
.modal-overlay{
  position:fixed; inset:0; z-index:150;
  background:rgba(5,5,8,0.82); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  position:relative;
  width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
  background:var(--void-2); border:1px solid var(--card-border); border-radius:18px;
  padding:32px 28px;
}
.modal-close{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.04); border:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:center; color:var(--ink-dim);
}
.modal-close svg{width:13px; height:13px;}
.modal-close:hover{border-color:var(--gold); color:var(--gold-2);}

.modal-title{
  font-family:var(--f-ui); font-weight:800; font-size:20px; margin-bottom:22px; padding-right:30px;
}

.wl-section{margin-bottom:6px;}
.wl-label{font-size:13px; color:var(--ink-dim); margin-bottom:10px;}
.wl-code-row{display:flex; gap:8px;}
.wl-code-row input{
  flex:1; background:rgba(255,255,255,0.03); border:1px solid var(--card-border);
  border-radius:9px; padding:11px 13px; color:var(--ink); font-size:14px; font-family:var(--f-body);
}
.wl-code-row input::placeholder{color:var(--ink-faint);}
.wl-code-row button{
  flex-shrink:0; background:transparent; border:1px solid var(--gold); color:var(--gold-2);
  border-radius:9px; padding:0 18px; font-family:var(--f-ui); font-weight:700; font-size:12.5px;
}
.wl-code-row button:hover{background:rgba(199,155,99,0.1);}

.modal-divider{
  display:flex; align-items:center; gap:12px; margin:22px 0;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.12em; color:var(--ink-faint);
}
.modal-divider::before, .modal-divider::after{content:""; flex:1; height:1px; background:var(--card-border);}

.wl-intro{font-size:13px; line-height:1.6; color:var(--ink-dim); margin-bottom:18px;}

#waitlistForm{display:flex; flex-direction:column; gap:10px;}
.wl-row-2{display:flex; gap:10px;}
#waitlistForm input, #waitlistForm textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--card-border);
  border-radius:9px; padding:11px 13px; color:var(--ink); font-size:14px; font-family:var(--f-body);
}
#waitlistForm input::placeholder, #waitlistForm textarea::placeholder{color:var(--ink-faint);}
#waitlistForm textarea{resize:vertical; min-height:64px;}
#waitlistForm .btn-cta{margin-top:4px;}
#waitlistForm .btn-cta:disabled{opacity:0.55; cursor:default;}

.wl-success{
  display:none; align-items:flex-start; gap:10px;
  background:rgba(199,155,99,0.08); border:1px solid var(--gold); border-radius:12px;
  padding:16px; margin-top:16px; font-size:13px; line-height:1.6; color:var(--ink);
}
.wl-success.show{display:flex;}
.wl-success svg{width:18px; height:18px; color:var(--gold); flex-shrink:0; margin-top:1px;}

/* ================= TOAST ================= */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--void-2); border:1px solid var(--gold); color:var(--gold-2);
  font-family:var(--f-ui); font-size:13px; font-weight:600; padding:13px 22px; border-radius:100px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:200;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.err{border-color:#e08a8a; color:#e08a8a;}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .main-nav{display:none;}
  .btn-signin{display:none;}
  .nav-toggle{display:flex;}

  .hero{
    background-image:
      linear-gradient(180deg, var(--void) 0%, rgba(10,10,15,0.82) 45%, rgba(10,10,15,0.45) 100%),
      url('../landpict/hero-card-phone.jpg');
    background-position: center, top right;
  }
  .hero-overlay{
    position:static;
    display:block;
    width:70%;
    max-width:300px;
    height:auto;
    margin:0 auto 32px;
  }
  .hero h1{font-size:38px;}
  .hero-content{max-width:100%;}
  .trust-row{grid-template-columns:1fr; gap:20px;}

  .steps-row{grid-template-columns:1fr; gap:44px;}

  .features-grid{grid-template-columns:repeat(3, 1fr);}
  .feature-item{border-right:1px solid var(--card-border); border-bottom:1px solid var(--card-border);}
  .feature-item:nth-child(3n){border-right:none;}
  .feature-item:nth-child(n+4){border-bottom:none;}

  .footer-top{grid-template-columns:1fr 1fr; row-gap:36px;}
  .footer-about, .footer-preview{grid-column:1 / -1;}
  .footer-about{border-right:none; padding-right:0; border-bottom:1px solid var(--card-border); padding-bottom:32px;}
}
@media (max-width: 560px){
  .wrap{padding:0 20px;}
  .features-strip .wrap{padding:0 20px;}
  .hero{padding:40px 0 56px;}
  .hero h1{font-size:32px;}
  .section-title{font-size:26px;}
  .footer-top{grid-template-columns:1fr;}

  .features-grid{grid-template-columns:repeat(2, 1fr);}
  .feature-item{border-right:1px solid var(--card-border); border-bottom:1px solid var(--card-border); padding:24px 14px;}
  .feature-item:nth-child(2n){border-right:none;}
  .feature-item:nth-child(n+5){border-bottom:none;}
}