/* ============================================================
   SKAITE TECHNOLOGIES
   RESPONSIVE.CSS
   ------------------------------------------------------------
   Responsive rules for header, navigation, hero and benefits.
   ============================================================ */

/* ============================================================
   01. LARGE DESKTOP
   ============================================================ */

@media (max-width: 1400px) {

    .header-container,
    .hero-container {

        width: min(1300px, calc(100% - 50px));

    }

    .hero-benefits-container {

        width: min(1200px, calc(100% - 50px));

    }

    .main-nav {

        gap: 25px;

    }

    .hero-device-image {

        width: min(680px, 100%);

    }

}

/* ============================================================
   02. LAPTOP / SMALL DESKTOP
   ============================================================ */

@media (max-width: 1200px) {

    .header-actions {

    gap: 8px;
}


.client-dashboard-btn {

    min-height: 42px;

    padding: 0 15px;

    border-radius: 11px;

    font-size: 11px;
}

    .header-container {

        width: calc(100% - 40px);

        gap: 20px;

    }

    .main-nav {

        gap: 20px;

    }

    .nav-link {

        font-size: 12px;

    }

    .header-cta {

        padding: 0 18px;

        font-size: 12px;

    }

    .hero-container {

        width: calc(100% - 40px);

        grid-template-columns: minmax(350px, 0.9fr) minmax(450px, 1.1fr);

        gap: 10px;

    }

    .hero-title {

        font-size: clamp(45px, 5vw, 68px);

    }

    .hero-device-image {

        width: min(620px, 100%);

    }

    .hero-benefits-container {

        width: calc(100% - 40px);

    }

    .hero-benefit {

        padding: 18px;

        gap: 11px;

    }

    .benefit-icon {

        width: 46px;

        height: 46px;

        flex-basis: 46px;

    }

}

/* ============================================================
   03. TABLET
   ============================================================ */

@media (max-width: 1024px) {

    /* --------------------------------------------------------
       Header
       -------------------------------------------------------- */

    .header-container {

        min-height: 68px;

    }

    .brand-symbol {

        width: 34px;

        height: 34px;

    }

    .brand-text {

        width: 88px;

        max-height: 40px;

    }

    .main-nav {

        gap: 15px;

    }

    .nav-link {

        min-height: 68px;

        font-size: 11px;

    }

    .nav-link::after {

        bottom: 14px;

    }

    .header-cta {

        min-height: 42px;

        padding: 0 15px;

        border-radius: 11px;

        font-size: 11px;

    }

    /* --------------------------------------------------------
       Hero
       -------------------------------------------------------- */

    .hero-section {

        min-height: 780px;

        padding-top: 68px;

    }

    .hero-container {

        min-height: 570px;

        grid-template-columns: 1fr 1fr;

        align-items: center;

    }

    .hero-content {

        padding: 35px 0 45px;

    }

    .hero-title {

        font-size: clamp(42px, 5.5vw, 58px);

        letter-spacing: -2px;

    }

    .hero-description {

        max-width: 500px;

        font-size: 14px;

    }

    .hero-device-image {

        width: 560px;

        max-width: 115%;

    }

    /* --------------------------------------------------------
       Floating Icons
       -------------------------------------------------------- */

    .floating-icon {

        width: 52px;

        height: 52px;

        border-radius: 14px;

        font-size: 18px;

    }

    .floating-icon-one {

        top: 75px;

    }

    .floating-icon-two {

        top: 190px;

    }

    .floating-icon-three {

        bottom: 90px;

    }

    /* --------------------------------------------------------
       Benefits
       -------------------------------------------------------- */

    .hero-benefits-container {

        grid-template-columns: repeat(2, 1fr);

    }

    .hero-benefit {

        border-right: 
            1px solid
            #e9edfa;

        border-bottom: 
            1px solid
            #e9edfa;

    }

    .hero-benefit:nth-child(2) {

        border-right: none;

    }

    .hero-benefit:nth-child(3),
    .hero-benefit:nth-child(4) {

        border-bottom: none;

    }

    .hero-benefit:nth-child(4) {

        border-right: none;

    }

}

/* ============================================================
   04. MOBILE NAVIGATION BREAKPOINT
   ============================================================ */

