/* Страница «Создание сайтов». Общие размеры и компоненты — ../shared.css, правила — docs/design-system.md */
html, body { background: var(--vectar-granite-black); color: var(--vectar-warm-white); }
body { font-family: var(--vectar-font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
header.on { opacity: 1; }
header::before { opacity: 1; background: linear-gradient(180deg, rgba(8,13,12,.85), rgba(8,13,12,0)); border-bottom: 0; backdrop-filter: none; }
.scrolled header::before { background: rgba(8,13,12,.9); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(124,245,210,.08); }
.m-only { display: none !important; }
.btn.big { padding: 17px 30px; font-size: 16px; display: inline-flex; gap: 10px; align-items: center; }

/* ---------- блок 1 */
.shero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; }
.stage { position: absolute; inset: 0; }
.stage .still, .stage .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.stage .vid { opacity: 0; transition: opacity .5s; }
.stage .vid.on { opacity: 1; }
.hshade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,13,12,.92) 0%, rgba(8,13,12,.6) 34%, rgba(8,13,12,0) 56%),
              linear-gradient(0deg, var(--vectar-granite-black) 0%, rgba(8,13,12,0) 26%); }
.htext { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-44%); width: min(640px, 48vw); z-index: 2; }
.htext > * { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.ready .htext > * { opacity: 1; transform: none; }
.ready .htext .a2 { transition-delay: .1s; } .ready .htext .a3 { transition-delay: .2s; }
.ready .htext .a4 { transition-delay: .3s; } .ready .htext .a5 { transition-delay: .4s; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; margin-bottom: 24px;
  font-family: var(--vectar-font-accent); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: rgba(244,247,245,.85);
  background: rgba(20,27,25,.6); border: 1px solid rgba(124,245,210,.25); backdrop-filter: blur(10px); }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--vectar-mint); box-shadow: 0 0 10px var(--vectar-mint); }
