/* ═══════════════════════════════════════════════════════════════════════════════
   LAYOUT.CSS — Section Spacing, Hero Framework, Topology Backgrounds
   Mobile-first with 5-stage responsive scaling
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── SECTION SPACING ───────────────────────────────────────────────────────── */
.section-padding {
    padding: 4rem 0;
}

@media (min-width: 576px) {
    .section-padding { padding: 5rem 0; }
}

@media (min-width: 768px) {
    .section-padding { padding: 6rem 0; }
}

@media (min-width: 992px) {
    .section-padding { padding: 7rem 0; }
}

@media (min-width: 1200px) {
    .section-padding { padding: 8rem 0; }
}


/* ─── HERO SECTION FRAMEWORK ────────────────────────────────────────────────── */
.hero-section {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--header-height);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Hero Content Columns */
.hero-content-col {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.hero-visual-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hero Container Fit */
.hero-container-fit {
    display: flex;
    flex-direction: column;
}

/* Hero Visual Wrappers */
.hero-visual-wrap {
    width: 100%;
    max-width: 520px;
    position: relative;
    margin: 0 auto; /* Default center for mobile */
}

@media (min-width: 992px) {
    .hero-visual-wrap {
        margin: 0 0 0 auto; /* Dock right on desktop */
    }
}

.visual-frame {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
}

.frame-header {
    display: flex;
    gap: 6px;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--glass-border);
}

.frame-header span {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
}

.frame-header span:nth-child(1) { background: #ff5f57; }
.frame-header span:nth-child(2) { background: #febc2e; }
.frame-header span:nth-child(3) { background: #28c840; }

/* Result Badge */
.result-badge {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}

.badge-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(39, 201, 63, 0.15);
    border-radius: var(--radius-sm);
    color: var(--accent-green);
}

.badge-title {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: block;
}

.badge-value {
    font-size: 0.85rem;
    color: var(--accent-green);
    font-weight: 600;
    display: block;
}

/* Hero Social Proof */
.hero-social-proof {
    margin-top: 1rem;
}


/* ─── TOPOLOGY BACKGROUNDS ──────────────────────────────────────────────────── */
.topology-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.topology-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Grid Mesh */
.grid-mesh,
.topo-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.topo-grid.cyan {
    background-image:
        linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
}

/* Topology Variants */
.topo-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.topo-circuit {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, transparent 49.5%, rgba(0, 240, 255, 0.03) 49.5%, rgba(0, 240, 255, 0.03) 50.5%, transparent 50.5%),
        linear-gradient(transparent 49.5%, rgba(0, 240, 255, 0.03) 49.5%, rgba(0, 240, 255, 0.03) 50.5%, transparent 50.5%);
    background-size: 80px 80px;
}

.topo-radial {
    position: absolute;
    inset: 0;
}

.topo-radial.purple {
    background: radial-gradient(circle at 30% 50%, rgba(138, 43, 226, 0.08) 0%, transparent 60%);
}

.topology-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

/* Ambient Orbs */
.ambient-orb {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: var(--radius-circle);
    filter: blur(120px);
    pointer-events: none;
    opacity: 0.6;
}

.ambient-orb.orb-gold {
    top: -10%;
    right: -10%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
}

.ambient-orb.orb-cyan {
    bottom: -10%;
    left: -10%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, transparent 70%);
}

.ambient-orb.orb-purple {
    top: 20%;
    left: -10%;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.08) 0%, transparent 70%);
}

/* Glow Orbs (Legacy) */
.glow-orb {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: var(--radius-circle);
    filter: blur(120px);
    pointer-events: none;
}

.glow-tr {
    top: -300px;
    right: -300px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.08), transparent 70%);
}

.glow-bl {
    bottom: -300px;
    left: -300px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.05), transparent 70%);
}

/* Particles Container */
.particles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


/* ─── LOTTIE CONTAINER ──────────────────────────────────────────────────────── */
.lottie-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.lottie-bg {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.08) 0%, transparent 70%);
    filter: blur(60px);
}

.feature-icon-large {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ─── CTA SECTION ───────────────────────────────────────────────────────────── */
.section-cta {
    text-align: center;
}

.cta-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cta-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: var(--radius-circle);
    filter: blur(100px);
}

.cta-glow.glow-1 {
    top: -50%;
    left: 20%;
    background: rgba(255, 215, 0, 0.1);
}

.cta-glow.glow-2 {
    bottom: -50%;
    right: 20%;
    background: rgba(0, 240, 255, 0.08);
}

.cta-title {
    font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.cta-desc {
    font-size: clamp(0.95rem, 1vw + 0.15rem, 1.15rem);
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 550px;
    margin: 0 auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.trust-tags {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.trust-tags span {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.trust-tags span i {
    color: var(--primary-gold);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   5-STAGE RESPONSIVE — LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

/* XS overrides (<576px) */
@media (max-width: 575.98px) {
    .hero-section {
        min-height: auto;
        padding-top: calc(var(--header-height) + 1rem);
        padding-bottom: 2rem;
    }

    .hero-content-col {
        text-align: center;
        padding-top: 1rem;
    }

    .hero-visual-col {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .hero-visual-wrap {
        max-width: 320px;
    }

    .result-badge {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .badge-value { font-size: 0.75rem; }
    .badge-title { font-size: 0.6rem; }
    .badge-icon { width: 28px; height: 28px; }

    .ambient-orb {
        width: 300px;
        height: 300px;
        filter: blur(80px);
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .trust-tags {
        gap: 0.75rem;
    }

    .trust-tags span {
        font-size: 0.7rem;
    }
}

/* SM (576px+) */
@media (min-width: 576px) {
    .hero-visual-wrap {
        max-width: 400px;
    }
}

/* MD (768px+) — Tablet */
@media (min-width: 768px) {
    .hero-section {
        min-height: 85vh;
    }

    .hero-visual-wrap {
        max-width: 450px;
    }
}

/* LG (992px+) — Laptop */
@media (min-width: 992px) {
    .hero-section {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .hero-container-fit {
        flex-direction: row;
    }

    .hero-visual-wrap {
        max-width: 520px;
    }

    .lottie-container {
        min-height: 350px;
    }
}

/* XL (1200px+) — Desktop */
@media (min-width: 1200px) {
    .ambient-orb {
        width: 600px;
        height: 600px;
    }
}

/* XXL (1400px+) — Ultra-Wide */
@media (min-width: 1400px) {
    .ambient-orb {
        width: 700px;
        height: 700px;
    }
}

/* ─── GENERIC UTILITIES ─────────────────────────────────────────────────────── */
.max-w-600 {
    max-width: 600px;
    width: 100%;
}

.max-w-550 {
    max-width: 550px;
    width: 100%;
}