:root{
  /* Palette */
  --color-main:#583d8f;
  --color-main-dark:#43254D;
  --color-main-light:#a697c3;
  --color-main-light-red:#c39797;
  --dark-purple:#1a071e;
  --color-dark-bg:#212121;
  --color-alt:#607733;

  --font-main:#FBF0FF;        /* slightly purple white */
  --font-alt:#F7FFF0;         /* slightly green white */
  --font-secondary:#b1b1b1;
  --font-main-red:#fff0f0;

  /* Layout */
  --max-w:1200px;
  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-1:0 10px 30px rgba(0,0,0,.35);
  --shadow-2:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 20px rgba(0,0,0,.35);
  --glass:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* Base */
*{box-sizing:border-box}
html,body{
  height:100%
  background-color: #1a071e; /* или твой тёмный */
}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--font-main);
  background:
    radial-gradient(1200px 1200px at 20% -10%, rgba(88,61,143,.40), transparent 60%),
    radial-gradient(1000px 800px at 100% 0%, rgba(96,119,51,.20), transparent 60%),
    linear-gradient(180deg, var(--dark-purple), var(--color-dark-bg));
  overflow-x:hidden;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(farthest-side at 20% -20%, rgba(88,61,143,.45), transparent 70%),
    radial-gradient(farthest-side at 110% -10%, rgba(96,119,51,.25), transparent 70%),
    linear-gradient(180deg, var(--dark-purple), var(--color-dark-bg));
  filter:blur(12px);
  transform:scale(1.05);
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max-w); margin-inline:auto; padding:0 20px}
.pill{display:inline-flex; align-items:center; gap:.6rem; padding:.4rem .8rem; border-radius:1em; background:rgba(255,255,255,.06); color:var(--font-secondary); border:1px solid rgba(255,255,255,.08)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.2rem; border-radius:999px; font-weight:700; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(168,147,195,.25), rgba(67,37,77,.55));
  box-shadow:var(--shadow-1);
  color:var(--font-main);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 18px 40px rgba(0,0,0,.45)}
.btn.alt{background:linear-gradient(180deg, rgba(96,119,51,.55), rgba(33,33,33,.35)); color:var(--font-alt)}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--font-secondary)}
.badge{display:inline-flex; gap:.4rem; align-items:center; padding:.35rem .7rem; border-radius:999px; font-size:.85rem; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04)}
.muted{color:var(--font-secondary)}
.note{color:var(--font-secondary); font-size:.95rem}

/* Nav */
header{
position:sticky; 
top:0; 
z-index:50;
backdrop-filter:saturate(120%) blur(12px);

/* фон — на всю ширину */
background:linear-gradient(180deg, rgba(26,7,30,.85), rgba(26,7,30,.55));
border-bottom:1px solid rgba(255,255,255,.06);
}

/* контент — ограниченный container */
header .nav{
padding:12px 24px;
/* фон убираем полностью */
background:transparent;
border:0;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:.8rem; font-weight:900; letter-spacing:.2px}
.brand-logo{
  width:32px; height:32px; border-radius:9px;
  background:conic-gradient(from 0deg, var(--color-main), var(--color-alt), var(--color-main));
  box-shadow:0 4px 16px rgba(88,61,143,.55), inset 0 0 22px rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.12)
}
nav a{font-weight:600; color:var(--font-secondary)}
.nav-links{display:flex; gap:1.2rem; align-items:center}

/* Hero */
.hero{position:relative; padding:32px 0 40px}
.hero-grid{display:grid; grid-template-columns: 2fr .8fr; gap:40px; align-items:start}
.hero h1{
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  line-height:1.1; margin:16px 0 16px; letter-spacing:.1px;
  text-shadow:0 10px 40px rgba(0,0,0,.45);
}
.hero p{font-size:1.1rem; color:var(--font-main)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:18px}
.labels{  flex-wrap: wrap;
display:flex; gap:.6rem; margin:20px 0 0}
.hero-card{
  border-radius:var(--radius-xl);
  background:var(--glass); border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow-2); padding:26px; position:relative; overflow:hidden
}

