/* ============================================================
   Ария Огнева — страницы «Курс» (kurs.html) и «Контакты» (kontakty.html)
   Подключается после site.css. Цвета — переменные site.css (палитры: радужная по умолчанию,
   прежняя розовая — html[data-pal="pink"]; тройки RGB --glow-rgb, --edge-rgb и т. п. — там же). Поверхности — классы .card / .glass из site.css:
   их фон и тень здесь не перебиваются; подсветка и обводка — отдельным слоем .lit.
   Кристаллики — var(--crystal) / var(--crystal-lit) из site.css (фоном, не маской).
   ============================================================ */

:root{
  --soft:rgba(255,255,255,.5);
  --soft-line:rgba(var(--shade-rgb),.16);
  --cr-fill:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.44));
  --cr-shade:rgba(var(--shade-rgb),.2);
  --fc-hi:rgba(255,255,255,.7); --fc-lo:rgba(var(--shade-rgb),.05); --fc-ln:rgba(var(--edge-rgb),.2);
  --fuse-d:rgba(var(--edge-rgb),.3);
}
html{--ladder-burn:linear-gradient(90deg,#ff5fa2,#ffc84a 35%,#3fd6a6 68%,#38c3f0)}
html[data-pal="pink"]{--ladder-burn:linear-gradient(90deg,#ff3d8b,#ffd1e3)}
html[data-theme="night"]{
  --soft:rgba(255,255,255,.05);
  --soft-line:rgba(255,179,209,.16);
  --cr-fill:linear-gradient(180deg,rgba(52,18,38,.74),rgba(30,10,22,.6));
  --cr-shade:rgba(0,0,0,.55);
  --fc-hi:rgba(255,179,209,.07); --fc-lo:rgba(0,0,0,.2); --fc-ln:rgba(255,143,189,.2);
  --fuse-d:rgba(255,143,189,.26);
}

/* подсветка поверх .card: огненная обводка + свечение снизу + внешний ореол */
.lit{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(75% 60% at 50% 108%,rgba(var(--glow-rgb),.22),rgba(var(--rose-rgb),.13) 45%,transparent 72%);
  box-shadow:0 30px 70px -30px rgba(var(--glow-rgb),.7),0 0 0 6px rgba(var(--glow-rgb),.07)}
.lit::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* ---------- мелочи ---------- */
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--pink-2);text-decoration:none}
.lnk .arr{transition:transform .3s var(--ease)}
.lnk:hover .arr{transform:translateX(4px)}
.lnk--muted{font-weight:600;color:var(--ink-3)}

/* ============================================================
   КУРС
   ============================================================ */

/* ---------- первый экран ---------- */
.k-hero .kick{margin-bottom:20px}
.k-hero h1{font-size:clamp(40px,4.2vw,60px);margin-bottom:26px}
@media (min-width:901px){ .k-hero .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
.k-cover{aspect-ratio:4/5;box-shadow:0 40px 90px -40px rgba(var(--shade-rgb),.6)}
.k-cover .ph,.c-arch .ph{height:100%;aspect-ratio:auto;border:0;border-radius:0}
.k-tag{position:absolute;left:-10px;bottom:17%;z-index:5;display:grid;gap:1px;padding:12px 20px 13px 50px;border-radius:18px;
  animation:float 7s ease-in-out infinite alternate;--r0:-2deg;--r1:1deg}
.k-tag-ic{position:absolute;left:16px;top:50%;width:22px;height:24px;margin-top:-12px;background:var(--grad-fire);-webkit-mask:var(--flame-i) center/contain no-repeat;mask:var(--flame-i) center/contain no-repeat}
.k-tag b{font-family:var(--f-display);font-weight:var(--fw-display);font-size:18px;line-height:1.2}
.k-tag span{font-size:13px;color:var(--ink-2)}

/* ---------- программа: лесенка кристаллов ----------
   ПК: шесть стеклянных кристаллов-ступеней растут слева направо, под ними
   бикфордов шнур и панель открытого модуля. Телефон: аккордеон из «лежачих» кристаллов. */
.ladder{--g:16px;--cr-h:30px;--ch:12px;--base:218px;--rise:30px;--at:1;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto 64px auto;column-gap:var(--g);align-items:end}
.mod-h{--cut:polygon(0 var(--cr-h),50% 0,100% var(--cr-h),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)));
  grid-row:1;grid-column:var(--i);position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  width:100%;min-height:calc(var(--base) + (var(--i) - 1) * var(--rise));margin:0;padding:calc(var(--cr-h) + 16px) 18px 20px;
  border:0;border-radius:0;background:none;color:var(--ink);text-align:left;-webkit-tap-highlight-color:transparent;
  transition:transform .5s var(--ease);scroll-margin-top:96px}
/* тень-подложка под кристаллом (filter на самой кнопке сломал бы стекло) */
.mod-h::before{content:"";position:absolute;left:6%;right:6%;bottom:-16px;height:30px;z-index:-2;border-radius:50%;
  background:radial-gradient(closest-side,var(--cr-shade),transparent);filter:blur(6px);transition:background .5s,transform .5s var(--ease)}
/* форма: огранённая «крыша», рёбра призмы, срезанные нижние углы; тело — матовое стекло */
.mod-h .sh{position:absolute;inset:0;z-index:-1;-webkit-clip-path:var(--cut);clip-path:var(--cut);background:var(--grad-iris);
  }
.mod-h .sh::before,.mod-h .sh::after{content:"";position:absolute;inset:1.5px;-webkit-clip-path:var(--cut);clip-path:var(--cut)}
.mod-h .sh::before{background:var(--cr-fill);transition:opacity .5s var(--ease)}
.mod-h .sh::after{background:
  linear-gradient(to bottom right,transparent calc(50% - .7px),var(--fc-ln) 50%,transparent calc(50% + .7px)) 10.714% 0/44% var(--cr-h) no-repeat,
  linear-gradient(to bottom left,transparent calc(50% - .7px),var(--fc-ln) 50%,transparent calc(50% + .7px)) 89.286% 0/44% var(--cr-h) no-repeat,
  linear-gradient(180deg,var(--fc-hi),transparent) 0 0/100% var(--cr-h) no-repeat,
  linear-gradient(var(--fc-ln),var(--fc-ln)) 0 calc(var(--cr-h) - 1px)/100% 1px no-repeat,
  linear-gradient(112deg,transparent 22%,rgba(255,255,255,.34) 30%,transparent 38%) 0 var(--cr-h)/100% 100% no-repeat,
  linear-gradient(90deg,var(--fc-hi) 0 6%,var(--fc-ln) 6% calc(6% + 1px),transparent calc(6% + 1px) calc(94% - 1px),var(--fc-ln) calc(94% - 1px) 94%,var(--fc-lo) 94%) 0 var(--cr-h)/100% 100% no-repeat}
/* 07.11: рёбра призмы — на 6 % от края (было 14 %), текст отодвинут от них: на ПК грани резали названия ступеней (мама: «кристаллы наезжают на текст») */
@media (min-width:901px){ .mod-h{padding-left:21px;padding-right:21px} }
.mod-n{font-family:var(--f-display);font-style:var(--em-style);font-weight:var(--fw-display);font-size:clamp(34px,3vw,44px);line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.mod-t{font-family:var(--f-display);font-weight:var(--fw-display);font-size:clamp(17px,1.5vw,21px);line-height:1.2;text-wrap:balance}
.mod-d{margin-top:auto;padding-top:14px;font-size:13px;line-height:1.4;font-weight:600;color:var(--ink-3)}
.mod-d b{display:block;font-weight:700;color:var(--ink-2)}
.mod-x{display:none}
/* пламя над открытой ступенью */
.mod-h::after{content:"";position:absolute;left:50%;top:-30px;width:26px;height:32px;margin-left:-13px;pointer-events:none;
  background:radial-gradient(circle at 50% 72%,#fff 0 14%,#ffc2dc 30%,#ff3d8b 52%,transparent 74%);
  -webkit-mask:var(--flame-i) center/contain no-repeat;mask:var(--flame-i) center/contain no-repeat;
  opacity:0;transform:scale(.3);transform-origin:50% 100%;transition:opacity .35s,transform .5s var(--ease)}
.mod-h:hover{transform:translateY(-6px)}
.mod-h:hover::before{transform:scaleX(.9)}
.mod-h:hover .sh{background:var(--grad-fire)}
.mod-h:focus-visible{outline:2px solid var(--pink);outline-offset:6px}
.mod-h[aria-expanded="true"]{color:var(--on-fire);--fc-hi:rgba(255,255,255,.26);--fc-lo:rgba(var(--dark-rgb),.16);--fc-ln:rgba(255,255,255,.42)}
.mod-h[aria-expanded="true"]::before{background:radial-gradient(closest-side,rgba(var(--glow-rgb),.55),transparent)}
.mod-h[aria-expanded="true"] .sh{background:var(--grad-fire)}
.mod-h[aria-expanded="true"] .sh::before{opacity:0}
.mod-h[aria-expanded="true"] .mod-n{background:none;color:var(--on-fire)}
.mod-h[aria-expanded="true"] .mod-d,.mod-h[aria-expanded="true"] .mod-d b{color:var(--on-fire-2)}
.mod-h[aria-expanded="true"]::after{opacity:1;transform:none;animation:headFlick .18s steps(2) .5s infinite alternate}

/* ступени вырастают по очереди при появлении блока */
.ladder.rv .mod-h{opacity:0}
.ladder.rv.in .mod-h{opacity:1;animation:modRise 1s var(--ease) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes modRise{from{opacity:0;translate:0 48px}to{opacity:1;translate:0 0}}

/* шнур: тлеет от первой ступени до открытой, на нём кристаллики-узлы */
.ladder-fuse{grid-row:2;grid-column:1/-1;align-self:center;position:relative;height:2px;margin:0 calc((100% - 5 * var(--g)) / 12);
  background:repeating-linear-gradient(90deg,var(--fuse-d) 0 6px,transparent 6px 12px)}
.ladder-fuse::before{content:"";position:absolute;left:-6px;right:-6px;top:-8px;height:18px;opacity:.8;
  background:var(--crystal) 0 50%/12px 16px no-repeat,var(--crystal) 20% 50%/12px 16px no-repeat,var(--crystal) 40% 50%/12px 16px no-repeat,var(--crystal) 60% 50%/12px 16px no-repeat,var(--crystal) 80% 50%/12px 16px no-repeat,var(--crystal) 100% 50%/12px 16px no-repeat}
.ladder-fuse i{position:absolute;left:0;top:0;bottom:0;width:calc((var(--at) - 1) / 5 * 100%);border-radius:2px;background:var(--ladder-burn);box-shadow:0 0 12px 2px rgba(var(--glow-rgb),.6);transition:width .9s cubic-bezier(.4,.1,.3,1)}
.ladder-fuse b{position:absolute;top:50%;left:calc((var(--at) - 1) / 5 * 100%);width:28px;height:28px;margin:-21px 0 0 -14px;
  background:radial-gradient(circle at 50% 70%,#fff 0 14%,#ffc2dc 28%,#ff3d8b 46%,transparent 70%);
  -webkit-mask:var(--flame-i) center/contain no-repeat;mask:var(--flame-i) center/contain no-repeat;
  animation:headFlick .16s steps(2) infinite alternate;transition:left .9s cubic-bezier(.4,.1,.3,1)}

/* панель открытого модуля (.card) */
.mod-b{grid-row:3;grid-column:1/-1;display:none;min-width:0}
.mod-b.on{display:block}
@media (min-width:901px){ .mod-b.on.swap{animation:fpIn .55s var(--ease)} }
.mod-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px 56px;align-items:center;min-height:330px;
  padding:clamp(28px,3vw,44px) clamp(26px,3.4vw,50px);border-radius:var(--r-lg)}
.mod-main .kick{margin-bottom:12px;font-size:18px}
.mod-main h3{font-size:clamp(28px,2.6vw,38px);margin-bottom:14px}
.mod-main p{margin:0;color:var(--ink-2)}
.mod-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mod-chips span{padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--soft);box-shadow:inset 0 0 0 1px var(--soft-line)}
.mod-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mod-list li{position:relative;padding:15px 18px 15px 52px;border-radius:16px;background:linear-gradient(100deg,rgba(var(--glow-rgb),.09),rgba(169,228,239,.15));font-weight:600;font-size:16px;line-height:1.4}
.mod-list li::before{content:"";position:absolute;left:18px;top:50%;width:18px;height:24px;margin-top:-12px;background:var(--crystal-lit) center/contain no-repeat;filter:drop-shadow(0 0 4px rgba(var(--glow-rgb),.4))}
.mod-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid var(--line)}
.mod-res{margin:0;color:var(--ink-2)}
.mod-res b{color:var(--ink)}
.mod-nav{flex:none}
.mod-nav button[data-go="-1"]{transform:scaleX(-1)}
.mod-nav button[data-go="-1"]:hover{transform:scaleX(-1) translateY(-2px)}

/* ---------- формат ---------- */
.facts--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.fact-ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:15px;background:linear-gradient(135deg,rgba(var(--glow-rgb),.14),rgba(169,228,239,.3))}
.fact-ic svg{width:25px;height:25px;fill:none;stroke:var(--pink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.facts--5 .fact b{display:block;font-size:22px}
.facts--5 .fact p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* ---------- что изменится: было → стало ---------- */
.shifts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.shift{display:flex;flex-direction:column;padding:30px 26px 28px;
  transition:opacity .9s var(--ease),transform .9s var(--ease),translate .45s var(--ease);transition-delay:var(--rd,0s),var(--rd,0s),0s}
.shift:hover{translate:0 -6px}
.shift .ic{width:54px;height:54px;margin-bottom:22px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(var(--glow-rgb),.14),rgba(169,228,239,.3))}
.shift .ic svg{width:28px;height:28px;stroke:var(--pink-2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shift h3{font-size:22px;margin-bottom:18px}
.shift p{margin:0;font-size:15.5px;line-height:1.5}
.shift p>span{display:block;margin-bottom:4px;font-family:var(--f-display);font-style:var(--em-style);font-size:17px;line-height:1.2;font-weight:var(--fw-display)}
.shift .was{flex:1;color:var(--ink-3)}
.shift .now{position:relative;margin-top:24px;padding-top:24px;font-weight:600}
.shift .now>span{color:var(--pink-2)}
.shift .now::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--glow-rgb),.55) 50%,transparent)}
.shift .now::after{content:"";position:absolute;left:50%;top:-11px;width:16px;height:22px;margin-left:-8px;background:var(--crystal-lit) center/contain no-repeat;filter:drop-shadow(0 0 5px rgba(var(--glow-rgb),.55))}

