/* =========================================================
   AUTOHUB — GLOBAL DESIGN SYSTEM
   TILDA GLOBAL CSS
   ========================================================= */


/* =========================================================
   01. FONT
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');


/* =========================================================
   02. DESIGN TOKENS
   ========================================================= */

:root {

    /* COLORS */

    --ah-bg: #050606;
    --ah-bg-soft: #0a0a0a;
    --ah-bg-card: #101010;

    --ah-white: #f5f5f5;
    --ah-text: #d7d7d7;
    --ah-muted: #a8a8a8;

    --ah-orange: #ff4b0b;
    --ah-orange-hover: #ff5c22;

    --ah-border: rgba(255, 255, 255, .08);
    --ah-border-hover: rgba(255, 255, 255, .15);


    /* TYPOGRAPHY */

    --ah-h1:
        clamp(2rem, 2.55vw + 1rem, 5rem);

    --ah-h2:
        clamp(1.625rem, 1.45vw + 1rem, 3.5rem);

    --ah-h3:
        clamp(1.125rem, .55vw + .8rem, 1.625rem);

    --ah-lead:
        clamp(1rem, .35vw + .9rem, 1.3125rem);

    --ah-body:
        clamp(.875rem, .25vw + .78rem, 1.125rem);

    --ah-small:
        clamp(.75rem, .15vw + .72rem, .875rem);

    --ah-button-text:
        clamp(.8125rem, .25vw + .7rem, 1rem);


    /* FONT WEIGHTS */

    --ah-weight-regular: 400;
    --ah-weight-medium: 500;
    --ah-weight-semibold: 600;
    --ah-weight-bold: 700;
    --ah-weight-extrabold: 800;


    /* LINE HEIGHT */

    --ah-line-heading: 1.08;
    --ah-line-text: 1.6;


    /* =====================================================
       STANDARD CONTAINER
       Для обычных секций сайта
       ===================================================== */

    --ah-container-max: 1848px;
    --ah-container-width: 90.2vw;


    /* =====================================================
       WIDE CONTAINER
       Header и широкие композиции
       ===================================================== */

    --ah-container-wide-max: 2240px;
    --ah-container-wide-width: calc(100vw - 160px);


    /* SECTION SPACING */

    --ah-section-space:
        clamp(72px, 6.5vw, 150px);

    --ah-section-space-small:
        clamp(48px, 4.5vw, 100px);


    /* GAPS */

    --ah-gap-xs:
        clamp(8px, .5vw, 12px);

    --ah-gap-sm:
        clamp(12px, .8vw, 20px);

    --ah-gap-md:
        clamp(20px, 1.5vw, 36px);

    --ah-gap-lg:
        clamp(32px, 2.5vw, 64px);


    /* BORDER RADIUS */

    --ah-radius-small: 7px;
    --ah-radius-medium: 12px;
    --ah-radius-large: 18px;


    /* ANIMATION */

    --ah-transition-fast:
        180ms ease;

    --ah-transition:
        280ms ease;

    --ah-transition-smooth:
        420ms cubic-bezier(.22, 1, .36, 1);


    /* SHADOW */

    --ah-shadow-orange:
        0 10px 30px rgba(255, 75, 11, .16);
}


/* =========================================================
   03. AUTOHUB BASE
   Не вмешиваемся в стандартные элементы Tilda
   ========================================================= */

