@font-face{font-family:"Unbounded";src:url(fonts/unbounded-cyrillic.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";src:url(fonts/unbounded-latin.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url(fonts/manrope-cyrillic.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrainsmono-cyrillic.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrainsmono-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";src:url(fonts/onest-cyrillic.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url(fonts/onest-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2212,U+FEFF,U+FFFD}

/* Макет: небо над «облачной» площадкой — сверху выбор направления, ниже предпросмотр сайта с живым телефоном. */
:root{
  --sky-top:#cfe8fb; --sky-mid:#e9f4fd; --bg:#f6fafe; --card:#ffffff; --line:#dce8f3;
  --ink:#0b2747; --ink-2:#46607d; --azure:#1f7ae0; --azure-deep:#0b4aa6; --sun:#ffd27a; --cloud:rgba(255,255,255,.75);
  --soon:#8aa2bb;
  --font-display:"Unbounded",system-ui,sans-serif; --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:22px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sky-top:#071a33; --sky-mid:#0b2240; --bg:#081629; --card:#0f2440; --line:#1c3657;
  --ink:#eaf3fc; --ink-2:#9db4cc; --azure:#5aa8ff; --azure-deep:#8cc4ff; --sun:#ffd27a; --cloud:rgba(120,170,230,.10); --soon:#6f87a2; color-scheme:dark}}
:root[data-theme="dark"]{
  --sky-top:#071a33; --sky-mid:#0b2240; --bg:#081629; --card:#0f2440; --line:#1c3657;
  --ink:#eaf3fc; --ink-2:#9db4cc; --azure:#5aa8ff; --azure-deep:#8cc4ff; --sun:#ffd27a; --cloud:rgba(120,170,230,.10); --soon:#6f87a2; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;margin:0;text-wrap:balance;line-height:1.12}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--azure);outline-offset:3px;border-radius:8px}

/* шапка */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--sky-top)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:color-mix(in srgb,var(--sky-top) 70%,transparent)}
.top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.logo{font-family:var(--font-display);font-weight:700;letter-spacing:.16em;font-size:18px;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--sun) 19% 100%);box-shadow:0 0 18px rgba(255,200,90,.7)}
.nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:15px;color:var(--ink-2)}
.nav a{text-decoration:none}.nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 20px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .15s,background .2s}
.btn:active{transform:scale(.98)}
.btn.main{background:var(--azure);color:#fff}.btn.main:hover{background:var(--azure-deep)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
@media (max-width:820px){.nav{display:none}.top .btn{margin-left:auto;padding:10px 16px}}

/* небо */
.sky{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 60%,var(--bg));padding-block:40px 56px}
.cloud{position:absolute;border-radius:50%;background:var(--cloud);filter:blur(28px);animation:drift 38s linear infinite alternate}
.cloud.c1{width:520px;height:180px;top:30px;left:-120px}
.cloud.c2{width:420px;height:150px;top:150px;right:-140px;animation-duration:46s}
.cloud.c3{width:300px;height:110px;bottom:40px;left:40%;animation-duration:52s}
@keyframes drift{to{transform:translateX(90px)}}
.hero{position:relative;display:grid;gap:14px;max-width:760px}
.eyebrow{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--azure)}
.hero h1{font-size:clamp(30px,5.4vw,58px)}
.hero p{margin:0;font-size:clamp(16px,2vw,19px);color:var(--ink-2);max-width:620px}

