:root {
    --primary:    #1E1860;
    --primary-dk: #140f45;
    --primary-lt: #2a2282;
    --secondary:  #2F3198;
    --tertiary:   #02AFF4;
    --accent:     #00A64D;
    --info:       #A1218D;
    --bg-body:    #F4F6FB;
    --bg-card:    #FFFFFF;
    --text-heading: #0F172A;
    --text-body:  #475569;
    --text-muted: #64748B;
    --border:     #E2E8F0;
    --border-sub: #F1F5F9;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    background: var(--bg-body);
    color: var(--text-body);
    overflow-x: hidden;
    line-height: 1.6;
}

.container { max-width: 1260px; margin: 0 auto; padding: 0 1.5rem; }

.gradient-text {
    background: linear-gradient(120deg, var(--tertiary) 0%, var(--secondary) 50%, var(--info) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* NAVBAR */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 1rem 1.5rem;
    transition: padding 0.4s ease;
}
.navbar.scrolled { padding: 0.5rem 1.5rem; }
.navbar-inner {
    max-width: 1260px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226,232,240,0.8);
    border-radius: 1.25rem; padding: 0.7rem 1.5rem;
    box-shadow: 0 8px 32px -8px rgba(30,24,96,0.12), 0 0 0 1px rgba(255,255,255,0.5) inset;
    transition: box-shadow 0.3s ease;
}
.navbar.scrolled .navbar-inner { box-shadow: 0 16px 48px -12px rgba(30,24,96,0.2); }
.brand-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

/* BUTTONS */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.35rem; border-radius: 0.875rem;
    font-size: 0.875rem; font-weight: 700; text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
    cursor: pointer; border: none; font-family: inherit;
    letter-spacing: -0.01em; white-space: nowrap;
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(30,24,96,0.28), 0 0 0 1px rgba(255,255,255,0.1) inset;
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 28px rgba(30,24,96,0.38); }
.btn-white { background: #fff; color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.btn-white:hover { background: #F8FAFC; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.btn-outline-white {
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.3);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.btn-lg { padding: 0.9rem 2rem; font-size: 1rem; }

