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

html{

    scroll-behavior:smooth;

}

.hero *{

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

}

.hero-ready{

    opacity:1;

}

.hero{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:170px 0 120px;

    background:#ffffff;
    
    font-feature-settings:"liga","kern";
    
    isolation:isolate;
    
    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

.hero ::selection{

    background:#10B981;

    color:#fff;

}

.hero img{

    user-select:none;

    pointer-events:none;

    -webkit-user-drag:none;

}

/* ======================================================
   DESKTOP POLISH
====================================================== */

.hero .container{

    position:relative;

    z-index:2;

    max-width:1380px;

}

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

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.hero-gradient{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    opacity:.8;
    
    animation:

        gradientMove 18s ease-in-out infinite;

}

@keyframes gradientMove{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(20px,-20px);

    }

    100%{

        transform:translate(0,0);

    }

}

.hero-gradient-1{

    width:700px;

    height:700px;

    top:-260px;

    right:-180px;

    background:

    radial-gradient(circle,

    rgba(16,185,129,.25),

    transparent 70%);

}

.hero-gradient-2{

    width:650px;

    height:650px;

    bottom:-320px;

    left:-240px;

    background:

    radial-gradient(circle,

    rgba(56,189,248,.18),

    transparent 70%);

}

.hero-grid-pattern{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(

        rgba(15,23,42,.03) 1px,

        transparent 1px),

        linear-gradient(

        90deg,

        rgba(15,23,42,.03) 1px,

        transparent 1px);

    background-size:70px 70px;

    mask-image:

    radial-gradient(circle,#000 60%,transparent);

}
.hero-grid{

    display:grid;

    grid-template-columns:58% 42%;

    align-items:center;

    gap:100px;

}

.hero-content{

    position:relative;

    z-index:2;
    
    max-width:720px;

}

.hero-content::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    right:-100px;

    top:120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(16,185,129,.05),

            transparent 70%

        );

    pointer-events:none;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 24px;

    font-size:15px;

    letter-spacing:.5px;

    border-radius:999px;

    background:rgba(16,185,129,.08);

    border:1px solid rgba(16,185,129,.12);

    color:#059669;

    font-weight:700;

    backdrop-filter:blur(12px);
    
    transition:

        .35s;
        
    margin-bottom:34px;

}

.hero-badge:hover{

    transform:

        translateY(-3px);

    box-shadow:

        0 15px 30px rgba(16,185,129,.15);

}

.badge-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#10B981;

    box-shadow:

    0 0 10px #10B981,

    0 0 25px rgba(16,185,129,.45);
    
    animation:

        badgePulse 2s infinite;

}

@keyframes badgePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.3);

    }

    100%{

        transform:scale(1);

    }

}

.hero-title{

    display:flex;

    flex-direction:column;

    gap:8px;
    
    font-size:84px;

    line-height:.95;

    letter-spacing:-3.5px;

}

.hero-title span{

    display:block;

    font-size:78px;

    font-weight:900;

    line-height:.98;

    letter-spacing:-3px;

    color:#0F172A;
    
    text-shadow:

    0 10px 40px rgba(15,23,42,.05);

}

.hero-title span:last-child{

    background:

        linear-gradient(

            135deg,

            #10B981,

            #0EA5E9

        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-description{

    margin-top:42px;

    max-width:650px;

    font-size:20px;

    line-height:2;
    
    color:#64748B;

}

.hero-buttons{

    display:flex;

    align-items:center;

    margin-top:50px;

    gap:20px;

}

/* ======================================================
TRUST
====================================================== */

.hero-trust{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    margin-top:70px;

    gap:40px;

}

.trust-item{

    display:flex;

    flex-direction:column;

    gap:6px;
    
    position:relative;

    transition:

        transform .35s,

        color .35s;

}

.trust-item:hover{

    transform:

        translateY(-5px);

}

.trust-item h3{

    font-size:20px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:6px;

}

.trust-item:hover h3{

    color:#10B981;

}


.trust-item span{

    color:#64748B;

    font-size:15px;

    line-height:1.7;

}

.trust-item:hover span{

    color:#475569;

}

.trust-divider{

    width:1px;

    height:44px;

    background:#E2E8F0;

}

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

.btn-primary,
.btn-secondary{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:58px;

    padding:0 34px;

    border-radius:16px;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:

        transform .35s,

        box-shadow .35s,

        background .35s,

        color .35s;
        
    min-width:210px;

}

/* ======================================================
PRIMARY BUTTON
====================================================== */

.btn-primary{

    color:#fff;

    background:

        linear-gradient(
            135deg,
            #10B981,
            #0EA5E9
        );

    box-shadow:

        0 20px 45px rgba(16,185,129,.28);
        
    overflow:hidden;

}

.btn-primary::after{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

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

    left:50%;

    top:50%;

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

    transition:.6s;

}

.btn-primary:hover::after{

    width:320px;

    height:320px;

}

.btn-primary:hover{

    transform:

        translateY(-4px);

    box-shadow:

        0 30px 60px rgba(16,185,129,.35);

}

.btn-primary svg{

    width:18px;

    height:18px;

    transition:.35s;

}

.btn-primary:hover svg{

    transform:translateX(5px);

}

/* ======================================================
SECONDARY BUTTON
====================================================== */

.btn-secondary{

    color:#0F172A;

    background:#fff;

    border:1px solid #E2E8F0;

}

.btn-secondary:hover{

    background:#F8FAFC;

    border-color:#10B981;

    color:#10B981;

    transform:

        translateY(-4px);

}

.btn-primary::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.28),
            transparent
        );

    opacity:0;

    transition:.35s;

}

