/* [am:pm] по мотивам metrika-internship.ru: розовый шёлк, серый фон, широкий курсив, объёмные предметы, лайм, круглые карточки */
:root { --pink: #F25FB4; --pink-2: #FF9BD3; --gray: #ECECEA; --ink: #1D1D1D; --dim: #9a9a96; --lime: #CFF26B; --w: 'Unbounded', -apple-system, system-ui, sans-serif; --t: 'Manrope', -apple-system, system-ui, sans-serif; --pad: clamp(14px, 2vw, 28px); --spring: cubic-bezier(.2, 1.3, .3, 1) }
* { box-sizing: border-box; margin: 0; padding: 0 }
body { background: var(--gray); color: var(--ink); font: 500 15px/1.5 var(--t); -webkit-font-smoothing: antialiased; overflow-x: clip }
body::before { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") }
img { display: block; max-width: 100% }
a { color: inherit } ul { list-style: none }
svg { width: 15px; height: 15px }
.wide { font: 500 clamp(54px, 9vw, 150px)/.92 var(--w); font-style: italic; letter-spacing: -.055em; text-transform: lowercase }
.txt { max-width: 34ch; margin: 0 auto; text-align: center; font-weight: 600 }

.hd { position: fixed; top: 12px; left: var(--pad); right: var(--pad); z-index: 50; display: flex; align-items: center; gap: 10px }
.logo span { display: inline-block; padding: 8px 12px; border-radius: 999px; background: #fff; font: 600 14px var(--w); letter-spacing: -.05em; text-decoration: none }
.logo { text-decoration: none }
.nav { display: none; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .92) } .nav a { padding: 6px 16px; border-radius: 999px; font: 600 12px var(--t); text-decoration: none } .nav a:hover { background: var(--gray) }
.cta { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--lime); font: 700 12px var(--t); text-decoration: none }
@media (min-width: 900px) { .nav { display: flex } .cta { margin-left: 0 } }
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: 100px; height: 100px; border-radius: 50%; background: #fff; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; font: 700 12px/1.15 var(--t); text-decoration: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .12); transition: transform .5s var(--spring) }
.fab svg { color: #6aa000 } .fab:hover { transform: scale(1.1) rotate(-6deg) }

/* розовый шёлк: два слоя градиента плывут и смешиваются */
.swirl { position: absolute; inset: -20%; z-index: -1; background: radial-gradient(40% 35% at 30% 40%, var(--pink-2), transparent 70%), radial-gradient(35% 45% at 70% 60%, #ff7cc6, transparent 70%), repeating-radial-gradient(circle at 60% 30%, rgba(255, 255, 255, .0) 0 40px, rgba(255, 255, 255, .12) 50px, rgba(255, 255, 255, 0) 70px), var(--pink); animation: silk 14s ease-in-out infinite alternate; filter: blur(2px) }
@keyframes silk { to { transform: rotate(12deg) scale(1.15) translate(4%, -3%) } }

/* 01 */
.s1 { position: relative; min-height: 88svh; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; isolation: isolate; padding: 100px var(--pad) 60px }
.s1 h1 span { display: block } .s1 h1 span:last-child { padding-left: .6em }
.sub { font-size: clamp(26px, 3vw, 48px); margin: 10px 0 18px; font-style: normal }
.s1-t { position: relative; z-index: 2 }
.obj { position: absolute; z-index: 1; filter: drop-shadow(0 30px 40px rgba(120, 0, 70, .25)); will-change: transform }
.o1 { width: clamp(110px, 13vw, 210px); left: 7%; bottom: 8% } .o2 { width: clamp(90px, 9vw, 150px); right: 9%; top: 16% } .o3 { width: clamp(90px, 8.5vw, 150px); right: 21%; bottom: 6% } .o4 { width: clamp(80px, 8vw, 140px); left: 20%; top: 14% }
@media (max-width: 700px) { .o4 { left: 4%; top: 10%; width: 70px } .o1 { left: -4%; bottom: 2% } .o2 { right: -2%; top: 12% } .o3 { right: 6%; bottom: 2% } }

/* 02 */
.s2 { position: relative; min-height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 160px var(--pad) 80px }
.kick { font: 600 clamp(28px, 3.6vw, 56px)/1 var(--t); letter-spacing: -.04em }
.grad { font-weight: 600; background: linear-gradient(90deg, #1d1d1d 0 55%, #9a9a96); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .1em }
.gray { color: var(--dim); font-size: clamp(16px, 1.6vw, 22px) }
.disco { position: absolute; top: 0; left: 50%; display: grid; justify-items: center; transform-origin: top center; animation: swing 4s ease-in-out infinite alternate }
.disco i { width: 2px; height: 70px; background: #aaa }
.disco b { width: 150px; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -20px -20px 40px rgba(0, 0, 0, .45), 0 30px 50px rgba(0, 0, 0, .2); background: radial-gradient(circle at 34% 28%, #fff 0 4%, transparent 12%), conic-gradient(from 0deg, #ddd, #888, #f6f6f6, #777, #e7e7e7, #999, #fff, #888, #ddd), #bbb; position: relative; overflow: hidden; animation: spinb 6s linear infinite }
.disco b::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 12px); border-radius: 50% }
@keyframes swing { from { transform: translateX(-50%) rotate(-4deg) } to { transform: translateX(-50%) rotate(4deg) } } @keyframes spinb { to { filter: hue-rotate(0deg) brightness(1.1) } }

/* 03 */
.s3 { position: relative; display: grid; gap: 30px; padding: 40px var(--pad) 120px; overflow: hidden }
.ball { position: relative; width: min(420px, 82vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; gap: 10px; padding: 70px; text-align: center; color: #fff; background: radial-gradient(circle at 35% 30%, var(--pink-2), var(--pink) 60%, #e0469c); box-shadow: 0 40px 80px rgba(242, 95, 180, .3); will-change: transform }
.ball span { font: italic 500 13px var(--t) } .ball p { font-weight: 600 }
.ball img { position: absolute; width: 38%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .2)) }
.b-l img { right: -12%; bottom: -6% } .b-r { justify-self: end } .b-r img { left: -14%; top: -8% }
@media (min-width: 900px) { .s3 { grid-template-columns: 1fr 1fr; align-items: center } .b-l { margin-left: 4vw } .b-r { margin-right: 4vw; margin-top: 160px } }

/* 04 */
.s4 { position: relative; min-height: 100svh; background: var(--pink); color: #fff; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 100px var(--pad) }
.big { font-size: clamp(52px, 8vw, 130px) }
.s4-t { position: relative; z-index: 2; display: grid; gap: 20px }
.stk { position: absolute; width: clamp(100px, 12vw, 190px); filter: grayscale(1) contrast(1.05) drop-shadow(0 0 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 20px 30px rgba(0, 0, 0, .2)); will-change: transform }
.k1 { left: 4%; bottom: 10% } .k2 { left: 14%; top: 14%; width: clamp(80px, 9vw, 140px); opacity: .7 } .k3 { right: 6%; top: 16%; filter: drop-shadow(0 20px 30px rgba(0,0,0,.2)) } .k4 { right: 12%; bottom: 6%; width: clamp(90px, 9vw, 150px); filter: drop-shadow(0 20px 30px rgba(0,0,0,.2)) }
@media (max-width: 700px) { .k2 { top: 8% } .k1 { left: -6% } .k3 { right: -6% } }

/* 05 */
.s5 { padding: clamp(80px, 10vw, 140px) var(--pad); overflow: hidden }
.title { text-align: center; font: 600 clamp(32px, 4vw, 60px)/1.05 var(--t); letter-spacing: -.04em; margin-bottom: 50px }
.fan { display: grid; gap: 16px; justify-items: center }
.mcard { width: min(320px, 86vw); background: #f7f7f5; border-radius: 26px; padding: 22px; display: grid; gap: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, .08); will-change: transform }
.mcard h3 { font: 600 20px var(--t); letter-spacing: -.03em } .mcard p { font-weight: 700; font-size: 13px } .mcard li { font-size: 13px; color: #555 } .mcard li::before { content: "• " }
.mcard figure { height: 150px; border-radius: 18px; background: #fff; display: grid; place-items: center; margin-top: 6px } .mcard figure img { max-height: 130px; width: auto; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .15)) }
.mc-pink { background: #fde3f1 } .mc-lime { background: var(--lime) }
.pick { justify-self: start; display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--pink); color: #fff; font: 700 12px var(--t); text-decoration: none; transition: transform .4s var(--spring) } .pick:hover { transform: scale(1.06) }
@media (min-width: 900px) { .fan { grid-template-columns: repeat(4, 1fr); gap: 0 } .mcard { width: 100% } }

/* 06 */
.s6 { position: relative; min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 30px; padding: 100px var(--pad); color: #fff; text-align: center; overflow: hidden; isolation: isolate; border-radius: 40px 40px 0 0 }
.form { width: min(460px, 100%); display: grid; gap: 12px; text-align: left }
.form label { display: grid; gap: 6px; font-size: 12px; font-weight: 700 }
.form input { height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .92); font: 500 15px var(--t); color: var(--ink); width: 100% }
.form button { height: 50px; border-radius: 999px; border: 0; background: var(--lime); font: 700 14px var(--t); display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; margin-top: 8px }
.note { min-height: 18px; font-size: 13px }
.ft { background: #232323; color: #fff; padding: 40px var(--pad) 30px; display: grid; gap: 28px }
.logo-ft { display: grid; font: 600 clamp(36px, 4vw, 60px)/1 var(--w); letter-spacing: -.06em; text-decoration: none } .logo-ft small { font: 600 12px var(--t); letter-spacing: 0; color: var(--pink-2); margin-top: 6px }
.ft div { display: grid; gap: 2px } .ft a { text-decoration: none } .ft a:hover { color: var(--lime) } .cap { font-size: 11px; color: #8d8d8d; margin-top: 8px }
.legal { font-size: 11px; color: #8d8d8d }
@media (min-width: 900px) { .ft { grid-template-columns: 1.5fr 1fr 1fr } .legal { grid-column: 1 / -1 } }
.badge { position: fixed; left: 12px; bottom: 12px; z-index: 60; background: var(--ink); color: #fff; padding: 7px 12px; border-radius: 999px; font: 700 10px var(--t); text-decoration: none }
[data-up] { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .8s, transform 1s var(--spring) } [data-up].is-in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { [data-up] { opacity: 1; transform: none } .swirl, .disco, .disco b { animation: none } }