:root{
    --bg:#0f1724;
    --panel:#0b1220;
    --muted:#9aa4b2;
    --accent1:#8dd3ff;
    --accent2:#c2a5ff;
    --glass: rgba(255,255,255,0.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
    background:linear-gradient(180deg,#f7fbff 0%, #fbfbff 100%);
    color: #0f1724;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.6;
}

nav{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 8%;position:relative;z-index:20}
nav .logo{font-weight:700;font-size:1.1rem;letter-spacing:0.6px}
nav ul{display:flex;gap:1.5rem;list-style:none}
nav a{color:var(--panel);text-decoration:none;font-weight:500;opacity:.95;transition:opacity .18s}
nav a:hover{opacity:1}

.menu-toggle{display:none;background:transparent;border:0;gap:4px;align-items:center}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--panel);border-radius:2px;transition:transform .25s,opacity .2s}

.hero{min-height:100vh;padding:3rem 0;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg svg{width:100%;height:100%;display:block}
.blob{transform-origin:center;animation:float 8s ease-in-out infinite}
.blob-2{animation-duration:10s;animation-delay:-2s}
.blob-3{animation-duration:12s;animation-delay:-4s}
@keyframes float{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(6deg)}100%{transform:translateY(0) rotate(0deg)}}

.hero-content{max-width:900px;margin:6rem auto;padding:2rem 8%;position:relative;z-index:10}
.eyebrow{text-transform:uppercase;letter-spacing:3px;margin-bottom:1rem;color:var(--muted);font-size:.8rem}
.hero h1{font-size:clamp(2.25rem,6vw,4.5rem);line-height:1;margin-bottom:.5rem;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h2{font-size:clamp(1rem,2.3vw,1.5rem);font-weight:600;color:var(--panel);margin-bottom:1.25rem}
.hero-text{max-width:60ch;color:var(--muted);margin-bottom:1.5rem}

.btn{display:inline-block;padding:12px 22px;border-radius:12px;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#052331;text-decoration:none;font-weight:600;box-shadow:0 8px 30px rgba(124,58,237,0.08);transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(124,58,237,0.12)}

.section{padding:6rem 8%;max-width:1200px;margin:0 auto}
.section h2{font-size:1.8rem;margin-bottom:1rem;color:var(--panel)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:1.25rem}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.95),#fff);padding:1.6rem;border-radius:14px;box-shadow:0 8px 30px rgba(16,24,40,0.06);transition:transform .22s,box-shadow .22s;transform-origin:center}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(16,24,40,0.08)}
.card h3{margin-bottom:.5rem}

.timeline{margin-top:1.25rem;border-radius:12px;overflow:hidden}
.timeline-item{padding:1rem 0;border-bottom:1px solid rgba(15,23,36,0.06);display:flex;gap:1rem;align-items:flex-start}
.timeline-item span{font-weight:700;color:var(--panel);min-width:80px}

.site-footer{padding:4rem 8%;text-align:center;border-top:1px solid rgba(15,23,36,0.06);margin-top:2rem}

/* Reveal animations */
.reveal-on-scroll{opacity:0;transform:translateY(14px) scale(.995);transition:opacity .7s cubic-bezier(.2,.9,.2,1),transform .7s cubic-bezier(.2,.9,.2,1)}
.reveal-on-scroll.is-revealed{opacity:1;transform:none}

/* Mobile */
@media (max-width:900px){
    nav{padding:1rem 6%}
    .menu-toggle{display:flex}
    #nav-list{position:absolute;right:6%;top:64px;background:rgba(255,255,255,0.98);backdrop-filter:blur(6px);padding:12px;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.08);flex-direction:column;gap:.75rem;display:none}
    #nav-list.show{display:flex}
    nav ul{gap:1rem}
    .hero-content{margin:4rem auto;padding:1rem 6%}
    .hero h1{font-size:2.2rem}
}

@media (max-width:520px){
    .hero-content{padding:1rem 4%}
    .cards{grid-template-columns:1fr}
}