/* Vitrine v12 — визуальный язык Locket на продукте Vitrine. Токены и правила: DESIGN.md */

@font-face{font-family:"Nunito";font-style:normal;font-weight:400 1000;font-display:swap;src:url(../fonts/nunito-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 1000;font-display:swap;src:url(../fonts/nunito-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 1000;font-display:swap;src:url(../fonts/nunito-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --cream:#FFFBF1;
  --cream-top:#FFE8AD;
  --sun:#FFB800;
  --sun-btn:#FFB000;
  --sun-hover:#FFC857;
  --sun-soft:#FFF6DF;
  --sun-soft-2:#FFF0C9;
  --amber:#B85F00;
  --orange:#FF8A00;
  --coral:#FF5A4F;
  --ink:#1A1200;
  --ink-2:#665D4C;
  --ink-3:#736955;
  --ink-on-sun:#3B2C06;
  --tint:rgba(26,18,0,.08);
  --tint-2:rgba(26,18,0,.13);
  --err:#B3261E;
  --err-on-sun:#7A1A0E;

  --r-card:40px;
  --r-faq:28px;
  --r-squircle:16.875%;

  --sh-bubble:0 5px 10px rgba(0,0,0,.04),0 19px 19px rgba(0,0,0,.03),0 43px 26px rgba(0,0,0,.02),0 76px 30px rgba(0,0,0,.01);
  --sh-sticker:drop-shadow(0 1px 1.5px rgba(26,18,0,.10)) drop-shadow(0 6px 12px rgba(0,0,0,.05)) drop-shadow(0 40px 26px rgba(0,0,0,.03));
  --sh-phone:0 16px 50px rgba(0,0,0,.18);
  --sh-float:0 12px 40px rgba(122,74,0,.15);
  --sh-note:0 1px 2px rgba(26,18,0,.05),0 10px 28px rgba(122,74,0,.09);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.45,0,.55,1);
  /* Пружины Locket, пересчитанные в linear(): stiffness/damping 260/22, 480/24, 220/13 */
  --spring-pop:linear(0, 0.019, 0.069, 0.136, 0.22, 0.308, 0.401, 0.49, 0.578, 0.66, 0.732, 0.798, 0.853, 0.902, 0.941, 0.974, 0.999, 1.019, 1.034, 1.043, 1.049, 1.052, 1.052, 1.051, 1.048, 1.044, 1.04, 1.035, 1.03, 1.025, 1.021, 1.017, 1.013, 1.01, 1.007, 1.004, 1.002, 1.001, 1, 0.999, 0.998, 0.998, 0.997, 0.997, 0.997, 0.997, 0.998, 0.998, 1);
  --spring-press:linear(0, 0.028, 0.099, 0.199, 0.312, 0.437, 0.561, 0.679, 0.782, 0.875, 0.953, 1.016, 1.061, 1.094, 1.115, 1.125, 1.126, 1.121, 1.111, 1.098, 1.083, 1.067, 1.052, 1.038, 1.024, 1.013, 1.004, 0.997, 0.991, 0.987, 0.985, 0.984, 0.984, 0.985, 0.986, 0.988, 0.99, 0.992, 0.994, 0.996, 0.997, 0.999, 1, 1.001, 1.001, 1.002, 1.002, 1.002, 1);
  --spring-stamp:linear(0, 0.043, 0.15, 0.302, 0.471, 0.641, 0.804, 0.941, 1.052, 1.134, 1.186, 1.211, 1.214, 1.2, 1.173, 1.139, 1.102, 1.065, 1.032, 1.004, 0.982, 0.967, 0.958, 0.954, 0.955, 0.959, 0.965, 0.973, 0.981, 0.989, 0.995, 1.001, 1.005, 1.008, 1.01, 1.01, 1.01, 1.008, 1.007, 1.005, 1.004, 1.002, 1.001, 0.999, 0.999, 0.998, 0.998, 0.998, 1);

  --font:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-ios:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;background:var(--cream-top);scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.45;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--sun);padding:10px 16px;border-radius:999px;font-weight:900;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:8px 16px;font-family:var(--font);font-size:17px;line-height:22px;font-weight:800;letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .5s var(--spring-press),background-color .2s ease-out,color .2s ease-out}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.95);transition-duration:.12s,.2s,.2s}
