:root {
    --ha-h: 760px;
    --ha-max: 1300px;
    --ha-accent-a: #00D1C1;
    --ha-accent-b: #2B8AFF;
    --ha-ink: #052826;
    --ha-ease: cubic-bezier(.16,.9,.3,1);
    --ha-radius: 14px;
}
/* shell */

.ha-hero {
    position: relative;
    min-height: var(--ha-h);
    width: 100% !important;
    overflow: hidden;
    background: linear-gradient(180deg,#fbfeff,#f5fbfb);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    color: var(--ha-ink);
}
/* canvas layers */

.ha-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ha-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 48%;
    transform: scale(1.06);
    transition: transform 900ms var(--ha-ease), filter 700ms var(--ha-ease);
}

.ha-layer--base {
    background-image: linear-gradient(180deg, rgba(6,10,12,0.28), rgba(6,10,12,0.06)), url('https://allstitchesrepair.com/img/IMG_0414.jpeg');
    filter: contrast(0.96) saturate(0.96) brightness(0.86);
}
/* matrix vector + grain */

.ha-matrix {
    position: absolute;
    left: 0;
    right: 0;
    top: 8%;
    height: 22%;
    z-index: 1;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0.95;
}

.ha-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(circle at 8% 18%, rgba(0,0,0,0.03) 0 1px, transparent 2px), radial-gradient(circle at 82% 72%, rgba(255,255,255,0.02) 0 1px, transparent 2px);
    mix-blend-mode: overlay;
    opacity: 0.06;
    filter: blur(2px);
    pointer-events: none;
}
/* stage layout */

.ha-stage {
    position: relative;
    z-index: 2;
    max-width: var(--ha-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: center;
    padding: clamp(20px,4vw,64px);
    box-sizing: border-box;
}
/* alloy fold group (3D plates) */

.ha-alloy {
    width: 100%;
    perspective: 1200px;
    display: grid;
    grid-template-rows: auto 10px auto;
    gap: 0;
    align-items: start;
    transform-style: preserve-3d;
}

.ha-plate {
    border-radius: calc(var(--ha-radius));
    padding: clamp(18px,3.6vw,36px);
    margin-top: 50px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,250,0.99));
    box-shadow: 0 18px 56px rgba(6,18,20,0.06);
    border: 1px solid rgba(6,18,20,0.04);
    transition: transform 520ms var(--ha-ease), box-shadow 420ms var(--ha-ease);
    transform-origin: center;
}



.ha-plate--front {
    transform: translateZ(48px) rotateX(.6deg) rotateY(0deg);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
    border-left: 6px solid rgba(0,209,193,0.06);
    border-radius: calc(var(--ha-radius));
    /* Frosted glass effect */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 -2px 12px rgba(255,255,255,0.1);
}



/* gap (visual seam) */

.ha-gap {
    height: 10px;
    width: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
    transform-origin: center;
}
/* back plate slightly recessed with metallic tint */

.ha-plate--back {
    transform: translateZ(-18px) rotateX(-2deg);
    background: linear-gradient(180deg, rgba(245,247,249,0.98), rgba(238,243,245,0.99));
    border-left: 6px solid rgba(43,138,138,0.04);
    margin-top: 0;
}
/* typography */

.ha-kicker {
    display: inline-block;
    color: rgba(255,255,255,0.7); /* softened white */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.82rem;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ha-ctas{
    display:flex;
}
.ha-title {
    margin: 6px 0 10px 0;
    font-family: "Merriweather", Georgia, serif;
    font-weight: 900;
    font-size: clamp(2rem, 5.2vw, 3.6rem);
    line-height: 0.98;
    color: #FFFFFF;
    text-shadow: 0 0 4px rgba(255,255,255,0.4), 0 0 8px rgba(255,255,255,0.3), 0 2px 6px rgba(0,0,0,0.2);
    animation: glowPulse 3s ease-in-out infinite alternate;
}





.ha-lead {
    margin: 0;
    color: rgba(255,255,255,0.85); /* light text for readability */
    max-width: 64ch;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* CTAs */

.ha-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(135deg, #002B43, #004F6E);
    color: #EAFBFF;
    border-radius: 18px;
    padding: 40px 20px;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.05);
    color: #f7f7f7;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .ha-stats:hover {
        transform: scale(1.02);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255,255,255,0.1);
    }

.ha-stat-number {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 4px #ffffff, 0 0 8px #333333;
    animation: subtleGlow 3s ease-in-out infinite alternate;
}

.ha-stat-label {
    font-size: 1rem;
    letter-spacing: 0.5px;
    color: #ccc;
}








.ha-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-self: end;
    align-items: end;
}

