/* Vitrine V15 · вариант A — вид V3.1 («голубинки, как у стартапов», 04.10): небо-градиент, стеклянная шапка-пилюля,
   центрированный заголовок с серой второй строкой, чёрные кнопки-пилюли, белая стеклянная сцена «Instagram → сайт».
   Значения цвета, радиусов и шрифта — из site-v3-1/css/style.css. */
@font-face { font-family:'Onest'; font-style:normal; font-weight:300 800; font-display:swap; src:url(../shared/fonts/onest-300_800.woff2) format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../shared/fonts/jetbrains-mono-400.woff2) format('woff2'); }

:root {
  --ink:#0b0d12; --ink-2:#2a303b; --muted:#5a6373; --line:#e2e6ee; --paper:#fff;
  --cobalt:#2b47f6; --cobalt-soft:#e9edff;
  --sans:"Onest", "Helvetica Neue", Arial, sans-serif; --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --wrap:1200px; --gut:clamp(18px, 4vw, 40px); --r-xl:32px;
  --ease:cubic-bezier(.2,.7,.2,1); --out:cubic-bezier(.16,1,.3,1);
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; overflow-x:clip; }
body { margin:0; font-family:var(--sans); font-size:17px; line-height:1.5; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
h1, p, ul { margin:0; padding:0; }
ul { list-style:none; }
button, input { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--cobalt); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; border-radius:10px; }
.skip:focus { left:8px; }
.wrap { width:100%; max-width:calc(var(--wrap) + var(--gut) * 2); margin:0 auto; padding:0 var(--gut); }