.btn-primary:hover::before{

    opacity:1;

}

/* ======================================================
FLOATING
====================================================== */

.floating-circle{

    position:absolute;

    border-radius:50%;

    backdrop-filter:blur(30px);

    background:

        rgba(255,255,255,.35);

    border:

        1px solid rgba(255,255,255,.45);

    box-shadow:

        0 15px 30px rgba(15,23,42,.08);
        
    animation:

        floatingCircle 7s ease-in-out infinite;

}

.circle-1{

    width:22px;

    height:22px;

    left:6%;

    top:20%;
    
    animation-delay:0s;

}

.circle-2{

    width:34px;

    height:34px;

    right:8%;

    top:32%;
    
    animation-delay:2s;

}

.circle-3{

    width:26px;

    height:26px;

    left:42%;

    bottom:12%;

    animation-delay:4s;
}

@keyframes floatingCircle{

    0%{

        transform:

            translateY(0px);

    }

    50%{

        transform:

            translateY(-15px);

    }

    100%{

        transform:

            translateY(0px);

    }

}

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

.reveal-badge,
.reveal-title,
.reveal-description,
.reveal-buttons,
.reveal-trust,
.reveal-dashboard{

    opacity:1;

    transform:none;

}

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

.hero-preview{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    perspective:1800px;
    
    min-height:620px;
    
    isolation:isolate;
    
    transition:

        transform .45s ease;

}

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-220px;

    top:-250px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(16,185,129,.05),

            transparent 70%

        );

    pointer-events:none;

}

.hero::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(14,165,233,.05),

            transparent 70%

        );
        
    opacity:.8;

}

.hero-preview::before{

    content:"";

    position:absolute;

    inset:40px;

    border-radius:40px;

    background:

        radial-gradient(

            rgba(255,255,255,.25),

            transparent 70%

        );

    z-index:1;

    pointer-events:none;

}

/* ======================================================
DASHBOARD GLOW
====================================================== */

.dashboard-glow{

    position:absolute;

    width:480px;

    height:480px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(16,185,129,.20),

            transparent 70%

        );

    filter:blur(90px);

    z-index:0;
    
    animation:

        glowFloat 8s ease-in-out infinite;

}

@keyframes glowFloat{

    0%{

        transform:

            translateY(0px)

            scale(1);

    }

    50%{

        transform:

            translateY(-20px)

            scale(1.05);

    }

    100%{

        transform:

            translateY(0px)

            scale(1);

    }

}

/* ======================================================
DASHBOARD CARD
====================================================== */

.hero-card{

    position:relative;

    z-index:2;

    width:100%;

    max-width:580px;

    border-radius:28px;

    overflow:hidden;

    background:

        rgba(255,255,255,.92);

    backdrop-filter:blur(24px);

    border:

        1px solid rgba(255,255,255,.75);

    box-shadow:

        0 80px 140px rgba(15,23,42,.14),

        0 20px 60px rgba(16,185,129,.10);

    transition:

        transform .45s,

        box-shadow .45s;
        
    outline:1px solid rgba(255,255,255,.35);

    outline-offset:-1px;
    
    transform:

        rotateY(-6deg)

        rotateX(4deg);
        
    animation:

        dashboardFloat 7s ease-in-out infinite;

}

@keyframes dashboardFloat{

    0%{

        transform:

            translateY(0px)

            rotateY(-5deg)

            rotateX(4deg);

    }

    50%{

        transform:

            translateY(-12px)

            rotateY(-4deg)

            rotateX(3deg);

    }

    100%{

        transform:

            translateY(0px)

            rotateY(-5deg)

            rotateX(4deg);

    }

}

.hero-card,

.chart-bars span,

.stat-card,

.activity-item{

    will-change:transform;

}

.btn-primary:focus,

.btn-secondary:focus{

    outline:3px solid rgba(16,185,129,.25);

    outline-offset:4px;

}