.ha-card {
    width: 240px;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 700;
    text-align: center;
    font-size: 1.2rem;
    background: rgba(255,255,255,0.08); /* frosted glass effect */
    background: linear-gradient(135deg, #002B43, #004F6E);
    color: #EAFBFF;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    text-decoration: none;
}

    .ha-card:hover {
        transform: scale(1.05) translateY(-8px) !important;
        filter: brightness(1.06);
        box-shadow: 12px 12px 26px rgba(157, 171, 186, 0.6), -12px -12px 26px rgba(255, 255, 255, 0.95), 0 16px 32px rgba(43,138,138,0.35) !important;
        text-decoration: none;
        color: #fff;
    }

.ha-card--metal {
    /*  border-left: 6px solid rgba(255,255,255,0.2);*/
}


.ha-card--soft {
    /*    border-left: 6px solid rgba(255,255,255,0.15);*/
}
/* hover & interactive lifts */

.ha-hero:hover .ha-layer--base {
    transform: scale(1.085) translateY(-8px);
    /*    filter: saturate(1.04) contrast(1.03);*/
}

.ha-hero:hover .ha-plate {
    transform: translateZ(64px);
    box-shadow: 0 44px 140px rgba(6,18,20,0.14);
}

.ha-hero:hover .ha-card {
    transform: translateY(-8px);
    box-shadow: 0 36px 120px rgba(6,18,20,0.12);
}
/* matrix wave subtle motion */

.ha-matrix__wave {
    transition: transform 640ms var(--ha-ease);
    transform-origin: center;
}
/* responsive: stack, focus image left on narrow screens */

@media (max-width:1000px) {
    .ha-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* vertically center */
        gap: 18px;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        padding-top: 60px;
    }

    .ha-side {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* ensures vertical centering inside */
        width: 100%;
    }

    .ha-alloy {
        order: 1;
        width: min(92%, 920px);
        margin: 0 auto;
    }

    .ha-card,
    .ha-card--metal {
        width: min(92%, 420px);
        text-align: center;
        margin: 0 auto;
    }

    .ha-layer--base {
        background-position: center center; /* center background for small screens */
    }

    .ha-title {
        font-size: clamp(1.6rem, 6.4vw, 2.6rem);
        text-align: center;
        margin: 0 auto 0.5em;
        line-height: 1.2;
    }

    .ha-lead {
        max-width: 90%;
        margin: 0 auto 1.2em;
        text-align: center;
    }

    .ha-plate--back {
        display: none;
    }
}


@media (max-width: 768px) {

    /* Hero full width & shorter */
    .ha-hero {
        width: 100vw; /* full viewport width */
        min-height: 480px;
        max-height: 620px;
        padding: 32px 16px;
        position: relative;
        overflow: hidden; /* prevent horizontal overflow */
        box-sizing: border-box;
    }
 
    /* Background layer */
    .ha-layer--base {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center top !important;
        transform: scale(1.02);
    }

    /* Center the stage content */
    .ha-stage {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 600px; /* constrain inner content */
        margin: 0 auto !important;
        gap: 16px;
        box-sizing: border-box;
    }

    /* Hide right-side / small sections */
    .ha-side,
    .ha-plate--back,
    .ha-matrix,
    .ha-grain {
        display: none !important;
    }

    /* Plates & alloy */
    .ha-alloy {
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto !important;
        text-align: center !important;
        flex: none !important;
    }
    .ha-ctas{
        display:block;
    }
    .ha-plate--front {
        padding: 16px;
        transform: translateZ(12px);
        margin: 20px auto !important;
    }

    /* Titles & paragraphs */
    .ha-title,
    .ha-lead {
        text-align: center !important;
        margin: 0 auto 1em !important;
    }

    /* Stats block */
    .ha-stats {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important; /* CRITICAL: Ensure center alignment */
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Cards */
    .ha-card {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) { /* Reduce spacing + center hero */

    .ha-hero {
        padding: 22px 12px !important;
        text-align: center !important;
       min-height:700px;
    }

    .ha-title {
        font-size: clamp(1.8rem, 8vw, 3.6rem);
    }

    .ha-lead {
        font-size: clamp(0.85rem, 4vw, 1.1rem);
    }

    /* Disable heavy layers */

    .ha-plate--front, .ha-layer, .ha-matrix, .ha-grain {
        animation: none !important;
        transform: none !important;
    }
}
@media (max-width: 380px) {
    .ha-hero {
        padding: 18px 10px !important;
        min-height: 620px;
    }

    .ha-title {
        font-size: clamp(1.6rem, 8vw, 2.8rem);
    }

    .ha-lead {
        font-size: 0.85rem !important;
    }

    .ha-plate--front,
    .ha-layer,
    .ha-matrix,
    .ha-grain {
        animation: none !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ha-layer--base, .ha-matrix__wave, .ha-plate, .ha-card {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}
@media (min-width:900px){
    /* Floating glass animation */
    @keyframes floatGlass {
        0% {
            transform: translateZ(48px) rotateX(.6deg) translateY(0px);
            box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 -2px 12px rgba(255,255,255,0.1);
        }

        50% {
            transform: translateZ(48px) rotateX(.6deg) translateY(-4px);
            box-shadow: 0 16px 48px rgba(0,0,0,0.15), inset 0 -2px 14px rgba(255,255,255,0.12);
        }

        100% {
            transform: translateZ(48px) rotateX(.6deg) translateY(0px);
            box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 -2px 12px rgba(255,255,255,0.1);
        }
    }

    @keyframes subtleGlow {
        from {
            text-shadow: 0 0 6px #ffffff, 0 0 10px #333333;
        }

        to {
            text-shadow: 0 0 10px #ffffff, 0 0 20px #555555;
        }
    }

    /* Subtle pulsing glow */
    @keyframes glowPulse {
        0% {
            text-shadow: 0 0 4px rgba(255,255,255,0.3), 0 0 8px rgba(255,255,255,0.2), 0 2px 6px rgba(0,0,0,0.15);
        }

        50% {
            text-shadow: 0 0 6px rgba(255,255,255,0.45), 0 0 12px rgba(255,255,255,0.3), 0 4px 8px rgba(0,0,0,0.2);
        }

        100% {
            text-shadow: 0 0 4px rgba(255,255,255,0.3), 0 0 8px rgba(255,255,255,0.2), 0 2px 6px rgba(0,0,0,0.15);
        }
    }

}