/* направления */
.dirs{position:relative;margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.dirs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dir{position:relative;text-align:left;border:0;background:var(--card);border-radius:var(--r);padding:18px 18px 16px;cursor:pointer;display:grid;gap:6px;
  box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(11,39,71,.35);transition:transform .2s,box-shadow .2s;min-width:0}
.dir:hover{transform:translateY(-2px)}
.dir[aria-pressed="true"]{box-shadow:0 0 0 2px var(--azure),0 14px 34px -16px rgba(31,122,224,.55)}
.dir svg{width:30px;height:30px;color:var(--azure)}
.dir b{font-family:var(--font-display);font-weight:500;font-size:17px}
.dir span{font-size:14px;color:var(--ink-2)}
.tag{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.tag.on{background:#16a36a;color:#fff}.tag.off{background:color-mix(in srgb,var(--soon) 18%,transparent);color:var(--soon)}
.dir.soon svg{color:var(--soon)}

/* предпросмотр */
.section{padding-block:64px}
.sec-head{display:grid;gap:10px;margin-bottom:28px;max-width:720px}
.sec-head h2{font-size:clamp(24px,3.6vw,38px)}
.sec-head p{margin:0;color:var(--ink-2)}
.fitting{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.panel{background:var(--card);border-radius:var(--r);padding:22px;display:grid;gap:22px;box-shadow:0 1px 0 var(--line)}
.ctl{display:grid;gap:10px}
.ctl>label,.ctl>.lbl{font-weight:700;font-size:14px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{border:0;border-radius:16px;padding:12px 10px;background:var(--bg);cursor:pointer;display:grid;gap:8px;justify-items:center;font-weight:600;font-size:14px;box-shadow:inset 0 0 0 1.5px var(--line)}
.seg button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--azure)}
.mini{width:100%;height:44px;border-radius:10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:6px}
.mini i{border-radius:6px}
.mini.light{background:#fff;border:1px solid #e6e8ec}.mini.light i{background:#f4f5f7}
.mini.dark{background:#0f0f11}.mini.dark i{background:#1b1b1f}
.mini.warm{background:#fbf6ee;border:1px solid #eadfcf}.mini.warm i{background:#f3eadc}
.colors{display:flex;flex-wrap:wrap;gap:8px}
.colors button{width:38px;height:38px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--line);cursor:pointer}
.colors button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--azure)}
.field input{width:100%;border:0;border-radius:14px;padding:13px 14px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line);font:inherit;color:var(--ink)}
.field input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--azure)}
.note{font-size:13px;color:var(--ink-2);margin:0}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.inc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.inc li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.inc li::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--azure)}
@media (max-width:520px){.inc{grid-template-columns:1fr}}

