.hero { position: relative; overflow: hidden; padding-block: clamp(1.5rem, 3vw, 4rem) var(--space-block); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center; min-height: calc(100vh - var(--header-h) - 2rem); }
.hero__text { padding-block: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.hero__facts li { display: flex; flex-direction: column; }
.hero__facts strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.hero__facts span { color: var(--ink-2); font-size: var(--text-small); }
.hero__visual { position: relative; }
.hero__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.hero__disc { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6F1EA 0%, var(--bg-2) 60%, #D9D1C6 100%); box-shadow: inset 0 -30px 60px -30px rgba(35,37,43,.25); }
.hero__ring { position: relative; width: 78%; height: auto; filter: drop-shadow(0 40px 50px rgba(35,37,43,.28)); transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out); animation: heroFloat 7s ease-in-out infinite; }
.hero__ring.is-swapping { opacity: 0; transform: scale(.96) rotate(-6deg); }
@keyframes heroFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.hero__caption { position: absolute; left: 0; bottom: 6%; display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); padding: 14px 18px; border-radius: 16px; box-shadow: var(--shadow-card); }
.hero__swatches { position: absolute; right: 2%; top: 8%; display: flex; flex-direction: column; gap: 10px; }
.hero__swatch { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--sw); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line-strong); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
/* кружок маленький, а палец толстый: расширяем область нажатия до 44 px */
.hero__swatch::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.hero__swatch:hover { transform: scale(1.12); }
.hero__swatch.is-active { box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__visual { order: -1; width: min(100%, 420px); margin-inline: auto; margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .hero__stage { width: 100%; }
  .hero__text { padding-block: 0 1rem; }
  .hero__swatches { position: static; flex-direction: row; transform: none; margin-top: -34px; order: 1; }
  .hero__caption { position: static; transform: none; white-space: nowrap; align-items: center; text-align: center; order: 2; }
  .hero__ring { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .hero__ring { animation: none; } }

.features__lenta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 3 / 4; background: var(--dark); color: var(--paper); isolation: isolate; }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform var(--dur-slow) var(--ease-out); }
.feature:hover img { transform: scale(1.04); }
.feature__body { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background: linear-gradient(180deg, rgba(27,28,32,0) 30%, rgba(27,28,32,.85) 100%); }
.feature__body p { color: rgba(250,248,245,.82); font-size: var(--text-small); }
.feature__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(250,248,245,.14); backdrop-filter: blur(6px); margin-bottom: auto; }
.feature__icon svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .features__lenta { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); padding-bottom: 8px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .features__lenta::-webkit-scrollbar { display: none; }
  .feature { flex: 0 0 76vw; max-width: 340px; scroll-snap-align: start; }
}

.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.story--flip .story__media { order: 2; }
.story__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
.story__points { margin-top: 1.6rem; border-top: 1px solid var(--line); }
.section--dark .story__points { border-color: rgba(250,248,245,.14); }
.story__points li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); position: relative; }
.section--dark .story__points li { border-color: rgba(250,248,245,.14); }
.story__points li::before { content: ""; position: absolute; left: 0; top: 20px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--brass); }
@media (max-width: 900px) { .story__grid { grid-template-columns: 1fr; } .story--flip .story__media { order: 0; } }

.styles__lenta { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) 16px; scrollbar-width: none; }
.styles__lenta::-webkit-scrollbar { display: none; }
@media (min-width: 1280px) { .styles__lenta { padding-inline: calc((100vw - var(--container)) / 2); } }
.style-card { flex: 0 0 min(300px, 70vw); scroll-snap-align: start; border-radius: var(--radius-card); background: var(--paper); padding: 22px 22px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.style-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.style-card img { width: 82%; margin-bottom: 8px; }
.style-card__name { font-family: var(--font-display); font-size: 1.4rem; }
.style-card__sub { color: var(--ink-2); font-size: var(--text-small); }

.accuracy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.stats { display: grid; gap: 4px; }
.stats li { display: grid; grid-template-columns: auto 1fr; gap: 2px 22px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid rgba(250,248,245,.14); }
.stats strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 2rem + 3vw, 4.6rem); color: var(--brass-2); line-height: 1; grid-row: span 2; }
.stats span { font-weight: 500; }
.stats small { color: rgba(250,248,245,.6); font-size: var(--text-small); }
@media (max-width: 900px) { .accuracy__grid { grid-template-columns: 1fr; } }

.sizing__grid, .app__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.sizing__form { position: relative; }
.sizing__img { border-radius: var(--radius-card); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.sizing__card { background: var(--paper); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-float); margin: -60px 20px 0; position: relative; }
.sizing__card .h3 { margin-bottom: 6px; }
.sizing .link-arrow { display: inline-flex; }
.app__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
@media (max-width: 900px) { .sizing__grid, .app__grid { grid-template-columns: 1fr; } .sizing__card { margin: -40px 10px 0; } }

.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

.cta__box { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--dark); color: var(--paper); border-radius: 28px; padding: clamp(28px, 4vw, 56px); }
.cta__box .lead { color: rgba(250,248,245,.75); }
.cta__box .field input, .cta__box .field textarea { background: var(--dark-2); border-color: rgba(250,248,245,.18); color: var(--paper); }
.cta__box .check { color: rgba(250,248,245,.7); }
.cta__box .radio-row label { border-color: rgba(250,248,245,.25); }
.cta__box .btn--primary { background: var(--brass); }
.cta__box .form-state { background: var(--dark-2); }
@media (max-width: 900px) { .cta__box { grid-template-columns: 1fr; } }

/* указатель прокрутки под лентами: без него горизонтальный блок читается как обрезанный */
.lenta-bar { width: min(260px, 60%); height: 3px; margin: 6px auto 0; border-radius: 2px; background: var(--line); overflow: hidden; }
.lenta-bar span { display: block; width: 30%; height: 100%; border-radius: 2px; background: var(--brass); transform-origin: left; transition: transform .12s linear; }
.features .lenta-bar { display: none; }
@media (max-width: 900px) { .features .lenta-bar { display: block; } }