/* =========================================================
   HERO
========================================================= */
/* =========================================================
   HERO SECTION (GSAP pinned — no CSS sticky)
========================================================= */

.hero-section {
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 12vh;
    overflow: hidden;
    isolation: isolate;
    contain: layout style;
}

.hero-atmosphere {

    z-index: 0;

}

/* ── READABILITY OVERLAY ── */

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    transition: background var(--transition-medium);
}

[data-theme="dark"] .hero-overlay {
    background: rgba(10, 8, 6, 0.50);
}

.hero-content {
    z-index: 2;
    transform: none; 
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.navbar-wrapper {

    z-index: 50;

}

/* =========================================================
   HERO ATMOSPHERE — ORGANIC BLOB SYSTEM
========================================================= */

.hero-atmosphere {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
    contain: layout style;

    background:
        radial-gradient(circle at center,
            #f8f2ea 0%,
            #ead7c4 30%,
            #c48a5b 70%,
            #8a552f 100%);

    transition: background var(--transition-medium);
}

/* Dark theme atmosphere background */

[data-theme="light"] .hero-atmosphere {

    background:
        linear-gradient(to bottom,
            #f8f5f1 0%,
            #efe8df 100%);

}

[data-theme="dark"] .hero-atmosphere {
    background:
        radial-gradient(circle at center,
            #1a1410 0%,
            #2a1d14 30%,
            #3d2818 70%,
            #1a0f08 100%);
}

/* ── BLOBS (radial-gradient — no filter:blur) ── */

.hero-blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.9;
    will-change: transform;
    pointer-events: none;
}

[data-theme="dark"] .hero-blob {
    opacity: 0.55;
}

[data-theme="light"] .hero-glow {
    display: none;
}

[data-theme="light"] .hero-blob {
    display: none;
}

/* ── BLOB SHAPES — LIGHT THEME ── */

.b1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(201, 123, 66, 0.4) 0%, transparent 85%);
}

.b2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(242, 215, 186, 0.8) 0%, transparent 45%);
}

.b3 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(141, 79, 40, 0.55) 0%, transparent 72%);
}

.b4 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 247, 238, 0.6) 0%, transparent 72%);
}

/* ── BLOB SHAPES — DARK THEME ── */

[data-theme="dark"] .b1 {
    background: radial-gradient(circle, rgba(138, 85, 48, 0.35) 0%, transparent 85%);
}

[data-theme="dark"] .b2 {
    background: radial-gradient(circle, rgba(107, 74, 46, 0.65) 0%, transparent 45%);
}

[data-theme="dark"] .b3 {
    background: radial-gradient(circle, rgba(90, 53, 24, 0.5) 0%, transparent 72%);
}

[data-theme="dark"] .b4 {
    background: radial-gradient(circle, rgba(196, 138, 91, 0.45) 0%, transparent 72%);
}

/* ── CENTER GLOW ── */

.hero-glow {
    position: absolute;
    width: 50vw;
    height: 50vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    background:
        radial-gradient(circle,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.3) 40%,
            transparent 75%);
    filter: blur(40px);
    pointer-events: none;
}

[data-theme="dark"] .hero-glow {
    background:
        radial-gradient(circle,
            rgba(198, 124, 78, 0.35) 0%,
            rgba(198, 124, 78, 0.08) 40%,
            transparent 75%);
}

/* ── GRAIN NOISE ── */

.hero-noise {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='black' fill-opacity='1'%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3Ccircle cx='40' cy='80' r='1'/%3E%3Ccircle cx='110' cy='50' r='1'/%3E%3Ccircle cx='130' cy='120' r='1'/%3E%3Ccircle cx='70' cy='145' r='1'/%3E%3C/g%3E%3C/svg%3E");
    animation: hero-grain 0.25s steps(2) infinite;
    pointer-events: none;
}

[data-theme="dark"] .hero-noise {
    opacity: 0.04;
}



.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4vh;
    text-align: center;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 36px;

    color: var(--text-secondary);

    font-size: 0.9rem;

    /* Asymmetry */
    transform: translateX(-5vw);
}

.trust-divider {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--accent-primary);
}

.hero-description {
    margin-top: 22px;
}

.hero-actions {
    display: flex;
    flex-direction: column; /* Stacking for a cleaner vertical rhythm */
    align-items: center;
    gap: 32px; /* Increased gap to let the button breathe */
    margin-top: 48px;
}

.hero-terminal-snippet {
    text-align: center;
    opacity: 0.4; /* Slightly more subtle to keep focus on the button */
    font-family: monospace;
    font-size: .78rem;
    letter-spacing: .04em;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.term-line {
    color: var(--text-secondary);
}

@media (max-width:768px) {
    .hero-section {
        padding-top: 20vh;
        height: auto;
        min-height: 100vh;
    }
    .hero-title { font-size: clamp(2.4rem, 10vw, 4rem); max-width: 11ch; }
    .hero-description, .section-description, .cta-description { font-size: 1rem; line-height: 1.7; }
    .hero-actions, .cta-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn, .cta-actions .btn { width: 100%; }
}

/* Responsive */
@media (max-width:540px) { .hero-trust { flex-wrap: wrap; justify-content: center; gap: 10px; } .hero-glow { width: 70vw; height: 70vw; filter: blur(30px); } }