/* ---------- автор ---------- */
@media (min-width:901px){ .k-author{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)} }
.k-author .about-stats{margin-bottom:32px}

/* ---------- отзывы ---------- */
.rev-top .lnk{margin-bottom:6px}
.rev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
.rev-grid figure{margin:0}
.rev-grid .ph{--ar:9/14}
.rev-grid figcaption{margin:12px 4px 0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.rev-grid figcaption b{display:block;color:var(--ink);font-size:15px}

/* ---------- тарифы ---------- */
.tariffs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1000px;margin:0 auto;align-items:stretch}
.tariff{display:flex;flex-direction:column;padding:clamp(28px,3vw,42px);border-radius:var(--r-lg)}
.tariff h3{font-size:clamp(26px,2.4vw,32px)}
.t-sub{margin:8px 0 0;color:var(--ink-2);font-size:16px}
.t-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:24px 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.t-price b{font-family:var(--f-display);font-weight:var(--fw-display);font-size:clamp(46px,4.4vw,60px);line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-price span{font-size:14px;color:var(--ink-3)}
.t-list{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:13px;flex:1;align-content:start}
.t-list li{position:relative;padding-left:34px;font-size:16px;line-height:1.45}
.t-list li::before{content:"";position:absolute;left:1px;top:0;width:18px;height:24px;background:var(--crystal) center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(var(--edge-rgb),.3))}
.tariff--hot .t-list li::before{background-image:var(--crystal-lit);filter:drop-shadow(0 0 4px rgba(var(--glow-rgb),.45))}
.t-list li.off{color:var(--ink-3)}
.t-list li.off::before{background:var(--ink-3);opacity:.6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/contain no-repeat}
.tariff .btn{width:100%;white-space:normal;text-align:center;line-height:1.25}
.tariff--hot{isolation:isolate}
.t-badge{position:absolute;top:0;right:30px;padding:7px 14px 8px;border-radius:0 0 14px 14px;background:var(--grad-fire);color:var(--on-fire);font-size:13px;font-weight:700;line-height:1.2;box-shadow:0 10px 24px -10px rgba(var(--glow-rgb),.9)}
.t-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;max-width:1000px;margin:28px auto 0;text-align:center}
.t-note p{margin:0;color:var(--ink-2)}