/* Mic button mock */
.mic-wrap{display:flex; align-items:center; justify-content:center}
.mic{
  width:220px; height:220px; border-radius:999px; position:relative;
  background:radial-gradient(60% 60% at 50% 45%, rgba(168,147,195,.35), rgba(88,61,143,.65) 70%);
  border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 70px rgba(88,61,143,.45), inset 0 6px 30px rgba(255,255,255,.08);
}
.mic:before, .mic:after{
  content:""; position:absolute; inset:12px; border-radius:inherit;
  background:radial-gradient(40% 40% at 50% 40%, rgba(255,255,255,.16), transparent 70%);
  border:1px solid rgba(255,255,255,.08)
}
.mic svg{position:absolute; inset:0; margin:auto; width:64px; height:64px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.6))}
.pulse{
  position:absolute; inset:0; border-radius:999px; pointer-events:none;
  animation:pulse 2.6s ease-in-out infinite;
  background:radial-gradient(50% 50% at 50% 50%, rgba(168,147,195,.18), transparent 70%);
}
@keyframes pulse{
  0%{transform:scale(.9); opacity:.7}
  70%{transform:scale(1.25); opacity:.0}
  100%{transform:scale(1.25); opacity:0}
}

/* Sections */
section{padding:16px 0}
.section-head{margin-bottom:18px}
.eyebrow{font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; color:var(--font-secondary)}
h2{margin:8px 0 10px; font-size:clamp(1.6rem, 2.4vw, 2.1rem)}
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(12, 1fr);
}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.card{
  height:100%; padding:22px; border-radius:var(--radius-lg);
  background:var(--glass); border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow-2)
}
.card h3{margin:0 0 8px; font-size:1.25rem}
.ok{color:#c7ffd7}
.bad{color:var(--font-main-red)}
ul.clean{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
ul.clean li{display:flex; gap:.6rem; align-items:flex-start}
.dot{width:.62rem;height:.62rem;border-radius:999px;margin-top:.45rem;background:linear-gradient(180deg,var(--color-main),var(--color-main-dark))}
.dot.alt{background:linear-gradient(180deg,var(--color-alt),#3b4a21)}

/* Pricing */
.pricing{display:grid; gap:18px; grid-template-columns:repeat(18, 1fr)}
.plan{grid-column:span 6; padding:26px; border-radius:var(--radius-xl); background:var(--glass); border:1px solid rgba(255,255,255,.12)}
.plan.pro{outline:2px solid rgba(96,119,51,.35)}
.plan h3{margin:0 0 4px}
.price{font-weight:900; font-size:1.6rem; letter-spacing:.3px}
.strike{opacity:.65; text-decoration:line-through}

/* FAQ */
details{border:1px solid rgba(255,255,255,.10); border-radius:var(--radius-md); padding:14px 16px; background:rgba(255,255,255,.03)}
summary{cursor:pointer; font-weight:700}
details p{margin:10px 0 0}

/* Footer */
footer{padding:40px 0 60px; color:var(--font-secondary)}
.footer-grid{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}
.tiny {
  display: flex;
  align-items: center;         /* центрируем всё по высоте */
  gap: 16px;                   /* расстояние между блоками соцсети ←→ terms */
  flex-wrap: nowrap;           /* запрещаем перенос */
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:20px}
  .grid{grid-template-columns:repeat(6,1fr)}
  .col-8{grid-column:span 6}
  .col-6{grid-column:span 6}
  .col-4{grid-column:span 6}
  .pricing{grid-template-columns:repeat(6,1fr)}
  .plan{grid-column:span 6}
}

.brand-logo{
  display:inline-block;
  width:32px; height:32px;
  border-radius:9px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.15));
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.12);
}

.brand-logo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.brand span:last-child{
  font-weight:800;
  font-size:1.5em;
  margin-left:0.5rem;
  color:var(--font-main);
}

.device-preview {
  position: relative;
  width: 300px; /* масштабируй по вкусу: 300–420px идеально для hero */
  aspect-ratio: 1350 / 2760;
  margin-inline: auto;
}

.device-frame {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Экран внутри корпуса */
.device-screen {
  position: absolute;
  top: 2.4%;   /* расстояние от верхней рамки корпуса до начала экрана */
  left: 5.4%;  /* боковые поля */
  width: 90%;
  height: 95%;
  object-fit: cover;
  border-radius: 34px;  /* повторяет внутренние скругления рамки */
  z-index: 1;
  box-shadow: 0 0 0.4px rgba(255,255,255,.15);
}

details[open] summary {
  pointer-events: none;
  cursor: default;
}

details[open] summary::-webkit-details-marker {
  display: none;
}

.socials {  
  display: flex;            /* ← вот это важнее всего */
  align-items: center;         /* центр по высоте */
  gap: 12px;                   /* расстояние только между иконками */
}

.social-link {
  color: var(--font-secondary); /* иконка теперь будет этим цветом */
}

.social-link img {
  width: 22px;
  height: 22px;
  display: block;
  opacity: .75;
  transition: opacity .15s ease, transform .15s ease;
}

.social-link:hover img {
  opacity: 1;
  transform: translateY(-1px);
}

.err404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* на всю высоту экрана — красиво */
    min-height: 80vh;
}

/* 404 — жирный и большой */
.err404 h1 {
    font-size: 120px;
    font-weight: 800; /* супер-жирный */
    margin: 0;
    line-height: 1;
}

/* Not Found — тоньше, выравнивается по ширине h1 */
.err404 h3 {
    font-size: 32px;
    font-weight: 300;
    margin: 10px 0 0 0;
    line-height: 1.2;

    /* трюк: ширина по самому широкому элементу сверху */
    min-width: max-content;
}

/* language dropdown */
.lang-select {
    position: relative;
}

/* базовый стиль */
.lang-select select {
  appearance: none;
      -webkit-appearance: none;
      padding: 8px 14px 8px 12px;
      border-radius: var(--radius-md);
      border: 2px solid rgba(255, 255, 255, .12);
      background: linear-gradient(180deg, rgb(28 47 20 / 0%), rgb(148 211 158 / 0%));
      color: var(--font-main);
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color .15s 
  ease, background .15s 
  ease;
}

/* hover */
.lang-select select:hover {
    background: linear-gradient(180deg, rgb(28 47 20 / 0%), rgb(148 211 158 / 0%));
    border-color: rgba(255,255,255,.20);
    color: var(--font-main);
}

/* focus */
.lang-select select:focus {
  appearance: none;
      -webkit-appearance: none;
      padding: 8px 14px 8px 12px;
      border-radius: var(--radius-md);
      border: 3px solid rgba(255, 255, 255, .12);
      background: linear-gradient(180deg, rgb(28 47 20 / 0%), rgb(148 211 158 / 0%));
      color: var(--font-main);
      cursor: pointer;
      transition: border-color .15s 
  ease, background .15s 
  ease;
}

/* стрелочка dropdown */
.lang-select::after {
    content: "▾";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--font-secondary);
    pointer-events: none;
    opacity: .8;
}

/* LTR (по умолчанию) */
html[dir="ltr"] .lang-select::after {
    right: 12px;
    left: auto;
}

/* RTL — стрелочку переносим налево */
html[dir="rtl"] .lang-select::after {
    left: 12px;
    right: auto;
}

/* раскрытый список */
.lang-select select option {
    background: #1b1b1b;
    color: var(--font-main);
    padding: 8px;
}


.fat-numbers {
    counter-reset: num;
}
.fat-numbers li {
    counter-increment: num;
    list-style: none;
    margin-left: 1em;
    position: relative;
}
.fat-numbers li::before {
    content: counter(num) ". ";
    font-weight: bold;
    position: absolute;
    left: -1.5em;
}

.device-preview {
  position: relative;
  width: 300px; /* подгони под свой iPhone mockup */
}

.device-frame {
  width: 100%;
  display: block;
}

.slider {
}

.slide {
  position: absolute;
  top: 2.4%;   /* расстояние от верхней рамки корпуса до начала экрана */
  left: 5.4%;  /* боковые поля */
  width: 90%;
  height: 95%;
  object-fit: cover;
  border-radius: 34px;  /* повторяет внутренние скругления рамки */
  z-index: 1;
  box-shadow: 0 0 0.4px rgba(255,255,255,.15);
  opacity: 0;
  transition: opacity .6s ease;
}

.slide.active {
  opacity: 1;
}

.dots {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.dots div {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #aaa;
  opacity: 0.4;
  transition: opacity .3s;
}

.dots div.active {
  opacity: 1;
  background: #fff;
}