/* Deep Ocean & Gold — фирменная палитра приложения. Страница намеренно
   одноцветная по среде: тёмная в любом окружении, как и само приложение. */
:root{
  --ink:#060D18; --ground:#0B1220; --surface:#111C2E; --raise:#16233A;
  --rule:#1E2C44; --rule-soft:#152136;
  --text:#E8EEF7; --dim:#93A4BF; --faint:#61748F;
  --gold:#F59E0B; --gold-lt:#FDE68A; --gold-dim:#8A5E12;
  --gain:#22C55E; --loss:#F97066;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --pad:clamp(20px,5vw,64px);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:700; text-wrap:balance; margin:0; line-height:1.08}
p{margin:0}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

.shell{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}

/* ── служебная подпись: «выписка», а не «маркетинг» ── */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}

/* ── шапка ── */
.top{position:sticky; top:0; z-index:20; background:rgba(6,13,24,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule-soft)}
.top .shell{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto}
.brand svg{width:26px; height:26px; flex:none}
.brand span{font-family:var(--serif); font-weight:700; font-size:18px; letter-spacing:.12em}
.top nav{display:flex; gap:26px}
.top nav a{font-size:14.5px; color:var(--dim); text-decoration:none}
.top nav a:hover{color:var(--text)}
.lang{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--dim); text-decoration:none; border:1px solid var(--rule); border-radius:4px; padding:5px 9px}
.lang:hover{color:var(--gold-lt); border-color:var(--gold-dim)}
@media(max-width:820px){ .top nav{display:none} }

