/* =========================================
   RESET
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:#ffffff;

    font-family:
    Inter,
    Arial,
    sans-serif;

    overflow-x:hidden;

    position:relative;
}

/* =========================================
   CONTAINER
========================================= */

.container{
    width:100%;

    max-width:1280px;

    margin:0 auto;

    padding:0 32px;

    position:relative;

    z-index:5;
}

/* =========================================
   NOISE
========================================= */

.noise{

    position:fixed;

    inset:0;

    background-image:
    url("../img/backgrounds/noise.png");

    opacity:.025;

    pointer-events:none;

    z-index:999;
}

/* =========================================
   BACKGROUND
========================================= */

.bg-wrapper{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-5;
}

.bg-grid{

    position:absolute;

    width:1800px;

    left:50%;

    top:-200px;

    transform:
    translateX(-50%);

    opacity:.08;
}

.bg-particles{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.08;
}

.bg-glow{

    position:absolute;

    pointer-events:none;
}

.glow-left{

    width:900px;

    left:-300px;

    top:-250px;

    opacity:.25;
}

.glow-right{

    width:850px;

    right:-250px;

    top:200px;

    opacity:.22;
}

/* =========================================
   HEADER
========================================= */

.header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:100;

    backdrop-filter:
    blur(18px);

    background:
    rgba(5,5,5,.65);

    border-bottom:
    1px solid rgba(255,255,255,.05);
}

.header .container{

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:white;
}

.logo img{

    width:46px;

    height:46px;

    object-fit:contain;

    flex-shrink:0;
}

.logo span{

    font-size:20px;

    font-weight:700;
}

.btn-login{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#050505;

    background:#16d84e;

    border-radius:14px;

    padding:12px 24px;

    font-weight:700;

    transition:.3s;
}

.btn-login:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 0 25px rgba(22,216,78,.4);
}

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

.hero{

    position:relative;

    min-height:780px;

    display:flex;

    align-items:center;

    padding-top:20px;
}

.hero-container{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:80px;

    align-items:center;
}

.hero-content{

    position:relative;

    z-index:10;
    margin-top:-40px;
}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 26px;

    border-radius:999px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    margin-bottom:20px;
}

.hero-badge img{

    width:18px;

    height:18px;

    object-fit:contain;
}

.hero-badge span{

    color:#d0d0d0;

    font-size:18px;

    font-weight:500;
}

.hero h1{

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    max-width:700px;

    margin-bottom:24px;
}

.hero p{

    color:#b0b0b0;

    font-size:20px;

    line-height:1.8;

    max-width:620px;

    margin-bottom:36px;
}

/* =========================================
   BUTTONS
========================================= */

.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    background:#16d84e;

    color:#050505;

    padding:18px 32px;

    border-radius:16px;

    font-weight:700;

    transition:.3s;
}

.btn-primary img{

    width:18px;

    height:18px;

    object-fit:contain;
}

.btn-primary:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 0 35px rgba(22,216,78,.45);
}

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

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:22px;

    margin-top:34px;
}

.feature{

    display:flex;

    align-items:center;

    gap:10px;
}

.feature img{

    width:18px;

    height:18px;

    object-fit:contain;
}

.feature span{

    color:#c6c6c6;
}

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

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;
}

.dashboard-card{

    position:relative;

    width:100%;

    max-width:560px;

    padding:22px;

    border-radius:28px;

    overflow:hidden;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.08);

    backdrop-filter:
    blur(20px);
}

.dashboard-card img{

    width:100%;

    display:block;

    border-radius:18px;
}

.dashboard-glow{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle,
        rgba(22,216,78,.15),
        transparent 70%
    );

    pointer-events:none;
}
/* =========================================
   FLOATING COINS
========================================= */

.coin{

    position:absolute;

    pointer-events:none;

    user-select:none;

    z-index:2;
}

.coin-btc{

    width:72px;

    top:180px;

    left:4%;

    opacity:.95;

    animation:
    floatA 10s ease-in-out infinite;
}

.coin-eth{

    width:68px;

    top:300px;

    right:6%;

    opacity:.85;

    animation:
    floatB 12s ease-in-out infinite;
}

.coin-usdt{

    width:64px;

    bottom:200px;

    left:40%;

    opacity:.85;

    animation:
    floatC 9s ease-in-out infinite;
}

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

.hero-orb{

    position:absolute;

    width:520px;

    right:-120px;

    top:50%;

    transform:
    translateY(-50%);

    opacity:.14;

    pointer-events:none;

    z-index:1;
}