.shero h1 { font-family: var(--vectar-font-heading); font-weight: 700; font-size: clamp(34px, 3.9vw, 62px); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.shero h1 .accent { font-family: var(--vectar-font-accent); font-weight: 600;
  background: linear-gradient(90deg, var(--vectar-emerald), var(--vectar-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hsub { margin-top: 18px; font-size: var(--fs-body); line-height: 1.55; color: rgba(244,247,245,.78); max-width: 560px; text-wrap: pretty; }
.husp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; max-width: 600px; }
.husp div { padding: 14px 16px; border-radius: 16px; background: rgba(20,27,25,.55); border: 1px solid rgba(124,245,210,.14); backdrop-filter: blur(14px); }
.husp b { display: block; font-family: var(--vectar-font-accent); font-weight: 600; font-size: 22px; color: var(--vectar-mint); white-space: nowrap; }
.husp span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: rgba(244,247,245,.75); }
.htext .a5 { margin-top: 30px; }
/* плашки стоят на местах слева и справа от ноутбука и слегка покачиваются */
.chips-fly { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fly { position: absolute; white-space: nowrap; padding: 11px 18px; border-radius: 14px; opacity: 0;
  font-family: var(--vectar-font-heading); font-weight: 600; font-size: 15px; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(124,245,210,.06)); border: 1px solid rgba(124,245,210,.45);
  backdrop-filter: blur(14px); box-shadow: 0 0 24px rgba(21,185,129,.25), inset 0 1px 0 rgba(255,255,255,.2);
  animation: bobfly 5s ease-in-out infinite; }
.ready .fly { opacity: 1; transition: opacity 1s 1.2s; }
.f1 { left: 50%; top: 68%; transform: rotate(-4deg); }
.f2 { left: 53%; top: 79%; transform: rotate(-3deg); animation-delay: -1.2s; }
.f3 { right: 11%; top: 80%; transform: rotate(-2deg); animation-delay: -2.4s; }
.f4 { right: 4%; top: 89%; transform: rotate(3deg); animation-delay: -3.6s; }
@keyframes bobfly { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ---------- блок 2: работы */
.works { position: relative; padding: clamp(56px, 6vw, 96px) 0 40px; margin-top: -1px; }
.wbg { position: absolute; inset: 0; z-index: -1; background: url(../../web-assets/sites/gallery-bg.webp) center 60% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
.wbg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 65%, rgba(21,185,129,.08), transparent 70%);
  animation: glow 6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.whead { text-align: center; padding: 0 var(--gutter); }
.whead .desc { margin: 10px auto 0; max-width: 620px; }
/* вкладки: по краям уходят в размытие, листаются */
.ptabs-wrap { position: relative; max-width: 1100px; margin: 24px auto 0; padding: 0 56px; }
.ptabs { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 30px; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs.drag { cursor: grabbing; scroll-behavior: auto; }
.ptab { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 16px; cursor: pointer;
  font-family: var(--vectar-font-heading); font-weight: 600; font-size: 15px; color: rgba(244,247,245,.8);
  background: rgba(20,27,25,.55); border: 1px solid rgba(244,247,245,.12); backdrop-filter: blur(12px); transition: all .3s; user-select: none; }
.ptab:hover { border-color: rgba(124,245,210,.35); color: #fff; }
.ptab[aria-selected="true"] { color: #fff; border-color: var(--vectar-mint); background: linear-gradient(160deg, rgba(21,185,129,.3), rgba(8,13,12,.5));
  box-shadow: 0 0 22px rgba(21,185,129,.35), inset 0 0 12px rgba(124,245,210,.12); }
.ptab svg { color: var(--vectar-mint); }
.parr { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(20,27,25,.7); border: 1px solid rgba(124,245,210,.25); color: var(--vectar-mint); font-size: 22px; line-height: 1; transition: opacity .3s, border-color .2s; }
.parr:hover { border-color: var(--vectar-mint); }
.parr.l { left: 6px; } .parr.r { right: 6px; }
.parr.off { opacity: 0; pointer-events: none; }
/* карусель: центр крупно, по бокам под углом */
.carousel { position: relative; height: clamp(340px, min(44vw, calc(100vh - 300px)), 640px); margin-top: 36px; perspective: 1800px; }
.track { position: absolute; inset: 0; }
.slide { position: absolute; left: 50%; top: 50%; width: min(62vw, 980px); transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s, filter .9s; will-change: transform; cursor: pointer; }
.slide .tag { position: absolute; left: 50%; top: -18px; transform: translate(-50%, -100%); white-space: nowrap; padding: 9px 18px; border-radius: 12px;
  font-family: var(--vectar-font-heading); font-weight: 600; font-size: 15px; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(124,245,210,.06)); border: 1px solid rgba(124,245,210,.4); backdrop-filter: blur(14px);
  box-shadow: 0 0 20px rgba(21,185,129,.2); transition: opacity .5s; }
.slide .frame { position: relative; padding: 12px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(124,245,210,.35); backdrop-filter: blur(14px);
  box-shadow: 0 0 40px rgba(21,185,129,.18), 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2); }
.slide .screen { position: relative; border-radius: 18px; overflow: hidden; background: #050807; aspect-ratio: 1920 / 948; }
.slide .screen img, .slide .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.slide .screen .long { bottom: auto; height: auto; min-height: 100%; animation: none; }
.slide.on .screen .long { animation: pan 14s ease-in-out infinite alternate; }
@keyframes pan { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(var(--pan, 0px)); } }
.slide .want { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); opacity: 0; transition: opacity .5s .2s; }
.slide.on .want { opacity: 1; }
.slide:not(.on) .tag { opacity: 0; }
.carr { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 58px; height: 58px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  color: #fff; background: rgba(8,13,12,.65); border: 1.5px solid var(--vectar-mint); backdrop-filter: blur(10px);
  box-shadow: 0 0 22px rgba(21,185,129,.45), inset 0 0 12px rgba(124,245,210,.15); transition: transform .2s, box-shadow .2s; }
.carr:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 0 32px rgba(21,185,129,.7); }
.carr.l { left: max(var(--gutter), calc(50% - min(31vw, 490px) - 90px)); }
.carr.r { right: max(var(--gutter), calc(50% - min(31vw, 490px) - 90px)); }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 64px; }
.dots button { width: 46px; height: 4px; border-radius: 4px; border: 0; cursor: pointer; background: rgba(244,247,245,.18); transition: all .4s; padding: 0; }
.dots button.on { width: 64px; background: var(--vectar-gradient); box-shadow: 0 0 12px rgba(124,245,210,.6); }

