:root{
--blue:#143D7A;
--green:#22c55e;
--border:#e8edf5;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,Arial,sans-serif;background:#fff;color:var(--blue);overflow-x:hidden}
nav{
  position:fixed;
  top:0;
  width:100%;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:22px 48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  z-index:1000;
}
.logo{
    display:flex;
    align-items:center;
}

.logo-img{
    width:120px;
    height:auto;
    display:block;
}
.center-nav{display:flex;gap:35px;justify-content:center}
.center-nav a{text-decoration:none;color:var(--blue)}
.right{text-align:right}
.signin{
    display:inline-block;
    padding:10px 18px;
    border:1px solid var(--blue);
    border-radius:25px;
    background:#fff;
    color:var(--blue);
    text-decoration:none;
    font-weight:600;
    transition:.2s;
}

.signin:hover{
    background:var(--blue);
    color:#fff;
}
.hero{padding-top:75px;min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding-left:8%;padding-right:8%}
.big{font-size:90px;font-weight:900;line-height:.9}
.tag{font-size:30px;margin:30px 0}
.cta{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 28px;
background:linear-gradient(135deg,#22c55e,#16a34a);
color:#fff;
text-decoration:none;
font-weight:700;
font-size:16px;
border-radius:12px;
box-shadow:0 10px 30px rgba(34,197,94,.25);
transition:all .3s ease;
cursor:pointer;
border:none;
}

.cta:hover{
transform:translateY(-3px);
box-shadow:0 18px 40px rgba(34,197,94,.35);
background:linear-gradient(135deg,#2dd65f,#22c55e);
}

.cta:active{
transform:translateY(-1px);
}

.cta::after{
content:"  →";
transition:transform .3s ease;
}

.cta:hover::after{
transform:translateX(4px);
}
.heroimg img,.section img{width:100%;border-radius:100px;box-shadow:0 30px 60px rgba(0,0,0,.15)}
.float{animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.card{position:absolute;background:#fff;padding:24px;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.12);bottom:-30px;left:-40px}
.section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:50px 8%}
.section:nth-child(even) .imgwrap{transform:rotate(-4deg)}
.section:nth-child(odd) .imgwrap{transform:rotate(4deg)}
h2{font-size:48px;margin-bottom:20px}
p{font-size:20px;line-height:1.6}
.dashboard-preview{

    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

}

.dashboard-preview img{

    width:100%;
    border-radius:32px;

    box-shadow:0 30px 70px rgba(20,61,122,.15);

    transition:.35s ease;

}

.dashboard-preview img:hover{

    transform:translateY(-6px);

}
.footercta{text-align:center;padding:140px 20px}
.reveal{opacity:0;transform:translateY(40px);transition:1s}
.reveal.show{opacity:1;transform:none}
@media(max-width:900px){
.hero,.section{grid-template-columns:1fr}
.big{font-size:72px}
.center-nav{display:none}
.grid{grid-template-columns:1fr 1fr}
}
.chart-container{

    position:relative;
    width:100%;
    height:320px;

}

#growthChart{

    width:100% !important;
    height:100% !important;
    display:block;

}

@media (max-width:900px){

    nav{
        display:grid;
        grid-template-columns:auto 1fr auto;
        align-items:center;
        padding:10px 16px;
    }

    .logo-img{
        width:110px;
    }

    .center-nav{
        display:flex;
        justify-content:center;
        gap:16px;
    }

    .center-nav a{
        font-size:14px;
    }

    .signin{
        padding:7px 12px;
        font-size:13px;
    }

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

    .big{
        font-size:72px;
    }

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

    .section .imgwrap{
        order:2;
    }

    .section > div:not(.imgwrap){
        order:1;
    }

}