.hero-cube{

    position:absolute;

    width:90px;

    right:14%;

    top:18%;

    opacity:.30;

    pointer-events:none;

    z-index:2;

    animation:
    rotateCube 30s linear infinite;
}

/* =========================================
   SECTIONS
========================================= */

section{

    position:relative;
}

.section-head{

    text-align:center;

    max-width:850px;

    margin:0 auto 80px;
}

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:999px;

    background:
    rgba(22,216,78,.08);

    border:
    1px solid rgba(22,216,78,.16);

    color:#16d84e;

    font-size:14px;

    font-weight:600;

    margin-bottom:24px;
}

.section-head h2{

    font-size:56px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:20px;
}

.section-head p{

    color:#a8a8a8;

    line-height:1.8;

    font-size:18px;
}

/* =========================================
   WHY
========================================= */

.why{

    padding:20px 0;
}

.why-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:28px;
}

.why-card{

    position:relative;

    padding:42px 32px;
    text-align:center;

    border-radius:28px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:
    blur(20px);

    transition:.35s;
}

.why-card:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(22,216,78,.25);

    box-shadow:
    0 0 35px rgba(22,216,78,.12);
}

.why-card img{

    width:90px;
    height:90px;

    object-fit:contain;

    display:block;

    margin:0 auto 24px auto;

    filter:
        drop-shadow(0 0 12px rgba(22,216,78,.45));
}

.why-card h3{

    font-size:22px;

    margin-bottom:14px;

    text-align:center;
}

.why-card p{

    color:#a8a8a8;

    line-height:1.8;

    text-align:center;
}

/* =========================================
   ADVANTAGES
========================================= */

.advantages{

    padding:140px 0;
}

.advantages-layout{

    display:grid;

    grid-template-columns:
    .95fr 1.05fr;

    gap:80px;

    align-items:start;
}

.advantages-content{

    position:sticky;

    top:130px;
}

.advantages-content h2{

    font-size:58px;

    line-height:1.1;

    margin:
    18px 0 24px;
}

.advantages-content p{

    color:#ababab;

    line-height:1.9;

    font-size:18px;
}

/* =========================================
   ADV LIST
========================================= */

.advantages-list{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.adv-card{

    display:flex;

    align-items:center;

    gap:24px;

    padding:26px 28px;

    border-radius:24px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:
    blur(18px);

    transition:.35s;
}

.adv-card:hover{

    transform:
    translateX(8px);

    border-color:
    rgba(22,216,78,.22);

    box-shadow:
    0 0 30px rgba(22,216,78,.10);
}

.adv-icon{

    flex-shrink:0;
}

.adv-icon img{

    width:54px;

    height:54px;

    object-fit:contain;
}

.adv-info{

    flex:1;
}

.adv-info h3{

    font-size:22px;

    margin-bottom:8px;
}

.adv-info p{

    color:#a9a9a9;

    line-height:1.7;
}

.adv-arrow{

    width:18px;

    height:18px;

    object-fit:contain;

    opacity:.4;

    transition:.35s;
}

.adv-card:hover .adv-arrow{

    opacity:1;

    transform:
    translateX(8px);
}

/* =========================================
   BACKGROUND ACCENTS
========================================= */

.advantages::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-300px;

    top:50%;

    transform:
    translateY(-50%);

    background:
    radial-gradient(
        circle,
        rgba(22,216,78,.08),
        transparent 70%
    );

    pointer-events:none;
}

.why::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-250px;

    top:100px;

    background:
    radial-gradient(
        circle,
        rgba(22,216,78,.05),
        transparent 70%
    );

    pointer-events:none;
}
/* =========================================
   REVIEWS
========================================= */

.reviews{

    padding:20px 0;
}

.reviews-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;
}

.review-card{

    position:relative;

    padding:34px;

    border-radius:28px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:
    blur(20px);

    transition:.35s;
}

.review-card:hover{

    transform:
    translateY(-8px);

    border-color:
    rgba(22,216,78,.25);

    box-shadow:
    0 0 35px rgba(22,216,78,.10);
}

.review-avatar{

    width:88px;

    height:88px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:18px;
}

.review-quote{

    width:28px;

    height:28px;

    object-fit:contain;

    margin-bottom:18px;

    opacity:.85;
}

.review-stars{

    color:#16d84e;

    letter-spacing:2px;

    font-size:18px;

    margin-bottom:16px;
}

.review-card p{

    color:#b0b0b0;

    line-height:1.8;

    margin-bottom:18px;
}