.btn svg{width:16px;height:16px;flex:none}
.btn--tint{background:var(--tint);color:var(--ink)}
.btn--tint:hover{background:var(--tint-2)}
.btn--sun{background:var(--sun-btn);color:var(--ink)}
.btn--sun:hover{background:var(--sun-hover)}
.btn--ink{background:var(--ink);color:var(--sun)}
.btn--ink:hover{background:#352809}
.btn--lg{padding:15px 28px;font-size:18px}
.btn--off{background:transparent;color:var(--ink-3);box-shadow:inset 0 0 0 2px rgba(26,18,0,.16);cursor:not-allowed}
.btn--off:hover,.btn--off:active{transform:none}

/* ---------- Шапка ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50}
.hdr__bg{position:absolute;inset:0 0 -28px;pointer-events:none;opacity:0;transition:opacity .3s ease-out;background:linear-gradient(to bottom,var(--cream) 0%,var(--cream) 40%,rgba(255,251,241,.85) 66%,rgba(255,251,241,0) 100%)}
.hdr.is-scrolled .hdr__bg,.hdr.is-open .hdr__bg{opacity:1}
.hdr__in{position:relative;max-width:1400px;margin:0 auto;height:70px;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);justify-self:start;border-radius:12px}
.logo__mark{width:32px;height:32px;flex:none}
.logo__word{font-weight:1000;font-size:27px;line-height:1;letter-spacing:-.035em;padding-bottom:2px}
.nav{position:relative}
.nav__list{position:relative;z-index:1;display:flex;gap:4px}
.nav__list a{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;font-size:17px;line-height:22px;font-weight:800;letter-spacing:.01em;color:var(--ink-3);text-decoration:none;transition:color .2s ease-out}
.nav__list a:hover{color:var(--ink)}
.nav__pill{position:absolute;z-index:0;top:0;left:0;height:38px;width:0;border-radius:999px;background:var(--tint);opacity:0;pointer-events:none;transition:opacity .18s ease-out,transform .5s var(--spring-press),width .5s var(--spring-press)}
.nav__pill.is-on{opacity:1}
.nav__pill.is-jump{transition:opacity .18s ease-out}
.hdr__cta{justify-self:end}
.hdr__menu{display:none;justify-self:end;width:44px;height:44px;border:0;background:transparent;border-radius:999px;cursor:pointer;place-content:center;gap:6px;padding:0}
.hdr__menu span{display:block;width:20px;height:2.6px;border-radius:2px;background:var(--ink);transition:transform .45s var(--spring-press)}
.hdr.is-open .hdr__menu span:first-child{transform:translateY(4.3px) rotate(45deg)}
.hdr.is-open .hdr__menu span:last-child{transform:translateY(-4.3px) rotate(-45deg)}
.mnav{position:absolute;top:66px;left:12px;right:12px;background:#fff;border-radius:28px;padding:10px;box-shadow:0 24px 60px rgba(122,74,0,.2)}
.mnav a:not(.btn){display:block;padding:14px 16px;border-radius:18px;font-size:20px;font-weight:900;text-decoration:none;color:var(--ink)}
.mnav a:not(.btn):hover{background:var(--sun-soft)}
.mnav .btn{display:flex;width:100%;margin-top:6px}
.js .nav__list li{opacity:0;translate:0 16px;filter:blur(8px);transition:opacity .7s var(--ease-out),translate .7s var(--ease-out),filter .7s var(--ease-out);transition-delay:calc(var(--i,0) * 50ms + 150ms)}
.js .is-ready .nav__list li{opacity:1;translate:0 0;filter:blur(0)}

/* ---------- Первый экран ---------- */
.hero{--p:0;--dev-h:clamp(300px,min(60svh,calc(100svh - 372px)),620px);position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:78px 24px 34px;isolation:isolate;overflow:clip}
.hero__glow{position:absolute;inset:0 0 auto;height:52svh;z-index:-1;background:linear-gradient(to bottom,rgba(255,184,0,.28),rgba(255,184,0,0));pointer-events:none}

/* Наклейки */
.fls{position:absolute;inset:0;z-index:1;pointer-events:none}
.fl{position:absolute;left:calc(var(--l) * 1%);top:calc(var(--t) * 1%);width:calc(var(--s) * 1vmin);transform:translate(-50%,-50%) translate(calc(var(--p) * (var(--l) - 50) * .15vw),calc(var(--p) * (var(--t) - 50) * .15vh));opacity:calc(1 - var(--p));will-change:transform,opacity}
.fl--wide{width:auto}
.fl__in{transition:transform var(--din,.8s) var(--ease-out) var(--dl,0s),opacity .3s linear var(--dl,0s)}
.js .hero:not(.is-in) .fl__in{transform:translate(calc((50 - var(--l)) * .8vw),calc((50 - var(--t)) * .8vh)) scale(.1);opacity:0}
.fl__dr{animation:drift var(--dur,8s) var(--ease-io) infinite;animation-delay:calc(var(--dl,0s) * -9)}
.fl__dr>*{rotate:calc(var(--r,0) * 1deg)}
.hero.is-off .fl__dr,.final.is-off .ffl{animation-play-state:paused}
@keyframes drift{0%,100%{translate:0 0}25%{translate:0 calc(var(--d,6) * -1px)}75%{translate:0 calc(var(--d,6) * 1px)}}

.st{display:block;width:100%;height:auto;overflow:visible;filter:var(--sh-sticker)}
.bub{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-squircle);overflow:hidden;background:#EDE4D0;box-shadow:var(--sh-bubble)}
.bub>img{width:100%;height:100%;object-fit:cover}
.bub::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,0));pointer-events:none}
.bub__cap{position:absolute;z-index:1;left:6%;bottom:6%;right:6%;display:flex;align-items:center;gap:4%;font-size:clamp(9px,1.25vmin,13px);line-height:1;font-weight:800;color:#fff}
.bub__cap img{width:16%;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(255,255,255,.9);flex:none}
.bub__cap span{padding:.42em .7em .48em;border-radius:999px;background:rgba(26,18,0,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}
.pill-st{display:inline-block;padding:.42em .95em .52em;border-radius:999px;background:var(--ink);color:var(--sun);font-size:clamp(13px,1.7vmin,20px);line-height:1;font-weight:900;letter-spacing:-.005em;white-space:nowrap;box-shadow:0 0 0 .24em #fff;filter:var(--sh-sticker)}
.addr-st{display:inline-flex;align-items:center;gap:.45em;padding:.62em 1.05em .68em .85em;border-radius:999px;background:#fff;color:var(--ink);font-size:clamp(12px,1.5vmin,17px);line-height:1;font-weight:800;white-space:nowrap;box-shadow:0 0 0 1px rgba(26,18,0,.07),0 10px 26px rgba(122,74,0,.12);filter:drop-shadow(0 1px 1px rgba(26,18,0,.06))}
.addr-st svg{width:1em;height:1em;color:var(--amber);flex:none}
.addr-st [data-addr]{max-width:22ch;overflow:hidden;text-overflow:ellipsis}

/* Сцена: телефон + карточка сайта */
.hero__stage{position:relative;z-index:2;transform:translateX(-17%)}
.dev{position:relative;height:var(--dev-h);width:calc(var(--dev-h) * .795);container-type:inline-size;transition:transform 1s var(--ease-out),opacity .45s ease-out}
.js .hero:not(.is-in) .dev{transform:rotate(-10deg) scale(.45);opacity:0}
.dev__mask{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,#000 46%,transparent 81%);mask-image:linear-gradient(to bottom,#000 46%,transparent 81%)}
.phone{position:absolute;left:50%;top:6%;width:66%;aspect-ratio:393/852;transform:translateX(-50%) rotate(-5deg);transform-origin:50% 0;container-type:inline-size;border-radius:14%/6.5%;overflow:hidden;background:#fff;box-shadow:var(--sh-phone)}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);pointer-events:none}

/* Профиль Instagram, всё в единицах ширины телефона */
.ig{position:absolute;inset:0;font-family:var(--font-ios);color:#000;font-weight:400;line-height:1.2;letter-spacing:0}
.ig__status{height:10cqw;padding:0 7.5cqw 0 9cqw;display:flex;align-items:flex-end;justify-content:space-between;font-size:4.2cqw;font-weight:600}
.ig__status>span{transform:translateY(.4cqw)}
.ig__sys{width:17cqw;height:auto;color:#000}
.ig__top{height:10cqw;padding:0 4.5cqw 0 5cqw;display:flex;align-items:center;justify-content:space-between}
.ig__handle{display:flex;align-items:center;gap:1.4cqw;min-width:0;font-size:5cqw;font-weight:700;letter-spacing:-.01em}
.ig__handle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig__handle svg{width:2.6cqw;flex:none}
.ig__icons{display:flex;gap:4cqw;flex:none}
.ig__icons svg{width:5.6cqw;height:5.6cqw}
.ig__head{display:flex;align-items:center;gap:4.5cqw;padding:2cqw 5cqw 0}
.ig__ava{position:relative;width:21cqw;aspect-ratio:1;flex:none}
.ig__ring{position:absolute;inset:0;border-radius:50%;background:linear-gradient(45deg,#FFC21F,#FF7A2F 50%,#F0437A)}
.ig__ava img,.ig__letter{position:absolute;inset:1.1cqw;border-radius:50%;border:.9cqw solid #fff;width:calc(100% - 2.2cqw);height:calc(100% - 2.2cqw);object-fit:cover;background:#fff}
.ig__letter{display:none;place-items:center;font-family:var(--font);font-weight:1000;font-size:8.5cqw;color:var(--ink);background:linear-gradient(160deg,#FFE7A0,#FFC94D)}
.ig__meta{min-width:0;flex:1}
.ig__name{display:block;font-size:4.2cqw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig__stats{display:flex;gap:5cqw;margin-top:1.4cqw}
.ig__stats span{display:flex;flex-direction:column;min-width:0}
.ig__stats b{font-size:4.3cqw;font-weight:700}
.ig__stats i{font-style:normal;font-size:3.3cqw;color:#000;white-space:nowrap}
.ig__bio{padding:2.6cqw 5cqw 0;font-size:3.6cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig__btns{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;padding:3cqw 5cqw 0}
.ig__btn{height:7.4cqw;border-radius:2.2cqw;background:#EFEFEF;display:grid;place-items:center;font-size:3.4cqw;font-weight:600}
.ig__btn--pri{background:#0095F6;color:#fff}
.ig__tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.6cqw;height:7.6cqw;border-bottom:1px solid #DBDBDB}
.ig__tabs span{display:grid;place-items:center;color:#8E8E8E}
.ig__tabs span.is-on{color:#000;box-shadow:inset 0 -.5cqw 0 #000}
.ig__tabs svg{width:5cqw;height:5cqw}
.ig__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5cqw;margin-top:.5cqw}
.ig__tile{position:relative;aspect-ratio:3/4;background:#F1ECE1;overflow:hidden}
.ig__tile img{width:100%;height:100%;object-fit:cover}
.ig__tile.is-pop{animation:tilepop .6s var(--spring-pop) both;animation-delay:var(--td,0ms)}
@keyframes tilepop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
.ig [data-swap]{transition:opacity .22s ease-out}
.ig.is-swapping [data-swap]{opacity:0}

/* Режим «ваш профиль» при вводе ника */
.ig .sk-line{display:none}
.ig.is-you .ig__ava img{display:none}
.ig.is-you .ig__letter{display:grid}
.ig.is-you .ig__tile img{opacity:0}
.ig.is-you .ig__tile,.site.is-you .sk{background:linear-gradient(100deg,#F6EEDB 30%,#FFF6E2 50%,#F6EEDB 70%) 0 0/300% 100%;animation:shimmer 1.8s linear infinite}
.ig.is-you [data-ig-posts],.ig.is-you [data-ig-fol]{color:transparent;background:#F1E8D2;border-radius:1cqw}
.ig.is-you .ig__name,.ig.is-you .ig__bio{color:transparent}
.ig.is-you .ig__name{width:62%;height:4.2cqw;margin-bottom:.4cqw;border-radius:1.2cqw;background:#F1E8D2}
.ig.is-you .ig__bio{position:relative}
.ig.is-you .ig__bio::after{content:"";position:absolute;left:5cqw;top:3cqw;width:56%;height:3.4cqw;border-radius:1.2cqw;background:#F1E8D2}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* Карточка готового сайта поверх телефона */
.site{position:absolute;z-index:2;left:59%;top:27%;width:76cqw;padding:1.6cqw;border-radius:5cqw;background:#fff;box-shadow:0 1px 2px rgba(26,18,0,.06),var(--sh-float),0 30px 60px rgba(122,74,0,.12);rotate:7deg;transform-origin:20% 50%;transition:transform .6s var(--spring-pop) .3s,opacity .2s ease-out .3s}
.js .hero:not(.is-in) .site{transform:scale(.3) rotate(13deg);opacity:0}
.site__bar{display:flex;align-items:center;gap:2.4cqw;height:7.4cqw;padding:0 1.4cqw 1.2cqw 2cqw}
.site__dots{display:flex;gap:1.1cqw;flex:none}
.site__dots i{width:1.9cqw;height:1.9cqw;border-radius:50%;background:#E7DFCE}
.site__addr{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:1.2cqw;height:5.6cqw;padding:0 2.4cqw;border-radius:999px;background:#F6F1E6;font-size:2.9cqw;font-weight:800;color:var(--ink)}
.site__addr svg{width:2.6cqw;height:2.6cqw;flex:none;color:var(--ink-3)}
.site__addr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site__shot{position:relative;aspect-ratio:16/10;border-radius:3.4cqw;overflow:hidden;background:#F1ECE1}
.site__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.site__img--front{clip-path:inset(0 0 0 0)}
.site__img--front.is-reveal{animation:siteReveal 1s var(--ease-out) both}
@keyframes siteReveal{from{clip-path:inset(0 0 100% 0);transform:scale(1.04)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
.site__skel{position:absolute;inset:0;display:none;padding:4cqw;background:#FFFDF7;flex-direction:column;gap:3cqw}
.site.is-you .site__skel{display:flex}
.sk{border-radius:1.4cqw;background:#F3EAD6}
.sk--nav{height:3cqw;width:100%}
.sk__row{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:4cqw}
.sk__col{display:flex;flex-direction:column;gap:2.2cqw;justify-content:center}
.sk--h{height:4.4cqw;width:92%}
.sk--h2{width:70%}
.sk--p{height:2.6cqw;width:80%;margin-top:1cqw}
.sk--btn{height:5.4cqw;width:46%;border-radius:999px;margin-top:2cqw}
.sk--img{border-radius:3cqw}
.site__ok{position:absolute;right:-4.5cqw;top:-5cqw;width:13cqw;height:auto;rotate:-10deg;overflow:visible;filter:var(--sh-sticker);transition:transform .7s var(--spring-stamp) .7s,opacity .2s .7s}
.js .hero:not(.is-in) .site__ok{transform:scale(0);opacity:0}
.site.is-you .site__ok{transform:scale(0);opacity:0;transition-delay:0s}
.site__fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.fx{position:absolute;width:var(--w,18px);height:auto;left:var(--x);top:var(--y);opacity:0;animation:fxUp 1.5s var(--ease-out) forwards;animation-delay:var(--dl,0s);filter:var(--sh-sticker)}
@keyframes fxUp{0%{transform:translate(0,10px) scale(.4) rotate(0);opacity:0}18%{opacity:1}100%{transform:translate(var(--dx,0),-70px) scale(1) rotate(var(--rot,10deg));opacity:0}}

/* Текст героя */
.hero__text{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--dev-h) * -.26);text-align:center;width:min(100%,980px);transition:opacity .8s ease-out .45s}
.js .hero:not(.is-in) .hero__text{opacity:0}
.h1{font-size:clamp(34px,min(4.1vw + 6px,7.4svh),66px);line-height:1.0;font-weight:900;letter-spacing:-.03em}
.h1 span{display:block;text-wrap:balance}
.lead{margin-top:14px;max-width:34ch;font-size:clamp(18px,min(1.2vw + 7px,3.3svh),25px);line-height:1.25;font-weight:800;letter-spacing:-.005em;color:var(--ink-2);text-wrap:balance}
.built{display:inline-flex;align-items:center;gap:10px;margin-top:2px;font-size:16px;font-weight:800;color:var(--ink-2)}
.built__faces{display:flex}
.built__faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2.5px var(--cream)}
.built__faces img+img{margin-left:-9px}
.hero__down{position:absolute;bottom:14px;left:50%;translate:-50% 0;padding:12px;color:rgba(26,18,0,.26);border-radius:999px;transition:color .2s}
.hero__down:hover{color:rgba(26,18,0,.45)}
.hero__down svg{width:36px;height:auto;display:block;animation:bob 2.8s var(--ease-io) 1.4s infinite}
@keyframes bob{0%,21%{translate:0 0}10.7%{translate:0 7px}}
@media (max-height:860px){.hero__down{display:none}}

/* Поле ника */
.nick{width:min(100%,560px);margin-top:24px}
.nick__field{display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(26,18,0,.06),var(--sh-float);transition:box-shadow .2s ease-out}
.nick__field:focus-within{box-shadow:0 0 0 2.5px var(--ink),0 0 0 7px rgba(255,184,0,.4),var(--sh-float)}
.nick__at{padding-left:16px;font-size:20px;font-weight:900;color:var(--ink-3)}
.nick__input{flex:1;min-width:0;border:0;background:transparent;padding:12px 6px 12px 2px;font-size:19px;font-weight:800;color:var(--ink);outline:none}
.nick__input::placeholder{color:#8F846F;opacity:1}
.nick__btn{flex:none;padding:14px 24px;font-size:18px}
.nick__err{min-height:22px;margin-top:9px;padding:0 20px;font-size:15px;line-height:1.4;font-weight:800;color:var(--err);text-align:center}
.nick.is-bad .nick__field{box-shadow:0 0 0 2.5px var(--err),var(--sh-float)}
.nick.is-bad .nick__field{animation:shake .4s ease-in-out}
@keyframes shake{20%{translate:-6px 0}45%{translate:5px 0}70%{translate:-3px 0}}

/* ---------- Секции ---------- */
.sec{max-width:1320px;margin:0 auto;padding:clamp(76px,9vw,128px) 24px 0}
.sec__head{max-width:900px;margin:0 auto clamp(34px,4vw,56px);text-align:center}
.h2{font-size:clamp(32px,3.2vw + 6px,52px);line-height:1.04;font-weight:900;letter-spacing:-.028em;text-wrap:balance}
.sec__sub{margin:14px auto 0;max-width:40ch;font-size:clamp(18px,1vw + 8px,22px);line-height:1.35;font-weight:800;color:var(--ink-2);text-wrap:balance}
.card{background:var(--sun-soft);border-radius:var(--r-card);transition:background-color .2s ease-out}
.card__t{font-size:21px;line-height:1.2;font-weight:900;letter-spacing:-.01em;text-wrap:balance}
.card__p{margin-top:8px;font-size:17px;line-height:1.4;font-weight:700;color:var(--ink-2)}

.js [data-rv]{opacity:0;translate:0 24px;filter:blur(6px);transition:opacity .7s var(--ease-out) var(--rv-d,0s),translate .7s var(--ease-out) var(--rv-d,0s),filter .7s var(--ease-out) var(--rv-d,0s),background-color .2s ease-out}
.js [data-rv].is-rv{opacity:1;translate:0 0;filter:none}

/* Лента */
.live{padding:6px 0 0;position:relative}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;line-height:1.2;font-weight:900;letter-spacing:.01em}
.eyebrow__dot{width:10px;height:10px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px rgba(255,184,0,.22)}
.live__viewport{overflow:hidden;padding:18px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.live__track{display:flex;width:max-content;animation:marquee var(--mq,60s) linear infinite}
.live__viewport:hover .live__track,.live.is-off .live__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.note{flex:none;display:flex;align-items:center;gap:12px;margin-right:14px;padding:12px 20px 12px 12px;border-radius:24px;background:#fff;box-shadow:var(--sh-note)}
.note__ic{width:42px;height:42px;flex:none}
.note__t{display:block;font-size:16px;line-height:1.25;font-weight:900;white-space:nowrap}
.note__s{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:14px;line-height:1.3;font-weight:800;color:var(--ink-2);white-space:nowrap}
.note__s svg{width:14px;height:14px}
.note__dots{display:inline-flex;gap:3px;margin-left:1px}
.note__dots i{width:4px;height:4px;border-radius:50%;background:var(--sun);animation:dot 1.4s var(--ease-io) infinite}
.note__dots i:nth-child(2){animation-delay:.18s}
.note__dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-3px);opacity:1}}

/* Шаги */
.steps{padding-top:clamp(40px,5vw,72px)}
.steps__list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{position:relative;display:flex;flex-direction:column;min-height:330px;padding:32px}
.step__n{position:absolute;top:24px;left:24px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--sun);font-size:17px;font-weight:900;line-height:1}
.step__art{position:relative;width:220px;height:150px;margin:6px auto 22px;flex:none}
.step:hover{background:var(--sun-soft-2)}
.pc{position:absolute;display:block}
.art-1 .pc-a{left:6px;top:58px;rotate:-3deg}
.art-pill{display:inline-flex;align-items:center;gap:3px;padding:13px 20px 14px 16px;border-radius:999px;background:#fff;font-size:21px;line-height:1;font-weight:900;color:var(--ink);box-shadow:0 0 0 1px rgba(26,18,0,.06),0 10px 26px rgba(122,74,0,.14)}
.art-pill b{color:var(--amber)}
.art-caret{display:inline-block;width:2.5px;height:22px;margin-left:3px;border-radius:2px;background:var(--ink)}
.art-1 .pc-b{width:78px;right:4px;top:-4px;rotate:12deg}
.art-1 .pc-c{width:36px;left:18px;top:6px}
.art-2 .pc-a{left:14px;top:22px;width:172px;rotate:-4deg}
.art-win{padding:5px;border-radius:15px;background:#fff;box-shadow:0 0 0 1px rgba(26,18,0,.06),0 10px 26px rgba(122,74,0,.14)}
.art-win__bar{display:flex;gap:4px;padding:3px 4px 6px}
.art-win__bar i{width:6px;height:6px;border-radius:50%;background:#E7DFCE}
.art-win img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px}
.art-2 .pc-b{width:76px;right:-4px;top:-14px}
.art-2 .pc-c{width:32px;left:0;bottom:0}
.art-3 .pc-a{left:6px;top:34px;rotate:-3deg}
.art-prof{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px 10px;width:190px;padding:12px 14px 13px 12px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(26,18,0,.06),0 10px 26px rgba(122,74,0,.14)}
.art-prof__ava{position:relative;width:44px;height:44px;border-radius:50%;background:linear-gradient(45deg,#FFC21F,#FF7A2F 50%,#F0437A);padding:2.5px}
.art-prof__ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff}
.art-prof__lines{display:grid;gap:6px}
.art-prof__lines i{height:7px;border-radius:4px;background:#EEE6D5}
.art-prof__lines i+i{width:64%}
.art-prof__link{grid-column:1/-1;display:flex;align-items:center;gap:5px;font-size:13px;line-height:1;font-weight:900;color:#00376B;white-space:nowrap}
.art-prof__link svg{width:11px;height:11px;flex:none}
.art-3 .pc-b{width:66px;right:-2px;top:-8px}
.art-3 .pc-c{width:40px;left:-6px;top:4px;rotate:-12deg}

.step:hover .art-1 .pc-a,.step.is-play .art-1 .pc-a{animation:nudge .45s ease-in-out}
.step:hover .art-1 .pc-b,.step.is-play .art-1 .pc-b{animation:hop .45s ease-in-out .1s}
.step:hover .art-1 .pc-c,.step.is-play .art-1 .pc-c{animation:twinkle .55s ease-in-out .05s}
.step:hover .art-2 .pc-a,.step.is-play .art-2 .pc-a{animation:hop .5s ease-in-out}
.step:hover .art-2 .pc-b,.step.is-play .art-2 .pc-b{animation:twinkle .55s ease-in-out .08s}
.step:hover .art-2 .pc-c,.step.is-play .art-2 .pc-c{animation:twinkle .5s ease-in-out .16s}
.step:hover .art-3 .pc-a,.step.is-play .art-3 .pc-a{animation:nudge .45s ease-in-out}
.step:hover .art-3 .pc-b,.step.is-play .art-3 .pc-b{animation:wiggle .55s ease-in-out}
.step:hover .art-3 .pc-c,.step.is-play .art-3 .pc-c{animation:hop .45s ease-in-out .12s}
@keyframes hop{50%{transform:translateY(-8px)}}
@keyframes nudge{50%{transform:translateX(6px)}}
@keyframes twinkle{50%{transform:scale(1.2) rotate(14deg)}}
@keyframes wiggle{20%{transform:rotate(-10deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}

/* Работы */
.works__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.work{display:flex;flex-direction:column;padding:18px 18px 24px}
.work:hover{background:var(--sun-soft-2)}
.work__shot{position:relative;display:block;padding:6px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(26,18,0,.05),var(--sh-float)}
.work__shot>img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:18px}
.work__tiles{position:absolute;left:-10px;top:-16px;display:flex;pointer-events:none}
.work__tile{width:62px;aspect-ratio:1;border-radius:24%;overflow:hidden;border:4px solid #fff;background:#fff;box-shadow:0 6px 16px rgba(26,18,0,.14);transition:transform .6s var(--spring-pop)}
.work__tile img{width:100%;height:100%;object-fit:cover}
.work__tile:nth-child(1){rotate:-10deg}
.work__tile:nth-child(2){margin-left:-20px;margin-top:10px;rotate:8deg}
.work:hover .work__tile:nth-child(1){transform:translate(-4px,-6px) rotate(-6deg)}
.work:hover .work__tile:nth-child(2){transform:translate(6px,-4px) rotate(6deg)}
.work__who{display:flex;align-items:center;gap:12px;margin-top:20px;padding:0 6px}
.work__ava{width:46px;height:46px;flex:none;border-radius:50%;padding:2.5px;background:linear-gradient(45deg,#FFC21F,#FF7A2F 50%,#F0437A)}
.work__ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid #fff}
.work__h{display:block;font-size:18px;line-height:1.2;font-weight:900;overflow-wrap:anywhere}
.work__m{display:block;margin-top:2px;font-size:15px;line-height:1.3;font-weight:700;color:var(--ink-2)}
.work__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:0 6px}
.work__btns .btn{padding:11px 18px;font-size:16px}
.works__all{margin-top:28px;text-align:center}
.link-arrow{display:inline-flex;align-items:center;gap:8px;padding:10px 6px;border-radius:999px;font-size:18px;font-weight:900;color:var(--ink);text-decoration:none}
.link-arrow svg{width:17px;height:17px;transition:transform .5s var(--spring-press)}
.link-arrow:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.link-arrow:hover svg{transform:translateX(4px)}

/* Тарифы */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:32px 32px 30px}
.plan__name{font-size:22px;line-height:1.2;font-weight:900;letter-spacing:-.01em}
.plan__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:14px}
.plan__price b{font-size:60px;line-height:1;font-weight:1000;letter-spacing:-.04em}
.plan__price span{font-size:17px;font-weight:800;color:var(--ink-2)}
.plan__lead{margin-top:16px;font-size:19px;line-height:1.25;font-weight:900}
.plan__list{display:grid;gap:11px;margin:18px 0 30px}
.plan__list li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:17px;line-height:1.35;font-weight:700}
.plan__list svg{width:20px;height:20px;margin-top:1px}
.plan__btn{margin-top:auto;width:100%}
.plan--main{background:var(--sun);--tick:#fff}
.plan--main:hover{background:#FFBE1A}
.plan--main .plan__price span{color:var(--ink-on-sun)}
.plan__st{position:absolute;right:-16px;top:-22px;width:70px;rotate:12deg;animation:drift 8s var(--ease-io) infinite;--d:5}
.plan--soon .plan__list li{color:var(--ink-2)}
.soon-st{position:absolute;top:26px;right:26px;padding:7px 13px 8px;border-radius:999px;background:var(--ink);color:var(--sun);font-size:15px;line-height:1;font-weight:900;rotate:7deg;box-shadow:0 0 0 3px #fff;filter:var(--sh-sticker)}

/* Вопросы */
.faq__list{max-width:860px;margin:0 auto;display:grid;gap:10px}
.qa{border-radius:var(--r-faq);background:var(--sun-soft);transition:background-color .2s ease-out}
.qa:hover,.qa[open]{background:var(--sun-soft-2)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px 20px 28px;border-radius:var(--r-faq);font-size:19px;line-height:1.3;font-weight:900;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa__ic{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--tint);transition:transform .55s var(--spring-press),background-color .2s}
.qa__ic::before,.qa__ic::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.6px;border-radius:2px;background:var(--ink);translate:-50% -50%}
.qa__ic::after{rotate:90deg}
.qa[open] .qa__ic{transform:rotate(45deg);background:var(--sun)}
.qa.is-closing .qa__ic{transform:none;background:var(--tint)}
.qa__a{overflow:hidden}
.qa__a p{max-width:680px;padding:0 28px 24px;font-size:17px;line-height:1.5;font-weight:700;color:var(--ink-2)}

/* Финал */
.final{padding:clamp(84px,10vw,140px) 16px 0}
.final__panel{position:relative;max-width:1288px;margin:0 auto;padding:clamp(70px,8.5vw,124px) 24px clamp(56px,6.5vw,92px);border-radius:48px;background:var(--sun);text-align:center;display:flex;flex-direction:column;align-items:center}
.final__h{position:relative;z-index:1;max-width:15em;font-size:clamp(32px,3.6vw + 6px,60px)}
.final .nick{position:relative;z-index:1;margin-top:30px}
.nick--on-sun .nick__field{box-shadow:0 14px 40px rgba(122,74,0,.28)}
.nick--on-sun .nick__field:focus-within{box-shadow:0 0 0 2.5px var(--ink),0 14px 40px rgba(122,74,0,.28)}
.nick--on-sun .nick__err{color:var(--err-on-sun)}
.nick--on-sun.is-bad .nick__field{box-shadow:0 0 0 2.5px var(--err-on-sun),0 14px 40px rgba(122,74,0,.28)}
.final__fls{position:absolute;inset:0;pointer-events:none}
.ffl{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-50%);animation:drift var(--dur,8s) var(--ease-io) infinite}
.ffl>*{display:block;rotate:var(--r,0deg)}
.bub--s{box-shadow:0 0 0 5px #fff,0 18px 40px rgba(122,74,0,.25)}

/* Подвал */
.foot{padding:clamp(84px,9vw,124px) 24px 28px}
.foot__in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px}
.foot__note{margin-top:18px;max-width:300px;font-size:15px;line-height:1.5;font-weight:700;color:var(--ink-3)}
.foot__copy{margin-top:8px;font-size:15px;font-weight:700;color:var(--ink-3)}
.foot__h{font-size:17px;line-height:1.5;font-weight:900;color:rgba(26,18,0,.85)}
.foot__col ul{margin-top:10px;display:grid;gap:4px}
.foot__col a{display:inline-block;padding:4px 0;font-size:17px;line-height:1.5;font-weight:700;color:var(--ink-3);text-decoration:none;border-radius:6px;transition:color .2s}
.foot__col a:hover{color:var(--ink)}
.foot__word{display:block;width:min(1080px,100%);height:auto;margin:clamp(52px,6vw,84px) auto 0;overflow:visible}

/* ---------- Адаптив ---------- */
@media (max-width:1100px){
  .works__grid{grid-template-columns:1fr 1fr}
  .works__grid .work:last-child{grid-column:1/-1;max-width:calc(50% - 8px);justify-self:center;width:100%}
  .plans{grid-template-columns:1fr 1fr}
  .plan--soon{grid-column:1/-1;max-width:calc(50% - 8px);justify-self:center;width:100%}
}
@media (max-width:860px){
  .hdr__in{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:0 16px}
  .hdr__cta{padding:10px 14px;font-size:15px}
  .nav{display:none}
  .hdr__menu{display:grid}
  .steps__list{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .step{min-height:0}
  .works__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .works__grid .work:last-child{max-width:none}
  .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan--soon{max-width:none}
  .foot__in{grid-template-columns:1fr 1fr;gap:32px}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:760px){
  .hero{--dev-w:min(calc(100vw - 24px),440px);--dev-h:calc(var(--dev-w) * 1.12);padding:68px 16px 28px;justify-content:flex-start}
  .hero__glow{height:46svh}
  .hero__stage{transform:translateX(-3%)}
  .dev{width:var(--dev-w);height:var(--dev-h)}
  .dev__mask{-webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 86%);mask-image:linear-gradient(to bottom,#000 52%,transparent 86%)}
  .phone{left:36%;top:3%;width:58%;transform:translateX(-50%) rotate(-4deg)}
  .site{left:44%;top:30%;width:58cqw;rotate:6deg}
  .hero__text{margin-top:calc(var(--dev-h) * -.2)}
  .h1{font-size:clamp(30px,8.6vw,40px);line-height:1.02}
  .h1 span{display:inline}
  .lead{margin-top:12px;font-size:18px}
  .nick{margin-top:20px}
  .nick__field{padding:5px}
  .nick__at{padding-left:12px;font-size:18px}
  .nick__input{font-size:17px;padding:11px 4px 11px 1px}
  .nick__btn{padding:13px 16px;font-size:16px}
  .built{font-size:15px}
  .built__faces img{width:24px;height:24px}
  .fl{display:none}
  .fl[data-m]{display:block;left:calc(var(--ml) * 1vw);top:calc(68px + var(--mt) * 1svh);width:calc(var(--ms) * 1vw)}
  .sec{padding-left:16px;padding-right:16px}
  .step,.plan{padding:28px 24px}
  .card{border-radius:32px}
  .qa summary{padding:18px 16px 18px 22px;font-size:18px}
  .qa__a p{padding:0 22px 22px}
  .final__panel{border-radius:36px;padding:72px 18px 44px}
  .ffl--d{display:none}
  .foot{padding-left:16px;padding-right:16px}
}
@media (max-width:420px){
  .hdr__cta{padding:8px 13px;font-size:16px}
  .logo__word{font-size:24px}
  .logo__mark{width:28px;height:28px}
  .nick__at{padding-left:10px}
  .nick__btn{padding:13px 14px}
  .work__btns .btn{flex:1}
}

/* ---------- Без движения ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .fl{transform:translate(-50%,-50%);opacity:1}
  .live__track{flex-wrap:wrap;justify-content:center;width:auto;max-width:1320px;margin:0 auto;row-gap:14px;padding:0 16px}
  .live__track [aria-hidden="true"]{display:none}
  .live__viewport{-webkit-mask-image:none;mask-image:none}
  .js [data-rv]{filter:none}
}