:root {
--brand-50: #ebf3fc;
--brand-100: #d6e7fa;
--brand-200: #a9ccf3;
--brand-300: #6faae9;
--brand-400: #2e84da;
--brand-500: #015db9;
--brand-600: #014e9e;
--brand-700: #013f80;
--brand-800: #01305f;
--brand-900: #011f3e;
--ink-50: #f6f9fc;
--ink-100: #edf2f7;
--ink-200: #dce4ed;
--ink-300: #b6c3d1;
--ink-400: #8697a9;
--ink-500: #5a6c80;
--ink-600: #3d5265;
--ink-700: #24374b;
--ink-800: #152a3d;
--ink-900: #0a1a2b;
--surface-white: #ffffff;
--surface-soft: #f4f8fc;
--surface-blue-soft: #e9f1fb;
--surface-deep: #0a1a2b;
--surface-footer: #091220;
--surface-solution: #0f1a29;
--photo-divider-bg: #0f1f33;
--surface-why: #082a5b;
--accent-red: #e2211c;
--accent-sky: #7fc8f0;
--accent-mint: #2fbf87;
--mist-light: #f4f7fa;
--mist-mid: #e2e7ec;
--mist-deep: #c2c9d3;
--color-text: var(--ink-900);
--color-text-muted: var(--ink-500);
--color-bg: var(--surface-white);
--color-focus: var(--brand-400);
--glass-border: rgb(255 255 255 / 0.9);
--footer-text: rgb(255 255 255 / 0.82);
--footer-muted: rgb(255 255 255 / 0.55);
--footer-subtle: rgb(255 255 255 / 0.45);
--footer-divider: rgb(255 255 255 / 0.12);
--footer-link-hover: #4da3f5;
--product-border: #e3e8f0;
--product-media-border: #e8edf2;
--product-title: var(--ink-title);
--product-power: #4a5463;
--product-spec: #596373;
--slider-arrow-border: #d9e0eb;
--ink-title: #0e1827;
--tick-bg: #e5f0fc;
--tag-bg: rgb(255 255 255 / 0.1);
--tag-border: rgb(255 255 255 / 0.28);
--tag-text: rgb(255 255 255 / 0.92);
--cta-text: rgb(255 255 255 / 0.8);
--card-line: #ecf0f6;
--card-line-strong: #dee5f0;
--benefit-border: rgb(255 255 255 / 0.2);
--benefit-check-bg: rgb(255 255 255 / 0.22);
--benefit-label: rgb(255 255 255 / 0.86);
--surface-pale: #f1f6fd;
--param-bg: rgb(255 255 255 / 0.8);
--param-icon-bg: #e7effa;
--support-line: #e3e8f0;
--support-check-bg: #e7effa;
--support-note-bg: #f2f7fd;
--apply-veil: rgb(5 20 46 / 0.55);
--page-banner-veil-from: #e9f1fb;
--page-banner-veil-mid: rgb(233 241 251 / 0.72);
--page-banner-veil-to: rgb(255 255 255 / 0);
--post-media-bg: #f2f5fa;
--post-date: #667080;
--scenario-bg: #f9fbfd;
--scenario-border: #e3ebf2;
--scenario-chip-border: #dee8f5;
--kit-border: #dee5f0;
--kit-spec-label: #667080;
--ink-prose: #333d4f;
--article-muted: #667080;
--article-sep: #b8c2d1;
--line-soft: #dee5f0;
--article-panel-bg: #f2f7fd;
--surface-mist: #f8fafc;
--field-border: var(--ink-200);
--field-placeholder: var(--ink-400);
--banner-bg: #e8f0fa;
--lineup-line: #e0e8f2;
--flow-line: #1e6fd9;
--flow-line-both: #0fa37f;
--modal-panel-text: #4d6178;
--modal-backdrop: rgb(5 20 51 / 0.55);
--modal-close-bg: rgb(255 255 255 / 0.75);
--modal-close-bg-hover: rgb(255 255 255 / 0.95);
--form-card-bg: rgb(255 255 255 / 0.94);
--warranty-bg: var(--brand-100);
--form-error-ring: rgb(226 33 28 / 0.16);
--form-error-bg: rgb(226 33 28 / 0.08);
--brand-ink: #014a96;
--kit-cta-text: rgb(255 255 255 / 0.8);
--kit-cta-tint: rgb(13 84 173 / 0.3);
--solution-text: rgb(255 255 255 / 0.8);
--solution-number: rgb(255 255 255 / 0.55);
--solution-circle-bg: rgb(255 255 255 / 0.16);
--solution-circle-border: rgb(255 255 255 / 0.35);
--solution-cta-bg: rgb(255 255 255 / 0.94);
--solution-cta-text: #0e1827;
--feature-bg: rgb(255 255 255 / 0.09);
--feature-border: rgb(255 255 255 / 0.2);
--feature-text: rgb(255 255 255 / 0.74);
--eyebrow-on-dark: rgb(255 255 255 / 0.82);
--glass-panel: linear-gradient(to bottom right, rgb(255 255 255 / 0.34) 14.29%, rgb(255 255 255 / 0.22) 85.71%);
--glass-panel-border: rgb(255 255 255 / 0.7);
--surface-glass-soft: rgb(255 255 255 / 0.7);
--gradient-stat-number: linear-gradient(180deg, #585c61 0%, #373c44 100%);
--gradient-category-media: radial-gradient(60% 60% at 50% 50%, #ffffff 0%, #f1f5f9 55%, #e3e9f0 100%);
--gradient-category-shade: linear-gradient(180deg, rgb(10 26 43 / 0) 0%, rgb(10 26 43 / 0.32) 45%, rgb(6 16 28 / 0.94) 100%);
--gradient-solution-shade: linear-gradient(180deg, rgb(10 20 36 / 0) 0%, rgb(10 20 36 / 0.46) 68.48%, #050d1a 100%);
--gradient-why-corner: conic-gradient(from 109deg at 27% 47.5%, rgb(77 178 255 / 0.16) 0%, rgb(5 46 107 / 0.2) 35%, rgb(51 140 242 / 0.14) 70%, rgb(77 178 255 / 0.16) 100%);
--gradient-solution-shade-strong: linear-gradient(180deg, rgb(10 20 36 / 0.1) 0%, rgb(10 20 36 / 0.55) 35%, rgb(6 16 28 / 0.88) 70%, #050d1a 100%);
--glass-chip-border: rgb(255 255 255 / 0.85);
--nav-hover-bg: rgb(1 93 185 / 0.13);
--nav-hover-border: rgb(1 93 185 / 0.2);
--inset-highlight: inset 0 1px 2px rgb(255 255 255 / 0.5);
--button-chip-hover-bg: rgb(255 255 255 / 0.22);
--button-secondary-hover-bg: rgb(255 255 255 / 0.8);
--button-shine: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.55) 50%, rgb(255 255 255 / 0) 100%);
--gradient-button-blue: linear-gradient(165.42deg, #2e8ae6 14.286%, #014a97 85.714%);
--gradient-button-blue-hover: linear-gradient(165.42deg, #4fa2f0 14.286%, #0159b4 85.714%);
--glass-white-frost: linear-gradient(to bottom right, rgb(255 255 255 / 0.85) 14.29%, rgb(255 255 255 / 0.55) 85.71%);
--gradient-mist-radial: radial-gradient(40% 40% at 52% 49.6%, #f6f8fa 0%, #e6eaef 52%, #c6cdd6 100%);
--gradient-mist-linear: linear-gradient(to bottom right, #f7f9fb 15.28%, #e4e9ee 53.47%, #cbd2da 84.72%);
--gradient-mist-section: linear-gradient(180deg, #ffffff 0%, #f1f4f8 50%, #dde3ea 100%);
--gradient-photo-divider: linear-gradient(180deg, rgb(5 26 61 / 0.11) 0%, rgb(5 26 61 / 0.04) 50%, rgb(5 26 61 / 0.11) 100%);
--gradient-kits: linear-gradient(166.48deg, #ecf3fb 14.286%, #f3f7fb 53.571%, #e4edf7 85.714%);
--gradient-kit-cta: linear-gradient(152.61deg, #338feb 15.278%, #0f61bd 53.472%, #014085 84.722%);
--gradient-modal-panel: linear-gradient(123.43deg, #e9f1fc 12.857%, #dae5f4 52.143%, #d0def1 84.286%);
--gradient-cta-panel: radial-gradient(67% 50% at 39% 30%, #1766b8 0%, #0f529c 27.5%, #083d80 55%, #052d61 77.5%, #031c42 100%);
--gradient-steps-bg: linear-gradient(180deg, #f5f8fb 0%, #e9eff6 100%);
--gradient-steps-line: linear-gradient(to right, rgb(1 93 185 / 0.1) 0%, rgb(1 93 185 / 0.35) 50%, rgb(1 93 185 / 0.1) 100%);
--gradient-steps-line-v: linear-gradient(to bottom, rgb(1 93 185 / 0.1) 0%, rgb(1 93 185 / 0.35) 50%, rgb(1 93 185 / 0.1) 100%);
--gradient-step-badge: linear-gradient(135deg, #2e8ae5 14.286%, #014a96 85.714%);
--gradient-partners-fade: linear-gradient(to right, #ffffff 0%, rgb(255 255 255 / 0) 100%);
--gradient-kit-photo-mask: linear-gradient(100deg, transparent 6%, rgb(0 0 0 / 0.45) 55%, rgb(0 0 0 / 0.92) 85%, #000 100%);
--gradient-kit-photo-mask-mobile: linear-gradient(180deg, transparent 46%, rgb(0 0 0 / 0.3) 72%, rgb(0 0 0 / 0.85) 100%);
--gradient-kits-backdrop-mask: linear-gradient(180deg, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0.21) 21.83%, rgb(0 0 0 / 0.28) 44.25%, rgb(0 0 0 / 0.16) 68.76%, rgb(0 0 0 / 0.1) 84.31%, transparent 100%);
--gradient-hero-fade: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.85) 65%, #ffffff 100%);
--gradient-article-hero: linear-gradient(148.77deg, #ffffff 14.286%, #e4edf8 85.714%);
--gradient-partners-hero: linear-gradient(156.87deg, #ffffff 14.286%, #e4edf8 85.714%);
--gradient-benefits: linear-gradient(153.24deg, #0b53aa 16.216%, #053d8a 53.378%, #03255b 83.784%);
--gradient-benefits-mask: linear-gradient(to right, #000 0, transparent 79%);
--gradient-benefit-card: linear-gradient(to right, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.06));
--gradient-matching-mask: linear-gradient(to right, transparent 0, #000 100%);
--gradient-equipment-media: linear-gradient(146.96deg, #ffffff 14.286%, #e4edf8 85.714%);
--gradient-support-shade: linear-gradient(to right, rgb(5 15 33 / 0) 0, rgb(5 15 33 / 0.1) 60%, rgb(5 15 33 / 0.42) 100%);
--veil-from: rgb(255 255 255 / 0.7);
--veil-to: rgb(255 255 255 / 0);
--veil-text-end: calc(max(var(--container-padding), (100% - var(--container)) / 2) + var(--contacts-text-width));
--gradient-contacts-veil-narrow: linear-gradient(to bottom, rgb(255 255 255 / 0.92) 0%, rgb(255 255 255 / 0.82) 90%, rgb(255 255 255 / 0.4) 100%);
--shadow-soft: 0 8px 20px rgb(10 26 43 / 0.06);
--shadow-card: 0 2px 6px rgb(10 26 43 / 0.04), 0 24px 48px -8px rgb(10 26 43 / 0.1);
--shadow-glass: 0 32px 64px -16px rgb(1 93 185 / 0.14), 0 1px 2px rgb(10 26 43 / 0.04);
--shadow-button: 0 12px 24px -6px rgb(1 93 185 / 0.35);
--shadow-button-hover: 0 16px 32px -8px rgb(1 93 185 / 0.45);
--shadow-header: 0 12px 16px rgb(10 26 43 / 0.08);
--shadow-icon-button: 0 8px 10px rgb(10 26 43 / 0.06);
--shadow-glass-panel: 0 32px 32px rgb(11 65 118 / 0.2);
--shadow-photo: 0 28px 56px -16px rgb(10 26 43 / 0.14);
--shadow-photo-card: 0 20px 40px -12px rgb(10 26 43 / 0.16);
--shadow-badge: 0 12px 14px rgb(10 26 43 / 0.12);
--shadow-category: 0 20px 44px -12px rgb(10 26 43 / 0.1);
--shadow-feature: 0 12px 32px rgb(3 18 46 / 0.18);
--shadow-product: 0 10px 28px rgb(13 28 51 / 0.06);
--shadow-card-soft: 0 28px 60px rgb(20 36 61 / 0.04), 0 8px 24px rgb(20 36 61 / 0.05);
--shadow-param: 0 10px 26px rgb(20 41 77 / 0.07);
--shadow-support: 0 24px 56px rgb(13 31 66 / 0.14);
--shadow-equipment: 0 8px 24px rgb(20 36 61 / 0.05);
--shadow-equipment-hover: 0 18px 40px rgb(20 36 61 / 0.1);
--shadow-scaling-card: 0 16px 40px rgb(15 38 77 / 0.07);
--shadow-chip: 0 8px 18px rgb(3 64 140 / 0.3);
--shadow-card-lift: 0 32px 64px rgb(20 36 61 / 0.08), 0 10px 28px rgb(20 36 61 / 0.08);
--shadow-contact-card: 0 18px 44px rgb(15 38 77 / 0.1);
--shadow-map-panel: 0 10px 30px rgb(15 38 77 / 0.14);
--shadow-map-marker: 0 8px 20px rgb(3 64 140 / 0.35);
--shadow-form-card: 0 28px 70px rgb(5 20 51 / 0.22);
--shadow-modal: 0 32px 80px rgb(5 20 51 / 0.28);
--shadow-step-badge: 0 6px 8px rgb(3 46 102 / 0.2);
--shadow-kit-cta: 0 16px 40px rgb(3 41 92 / 0.26);
--shadow-button-inverse: 0 6px 16px rgb(0 20 56 / 0.18);
--shadow-button-inverse-hover: 0 10px 24px rgb(0 20 56 / 0.24);
--shadow-product-hover: 0 4px 12px rgb(5 38 89 / 0.08), 0 20px 44px rgb(5 38 89 / 0.16);
--shadow-button-secondary-hover: 0 14px 30px -8px rgb(1 93 185 / 0.2);
--shadow-icon-button-hover: 0 24px 24px rgb(10 26 43 / 0.1), 0 2px 3px rgb(10 26 43 / 0.04);
--blur-glass: 24px;
--blur-header: 14px;
--blur-nav: 7px;
--blur-badge: 12px;
--blur-chip: 9px;
--blur-feature: 12px;
--blur-photo-card: 42px;
--blur-button: 10px;
--blur-form: 15px;
--font-base: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fs-h1: 56px;      --lh-h1: 1.1;     --ls-h1: -0.02em;
--fs-h2: 42px;      --lh-h2: 1.2;     --ls-h2: -0.015em;
--fs-h3: 32px;      --lh-h3: 40px;    --ls-h3: -0.01em;
--fs-h4: 24px;      --lh-h4: 32px;    --ls-h4: -0.005em;
--fs-stat: 44px;    --lh-stat: 48px;  --ls-stat: -0.02em;
--fs-body-l: 20px;  --lh-body-l: 32px;
--fs-body-m: 17px;  --lh-body-m: 28px;
--fs-body-s: 16px;  --lh-body-s: 26px;
--fs-nav: 16px;     --lh-nav: 24px;
--fs-button-l: 17px; --lh-button-l: 24px;
--fs-button-m: 16px; --lh-button-m: 22px;
--fs-eyebrow: 13px; --lh-eyebrow: 18px; --ls-eyebrow: 0.1em;
--fs-caption: 13px; --lh-caption: 18px;
--fs-tag: 14px;
--fs-category-title: 18px;
--fs-product-title: 20px;
--fs-card-title: 24px;      --lh-card-title: 30px;
--fs-article-lead: 22px;    --lh-article-lead: 34px;
--fs-article-h2: 32px;      --lh-article-h2: 42px;
--fs-article-h3: 22px;      --lh-article-h3: 30px;
--fs-article-body: 18px;    --lh-article-body: 30px;
--lh-article-link: 28px;
--fs-faq-question: 20px;    --lh-faq-question: 28px;
--fs-toc-item: 16px;        --lh-toc-item: 24px;
--fs-article-row-title: 16px; --lh-article-row-title: 26px;
--lh-article-row-date: 22px;
--fs-page-title: 52px;  --lh-page-title: 62px;
--fs-benefit-label: 17px;   --lh-benefit-label: 26px;
--fs-check: 12px;           --lh-check: 18px;
--fs-param: 18px;           --lh-param: 26px;
--fs-support-lead: 18px;    --lh-support-lead: 30px;
--fs-support-item: 18px;    --lh-support-item: 28px;
--fs-support-check: 14px;   --lh-support-check: 20px;
--fs-equipment-title: 20px; --lh-equipment-title: 28px;
--fs-form-title: 36px;      --lh-form-title: 44px;
--fs-modal-title: 30px;     --lh-modal-title: 38px;
--fs-form-text: 18px;       --lh-form-text: 28px;
--fs-modal-text: 17px;      --lh-modal-text: 26px;
--fs-field: 17px;           --lh-field: 24px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-12: 12px;
--space-10: 10px;
--space-14: 14px;
--space-16: 16px;
--space-18: 18px;
--space-20: 20px;
--space-24: 24px;
--space-28: 28px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-56: 56px;
--space-60: 60px;
--space-64: 64px;
--space-80: 80px;
--space-96: 96px;
--space-100: 100px;
--space-120: 120px;
--radius-button: 12px;
--radius-button-l: 14px;
--radius-chip: 16px;
--radius-media: 20px;
--radius-header: 24px;
--radius-card: 28px;
--radius-photo: 22px;
--radius-feature: 22px;
--radius-product: 20px;
--radius-round: 999px;
--radius-post: 22px;
--radius-post-lead: 26px;
--radius-post-media: 16px;
--radius-article-media: 24px;
--radius-article-row: 18px;
--radius-article-thumb: 12px;
--radius-help-card: 20px;
--radius-help-card-wide: 24px;
--radius-panel: 24px;
--radius-map-panel: 16px;
--radius-form-card: 32px;
--radius-modal: 28px;
--radius-modal-close: 12px;
--radius-field: 12px;
--radius-checkbox: 6px;
--radius-warranty-item: 20px;
--radius-partners-photo: 24px;
--radius-audience: 22px;
--radius-audience-media: 14px;
--radius-benefit: 24px;
--radius-param: 18px;
--radius-param-icon: 14px;
--radius-support-photo: 28px;
--radius-support-check: 10px;
--radius-support-note: 16px;
--radius-equipment: 20px;
--radius-equipment-media: 14px;
--radius-faq-card: 22px;
--radius-lineup: 24px;
--radius-chain: 24px;
--radius-chain-caption: 16px;
--radius-scaling-card: 24px;
--radius-chip: 18px;
--radius-scaling-item: 14px;
--button-l-padding: 14px 22px 14px 28px;
--button-l-gap: 14px;
--button-m-padding: 16px 22px 16px 26px;
--button-m-gap: 12px;
--fs-button-s: 15px; --lh-button-s: 20px;
--button-s-padding: 14px 22px;
--button-s-gap: var(--space-10);
--button-chip-size: 36px;
--button-compact-padding: 10px 18px 10px 22px;
--button-compact-chip-size: 32px;
--button-shine-width: 110px;
--icon-size: 24px;
--nav-item-padding: 10px 17px;
--header-height: 88px;
--header-offset-top: 32px;
--header-offset-inline: 80px;
--header-max-width: 1760px;
--header-padding: 0 15px 0 31px;
--logo-width: 120px;
--logo-height: 48px;
--footer-brand-column: 360px;
--footer-column: 240px;
--footer-padding-bottom: 112px;
--footer-divider-gap: 27px;
--header-toggle-size: 56px;
--header-panel-gap: 12px;
--eyebrow-dot-size: 7px;
--eyebrow-dot: var(--accent-red);
--hero-title-max: 840px;
--hero-lead-max: 660px;
--hero-note-max: 620px;
--hero-fade-height: 520px;
--hero-media-width: 771px;
--hero-media-overhang: 156px;
--hero-media-rise: 67px;
--hero-content-top: 213px;
--hero-media-top: 146px;
--hero-stats-gap: 143px;
--hero-bottom: 104px;
--stat-icon-size: 64px;
--stats-panel-padding: 32px 56px;
--eyebrow-gap: 14px;
--link-chip-size: 30px;
--badge-padding: 18px 28px 18px 24px;
--section-py: 120px;
--category-height: 520px;
--category-media: 268px;
--category-shade: 176px;
--category-chip: 48px;
--category-open: 520px;
--category-collapsed: 264px;
--category-title-top: 83.85%;
--category-padding: 28px 32px 32px;
--section-head-mb: 60px;
--section-head-gap: 180px;
--section-head-stack-gap: var(--space-32);
--section-head-note-on-dark: rgb(255 255 255 / 0.8);
--section-head-rule-on-dark: rgb(255 255 255 / 0.45);
--solution-height: 760px;
--solution-padding: 40px;
--solution-bottom: 48px;
--solution-circle: 56px;
--feature-padding: 35px;
--feature-icon: 52px;
--feature-min-height: 280px;
--slider-item: 432px;
--product-media: 250px;
--product-padding: 24px 28px;
--slider-arrow: 52px;
--products-decor-width: 47.37%;
--slider-bar: 460px;
--slider-arrow-gap: 14px;
--slider-gap: var(--space-32);
--slider-inline-gap: var(--space-24);
--slider-pad-top: var(--space-32);
--slider-pad-bottom: 38px;
--photo-divider-height: 300px;
--kit-media-width: 280px;
--post-padding: 10px 10px 0;
--post-body-padding: 20px 12px 22px;
--post-media-height: 300px;
--lh-post-title: 28px;
--post-lead-padding: 14px 56px 14px 14px;
--post-lead-gap: 48px;
--post-lead-media-width: 51.47%;
--post-lead-media-ratio: 664 / 460;
--post-lead-media-height: 460px;
--post-lead-media-height-stacked: 380px;
--fs-post-lead-title: 36px;
--lh-post-lead-title: 46px;
--pagination-size: 52px;
--button-outline-padding: 11px 18px 11px 20px;
--blog-hero-top: 180px;
--blog-decor-width: 54.9%;
--blog-title-max: 840px;
--blog-lead-max: 1128px;
--cta-height: clamp(520px, 36.5vw, 700px);
--cta-panel-padding: clamp(64px, 15%, 144px) clamp(40px, 12.5%, 120px);
--cta-content: 600px;
--cta-photo-height: 420px;
--tag-height: 40px;
--tag-padding: 11px 18px;
--scenario-padding: 34px 32px;
--scenario-width: 316px;
--scenario-chip: 64px;
--lh-scenario-title: 1.2;
--steps-badge: 56px;
--steps-item-min: 240px;
--steps-badge-border: 4px;
--steps-decor-width: 47.37%;
--partners-content: 700px;
--partners-content-share: 52%;
--partners-bottom: 76px;
--partners-photo-width: 44.79%;
--partners-fade-width: 30.23%;
--partners-photo-height: 480px;
--tick-size: 22px;
--kit-media-height-stacked: 260px;
--kit-padding: 28px 32px;
--kit-tag-padding: 6px 12px;
--kit-spec-row: 7px;
--kit-title-lh: 28px;
--kit-cta-padding: 44px 40px;
--kit-cta-photo-width: 97.6%;
--kit-cta-text-max: 450px;
--container-edge: max(var(--container-padding), calc((100% - var(--container)) / 2));
--section-head-title: 749px;
--section-head-note: 431px;
--about-text: 620px;
--about-desc: 560px;
--about-media: 740px;
--article-hero-top: 180px;
--article-hero-bottom: 80px;
--article-hero-media-ratio: 1360 / 520;
--article-hero-media-min: 240px;
--article-hero-title: 1100px;
--article-hero-lead: 860px;
--article-aside: 280px;
--article-measure: 760px;
--article-columns-gap: 100px;
--article-body-py: 120px;
--article-section-gap: 52px;
--article-block-gap: 32px;
--article-content-gap: 28px;
--article-para-gap: 18px;
--article-sub-gap: 14px;
--article-list-gap: 8px;
--prose-list-indent-base: 22px;
--article-anchor-offset: 144px;
--toc-indent: 20px;
--toc-gap: 14px;
--help-card-padding: 28px 24px;
--help-card-padding-wide: 36px;
--faq-item-py: 24px;
--faq-card-item-py: 28px;
--faq-card-padding: 8px 32px;
--faq-row-gap: 24px;
--faq-sign: 13px;
--fs-faq-sign: 24px;
--article-row-padding: 14px 22px 14px 14px;
--article-row-gap: 20px;
--article-row-media-width: 96px;
--article-row-media-height: 72px;
--related-gap: 16px 32px;
--contacts-banner-height: 600px;
--contacts-text-top: 185px;
--contacts-text-width: 620px;
--contacts-card-overlap: 110px;
--contact-card-padding: 44px 48px;
--contact-card-gap: 32px;
--contact-badge: 44px;
--map-height: 460px;
--map-panel-offset: 32px;
--map-panel-padding: 24px 28px;
--map-panel-gap: 10px;
--fs-map-title: 24px;        --lh-map-title: 32px;
--map-marker: 56px;
--map-marker-x: 50%;
--map-marker-y: 50%;
--contacts-decor-width: 54.9%;
--form-card-padding: 56px;
--form-card-gap: 32px;
--form-head-gap: 10px;
--form-gap: 20px;
--field-height: 64px;
--field-padding: 22px;
--textarea-height: 180px;
--checkbox-size: 22px;
--form-submit-width: 340px;
--warranty-padding: 40px;
--warranty-item-padding: 20px;
--warranty-num: 40px;
--modal-width: 1016px;
--modal-gutter: 24px;
--modal-photo-width: 428px;
--modal-panel-padding: 44px;
--modal-panel-gap: 26px;
--modal-head-gap: 24px;
--modal-close-size: 40px;
--modal-rise: 16px;
--modal-scale: 0.985;
--legal-hero-top: 168px;
--legal-hero-bottom: 72px;
--legal-py: 96px 120px;
--legal-title-max: 1160px;
--legal-aside: 320px;
--legal-measure: 940px;
--legal-columns-gap: 100px;
--legal-section-gap: 48px;
--legal-list-indent: 4px;
--legal-list-py: 2px;
--legal-number-width: 24px;
--legal-number-indent: 36px;
--legal-marker-width: 18px;
--legal-marker-indent: 30px;
--legal-meta-gap: 32px;
--toc-card-padding: 28px 24px;
--toc-card-gap: 14px;
--toc-item-py: 3px;
--help-quiet-padding: 28px 24px;
--partners-hero-top: 180px;
--partners-hero-bottom: 120px;
--partners-hero-gap: var(--space-80);
--partners-hero-text-cols: 720;
--partners-hero-photo-cols: 560;
--partners-hero-photo-ratio: 560 / 520;
--partners-hero-photo-focus: 76.6%;
--partners-hero-photo-stacked: 420px;
--partners-hero-measure: 860px;
--audience-gap: var(--space-32);
--audience-padding: 10px 10px 0;
--audience-media-height: 240px;
--audience-body-padding: 28px 14px 32px;
--audience-body-gap: 14px;
--audience-shadow-top: 8px;
--audience-shadow-bottom: 48px;
--benefits-decor-top: -77px;
--benefits-decor-width: 71.09%;
--benefit-padding: 36px 32px;
--benefit-gap: 24px;
--benefit-list-gap: 14px;
--benefit-item-gap: 12px;
--blur-benefit: 12px;
--benefits-decor-quiet: 0.45;
--matching-gap: var(--space-48);
--matching-head-gap: 18px;
--matching-lead: 760px;
--matching-params: 1128px;
--matching-note: 620px;
--matching-decor-bleed: -3px;
--matching-decor-width: 71.2%;
--param-gap: var(--space-16);
--param-height: 116px;
--param-padding: 22px 20px;
--param-icon: 48px;
--blur-param: 22px;
--matching-decor-quiet: 0.35;
--support-gap: var(--space-80);
--support-photo-cols: 600;
--support-content-cols: 680;
--support-photo-ratio: 600 / 620;
--support-photo-stacked: 420px;
--support-content-gap: 28px;
--support-item-py: var(--space-16);
--support-item-gap: var(--space-16);
--support-check-size: 32px;
--support-note-padding: 22px 24px;
--equipment-gap: var(--space-32);
--equipment-padding: 10px 10px 0;
--equipment-media-ratio: 410 / 200;
--equipment-photo-width: 62.2%;
--equipment-photo-height: 85%;
--equipment-body-padding: 24px 12px 28px;
--equipment-body-gap: var(--space-10);
--apply-card: 1160px;
--page-banner-height: 760px;
--page-banner-top: 150px;
--page-banner-bottom: 52px;
--page-banner-text: 760px;
--page-banner-bg: var(--banner-bg);
--page-banner-ink: var(--ink-title);
--page-banner-eyebrow: var(--brand-500);
--page-banner-lead: var(--ink-700);
--prose-lead-color: var(--ink-700);
--page-banner-photo-pos: center;
--page-banner-text-end: calc(max(var(--container-padding), (100% - var(--container)) / 2) + var(--page-banner-text));
--page-banner-veil-mid-shift: 106px;
--page-banner-veil-end-shift: 458px;
--page-banner-veil: linear-gradient(
to right,
var(--page-banner-veil-from) 0,
var(--page-banner-veil-mid) calc(var(--page-banner-text-end) + var(--page-banner-veil-mid-shift)),
var(--page-banner-veil-to) calc(var(--page-banner-text-end) + var(--page-banner-veil-end-shift))
);
--page-banner-veil-dark: linear-gradient(to bottom, rgb(10 26 43 / 0.35) 0, rgb(10 26 43 / 0) 60%),
linear-gradient(
to right,
rgb(10 26 43 / 0.88) 0,
rgb(10 26 43 / 0.55) calc(var(--page-banner-text-end) - 176px),
rgb(10 26 43 / 0.12) calc(var(--page-banner-text-end) + 496px),
rgb(10 26 43 / 0) calc(var(--page-banner-text-end) + 880px)
);
--page-banner-veil-dark-narrow: linear-gradient(to bottom, rgb(10 26 43 / 0.35) 0, rgb(10 26 43 / 0) 60%),
linear-gradient(
to right,
rgb(10 26 43 / 0.9) 0,
rgb(10 26 43 / 0.7) var(--page-banner-text-end),
rgb(10 26 43 / 0) calc(var(--page-banner-text-end) + 880px)
);
--page-banner-eyebrow-on-dark: #9ec7f0;
--check-list-gap: var(--space-14);
--check-list-py: var(--space-4);
--check-list-col-gap: var(--space-24);
--check-list-icon: 22px;
--case-gap: var(--space-20);
--case-panel-py: 96px;
--case-panel-inner: var(--space-80);
--case-media-py: var(--space-60);
--case-media-inner: var(--space-40);
--case-media-outer: var(--space-60);
--radius-case-photo: 32px;
--case-photo-stacked: 420px;
--case-panel-py-narrow: var(--space-32);
--gradient-picking: linear-gradient(to right, #0b53aa 0%, #053d8a 55%, #03255b 100%);
--picking-gap: var(--space-40);
--picking-head-title: 860px;
--picking-head-note: 440px;
--picking-head-gap: var(--space-60);
--picking-col-gap: var(--space-32);
--picking-row-gap: var(--space-16);
--picking-step-padding: 26px 28px;
--picking-step-gap: var(--space-20);
--picking-step-bg: linear-gradient(173deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.06) 71.429%);
--picking-step-border: rgb(255 255 255 / 0.14);
--picking-accent: #7fc8f0;
--picking-num-color: #c4e7fb;
--picking-result-padding: 22px 28px 22px 0;
--picking-result-gap: 18px;
--picking-result-color: rgb(255 255 255 / 0.85);
--picking-bar: 4px;
--ls-picking-num: 0.32px;
--options-gap: var(--space-60);
--options-grid-gap: var(--space-32);
--option-padding: var(--space-28);
--option-media: 232px;
--option-text-gap: var(--space-12);
--option-body-gap: var(--space-32);
--option-title-lh: 38px;
--radius-option: 22px;
--radius-option-media: 16px;
--options-decor-width: 915px;
--options-decor-height: 894px;
--picking-photo-width: 69.17%;
--picking-photo-fade: 77.83%;
--radius-picking-step: 18px;
--radius-picking-bar: 2px;
--blur-picking-step: 8px;
--shadow-picking-result: 0 10px 14px rgb(15 38 77 / 0.1);
--space-5: 5px;
--space-7: 7px;
--fs-cat-tile: 15px;   --lh-cat-tile: 21px;
--fs-filters-title: 18px;  --lh-h5: 24px;
--fs-filter-group: 15px;
--fs-filter-option: 14px;
--fs-control: 14px;
--lh-control: 20px;
--fs-found: 15px;  --lh-found: 22px;
--fs-filters-submit: 15px;
--fs-badge: 12px;      --lh-badge: 16px;
--fs-overline: 11px;   --lh-overline: 16px;  --ls-overline: 0.66px;
--lh-mods-title: 14px;
--lh-product-name: 22px;
--status-in-stock: #16a34a;
--shadow-cat-tile: 0 4px 7px rgb(10 31 64 / 0.05);
--shadow-catalog-card: 0 6px 9px rgb(10 31 64 / 0.05);
--gradient-filters-submit: linear-gradient(to right, #2e8ae5 0%, #014a96 100%);
--filters-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3E%3Cpath d='M1 4.2L3.8 7L10 1' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M0.8 1.2L4.5 4.9L8.2 1.2' fill='none' stroke='%238697a9' stroke-width='1.6'/%3E%3C/svg%3E");
--catalog-hero-bg: linear-gradient(to bottom, #f1f6fc 0%, #e5eef8 100%);
--catalog-hero-top: 168px;
--catalog-hero-bottom: 64px;
--catalog-hero-gap: var(--space-28);
--catalog-head-gap: var(--space-60);
--catalog-note: 520px;
--catalog-note-gap: var(--space-20);
--catalog-note-bar: 4px;
--fs-catalog-title: 46px;  --lh-catalog-title: 56px;
--cat-tile-gap: var(--space-16);
--cat-tile-padding: 16px 18px;
--cat-tile-inner-gap: var(--space-14);
--cat-tile-icon: 28px;
--radius-cat-tile: 14px;
--catalog-top: 64px;
--catalog-bottom: 96px;
--catalog-cols-gap: var(--space-32);
--catalog-aside: 320px;
--catalog-rows-gap: var(--space-32);
--filters-padding: 23px;
--filters-group-py: var(--space-16);
--filters-group-gap: var(--space-12);
--filters-option-gap: var(--space-6);
--filters-option-py: var(--space-4);
--filters-box: 18px;
--filters-box-gap: var(--space-10);
--filters-sub-indent: var(--space-8);
--filters-sub-gap: var(--space-14);
--radius-filters: 18px;
--radius-filters-box: 6px;
--results-gap: var(--space-24);
--results-bar-gap: var(--space-12);
--select-padding: 11px 14px 11px 16px;
--radius-select: 12px;
--chip-padding: 8px 12px 8px 14px;
--chip-gap: var(--space-8);
--radius-filter-chip: 10px;
--grid-gap: var(--space-24);
--product-pad: var(--space-16);
--catalog-card-gap: var(--space-14);
--product-photo-h: 226px;
--product-photo-pad: 20px;
--product-media-bg: linear-gradient(142deg, #f9fbfe 0%, #e1ecf8 71.429%);
--product-badge-padding: 5px 10px;
--product-mod-padding: 5px 9px;
--radius-product-card: 18px;
--radius-product-media: 12px;
--radius-product-badge: 8px;
--helper-padding: 44px 48px;
--helper-gap: var(--space-14);
--helper-bg: linear-gradient(to right, #eaf2fb 0%, #f8fbfe 100%);
--radius-helper: 24px;
--stub-py: 180px;
--stub-text: 760px;
--page-banner-lead-on-dark: #edf5fc;
--lineup-gap: var(--space-32);
--lineup-media-ratio: 662 / 340;
--lineup-body-padding: 32px 40px 40px;
--lineup-body-gap: var(--space-16);
--usage-row-backup: 826px;
--usage-row-solar: 604px;
--usage-panel-py: var(--space-48);
--usage-panel-inner: var(--space-80);
--panel-outer-edge: max(var(--container-padding), calc(100% - var(--container) / 2));
--usage-gap: var(--space-20);
--chain-padding: 44px 40px;
--chain-gap: 28px;
--chain-node: 200px;
--chain-arrow: 70px;
--chain-visual: 176px;
--chain-photo-width: 184px;
--chain-photo-height: 160px;
--chain-node-gap: 18px;
--chain-caption-padding: var(--space-16);
--chain-caption-gap: var(--space-4);
--chain-media: 200px;
--monitoring-head: 900px;
--monitoring-text: 720px;
--monitoring-gap: var(--space-40);
--monitoring-text-gap: var(--space-14);
--monitoring-decor-bleed: -58px;
--monitoring-decor-width: 64.24%;
--monitoring-text-end: calc(max(var(--container-padding), (100% - var(--container)) / 2) + var(--monitoring-text));
--monitoring-veil-gap: 40px;
--monitoring-veil-fade: 424px;
--monitoring-photo-stacked: 420px;
--gradient-objects: radial-gradient(56.8% 79.2% at 35.9% 14.1%, #1766b8 0%, #0a458c 55%, #083671 77.5%, #052657 100%);
--objects-gap: var(--space-60);
--objects-head-title: 740px;
--objects-head-note: 440px;
--objects-cols: 4;
--objects-card-gap: var(--space-24);
--objects-card-padding: var(--space-24);
--objects-card-inner-gap: 18px;
--objects-badge: 56px;
--objects-icon: 30px;
--objects-card-bg: rgb(255 255 255 / 0.09);
--objects-card-border: rgb(255 255 255 / 0.2);
--objects-badge-bg: rgb(255 255 255 / 0.16);
--objects-note-color: rgb(255 255 255 / 0.75);
--objects-eyebrow-dot: rgb(255 255 255 / 0.9);
--radius-objects-card: 20px;
--radius-objects-badge: 16px;
--shadow-objects-card: 0 12px 32px rgb(3 18 51 / 0.18);
--blur-objects-card: 12px;
--selection-gap: var(--space-40);
--selection-head: 1128px;
--selection-text: 720px;
--selection-step-py: 18px;
--selection-step-gap: var(--space-20);
--selection-num: 34px;
--selection-divider: rgb(184 199 219 / 0.55);
--result-note-padding: 22px 28px 22px 26px;
--result-note-gap: 18px;
--result-note-bg: rgb(255 255 255 / 0.94);
--result-note-bar: 4px;
--selection-photo-width: 96.5625%;
--selection-photo-top: -7px;
--selection-photo-fade: calc((var(--selection-section-w) - var(--selection-text-end)) * 2);
--selection-section-w: calc(100% / 0.965625);
--selection-text-end: calc(max(var(--container-padding), (var(--selection-section-w) - var(--container)) / 2) + var(--selection-text));
--radius-result-note: 16px;
--radius-result-note-bar: 2px;
--shadow-result-note: 0 10px 28px rgb(15 38 77 / 0.1);
--selection-photo-stacked: 420px;
--scaling-card-padding: 48px;
--scaling-card-gap: var(--space-24);
--scaling-chip: 64px;
--scaling-glyph: 34px;
--scaling-item-padding: 16px 18px;
--scaling-item-gap: var(--space-12);
--scaling-item-width: 272px;
--scaling-check: 20px;
--product-page-top: 152px;
--product-page-bottom: 72px;
--product-page-gap: var(--space-28);
--product-cols-gap: var(--space-60);
--product-gallery-w: 52.94%;
--fs-product-title: 32px;   --lh-product-title: 42px;
--fs-product-lead: 18px;    --lh-product-lead: 24px;
--product-head-gap: var(--space-10);
--gallery-gap: var(--space-16);
--gallery-main-h: 600px;
--gallery-main-pad: var(--space-40);
--gallery-thumbs-gap: var(--space-14);
--gallery-thumb-h: 140px;
--gallery-thumb-pad: var(--space-12);
--gallery-media-bg: linear-gradient(137deg, #f1f7ff 3.04%, #dfecfd 71.3%);
--gallery-thumb-bar: 1.5px;
--radius-gallery-main: 22px;
--radius-gallery-thumb: 14px;
--lightbox-pad: var(--space-24);
--lightbox-max-w: 1200px;
--lightbox-nav: 48px;
--lightbox-backdrop: rgb(10 26 43 / 0.82);
--lightbox-control-bg: rgb(255 255 255 / 0.14);
--lightbox-control-hover: rgb(255 255 255 / 0.26);
--lightbox-control-border: rgb(255 255 255 / 0.4);
--product-mods-gap: var(--space-10);
--product-chips-gap: var(--space-8);
--ask-padding: 22px 24px;
--ask-gap: var(--space-16);
--radius-ask: 18px;
--specs-row-py: 11px;
--product-nav-bg: var(--surface-blue-soft);
--product-nav-stick: calc(var(--header-offset-top) + var(--header-height));
--product-nav-h: 64px;
--z-product-nav: 50;
--product-nav-gap: 44px;
--product-nav-top: 22px;
--product-nav-bottom: 16px;
--product-nav-bar: 3px;
--product-nav-tab-px: 2px;
--fs-product-tab: 16px;  --lh-product-tab: 22px;
--product-tab-top: 100px;
--product-tab-bottom: 96px;
--product-tab-gap: var(--space-40);
--merits-gap: var(--space-24);
--merit-padding: 28px;
--merit-gap: var(--space-10);
--fs-merit-num: 13px;    --lh-merit-num: 18px;  --ls-merit-num: 0.52px;
--fs-merit-title: 19px;  --lh-merit-title: 26px;
--fs-merit-text: 15px;   --lh-merit-text: 23px;
--radius-merit: 18px;
--about-cols-gap: var(--space-60);
--about-text-gap: var(--space-20);
--fits-width: 420px;
--fits-padding: 26px;
--fits-gap: var(--space-14);
--fits-item-gap: var(--space-12);
--fits-icon: 32px;
--fs-fits-title: 17px;  --lh-fits-title: 24px;
--fs-fits-item: 15px;   --lh-fits-item: 22px;
--radius-fits: 18px;
--radius-fits-icon: 11px;
--mod-switch-gap: var(--space-14);
--mod-switch-chips-gap: var(--space-10);
--mod-chip-padding: 9px 16px;
--radius-mod-chip: 10px;
--spec-cols-gap: var(--space-32);
--spec-groups-gap: var(--space-28);
--spec-row-py: 12px;
--spec-value-w: 260px;
--fs-spec-group: 12px;  --lh-spec-group: 16px;  --ls-spec-group: 0.72px;
--fs-spec: 14px;        --lh-spec: 21px;
--compare-cell-px: 20px;
--compare-head-py: 16px;
--compare-row-py: 14px;
--compare-col: 180px;
--compare-param-col: 458px;
--fs-compare: 13px;  --lh-compare: 19px;
--radius-compare: 18px;
--docs-gap: var(--space-60);
--docs-list-gap: var(--space-20);
--doc-padding: var(--space-20);
--doc-gap: var(--space-16);
--doc-icon: 44px;
--fs-doc-title: 16px;  --lh-doc-title: 22px;
--fs-doc-text: 14px;   --lh-doc-text: 20px;
--fs-doc-meta: 13px;   --lh-doc-meta: 18px;
--fs-doc-ext: 11px;    --lh-doc-ext: 14px;
--radius-doc: 16px;
--radius-doc-icon: 12px;
--addons-grid-gap: var(--space-24);
--notfound-top: 216px;
--notfound-bottom: 120px;
--notfound-gap: var(--space-32);
--notfound-text: 640px;
--notfound-links-gap: var(--space-24);
--fs-notfound-code: 140px;  --lh-notfound-code: 1;  --ls-notfound-code: -0.04em;
--notfound-bg: var(--catalog-hero-bg);
--container: 1360px;
--container-padding: var(--space-32);
--grid-gutter: var(--space-32);
--grid-columns: 12;
--duration-fast: 160ms;
--duration-base: 250ms;
--duration-slow: 450ms;
--ease-out: ease-out;
}
@media (max-width: 1600px) {
:root {
--header-offset-inline: 24px;
}
}
@media (max-width: 1023px) {
:root {
--fs-card-title: 20px;      --lh-card-title: 26px;
--container-padding: var(--space-24);
--grid-gutter: var(--space-24);
--fs-h1: 40px;
--fs-h2: 32px;
--fs-h3: 28px; --lh-h3: 36px;
--fs-h4: 22px; --lh-h4: 30px;
--fs-stat: 36px; --lh-stat: 40px;
--fs-body-l: 18px; --lh-body-l: 28px;
--products-decor-width: 62%;
--photo-divider-height: 240px;
--kit-cta-padding: 36px 32px;
--kit-media-height-stacked: 240px;
--blog-hero-top: 140px;
--partners-hero-top: 140px;
--partners-hero-bottom: 80px;
--page-banner-height: 620px;
--lineup-gap: var(--space-24);
--usage-row-backup: 0;
--chain-padding: 32px 24px;
--chain-arrow: 40px;
--chain-media: 180px;
--monitoring-gap: var(--space-32);
--chain-gap: 24px;
--scaling-card-padding: 36px;
--scaling-item-width: 100%;
--usage-row-solar: 0;
--usage-panel-py: var(--space-64);
--usage-panel-inner: var(--space-48);
--usage-photo-stacked: 420px;
--lineup-body-padding: 28px 28px 32px;
--page-banner-top: 140px;
--page-banner-bottom: 60px;
--audience-media-height: 200px;
--benefit-padding: 30px 26px;
--matching-gap: var(--space-40);
--support-gap: var(--space-48);
--equipment-gap: var(--space-24);
--equipment-body-padding: 20px 10px 24px;
--fs-equipment-title: 18px; --lh-equipment-title: 26px;
--support-content-gap: var(--space-24);
--fs-support-lead: 17px;  --lh-support-lead: 28px;
--fs-support-item: 17px;  --lh-support-item: 26px;
--param-height: 104px;
--param-padding: 18px 16px;
--param-icon: 44px;
--fs-param: 17px; --lh-param: 24px;
--benefit-gap: 20px;
--audience-body-padding: 24px 12px 28px;
--post-lead-media-height-stacked: 320px;
--partners-photo-height: 420px;
--article-hero-top: 140px;
--article-body-py: 80px;
--article-anchor-offset: 132px;
--fs-article-lead: 20px;    --lh-article-lead: 32px;
--fs-article-h2: 28px;      --lh-article-h2: 38px;
--legal-hero-top: 140px;
--legal-hero-bottom: 48px;
--contacts-banner-height: 480px;
--contacts-text-top: 150px;
--contacts-card-overlap: 72px;
--contact-card-padding: 32px;
--map-height: 400px;
--map-panel-offset: 24px;
--map-panel-padding: 18px 22px;
--map-panel-gap: 8px;
--fs-map-title: 20px;       --lh-map-title: 28px;
--form-card-padding: 36px;
--form-card-gap: 24px;
--modal-width: 560px;
--modal-panel-padding: 32px;
--modal-panel-gap: 20px;
--fs-modal-title: 26px;     --lh-modal-title: 34px;
--warranty-padding: 32px;
--fs-page-title: 42px;  --lh-page-title: 52px;
--fs-form-title: 30px;      --lh-form-title: 38px;
}
}
@media (max-width: 767px) {
:root {
--container-padding: var(--space-16);
--grid-gutter: var(--space-16);
--fs-h1: 34px;
--fs-h2: 28px;
--fs-h3: 24px; --lh-h3: 32px;
--fs-h4: 20px; --lh-h4: 28px;
--fs-stat: 32px; --lh-stat: 36px;
--fs-body-l: 17px; --lh-body-l: 28px;
--products-decor-width: 88%;
--slider-gap: var(--space-16);
--slider-item: 300px;
--photo-divider-height: 180px;
--kit-padding: 20px 24px;
--scenario-padding: 24px;
--scenario-width: 280px;
--cta-photo-height: 300px;
--kit-media-height-stacked: 300px;
--blog-hero-top: 120px;
--partners-hero-top: 120px;
--partners-hero-bottom: 56px;
--page-banner-height: 0;
--lineup-gap: var(--space-16);
--usage-panel-py: var(--space-48);
--usage-photo-stacked: 280px;
--chain-padding: 24px 16px;
--chain-arrow: 28px;
--chain-media: 120px;
--monitoring-photo-stacked: 280px;
--monitoring-gap: var(--space-24);
--chain-visual: 140px;
--chain-photo-height: 124px;
--scaling-card-padding: 24px;
--scaling-chip: 56px;
--scaling-glyph: 30px;
--usage-gap: var(--space-16);
--lineup-body-padding: 24px 20px 28px;
--lineup-body-gap: var(--space-12);
--page-banner-top: 120px;
--page-banner-bottom: 56px;
--audience-media-height: 180px;
--benefit-padding: 26px 22px;
--matching-gap: var(--space-32);
--support-gap: var(--space-32);
--equipment-gap: var(--space-16);
--faq-card-padding: 8px 20px;
--faq-card-item-py: 22px;
--support-content-gap: var(--space-20);
--support-photo-stacked: 280px;
--support-check-size: 28px;
--support-item-py: var(--space-12);
--support-note-padding: 18px 20px;
--matching-head-gap: 14px;
--param-height: auto;
--param-padding: 16px;
--param-icon: 40px;
--param-gap: var(--space-12);
--benefit-gap: 16px;
--benefit-list-gap: 12px;
--audience-body-padding: 20px 10px 24px;
--partners-hero-photo-stacked: 280px;
--post-lead-media-height-stacked: 240px;
--fs-post-lead-title: 26px;
--lh-post-lead-title: 34px;
--partners-photo-height: 320px;
--kit-cta-padding: 28px 24px;
--kit-cta-photo-width: 100%;
--article-hero-top: 120px;
--article-hero-media-min: 200px;
--legal-hero-top: 120px;
--legal-hero-bottom: 32px;
--contacts-banner-height: 420px;
--contacts-text-top: 120px;
--contact-card-padding: 28px 24px;
--map-height: 320px;
--map-panel-offset: 12px;
--map-panel-padding: 14px 16px;
--map-panel-gap: 6px;
--fs-map-title: 18px;       --lh-map-title: 26px;
--form-card-padding: 24px;
--form-card-gap: 20px;
--form-gap: 12px;
--modal-gutter: 12px;
--modal-panel-padding: 24px;
--modal-panel-gap: 16px;
--modal-close-size: 36px;
--fs-modal-title: 22px;     --lh-modal-title: 30px;
--field-height: 52px;
--field-padding: 16px;
--textarea-height: 132px;
--fs-field: 16px;           --lh-field: 22px;
--warranty-padding: 24px;
--fs-page-title: 34px;  --lh-page-title: 42px;
--fs-form-title: 26px;      --lh-form-title: 34px;
--article-body-py: 56px;
--article-anchor-offset: 96px;
--article-section-gap: 40px;
--article-block-gap: 24px;
--help-card-padding-wide: 24px;
--article-row-padding: 12px 16px 12px 12px;
--fs-article-lead: 18px;    --lh-article-lead: 30px;
--fs-article-h2: 24px;      --lh-article-h2: 32px;
--fs-article-h3: 20px;      --lh-article-h3: 28px;
--fs-article-body: 17px;    --lh-article-body: 28px;
--fs-faq-question: 18px;    --lh-faq-question: 26px;
--header-height: 60px;
--header-offset-top: 12px;
--header-offset-inline: 12px;
--header-padding: 0 5px 0 15px;
--header-toggle-size: 48px;
--radius-header: 20px;
--logo-width: 90px;
--logo-height: 36px;
}
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../assets/fonts/manrope-cyrillic-wght-normal.woff2?v=91b0bf33") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../assets/fonts/manrope-latin-ext-wght-normal.woff2?v=f50fbb39") 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../assets/fonts/manrope-latin-wght-normal.woff2?v=dd32c9fd") 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;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ul, ol {
margin: 0;
}
:where(ul[class], ol[class]) {
padding: 0;
list-style: none;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
a {
color: inherit;
text-decoration: none;
}
table {
border-collapse: collapse;
}
[hidden] {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
font-family: var(--font-base);
font-size: var(--fs-body-s);
font-weight: var(--fw-regular);
line-height: var(--lh-body-s);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-weight: var(--fw-bold);
overflow-wrap: break-word;
}
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
::selection {
color: var(--surface-white);
background-color: var(--brand-500);
}
.typo-h1 {
font-size: var(--fs-h1);
font-weight: var(--fw-extrabold);
line-height: var(--lh-h1);
letter-spacing: var(--ls-h1);
}
.typo-h2 {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
}
.typo-h3 {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
letter-spacing: var(--ls-h3);
}
.typo-h4 {
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: var(--lh-h4);
letter-spacing: var(--ls-h4);
}
.typo-stat {
font-size: var(--fs-stat);
font-weight: var(--fw-extrabold);
line-height: var(--lh-stat);
letter-spacing: var(--ls-stat);
}
.typo-body-l {
font-size: var(--fs-body-l);
font-weight: var(--fw-regular);
line-height: var(--lh-body-l);
}
.typo-body-m {
font-size: var(--fs-body-m);
font-weight: var(--fw-regular);
line-height: var(--lh-body-m);
}
.typo-body-s {
font-size: var(--fs-body-s);
font-weight: var(--fw-regular);
line-height: var(--lh-body-s);
}
.typo-nav {
font-size: var(--fs-nav);
font-weight: var(--fw-medium);
line-height: var(--lh-nav);
}
.typo-button-l {
font-size: var(--fs-button-l);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-l);
}
.typo-button-m {
font-size: var(--fs-button-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-m);
}
.typo-eyebrow {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
line-height: var(--lh-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
}
.typo-caption {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.text-muted {
color: var(--color-text-muted);
}
.container {
width: 100%;
max-width: calc(var(--container) + var(--container-padding) * 2);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.site-header {
position: fixed;
top: var(--header-offset-top);
left: 50%;
z-index: 100;
width: min(var(--header-max-width), 100% - var(--header-offset-inline) * 2);
transform: translateX(-50%);
}
.icon {
flex-shrink: 0;
width: var(--icon-size);
height: var(--icon-size);
fill: none;
stroke: currentColor;
}
.icon--solid {
fill: currentColor;
stroke: none;
}
.icon-sprite {
display: none;
}
.button {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--button-l-gap);
padding: var(--button-l-padding);
overflow: hidden;
font-size: var(--fs-button-l);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-l);
white-space: nowrap;
border-radius: var(--radius-button-l);
isolation: isolate;
transition: box-shadow var(--duration-base) var(--ease-out);
}
.button--m {
gap: var(--button-m-gap);
padding: var(--button-m-padding);
font-size: var(--fs-button-m);
line-height: var(--lh-button-m);
}
.button--s {
gap: var(--button-s-gap);
padding: var(--button-s-padding);
font-size: var(--fs-button-s);
line-height: var(--lh-button-s);
}
.button__chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--button-chip-size);
height: var(--button-chip-size);
border-radius: var(--radius-round);
transition: background-color var(--duration-fast) var(--ease-out);
}
.button--primary {
color: var(--surface-white);
background: var(--gradient-button-blue);
box-shadow: var(--shadow-button);
}
.button--primary::before,
.button--primary::after {
content: "";
position: absolute;
pointer-events: none;
}
.button--primary::before {
inset: 0;
z-index: -1;
background: var(--gradient-button-blue-hover);
opacity: 0;
transition: opacity var(--duration-base) var(--ease-out);
}
.button--primary::after {
inset-block: 0;
left: calc(var(--button-shine-width) * -1);
width: var(--button-shine-width);
background: var(--button-shine);
transition: left var(--duration-slow) var(--ease-out);
}
.button--primary:hover {
box-shadow: var(--shadow-button-hover);
}
.button--primary:hover::before {
opacity: 1;
}
.button--primary:hover::after {
left: 100%;
}
.button--primary:hover .button__chip {
background-color: var(--button-chip-hover-bg);
}
.button--secondary {
color: var(--ink-800);
background: var(--glass-white-frost);
box-shadow: inset 0 0 0 1px var(--glass-border), var(--shadow-soft);
backdrop-filter: blur(var(--blur-button));
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.button--secondary .button__chip {
color: var(--brand-500);
background-color: var(--brand-50);
}
.button--secondary:hover {
color: var(--brand-600);
background: var(--button-secondary-hover-bg);
box-shadow: inset 0 0 0 1px var(--brand-200), var(--shadow-button-secondary-hover);
}
.button--secondary:hover .button__chip {
color: var(--surface-white);
background-color: var(--brand-500);
}
.button--inverse {
color: var(--brand-ink);
background-color: var(--surface-white);
box-shadow: var(--shadow-button-inverse);
transition:
background-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.button--inverse .button__chip {
color: var(--surface-white);
background-color: var(--brand-ink);
}
.button--inverse:hover {
background-color: var(--brand-50);
box-shadow: var(--shadow-button-inverse-hover);
}
.button--inverse:hover .icon {
transform: translateX(2px);
}
.button--inverse .icon {
transition: transform var(--duration-fast) var(--ease-out);
}
.button--outline {
--button-l-padding: var(--button-outline-padding);
--button-l-gap: var(--space-10);
font-size: var(--fs-button-m);
line-height: var(--lh-button-m);
color: var(--brand-500);
border: 1px solid var(--card-line-strong);
transition:
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.post:hover .button--outline,
.button--outline:hover {
color: var(--brand-600);
border-color: var(--brand-200);
background-color: var(--brand-50);
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-24);
min-height: var(--header-height);
padding: var(--header-padding);
border: 1px solid var(--glass-border);
border-radius: var(--radius-header);
background: var(--glass-white-frost);
box-shadow: var(--shadow-header);
backdrop-filter: blur(var(--blur-header));
}
.header__panel {
display: contents;
}
.header__logo {
display: flex;
flex-shrink: 0;
}
.header__logo-img {
width: var(--logo-width);
height: var(--logo-height);
object-fit: contain;
}
.header__list {
display: flex;
align-items: center;
gap: var(--space-6);
}
.header__link {
display: flex;
align-items: center;
padding: var(--nav-item-padding);
font-size: var(--fs-nav);
font-weight: var(--fw-medium);
line-height: var(--lh-nav);
color: var(--ink-800);
white-space: nowrap;
border: 1px solid transparent;
border-radius: var(--radius-button);
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.header__link:hover,
.header__link[aria-current] {
color: var(--brand-600);
border-color: var(--nav-hover-border);
background-color: var(--nav-hover-bg);
box-shadow: var(--inset-highlight);
backdrop-filter: blur(var(--blur-nav));
}
.header__cta {
flex-shrink: 0;
}
.header__toggle {
display: none;
align-items: center;
justify-content: center;
width: var(--header-toggle-size);
height: var(--header-toggle-size);
color: var(--ink-800);
border: 1px solid var(--glass-border);
border-radius: var(--radius-round);
background: var(--glass-white-frost);
box-shadow: var(--shadow-icon-button);
transition:
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.header__toggle:hover {
border-color: var(--brand-200);
background: var(--brand-50);
box-shadow: var(--shadow-icon-button-hover);
}
.header__toggle-icon--close,
.header--open .header__toggle-icon--menu {
display: none;
}
.header--open .header__toggle-icon--close {
display: block;
}
@media (max-width: 1240px) {
.header {
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-rows: calc(var(--header-height) - 2px) minmax(0, 0fr);
grid-template-areas:
"logo cta toggle"
"panel panel panel";
column-gap: var(--header-panel-gap);
row-gap: 0;
align-items: center;
overflow: hidden;
transition: grid-template-rows var(--duration-base) var(--ease-out);
}
.header--open {
grid-template-rows: calc(var(--header-height) - 2px) minmax(0, 1fr);
}
.header__logo {
grid-area: logo;
}
.header__cta {
--button-m-padding: var(--button-compact-padding);
--button-chip-size: var(--button-compact-chip-size);
grid-area: cta;
}
.header__toggle {
display: flex;
grid-area: toggle;
}
.header__nav {
grid-area: panel;
align-self: stretch;
min-height: 0;
max-height: calc(100dvh - var(--header-offset-top) * 2 - var(--header-height));
overflow-y: auto;
visibility: hidden;
opacity: 0;
transition:
opacity var(--duration-base) var(--ease-out),
visibility var(--duration-base) var(--ease-out);
}
.header--open .header__nav {
visibility: visible;
opacity: 1;
}
.header__list {
flex-direction: column;
align-items: stretch;
gap: var(--space-4);
padding-block: var(--space-8) var(--space-16);
border-top: 1px solid var(--ink-100);
}
.header__link {
padding: var(--space-12) var(--space-16);
}
}
@media (max-width: 767px) {
.header {
grid-template-columns: 1fr auto;
grid-template-areas:
"logo toggle"
"panel panel";
}
.header__panel {
display: block;
grid-area: panel;
align-self: stretch;
min-height: 0;
overflow: hidden;
visibility: hidden;
opacity: 0;
transition:
opacity var(--duration-base) var(--ease-out),
visibility var(--duration-base) var(--ease-out);
}
.header--open .header__panel {
visibility: visible;
opacity: 1;
}
.header__nav {
grid-area: auto;
max-height: calc(100dvh - var(--header-offset-top) * 2 - var(--header-height) - var(--space-96));
visibility: inherit;
opacity: 1;
transition: none;
}
.header__cta {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: var(--space-16);
}
}
.footer {
padding-block: var(--space-120) var(--footer-padding-bottom);
color: var(--footer-text);
background-color: var(--surface-footer);
}
.footer__top {
display: grid;
grid-template-columns: var(--footer-brand-column) repeat(3, var(--footer-column));
justify-content: space-between;
gap: var(--space-40);
padding-bottom: var(--space-56);
}
.footer__brand {
display: flex;
flex-direction: column;
gap: var(--space-16);
align-items: flex-start;
}
.footer__logo {
display: flex;
}
.footer__logo-img {
width: var(--logo-width);
height: var(--logo-height);
object-fit: contain;
}
.footer__about {
color: var(--footer-muted);
}
.footer__column {
display: flex;
flex-direction: column;
gap: var(--space-16);
align-items: flex-start;
}
.footer__heading {
color: var(--footer-subtle);
}
.footer__list {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.footer__link {
transition: color var(--duration-fast) var(--ease-out);
}
.footer__link:hover {
color: var(--footer-link-hover);
}
.footer__bottom {
display: flex;
flex-wrap: wrap;
gap: var(--space-16) var(--space-28);
align-items: center;
justify-content: space-between;
padding-top: var(--footer-divider-gap);
border-top: 1px solid var(--footer-divider);
}
.footer__copyright {
color: var(--footer-subtle);
}
.footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-16) var(--space-28);
}
@media (max-width: 1280px) {
.footer__top {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-32) var(--space-40);
}
.footer__brand {
grid-column: 1 / -1;
max-width: var(--footer-brand-column);
}
.footer__column,
.footer__list {
gap: var(--space-12);
}
}
@media (max-width: 1023px) {
.footer {
padding-block: var(--space-80);
}
}
@media (max-width: 767px) {
.footer {
padding-block: var(--space-56);
}
.footer__top {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-24);
padding-bottom: var(--space-40);
}
.footer__bottom {
flex-direction: column;
align-items: flex-start;
}
.footer__list {
gap: 0;
}
.footer__legal {
row-gap: 0;
}
.footer__link {
display: inline-block;
padding-block: 11px;
}
}
.stats {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-40);
padding: 31px 55px;
border: 1px solid var(--glass-panel-border);
border-radius: var(--radius-card);
background: var(--glass-panel);
box-shadow: var(--shadow-glass-panel);
backdrop-filter: blur(var(--blur-header));
}
.stats__item {
display: flex;
gap: var(--space-20);
align-items: center;
}
.stats__divider {
width: 1px;
height: var(--stat-icon-size);
background-color: var(--ink-200);
}
.stats__icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--stat-icon-size);
height: var(--stat-icon-size);
border-radius: var(--radius-round);
background-color: var(--surface-white);
box-shadow: var(--shadow-soft);
}
.stats__text {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.stats__value {
background: var(--gradient-stat-number);
background-clip: text;
color: transparent;
}
.stats__label {
color: var(--ink-600);
}
@media (max-width: 1360px) {
.stats {
gap: var(--space-32);
padding: var(--space-24) var(--space-32);
}
.stats__item {
gap: var(--space-16);
}
}
@media (max-width: 1280px) {
.stats {
border-color: var(--ink-200);
background: var(--surface-white);
box-shadow: var(--shadow-card);
backdrop-filter: none;
}
.stats__icon {
background-color: var(--brand-50);
box-shadow: none;
}
}
@media (max-width: 1023px) {
.stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-24) var(--space-32);
}
.stats__divider {
display: none;
}
}
@media (max-width: 767px) {
.stats {
grid-template-columns: minmax(0, 1fr);
padding: var(--space-24);
}
}
.eyebrow {
display: flex;
align-items: flex-start;
gap: var(--eyebrow-gap);
color: var(--brand-500);
}
.eyebrow::before {
content: "";
flex-shrink: 0;
width: var(--eyebrow-dot-size);
height: var(--eyebrow-dot-size);
margin-top: calc((1lh - var(--eyebrow-dot-size)) / 2);
background-color: var(--eyebrow-dot);
}
.eyebrow--on-dark {
color: var(--eyebrow-on-dark);
}
.link-text {
display: inline-flex;
gap: var(--space-12);
align-items: center;
padding-block: var(--space-6);
font-size: var(--fs-button-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-m);
color: var(--brand-500);
transition: color var(--duration-fast) var(--ease-out);
}
.link-text__chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--link-chip-size);
height: var(--link-chip-size);
border-radius: var(--radius-round);
background-color: var(--brand-50);
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.link-text:hover {
color: var(--brand-700);
}
.link-text:hover .link-text__chip {
color: var(--surface-white);
background-color: var(--brand-500);
box-shadow: 0 3px 8px -2px rgb(1 93 185 / 0.35);
}
.badge {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--badge-padding);
border: 1px solid var(--glass-border);
border-radius: var(--radius-media);
background: var(--glass-white-frost);
box-shadow: var(--shadow-badge);
backdrop-filter: blur(var(--blur-badge));
}
.badge__value {
color: var(--brand-700);
}
.badge__label {
color: var(--ink-500);
}
.tag {
display: inline-flex;
align-items: center;
height: var(--tag-height);
padding: var(--tag-padding);
font-size: var(--fs-tag);
line-height: var(--lh-body-s);
color: var(--tag-text);
border: 1px solid var(--tag-border);
border-radius: var(--radius-round);
background-color: var(--tag-bg);
}
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-12);
}
.breadcrumbs__item {
display: flex;
align-items: center;
gap: var(--space-12);
font-size: var(--fs-nav);
font-weight: var(--fw-medium);
line-height: var(--lh-nav);
}
.breadcrumbs__item::before {
content: "/";
color: var(--article-sep);
}
.breadcrumbs__item:first-child::before {
content: none;
}
.breadcrumbs__link {
color: var(--article-muted);
transition: color var(--duration-fast) var(--ease-out);
}
.breadcrumbs__link:hover {
color: var(--brand-500);
}
.breadcrumbs__current {
color: var(--ink-title);
}
.contact-card {
display: flex;
flex-wrap: wrap;
gap: var(--contact-card-gap);
padding: var(--contact-card-padding);
border-radius: var(--radius-panel);
background-color: var(--surface-white);
box-shadow: var(--shadow-contact-card);
}
.contact-card__item {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: var(--space-16);
min-width: 0;
}
.contact-card__head {
display: flex;
gap: var(--space-12);
align-items: center;
}
.contact-card__badge {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--contact-badge);
height: var(--contact-badge);
color: var(--brand-500);
border-radius: var(--radius-round);
background-color: var(--brand-50);
}
.contact-card__label {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
line-height: var(--lh-eyebrow);
letter-spacing: var(--ls-eyebrow);
color: var(--brand-500);
text-transform: uppercase;
}
.contact-card__values {
display: flex;
flex-direction: column;
gap: var(--space-6);
font-size: var(--fs-body-m);
line-height: var(--lh-body-m);
color: var(--ink-900);
font-style: normal;
}
.contact-card__link {
font-weight: var(--fw-semibold);
transition: color var(--duration-fast) var(--ease-out);
}
.contact-card__link:hover {
color: var(--brand-500);
}
@media (max-width: 1279px) {
.contact-card__item {
flex: 1 1 calc(50% - var(--contact-card-gap));
}
}
@media (max-width: 767px) {
.contact-card__values {
gap: 0;
}
.contact-card__link {
padding-block: var(--space-8);
}
}
@media (max-width: 599px) {
.contact-card {
gap: var(--space-24);
}
.contact-card__item {
flex: 1 1 100%;
}
}
.cta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
min-height: var(--cta-height);
}
.cta__media {
overflow: hidden;
}
.cta__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta__panel {
position: relative;
display: flex;
align-items: flex-start;
padding: var(--cta-panel-padding);
overflow: hidden;
background: var(--gradient-cta-panel);
isolation: isolate;
}
.cta__blob {
position: absolute;
z-index: -1;
max-width: none;
pointer-events: none;
}
.cta__blob--sky {
top: -64.43%;
left: -46.88%;
width: 118.75%;
height: 134.29%;
}
.cta__blob--teal {
top: 31.43%;
left: 29.06%;
width: 110.42%;
height: 125.71%;
}
.cta__blob--deep {
top: 40%;
left: 8.33%;
width: 114.58%;
height: 131.43%;
}
.cta__content {
display: flex;
flex-direction: column;
gap: var(--space-32);
max-width: var(--cta-content);
}
.cta__heading {
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.cta__head {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.cta__title {
color: var(--surface-white);
}
.cta__text {
color: var(--cta-text);
}
.cta__actions {
display: flex;
flex-direction: column;
gap: var(--space-24);
align-items: flex-start;
}
.cta__buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
}
.cta__button {
--button-l-padding: 20px 26px 20px 32px;
--button-l-gap: var(--space-12);
}
.cta__tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-12);
}
@media (max-width: 1023px) {
.cta {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
.cta__media {
height: var(--cta-photo-height);
}
.cta__panel {
padding: var(--space-64) var(--space-48);
}
}
@media (max-width: 767px) {
.cta__panel {
padding: var(--space-48) var(--space-24);
}
.cta__button {
width: 100%;
justify-content: space-between;
}
}
.post {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: var(--post-padding);
overflow: hidden;
border: 1px solid var(--card-line);
border-radius: var(--radius-post);
background-color: var(--surface-white);
box-shadow: var(--shadow-card-soft);
transition:
transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.post:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-lift);
}
.post__media {
flex-shrink: 0;
height: var(--post-media-height);
overflow: hidden;
border-radius: var(--radius-post-media);
background-color: var(--post-media-bg);
}
.post__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.post:hover .post__img {
transform: scale(1.03);
}
.post__body {
display: flex;
flex-direction: column;
gap: var(--space-10);
flex: 1 1 auto;
padding: var(--post-body-padding);
}
.post__date {
font-size: var(--fs-body-s);
font-weight: var(--fw-medium);
line-height: var(--lh-button-m);
color: var(--post-date);
}
.post__title {
font-size: var(--fs-product-title);
font-weight: var(--fw-bold);
line-height: var(--lh-post-title);
color: var(--ink-title);
}
.post__link {
transition: color var(--duration-fast) var(--ease-out);
}
.post__link::after {
content: "";
position: absolute;
inset: 0;
}
.post:hover .post__link {
color: var(--brand-500);
}
.post__excerpt {
color: var(--ink-700);
}
.post__actions {
margin-top: auto;
padding-top: var(--space-12);
}
.post--lead {
flex-direction: row;
gap: var(--post-lead-gap);
align-items: center;
padding: var(--post-lead-padding);
border-radius: var(--radius-post-lead);
}
.post--lead .post__media {
width: var(--post-lead-media-width);
height: auto;
aspect-ratio: var(--post-lead-media-ratio);
border-radius: var(--radius-media);
}
.post--lead .post__body {
min-width: 0;
}
.post--lead .post__body {
gap: var(--space-20);
padding: 0;
}
.post--lead .post__title {
font-size: var(--fs-post-lead-title);
line-height: var(--lh-post-lead-title);
}
.post--lead .post__actions {
margin-top: 0;
padding-top: var(--space-8);
}
@media (max-width: 1023px) {
.post--lead {
flex-direction: column;
align-items: stretch;
padding: var(--post-padding);
border-radius: var(--radius-post);
}
.post--lead .post__media {
width: 100%;
height: var(--post-lead-media-height-stacked);
aspect-ratio: auto;
border-radius: var(--radius-post-media);
}
.post--lead .post__body {
padding: var(--post-body-padding);
}
}
.pagination {
display: flex;
gap: var(--space-12);
align-items: center;
justify-content: center;
}
.pagination__page,
.pagination__arrow {
display: flex;
align-items: center;
justify-content: center;
width: var(--pagination-size);
height: var(--pagination-size);
font-size: var(--fs-body-s);
font-weight: var(--fw-medium);
line-height: var(--lh-button-m);
border: 1px solid var(--card-line-strong);
border-radius: var(--radius-round);
background-color: var(--surface-white);
transition:
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.pagination__page {
color: var(--post-date);
}
.pagination__arrow {
color: var(--ink-title);
}
.pagination__page:hover,
.pagination__arrow:hover {
color: var(--brand-500);
border-color: var(--brand-200);
background-color: var(--brand-50);
}
.pagination__page--current {
font-weight: var(--fw-bold);
color: var(--surface-white);
border-color: transparent;
background-color: var(--brand-500);
}
.pagination__page--current:hover {
color: var(--surface-white);
border-color: transparent;
background-color: var(--brand-600);
}
.pagination__icon--prev {
transform: rotate(180deg);
}
.pagination__dots {
color: var(--post-date);
}
.article-row {
position: relative;
display: flex;
gap: var(--article-row-gap);
align-items: center;
height: 100%;
padding: var(--article-row-padding);
border: 1px solid var(--card-line);
border-radius: var(--radius-article-row);
background-color: var(--surface-white);
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.article-row:hover {
border-color: var(--brand-200);
box-shadow: var(--shadow-product);
}
.article-row__media {
flex-shrink: 0;
width: var(--article-row-media-width);
height: var(--article-row-media-height);
overflow: hidden;
border-radius: var(--radius-article-thumb);
background-color: var(--post-media-bg);
}
.article-row__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-row__body {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: var(--space-6);
min-width: 0;
}
.article-row__date {
font-size: var(--fs-body-s);
font-weight: var(--fw-medium);
line-height: var(--lh-article-row-date);
color: var(--post-date);
}
.article-row__title {
font-size: var(--fs-article-row-title);
font-weight: var(--fw-bold);
line-height: var(--lh-article-row-title);
color: var(--ink-title);
}
.article-row__link {
transition: color var(--duration-fast) var(--ease-out);
}
.article-row__link::after {
content: "";
position: absolute;
inset: 0;
}
.article-row:hover .article-row__link {
color: var(--brand-600);
}
.article-row__arrow {
flex-shrink: 0;
margin-left: auto;
color: var(--brand-500);
transition: transform var(--duration-fast) var(--ease-out);
}
.article-row:hover .article-row__arrow {
transform: translateX(3px);
}
.prose {
--prose-section-gap: var(--article-section-gap);
--prose-block-gap: var(--article-block-gap);
--prose-content-gap: var(--article-content-gap);
--prose-para-gap: var(--article-para-gap);
--prose-sub-gap: var(--article-sub-gap);
--prose-list-gap: var(--article-list-gap);
--prose-list-indent: var(--prose-list-indent-base);
--prose-h2-size: var(--fs-article-h2);
--prose-h2-line: var(--lh-article-h2);
--prose-h3-size: var(--fs-article-h3);
--prose-h3-line: var(--lh-article-h3);
--prose-h3-weight: var(--fw-bold);
--prose-heading-color: var(--ink-title);
font-size: var(--fs-article-body);
line-height: var(--lh-article-body);
color: var(--ink-prose);
}
.prose p,
.prose ul,
.prose ol,
.prose h3 {
margin-top: var(--prose-content-gap);
}
.prose h2 {
margin-top: var(--prose-section-gap);
}
.prose p + p {
margin-top: var(--prose-para-gap);
}
.prose h2 + * {
margin-top: var(--prose-block-gap);
}
.prose h3 + * {
margin-top: var(--prose-sub-gap);
}
.prose > :first-child {
margin-top: 0;
}
.prose h2 {
font-size: var(--prose-h2-size);
font-weight: var(--fw-bold);
line-height: var(--prose-h2-line);
color: var(--prose-heading-color);
scroll-margin-top: var(--article-anchor-offset);
}
.prose h3 {
font-size: var(--prose-h3-size);
font-weight: var(--prose-h3-weight);
line-height: var(--prose-h3-line);
color: var(--prose-heading-color);
}
.prose ul,
.prose ol {
padding-left: var(--prose-list-indent);
list-style: disc outside;
}
.prose ol {
list-style: decimal outside;
}
.prose li + li {
margin-top: var(--prose-list-gap);
}
.prose a {
color: var(--brand-500);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--duration-fast) var(--ease-out);
}
.prose a:hover {
color: var(--brand-700);
}
.prose .prose__more {
display: inline-flex;
gap: var(--space-8);
align-items: center;
font-weight: var(--fw-semibold);
line-height: var(--lh-article-link);
text-decoration: none;
}
.prose .prose__more .icon {
transition: transform var(--duration-fast) var(--ease-out);
}
.prose .prose__more:hover .icon {
transform: translateX(3px);
}
.prose .prose__action {
margin-top: var(--prose-content-gap);
line-height: var(--lh-article-link);
}
.prose--legal {
--prose-section-gap: var(--legal-section-gap);
--prose-block-gap: var(--space-16);
--prose-content-gap: var(--space-16);
--prose-para-gap: var(--space-16);
--prose-sub-gap: var(--space-16);
--prose-list-gap: var(--space-10);
--prose-list-indent: var(--legal-list-indent);
--prose-list-py: var(--legal-list-py);
--prose-h2-size: var(--fs-h3);
--prose-h2-line: var(--lh-h3);
--prose-h3-size: var(--fs-body-m);
--prose-h3-line: var(--lh-body-m);
--prose-h3-weight: var(--fw-semibold);
--prose-heading-color: var(--ink-900);
font-size: var(--fs-body-m);
line-height: var(--lh-body-m);
color: var(--ink-600);
}
.prose--legal ul,
.prose--legal ol {
padding-block: var(--prose-list-py);
list-style: none;
}
.prose--legal ul > li {
position: relative;
padding-left: var(--legal-marker-indent);
}
.prose--legal ul > li::before {
content: "—";
position: absolute;
left: 0;
width: var(--legal-marker-width);
color: var(--brand-500);
}
.prose--legal ol {
counter-reset: prose;
}
.prose--legal ol > li {
position: relative;
padding-left: var(--legal-number-indent);
counter-increment: prose;
}
.prose--legal ol > li::before {
content: counter(prose) ".";
position: absolute;
left: 0;
width: var(--legal-number-width);
color: var(--brand-500);
}
.prose--lead {
--prose-content-gap: var(--space-10);
--prose-para-gap: var(--space-10);
font-size: var(--fs-body-l);
line-height: var(--lh-body-l);
color: var(--prose-lead-color);
}
.toc {
padding-left: var(--toc-indent);
border-left: 1px solid var(--line-soft);
}
.toc__title {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
line-height: var(--lh-eyebrow);
letter-spacing: 0.08em;
color: var(--article-muted);
text-transform: uppercase;
}
.toc__list {
display: flex;
flex-direction: column;
gap: var(--toc-gap);
margin-top: var(--toc-gap);
}
.toc__link {
display: block;
font-size: var(--fs-toc-item);
font-weight: var(--fw-medium);
line-height: var(--lh-toc-item);
color: var(--article-muted);
transition: color var(--duration-fast) var(--ease-out);
}
.toc__link:hover,
.toc__link--current {
color: var(--brand-500);
}
.toc--card {
padding: var(--toc-card-padding);
border-left: 0;
border-radius: var(--radius-help-card);
background-color: var(--surface-soft);
}
.toc--card .toc__title {
color: var(--brand-500);
}
.toc--card .toc__list {
gap: var(--toc-card-gap);
margin-top: var(--toc-card-gap);
}
.toc--card .toc__link {
padding-block: var(--toc-item-py);
font-size: var(--fs-body-s);
font-weight: var(--fw-regular);
line-height: var(--lh-body-s);
color: var(--ink-700);
}
.toc--card .toc__link:hover,
.toc--card .toc__link--current {
color: var(--brand-500);
}
.legal-hero {
padding-block: var(--legal-hero-top) var(--legal-hero-bottom);
background-color: var(--surface-blue-soft);
}
.legal-hero__inner {
display: flex;
flex-direction: column;
gap: var(--space-20);
align-items: flex-start;
}
.legal-hero__title {
max-width: var(--legal-title-max);
}
.legal-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-8) var(--legal-meta-gap);
margin-top: var(--space-12);
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--ink-600);
}
.legal {
padding-block: var(--legal-py);
}
.legal__inner {
display: grid;
grid-template-columns: var(--legal-aside) minmax(0, var(--legal-measure));
gap: var(--legal-columns-gap);
align-items: start;
}
.legal__aside {
position: sticky;
top: var(--article-anchor-offset);
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.legal__text {
--prose-list-py: var(--space-4);
}
@media (max-width: 1279px) {
.legal__inner {
gap: var(--space-48);
}
}
@media (max-width: 1023px) {
.legal {
padding-block: var(--space-64) var(--space-80);
}
.legal__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-32);
}
.legal__aside {
position: static;
}
.toc--card .toc__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-32);
}
}
@media (max-width: 767px) {
.legal {
padding-block: var(--space-40) var(--space-56);
}
.toc--card .toc__list {
grid-template-columns: minmax(0, 1fr);
}
.toc--card .toc__link {
padding-block: var(--space-6);
}
}
.faq {
display: flex;
flex-direction: column;
gap: var(--article-block-gap);
scroll-margin-top: var(--article-anchor-offset);
}
.faq__title {
font-size: var(--fs-article-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-article-h2);
color: var(--ink-title);
}
.faq__item {
padding-block: var(--faq-item-py);
border-bottom: 1px solid var(--line-soft);
}
.faq__question {
display: flex;
gap: var(--faq-row-gap);
align-items: center;
width: 100%;
font-size: var(--fs-faq-question);
font-weight: var(--fw-bold);
line-height: var(--lh-faq-question);
color: var(--ink-title);
text-align: left;
transition: color var(--duration-fast) var(--ease-out);
}
.faq__question:hover {
color: var(--brand-600);
}
.faq__label {
flex: 1 1 0;
min-width: 0;
}
.faq__question::after {
content: "+";
flex-shrink: 0;
min-width: var(--faq-sign);
font-size: var(--fs-faq-sign);
font-weight: var(--fw-regular);
color: var(--brand-500);
text-align: center;
}
.faq__question[aria-expanded="true"]::after {
content: "−";
}
.faq__answer {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows var(--duration-base) var(--ease-out),
margin-top var(--duration-base) var(--ease-out),
opacity var(--duration-fast) var(--ease-out);
}
.faq__text {
overflow: hidden;
font-size: var(--fs-article-body);
line-height: var(--lh-article-body);
color: var(--ink-prose);
visibility: hidden;
transition: visibility 0s linear var(--duration-base);
}
.faq__item--open .faq__answer {
grid-template-rows: 1fr;
margin-top: var(--space-12);
opacity: 1;
}
.faq__item--open .faq__text {
visibility: visible;
transition-delay: 0s;
}
.faq__list--card {
--faq-item-py: var(--faq-card-item-py);
padding: var(--faq-card-padding);
border-radius: var(--radius-faq-card);
background-color: var(--surface-white);
}
.faq__list--card .faq__item:last-child {
border-bottom: 0;
}
.questions {
padding-block: var(--section-py);
background-color: var(--surface-mist);
}
.questions__inner {
display: flex;
flex-direction: column;
gap: var(--space-60);
}
.help-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-14);
padding: var(--help-card-padding);
border-radius: var(--radius-help-card);
background-color: var(--article-panel-bg);
}
.help-card__title {
font-size: var(--fs-category-title);
font-weight: var(--fw-bold);
line-height: var(--lh-body-s);
color: var(--ink-title);
}
.help-card__text {
color: var(--ink-700);
}
.help-card--wide {
padding: var(--help-card-padding-wide);
border-radius: var(--radius-help-card-wide);
}
.help-card--wide .help-card__title {
font-size: var(--fs-h4);
line-height: var(--lh-h4);
}
.help-card--wide .help-card__text {
font-size: var(--fs-article-body);
line-height: var(--lh-article-body);
}
.help-card--wide .help-card__action {
margin-top: var(--space-10);
}
@media (max-width: 767px) {
.help-card__action {
--button-l-padding: var(--button-compact-padding);
max-width: 100%;
white-space: normal;
}
}
.help-card--quiet {
gap: var(--space-12);
padding: var(--help-quiet-padding);
background-color: var(--surface-blue-soft);
}
.help-card--quiet .help-card__title {
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: var(--lh-h4);
letter-spacing: var(--ls-h4);
color: var(--ink-900);
}
.help-card--quiet .help-card__text {
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--ink-600);
}
.help-card__link {
font-size: var(--fs-body-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-m);
color: var(--brand-500);
transition: color var(--duration-fast) var(--ease-out);
}
.help-card__link:hover {
color: var(--brand-700);
}
.form {
display: flex;
flex-direction: column;
gap: var(--form-card-gap);
height: 100%;
padding: var(--form-card-padding);
border-radius: var(--radius-form-card);
background-color: var(--form-card-bg);
box-shadow: var(--shadow-form-card);
backdrop-filter: blur(var(--blur-form));
}
.form__head {
display: flex;
flex-direction: column;
gap: var(--form-head-gap);
}
.form__title {
font-size: var(--fs-form-title);
font-weight: var(--fw-bold);
line-height: var(--lh-form-title);
color: var(--ink-title);
}
.form__text {
font-size: var(--fs-form-text);
line-height: var(--lh-form-text);
color: var(--ink-700);
}
.form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--form-gap);
}
.form__grid--single {
grid-template-columns: minmax(0, 1fr);
}
.form__field--wide {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.form__control {
width: 100%;
height: var(--field-height);
padding-inline: var(--field-padding);
font-size: var(--fs-field);
line-height: var(--lh-field);
color: var(--ink-900);
border: 1px solid var(--field-border);
border-radius: var(--radius-field);
background-color: var(--surface-white);
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.form__control::placeholder {
color: var(--field-placeholder);
}
.form__control:hover {
border-color: var(--brand-200);
}
.form__control:focus {
outline: none;
border-color: var(--brand-400);
box-shadow: 0 0 0 3px var(--nav-hover-bg);
}
.form__control--area {
display: block;
flex: 1 1 auto;
min-height: var(--textarea-height);
height: auto;
padding-block: var(--space-20);
resize: vertical;
}
.form__control--invalid,
.form__control--invalid:hover {
border-color: var(--accent-red);
}
.form__control--invalid:focus {
box-shadow: 0 0 0 3px var(--form-error-ring);
}
.form__error {
display: block;
margin-top: var(--space-6);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--accent-red);
}
.form__error:empty {
display: none;
}
.form__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-20) var(--space-32);
align-items: center;
}
.form__consent-box {
flex: 1 1 auto;
min-width: 0;
}
.form__consent {
display: flex;
gap: var(--space-14);
align-items: flex-start;
font-size: var(--fs-body-s);
line-height: var(--lh-nav);
color: var(--ink-700);
cursor: pointer;
}
.form__checkbox {
flex-shrink: 0;
width: var(--checkbox-size);
height: var(--checkbox-size);
margin: calc((1lh - var(--checkbox-size)) / 2) 0 0;
accent-color: var(--brand-500);
border-radius: var(--radius-checkbox);
cursor: pointer;
}
.form__submit {
flex-shrink: 0;
justify-content: center;
width: var(--form-submit-width);
}
.form__status {
padding: var(--space-16) var(--space-20);
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--brand-700);
border-radius: var(--radius-field);
background-color: var(--brand-50);
}
.form__status--error {
color: var(--accent-red);
background-color: var(--form-error-bg);
}
@media (max-width: 767px) {
.form__head {
--form-head-gap: var(--space-6);
}
.form__control--area {
padding-block: var(--space-14);
}
.form__consent {
padding-block: var(--space-10);
}
}
@media (max-width: 599px) {
.form__grid {
grid-template-columns: minmax(0, 1fr);
}
.form__submit {
width: 100%;
}
}
.modal {
width: min(var(--modal-width), 100% - var(--modal-gutter) * 2);
max-width: none;
max-height: calc(100dvh - var(--modal-gutter) * 2);
padding: 0;
overflow: hidden;
color: var(--color-text);
border: 0;
border-radius: var(--radius-modal);
background-color: var(--surface-blue-soft);
box-shadow: var(--shadow-modal);
opacity: 0;
transform: translateY(var(--modal-rise)) scale(var(--modal-scale));
transition-property: opacity, transform, overlay, display;
transition-duration: var(--duration-base);
transition-timing-function: var(--ease-out);
transition-behavior: allow-discrete;
}
.modal[open] {
display: flex;
align-items: stretch;
opacity: 1;
transform: none;
}
@starting-style {
.modal[open] {
opacity: 0;
transform: translateY(var(--modal-rise)) scale(var(--modal-scale));
}
}
.modal::backdrop {
background-color: transparent;
transition-property: background-color, overlay, display;
transition-duration: var(--duration-base);
transition-timing-function: var(--ease-out);
transition-behavior: allow-discrete;
}
.modal[open]::backdrop {
background-color: var(--modal-backdrop);
}
@starting-style {
.modal[open]::backdrop {
background-color: transparent;
}
}
.modal__media {
flex-shrink: 0;
width: var(--modal-photo-width);
}
.modal__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.modal__panel {
--form-card-gap: var(--modal-panel-gap);
--form-head-gap: var(--space-8);
--form-gap: var(--space-16);
--form-submit-width: 100%;
--checkbox-size: 24px;
--fs-form-title: var(--fs-modal-title);
--lh-form-title: var(--lh-modal-title);
--fs-form-text: var(--fs-modal-text);
--lh-form-text: var(--lh-modal-text);
flex: 1 1 auto;
min-width: 0;
padding: var(--modal-panel-padding);
overflow-y: auto;
border-radius: 0;
background: var(--gradient-modal-panel);
box-shadow: none;
backdrop-filter: none;
}
.modal__head {
display: flex;
gap: var(--modal-head-gap);
align-items: flex-start;
}
.modal__close {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--modal-close-size);
height: var(--modal-close-size);
color: var(--modal-panel-text);
border-radius: var(--radius-modal-close);
background-color: var(--modal-close-bg);
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.modal__close:hover {
color: var(--ink-900);
background-color: var(--modal-close-bg-hover);
}
@media (max-width: 1023px) {
.modal__media {
display: none;
}
}
.section-head {
display: flex;
gap: var(--section-head-gap);
align-items: center;
}
.section-head__main {
display: flex;
flex-direction: column;
gap: var(--space-16);
width: var(--section-head-title);
}
.section-head__note {
width: var(--section-head-note);
padding-inline-start: var(--space-16);
border-inline-start: 4px solid var(--brand-400);
color: var(--ink-700);
}
.section-head--wide .section-head__main {
width: 100%;
}
.section-head--center .section-head__main {
width: 100%;
align-items: center;
text-align: center;
}
.section-head--stack {
flex-direction: column;
gap: var(--section-head-stack-gap);
align-items: flex-start;
}
.section-head--stack .section-head__main {
width: 100%;
}
.section-head--on-dark .section-head__note {
color: var(--section-head-note-on-dark);
border-inline-start-color: var(--section-head-rule-on-dark);
}
@media (max-width: 1280px) {
.section-head {
flex-direction: column;
gap: var(--space-24);
align-items: flex-start;
}
.section-head__main,
.section-head__note {
width: 100%;
}
}
.page-banner {
position: relative;
min-height: var(--page-banner-height);
padding-block: var(--page-banner-top) var(--page-banner-bottom);
overflow: hidden;
background-color: var(--page-banner-bg);
isolation: isolate;
}
.page-banner__photo {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: var(--page-banner-photo-pos);
}
.page-banner__veil {
position: absolute;
inset: 0;
z-index: -1;
background: var(--page-banner-veil);
pointer-events: none;
}
.page-banner__inner {
display: flex;
flex-direction: column;
gap: var(--space-24);
align-items: flex-start;
}
.page-banner__eyebrow {
color: var(--page-banner-eyebrow);
}
.page-banner__title,
.page-banner__lead {
max-width: var(--page-banner-text);
}
.page-banner__title {
font-size: var(--fs-page-title);
font-weight: var(--fw-extrabold);
line-height: var(--lh-page-title);
color: var(--page-banner-ink);
}
.page-banner__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
padding-top: var(--space-16);
}
.page-banner--dark {
--page-banner-bg: var(--ink-900);
--page-banner-ink: var(--surface-white);
--page-banner-eyebrow: var(--page-banner-eyebrow-on-dark);
--page-banner-lead: var(--page-banner-lead-on-dark);
--prose-lead-color: var(--page-banner-lead-on-dark);
--page-banner-veil: var(--page-banner-veil-dark);
}
@media (max-width: 1023px) {
.page-banner--dark {
--page-banner-veil: var(--page-banner-veil-dark-narrow);
}
}
@media (max-width: 767px) {
.page-banner__actions {
flex-direction: column;
align-items: flex-start;
gap: var(--space-12);
}
}
.check-list {
display: flex;
flex-direction: column;
gap: var(--check-list-gap);
padding-block: var(--check-list-py);
width: 100%;
}
.check-list--cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--check-list-col-gap);
}
.check-list__item {
display: flex;
gap: var(--check-list-gap);
align-items: flex-start;
color: var(--ink-900);
}
.check-list__icon {
flex-shrink: 0;
width: var(--check-list-icon);
height: var(--check-list-icon);
margin-top: calc((1lh - var(--check-list-icon)) / 2);
color: var(--brand-500);
}
@media (max-width: 599px) {
.check-list--cols {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--check-list-gap);
}
}
.result-note {
display: flex;
gap: var(--result-note-gap);
align-items: stretch;
width: 100%;
padding: var(--result-note-padding);
font-weight: var(--fw-semibold);
color: var(--ink-900);
border-radius: var(--radius-result-note);
background-color: var(--result-note-bg);
box-shadow: var(--shadow-result-note);
}
.result-note::before {
content: "";
flex-shrink: 0;
width: var(--result-note-bar);
border-radius: var(--radius-result-note-bar);
background-color: var(--brand-500);
}
.categories {
display: flex;
gap: var(--space-16);
height: var(--category-height);
}
.category {
position: relative;
display: flex;
flex-direction: column;
flex: 0 1 var(--category-collapsed);
overflow: hidden;
border-radius: var(--radius-card);
background-color: var(--ink-100);
box-shadow: var(--shadow-category);
transition: flex-basis var(--duration-slow) var(--ease-out);
}
.category--open {
flex-basis: var(--category-open);
background-color: var(--surface-white);
}
.category__media {
position: relative;
flex: 1 1 auto;
overflow: hidden;
background: var(--gradient-category-media);
}
.category--open .category__media {
flex: 0 0 var(--category-media);
}
.category__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 44%;
}
.category__media::after {
content: "";
position: absolute;
inset: auto 0 0;
height: var(--category-shade);
background: var(--gradient-category-shade);
transition: opacity var(--duration-base) var(--ease-out);
pointer-events: none;
}
.category--open .category__media::after {
opacity: 0;
}
.category__body {
position: absolute;
inset: var(--category-title-top) var(--space-32) auto;
display: flex;
flex-direction: column;
gap: var(--space-12);
color: var(--surface-white);
}
.category--open .category__body {
position: static;
justify-content: space-between;
flex: 1 1 auto;
gap: var(--space-24);
padding: var(--category-padding);
color: var(--color-text);
}
.category__title {
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: var(--lh-h4);
letter-spacing: var(--ls-h4);
}
.category:not(.category--open) .category__title {
max-width: 200px;
font-size: var(--fs-category-title);
line-height: 1.2;
}
.category__text,
.category__link {
display: none;
}
.category--open .category__text {
display: block;
color: var(--ink-500);
}
.category--open .category__link {
display: inline-flex;
}
.category__toggle {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding: var(--space-24);
}
.category--open .category__toggle {
display: none;
}
.category__chip {
display: flex;
align-items: center;
justify-content: center;
width: var(--category-chip);
height: var(--category-chip);
color: var(--brand-500);
border: 1px solid var(--glass-chip-border);
border-radius: var(--radius-media);
background: var(--glass-white-frost);
backdrop-filter: blur(var(--blur-chip));
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.category__toggle:hover .category__chip {
color: var(--surface-white);
background: var(--brand-500);
}
@media (max-width: 1280px) {
.categories {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-24);
height: auto;
}
.category {
min-height: var(--category-height);
}
.category__media {
flex: 0 0 var(--category-media);
}
.category__media::after,
.category__toggle {
display: none;
}
.category__body {
position: static;
flex: 1 1 auto;
justify-content: space-between;
gap: var(--space-24);
padding: var(--category-padding);
color: var(--color-text);
}
.category__text {
display: block;
color: var(--ink-500);
}
.category__link {
display: inline-flex;
}
.category,
.category--open {
background-color: var(--surface-white);
}
}
@media (max-width: 767px) {
.categories {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-16);
}
.category {
min-height: 0;
}
}
.solution {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: var(--solution-height);
padding-bottom: var(--solution-bottom);
overflow: hidden;
color: var(--surface-white);
background-color: var(--surface-solution);
isolation: isolate;
}
.solution__img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.solution::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--gradient-solution-shade);
pointer-events: none;
}
.solution__number {
position: absolute;
top: var(--solution-padding);
left: var(--solution-padding);
color: var(--solution-number);
}
.solution__body {
display: flex;
flex-direction: column;
gap: var(--space-16);
align-items: flex-start;
padding-inline: var(--solution-padding);
}
.solution__title {
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: var(--lh-h4);
letter-spacing: var(--ls-h4);
}
.solution__text {
font-weight: var(--fw-medium);
line-height: var(--lh-nav);
color: var(--solution-text);
}
.solution__cta,
.solution__circle {
opacity: 0;
transition: opacity var(--duration-base) var(--ease-out);
}
.solution:hover .solution__cta,
.solution:hover .solution__circle,
.solution:focus-within .solution__cta,
.solution:focus-within .solution__circle {
opacity: 1;
}
.solution__cta {
display: inline-flex;
gap: var(--space-10);
align-items: center;
padding: 14px 18px 14px 22px;
font-size: var(--fs-button-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-m);
color: var(--solution-cta-text);
border-radius: var(--radius-button-l);
background-color: var(--solution-cta-bg);
}
.solution__cta-arrow {
color: var(--brand-500);
}
.solution__circle {
position: absolute;
top: var(--solution-padding);
right: var(--solution-padding);
display: flex;
align-items: center;
justify-content: center;
width: var(--solution-circle);
height: var(--solution-circle);
border: 1px solid var(--solution-circle-border);
border-radius: var(--radius-round);
background-color: var(--solution-circle-bg);
}
.solution__link::after {
content: "";
position: absolute;
inset: 0;
}
@media (max-width: 1280px) {
.solution::before {
background: var(--gradient-solution-shade-strong);
}
.solution {
min-height: 560px;
padding-bottom: var(--space-32);
}
.solution {
--solution-padding: var(--space-32);
}
.solution__cta {
opacity: 1;
}
.solution__circle {
display: none;
}
}
@media (max-width: 767px) {
.solution {
--solution-padding: var(--space-24);
min-height: 480px;
}
}
.feature {
display: flex;
flex-direction: column;
gap: var(--space-20);
align-items: flex-start;
min-height: var(--feature-min-height);
padding: var(--feature-padding);
color: var(--surface-white);
border: 1px solid var(--feature-border);
border-radius: var(--radius-feature);
background-color: var(--feature-bg);
box-shadow: var(--shadow-feature);
backdrop-filter: blur(var(--blur-feature));
}
.feature__icon {
width: var(--feature-icon);
height: var(--feature-icon);
}
.feature__title {
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: var(--lh-h4);
letter-spacing: var(--ls-h4);
}
.feature__text {
color: var(--feature-text);
}
@media (max-width: 767px) {
.feature {
--feature-padding: var(--space-24);
min-height: 0;
gap: var(--space-16);
}
}
.product {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--product-border);
border-radius: var(--radius-product);
background-color: var(--surface-white);
box-shadow: var(--shadow-product);
transition:
transform var(--duration-base) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.product:hover {
transform: translateY(-6px);
border-color: var(--brand-300);
box-shadow: var(--shadow-product-hover);
}
.product__media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: var(--product-media);
overflow: hidden;
border-bottom: 1px solid var(--product-media-border);
}
.product__glow {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
}
.product__img {
position: relative;
max-height: 84%;
width: auto;
object-fit: contain;
transition: transform var(--duration-base) var(--ease-out);
}
.product:hover .product__img {
transform: scale(1.05);
}
.product__body {
display: flex;
flex-direction: column;
gap: var(--space-12);
flex: 1 1 auto;
padding: var(--product-padding);
}
.product__head {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.product__category {
color: var(--brand-500);
}
.product__title {
font-size: var(--fs-card-title);
font-weight: var(--fw-bold);
line-height: var(--lh-card-title);
color: var(--product-title);
}
.product__power {
font-size: var(--fs-body-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-m);
color: var(--product-power);
}
.product__specs {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding-top: var(--space-4);
color: var(--product-spec);
}
.product__spec {
display: flex;
gap: var(--space-10);
align-items: baseline;
}
.product__spec::before {
content: "";
flex-shrink: 0;
width: 5px;
height: 5px;
border-radius: var(--radius-round);
background-color: var(--brand-500);
}
.product__divider {
height: 1px;
margin-top: auto;
background-color: var(--product-border);
}
.product__link {
position: relative;
display: inline-flex;
gap: var(--space-8);
align-items: center;
padding-top: 2px;
font-size: var(--fs-button-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-m);
color: var(--brand-500);
transition: color var(--duration-fast) var(--ease-out);
}
.product__link:hover {
color: var(--brand-700);
}
@media (max-width: 767px) {
.product {
--product-padding: var(--space-20);
}
.product__link::after {
content: "";
position: absolute;
inset: -10px 0;
}
}
.product__price {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
align-items: baseline;
font-size: var(--fs-body-m);
font-weight: var(--fw-bold);
line-height: var(--lh-body-m);
color: var(--ink-900);
}
.product__price-old {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
color: var(--ink-400);
text-decoration: line-through;
}
.product__price--request {
font-size: var(--fs-body-s);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-s);
color: var(--ink-500);
}
.catalog-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--catalog-card-gap);
width: 100%;
padding: var(--product-pad);
border-radius: var(--radius-product-card);
background-color: var(--surface-white);
box-shadow:
inset 0 0 0 1px var(--ink-200),
var(--shadow-catalog-card);
transition:
transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.catalog-card:hover {
transform: translateY(-4px);
box-shadow:
inset 0 0 0 1px var(--brand-200),
var(--shadow-card-soft);
}
.catalog-card__media {
position: relative;
flex-shrink: 0;
height: var(--product-photo-h);
overflow: hidden;
border-radius: var(--radius-product-media);
background-image: var(--product-media-bg);
}
.catalog-card__photo {
width: 100%;
height: 100%;
padding: var(--product-photo-pad);
object-fit: contain;
}
.catalog-card__badge {
position: absolute;
top: var(--space-10);
left: var(--space-10);
display: flex;
gap: var(--space-6);
align-items: center;
padding: var(--product-badge-padding);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
line-height: var(--lh-badge);
color: var(--ink-800);
border-radius: var(--radius-product-badge);
background-color: var(--surface-white);
}
.catalog-card__badge::before {
content: "";
width: var(--space-6);
height: var(--space-6);
border-radius: var(--radius-round);
background-color: var(--ink-300);
}
.catalog-card__badge--in-stock::before {
background-color: var(--status-in-stock);
}
.catalog-card__info {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.catalog-card__kind {
font-size: var(--fs-overline);
font-weight: var(--fw-bold);
line-height: var(--lh-overline);
letter-spacing: var(--ls-overline);
color: var(--brand-500);
text-transform: uppercase;
}
.catalog-card__name {
font-size: var(--fs-body-s);
font-weight: var(--fw-semibold);
line-height: var(--lh-product-name);
color: var(--ink-900);
}
.catalog-card__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.catalog-card__mods {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.catalog-card__mods-title {
font-size: var(--fs-overline);
font-weight: var(--fw-bold);
line-height: var(--lh-mods-title);
letter-spacing: var(--ls-overline);
color: var(--ink-400);
text-transform: uppercase;
}
.catalog-card__mods-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
}
.catalog-card__mod {
padding: var(--product-mod-padding);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
line-height: var(--lh-badge);
color: var(--ink-700);
border: 1px solid var(--brand-200);
border-radius: var(--radius-product-badge);
background-color: var(--ink-100);
}
.catalog-card__specs {
display: flex;
flex-direction: column;
gap: var(--space-8);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
}
.catalog-card__spec {
display: flex;
gap: var(--space-12);
align-items: center;
justify-content: space-between;
}
.catalog-card__spec-name {
color: var(--ink-500);
}
.catalog-card__spec-value {
font-weight: var(--fw-semibold);
color: var(--ink-900);
}
.catalog-card__badge--out-of-stock::before {
background-color: var(--accent-red);
}
.catalog-card__mod-link {
position: relative;
z-index: 2;
color: inherit;
transition: color var(--duration-fast) var(--ease-out);
}
.catalog-card__mod-link:hover {
color: var(--brand-500);
}
.catalog-card__price {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
align-items: baseline;
margin-top: auto;
font-size: var(--fs-body-m);
font-weight: var(--fw-bold);
line-height: var(--lh-body-m);
color: var(--ink-900);
}
.catalog-card__price-old {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
color: var(--ink-400);
text-decoration: line-through;
}
.catalog-card__price--request {
font-size: var(--fs-body-s);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-s);
color: var(--ink-500);
}
.slider__viewport {
display: flex;
gap: var(--slider-gap);
padding-inline: var(--container-edge);
scroll-padding-inline: var(--container-edge);
-webkit-mask-image: linear-gradient(
to right,
transparent calc(var(--container-edge) - var(--slider-gap)),
#000 var(--container-edge)
);
mask-image: linear-gradient(
to right,
transparent calc(var(--container-edge) - var(--slider-gap)),
#000 var(--container-edge)
);
padding-block: var(--slider-pad-top) var(--slider-pad-bottom);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.slider__viewport::-webkit-scrollbar {
display: none;
}
.slider--inline {
display: flex;
flex-direction: column;
gap: var(--slider-inline-gap);
}
.slider--inline .slider__viewport {
padding-inline: 0;
scroll-padding-inline: 0;
-webkit-mask-image: none;
mask-image: none;
}
.slider__item {
flex: 0 0 var(--slider-item);
max-width: 100%;
scroll-snap-align: start;
}
.slider__controls {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--space-24);
align-items: center;
}
.slider__controls--simple {
grid-template-columns: 1fr auto;
}
.slider__bar {
width: min(var(--slider-bar), 100%);
height: 3px;
overflow: hidden;
border-radius: var(--radius-round);
background-color: var(--ink-200);
}
.slider__fill {
display: block;
width: 50%;
height: 100%;
border-radius: var(--radius-round);
background-color: var(--brand-500);
transition: width var(--duration-fast) linear, margin-left var(--duration-fast) linear;
}
.slider__arrows {
display: flex;
gap: var(--slider-arrow-gap);
justify-self: end;
}
.slider__arrow {
display: flex;
align-items: center;
justify-content: center;
width: var(--slider-arrow);
height: var(--slider-arrow);
color: var(--ink-700);
border: 1px solid var(--slider-arrow-border);
border-radius: var(--radius-round);
background-color: var(--surface-white);
transition:
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.slider__arrow:hover:not(:disabled) {
color: var(--surface-white);
border-color: var(--brand-500);
background-color: var(--brand-500);
}
.slider__arrow:disabled {
color: var(--ink-300);
cursor: default;
}
.slider__arrow--prev .icon {
transform: rotate(180deg);
}
@media (max-width: 767px) {
.slider__controls {
grid-template-columns: 1fr auto;
}
.slider__arrows {
gap: var(--space-12);
}
}
.kit {
display: flex;
height: 100%;
overflow: hidden;
border: 1px solid var(--kit-border);
border-radius: var(--radius-product);
background-color: var(--surface-white);
box-shadow: var(--shadow-product);
transition:
transform var(--duration-base) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.kit:hover {
transform: translateY(-6px);
border-color: var(--brand-300);
box-shadow: var(--shadow-product-hover);
}
.kit__media {
position: relative;
flex-shrink: 0;
width: var(--kit-media-width);
overflow: hidden;
background-color: var(--surface-white);
}
.kit__img {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--space-56) var(--space-16) var(--space-16);
object-fit: contain;
object-position: center;
transition: transform var(--duration-slow) var(--ease-out);
}
.kit:hover .kit__img {
transform: scale(1.04);
}
.kit__tag {
position: absolute;
top: var(--space-20);
left: var(--space-20);
padding: var(--kit-tag-padding);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
color: var(--brand-ink);
border-radius: var(--radius-round);
background-color: var(--brand-100);
}
.kit__body {
display: flex;
flex-direction: column;
gap: var(--space-14);
flex: 1 1 auto;
min-width: 0;
padding: var(--kit-padding);
}
.kit__title {
font-size: var(--fs-card-title);
font-weight: var(--fw-bold);
line-height: var(--lh-card-title);
letter-spacing: var(--ls-h4);
color: var(--product-title);
transition: color var(--duration-fast) var(--ease-out);
}
.kit__title-part {
display: inline-block;
max-width: 100%;
overflow-wrap: anywhere;
}
.kit:hover .kit__title {
color: var(--brand-500);
}
.kit__specs {
display: flex;
flex-direction: column;
padding-top: var(--space-4);
}
.kit__spec {
display: flex;
gap: var(--space-16);
align-items: baseline;
justify-content: space-between;
padding-block: var(--kit-spec-row);
}
.kit__spec-name {
flex-shrink: 0;
color: var(--kit-spec-label);
}
.kit__spec-value {
min-width: 0;
text-align: right;
color: var(--product-title);
}
.kit__spec-value--model {
font-weight: var(--fw-semibold);
}
.kit__link {
position: relative;
display: inline-flex;
gap: var(--space-8);
align-items: center;
padding-top: var(--space-4);
margin-top: auto;
font-size: var(--fs-button-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-m);
color: var(--brand-500);
transition: color var(--duration-fast) var(--ease-out);
}
.kit__link:hover {
color: var(--brand-700);
}
@media (max-width: 1280px) {
.kit {
flex-direction: column;
}
.kit__media {
width: 100%;
height: var(--kit-media-height-stacked);
background-color: var(--surface-white);
}
.kit__img {
padding: var(--space-48) var(--space-16) var(--space-12);
}
}
@media (max-width: 767px) {
.kit__link::after {
content: "";
position: absolute;
inset: -10px 0;
}
}
.scenario {
display: flex;
flex-direction: column;
gap: var(--space-18);
height: 100%;
padding: var(--scenario-padding);
border: 1px solid var(--scenario-border);
border-radius: var(--radius-product);
background-color: var(--scenario-bg);
}
.scenario__icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--scenario-chip);
height: var(--scenario-chip);
border: 1px solid var(--scenario-chip-border);
border-radius: var(--radius-media);
background-color: var(--surface-white);
}
.scenario__title {
font-size: var(--fs-product-title);
font-weight: var(--fw-semibold);
line-height: var(--lh-scenario-title);
letter-spacing: var(--ls-h4);
color: var(--ink-title);
}
.scenario__text {
color: var(--ink-700);
}
.kit-cta {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-16);
justify-content: center;
height: 100%;
padding: var(--kit-cta-padding);
overflow: hidden;
border-radius: var(--radius-product);
background: var(--gradient-kit-cta);
box-shadow: var(--shadow-kit-cta);
isolation: isolate;
}
.kit-cta__media {
position: absolute;
inset-block: 0;
right: 0;
z-index: -1;
width: var(--kit-cta-photo-width);
-webkit-mask-image: var(--gradient-kit-photo-mask);
mask-image: var(--gradient-kit-photo-mask);
pointer-events: none;
}
.kit-cta__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.kit-cta__media::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--kit-cta-tint);
mix-blend-mode: multiply;
}
.kit-cta__heading {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.kit-cta__title {
color: var(--surface-white);
}
.kit-cta__text {
max-width: var(--kit-cta-text-max);
font-weight: var(--fw-medium);
color: var(--kit-cta-text);
}
.kit-cta__action {
margin-top: auto;
align-self: flex-start;
}
@media (max-width: 1280px) {
.kit-cta__media {
width: 100%;
-webkit-mask-image: var(--gradient-kit-photo-mask-mobile);
mask-image: var(--gradient-kit-photo-mask-mobile);
}
}
.photo-divider {
position: relative;
height: var(--photo-divider-height);
overflow: hidden;
background-color: var(--photo-divider-bg);
}
.photo-divider__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-divider::after {
content: "";
position: absolute;
inset: 0;
background: var(--gradient-photo-divider);
pointer-events: none;
}
.hero {
position: relative;
min-height: 100svh;
padding-block: var(--hero-content-top) var(--hero-bottom);
overflow: hidden;
isolation: isolate;
}
.hero__bg,
.hero__bg-img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
}
.hero__bg-img {
object-fit: cover;
object-position: left top;
}
.hero__fade {
display: none;
}
.hero__content {
display: flex;
flex-direction: column;
gap: var(--space-40);
max-width: var(--hero-title-max);
}
.hero__text,
.hero__cta {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.hero__title {
text-transform: uppercase;
}
.hero__lead {
max-width: var(--hero-lead-max);
font-weight: var(--fw-medium);
color: var(--ink-800);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-24);
}
.hero__note {
max-width: var(--hero-note-max);
color: var(--ink-600);
}
.hero__media {
position: absolute;
top: var(--hero-media-top);
right: max(
var(--container-padding),
calc(50% - var(--container) / 2 - var(--hero-media-overhang))
);
z-index: -1;
width: min(var(--hero-media-width), 46vw);
}
.hero__stats {
margin-top: var(--hero-stats-gap);
}
.hero-products {
position: relative;
aspect-ratio: 771 / 700;
}
.hero-products__podium {
position: absolute;
top: 0;
left: -0.13%;
width: 100.13%;
height: 102.86%;
}
.hero-products__item {
position: absolute;
overflow: hidden;
}
.hero-products__img {
position: absolute;
max-width: none;
}
.hero-products__item--inverter {
top: 8%;
left: 7%;
width: 34.5%;
height: 61.57%;
}
.hero-products__item--inverter .hero-products__img {
top: -6.9%;
left: -44.78%;
width: 194.03%;
height: 119.54%;
}
.hero-products__item--battery-right {
top: 28.14%;
left: 58.89%;
width: 33.72%;
height: 54.86%;
}
.hero-products__item--battery-right .hero-products__img {
top: -22.96%;
left: -58.01%;
width: 216.4%;
height: 146.17%;
}
.hero-products__item--battery-mid {
top: 30.43%;
left: 33.2%;
width: 35.67%;
height: 58.14%;
}
.hero-products__item--battery-mid .hero-products__img {
top: -18.73%;
left: -44.53%;
width: 187.5%;
height: 126.65%;
}
@media (max-width: 1440px) {
.hero {
--hero-title-max: 660px;
--hero-lead-max: 560px;
}
}
@media (max-width: 1280px) {
.hero {
--hero-title-max: 840px;
--hero-lead-max: 660px;
padding-block:
calc(var(--header-offset-top) + var(--header-height) + var(--space-48))
var(--space-64);
}
.hero__content {
gap: var(--space-32);
}
.hero__bg {
height: min(100%, 100svh);
}
.hero__bg-img {
object-position: 55% top;
}
.hero__fade {
display: block;
position: absolute;
inset-inline: 0;
top: calc(min(100%, 100svh) - var(--hero-fade-height));
z-index: -1;
height: var(--hero-fade-height);
background: var(--gradient-hero-fade);
pointer-events: none;
}
.hero__media {
position: static;
width: min(560px, 100%);
margin-block: var(--space-32) var(--space-40);
margin-inline: auto;
}
.hero__stats {
margin-top: 0;
}
}
@media (max-width: 767px) {
.hero {
padding-block:
calc(var(--header-offset-top) + var(--header-height) + var(--space-32))
var(--space-48);
}
.hero__bg-img {
object-position: left top;
}
.hero__media {
width: min(420px, 100%);
margin-block: var(--space-24) var(--space-32);
}
.hero__actions {
flex-direction: column;
gap: var(--space-12);
}
.hero__action {
justify-content: space-between;
}
}
.about {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
background: var(--gradient-mist-linear);
isolation: isolate;
}
.about__decor {
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: auto;
max-width: none;
pointer-events: none;
}
.about__inner {
display: flex;
align-items: center;
}
.about__text {
display: flex;
flex-direction: column;
gap: var(--space-28);
align-items: flex-start;
width: var(--about-text);
flex-shrink: 0;
}
.about__heading {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.about__description {
max-width: var(--about-desc);
color: var(--ink-700);
}
.about__media {
position: relative;
width: var(--about-media);
min-width: 0;
aspect-ratio: 740 / 619;
}
.about__photo,
.about__card {
position: absolute;
overflow: hidden;
}
.about__photo {
top: 4.04%;
left: 10.81%;
width: 83.24%;
height: 87.24%;
border-radius: var(--radius-card);
box-shadow: var(--shadow-photo);
}
.about__photo-img {
position: absolute;
top: -3.14%;
left: -39.77%;
width: 139.8%;
height: 106.32%;
max-width: none;
}
.about__card {
top: 63.49%;
left: 0;
width: 42.7%;
height: 36.51%;
padding: var(--space-8);
border-radius: var(--radius-photo);
background-color: var(--surface-glass-soft);
box-shadow: var(--shadow-photo-card);
backdrop-filter: blur(var(--blur-photo-card));
}
.about__card-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-chip);
}
.about__badge {
position: absolute;
top: 0;
right: 0;
}
@media (max-width: 1280px) {
.about__inner {
flex-direction: column;
gap: var(--space-48);
align-items: stretch;
}
.about__text,
.about__media {
width: 100%;
}
.about__media {
max-width: var(--about-media);
margin-inline: auto;
}
.about__decor {
opacity: 0.6;
}
}
@media (max-width: 1023px) {
.about {
padding-block: var(--space-80);
}
}
@media (max-width: 767px) {
.about {
padding-block: var(--space-56);
}
.about__inner {
gap: var(--space-32);
}
.about__text {
gap: var(--space-24);
}
.about__media {
display: flex;
flex-direction: column;
gap: var(--space-16);
aspect-ratio: auto;
}
.about__photo,
.about__card {
position: static;
width: 100%;
height: auto;
aspect-ratio: 616 / 540;
}
.about__card {
aspect-ratio: 316 / 226;
}
.about__photo-img {
position: static;
width: 100%;
height: 100%;
object-fit: cover;
}
.about__badge {
top: var(--space-12);
right: var(--space-12);
}
}
.categories-section {
padding-block: var(--section-py);
}
.categories-section__list {
margin-top: var(--section-head-mb);
}
@media (max-width: 1023px) {
.categories-section {
padding-block: var(--space-80);
}
.categories-section__list {
margin-top: var(--space-40);
}
}
@media (max-width: 767px) {
.categories-section {
padding-block: var(--space-56);
}
.categories-section__list {
margin-top: var(--space-32);
}
}
.solutions {
padding-top: var(--section-py);
}
.solutions__main {
gap: var(--space-32);
align-items: flex-start;
}
.solutions__heading {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.solutions__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: var(--section-head-mb);
}
@media (max-width: 1280px) {
.solutions__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.solutions__item:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
@media (max-width: 1023px) {
.solutions {
padding-top: var(--space-80);
}
.solutions__list {
margin-top: var(--space-40);
}
}
@media (max-width: 767px) {
.solutions {
padding-top: var(--space-56);
}
.solutions__list {
grid-template-columns: minmax(0, 1fr);
margin-top: var(--space-32);
}
}
.why {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
color: var(--surface-white);
background-color: var(--surface-why);
isolation: isolate;
}
.why::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--gradient-why-corner);
pointer-events: none;
}
.why__decor {
position: absolute;
top: -55.33%;
left: -19.79%;
z-index: -1;
width: 141.67%;
height: 225.41%;
max-width: none;
pointer-events: none;
}
.why__heading {
display: flex;
flex-direction: column;
gap: var(--space-16);
max-width: 900px;
}
.why__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-32);
margin-top: var(--section-head-mb);
}
@media (max-width: 1280px) {
.why__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-24);
}
}
@media (max-width: 1023px) {
.why {
padding-block: var(--space-80);
}
.why__grid {
margin-top: var(--space-40);
}
}
@media (max-width: 767px) {
.why {
padding-block: var(--space-56);
}
.why__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-16);
margin-top: var(--space-32);
}
}
.products {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
isolation: isolate;
}
.products__decor {
position: absolute;
top: 20.45%;
left: 0;
z-index: -1;
width: var(--products-decor-width);
height: auto;
pointer-events: none;
}
.products__slider {
margin-top: var(--section-head-mb);
}
.products__cta {
justify-self: center;
}
@media (max-width: 1023px) {
.products {
padding-block: var(--space-80);
}
}
@media (max-width: 767px) {
.products {
padding-block: var(--space-56);
}
.products__cta {
grid-column: 1 / -1;
grid-row: 2;
justify-self: stretch;
justify-content: space-between;
margin-top: var(--space-24);
}
}
.kits {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
background: var(--gradient-kits);
isolation: isolate;
}
.kits__backdrop {
position: absolute;
top: -72.79%;
left: -9.77%;
z-index: -1;
width: 119.53%;
height: 200.17%;
max-width: none;
object-fit: cover;
-webkit-mask-image: var(--gradient-kits-backdrop-mask);
mask-image: var(--gradient-kits-backdrop-mask);
pointer-events: none;
}
.kits__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-32);
margin-top: var(--section-head-mb);
}
@media (max-width: 767px) {
.kits__grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 1023px) {
.kits {
padding-block: var(--space-80);
}
}
@media (max-width: 767px) {
.kits {
padding-block: var(--space-56);
}
.kits__grid {
gap: var(--space-16);
}
}
.partners {
position: relative;
padding-block: var(--section-py) var(--partners-bottom);
overflow: hidden;
isolation: isolate;
}
.partners__content {
display: flex;
flex-direction: column;
gap: var(--space-24);
align-items: flex-start;
max-width: min(var(--partners-content), var(--partners-content-share));
}
.partners__title {
color: var(--ink-title);
}
.partners__lead {
color: var(--ink-700);
}
.partners__benefits {
display: flex;
flex-direction: column;
gap: var(--space-16);
width: 100%;
}
.partners__benefits-title {
font-size: var(--fs-body-m);
font-weight: var(--fw-bold);
line-height: var(--lh-body-m);
color: var(--brand-600);
}
.partners__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-16) var(--space-32);
padding-top: var(--space-8);
color: var(--ink-600);
}
.partners__item {
display: flex;
gap: var(--space-12);
align-items: flex-start;
width: calc(50% - var(--space-16));
}
.partners__tick {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--tick-size);
height: var(--tick-size);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
color: var(--brand-500);
border-radius: var(--radius-round);
background-color: var(--tick-bg);
}
.partners__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-24);
align-items: center;
padding-top: var(--space-16);
}
.partners__media {
position: absolute;
top: 0;
right: 0;
z-index: -1;
width: var(--partners-photo-width);
height: 100%;
}
.partners__photo {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.partners__media::after {
content: "";
position: absolute;
inset-block: 0;
left: 0;
width: var(--partners-fade-width);
background: var(--gradient-partners-fade);
pointer-events: none;
}
@media (max-width: 1023px) {
.partners {
padding-block: var(--space-80) 0;
}
.partners__content {
max-width: 100%;
}
.partners__media {
position: static;
width: 100%;
height: var(--partners-photo-height);
margin-top: var(--space-56);
}
.partners__photo {
object-position: center 26%;
}
.partners__media::after {
display: none;
}
}
@media (max-width: 767px) {
.partners {
padding-block: var(--space-56) 0;
}
.partners__item {
width: 100%;
}
.partners__actions {
flex-direction: column;
align-items: flex-start;
gap: var(--space-12);
}
}
.steps {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
background: var(--gradient-steps-bg);
isolation: isolate;
}
.steps__decor {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: var(--steps-decor-width);
height: auto;
max-width: none;
pointer-events: none;
}
.steps__inner {
display: flex;
flex-direction: column;
gap: var(--space-60);
align-items: center;
}
.steps__head {
width: 100%;
}
.steps__scroller {
width: 100%;
}
.steps__scroller:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 4px;
border-radius: var(--radius-chip);
}
.steps__list {
position: relative;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: var(--space-40);
width: 100%;
counter-reset: step;
}
.steps__item {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-18);
align-items: flex-start;
counter-increment: step;
}
.steps__item::after {
content: "";
position: absolute;
top: calc(var(--steps-badge) / 2 - 1px);
left: calc(var(--steps-badge) / 2);
z-index: -1;
width: calc(100% + var(--space-40) - var(--steps-badge));
height: 2px;
background: var(--gradient-steps-line);
}
.steps__item:last-child::after {
content: none;
}
.steps__badge {
display: flex;
align-items: center;
justify-content: center;
width: var(--steps-badge);
height: var(--steps-badge);
font-size: var(--fs-button-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-m);
color: var(--surface-white);
border: var(--steps-badge-border) solid var(--surface-white);
border-radius: var(--radius-round);
background: var(--gradient-step-badge);
box-shadow: var(--shadow-step-badge);
}
.steps__badge::before {
content: counter(step, decimal-leading-zero);
}
.steps__title {
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: var(--lh-h4);
letter-spacing: var(--ls-h4);
color: var(--ink-title);
}
.steps__text {
color: var(--ink-700);
}
@media (max-width: 1279px) {
.steps__scroller {
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.steps__scroller::-webkit-scrollbar {
display: none;
}
.steps__list {
width: max-content;
grid-auto-columns: var(--steps-item-min);
}
.steps__item {
scroll-snap-align: start;
}
}
@media (max-width: 1023px) {
.steps {
padding-block: var(--space-80);
}
.steps__inner {
gap: var(--space-48);
}
}
@media (max-width: 767px) {
.steps {
padding-block: var(--space-56);
}
.steps__scroller {
overflow: visible;
}
.steps__list {
width: 100%;
grid-auto-flow: row;
grid-auto-columns: auto;
gap: var(--space-32);
}
.steps__item::after {
top: calc(var(--steps-badge) / 2);
left: calc(var(--steps-badge) / 2 - 1px);
width: 2px;
height: calc(100% + var(--space-32) - var(--steps-badge));
background: var(--gradient-steps-line-v);
}
.steps__item {
display: grid;
grid-template-columns: var(--steps-badge) minmax(0, 1fr);
column-gap: var(--space-16);
row-gap: var(--space-8);
}
.steps__badge {
grid-row: span 2;
}
.steps__cta {
align-self: stretch;
justify-content: space-between;
}
}
.scenarios {
padding-block: var(--section-py);
}
.scenarios__inner {
display: flex;
flex-direction: column;
gap: var(--space-60);
}
.scenarios__scroller {
width: 100%;
}
.scenarios__scroller:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 4px;
border-radius: var(--radius-product);
}
.scenarios__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-32);
}
@media (max-width: 1279px) {
.scenarios__scroller {
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.scenarios__scroller::-webkit-scrollbar {
display: none;
}
.scenarios__list {
display: flex;
width: max-content;
}
.scenario {
width: var(--scenario-width);
scroll-snap-align: start;
}
}
@media (max-width: 1023px) {
.scenarios {
padding-block: var(--space-80);
}
.scenarios__inner {
gap: var(--space-48);
}
}
@media (max-width: 767px) {
.scenarios {
padding-block: var(--space-56);
}
.scenarios__list {
gap: var(--space-16);
}
}
.lineup {
padding-block: var(--section-py);
background-color: var(--surface-white);
}
.lineup__inner {
display: flex;
flex-direction: column;
gap: var(--space-60);
}
.lineup__grid {
display: grid;
gap: var(--lineup-gap);
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.lineup-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--lineup-line);
border-radius: var(--radius-lineup);
background-color: var(--surface-white);
transition:
transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.lineup-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-soft);
}
.lineup-card__media {
flex-shrink: 0;
aspect-ratio: var(--lineup-media-ratio);
overflow: hidden;
background-color: var(--surface-soft);
}
.lineup-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.lineup-card:hover .lineup-card__img {
transform: scale(1.03);
}
.lineup-card__body {
display: flex;
flex-direction: column;
gap: var(--lineup-body-gap);
padding: var(--lineup-body-padding);
}
.lineup-card__title {
color: var(--ink-900);
}
.lineup-card__link::after {
content: "";
position: absolute;
inset: 0;
}
.lineup-card__text {
color: var(--ink-600);
}
@media (max-width: 767px) {
.lineup__grid {
grid-template-columns: minmax(0, 1fr);
}
}
.usage {
background-color: var(--surface-soft);
}
.usage__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.usage__row--backup {
min-height: var(--usage-row-backup);
}
.usage__row--solar {
min-height: var(--usage-row-solar);
}
.usage__panel {
display: flex;
flex-direction: column;
gap: var(--usage-gap);
align-items: flex-start;
justify-content: center;
padding-block: var(--usage-panel-py);
padding-inline: var(--panel-outer-edge) var(--usage-panel-inner);
}
.usage__row--solar .usage__panel {
padding-inline: var(--usage-panel-inner) var(--panel-outer-edge);
}
.usage__row--solar .usage__media {
order: -1;
}
.usage__title {
color: var(--ink-900);
}
.usage__text {
color: var(--ink-600);
}
.usage__subtitle {
font-size: var(--fs-body-l);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-l);
color: var(--ink-800);
}
.usage__media {
overflow: hidden;
}
.usage__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1023px) {
.usage__row {
grid-template-columns: minmax(0, 1fr);
}
.usage__panel,
.usage__row--solar .usage__panel {
padding-inline: var(--container-edge);
}
.usage__media {
height: var(--usage-photo-stacked);
}
.usage__media {
order: -1;
}
}
.scaling {
padding-block: var(--section-py);
background-color: var(--surface-white);
}
.scaling__inner {
display: flex;
flex-direction: column;
gap: var(--space-60);
}
.chain {
display: flex;
flex-direction: column;
gap: var(--chain-gap);
padding: var(--chain-padding);
border-radius: var(--radius-chain);
background-color: var(--surface-blue-soft);
}
.chain__label {
color: var(--brand-500);
}
.chain__flow {
display: flex;
align-items: flex-start;
}
.chain__node {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: var(--chain-node-gap);
align-items: center;
min-width: 0;
}
.chain__visual {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: var(--chain-visual);
}
.chain__photo {
width: var(--chain-photo-width);
max-width: 100%;
height: var(--chain-photo-height);
object-fit: contain;
}
.chain__caption {
display: flex;
flex-direction: column;
gap: var(--chain-caption-gap);
align-items: center;
width: 100%;
padding: var(--chain-caption-padding);
text-align: center;
border-radius: var(--radius-chain-caption);
background-color: var(--surface-white);
}
.chain__name {
font-size: var(--fs-body-s);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-s);
color: var(--ink-900);
}
.chain__hint {
color: var(--ink-500);
}
.chain__arrow {
display: flex;
flex: 0 0 var(--chain-arrow);
align-items: center;
justify-content: center;
height: var(--chain-visual);
color: var(--flow-line);
}
.chain__arrow--both {
color: var(--flow-line-both);
}
.chain__sign {
width: 100%;
height: auto;
aspect-ratio: 70 / 22;
}
.chain__note {
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--ink-600);
}
.scaling__grid {
display: grid;
gap: var(--space-32);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.scaling-card {
display: flex;
flex-direction: column;
gap: var(--scaling-card-gap);
align-items: flex-start;
padding: var(--scaling-card-padding);
border: 1px solid var(--lineup-line);
border-radius: var(--radius-scaling-card);
background-color: var(--surface-white);
box-shadow: var(--shadow-scaling-card);
}
.scaling-card__chip {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--scaling-chip);
height: var(--scaling-chip);
border-radius: var(--radius-chip);
background: var(--gradient-button-blue);
box-shadow: var(--shadow-chip);
}
.scaling-card__glyph {
width: var(--scaling-glyph);
height: var(--scaling-glyph);
object-fit: contain;
}
.scaling-card__head {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.scaling-card__title {
color: var(--ink-900);
}
.scaling-card__text {
color: var(--ink-600);
}
.scaling-card__line {
width: 100%;
height: 1px;
background-color: var(--lineup-line);
}
.scaling-card__label {
color: var(--brand-500);
}
.scaling-card__list {
display: flex;
flex-wrap: wrap;
gap: var(--scaling-item-gap);
width: 100%;
}
.scaling-card__item {
display: flex;
flex: 0 0 var(--scaling-item-width);
gap: var(--scaling-item-gap);
align-items: center;
max-width: 100%;
padding: var(--scaling-item-padding);
font-size: var(--fs-body-s);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-s);
color: var(--ink-900);
border-radius: var(--radius-scaling-item);
background-color: var(--surface-soft);
}
.scaling-card__check {
flex-shrink: 0;
width: var(--scaling-check);
height: var(--scaling-check);
color: var(--brand-500);
}
.scaling-card__note {
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--ink-500);
}
@media (max-width: 1023px) {
.scaling__grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 1199px) {
.chain__flow {
flex-direction: column;
align-items: stretch;
}
.chain__node {
flex: 0 0 auto;
flex-direction: row;
align-items: center;
width: 100%;
}
.chain__visual {
flex: 0 0 var(--chain-media);
width: auto;
}
.chain__caption {
flex: 1 1 auto;
align-items: flex-start;
min-width: 0;
text-align: left;
}
.chain__arrow {
flex: 0 0 auto;
align-self: flex-start;
width: var(--space-40);
height: auto;
margin-inline-start: calc((var(--chain-media) - var(--space-40)) / 2);
padding-block: var(--space-8);
}
.chain__sign {
transform: rotate(90deg);
}
}
.monitoring {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
background-color: var(--surface-pale);
isolation: isolate;
}
.monitoring__decor {
position: absolute;
inset-block: var(--monitoring-decor-bleed);
right: 0;
z-index: -2;
width: var(--monitoring-decor-width);
overflow: hidden;
pointer-events: none;
}
.monitoring__veil {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
to right,
var(--surface-pale) 0,
var(--surface-pale) calc(var(--monitoring-text-end) + var(--monitoring-veil-gap)),
transparent calc(var(--monitoring-text-end) + var(--monitoring-veil-fade))
);
pointer-events: none;
}
.monitoring__photo {
position: absolute;
top: 1.85%;
left: -15.37%;
width: 115.38%;
height: 100%;
max-width: none;
object-fit: cover;
}
.monitoring__inner {
display: flex;
flex-direction: column;
gap: var(--monitoring-gap);
align-items: flex-start;
}
.monitoring__heading {
display: flex;
flex-direction: column;
gap: var(--space-16);
align-items: flex-start;
max-width: var(--monitoring-head);
}
.monitoring__text {
display: flex;
flex-direction: column;
gap: var(--monitoring-text-gap);
max-width: var(--monitoring-text);
font-size: var(--fs-body-l);
line-height: var(--lh-body-l);
color: var(--ink-600);
}
@media (max-width: 1023px) {
.monitoring {
display: flex;
flex-direction: column;
gap: var(--monitoring-gap);
padding-bottom: 0;
}
.monitoring__decor {
position: static;
z-index: auto;
order: 1;
width: 100%;
height: var(--monitoring-photo-stacked);
}
.monitoring__photo {
position: static;
width: 100%;
height: 100%;
object-position: center;
}
.monitoring__veil {
display: none;
}
}
.objects {
padding-block: var(--section-py);
color: var(--surface-white);
background-image: var(--gradient-objects);
}
.objects__inner {
display: flex;
flex-direction: column;
gap: var(--objects-gap);
}
.objects__head {
--section-head-title: var(--objects-head-title);
--section-head-note: var(--objects-head-note);
--section-head-note-on-dark: var(--surface-white);
--section-head-rule-on-dark: rgb(255 255 255 / 0.5);
--eyebrow-dot: var(--objects-eyebrow-dot);
}
.objects__grid {
display: grid;
grid-template-columns: repeat(var(--objects-cols), minmax(0, 1fr));
gap: var(--objects-card-gap);
}
.objects__note {
color: var(--objects-note-color);
text-align: center;
}
.object-card {
display: flex;
gap: var(--objects-card-inner-gap);
align-items: center;
padding: var(--objects-card-padding);
border-radius: var(--radius-objects-card);
background-color: var(--objects-card-bg);
box-shadow:
inset 0 0 0 1px var(--objects-card-border),
var(--shadow-objects-card);
backdrop-filter: blur(var(--blur-objects-card));
}
.object-card__badge {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--objects-badge);
height: var(--objects-badge);
border-radius: var(--radius-objects-badge);
background-color: var(--objects-badge-bg);
}
.object-card__icon {
width: var(--objects-icon);
height: var(--objects-icon);
}
.object-card__label {
min-width: 0;
font-weight: var(--fw-semibold);
}
@media (max-width: 1199px) {
.objects {
--objects-cols: 3;
}
}
@media (max-width: 899px) {
.objects {
--objects-cols: 2;
}
}
@media (max-width: 599px) {
.objects {
--objects-cols: 1;
--objects-card-padding: var(--space-20);
}
}
.selection {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
background-color: var(--surface-pale);
isolation: isolate;
}
.selection__decor {
position: absolute;
inset-block: var(--selection-photo-top) 0;
right: 0;
z-index: -1;
width: var(--selection-photo-width);
mask-image: linear-gradient(to left, #000 0, transparent var(--selection-photo-fade));
}
.selection__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.selection__inner {
display: flex;
flex-direction: column;
gap: var(--selection-gap);
align-items: flex-start;
}
.selection__head {
--section-head-note: 440px;
max-width: var(--selection-head);
}
.selection__list {
counter-reset: selection;
width: 100%;
max-width: var(--selection-text);
}
.selection__step {
display: flex;
gap: var(--selection-step-gap);
align-items: center;
padding-block: var(--selection-step-py);
counter-increment: selection;
font-size: var(--fs-body-l);
line-height: var(--lh-body-l);
color: var(--ink-900);
}
.selection__step::before {
content: counter(selection, decimal-leading-zero);
flex-shrink: 0;
width: var(--selection-num);
font-size: var(--fs-button-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-m);
color: var(--brand-500);
}
.selection__step {
border-top: 1px solid var(--selection-divider);
}
.selection__step:first-child {
border-top: 0;
}
.selection__result {
max-width: var(--selection-text);
}
@media (max-width: 1023px) {
.selection {
display: flex;
flex-direction: column;
gap: var(--selection-gap);
padding-bottom: 0;
}
.selection__decor {
position: static;
z-index: auto;
order: 1;
width: 100%;
height: var(--selection-photo-stacked);
mask-image: none;
}
}
@media (max-width: 767px) {
.selection {
--selection-photo-stacked: 280px;
}
}
.forwhom-hero {
--page-banner-height: 820px;
--page-banner-top: 222px;
--page-banner-bottom: 102px;
--page-banner-photo-pos: left center;
}
@media (max-width: 1023px) {
.forwhom-hero {
--page-banner-height: 660px;
--page-banner-top: 180px;
--page-banner-bottom: 80px;
}
}
@media (max-width: 767px) {
.forwhom-hero {
--page-banner-height: 0;
--page-banner-top: 140px;
--page-banner-bottom: 64px;
}
}
.case {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
background-color: var(--surface-soft);
}
.case--white {
background-color: var(--surface-white);
}
.case__media {
position: relative;
}
.case__frame {
display: block;
position: absolute;
inset: var(--case-media-py) var(--case-media-inner) var(--case-media-py) var(--case-media-outer);
overflow: hidden;
border-radius: var(--radius-case-photo);
}
.case__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.case__panel {
display: flex;
flex-direction: column;
gap: var(--case-gap);
align-items: flex-start;
justify-content: center;
padding-block: var(--case-panel-py);
padding-inline: var(--case-panel-inner) var(--panel-outer-edge);
}
.case--mirror .case__media {
order: 1;
}
.case--mirror .case__frame {
inset: var(--case-media-py) var(--case-media-outer) var(--case-media-py) var(--case-media-inner);
}
.case--mirror .case__panel {
padding-inline: var(--panel-outer-edge) var(--case-panel-inner);
}
.case__title {
color: var(--ink-900);
}
.case__text,
.case__note {
color: var(--ink-600);
}
.case__subtitle {
font-size: var(--fs-body-l);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-l);
color: var(--ink-800);
}
@media (max-width: 1023px) {
.case {
grid-template-columns: minmax(0, 1fr);
}
.case--mirror .case__media {
order: 0;
}
.case__media {
padding: var(--case-media-py) var(--container-padding) 0;
}
.case__frame,
.case--mirror .case__frame {
position: static;
inset: auto;
height: var(--case-photo-stacked);
}
.case__panel,
.case--mirror .case__panel {
padding-block: var(--case-panel-py-narrow);
padding-inline: var(--container-padding);
}
}
@media (max-width: 767px) {
.case {
--case-photo-stacked: 280px;
}
}
.picking {
position: relative;
padding-block: var(--section-py);
color: var(--surface-white);
overflow: hidden;
background-image: var(--gradient-picking);
isolation: isolate;
}
.picking__decor {
position: absolute;
inset-block: 0;
left: 0;
z-index: -1;
width: var(--picking-photo-width);
mask-image: linear-gradient(to right, #000 0, transparent var(--picking-photo-fade));
}
.picking__photo {
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
}
.picking__inner {
display: flex;
flex-direction: column;
gap: var(--picking-gap);
align-items: flex-start;
}
.picking__head {
--section-head-title: var(--picking-head-title);
--section-head-note: var(--picking-head-note);
--section-head-gap: var(--picking-head-gap);
--section-head-rule-on-dark: var(--brand-400);
--eyebrow-on-dark: var(--surface-white);
width: 100%;
}
.picking__strong {
font-weight: var(--fw-semibold);
}
.picking__steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--picking-row-gap) var(--picking-col-gap);
width: 100%;
}
.picking__step {
display: flex;
gap: var(--picking-step-gap);
align-items: center;
padding: var(--picking-step-padding);
border-radius: var(--radius-picking-step);
border: 1px solid var(--picking-step-border);
background-image: var(--picking-step-bg);
backdrop-filter: blur(var(--blur-picking-step));
}
.picking__num {
flex-shrink: 0;
font-size: var(--fs-button-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-l);
letter-spacing: var(--ls-picking-num);
color: var(--picking-num-color);
}
.picking__label {
flex: 1 1 0;
min-width: 0;
font-size: var(--fs-body-l);
line-height: var(--lh-body-m);
color: var(--surface-white);
}
.picking__result {
display: flex;
gap: var(--picking-result-gap);
align-items: stretch;
width: 100%;
padding: var(--picking-result-padding);
font-weight: var(--fw-semibold);
color: var(--picking-result-color);
filter: drop-shadow(var(--shadow-picking-result));
}
.picking__result::before {
content: "";
flex-shrink: 0;
width: var(--picking-bar);
border-radius: var(--radius-picking-bar);
background-color: var(--picking-accent);
}
@media (max-width: 899px) {
.picking__steps {
grid-template-columns: minmax(0, 1fr);
}
}
.options {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
background-color: var(--surface-soft);
isolation: isolate;
}
.options__decor {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: var(--options-decor-width);
height: var(--options-decor-height);
max-width: none;
}
.options__inner {
display: flex;
flex-direction: column;
gap: var(--options-gap);
}
.options__grid {
display: grid;
gap: var(--options-grid-gap);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.option {
display: flex;
gap: var(--option-padding);
align-items: stretch;
padding: var(--option-padding);
border-radius: var(--radius-option);
background-color: var(--surface-white);
box-shadow: var(--shadow-card);
}
.option__media {
flex-shrink: 0;
width: var(--option-media);
overflow: hidden;
border-radius: var(--radius-option-media);
}
.option__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.option__body {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: var(--option-body-gap);
align-items: flex-start;
justify-content: space-between;
min-width: 0;
}
.option__text {
display: flex;
flex-direction: column;
gap: var(--option-text-gap);
}
.option__title {
line-height: var(--option-title-lh);
color: var(--ink-900);
}
.option__note {
color: var(--ink-600);
}
@media (max-width: 1023px) {
.options__grid {
grid-template-columns: minmax(0, 1fr);
}
.option__action {
width: 100%;
justify-content: space-between;
}
}
@media (max-width: 599px) {
.option {
flex-direction: column;
}
.option__media {
width: 100%;
height: var(--option-media);
}
}
.partners-hero {
padding-block: var(--partners-hero-top) var(--partners-hero-bottom);
background: var(--gradient-partners-hero);
}
.partners-hero__inner {
display: flex;
gap: var(--partners-hero-gap);
align-items: center;
}
.partners-hero__text {
display: flex;
flex: var(--partners-hero-text-cols) 1 0;
flex-direction: column;
gap: var(--space-24);
min-width: 0;
}
.partners-hero__eyebrow {
color: var(--brand-500);
}
.partners-hero__title {
font-size: var(--fs-page-title);
font-weight: var(--fw-extrabold);
line-height: var(--lh-page-title);
color: var(--ink-title);
}
.partners-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
padding-top: var(--space-16);
}
.partners-hero__media {
flex: var(--partners-hero-photo-cols) 1 0;
aspect-ratio: var(--partners-hero-photo-ratio);
overflow: hidden;
border-radius: var(--radius-partners-photo);
}
.partners-hero__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--partners-hero-photo-focus) center;
}
@media (max-width: 1423px) {
.partners-hero__media {
align-self: stretch;
aspect-ratio: auto;
}
}
@media (max-width: 1024px) {
.partners-hero__inner {
flex-direction: column;
gap: var(--space-48);
align-items: stretch;
}
.partners-hero__text {
max-width: var(--partners-hero-measure);
}
.partners-hero__media {
flex: none;
aspect-ratio: auto;
height: var(--partners-hero-photo-stacked);
}
.partners-hero__photo {
object-position: center;
}
}
@media (max-width: 767px) {
.partners-hero__actions {
flex-direction: column;
align-items: flex-start;
gap: var(--space-12);
}
}
.audiences {
padding-block: var(--section-py);
overflow: hidden;
background-color: var(--surface-white);
}
.audiences__row {
--slider-pad-top: var(--audience-shadow-top);
--slider-pad-bottom: var(--audience-shadow-bottom);
margin-top: calc(var(--section-head-mb) - var(--audience-shadow-top));
margin-bottom: calc(var(--audience-shadow-bottom) * -1);
}
.audience {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--audience-padding);
overflow: hidden;
border: 1px solid var(--card-line);
border-radius: var(--radius-audience);
background-color: var(--surface-white);
box-shadow: var(--shadow-card-soft);
}
.audience__media {
flex-shrink: 0;
height: var(--audience-media-height);
overflow: hidden;
border-radius: var(--radius-audience-media);
}
.audience__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.audience__body {
display: flex;
flex-direction: column;
gap: var(--audience-body-gap);
padding: var(--audience-body-padding);
}
.audience__title {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-h4);
color: var(--ink-title);
}
.audience__text {
color: var(--ink-700);
}
@media (max-width: 767px) {
.audiences__row {
margin-top: calc(var(--space-32) - var(--audience-shadow-top));
}
}
.benefits {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
color: var(--surface-white);
background: var(--gradient-benefits);
isolation: isolate;
}
.benefits__decor {
position: absolute;
top: var(--benefits-decor-top);
left: 0;
z-index: -1;
width: var(--benefits-decor-width);
height: calc(100% - var(--benefits-decor-top));
overflow: hidden;
-webkit-mask-image: var(--gradient-benefits-mask);
mask-image: var(--gradient-benefits-mask);
pointer-events: none;
}
.benefits__photo {
position: absolute;
top: -18.34%;
right: 22.66%;
width: 116.39%;
height: 136.68%;
max-width: none;
}
.benefits__row {
--slider-pad-top: 0;
--slider-pad-bottom: 0;
margin-top: var(--section-head-mb);
}
.benefit {
display: flex;
flex-direction: column;
gap: var(--benefit-gap);
height: 100%;
padding: var(--benefit-padding);
border: 1px solid var(--benefit-border);
border-radius: var(--radius-benefit);
background: var(--gradient-benefit-card);
backdrop-filter: blur(var(--blur-benefit));
}
.benefit__title {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-h4);
color: var(--surface-white);
}
.benefit__list {
display: flex;
flex-direction: column;
gap: var(--benefit-list-gap);
}
.benefit__item {
display: flex;
gap: var(--benefit-item-gap);
align-items: flex-start;
font-size: var(--fs-benefit-label);
line-height: var(--lh-benefit-label);
color: var(--benefit-label);
}
.benefit__check {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--tick-size);
height: var(--tick-size);
font-size: var(--fs-check);
font-weight: var(--fw-bold);
line-height: var(--lh-check);
color: var(--surface-white);
border-radius: var(--radius-round);
background-color: var(--benefit-check-bg);
}
@media (max-width: 1280px) {
.benefits {
--section-head-note-on-dark: var(--surface-white);
}
.benefits__decor {
opacity: var(--benefits-decor-quiet);
}
}
@media (max-width: 767px) {
.benefits__row {
margin-top: var(--space-32);
}
}
.matching {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
background-color: var(--surface-pale);
isolation: isolate;
}
.matching__decor {
position: absolute;
inset-block: var(--matching-decor-bleed);
right: 0;
z-index: -1;
width: var(--matching-decor-width);
overflow: hidden;
-webkit-mask-image: var(--gradient-matching-mask);
mask-image: var(--gradient-matching-mask);
pointer-events: none;
}
.matching__photo {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.matching__inner {
display: flex;
flex-direction: column;
gap: var(--matching-gap);
align-items: flex-start;
}
.matching__head {
display: flex;
flex-direction: column;
gap: var(--matching-head-gap);
align-items: flex-start;
}
.matching__heading {
display: flex;
flex-direction: column;
gap: var(--space-16);
align-items: flex-start;
}
.matching__lead {
max-width: var(--matching-lead);
font-size: var(--fs-body-l);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-l);
color: var(--ink-700);
}
.matching__grid {
display: grid;
gap: var(--param-gap);
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
max-width: var(--matching-params);
}
.matching__note {
max-width: var(--matching-note);
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--ink-700);
}
.param {
display: flex;
gap: var(--param-gap);
align-items: center;
min-height: var(--param-height);
padding: var(--param-padding);
border-radius: var(--radius-param);
background-color: var(--param-bg);
box-shadow: var(--shadow-param);
backdrop-filter: blur(var(--blur-param));
}
.param__icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--param-icon);
height: var(--param-icon);
border-radius: var(--radius-param-icon);
background-color: var(--param-icon-bg);
}
.param__text {
font-size: var(--fs-param);
font-weight: var(--fw-medium);
line-height: var(--lh-param);
color: var(--ink-700);
}
@media (max-width: 1199px) {
.matching__decor {
opacity: var(--matching-decor-quiet);
}
}
@media (max-width: 1024px) {
.matching__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
}
}
@media (max-width: 767px) {
.matching__grid {
grid-template-columns: minmax(0, 1fr);
}
.matching__decor {
width: 100%;
}
}
.support {
padding-block: var(--section-py);
background-color: var(--surface-mist);
}
.support__inner {
display: flex;
gap: var(--support-gap);
align-items: center;
}
.support__media {
position: relative;
flex: var(--support-photo-cols) 1 0;
aspect-ratio: var(--support-photo-ratio);
overflow: hidden;
border-radius: var(--radius-support-photo);
box-shadow: var(--shadow-support);
}
.support__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.support__shade {
position: absolute;
inset: 0;
background: var(--gradient-support-shade);
pointer-events: none;
}
.support__content {
display: flex;
flex: var(--support-content-cols) 1 0;
flex-direction: column;
gap: var(--support-content-gap);
min-width: 0;
}
.support__heading {
display: flex;
flex-direction: column;
gap: var(--space-16);
align-items: flex-start;
}
.support__lead {
font-size: var(--fs-support-lead);
line-height: var(--lh-support-lead);
color: var(--ink-700);
}
.support__list {
display: flex;
flex-direction: column;
}
.support__item {
display: flex;
gap: var(--support-item-gap);
align-items: center;
padding-block: var(--support-item-py);
font-size: var(--fs-support-item);
font-weight: var(--fw-medium);
line-height: var(--lh-support-item);
color: var(--ink-title);
border-bottom: 1px solid var(--support-line);
}
.support__item:last-child {
border-bottom: 0;
}
.support__check {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--support-check-size);
height: var(--support-check-size);
font-size: var(--fs-support-check);
font-weight: var(--fw-bold);
line-height: var(--lh-support-check);
color: var(--brand-500);
border-radius: var(--radius-support-check);
background-color: var(--support-check-bg);
}
.support__note {
padding: var(--support-note-padding);
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--ink-700);
border-radius: var(--radius-support-note);
background-color: var(--support-note-bg);
}
@media (max-width: 1423px) {
.support__media {
align-self: stretch;
aspect-ratio: auto;
}
}
@media (max-width: 1024px) {
.support__inner {
flex-direction: column;
align-items: stretch;
}
.support__media {
flex: none;
aspect-ratio: auto;
height: var(--support-photo-stacked);
}
.support__photo {
object-position: center 30%;
}
.support__shade {
display: none;
}
}
.equipment {
padding-block: var(--section-py);
background-color: var(--surface-white);
}
.equipment__inner {
display: flex;
flex-direction: column;
gap: var(--space-60);
}
.equipment__grid {
display: grid;
gap: var(--equipment-gap);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.equipment-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: var(--equipment-padding);
overflow: hidden;
border: 1px solid var(--card-line);
border-radius: var(--radius-equipment);
background-color: var(--surface-white);
box-shadow: var(--shadow-equipment);
transition:
transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.equipment-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-equipment-hover);
}
.equipment-card__media {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
aspect-ratio: var(--equipment-media-ratio);
overflow: hidden;
border-radius: var(--radius-equipment-media);
background: var(--gradient-equipment-media);
}
.equipment-card__img {
width: var(--equipment-photo-width);
height: var(--equipment-photo-height);
object-fit: contain;
transition: transform var(--duration-slow) var(--ease-out);
}
.equipment-card:hover .equipment-card__img {
transform: scale(1.04);
}
.equipment-card__body {
display: flex;
flex-direction: column;
gap: var(--equipment-body-gap);
padding: var(--equipment-body-padding);
}
.equipment-card__title {
font-size: var(--fs-equipment-title);
font-weight: var(--fw-bold);
line-height: var(--lh-equipment-title);
color: var(--ink-title);
}
.equipment-card__link::after {
content: "";
position: absolute;
inset: 0;
}
.equipment-card__text {
color: var(--ink-700);
}
@media (max-width: 1024px) {
.equipment__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 599px) {
.equipment__grid {
grid-template-columns: minmax(0, 1fr);
}
}
.apply {
position: relative;
padding-block: var(--section-py);
overflow: hidden;
isolation: isolate;
}
.apply__photo {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.apply__veil {
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--apply-veil);
pointer-events: none;
}
.apply__inner {
display: flex;
justify-content: center;
}
.apply__form {
width: 100%;
max-width: var(--apply-card);
}
.contacts-hero {
padding-bottom: var(--space-80);
}
.contacts-hero__banner {
position: relative;
height: var(--contacts-banner-height);
overflow: hidden;
background-color: var(--banner-bg);
isolation: isolate;
}
.contacts-hero__photo {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: left center;
}
.contacts-hero__veil {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
to right,
var(--veil-from) 0,
var(--veil-to) calc(var(--veil-text-end) + 1020px)
);
pointer-events: none;
}
.contacts-hero__inner {
display: flex;
flex-direction: column;
gap: var(--space-24);
align-items: flex-start;
padding-top: var(--contacts-text-top);
}
.contacts-hero__title {
font-size: var(--fs-page-title);
font-weight: var(--fw-extrabold);
line-height: var(--lh-page-title);
color: var(--ink-title);
}
.contacts-hero__lead {
max-width: var(--contacts-text-width);
font-size: var(--fs-body-l);
line-height: var(--lh-body-l);
color: var(--ink-700);
}
.contacts-hero__card {
position: relative;
margin-top: calc(var(--contacts-card-overlap) * -1);
}
.map-section {
padding-block: var(--space-40) var(--space-120);
}
.map {
position: relative;
height: var(--map-height);
overflow: hidden;
border-radius: var(--radius-panel);
background-color: var(--ink-100);
}
.map__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.map__panel {
position: absolute;
top: var(--map-panel-offset);
left: var(--map-panel-offset);
display: flex;
flex-direction: column;
gap: var(--map-panel-gap);
align-items: flex-start;
max-width: calc(100% - var(--map-panel-offset) * 2);
padding: var(--map-panel-padding);
border-radius: var(--radius-map-panel);
background-color: var(--surface-white);
box-shadow: var(--shadow-map-panel);
}
.map__title {
font-size: var(--fs-map-title);
font-weight: var(--fw-semibold);
line-height: var(--lh-map-title);
letter-spacing: var(--ls-h4);
color: var(--ink-900);
}
.map__address {
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--ink-600);
font-style: normal;
}
.map__link {
gap: var(--space-8);
}
.map__marker {
position: absolute;
top: var(--map-marker-y);
left: var(--map-marker-x);
display: flex;
align-items: center;
justify-content: center;
width: var(--map-marker);
height: var(--map-marker);
color: var(--surface-white);
border: 4px solid var(--surface-white);
border-radius: var(--radius-round);
background-color: var(--brand-500);
box-shadow: var(--shadow-map-marker);
transform: translate(-50%, -50%);
pointer-events: none;
}
.contacts-form {
position: relative;
padding-block: var(--space-120) var(--space-100);
overflow: hidden;
background-color: var(--surface-soft);
isolation: isolate;
}
.contacts-form__decor {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: var(--contacts-decor-width);
max-width: none;
pointer-events: none;
}
.contacts-form__grid {
display: grid;
grid-template-columns: minmax(0, 53fr) minmax(0, 30fr);
gap: var(--space-32);
align-items: stretch;
}
.warranty {
display: flex;
flex-direction: column;
gap: var(--space-28);
padding: var(--warranty-padding);
border-radius: var(--radius-form-card);
background-color: var(--warranty-bg);
}
.warranty__head {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.warranty__title {
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
line-height: var(--lh-h4);
letter-spacing: var(--ls-h4);
color: var(--ink-900);
}
.warranty__text {
font-size: var(--fs-body-l);
line-height: var(--lh-h4);
color: var(--ink-600);
}
.warranty__subtitle {
font-size: var(--fs-body-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-body-m);
color: var(--ink-900);
}
.warranty__list {
display: flex;
flex-direction: column;
gap: var(--space-12);
counter-reset: warranty;
}
.warranty__item {
display: flex;
gap: var(--space-16);
align-items: center;
padding: var(--warranty-item-padding);
border-radius: var(--radius-warranty-item);
background-color: var(--surface-white);
counter-increment: warranty;
}
.warranty__item::before {
content: counter(warranty, decimal-leading-zero);
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--warranty-num);
height: var(--warranty-num);
font-size: var(--fs-button-m);
font-weight: var(--fw-semibold);
line-height: var(--lh-button-m);
color: var(--brand-500);
border-radius: var(--radius-round);
background-color: var(--brand-50);
}
.warranty__text-item {
font-size: var(--fs-body-m);
line-height: var(--lh-body-m);
color: var(--ink-900);
}
@media (max-width: 1199px) {
.contacts-form__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-24);
}
.contacts-form__decor {
width: auto;
height: 112%;
}
}
@media (max-width: 1023px) {
.contacts-hero__photo {
object-position: center;
}
.contacts-hero__veil {
background: var(--gradient-contacts-veil-narrow);
}
.contacts-form {
padding-block: var(--space-80) var(--space-64);
}
.map-section {
padding-block: var(--space-32) var(--space-80);
}
.contacts-hero {
padding-bottom: var(--space-64);
}
}
@media (max-width: 767px) {
.contacts-hero__card {
margin-top: var(--space-24);
}
.map-section {
padding-block: var(--space-24) var(--space-56);
}
.contacts-form {
padding-block: var(--space-56) var(--space-48);
}
}
.catalog-hero {
padding-block: var(--catalog-hero-top) var(--catalog-hero-bottom);
border-bottom: 1px solid var(--ink-200);
background-image: var(--catalog-hero-bg);
}
.catalog-hero__inner {
display: flex;
flex-direction: column;
gap: var(--catalog-hero-gap);
align-items: flex-start;
}
.catalog-hero__head {
display: flex;
gap: var(--catalog-head-gap);
align-items: center;
width: 100%;
}
.catalog-hero__title {
flex: 1 1 0;
min-width: 0;
font-size: var(--fs-catalog-title);
font-weight: var(--fw-bold);
line-height: var(--lh-catalog-title);
color: var(--ink-900);
}
.catalog-hero__note {
flex-shrink: 0;
width: var(--catalog-note);
padding-inline-start: var(--catalog-note-gap);
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--ink-700);
border-inline-start: var(--catalog-note-bar) solid var(--brand-500);
border-radius: var(--radius-result-note-bar);
}
.catalog {
padding-block: var(--catalog-top) var(--catalog-bottom);
background-color: var(--surface-white);
}
.catalog__inner {
display: flex;
flex-direction: column;
gap: var(--catalog-rows-gap);
}
.cat-tiles {
display: grid;
gap: var(--cat-tile-gap);
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cat-tile {
display: flex;
gap: var(--cat-tile-inner-gap);
align-items: center;
width: 100%;
padding: var(--cat-tile-padding);
text-align: left;
border-radius: var(--radius-cat-tile);
background-color: var(--surface-white);
box-shadow:
inset 0 0 0 1px var(--ink-200),
var(--shadow-cat-tile);
transition:
box-shadow var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.cat-tile:hover {
box-shadow:
inset 0 0 0 1px var(--brand-200),
var(--shadow-cat-tile);
}
.cat-tile__icon {
flex-shrink: 0;
width: var(--cat-tile-icon);
height: var(--cat-tile-icon);
}
.cat-tile__label {
min-width: 0;
font-size: var(--fs-cat-tile);
font-weight: var(--fw-semibold);
line-height: var(--lh-cat-tile);
color: var(--ink-900);
}
.cat-tile--current {
background-color: var(--brand-50);
box-shadow: inset 0 0 0 1.5px var(--brand-500);
}
.cat-tile--current:hover {
box-shadow: inset 0 0 0 1.5px var(--brand-500);
}
.cat-tile--current .cat-tile__label {
color: var(--brand-700);
}
.catalog__layout {
display: grid;
gap: var(--catalog-cols-gap);
grid-template-columns: var(--catalog-aside) minmax(0, 1fr);
align-items: start;
}
.filters {
padding: var(--filters-padding);
border-radius: var(--radius-filters);
background-color: var(--surface-white);
box-shadow: inset 0 0 0 1px var(--ink-200);
}
.filters__head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-16);
border-bottom: 1px solid var(--ink-200);
}
.filters__title {
font-size: var(--fs-filters-title);
font-weight: var(--fw-bold);
line-height: var(--lh-h5);
color: var(--ink-900);
}
.filters__reset {
font-size: var(--fs-control);
font-weight: var(--fw-medium);
line-height: var(--lh-control);
color: var(--brand-500);
transition: color var(--duration-fast) var(--ease-out);
}
.filters__reset:hover {
color: var(--brand-600);
}
.filter-group {
padding-block: var(--filters-group-py);
border-bottom: 1px solid var(--ink-200);
}
.filter-group:last-of-type {
border-bottom: 0;
}
.filter-group[hidden],
.filter-option[hidden] {
display: none;
}
.filter-group__toggle {
display: flex;
gap: var(--space-12);
align-items: center;
justify-content: space-between;
width: 100%;
font-size: var(--fs-filter-group);
font-weight: var(--fw-semibold);
line-height: var(--lh-control);
color: var(--ink-900);
text-align: left;
}
.filter-group__chevron {
flex-shrink: 0;
width: var(--space-12);
height: var(--space-8);
color: var(--ink-400);
transition: transform var(--duration-fast) var(--ease-out);
}
.filter-group--collapsed .filter-group__chevron {
transform: rotate(180deg);
}
.filter-group__options {
display: flex;
flex-direction: column;
gap: var(--filters-option-gap);
min-inline-size: 0;
margin: 0;
padding: var(--filters-group-gap) 0 0;
border: 0;
}
.filter-group--collapsed .filter-group__options {
display: none;
}
.filter-group__sub {
display: flex;
flex-direction: column;
gap: var(--filters-option-gap);
margin-inline-start: var(--filters-sub-indent);
padding-block: var(--space-8) var(--space-6);
padding-inline-start: var(--filters-sub-gap);
border-inline-start: 1px solid var(--ink-200);
}
.filter-option {
display: flex;
gap: var(--filters-box-gap);
align-items: center;
padding-block: var(--filters-option-py);
cursor: pointer;
}
.filter-option__box {
flex-shrink: 0;
width: var(--filters-box);
height: var(--filters-box);
margin: 0;
appearance: none;
border: 1.5px solid var(--ink-300);
border-radius: var(--radius-filters-box);
background-color: var(--surface-white);
cursor: pointer;
transition:
border-color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.filter-option__box:hover {
border-color: var(--brand-400);
}
.filter-option__box:checked {
border-color: var(--brand-500);
background-color: var(--brand-500);
background-image: var(--filters-check);
background-repeat: no-repeat;
background-position: center;
background-size: 11px 8px;
}
.filter-option__box:focus-visible {
outline: 2px solid var(--brand-400);
outline-offset: 2px;
}
.filter-option__label {
flex: 1 1 0;
min-width: 0;
font-size: var(--fs-filter-option);
line-height: var(--lh-control);
color: var(--ink-700);
}
.filter-option__box:checked ~ .filter-option__label {
font-weight: var(--fw-semibold);
color: var(--ink-900);
}
.filter-option__count {
flex-shrink: 0;
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--ink-400);
}
.filters__submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding-block: 15px;
font-size: var(--fs-filters-submit);
font-weight: var(--fw-semibold);
line-height: var(--lh-control);
color: var(--surface-white);
border-radius: var(--radius-cat-tile);
background-image: var(--gradient-filters-submit);
transition: filter var(--duration-fast) var(--ease-out);
}
.filters__submit:hover {
filter: brightness(1.06);
}
.results {
display: flex;
flex-direction: column;
gap: var(--results-gap);
}
.results__bar {
display: flex;
flex-wrap: wrap;
gap: var(--results-bar-gap);
align-items: center;
justify-content: space-between;
}
.results__found {
display: flex;
gap: var(--space-8);
align-items: baseline;
font-size: var(--fs-found);
line-height: var(--lh-found);
color: var(--ink-500);
}
.results__count {
font-weight: var(--fw-semibold);
color: var(--ink-900);
}
.results__sort {
display: flex;
gap: var(--results-bar-gap);
align-items: center;
font-size: var(--fs-control);
line-height: var(--lh-control);
color: var(--ink-500);
}
.results__select {
padding: var(--select-padding);
padding-inline-end: var(--space-32);
font-size: var(--fs-control);
font-weight: var(--fw-semibold);
line-height: var(--lh-control);
color: var(--ink-900);
appearance: none;
border: 1px solid var(--ink-200);
border-radius: var(--radius-select);
background-color: var(--surface-white);
background-image: var(--select-chevron);
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 8px 5px;
cursor: pointer;
}
.results__select:hover {
border-color: var(--brand-200);
}
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-10);
align-items: center;
}
.chips[hidden] {
display: none;
}
.chip {
display: flex;
gap: var(--chip-gap);
align-items: center;
padding: var(--chip-padding);
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
color: var(--brand-600);
border-radius: var(--radius-filter-chip);
background-color: var(--brand-50);
transition: background-color var(--duration-fast) var(--ease-out);
}
.chip:hover {
background-color: var(--brand-100);
}
.chip__remove {
flex-shrink: 0;
width: var(--space-8);
height: var(--space-8);
}
.chips__reset {
font-size: var(--fs-caption);
font-weight: var(--fw-medium);
line-height: var(--lh-caption);
color: var(--ink-500);
transition: color var(--duration-fast) var(--ease-out);
}
.chips__reset:hover {
color: var(--brand-500);
}
.catalog-grid__item {
display: flex;
}
.catalog-grid__item[hidden] {
display: none;
}
.catalog-grid {
display: grid;
gap: var(--grid-gap);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.results__empty {
padding-block: var(--space-60);
text-align: center;
color: var(--ink-600);
}
.pagination--catalog {
--pagination-size: 44px;
gap: var(--space-8);
padding-top: var(--space-16);
}
.pagination--catalog .pagination__page {
font-size: var(--fs-control);
font-weight: var(--fw-semibold);
line-height: var(--lh-control);
color: var(--ink-700);
border-color: var(--ink-200);
border-radius: var(--radius-select);
}
.pagination--catalog .pagination__page--current,
.pagination--catalog .pagination__page--current:hover {
color: var(--surface-white);
border-color: transparent;
}
.pagination__next {
display: flex;
gap: var(--space-8);
align-items: center;
padding: 12px 18px;
font-size: var(--fs-control);
font-weight: var(--fw-semibold);
line-height: var(--lh-control);
color: var(--ink-700);
border-radius: var(--radius-select);
background-color: var(--ink-50);
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.pagination__next:hover {
color: var(--brand-500);
background-color: var(--brand-50);
}
.pagination__next-icon {
width: var(--space-18);
height: var(--space-18);
}
.helper {
padding-block: 0 var(--catalog-bottom);
background-color: var(--surface-white);
}
.helper__panel {
display: flex;
column-gap: 0;
row-gap: var(--space-24);
align-items: center;
justify-content: space-between;
padding: var(--helper-padding);
border: 1px solid var(--ink-200);
border-radius: var(--radius-helper);
background-image: var(--helper-bg);
}
.helper__text {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: var(--helper-gap);
align-items: flex-start;
min-width: 0;
}
.helper__title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
line-height: var(--lh-h3);
color: var(--ink-900);
}
.helper__note {
font-size: var(--fs-body-s);
line-height: var(--lh-body-s);
color: var(--ink-700);
}
@media (max-width: 1279px) {
.cat-tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.catalog__layout {
grid-template-columns: minmax(0, 1fr);
}
.filters__groups {
display: grid;
gap: 0 var(--space-32);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1023px) {
.catalog-hero__head {
flex-direction: column;
gap: var(--space-24);
align-items: flex-start;
}
.catalog-hero__note {
width: 100%;
}
}
@media (max-width: 899px) {
.cat-tiles,
.catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.filters__groups {
grid-template-columns: minmax(0, 1fr);
}
.results__bar {
align-items: flex-start;
}
.helper__panel {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 599px) {
.cat-tiles,
.catalog-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.product-top {
padding-block: var(--product-page-top) var(--product-page-bottom);
background-color: var(--surface-white);
}
.product-top__inner {
display: flex;
flex-direction: column;
gap: var(--product-page-gap);
align-items: flex-start;
}
.product-top__cols {
display: flex;
gap: var(--product-cols-gap);
align-items: stretch;
width: 100%;
}
.gallery {
display: flex;
flex-direction: column;
gap: var(--gallery-gap);
flex-shrink: 0;
width: var(--product-gallery-w);
}
.gallery__main {
display: block;
width: 100%;
height: var(--gallery-main-h);
padding: var(--gallery-main-pad);
cursor: zoom-in;
border-radius: var(--radius-gallery-main);
background-image: var(--gallery-media-bg);
}
.gallery__photo {
width: 100%;
height: 100%;
object-fit: contain;
}
.gallery__thumbs {
display: grid;
gap: var(--gallery-thumbs-gap);
grid-auto-columns: calc((100% - var(--gallery-thumbs-gap) * 3) / 4);
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
}
.gallery__thumb {
display: block;
width: 100%;
height: var(--gallery-thumb-h);
padding: var(--gallery-thumb-pad);
overflow: hidden;
border: var(--gallery-thumb-bar) solid var(--ink-200);
border-radius: var(--radius-gallery-thumb);
background-image: var(--gallery-media-bg);
transition: border-color var(--duration-fast) var(--ease-out);
}
.gallery__thumb:hover {
border-color: var(--brand-200);
}
.gallery__thumb--current,
.gallery__thumb--current:hover {
border-color: var(--brand-500);
}
.gallery__thumb-photo {
width: 100%;
height: 100%;
object-fit: contain;
}
.lightbox {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
padding: var(--lightbox-pad);
color: var(--surface-white);
border: 0;
background-color: transparent;
}
.lightbox::backdrop {
background-color: var(--lightbox-backdrop);
}
.lightbox__inner {
display: flex;
gap: var(--space-16);
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.lightbox__figure {
display: flex;
flex-direction: column;
gap: var(--space-12);
align-items: center;
flex: 1 1 auto;
min-width: 0;
max-width: var(--lightbox-max-w);
height: 100%;
}
.lightbox__photo {
flex: 1 1 auto;
min-height: 0;
max-width: 100%;
object-fit: contain;
}
.lightbox__counter {
flex-shrink: 0;
font-size: var(--fs-control);
font-weight: var(--fw-semibold);
line-height: var(--lh-control);
}
.lightbox__nav {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--lightbox-nav);
height: var(--lightbox-nav);
color: var(--surface-white);
border: 1px solid var(--lightbox-control-border);
border-radius: var(--radius-round);
background-color: var(--lightbox-control-bg);
transition: background-color var(--duration-fast) var(--ease-out);
}
.lightbox__nav:hover {
background-color: var(--lightbox-control-hover);
}
.lightbox__nav--prev .icon {
transform: rotate(180deg);
}
.lightbox__close {
position: absolute;
top: var(--lightbox-pad);
right: var(--lightbox-pad);
display: flex;
align-items: center;
justify-content: center;
width: var(--lightbox-nav);
height: var(--lightbox-nav);
color: var(--surface-white);
border: 1px solid var(--lightbox-control-border);
border-radius: var(--radius-round);
background-color: var(--lightbox-control-bg);
transition: background-color var(--duration-fast) var(--ease-out);
}
.lightbox__close:hover {
background-color: var(--lightbox-control-hover);
}
.product-info {
display: flex;
flex-direction: column;
gap: var(--space-24);
justify-content: space-between;
flex: 1 1 0;
min-width: 0;
}
.product-info__head {
display: flex;
flex-direction: column;
gap: var(--product-head-gap);
}
.product-info__title {
font-size: var(--fs-product-title);
font-weight: var(--fw-bold);
line-height: var(--lh-product-title);
color: var(--ink-900);
}
.product-info__lead {
font-size: var(--fs-product-lead);
line-height: var(--lh-product-lead);
color: var(--ink-700);
}
.mods {
display: flex;
flex-direction: column;
gap: var(--product-mods-gap);
}
.mods__title {
font-size: var(--fs-overline);
font-weight: var(--fw-bold);
line-height: var(--lh-mods-title);
letter-spacing: var(--ls-overline);
color: var(--ink-400);
text-transform: uppercase;
}
.mods__list {
display: flex;
flex-wrap: wrap;
gap: var(--product-chips-gap);
}
.mods__link {
display: block;
padding: var(--product-mod-padding);
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
line-height: var(--lh-badge);
color: var(--ink-700);
border: 1px solid var(--brand-200);
border-radius: var(--radius-product-badge);
background-color: var(--ink-100);
transition:
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.mods__link:hover,
.mods__link--current {
color: var(--brand-600);
border-color: var(--brand-600);
background-color: var(--brand-50);
}
.ask {
display: flex;
flex-direction: column;
gap: var(--ask-gap);
padding: var(--ask-padding);
border: 1px solid var(--ink-200);
border-radius: var(--radius-ask);
background-color: var(--surface-soft);
}
.ask__text {
font-size: var(--fs-control);
line-height: var(--lh-caption);
color: var(--ink-600);
}
.ask__action {
align-self: flex-start;
}
.specs__row {
display: flex;
border-top: 1px solid var(--ink-100);
gap: var(--space-24);
align-items: baseline;
justify-content: space-between;
padding-block: var(--specs-row-py);
font-size: var(--fs-control);
line-height: var(--lh-control);
}
.specs__row:first-child {
border-top: 0;
}
.specs__name {
color: var(--ink-500);
}
.specs__value {
font-weight: var(--fw-semibold);
color: var(--ink-900);
text-align: right;
}
@media (max-width: 1423px) {
body:has(.product-top) {
--compare-param-col: 260px;
}
}
@media (max-width: 1279px) {
body:has(.product-top) {
--product-cols-gap: var(--space-40);
--gallery-main-h: 460px;
--gallery-thumb-h: 110px;
--gallery-main-pad: var(--space-24);
}
}
@media (max-width: 1023px) {
body:has(.product-top) {
--product-page-top: 128px;
--gallery-main-h: 480px;
--gallery-thumb-h: 132px;
}
.product-top__cols {
flex-direction: column;
gap: var(--space-32);
}
.gallery {
width: 100%;
}
.product-info {
justify-content: flex-start;
}
}
@media (max-width: 767px) {
body:has(.product-top) {
--product-page-top: 112px;
--product-page-bottom: var(--space-48);
--gallery-main-h: 340px;
--gallery-thumb-h: 84px;
--gallery-thumb-pad: var(--space-8);
--gallery-main-pad: var(--space-20);
--fs-product-title: 26px;  --lh-product-title: 34px;
--fs-product-lead: 16px;   --lh-product-lead: 24px;
--ask-padding: 18px 18px;
--lightbox-nav: 40px;
}
.specs__row {
flex-direction: column;
gap: var(--space-4);
align-items: flex-start;
}
.specs__value {
text-align: left;
}
.ask__action {
align-self: stretch;
justify-content: center;
}
}
@media (max-width: 599px) {
body:has(.product-top) {
--gallery-main-h: 280px;
--gallery-thumb-h: 72px;
}
}
.product-sections {
position: relative;
}
.product-nav {
position: sticky;
top: var(--product-nav-stick);
z-index: var(--z-product-nav);
border-bottom: 1px solid var(--ink-100);
background-color: var(--product-nav-bg);
}
.product-nav__list {
display: flex;
gap: var(--product-nav-gap);
align-items: flex-end;
justify-content: center;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.product-nav__item {
flex-shrink: 0;
}
.product-nav__link {
display: block;
padding-block: var(--product-nav-top) var(--product-nav-bottom);
padding-inline: var(--product-nav-tab-px);
font-size: var(--fs-product-tab);
font-weight: var(--fw-semibold);
line-height: var(--lh-product-tab);
color: var(--ink-600);
white-space: nowrap;
border-bottom: var(--product-nav-bar) solid transparent;
transition: color var(--duration-fast) var(--ease-out);
}
.product-nav__link:hover {
color: var(--brand-500);
}
.product-nav__link--current,
.product-nav__link--current:hover {
color: var(--brand-600);
border-bottom-color: var(--brand-500);
}
.product-tab {
position: relative;
padding-block: var(--product-tab-top) var(--product-tab-bottom);
scroll-margin-top: calc(var(--product-nav-stick) + var(--product-nav-h));
background-color: var(--surface-white);
}
.product-tab--soft {
background-color: var(--surface-soft);
}
.product-tab::after {
content: "";
position: absolute;
bottom: 0;
left: var(--container-edge);
right: var(--container-edge);
height: 1px;
background-color: var(--ink-200);
}
.product-tab--soft::after {
content: none;
}
.product-tab__inner {
display: flex;
flex-direction: column;
gap: var(--product-tab-gap);
}
.merits {
display: grid;
gap: var(--merits-gap);
grid-template-columns: repeat(3, minmax(0, 1fr));
counter-reset: merit;
}
.merit {
display: flex;
flex-direction: column;
gap: var(--merit-gap);
height: 100%;
padding: var(--merit-padding);
border: 1px solid var(--ink-200);
border-radius: var(--radius-merit);
background-color: var(--surface-soft);
}
.merit::before {
counter-increment: merit;
content: counter(merit, decimal-leading-zero);
font-size: var(--fs-merit-num);
font-weight: var(--fw-bold);
line-height: var(--lh-merit-num);
letter-spacing: var(--ls-merit-num);
color: var(--brand-500);
}
.merit__title {
font-size: var(--fs-merit-title);
font-weight: var(--fw-semibold);
line-height: var(--lh-merit-title);
color: var(--ink-900);
}
.merit__text {
font-size: var(--fs-merit-text);
line-height: var(--lh-merit-text);
color: var(--ink-600);
}
.about-model {
display: flex;
gap: var(--about-cols-gap);
align-items: flex-start;
}
.about-model__text {
display: flex;
flex-direction: column;
gap: var(--about-text-gap);
flex: 1 1 0;
min-width: 0;
font-size: var(--fs-body-s);
line-height: var(--lh-body-m);
color: var(--ink-700);
}
.fits {
display: flex;
flex-direction: column;
gap: var(--fits-gap);
flex-shrink: 0;
width: var(--fits-width);
padding: var(--fits-padding);
border-radius: var(--radius-fits);
background-color: var(--brand-50);
}
.fits__title {
font-size: var(--fs-fits-title);
font-weight: var(--fw-semibold);
line-height: var(--lh-fits-title);
color: var(--ink-900);
}
.fits__list {
display: flex;
flex-direction: column;
gap: var(--fits-gap);
}
.fits__item {
display: flex;
gap: var(--fits-item-gap);
align-items: center;
font-size: var(--fs-fits-item);
font-weight: var(--fw-medium);
line-height: var(--lh-fits-item);
color: var(--ink-700);
}
.fits__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--fits-icon);
height: var(--fits-icon);
border-radius: var(--radius-fits-icon);
background-color: var(--surface-white);
}
.mod-switch {
display: flex;
flex-direction: column;
gap: var(--mod-switch-gap);
align-items: flex-start;
}
.mod-switch__label {
font-size: var(--fs-nav);
font-weight: var(--fw-medium);
line-height: var(--lh-nav);
color: var(--ink-600);
}
.mod-switch__list {
display: flex;
flex-wrap: wrap;
gap: var(--mod-switch-chips-gap);
}
.mod-switch__chip {
padding: var(--mod-chip-padding);
font-size: var(--fs-control);
font-weight: var(--fw-semibold);
line-height: var(--lh-control);
color: var(--ink-700);
border: 1px solid var(--brand-200);
border-radius: var(--radius-mod-chip);
background-color: var(--ink-100);
transition:
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.mod-switch__chip:hover {
border-color: var(--brand-600);
}
.mod-switch__chip--current,
.mod-switch__chip--current:hover {
color: var(--surface-white);
border-color: var(--brand-600);
background-color: var(--brand-600);
}
.spec-groups {
columns: 2;
column-gap: var(--spec-cols-gap);
}
.spec-group {
break-inside: avoid;
margin-bottom: var(--spec-groups-gap);
}
.spec-group__title {
font-size: var(--fs-spec-group);
font-weight: var(--fw-bold);
line-height: var(--lh-spec-group);
letter-spacing: var(--ls-spec-group);
color: var(--brand-500);
text-transform: uppercase;
}
.spec-group__list {
border-top: 1px solid var(--ink-200);
}
.spec-group__row {
display: flex;
gap: var(--space-16);
align-items: flex-start;
justify-content: space-between;
padding-block: var(--spec-row-py);
font-size: var(--fs-spec);
line-height: var(--lh-spec);
border-bottom: 1px solid var(--ink-100);
}
.spec-group__name {
flex: 1 1 0;
min-width: 0;
color: var(--ink-500);
}
.spec-group__value {
flex-shrink: 0;
width: var(--spec-value-w);
font-weight: var(--fw-semibold);
color: var(--ink-900);
text-align: right;
}
.compare {
overflow-x: auto;
border: 1px solid var(--ink-200);
border-radius: var(--radius-compare);
}
.compare__table {
width: 100%;
min-width: max-content;
table-layout: fixed;
border-collapse: collapse;
font-size: var(--fs-compare);
line-height: var(--lh-compare);
}
.compare__head {
width: var(--compare-col);
padding: var(--compare-head-py) var(--compare-cell-px);
font-weight: var(--fw-bold);
color: var(--brand-600);
text-align: left;
background-color: var(--surface-soft);
}
.compare__head--param {
width: var(--compare-param-col);
color: var(--ink-900);
}
.compare__row:nth-child(even) {
background-color: var(--ink-50);
}
.compare__name,
.compare__cell {
padding: var(--compare-row-py) var(--compare-cell-px);
text-align: left;
vertical-align: top;
}
.compare__name {
font-weight: var(--fw-regular);
color: var(--ink-500);
}
.compare__cell {
font-weight: var(--fw-semibold);
color: var(--ink-900);
}
.compare__cell--current,
.compare__head--current {
background-color: var(--brand-50);
}
.docs {
display: grid;
gap: var(--docs-list-gap);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doc-card {
display: flex;
gap: var(--doc-gap);
align-items: center;
height: 100%;
padding: var(--doc-padding);
border: 1px solid var(--ink-200);
border-radius: var(--radius-doc);
background-color: var(--surface-white);
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.doc-card:hover {
border-color: var(--brand-200);
box-shadow: var(--shadow-catalog-card);
}
.doc-card__ext {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--doc-icon);
height: var(--doc-icon);
font-size: var(--fs-doc-ext);
font-weight: var(--fw-bold);
line-height: var(--lh-doc-ext);
color: var(--brand-600);
border-radius: var(--radius-doc-icon);
background-color: var(--brand-50);
}
.doc-card__text {
flex: 1 1 0;
min-width: 0;
}
.doc-card__title {
font-size: var(--fs-doc-title);
font-weight: var(--fw-semibold);
line-height: var(--lh-doc-title);
color: var(--ink-900);
}
.doc-card__note {
font-size: var(--fs-doc-text);
line-height: var(--lh-doc-text);
color: var(--ink-500);
}
.doc-card__meta {
flex-shrink: 0;
font-size: var(--fs-doc-meta);
font-weight: var(--fw-medium);
line-height: var(--lh-doc-meta);
color: var(--ink-400);
}
.addons {
--slider-gap: var(--addons-grid-gap);
--slider-item: calc((100% - var(--slider-gap) * 2) / 3);
--slider-pad-top: var(--space-4);
--slider-pad-bottom: var(--space-16);
}
@media (max-width: 1279px) {
body:has(.product-top) {
--product-tab-top: 72px;
--product-tab-bottom: 72px;
--fits-width: 340px;
--about-cols-gap: var(--space-32);
}
}
@media (max-width: 1023px) {
body:has(.product-top) {
--spec-value-w: 220px;
}
.product-nav__list {
justify-content: flex-start;
}
.merits {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-model {
flex-direction: column;
}
.fits {
width: 100%;
}
.spec-groups {
columns: 1;
}
.docs {
grid-template-columns: minmax(0, 1fr);
}
.addons {
--slider-item: calc((100% - var(--slider-gap)) / 2);
}
}
@media (max-width: 767px) {
.mod-switch__list {
max-width: 100%;
flex-wrap: nowrap;
padding-inline-end: var(--space-4);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.mod-switch__chip {
flex-shrink: 0;
}
body:has(.product-top) {
--product-tab-top: var(--space-48);
--product-tab-bottom: var(--space-48);
--merit-padding: var(--space-20);
--fits-padding: var(--space-20);
--doc-padding: var(--space-16);
}
.merits {
grid-template-columns: minmax(0, 1fr);
}
.spec-group__row {
flex-direction: column;
gap: var(--space-4);
}
.spec-group__value {
width: 100%;
text-align: left;
}
.doc-card__meta {
display: none;
}
}
@media (max-width: 599px) {
.addons {
--slider-item: 100%;
}
}
.ask__row {
display: flex;
flex-wrap: wrap;
gap: var(--space-12);
align-items: center;
justify-content: space-between;
}
.ask__price {
display: flex;
flex-wrap: wrap;
gap: var(--space-12);
align-items: baseline;
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
line-height: var(--lh-h4);
color: var(--ink-900);
}
.ask__price-old {
font-size: var(--fs-body-s);
font-weight: var(--fw-medium);
line-height: var(--lh-body-s);
color: var(--ink-400);
text-decoration: line-through;
}
.ask__stock {
display: inline-flex;
gap: var(--space-6);
align-items: center;
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
line-height: var(--lh-badge);
color: var(--ink-800);
}
.ask__stock::before {
content: "";
width: var(--space-6);
height: var(--space-6);
border-radius: var(--radius-round);
background-color: var(--ink-300);
}
.ask__stock--in-stock::before {
background-color: var(--status-in-stock);
}
.ask__stock--out-of-stock::before {
background-color: var(--accent-red);
}
.blog-hero {
position: relative;
padding-block: var(--blog-hero-top) var(--space-100);
overflow: hidden;
background-color: var(--surface-blue-soft);
isolation: isolate;
}
.blog-hero__decor {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: var(--blog-decor-width);
height: 100%;
max-width: none;
pointer-events: none;
}
.blog-hero__inner {
display: flex;
flex-direction: column;
gap: var(--space-60);
}
.blog-hero__head {
display: flex;
flex-direction: column;
gap: var(--space-24);
align-items: center;
text-align: center;
}
.blog-hero__eyebrow {
align-items: center;
}
.blog-hero__title {
max-width: var(--blog-title-max);
text-transform: uppercase;
}
.blog-hero__lead {
max-width: var(--blog-lead-max);
font-size: var(--fs-body-l);
font-weight: var(--fw-medium);
line-height: var(--lh-body-l);
color: var(--ink-600);
}
.blog-list {
padding-block: var(--section-py);
}
.blog-list__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-40) var(--space-32);
margin-bottom: var(--space-60);
}
@media (max-width: 1279px) {
.blog-list__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1023px) {
.blog-hero {
padding-block: var(--blog-hero-top) var(--space-64);
}
.blog-list {
padding-block: var(--space-80);
}
.blog-hero__inner {
gap: var(--space-40);
}
}
@media (max-width: 767px) {
.blog-list {
padding-block: var(--space-56);
}
.blog-list__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-24);
margin-bottom: var(--space-40);
}
.pagination__page:not(.pagination__page--current) {
display: none;
}
.pagination__dots {
display: none;
}
}
.article-hero {
padding-block: var(--article-hero-top) var(--article-hero-bottom);
background: var(--gradient-article-hero);
}
.article-hero__inner {
display: flex;
flex-direction: column;
gap: var(--space-60);
}
.article-hero__head {
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.article-hero__title {
max-width: var(--article-hero-title);
letter-spacing: normal;
}
.article-hero__lead {
max-width: var(--article-hero-lead);
font-size: var(--fs-article-lead);
line-height: var(--lh-article-lead);
color: var(--ink-700);
}
.article-hero__media {
aspect-ratio: var(--article-hero-media-ratio);
min-height: var(--article-hero-media-min);
overflow: hidden;
border-radius: var(--radius-article-media);
}
.article-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-body {
padding-block: var(--article-body-py);
}
.article-body__inner {
display: grid;
grid-template-columns: var(--article-aside) minmax(0, var(--article-measure));
gap: var(--article-columns-gap);
align-items: start;
}
.article-body__aside {
position: sticky;
top: var(--article-anchor-offset);
display: flex;
flex-direction: column;
gap: var(--space-32);
}
.article-body__content {
display: flex;
flex-direction: column;
gap: var(--article-section-gap);
}
.related {
padding-block: var(--space-100);
background-color: var(--surface-mist);
}
.related__head {
display: flex;
flex-direction: column;
gap: var(--space-16);
margin-bottom: var(--space-60);
}
.related__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--related-gap);
}
@media (max-width: 1279px) {
.article-body__inner {
grid-template-columns: var(--article-aside) minmax(0, 1fr);
gap: var(--space-48);
}
}
@media (max-width: 1023px) {
.article-body__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-40);
}
.article-body__aside {
position: static;
}
.article-body__help {
display: none;
}
.toc__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-32);
}
.related__grid {
grid-template-columns: minmax(0, 1fr);
}
.related__head {
margin-bottom: var(--space-40);
}
}
@media (max-width: 767px) {
.toc__list {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
.toc__link {
padding-block: var(--space-8);
}
.related {
padding-block: var(--space-64);
}
}
.notfound {
padding-block: var(--notfound-top) var(--notfound-bottom);
background-image: var(--notfound-bg);
}
.notfound--screen {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
min-height: 100svh;
padding-block: var(--notfound-bottom);
}
.notfound__inner {
display: flex;
flex-direction: column;
gap: var(--notfound-gap);
align-items: center;
text-align: center;
}
.notfound__code {
font-size: var(--fs-notfound-code);
font-weight: var(--fw-extrabold);
line-height: var(--lh-notfound-code);
letter-spacing: var(--ls-notfound-code);
color: var(--brand-500);
}
.notfound__head {
display: flex;
flex-direction: column;
gap: var(--space-16);
max-width: var(--notfound-text);
}
.notfound__text {
color: var(--ink-700);
}
.notfound__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
justify-content: center;
}
.notfound__links {
display: flex;
flex-direction: column;
gap: var(--space-12);
align-items: center;
}
.notfound__links-title {
font-size: var(--fs-overline);
font-weight: var(--fw-bold);
line-height: var(--lh-overline);
letter-spacing: var(--ls-overline);
color: var(--ink-400);
text-transform: uppercase;
}
.notfound__list {
display: flex;
flex-wrap: wrap;
gap: var(--notfound-links-gap);
justify-content: center;
}
@media (max-width: 1023px) {
body:has(.notfound) {
--notfound-top: 176px;
--notfound-bottom: var(--space-96);
--fs-notfound-code: 112px;
}
}
@media (max-width: 767px) {
body:has(.notfound) {
--notfound-top: 140px;
--notfound-bottom: var(--space-64);
--notfound-gap: var(--space-24);
--fs-notfound-code: 88px;
--notfound-links-gap: var(--space-16);
}
.notfound__actions {
align-self: stretch;
flex-direction: column;
}
.notfound__action {
justify-content: center;
}
}
.catalog[aria-busy="true"] .results {
opacity: 0.6;
transition: opacity var(--duration-fast) var(--ease-out);
}
.filters__submit {
gap: 0.28em;
}
.block {
display: contents;
}
.search-page__form {
display: flex;
gap: 12px;
max-width: 640px;
margin-top: 24px;
}
.search-page__input {
flex: 1;
}
.search-page .related__head + .related__grid {
margin-bottom: 40px;
}