/* HERO */
.hero {
    position: relative; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden; padding: 8rem 0 5rem;
    background: linear-gradient(145deg, #0d0b2e 0%, #1a1660 35%, #1E1860 60%, #1f2070 100%);
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(2,175,244,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(161,33,141,0.15) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 60% 80%, rgba(0,166,77,0.1) 0%, transparent 60%);
    pointer-events: none;
}
.hero-grid {
    position: absolute; inset: 0;
    background-size: 48px 48px;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 80%);
    animation: grid-drift 20s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes grid-drift {
    from { transform: translate(0,0); }
    to   { transform: translate(8px,12px); }
}
.orb { position: absolute; border-radius: 9999px; filter: blur(80px); pointer-events: none; animation: orb-float 8s ease-in-out infinite alternate; }
.orb-1 { width:480px;height:480px;top:-10%;left:-8%; background:radial-gradient(circle, rgba(2,175,244,0.22) 0%, transparent 70%); animation-delay:0s; }
.orb-2 { width:400px;height:400px;top:10%;right:-5%; background:radial-gradient(circle, rgba(161,33,141,0.18) 0%, transparent 70%); animation-delay:-3s; }
.orb-3 { width:320px;height:320px;bottom:5%;left:35%; background:radial-gradient(circle, rgba(0,166,77,0.12) 0%, transparent 70%); animation-delay:-6s; }
@keyframes orb-float {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(20px,-20px) scale(1.08); }
}
.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 1.5rem; }
.badge-live {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px); padding: 0.4rem 1.1rem; border-radius: 9999px;
    font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.85);
    margin-bottom: 2rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.pulse-dot {
    width:8px;height:8px;border-radius:9999px;background:var(--accent);
    box-shadow:0 0 10px var(--accent);
    animation: pulse-anim 2s ease-in-out infinite;
}
@keyframes pulse-anim { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(0.8);} }
.hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800; line-height: 1.12; letter-spacing: -0.04em;
    color: #fff; margin-bottom: 1.5rem;
}
.hero p.lead {
    font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,0.65);
    max-width: 700px; margin: 0 auto 2.5rem; line-height: 1.75; font-weight: 400;
}
.hero-cta { display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:5rem; }
.hero-stats { display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;position:relative;z-index:2; }
.hero-stat-pill {
    display:flex;align-items:center;gap:0.75rem;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    padding:1rem 1.5rem; border-radius:1rem; min-width:180px;
    transition:all 0.3s ease;
}
.hero-stat-pill:hover { background:rgba(255,255,255,0.12);transform:translateY(-3px);border-color:rgba(255,255,255,0.22); }
.hero-stat-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.hero-stat-info h3 { font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:800;color:#fff;line-height:1; }
.hero-stat-info p { font-size:0.75rem;color:rgba(255,255,255,0.55);font-weight:600;margin-top:0.2rem; }
.wave-separator { position:absolute;bottom:-2px;left:0;right:0;line-height:0; }
.wave-separator svg { display:block;width:100%; }

/* PREVIEW SECTION */
.preview-section { background:var(--bg-body);padding:5rem 0; }
.preview-section .container { display:flex;flex-direction:column;align-items:center; }
.section-eyebrow { font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:var(--secondary);margin-bottom:0.6rem;display:block; }
.section-heading { font-family:'Space Grotesk',sans-serif;font-size:clamp(1.75rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-0.03em;color:var(--primary);line-height:1.2; }
.section-sub { font-size:1.05rem;color:var(--text-muted);margin-top:0.75rem;max-width:600px; }
.section-header { text-align:center;margin-bottom:3.5rem; }
.browser-mock {
    width:100%;max-width:1000px;background:#fff;border-radius:1.5rem;
    box-shadow:0 32px 80px -16px rgba(30,24,96,0.18),0 0 0 1px rgba(226,232,240,0.8);
    overflow:hidden;
}
.browser-bar { background:#F1F5F9;padding:0.85rem 1.25rem;display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--border); }
.dots { display:flex;gap:6px; }
.dot { width:11px;height:11px;border-radius:9999px; }
.dot-r { background:#EF4444; } .dot-y { background:#F59E0B; } .dot-g { background:#22C55E; }
.url-bar { flex:1;background:#fff;border:1px solid var(--border);border-radius:9999px;padding:0.35rem 1rem;font-size:0.75rem;color:var(--text-muted);font-weight:500;display:flex;align-items:center;gap:0.4rem; }
.live-badge { display:inline-flex;align-items:center;gap:0.3rem;font-size:0.7rem;font-weight:700;background:rgba(0,166,77,0.12);color:var(--accent);padding:0.2rem 0.65rem;border-radius:9999px; }
.browser-body { padding:1.75rem;background:#FAFCFF;display:grid;grid-template-columns:2fr 1fr;gap:1.25rem; }
@media(max-width:700px){.browser-body{grid-template-columns:1fr;}}
.mock-card { background:#fff;border:1px solid var(--border);border-radius:1rem;padding:1.25rem; }
.mock-card-title { font-size:0.825rem;font-weight:800;color:var(--primary);display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem; }
.mock-card-sub { font-size:0.7rem;color:var(--text-muted);font-weight:500;margin-bottom:1rem; }
.metrics-row { display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;background:#F8FAFC;padding:0.6rem;border-radius:0.65rem;border:1px solid var(--border-sub);margin-bottom:1rem; }
.metric-cell { text-align:center; }
.metric-cell:not(:last-child) { border-right:1px solid var(--border); }
.metric-label { font-size:0.65rem;color:var(--text-muted);font-weight:600;display:block; }
.metric-val { font-size:0.82rem;font-weight:800; }
.chart-area { display:flex;align-items:flex-end;gap:0.75rem;height:100px; }
.bar-col { flex:1;display:flex;flex-direction:column;align-items:center;gap:0.4rem;height:100%;justify-content:flex-end; }
.bar-pair { display:flex;align-items:flex-end;gap:2px;width:100%;flex:1; }
.bar-fill { flex:1;border-radius:4px 4px 2px 2px; }
.fill-pri  { background:linear-gradient(180deg, var(--secondary), var(--primary)); }
.fill-info { background:linear-gradient(180deg, #D946EF, var(--info)); }
.bar-lbl { font-size:0.62rem;color:var(--text-muted);font-weight:600;text-align:center; }
.chart-legend { display:flex;justify-content:center;gap:1rem;margin-top:0.6rem;font-size:0.67rem;font-weight:600; }
.legend-dot { display:inline-flex;align-items:center;gap:0.3rem; }
.dot-swatch { width:8px;height:8px;border-radius:2px; }
.act-list { display:flex;flex-direction:column;gap:0.65rem; }
.act-item { display:flex;align-items:center;gap:0.65rem;padding:0.6rem 0.8rem;background:#F8FAFC;border-radius:0.6rem;border-left:3px solid var(--accent);border-top:1px solid var(--border-sub);border-right:1px solid var(--border-sub);border-bottom:1px solid var(--border-sub); }
.act-item.t { border-left-color:var(--tertiary); }
.act-item.i { border-left-color:var(--info); }
.act-title { font-size:0.78rem;font-weight:700;color:var(--text-heading); }
.act-sub   { font-size:0.67rem;color:var(--text-muted); }
.badge-sm { font-size:0.65rem;font-weight:700;padding:0.18rem 0.5rem;border-radius:5px;white-space:nowrap; }
.badge-accent { background:rgba(0,166,77,0.12);color:var(--accent); }
.badge-terti  { background:rgba(2,175,244,0.12);color:#0284C7; }
.badge-info   { background:rgba(161,33,141,0.12);color:var(--info); }

/* MODULES */
.modules-section { padding:5rem 0;background:var(--bg-body); }
.modules-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem; }
.module-card {
    background:#fff;border:1px solid var(--border);border-radius:1.5rem;
    padding:2rem 1.75rem;display:flex;flex-direction:column;justify-content:space-between;
    position:relative;overflow:hidden;
    transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow:0 4px 20px rgba(30,24,96,0.04);
}
.module-card::before {
    content:'';position:absolute;top:0;right:0;width:120px;height:120px;
    border-radius:0 1.5rem 0 9999px;opacity:0.06;transition:opacity 0.3s ease;
}
.module-card.mc-primary::before  { background:var(--primary); }
.module-card.mc-tertiary::before { background:var(--tertiary); }
.module-card.mc-info::before     { background:var(--info); }
.module-card:hover { transform:translateY(-8px);box-shadow:0 24px 56px rgba(30,24,96,0.12);border-color:#CBD5E1; }
.module-card:hover::before { opacity:0.12; }
.module-icon { width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem; }
.module-card h3 { font-size:1.2rem;font-weight:800;color:var(--text-heading);margin-bottom:0.65rem;letter-spacing:-0.02em; }
.module-card > div > p { font-size:0.875rem;color:var(--text-body);line-height:1.7;margin-bottom:1.35rem; }
.features-list { list-style:none;display:flex;flex-direction:column;gap:0.6rem;margin-bottom:1.75rem; }
.features-list li { display:flex;align-items:center;gap:0.5rem;font-size:0.84rem;color:var(--text-body);font-weight:500; }
.features-list li svg { color:var(--accent);flex-shrink:0; }
.btn-module { display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.7rem 1rem;border-radius:0.875rem;border:1.5px solid var(--border);background:#fff;color:var(--primary);font-size:0.875rem;font-weight:700;text-decoration:none;transition:all 0.25s ease;font-family:inherit; }
.btn-module:hover { background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px); }

/* PILLARS */
.pillars-section { padding:5rem 0;background:#fff; }
.pillars-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem; }
.pillar-card { padding:2rem;border-radius:1.25rem;border:1px solid var(--border);position:relative;overflow:hidden;transition:all 0.3s ease; }
.pillar-card:hover { transform:translateY(-5px);box-shadow:0 16px 40px rgba(30,24,96,0.08); }
.pillar-number { position:absolute;top:1.25rem;right:1.5rem;font-family:'Space Grotesk',sans-serif;font-size:3.5rem;font-weight:800;opacity:0.06;color:var(--primary);line-height:1;pointer-events:none; }
.pillar-icon { width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem; }
.pillar-card h4 { font-size:1.1rem;font-weight:800;color:var(--text-heading);margin-bottom:0.6rem;letter-spacing:-0.02em; }
.pillar-card p { font-size:0.875rem;color:var(--text-muted);line-height:1.7; }

/* CTA */
.cta-section { padding:5rem 0;background:var(--bg-body); }
.cta-banner { position:relative;overflow:hidden;border-radius:2rem;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 55%,#1a2480 100%);padding:4rem 2rem;text-align:center;box-shadow:0 24px 60px rgba(30,24,96,0.3); }
.cta-banner::before { content:'';position:absolute;top:-80px;left:-80px;width:350px;height:350px;background:radial-gradient(circle, rgba(2,175,244,0.3) 0%, transparent 70%);filter:blur(60px);pointer-events:none; }
.cta-banner::after  { content:'';position:absolute;bottom:-80px;right:-80px;width:350px;height:350px;background:radial-gradient(circle, rgba(161,33,141,0.22) 0%, transparent 70%);filter:blur(60px);pointer-events:none; }
.cta-banner-inner { position:relative;z-index:1; }
.cta-banner h2 { font-family:'Space Grotesk',sans-serif;font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:800;color:#fff;margin-bottom:1rem;letter-spacing:-0.03em; }
.cta-banner p { font-size:1.05rem;color:rgba(255,255,255,0.7);max-width:620px;margin:0 auto 2.25rem;line-height:1.7; }
.cta-actions { display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap; }

/* FOOTER */
footer { background:linear-gradient(180deg,#0d0b2e 0%,#1E1860 100%);padding:3rem 0 2.5rem;text-align:center;color:rgba(255,255,255,0.45);font-size:0.875rem; }
.footer-logo-wrap { display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem; }
.footer-divider { width:48px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);margin:1.25rem auto; }

/* RESPONSIVE */
@media(max-width:640px){
    .hero h1 { letter-spacing:-0.03em; }
    .hero-cta { flex-direction:column;align-items:stretch; }
    .hero-cta .btn { justify-content:center; }
    .cta-banner { padding:2.5rem 1.25rem;border-radius:1.25rem; }
    .pillars-section,.modules-section,.preview-section,.cta-section { padding:3rem 0; }
}

/* REVEAL ANIMATION */
.reveal { opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal.visible { opacity:1;transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }