/* Arnas — общий стиль сайта.
   Палитра и шрифты взяты из приложения: оно тёмное всегда, поэтому и сайт
   намеренно однотемный, без светлого варианта. */

:root{
  --bg-top:#0B0E10;
  --bg-bottom:#0C1416;
  --card:#13181B;
  --card-line:#1E282B;
  --mint:#5EEAD4;
  --mint-dim:#3FBFAC;
  --ember:#FF9E7A;
  --ink:#EAF2F1;
  --ink-soft:#AFC1C0;
  --muted:#7E9291;
  --maxw:940px;
  --readw:720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ── шапка ───────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:20;
  background:rgba(11,14,16,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--card-line);
}
.top .row{
  max-width:var(--maxw); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:18px; justify-content:space-between;
}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); min-width:0}
.logo img{width:34px; height:34px; border-radius:9px; display:block; flex:none}
.logo b{font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:17px; letter-spacing:-.01em}
.nav{display:flex; align-items:center; gap:20px; flex:none}
.nav a{color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:500; white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--mint)}

/* переключатель языка */
.lang{position:relative; flex:none}
.lang button{
  font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft);
  background:transparent; border:1px solid var(--card-line); border-radius:999px;
  padding:6px 13px; cursor:pointer; display:flex; align-items:center; gap:7px;
}
.lang button:hover{border-color:var(--mint-dim); color:var(--mint)}
.lang button:focus-visible{outline:2px solid var(--mint); outline-offset:2px}
.lang ul{
  position:absolute; right:0; top:calc(100% + 8px); margin:0; padding:6px; list-style:none;
  background:var(--card); border:1px solid var(--card-line); border-radius:12px;
  min-width:172px; box-shadow:0 18px 40px rgba(0,0,0,.5); display:none;
}
.lang.open ul{display:block}
.lang li button{
  width:100%; border:0; border-radius:8px; justify-content:flex-start;
  padding:8px 11px; font-weight:500; color:var(--ink-soft);
}
.lang li button:hover{background:rgba(94,234,212,.10); color:var(--mint)}
.lang li button[aria-current="true"]{color:var(--mint); font-weight:600}

/* ── общая раскладка ─────────────────────────────────── */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.doc{max-width:var(--readw)}

h1{
  font-family:Unbounded,Inter,sans-serif; font-weight:700;
  font-size:clamp(32px,6vw,52px); line-height:1.1; letter-spacing:-.025em;
  margin:0 0 16px; text-wrap:balance;
}
h2{
  font-family:Unbounded,Inter,sans-serif; font-weight:500;
  font-size:clamp(21px,3vw,26px); line-height:1.28; letter-spacing:-.015em;
  margin:0 0 14px; text-wrap:balance;
}
h3{font-family:Inter,sans-serif; font-weight:600; font-size:18px; line-height:1.4; margin:0 0 10px}
p{margin:0 0 14px; color:var(--ink-soft)}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 14px; padding-left:22px; color:var(--ink-soft)}
li{margin-bottom:7px}
li:last-child{margin-bottom:0}
strong{color:var(--ink); font-weight:600}
a{color:var(--mint); text-decoration-thickness:1px; text-underline-offset:2px}
code,.path{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:var(--card); border:1px solid var(--card-line);
  padding:1px 7px; border-radius:6px; color:var(--ink); white-space:nowrap;
}

/* ── карточки ────────────────────────────────────────── */
.card{
  background:var(--card); border:1px solid var(--card-line);
  border-radius:18px; padding:24px;
}
.accent{
  background:rgba(94,234,212,.07);
  border:1px solid rgba(94,234,212,.28);
  border-radius:16px; padding:22px 24px;
}
.accent strong{color:var(--mint)}

/* ── подвал ──────────────────────────────────────────── */
footer{
  border-top:1px solid var(--card-line); margin-top:80px;
  padding:34px 0 64px; color:var(--muted); font-size:14.5px;
}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:flex-start}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--mint)}
footer p{color:inherit; margin:0 0 8px; max-width:52ch}

/* язык: показываем только активный */
[data-l]{display:none}
[data-l].on{display:block}
span[data-l].on,a[data-l].on{display:inline}