@media (max-width: 900px) {

    /* --------------------------------------------------------
       Desktop Navigation Hidden
       -------------------------------------------------------- */

    .main-nav {

        display: none;

    }

    /* --------------------------------------------------------
       Header CTA Hidden
       -------------------------------------------------------- */

    .header-actions {
    display: none;
}

    /* --------------------------------------------------------
       Mobile Button
       -------------------------------------------------------- */

    .mobile-menu-btn {

        display: flex;

        margin-left: auto;

    }

    /* --------------------------------------------------------
       Open Mobile Navigation
       -------------------------------------------------------- */

    .site-header.menu-open {

        background: rgba(255, 255, 255, .98);

    }

    .site-header.menu-open .main-nav {

        position: absolute;

        top: 68px;

        left: 20px;

        right: 20px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px;

        border: 1px solid rgba(57, 78, 151, .10);

        border-radius: 18px;

        background: rgba(255, 255, 255, .98);

        box-shadow: 0 20px 45px rgba(25, 45, 105, .12);

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

    }

    /* --------------------------------------------------------
       Mobile Navigation Links
       -------------------------------------------------------- */

    .site-header.menu-open .nav-link {

        min-height: 48px;

        padding: 0 15px;

        border-radius: 10px;

    }

    .site-header.menu-open .nav-link:hover,
    .site-header.menu-open .nav-link.active {

        background: 
            #f2f6ff;

    }

    .site-header.menu-open .nav-link::after {

        display: none;

    }

    /* --------------------------------------------------------
       Hero
       -------------------------------------------------------- */

    .hero-section {

        min-height: auto;

    }

    .hero-container {

        grid-template-columns: 1fr;

        min-height: auto;

        padding-top: 45px;

        padding-bottom: 20px;

    }

    .hero-content {

        max-width: 700px;

        margin: 0 auto;

        padding: 35px 0 10px;

        text-align: center;

    }

    .hero-badge {

        margin-left: auto;

        margin-right: auto;

    }

    .hero-title {

        align-items: center;

    }

    .hero-description {

        margin-left: auto;

        margin-right: auto;

    }

    .hero-actions {

        justify-content: center;

    }

    .hero-visual {

        min-height: 500px;

        margin-top: 0;

    }

    .hero-device-image {

        width: min(650px, 95%);

    }

    .floating-icon-one {

        left: 13%;

    }

    .floating-icon-two {

        left: 8%;

    }

    .floating-icon-three {

        left: 14%;

    }

    .floating-icon-four {

        right: 8%;

    }

}

/* ============================================================
   05. MOBILE
   ============================================================ */

@media (max-width: 768px) {

    /* --------------------------------------------------------
       Header
       -------------------------------------------------------- */

    .header-container {

        width: calc(100% - 30px);

        min-height: 64px;

        gap: 10px;

    }

    /* --------------------------------------------------------
       Logo
       -------------------------------------------------------- */

    .brand-logo {

        gap: 6px;

    }

    .brand-symbol {

        width: 32px;

        height: 32px;

    }

    .brand-text {

        width: 82px;

        max-height: 38px;

    }

    /* --------------------------------------------------------
       Mobile Menu
       -------------------------------------------------------- */

    .mobile-menu-btn {

        margin-left: auto;

    }

    .site-header.menu-open .main-nav {

        top: 64px;

        left: 15px;

        right: 15px;

    }

    /* --------------------------------------------------------
       Hero
       -------------------------------------------------------- */

    .hero-section {

        padding-top: 64px;

    }

    .hero-container {

        width: calc(100% - 30px);

        padding-top: 25px;

    }

    .hero-content {

        padding: 30px 0 5px;

    }

    .hero-badge {

        max-width: 100%;

        font-size: 9px;

        padding: 0 11px;

    }

    .hero-title {

        margin-bottom: 20px;

        font-size: clamp(40px, 10vw, 58px);

        letter-spacing: -1.8px;

    }

    .hero-description {

        max-width: 580px;

        margin-bottom: 27px;

        font-size: 14px;

        line-height: 1.75;

    }

    .hero-actions {

        flex-wrap: wrap;

    }

    .btn {

        min-height: 50px;

        padding: 0 22px;

        font-size: 13px;

    }

    /* --------------------------------------------------------
       Hero Artwork
       -------------------------------------------------------- */

    .hero-visual {

        min-height: 390px;

        margin-top: 5px;

    }

    .hero-device-image {

        width: 100%;

    }

    /* --------------------------------------------------------
       Floating Icons
       -------------------------------------------------------- */

    .floating-icon {

        width: 44px;

        height: 44px;

        border-radius: 12px;

        font-size: 15px;

    }

    .floating-icon-one {

        top: 45px;

        left: 5%;

    }

    .floating-icon-two {

        top: 145px;

        left: 0;

    }

    .floating-icon-three {

        bottom: 45px;

        left: 7%;

    }

    .floating-icon-four {

        top: 90px;

        right: 0;

    }

    /* --------------------------------------------------------
       Hero Benefits
       -------------------------------------------------------- */

    .hero-benefits-container {

        width: calc(100% - 30px);

        margin: 0 auto 25px;

        padding: 8px;

        grid-template-columns: 1fr;

        border-radius: 18px;

    }

    .hero-benefit {

        min-height: 76px;

        padding: 14px;

        border-right: none;

        border-bottom: 
            1px solid
            #e9edfa;

    }

    .hero-benefit:nth-child(2),
    .hero-benefit:nth-child(3),
    .hero-benefit:nth-child(4) {

        border-bottom: 
            1px solid
            #e9edfa;

    }

    .hero-benefit:last-child {

        border-bottom: none;

    }

    .benefit-icon {

        width: 44px;

        height: 44px;

        flex-basis: 44px;

        border-radius: 12px;

        font-size: 18px;

    }

    .benefit-content h3 {

        font-size: 12px;

    }

    .benefit-content p {

        font-size: 9px;

    }

}

