*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --dark:#0a1a49;
    --blue:#0398fc;
    --blue-deep:#016ab1;
    --green:#07d9bf;
    --green-deep:#01a38f;
    --muted:#5f7190;
    --light:#f4f9ff;
    --metal:#eef2f6;
    --metal-dark:#dce4ec;
    --border:rgba(10,26,73,.12);
    --white:#ffffff;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--dark);
    background:#ffffff;
}

a{
    color:inherit;
    text-decoration:none;
}

.header{
    height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:0 clamp(22px,4vw,64px);
    background:#ffffff;
    border-bottom:1px solid rgba(10,26,73,.08);
    box-shadow:0 10px 34px rgba(10,26,73,.07);
    position:sticky;
    top:0;
    z-index:50;
}

.brand img{
    width:clamp(150px,14vw,230px);
    display:block;
}

.nav{
    display:flex;
    align-items:center;
    gap:clamp(22px,2.5vw,42px);
    font-weight:750;
    font-size:.98rem;
}

.nav a{
    color:rgba(10,26,73,.88);
}

.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 22px;
    border-radius:10px;
    font-weight:850;
    font-size:.88rem;
    letter-spacing:.035em;
    text-transform:uppercase;
    position:relative;
    overflow:hidden;
    transition:
        box-shadow .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        color .25s ease;
}

.btn::after{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:9px;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.32),
        rgba(255,255,255,0) 45%
    );
    pointer-events:none;
}

.btn:hover{
    transform:none;
}

.btn-primary{
    color:white;
    background:linear-gradient(135deg,var(--blue-deep),var(--blue));
    box-shadow:
        0 14px 30px rgba(3,152,252,.25),
        inset 0 1px 0 rgba(255,255,255,.28);
    border:1px solid rgba(255,255,255,.22);
}