.review-card span{

    font-weight:700;

    color:#ffffff;
}

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

.cta{

    position:relative;

    padding:140px 0;

    overflow:hidden;
}

.cta-glow{

    position:absolute;

    width:900px;

    left:50%;

    top:50%;

    transform:
    translate(-50%,-50%);

    opacity:.22;

    pointer-events:none;
}

.cta-orb{

    position:absolute;

    width:420px;

    right:-100px;

    top:-80px;

    opacity:.18;

    pointer-events:none;
}

.cta-card{

    position:relative;

    z-index:2;

    text-align:center;

    padding:90px 50px;

    border-radius:40px;

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(255,255,255,.08);

    backdrop-filter:
    blur(24px);

    overflow:hidden;
}

.cta-card h2{

    font-size:58px;

    line-height:1.1;

    margin-bottom:22px;
}

.cta-card p{

    max-width:700px;

    margin:0 auto 36px;

    color:#b0b0b0;

    font-size:18px;

    line-height:1.8;
}

/* =========================================
   FOOTER
========================================= */

.footer{

    padding-top:100px;

    border-top:
    1px solid rgba(255,255,255,.05);
}

.footer-top{

    display:grid;

    grid-template-columns:
    1.4fr 1fr 1fr;

    gap:50px;

    padding-bottom:60px;
}

.footer-brand img{

    width:58px;

    height:58px;

    object-fit:contain;

    margin-bottom:16px;
}

.footer-brand h3{

    font-size:28px;

    margin-bottom:12px;
}

.footer-brand p{

    color:#a8a8a8;

    line-height:1.8;
}

.footer-links{

    display:flex;

    flex-direction:column;
}

.footer-links h4{

    margin-bottom:18px;

    font-size:18px;
}

.footer-links a{

    color:#a8a8a8;

    text-decoration:none;

    margin-bottom:12px;

    transition:.3s;
}

.footer-links a:hover{

    color:#16d84e;
}

.footer-bottom{

    padding:30px 0;

    text-align:center;

    color:#777;

    border-top:
    1px solid rgba(255,255,255,.05);
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes floatA{

    0%{
        transform:
        translateY(0px);
    }

    50%{
        transform:
        translateY(-24px);
    }

    100%{
        transform:
        translateY(0px);
    }
}

@keyframes floatB{

    0%{
        transform:
        translateY(0px);
    }

    50%{
        transform:
        translateY(-34px);
    }

    100%{
        transform:
        translateY(0px);
    }
}

@keyframes floatC{

    0%{
        transform:
        translateY(0px);
    }

    50%{
        transform:
        translateY(18px);
    }

    100%{
        transform:
        translateY(0px);
    }
}

@keyframes rotateCube{

    from{
        transform:
        rotate(0deg);
    }

    to{
        transform:
        rotate(360deg);
    }
}

/* =========================================
   REVEAL ANIMATION
========================================= */

.hidden{

    opacity:0;

    transform:
    translateY(40px);

    transition:
    .8s ease;
}

.show{

    opacity:1;

    transform:
    translateY(0);
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:1200px){

    .hero-container,
    .advantages-layout{

        grid-template-columns:
        1fr;
    }

    .advantages-content{

        position:relative;

        top:auto;
    }

    .why-grid{

        grid-template-columns:
        repeat(2,1fr);
    }

    .reviews-grid{

        grid-template-columns:
        repeat(2,1fr);
    }
}

@media(max-width:768px){

    .hero{

        padding-top:120px;
    }

    .hero h1{

        font-size:42px;
    }

    .hero p{

        font-size:17px;
    }

    .section-head h2,
    .advantages-content h2,
    .cta-card h2{

        font-size:38px;
    }

    .why-grid,
    .reviews-grid,
    .footer-top{

        grid-template-columns:
        1fr;
    }

    .cta-card{

        padding:60px 30px;
    }

    .hero-features{

        flex-direction:column;

        align-items:flex-start;
    }

    .coin{

        display:none;
    }

    .hero-cube{

        display:none;
    }

    .hero-orb{

        width:280px;
    }
}

/* =========================================
   2026 DESIGN REFINEMENT
========================================= */

:root{
    --accent:#16d84e;
    --accent-soft:rgba(22,216,78,.12);
    --surface:rgba(255,255,255,.035);
    --surface-strong:rgba(255,255,255,.055);
    --border:rgba(255,255,255,.085);
    --muted:#a9aea9;
}

body{
    background:
        radial-gradient(circle at 72% 18%, rgba(22,216,78,.055), transparent 28%),
        radial-gradient(circle at 14% 72%, rgba(22,216,78,.035), transparent 26%),
        #050705;
}

::selection{
    color:#041006;
    background:var(--accent);
}

.header{
    background:rgba(5,7,5,.72);
    border-bottom-color:rgba(255,255,255,.065);
}

.btn-login,
.btn-primary{
    box-shadow:0 10px 34px rgba(22,216,78,.14);
}

.hero{
    min-height:760px;
    padding:112px 0 42px;
}

.hero-container{
    gap:64px;
}

.hero-content{
    margin-top:0;
}

.hero-badge{
    padding:13px 21px;
    background:rgba(255,255,255,.035);
    border-color:rgba(255,255,255,.095);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.hero-badge span{
    font-size:16px;
}

.dashboard-card{
    padding:18px;
    border-radius:30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018));
    border-color:rgba(255,255,255,.11);
    box-shadow:
        0 32px 90px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.coin{
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.42));
    will-change:transform;
}