/* кнопки */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:999px; border:1px solid transparent; font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; cursor:pointer; transition:transform .18s var(--ease), background-color .18s; }
.btn:active { transform:scale(.97); }
.btn-lg { height:58px; padding:0 26px; font-size:17px; }
.btn-ink { background:var(--ink); color:#fff; }
.btn-ink:hover { background:#1b2030; }
.btn .arr { width:18px; height:18px; transition:transform .2s var(--ease); }
.btn:hover .arr { transform:translateX(3px); }

/* шапка */
.nav { position:fixed; z-index:50; top:14px; left:0; right:0; padding:0 var(--gut); pointer-events:none; }
.nav-bar { pointer-events:auto; max-width:var(--wrap); margin:0 auto; height:62px; padding:0 9px 0 22px; display:flex; align-items:center; gap:28px;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px);
  border:1px solid rgba(255,255,255,.85); border-radius:999px; box-shadow:0 10px 30px -18px rgba(20,32,80,.35); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.03em; }
.brand-mark { width:24px; height:24px; fill:currentColor; }
.nav-links { display:flex; gap:4px; margin:0 auto; }
.nav-links a { padding:9px 14px; border-radius:999px; font-size:15px; font-weight:500; color:var(--ink-2); transition:background-color .18s; }
.nav-links a:hover { background:rgba(11,13,18,.06); }

/* первый экран */
.hero { position:relative; padding:clamp(104px, 8.4vw, 124px) 0 clamp(48px, 6vw, 88px);
  background:
    radial-gradient(900px 420px at 82% 8%, rgba(255,214,196,.55), transparent 70%),
    radial-gradient(700px 380px at 6% 30%, rgba(170,200,255,.45), transparent 70%),
    linear-gradient(180deg, #bcdcff 0%, #d5e2ff 34%, #ebeaf7 66%, #ffffff 100%); }
.hero-head { text-align:center; }
.hero-pill { display:inline-flex; align-items:center; gap:9px; height:36px; padding:0 16px 0 12px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.95); box-shadow:0 8px 22px -16px rgba(20,32,80,.4); font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); }
.hero-pill i { width:18px; height:18px; border-radius:6px; background:linear-gradient(45deg, #feda75, #fa7e1e 28%, #d62976 55%, #962fbf 78%, #4f5bd5); box-shadow:inset 0 0 0 3px rgba(255,255,255,.0); position:relative; }
.hero-pill i::after { content:''; position:absolute; inset:4px; border-radius:50%; border:2px solid #fff; }
.hero-title { max-width:1200px; margin:clamp(16px, 1.5vw, 22px) auto 0; font-size:clamp(42px, 5.9vw, 86px); line-height:1.01; letter-spacing:-.05em; font-weight:600; text-wrap:balance; }
.hero-title span { display:block; }
.ht-rest { color:rgba(11,13,18,.42); }
.hero-sub { max-width:600px; margin:clamp(16px, 1.6vw, 22px) auto 0; font-size:clamp(17px, 1.45vw, 20px); line-height:1.45; color:var(--ink-2); text-wrap:pretty; }

.handle-form { position:relative; display:flex; gap:10px; justify-content:center; max-width:560px; margin:clamp(22px, 2.2vw, 30px) auto 0; }
.handle-field { flex:1; min-width:0; height:58px; display:flex; align-items:center; gap:4px; padding:0 22px; background:#fff; border:1px solid rgba(11,13,18,.12); border-radius:999px; box-shadow:0 14px 30px -20px rgba(20,32,80,.5); transition:border-color .18s, box-shadow .18s; cursor:text; }
.handle-field:focus-within { border-color:var(--cobalt); box-shadow:0 0 0 4px rgba(43,71,246,.16); }
.handle-at { font-family:var(--mono); font-size:18px; color:var(--muted); }
.handle-field input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font-family:var(--mono); font-size:17px; }
.handle-field input::placeholder { color:#9aa2b1; }
.form-err { position:absolute; top:100%; left:0; right:0; margin-top:8px; font-size:14px; color:#c0262d; text-align:center; }
.form-err:empty { display:none; }
.has-err .handle-field { border-color:#e0464d; }
.has-err ~ .hero-note { visibility:hidden; }
.hero-note { margin-top:14px; font-size:14.5px; color:var(--muted); text-wrap:balance; }

/* появление: слова заголовка из размытия, как в V3.1; поле и кнопка видны сразу */
.js .hero-title .w { display:inline-block; opacity:0; transform:translateY(.3em); filter:blur(10px); transition:opacity .9s var(--out), transform .9s var(--out), filter .9s var(--out); transition-delay:calc(var(--i) * 55ms + 60ms); }
.js .is-loaded .hero-title .w { opacity:1; transform:none; filter:none; }
.js [data-load] { opacity:0; transform:translateY(10px); transition:opacity .8s var(--out), transform .8s var(--out); }
.js .is-loaded [data-load] { opacity:1; transform:none; }
.js .is-loaded .hero-sub[data-load] { transition-delay:.4s; }
.js .is-loaded .hero-note[data-load] { transition-delay:.6s; }

/* сцена: профиль → что попадёт на сайт → сайт */
.stage { margin-top:clamp(30px, 3vw, 42px); padding:clamp(16px, 2vw, 26px); background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.95); border-radius:var(--r-xl); box-shadow:0 50px 90px -50px rgba(24,40,96,.45), 0 2px 0 rgba(255,255,255,.8) inset; }
.stage-tabs { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.stage-tab { height:40px; padding:0 16px; border-radius:999px; border:1px solid rgba(11,13,18,.1); background:rgba(255,255,255,.7); font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:background-color .18s, color .18s, border-color .18s; }
.stage-tab:hover { border-color:rgba(11,13,18,.28); }
.stage-tab[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.stage-body { display:grid; grid-template-columns:232px 40px minmax(200px, 238px) 40px minmax(0, 1fr); align-items:start; margin-top:clamp(16px, 1.8vw, 24px); }
.stage-col { display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0; }
.stage-site { align-items:stretch; }
.stage-label { font-size:13.5px; font-weight:600; color:var(--muted); text-align:center; }
.stage-ig .phone { width:100%; }
.stage-link { display:flex; gap:6px; justify-content:center; align-items:center; padding-top:150px; }
.stage-link i { width:5px; height:5px; border-radius:50%; background:rgba(11,13,18,.18); animation:march 1.2s infinite; }
.stage-link i:nth-child(2) { animation-delay:.16s; }
.stage-link i:nth-child(3) { animation-delay:.32s; }
@keyframes march { 0%, 100% { background:rgba(11,13,18,.18); transform:scale(1); } 40% { background:var(--cobalt); transform:scale(1.5); } }

.pulls { width:100%; display:grid; gap:10px; padding-top:44px; }
.pulls li { display:grid; grid-template-columns:34px 1fr; align-items:center; column-gap:12px; padding:12px 14px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:0 12px 26px -22px rgba(20,32,80,.5); opacity:.35; transform:translateX(-6px); transition:opacity .5s var(--out), transform .6s var(--out), border-color .3s; }
.pulls li.on { opacity:1; transform:none; border-color:rgba(43,71,246,.25); }
.pull-ic { grid-row:span 2; width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--cobalt-soft); color:var(--cobalt); font-weight:700; font-size:16px; }
.pull-ic svg { width:17px; height:17px; fill:currentColor; }
.pulls b { font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.pulls em { font-style:normal; font-size:13px; color:var(--muted); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.stage-site .browser { width:100%; }
.phone-site { display:none; }
.stage-cap { margin-top:18px; display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; font-size:14px; color:var(--muted); }
.stage-cap b { color:var(--ink); font-weight:600; }
.stage-cap a { font-weight:600; color:var(--ink); border-bottom:1.5px solid rgba(11,13,18,.25); }
.stage-cap a:hover { border-color:var(--ink); }

/* ширины */
@media (max-width:1100px) {
  .nav-links { display:none; }
  .nav-bar { justify-content:space-between; }
  .stage-body { grid-template-columns:200px 28px minmax(180px, 210px) 28px minmax(0, 1fr); }
  .stage-link { padding-top:130px; }
}
@media (max-width:820px) {
  .stage-body { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; align-items:start; }
  .stage-link, .stage-mid { display:none; }
  .browser { display:none; }
  .phone-site { display:block; width:100%; }
  .stage-label { font-size:13px; }
}
@media (max-width:560px) {
  .nav { top:10px; }
  .nav-bar { height:56px; padding:0 7px 0 16px; gap:12px; }
  .nav-bar .btn { height:42px; padding:0 16px; font-size:14.5px; }
  .brand { font-size:19px; }
  .hero { padding-top:96px; }
  .hero-pill { font-size:13.5px; height:34px; }
  .hero-title { font-size:clamp(38px, 11.4vw, 52px); letter-spacing:-.048em; }
  .hero-sub { font-size:17px; }
  .handle-form { flex-direction:column; gap:10px; }
  .handle-field { flex:none; height:56px; }
  .handle-form .btn-lg { height:56px; width:100%; }
  .hero-note { font-size:13.5px; }
  .stage { margin-top:30px; padding:14px 12px 16px; border-radius:26px; margin-left:-6px; margin-right:-6px; }
  .stage-tabs { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin:0 -12px; padding:0 12px; }
  .stage-tabs::-webkit-scrollbar { display:none; }
  .stage-tab { height:38px; padding:0 14px; font-size:14px; }
  .stage-body { gap:0 10px; }
  .stage-cap { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .js .hero-title .w, .js [data-load] { opacity:1; transform:none; filter:none; transition:none; }
  .stage-link i { animation:none; }
}