.btn-primary:hover{
    box-shadow:
        0 18px 42px rgba(3,152,252,.30),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-secondary,
.btn-outline{
    color:var(--dark);
    background:rgba(255,255,255,.72);
    border:1px solid rgba(10,26,73,.24);
    box-shadow:
        0 10px 24px rgba(10,26,73,.06),
        inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter:blur(10px);
}

.btn-secondary:hover,
.btn-outline:hover{
    border-color:rgba(3,152,252,.45);
    box-shadow:
        0 14px 34px rgba(10,26,73,.09),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.btn-large{
    min-height:58px;
    padding:0 30px;
    font-size:1rem;
}

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border:1px solid var(--border);
    background:white;
    border-radius:12px;
}

.menu-toggle span{
    display:block;
    width:18px;
    height:2px;
    background:var(--dark);
    margin:5px auto;
}

/* HERO */

.hero{
    min-height:calc(100vh - 92px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(460px,1fr);
    align-items:center;
    gap:clamp(44px,6vw,96px);
    padding:clamp(54px,7vw,110px) clamp(24px,4vw,72px);
    overflow:hidden;
    background:#ffffff;
}

.hero-content{
    max-width:690px;
    animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;
}

.eyebrow{
    display:inline-flex;
    margin-bottom:28px;
    padding:10px 18px;
    border-radius:999px;
    color:var(--blue-deep);
    background:#eef6ff;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.045em;
    font-size:.86rem;
}

h1{
    font-size:clamp(2.55rem,5vw,5.2rem);
    line-height:1.08;
    letter-spacing:-.06em;
    font-weight:900;
    max-width:780px;
    margin-bottom:28px;
}

.hero h1{
    color:var(--dark);
}

.hero h1::after{
    content:"";
    display:inline-block;
    width:.28em;
}

.hero h1 strong,
.hero h1 em{
    color:var(--blue);
    font-style:normal;
}

.hero-text{
    max-width:660px;
    color:#25375f;
    font-size:clamp(1.08rem,1.4vw,1.32rem);
    line-height:1.72;
    font-weight:600;
    margin-bottom:30px;
}

.benefits{
    list-style:none;
    display:grid;
    gap:16px;
    margin-bottom:34px;
}

.benefits li{
    position:relative;
    padding-left:40px;
    color:#26385f;
    font-size:1.05rem;
    font-weight:650;
}

.benefits li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:-2px;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border:2px solid var(--blue);
    border-radius:50%;
    color:var(--blue);
    font-size:.9rem;
    font-weight:900;
}

.hero-actions{
    display:grid;
    grid-template-columns:minmax(260px,1fr) minmax(240px,1fr);
    gap:14px;
    max-width:650px;
    margin-bottom:22px;
}

.trust{
    color:#7a88a3;
    font-size:.95rem;
    font-weight:700;
}

.hero-visual{
    position:relative;
    min-height:610px;
    animation:fadeVisual .9s .15s cubic-bezier(.22,1,.36,1) both;
}

.report-cover{
    position:absolute;
    left:5%;
    top:2%;
    width:min(430px,35vw);
    height:560px;
    border-radius:8px;
    overflow:hidden;
    color:white;
    background:linear-gradient(145deg,#071532,#142e61);
    transform:rotate(-1.2deg);
    z-index:4;
    box-shadow:0 34px 90px rgba(10,26,73,.23);
}

.report-cover-content{
    position:relative;
    z-index:3;
    padding:46px 38px;
}

.report-cover-content span,
.report-cover-content strong{
    display:block;
    font-size:2.15rem;
    line-height:1.06;
    font-weight:900;
    letter-spacing:-.045em;
}

.report-cover-content small{
    display:block;
    margin-top:18px;
    color:rgba(255,255,255,.78);
    font-size:1.08rem;
    font-weight:650;
}

.mountain-scene{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:58%;
    background:
        linear-gradient(to top,rgba(5,12,31,.88),rgba(5,12,31,.08)),
        linear-gradient(135deg,transparent 0 29%,rgba(255,255,255,.96) 29% 32%,transparent 32%),
        linear-gradient(45deg,transparent 0 38%,rgba(255,255,255,.7) 38% 41%,transparent 41%),
        linear-gradient(160deg,#2c4977,#071226);
}

.report-cover img{
    position:absolute;
    z-index:5;
    left:38px;
    bottom:38px;
    width:125px;
    filter:brightness(0) invert(1);
}

.report-sheet{
    position:absolute;
    top:11%;
    width:300px;
    height:500px;
    border-radius:8px;
    background:
        linear-gradient(#ffffff,#ffffff) padding-box,
        linear-gradient(135deg,rgba(3,152,252,.18),rgba(7,217,191,.12)) border-box;
    border:1px solid transparent;
    box-shadow:0 26px 60px rgba(10,26,73,.12);
}

.report-sheet::before{
    content:"";
    position:absolute;
    inset:30px;
    border-radius:12px;
    background:
        linear-gradient(90deg,rgba(10,26,73,.12) 0 35%,transparent 35% 100%),
        linear-gradient(rgba(10,26,73,.08),rgba(10,26,73,.08));
    background-size:100% 18px,100% 1px;
    background-repeat:repeat-y;
    opacity:.7;
}

.sheet-one{
    right:14%;
    transform:rotate(3deg);
    z-index:2;
}

.sheet-two{
    right:0;
    transform:rotate(6deg);
    z-index:1;
}

/* ANALYSIS BAND */

.analysis-band{
    padding:clamp(62px,7vw,96px) clamp(24px,4vw,72px);
    background:
        linear-gradient(135deg,#f7f9fb 0%,#eef2f6 48%,#e5ebf2 100%);
    border-top:1px solid rgba(10,26,73,.07);
    border-bottom:1px solid rgba(10,26,73,.07);
}

.section-heading{
    max-width:860px;
    margin:0 auto clamp(44px,5vw,64px);
    text-align:center;
}

.section-heading span,
.report-text span{
    display:block;
    margin-bottom:14px;
    color:var(--blue-deep);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.045em;
    font-size:.88rem;
}

.section-heading h2{
    font-size:clamp(1.75rem,3vw,3rem);
    line-height:1.15;
    letter-spacing:-.045em;
    color:var(--dark);
}

.features-grid{
    max-width:1220px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px;
}

.feature{
    position:relative;
    text-align:center;
    padding:0 18px;
}

.feature:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-12px;
    top:18px;
    width:1px;
    height:120px;
    background:rgba(10,26,73,.12);
}

.feature-icon{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    border-radius:14px;
    display:grid;
    place-items:center;
    color:var(--blue-deep);
    font-size:2rem;
    font-weight:900;
    background:#ffffff;
    border:1px solid rgba(10,26,73,.09);
    box-shadow:
        0 14px 30px rgba(10,26,73,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.feature h3{
    margin-bottom:10px;
    font-size:1.06rem;
    color:var(--dark);
}

.feature p{
    color:#425574;
    line-height:1.55;
    font-size:.95rem;
}

/* REPORT SECTION */

.report-section{
    padding:clamp(70px,8vw,112px) clamp(24px,4vw,72px);
    background:#ffffff;
    display:grid;
    grid-template-columns:minmax(280px,.85fr) minmax(520px,1.15fr);
    gap:clamp(44px,6vw,82px);
    align-items:center;
}

.report-text{
    max-width:560px;
}

.report-text h2{
    font-size:clamp(2rem,3.5vw,3.6rem);
    line-height:1.1;
    letter-spacing:-.055em;
    margin-bottom:24px;
}

.report-text p{
    color:#26385f;
    font-size:1.08rem;
    line-height:1.75;
    margin-bottom:26px;
}

.report-text ul{
    list-style:none;
    display:grid;
    gap:15px;
}

.report-text li{
    position:relative;
    padding-left:34px;
    color:#26385f;
    font-weight:650;
}

.report-text li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:-1px;
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(3,152,252,.11);
    color:var(--blue);
    font-weight:900;
}

.before-after{
    min-width:0;
}

.compare-labels{
    display:inline-flex;
    gap:8px;
    padding:6px;
    background:#f2f7ff;
    border:1px solid rgba(10,26,73,.08);
    border-radius:999px;
    margin-bottom:22px;
}

.compare-btn{
    border:0;
    cursor:pointer;
    padding:10px 18px;
    border-radius:999px;
    color:var(--dark);
    background:transparent;
    font-weight:850;
}

.compare-btn.active{
    color:white;
    background:linear-gradient(135deg,var(--blue-deep),var(--blue));
    box-shadow:
        0 10px 24px rgba(3,152,252,.22),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.cards-preview{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:22px;
}

.metric-card{
    min-height:330px;
    padding:28px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid rgba(10,26,73,.1);
    box-shadow:0 24px 60px rgba(10,26,73,.10);
}

.metric-card span{
    display:block;
    margin-bottom:28px;
    color:var(--dark);
    font-weight:900;
    font-size:1.12rem;
}

.metric-card p{
    color:#647491;
    font-size:.95rem;
    line-height:1.55;
    margin-top:18px;
}

.dark-card{
    color:white;
    background:linear-gradient(145deg,#071532,#12366d);
}

.dark-card span,
.dark-card p{
    color:white;
}

.metric-value{
    display:block;
    font-size:2.5rem;
    line-height:1;
    letter-spacing:-.045em;
    color:var(--dark);
}

.dark-card .metric-value{
    color:white;
}

.metric-value small{
    font-size:1rem;
}

.after-value{
    display:none;
}

.cards-preview[data-active="after"] .before-value{
    display:none;
}

.cards-preview[data-active="after"] .after-value{
    display:block;
}

.metric-bars{
    display:grid;
    gap:10px;
    margin-top:28px;
}

.metric-bars i{
    height:8px;
    border-radius:999px;
    background:var(--blue);
    width:var(--before);
}

.bars i{
    display:block;
    height:10px;
    width:var(--w);
    border-radius:999px;
    background:var(--blue);
}

.cards-preview[data-active="after"] .metric-bars i{
    width:var(--after);
}

.separator{
    width:clamp(70px,6vw,100px);
    height:4px;
    border-radius:999px;
    background:var(--blue);
    margin-bottom:clamp(18px,2vw,28px);
}

.mini-chart{
    height:100px;
    display:flex;
    align-items:end;
    gap:10px;
    margin-top:28px;
}

.mini-chart i{
    flex:1;
    border-radius:8px 8px 0 0;
    background:linear-gradient(180deg,var(--blue),rgba(3,152,252,.18));
}

.mini-chart i:nth-child(1){height:72%;}
.mini-chart i:nth-child(2){height:58%;}
.mini-chart i:nth-child(3){height:44%;}
.mini-chart i:nth-child(4){height:36%;}
.mini-chart i:nth-child(5){height:28%;}

.cards-preview[data-active="after"] .mini-chart i:nth-child(1){height:38%;}
.cards-preview[data-active="after"] .mini-chart i:nth-child(2){height:42%;}
.cards-preview[data-active="after"] .mini-chart i:nth-child(3){height:28%;}
.cards-preview[data-active="after"] .mini-chart i:nth-child(4){height:22%;}
.cards-preview[data-active="after"] .mini-chart i:nth-child(5){height:18%;}

.stars{
    margin-top:32px;
    color:#ffc247;
    font-size:1.35rem;
    letter-spacing:.08em;
}























/* ANIMATIONS */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeVisual{
    from{
        opacity:0;
        transform:translateY(22px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}


























/* RESPONSIVE */

@media (max-width:1180px){
    .nav,
    .header-actions{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .nav.is-open{
        position:absolute;
        left:18px;
        right:18px;
        top:84px;
        display:grid;
        gap:16px;
        padding:22px;
        background:#ffffff;
        border:1px solid rgba(10,26,73,.1);
        border-radius:18px;
        box-shadow:0 24px 60px rgba(10,26,73,.12);
    }

    .hero{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        margin:auto;
    }

    .benefits{
        max-width:560px;
        margin-left:auto;
        margin-right:auto;
        text-align:left;
    }

    .hero-actions{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-visual{
        min-height:540px;
    }

    .report-cover{
        left:50%;
        transform:translateX(-50%) rotate(-1deg);
        width:min(430px,76vw);
    }

    .sheet-one{
        right:11%;
    }

    .sheet-two{
        right:2%;
    }

    .features-grid{
        grid-template-columns:repeat(2,1fr);
        max-width:760px;
    }

    .feature::after{
        display:none;
    }

    .report-section{
        grid-template-columns:1fr;
    }

    .report-text{
        max-width:760px;
        margin:auto;
        text-align:center;
    }

    .report-text ul{
        max-width:620px;
        margin:auto;
        text-align:left;
    }
}

@media (max-width:760px){
    .header{
        height:76px;
        padding:0 18px;
    }

    .brand img{
        width:150px;
    }

    .hero{
        min-height:auto;
        padding:42px 20px 58px;
    }

    .eyebrow{
        margin-bottom:22px;
    }

    h1{
        font-size:clamp(2.25rem,10vw,3.4rem);
    }

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

    .btn-large{
        width:100%;
    }

    .hero-visual{
        min-height:430px;
    }

    .report-cover{
        height:420px;
        padding:0;
    }

    .report-cover-content{
        padding:32px 28px;
    }

    .report-cover-content span,
    .report-cover-content strong{
        font-size:1.6rem;
    }

    .report-sheet{
        display:none;
    }

    .analysis-band{
        padding:54px 20px;
    }

    .features-grid{
        grid-template-columns:1fr;
        gap:34px;
    }

    .report-section{
        padding:58px 20px;
    }

    .cards-preview{
        grid-template-columns:1fr;
    }

    .compare-labels{
        display:flex;
        width:100%;
    }

    .compare-btn{
        flex:1;
    }
}