/*
  Arnay NewTech — общая система стилей
  Идея: путь клиента как канал. Небесно-синий — поток клиентов, золото — места, где они теряются.
  Шрифты: Literata (заголовки, серьёзный и спокойный тон), Onest (текст и интерфейс).
*/
:root{
  --mist:#E1EAEF;      /* фон страницы, прохладный */
  --paper:#FFFFFF;     /* поверхности и панели */
  --ink:#0F2733;       /* текст и тёмные полосы */
  --ink-2:#163847;     /* панели на тёмном */
  --sky:#0A87BF;       /* поток клиентов, действия */
  --sky-deep:#076A97;  /* наведение */
  --sky-tint:#D2EAF5;  /* светло-синяя полоса */
  --gold:#E2A92A;      /* места потерь */
  --muted:#3E5866;     /* второстепенный текст */
  --line:#B7C9D2;      /* разделители */
  --on-dark:#E6EEF2;   /* текст на тёмном */
  --on-dark-muted:#9DB6C2;
  --font-display:"Literata", Georgia, "Times New Roman", serif;
  --font-body:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--mist);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--mist)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;font-weight:500}
.h1-kicker{display:block;font-family:var(--font-body);font-size:1.05rem;line-height:1.4;font-weight:600;letter-spacing:0;color:var(--sky-deep);margin-bottom:16px}
.dark .h1-kicker{color:#5EC3EE}
h2{font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.15;font-weight:500}
h3{font-size:1.18rem;line-height:1.3}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{max-width:1140px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.lead{font-size:1.15rem;color:var(--muted);max-width:56ch}
.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:15px 26px;font:600 1rem var(--font-body);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-main{background:var(--sky);color:#fff}
.btn-main:hover{background:var(--sky-deep)}
.btn-quiet{color:var(--ink);padding-inline:6px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px;text-decoration-thickness:2px}
.btn-quiet:hover{text-decoration-color:var(--sky)}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(237,242,244,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
header.scrolled{border-bottom-color:var(--line)}
.hd{display:flex;align-items:center;gap:28px;padding-block:16px}
.mark{display:flex;align-items:baseline;gap:7px;text-decoration:none;white-space:nowrap}
.mark b{font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:-.02em}
.mark span{font-size:.95rem;color:var(--sky);font-weight:600}
.hd nav{display:flex;gap:26px;margin-left:auto;font-size:.97rem}
.hd nav a{text-decoration:none;color:var(--muted)}
.hd nav a:hover,.hd nav a[aria-current]{color:var(--ink)}
.hd .btn{padding:11px 20px;font-size:.95rem}
@media (max-width:880px){.hd nav{display:none}.hd{justify-content:space-between}}

section{padding-block:88px}
section.white{background:var(--paper)}
section.tint{background:var(--sky-tint)}

/* панель: один крупный блок на цветном фоне, чтобы секция читалась как целое */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:12px 36px;box-shadow:0 1px 0 var(--line)}
@media (max-width:760px){.panel{padding:4px 20px;border-radius:18px}}

/* тёмный первый экран с рисунком потоков */
.dark{background:var(--ink) url("flows.svg") center / cover no-repeat;color:var(--on-dark)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .lead,.dark .muted{color:var(--on-dark-muted)}
.dark .btn-quiet{color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.dark .btn-quiet:hover{text-decoration-color:var(--gold)}
header.on-dark{background:rgba(15,39,51,.94)}
header.on-dark.scrolled{border-bottom-color:#23404E}
header.on-dark .mark b{color:#fff}
header.on-dark .mark span{color:#5EC3EE}
header.on-dark nav a{color:var(--on-dark-muted)}
header.on-dark nav a:hover{color:#fff}
body:has(header.on-dark)::before{background:var(--ink)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:48px}
.sec-head p{color:var(--muted);max-width:52ch}
@media (max-width:820px){section{padding-block:64px}.sec-head{grid-template-columns:1fr;margin-bottom:32px}}

/* канал: путь клиента */
.channel{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 18px;margin-top:56px}
.channel::before{content:"";position:absolute;left:9px;right:var(--line-right,calc((100% - 72px) / 5 - 10.5px));top:9px;height:3px;background:var(--sky);border-radius:2px}
.st{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:40px;min-width:0}
.st::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:var(--paper);border:3px solid var(--sky)}
/* финиш пути: крупнее, с галочкой */
.st.end::before{left:-5px;top:-5px;width:31px;height:31px;background:var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px no-repeat}
.st .st-h{font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.3}
.dark .st .st-h{color:#fff}
.st .do{font-size:.92rem;color:var(--muted)}
.st .leak{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;color:var(--ink);margin-top:8px;padding-top:10px;border-top:1px dashed var(--line)}
.dark .st::before{background:var(--ink);border-color:#3BAEE0}
.dark .st.end::before{background:#2FA3D8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 17px no-repeat;border-color:#7AD6F7}
.dark .channel::before{background:#3BAEE0}
.dark .st .do{color:var(--on-dark-muted)}
.dark .st .leak{color:#F6E3B4;border-top-color:rgba(255,255,255,.18)}
.dark .st .leak i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--gold);margin-top:6px}
.flow{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
.flow .dot{position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#7AD6F7;box-shadow:0 0 0 3px rgba(122,214,247,.18),0 0 12px rgba(122,214,247,.9);will-change:transform}
.flow .dot.lost{background:var(--gold);box-shadow:0 0 0 3px rgba(226,169,42,.2),0 0 12px rgba(226,169,42,.9)}
.flow .ring{position:absolute;left:0;top:0;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;border-radius:50%;border:2px solid #7AD6F7;opacity:0;pointer-events:none}
.flow .ring.gold{border-color:var(--gold)}
/* вступление: линия прорисовывается, этапы загораются по очереди (включается скриптом) */
.channel.intro::before{transform:scaleX(0);transform-origin:left center}
.channel.intro .st{opacity:.25}
.channel.intro .st::before{transform:scale(.4)}
.channel.go::before{transform:none;transition:transform 1.8s cubic-bezier(.6,.05,.25,1)}
.channel.go .st{opacity:1;transition:opacity .6s ease calc(var(--i) * .36s + .15s)}
.channel.go .st::before{transform:none;transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .36s + .1s), box-shadow .3s}
.st .leak i{transition:transform .2s}
.st .leak i.ping{animation:ping .9s ease-out}
@keyframes ping{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(226,169,42,.7)}60%{transform:scale(1.5);box-shadow:0 0 0 8px rgba(226,169,42,0)}100%{transform:scale(1)}}

@media (max-width:900px){
  .channel{grid-template-columns:1fr;gap:28px;margin-top:40px;padding-left:40px}
  .channel::before{left:9px;right:auto;top:6px;bottom:var(--line-bottom,6px);width:3px;height:auto}
  .st{padding-top:0}
  .st::before{left:-40px;top:2px}
  .st.end::before{left:-45px;top:-3px}
    .channel.intro::before{transform:scaleY(0);transform-origin:center top}
}

/* перечни вместо карточек */
.index{border-top:1px solid var(--ink)}
.index-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:16px 40px;align-items:baseline;padding-block:28px;border-bottom:1px solid var(--line);text-decoration:none}
.index-row h3{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:500}
.index-row p{color:var(--muted)}
.index-row .state{font-size:.92rem;font-weight:600;white-space:nowrap}
.index-row .state.on{color:var(--sky)}
a.index-row:hover h3{color:var(--sky)}
@media (max-width:760px){.index-row{grid-template-columns:1fr;gap:8px}}

.defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
.defs div{padding-block:22px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px}
.defs dt,.defs h3{font-family:var(--font-display);font-weight:600;font-size:1.08rem}
.defs p{color:var(--muted)}
@media (max-width:860px){.defs{grid-template-columns:1fr}.defs div{grid-template-columns:1fr;gap:6px}}

/* этапы — реальная последовательность */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:s}
.step{display:flex;flex-direction:column;gap:10px;min-width:0;counter-increment:s}
.step::before{content:counter(s);font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--sky)}
.step p{color:var(--muted);font-size:.97rem}
.step .time{font-size:.9rem;font-weight:600;color:var(--ink)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* тёмная полоса заявки */
.band{background:var(--ink) url("flows.svg") center / cover no-repeat;color:var(--on-dark)}
.band h2{color:#fff}
.band .lead{color:#A9C0CB}
.req{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.contacts{display:flex;flex-direction:column;gap:18px;margin-top:32px}
.contacts span{display:block;font-size:.88rem;color:#A9C0CB}
.contacts b{font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}
.contacts b a{text-decoration:none}
.contacts .wa{display:block;width:max-content;margin-top:6px;color:#5EC3EE;font-weight:600;font-size:.95rem}
form{background:var(--paper);color:var(--ink);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:16px;min-width:0}
label{font-size:.9rem;font-weight:600;display:flex;flex-direction:column;gap:7px}
input,select{font:inherit;font-size:1rem;font-weight:400;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--mist);color:var(--ink);width:100%}
input:focus,select:focus{border-color:var(--sky);outline:none;box-shadow:0 0 0 3px rgba(10,135,191,.18)}
.ok{background:#E5F3FA;color:var(--sky-deep);border-radius:10px;padding:12px 14px;font-size:.93rem}
.ok.err{background:#FBF0D9;color:#7A4B00}
.ok a{color:inherit;font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{margin:-4px 0 0;font-size:.82rem;color:var(--muted, #5B7480);line-height:1.4}
input[aria-invalid="true"]{border-color:#C9861A;box-shadow:0 0 0 3px rgba(226,169,42,.25)}
button[disabled]{opacity:.7;cursor:progress}
@media (max-width:860px){.req{grid-template-columns:1fr;gap:32px}}

footer{background:var(--ink);color:#8FA9B5;font-size:.9rem;border-top:1px solid #23404E}
footer .wrap{padding-block:26px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
footer a{color:#CFE0E8}

/* ===== Объём: свет, глубина, приподнятые поверхности ===== */
:root{
  --sh-1:0 1px 2px rgba(15,39,51,.06),0 3px 8px -2px rgba(15,39,51,.08);
  --sh-2:0 1px 2px rgba(15,39,51,.05),0 10px 24px -8px rgba(15,39,51,.16),0 28px 56px -20px rgba(15,39,51,.18);
  --sh-3:0 2px 4px rgba(8,25,34,.10),0 18px 40px -10px rgba(8,25,34,.35),0 48px 90px -30px rgba(8,25,34,.45);
}
/* тёмный экран: мягкий свет сверху справа и тёплый отблеск снизу */
.dark,.band{background:
  radial-gradient(900px 520px at 88% 8%, rgba(59,174,224,.24), transparent 62%),
  radial-gradient(760px 420px at 6% 104%, rgba(226,169,42,.12), transparent 60%),
  url("flows.svg") center / cover no-repeat,
  linear-gradient(180deg,#123241 0%, var(--ink) 70%)}
/* светлые секции: лёгкий градиент, чтобы фон не был плоским */
section:not(.white):not(.tint):not(.band){background:linear-gradient(180deg,#E8EFF3 0%, var(--mist) 100%)}
section.tint{background:linear-gradient(180deg,#DDF0F9 0%, var(--sky-tint) 100%)}

/* кнопки с подсветкой и тенью */
.btn{transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-main{background:linear-gradient(180deg,#169DD8 0%,#0A82B9 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px -6px rgba(10,135,191,.6)}
.btn-main:hover{background:linear-gradient(180deg,#0F90C9 0%,#0874A6 100%);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -8px rgba(10,135,191,.7)}

/* канал: светящиеся узлы и линия-градиент */
.dark .channel::before{background:linear-gradient(90deg,#3BAEE0,#6CD0F5 60%,#3BAEE0);box-shadow:0 0 12px rgba(59,174,224,.55)}
.dark .st::before{box-shadow:0 0 0 6px rgba(59,174,224,.14),0 0 18px rgba(59,174,224,.45)}
.dark .st.end::before{box-shadow:0 0 0 7px rgba(59,174,224,.2),0 0 26px rgba(108,208,245,.8)}
@media (max-width:900px){.dark .channel::before{background:linear-gradient(180deg,#3BAEE0,#6CD0F5 60%,#3BAEE0)}}

/* приподнятые поверхности */
.panel{border:1px solid rgba(183,201,210,.7);box-shadow:var(--sh-2)}
.index{border-top:0;background:var(--paper);border-radius:24px;padding:6px 32px;box-shadow:var(--sh-2);border:1px solid rgba(183,201,210,.6)}
.index-row:last-child{border-bottom:0}
a.index-row{transition:background .15s}
a.index-row:hover{background:linear-gradient(90deg,rgba(210,234,245,.0),rgba(210,234,245,.55),rgba(210,234,245,0))}
.step{background:var(--paper);border-radius:20px;padding:24px;box-shadow:var(--sh-1);border:1px solid rgba(183,201,210,.55);transition:transform .2s ease, box-shadow .2s ease}
.step:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
form{box-shadow:var(--sh-3)}
@media (max-width:760px){.index{padding:4px 20px;border-radius:18px}}
@media (prefers-reduced-motion:reduce){.btn,.step,a.index-row{transition:none}.btn-main:hover,.step:hover{transform:none}}

/* Тарифы: общие для главной и страницы стоматологий */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.plan{padding:28px 28px 32px 0;display:flex;flex-direction:column;gap:16px;min-width:0;border-bottom:1px solid var(--line)}
.plan + .plan{padding-left:28px;border-left:1px solid var(--line)}
.plan.pick{background:var(--paper);box-shadow:inset 0 4px 0 var(--sky);padding-left:28px}
.plan h3{font-size:1.3rem}
.plan .for{color:var(--muted);font-size:.95rem;min-height:3em}
.price{font-family:var(--font-display);font-size:2.1rem;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price small{font-family:var(--font-body);font-size:1rem;color:var(--muted);font-weight:400}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.97rem}
.plan li{padding-left:20px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;border:2px solid var(--sky)}
.plan .btn{margin-top:auto;align-self:flex-start}
.offer{align-self:flex-start;background:var(--gold);color:var(--ink);font-weight:600;font-size:.9rem;padding:5px 12px;border-radius:999px}
.plan .fine{font-size:.88rem;color:var(--muted)}
.plans-note{margin-top:24px;color:var(--muted);font-size:.95rem;max-width:70ch}
@media (max-width:900px){.plans{grid-template-columns:1fr}.plan,.plan + .plan,.plan.pick{padding:28px 20px;border-left:0}}
.plan.pick{background:var(--sky-tint)}
.plans{border-top:0;background:var(--paper);border-radius:26px;box-shadow:var(--sh-2);border:1px solid rgba(183,201,210,.6);padding:0 0 0 28px;overflow:visible}
.plan{border-bottom:0}
.plan.pick{background:linear-gradient(180deg,#E3F3FB 0%,#D2EAF5 100%);box-shadow:inset 0 4px 0 var(--sky),var(--sh-3);border-radius:22px;transform:translateY(-14px);margin-bottom:-14px;border-left:0}
.plan.pick + .plan{border-left:0}
@media (max-width:900px){.plans{padding:0}.plan.pick{transform:none;margin:0}}