.hero-card:hover{

    transform:

        rotateY(0)

        rotateX(0)

        translateY(-10px);

    box-shadow:

        0 60px 110px rgba(15,23,42,.14);
        
    border-color:

        rgba(16,185,129,.25);

}

/* ======================================================
   PREMIUM GLASS
====================================================== */

.hero-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-60%;

    width:45%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.25),

            transparent

        );

    transform:skewX(-25deg);

    transition:1.2s;

}

.hero-card:hover::before{

    left:130%;

}

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

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:26px 30px;

    border-bottom:1px solid #F1F5F9;

}

.dashboard-title{

    display:flex;

    align-items:center;

    gap:14px;

}

.dashboard-logo{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(

            135deg,

            #10B981,

            #0EA5E9

        );

    color:#fff;

    font-size:18px;

    font-weight:800;

}

.dashboard-title h4{

    font-size:17px;

    color:#0F172A;

    margin-bottom:3px;

}

.dashboard-title small{

    color:#64748B;

    font-size:13px;

}

.dashboard-status{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#10B981;

    font-weight:600;

}

.dashboard-status span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#10B981;

    box-shadow:

        0 0 12px #10B981;

}

.dashboard-body{

    padding:28px;

}

.dashboard-separator{

    height:1px;

    background:#F1F5F9;

}

.hero-card::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:120px;

    background:

        linear-gradient(

            rgba(255,255,255,.35),

            transparent

        );

    pointer-events:none;

}

/* ======================================================
   DASHBOARD CHART
====================================================== */

.dashboard-chart{

    margin:30px;

    padding:30px;

    border-radius:22px;

    background:

        linear-gradient(

            180deg,

            #F8FAFC,

            #FFFFFF

        );

    border:1px solid #EEF2F7;
    
    position:relative;

    overflow:hidden;

}

.dashboard-chart::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.35),

            transparent

        );

}

.chart-bars{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    height:200px;

    gap:14px;

}

.chart-bars span{

    flex:1;

    border-radius:14px 14px 6px 6px;

    background:

        linear-gradient(

            180deg,

            #10B981,

            #0EA5E9

        );

    box-shadow:

        0 12px 25px rgba(16,185,129,.18);

    transition:

        .35s;

}

.chart-bars span:nth-child(1){

    height:45%;

}

.chart-bars span:nth-child(2){

    height:70%;

}

.chart-bars span:nth-child(3){

    height:58%;

}

.chart-bars span:nth-child(4){

    height:90%;

}

.chart-bars span:nth-child(5){

    height:74%;

}

.chart-bars span:nth-child(6){

    height:100%;

}

.chart-bars span:hover{

    transform:

        translateY(-8px);

    filter:brightness(1.08);

}

/* ======================================================
KPI
====================================================== */


.dashboard-stats{

    display:grid !important;

    grid-template-columns:

        repeat(

            auto-fit,

            minmax(140px,1fr)

        );

    gap:18px;
    
    margin-bottom:35px;

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    position:relative;

    z-index:999;

}

.stat-card{

    padding:20px;

    border-radius:18px;

    background:#F8FAFC;

    border:1px solid #EEF2F7;
    
    min-width:0;

    transition:

        .35s;
        
    overflow:hidden;

    position:relative;
    
    min-height:110px;
    
    transition:

        transform .35s,

        box-shadow .35s;
        
    display:block !important;

    opacity:1 !important;

    visibility:visible !important;

}

.stat-card:hover{

    transform:

        translateY(-6px);

    background:#FFFFFF;

    box-shadow:

        0 25px 50px rgba(16,185,129,.15);

}

.stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(16,185,129,.06),

            transparent

        );

    opacity:0;

    transition:.35s;

}

.stat-card:hover::before{

    opacity:1;

}

.stat-card small{

    display:block;

    font-size:13px;

    color:#64748B;

    margin-bottom:10px;

}

.stat-card strong{

    font-size:28px;

    color:#0F172A;

    font-weight:800;
    
    display:block;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

/* ======================================================
ACTIVITY
====================================================== */

.dashboard-activity{

    margin:0 30px 30px;

    padding:24px;

    border-radius:22px;

    background:#FFFFFF;

    border:1px solid #EEF2F7;

}

.activity-title{

    font-size:16px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:20px;

}

.activity-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 0;
    
    transition:

        .35s;

}

.activity-item:not(:last-child){

    border-bottom:1px solid #F1F5F9;

}

.activity-item:hover{

    padding-left:10px;

}

.activity-item:hover .activity-dot{

    transform:

        scale(1.2);

}

.activity-item p{

    margin:0;

    color:#475569;

    font-size:15px;

}

.activity-dot{

    position:relative;

    width:12px;

    height:12px;

    border-radius:50%;

    background:#10B981;

    flex-shrink:0;
    
    animation:

        activityPulse 2.5s infinite;

}