[class^="ah-"],
[class*=" ah-"] {
    box-sizing: border-box;

    font-family:
        'Montserrat',
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


[class^="ah-"] *,
[class^="ah-"] *::before,
[class^="ah-"] *::after,
[class*=" ah-"] *,
[class*=" ah-"] *::before,
[class*=" ah-"] *::after {
    box-sizing: border-box;
}


/* =========================================================
   04. IMAGES
   ========================================================= */

.ah-img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   05. STANDARD CONTAINER
   ========================================================= */

.ah-container {
    width: min(
        var(--ah-container-width),
        var(--ah-container-max)
    );

    margin-inline: auto;
}


/* =========================================================
   06. WIDE CONTAINER
   ========================================================= */

.ah-container-wide {
    width: min(
        var(--ah-container-wide-width),
        var(--ah-container-wide-max)
    );

    margin-inline: auto;
}


/* =========================================================
   07. SECTIONS
   ========================================================= */

.ah-section {
    position: relative;

    width: 100%;

    padding-top:
        var(--ah-section-space);

    padding-bottom:
        var(--ah-section-space);
}


.ah-section--small {
    padding-top:
        var(--ah-section-space-small);

    padding-bottom:
        var(--ah-section-space-small);
}


/* =========================================================
   08. TYPOGRAPHY
   ========================================================= */

.ah-h1,
.ah-h2,
.ah-h3 {
    margin: 0;

    color:
        var(--ah-white);
}


.ah-h1 {
    font-size:
        var(--ah-h1);

    font-weight:
        var(--ah-weight-extrabold);

    line-height:
        var(--ah-line-heading);

    letter-spacing:
        -.035em;
}


.ah-h2 {
    font-size:
        var(--ah-h2);

    font-weight:
        var(--ah-weight-bold);

    line-height: 1.1;

    letter-spacing:
        -.025em;
}


.ah-h3 {
    font-size:
        var(--ah-h3);

    font-weight:
        var(--ah-weight-semibold);

    line-height: 1.2;

    letter-spacing:
        -.015em;
}


.ah-lead {
    margin: 0;

    color:
        var(--ah-text);

    font-size:
        var(--ah-lead);

    font-weight:
        var(--ah-weight-regular);

    line-height: 1.55;
}


.ah-body {
    margin: 0;

    color:
        var(--ah-text);

    font-size:
        var(--ah-body);

    font-weight:
        var(--ah-weight-regular);

    line-height:
        var(--ah-line-text);
}


.ah-small {
    margin: 0;

    color:
        var(--ah-muted);

    font-size:
        var(--ah-small);

    font-weight:
        var(--ah-weight-regular);

    line-height: 1.5;
}


/* =========================================================
   09. LINKS
   ========================================================= */

.ah-link {
    color: inherit;

    text-decoration: none;

    transition:
        color var(--ah-transition-fast);
}


.ah-link:hover {
    color:
        var(--ah-orange);
}


/* =========================================================
   10. GLOBAL BUTTON
   ========================================================= */

.ah-btn {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height:
        clamp(46px, 3vw, 58px);

    padding:
        0 clamp(20px, 1.5vw, 32px);

    border:
        1px solid var(--ah-orange);

    border-radius:
        var(--ah-radius-small);

    font-family:
        'Montserrat',
        Arial,
        sans-serif;

    font-size:
        var(--ah-button-text);

    font-weight:
        var(--ah-weight-semibold);

    line-height: 1;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition:
        color var(--ah-transition),
        background-color var(--ah-transition),
        border-color var(--ah-transition),
        transform var(--ah-transition),
        box-shadow var(--ah-transition);
}


/* PRIMARY */

.ah-btn--primary {
    background:
        var(--ah-orange);

    color: #fff;
}


.ah-btn--primary:hover {
    background:
        var(--ah-orange-hover);

    border-color:
        var(--ah-orange-hover);

    transform:
        translateY(-2px);

    box-shadow:
        var(--ah-shadow-orange);
}


/* OUTLINE */

.ah-btn--outline {
    background:
        transparent;

    color:
        var(--ah-orange);
}


.ah-btn--outline:hover {
    background:
        var(--ah-orange);

    color: #fff;

    transform:
        translateY(-2px);

    box-shadow:
        var(--ah-shadow-orange);
}


/* =========================================================
   11. ACCESSIBILITY
   ========================================================= */

.ah-link:focus-visible,
.ah-btn:focus-visible {
    outline:
        2px solid var(--ah-orange);

    outline-offset: 4px;
}


/* =========================================================
   12. <= 1440
   ========================================================= */

@media (max-width: 1440px) {

    :root {
        --ah-container-wide-width:
            calc(100vw - 80px);
    }
}


/* =========================================================
   13. <= 1024
   ========================================================= */

@media (max-width: 1024px) {

    :root {
        --ah-container-width:
            calc(100vw - 48px);

        --ah-container-wide-width:
            calc(100vw - 48px);
    }
}


/* =========================================================
   14. <= 767
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --ah-container-width:
            calc(100vw - 32px);

        --ah-container-wide-width:
            calc(100vw - 32px);

        --ah-radius-large: 14px;
    }
}


/* =========================================================
   15. <= 430
   ========================================================= */

@media (max-width: 430px) {

    :root {
        --ah-container-width:
            calc(100vw - 24px);

        --ah-container-wide-width:
            calc(100vw - 24px);
    }
}


/* =========================================================
   16. <= 320
   ========================================================= */

@media (max-width: 320px) {

    :root {
        --ah-container-width:
            calc(100vw - 20px);

        --ah-container-wide-width:
            calc(100vw - 20px);
    }
}


/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    [class^="ah-"],
    [class^="ah-"] *,
    [class^="ah-"] *::before,
    [class^="ah-"] *::after,
    [class*=" ah-"],
    [class*=" ah-"] *,
    [class*=" ah-"] *::before,
    [class*=" ah-"] *::after {
        scroll-behavior: auto !important;

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }
}