/* ----------------------------------------------------------- */
/* HERO SECTION */
/* ----------------------------------------------------------- */
.internal-hero {
    padding: 8rem 0 4rem 0;
    text-align: center;
    max-width: 60rem;
    margin: auto;
}

.status-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 1.5rem;
    border-radius: 3.125rem; /* 50px */
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(0.625rem); /* 10px */
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-color);
    box-shadow: 0 0 1.25rem rgba(0,0,0,0.05); /* 20px */
}

.dot {
    width: 0.6rem; height: 0.6rem;
    background-color: #ff4d4d; /* Red for "Not Live Yet" */
    border-radius: 50%;
    box-shadow: 0 0 0.625rem #ff4d4d; /* 10px */
    animation: pulseRed 2s infinite;
}

@keyframes pulseRed {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.hero-headline {
    font-size: 4rem; 
    font-weight: 700; 
    color: var(--text-color);
    margin-bottom: 1rem; 
    letter-spacing: -0.02em; 
    line-height: 1.1;
}

.hero-quote {
    font-size: 1.5rem; 
    font-family: serif; 
    font-style: italic;
    color: var(--text-subtle);
    opacity: 0.9;
}

/* ----------------------------------------------------------- */
/* BLUEPRINT CARD */
/* ----------------------------------------------------------- */
.blueprint-section {
    padding: 0 2rem;
    margin-bottom: 6rem;
    display: flex;
    justify-content: center;
}

.glass-blueprint-card {
    background: var(--surface-color);
    backdrop-filter: blur(2.5rem); /* 40px */
    -webkit-backdrop-filter: blur(2.5rem);
    border: 1px solid var(--border-color);
    border-radius: 1.875rem; /* 30px */
    padding: 5rem 3rem;
    max-width: 55rem;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

/* Background Grid Overlay (Updated for Both Modes) */
.grid-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Default (Light Mode): Dark lines */
    background-image: 
        linear-gradient(rgba(0,0,0,0.05) 0.0625rem, transparent 0.0625rem), /* 1px */
        linear-gradient(90deg, rgba(0,0,0,0.05) 0.0625rem, transparent 0.0625rem);
    
    background-size: 2.5rem 2.5rem; /* 40px */
    z-index: 0;
    pointer-events: none;
}

/* Dark Mode Override: White lines */
[data-theme="dark"] .grid-overlay {
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 0.0625rem, transparent 0.0625rem),
        linear-gradient(90deg, rgba(255,255,255,0.05) 0.0625rem, transparent 0.0625rem);
}

/* Pulsing Icon */
.blueprint-icon-wrapper {
    position: relative;
    z-index: 1;
    width: 8rem; height: 8rem;
    display: flex; justify-content: center; align-items: center;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    font-size: 3rem;
    color: var(--text-color);
    box-shadow: 0 0 1.875rem var(--aurora-1); /* 30px */
}

.pulse-ring {
    position: absolute;
    top: -0.625rem; left: -0.625rem; right: -0.625rem; bottom: -0.625rem; /* -10px */
    border: 0.125rem solid var(--text-color); /* 2px */
    border-radius: 50%;
    opacity: 0;
    animation: rippleOut 3s infinite ease-out;
}

@keyframes rippleOut {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

.blueprint-content {
    position: relative; z-index: 1;
    max-width: 40rem;
}

.blueprint-content h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.blueprint-content p {
    font-size: 1.1rem;
    color: var(--text-subtle);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.blueprint-content .sub-text {
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.7;
}

/* ----------------------------------------------------------- */
/* CTA SECTION */
/* ----------------------------------------------------------- */
.cta-section {
    text-align: center;
    padding-bottom: 0rem;
}

/* Standardize Desktop Spacing */
.internal-hero {
    
    margin-bottom: 0rem; /* Standard section gutter */
}

.blueprint-section {
    margin-bottom: 2rem; /* Matches Home section gaps */
}

.footer {
    margin-top: 8rem; /* Consistent footer push */
}

/* ----------------------------------------------------------- */
/* RESPONSIVE */
/* ----------------------------------------------------------- */
/* Laptop & Tablet (Max 64rem / 1024px) */
@media (max-width: 64rem) {
    
    /* 1. HEADER & HERO ALIGNMENT */
    .internal-hero {
        padding: 4rem 1.5rem; /* Matches Home/About mobile padding */
        margin-bottom: 0rem;
        max-width: 100%;
    }

    .hero-headline {
        font-size: 3rem; /* Standard headline scaling */
        margin-bottom: 1rem;
    }

    .hero-quote {
        font-size: 1.25rem;
        padding: 0 1rem;
    }

    /* 2. BLUEPRINT CARD SPACING */
    .blueprint-section {
        margin-bottom: 2rem; /* Aligns with Home showcase gutters */
        padding: 0 1.5rem;
    }

    .glass-blueprint-card {
        padding: 4rem 2.5rem;
        gap: 2rem;
        border-radius: 2rem;
    }

    .blueprint-icon-wrapper {
        width: 6rem;
        height: 6rem;
        font-size: 2.5rem;
    }

    .blueprint-content h3 {
        font-size: 1.8rem;
    }

    /* 3. CTA & FOOTER ALIGNMENT */
    .cta-section {
        padding-bottom: 4rem;
    }

    .footer {margin:  0rem; padding: 2rem 0rem;}

    .glow-btn {
        max-width: 90%;
    }
}

/* Mobile (Max 48rem / 768px) */
@media (max-width: 48rem) {
    .internal-hero {
        padding-top: 3rem;
    }

    .hero-headline {
        font-size: 2.2rem;
    }

    .hero-quote {
        font-size: 1.1rem;
    }

    .glass-blueprint-card {
        padding: 3rem 1.5rem;
    }

    .blueprint-icon-wrapper {
        width: 5rem;
        height: 5rem;
        font-size: 2rem;
    }

    .blueprint-content h3 {
        font-size: 1.5rem;
    }

    .blueprint-content p {
        font-size: 1rem;
    }
}