/* ---------- блок 3: квиз */
.qwrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; margin-top: 40px; align-items: stretch; }
.quiz { padding: clamp(22px, 3vw, 40px); }
.qside { padding: 28px; display: flex; flex-direction: column; gap: 14px;
  background: radial-gradient(80% 60% at 50% 0%, rgba(21,185,129,.16), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.qring { position: relative; width: 120px; height: 120px; margin: 0 auto 6px; }
.qring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qring circle { fill: none; stroke-width: 8; }
.qring .bg { stroke: rgba(244,247,245,.08); }
.qring .fg { stroke: url(#none); stroke: var(--vectar-mint); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 6px rgba(124,245,210,.6)); }
.qring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--vectar-font-accent); font-weight: 600; font-size: 28px; }
.qside .h3, .qside > .desc { text-align: center; }
.qside > .desc { font-size: var(--fs-small); }
.qsum { list-style: none; display: grid; gap: 6px; margin-top: 4px; }
.qsum li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; font-size: 13px; color: rgba(244,247,245,.45); border: 1px solid transparent; transition: all .3s; }
.qsum li span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: rgba(244,247,245,.2); }
.qsum li.ok { color: rgba(244,247,245,.7); }
.qsum li.ok span::before { background: var(--vectar-mint); box-shadow: 0 0 8px var(--vectar-mint); }
.qsum li.cur { border-color: rgba(124,245,210,.25); background: rgba(21,185,129,.06); color: #fff; }
.qsum li b { font-weight: 500; color: var(--vectar-mint); font-size: 12.5px; padding-left: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qperks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: auto; padding-top: 6px; }
.qperks span { padding: 7px 12px; border-radius: 999px; font-size: 12px; color: rgba(244,247,245,.8); border: 1px solid rgba(124,245,210,.2); background: rgba(8,13,12,.4); }
.qtop { display: flex; align-items: center; gap: 18px; }
.qstep { font-family: var(--vectar-font-accent); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--vectar-mint); white-space: nowrap; }
.qbar { flex: 1; height: 4px; border-radius: 4px; background: rgba(244,247,245,.1); overflow: hidden; }
.qbar i { display: block; height: 100%; width: 10%; background: var(--vectar-gradient); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.qbody { margin-top: 28px; min-height: 280px; transition: opacity .3s, transform .3s; }
.qbody.out { opacity: 0; transform: translateX(-16px); }
.qbody .h3 { margin-bottom: 8px; }
.qbody .hint { font-size: var(--fs-small); color: rgba(244,247,245,.55); margin-bottom: 20px; }
.qopts { display: flex; flex-wrap: wrap; gap: 10px; }
.qopts label { cursor: pointer; }
.qopts input { position: absolute; opacity: 0; pointer-events: none; }
.qopts span { display: inline-block; padding: 12px 18px; border-radius: 14px; font-size: 15px; color: rgba(244,247,245,.88);
  background: rgba(8,13,12,.5); border: 1px solid rgba(244,247,245,.12); transition: all .2s; }
.qopts span:hover { border-color: rgba(124,245,210,.4); }
.qopts input:checked + span { color: var(--vectar-granite-black); background: var(--vectar-gradient); border-color: transparent; }
.qextra { margin-top: 18px; width: 100%; padding: 15px 16px; border-radius: 14px; font: inherit; font-size: 16px; color: #fff; resize: vertical;
  background: rgba(8,13,12,.6); border: 1px solid rgba(244,247,245,.12); outline: none; }
.qextra:focus { border-color: var(--vectar-mint); }
.qnav { display: flex; justify-content: space-between; margin-top: 28px; }
.qprev { visibility: hidden; }
.quiz .final-q { padding: 0; background: none; border: 0; backdrop-filter: none; box-shadow: none; }
.quiz .final-q .qrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- блок 4: преимущества */
.advs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.adv { padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: border-color .3s, transform .3s; }
.adv:hover { border-color: rgba(124,245,210,.4); transform: translateY(-3px); }
.adv .desc { margin-top: 8px; font-size: var(--fs-small); }

/* ---------- блок 5: кросс-ссылки */
.cross { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.cross a { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; transition: border-color .3s, transform .3s; }
.cross a:hover { border-color: rgba(124,245,210,.45); transform: translateY(-3px); }
.cross .eyebrow-s { margin: 0; }
.cross .more { margin-top: 4px; font-family: var(--vectar-font-heading); font-weight: 600; font-size: var(--fs-small); color: var(--vectar-mint); }
.form fieldset:first-of-type { margin-top: 14px; }

@media (max-width: 1180px) {
  .advs { grid-template-columns: repeat(2, 1fr); }
  .qwrap { grid-template-columns: 1fr; }
  .qside { display: none; }
  .slide { width: 72vw; }
}
@media (max-width: 820px) {
  .m-only { display: flex !important; }
  .shero { height: auto; min-height: 100svh; }
  .stage .still, .stage .vid { object-position: 50% 20%; height: 64svh; }
  .hshade { background: linear-gradient(0deg, var(--vectar-granite-black) 0%, var(--vectar-granite-black) 36%, rgba(8,13,12,.6) 46%, rgba(8,13,12,0) 62%); }
  .htext { position: relative; left: auto; top: auto; transform: none; width: auto; padding: calc(57svh - 18px) var(--gutter) 40px; }
  .htext::before { content: ''; position: absolute; inset: calc(57svh - 70px) 0 0; z-index: -1; background: linear-gradient(180deg, rgba(8,13,12,0), rgba(8,13,12,.86) 60px, rgba(8,13,12,.92)); }
  .shero h1 { font-size: clamp(28px, 8.4vw, 38px); }
  .husp { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .husp div { padding: 10px; } .husp b { font-size: 17px; } .husp span { font-size: 11.5px; }
  .htext .a5 .btn { width: 100%; justify-content: center; }
  .chips-fly { bottom: auto; height: 60svh; }
  .fly { font-size: 12px; padding: 7px 11px; border-radius: 11px; }
  .f1 { left: 6%; right: auto; top: 73%; } .f2 { right: 4%; left: auto; top: 30%; }
  .f3 { left: 8%; right: auto; top: 82%; } .f4 { right: 6%; left: auto; top: 80%; }
  .wbg { background-image: url(../../web-assets/sites/gallery-bg-m.webp); }
  .ptabs-wrap { padding: 0 8px; }
  .parr { display: none; }
  .ptabs { padding: 6px 24px; }
  .ptab { padding: 11px 16px; font-size: 14px; }
  .swipe-hint { justify-content: center; margin-top: 16px; }
  .carousel { height: min(150vw, 680px); margin-top: 56px; perspective: 1200px; }
  .slide { width: 66vw; }
  .slide .screen { aspect-ratio: 9 / 18; }
  .slide .frame { padding: 8px; border-radius: 24px; }
  .slide .tag { font-size: 13px; padding: 7px 12px; }
  .carr { width: 46px; height: 46px; }
  .carr.l { left: 8px; } .carr.r { right: 8px; }
  .dots { margin-top: 56px; flex-wrap: wrap; }
  .dots button { width: 28px; } .dots button.on { width: 42px; }
  .qwrap { grid-template-columns: 1fr; margin-top: 28px; }
  .qside { display: none; }
  .quiz .final-q .qrow { grid-template-columns: 1fr; gap: 0; }
  .qopts span { font-size: 14px; padding: 10px 14px; }
  .qnav .btn { padding: 14px 18px; }
  .advs { grid-template-columns: 1fr; margin-top: 28px; gap: 10px; }
  .adv { flex-direction: row; gap: 14px; padding: 20px; }
  .cross { grid-template-columns: 1fr; }
}

/* компьютерная версия сайта внутри «телефона» — целиком по ширине, с мягкой прокруткой */
.slide .screen .fit { object-fit: contain; object-position: center; background: #050807; }

/* телефон: логотип и бургер всегда видны поверх видео */
@media (max-width: 820px) {
  header { z-index: 40; }
  html:not(.scrolled) header::before { opacity: 1; height: 120px; bottom: auto; background: linear-gradient(180deg, rgba(8,13,12,.94), rgba(8,13,12,.65) 55%, rgba(8,13,12,0)); }
  .logo-static { z-index: 41; filter: drop-shadow(0 2px 10px rgba(0,0,0,.85)); }
  .burger { position: fixed; top: 16px; right: 20px; z-index: 42;
    background: rgba(8,13,12,.62); border: 1px solid rgba(124,245,210,.32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* боковые слайды карусели не должны расширять страницу: иначе на телефоне страница шире экрана и бургер уезжает за край */
.works { overflow-x: hidden; overflow-x: clip; }