/* ИИ-аналитик — лендинг ai-analytica.ru (ФАЗА К / Этап К8). Фирменный стиль «Arion»: бирюза/коралл/янтарь/фиолет + Inter. Тёмная/светлая темы через data-theme на ; палитра данных синхронна с packages/render/theme.py. */ /* ───────────────────────── Темы / токены ───────────────────────── */ :root { --teal: #22cce0; --coral: #fb4d6a; --amber: #ffb74d; --violet: #7c6ff2; --green: #2dc58b; --blue: #5b8def; --grad: linear-gradient(120deg, var(--teal), var(--violet)); --grad-warm: linear-gradient(120deg, var(--amber), var(--coral)); --radius: 18px; --radius-sm: 12px; --maxw: 1180px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --font: "Inter", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif; } html[data-theme="dark"] { --bg: #0b0c10; --bg-2: #111219; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --text: #f4f5f8; --text-soft: #aeb2c0; --text-mute: #7e8398; --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8); --glow: 0 0 0 1px rgba(34, 204, 224, 0.18), 0 30px 80px -40px rgba(124, 111, 242, 0.55); --aurora-1: rgba(34, 204, 224, 0.22); --aurora-2: rgba(124, 111, 242, 0.22); --aurora-3: rgba(251, 77, 106, 0.12); } html[data-theme="light"] { --bg: #f6f7fb; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f1f3f9; --border: rgba(18, 20, 35, 0.08); --border-strong: rgba(18, 20, 35, 0.16); --text: #181a23; --text-soft: #4a4f63; --text-mute: #8a90a2; --shadow: 0 24px 50px -30px rgba(24, 28, 60, 0.25); --glow: 0 0 0 1px rgba(34, 204, 224, 0.25), 0 30px 70px -40px rgba(124, 111, 242, 0.4); --aurora-1: rgba(34, 204, 224, 0.25); --aurora-2: rgba(124, 111, 242, 0.2); --aurora-3: rgba(255, 183, 77, 0.18); } /* ───────────────────────── База ───────────────────────── */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; font-weight: 800; } p { margin: 0; } a { color: inherit; text-decoration: none; } .container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; } .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Фоновые декорации */ .bg-aurora { position: fixed; inset: -20% -10% auto -10%; height: 80vh; z-index: -2; background: radial-gradient(40% 50% at 18% 20%, var(--aurora-1), transparent 70%), radial-gradient(40% 50% at 82% 12%, var(--aurora-2), transparent 70%), radial-gradient(45% 60% at 60% 60%, var(--aurora-3), transparent 70%); filter: blur(20px); pointer-events: none; animation: drift 22s var(--ease) infinite alternate; } @keyframes drift { to { transform: translate3d(0, 24px, 0) scale(1.05); } } .bg-grid { position: fixed; inset: 0; z-index: -3; pointer-events: none; opacity: 0.5; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%); } /* ───────────────────────── Кнопки ───────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s; } .btn:active { transform: translateY(1px) scale(0.99); } .btn--lg { padding: 15px 28px; font-size: 16px; } .btn--block { width: 100%; } .btn--primary { color: #04151a; background: var(--grad); box-shadow: 0 10px 30px -12px rgba(34, 204, 224, 0.7); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -14px rgba(124, 111, 242, 0.8); } .btn--ghost { color: var(--text); background: var(--surface); border-color: var(--border-strong); backdrop-filter: blur(6px); } .btn--ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); cursor: pointer; transition: color 0.2s, border-color 0.2s, transform 0.2s; } .icon-btn:hover { color: var(--teal); border-color: var(--teal); transform: rotate(-8deg); } .ic-moon { display: none; } html[data-theme="light"] .ic-sun { display: none; } html[data-theme="light"] .ic-moon { display: block; } .check { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; display: inline-block; position: relative; background: rgba(45, 197, 139, 0.16); } .check::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ───────────────────────── Навигация ───────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; padding: 14px 0; transition: background 0.3s, border-color 0.3s, padding 0.3s; border-bottom: 1px solid transparent; } .nav.is-stuck { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--border); padding: 9px 0; } .nav__inner { display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; } .brand__mark { display: inline-grid; place-items: center; } .brand__name { font-size: 18px; } .nav__links { display: flex; gap: 26px; margin-inline: auto; font-size: 15px; color: var(--text-soft); } .nav__links a { position: relative; transition: color 0.2s; } .nav__links a:hover { color: var(--text); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--grad); transition: width 0.25s var(--ease); } .nav__links a:hover::after { width: 100%; } .nav__actions { display: flex; align-items: center; gap: 10px; } /* ───────────────────────── Hero ───────────────────────── */ .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 70px 0 40px; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-size: 13.5px; font-weight: 500; margin-bottom: 22px; } .pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(45,197,139,0.18); animation: pulse 2.4s infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(45,197,139,0); } } .hero__title { font-size: clamp(34px, 5vw, 58px); font-weight: 900; } .hero__lede { margin-top: 22px; font-size: clamp(16px, 1.6vw, 19px); color: var(--text-soft); max-width: 36ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hero__bullets { display: flex; flex-wrap: wrap; gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--text-soft); font-size: 14.5px; } .hero__bullets li { display: inline-flex; align-items: center; gap: 8px; } /* Демо-окно ИИ-диалога */ .demo { border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border-strong); box-shadow: var(--glow); overflow: hidden; transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transition: transform 0.5s var(--ease); } .hero__demo:hover .demo { transform: perspective(1400px) rotateY(0) rotateX(0); } .demo__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .demo__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); } .demo__dot:nth-child(1){ background:#fb4d6a; } .demo__dot:nth-child(2){ background:#ffb74d; } .demo__dot:nth-child(3){ background:#2dc58b; } .demo__title { margin-left: 10px; font-size: 13px; color: var(--text-mute); } .demo__body { padding: 20px; min-height: 430px; display: flex; flex-direction: column; gap: 14px; } .msg { max-width: 88%; padding: 12px 15px; border-radius: 16px; font-size: 14.5px; opacity: 0; transform: translateY(10px); animation: rise 0.5s var(--ease) forwards; } @keyframes rise { to { opacity: 1; transform: none; } } .msg--user { align-self: flex-end; background: var(--grad); color: #06171b; border-bottom-right-radius: 5px; font-weight: 500; } .msg--bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; } .msg--bot.thinking { color: var(--text-mute); display: inline-flex; gap: 8px; align-items: center; } .dots span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--text-mute); animation: blink 1.2s infinite; } .dots span:nth-child(2){ animation-delay: 0.2s; } .dots span:nth-child(3){ animation-delay: 0.4s; } @keyframes blink { 0%,80%,100%{ opacity:0.25; transform: translateY(0);} 40%{ opacity:1; transform: translateY(-3px);} } /* Контейнер для графиков: размеры считаются от ШИРИНЫ области ответа (cqi), поэтому диаграммы плавно масштабируются при изменении ширины, а не только тянутся. */ .answer { width: 100%; container-type: inline-size; container-name: answer; } .answer__kpis { display: flex; gap: 10px; margin-bottom: 12px; } .answer__kpi { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } .answer__kpi b { display: block; font-size: 18px; } .answer__kpi span { font-size: 11.5px; color: var(--text-mute); } .answer__kpi .up { color: var(--green); } .answer__kpi .down { color: var(--coral); } .chart { display: flex; align-items: flex-end; gap: clamp(5px, 1.9cqi, 10px); height: clamp(64px, 22cqi, 108px); padding: 8px 4px 0; } .chart i { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--grad); height: var(--h); opacity: 0; transform: scaleY(0.2); transform-origin: bottom; animation: grow 0.6s var(--ease) forwards; animation-delay: var(--d, 0s); } @keyframes grow { to { opacity: 1; transform: scaleY(1); } } /* Диаграмма-водопад (факторный анализ) */ .wf { display: flex; align-items: flex-end; gap: clamp(4px, 1.7cqi, 9px); height: clamp(78px, 25cqi, 122px); padding: 6px 2px 0; margin-bottom: clamp(30px, 9.5cqi, 48px); } .wf__col { position: relative; flex: 1; height: 100%; } .wf__seg { position: absolute; left: 0; right: 0; bottom: var(--b); height: var(--h); border-radius: 4px; background: var(--grad); transform: scaleY(0); transform-origin: bottom; opacity: 0; animation: grow 0.55s var(--ease) forwards; animation-delay: var(--d, 0s); } .wf__seg.up { background: linear-gradient(180deg, var(--green), #1c9c6c); } .wf__seg.down { background: linear-gradient(180deg, var(--coral), #c63450); } .wf__lbl { position: absolute; left: -3px; right: -3px; top: calc(100% + 6px); text-align: center; font-size: clamp(8px, 2.3cqi, 11px); line-height: 1.15; color: var(--text-mute); white-space: normal; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .answer__note { margin-top: 10px; font-size: 13px; color: var(--text-soft); border-left: 2px solid var(--teal); padding-left: 10px; } /* ───────────────────────── Метрики ───────────────────────── */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 24px 0 10px; } .metric { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); text-align: center; } .metric b { display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .metric span { display: block; margin-top: 6px; font-size: 13px; color: var(--text-mute); } /* ───────────────────────── Секции ───────────────────────── */ .section { padding: 76px 0; } .section__head { max-width: 720px; margin-bottom: 44px; } .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .section h2 { font-size: clamp(26px, 3.4vw, 40px); } .section__lede { margin-top: 16px; color: var(--text-soft); font-size: 17px; } /* Карточки */ .cards { display: grid; gap: 18px; } .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } .card { padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow); } .card h3 { font-size: 19px; margin-bottom: 8px; } .card p { color: var(--text-soft); font-size: 15px; } .card__ic { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--border); position: relative; display: grid; place-items: center; color: var(--teal); } .card__ic svg { width: 24px; height: 24px; } .cards--3 .card:nth-child(2) .card__ic { color: var(--amber); } .cards--3 .card:nth-child(3) .card__ic { color: var(--coral); } .card--trust .card__ic { background: linear-gradient(135deg, rgba(34,204,224,0.16), rgba(124,111,242,0.16)); } .cards--4 .card:nth-child(2) .card__ic { color: var(--green); } .cards--4 .card:nth-child(3) .card__ic { color: var(--violet); } .cards--4 .card:nth-child(4) .card__ic { color: var(--blue); } /* простые «иконки» точками-чертами через ::after — лёгкие и тематические */ .card__ic::after { content: ""; position: absolute; inset: 0; margin: auto; } .ic-clock::after { width: 18px; height: 18px; border: 2px solid var(--teal); border-radius: 50%; box-shadow: inset 0 -7px 0 -6px var(--teal); } .ic-maze::after { width: 18px; height: 18px; border: 2px solid var(--amber); border-radius: 4px; background: linear-gradient(var(--amber),var(--amber)) center/2px 10px no-repeat; } .ic-coin::after { width: 16px; height: 16px; border: 2px solid var(--coral); border-radius: 50%; } .ic-lock::after { width: 14px; height: 11px; border: 2px solid var(--teal); border-radius: 3px; box-shadow: 0 -7px 0 -2px transparent, inset 0 0 0 20px transparent; } .ic-shield::after { width: 16px; height: 18px; background: var(--green); clip-path: polygon(50% 0, 100% 22%, 100% 60%, 50% 100%, 0 60%, 0 22%); opacity: 0.8; } .ic-server::after { width: 18px; height: 16px; border: 2px solid var(--violet); border-radius: 3px; background: linear-gradient(var(--violet),var(--violet)) center/12px 2px no-repeat; } .ic-doc::after { width: 13px; height: 17px; border: 2px solid var(--blue); border-radius: 2px; } /* Шаги */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; } .step { position: relative; padding: 30px 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); overflow: hidden; } .step::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--grad); opacity: 0.8; } .step__num { font-size: 40px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; } .step h3 { font-size: 19px; margin-bottom: 8px; } .step p { color: var(--text-soft); font-size: 15px; } /* Фичи */ .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .feature { padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: transform 0.3s var(--ease), border-color 0.3s; } .feature:hover { transform: translateY(-4px); border-color: var(--border-strong); } .feature--wide { grid-column: span 2; } .feature h3 { font-size: 20px; margin-bottom: 8px; } .feature p { color: var(--text-soft); font-size: 15px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); } .chip--more { background: linear-gradient(120deg, rgba(34,204,224,0.16), rgba(124,111,242,0.16)); border-color: var(--border-strong); color: var(--text); font-weight: 600; } .mini-bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; margin-top: 18px; } .mini-bars span { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: var(--grad); opacity: 0.85; } /* Пакеты / тарифы */ .packages { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: stretch; } .pkg { position: relative; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; } .pkg__foot { margin-top: auto; } .pkg__price { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } .pkg__price--soft { font-size: 17px; font-weight: 700; color: var(--text-soft); } .pkg__price-unit { font-size: 15px; font-weight: 500; color: var(--text-mute); } .pkg__foot .btn--block { margin-top: 14px; } /* On-Premises как отдельный тариф в конце списка (без облака) */ .tiers--extra { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); } .tiers__label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mute); } .tier--onprem { border-style: dashed; } .cf-box { margin: 4px 0 2px; } .cf-box:not([hidden]) { display: flex; justify-content: center; } .pkg--accent { background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 14%, var(--surface)), var(--surface)); border-color: var(--border-strong); box-shadow: var(--shadow); } .pkg__name { font-size: 22px; } .pkg__desc { margin-top: 10px; color: var(--text-soft); font-size: 15px; } .pkg__list { list-style: none; margin: 20px 0 22px; padding: 0; display: grid; gap: 12px; } .pkg__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-soft); font-size: 15px; } .tiers { display: grid; gap: 12px; margin-top: 22px; } .tier { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); transition: border-color 0.2s, transform 0.2s; cursor: pointer; } .tier:hover { border-color: var(--teal); transform: translateX(3px); } .tier__name { font-weight: 700; font-size: 16px; } .tier__price { font-weight: 800; font-size: 16px; white-space: nowrap; } .tier__price small { font-weight: 500; color: var(--text-mute); } .tier__desc { grid-column: 1 / -1; font-size: 13px; color: var(--text-mute); } .tier__old { font-weight: 600; font-size: 13px; color: var(--text-mute); text-decoration: line-through; margin-right: 8px; opacity: 0.8; } .tier__badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #04201d; background: var(--teal); vertical-align: middle; } .tier--promo { border-color: color-mix(in srgb, var(--teal) 45%, var(--border)); } /* CTA + форма */ .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 44px; border-radius: 26px; background: linear-gradient(150deg, color-mix(in srgb, var(--teal) 12%, var(--bg-2)), var(--bg-2)); border: 1px solid var(--border-strong); box-shadow: var(--glow); } .cta h2 { font-size: clamp(24px, 3vw, 34px); } .cta__copy p { margin-top: 14px; color: var(--text-soft); font-size: 16px; } .cta__points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; color: var(--text-soft); font-size: 15px; } .cta__points li { display: flex; gap: 10px; align-items: center; } .lead { display: grid; gap: 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; } .lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .lead label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-soft); } .lead input, .lead textarea { font-family: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 14px; resize: vertical; transition: border-color 0.2s, box-shadow 0.2s; } .lead input:focus, .lead textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(34,204,224,0.2); } .lead input::placeholder, .lead textarea::placeholder { color: var(--text-mute); } .req { color: var(--coral); } .lead__note { font-size: 12.5px; color: var(--text-mute); margin: 0; text-align: center; } .lead__note.ok { color: var(--green); font-weight: 600; } .lead__note.err { color: var(--coral); font-weight: 600; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ───────────────────────── Подвал ───────────────────────── */ .footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 46px 0 30px; background: var(--bg-2); } .footer__inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .footer__brand p { margin-top: 10px; color: var(--text-mute); font-size: 14px; max-width: 30ch; } .footer__links { display: flex; flex-wrap: wrap; gap: 18px; color: var(--text-soft); font-size: 14.5px; } .footer__links a:hover { color: var(--teal); } .footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--text-mute); font-size: 12.5px; } /* ───────────────────────── Анимации появления ───────────────────────── */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .cards .reveal:nth-child(2), .features .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: 0.08s; } .cards .reveal:nth-child(3), .features .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: 0.16s; } .cards .reveal:nth-child(4) { transition-delay: 0.24s; } /* ───────────────────────── Адаптив ───────────────────────── */ @media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; } .hero__lede { max-width: none; } .demo { transform: none; } .metrics { grid-template-columns: repeat(2, 1fr); } .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; } .feature--wide { grid-column: auto; } .packages { grid-template-columns: 1fr; } .cta { grid-template-columns: 1fr; padding: 30px; } .nav__links { display: none; } } @media (max-width: 560px) { .metrics, .cards--3, .cards--4 { grid-template-columns: 1fr; } .lead__row { grid-template-columns: 1fr; } .nav__actions .btn--ghost { display: none; } .hero__actions .btn { flex: 1; } .section { padding: 56px 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }