:root{
    --anv4-green:#0b5d35;
    --anv4-green-dark:#041d13;
    --anv4-green-mid:#073522;
    --anv4-accent:#5be58f;
    --anv4-text:#10251a;
    --anv4-muted:#5d6d63;
    --anv4-cream:#f4f7f3;
    --anv4-white:#ffffff;
    --anv4-shell:1240px;
}


/* =========================================================
   GLOBAL
========================================================= */

.anv4-home{
    overflow:hidden;
    background:#fff;
    color:var(--anv4-text);
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

.anv4-home *,
.anv4-home *::before,
.anv4-home *::after{
    box-sizing:border-box;
}

.anv4-shell{
    width:min(var(--anv4-shell),calc(100% - 48px));
    margin-inline:auto;
}

.anv4-eyebrow{
    display:inline-block;
    margin-bottom:13px;
    color:#16844b;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.anv4-home h1,
.anv4-home h2,
.anv4-home h3,
.anv4-home p{
    margin-top:0;
}

.anv4-home h1,
.anv4-home h2,
.anv4-home h3{
    text-wrap:balance;
}

.anv4-home p{
    text-wrap:pretty;
}


/* =========================================================
   HERO
========================================================= */

.anv4-hero{
    position:relative;
    min-height:720px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#041d13;
    color:#fff;
}

.anv4-scenes,
.anv4-scene{
    position:absolute;
    inset:0;
}

.anv4-scene{
    opacity:0;
    visibility:hidden;
    transition:
        opacity .72s ease,
        visibility .72s ease;
}

.anv4-scene.is-active{
    opacity:1;
    visibility:visible;
}

.anv4-scene img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.anv4-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(2,18,12,.94) 0%,
            rgba(2,18,12,.76) 38%,
            rgba(2,18,12,.38) 68%,
            rgba(2,18,12,.22) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            rgba(0,0,0,.30)
        );
}

.anv4-hero-layout{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(340px,.68fr);
    gap:70px;
    align-items:center;
    padding:88px 0;
}

.anv4-hero-copy{
    max-width:780px;
}

.anv4-hero-copy .anv4-eyebrow{
    color:#78eca5;
}

.anv4-hero h1{
    margin-bottom:23px;
    max-width:780px;
    font-size:clamp(50px,6vw,84px);
    line-height:.96;
    letter-spacing:-.055em;
    font-weight:800;
}

.anv4-hero-copy > p{
    max-width:680px;
    margin-bottom:30px;
    color:rgba(255,255,255,.80);
    font-size:17px;
    line-height:1.7;
}

.anv4-actions{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
}

.anv4-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 21px;
    border-radius:999px;
    text-decoration:none !important;
    font-size:13px;
    line-height:1;
    font-weight:800;
    transition:
        transform .18s ease,
        background .18s ease,
        border .18s ease;
}

.anv4-button:hover{
    transform:translateY(-1px);
}

.anv4-button-primary{
    background:var(--anv4-accent);
    color:#052616 !important;
}

.anv4-button-ghost{
    border:1px solid rgba(255,255,255,.26);
    background:rgba(255,255,255,.08);
    color:#fff !important;
    backdrop-filter:blur(12px);
}

.anv4-button-ghost-dark{
    border:1px solid rgba(255,255,255,.22);
    color:#fff !important;
}


/* command display, not card grid */

.anv4-command{
    padding:24px 26px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:22px;
    background:rgba(4,32,21,.58);
    backdrop-filter:blur(16px);
    box-shadow:0 24px 70px rgba(0,0,0,.20);
}

.anv4-command-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.11);
    color:#fff;
    font-size:12px;
    font-weight:800;
}

.anv4-command-top i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--anv4-accent);
    box-shadow:0 0 0 5px rgba(91,229,143,.12);
}

.anv4-command-row{
    display:flex;
    justify-content:space-between;
    gap:24px;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
    font-size:11px;
}

.anv4-command-row:last-child{
    border-bottom:0;
}

.anv4-command-row span{
    color:rgba(255,255,255,.58);
}

.anv4-command-row b{
    color:#8befb1;
    font-weight:700;
}

.anv4-progress{
    position:absolute;
    z-index:5;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    display:flex;
    gap:7px;
}

.anv4-progress button,
.anv4-dots button{
    width:25px;
    height:3px;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.32);
    cursor:pointer;
    transition:width .2s ease,background .2s ease;
}

.anv4-progress button.is-active,
.anv4-dots button.is-active{
    width:50px;
    background:var(--anv4-accent);
}


/* =========================================================
   SECTION INTRO
========================================================= */

.anv4-story{
    padding:64px 0 0;
}

.anv4-light{
    background:#fff;
}

.anv4-dark{
    background:var(--anv4-green-dark);
}

.anv4-intro{
    padding-bottom:30px;
}

.anv4-intro h2,
.anv4-unna-head h2,
.anv4-final h2{
    max-width:850px;
    margin-bottom:13px;
    font-size:clamp(37px,4.5vw,62px);
    line-height:1.01;
    letter-spacing:-.045em;
    font-weight:780;
}

.anv4-intro > p{
    max-width:700px;
    margin-bottom:0;
    color:var(--anv4-muted);
    font-size:16px;
    line-height:1.67;
}

.anv4-intro-dark h2{
    color:#fff;
}

.anv4-intro-dark > p{
    color:rgba(255,255,255,.62);
}

.anv4-intro-dark .anv4-eyebrow{
    color:#6fe79d;
}


/* =========================================================
   CINEMATIC CAROUSEL
========================================================= */

.anv4-cinema{
    position:relative;
    width:100%;
    height:610px;
    overflow:hidden;
    background:#061f15;
}

.anv4-cinema-short{
    height:560px;
}