.coin-btc{
    width:66px;
    top:145px;
    left:max(22px, calc(50% - 700px));
    animation-duration:8s;
}

.coin-eth{
    width:62px;
    top:220px;
    right:max(26px, calc(50% - 700px));
    animation-duration:10s;
}

.coin-usdt{
    width:58px;
    left:46%;
    bottom:78px;
    animation-duration:7.5s;
}

.hero-cube{
    width:76px;
    right:11%;
    top:16%;
    opacity:.22;
}

.section-head{
    margin-bottom:48px;
}

.section-tag{
    padding:10px 18px;
    margin-bottom:18px;
    letter-spacing:.01em;
}

.section-head h2{
    font-size:52px;
}

.why,
.advantages,
.reviews,
.cta{
    padding:56px 0;
}

.advantages,
.reviews{
    border-top:1px solid rgba(255,255,255,.035);
}

.why-grid{
    gap:16px;
}

.why-card{
    overflow:hidden;
    min-height:292px;
    padding:34px 24px 30px;
    border-radius:24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    border-color:var(--border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.why-card::before{
    content:"";
    position:absolute;
    inset:0 24px auto;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(22,216,78,.65), transparent);
    opacity:.5;
}

.why-card:hover{
    transform:translateY(-5px);
    border-color:rgba(22,216,78,.24);
    box-shadow:
        0 22px 52px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.why-card img{
    width:74px;
    height:74px;
    margin-bottom:20px;
}

.why-card h3{
    font-size:20px;
}

.why-card p{
    line-height:1.65;
}

.advantages-layout{
    grid-template-columns:.78fr 1.22fr;
    gap:52px;
}

.advantages-content{
    top:104px;
}

.advantages-content h2{
    max-width:500px;
    font-size:50px;
    margin:16px 0 20px;
}

.advantages-content p{
    max-width:500px;
    line-height:1.75;
}

.advantages-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.adv-card{
    position:relative;
    align-items:flex-start;
    min-height:154px;
    padding:24px;
    gap:16px;
    border-radius:22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
    border-color:var(--border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.adv-card:hover{
    transform:translateY(-4px);
    border-color:rgba(22,216,78,.22);
    box-shadow:0 18px 44px rgba(0,0,0,.24);
}

.adv-icon img{
    width:46px;
    height:46px;
}

.adv-info h3{
    font-size:19px;
    line-height:1.25;
}

.adv-info p{
    font-size:15px;
    line-height:1.55;
}

.adv-arrow{
    display:none;
}

.reviews{
    overflow:hidden;
}

.reviews .section-head{
    max-width:720px;
    margin-left:0;
    text-align:left;
}

.reviews-grid{
    gap:16px;
}

.review-card{
    overflow:hidden;
    min-height:190px;
    padding:28px 26px;
    border-radius:22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
    border-color:var(--border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.review-card::after{
    content:"“";
    position:absolute;
    right:18px;
    bottom:-34px;
    color:rgba(22,216,78,.075);
    font-family:Georgia, serif;
    font-size:150px;
    line-height:1;
    pointer-events:none;
}

.review-card:hover{
    transform:translateY(-4px);
    border-color:rgba(22,216,78,.22);
    box-shadow:0 18px 44px rgba(0,0,0,.25);
}

.review-top{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding-bottom:18px;
    margin-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.review-name{
    color:#fff;
    font-size:18px;
    font-weight:750;
}

.review-stars{
    margin:0;
    font-size:14px;
    letter-spacing:1px;
}

.review-card p{
    position:relative;
    z-index:1;
    margin:0;
    color:#b9bdb9;
    line-height:1.7;
}

.cta{
    overflow:hidden;
}

.cta-card{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    column-gap:64px;
    text-align:left;
    padding:54px 60px;
    border-radius:32px;
    background:
        radial-gradient(circle at 88% 20%, rgba(22,216,78,.16), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
    border-color:rgba(22,216,78,.17);
    box-shadow:
        0 28px 80px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.cta-card::before{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    right:-80px;
    bottom:-120px;
    border:1px solid rgba(22,216,78,.14);
    border-radius:50%;
    pointer-events:none;
}

.cta-card h2{
    max-width:700px;
    font-size:48px;
    margin-bottom:16px;
}

.cta-card p{
    max-width:650px;
    margin:0;
    line-height:1.7;
}

.cta-card .btn-primary{
    grid-column:2;
    grid-row:1 / span 2;
    position:relative;
    z-index:2;
    white-space:nowrap;
}

.footer{
    padding-top:52px;
    background:linear-gradient(180deg, rgba(255,255,255,.018), transparent 82%);
    border-top-color:rgba(255,255,255,.065);
}

.footer-top{
    grid-template-columns:1.45fr .72fr 1fr;
    gap:42px;
    padding-bottom:44px;
}

.footer-brand img{
    width:48px;
    height:48px;
    margin-bottom:12px;
}

.footer-brand h3{
    font-size:24px;
}

.footer-brand p{
    max-width:360px;
    line-height:1.65;
}

.footer-links a{
    margin-bottom:10px;
}

.footer-bottom{
    padding:24px 0;
}

@media(max-width:1200px){
    .hero{
        min-height:auto;
        padding-top:132px;
    }

    .hero-container{
        gap:48px;
    }

    .hero-content{
        max-width:780px;
    }

    .hero-visual{
        max-width:760px;
        margin:0 auto;
    }

    .coin-btc{
        top:120px;
    }

    .coin-eth{
        top:470px;
    }

    .coin-usdt{
        bottom:40px;
        left:12%;
    }

    .advantages-layout{
        grid-template-columns:1fr;
        gap:40px;
    }

    .advantages-content h2,
    .advantages-content p{
        max-width:780px;
    }

    .cta-card{
        column-gap:36px;
        padding:48px;
    }
}

@media(max-width:768px){
    .container{
        padding:0 20px;
    }

    .header .container{
        height:66px;
    }

    .logo{
        gap:10px;
    }

    .logo img{
        width:40px;
        height:40px;
    }

    .logo span{
        font-size:17px;
    }

    .btn-login{
        padding:10px 17px;
        border-radius:12px;
    }

    .hero{
        padding:108px 0 54px;
    }

    .hero-container{
        gap:38px;
    }

    .hero-badge{
        padding:11px 15px;
    }

    .hero-badge span{
        font-size:14px;
    }

    .hero h1{
        font-size:43px;
        margin-bottom:18px;
    }

    .hero p{
        line-height:1.65;
        margin-bottom:28px;
    }

    .dashboard-card{
        padding:11px;
        border-radius:21px;
    }

    .dashboard-card img{
        border-radius:14px;
    }

    .why,
    .advantages,
    .reviews,
    .cta{
        padding:44px 0;
    }

    .section-head{
        margin-bottom:34px;
    }

    .section-head h2,
    .advantages-content h2,
    .cta-card h2{
        font-size:36px;
    }

    .section-head p,
    .advantages-content p,
    .cta-card p{
        font-size:16px;
    }

    .why-card{
        min-height:0;
        padding:28px 22px;
    }

    .advantages-list{
        grid-template-columns:1fr;
    }

    .adv-card{
        min-height:0;
    }

    .reviews-grid{
        gap:12px;
    }

    .review-card{
        min-height:0;
    }

    .cta-card{
        grid-template-columns:1fr;
        gap:28px;
        padding:38px 26px;
    }

    .cta-card .btn-primary{
        grid-column:1;
        grid-row:auto;
        justify-self:start;
    }

    .footer{
        padding-top:42px;
    }

    .footer-top{
        grid-template-columns:1fr;
        gap:30px;
        padding-bottom:34px;
    }
}

@media(max-width:420px){
    .hero h1{
        font-size:38px;
    }

    .hero-badge{
        align-items:flex-start;
        border-radius:18px;
    }

    .btn-primary{
        padding:16px 22px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* =========================================
   BUTTONS, BADGE & ICON REFINEMENT
========================================= */

.btn-login,
.btn-primary{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:54px;
    padding:0 30px;
    gap:0;
    border:1px solid rgba(255,255,255,.24);
    border-radius:15px;
    background:
        linear-gradient(135deg, #2af469 0%, #16d84e 52%, #0fbd40 100%);
    color:#031006;
    font-size:15px;
    font-weight:800;
    line-height:1;
    letter-spacing:.01em;
    box-shadow:
        0 13px 34px rgba(22,216,78,.22),
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -1px 0 rgba(0,0,0,.15);
}

.btn-login{
    min-height:44px;
    padding:0 24px;
    border-radius:13px;
}

.btn-login::before,
.btn-primary::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:55%;
    height:220%;
    top:-60%;
    left:-75%;
    transform:rotate(22deg);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    transition:left .55s ease;
}

.btn-login:hover,
.btn-primary:hover{
    transform:translateY(-3px);
    background:
        linear-gradient(135deg, #3aff79 0%, #1de25a 52%, #12c949 100%);
    box-shadow:
        0 17px 42px rgba(22,216,78,.32),
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -1px 0 rgba(0,0,0,.12);
}

.btn-login:hover::before,
.btn-primary:hover::before{
    left:125%;
}

.btn-login:active,
.btn-primary:active{
    transform:translateY(-1px) scale(.985);
}

.btn-login:focus-visible,
.btn-primary:focus-visible{
    outline:3px solid rgba(22,216,78,.28);
    outline-offset:4px;
}

.hero-badge{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    gap:11px;
    padding:12px 20px 12px 15px;
    background:
        linear-gradient(110deg, rgba(22,216,78,.16), rgba(255,255,255,.045) 58%, rgba(22,216,78,.08));
    border:1px solid rgba(22,216,78,.3);
    box-shadow:
        0 12px 35px rgba(0,0,0,.24),
        0 0 30px rgba(22,216,78,.08),
        inset 0 1px 0 rgba(255,255,255,.09);
}

.hero-badge::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:120px;
    height:120px;
    right:-70px;
    top:-75px;
    border-radius:50%;
    background:rgba(22,216,78,.2);
    filter:blur(26px);
}

.hero-badge::before{
    content:"";
    flex:0 0 auto;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#2af469;
    box-shadow:
        0 0 0 5px rgba(42,244,105,.11),
        0 0 18px rgba(42,244,105,.8);
}

.hero-badge img{
    width:20px;
    height:20px;
    mix-blend-mode:screen;
    filter:
        brightness(1.18)
        drop-shadow(0 0 8px rgba(22,216,78,.6));
}

.hero-badge span{
    color:#e9f6ec;
    font-size:15px;
    font-weight:650;
    letter-spacing:.012em;
}

.adv-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    background:transparent;
}

.adv-icon img{
    width:46px;
    height:46px;
    mix-blend-mode:screen;
    filter:
        brightness(1.16)
        saturate(1.08)
        drop-shadow(0 0 9px rgba(22,216,78,.28));
}

.svg-filters{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
    pointer-events:none;
}

.hero-badge img,
.adv-icon img:not([src$="support.png"]){
    mix-blend-mode:normal;
    filter:
        url("#remove-black-icon")
        brightness(1.25)
        saturate(1.12)
        drop-shadow(0 0 8px rgba(22,216,78,.38));
}

.adv-icon img[src$="support.png"]{
    mix-blend-mode:normal;
    filter:
        brightness(1.16)
        saturate(1.08)
        drop-shadow(0 0 9px rgba(22,216,78,.28));
}

@media(max-width:768px){
    .btn-login{
        min-height:40px;
        padding:0 17px;
        border-radius:11px;
        font-size:13px;
    }

    .btn-primary{
        min-height:50px;
        padding:0 23px;
        border-radius:13px;
        font-size:14px;
    }

    .hero-badge{
        padding:10px 15px 10px 12px;
    }

    .hero-badge span{
        font-size:13px;
    }
}

/* =========================================
   V3 VISUAL CONCEPT
========================================= */

.trust-strip{
    position:relative;
    padding:38px 0 56px;
    overflow:hidden;
}

.trust-strip::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 16% 48%, rgba(22,216,78,.09), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.014), transparent);
    pointer-events:none;
}

.trust-panel{
    display:grid;
    grid-template-columns:.68fr 1.32fr;
    align-items:center;
    gap:46px;
    padding:34px 38px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:28px;
    background:
        linear-gradient(130deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
    box-shadow:
        0 24px 70px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.trust-intro .section-tag{
    margin-bottom:15px;
}

.trust-intro h2{
    max-width:420px;
    font-size:34px;
    line-height:1.12;
}

.trust-points{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.trust-point{
    min-height:102px;
    padding:20px 21px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:18px;
    background:rgba(3,8,4,.42);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.trust-number,
.trust-label{
    display:block;
}

.trust-number{
    margin-bottom:7px;
    color:#22e65b;
    font-size:18px;
    font-weight:800;
}

.trust-label{
    color:#aeb4af;
    font-size:14px;
    line-height:1.45;
}

.advantages{
    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.04);
    background:
        radial-gradient(circle at 84% 42%, rgba(22,216,78,.08), transparent 31%),
        linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004));
}

.reviews{
    border-top:0;
    background:
        radial-gradient(circle at 8% 14%, rgba(22,216,78,.055), transparent 27%),
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(255,255,255,.008));
}

.reviews::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px);
    background-size:100% 64px;
    pointer-events:none;
}

.cta-copy{
    position:relative;
    z-index:2;
}

.cta-card .cta-copy h2{
    margin-bottom:14px;
}

.cta-card .cta-copy p{
    margin:0;
}

.cta-benefits{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:23px;
}

.cta-benefits span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 13px;
    border:1px solid rgba(22,216,78,.17);
    border-radius:999px;
    background:rgba(22,216,78,.07);
    color:#d8dfd9;
    font-size:13px;
    font-weight:600;
}

.cta-benefits span::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#22e65b;
    box-shadow:0 0 10px rgba(34,230,91,.65);
}

.cta-card .btn-primary{
    grid-column:2;
    grid-row:1;
}

.footer{
    padding-top:46px;
    background:
        radial-gradient(circle at 14% 0%, rgba(22,216,78,.045), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.022), transparent 72%);
}

.footer-top{
    grid-template-columns:1.35fr .72fr 1.12fr 1fr;
    gap:34px;
    padding-bottom:36px;
}

.footer-links h4{
    color:#f4f6f4;
}

.footer-bottom{
    margin-top:0;
}

@media(max-width:1200px){
    .trust-panel{
        grid-template-columns:1fr;
        gap:28px;
    }

    .trust-intro h2{
        max-width:700px;
    }

    .footer-top{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:768px){
    .trust-strip{
        padding:28px 0 40px;
    }

    .trust-panel{
        padding:26px 20px;
        border-radius:22px;
    }

    .trust-intro h2{
        font-size:29px;
    }

    .trust-points{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:9px;
    }

    .trust-point{
        min-height:112px;
        padding:16px 14px;
    }

    .trust-number{
        font-size:16px;
    }

    .trust-label{
        font-size:12px;
    }

    .advantages-list{
        display:flex;
        flex-direction:row;
        gap:12px;
        margin-right:-20px;
        padding-right:20px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
    }

    .advantages-list::-webkit-scrollbar,
    .reviews-grid::-webkit-scrollbar{
        display:none;
    }

    .adv-card{
        flex:0 0 82%;
        min-height:152px;
        scroll-snap-align:start;
    }

    .reviews-grid{
        display:flex;
        gap:12px;
        margin-right:-20px;
        padding-right:20px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
    }

    .review-card{
        flex:0 0 86%;
        min-height:188px;
        scroll-snap-align:start;
    }

    .cta-card{
        grid-template-columns:1fr;
    }

    .cta-card .btn-primary{
        grid-column:1;
        grid-row:auto;
    }

    .cta-benefits{
        gap:7px;
        margin-top:20px;
    }

    .cta-benefits span{
        padding:8px 11px;
        font-size:12px;
    }

    .footer-top{
        grid-template-columns:1fr;
        gap:28px;
    }
}

/* =========================================
   V3 REVIEW & ICON POLISH
========================================= */

.review-card::after{
    right:17px;
    bottom:8px;
    font-size:76px;
    line-height:.7;
    color:rgba(22,216,78,.11);
}

.review-card p{
    padding-right:25px;
}

.adv-card{
    align-items:center;
}

.adv-icon{
    flex:0 0 50px;
    width:50px;
    height:50px;
    border:1px solid rgba(22,216,78,.16);
    border-radius:15px;
    background:
        radial-gradient(circle at 35% 30%, rgba(34,230,91,.16), transparent 55%),
        rgba(22,216,78,.045);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 10px 24px rgba(0,0,0,.18);
}

.adv-svg{
    width:27px;
    height:27px;
    fill:none;
    stroke:#27e961;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 6px rgba(39,233,97,.3));
}

.adv-info h3{
    margin-bottom:7px;
}

@media(max-width:768px){
    .adv-icon{
        flex-basis:46px;
        width:46px;
        height:46px;
        border-radius:14px;
    }

    .adv-svg{
        width:25px;
        height:25px;
    }
}

/* =========================================
   V4 SEAMLESS BACKGROUNDS & UX FIXES
========================================= */

#platform,
#advantages,
#reviews{
    scroll-margin-top:96px;
}

.bg-glow,
.hero-orb,
.cta-glow,
.cta-orb{
    -webkit-mask-image:radial-gradient(circle, #000 0%, #000 46%, transparent 76%);
    mask-image:radial-gradient(circle, #000 0%, #000 46%, transparent 76%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
}

.glow-left,
.glow-right{
    mix-blend-mode:screen;
}

.trust-strip::before{
    inset:-90px 0;
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.advantages,
.reviews{
    border:0;
    background:transparent;
}

.advantages::before{
    width:120%;
    height:130%;
    right:-20%;
    top:-15%;
    transform:none;
    background:
        radial-gradient(circle at 82% 48%, rgba(22,216,78,.075), transparent 30%),
        radial-gradient(circle at 18% 72%, rgba(22,216,78,.03), transparent 28%);
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.reviews::before{
    inset:-90px 0;
    background:
        radial-gradient(circle at 10% 25%, rgba(22,216,78,.055), transparent 27%),
        linear-gradient(rgba(255,255,255,.01) 1px, transparent 1px);
    background-size:auto, 100% 64px;
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.footer{
    border-top:0;
    background:
        radial-gradient(circle at 15% -35%, rgba(22,216,78,.055), transparent 46%),
        transparent;
}

.btn-login,
.btn-primary{
    font-family:"Segoe UI", Arial, sans-serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:0;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

.hero-badge{
    transform:translateY(-12px);
}

@media(max-width:768px){
    #platform,
    #advantages,
    #reviews{
        scroll-margin-top:80px;
    }

    .btn-login{
        font-size:13px;
    }

    .btn-primary{
        font-size:14px;
    }

    .hero-badge{
        transform:translateY(-7px);
    }
}

/* =========================================
   V5 FOOTER LAYOUT
========================================= */

.footer-top{
    grid-template-columns:1.25fr 1.05fr .72fr;
    gap:58px;
}

.footer-brand-head{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:13px;
}

.footer-brand-head img{
    width:48px;
    height:48px;
    margin:0;
}

.footer-brand-head h3{
    margin:0;
    font-size:24px;
}

@media(max-width:900px){
    .footer-top{
        grid-template-columns:1fr 1fr;
        gap:36px;
    }

    .footer-brand{
        grid-column:1 / -1;
    }
}

@media(max-width:580px){
    .footer-top{
        grid-template-columns:1fr;
        gap:28px;
    }

    .footer-brand{
        grid-column:auto;
    }
}

/* =========================================
   V6 NAVIGATION & REVIEWS ALIGNMENT
========================================= */

#hero,
#advantages,
#reviews{
    scroll-margin-top:96px;
}

.reviews .section-head{
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

@media(max-width:768px){
    #hero,
    #advantages,
    #reviews{
        scroll-margin-top:80px;
    }
}

/* =========================================
   V7 ADVANTAGES & CTA REFINEMENT
========================================= */

.advantages-content{
    position:relative;
    top:auto;
    align-self:start;
}

.cta-note{
    display:flex;
    align-items:center;
    min-height:48px;
    max-width:520px;
    margin-top:23px;
    padding:12px 18px;
    border:1px solid rgba(22,216,78,.2);
    border-radius:14px;
    background:
        linear-gradient(135deg, rgba(22,216,78,.09), rgba(255,255,255,.025));
    color:#dce3dd;
    font-size:14px;
    font-weight:600;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 12px 28px rgba(0,0,0,.16);
}

.footer-link-placeholder{
    display:block;
    margin-bottom:10px;
    color:#a8a8a8;
    cursor:pointer;
}

.footer-link-placeholder:hover{
    color:#16d84e;
}

@media(max-width:768px){
    .cta-note{
        width:100%;
        min-height:46px;
        margin-top:20px;
        padding:11px 14px;
        font-size:13px;
    }
}