button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}
button{
    -webkit-appearance: none;
    appearance: none;
}

::selection {
    background: rgba(20, 107, 134, 0.18);
    color: var(--c-text);
}

/* --- design tokens -------------------------------------------------------- */

:root {
    /* brand */
    --c-primary: #146b86;
    --c-primary-dark: #0f5265;
    --c-primary-tint: rgba(142, 184, 197, 0.17);
    --c-primary-border: #8eb8c5;

    /* surfaces */
    --c-page: #e5f3f6;
    --c-white: #fff;
    --c-surface-mist: #f2f5f5;
    --c-surface-ice: #f5faf9;
    --c-surface-frost: #f5f9fa;
    --c-surface-header: #f8fcfc;
    --c-surface-dark: #191919;
    --c-surface-hero: #c4c3c6;

    /* text */
    --c-text: #191919;
    --c-text-nav: #1b1b21;
    --c-text-body: #3d3d3d;
    --c-text-soft: #5d5d5d;
    --c-text-faint: #bec6c8;
    --c-text-meta: #8a9aa8;
    --c-text-slate: #7a8a99;

    /* lines */
    --c-line-mist: #f2f5f5;
    --c-line-steel: #d3e1e1;
    --c-line-sky: #cfe8e8;
    --c-line-faq: #e5ecee;
    --c-line-certs: #d8e8eb;

    /* layout */
    --page-w: 1440px;
    --content-w: 1280px;
    --gutter: 80px;
    --bleed: 80px;
    --mobile-max: 767px;

    /* carousels */
    --carousel-fade: 0.7s;


    --dur-fast: 0.15s;
    --dur: 0.25s;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --lift: -4px;
    --shadow-lift: 0 18px 36px rgba(2, 10, 13, 0.14);
    --shadow-lift-soft: 0 14px 28px rgba(0, 20, 31, 0.12);

    /* type stacks */
    --font-geist: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-inter: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* --- page shell ----------------------------------------------------------- */

body {
    margin: 0;
    background: var(--c-page);
    color: var(--c-text);
    font-family: var(--font-geist);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.page {
    position: relative;
    width: var(--page-w);
    margin: 0 auto;
    background: var(--c-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: clip;
}

/* Every top-level band spans the full artboard width. */
.section {
    position: relative;
    width: 100%;
    flex-shrink: 0;
}



@media (min-width: 1440px) {
    .page {
        width: 100%;
    }
}


.t-h1 {
    font-weight: 600;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -0.96px;
}

/* Heading/H2 — Geist SemiBold 44/52, -2% */
.t-h2 {
    font-weight: 600;
    font-size: 44px;
    line-height: 52px;
    letter-spacing: -0.88px;
}

/* Heading/H3 — Geist SemiBold 32/40, -2% */
.t-h3 {
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
}

/* Heading/H4 — Geist SemiBold 28/40, -2% */
.t-h4 {
    font-weight: 600;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: -0.56px;
}

/* Heading/H5 — Geist SemiBold 24/32, -2% */
.t-h5 {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.48px;
}

/* Paragraph/Regular/LG — Geist Regular 18/30, -4% */
.t-body-lg {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.72px;
}

/* Paragraph/Regular/M — Geist Regular 16/26, -2% */
.t-body-m {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.32px;
}

/* Paragraph/Regular/SM — Geist Regular 15/24, -2% */
.t-body-sm {
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.3px;
}

/* Paragraph/Medium/M — Geist Medium 16/26, -2% */
.t-medium-m {
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.32px;
}

/* Paragraph/Medium/SM — Geist Medium 14/20, -2% */
.t-medium-sm {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

/* --- shared components ---------------------------------------------------- */

/* Pill label above a section heading. Three fills occur in the design:
   the default tinted one, a white one with a border, and the plain tint. */
.eyebrow {
    display: inline-flex;
    align-items: flex-start;
    padding: 6px 16px;
    border-radius: 100px;
    background: var(--c-primary-tint);
    color: var(--c-primary);
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -0.3px;
    white-space: nowrap;
}
.eyebrow p{
    margin: 0;
}

p{
    margin: 0;
}

.eyebrow--outline {
    background: var(--c-white);
    border: 1px solid var(--c-primary-border);
}

/* Marketplace segmented control — hero, header and final CTA share one. */
.selector {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border-radius: 25px;
    background: var(--c-primary);
}

.selector__section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    color: var(--c-white);
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.32px;
    text-align: center;
    white-space: nowrap;
}

.selector__section--divided {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

/* Сегмент подсвечивается изнутри, а не меняет заливку: у него прозрачный фон
   поверх общей плашки, и своя заливка разорвала бы скругление на краях. */
.selector__section {
    transition: background-color var(--dur) var(--ease);
}

.selector__section:hover {
    background: rgba(255, 255, 255, 0.14);
}

.selector__section:active {
    background: rgba(0, 0, 0, 0.1);
}

/* 16px line icons sit inside a clipped box in Figma; keep the box explicit. */
.icon-16 {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

.icon-16 > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* --- carousels ------------------------------------------------------------
   Dots pinned to the corner of a photo. The design ships them as one 32x8 SVG
   sprite, but a carousel has to move the active state, so the three circles are
   drawn in CSS instead. Geometry is identical to the asset: centres at 4/17/29,
   active radius 4 opaque, inactive radius 3 at 40%. Positioning by centre keeps
   the resting boxes exactly at 0,0,8x8 / 14,1,6x6 / 26,1,6x6 while letting the
   active dot grow and shrink in place.
   -------------------------------------------------------------------------- */

.nav-dots {
    position: absolute;
    width: 32px;
    height: 8px;
}

.nav-dots__dot {
    position: absolute;
    top: 4px;
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%;
    background: var(--c-white);
    opacity: 0.4;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

.nav-dots__dot--1 {
    left: 4px;
}

.nav-dots__dot--2 {
    left: 17px;
}

.nav-dots__dot--3 {
    left: 29px;
}

.nav-dots__dot.is-active {
    width: 8px;
    height: 8px;
    opacity: 1;
}

/* Slides use z-index while fading; keep dots above so they stay clickable.
   Arrow strips that use transform need their own z-index on the wrapper
   (see .usp__arrows) — a child's z-index cannot escape that stacking context. */
[data-carousel-state='live'] .nav-dots {
    z-index: 2;
}

/* Only a live carousel offers a pointer; a lone dot stays decorative. */
[data-carousel-state='live'] .nav-dots__dot {
    cursor: pointer;
}

[data-carousel-state='live'] .nav-dots__dot:not(.is-active):hover {
    opacity: 0.7;
}

/* A 6px circle is far too small to hit. The target grows around it without
   touching the box, kept narrower than the 13px spacing so neighbouring dots
   never steal each other's clicks. */
[data-carousel-state='live'] .nav-dots__dot::after {
    content: '';
    position: absolute;
    inset: -10px -3px;
}

/* Stacked slides cross-fade in place, so the block never changes size.
   The incoming slide fades in on top while the outgoing one stays fully opaque
   underneath and only switches off once it is covered — fading both at the same
   time would let the background show through at the halfway point. */
.carousel-slide {
    opacity: 0;
    transition: opacity 0s linear var(--carousel-fade);
}

.carousel-slide.is-active {
    z-index: 1;
    opacity: 1;
    transition: opacity var(--carousel-fade) ease-in-out;
}


[data-carousel-state] .carousel-slide:not(.is-active) {
    pointer-events: none;
}

.carousel-arrow {
    padding: 0;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

[data-carousel-state='live'] .carousel-arrow:hover {
    opacity: 0.7;
}


[data-carousel-state='live'] .carousel-arrow[data-carousel-next]:hover {
    transform: translateX(3px);
}

[data-carousel-state='live'] .carousel-arrow[data-carousel-prev]:hover {
    transform: translateX(-3px);
}

[data-carousel-state='live'] .carousel-arrow:active {
    transform: none;
    opacity: 0.55;
}

.carousel-arrow:disabled {
    cursor: default;
}


[data-carousel-state='live'] .carousel-arrow::after {
    content: '';
    position: absolute;
    inset: -13px -17px;
}

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --carousel-fade: 0s;
        --dur-fast: 0s;
        --dur: 0s;
        --lift: 0px;
    }

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}



@media (max-width: 767px) {
    :root {
        --gutter: 40px;
    }

    .page {
        width: 100%;
        min-width: 320px;
        overflow-x: clip;
    }

    @media (max-width: 400px) {
        :root {
            --gutter: 24px;
        }
    }

    .selector {
        width: 100%;
    }

    .selector__section {
        flex: 1 0 0;
        min-width: 0;
    }
}