:root {
    --sn-primary: #0d6efd;
    --sn-primary-dark: #0a58ca;
    --sn-purple: #6610f2;
    --sn-dark: #0b1220;
    --sn-ink: #1a2236;
    --sn-muted: #6b7280;
    --sn-soft: #f4f6fb;
}

* { box-sizing: border-box; }
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--sn-ink);
    background: #fff;
    overflow-x: hidden;
}

/* ===== NAVBAR ===== */
#mainNav {
    padding: 1rem 0;
    transition: all .3s ease;
    background: transparent;
}
#mainNav.scrolled {
    background: rgba(255,255,255,.95);
    box-shadow: 0 8px 30px rgba(0,0,0,.07);
    backdrop-filter: blur(10px);
    padding: .6rem 0;
}
.navbar-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.brand-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--sn-primary), var(--sn-purple));
    color: #fff; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem; box-shadow: 0 6px 18px rgba(13,110,253,.35);
}
.brand-text { font-size: 1.25rem; color: #fff; }
#mainNav.scrolled .brand-text,
#mainNav.scrolled .nav-link { color: var(--sn-ink); }
.navbar-toggler { border-color: rgba(255,255,255,.4); }
#mainNav.scrolled .navbar-toggler { border-color: #dee2e6; }
.nav-link { color: rgba(255,255,255,.9); font-weight: 600; margin: 0 .25rem; }
.nav-link:hover { color: #fff; }
#mainNav.scrolled .nav-link:hover { color: var(--sn-primary); }
.navbar .btn-primary { border-radius: 10px; font-weight: 600; }

/* ===== HERO ===== */
.hero {
    position: relative;
    background: linear-gradient(135deg, var(--sn-dark) 0%, #142a52 55%, #1d3a8a 100%);
    color: #fff;
    padding: 9rem 0 11rem;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(102,16,242,.35), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(13,110,253,.4), transparent 45%);
}
.badge-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: .4rem 1rem; border-radius: 50px;
    font-size: .85rem; font-weight: 600; margin-bottom: 1.2rem;
}
.hero h1 { font-size: 3.4rem; font-weight: 800; line-height: 1.12; margin-bottom: 1.2rem; }
.text-gradient {
    background: linear-gradient(90deg, #60a5fa, #c4b5fd);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { color: rgba(255,255,255,.82); font-size: 1.15rem; max-width: 540px; }
.hero-actions { margin: 2rem 0; }
.hero .btn-primary {
    background: var(--sn-primary); border: none; font-weight: 600;
    box-shadow: 0 10px 30px rgba(13,110,253,.4);
}
.hero .btn-outline-light { font-weight: 600; border-width: 2px; }
.hero-stats { display: flex; gap: 2.5rem; margin-top: 2.5rem; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 2rem; font-weight: 800; color: #fff; }
.hero-stats span { color: rgba(255,255,255,.7); font-size: .9rem; }

/* Hero dashboard mockup */
.hero-card-stack { position: relative; min-height: 440px; }
.hero-dashboard {
    background: #fff; border-radius: 20px; padding: 1.6rem;
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
    color: var(--sn-ink); position: relative; z-index: 2;
    animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.hd-head div { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.dot-live {
    width: 9px; height: 9px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: pulse 1.8s infinite;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 70%{box-shadow:0 0 0 10px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
.hd-kpi { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.hd-kpi > div { display: flex; flex-direction: column; gap: .2rem; }
.hd-kpi span { font-size: .78rem; color: var(--sn-muted); }
.hd-kpi strong { font-size: 1.4rem; }
.hd-kpi .bar { height: 6px; background: #eef0f5; border-radius: 50px; overflow: hidden; margin-top: .25rem; }
.hd-kpi .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sn-primary), var(--sn-purple)); border-radius: 50px; }
.hd-chart { margin-top: 1.4rem; }
.chart-bars { display: flex; align-items: flex-end; gap: .5rem; height: 90px; }
.chart-bars i { flex: 1; background: linear-gradient(180deg, var(--sn-primary), #93c5fd); border-radius: 6px 6px 0 0; display: block; }
.hd-chart small { color: var(--sn-muted); display: block; margin-top: .4rem; }
.float-card {
    position: absolute; background: #fff; border-radius: 16px; padding: 1rem 1.2rem;
    display: flex; align-items: center; gap: .8rem;
    box-shadow: 0 18px 50px rgba(0,0,0,.3); z-index: 3; color: var(--sn-ink);
}
.card-stats { top: -10px; right: 10px; animation: floaty 6s ease-in-out infinite; }
.card-queue { bottom: -10px; left: -10px; animation: floaty 7s ease-in-out infinite .5s; }
.float-card .fc-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.float-card strong { display: block; font-size: .8rem; color: var(--sn-muted); }
.float-card span { font-weight: 800; }
.hero-wave {
    position: absolute; bottom: -1px; left: 0; right: 0; height: 100px;
    background: #fff; clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
}

/* ===== SECTIONS ===== */
.section { padding: 6rem 0; }
.bg-light { background: var(--sn-soft) !important; }
.bg-dark { background: var(--sn-dark) !important; }
.section-head { max-width: 720px; margin-bottom: 2.5rem; }
.eyebrow {
    display: inline-block; text-transform: uppercase; letter-spacing: .12em;
    font-size: .8rem; font-weight: 700; color: var(--sn-primary); margin-bottom: .6rem;
}
.section-head h2 { font-size: 2.3rem; font-weight: 800; }
.section-head p { color: var(--sn-muted); font-size: 1.05rem; }

/* Feature cards */
.feature-card {
    background: #fff; border: 1px solid #eef0f5; border-radius: 18px;
    padding: 1.8rem; height: 100%; transition: all .3s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(13,110,253,.12); border-color: transparent; }
.feature-card .fc-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1.1rem; }
.feature-card h3 { font-size: 1.2rem; font-weight: 700; }
.feature-card p { color: var(--sn-muted); margin: 0; font-size: .95rem; }

/* Modules grid */
.modules-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.module-item {
    background: #fff; border: 1px solid #eef0f5; border-radius: 14px;
    padding: 1.2rem 1.4rem; display: flex; align-items: center; gap: .8rem;
    font-weight: 600; transition: all .25s ease;
}
.module-item:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.module-item i { font-size: 1.5rem; }

/* Flow */
.flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem; }
.flow-step {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    background: #fff; border: 2px solid #eef0f5; border-radius: 16px;
    padding: 1.4rem 1.2rem; min-width: 130px; position: relative;
}
.fs-num {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--sn-primary); color: #fff; width: 28px; height: 28px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
}
.flow-step i { font-size: 2rem; color: var(--sn-primary); }
.flow-step span { font-weight: 600; font-size: .92rem; }
.flow-line { width: 40px; height: 3px; background: linear-gradient(90deg, var(--sn-primary), var(--sn-purple)); border-radius: 3px; }

/* Tech */
.tech-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.tech-list li { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; color: rgba(255,255,255,.85); }
.tech-grid {
    display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem;
}
.tech-grid > div {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px; padding: 1.6rem; text-align: center; transition: all .3s;
}
.tech-grid > div:hover { background: rgba(255,255,255,.12); transform: translateY(-4px); }
.tech-grid i { font-size: 2.2rem; display: block; margin-bottom: .6rem; }
.tech-grid span { font-weight: 600; color: #fff; }

/* CTA */
.cta {
    background: linear-gradient(135deg, var(--sn-primary), var(--sn-purple));
    color: #fff; padding: 5rem 0;
}
.cta h2 { font-size: 2.3rem; font-weight: 800; }

/* Footer */
.footer { background: var(--sn-dark); color: rgba(255,255,255,.7); padding: 4rem 0 2rem; }
.footer .footer-brand { display: flex; align-items: center; gap: .6rem; font-size: 1.3rem; }
.footer h6 { font-weight: 700; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .5rem; }

@media (max-width: 768px) {
    .hero { padding: 7rem 0 9rem; }
    .hero h1 { font-size: 2.2rem; }
    .section { padding: 4rem 0; }
    .section-head h2 { font-size: 1.7rem; }
    .hero-stats { gap: 1.5rem; }
    #mainNav { background: rgba(11,18,32,.85); }
    .float-card { display: none; }
}