@media (max-width:640px){
  body{font-size:16px}
  .top .row{padding:11px 18px; gap:12px}
  .nav{gap:14px}
  .nav a{font-size:13.5px}
  .wrap{padding:0 18px}
}
@media (max-width:430px){
  .nav a[data-hide-sm]{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* ── лендинг: герой с экраном ───────────────────────── */
.hero{padding:64px 0 8px}
.hero-grid{display:grid; gap:40px; align-items:center; grid-template-columns:1fr}
.hero h1{margin-bottom:18px}
.hero .sub{font-size:clamp(17px,2.3vw,20px); color:var(--ink-soft); line-height:1.55; margin:0 0 24px; max-width:32ch}
.badge{
  display:inline-block; font-size:13.5px; font-weight:600; letter-spacing:.02em;
  color:var(--mint); background:rgba(94,234,212,.10);
  border:1px solid rgba(94,234,212,.3); border-radius:999px; padding:7px 16px;
}
.phone{
  width:100%; max-width:280px; height:auto; display:block; border-radius:24px;
  border:1px solid var(--card-line);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(94,234,212,.06);
}
.hero .phone{margin:0 auto}
@media (min-width:860px){
  .hero-grid{grid-template-columns:1.15fr .85fr; gap:56px}
  .hero .sub{margin-bottom:26px}
}

/* ── секции ─────────────────────────────────────────── */
.sec{margin-top:88px}
.sec > h2{max-width:20ch}
.sec .lead{max-width:56ch; font-size:17.5px}
.kicker{color:var(--mint); font-weight:600}

/* ── карточки-отрывки ───────────────────────────────── */
.excerpts{display:grid; gap:16px; margin-top:26px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.ex{background:var(--card); border:1px solid var(--card-line); border-radius:18px; padding:22px 24px}
.ex .day{
  font-family:Inter,sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mint); margin:0 0 8px;
}
.ex h3{
  font-family:Unbounded,Inter,sans-serif; font-weight:500; font-size:17px;
  letter-spacing:-.01em; margin:0 0 12px; color:var(--ink);
}
.ex blockquote{margin:0; color:var(--ink-soft); font-size:16px; line-height:1.6}
.ex blockquote strong{color:var(--ink)}

/* ── полоса скриншотов ──────────────────────────────── */
.shots{
  display:grid; gap:20px; margin-top:28px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.shot figure{margin:0}
.shot img{width:100%; max-width:260px; height:auto; display:block; margin:0 auto 14px;
  border-radius:20px; border:1px solid var(--card-line); box-shadow:0 18px 42px rgba(0,0,0,.5)}
.shot figcaption{color:var(--muted); font-size:14.5px; line-height:1.5; text-align:center; max-width:30ch; margin:0 auto}

/* ── моменты ────────────────────────────────────────── */
.moments{display:grid; gap:0; margin-top:26px}
.moment{border-top:1px solid var(--card-line); padding:22px 0; display:grid; gap:6px 28px; grid-template-columns:1fr}
.moment h3{
  font-family:Unbounded,Inter,sans-serif; font-weight:500; font-size:17px;
  letter-spacing:-.01em; margin:0; color:var(--ink);
}
.moment p{margin:0; font-size:16px}
@media (min-width:760px){ .moment{grid-template-columns:minmax(220px,.8fr) 1.2fr} }

/* ── финал ──────────────────────────────────────────── */
.final{margin-top:88px; text-align:center; padding:48px 24px; }
.final h2{max-width:none}
.final p{max-width:44ch; margin-left:auto; margin-right:auto}

/* ── как это работает: три шага ─────────────────────── */
.steps{list-style:none; margin:26px 0 0; padding:0; counter-reset:step;
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{
  counter-increment:step; position:relative;
  background:var(--card); border:1px solid var(--card-line); border-radius:18px;
  padding:24px 24px 22px; margin:0;
}
.step::before{
  content:counter(step); display:block; margin-bottom:12px;
  font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:15px;
  color:var(--bg-top); background:var(--mint); width:28px; height:28px;
  border-radius:8px; display:grid; place-items:center;
}
.step h3{font-family:Unbounded,Inter,sans-serif; font-weight:500; font-size:17px;
  letter-spacing:-.01em; margin:0 0 8px; color:var(--ink)}
.step p{margin:0; font-size:16px}

/* ── таблица планов ─────────────────────────────────── */
.tablewrap{overflow-x:auto; margin-top:26px; -webkit-overflow-scrolling:touch}
table.plans{
  width:100%; min-width:420px; border-collapse:collapse;
  background:var(--card); border:1px solid var(--card-line); border-radius:18px;
  overflow:hidden; font-size:16px;
}
table.plans th, table.plans td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--card-line)}
table.plans tbody tr:last-child th, table.plans tbody tr:last-child td{border-bottom:0}
table.plans thead th{
  font-family:Unbounded,Inter,sans-serif; font-weight:500; font-size:15px;
  color:var(--ink); text-align:center; width:110px;
}
table.plans thead th:last-child{color:var(--mint)}
table.plans tbody th{font-weight:400; color:var(--ink-soft)}
table.plans tbody td{text-align:center; color:var(--ink-soft); font-size:15px}
table.plans .yes{color:var(--mint); font-weight:700; font-size:17px}
table.plans .no{color:var(--muted)}
.note-small{font-size:15px; color:var(--muted); margin-top:16px}