.anv4-cinema-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .72s ease,
        visibility .72s ease;
}

.anv4-cinema-slide.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:2;
}

.anv4-cinema-slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
}

.anv4-image-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,22,14,.85) 0%,
            rgba(2,22,14,.55) 39%,
            rgba(2,22,14,.15) 72%,
            rgba(2,22,14,.08) 100%
        ),
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(0,0,0,.26)
        );
}

.anv4-slide-copy{
    position:absolute;
    z-index:4;
    left:max(6.5vw,42px);
    bottom:58px;
    width:min(620px,calc(100% - 84px));
    color:#fff;
}

.anv4-slide-copy > span{
    display:inline-block;
    margin-bottom:11px;
    color:#78eca5;
    font-size:11px;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.anv4-slide-copy h3{
    margin-bottom:12px;
    font-size:clamp(34px,4vw,56px);
    line-height:1.02;
    letter-spacing:-.042em;
    font-weight:760;
}

.anv4-slide-copy p{
    max-width:580px;
    margin:0;
    color:rgba(255,255,255,.74);
    font-size:15px;
    line-height:1.67;
}


/* =========================================================
   CONTROLS
========================================================= */

.anv4-controls{
    position:absolute;
    z-index:10;
    right:28px;
    bottom:24px;
    display:flex;
    align-items:center;
    gap:10px;
}

.anv4-dots{
    display:flex;
    align-items:center;
    gap:6px;
}

.anv4-arrow{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:rgba(0,0,0,.20);
    color:#fff;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    backdrop-filter:blur(8px);
}


/* =========================================================
   UNNA
========================================================= */

.anv4-unna{
    padding:78px 0;
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(67,213,124,.15),
            transparent 32%
        ),
        #052318;
    color:#fff;
}

.anv4-unna-head{
    max-width:850px;
    margin:0 auto 44px;
    text-align:center;
}

.anv4-unna-head .anv4-eyebrow{
    color:#70e99f;
}

.anv4-unna-head h2{
    margin-inline:auto;
}

.anv4-unna-head p{
    max-width:700px;
    margin:0 auto;
    color:rgba(255,255,255,.63);
    font-size:16px;
    line-height:1.7;
}

.anv4-unna-flow{
    display:grid;
    grid-template-columns:1fr .8fr 1fr;
    gap:28px;
    align-items:center;
    max-width:1080px;
    margin:0 auto;
}

.anv4-unna-source,
.anv4-unna-output{
    display:grid;
    gap:0;
}

.anv4-unna-source span,
.anv4-unna-output span{
    padding:13px 0;
    border-bottom:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.67);
    font-size:13px;
}

.anv4-unna-output{
    text-align:right;
}

.anv4-unna-core{
    text-align:center;
    padding:38px 20px;
    border-left:1px solid rgba(91,229,143,.22);
    border-right:1px solid rgba(91,229,143,.22);
}

.anv4-unna-core small{
    display:block;
    color:#6fe79d;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.anv4-unna-core strong{
    display:block;
    margin:8px 0;
    font-size:42px;
    letter-spacing:-.04em;
}

.anv4-unna-core p{
    margin:0;
    color:rgba(255,255,255,.58);
    font-size:13px;
}

.anv4-unna-action{
    max-width:1080px;
    margin:38px auto 0;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.10);

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.anv4-unna-action strong{
    display:block;
    margin-bottom:5px;
    font-size:13px;
}

.anv4-unna-action p{
    margin:0;
    color:rgba(255,255,255,.51);
    font-size:12px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.anv4-final{
    padding:84px 0;
    background:#071b12;
    color:#fff;
}

.anv4-final-inner{
    max-width:900px;
    text-align:center;
}

.anv4-final .anv4-eyebrow{
    color:#71e99f;
}

.anv4-final h2{
    margin-inline:auto;
}

.anv4-final p{
    max-width:650px;
    margin:0 auto 26px;
    color:rgba(255,255,255,.60);
    font-size:16px;
    line-height:1.68;
}

.anv4-actions-center{
    justify-content:center;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:980px){

    .anv4-hero-layout{
        grid-template-columns:1fr;
    }

    .anv4-command{
        max-width:620px;
    }

    .anv4-unna-flow{
        grid-template-columns:1fr;
        gap:20px;
    }

    .anv4-unna-output{
        text-align:left;
    }

    .anv4-unna-core{
        border:0;
        border-top:1px solid rgba(91,229,143,.22);
        border-bottom:1px solid rgba(91,229,143,.22);
    }

}

@media(max-width:720px){

    .anv4-shell{
        width:min(100% - 32px,var(--anv4-shell));
    }

    .anv4-hero{
        min-height:760px;
    }

    .anv4-hero-layout{
        gap:34px;
        padding:70px 0 82px;
    }

    .anv4-hero h1{
        font-size:clamp(45px,13vw,66px);
    }

    .anv4-command{
        display:none;
    }

    .anv4-story{
        padding-top:48px;
    }

    .anv4-intro{
        padding-bottom:24px;
    }

    .anv4-cinema,
    .anv4-cinema-short{
        height:540px;
    }

    .anv4-slide-copy{
        left:22px;
        bottom:72px;
        width:calc(100% - 44px);
    }

    .anv4-slide-copy h3{
        font-size:36px;
    }

    .anv4-controls{
        left:20px;
        right:20px;
        bottom:18px;
        justify-content:space-between;
    }

    .anv4-dots{
        order:2;
    }

    .anv4-arrow-prev{
        order:1;
    }

    .anv4-arrow-next{
        order:3;
    }

    .anv4-unna{
        padding:58px 0;
    }

    .anv4-unna-action{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media(prefers-reduced-motion:reduce){

    .anv4-scene,
    .anv4-cinema-slide{
        transition:none !important;
    }

}