/* Vitrine V15 · вариант B — ближе к Instagram (пожелание 04.10): белый экран, системный шрифт как в приложении,
   серые рамки #DBDBDB, синие кнопки #0095F6, градиент Instagram только на кольцах историй и в акценте заголовка.
   Ниша выбирается кружками историй; у телефона всплывают вопросы в директ, ответ на них — сайт из ссылки в профиле. */
:root {
  --ink:#000; --ink-2:#262626; --muted:#737373; --line:#DBDBDB; --soft:#FAFAFA; --chip:#EFEFEF;
  --blue:#0095F6; --blue-h:#1877F2; --link:#00376B;
  --grad:linear-gradient(45deg, #FEDA75 0%, #FA7E1E 22%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
  --ring:conic-gradient(from 200deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75);
  --sys:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --disp:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1); --pop:cubic-bezier(.3,1.35,.5,1);
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; overflow-x:clip; }
body { margin:0; font-family:var(--sys); font-size:16px; line-height:1.45; color:var(--ink); background:#fff; -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(--blue); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:#000; color:#fff; padding:10px 14px; border-radius:10px; }
.skip:focus { left:8px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 16px; border:0; border-radius:10px; background:var(--blue); color:#fff; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer; transition:background-color .15s, transform .15s; }
.btn:hover { background:var(--blue-h); }
.btn:active { transform:scale(.97); }
.btn-lg { height:52px; padding:0 24px; border-radius:12px; font-size:16px; }
.btn-sm { height:34px; padding:0 14px; font-size:14px; border-radius:9px; }

/* шапка как у Instagram в браузере */
.top { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(1.8) blur(14px); backdrop-filter:saturate(1.8) blur(14px); border-bottom:1px solid var(--line); }
.top-in { max-width:1180px; margin:0 auto; height:60px; padding:0 24px; display:flex; align-items:center; gap:32px; }
.logo { display:inline-flex; align-items:center; gap:10px; }
.logo-ring { width:30px; height:30px; border-radius:50%; padding:2.5px; background:var(--ring); display:flex; }
.logo-ring svg { width:100%; height:100%; border-radius:50%; background:#fff; color:#000; padding:5px; }
.logo-word { font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:-.035em; }
.nav { display:flex; gap:4px; margin:0 auto; }
.nav a { padding:8px 12px; border-radius:8px; font-size:14.5px; font-weight:500; color:var(--ink-2); }
.nav a:hover { background:var(--chip); }

/* первый экран */
.hero { max-width:1180px; margin:0 auto; padding:clamp(36px, 4.6vw, 64px) 24px clamp(48px, 6vw, 80px); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 560px); gap:clamp(32px, 5vw, 72px); align-items:center; min-height:calc(100svh - 61px); }
.hero-copy { min-width:0; }

/* истории = выбор ниши */
.stories-label { font-size:13px; font-weight:600; color:var(--muted); margin-bottom:12px; }
.stories { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; margin:0 -2px; }
.stories::-webkit-scrollbar { display:none; }
.stories.more { -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.story { flex:none; width:60px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; border:0; background:none; cursor:pointer; }
.story-ring { width:60px; height:60px; border-radius:50%; padding:2.5px; background:var(--line); transition:transform .25s var(--pop); }
.story[aria-selected="true"] .story-ring, .story:not(.seen) .story-ring { background:var(--ring); }
.story.seen:not([aria-selected="true"]) .story-ring { background:var(--line); padding:1.5px; }
.story-ring img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #fff; }
.story:hover .story-ring { transform:scale(1.05); }
.story:active .story-ring { transform:scale(.95); }
.story span { max-width:60px; font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.story[aria-selected="true"] span { font-weight:600; color:#000; }

.h1 { margin-top:clamp(28px, 3.4vw, 44px); font-family:var(--disp); font-weight:700; font-size:clamp(44px, 5vw, 76px); line-height:1.0; letter-spacing:-.045em; text-wrap:balance; }
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-bottom:.06em; }
.lead { margin-top:20px; max-width:30em; font-size:clamp(17px, 1.45vw, 20px); line-height:1.45; color:var(--ink-2); }

.handle-form { position:relative; display:flex; gap:10px; max-width:520px; margin-top:28px; }
.field { flex:1; min-width:0; height:52px; display:flex; align-items:center; gap:3px; padding:0 16px; background:var(--soft); border:1px solid var(--line); border-radius:12px; cursor:text; transition:border-color .15s, background-color .15s; }
.field:focus-within { border-color:#A8A8A8; background:#fff; }
.field-at { font-size:17px; color:var(--muted); font-weight:500; }
.field input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font-size:16.5px; }
.field input::placeholder { color:#8E8E8E; }
.form-err { position:absolute; top:100%; left:0; right:0; margin-top:8px; font-size:13.5px; color:#ED4956; }
.form-err:empty { display:none; }
.has-err .field { border-color:#ED4956; }
.has-err ~ .trust { visibility:hidden; }
.trust { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:16px; font-size:14px; color:var(--muted); }
.trust li { display:inline-flex; align-items:center; gap:6px; }
.trust li::before { content:''; width:16px; height:16px; border-radius:50%; background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.text-link { display:inline-block; margin-top:22px; font-size:15px; font-weight:600; color:var(--link); }
.text-link::after { content:' ↗'; }
.text-link:hover { text-decoration:underline; text-underline-offset:3px; }

/* телефон и директ: вопросы слева от телефона, заходят на его край не дальше поля сайта */
.hero-stage { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 300px; align-items:center; min-width:0; }
.glow { position:absolute; z-index:0; left:18%; right:-4%; top:4%; bottom:8%; border-radius:50%; background:var(--grad); filter:blur(70px); opacity:.18; }
.phone { grid-column:2; grid-row:1; z-index:1; width:100%; }
.stage-cap { grid-column:1 / 3; position:relative; z-index:1; margin-top:16px; font-size:13.5px; color:var(--muted); text-align:right; padding-right:4px; }
.stage-cap b { color:#000; font-weight:600; }

/* ссылка в профиле: касание */
.ig-link { position:relative; }
.tap .ig-link { background:rgba(0,149,246,.14); border-radius:1cqw; box-shadow:0 0 0 1cqw rgba(0,149,246,.14); transition:background-color .2s, box-shadow .2s; }

/* сайт открывается в браузере Instagram — лист снизу */
.sheet { position:absolute; z-index:4; left:0; right:0; top:11cqw; bottom:0; border-radius:5cqw 5cqw 0 0; overflow:hidden; background:#fff; box-shadow:0 -2cqw 8cqw rgba(0,0,0,.2); transform:translateY(102%); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.open .sheet { transform:none; }
.sheet-head { position:absolute; z-index:2; top:0; left:0; right:0; height:13cqw; display:flex; align-items:center; gap:3cqw; padding:0 4cqw; background:#fff; border-bottom:.3cqw solid #EFEFEF; font-family:var(--sys); }
.sheet-head svg { width:4.6cqw; height:4.6cqw; flex:none; fill:currentColor; }
.sheet-t { flex:1; min-width:0; text-align:center; line-height:1.15; }
.sheet-t b { display:block; font-size:3.7cqw; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet-t span { display:inline-flex; align-items:center; gap:1cqw; font-size:3cqw; color:#737373; }
.sheet-t span svg { width:2.4cqw; height:2.4cqw; }
.sheet-body { position:absolute; top:13cqw; left:0; right:0; bottom:0; }
.sheet .ms-bar { height:1cqw; }

.dms { grid-column:1; grid-row:1; position:relative; z-index:3; margin-right:-22px; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.dm { display:grid; grid-template-columns:38px 1fr auto; align-items:center; column-gap:10px; padding:10px 14px 10px 10px; border-radius:20px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6); box-shadow:0 14px 34px -14px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.05); opacity:0; transform:translateY(10px) scale(.96); transition:opacity .35s var(--ease), transform .5s var(--pop); }
.dm:nth-child(2) { margin-left:18px; }
.dm:nth-child(3) { margin-left:6px; }
.dm.on { opacity:1; transform:none; }
.dm-ava { grid-row:span 2; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; }
.dm b { font-size:13px; font-weight:600; line-height:1.2; }
.dm time { font-size:12px; color:var(--muted); align-self:start; }
.dm p { grid-column:2 / 4; font-size:14px; line-height:1.3; color:#000; }
.dm-me { align-self:flex-end; max-width:96%; margin:6px 0 0 0; padding:10px 14px; border-radius:20px 20px 6px 20px; background:linear-gradient(135deg, #A033FF 0%, #5B5BF7 55%, #3797F0 100%); color:#fff; font-size:14px; line-height:1.3; box-shadow:0 14px 30px -14px rgba(91,91,247,.6); opacity:0; transform:translateY(10px) scale(.96); transition:opacity .35s var(--ease), transform .5s var(--pop); }
.dm-me b { font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.dm-me.on { opacity:1; transform:none; }
.dm-seen { align-self:flex-end; margin-right:6px; font-size:11.5px; color:var(--muted); opacity:0; transition:opacity .4s; }
.dm-seen.on { opacity:1; }

@media (max-width:1100px) {
  .nav { display:none; }
  .top-in { justify-content:space-between; }
  .hero { grid-template-columns:minmax(0, 1fr) minmax(0, 460px); }
  .hero-stage { grid-template-columns:minmax(0, 1fr) 270px; }
}
@media (max-width:860px) {
  .hero { grid-template-columns:1fr; min-height:0; padding-top:18px; gap:36px; }
  .hero-stage { max-width:560px; width:100%; margin:0 auto; }
}
@media (max-width:560px) {
  .top-in { height:54px; padding:0 16px; }
  .logo-word { font-size:21px; }
  .hero { padding:14px 16px 48px; }
  .stories-wrap { margin:0 -16px; padding:0 16px 14px; border-bottom:1px solid #EFEFEF; }
  .stories-label { margin-bottom:10px; }
  .stories { gap:12px; margin:0 -16px; padding:2px 16px 2px; }
  .story, .story span { width:66px; max-width:66px; }
  .story-ring { width:66px; height:66px; }
  .h1 { margin-top:24px; font-size:clamp(40px, 11.6vw, 50px); letter-spacing:-.042em; }
  .lead { margin-top:14px; font-size:17px; }
  .handle-form { flex-direction:column; margin-top:22px; }
  .field { flex:none; }
  .handle-form .btn-lg { width:100%; }
  .trust { gap:6px 14px; font-size:13.5px; }
  .text-link { margin-top:18px; }
  .hero { overflow-x:clip; }
  .hero-stage { display:flex; flex-direction:column; margin-top:4px; }
  .glow { left:6%; right:6%; }
  .dms { margin:0; width:100%; padding-right:8%; }
  .phone { width:min(300px, 80%); margin:14px auto 0; }
  .stage-cap { text-align:center; padding:0; }
  .dm { padding:8px 12px 8px 8px; grid-template-columns:32px 1fr auto; column-gap:8px; border-radius:18px; }
  .dm-ava { width:32px; height:32px; font-size:13px; }
  .dm p { font-size:13px; }
  .dm-me { margin-right:-8%; font-size:13px; }
  .dm-seen { margin-right:-6%; }
}
@media (prefers-reduced-motion:reduce) {
  .dm, .dm-me, .dm-seen, .sheet, .story-ring { transition:none; }
}