/* Vitrine V15 — общие макеты всех трёх вариантов: телефон, статус-бар iOS, профиль Instagram, мини-сайт в телефоне,
   сайт в окне браузера и арт-дирекции семи примеров. Профили и сайты примеров — из V14, меняется страница вокруг них.
   Размеры внутри экрана — cqw ширины экрана, макет масштабируется целиком. */
.phone { position:relative; aspect-ratio:9 / 19; border-radius:15% / 7.1%; background:#141110; padding:2.3%; box-shadow:0 30px 60px -28px rgba(20,20,30,.45), 0 0 0 1px rgba(0,0,0,.06); }
.screen { position:relative; width:100%; height:100%; border-radius:12.5% / 5.9%; overflow:hidden; background:#fff; container-type:inline-size; }
.island { position:absolute; z-index:6; top:2.6cqw; left:50%; width:30cqw; height:8.6cqw; margin-left:-15cqw; border-radius:6cqw; background:#141110; }
.sb { position:absolute; z-index:5; top:0; left:0; right:0; height:12cqw; display:flex; align-items:center; justify-content:space-between; padding:1.4cqw 7cqw 0 9cqw; font:600 4cqw/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:#111; }
.sb-r { display:flex; gap:1.4cqw; align-items:center; }
.sb-r svg { height:3.2cqw; width:auto; fill:currentColor; }
.sb.on-dark { color:#fff; }

/* профиль Instagram */
.ig-s { position:absolute; inset:0; background:#fff; color:#0c0c0c; line-height:1.25; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.ig-s svg { fill:currentColor; }
.ig-top { position:absolute; top:12cqw; left:0; right:0; height:11cqw; display:flex; align-items:center; gap:2cqw; padding:0 4cqw; }
.ig-top b { font-size:4.7cqw; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ig-top svg { flex:none; width:5cqw; height:5cqw; }
.ig-top .sp { flex:1; }
.ig-head { position:absolute; top:24cqw; left:4cqw; right:4cqw; display:flex; align-items:center; gap:5cqw; }
.ig-ava { flex:none; width:21cqw; height:21cqw; border-radius:50%; padding:.9cqw; background:conic-gradient(from 210deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.ig-ava img { width:100%; height:100%; border-radius:50%; border:.9cqw solid #fff; object-fit:cover; display:block; }
.ig-stats { flex:1; display:flex; justify-content:space-between; text-align:center; }
.ig-stats b { display:block; font-size:4.3cqw; font-weight:700; }
.ig-stats span { font-size:3.2cqw; color:#222; }
.ig-bio { position:absolute; top:48cqw; left:4cqw; right:4cqw; font-size:3.4cqw; line-height:1.32; }
.ig-bio b { display:block; font-size:3.5cqw; font-weight:600; }
.ig-cat { color:#737373; }
.ig-link { color:#00376B; font-weight:600; }
.ig-btns { position:absolute; top:76cqw; left:4cqw; right:4cqw; display:flex; gap:1.6cqw; }
.ig-btns span { flex:1; height:8.2cqw; border-radius:2.2cqw; display:flex; align-items:center; justify-content:center; font-size:3.4cqw; font-weight:600; background:#EFEFEF; }
.ig-btns span:first-child { background:#0095F6; color:#fff; }
.ig-hl { position:absolute; top:88cqw; left:3cqw; right:0; display:flex; gap:3.6cqw; overflow:hidden; }
.ig-hl div { flex:none; width:15cqw; text-align:center; font-size:2.8cqw; white-space:nowrap; }
.ig-hl i { display:block; width:15cqw; height:15cqw; border-radius:50%; padding:.7cqw; box-shadow:inset 0 0 0 .4cqw #DBDBDB; margin-bottom:1.2cqw; }
.ig-hl img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:.6cqw solid #fff; display:block; }
.ig-tabs { position:absolute; top:111cqw; left:0; right:0; height:9cqw; display:flex; border-bottom:.3cqw solid #EFEFEF; }
.ig-tabs span { flex:1; display:flex; align-items:center; justify-content:center; }
.ig-tabs span:first-child { box-shadow:inset 0 -.5cqw 0 #0c0c0c; }
.ig-tabs svg { width:4.6cqw; height:4.6cqw; }
.ig-grid { position:absolute; top:120.6cqw; left:0; right:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:.5cqw; }
.ig-grid i { display:block; aspect-ratio:3 / 4; background:#EFE7E2; overflow:hidden; }
.ig-grid img { width:100%; height:100%; object-fit:cover; display:block; }
.ig-nav { position:absolute; left:0; right:0; bottom:0; height:15cqw; background:#fff; border-top:.3cqw solid #EFEFEF; display:flex; justify-content:space-around; align-items:flex-start; padding-top:3cqw; }
.ig-nav svg { width:5.6cqw; height:5.6cqw; }
.ig-nav .me { width:6cqw; height:6cqw; border-radius:50%; overflow:hidden; box-shadow:0 0 0 .5cqw #0c0c0c; }
.ig-nav .me img { width:100%; height:100%; object-fit:cover; display:block; }

/* слои при смене ниши */
.screen > .layer { position:absolute; inset:0; transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.screen > .layer.is-out { opacity:0; transform:scale(.985); }
.screen > .layer.is-in { opacity:0; transform:translateY(2%); }

/* ---------- арт-дирекции семи примеров (из V14) ---------- */
.t-lashes { --s-bg:#F5ECE7; --s-surf:#FFFFFF; --s-ink:#3B2722; --s-mute:#7A6259; --s-line:#E6D6CE; --s-acc:#3B2722; --s-acc-ink:#F5ECE7; --s-soft:#EBDDD5;
  --s-disp:'Cormorant Garamond', Georgia, serif; --s-disp-w:500; --s-disp-ls:-0.01em; --s-disp-tr:none; --s-body:'Jost', system-ui, sans-serif; --s-rad:999px; --s-img-rad:200px 200px 0 0; }
.t-makeup { --s-bg:#F4EEE6; --s-surf:#FBF8F3; --s-ink:#1C1714; --s-mute:#7A6650; --s-line:#E3D8CA; --s-acc:#1C1714; --s-acc-ink:#F4EEE6; --s-soft:#E9DFD2;
  --s-disp:'Bodoni Moda', 'Didot', serif; --s-disp-w:500; --s-disp-ls:-0.015em; --s-disp-tr:none; --s-body:'Manrope', system-ui, sans-serif; --s-rad:0px; --s-img-rad:0; }
.t-nails { --s-bg:#EFE8F8; --s-surf:#FFFFFF; --s-ink:#2A1F3D; --s-mute:#6B5E7E; --s-line:#DCD0EE; --s-acc:#C2183B; --s-acc-ink:#FFFFFF; --s-soft:#E2D7F3;
  --s-disp:'Bricolage Grotesque', system-ui, sans-serif; --s-disp-w:800; --s-disp-ls:-0.035em; --s-disp-tr:none; --s-body:'Bricolage Grotesque', system-ui, sans-serif; --s-rad:18px; --s-img-rad:28px; }
.t-hair { --s-bg:#F3E7DA; --s-surf:#FBF5EE; --s-ink:#2E1B12; --s-mute:#6E5A4C; --s-line:#E2CFBC; --s-acc:#A8492A; --s-acc-ink:#FFFFFF; --s-soft:#EAD8C5;
  --s-disp:'DM Serif Display', Georgia, serif; --s-disp-w:400; --s-disp-ls:-0.01em; --s-disp-tr:none; --s-body:'DM Sans', system-ui, sans-serif; --s-rad:999px; --s-img-rad:999px 999px 24px 24px; }
.t-tattoo { --s-bg:#EDEBE6; --s-surf:#F7F6F3; --s-ink:#111111; --s-mute:#6B6862; --s-line:#CFCBC3; --s-acc:#111111; --s-acc-ink:#EDEBE6; --s-soft:#E1DED7;
  --s-disp:'Syne', system-ui, sans-serif; --s-disp-w:800; --s-disp-ls:-0.02em; --s-disp-tr:uppercase; --s-body:'Space Mono', ui-monospace, monospace; --s-rad:0px; --s-img-rad:0; }
.t-cakes { --s-bg:#E3EFE7; --s-surf:#F7FBF8; --s-ink:#3A1F2B; --s-mute:#5E6B62; --s-line:#C9DDD0; --s-acc:#B8325A; --s-acc-ink:#FFFFFF; --s-soft:#F6DCE4;
  --s-disp:'Fraunces', Georgia, serif; --s-disp-w:600; --s-disp-ls:-0.02em; --s-disp-tr:none; --s-body:'Outfit', system-ui, sans-serif; --s-rad:999px; --s-img-rad:40px; }
.t-photo { --s-bg:#F2EFEA; --s-surf:#FAF8F5; --s-ink:#1D1D1B; --s-mute:#6F6A62; --s-line:#DAD4CA; --s-acc:#1D1D1B; --s-acc-ink:#F2EFEA; --s-soft:#E6E0D6;
  --s-disp:'Italiana', Georgia, serif; --s-disp-w:400; --s-disp-ls:0.01em; --s-disp-tr:uppercase; --s-body:'Jost', system-ui, sans-serif; --s-rad:0px; --s-img-rad:0; }

/* ---------- мини-сайт в телефоне (единицы — cqw ширины экрана телефона) ---------- */
.ms { position:absolute; inset:0; background:var(--s-bg); color:var(--s-ink); font-family:var(--s-body); overflow:hidden; }
.ms-bar { height:12cqw; }
.ms-nav { display:flex; align-items:center; justify-content:space-between; padding:0 6cqw; height:11cqw; }
.ms-name { font-family:var(--s-disp); font-weight:var(--s-disp-w); text-transform:var(--s-disp-tr); letter-spacing:var(--s-disp-ls); font-size:5.6cqw; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:70cqw; }
.ms-burger { width:6cqw; height:3.2cqw; border-top:.55cqw solid currentColor; border-bottom:.55cqw solid currentColor; }
.ms-hero { margin:1cqw 6cqw 0; height:58cqw; overflow:hidden; border-radius:var(--s-img-rad); background:var(--s-soft); }
.t-lashes .ms-hero, .t-hair .ms-hero { border-radius:44cqw 44cqw 3cqw 3cqw; }
.t-nails .ms-hero { border-radius:6cqw; }
.t-cakes .ms-hero { border-radius:9cqw; }
.ms-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.t-lashes .ms-hero img { object-position:50% 36%; }
.ms-h { font-family:var(--s-disp); font-weight:var(--s-disp-w); text-transform:var(--s-disp-tr); letter-spacing:var(--s-disp-ls); font-size:7.4cqw; line-height:1.02; margin:4.5cqw 6cqw 0; }
.t-tattoo .ms-h, .t-photo .ms-h { font-size:6.6cqw; }
.ms-book { display:flex; align-items:center; justify-content:center; gap:2cqw; margin:4.5cqw 6cqw 0; height:13cqw; border-radius:var(--s-rad); background:var(--s-acc); color:var(--s-acc-ink); font-weight:700; font-size:4.6cqw; letter-spacing:.005em; }
.t-tattoo .ms-book { font-weight:700; font-size:3.8cqw; text-transform:uppercase; }
.ms-book svg { width:4.4cqw; height:4.4cqw; }
.ms-alt { text-align:center; font-size:3.4cqw; margin-top:2.4cqw; color:var(--s-mute); text-decoration:underline; text-underline-offset:.8cqw; }
.ms-sec { margin:5cqw 6cqw 0; font-size:2.9cqw; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--s-mute); }
.ms-prices { margin:1.6cqw 6cqw 0; list-style:none; padding:0; }
.ms-prices li { display:flex; justify-content:space-between; align-items:baseline; gap:3cqw; padding:2.4cqw 0; border-bottom:.3cqw solid var(--s-line); font-size:4.3cqw; }
.ms-prices li span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-prices b { font-weight:700; white-space:nowrap; }
.ms-where { margin:3cqw 6cqw 0; font-size:3.3cqw; color:var(--s-mute); line-height:1.35; }
.ms-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6cqw; margin:4cqw 6cqw 0; }
.ms-strip img { width:100%; aspect-ratio:3 / 4; object-fit:cover; border-radius:1.6cqw; }
.ms-safari { position:absolute; left:0; right:0; bottom:0; height:19cqw; background:rgba(250,250,250,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:.3cqw solid rgba(0,0,0,.08); display:flex; flex-direction:column; align-items:center; padding-top:2.6cqw; font-family:-apple-system, BlinkMacSystemFont, sans-serif; }
.ms-url { display:flex; align-items:center; justify-content:center; gap:1.4cqw; width:86cqw; height:9.6cqw; border-radius:3.2cqw; background:rgba(118,118,128,.14); color:#111; font-size:3.7cqw; font-weight:500; }
.ms-url svg { width:2.8cqw; height:2.8cqw; }

/* ---------- сайт примера в окне браузера (cqw ширины окна) ---------- */
.browser { position:relative; background:#fff; border-radius:1.6cqw; overflow:hidden; container-type:inline-size; box-shadow:0 40px 80px -40px rgba(20,30,60,.45), 0 0 0 1px rgba(20,30,60,.07); }
.br-bar { height:4.6cqw; display:flex; align-items:center; gap:.8cqw; padding:0 1.6cqw; background:#F4F5F8; border-bottom:1px solid #E6E8EE; }
.br-bar i { width:1.1cqw; height:1.1cqw; border-radius:50%; background:#D9DCE3; }
.br-url { margin:0 auto; display:flex; align-items:center; gap:.6cqw; height:2.8cqw; padding:0 2.4cqw; border-radius:99px; background:#fff; border:1px solid #E6E8EE; font:500 1.35cqw/1 -apple-system, BlinkMacSystemFont, sans-serif; color:#3a3f4b; }
.br-url svg { width:1cqw; height:1cqw; fill:currentColor; }
.br-body { position:relative; aspect-ratio:16 / 11.2; overflow:hidden; }
.br-body > .layer { position:absolute; inset:0; transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.br-body > .layer.is-out { opacity:0; }
.br-body > .layer.is-in { opacity:0; transform:translateY(1.5%); }
.ds { position:absolute; inset:0; background:var(--s-bg); color:var(--s-ink); font-family:var(--s-body); }
.ds-nav { display:flex; align-items:center; gap:3cqw; height:7.4cqw; padding:0 4cqw; }
.ds-name { font-family:var(--s-disp); font-weight:var(--s-disp-w); text-transform:var(--s-disp-tr); letter-spacing:var(--s-disp-ls); font-size:2.3cqw; white-space:nowrap; margin-right:auto; }
.ds-nav span { font-size:1.3cqw; color:var(--s-mute); }
.ds-nav b { display:inline-flex; align-items:center; height:3.4cqw; padding:0 1.8cqw; border-radius:var(--s-rad); background:var(--s-acc); color:var(--s-acc-ink); font-size:1.3cqw; font-weight:700; }
.ds-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:3.4cqw; padding:1.4cqw 4cqw 0; align-items:center; }
.ds-meta { font-size:1.2cqw; text-transform:uppercase; letter-spacing:.12em; color:var(--s-mute); font-weight:600; }
.ds-h { font-family:var(--s-disp); font-weight:var(--s-disp-w); text-transform:var(--s-disp-tr); letter-spacing:var(--s-disp-ls); font-size:4.5cqw; line-height:1.02; margin:1.6cqw 0 0; }
.t-tattoo .ds-h, .t-photo .ds-h { font-size:3.9cqw; }
.ds-p { font-size:1.45cqw; line-height:1.5; color:var(--s-mute); margin:1.8cqw 0 0; max-width:36cqw; }
.ds-cta { display:flex; align-items:center; gap:1.6cqw; margin-top:2.4cqw; }
.ds-book { display:inline-flex; align-items:center; gap:.8cqw; height:4.6cqw; padding:0 2.4cqw; border-radius:var(--s-rad); background:var(--s-acc); color:var(--s-acc-ink); font-weight:700; font-size:1.5cqw; }
.ds-book svg { width:1.6cqw; height:1.6cqw; fill:currentColor; }
.ds-alt { font-size:1.35cqw; text-decoration:underline; text-underline-offset:.4cqw; color:var(--s-mute); }
.ds-img { height:31cqw; overflow:hidden; border-radius:var(--s-img-rad); background:var(--s-soft); }
.t-lashes .ds-img, .t-hair .ds-img { border-radius:22cqw 22cqw 1.2cqw 1.2cqw; }
.t-nails .ds-img { border-radius:2.6cqw; }
.t-cakes .ds-img { border-radius:4cqw; }
.ds-img img { width:100%; height:100%; object-fit:cover; display:block; }
.ds-prices { margin:3.4cqw 4cqw 0; display:grid; grid-template-columns:repeat(3, 1fr); gap:2cqw; }
.ds-prices div { border-top:1px solid var(--s-line); padding-top:1.2cqw; display:flex; justify-content:space-between; gap:1cqw; font-size:1.35cqw; }
.ds-prices span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-prices b { white-space:nowrap; }

.ds-strip { margin:3cqw 4cqw 0; display:grid; grid-template-columns:repeat(5, 1fr); gap:1.2cqw; }
.ds-strip img { width:100%; aspect-ratio:1 / 1; object-fit:cover; border-radius:1cqw; display:block; }
.ds-sec { margin:3.2cqw 4cqw 0; font-size:1.15cqw; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--s-mute); }