/* ============================================================
   КОНТАКТЫ
   ============================================================ */

/* ---------- первый экран ---------- */
.c-hero{position:relative;padding:150px 0 20px}
.c-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,80px);align-items:center}
.c-hero .kick{margin-bottom:18px}
.c-hero h1{margin-bottom:24px}
.c-photo{width:min(400px,100%);padding:22px}
.c-arch{aspect-ratio:4/5;box-shadow:0 40px 90px -44px rgba(var(--shade-rgb),.55)}
.c-arch .flame-box{height:42%}
.c-now{display:inline-flex;align-items:center;gap:11px;margin:26px 0 0;padding:10px 18px 10px 14px;border-radius:999px;font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.c-now i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ink-3)}
.c-now.on i{background:var(--pink);animation:cPulse 2s ease-out infinite}
.c-now b{color:var(--ink);font-variant-numeric:tabular-nums}
@keyframes cPulse{0%{box-shadow:0 0 0 0 rgba(var(--glow-rgb),.55)}75%,100%{box-shadow:0 0 0 10px rgba(var(--glow-rgb),0)}}

/* ---------- каналы: карточка «загорается» при наведении ---------- */
.c-chans-sec{padding-top:clamp(56px,7vw,100px)}
.chans{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.chan{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;padding:28px 26px 26px;color:var(--ink);text-decoration:none;isolation:isolate;
  transition:opacity .9s var(--ease),transform .9s var(--ease),translate .45s var(--ease);transition-delay:var(--rd,0s),var(--rd,0s),0s}
.chan--big{grid-column:span 3;padding:32px 32px 30px}
.chan .lit{opacity:0;transition:opacity .45s var(--ease)}
.chan:hover,.chan:focus-visible{translate:0 -5px;outline:none}
.chan:hover .lit,.chan:focus-visible .lit{opacity:1}
.chan-ic{position:relative;isolation:isolate;display:grid;place-items:center;width:58px;height:58px;margin-bottom:20px;border-radius:18px;background:linear-gradient(135deg,rgba(var(--glow-rgb),.13),rgba(169,228,239,.3));transition:box-shadow .45s var(--ease)}
.chan-ic::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad-fire);opacity:0;transition:opacity .45s var(--ease)}
.chan-ic svg{width:28px;height:28px;fill:none;stroke:var(--pink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.chan:hover .chan-ic,.chan:focus-visible .chan-ic{box-shadow:0 14px 28px -12px rgba(var(--glow-rgb),.9)}
.chan:hover .chan-ic::before,.chan:focus-visible .chan-ic::before{opacity:1}
.chan:hover .chan-ic svg,.chan:focus-visible .chan-ic svg{stroke:var(--on-fire)}
.chan-tag{position:absolute;top:28px;right:28px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.2;color:var(--pink-2);background:rgba(var(--glow-rgb),.1)}
.chan-name{font-size:clamp(24px,2vw,28px);margin:0 0 6px}
.chan-h{font-weight:700;font-size:15px;color:var(--pink-2);overflow-wrap:break-word}
.chan-note{display:block;margin:10px 0 22px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.chan-go{margin-top:auto;pointer-events:none}
.chan:hover .chan-go .arr,.chan:focus-visible .chan-go .arr{transform:translateX(4px)}

/* ---------- как записаться ---------- */
.route--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.route .step-n{display:block;margin-bottom:6px;font-family:var(--f-display);font-style:var(--em-style);font-size:18px;line-height:1.2;color:var(--pink-2)}
.route--3 .route-i p{margin-bottom:14px}

/* ---------- форма «Написать» (.card) ---------- */
.write{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:22px;align-items:start}
.wform{isolation:isolate;padding:clamp(28px,3.4vw,48px);border-radius:var(--r-lg)}
.wform h2{font-size:clamp(32px,3.3vw,46px)}
.wform .lead{margin:14px 0 30px}
.wf-view{transition:opacity .45s var(--ease),visibility .45s}
.wf{display:grid;gap:20px}
.wf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:grid;gap:9px;min-width:0;margin:0;padding:0;border:0}
fieldset.field{display:block}
.field>span,.field>legend{padding:0;font-size:14px;font-weight:700;color:var(--ink-2)}
.field>legend{margin-bottom:10px}
.inp{display:block;width:100%;min-height:54px;padding:14px 18px;border:1px solid var(--soft-line);border-radius:16px;background:var(--soft);color:var(--ink);
  font:500 16px/1.45 var(--f-body);outline:none;-webkit-appearance:none;appearance:none;transition:border-color .3s,box-shadow .3s,background-color .3s}
.inp::placeholder{color:var(--ink-3);opacity:1}
.inp:hover{border-color:rgba(var(--edge-rgb),.34)}
.inp:focus{border-color:rgba(var(--glow-rgb),.7);box-shadow:0 0 0 4px rgba(var(--glow-rgb),.13)}
.inp:user-invalid{border-color:rgba(var(--err-rgb),.85)}
textarea.inp{min-height:132px;resize:vertical}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:600;color:var(--ink-2);background:var(--soft);box-shadow:inset 0 0 0 1px var(--soft-line);transition:color .3s,box-shadow .3s}
.seg label:hover span{box-shadow:inset 0 0 0 1px rgba(var(--edge-rgb),.4)}
.seg input:checked+span{color:var(--on-fire);background:var(--grad-fire);box-shadow:0 12px 26px -12px rgba(var(--glow-rgb),.85),inset 0 1px 0 rgba(255,255,255,.4)}
.seg input:focus-visible+span{outline:2px solid var(--pink);outline-offset:3px}
.agree{position:relative;display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.agree input{position:absolute;left:0;top:0;width:24px;height:24px;margin:0;opacity:0;cursor:pointer}
.agree .box{position:relative;flex:none;width:24px;height:24px;border-radius:8px;background:var(--soft);box-shadow:inset 0 0 0 1.5px rgba(var(--edge-rgb),.38);transition:box-shadow .3s}
.agree .box::after{content:"";position:absolute;inset:-3px -2px 1px;background:var(--crystal-lit) center/contain no-repeat;transform:scale(0) rotate(-20deg);transition:transform .4s var(--ease)}
.agree input:checked+.box{box-shadow:inset 0 0 0 1.5px rgba(var(--glow-rgb),.7),0 6px 16px -8px rgba(var(--glow-rgb),.8)}
.agree input:checked+.box::after{transform:none}
.agree input:focus-visible~.agree-t{outline:2px solid var(--pink);outline-offset:3px;border-radius:6px}
.agree input:user-invalid~.agree-t{color:var(--pink-2)}
.agree a{color:var(--pink-2);text-underline-offset:3px}
.wf-foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:4px}
.wf-note{font-size:14px;color:var(--ink-3)}
.wf .btn.busy{pointer-events:none;animation:busy 1s ease-in-out infinite alternate}
@keyframes busy{to{opacity:.8}}

/* состояние «Сообщение отправлено» прямо в карточке */
.wf-done{position:absolute;inset:0;overflow:hidden;border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:40px clamp(24px,4vw,60px);text-align:center;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.wf-done::before{content:"";position:absolute;left:50%;top:44%;width:min(540px,120%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(var(--glow-rgb),.2),rgba(var(--rose-rgb),.13) 55%,transparent)}
.wform.sent .wf-view{opacity:0;visibility:hidden}
.wform.sent .wf-done{opacity:1;visibility:visible;transition:opacity .6s var(--ease) .25s,visibility 0s}
.done-gem{position:relative;width:84px;height:112px;margin-bottom:18px}
.done-gem::before{content:"";position:absolute;inset:0;background:var(--crystal-lit) center/contain no-repeat;filter:drop-shadow(0 16px 26px rgba(var(--glow-rgb),.45))}
.done-gem::after{content:"";position:absolute;left:50%;top:-30px;width:30px;height:38px;margin-left:-15px;transform-origin:50% 100%;
  background:radial-gradient(circle at 50% 72%,#fff 0 14%,#ffc2dc 30%,#ff3d8b 52%,transparent 74%);-webkit-mask:var(--flame-i) center/contain no-repeat;mask:var(--flame-i) center/contain no-repeat}
.done-gem i{position:absolute;right:-14px;bottom:10px;width:36px;height:36px;border-radius:50%;background:var(--grad-fire);box-shadow:0 10px 22px -8px rgba(var(--glow-rgb),.9),0 0 0 3px rgba(255,255,255,.85)}
.done-gem i::after{content:"";position:absolute;inset:9px;background:var(--on-fire);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.wform.sent .done-gem{animation:gemIn 1s var(--ease) .2s both}
.wform.sent .done-gem i{animation:flameUp .5s var(--ease) 1s both}
.wform.sent .done-gem::after{animation:flameUp .6s var(--ease) .9s both,headFlick .18s steps(2) 1.5s infinite alternate}
@keyframes gemIn{0%{opacity:0;transform:scale(.3) rotate(-30deg)}60%{opacity:1;transform:scale(1.08) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes flameUp{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.wf-done h3{font-size:clamp(30px,3vw,42px);margin-bottom:8px;outline:none}
.wf-done p{max-width:430px;margin:0 0 20px;color:var(--ink-2)}
.wf-done .embers{inset:20% 10% 40%}

/* ---------- часы ответа и документы ---------- */
.c-side{display:grid;gap:22px}
.c-side h3{font-size:clamp(22px,1.9vw,26px);margin-bottom:16px}
.hrs{list-style:none;margin:0 0 18px;padding:0}
.hrs li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.hrs li:first-child{border-top:1px solid var(--line)}
.hrs li span{color:var(--ink-2)}
.hrs li b{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hrs li.today{margin:0 -12px;padding:12px;border-radius:12px;border-bottom-color:transparent;background:linear-gradient(90deg,rgba(var(--glow-rgb),.11),rgba(var(--glow-rgb),.03))}
.hrs li.today span{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.hrs li.today span::before{content:"";flex:none;width:11px;height:15px;background:var(--crystal-lit) center/contain no-repeat;filter:drop-shadow(0 0 4px rgba(var(--glow-rgb),.5))}
.tz{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3)}
.tz b{color:var(--ink-2);font-variant-numeric:tabular-nums}
.docs-list{display:grid;margin:0 -12px 18px}
.docs-list a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;font-weight:600;font-size:15.5px;text-decoration:none;transition:background-color .3s}
.docs-list a::before{content:"";flex:none;width:22px;height:22px;background:var(--pink-2);-webkit-mask:var(--doc) center/contain no-repeat;mask:var(--doc) center/contain no-repeat}
.docs-list .arr{margin-left:auto;color:var(--ink-3);transition:transform .3s var(--ease),color .3s}
.docs-list a:hover{background:rgba(var(--glow-rgb),.07)}
.docs-list a:hover .arr{transform:translateX(4px);color:var(--pink-2)}
.req{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.45}
.req dt{color:var(--ink-3)}
.req dd{margin:0;font-weight:600;overflow-wrap:anywhere}

/* ---------- подсказка для ссылок-заглушек (только в макете) ---------- */
.i-toast{position:fixed;left:50%;bottom:24px;z-index:95;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:12px 20px 12px 16px;border-radius:999px;
  color:var(--ink);font-size:14px;font-weight:600;line-height:1.35;transform:translate(-50%,calc(100% + 40px));opacity:0;transition:transform .5s var(--ease),opacity .4s;pointer-events:none}
.i-toast i{flex:none;width:18px;height:18px;background:var(--grad-fire);-webkit-mask:var(--flame-i) center/contain no-repeat;mask:var(--flame-i) center/contain no-repeat}
.i-toast.show{transform:translate(-50%,0);opacity:1}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1080px){
  .facts--5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .facts--5 .fact{grid-column:span 2}
  .facts--5 .fact:nth-child(n+4){grid-column:span 3}
  .shifts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route--3::before{display:block}
  .chan{padding:24px 22px}
  .chan--big{padding:28px 26px}
  .chan-tag{top:24px;right:24px}
}

@media (max-width:900px){
  /* лесенка → аккордеон из лежачих кристаллов, длина растёт от модуля к модулю */
  .ladder{--cr-h:22px;--ch:9px;grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:12px}
  .mod-h{--cut:polygon(var(--ch) 0,calc(100% - var(--cr-h)) 0,100% 50%,calc(100% - var(--cr-h)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
    grid-row:auto;grid-column:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n t x" "n d x";align-items:center;column-gap:14px;row-gap:3px;
    width:calc(86% + (var(--i) - 1) * 2.8%);min-height:0;padding:16px calc(var(--cr-h) + 10px) 16px 18px}
  .mod-h:hover{transform:none}
  .mod-h::before{left:4%;right:10%;bottom:-10px;height:20px}
  .mod-h .sh::after{background:
    linear-gradient(180deg,var(--fc-hi) 0 22%,var(--fc-ln) 22% calc(22% + 1px),transparent calc(22% + 1px) calc(78% - 1px),var(--fc-ln) calc(78% - 1px) 78%,var(--fc-lo) 78%) 0 0/calc(100% - var(--cr-h)) 100% no-repeat,
    linear-gradient(var(--fc-ln),var(--fc-ln)) calc(100% - var(--cr-h)) 0/1px 100% no-repeat,
    linear-gradient(100deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%) 0 0/calc(100% - var(--cr-h)) 100% no-repeat,
    linear-gradient(90deg,transparent,var(--fc-hi)) 100% 0/var(--cr-h) 100% no-repeat}
  .mod-h::after{display:none}
  .mod-n{grid-area:n;font-size:32px}
  .mod-t{grid-area:t;font-size:18px}
  .mod-d{grid-area:d;margin:0;padding:0;font-size:12.5px}
  .mod-d b{display:inline}
  .mod-d b::after{content:" ·"}
  .mod-x{grid-area:x;display:block;position:relative;width:26px;height:26px;border-radius:50%;background:rgba(var(--glow-rgb),.1);transition:background .4s}
  .mod-x::before,.mod-x::after{content:"";position:absolute;left:8px;right:8px;top:12.2px;height:1.6px;border-radius:2px;background:var(--pink-2)}
  .mod-x::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
  .mod-h[aria-expanded="true"] .mod-x{background:rgba(255,255,255,.22)}
  .mod-h[aria-expanded="true"] .mod-x::before,.mod-h[aria-expanded="true"] .mod-x::after{background:var(--on-fire)}
  .mod-h[aria-expanded="true"] .mod-x::after{transform:rotate(0)}
  .mod-b{grid-row:auto;grid-column:1}
  .mod-in{grid-template-columns:minmax(0,1fr);gap:18px;min-height:0;margin:2px 0 8px;padding:24px 20px 22px;border-radius:var(--r)}
  .mod-main h3{font-size:26px}
  .mod-list li{padding:13px 14px 13px 46px;font-size:15px}
  .mod-list li::before{left:13px}
  .mod-foot{padding-top:16px}
  .mod-nav{display:none}
  .ladder-fuse{display:none}

  .rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tariffs{grid-template-columns:minmax(0,1fr);max-width:560px}

  .c-hero{padding:100px 0 0}
  .c-hero-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .c-photo{order:-1;width:min(290px,72vw);padding:16px}
  .chans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chan,.chan--big{grid-column:span 1}
  .chan--mail{grid-column:1/-1}
  /* маршрут шагов на телефоне — вертикальный, с пунктиром слева */
  .route--v{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .route--v::before{display:block;left:16px;right:auto;top:12px;bottom:12px;width:2px;height:auto;background:repeating-linear-gradient(180deg,rgba(var(--edge-rgb),.3) 0 6px,transparent 6px 12px)}
  .route--v .route-i{padding:0 0 0 56px}
  .route--v .route-i::before{top:0}
  .write{grid-template-columns:minmax(0,1fr)}
  .wf-row{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:560px){
  .btn .price{flex:none}
  .c-hero .cta-row .btn{padding-left:20px;padding-right:16px;gap:10px}
  .k-tag{left:-4px;bottom:12%;padding:10px 16px 11px 44px;border-radius:16px}
  .k-tag-ic{left:14px}
  .k-tag b{font-size:16px}
  .k-tag span{font-size:12px}
  .facts--5{grid-template-columns:minmax(0,1fr);gap:12px}
  .facts--5 .fact,.facts--5 .fact:nth-child(n+4){grid-column:auto;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start;padding:20px}
  .facts--5 .fact-ic{grid-row:span 3;margin:2px 0 0;width:44px;height:44px;border-radius:14px}
  .facts--5 .fact span{margin-bottom:2px}
  .facts--5 .fact b{font-size:20px}
  .facts--5 .fact p{margin-top:6px}
  .shifts{grid-template-columns:minmax(0,1fr);gap:14px}
  .shift{padding:24px 22px}
  .shift .ic{width:44px;height:44px;border-radius:14px;margin-bottom:16px}
  .shift .ic svg{width:24px;height:24px}
  .shift h3{margin-bottom:12px}
  .shift .now{margin-top:18px;padding-top:18px}
  .rev-grid{gap:12px}
  .rev-top .lnk{margin:0}
  .tariff{padding:30px 22px 24px}
  .tariff .btn{padding:0 18px;font-size:15.5px}
  .tariff .btn .arr{display:none}
  .t-badge{right:20px}
  .t-note{flex-direction:column}

  /* карточки каналов компактнее: иконка слева, круглая кнопка справа */
  .chans{grid-template-columns:minmax(0,1fr);gap:14px}
  .chan--mail{grid-column:auto}
  .chan,.chan--big{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic name go" "ic h h" "note note note";column-gap:16px;align-items:center;padding:20px}
  .chan-ic{grid-area:ic;margin:0;width:54px;height:54px}
  .chan-name{grid-area:name;margin:0;font-size:22px}
  .chan-h{grid-area:h}
  .chan-note{grid-area:note;margin:14px 0 0;font-size:14.5px}
  .chan-go{grid-area:go;width:46px;min-height:46px;height:46px;padding:0;margin:0;font-size:0;gap:0}
  .chan-tag{display:none}
  .wform{padding:28px 20px}
  .seg span{padding:0 15px;font-size:14.5px}
}

/* 06.11 контакты */
/* карточки каналов только с названием и кнопкой (у почты ещё адрес), часы ответа одной строкой.
   Свои классы (.chans--plain, .c-reply, .c-sign) — ka/kontakty.html и другие страницы не задевают. */
@media (min-width:561px){
  .chans--plain .chan-name{margin-bottom:24px}
  .chans--plain .chan--mail .chan-name{margin-bottom:6px}
  .chans--plain .chan-h{margin-bottom:24px}
}
.c-reply{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.c-reply b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* длинная подпись: переносы только после «·» (  в разметке), кристалл не сжимается и стоит у первой строки */
.c-sign{align-items:flex-start;text-wrap:balance}
.c-sign::before{flex:none;margin-top:calc((1lh - 23px) / 2)}
/* телефон: в круглой кнопке карточки видна стрелка (кристальная .btn-sm иначе съедает ширину отступами) */
@media (max-width:560px){ .chans--plain .chan-go.btn-sm{padding:0} }
/* подсказка-заглушка на телефоне: ширина по тексту, а не половина экрана (left:50% урезал её до ~195px) */
.i-toast{width:max-content}  /* подсказки-заглушки по ширине текста на всех страницах (было только на контактах) */