/* =====================================================
   Design tokens — Figma file: Chatl software (Copy)
   Frame B2С (1920 × 2472)
   ===================================================== */
:root {
    --deep-blue: #000897;
    --blue-bright: #0359ef;
    --blue-button: #0032ed;
    --blue-base: #010758;
    --footer-bg: #041478;
    --field-bg: #ecf2fb;
    --field-placeholder: rgba(4, 15, 38, 0.4);
    --text-dark: #040f26;
    --bg-light: #e6ecf5;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Rectangle 17 from Figma, flipped vertically so the light end sits
       at the top (right under the hero) and the dark end at the bottom
       (continuing into the dark footer). */
    --middle-bg: linear-gradient(
        180deg,
        #e6ecf5 0%,
        #81c8ff 50.94%,
        #2e9dff 72.78%,
        #012ab0 99%
    );
}

/* =====================================================
   Reset & base
   ===================================================== */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-light);
}

body {
    font-family: var(--font);
    color: var(--text-dark);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; margin: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
   Layout
   The page targets a 1920px design width.
   Sizes use clamp(min, vw, max) so they scale below 1920
   and never exceed the design dimensions above it.
   ===================================================== */
.page { width: 100%; overflow-x: hidden; }

.container {
    max-width: 1920px;
    margin: 0 auto;
    padding-inline: clamp(20px, 11.25vw, 216px); /* 216/1920 = 11.25% */
}

/* =====================================================
   Hero (1920 × 960)
   Background is the Figma render; the chatl logo and tagline
   are baked into the image. The login card is rendered as HTML
   on top, positioned in % so it tracks the scaled image.
   ===================================================== */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 960;
    overflow: hidden;
    background: var(--blue-base);
}

.hero__media {
    position: absolute;
    inset: 0;
    background: url("assets/hero_bg.png") center / cover no-repeat;
}

.hero__content {
    position: absolute;
    inset: 0;
}

/* Mobile-only brand block; hidden on desktop (image carries it). */
.hero__brand--mobile { display: none; }

.hero__logo  { width: 160px; height: auto; }
.hero__tagline {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-line;
}

/* --- Login card --- */
.login-card {
    position: absolute;
    left: 63.91%;            /* 1227 / 1920 */
    top: 5%;                 /*   48 /  960 */
    width: 24.17%;           /*  464 / 1920 */
    height: 90%;             /*  864 /  960 */
    overflow: hidden;
    background: #fff;
    border-radius: clamp(16px, 1.25vw, 24px);
}

.login-card__title {
    position: absolute;
    left: 50%;
    top: 8.45%;              /* ~73 / 864 */
    transform: translateX(-50%);
    width: 65.5%;            /* 304 / 464 */
    margin: 0;
    text-align: center;
    color: var(--deep-blue);
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1.25;
    font-weight: 400;
}

.login-form {
    position: absolute;
    left: 17.24%;            /*  80 / 464 */
    top: 40.74%;             /* 352 / 864 */
    width: 65.5%;            /* 304 / 464 */
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 0.83vw, 16px);
}

.field {
    position: relative;
    display: flex;
    align-items: center;
    height: clamp(36px, 2.083vw, 40px);
    background: var(--field-bg);
    border-radius: clamp(16px, 1.25vw, 24px);
    overflow: hidden;
}

.field input {
    flex: 1;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0 clamp(14px, 1.25vw, 24px);
    font: inherit;
    font-size: clamp(12px, 0.729vw, 14px);
    color: var(--text-dark);
}

.field input::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
}

.field__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: clamp(8px, 0.625vw, 12px);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.field__toggle img { width: 100%; height: 100%; }

.login-form__submit {
    margin-top: clamp(10px, 1.25vw, 24px);
    height: clamp(36px, 2.083vw, 40px);
    border: 0;
    border-radius: clamp(18px, 1.354vw, 26px);
    background: var(--blue-button);
    color: #fff;
    font: inherit;
    font-size: clamp(12px, 0.729vw, 14px);
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.login-form__submit:hover  { filter: brightness(1.08); }
.login-form__submit:active { transform: translateY(1px); }

.login-card__legal {
    position: absolute;
    left: 50%;
    top: 90.16%;             /* 779 / 864 */
    transform: translateX(-50%);
    width: 81.9%;            /* 380 / 464 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.login-card__legal a {
    color: var(--text-dark);
    opacity: 0.4;
    font-size: clamp(12px, 0.729vw, 14px);
    font-weight: 400;
    line-height: 1;
}

/* =====================================================
   Middle — gradient backdrop for "about" + cards.
   ===================================================== */
.middle { background: var(--middle-bg); }

.about {
    padding-top: clamp(48px, 5.52vw, 106px);
}

.about__grid {
    display: grid;
    grid-template-columns: minmax(0, 991px) minmax(0, 464px);
    gap: 0 clamp(24px, 2.6vw, 49px);
    align-items: start;
}

.about__title {
    margin: 0;
    max-width: 991px;
    color: var(--blue-bright);
    font-size: clamp(28px, 2.917vw, 56px);
    line-height: 1.143;      /* 64/56 */
    font-weight: 500;
}

.about__text {
    margin: 0;
    max-width: 464px;
    color: var(--blue-bright);
    font-size: clamp(14px, 1.25vw, 24px);
    line-height: 1.5;        /* 36/24 */
    font-weight: 400;
}

/* =====================================================
   Feature cards
   ===================================================== */
.features {
    padding: clamp(24px, 2.4vw, 46px) 0 clamp(64px, 5.21vw, 100px);
}

.features__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.5vw, 48px);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 464 / 600;
    padding: clamp(24px, 2.083vw, 40px);
    border-radius: clamp(20px, 1.667vw, 32px);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}

