/* Vitrine V15 · вариант C — дорогой Webflow-шаблон по эталону Calmlyss (calmlyss.webflow.io): первый экран — карточка
   в тёмной рамке, фото работы на всю карточку, тонкие вертикальные линии сетки, стеклянные пилюли меню,
   крупный белый гротеск Clash Display без засечек, лента овалов с нишами, стеклянная карточка примера внизу справа.
   От V14 намеренно далеко: никакого крема, курсива с засечками и красного акцента. */
@font-face { font-family:'Clash Display'; font-style:normal; font-weight:500; font-display:swap; src:url(../shared/fonts/clash-display-500.woff2) format('woff2'); }
@font-face { font-family:'Clash Display'; font-style:normal; font-weight:600; font-display:swap; src:url(../shared/fonts/clash-display-600.woff2) format('woff2'); }
@font-face { font-family:'General Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(../shared/fonts/general-sans-400.woff2) format('woff2'); }
@font-face { font-family:'General Sans'; font-style:normal; font-weight:500; font-display:swap; src:url(../shared/fonts/general-sans-500.woff2) format('woff2'); }
@font-face { font-family:'General Sans'; font-style:normal; font-weight:600; font-display:swap; src:url(../shared/fonts/general-sans-600.woff2) format('woff2'); }

:root {
  --frame:#0c0b0a; --white:#fff; --w80:rgba(255,255,255,.82); --w60:rgba(255,255,255,.64);
  --glass:rgba(255,255,255,.12); --glass-b:rgba(255,255,255,.26); --dark-glass:rgba(16,14,12,.46);
  --disp:'Clash Display', 'Helvetica Neue', Arial, sans-serif; --body:'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --pad:clamp(20px, 5.6vw, 80px); --gap:12px;
  --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; background:var(--frame); }
body { margin:0; font-family:var(--body); font-size:16px; line-height:1.45; color:var(--white); background:var(--frame); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
h1, p { margin:0; }
button, input { font:inherit; color:inherit; }
:focus-visible { outline:2px solid #fff; outline-offset:3px; border-radius:8px; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:#fff; color:#000; padding:10px 14px; border-radius:10px; }
.skip:focus { left:8px; }

/* карточка первого экрана в тёмной рамке */
.hero { position:relative; margin:var(--gap); height:calc(100svh - var(--gap) * 2); min-height:640px; max-height:1080px; border-radius:28px; overflow:hidden; isolation:isolate; background:#2a2420; }
.bg, .shade, .cols { position:absolute; inset:0; }
.bg { z-index:-3; }
.bg picture, .bg img { position:absolute; inset:0; width:100%; height:100%; }
.bg img { object-fit:cover; }
.bg picture { opacity:0; transition:opacity 1.1s var(--ease); }
.bg picture.on { opacity:1; }
.bg picture img { transform:scale(1.07); transition:transform 7s cubic-bezier(.2,.6,.2,1); }
.bg picture.on img { transform:scale(1); }
.shade { z-index:-2; background:
  linear-gradient(90deg, rgba(12,10,9,.72) 0%, rgba(12,10,9,.46) 40%, rgba(12,10,9,.12) 72%, rgba(12,10,9,.18) 100%),
  linear-gradient(0deg, rgba(12,10,9,.62) 0%, rgba(12,10,9,0) 42%),
  linear-gradient(180deg, rgba(12,10,9,.42) 0%, rgba(12,10,9,0) 22%); }
.cols { z-index:-1; left:var(--pad); right:var(--pad); background:linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / calc((100% - 1px) / 3) 100%, linear-gradient(90deg, transparent calc(100% - 1px), rgba(255,255,255,.14) 1px); pointer-events:none; }

/* шапка: стеклянные пилюли */
.top { position:absolute; z-index:5; top:22px; left:var(--pad); right:var(--pad); display:flex; align-items:center; gap:16px; }
.logo { display:inline-flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:500; font-size:23px; letter-spacing:-.01em; }
.logo svg { width:30px; height:30px; }
.nav { display:flex; gap:10px; margin:0 auto; }
.nav a { height:40px; display:inline-flex; align-items:center; padding:0 18px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-b); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-size:14.5px; font-weight:500; transition:background-color .2s; }
.nav a:hover { background:rgba(255,255,255,.22); }
.top-cta { height:46px; display:inline-flex; align-items:center; padding:0 24px; border-radius:999px; background:#fff; color:#17130f; font-weight:600; font-size:15px; transition:transform .2s var(--ease); }
.top-cta:hover { transform:translateY(-1px); }

/* текст */
.copy { position:absolute; z-index:3; left:var(--pad); top:clamp(100px, 16vh, 160px); width:min(1060px, calc(100% - var(--pad) * 2)); }
.h1 { font-family:var(--disp); font-weight:600; font-size:clamp(46px, min(7.6vw, 12.4vh), 128px); line-height:.94; letter-spacing:-.025em; }
.h1 .ln { display:block; }
.js .h1 .ln { clip-path:inset(0 0 -.12em 0); }
.js .h1 .w { display:inline-block; transform:translateY(105%); transition:transform 1s var(--out); transition-delay:calc(var(--i) * 70ms + 150ms); }
.js .ready .h1 .w { transform:none; }
.lead { margin-top:clamp(18px, 2.4vh, 26px); max-width:30em; text-wrap:balance; font-size:clamp(16px, 1.3vw, 19px); line-height:1.5; color:var(--w80); }

.handle-form { position:relative; display:flex; align-items:center; gap:6px; width:min(500px, 100%); height:64px; margin-top:clamp(22px, 3vh, 32px); padding:6px 6px 6px 22px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); transition:border-color .2s, background-color .2s; }
.handle-form:focus-within { border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.2); }
.field { flex:1; min-width:0; height:100%; display:flex; align-items:center; gap:3px; cursor:text; }
.field-at { font-size:18px; color:var(--w60); }
.field input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font-size:17px; color:#fff; }
.field input::placeholder { color:rgba(255,255,255,.6); }
.go { flex:none; height:52px; display:inline-flex; align-items:center; gap:12px; padding:0 7px 0 22px; border:0; border-radius:999px; background:#fff; color:#17130f; font-weight:600; font-size:16px; cursor:pointer; transition:transform .2s var(--ease); }
.go i { width:38px; height:38px; border-radius:50%; background:#17130f; color:#fff; display:flex; align-items:center; justify-content:center; transition:transform .3s var(--out); }
.go svg { width:17px; height:17px; }
.go:hover i { transform:rotate(45deg); }
.go:active { transform:scale(.97); }
.form-err { position:absolute; top:100%; left:22px; right:0; margin-top:10px; font-size:14px; color:#ffd4cc; }
.form-err:empty { display:none; }
.has-err, .has-err .field { border-color:#ff9c8c; }
.has-err ~ .trust { visibility:hidden; }
.trust { margin-top:16px; font-size:14px; color:var(--w60); letter-spacing:.005em; text-wrap:balance; }

/* лента овалов: ниши */
.ribbon { position:absolute; z-index:2; left:0; right:0; bottom:clamp(22px, 3.4vh, 34px); }
.ribbon-label { margin:0 0 12px var(--pad); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--w60); }
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.track { display:flex; gap:20px; width:max-content; padding:4px 0; animation:slide 70s linear infinite; }
.marquee:hover .track, .marquee:focus-within .track { animation-play-state:paused; }
@keyframes slide { to { transform:translateX(-50%); } }
.oval { position:relative; flex:none; width:clamp(118px, min(11.6vw, 19vh), 176px); aspect-ratio:176 / 222; padding:0; border:0; border-radius:999px; overflow:hidden; background:#3a322c; cursor:pointer; transition:transform .4s var(--out), box-shadow .3s; }
.oval img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--out); }
.oval:hover img { transform:scale(1.06); }
.oval span { position:absolute; left:50%; bottom:12%; transform:translateX(-50%); max-width:86%; height:28px; display:inline-flex; align-items:center; padding:0 12px; border-radius:999px; background:rgba(16,14,12,.42); border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oval[aria-selected="true"] { box-shadow:0 0 0 2px #fff; }
.oval[aria-selected="true"] span { background:#fff; color:#17130f; border-color:#fff; }

/* карточка примера: профиль → сайт */
.card { position:absolute; z-index:4; right:clamp(16px, 2.6vw, 36px); bottom:clamp(16px, 2.6vw, 36px); width:392px; display:grid; grid-template-columns:150px 1fr; gap:18px; padding:14px 18px 14px 14px; border-radius:24px; background:var(--dark-glass); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.card-shot { height:236px; overflow:hidden; border-radius:22px 22px 14px 14px; }
.card-shot .phone { width:150px; padding:5px; border-radius:24px 24px 0 0; background:#0f0d0c; box-shadow:none; }
.card-shot .screen { border-radius:19px 19px 0 0; }
.card-info { display:flex; flex-direction:column; min-width:0; padding-top:4px; }
.card-k { font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--w60); }
.card-from { display:flex; align-items:center; gap:9px; margin-top:12px; min-width:0; }
.card-ava { flex:none; width:36px; height:36px; border-radius:50%; padding:2px; background:conic-gradient(from 210deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.card-ava img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #1b1714; }
.card-from > span:last-child { min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.card-from b { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-from small { font-size:12.5px; color:var(--w60); }
.card-arrow { margin:6px 0 4px 10px; color:var(--w60); }
.card-arrow svg { width:16px; height:32px; }
.card-host { font-family:var(--disp); font-weight:500; font-size:19px; line-height:1.15; letter-spacing:-.01em; }
.card-name { margin-top:3px; font-size:13px; color:var(--w60); }
.card-link { margin-top:auto; align-self:flex-start; height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 6px 0 16px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-b); font-size:13.5px; font-weight:600; white-space:nowrap; transition:background-color .2s; }
.card-link:hover { background:rgba(255,255,255,.24); }
.card-link i { width:28px; height:28px; border-radius:50%; background:#fff; color:#17130f; display:flex; align-items:center; justify-content:center; }
.card-link svg { width:14px; height:14px; }
.card .layer { transition:opacity .5s var(--ease); }

/* ширины */
@media (max-width:1180px) {
  .nav { display:none; }
  .top { justify-content:space-between; }
}
@media (min-width:901px) and (max-height:780px) {
  .ribbon-label { display:none; }
  .card { width:372px; grid-template-columns:128px 1fr; gap:16px; }
  .card-shot { height:200px; }
  .card-shot .phone { width:128px; }
}
@media (max-width:900px) {
  .hero { height:auto; min-height:0; max-height:none; padding-bottom:20px; }
  .bg { bottom:auto; height:min(100svh, 980px); }
  .shade { background:
    linear-gradient(180deg, rgba(12,10,9,.5) 0%, rgba(12,10,9,.32) 26%, rgba(12,10,9,.55) 60%, #14110f 100%); bottom:auto; height:min(100svh, 980px); }
  .hero::after { content:''; position:absolute; z-index:-3; left:0; right:0; top:min(100svh, 980px); bottom:0; background:#14110f; }
  .copy, .ribbon, .card { position:relative; left:auto; right:auto; top:auto; bottom:auto; }
  .copy { padding:118px var(--pad) 0; width:100%; }
  .ribbon { margin-top:44px; }
  .card { margin:26px var(--pad) 0; width:auto; max-width:460px; }
}
@media (max-width:560px) {
  :root { --gap:8px; --pad:20px; }
  .hero { border-radius:22px; }
  .top { top:16px; }
  .logo { font-size:21px; }
  .logo svg { width:27px; height:27px; }
  .top-cta { height:42px; padding:0 18px; font-size:14.5px; }
  .copy { padding-top:96px; }
  .h1 { font-size:clamp(40px, 12vw, 54px); line-height:.96; }
  .lead { font-size:16.5px; }
  .handle-form { flex-direction:column; align-items:stretch; height:auto; padding:0; border:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; gap:10px; }
  .field { flex:none; height:58px; padding:0 20px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  .go { height:58px; justify-content:space-between; padding:0 8px 0 24px; }
  .go i { width:42px; height:42px; }
  .trust { font-size:13.5px; }
  .cols { left:var(--pad); right:var(--pad); height:min(100svh, 980px); bottom:auto; }
  .ribbon { margin-top:38px; }
  .track { gap:12px; }
  .oval { width:112px; }
  .oval span { height:24px; font-size:11.5px; padding:0 9px; }
  .card { margin:22px 14px 0; grid-template-columns:118px 1fr; gap:14px; padding:12px 14px 14px 12px; }
  .card-shot { height:196px; }
  .card-shot .phone { width:118px; }
  .card-host { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) {
  .track { animation:none; }
  .js .h1 .w { transform:none; transition:none; }
  .bg picture, .bg picture img { transition:none; transform:none; }
}
@media (max-width:360px) {
  .card { grid-template-columns:92px 1fr; gap:12px; }
  .card-shot { height:170px; }
  .card-shot .phone { width:92px; }
  .card-link { padding:0 5px 0 12px; font-size:12.5px; gap:6px; }
  .card-host { font-size:15.5px; }
}