/* ============================================================
   06. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    /* --------------------------------------------------------
       Header
       -------------------------------------------------------- */

    .header-container {

        width: calc(100% - 24px);

        min-height: 60px;

    }

    .brand-logo {

        gap: 5px;

    }

    .brand-symbol {

        width: 29px;

        height: 29px;

    }

    .brand-text {

        width: 76px;

        max-height: 34px;

    }

    .mobile-menu-btn {

        width: 40px;

        height: 40px;

    }

    /* --------------------------------------------------------
       Hero
       -------------------------------------------------------- */

    .hero-section {

        padding-top: 60px;

    }

    .hero-container {

        width: calc(100% - 24px);

        padding-top: 18px;

    }

    .hero-content {

        padding: 25px 0 0;

    }

    .hero-badge {

        min-height: 29px;

        margin-bottom: 19px;

        font-size: 8px;

    }

    .badge-dot {

        width: 6px;

        height: 6px;

    }

    .hero-title {

        font-size: 39px;

        line-height: 1.05;

        letter-spacing: -1.5px;

    }

    .hero-description {

        font-size: 13px;

        line-height: 1.7;

    }

    .hero-actions {

        width: 100%;

        flex-direction: column;

        gap: 10px;

    }

    .btn {

        width: 100%;

    }

    /* --------------------------------------------------------
       Hero Artwork
       -------------------------------------------------------- */

    .hero-visual {

        min-height: 290px;

    }

    .hero-device-image {

        width: 108%;

        max-width: none;

    }

    /* --------------------------------------------------------
       Floating Icons
       -------------------------------------------------------- */

    .floating-icon {

        width: 36px;

        height: 36px;

        border-radius: 10px;

        font-size: 12px;

    }

    .floating-icon-one {

        top: 25px;

        left: 1%;

    }

    .floating-icon-two {

        top: 100px;

        left: -2%;

    }

    .floating-icon-three {

        bottom: 20px;

        left: 4%;

    }

    .floating-icon-four {

        top: 65px;

        right: -2%;

    }

    /* --------------------------------------------------------
       Benefits
       -------------------------------------------------------- */

    .hero-benefits-container {

        width: calc(100% - 24px);

        border-radius: 16px;

    }

    .hero-benefit {

        min-height: 70px;

        padding: 12px;

    }

    .benefit-icon {

        width: 40px;

        height: 40px;

        flex-basis: 40px;

        font-size: 16px;

    }

    .benefit-content h3 {

        font-size: 11px;

    }

    .benefit-content p {

        font-size: 8px;

    }

}

/* ============================================================
   07. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 360px) {

    .brand-text {

        width: 70px;

    }

    .hero-title {

        font-size: 35px;

    }

    .hero-description {

        font-size: 12px;

    }

    .hero-visual {

        min-height: 250px;

    }

    .floating-icon {

        display: none;

    }

}

/* ============================================================
   08. REDUCED MOTION
   ============================================================ */

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

    html {

        scroll-behavior: auto;

    }

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}