/* =========================================================
   LAYOUT.CSS — GRID, FLEX, SECTION STRUCTURE
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL LAYOUT HELPERS
   --------------------------------------------------------- */
.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.grid {
    display: grid;
    gap: var(--space-lg);
}

.flex {
    display: flex;
    gap: var(--space-md);
}

/* ---------------------------------------------------------
   HERO LAYOUT
   --------------------------------------------------------- */
.hero {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-top: 66px;
    background: radial-gradient(circle at top left, #1A315C 0%, #0B1D35 40%, #050C18 100%);
    position: relative;
    overflow: hidden;
}

/* Soft glow behind hero */
.hero::before {
    content: '';
    position: absolute;
    inset: -120px;
    background:
        radial-gradient(circle at 10% 0%, rgba(244, 197, 74, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(20, 82, 204, 0.18) 0%, transparent 55%);
    opacity: 0.9;
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xxl) var(--space-xl);
    max-width: 1160px;
    margin: 0 auto;
    width: 100%;
}

.hero__demo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl) var(--space-xl) var(--space-xxl) var(--space-lg);
}

.hero__tags {
    display: inline-flex;
    margin-top: var(--space-lg);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
}

/* ---------------------------------------------------------
   SERVICES SECTION LAYOUT
   --------------------------------------------------------- */
.services__intro {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-xl);
    align-items: end;
    margin-bottom: var(--space-xxl);
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

/* ---------------------------------------------------------
   PRICING SECTION LAYOUT
   --------------------------------------------------------- */
.pricing {
    background: radial-gradient(circle at top, #1A315C 0%, #0B1D35 45%, #050C18 100%);
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

/* ---------------------------------------------------------
   FAQ SECTION LAYOUT
   --------------------------------------------------------- */
.faq__layout {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr;
    gap: var(--space-xxl);
    align-items: start;
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* ---------------------------------------------------------
   CONTACT SECTION LAYOUT
   --------------------------------------------------------- */
.contact__layout {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr;
    gap: var(--space-xxl);
    align-items: start;
}

.contact__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

/* ---------------------------------------------------------
   FOOTER LAYOUT
   --------------------------------------------------------- */
.footer {
    background: #0C1018;
    padding: var(--space-xxl) var(--space-xl) var(--space-xl);
}

.footer__inner {
    max-width: 1160px;
    margin: 0 auto;
}

.footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* ---------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   --------------------------------------------------------- */
@media (max-width: 1024px) {

    .hero__demo {
        display: none;
    }

    .services__intro {
        grid-template-columns: 1fr;
    }

    .services__grid {
        grid-template-columns: 1fr;
    }

    .pricing__grid {
        grid-template-columns: 1fr;
    }

    .faq__layout {
        grid-template-columns: 1fr;
    }

    .contact__layout {
        grid-template-columns: 1fr;
    }

    .footer__top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {

    .footer__top {
        grid-template-columns: 1fr;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}