@keyframes activityPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.2);

    }

    100%{

        transform:scale(1);

    }

}

.activity-dot::before{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:50%;

    background:

        rgba(16,185,129,.20);

}

/* ======================================================
MICRO ANIMATION
====================================================== */

.chart-bars span{

    animation:

        barFloat 4s ease-in-out infinite;

}

.chart-bars span:nth-child(2){

    animation-delay:.2s;

}

.chart-bars span:nth-child(3){

    animation-delay:.4s;

}

.chart-bars span:nth-child(4){

    animation-delay:.6s;

}

.chart-bars span:nth-child(5){

    animation-delay:.8s;

}

.chart-bars span:nth-child(6){

    animation-delay:1s;

}

@keyframes barFloat{

    0%{

        transform:scaleY(.95);

    }

    50%{

        transform:scaleY(1);

    }

    100%{

        transform:scaleY(.95);

    }

}

.dashboard-status span{

    animation:

        pulseOnline 2s infinite;

}

@keyframes pulseOnline{

    0%{

        box-shadow:

            0 0 0 0 rgba(16,185,129,.45);

    }

    70%{

        box-shadow:

            0 0 0 10px rgba(16,185,129,0);

    }

    100%{

        box-shadow:

            0 0 0 0 rgba(16,185,129,0);

    }

}

/* ======================================================
   TABLET LANDSCAPE (MatePad / iPad)
====================================================== */

@media (max-width:1366px) and (min-width:993px){
    
    .hero-card{

        transform:scale(.88);

        transform-origin:center;

    }
    
    .dashboard-stats{

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

    }

    .hero-grid{

        grid-template-columns:52% 48%;

        gap:40px;

        align-items:center;

    }

    .hero-preview{

        justify-content:center;
        
        overflow:visible;

        padding-right:20px;

    }

    .hero-card{

        width:100%;

        max-width:470px;

        transform:none;

    }

}

/* ======================================================
LAPTOP
====================================================== */

@media (max-width:1200px){

    .hero{

        padding:150px 0 90px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

    .hero-content{

        max-width:100%;

        text-align:center;

    }

    .hero-description{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-trust{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-preview{

        justify-content:center;

    }

}

@media (min-width:993px) and (max-width:1366px){

    .hero-grid{
        grid-template-columns:52% 48%;
        gap:40px;
        align-items:center;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-preview{
        justify-content:center;
        min-height:520px;
    }

    .hero-card{
        max-width:460px;
        transform:none;
    }

    .dashboard-chart{
        margin:24px;
        padding:24px;
    }

    .dashboard-stats{
        padding:0 24px 24px;
        gap:16px;
    }

    .dashboard-activity{
        margin:0 24px 24px;
    }

}

/* ======================================================
TABLET LANDSCAPE
====================================================== */

@media (max-width:992px){

    .hero{

        min-height:auto;

        padding:130px 0 80px;

    }

    .hero-title span{

        font-size:64px;

    }

    .hero-description{

        font-size:18px;

        line-height:1.8;

    }

    .hero-card{

        max-width:650px;

        transform:none;

    }

}

/* ======================================================
TABLET
====================================================== */

@media (max-width:768px){

    .hero{

        padding:120px 0 70px;

    }

    .hero-grid{

        gap:50px;

    }

    .hero-title span{

        font-size:52px;

    }

    .hero-description{

        font-size:17px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

    }

    .hero-trust{

        display:grid;

        grid-template-columns:1fr;

        gap:25px;

    }

    .trust-divider{

        display:none;

    }

}

@media (max-width:768px){

    .dashboard-header{

        padding:20px;

    }

    .dashboard-chart{

        margin:20px;

        padding:20px;

    }

    .dashboard-stats{

        grid-template-columns:1fr;

        padding:0 20px 20px;

    }

    .dashboard-activity{

        margin:0 20px 20px;

    }
    
    .floating-circle{

        display:none;

    }
    
    .hero-gradient{

        filter:blur(100px);

    }

}

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

@media (max-width:576px){

    .hero{

        padding:110px 0 60px;

    }

    .hero-title span{

        font-size:42px;

        letter-spacing:-2px;

    }

    .hero-badge{

        font-size:13px;

        padding:10px 18px;

    }

    .hero-description{

        font-size:16px;

    }
    
    .chart-bars{

        height:140px;

        gap:8px;

    }
    
    .activity-item{

        gap:10px;

    }

}

@media (max-width:420px){

    .hero-title span{

        font-size:34px;

    }

    .hero-description{

        font-size:15px;

    }

    .dashboard-logo{

        width:40px;

        height:40px;

    }

    .dashboard-title h4{

        font-size:15px;

    }

}

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

    *{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}