/* =========================================================
   hero.css — LIGHT gradient hero (kaminoone style): pale-blue
   at top fading toward a gently deeper blue at the bottom,
   dark ink text throughout. Contrast verified WCAG AA.
========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    color: var(--ink);
    /* Light top -> gently deeper blue bottom, per kaminoone's color-mix
       technique. Darkest stop stays light enough for ink text (10.6:1). */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--blue) 14%, white) 0%,
        color-mix(in srgb, var(--blue) 20%, white) 55%,
        color-mix(in srgb, var(--blue) 34%, white) 100%);
    padding-top: clamp(6rem, 4rem + 6vw, 9rem);
    padding-bottom: clamp(4rem, 3rem + 4vw, 6rem);
}

.hero__pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
    pointer-events: none;
    /* SVG strokes are white — invert to dark so the faint pattern reads on
       the light gradient; keep low opacity so text stays dominant. */
    filter: invert(1);
    opacity: 0.5;
}

/* scrim not needed on the light hero */
.hero__scrim { display: none; }

.hero__inner {
    position: relative;
    z-index: 1;
    width: min(var(--container-wide), 92%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(2rem, 1rem + 5vw, 6rem);
}

.hero__copy {
    max-width: 40rem;
}

/* ---- Visual: mark inside soft glass disc, right side (kaminoone hero pattern) ---- */
.hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
}

.hero__disc {
    position: relative;
    z-index: 2;
    width: 76%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    /* Soft neumorphic light disc, kaminoone style */
    background: linear-gradient(145deg, #ffffff, #eef3f8);
    box-shadow:
        24px 24px 70px rgba(17, 41, 74, .14),
        -18px -18px 60px rgba(255, 255, 255, .9),
        inset 0 0 0 1px rgba(255, 255, 255, .6);
    animation: hero-disc-float 8s var(--ease) infinite;
}

.hero__disc img { width: 64%; }

.hero__halo {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    border: 1px solid rgba(17, 41, 74, .08);
}

.hero__halo--1 { inset: -4%; }
.hero__halo--2 { inset: -16%; border-color: rgba(17, 41, 74, .05); }

@keyframes hero-disc-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__disc { animation: none; }
}

@media (max-width: 880px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { max-width: 260px; margin-top: var(--space-4); }
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(14, 123, 107, .22);
    background: rgba(14, 123, 107, .1);
    color: var(--teal);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.3;
}

.hero__badge svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--teal); }

.hero__title {
    margin-top: var(--space-3);
    font-size: clamp(2.1rem, 1.5rem + 3.6vw, 3.9rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    color: var(--ink); /* dark ink on light bg, >10:1 */
    max-width: 16ch;
}

/* Gradient accent word — teal -> navy now that the hero canvas is light
   (matches kaminoone's .text-gradient recipe). */
.hero__title-accent {
    background: linear-gradient(115deg, var(--teal) 0%, var(--navy) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__sub {
    margin-top: var(--space-3);
    max-width: 46ch;
    font-size: clamp(1rem, .92rem + .3vw, 1.15rem);
    line-height: 1.6;
    color: var(--slate); /* ~5.8:1 on the darkest bg stop */
}

.hero__actions {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hero__proof {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hero__proof-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(17, 41, 74, .14);
    background: rgba(255, 255, 255, .55);
    color: var(--slate);
    font-size: .8rem;
    font-weight: 500;
}

.hero__proof-item svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--teal); }

.hero__metrics {
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 34rem;
    border-block: 1px solid rgba(17, 41, 74, .14);
    padding-block: var(--space-2);
}

.hero__metric {
    padding-inline: var(--space-2);
    border-left: 1px solid rgba(17, 41, 74, .14);
}

.hero__metric:first-child { padding-left: 0; border-left: none; }

.hero__metric-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.01em;
}

.hero__metric-label {
    margin-top: 2px;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--slate); /* ~5.8:1 on light bg */
}

@media (max-width: 640px) {
    .hero__metrics { grid-template-columns: 1fr; border-block: none; }
    .hero__metric { border-left: none; border-top: 1px solid rgba(17,41,74,.14); padding: var(--space-2) 0; }
    .hero__metric:first-child { border-top: none; padding-top: 0; }
    .hero__actions .btn { width: 100%; }
}