@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/site/assets/fonts/manrope-cyrillic.woff2') 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: 400 800;
font-display: swap;
src: url('/site/assets/fonts/manrope-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/site/assets/fonts/inter-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/site/assets/fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--ds-gray-0: #ffffff;
--ds-gray-25: #fcfcfd;
--ds-gray-50: #f6f7f8;
--ds-gray-100: #ebecef;
--ds-gray-200: #d4d8dd;
--ds-gray-300: #aab0bb;
--ds-gray-500: #5d636f;
--ds-gray-600: #424b57;
--ds-gray-700: #29313d;
--ds-gray-800: #161d27;
--ds-gray-900: #0c111c;
--ds-gray-950: #010309;
--ds-accent-50: #fce9e7;
--ds-accent-100: #f7c1bb;
--ds-accent-200: #f19483;
--ds-accent-400: #ff4d36;
--ds-accent-500: #e1443a;
--ds-accent-600: #c53c33;
--ds-accent-700: #a2342c;
--ds-accent-800: #842a23;
--ds-success-50: #dcfce7;
--ds-success-300: #86efac;
--ds-success-500: #22c55e;
--ds-success-600: #16a34a;
--ds-success-800: #166534;
--ds-danger-300: #fca5a5;
--ds-danger-600: #dc2626;
--ds-danger-700: #b91c1c;
--ds-text: #0a0a0a;
--ds-text-secondary: #616161;
--ds-text-tertiary: #a3a3a3;
--ds-text-inverse: #fafafa;
--ds-text-accent: var(--ds-accent-600);
--ds-text-accent-on-muted: #c2392f;
--ds-text-closed: #404040;
--ds-bg: var(--ds-gray-0);
--ds-page-bg: var(--ds-gray-50);
--ds-bg-subtle: var(--ds-gray-25);
--ds-bg-muted: var(--ds-gray-50);
--ds-bg-strong: var(--ds-gray-100);
--ds-bg-inverse: var(--ds-gray-950);
--ds-border: var(--ds-gray-100);
--ds-border-strong: var(--ds-gray-200);
--ds-focus-ring: var(--ds-accent-400);
--ds-guide: rgba(212, 216, 221, 0.5);
--ds-gradient-accent: linear-gradient(180deg, var(--ds-accent-400) 0%, var(--ds-accent-600) 100%);
--ds-gradient-card: linear-gradient(180deg, var(--ds-gray-0) 0%, var(--ds-gray-25) 100%);
--ds-gradient-panel: linear-gradient(180deg, var(--ds-gray-50) 0%, var(--ds-gray-100) 100%);
--ds-gradient-button: linear-gradient(180deg, var(--ds-accent-500) 0%, var(--ds-accent-600) 100%);
--ds-gradient-send: linear-gradient(180deg, var(--ds-accent-400) 0%, var(--ds-accent-500) 100%);
--ds-gradient-hero: radial-gradient(60% 50% at 50% 0%, var(--ds-accent-50) 0%, rgba(252, 233, 231, 0) 100%);
--ds-font-display: var(--font-manrope, 'Manrope'), 'Helvetica Neue', Arial, sans-serif;
--ds-font-body: var(--font-inter, 'Inter'), 'Helvetica Neue', Arial, sans-serif;
--ds-display-size: 64px;
--ds-display-lh: 1.1;
--ds-h1-size: 48px;
--ds-h1-lh: 1.2;
--ds-h2-size: 40px;
--ds-h2-lh: 1.2;
--ds-h3-size: 32px;
--ds-h3-lh: 1.2;
--ds-h4-size: 28px;
--ds-h4-lh: 1.2;
--ds-h5-size: 24px;
--ds-h5-lh: 1.2;
--ds-h6-size: 20px;
--ds-h6-lh: 1.4;
--ds-tracking-tight: -0.03em;
--ds-tracking-snug: -0.025em;
--ds-tracking-normal: -0.015em;
--ds-text-lg: 18px;
--ds-text-md: 16px;
--ds-text-sm: 14px;
--ds-text-xs: 12px;
--ds-text-lh: 1.3;
--ds-prose-lh: 1.6;
--ds-weight-regular: 400;
--ds-weight-medium: 500;
--ds-weight-semibold: 600;
--ds-weight-bold: 700;
--ds-space-1: 4px;
--ds-space-2: 8px;
--ds-space-3: 12px;
--ds-space-4: 16px;
--ds-space-5: 24px;
--ds-space-6: 32px;
--ds-space-7: 40px;
--ds-space-8: 60px;
--ds-space-9: 80px;
--ds-space-10: 120px;
--ds-section-y: 120px;
--ds-stack-header: 24px;
--ds-container-max: 1376px;
--ds-container-narrow: 760px;
--ds-gutter: 32px;
--ds-grid-gap: 24px;
--ds-radius-xs: 4px;
--ds-radius-sm: 10px;
--ds-radius-md: 16px;
--ds-radius-lg: 24px;
--ds-radius-xl: 32px;
--ds-radius-2xl: 56px;
--ds-radius-pill: 999px;
--ds-shadow-xs: 0 1px 2px rgba(1, 3, 9, 0.06), 0 0 0 1px rgba(1, 3, 9, 0.04);
--ds-shadow-sm:
0 9px 20px rgba(1, 3, 9, 0.1), 0 36px 36px rgba(1, 3, 9, 0.09), 0 81px 49px rgba(1, 3, 9, 0.05),
0 144px 58px rgba(1, 3, 9, 0.01);
--ds-shadow-md:
0 9px 20px rgba(1, 3, 9, 0.15), 0 36px 36px rgba(1, 3, 9, 0.1), 0 81px 49px rgba(1, 3, 9, 0.06),
0 144px 58px rgba(1, 3, 9, 0.04), 0 225px 63px rgba(1, 3, 9, 0.02);
--ds-shadow-lg:
0 7px 16px rgba(1, 3, 9, 0.25), 0 29px 29px rgba(1, 3, 9, 0.2), 0 65px 39px rgba(1, 3, 9, 0.15),
0 115px 46px rgba(1, 3, 9, 0.06), 0 180px 51px rgba(1, 3, 9, 0.03);
--ds-shadow-icon: 0 4px 10px rgba(1, 3, 9, 0.18), 0 12px 20px rgba(1, 3, 9, 0.08);
--ds-ease: cubic-bezier(0.44, 0, 0.56, 1);
--ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ds-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
--ds-duration-spring: 700ms;
--ds-duration-fast: 150ms;
--ds-duration: 250ms;
--ds-duration-slow: 500ms;
--ds-control-h-sm: 40px;
--ds-control-h-md: 52px;
--ds-control-h-lg: 64px;
--ds-input-h: 48px;
--ds-radius-input: 24px;
--ds-header-h: 84px;
}
@media (max-width: 1199px) {
:root {
--ds-display-size: 52px;
--ds-h1-size: 44px;
--ds-h2-size: 36px;
--ds-h3-size: 28px;
--ds-section-y: 100px;
--ds-gutter: 24px;
}
}
@media (max-width: 809px) {
:root {
--ds-display-size: 40px;
--ds-h1-size: 36px;
--ds-h1-lh: 1.12;
--ds-h2-size: 32px;
--ds-h2-lh: 1.12;
--ds-h3-size: 24px;
--ds-h4-size: 22px;
--ds-h5-size: 20px;
--ds-text-lg: 16px;
--ds-section-y: 72px;
--ds-gutter: 16px;
--ds-grid-gap: 16px;
--ds-radius-2xl: 32px;
--ds-header-h: 64px;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--ds-duration-fast: 0ms;
--ds-duration: 0ms;
--ds-duration-slow: 0ms;
--ds-duration-spring: 0ms;
}
}
.ds {
font-family: var(--ds-font-body);
font-size: var(--ds-text-md);
font-weight: var(--ds-weight-medium);
line-height: var(--ds-text-lh);
color: var(--ds-text);
background: var(--ds-page-bg);
-webkit-font-smoothing: antialiased;
}
.ds :focus-visible {
outline: 2px solid var(--ds-focus-ring);
outline-offset: 3px;
}
.ds-display,
.ds-h1,
.ds-h2,
.ds-h3,
.ds-h4,
.ds-h5,
.ds-h6 {
margin: 0;
font-family: var(--ds-font-display);
font-weight: var(--ds-weight-bold);
color: var(--ds-text);
text-wrap: balance;
}
.ds-display {
font-size: var(--ds-display-size);
line-height: var(--ds-display-lh);
letter-spacing: var(--ds-tracking-tight);
}
.ds-h1 {
font-size: var(--ds-h1-size);
line-height: var(--ds-h1-lh);
letter-spacing: var(--ds-tracking-tight);
}
.ds-h2 {
font-size: var(--ds-h2-size);
line-height: var(--ds-h2-lh);
letter-spacing: var(--ds-tracking-tight);
}
.ds-h3 {
font-size: var(--ds-h3-size);
line-height: var(--ds-h3-lh);
letter-spacing: var(--ds-tracking-tight);
}
.ds-h4 {
font-size: var(--ds-h4-size);
line-height: var(--ds-h4-lh);
letter-spacing: var(--ds-tracking-snug);
}
.ds-h5 {
font-size: var(--ds-h5-size);
line-height: var(--ds-h5-lh);
font-weight: var(--ds-weight-semibold);
letter-spacing: var(--ds-tracking-snug);
}
.ds-h6 {
font-size: var(--ds-h6-size);
line-height: var(--ds-h6-lh);
font-weight: var(--ds-weight-semibold);
letter-spacing: var(--ds-tracking-normal);
}
.ds-muted-line {
display: block;
color: var(--ds-text-tertiary);
}
.ds-lead,
.ds-text-lg,
.ds-text-md,
.ds-text-sm,
.ds-text-xs {
margin: 0;
font-family: var(--ds-font-body);
font-weight: var(--ds-weight-medium);
line-height: var(--ds-text-lh);
}
.ds-lead {
font-size: var(--ds-text-lg);
color: var(--ds-text-secondary);
max-width: 480px;
}
.ds-text-lg {
font-size: var(--ds-text-lg);
}
.ds-text-md {
font-size: var(--ds-text-md);
}
.ds-text-sm {
font-size: var(--ds-text-sm);
}
.ds-text-xs {
font-size: var(--ds-text-xs);
}
.ds-secondary {
color: var(--ds-text-secondary);
}
.ds-overline {
font-size: var(--ds-text-xs);
font-weight: var(--ds-weight-medium);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ds-text-secondary);
}
.ds-link {
color: var(--ds-text);
text-decoration: underline;
text-decoration-color: var(--ds-border-strong);
text-underline-offset: 3px;
transition: text-decoration-color var(--ds-duration) var(--ds-ease);
}
.ds-link:hover {
text-decoration-color: var(--ds-accent-400);
}
.ds-link--accent {
color: var(--ds-text-accent);
text-decoration: none;
}
.ds-link--accent:hover {
text-decoration: underline;
}
.ds-prose {
max-width: var(--ds-container-narrow);
font-size: var(--ds-text-lg);
font-weight: var(--ds-weight-regular);
line-height: var(--ds-prose-lh);
color: var(--ds-gray-700);
}
.ds-prose > * + * {
margin-top: 1em;
}
.ds-prose h2 {
margin-top: 2em;
font-family: var(--ds-font-display);
font-size: var(--ds-h4-size);
line-height: var(--ds-h4-lh);
letter-spacing: var(--ds-tracking-snug);
color: var(--ds-text);
}
.ds-prose h3 {
margin-top: 1.6em;
font-family: var(--ds-font-display);
font-size: var(--ds-h6-size);
color: var(--ds-text);
}
.ds-prose a {
color: var(--ds-text-accent);
text-underline-offset: 3px;
}
.ds-prose blockquote {
margin-inline: 0;
padding: var(--ds-space-5);
border-radius: var(--ds-radius-lg);
background: var(--ds-bg-subtle);
font-family: var(--ds-font-display);
font-size: var(--ds-h6-size);
font-weight: var(--ds-weight-semibold);
color: var(--ds-text);
}
.ds-container {
width: 100%;
max-width: calc(var(--ds-container-max) + var(--ds-gutter) * 2);
margin-inline: auto;
padding-inline: var(--ds-gutter);
}
.ds-container--narrow {
max-width: calc(var(--ds-container-narrow) + var(--ds-gutter) * 2);
}
.ds-frame {
position: relative;
max-width: var(--ds-container-max);
margin-inline: auto;
border-inline: 1px dashed var(--ds-guide);
}
.ds-frame > .ds-band + .ds-band {
border-top: 1px dashed var(--ds-guide);
}
.ds-band {
padding-block: var(--ds-section-y);
}
.ds-band--first {
padding-top: var(--ds-space-9);
}
.ds-band--last {
padding-bottom: var(--ds-space-6);
}
.ds-page {
padding-inline: var(--ds-gutter);
}
.ds-section {
padding-block: var(--ds-section-y);
}
.ds-section--tight {
padding-block: calc(var(--ds-section-y) / 2);
}
.ds-mark {
display: block;
width: 12px;
height: 12px;
border-radius: 3px;
background: var(--ds-accent-500);
}
.ds-section-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--ds-stack-header);
max-width: 640px;
margin-bottom: var(--ds-space-8);
}
.ds-section-head--center {
align-items: center;
margin-inline: auto;
text-align: center;
}
.ds-grid {
display: grid;
gap: var(--ds-grid-gap);
}
.ds-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ds-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ds-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1199px) {
.ds-grid--3,
.ds-grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 809px) {
.ds-grid--2,
.ds-grid--3,
.ds-grid--4 {
grid-template-columns: minmax(0, 1fr);
}
}
.ds-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: var(--ds-grid-gap);
}
.ds-split--aside {
grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
}
@media (max-width: 1199px) {
.ds-split,
.ds-split--aside {
grid-template-columns: minmax(0, 1fr);
gap: var(--ds-space-7);
}
}
.ds-column {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--ds-space-7);
align-self: stretch;
}
@media (max-width: 1199px) {
.ds-column--unwrap {
display: contents;
}
.ds-order-last {
order: 1;
}
}
@media (min-width: 1200px) {
.ds-sticky {
position: sticky;
top: calc(var(--ds-header-h) + var(--ds-space-5));
}
}
.ds-bento {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ds-grid-gap);
}
.ds-bento > :first-child {
grid-column: span 2;
}
@media (max-width: 809px) {
.ds-bento {
grid-template-columns: minmax(0, 1fr);
}
.ds-bento > :first-child {
grid-column: auto;
}
}
.ds-stack {
display: flex;
flex-direction: column;
gap: var(--ds-space-4);
}
.ds-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-3);
}
.ds-btn {
--_h: var(--ds-control-h-md);
--_px: var(--ds-space-6);
--_fs: var(--ds-text-md);
--_inset: 10px;
--_icon-w: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-3);
height: var(--_h);
padding: 0 var(--_px);
border: 0;
border-radius: var(--ds-radius-pill);
font-family: var(--ds-font-body);
font-size: var(--_fs);
font-weight: var(--ds-weight-medium);
line-height: 1.3;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--ds-duration-spring) var(--ds-ease-spring),
color var(--ds-duration-spring) var(--ds-ease-spring),
opacity var(--ds-duration) var(--ds-ease),
transform var(--ds-duration-fast) var(--ds-ease);
}
.ds-btn:active {
transform: scale(0.98);
}
.ds-btn:disabled,
.ds-btn[aria-disabled='true'] {
opacity: 0.4;
pointer-events: none;
}
.ds-btn--sm {
--_h: var(--ds-control-h-sm);
--_px: var(--ds-space-4);
--_fs: var(--ds-text-xs);
--_inset: 8px;
--_icon-w: 40px;
}
.ds-btn--lg {
--_h: var(--ds-control-h-lg);
--_px: var(--ds-space-7);
--_fs: var(--ds-text-lg);
--_inset: 12px;
--_icon-w: 64px;
}
.ds-btn--block {
width: 100%;
}
.ds-btn--icon {
justify-content: space-between;
padding: var(--_inset) var(--_inset) var(--_inset) calc(var(--_px) - var(--ds-space-1));
}
.ds-btn__icon {
--_ih: calc(var(--_h) - var(--_inset) * 2);
flex: none;
display: grid;
place-items: center;
overflow: hidden;
width: var(--_icon-w);
height: var(--_ih);
border-radius: var(--ds-radius-pill);
background: var(--ds-gray-50);
color: var(--ds-text);
box-shadow:
0 9px 20px rgba(1, 3, 9, 0.1),
0 2px 6px rgba(1, 3, 9, 0.06);
transition: box-shadow var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-btn__glyph {
display: block;
width: 20px;
height: 20px;
transition: transform var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-btn--sm .ds-btn__glyph {
width: 14px;
height: 14px;
}
.ds-btn__glyph > svg {
display: block;
width: 100%;
height: 100%;
}
.ds-btn:hover .ds-btn__icon {
box-shadow: none;
}
.ds-btn:hover .ds-btn__glyph {
transform: translateX(10px);
}
.ds-btn--sm:hover .ds-btn__glyph {
transform: translateX(6px);
}
.ds-btn--primary {
color: #fff;
background: var(--ds-gradient-button);
}
.ds-btn--dark {
color: var(--ds-text-inverse);
background: var(--ds-bg-inverse);
}
.ds-btn--dark:hover {
background: var(--ds-gray-800);
}
.ds-btn--dark .ds-btn__icon {
background: var(--ds-gray-800);
color: var(--ds-text-inverse);
box-shadow: none;
}
.ds-btn--light {
color: var(--ds-text);
background: var(--ds-bg-subtle);
}
.ds-btn--light:hover {
background: var(--ds-bg-muted);
}
.ds-btn--text {
color: var(--ds-text);
background: transparent;
}
.ds-btn--text:hover {
color: var(--ds-text-accent);
}
.ds-icon-btn {
display: inline-grid;
place-items: center;
width: 52px;
height: 40px;
border: 0;
border-radius: var(--ds-radius-pill);
background: var(--ds-gray-100);
color: var(--ds-text);
cursor: pointer;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-icon-btn:hover {
background: var(--ds-gray-200);
}
.ds-icon-btn svg {
width: 18px;
height: 18px;
}
.ds-badge {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
height: 36px;
padding: 0 var(--ds-space-4);
border-radius: var(--ds-radius-pill);
background: var(--ds-bg);
font-size: var(--ds-text-xs);
font-weight: var(--ds-weight-medium);
color: var(--ds-text);
white-space: nowrap;
}
.ds-badge__dot {
position: relative;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ds-accent-400);
}
.ds-badge__dot::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: inherit;
animation: ds-pulse 1.8s var(--ds-ease-out) infinite;
}
.ds-badge--success .ds-badge__dot {
background: var(--ds-success-500);
}
@keyframes ds-pulse {
from {
transform: scale(1);
opacity: 0.7;
}
to {
transform: scale(3);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ds-badge__dot::after {
animation: none;
}
}
.ds-tag {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 var(--ds-space-2);
border-radius: var(--ds-radius-pill);
background: var(--ds-bg-strong);
font-size: var(--ds-text-xs);
font-weight: var(--ds-weight-medium);
color: var(--ds-text-secondary);
}
.ds-tag--accent {
background: var(--ds-accent-50);
color: var(--ds-accent-700);
}
.ds-tag--success {
background: var(--ds-success-50);
color: var(--ds-success-800);
}
.ds-tag--dark {
background: var(--ds-bg-inverse);
color: var(--ds-text-inverse);
}
.ds-count {
display: inline-flex;
align-items: center;
height: 20px;
min-width: 20px;
padding: 2px 6px;
border-radius: var(--ds-radius-pill);
background: var(--ds-accent-600);
font-size: var(--ds-text-xs);
font-weight: var(--ds-weight-medium);
line-height: 1;
color: #fff;
}
.ds-count--dark {
background: #010309;
}
.ds-count--soft {
background: #fce9e7;
color: var(--ds-accent-600);
}
.ds-footer__links .ds-count {
flex: none;
margin-left: 6px;
}
.ds-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ds-accent-400);
}
.ds-dot--blink {
margin-left: 6px;
animation: ds-dot-blink 1.43s infinite;
}
@keyframes ds-dot-blink {
0%,
42% {
opacity: 1;
animation-timing-function: cubic-bezier(0.44, 0, 0.56, 1);
}
95%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.ds-dot--blink {
animation: none;
}
}
.ds-header-wrap {
display: contents;
}
.ds-header {
position: sticky;
top: 0;
z-index: 50;
padding: 10px var(--ds-gutter);
transition:
transform var(--ds-duration-spring) var(--ds-ease-spring),
opacity var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-header.is-hidden {
transform: translateY(-100%);
opacity: 0;
}
.ds-header__inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--ds-space-5);
max-width: var(--ds-container-max);
margin-inline: auto;
}
.ds-header__logo {
display: inline-flex;
align-items: center;
color: var(--ds-text);
text-decoration: none;
}
.ds-header__logo img {
display: block;
width: auto;
height: 22px;
}
.ds-header__logo .ds-header__mark {
display: none;
width: 44px;
height: 44px;
border-radius: 12px;
}
@media (max-width: 1199px) {
.ds-header__logo .ds-header__wordmark { display: none; }
.ds-header__logo .ds-header__mark { display: block; }
}
.ds-header__actions {
display: none;
align-items: center;
gap: var(--ds-space-2);
}
.ds-nav {
position: relative;
display: flex;
align-items: center;
gap: var(--ds-space-1);
height: 64px;
margin-left: auto;
padding: var(--ds-space-3);
border-radius: 100px;
background: var(--ds-bg-subtle);
}
.ds-nav .ds-btn {
margin-left: var(--ds-space-4);
}
.ds-nav__link {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
height: 40px;
padding: 0 var(--ds-space-4);
border-radius: var(--ds-radius-pill);
background: rgba(246, 247, 248, 0);
font-size: var(--ds-text-md);
font-weight: var(--ds-weight-medium);
color: var(--ds-text-secondary);
text-decoration: none;
white-space: nowrap;
transition:
background-color var(--ds-duration-spring) var(--ds-ease-spring),
color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-nav__link:hover,
.ds-nav__item:hover > .ds-nav__link,
.ds-nav__item:focus-within > .ds-nav__link {
background: var(--ds-bg-muted);
color: var(--ds-text);
}
.ds-nav__link[aria-current='page'] {
color: var(--ds-text);
}
.ds-nav__chevron {
width: 16px;
height: 16px;
transition: transform var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-nav__item:hover .ds-nav__chevron,
.ds-nav__item:focus-within .ds-nav__chevron {
transform: rotate(180deg);
}
.ds-nav .ds-header__search {
width: 40px;
}
.ds-lang {
position: relative;
}
.ds-lang__trigger {
gap: var(--ds-space-1);
padding: 0 var(--ds-space-3);
border: 0;
font-family: inherit;
cursor: pointer;
}
.ds-lang__menu {
position: absolute;
top: calc(100% + 24px);
right: 0;
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
min-width: 112px;
padding: var(--ds-space-2);
border-radius: var(--ds-radius-lg);
background: var(--ds-bg-subtle);
box-shadow: var(--ds-shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--ds-duration) var(--ds-ease),
transform var(--ds-duration-spring) var(--ds-ease-spring),
visibility 0s linear var(--ds-duration);
}
.ds-lang__menu::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -24px;
height: 24px;
}
.ds-lang:hover > .ds-lang__menu,
.ds-lang:focus-within > .ds-lang__menu {
opacity: 1;
visibility: visible;
transform: none;
transition:
opacity var(--ds-duration) var(--ds-ease),
transform var(--ds-duration-spring) var(--ds-ease-spring),
visibility 0s;
}
.ds-lang__opt {
display: flex;
align-items: center;
height: 40px;
padding: 0 var(--ds-space-4);
border-radius: var(--ds-radius-input);
font-size: var(--ds-text-md);
font-weight: var(--ds-weight-medium);
color: var(--ds-text-secondary);
text-decoration: none;
}
.ds-lang__opt:hover {
background: var(--ds-bg-muted);
color: var(--ds-text);
}
.ds-lang__opt[aria-current] {
color: var(--ds-text-accent);
font-weight: var(--ds-weight-semibold);
}
.ds-mega {
position: absolute;
top: calc(100% + 12px);
left: 0;
right: 0;
display: flex;
flex-direction: column;
gap: var(--ds-space-4);
padding: var(--ds-space-2);
border-radius: var(--ds-radius-xl);
background: var(--ds-bg-subtle);
box-shadow:
0 0.6px 0.8px -0.9px rgba(1, 3, 9, 0.07),
0 1.7px 2.4px -1.9px rgba(1, 3, 9, 0.07),
0 4.5px 6.3px -2.8px rgba(1, 3, 9, 0.06),
0 14px 19.6px -3.75px rgba(1, 3, 9, 0.03),
0 24px 48px rgba(1, 3, 9, 0.06);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--ds-duration) var(--ds-ease),
transform var(--ds-duration-spring) var(--ds-ease-spring),
visibility 0s linear var(--ds-duration);
}
.ds-mega::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 12px;
}
.ds-nav__item:hover > .ds-mega,
.ds-nav__item:focus-within > .ds-mega {
opacity: 1;
visibility: visible;
transform: none;
transition:
opacity var(--ds-duration) var(--ds-ease),
transform var(--ds-duration-spring) var(--ds-ease-spring),
visibility 0s;
}
.ds-mega__top {
display: grid;
grid-template-columns: minmax(0, 1fr) 253px;
gap: var(--ds-space-2);
}
.ds-mega__list {
display: flex;
flex-direction: column;
padding: var(--ds-space-2);
}
.ds-mega__label {
margin: 0;
padding: var(--ds-space-2) var(--ds-space-3);
font-size: var(--ds-text-sm);
font-weight: var(--ds-weight-medium);
color: #737373;
}
.ds-mega__item {
display: flex;
align-items: center;
gap: var(--ds-space-2);
padding: var(--ds-space-3);
border-radius: var(--ds-radius-xl);
color: var(--ds-text);
text-decoration: none;
transition: background-color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-mega__item:hover {
background: #fafafa;
}
.ds-mega__icon {
flex: none;
display: grid;
place-items: center;
width: 60px;
height: 40px;
border-radius: var(--ds-radius-pill);
background: var(--ds-bg-strong);
color: var(--ds-text);
transition: background-color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-mega__item:hover .ds-mega__icon {
background: var(--ds-gray-200);
}
.ds-mega__icon svg {
width: 20px;
height: 20px;
}
.ds-mega__text {
display: flex;
flex-direction: column;
gap: 6px;
}
.ds-mega__title {
font-size: var(--ds-text-sm);
font-weight: var(--ds-weight-medium);
}
.ds-mega__desc {
font-size: var(--ds-text-xs);
color: var(--ds-text-secondary);
}
.ds-mega__pages {
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
padding: 10px;
border-radius: var(--ds-radius-lg);
background: var(--ds-bg);
}
.ds-mega__pages .ds-mega__label {
padding-inline: 10px;
margin-bottom: var(--ds-space-2);
}
.ds-mega__page {
padding: var(--ds-space-2) 10px;
border-radius: var(--ds-radius-sm);
font-size: var(--ds-text-sm);
font-weight: var(--ds-weight-medium);
color: var(--ds-text);
text-decoration: none;
transition:
background-color var(--ds-duration-spring) var(--ds-ease-spring),
color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-mega__page:hover {
background: var(--ds-bg-muted);
}
.ds-mega__post {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: var(--ds-space-5);
padding: var(--ds-space-2);
border-radius: var(--ds-radius-lg);
color: var(--ds-text);
text-decoration: none;
transition: background-color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-mega__post:hover {
background: #fafafa;
}
.ds-mega__post-media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: var(--ds-radius-lg);
background: var(--ds-bg-strong);
}
.ds-mega__post-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ds-duration-slow) var(--ds-ease-out);
}
.ds-mega__post:hover .ds-mega__post-media img {
transform: scale(1.04);
}
.ds-mega__post-flag {
position: absolute;
top: var(--ds-space-3);
right: var(--ds-space-3);
height: 28px;
padding: 0 var(--ds-space-3);
font-size: var(--ds-text-sm);
}
.ds-mega__post-body {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
padding-top: var(--ds-space-2);
}
.ds-mega__post-title {
font-size: var(--ds-h5-size);
line-height: 1.2;
}
.ds-mobile-menu {
display: none;
position: relative;
}
.ds-mobile-menu > summary {
list-style: none;
}
.ds-mobile-menu > summary.ds-icon-btn {
width: 52px;
height: 38px;
border-radius: 999px;
background: var(--ds-gray-100);
}
.ds-mobile-menu > summary::-webkit-details-marker {
display: none;
}
.ds-mobile-menu__panel {
position: absolute;
top: calc(100% + var(--ds-space-4));
right: 0;
display: flex;
flex-direction: column;
gap: var(--ds-space-1);
width: min(340px, calc(100vw - var(--ds-gutter) * 2));
padding: var(--ds-space-2);
border-radius: var(--ds-radius-lg);
background: var(--ds-bg-subtle);
box-shadow: var(--ds-shadow-md);
}
.ds-mobile-menu__panel .ds-nav__link {
height: 48px;
padding: 0 var(--ds-space-4);
border-radius: var(--ds-radius-input);
}
.ds-mobile-menu__panel .ds-nav__link:hover,
.ds-mobile-menu__panel .ds-nav__link[aria-current='page'] {
background: var(--ds-bg-muted);
}
@media (min-width: 1200px) and (max-width: 1299px) {
.ds-nav .ds-nav__link {
padding: 0 10px;
}
.ds-nav .ds-btn {
margin-left: var(--ds-space-2);
}
}
.ds-mobile-menu__search {
gap: var(--ds-space-3);
width: 100%;
border: 0;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.ds-mobile-menu__search svg {
width: 18px;
height: 18px;
}
.ds-mobile-menu__lang {
display: flex;
gap: var(--ds-space-1);
padding: var(--ds-space-2) 0;
}
.ds-mobile-menu__lang .ds-lang__opt {
flex: 1;
justify-content: center;
height: 44px;
padding: 0;
box-shadow: inset 0 0 0 1px var(--ds-border);
}
.ds-mobile-menu__lang .ds-lang__opt[aria-current] {
box-shadow: none;
background: var(--ds-bg-inverse);
color: var(--ds-text-inverse);
}
@media (max-width: 1199px) {
.ds-nav {
display: none;
}
.ds-header__actions {
display: flex;
align-items: center;
gap: var(--ds-space-5);
height: 64px;
padding: var(--ds-space-3);
border-radius: 100px;
background: var(--ds-bg-subtle);
box-shadow: inset 0 0 0 1px #fff;
}
.ds-mobile-menu {
display: block;
}
}
@media (max-width: 809px) {
.ds-header__actions {
height: 54px;
padding: var(--ds-space-2);
}
.ds-header__cta {
display: none;
}
}
.ds-card {
display: flex;
flex-direction: column;
gap: var(--ds-space-4);
padding: var(--ds-space-5);
border-radius: var(--ds-radius-xl);
background: var(--ds-gradient-card);
color: inherit;
text-decoration: none;
}
a.ds-card,
.ds-card--interactive {
transition:
transform var(--ds-duration) var(--ds-ease-out),
box-shadow var(--ds-duration) var(--ds-ease);
}
a.ds-card:hover,
.ds-card--interactive:hover {
transform: translateY(-4px);
box-shadow: var(--ds-shadow-sm);
}
.ds-card--muted {
background: var(--ds-bg-strong);
}
.ds-card--dark {
background: var(--ds-bg-inverse);
color: var(--ds-text-inverse);
}
.ds-card--dark .ds-h3,
.ds-card--dark .ds-h4,
.ds-card--dark .ds-h5 {
color: var(--ds-text-inverse);
}
.ds-card--dark .ds-secondary {
color: var(--ds-gray-300);
}
.ds-card__icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--ds-radius-md);
background: var(--ds-bg-muted);
color: var(--ds-accent-500);
}
.ds-card__icon svg {
width: 22px;
height: 22px;
}
.ds-card__media {
overflow: hidden;
margin: calc(var(--ds-space-5) * -1 + var(--ds-space-2));
margin-bottom: 0;
border-radius: var(--ds-radius-lg);
aspect-ratio: 16 / 10;
background: var(--ds-bg-strong);
}
.ds-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ds-duration-slow) var(--ds-ease-out);
}
a.ds-card:hover .ds-card__media img {
transform: scale(1.04);
}
.ds-panel {
padding: var(--ds-space-5);
border-radius: var(--ds-radius-2xl);
background: var(--ds-gradient-panel);
}
.ds-dots {
position: relative;
isolation: isolate;
overflow: hidden;
}
.ds-dots::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image: radial-gradient(var(--_dot, rgba(93, 99, 111, 0.35)) 1.6px, transparent 1.8px);
background-size: 6px 6px;
-webkit-mask-image: var(--_mask, radial-gradient(60% 70% at 100% 100%, #000 0%, transparent 100%));
mask-image: var(--_mask, radial-gradient(60% 70% at 100% 100%, #000 0%, transparent 100%));
pointer-events: none;
}
.ds-dots--accent::before {
--_dot: rgba(255, 77, 54, 0.45);
--_mask: radial-gradient(28% 38% at 50% 64%, #000 0%, transparent 100%);
}
.ds-promo {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
min-height: 240px;
padding: var(--ds-space-5);
border-radius: var(--ds-radius-xl);
background: var(--ds-gradient-panel);
}
.ds-promo__action {
margin-top: auto;
align-self: flex-end;
}
.ds-contact-list {
display: flex;
flex-direction: column;
gap: var(--ds-space-5);
margin: 0;
}
.ds-contact-list > div {
display: flex;
flex-direction: column;
gap: 10px;
}
.ds-contact-list dt {
font-size: var(--ds-text-lg);
color: var(--ds-text-secondary);
}
.ds-contact-list dd {
margin: 0;
font-size: var(--ds-text-lg);
color: var(--ds-text);
}
.ds-contact-list a {
color: var(--ds-text-accent-on-muted);
text-decoration: none;
}
.ds-contact-list a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.ds-contact-list small {
display: block;
margin-top: var(--ds-space-1);
font-size: var(--ds-text-xs);
color: var(--ds-text-secondary);
}
.ds-stat {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
}
.ds-stat__value {
font-family: var(--ds-font-display);
font-size: var(--ds-h1-size);
font-weight: var(--ds-weight-bold);
line-height: 1;
letter-spacing: var(--ds-tracking-tight);
color: var(--ds-text);
}
.ds-stat__value em {
font-style: normal;
color: var(--ds-accent-500);
}
.ds-stat__label {
font-size: var(--ds-text-sm);
color: var(--ds-text-secondary);
}
.ds-price {
gap: var(--ds-space-5);
}
.ds-price__amount {
display: flex;
align-items: baseline;
gap: var(--ds-space-2);
font-family: var(--ds-font-display);
font-size: var(--ds-h2-size);
font-weight: var(--ds-weight-bold);
letter-spacing: var(--ds-tracking-tight);
}
.ds-price__amount small {
font-family: var(--ds-font-body);
font-size: var(--ds-text-sm);
font-weight: var(--ds-weight-medium);
letter-spacing: 0;
color: var(--ds-text-secondary);
}
.ds-card--dark .ds-price__amount small {
color: var(--ds-gray-300);
}
.ds-checklist {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--ds-text-sm);
}
.ds-checklist li {
display: flex;
gap: var(--ds-space-2);
}
.ds-checklist li::before {
content: '';
flex: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ds-accent-500)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / 100% no-repeat;
}
.ds-quote {
gap: var(--ds-space-5);
}
.ds-quote__text {
margin: 0;
font-size: var(--ds-text-lg);
color: var(--ds-text);
}
.ds-quote__author {
display: flex;
align-items: center;
gap: var(--ds-space-3);
}
.ds-avatar {
flex: none;
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
background: var(--ds-bg-strong);
}
.ds-form {
display: flex;
flex-direction: column;
gap: var(--ds-space-5);
}
.ds-form-card {
padding: var(--ds-space-5);
border-radius: var(--ds-radius-xl);
background: var(--ds-bg-subtle);
}
.ds-divider {
height: 1px;
margin: 0;
border: 0;
background: var(--ds-border);
}
.ds-field {
display: flex;
flex-direction: column;
gap: 10px;
}
.ds-label {
font-size: var(--ds-text-sm);
font-weight: var(--ds-weight-medium);
color: var(--ds-text-secondary);
}
.ds-input,
.ds-textarea,
.ds-select {
width: 100%;
height: var(--ds-input-h);
padding: 0 var(--ds-space-4);
border: 0;
border-radius: var(--ds-radius-input);
background: var(--ds-bg-muted);
font-family: var(--ds-font-body);
font-size: var(--ds-text-sm);
font-weight: var(--ds-weight-regular);
color: var(--ds-text);
box-shadow: inset 0 0 0 1px transparent;
transition:
background-color var(--ds-duration) var(--ds-ease),
box-shadow var(--ds-duration) var(--ds-ease);
}
.ds-textarea {
height: 120px;
padding: var(--ds-space-4);
resize: vertical;
}
.ds-select {
padding-right: var(--ds-space-7);
appearance: none;
background: var(--ds-bg-muted)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
right 16px center / 16px no-repeat;
cursor: pointer;
}
.ds-select:invalid,
.ds-select option[value=''] {
color: var(--ds-text-tertiary);
}
.ds-input::placeholder,
.ds-textarea::placeholder {
color: var(--ds-text-tertiary);
}
.ds-input:hover,
.ds-textarea:hover,
.ds-select:hover {
box-shadow: inset 0 0 0 1px var(--ds-border-strong);
}
.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
outline: none;
background-color: var(--ds-bg);
box-shadow:
inset 0 0 0 1px var(--ds-accent-400),
0 0 0 4px var(--ds-accent-50);
}
.ds-input[aria-invalid='true'] {
box-shadow: inset 0 0 0 1px var(--ds-danger-600);
}
.ds-hint {
font-size: var(--ds-text-xs);
color: var(--ds-text-secondary);
}
.ds-hint--error {
color: var(--ds-danger-700);
}
.ds-check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--ds-text-sm);
color: var(--ds-text);
cursor: pointer;
}
.ds-check--small {
font-size: var(--ds-text-xs);
color: var(--ds-text-secondary);
}
.ds-check input {
flex: none;
width: 16px;
height: 16px;
margin: 1px 0 0;
border-radius: var(--ds-radius-xs);
background: var(--ds-bg-subtle);
box-shadow: inset 0 0 0 1px var(--ds-border-strong);
appearance: none;
cursor: pointer;
transition:
background-color var(--ds-duration-fast) var(--ds-ease),
box-shadow var(--ds-duration-fast) var(--ds-ease);
}
.ds-check input:checked {
background: var(--ds-accent-500)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center / 100% no-repeat;
box-shadow: none;
}
.ds-checks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ds-space-3) var(--ds-space-5);
}
@media (max-width: 809px) {
.ds-checks {
grid-template-columns: minmax(0, 1fr);
}
}
.ds-subscribe {
display: flex;
align-items: center;
gap: var(--ds-space-2);
height: 52px;
padding: 4px 4px 4px var(--ds-space-5);
border-radius: var(--ds-radius-pill);
background: var(--ds-bg);
}
.ds-subscribe input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
background: transparent;
font-family: var(--ds-font-body);
font-size: var(--ds-text-sm);
color: var(--ds-text);
}
.ds-subscribe input:focus {
outline: none;
}
.ds-subscribe:focus-within {
box-shadow: 0 0 0 2px var(--ds-accent-100);
}
.ds-subscribe button {
flex: none;
display: grid;
place-items: center;
width: 68px;
height: 44px;
border: 0;
border-radius: var(--ds-radius-pill);
background: var(--ds-gradient-send);
color: #fff;
cursor: pointer;
}
.ds-subscribe button svg {
width: 20px;
height: 20px;
transition: transform var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-subscribe button:hover svg {
transform: translateX(10px);
}
.ds-faq {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
}
.ds-faq__item {
padding: var(--ds-space-2);
border-radius: var(--ds-radius-xl);
background: var(--ds-gradient-card);
}
.ds-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
min-height: 48px;
padding: 0 var(--ds-space-2) 0 var(--ds-space-4);
font-size: var(--ds-text-md);
font-weight: var(--ds-weight-medium);
color: var(--ds-text-closed);
list-style: none;
cursor: pointer;
transition: color var(--ds-duration) var(--ds-ease);
}
.ds-faq__q::-webkit-details-marker {
display: none;
}
.ds-faq__q:hover,
.ds-faq__item[open] .ds-faq__q {
color: var(--ds-text);
}
.ds-faq__q::after {
content: '';
flex: none;
width: 52px;
height: 32px;
border-radius: var(--ds-radius-pill);
background: var(--ds-bg-muted)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23424b57' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
center / 16px no-repeat;
transition: background-color var(--ds-duration) var(--ds-ease);
}
.ds-faq__item[open] .ds-faq__q::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' stroke='%23424b57' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ds-faq__q:hover::after {
background-color: var(--ds-bg-strong);
}
.ds-faq__a {
margin-top: var(--ds-space-2);
padding: var(--ds-space-4);
border-radius: var(--ds-radius-lg);
background: var(--ds-bg-muted);
font-size: var(--ds-text-sm);
color: var(--ds-text-secondary);
}
.ds-faq__a > * + * {
margin-top: var(--ds-space-3);
}
.ds-dl {
display: grid;
grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr);
margin: 0;
font-size: var(--ds-text-sm);
}
.ds-dl dt,
.ds-dl dd {
margin: 0;
padding-block: var(--ds-space-3);
border-bottom: 1px solid var(--ds-border);
}
.ds-dl dt {
color: var(--ds-text-secondary);
}
.ds-dl dd {
color: var(--ds-text);
}
.ds-dl > :nth-last-child(-n + 2) {
border-bottom: 0;
}
.ds-dl a {
color: var(--ds-text-accent);
text-decoration: none;
}
.ds-dl a:hover {
text-decoration: underline;
}
@media (max-width: 809px) {
.ds-dl {
grid-template-columns: minmax(0, 1fr);
}
.ds-dl dt {
padding-bottom: 0;
border-bottom: 0;
}
.ds-dl dd {
padding-top: var(--ds-space-1);
}
}
.ds-post__meta {
display: flex;
align-items: center;
gap: var(--ds-space-2);
font-size: var(--ds-text-xs);
color: var(--ds-text-secondary);
}
.ds-breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-2);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--ds-text-sm);
color: var(--ds-text-secondary);
}
.ds-breadcrumbs li + li::before {
content: '/';
margin-right: var(--ds-space-2);
color: var(--ds-text-tertiary);
}
.ds-breadcrumbs a {
color: inherit;
text-decoration: none;
}
.ds-breadcrumbs a:hover {
color: var(--ds-text);
}
.ds-hero-home {
position: relative;
overflow: hidden;
margin-top: calc(var(--ds-header-h) * -1);
padding: calc(var(--ds-header-h) + 88px) var(--ds-gutter) 85px;
}
.ds-hero-home__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.ds-beams {
position: absolute;
inset: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
}
.ds-beams__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
filter: blur(15px) saturate(1.4);
mix-blend-mode: multiply;
}
.ds-beams__veil {
position: absolute;
inset: 0;
background: rgba(246, 247, 248, 0.05);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
animation: ds-beams-veil 10s ease-in-out infinite;
}
@keyframes ds-beams-veil {
0%, 100% { opacity: 0.05; }
50% { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
.ds-beams__veil {
animation: none;
}
}
.ds-hero-home__main {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 120px;
text-align: center;
}
.ds-hero-home__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
}
.ds-hero-home__copy {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ds-space-4);
max-width: 800px;
}
.ds-hero-home__title {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ds-space-5);
}
.ds-hero-home__sub {
max-width: 440px;
font-size: var(--ds-text-lg);
color: var(--ds-text-secondary);
}
.ds-hero-home__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--ds-space-5);
}
.ds-hero-home .ds-logos {
max-width: 448px;
gap: 9px;
}
.ds-hero-home .ds-logos__row {
gap: 45px;
padding-right: 45px;
}
.ds-hero-home .ds-logos__row img {
height: 31px;
}
.ds-hero-home .ds-logos .ds-overline,
.ds-hero-home .ds-logos .ds-text-xs {
font-size: 13px;
}
.ds-hero-home__side {
--_orbit: 580;
--_stack-w: 234px;
--_stack-inset: 72px;
position: absolute;
z-index: 1;
top: calc(var(--ds-header-h) - 48px);
width: 560px;
height: 600px;
-webkit-mask-image:
linear-gradient(0deg, transparent 2%, #000 30%),
linear-gradient(0deg, #000 70%, transparent 98%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(0deg, transparent 2%, #000 30%),
linear-gradient(0deg, #000 70%, transparent 98%);
mask-composite: intersect;
}
.ds-hero-home__side--left {
left: calc(50% - var(--_orbit) * 1px - var(--_stack-inset) - var(--_stack-w) / 2);
}
.ds-hero-home__side--right {
right: calc(50% - var(--_orbit) * 1px - var(--_stack-inset) - var(--_stack-w) / 2);
}
.ds-hero-home__stack {
position: absolute;
inset: 0;
}
.ds-hero-home__side--left .ds-hero-home__stack {
left: var(--_stack-inset);
}
.ds-hero-home__side--right .ds-hero-home__stack {
right: var(--_stack-inset);
}
.ds-hero-home__side .ds-float-card {
--_n: 0;
--_petal-step: 140;
position: absolute;
top: 250px;
width: var(--_stack-w);
}
.ds-hero-home__side .ds-float-card[data-n="-2"] { --_n: -2; }
.ds-hero-home__side .ds-float-card[data-n="-1"] { --_n: -1; }
.ds-hero-home__side .ds-float-card[data-n="1"] { --_n: 1; }
.ds-hero-home__side .ds-float-card[data-n="2"] { --_n: 2; }
.ds-hero-home__side .ds-float-card[data-n="-2"],
.ds-hero-home__side .ds-float-card[data-n="2"] { filter: blur(1.5px); }
.ds-hero-home__side--left .ds-float-card {
left: 0;
transform-origin: calc(50% + var(--_orbit) * 1px) 50%;
transform: rotate(calc(var(--_n) * var(--_petal-step) / var(--_orbit) * -1rad));
}
.ds-hero-home__side--right .ds-float-card {
right: 0;
transform-origin: calc(50% - var(--_orbit) * 1px) 50%;
transform: rotate(calc(var(--_n) * var(--_petal-step) / var(--_orbit) * 1rad));
}
.ds-hero-home__side .ds-float-card[data-n="0"] {
box-shadow:
0 36px 36px rgba(1, 3, 9, 0.09),
0 81px 49px rgba(1, 3, 9, 0.05),
0 144px 58px rgba(1, 3, 9, 0.01);
}
.ds-hero-home__side .ds-float-card {
transition:
transform 1.4s cubic-bezier(0.65, 0, 0.35, 1),
filter 1.4s ease,
box-shadow 1.4s ease,
opacity 0.7s ease;
}
.ds-hero-home__side .ds-float-card.is-leaving {
opacity: 0;
}
.ds-hero-home__side .ds-float-card.is-jumping {
transition: none;
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.ds-hero-home__side .ds-float-card {
transition: none;
}
}
.ds-float-card {
position: relative;
display: flex;
align-items: center;
gap: var(--ds-space-3);
min-height: 100px;
padding: var(--ds-space-4);
border-radius: 20px;
background: var(--ds-gradient-card);
font-size: var(--ds-text-xs);
line-height: 1.3;
color: var(--ds-text-secondary);
text-align: left;
text-decoration: none;
}
.ds-float-card__media {
flex: none;
width: 40px;
height: 40px;
border-radius: var(--ds-radius-sm);
object-fit: cover;
background: var(--ds-bg-muted);
}
.ds-float-card__media--logo {
padding: 6px;
object-fit: contain;
background: var(--ds-bg);
box-shadow: inset 0 0 0 1px var(--ds-border);
}
.ds-float-card__body {
display: flex;
flex-direction: column;
gap: 2px;
padding-right: var(--ds-space-4);
}
.ds-float-card__title {
color: var(--ds-text);
}
.ds-float-card__mark {
position: absolute;
top: var(--ds-space-4);
right: var(--ds-space-4);
width: 16px;
height: 16px;
color: var(--ds-accent-400);
}
@media (max-width: 1199px) {
.ds-hero-home__side {
display: none;
}
}
@media (max-width: 809px) {
.ds-hero-home {
padding-top: calc(var(--ds-header-h) + 72px);
}
.ds-hero-home__main {
gap: 80px;
}
.ds-hero-home__head {
gap: var(--ds-space-7);
}
.ds-hero-home__actions {
flex-direction: column;
align-self: stretch;
gap: var(--ds-space-4);
}
.ds-hero-home__actions .ds-btn {
width: 100%;
}
}
@keyframes ds-rise {
from {
opacity: 0;
transform: translateY(var(--_rise, 24px));
}
}
.ds-rise {
animation: ds-rise 900ms var(--ds-ease-spring) both;
animation-delay: var(--_delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
.ds-rise {
animation: none;
}
}
.ds-hero {
position: relative;
padding-block: calc(var(--ds-section-y) * 0.8) var(--ds-section-y);
background: var(--ds-gradient-hero);
text-align: center;
}
.ds-hero__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ds-stack-header);
max-width: 720px;
margin-inline: auto;
}
.ds-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--ds-space-5);
margin-top: var(--ds-space-3);
}
.ds-page-title {
display: flex;
flex-direction: column;
gap: var(--ds-space-5);
}
@media (max-width: 809px) {
.ds-page-title {
align-items: center;
text-align: center;
}
}
.ds-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
padding: 54px var(--ds-space-6) var(--ds-space-6);
border-radius: var(--ds-radius-xl);
background: var(--ds-gradient-panel);
text-align: center;
}
.ds-cta__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ds-space-4);
max-width: 800px;
}
.ds-cta__head .ds-text-md {
max-width: 400px;
color: var(--ds-text-secondary);
}
.ds-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--ds-space-5);
}
.ds-cta {
position: relative;
isolation: isolate;
overflow: hidden;
}
.ds-cta__bg {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.ds-cta__bg .ds-beams {
-webkit-mask-image: linear-gradient(0deg, #000 25%, transparent 90%);
mask-image: linear-gradient(0deg, #000 25%, transparent 90%);
}
@media (max-width: 809px) {
.ds-cta {
gap: 40px;
padding: 44px var(--ds-space-4) var(--ds-space-5);
}
.ds-cta__actions {
flex-direction: column;
align-self: stretch;
gap: var(--ds-space-4);
}
}
.ds-cta-sec .ds-cta {
--_bleed: max(24px, (min(1376px, 100vw - 64px) - 100%) / 2);
margin-inline: calc(-1 * var(--_bleed));
}
@media (max-width: 809px) {
.ds-cta-sec .ds-cta {
--_bleed: 10px;
}
}
.ds-logos {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ds-space-3);
width: 100%;
max-width: 560px;
}
.ds-logos__track {
display: flex;
overflow: hidden;
width: 100%;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.ds-logos__row {
display: flex;
flex: none;
align-items: center;
gap: var(--ds-space-7);
padding-right: var(--ds-space-7);
animation: ds-marquee 40s linear infinite;
}
.ds-logos__row img {
display: block;
width: auto;
height: 28px;
filter: grayscale(1);
opacity: 0.7;
}
@keyframes ds-marquee {
to {
transform: translateX(-100%);
}
}
@media (prefers-reduced-motion: reduce) {
.ds-logos__row {
animation: none;
}
}
.ds-footer {
padding: var(--ds-space-6) var(--ds-gutter) var(--ds-space-6);
font-size: var(--ds-text-sm);
color: var(--ds-text-secondary);
}
.ds-footer__inner {
display: flex;
flex-direction: column;
gap: var(--ds-space-9);
max-width: var(--ds-container-max);
margin-inline: auto;
padding: var(--ds-space-6);
}
.ds-footer__top {
display: flex;
justify-content: space-between;
gap: var(--ds-space-8);
}
.ds-footer__brand {
display: flex;
flex-direction: column;
gap: var(--ds-space-8);
width: 360px;
}
.ds-footer__brand img {
display: block;
width: auto;
height: 28px;
}
.ds-footer__news {
display: flex;
flex-direction: column;
gap: var(--ds-space-5);
}
.ds-footer__news-head {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
}
.ds-footer__cols {
display: flex;
gap: var(--ds-space-8);
}
.ds-footer__col {
display: flex;
flex-direction: column;
gap: var(--ds-space-5);
min-width: 160px;
white-space: nowrap;
}
.ds-footer__title {
margin: 0;
font-size: var(--ds-text-lg);
font-weight: var(--ds-weight-medium);
color: var(--ds-gray-800);
}
.ds-footer__links {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.ds-footer__links a {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
color: var(--ds-text-secondary);
text-decoration: none;
transition: color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-footer__links a:hover {
color: var(--ds-accent-400);
}
.ds-footer__links svg {
width: 18px;
height: 18px;
margin-right: var(--ds-space-1);
}
.ds-arrow-out {
position: relative;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin-left: var(--ds-space-1);
color: var(--ds-accent-400);
}
.ds-arrow-out > span {
position: absolute;
inset: 0;
transform: translate(12px, -12px);
transition: transform var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-arrow-out svg {
position: absolute;
inset: 0;
width: 8px;
height: 8px;
margin: 0;
transform: translate(-20px, 20px);
transition: transform 0s linear var(--ds-duration-spring);
}
a:hover > .ds-arrow-out > span {
transform: none;
transition: none;
}
a:hover > .ds-arrow-out svg {
transform: none;
transition: transform var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
}
.ds-footer__copy {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
}
.ds-footer__copy strong {
font-size: var(--ds-text-md);
font-weight: var(--ds-weight-medium);
}
.ds-footer__copy a,
.ds-footer__legal a {
color: var(--ds-text-accent);
text-decoration: none;
}
.ds-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-4);
}
.ds-footer__legal a {
position: relative;
padding-bottom: 2px;
color: var(--ds-text-secondary);
transition: color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-footer__legal a::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--ds-accent-400);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-footer__legal a:hover {
color: var(--ds-accent-400);
}
.ds-footer__legal a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.ds-footer__copy a:hover {
color: var(--ds-text);
}
@media (max-width: 1199px) {
.ds-footer__top {
flex-direction: column;
}
.ds-footer__cols {
flex-wrap: wrap;
gap: var(--ds-space-7) var(--ds-space-9);
}
}
@media (max-width: 809px) {
.ds-footer__inner {
padding: var(--ds-space-5) 0;
gap: var(--ds-space-8);
}
.ds-footer__brand {
width: auto;
}
.ds-footer__cols {
flex-direction: column;
}
.ds-footer__copy {
justify-content: center;
width: 100%;
}
}
.ds-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.ds-home-section {
padding-block: var(--ds-section-y);
}
.ds-home-head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ds-space-5);
max-width: 800px;
margin: 0 auto var(--ds-space-8);
text-align: center;
}
.ds-home-head--start {
align-items: flex-start;
margin-inline: 0;
text-align: left;
}
.ds-home-head__label {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
font-size: var(--ds-text-sm);
color: var(--ds-text);
}
.ds-home-head__label .ds-mark {
width: 10px;
height: 10px;
}
.ds-home-head__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--ds-space-6);
margin-bottom: var(--ds-space-8);
}
.ds-home-head__row .ds-home-head {
margin: 0;
}
.ds-feature {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
padding: var(--ds-space-2);
border-radius: var(--ds-radius-xl);
background: var(--ds-gradient-card);
}
.ds-feature__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-1);
}
.ds-feature__media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 7;
border-radius: var(--ds-radius-lg);
background: var(--ds-bg-strong);
}
.ds-feature__media > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ds-feature__thumbs {
position: absolute;
left: var(--ds-space-3);
bottom: var(--ds-space-3);
display: flex;
gap: var(--ds-space-3);
}
.ds-feature__thumbs img {
width: 140px;
height: 92px;
object-fit: cover;
border-radius: var(--ds-radius-md);
box-shadow: var(--ds-shadow-xs);
}
.ds-bento-panel {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ds-space-5);
padding: var(--ds-space-5);
border-radius: var(--ds-radius-2xl);
background: var(--ds-gradient-panel);
}
.ds-bento-panel > .is-wide {
grid-column: span 2;
}
.ds-stat-card {
justify-content: flex-end;
min-height: 230px;
}
.ds-stat-card .ds-stat__value {
font-size: 56px;
}
.ds-press {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ds-space-3) var(--ds-space-5);
}
.ds-press__item {
display: flex;
align-items: center;
gap: var(--ds-space-3);
padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-2) var(--ds-space-2);
border-radius: var(--ds-radius-pill);
background: var(--ds-bg-muted);
font-size: var(--ds-text-xs);
color: var(--ds-text-secondary);
}
.ds-press__item b {
display: block;
font-size: var(--ds-text-sm);
font-weight: var(--ds-weight-medium);
color: var(--ds-text);
}
.ds-press__logo {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ds-bg);
color: var(--ds-accent-500);
font-weight: var(--ds-weight-bold);
}
.ds-services {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--ds-space-5);
align-items: stretch;
}
.ds-services__media {
overflow: hidden;
min-height: 420px;
border-radius: var(--ds-radius-xl);
background: var(--ds-bg-strong);
box-shadow: 0 0 0 6px var(--ds-bg-subtle);
}
.ds-services__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ds-faq__q .ds-faq__icon {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin-right: auto;
border-radius: 10px;
background: var(--ds-bg-inverse);
color: #fff;
}
.ds-faq__q .ds-faq__icon {
margin-right: 0;
}
.ds-faq__q .ds-faq__icon svg {
width: 16px;
height: 16px;
}
.ds-faq__q--icon {
justify-content: flex-start;
gap: var(--ds-space-3);
font-family: var(--ds-font-display);
font-size: var(--ds-h6-size);
font-weight: var(--ds-weight-medium);
}
.ds-faq__q--icon::after {
margin-left: auto;
}
.ds-tools {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ds-space-7) var(--ds-space-5);
padding: var(--ds-space-5);
border-radius: var(--ds-radius-2xl);
background: var(--ds-gradient-panel);
}
.ds-tool {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
color: inherit;
text-decoration: none;
}
.ds-tool__bar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ds-space-4);
padding-inline: var(--ds-space-2);
}
.ds-tool__name {
margin: 0 0 var(--ds-space-2);
font-family: var(--ds-font-display);
font-size: var(--ds-h6-size);
font-weight: var(--ds-weight-medium);
}
.ds-tool__view {
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
font-size: var(--ds-text-sm);
color: var(--ds-text);
}
.ds-tool__media {
display: grid;
place-items: center;
aspect-ratio: 16 / 7;
border-radius: var(--ds-radius-lg);
background: var(--ds-bg);
box-shadow: 0 0 0 6px var(--ds-bg-subtle);
transition: transform var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-tool:hover .ds-tool__media {
transform: scale(0.985);
}
.ds-tool__media img {
width: 22%;
height: auto;
}
.ds-process {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ds-space-5);
}
.ds-step {
gap: var(--ds-space-3);
min-height: 260px;
justify-content: flex-end;
}
.ds-step__num {
align-self: flex-start;
margin-bottom: var(--ds-space-3);
padding: 6px 16px;
border-radius: var(--ds-radius-pill);
background: var(--ds-bg-inverse);
box-shadow: var(--ds-shadow-sm);
font-family: var(--ds-font-display);
font-size: var(--ds-h6-size);
font-weight: var(--ds-weight-semibold);
color: #fff;
}
.ds-plans {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ds-space-5);
padding: var(--ds-space-5);
border-radius: var(--ds-radius-2xl);
background: var(--ds-gradient-panel);
}
.ds-plans > .is-wide {
grid-column: span 2;
}
.ds-plan {
gap: var(--ds-space-4);
}
.ds-plan__icon {
display: grid;
place-items: center;
width: 48px;
height: 36px;
border-radius: 12px;
background: var(--ds-bg-inverse);
box-shadow: var(--ds-shadow-sm);
color: #fff;
}
.ds-plan__icon svg {
width: 18px;
height: 18px;
}
.ds-card--dark .ds-plan__icon {
background: #fff;
color: var(--ds-text);
}
.ds-plan .ds-btn {
margin-block: var(--ds-space-2);
}
.ds-dark-cta {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--ds-space-5);
min-height: 260px;
--_dot: rgba(255, 77, 54, 0.55);
}
.ds-dark-cta .ds-h4 {
color: #fff;
}
.ds-plans .ds-card--dark {
box-shadow: none;
}
.ds-review {
gap: var(--ds-space-4);
}
.ds-review__mark {
width: 20px;
height: 20px;
color: var(--ds-accent-500);
}
.ds-review__who {
display: flex;
align-items: center;
gap: var(--ds-space-3);
margin-top: auto;
}
.ds-review__avatar {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--ds-bg-strong);
font-family: var(--ds-font-display);
font-weight: var(--ds-weight-bold);
color: var(--ds-text-secondary);
}
.ds-video-card {
position: relative;
overflow: hidden;
min-height: 240px;
padding: 0;
}
.ds-video-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 20%;
}
.ds-video-card__play {
position: absolute;
left: var(--ds-space-4);
bottom: var(--ds-space-4);
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
padding: 8px 14px 8px 10px;
border-radius: var(--ds-radius-pill);
background: rgba(255, 255, 255, 0.92);
font-size: var(--ds-text-xs);
color: var(--ds-text);
}
.ds-blog {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--ds-space-5);
}
.ds-blog__side {
display: flex;
flex-direction: column;
gap: var(--ds-space-5);
}
.ds-blog__row {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
gap: var(--ds-space-4);
color: inherit;
text-decoration: none;
}
.ds-blog__row img,
.ds-blog__main img {
width: 100%;
border-radius: var(--ds-radius-lg);
object-fit: cover;
background: var(--ds-bg-strong);
box-shadow: 0 0 0 6px var(--ds-bg-subtle);
}
.ds-blog__row img {
aspect-ratio: 1;
}
.ds-blog__main {
display: flex;
flex-direction: column;
gap: var(--ds-space-3);
color: inherit;
text-decoration: none;
}
.ds-blog__main img {
aspect-ratio: 4 / 3;
}
@media (max-width: 1199px) {
.ds-bento-panel,
.ds-plans {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ds-services,
.ds-blog {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 809px) {
.ds-bento-panel,
.ds-plans,
.ds-tools,
.ds-process,
.ds-press {
grid-template-columns: minmax(0, 1fr);
}
.ds-bento-panel > .is-wide,
.ds-plans > .is-wide {
grid-column: auto;
}
.ds-home-head__row {
flex-direction: column;
align-items: flex-start;
}
.ds-feature__thumbs {
display: none;
}
.ds-services__media {
min-height: 0;
aspect-ratio: 4 / 3;
}
.ds-services__media img {
object-position: left center;
}
.ds-tool__view {
display: none;
}
}
.ds-ai {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: var(--ds-space-7);
padding: var(--ds-space-8) var(--ds-space-7);
border-radius: var(--ds-radius-2xl);
background: var(--ds-gradient-panel);
}
.ds-ai__input {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-4);
min-height: 64px;
padding: 8px 8px 8px var(--ds-space-5);
border-radius: var(--ds-radius-pill);
background: var(--ds-bg);
box-shadow: var(--ds-shadow-sm);
font-size: var(--ds-text-sm);
color: var(--ds-text-tertiary);
}
.ds-quiz__bar {
position: relative;
overflow: hidden;
width: 160px;
height: 6px;
border-radius: var(--ds-radius-pill);
background: var(--ds-bg-strong);
}
.ds-quiz__bar > span {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background: var(--ds-accent-500);
}
.ds-quiz__options {
display: grid;
gap: var(--ds-space-2);
}
.ds-quiz__option {
display: flex;
align-items: center;
gap: var(--ds-space-3);
min-height: 56px;
padding: 0 var(--ds-space-5);
border-radius: var(--ds-radius-input);
background: var(--ds-bg-muted);
font-size: var(--ds-text-md);
cursor: pointer;
transition: background-color var(--ds-duration-spring) var(--ds-ease-spring), box-shadow var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-quiz__option:hover {
background: var(--ds-bg-strong);
}
.ds-quiz__option:has(input:checked) {
background: var(--ds-bg);
box-shadow: inset 0 0 0 1.5px var(--ds-accent-500);
}
.ds-quiz__option input {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--ds-accent-600);
}
.ds-founder {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
grid-template-rows: auto auto;
gap: var(--ds-space-5);
}
.ds-founder__quote {
grid-row: span 2;
gap: var(--ds-space-6);
justify-content: space-between;
padding: var(--ds-space-7);
}
.ds-founder__photo {
width: 56px;
height: 56px;
border-radius: 16px;
object-fit: cover;
background: var(--ds-gray-800);
}
.ds-stats-bar {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--ds-space-3);
padding: var(--ds-space-3);
border-radius: var(--ds-radius-2xl);
background: var(--ds-gradient-panel);
}
.ds-team {
gap: var(--ds-space-3);
padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-5);
}
.ds-team > :not(.ds-team__photo) {
padding-inline: var(--ds-space-3);
}
.ds-team__photo {
overflow: hidden;
aspect-ratio: 1;
margin-bottom: var(--ds-space-2);
border-radius: var(--ds-radius-lg);
background: var(--ds-gradient-panel);
}
.ds-team__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transition: transform var(--ds-duration-slow) var(--ds-ease-out);
}
.ds-team:hover .ds-team__photo img {
transform: scale(1.04);
}
@media (max-width: 1199px) {
.ds-ai,
.ds-founder {
grid-template-columns: minmax(0, 1fr);
}
.ds-founder__quote {
grid-row: auto;
}
.ds-stats-bar {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 809px) {
.ds-ai {
padding: var(--ds-space-6) var(--ds-space-4);
}
.ds-ai__input > span:first-child {
display: none;
}
.ds-stats-bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.ds-impact {
padding-block: 80px;
}
.ds-impact__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
margin-bottom: 60px;
text-align: center;
}
.ds-impact__label {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
color: #404040;
}
.ds-impact__h2 {
margin: 0;
font-family: var(--ds-font-display);
font-size: 40px;
font-weight: 700;
line-height: 48px;
letter-spacing: -0.05em;
color: var(--ds-text);
}
.ds-impact__panel {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
padding: 24px;
border-radius: 56px;
background: var(--ds-gradient-panel);
}
.ds-impact__card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
min-height: 231px;
padding: 16px;
border-radius: 32px;
background: var(--ds-gradient-card);
color: inherit;
text-decoration: none;
transition: box-shadow var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-impact__card:hover {
box-shadow:
0 9px 20px rgba(1, 3, 9, 0.06),
0 36px 36px rgba(1, 3, 9, 0.04);
}
.ds-impact__card--wide {
grid-column: span 2;
min-height: 360px;
}
.ds-impact__panel > .ds-impact__card:nth-child(4) {
min-height: 360px;
}
.ds-impact__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.ds-impact__icon {
display: grid;
place-items: center;
flex: none;
width: 72px;
height: 48px;
border-radius: 99px;
background: #010309;
color: #fff;
box-shadow: var(--ds-shadow-icon);
}
.ds-impact__icon svg {
width: 24px;
height: 24px;
}
.ds-impact__more {
display: inline-flex;
align-items: center;
gap: 8px;
height: 48px;
padding: 0 20px;
border-radius: 99px;
background: var(--ds-gray-50);
font-size: 16px;
font-weight: 500;
color: var(--ds-text);
white-space: nowrap;
transition:
background-color var(--ds-duration-spring) var(--ds-ease-spring),
gap var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-impact__card:hover .ds-impact__more {
gap: 12px;
background: var(--ds-gray-100);
}
.ds-impact__body {
display: flex;
flex-direction: column;
padding: 0 6px 6px;
}
.ds-impact__value {
margin-bottom: 14px;
font-family: var(--ds-font-display);
font-size: 32px;
font-weight: 700;
line-height: 32px;
letter-spacing: -0.03em;
color: var(--ds-text);
}
.ds-impact__title {
margin-bottom: 8px;
font-family: var(--ds-font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.04em;
color: var(--ds-text);
}
.ds-impact__text {
max-width: 400px;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: var(--ds-text-secondary);
}
.ds-impact__cta {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 239px;
padding: 24px;
border-radius: 32px;
background: var(--ds-gray-100);
isolation: isolate;
}
.ds-impact__cta::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
width: 309px;
height: 309px;
background: radial-gradient(circle, #b6bbc3 1.1px, transparent 1.6px) 0 0 / 6px 6px;
-webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 75%);
mask-image: radial-gradient(circle at 100% 100%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 75%);
}
.ds-impact__cta-title {
margin: 0 0 10px;
font-family: var(--ds-font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.05em;
color: var(--ds-text);
}
.ds-impact__cta-text {
margin: 0;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
color: var(--ds-text-secondary);
}
.ds-impact__cta-btn {
display: inline-flex;
align-items: center;
align-self: flex-end;
height: 52px;
margin-top: auto;
padding: 0 32px;
border-radius: 99px;
background: #010309;
font-size: 16px;
font-weight: 500;
color: #fafafa;
text-decoration: none;
transition: background-color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-impact__cta-btn:hover {
background: #161d27;
}
.ds-impact__chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
gap: 16px 24px;
-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.ds-impact__chip {
display: inline-flex;
align-items: center;
gap: 12px;
justify-self: start;
height: 44px;
padding: 0 18px 0 8px;
border-radius: 100px;
background: var(--ds-gray-50);
}
.ds-impact__chip-icon {
display: grid;
place-items: center;
flex: none;
width: 64px;
height: 28px;
}
.ds-impact__chip-icon img {
display: block;
max-width: 64px;
max-height: 28px;
width: auto;
height: auto;
}
.ds-impact__chip-text {
display: flex;
flex-direction: column;
}
.ds-impact__chip-name {
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: var(--ds-text);
}
.ds-impact__chip-note {
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: var(--ds-text-secondary);
}
@media (max-width: 1199px) {
.ds-impact__panel {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ds-impact__cta {
grid-column: span 2;
order: 1;
}
}
@media (max-width: 809px) {
.ds-impact {
padding-block: 64px;
}
.ds-impact__head {
margin-bottom: 48px;
}
.ds-impact__h2 {
font-size: 32px;
line-height: 38px;
}
.ds-impact__h2 br {
display: none;
}
.ds-impact__panel {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
padding: 10px;
border-radius: 32px;
}
.ds-impact__card--wide,
.ds-impact__cta {
grid-column: auto;
}
.ds-impact__card,
.ds-impact__panel > .ds-impact__card:nth-child(4) {
min-height: 245px;
}
.ds-impact__more {
height: 40px;
padding: 0 14px;
font-size: 14px;
}
.ds-impact__cta-title {
font-size: 24px;
}
.ds-impact__chips {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
}
.ds-process {
display: block;
padding-block: var(--section-y, 85px);
}
.ds-process__wrap {
width: 100%;
max-width: 1208px;
margin-inline: auto;
padding-inline: 24px;
}
.ds-process__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 60px;
text-align: center;
}
.ds-process__h2 {
margin: 0;
font-family: var(--ds-font-display);
font-size: 40px;
font-weight: 700;
line-height: 48px;
letter-spacing: -0.05em;
color: var(--ds-text);
}
.ds-process__lead {
max-width: 420px;
margin: 0;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
color: var(--ds-text-secondary);
text-wrap: balance;
}
.ds-process__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.ds-process__card {
display: flex;
flex-direction: column;
gap: 24px;
padding: 16px;
border-radius: 32px;
background: var(--ds-gradient-card);
}
.ds-process__art {
position: relative;
height: 250px;
overflow: hidden;
border-radius: 16px;
background: var(--ds-gray-100);
}
.ds-process__body {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0 6px 12px;
}
.ds-process__num {
display: grid;
place-items: center;
width: 80px;
height: 48px;
margin-bottom: 24px;
border-radius: 99px;
background: #010309;
box-shadow: var(--ds-shadow-icon);
font-family: var(--ds-font-display);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.04em;
color: #fff;
}
.ds-process__title {
margin: 0 0 8px;
font-family: var(--ds-font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.04em;
color: var(--ds-text);
}
.ds-process__text {
margin: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: var(--ds-text-secondary);
}
.ds-process__cta {
position: relative;
grid-column: 1 / -1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
min-height: 220px;
padding: 24px;
overflow: hidden;
border-radius: 32px;
background: var(--ds-gray-100);
isolation: isolate;
}
.ds-process__cta::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
width: 420px;
height: 260px;
background: radial-gradient(circle, #b6bbc3 1.1px, transparent 1.6px) 0 0 / 6px 6px;
-webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 75%);
mask-image: radial-gradient(circle at 100% 100%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 75%);
}
.ds-process__cta > div {
align-self: flex-start;
max-width: 440px;
}
.ds-process__cta-title {
margin: 0 0 10px;
font-family: var(--ds-font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.05em;
color: var(--ds-text);
}
.ds-process__cta-text {
margin: 0;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
color: var(--ds-text-secondary);
}
.ds-process__cta-btn {
flex: none;
display: inline-flex;
align-items: center;
height: 52px;
padding: 0 32px;
border-radius: 99px;
background: #010309;
font-size: 16px;
font-weight: 500;
color: #fafafa;
text-decoration: none;
transition: background-color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-process__cta-btn:hover {
background: #161d27;
}
.ds-pa {
position: absolute;
inset: 0;
padding: 16px;
font-family: var(--ds-font-body);
}
.ds-pa__window {
padding: 14px;
border-radius: 14px;
background: #fff;
box-shadow:
0 4px 10px rgba(1, 3, 9, 0.05),
0 18px 30px rgba(1, 3, 9, 0.05);
}
.ds-pa__label {
margin: 0 0 8px;
font-size: 12px;
font-weight: 500;
color: var(--ds-text-secondary);
}
.ds-pa__label--out {
margin: 16px 0 8px 4px;
}
.ds-pa__msg {
margin: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.35;
color: var(--ds-text);
}
.ds-pa__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ds-pa__chip {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px 0 8px;
border-radius: 99px;
background: #fff;
font-size: 13px;
font-weight: 500;
color: var(--ds-text);
}
.ds-pa__chip img {
display: block;
width: auto;
height: 18px;
max-width: 40px;
object-fit: contain;
}
.ds-pa__row {
display: flex;
align-items: center;
gap: 8px;
height: 34px;
}
.ds-pa__row--head {
justify-content: space-between;
height: auto;
margin-bottom: 4px;
}
.ds-pa__row--head .ds-pa__label {
margin: 0;
}
.ds-pa__count {
font-size: 12px;
font-weight: 600;
color: var(--ds-text);
}
.ds-pa__avatar {
display: grid;
place-items: center;
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--ds-gray-100);
font-size: 11px;
font-weight: 600;
color: var(--ds-text);
}
.ds-pa__name {
flex: none;
width: 76px;
font-size: 12px;
font-weight: 500;
color: var(--ds-text);
white-space: nowrap;
}
.ds-pa__bar {
position: relative;
flex: 1;
height: 6px;
overflow: hidden;
border-radius: 99px;
background: var(--ds-gray-100);
}
.ds-pa__bar > span {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background: #010309;
}
.ds-pa__bar--accent > span {
background: linear-gradient(90deg, #ff8a7a 0%, var(--ds-accent-500) 100%);
}
.ds-pa__status {
flex: none;
width: 52px;
font-size: 11px;
font-weight: 600;
text-align: right;
color: var(--ds-text-secondary);
}
.ds-pa__status.is-done {
color: #16a34a;
}
.ds-pa__scale {
display: flex;
align-items: center;
gap: 10px;
height: 28px;
}
.ds-pa__scale-name {
flex: none;
width: 116px;
font-size: 12px;
font-weight: 500;
color: var(--ds-text);
}
.ds-pa--report .ds-pa__window {
width: 82%;
}
.ds-pa__badge {
position: absolute;
right: 14px;
bottom: 18px;
padding: 6px;
border-radius: 20px;
background: var(--ds-accent-500);
}
.ds-pa__badge-inner {
display: flex;
flex-direction: column;
padding: 8px 12px;
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #f7c1bb 100%);
box-shadow: 0 7px 16px rgba(1, 3, 9, 0.2);
}
.ds-pa__badge-value {
font-family: var(--ds-font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ds-text);
}
.ds-pa__badge-note {
font-size: 11px;
font-weight: 500;
color: var(--ds-text-secondary);
}
@media (max-width: 809px) {
.ds-process__head {
margin-bottom: 40px;
}
.ds-process__h2 {
font-size: 32px;
line-height: 38px;
}
.ds-process__grid {
grid-template-columns: minmax(0, 1fr);
}
.ds-process__card {
padding: 12px;
}
.ds-process__art {
height: 250px;
border-radius: 12px;
}
.ds-process__num {
width: 70px;
height: 44px;
}
.ds-process__cta {
flex-direction: column;
align-items: stretch;
}
.ds-process__cta-title {
font-size: 24px;
}
.ds-process__cta-text {
font-size: 16px;
}
.ds-process__cta-btn {
justify-content: center;
}
}
.ds-events {
display: block;
padding-block: var(--section-y, 85px);
}
.ds-events__wrap {
width: 100%;
max-width: 1208px;
margin-inline: auto;
padding-inline: 24px;
}
.ds-events__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 60px;
text-align: center;
}
.ds-events__h2 {
margin: 0;
font-family: var(--ds-font-display);
font-size: 40px;
font-weight: 700;
line-height: 48px;
letter-spacing: -0.05em;
color: var(--ds-text);
}
.ds-events__lead {
max-width: 440px;
margin: 0;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
color: var(--ds-text-secondary);
text-wrap: balance;
}
.ds-events__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.ds-events__card {
display: flex;
flex-direction: column;
gap: 28px;
min-height: 300px;
padding: 24px;
border-radius: 32px;
background: var(--ds-gradient-card);
color: var(--ds-text);
text-decoration: none;
transition: box-shadow var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-events__card:hover {
box-shadow:
0 9px 20px rgba(1, 3, 9, 0.06),
0 36px 36px rgba(1, 3, 9, 0.04);
}
.ds-events__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.ds-events__date {
display: flex;
flex-direction: column;
}
.ds-events__days {
font-family: var(--ds-font-display);
font-size: 44px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.05em;
}
.ds-events__month {
margin-top: 6px;
font-size: 14px;
font-weight: 500;
color: var(--ds-text-secondary);
}
.ds-events__tags {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.ds-events__tag {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
border-radius: 99px;
background: var(--ds-gray-100);
font-size: 13px;
font-weight: 500;
color: #424b57;
white-space: nowrap;
}
.ds-events__tag--accent {
background: #fce9e7;
color: var(--ds-accent-600, #e1443a);
}
.ds-events__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
}
.ds-events__title {
font-family: var(--ds-font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.03em;
}
.ds-events__meta {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: var(--ds-text-secondary);
}
.ds-events__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ds-events__price {
font-family: var(--ds-font-display);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
}
.ds-events__arrow {
display: grid;
place-items: center;
width: 52px;
height: 40px;
border-radius: 99px;
background: var(--ds-gray-50);
transition:
background-color var(--ds-duration-spring) var(--ds-ease-spring),
transform var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-events__card:hover .ds-events__arrow {
background: var(--ds-gray-100);
transform: translateX(4px);
}
.ds-events__cta {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
min-height: 300px;
padding: 24px;
overflow: hidden;
border-radius: 32px;
background: var(--ds-gray-100);
isolation: isolate;
}
.ds-events__cta::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
width: 300px;
height: 260px;
background: radial-gradient(circle, #b6bbc3 1.1px, transparent 1.6px) 0 0 / 6px 6px;
-webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 75%);
mask-image: radial-gradient(circle at 100% 100%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 75%);
}
.ds-events__cta-title {
margin: 0 0 10px;
font-family: var(--ds-font-display);
font-size: 28px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.05em;
color: var(--ds-text);
}
.ds-events__cta-text {
max-width: 360px;
margin: 0;
font-size: 16px;
font-weight: 500;
line-height: 1.35;
color: var(--ds-text-secondary);
}
.ds-events__cta-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
}
.ds-events__cta-btn {
display: inline-flex;
align-items: center;
height: 52px;
padding: 0 28px;
border-radius: 99px;
background: #010309;
font-size: 16px;
font-weight: 500;
color: #fafafa;
text-decoration: none;
transition: background-color var(--ds-duration-spring) var(--ds-ease-spring);
}
.ds-events__cta-btn:hover {
background: #161d27;
}
.ds-events__cta-link {
font-size: 15px;
font-weight: 500;
color: var(--ds-text);
text-decoration: underline;
text-decoration-color: rgba(10, 10, 10, 0.25);
text-underline-offset: 3px;
}
@media (max-width: 1199px) {
.ds-events__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ds-events__cta {
grid-column: 1 / -1 !important;
}
}
@media (max-width: 809px) {
.ds-events__head {
margin-bottom: 40px;
}
.ds-events__h2 {
font-size: 32px;
line-height: 38px;
}
.ds-events__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.ds-events__card {
min-height: 0;
gap: 22px;
padding: 20px;
border-radius: 24px;
}
.ds-events__days {
font-size: 36px;
}
.ds-events__cta {
min-height: 0;
padding: 20px;
border-radius: 24px;
}
}
body {
font-family: var(--ds-font-body);
}
body h1,
body h2,
body h3 {
font-family: var(--ds-font-display);
}
.ds-approved {
--muted: #616161;
--red: #e1443a;
--lm-panel: linear-gradient(180deg, #f6f7f8 0%, #ebecef 100%);
--lm-ease: cubic-bezier(0.16, 1, 0.3, 1);
--lm-dur: 700ms;
--grid-gap: 24px;
--section-y: 85px;
}
@media (max-width: 1199px) {
.ds-approved {
--section-y: 70px;
}
}
@media (max-width: 809px) {
.ds-approved {
--section-y: 60px;
}
}
.ds-approved .ds-footer {
padding: 0;
border-top: 1px dashed rgba(212, 216, 221, 0.8);
}
.ds-approved .ds-footer__inner {
max-width: 1208px;
gap: 56px;
padding: var(--section-y) 24px 40px;
}
.ds-approved .ds-footer__top {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--grid-gap);
}
.ds-approved .ds-footer__brand {
grid-column: 1;
width: auto;
gap: 28px;
padding-right: 24px;
}
.ds-approved .ds-footer__about {
margin: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: var(--muted);
}
.ds-approved .ds-footer__address {
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 1.5;
color: var(--muted);
}
.ds-approved .ds-footer__cols {
grid-column: 2 / 4;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--grid-gap);
align-content: start;
}
.ds-approved .ds-footer__col {
min-width: 0;
white-space: normal;
}
.ds-approved .ds-footer__bottom {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--grid-gap);
align-items: start;
padding-top: 24px;
border-top: 1px dashed rgba(212, 216, 221, 0.8);
}
.ds-approved .ds-footer__copy {
grid-column: 1;
margin: 0;
font-size: 13px;
line-height: 1.5;
}
.ds-approved .ds-footer__legal {
grid-column: 2 / 4;
gap: 8px 20px;
font-size: 13px;
}
.ds-approved .ds-footer__cookie {
padding: 0 0 2px;
border: 0;
background: none;
font: inherit;
color: var(--muted);
cursor: pointer;
transition: color var(--lm-dur) var(--lm-ease);
}
.ds-approved .ds-footer__cookie:hover {
color: var(--red);
}
.ds-approved .ds-footer p {
margin: 0;
}
@media (max-width: 809px) {
.ds-approved .ds-footer__inner {
gap: 40px;
}
.ds-approved .ds-footer__top,
.ds-approved .ds-footer__bottom {
grid-template-columns: minmax(0, 1fr);
}
.ds-approved .ds-footer__brand,
.ds-approved .ds-footer__cols,
.ds-approved .ds-footer__copy,
.ds-approved .ds-footer__legal {
grid-column: 1;
padding-right: 0;
}
.ds-approved .ds-footer__cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 16px;
}
}
.ds-approved .ds-footer__copy {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.ds-approved .ds-footer__inner {
max-width: 1376px;
padding-inline: 32px;
}
.ds-approved .ds-footer__top,
.ds-approved .ds-footer__bottom {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ds-approved .ds-footer__cols {
grid-column: 2 / 5;
}
.ds-approved .ds-footer__legal {
grid-column: 2 / 5;
}
@media (max-width: 1199px) {
.ds-approved .ds-footer__top,
.ds-approved .ds-footer__bottom {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ds-approved .ds-footer__brand {
grid-column: 1 / -1;
max-width: 420px;
}
.ds-approved .ds-footer__cols {
grid-column: 1 / -1;
}
.ds-approved .ds-footer__legal {
grid-column: 2 / -1;
}
}
@media (max-width: 809px) {
.ds-approved .ds-footer__inner {
padding-inline: 24px;
}
.ds-approved .ds-footer__top,
.ds-approved .ds-footer__bottom {
grid-template-columns: minmax(0, 1fr);
}
.ds-approved .ds-footer__legal {
grid-column: 1;
}
}
html body .rp-overlay {
background: rgba(1, 3, 9, 0.38);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
html body .rp-overlay.open {
animation: popup-fade 0.3s ease;
}
html body .rp-overlay.open .rp-modal {
animation: popup-in 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popup-fade {
from {
opacity: 0;
}
}
@keyframes popup-in {
from {
opacity: 0;
transform: translateY(24px) scale(0.97);
}
}
html body .rp-modal {
max-width: 640px;
padding: 40px 32px 32px;
border-radius: 32px;
background: linear-gradient(180deg, #fff 0%, #fcfcfd 100%);
box-shadow:
0 9px 20px rgba(1, 3, 9, 0.08),
0 36px 60px rgba(1, 3, 9, 0.14);
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
html body .rp-close {
width: 52px;
height: 40px;
border: 0;
border-radius: 99px;
background: #fcfcfd;
font-size: 22px;
color: #0a0a0a;
box-shadow: 0 4px 10px rgba(1, 3, 9, 0.12);
transition: background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html body .rp-close:hover {
transform: none;
background: #fff;
}
html body .rp-cat {
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: #616161;
}
html body .rp-title {
font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
font-size: 30px;
line-height: 1.15;
letter-spacing: -0.05em;
color: #0a0a0a;
}
html body .rp-divider {
height: 0;
border-top: 1px dashed rgba(212, 216, 221, 0.9);
background: none;
}
html body .rp-cover {
border-radius: 24px;
}
html body .rp-desc,
html body .rp-list li {
font-size: 15px;
font-weight: 500;
letter-spacing: 0;
color: #616161;
}
html body .rp-tag {
height: 28px;
display: inline-flex;
align-items: center;
padding: 0 12px;
border: 0 !important;
background: #ebecef !important;
color: #424b57 !important;
}
html body .rp-sec-h {
font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.03em;
text-transform: none;
color: #0a0a0a;
}
html body .rp-list li::before {
background: #ff4d36;
}
html body .rp-price,
html body .pm-price {
font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
letter-spacing: -0.05em;
color: #0a0a0a;
}
html body .rp-btn-red,
html body .rp-btn-dark,
html body .pm-pay {
height: 52px;
border-radius: 99px;
font-family: inherit;
font-size: 16px;
font-weight: 500;
letter-spacing: 0;
transition:
filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.15s ease;
}
html body .rp-btn-red,
html body .pm-pay {
background: linear-gradient(180deg, #e1443a 0%, #c53c33 100%);
}
html body .rp-btn-red:hover,
html body .pm-pay:hover {
background: linear-gradient(180deg, #e1443a 0%, #c53c33 100%);
filter: brightness(1.05);
}
html body .rp-btn-dark {
background: #010309;
}
html body .rp-btn-dark:hover {
opacity: 1;
background: #161d27;
}
html body .pm-summary {
border-radius: 24px;
background: #f6f7f8;
}
html body .pm-field {
border: 0;
border-radius: 24px;
background: #f6f7f8;
font-family: inherit;
letter-spacing: 0;
box-shadow: inset 0 0 0 1px transparent;
transition:
background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html body .pm-field:focus {
background: #fff;
box-shadow:
inset 0 0 0 1px #ff4d36,
0 0 0 4px #fce9e7;
}
html body .pm-note a {
color: #0a0a0a;
text-decoration: underline;
text-decoration-color: rgba(10, 10, 10, 0.25);
text-underline-offset: 3px;
}
@media (max-width: 620px) {
html body .rp-modal {
padding: 72px 20px 32px;
border-radius: 0;
}
html body .rp-title {
font-size: 24px;
}
html body .rp-close {
width: 48px;
height: 36px;
}
}
@media (prefers-reduced-motion: reduce) {
html body .rp-overlay.open,
html body .rp-overlay.open .rp-modal {
animation: none;
}
}