/* =====================================================================
   Saitum Mini App — компоненты: кнопки, стекло, сегменты, шаги, карточки.
   Стили наследуют язык public_html/assets/css (common.css, index.css).
   ===================================================================== */

/* --- Кнопки (как на сайте) --- */
.button{
  display:inline-flex;justify-content:center;align-items:center;gap:11px;
  min-height:48px;padding:12px 26px;
  border:1px solid var(--edge);border-radius:999px;
  color:var(--frost);background:rgba(186,214,247,.045);
  box-shadow:inset 0 1px 1px rgba(216,236,248,.05);
  font-size:14px;font-weight:500;line-height:1.4;
  transition:background .2s,border-color .2s,transform .2s;
}
.button:hover{background:rgba(186,214,247,.13);border-color:rgba(186,215,247,.3);transform:translateY(-2px)}
.button.primary{
  background:linear-gradient(180deg,rgba(186,214,247,.17),rgba(186,214,247,.07));
  box-shadow:inset 0 1px 1px rgba(216,236,248,.22),0 0 24px rgba(136,172,230,.045);
  color:#fff;
}
.button .arrow{font-size:17px;font-weight:400}
.text-link{display:inline-flex;gap:10px;align-items:center;font-size:14px;min-height:46px;color:var(--moon);transition:color .2s}
.text-link:hover{color:#fff}

/* --- Стекло (glass из common.css) --- */
.glass{
  border:1px solid var(--edge);border-radius:16px;
  background:rgba(12,16,29,.88);
  box-shadow:var(--glass);
  position:relative;
}
.pin::before,.pin::after{
  content:'+';position:absolute;font:12px var(--mono);color:rgba(186,215,247,.3);
  top:10px;left:12px;
}
.pin::after{left:auto;right:12px}

/* --- Сегментированный переключатель (из index.css) --- */
.segmented{
  display:flex;gap:3px;padding:4px;border-radius:999px;
  background:rgba(5,6,15,.6);
  border:1px solid rgba(186,215,247,.1);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.35);
}
.segmented button{
  flex:1;min-height:42px;padding:8px 10px;border-radius:999px;
  color:var(--fog);font-size:13.5px;font-weight:500;white-space:nowrap;
  transition:background .2s,color .2s,box-shadow .2s;
}
.segmented button[aria-selected="true"]{
  color:#fff;
  background:linear-gradient(180deg,rgba(186,214,247,.18),rgba(186,214,247,.06));
  border:1px solid rgba(216,236,248,.14);
  box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 1px rgba(216,236,248,.22);
}
.segmented button:hover{color:#fff}

/* --- Карточка тарифа (plan-preview из index.css) --- */
.plan-preview{
  padding:26px 24px 20px;border-radius:20px;margin-top:26px;
  background:linear-gradient(165deg,rgba(28,38,60,.98),rgba(10,14,26,.99));
  border-color:rgba(186,215,247,.18);
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(182,217,252,.06),inset 0 1px 0 rgba(216,236,248,.12),inset 0 0 30px rgba(182,217,252,.03);
}
.pp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pp-head h3{font-size:19px;letter-spacing:-.02em;background:var(--ice);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pp-head svg{width:22px;height:22px;color:rgba(186,215,247,.55)}
.pp-note{color:var(--moon);margin:0 0 18px}
.pp-body{min-height:158px}
.pp-price{
  display:flex;align-items:baseline;gap:8px;
  font-size:40px;letter-spacing:-.04em;line-height:1.15;
  margin:18px 0 8px;font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 0 24px rgba(182,217,252,.25));
}
.pp-price small{font-size:13px;color:var(--fog);-webkit-text-fill-color:var(--fog);letter-spacing:0;font-weight:400}
.pp-caption{font-size:13.5px;line-height:1.6;color:var(--moon)}
.pp-facts{margin:14px 0 4px;padding-top:14px;border-top:1px solid rgba(186,215,247,.08)}
.pp-facts li{position:relative;padding-left:22px;margin:8px 0;font-size:13px;color:var(--moon)}
.pp-facts li::before{content:'✓';position:absolute;left:0;color:var(--blue);font-weight:500;text-shadow:0 0 12px rgba(182,217,252,.6)}
.pp-more{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(186,215,247,.08);
  font-size:13px;color:var(--moon);transition:color .2s;
}
.pp-more:hover{color:#fff}
.pp-more span{transition:transform .25s ease}
.pp-more:hover span{transform:translateX(4px);color:var(--blue)}
.pp-noscript{padding:22px;margin-top:26px}
.pp-noscript p{font-size:13.5px}
/* Мягкая смена содержимого при переключении тарифа */
.pp-body.is-switching .pp-price,
.pp-body.is-switching .pp-caption,
.pp-body.is-switching .pp-facts{animation:pp-swap .32s ease}
@keyframes pp-swap{from{opacity:.15;transform:translateY(5px)}to{opacity:1;transform:none}}

/* --- Шаги процесса --- */
.steps{display:grid;gap:0;margin-top:30px;position:relative}
.step{display:flex;gap:16px;position:relative;padding-bottom:26px}
.step:last-child{padding-bottom:0}
.step-node{position:relative;flex:none;width:12px;display:flex;justify-content:center}
.step-node i{
  width:9px;height:9px;margin-top:5px;border-radius:50%;
  border:1px solid rgba(186,215,247,.35);background:rgba(5,6,15,.9);
  transition:background .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.step:not(:last-child) .step-node::after{
  content:'';position:absolute;top:16px;bottom:-2px;left:50%;width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(186,215,247,.22),rgba(186,215,247,.08));
}
/* Линия «прорастает» вниз, узлы зажигаются по очереди */
.js-motion .steps .step-node::after{transform:translateX(-50%) scaleY(0);transform-origin:top;transition:transform .5s ease}
.js-motion .steps.visible .step-node::after{transform:translateX(-50%) scaleY(1)}
.steps .step-node i{transition-delay:0s}
.steps.visible .step:nth-child(2) .step-node i{transition-delay:.15s}
.steps.visible .step:nth-child(3) .step-node i{transition-delay:.3s}
.steps.visible .step:nth-child(4) .step-node i{transition-delay:.45s}
.steps.visible .step .step-node i{background:var(--blue);border-color:var(--blue);box-shadow:0 0 12px rgba(182,217,252,.55)}
.step-num{color:var(--fog);margin:4px 0 8px;font-size:10.5px;letter-spacing:.09em}
.step h3{font-size:18px;margin-bottom:7px}
.step-body p{font-size:13.5px;line-height:1.65;max-width:420px}

/* --- Терминал (из index.css) --- */
.terminal{padding:0 22px 20px;margin-top:34px;font:12px/2.2 var(--mono);color:var(--fog);overflow:hidden}
.window-bar{display:flex;align-items:center;gap:6px;height:44px;border-bottom:1px solid var(--edge);margin-bottom:14px}
.window-bar i{width:6px;height:6px;background:rgba(157,167,186,.27);border-radius:50%}
.window-bar span{margin:auto;font:10px var(--mono);color:var(--fog);padding-right:22px}
.t-line{display:flex;gap:10px;align-items:baseline}
.t-line::before{content:'→';color:#8198bc;font-style:normal}
.t-line.t-done{color:var(--frost);border-top:1px solid var(--edge);margin-top:10px;padding-top:10px}
.t-line.t-done::before{content:'✓';color:var(--good)}
.t-line.t-support{font-size:10.5px;color:#acbed7}
/* Строки появляются по очереди при появлении секции */
.js-motion .terminal .t-line{opacity:0;transform:translateX(-6px);transition:opacity .45s ease,transform .45s ease}
.js-motion .terminal.visible .t-line{opacity:1;transform:none}
.js-motion .terminal.visible .t-line:nth-child(2){transition-delay:.15s}
.js-motion .terminal.visible .t-line:nth-child(3){transition-delay:.3s}

/* --- Карточки услуг: три спокойных + одна акцентная --- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
/* min-width:0 — колонка может сжиматься ниже min-content: иначе длинное слово
   «Многостраничные» распирает грид и на ширинах ≤375px даёт горизонтальный скролл */
.svc-card{padding:20px 18px 22px;min-width:0}
.svc-card .icon{width:22px;height:22px;color:var(--blue);margin-bottom:14px;filter:drop-shadow(0 0 10px rgba(182,217,252,.35))}
.svc-card h3{font-size:15.5px;margin-bottom:8px;letter-spacing:-.02em;-webkit-hyphens:auto;hyphens:auto}
.svc-card p{font-size:12.5px;line-height:1.6}
.svc-card.wide{
  background:
    radial-gradient(circle at 85% 0%,rgba(182,217,252,.1),transparent 55%),
    linear-gradient(165deg,rgba(28,38,60,.85),rgba(10,14,26,.95));
  border-color:rgba(186,215,247,.24);
  box-shadow:0 16px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(216,236,248,.14);
}
.svc-card.wide .icon{filter:drop-shadow(0 0 14px rgba(182,217,252,.5))}
.svc-card.wide h3{background:var(--ice);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.svc-card.wide p{color:var(--moon)}
.svc-integrations{margin-top:18px;color:var(--fog);text-align:left}
.svc-integrations span{color:rgba(157,167,186,.55)}

/* --- Контактный экран --- */
.contact{padding-block:72px 40px;position:relative;isolation:isolate;text-align:center;overflow:clip}
.contact::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 42% 62% at 50% 100%,rgba(52,82,135,.18),transparent 100%);
}
.cta-mark{width:44px;height:44px;color:var(--blue);margin:0 auto 20px;filter:drop-shadow(0 0 19px rgba(182,217,252,.23))}
.contact h2{font-size:clamp(27px,7.4vw,36px)}
.contact .section-copy{margin-bottom:0}
.contact-actions{display:grid;gap:12px;margin-top:30px}
.contact-card{
  display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  min-height:76px;padding:16px 18px;
  border:1px solid var(--edge);border-radius:18px;
  background:linear-gradient(180deg,rgba(193,213,240,.05),rgba(160,185,218,.02));
  box-shadow:inset 0 1px 0 rgba(216,236,248,.06);
  transition:border-color .2s,background .2s,transform .2s;
}
.contact-card:hover{border-color:rgba(186,215,247,.3);transform:translateY(-2px)}
.contact-card.primary{
  background:
    radial-gradient(circle at 12% 0%,rgba(182,217,252,.1),transparent 52%),
    linear-gradient(180deg,rgba(186,214,247,.13),rgba(186,214,247,.05));
  border-color:rgba(186,215,247,.26);
  box-shadow:inset 0 1px 0 rgba(216,236,248,.16),0 0 30px rgba(136,172,230,.07);
}
.cc-icon{
  flex:none;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(186,215,247,.16);border-radius:13px;
  background:rgba(182,217,252,.06);
  color:var(--blue);
}
.cc-icon svg{width:20px;height:20px}
.cc-icon.tg{color:#7ec3ef;background:rgba(126,195,239,.07);border-color:rgba(126,195,239,.22)}
.cc-copy{display:grid;gap:3px;min-width:0}
.cc-copy strong{font-size:15.5px;font-weight:500;color:var(--frost);letter-spacing:-.01em}
.cc-copy small{font-size:12px;color:var(--fog);line-height:1.45}
.cc-copy .mono{font-size:11px;color:var(--moon)}
.cc-arrow{margin-left:auto;font-size:19px;color:var(--fog);transition:transform .25s ease,color .25s ease}
.contact-card:hover .cc-arrow{transform:translateX(3px);color:var(--blue)}
.contact-card a[href] .cc-arrow{}
.contact-meta{margin-top:24px;display:flex;justify-content:center;align-items:center;gap:12px;color:var(--fog);flex-wrap:wrap}
.contact-meta a{min-height:34px;display:inline-flex;align-items:center;color:var(--moon);transition:color .2s}
.contact-meta a:hover{color:#fff}

/* --- Нижний футер-паспорт --- */
.mini-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  width:min(560px,calc(100% - 44px));margin:0 auto;
  padding:20px 0 max(26px,calc(var(--tg-safe-bottom) + 18px));
  font:9.5px var(--mono);letter-spacing:.1em;color:rgba(157,167,186,.55);
  border-top:1px solid var(--edge);
}
.foot-status{display:inline-flex;align-items:center;gap:7px}
.foot-status .live-dot{width:4px;height:4px}

/* --- Док для браузерного предпросмотра --- */
.dock{
  position:fixed;left:50%;bottom:max(16px,calc(var(--tg-safe-bottom) + 10px));
  transform:translateX(-50%) translateY(0);
  z-index:40;
  display:inline-flex;align-items:center;gap:10px;
  min-height:50px;padding:12px 26px;
  border:1px solid rgba(186,215,247,.22);border-radius:999px;
  background:linear-gradient(180deg,rgba(24,31,51,.96),rgba(9,12,23,.98));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  color:#fff;font-size:14px;font-weight:500;
  box-shadow:0 18px 42px rgba(0,0,0,.5),inset 0 1px 0 rgba(216,236,248,.14),0 0 30px rgba(136,172,230,.08);
  transition:opacity .25s ease,transform .25s ease;
}
.dock[hidden]{display:none}
/* Скрытие дока не зависит от .js-motion: при reduced-motion док тоже обязан прятаться */
.dock.is-hidden{opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none}

@media(max-width:380px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc-card{padding:18px 15px 20px}
}
/* Самые узкие экраны (320–339px): одна колонка, чтобы длинные слова
   («Многостраничные», «Сопровождение») переносились по границам слов */
@media(max-width:339px){
  .svc-grid{grid-template-columns:1fr}
}
@media(min-width:700px){
  .section{padding-block:76px}
  .svc-grid{gap:14px}
  .svc-card{padding:24px 22px 26px}
}