/* Header Architecture */
.site-header {
    padding: 24px 0;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hero Section Grid */
.hero-section {
    padding: 160px 0 100px 0;
    position: relative;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

/* Trust Ribbon Section */
.trust-ribbon-section {
    padding: 40px 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* Feature Showcase Section Grid setup */
.features-section {
    padding: 120px 0;
}

/* Brand Expertise section block */
.expertise-section {
    padding: 60px 0;
}

/* Legal Base Bar */
.site-footer {
    padding: 40px 0;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links a {
    margin-left: 24px;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--color-brand-primary);
}

/* Responsive Media Breakdown Interceptors */

@media (max-width: 968px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 80px;
    }
    
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-visual-wrapper {
        justify-self: center;
        width: 100%;
        max-width: 450px;
        height: 580px;
    }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    
    .footer-bottom-flex {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .footer-links a {
        margin: 0 12px;
    }
}

@media (max-width: 480px) {
    
    .trust-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
}

.expertise-illustration-side{
    display:flex;
    justify-content:center;
    align-items:center;
}

.mother-illustration-placeholder{
    width:100%;
    max-width:460px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.companion-image{
    width:100%;
    max-width:420px;
    height:auto;
    display:block;
    object-fit:contain;
}

/* Tablet */
@media (max-width:992px){
    .mother-illustration-placeholder{
        max-width:340px;
    }
}

/* Mobile */
@media (max-width:768px){
    .mother-illustration-placeholder{
        max-width:280px;
        margin:0 auto;
    }

    .companion-image{
        max-width:260px;
    }
}
/* Early Access Section */
.early-access-section {
    padding: 40px 0 20px 0;
}

.early-access-section .container {
    margin: 0 auto;
}

/* On narrow screens the floating cards must stay inside the viewport, or the
   phone mockup's own content gets cropped along with them. */

/* Product showcase */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 72px;
    justify-items: center;
}

@media (max-width: 900px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 64px;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Closing section — generous air on both sides of the quiet moment */
.closing-section {
    padding: 120px 0 100px 0;
}

@media (max-width: 768px) {
    .closing-section {
        padding: 80px 0 64px 0;
    }
}