.card--1 { background-image: url("assets/card1.jpg"); }
.card--2 { background-image: url("assets/card2.png"); }
.card--3 { background-image: url("assets/card3.png"); }

.card__num {
    display: block;
    margin: 0 0 clamp(32px, 3.23vw, 62px);
    font-size: clamp(56px, 5.21vw, 100px);
    line-height: 1;
    font-weight: 600;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 24px);
}

.card__title {
    margin: 0;
    font-size: clamp(20px, 1.667vw, 32px);
    line-height: 1.3125;     /* 42/32 */
    font-weight: 400;
}

.card__text {
    margin: 0;
    font-size: clamp(14px, 1.25vw, 24px);
    line-height: 1.5;        /* 36/24 */
    font-weight: 400;
}

/* =====================================================
   Footer
   ===================================================== */
.footer {
    padding: clamp(20px, 1.875vw, 36px) 0;
    background: var(--footer-bg);
    color: #fff;
}

.footer__grid {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer__brand {
    display: flex;
    align-items: flex-end;
    gap: clamp(16px, 1.51vw, 29px);
}

.footer__logo {
    width: clamp(96px, 8.385vw, 161px);
    height: auto;
    aspect-ratio: 161 / 48.4827;
}

.footer__meta {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(16px, 1.51vw, 29px);
    max-width: 848px;
    margin-left: auto;
}

.footer__copy,
.footer__contact,
.footer__credit {
    font-size: clamp(12px, 0.729vw, 14px);
    font-weight: 400;
    color: #fff;
}

/* =====================================================
   Mobile (< 900px) — stack everything, replace the heavy
   hero composition with a simple gradient + HTML brand.
   ===================================================== */
@media (max-width: 900px) {
    .hero {
        aspect-ratio: auto;
        background: linear-gradient(180deg, #050d4c 0%, #0a1a8f 50%, #2364ec 100%);
    }
    .hero__media   { display: none; }
    .hero__content { position: static; display: flex; flex-direction: column; }

    .hero__brand--mobile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 24px 16px;
        gap: 16px;
    }
    .hero__tagline { max-width: none; }

    .login-card {
        position: static;
        width: calc(100% - 32px);
        max-width: 420px;
        height: auto;
        margin: 24px auto 32px;
        padding: 32px 24px 24px;
        border-radius: 24px;
    }
    .login-card__title {
        position: static;
        transform: none;
        width: 100%;
        margin: 0 0 24px;
        font-size: 20px;
    }
    .login-form {
        position: static;
        width: 100%;
        margin-bottom: 24px;
        gap: 14px;
    }
    .field { height: 44px; border-radius: 999px; }
    .field input { font-size: 14px; padding: 0 20px; }
    .login-form__submit {
        height: 44px;
        margin-top: 8px;
        border-radius: 999px;
        font-size: 14px;
    }
    .login-card__legal {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 24px;
    }
    .login-card__legal a { font-size: 12px; }

    .about       { padding-top: 48px; }
    .about__grid { grid-template-columns: 1fr; gap: 24px; }
    .about__title { font-size: 28px; line-height: 1.2; }
    .about__text  { font-size: 16px; }

    .features        { padding: 24px 0 64px; }
    .features__list  { grid-template-columns: 1fr; gap: 16px; }
    .card {
        aspect-ratio: auto;
        min-height: 320px;
        padding: 28px;
        border-radius: 24px;
    }
    .card__num   { font-size: 56px; margin-bottom: 24px; }
    .card__title { font-size: 22px; }
    .card__text  { font-size: 15px; line-height: 1.5; }

    .footer { padding: 24px 0; }
    .footer__grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .footer__meta {
        flex-direction: column;
        align-items: flex-start;
        max-width: none;
        margin-left: 0;
        width: 100%;
        gap: 8px;
    }
    .footer__copy,
    .footer__contact,
    .footer__credit { font-size: 13px; }
    .footer__logo { width: 120px; }
}