/* ========================================================= HaloLive — лендинг платформи HaloLive Палітра (бриф клієнта): чорний + фіолетовий + трохи білого. Чорний — з фіолетовим відтінком, фіолетові градієнти на чорному тлі, білий тримає текст та світло. Mobile-first ========================================================= */ /* Onest — теплий humanist grotesk, кирилиця + латиниця. Variable 400–900, самосхостинг (~49KB), font-display: swap. */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/onest-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; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/onest-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } :root { /* фіолетовий — палітра бренду, акцент */ --violet-100: #EDE6FF; --violet-300: #C4B0FF; --violet-400: #A78BFA; --violet-500: #8B5CF6; --violet-600: #7C3AED; --violet-700: #6D28D9; --violet-800: #5B21B6; /* темний фон з фіолетовим відтінком — це і є бриф: чорний + фіолетовий */ --black: #08060F; --black-soft: #0F0B1E; --surface: #181228; --surface-raised: #201838; --white: #FFFFFF; --muted: rgba(255, 255, 255, .68); --muted-dim: rgba(255, 255, 255, .48); --brd: rgba(255, 255, 255, .1); --brd-accent: rgba(167, 139, 250, .35); --grad-cta: linear-gradient(120deg, var(--violet-800), var(--violet-600)); --danger: #F87171; --danger-text: #FCA5A5; --danger-bg: rgba(239, 68, 68, .1); --danger-brd: rgba(239, 68, 68, .32); --success-text: #A7F3D0; --success-bg: rgba(16, 185, 129, .12); --success-brd: rgba(16, 185, 129, .35); --radius: 12px; --radius-lg: 18px; --max: 1160px; --pad: 20px; --tap: 44px; --ease: cubic-bezier(.22, .8, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--black); color: var(--white); font: 400 16px/1.6 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Зерно: легкий шум поверх усього — прибирає «пластикову» пласкість темних поверхонь. Статичний, не анімований, pointer-events: none. */ body::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; 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 type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: .035; } h1, h2, h3 { margin: 0; line-height: 1.14; letter-spacing: -.02em; font-weight: 800; } p { margin: 0; } ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } /* [hidden] має перемагати display з компонентних правил */ [hidden] { display: none !important; } .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); } .container--narrow { max-width: 760px; } /* ---------- reveal on scroll ---------- Ховає контент ТІЛЬКИ поки main.js живий: інлайновий скрипт у знімає клас .js, якщо main.js не встиг поставити data-reveal-ready. Без цього одна помилка в JS лишала б порожню сторінку на платному трафіку. */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; will-change: auto; } /* каскад задається розміткою, а не порядком спрацювання observer'а */ .cards > .reveal:nth-child(2), .steps > .reveal:nth-child(2) { transition-delay: .07s; } .cards > .reveal:nth-child(3), .steps > .reveal:nth-child(3) { transition-delay: .14s; } .cards > .reveal:nth-child(4) { transition-delay: .21s; } .cards > .reveal:nth-child(5) { transition-delay: .28s; } /* варіюємо reveal по секціях — не кожна секція однаково */ #benefits .reveal { transform: none; /* fade-only, без вертикального зсуву */ } #apply .reveal { opacity: 1; transform: none; transition: none; /* форма — стабільна, не анімована */ will-change: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } .cards > .reveal, .steps > .reveal { transition-delay: 0s !important; } } /* ---------- solid surfaces ---------- */ .glass { background: var(--surface); border: 1px solid var(--brd); border-radius: var(--radius); /* тонкий світловий кант зверху — поверхня «дихає», а не пласка */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 16px 34px; border: 0; border-radius: 999px; font-weight: 700; font-size: 16px; letter-spacing: .01em; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); } .btn--primary { background: var(--grad-cta); color: var(--white); } .btn--primary:hover { transform: translateY(-2px); filter: brightness(1.12); } .btn--primary:active { transform: translateY(0); } .btn--primary[disabled] { opacity: .6; cursor: not-allowed; transform: none; filter: none; } .btn--block { width: 100%; } :focus-visible { outline: 2px solid var(--violet-300); outline-offset: 3px; border-radius: 8px; } /* ========================================================= HEADER ========================================================= */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; padding-block: 10px; transition: background .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; } .site-header.is-stuck { background: rgba(8, 6, 15, .95); border-bottom-color: var(--brd); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .logo { display: inline-flex; align-items: center; gap: 9px; min-height: var(--tap); } .logo__dot { width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-400), var(--violet-700)); box-shadow: 0 0 14px var(--violet-500); } .logo__text { font-weight: 800; font-size: 20px; letter-spacing: -.03em; } .logo__text em { font-style: normal; color: var(--violet-400); } .lang { display: flex; gap: 6px; padding: 3px; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--brd); } .lang__btn { background: none; border: 0; cursor: pointer; min-width: var(--tap); min-height: var(--tap); padding: 8px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted-dim); transition: color .2s var(--ease), background .2s var(--ease); } .lang__btn:hover { color: var(--white); } .lang__btn[aria-pressed="true"] { color: var(--white); background: var(--grad-cta); } /* ========================================================= HERO ========================================================= */ .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; /* фолбек для браузерів без svh */ min-height: 100svh; display: flex; align-items: flex-end; padding: 120px 0 56px; } .hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; z-index: -1; /* фіолетовий градієнт на чорному — бриф; середня зона затемнена, щоб заголовок лишався читабельним поверх будь-якого кадру відео */ background: linear-gradient(180deg, rgba(8, 6, 15, .78) 0%, rgba(8, 6, 15, .55) 45%, rgba(8, 6, 15, .9) 82%, var(--black) 100%), linear-gradient(135deg, rgba(91, 33, 182, .22) 0%, rgba(124, 58, 237, .08) 50%, transparent 80%); } .hero__content { position: relative; z-index: 2; } .hero__title { font-size: clamp(38px, 6.5vw + 14px, 84px); max-width: 15ch; margin-bottom: 18px; text-wrap: balance; letter-spacing: -.035em; /* тінь відділяє текст від відео, коли кадр яскравий */ text-shadow: 0 2px 28px rgba(8, 6, 15, .6); } /* Ієрархія в заголовку тримається на кольорі й вазі, а не на другому градієнті: зачин приглушений, гроші — акцент. */ .hero__title span { color: rgba(255, 255, 255, .92); font-weight: 600; } .hero__title em { font-style: normal; color: var(--violet-100); } .hero__sub { font-size: clamp(16px, 4.2vw, 20px); color: rgba(255, 255, 255, .84); max-width: 48ch; margin-bottom: 30px; text-shadow: 0 1px 16px rgba(8, 6, 15, .5); } .hero .btn { margin-bottom: 38px; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 440px; } .stats__item { padding: 14px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--brd); text-align: center; } .stats__item dt { font-size: clamp(18px, 5vw, 26px); font-weight: 800; letter-spacing: -.03em; color: var(--violet-300); } .stats__item dd { font-size: 12.5px; color: rgba(255, 255, 255, .62); margin-top: 4px; line-height: 1.3; } /* sound toggle */ .sound-btn { position: absolute; z-index: 3; right: var(--pad); top: 80px; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 9px 15px 9px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--brd); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--white); transition: border-color .25s var(--ease), background .25s var(--ease); } .sound-btn:hover { border-color: var(--brd-accent); background: var(--surface-raised); } .sound-btn__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .sound-btn__icon path:first-child { fill: currentColor; stroke: none; } .sound-btn__on { display: none; } .sound-btn[aria-pressed="true"] .sound-btn__on { display: inline; } .sound-btn[aria-pressed="true"] .sound-btn__off { display: none; } /* ========================================================= SECTIONS ========================================================= */ .section { position: relative; padding: 76px 0; overflow: hidden; } .section--alt { background: var(--black-soft); } .section__head { margin-bottom: 36px; max-width: 720px; } .section__head--center { margin-inline: auto; text-align: center; } .section__head h2 { font-size: clamp(28px, 7.5vw, 46px); text-wrap: balance; } .section__sub { margin-top: 14px; color: var(--muted); font-size: clamp(15px, 4vw, 17px); } /* ---------- cards ---------- */ .cards { display: grid; gap: 14px; } .card { position: relative; padding: 26px 22px; transition: transform .35s var(--ease), border-color .35s var(--ease); } .card h3 { font-size: 19px; margin-bottom: 9px; } .card p { color: var(--muted); font-size: 15px; } @media (hover: hover) { .card:hover { transform: translateY(-4px); border-color: var(--brd-accent); } } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 12px; background: var(--violet-500); } .card__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--white); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ---------- steps ---------- */ .steps { display: grid; gap: 14px; } .step { position: relative; padding: 28px 22px 26px; } .step h3 { font-size: 19px; margin-bottom: 9px; } .step p { color: var(--muted); font-size: 15px; } /* з'єднувальні лінії між кроками — тільки на десктопі з 3-колонковою сіткою */ @media (min-width: 600px) { .step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -10px; width: 20px; height: 2px; background: var(--brd-accent); transform: translateY(-50%); } } /* featured card — приватність виділяється з сітки */ .card--featured { background: rgba(124, 58, 237, .12); border-color: var(--brd-accent); } .card--featured .card__icon { background: var(--violet-400); } /* ========================================================= FORM — секція конверсії має власне обличчя, а не вигляд ще однієї секції ========================================================= */ .section--form { padding-block: 88px; scroll-margin-top: 72px; /* конверсійна секція — фіолетове світіння по центру (бриф) + фіолетові лінії */ background: linear-gradient(180deg, var(--black-soft), rgba(91, 33, 182, .08) 50%, var(--black-soft)); } .section--form::before, .section--form::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - var(--pad) * 2)); height: 1px; background: var(--brd-accent); } .section--form::before { top: 0; } .section--form::after { bottom: 0; } .form { position: relative; z-index: 2; padding: 26px 20px 24px; display: grid; gap: 16px; border-radius: var(--radius-lg); border-color: var(--brd-accent); } .field { display: grid; gap: 7px; } .field label { font-size: 14px; font-weight: 600; color: var(--violet-100); } .field__optional { font-weight: 400; color: var(--muted-dim); } .field input[type="text"], .field input[type="email"] { width: 100%; min-height: var(--tap); padding: 14px 16px; border-radius: 13px; border: 1px solid var(--brd); background: var(--black-soft); color: var(--white); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .field input::placeholder { color: rgba(255, 255, 255, .55); } .field input:focus { outline: none; border-color: var(--violet-500); background: var(--black); box-shadow: 0 0 0 4px rgba(124, 58, 237, .28); } .field.has-error input { border-color: var(--danger); } .field.has-error .check__box { border-color: var(--danger); } .field__hint { font-size: 13px; color: var(--muted); } .field__err { display: none; font-size: 13px; color: var(--danger-text); } .field.has-error .field__err { display: block; } /* honeypot */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* checkbox — вся строка є ціллю дотику */ .check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; cursor: pointer; font-size: 14px; color: var(--muted); line-height: 1.45; min-height: var(--tap); padding-block: 10px; } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check__box { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .38); background: var(--black-soft); transition: background .2s var(--ease), border-color .2s var(--ease); } .check input:checked + .check__box { border-color: transparent; background-image: var(--grad-cta), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); background-size: cover, 16px 16px; background-position: center, center; background-repeat: no-repeat, no-repeat; } .check input:focus-visible + .check__box { box-shadow: 0 0 0 4px rgba(124, 58, 237, .38); } /* довіра рівно там, де її просять */ .trust { display: grid; gap: 8px; margin-top: 2px; } .trust li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.45; color: var(--muted); } .trust li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: rgba(124, 58, 237, .3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE6FF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px 11px no-repeat; } .form__status { font-size: 14.5px; line-height: 1.5; display: none; padding: 12px 14px; border-radius: 12px; } .form__status.is-ok { display: block; color: var(--success-text); background: var(--success-bg); border: 1px solid var(--success-brd); } .form__status.is-err { display: block; color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-brd); } /* ---------- екран успіху ---------- */ .form-done { position: relative; z-index: 2; padding: 34px 24px 30px; text-align: center; display: grid; gap: 14px; justify-items: center; border-radius: var(--radius-lg); border-color: var(--brd-accent); } .form-done__mark { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--grad-cta); } .form-done__mark svg { width: 28px; height: 28px; fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .form-done h3 { font-size: clamp(22px, 6vw, 28px); } .form-done p { color: var(--muted); font-size: 15.5px; max-width: 44ch; } .form-done .btn { margin-top: 4px; } /* ========================================================= PROSE / ACCORDION / CLOSING ========================================================= */ .prose { padding: 26px 22px; display: grid; gap: 14px; color: var(--muted); font-size: 15.5px; } .accordion { display: grid; gap: 10px; } .acc { overflow: hidden; } .acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--tap); padding: 18px 20px; font-weight: 600; font-size: 16px; } .acc summary::-webkit-details-marker { display: none; } .acc__chevron { width: 10px; height: 10px; flex: none; border-right: 2px solid var(--violet-400); border-bottom: 2px solid var(--violet-400); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease); } .acc[open] .acc__chevron { transform: rotate(-135deg) translate(-2px, -2px); } .acc__body { padding: 0 20px 20px; color: var(--muted); font-size: 15px; } .closing { padding-block: 84px; } .closing__inner { text-align: center; display: grid; gap: 18px; justify-items: center; } .closing h2 { font-size: clamp(26px, 7vw, 40px); text-wrap: balance; } .closing p { color: var(--muted); font-size: clamp(15px, 4vw, 17px); max-width: 46ch; } /* ========================================================= FOOTER ========================================================= */ .footer { border-top: 1px solid var(--brd); padding: 44px 0 96px; background: var(--black-soft); } .footer__inner { display: grid; gap: 30px; } .footer__brand p { color: var(--muted-dim); font-size: 14px; margin-top: 10px; max-width: 34ch; } .footer__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-400); margin-bottom: 12px; } .footer__tg { display: inline-flex; align-items: center; gap: 9px; min-height: var(--tap); padding: 11px 20px; border-radius: 999px; border: 1px solid var(--brd-accent); background: rgba(124, 58, 237, .16); font-weight: 600; font-size: 15px; transition: background .25s var(--ease); } .footer__tg:hover { background: rgba(124, 58, 237, .2); } .footer__tg svg { width: 19px; height: 19px; fill: var(--violet-300); } .footer__wa { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 10px; background: rgba(37, 211, 102, .12); color: #25D366; font-size: 14px; font-weight: 600; transition: background .2s; } .footer__wa:hover { background: rgba(37, 211, 102, .25); } .footer__wa svg { width: 19px; height: 19px; fill: #25D366; } .footer__legal-text { color: var(--muted-dim); font-size: 13.5px; max-width: 40ch; } .footer__age { margin-top: 12px; display: inline-block; padding: 4px 11px; border-radius: 8px; border: 1px solid var(--brd); font-size: 12px; font-weight: 700; color: var(--muted); } .footer__bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--muted-dim); font-size: 13px; } /* ========================================================= FLOATING TELEGRAM ========================================================= */ .tg-fab { position: fixed; z-index: 70; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; min-width: var(--tap); min-height: var(--tap); padding: 14px; border-radius: 999px; background: var(--grad-cta); transition: transform .28s var(--ease), opacity .28s var(--ease); } .tg-fab:hover { transform: translateY(-3px); } .tg-fab svg { width: 24px; height: 24px; fill: var(--white); flex: none; } .tg-fab__label { display: none; font-weight: 700; font-size: 15px; padding-right: 6px; } /* поки герой на екрані, кнопка не сидить поверх статистики й великого CTA */ .tg-fab.is-idle { opacity: 0; pointer-events: none; transform: translateY(12px); } /* ========================================================= FLOATING WHATSAPP ========================================================= */ .wa-fab { position: fixed; z-index: 70; right: 16px; bottom: 76px; display: inline-flex; align-items: center; gap: 10px; min-width: var(--tap); min-height: var(--tap); padding: 14px; border-radius: 999px; background: #25D366; color: #fff; transition: transform .28s var(--ease), opacity .28s var(--ease); } .wa-fab:hover { transform: translateY(-3px); } .wa-fab svg { width: 24px; height: 24px; fill: var(--white); flex: none; } .wa-fab .tg-fab__label { display: none; font-weight: 700; font-size: 15px; padding-right: 6px; } .wa-fab.is-idle { opacity: 0; pointer-events: none; transform: translateY(12px); } /* ========================================================= PHOTO DROP ZONE ========================================================= */ .photo-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 20px; border: 2px dashed rgba(255, 255, 255, .15); border-radius: 14px; background: rgba(255, 255, 255, .03); cursor: pointer; transition: border-color .2s, background .2s; } .photo-drop:hover, .photo-drop.is-dragover { border-color: var(--accent); background: rgba(124, 58, 237, .08); } .photo-drop input[type="file"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .photo-drop__icon svg { width: 32px; height: 32px; fill: var(--muted); } .photo-drop__text { color: var(--muted); font-size: 14px; } .photo-drop__name { color: var(--accent); font-weight: 600; font-size: 14px; display: none; } .photo-drop.has-file { border-color: var(--accent); border-style: solid; } .photo-drop.has-file .photo-drop__icon, .photo-drop.has-file .photo-drop__text { display: none; } .photo-drop.has-file .photo-drop__name { display: block; } .has-error .photo-drop { border-color: #ef4444; } /* ========================================================= BREAKPOINTS ========================================================= */ @media (min-width: 600px) { :root { --pad: 28px; } .cards { grid-template-columns: repeat(2, 1fr); } /* непарний останній елемент не лишається сиротою в 2-колонковій сітці */ .cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; } .steps { grid-template-columns: repeat(3, 1fr); } .form { padding: 34px 30px 30px; } .form-done { padding: 44px 34px 38px; } .stats { gap: 14px; } .tg-fab { right: 24px; bottom: 24px; padding: 14px 20px 14px 16px; } .tg-fab__label { display: inline; } .wa-fab { right: 24px; bottom: 84px; padding: 14px 20px 14px 16px; } .wa-fab .tg-fab__label { display: inline; } .footer__inner { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; } } @media (min-width: 900px) { .section { padding: 108px 0; } .section--form { padding-block: 120px; } .section__head { margin-bottom: 52px; } .cards { grid-template-columns: repeat(3, 1fr); gap: 18px; } .cards > .card:last-child:nth-child(odd) { grid-column: auto; } .steps { gap: 18px; } .card, .step { padding: 32px 28px; } .sound-btn { top: 96px; } .hero { padding-bottom: 76px; } .stats__item { padding: 18px 16px; } } @media (min-width: 1100px) { /* 5 карток: 3 + 2 по центру */ #benefits .cards { grid-template-columns: repeat(6, 1fr); } #benefits .card { grid-column: span 2; } #benefits .card:nth-child(4) { grid-column: 2 / span 2; } #benefits .card:nth-child(5) { grid-column: 4 / span 2; } } /* ========================================================= FORCED COLORS (Windows High Contrast) Градієнтний текст там стає невидимим — повертаємо системний колір. ========================================================= */ @media (forced-colors: active) { .glass, .stats__item, .form, .form-done { border: 1px solid CanvasText; } .btn--primary, .tg-fab, .wa-fab, .form-done__mark { background: Highlight; color: HighlightText; } .hero__scrim { display: none; } }