/* ── герой ── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--rule-soft)}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:70%;
  background:radial-gradient(60% 70% at 50% 40%, rgba(245,158,11,.13), transparent 70%);
  pointer-events:none;
}
.hero .shell{
  position:relative; display:grid; gap:clamp(36px,6vw,72px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center;
  padding-block:clamp(56px,9vw,104px);
}
@media(max-width:900px){ .hero .shell{grid-template-columns:1fr} }

h1{font-size:clamp(2.3rem,4.6vw,3.5rem); letter-spacing:-.022em; margin:18px 0 0}
h1 em{font-style:normal; color:var(--gold-lt)}
.lede{margin-top:22px; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--dim); max-width:34em}

/* ── форма подписки ── */
.capture{margin-top:34px; max-width:440px}
.capture form{display:flex; gap:8px; flex-wrap:wrap}
.capture input{
  flex:1 1 220px; min-width:0; padding:13px 15px; font:inherit; font-size:15.5px;
  color:var(--text); background:var(--surface); border:1px solid var(--rule); border-radius:9px;
}
.capture input::placeholder{color:var(--faint)}
.capture input:focus{border-color:var(--gold-dim); outline:none; box-shadow:0 0 0 3px rgba(245,158,11,.14)}
.btn{
  font:inherit; font-weight:600; font-size:15.5px; padding:13px 22px; border-radius:9px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(160deg,var(--gold-lt),var(--gold)); color:#2E1D02}
.btn-gold:hover{background:linear-gradient(160deg,#FEF3C7,#FBAF24)}
.btn-quiet{background:transparent; border-color:var(--rule); color:var(--text)}
.btn-quiet:hover{border-color:var(--faint)}
.capture .note{margin-top:11px; font-size:13.5px; color:var(--faint); line-height:1.5}
.capture .ok{margin-top:11px; font-size:14.5px; color:var(--gain)}
.capture .err{margin-top:11px; font-size:14.5px; color:var(--loss)}
.secondary{margin-top:20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.storenote{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}

/* ── живая демонстрация: задача превращается в операцию ── */
.demo{
  background:linear-gradient(180deg,var(--surface),var(--ground));
  border:1px solid var(--rule); border-radius:18px; padding:20px 20px 22px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.demo-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--rule-soft)}
.demo-head b{font-family:var(--sans); font-weight:600; font-size:14.5px}
.demo-bal{font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; color:var(--dim)}
.demo-bal.moved{color:var(--gold-lt)}
.demo-sec{padding-top:14px}
.demo-lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:9px}
.row{display:flex; align-items:center; gap:12px; padding:11px 0}
.row + .row{border-top:1px solid var(--rule-soft)}
.tick{
  width:21px; height:21px; flex:none; border-radius:6px; border:1.5px solid var(--faint);
  display:grid; place-items:center; transition:background .25s ease, border-color .25s ease;
}
.tick svg{width:12px; height:12px; stroke:#2E1D02; stroke-width:3; fill:none;
  stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:20}
.row.done .tick{background:var(--gold); border-color:var(--gold)}
.row.done .tick svg{stroke-dashoffset:0; transition:stroke-dashoffset .3s ease .08s}
.row.done .rt{color:var(--faint); text-decoration:line-through}
.rt{font-size:15px; flex:1; min-width:0; transition:color .25s ease}
.ra{font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; color:var(--dim)}
.tx{
  display:flex; align-items:center; gap:12px; padding:11px 0;
  opacity:0; transform:translateY(-8px); transition:opacity .35s ease, transform .35s ease;
}
.tx.in{opacity:1; transform:none}
.tx .dot{width:8px; height:8px; border-radius:50%; background:var(--loss); flex:none}
.tx .amt{font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; color:var(--loss)}
.demo-foot{margin-top:14px; padding-top:13px; border-top:1px solid var(--rule-soft); font-size:13.5px; color:var(--faint)}
.demo-empty{font-size:14px; color:var(--faint); padding:11px 0}

/* ── общая секция ── */
section{border-bottom:1px solid var(--rule-soft)}
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-head{max-width:44rem}
h2{font-size:clamp(1.85rem,3.6vw,2.6rem); letter-spacing:-.018em; margin-top:14px}
.sec-head p{margin-top:16px; color:var(--dim); font-size:1.05rem}

/* ── три отличия: колонки на волосяных линейках, без карточек ── */
.three{display:grid; gap:0; grid-template-columns:repeat(3,1fr); margin-top:52px; border-top:1px solid var(--rule)}
.three > div{padding:30px 28px 8px; border-left:1px solid var(--rule)}
.three > div:first-child{border-left:0; padding-left:0}
.three h3{font-size:1.32rem; margin-top:16px; letter-spacing:-.01em}
.three p{margin-top:12px; color:var(--dim); font-size:15.5px}
@media(max-width:860px){
  .three{grid-template-columns:1fr}
  .three > div{border-left:0; border-top:1px solid var(--rule); padding:26px 0 6px}
  .three > div:first-child{border-top:0}
}

/* ── лента экранов ── */
.rail{display:flex; gap:18px; overflow-x:auto; padding:44px var(--pad) clamp(48px,7vw,80px); scroll-snap-type:x mandatory; scrollbar-width:thin}
.rail figure{flex:none; width:236px; margin:0; scroll-snap-align:center}
.rail img{border-radius:14px; border:1px solid var(--rule); background:var(--surface)}
.rail figcaption{margin-top:12px; font-size:13.5px; color:var(--faint); text-align:center}

/* ── калькулятор: смысловой центр страницы ── */
.calc{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(32px,5vw,64px); margin-top:46px; align-items:start}
@media(max-width:860px){ .calc{grid-template-columns:1fr} }
.field{margin-bottom:26px}
.field label{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px}
.field .name{font-size:14.5px; color:var(--dim)}
.field .val{font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums; color:var(--gold-lt)}
input[type=range]{width:100%; height:26px; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px; background:var(--rule); border-radius:2px}
input[type=range]::-moz-range-track{height:3px; background:var(--rule); border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:17px; height:17px; margin-top:-7px; border-radius:50%; background:var(--gold); border:2px solid var(--ink)}
input[type=range]::-moz-range-thumb{width:17px; height:17px; border-radius:50%; background:var(--gold); border:2px solid var(--ink)}
.readout{border-left:2px solid var(--gold-dim); padding-left:clamp(20px,3vw,34px)}
.big{
  font-family:var(--serif); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(3rem,8.5vw,5.4rem); line-height:1; letter-spacing:-.03em; color:var(--gold-lt);
}
.big-sub{margin-top:14px; font-size:1.02rem; color:var(--dim); max-width:26em}
.split{display:flex; gap:34px; margin-top:30px; flex-wrap:wrap}
.split div span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:7px}
.split div b{font-family:var(--serif); font-weight:500; font-size:1.5rem; font-variant-numeric:tabular-nums}
.calc-note{margin-top:28px; font-size:13.5px; color:var(--faint); max-width:34em}

/* ── возможности ── */
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:36px 44px; margin-top:48px}
.feats h3{font-size:1.05rem; font-family:var(--sans); font-weight:600; letter-spacing:0}
.feats ul{margin:14px 0 0; padding:0; list-style:none}
.feats li{position:relative; padding-left:17px; margin-bottom:9px; font-size:15px; color:var(--dim)}
.feats li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--gold-dim)}

/* ── приватность ── */
.privacy{background:var(--ground)}
.privacy .shell{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center}
@media(max-width:860px){ .privacy .shell{grid-template-columns:1fr} }
.privacy ul{margin:26px 0 0; padding:0; list-style:none}
.privacy li{display:flex; gap:13px; padding:13px 0; border-top:1px solid var(--rule-soft); font-size:15.5px; color:var(--dim)}
.privacy li b{color:var(--text); font-weight:600}
.privacy li i{font-style:normal; color:var(--gold); flex:none; font-family:var(--mono); font-size:13px; padding-top:2px}

/* ── подвал ── */
footer{padding-block:52px 60px; color:var(--faint); font-size:14px}
footer .shell{display:flex; gap:28px 40px; flex-wrap:wrap; justify-content:space-between}
footer a{color:var(--dim); text-decoration:none}
footer a:hover{color:var(--text)}
.flinks{display:flex; gap:22px; flex-wrap:wrap}
.langs{font-family:var(--mono); font-size:12px; letter-spacing:.05em}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ── вопросы: волосяные линейки, без аккордеона — так их видит и поиск ── */
.faq{margin-top:46px; border-top:1px solid var(--rule)}
.qa{padding:26px 0; border-bottom:1px solid var(--rule-soft); display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(20px,4vw,48px)}
.qa h3{font-size:1.16rem; letter-spacing:-.008em}
.qa p{color:var(--dim); font-size:15.5px}
@media(max-width:760px){ .qa{grid-template-columns:1fr; gap:12px} }