/* телефон */
.phone-col{display:grid;justify-items:center;gap:12px;position:sticky;top:84px}
/* мобильная: сначала настройки, телефон ниже и без «прилипания» — иначе он закрывает переключатели */
@media (max-width:900px){.fitting{grid-template-columns:1fr;gap:24px}.phone-col{position:static}.phone{width:280px}}
.phone{width:320px;max-width:100%;aspect-ratio:9/19;border-radius:44px;padding:10px;background:#0a0a0c;box-shadow:0 30px 60px -24px rgba(11,39,71,.55),inset 0 0 0 2px #2a2a30}
.screen{position:relative;width:100%;height:100%;border-radius:35px;overflow:hidden;font-family:"Onest",system-ui,sans-serif;
  --bg:#fff;--surf:#f4f5f7;--text:#141416;--muted:#74767e;--brand:#F2542D;--on:#fff;background:var(--bg);color:var(--text);transition:background .3s,color .3s}
.screen.dark{--bg:#0f0f11;--surf:#1b1b1f;--text:#f4f4f6;--muted:#9a9ba3}
.screen.warm{--bg:#fbf6ee;--surf:#f3eadc;--text:#2b1d14;--muted:#86725f}
.scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;padding-bottom:70px}
.scroll::-webkit-scrollbar{display:none}
.s-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:30px 12px 8px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
.s-mark{width:28px;height:28px;border-radius:9px;background:var(--brand);color:var(--on);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.s-name{font-weight:700;font-size:13px;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-name small{display:block;font-weight:400;font-size:10px;color:var(--muted)}
.s-cart{margin-left:auto;background:var(--brand);color:var(--on);border-radius:999px;padding:6px 10px;font-size:11px;font-weight:700;flex:none}
.s-tabs{display:flex;gap:5px;padding:4px 12px 8px;overflow:hidden}
.s-tabs span{font-size:11px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--surf);white-space:nowrap}
.s-tabs span.on{background:var(--text);color:var(--bg)}
.s-tabs.warm span.on{background:var(--brand);color:var(--on)}
.s-h{font-weight:800;font-size:16px;padding:6px 12px 8px}
.s-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;padding:0 12px}
.s-card .ph{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--brand) 12%,var(--bg))}
.s-card img{width:100%;height:100%;object-fit:cover;display:block}
.s-plus{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:50%;border:0;background:var(--bg);color:var(--text);font-size:18px;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.s-plus.in{background:var(--brand);color:var(--on)}
.s-price{display:flex;justify-content:space-between;align-items:baseline;margin-top:5px}
.s-price b{font-size:13px}.s-price small{font-size:10px;color:var(--muted)}
.s-title{font-size:11.5px;line-height:1.25}
.s-dock{position:absolute;left:10px;right:10px;bottom:12px;display:flex;align-items:center;gap:8px;background:var(--brand);color:var(--on);border-radius:999px;padding:10px 14px;font-size:12px;font-weight:700;
  transform:translateY(80px);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.s-dock.show{transform:none}
.s-dock span:last-child{margin-left:auto}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:90px;height:22px;border-radius:999px;background:#0a0a0c;z-index:5}

/* тарифы */
.plan-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);margin:0 0 16px}
.plan-switch button{border:0;font:inherit;font-weight:600;font-size:15px;padding:10px 20px;border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.plan-switch button[aria-pressed="true"]{background:var(--azure);color:#fff}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.plans{grid-template-columns:1fr}.plan:not(.best){display:none}.plan-switch{display:flex}.plan-switch button{flex:1;padding:10px 8px}}
.plan{cursor:pointer;transition:box-shadow .2s,transform .2s;background:var(--card);border-radius:var(--r);padding:22px;display:grid;gap:12px;align-content:start;box-shadow:0 1px 0 var(--line)}
.plan.best{box-shadow:0 0 0 2px var(--azure)}
.plan h3{font-size:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plan .tag{font-family:var(--font-body,inherit);font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--azure);color:#fff}
.plan.best{transform:translateY(-2px)}
.price{font-family:var(--font-display);font-size:15px;color:var(--ink-2)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.plan li{display:flex;gap:10px}
.plan li::before{content:"✓";color:var(--azure);font-weight:700}

/* шаги */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;padding:20px;border-radius:var(--r);background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 70%,var(--sky-mid)));display:grid;gap:8px}
.step::before{content:counter(s);font-family:var(--font-display);font-size:28px;color:var(--azure)}
.step b{font-size:16px}.step span{font-size:14px;color:var(--ink-2)}

.soon-box{background:var(--card);border-radius:var(--r);padding:28px;display:grid;gap:12px;max-width:640px;box-shadow:0 1px 0 var(--line)}
.soon-box h3{font-size:22px}
footer{padding-block:36px 48px;color:var(--ink-2);font-size:14px;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.linkbtn{border:0;background:none;padding:0;cursor:pointer;color:var(--azure);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tight{padding-top:0!important}
.proto{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* ---------- Заставка при входе (небо над морем, WebGL), версия 2 ---------- */
:root{--i-sky-deep:#0b4aa6;--i-sky-mid:#3f8fd8;--i-sky-haze:#bfe0f5;--glass:rgba(255,255,255,.14);--glass-edge:rgba(255,255,255,.55);
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace}
body.intro-open{overflow:hidden}
/* ---------- Заставка ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: linear-gradient(180deg, var(--i-sky-deep), var(--i-sky-mid) 55%, var(--i-sky-haze) 75%, #1d4f78 76%, #12395c);
  transition: opacity 1.1s ease;
}
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hud {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 24px;
  transition: opacity .9s ease, transform 2.4s cubic-bezier(.5,0,.2,1), filter .9s ease;
}
.is-entering .hud { opacity: 0; transform: translateY(-6vh) scale(1.06); filter: blur(6px); transition-delay: .5s, 0s, .5s; }
.center {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(20px, 4vh, 34px);
  text-align: center;
  transform: translateY(-6vh);
}
.orbit {
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(118vw, 760px);
  max-width: 118vw;
  aspect-ratio: 3.4 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.orbit ellipse { fill: none; stroke: #fff; }
.orbit .o1 { stroke-opacity: .4; stroke-width: 1; }
.orbit .o2 { stroke-opacity: .28; stroke-width: 1; stroke-dasharray: 2 10; animation: dash 36s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -480; } }

.wordmark {
  position: relative;
  margin: 0 -.14em 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 10.5vw, 6.2rem);
  letter-spacing: .14em;
  color: #fff;
  line-height: 1;
  overflow: hidden;
}
.wm-wrap { filter: drop-shadow(0 2px 18px rgba(8, 50, 110, .45)); }
.wordmark::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent);
  transform: skewX(-18deg) translateX(-120%);
  mix-blend-mode: overlay;
}
.is-entering .wordmark::after { animation: sweep 1.2s .1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sweep { to { transform: skewX(-18deg) translateX(560%); } }

.tagline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(.68rem, 2.6vw, .8rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 12px rgba(8, 50, 110, .5);
}

.enter {
  position: relative;
  font: 600 1rem/1 var(--font-body);
  letter-spacing: .06em;
  color: #fff;
  padding: 18px 42px;
  border-radius: 999px;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 40px rgba(8, 50, 110, .3), inset 0 1px 0 rgba(255,255,255,.5);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.enter::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.45);
  animation: pulse 3.2s ease-out infinite;
}
@keyframes pulse { 0% { opacity: .8; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.18); } }
.enter:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.enter:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.is-entering .enter { pointer-events: none; }

.corner {
  position: absolute;
  display: flex;
  gap: 10px;
  align-items: center;
  transition: opacity .6s ease;
}
.is-entering .corner { opacity: 0; }
.corner--top {
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
}
.corner--bottom {
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 .78rem/1 var(--font-body);
  color: #fff;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.chip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.chip svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .orbit .o2, .enter::before { animation: none; }
  .is-entering .wordmark::after { animation: none; }
  .hud { transition: opacity .4s ease; }
  .is-entering .hud { transform: none; filter: none; transition-delay: 0s; }
  .intro { transition-duration: .5s; }
}

/* повторный визит: заставку не показываем (класс ставит assets/gate.js до отрисовки) */
html.seen #intro{display:none}
html.seen body.intro-open{overflow:auto}
.nav .login{color:var(--azure)}

/* телефон: короткие подписи в шапке, вход для клиентов на виду, метки направлений не наезжают на значки */
.m-login,.top .btn .sm{display:none}
@media (max-width:820px){
  .m-login{display:inline-block;margin-left:auto;font-weight:700;font-size:15px;color:var(--azure);text-decoration:none;padding:8px 6px}
  .top .btn{margin-left:0}
  .top .btn .lg{display:none}.top .btn .sm{display:inline}
}
@media (max-width:560px){
  .dir{padding:14px 14px 14px}
  .dir .tag{position:static;justify-self:start;margin-bottom:2px}
  .dir svg{display:none}
  .dir b{font-size:15px}
  .dir span:not(.tag){font-size:13px}
}
.dir{align-content:start}
@media (max-width:560px){
  .top .wrap{gap:8px}
  .logo{font-size:15px;letter-spacing:.12em;gap:8px}
  .logo i{width:22px;height:22px}
  .top .btn{padding:9px 14px}
}

/* демо-телефон: вкладки и «− N +» */
.s-tabs{overflow-x:auto;scrollbar-width:none}
.s-tabs::-webkit-scrollbar{display:none}
.s-tabs button{flex:none;border:0;font:inherit;font-size:11px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--surf);color:var(--text);white-space:nowrap;cursor:pointer}
.s-tabs button.on{background:var(--text);color:var(--bg)}
.s-tabs.warm button.on{background:var(--brand);color:var(--on)}
.s-ctl{position:absolute;right:6px;bottom:6px}
.s-ctl .s-plus{position:static}
.s-step{display:flex;align-items:center;background:var(--bg);border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.s-step button{width:26px;height:28px;border:0;background:none;color:var(--brand);font-size:16px;font-weight:700;cursor:pointer;padding:0}
.s-step span{min-width:14px;text-align:center;font-size:12px;font-weight:700;color:var(--text)}

/* Стройка: мини-сайт в телефоне */
.screen.biz{--brand:#3DDC97;--on:#141416;background:#F4F7FB;color:#0B1B33}
.b-top{display:flex;align-items:center;gap:8px;padding:38px 14px 12px;background:#0B1B33;color:#fff}
.b-mark{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.b-mark svg{width:15px;height:15px;fill:currentColor}
.b-name{display:grid;flex:1;min-width:0;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.b-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-name small{font-weight:500;font-size:9px;letter-spacing:.14em;color:#9DB0CC}
.b-burger{display:grid;gap:3px;padding:8px;border-radius:9px;background:rgba(255,255,255,.08)}
.b-burger i{display:block;width:14px;height:2px;border-radius:2px;background:#fff}
.b-hero{padding:22px 16px 26px;color:#fff;background:radial-gradient(120% 90% at 85% 80%,rgba(70,130,255,.35),transparent 60%),linear-gradient(#0B1B33,#071229)}
.b-hero h4{margin:0 0 10px;font-size:23px;line-height:1.1;font-weight:800}
.b-hero p{margin:0 0 16px;font-size:12px;line-height:1.45;color:#B8C6DC}
.b-cta{display:block;text-align:center;font-weight:700;font-size:13px;padding:11px 10px;border-radius:11px;background:var(--brand);color:var(--on)}
.b-msgr{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.b-msgr span{font-size:10px;font-weight:600;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.b-cards{display:grid;gap:8px;padding:12px;margin-top:-6px}
.b-card{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;background:#fff;border-radius:14px;padding:12px;box-shadow:0 6px 18px -10px rgba(11,27,51,.35)}
.b-card i{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--on)}
.b-card i svg{width:16px;height:16px;fill:currentColor}
.b-card b{font-size:12px}
.b-card small{font-size:10px;color:#5B6B82;line-height:1.35}
.b-sec{margin:4px 12px 12px;padding:14px;border-radius:14px;background:#0B1B33;color:#fff;font-size:12px}
.b-sec ol{margin:10px 0 0;padding-left:18px;display:grid;gap:6px;color:#B8C6DC;font-size:11px}
.b-sec li::marker{color:var(--brand);font-weight:700}
.b-dock{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.4fr;gap:6px;padding:10px 10px 14px;background:#0B1B33}
.b-dock>span:first-child{display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:600}
.b-calc .b-calc-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.b-calc-row span{font-size:10px;padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.07);color:#B8C6DC}
.b-calc-row span.on{background:#fff;color:#0B1B33;box-shadow:0 0 0 2px var(--brand)}
.b-calc-total{display:grid;margin:12px 0 10px}
.b-calc-total small{font-size:10px;color:#B8C6DC}
.b-calc-total b{font-size:22px;letter-spacing:-.02em}
.b-ba{position:relative;margin:0 12px 12px;aspect-ratio:4/3;border-radius:14px;overflow:hidden}
.b-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-ba>div{position:absolute;inset:0;clip-path:inset(0 0 0 45%)}
.b-ba-line{position:absolute;top:0;bottom:0;left:45%;width:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.4)}
.b-ba em{position:absolute;top:8px;font-style:normal;font-size:9px;font-weight:600;color:#fff;background:rgba(6,18,41,.7);padding:3px 7px;border-radius:999px}
.b-ba em.l{left:8px}.b-ba em.r{right:8px}
.screen.biz.remont .b-hero{background:linear-gradient(90deg,rgba(8,23,51,.96),rgba(8,23,51,.55)),repeating-linear-gradient(0deg,#4a4f58 0 13px,#2c3038 13px 15px)}

/* Услуги на дому: макет приложения на телефоне */
.screen.svc{--g:#16A34A;background:radial-gradient(120% 40% at 50% 0,rgba(22,163,74,.16),transparent 70%),#F3F6F4;color:#0F1F17}
.h-top{display:flex;align-items:center;gap:8px;padding:38px 14px 8px}
.h-logo{width:28px;height:28px;border-radius:9px;background:linear-gradient(140deg,var(--g),#0B5A33);position:relative;flex:none}
.h-logo::after{content:"";position:absolute;inset:8px 8px 6px;border-radius:45% 45% 40% 40%;background:#fff}
.h-name{display:grid;line-height:1.2}.h-name b{font-size:12px}.h-name small{font-size:9px;color:#5D6E65}
.h-orb{width:60px;height:60px;margin:10px auto 0;border-radius:20px;display:grid;place-items:center;background:linear-gradient(150deg,var(--g),#0B5A33);box-shadow:0 12px 26px -8px rgba(22,163,74,.6)}
.h-orb svg{width:28px;height:28px;fill:#fff}
.h-title{margin:10px 0 4px;text-align:center;font-size:17px;font-weight:800}
.h-sub{margin:0 16px;text-align:center;font-size:10px;color:#5D6E65;line-height:1.4}
.h-lbl{margin:12px 14px 6px;font-size:10px;font-weight:700;color:#5D6E65}
.h-chips{display:flex;gap:5px;padding:0 12px}
.h-chips span{flex:1;display:grid;justify-items:center;padding:6px 2px;border-radius:10px;background:#fff;font-size:10px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(16,40,28,.1)}
.h-chips small{font-size:8px;font-weight:500;color:#5D6E65}
.h-chips .on{background:rgba(22,163,74,.12);box-shadow:inset 0 0 0 1.5px var(--g)}
.h-step{display:flex;align-items:center;gap:12px;margin:0 14px;padding:4px;width:max-content;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(16,40,28,.1)}
.h-step i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(16,40,28,.06);font-style:normal}
.h-step b{font-size:15px}
.h-pay{display:flex;align-items:center;gap:8px;margin:14px 10px 10px;padding:7px 7px 7px 12px;border-radius:14px;background:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.3)}
.h-pay span{display:grid;flex:1}.h-pay b{font-size:14px}.h-pay small{font-size:8px;color:#5D6E65}
.h-pay em,.h-req em{font-style:normal;font-size:11px;font-weight:700;padding:9px 12px;border-radius:10px;background:var(--g);color:#fff;text-align:center}
.h-earn{margin:6px 12px 10px;padding:12px 14px;border-radius:16px;display:grid;color:#fff;background:linear-gradient(140deg,var(--g),#0B5A33)}
.h-earn small{font-size:9px;opacity:.85}.h-earn b{font-size:24px;line-height:1.1}.h-earn span{font-size:9px;opacity:.85}
.h-tabs{display:flex;gap:4px;padding:0 12px 8px}
.h-tabs span{flex:1;text-align:center;padding:6px 2px;border-radius:9px;background:#fff;font-size:9px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(16,40,28,.1)}
.h-tabs i{font-style:normal;color:#5D6E65}.h-tabs .on{box-shadow:inset 0 0 0 1.5px var(--g);background:rgba(22,163,74,.1)}
.h-req{margin:0 12px 8px;padding:10px 12px;border-radius:14px;background:#fff;display:grid;gap:4px;box-shadow:0 6px 16px -10px rgba(0,0,0,.3)}
.h-req.dim{opacity:.7}
.h-req-top{display:flex;justify-content:space-between;align-items:center}
.h-req-top span{font-size:9px;font-weight:700;padding:3px 7px;border-radius:999px;background:rgba(16,40,28,.06);color:#5D6E65}
.h-req-top .hot{background:rgba(234,88,12,.14);color:#C2410C}
.h-req-top b{color:var(--g);font-size:12px}
.h-place{font-size:12px}.h-req small{font-size:9px;color:#5D6E65}
.seg button:disabled{opacity:.5;cursor:default}
.h-plan{margin:0 12px 8px;padding:10px 12px;border-radius:14px;background:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;box-shadow:inset 0 0 0 1px rgba(16,40,28,.08)}
.h-plan b{font-size:11px}.h-plan span{grid-column:1;font-size:10px;color:#5D6E65}.h-plan small{grid-row:1/3;grid-column:2;align-self:center;font-size:9px;font-weight:700;color:var(--g)}

/* Салоны красоты: макет сайта с записью на телефоне */
.screen.bty{--y:#B07A6E;background:#FBF7F4;color:#2A211E}
.y-top{display:flex;align-items:center;gap:8px;padding:38px 12px 8px}
.y-logo{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--y);color:#fff;font:600 15px/1 Georgia,serif}
.y-name{display:grid;line-height:1.2;flex:1}.y-name b{font:600 13px/1.1 Georgia,serif}.y-name small{font-size:8.5px;color:#7A6A64}
.y-top em,.y-pay em{font-style:normal;font-size:10px;font-weight:700;padding:7px 10px;border-radius:999px;background:var(--y);color:#fff}
.y-hero{position:relative;margin:4px 12px 0;height:150px;border-radius:70px 70px 16px 16px;overflow:hidden}
.y-hero img{width:100%;height:100%;object-fit:cover;display:block}
.y-hero div{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 10px;border-radius:12px;display:grid;background:rgba(255,255,255,.82);backdrop-filter:blur(6px)}
.y-hero small{font-size:8px;color:#7A6A64;text-transform:uppercase;letter-spacing:.08em}.y-hero b{font:600 16px/1.15 Georgia,serif}
.y-lbl{margin:12px 14px 6px;font-size:10px;font-weight:700;color:#7A6A64}
.y-row{display:flex;align-items:center;gap:8px;margin:0 12px 6px;padding:8px 10px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(60,40,30,.08)}
.y-row span{display:grid;flex:1;min-width:0}.y-row b{font-size:10.5px}.y-row small{font-size:8.5px;color:#7A6A64}.y-row i{font-style:normal;font-size:10px;font-weight:700;white-space:nowrap}
.y-slots{display:flex;gap:5px;padding:0 12px}
.y-slots span{flex:1;text-align:center;padding:7px 0;border-radius:10px;background:#fff;font-size:10px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(60,40,30,.1)}
.y-slots .on{background:var(--y);color:#fff;box-shadow:none}
.y-pay{display:flex;align-items:center;gap:8px;margin:12px 10px 8px;padding:7px 7px 7px 12px;border-radius:14px;background:#fff;box-shadow:0 8px 20px -10px rgba(60,30,20,.35)}
.y-pay span{display:grid;flex:1;min-width:0}.y-pay b{font-size:12px}.y-pay small{font-size:8px;color:#7A6A64}
.y-works{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 12px 14px}
.y-works img{width:100%;height:110px;object-fit:cover;border-radius:12px;display:block}

/* макет «Магазин» в телефоне */
.screen.shp{--z:#22C55E;background:#0A0D0C;color:#EEF3F0}
.z-top{display:flex;align-items:center;gap:8px;padding:38px 12px 8px}
.z-logo{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--z);color:#08110C;font-size:13px;box-shadow:0 0 14px -2px var(--z)}
.z-top b{flex:1;font-size:13px;font-weight:800}
.z-top em{font-style:normal;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;background:var(--z);color:#08110C;font-size:10px;font-weight:800}
.z-hero{position:relative;margin:4px 12px 0;height:140px;border-radius:16px;overflow:hidden}
.z-hero img{width:100%;height:100%;object-fit:cover;display:block}
.z-hero div{position:absolute;left:8px;right:8px;bottom:8px;padding:7px 9px;border-radius:10px;display:grid;background:rgba(18,23,21,.8);backdrop-filter:blur(6px)}
.z-hero small{font-size:8px;color:var(--z);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.z-hero b{font-size:13px;font-weight:800;line-height:1.15}
.z-tabs{display:flex;gap:5px;margin:10px 12px 8px}
.z-tabs span{padding:5px 9px;border-radius:8px;background:#121715;font-size:9.5px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(238,243,240,.09)}
.z-tabs .on{background:#EEF3F0;color:#0A0D0C}
.z-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 12px}
.z-card{display:grid;background:#121715;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(238,243,240,.09);padding-bottom:7px}
.z-card img{width:100%;height:70px;object-fit:cover;display:block;margin-bottom:5px}
.z-card b,.z-card small,.z-card i{padding:0 7px}
.z-card b{font-size:10px}.z-card small{font-size:8px;color:#93A19A}.z-card i{font-style:normal;font-size:10.5px;font-weight:800;margin-top:2px}
.z-pick{display:flex;flex-wrap:wrap;gap:4px;margin:8px 12px 0;padding:9px;border-radius:12px;background:#121715;box-shadow:inset 0 0 0 1px rgba(238,243,240,.09)}
.z-pick b{flex-basis:100%;font-size:10px;margin-bottom:2px}
.z-pick span{padding:4px 7px;border-radius:7px;background:#0A0D0C;font-size:8.5px;font-weight:600}
.z-pick .on{background:var(--z);color:#08110C}
.z-pay{display:flex;align-items:center;gap:8px;margin:10px 10px 12px;padding:6px 6px 6px 11px;border-radius:13px;background:#121715;box-shadow:0 8px 20px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(238,243,240,.09)}
.z-pay span{display:grid;flex:1}.z-pay b{font-size:12px}.z-pay small{font-size:8px;color:#93A19A}
.z-pay em{font-style:normal;font-size:10px;font-weight:800;padding:7px 11px;border-radius:9px;background:var(--z);color:#08110C}
/* макет «Цветы» в телефоне: светлая тема на тех же элементах */
.screen.flw{--z:#E5528A;background:#FBF6F4;color:#2A1F24}
.screen.flw .z-logo{color:#fff;box-shadow:0 0 14px -4px var(--z)}
.screen.flw .z-top em,.screen.flw .z-pay em{color:#fff}
.screen.flw .z-hero div{background:rgba(255,255,255,.88)}
.screen.flw .z-tabs span{background:#fff;box-shadow:inset 0 0 0 1px rgba(42,31,36,.1)}
.screen.flw .z-tabs .on{background:#2A1F24;color:#fff}
.screen.flw .z-card,.screen.flw .z-pay{background:#fff;box-shadow:inset 0 0 0 1px rgba(42,31,36,.08)}
.screen.flw .z-card small,.screen.flw .z-pay small{color:#7C6A72}
.screen.crd{--z:#C2410C;background:#FBF6F2;color:#2A1F1A}
.screen.crd .z-logo{color:#fff}.screen.crd .z-top em,.screen.crd .z-pay em{color:#fff}
.screen.crd .z-hero div{background:rgba(255,255,255,.88)}
.screen.crd .z-tabs span{background:#fff;box-shadow:inset 0 0 0 1px rgba(42,31,26,.1)}
.screen.crd .z-tabs .on{background:#2A1F1A;color:#fff}
.screen.crd .z-card,.screen.crd .z-pay{background:#fff;box-shadow:inset 0 0 0 1px rgba(42,31,26,.08)}
.screen.crd .z-card small,.screen.crd .z-pay small{color:#7C6A62}
.screen.app{--z:#E8590C;background:#FFF8F2;color:#2A1F1A}
.screen.app .z-logo{color:#fff}.screen.app .z-top em,.screen.app .z-pay em{color:#fff}
.screen.app .z-hero div{background:rgba(255,255,255,.9)}
.screen.app .z-tabs span{background:#fff;box-shadow:inset 0 0 0 1px rgba(42,31,26,.1)}
.screen.app .z-tabs .on{background:#2A1F1A;color:#fff}
.screen.app .z-card,.screen.app .z-pay{background:#fff;box-shadow:inset 0 0 0 1px rgba(42,31,26,.08)}
.screen.app .z-card small,.screen.app .z-pay small{color:#7C6A62}

/* Заявка */
.order-form{background:var(--card);border-radius:var(--r);padding:22px;display:grid;gap:16px;box-shadow:0 1px 0 var(--line)}
.order-kind{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.order-kind legend{font-weight:700;margin-bottom:8px}
.order-kind label{cursor:pointer}
.order-kind input{position:absolute;opacity:0;pointer-events:none}
.order-kind span{display:grid;gap:2px;padding:14px;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2);font-size:14px;height:100%}
.order-kind b{color:var(--ink);font-size:16px}
.order-kind input:checked+span{box-shadow:inset 0 0 0 2px var(--azure);background:color-mix(in srgb,var(--azure) 8%,transparent)}
.order-kind input:focus-visible+span{outline:2px solid var(--azure);outline-offset:2px}
.order-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fld{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.fld.wide{grid-column:1/-1}
.fld input,.fld select,.fld textarea{font:inherit;font-weight:400;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--azure)}
.fld [aria-invalid="true"]{border-color:#d92d20}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--azure)}
.consent a{color:var(--azure)}
.order-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.order-msg{font-size:15px}
.order-msg.err{color:#d92d20}
.order-msg.ok{color:#1f9d55;font-weight:700}
@media (max-width:760px){.order-kind,.order-grid{grid-template-columns:1fr}.order-form{padding:16px}}
.legal{max-width:760px}.legal h1{font-size:30px;margin:12px 0 18px}.legal h2{font-size:19px;margin:24px 0 8px}.legal a{color:var(--azure)}.legal .muted{color:var(--ink-2);font-size:14px;margin-top:28px}
html{scroll-padding-top:76px}   /* якоря меню не уходят под закреплённую шапку */
.plan .price small{font-size:14px;font-weight:500;color:var(--ink-2)}
.plans-note{margin:16px 0 0;color:var(--ink-2);font-size:15px}
footer .wrap span{flex:1 1 280px}