:root{
    --bg:#f4f7fc;
    --panel:#ffffff;
    --panel-soft:#eef4ff;
    --line:#d8e3f3;
    --text:#142033;
    --muted:#617087;
    --primary:#1369ea;
    --primary-deep:#133371;
    --accent:#2fb5c8;
    --accent-soft:#e2f6f9;
    --success:#2aa85b;
    --shadow:0 24px 60px rgba(20,32,51,.10);
    --shadow-soft:0 16px 40px rgba(20,32,51,.08);
    --container:min(1200px, calc(100% - 40px));
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(19,105,234,.10), transparent 26%),
        radial-gradient(circle at top right, rgba(47,181,200,.14), transparent 28%),
        var(--bg);
}

img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

.container{
    width:var(--container);
    margin:0 auto;
}

.site-header{
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter:blur(18px);
    background:rgba(244,247,252,.86);
    border-bottom:1px solid rgba(216,227,243,.8);
}

.topbar{
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.brand{
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

.brand img{
    width:min(250px, 100%);
    height:auto;
}

.nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    flex:1 1 auto;
    flex-wrap:wrap;
}

.nav a{
    color:var(--muted);
    font-weight:600;
    font-size:.95rem;
}

.nav a:hover{color:var(--primary)}

.header-actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex:0 0 auto;
}

.btn{
    min-height:50px;
    padding:0 22px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.96rem;
    transition:.2s ease;
    border:1px solid transparent;
}

.btn-primary{
    background:linear-gradient(135deg, var(--primary), var(--primary-deep));
    color:#fff;
    box-shadow:0 18px 32px rgba(19,105,234,.22);
}

.btn-primary:hover{transform:translateY(-1px)}

.btn-secondary{
    background:#fff;
    color:var(--primary);
    border-color:rgba(19,105,234,.16);
}

.hero{
    padding:72px 0 34px;
}

.hero-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(420px, .95fr);
    gap:48px;
    align-items:center;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    padding:0 16px;
    border-radius:999px;
    background:rgba(19,105,234,.08);
    color:var(--primary);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.eyebrow::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 0 6px rgba(42,168,91,.12);
}

.hero h1{
    margin:20px 0 18px;
    font-family:Manrope,Inter,sans-serif;
    font-size:clamp(2.8rem, 5vw, 4.8rem);
    line-height:.96;
    letter-spacing:-.05em;
}

.hero p{
    margin:0;
    max-width:640px;
    color:var(--muted);
    font-size:1.08rem;
    line-height:1.78;
}

.hero-actions{
    margin-top:30px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.hero-highlights{
    list-style:none;
    padding:0;
    margin:34px 0 0;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.hero-highlights li{
    padding:18px 18px 16px;
    border-radius:22px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(216,227,243,.9);
    box-shadow:var(--shadow-soft);
}

.hero-highlights strong{
    display:block;
    margin-bottom:8px;
    font-size:.95rem;
}

.hero-highlights span{
    display:block;
    color:var(--muted);
    line-height:1.55;
    font-size:.9rem;
}

.hero-visual{
    position:relative;
}

.visual-shell{
    position:relative;
    padding:28px;
    border-radius:32px;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,255,.98));
    border:1px solid rgba(216,227,243,.9);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.visual-shell::before,
.visual-shell::after{
    content:"";
    position:absolute;
    border-radius:50%;
}

.visual-shell::before{
    inset:-80px auto auto -40px;
    width:220px;
    height:220px;
    background:radial-gradient(circle, rgba(19,105,234,.16), transparent 68%);
}

.visual-shell::after{
    right:-90px;
    bottom:-90px;
    width:260px;
    height:260px;
    background:radial-gradient(circle, rgba(47,181,200,.18), transparent 70%);
}

.visual-header,
.visual-brand,
.visual-grid{
    position:relative;
    z-index:1;
}

.visual-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
}

.visual-header img{
    width:76px;
    height:76px;
    object-fit:contain;
    flex:0 0 auto;
}

.visual-header strong{
    display:block;
    font-size:1.06rem;
}

.visual-header span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:.92rem;
}

.visual-brand{
    padding:22px;
    border-radius:24px;
    background:#fff;
    border:1px solid rgba(216,227,243,.94);
}

.visual-brand img{
    width:100%;
    max-width:420px;
    margin:0 auto;
    filter:drop-shadow(0 18px 32px rgba(19,51,113,.10));
}

.visual-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.visual-stat{
    min-height:140px;
    padding:18px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(216,227,243,.94);
}

.visual-stat strong{
    display:block;
    margin:8px 0 10px;
    font-size:1rem;
    line-height:1.3;
}

.visual-stat p{
    margin:0;
    color:var(--muted);
    font-size:.92rem;
    line-height:1.6;
}

.stat-kicker,
.card-label{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.stat-kicker{
    min-height:28px;
    padding:0 10px;
    background:var(--panel-soft);
    color:var(--primary);
}

.floating-note{
    position:absolute;
    right:-14px;
    bottom:26px;
    width:min(280px, 78%);
    padding:18px 20px;
    border-radius:22px;
    background:linear-gradient(135deg, rgba(19,105,234,.96), rgba(47,181,200,.94));
    color:#fff;
    box-shadow:0 24px 36px rgba(19,105,234,.26);
}

.floating-note strong{
    display:block;
    margin-bottom:8px;
    font-size:1rem;
}

.floating-note p{
    margin:0;
    font-size:.92rem;
    line-height:1.6;
    color:rgba(255,255,255,.92);
}

.section{
    padding:96px 0;
}

.section-soft{
    background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(238,244,255,.82));
    border-top:1px solid rgba(216,227,243,.7);
    border-bottom:1px solid rgba(216,227,243,.7);
}

.section-heading{
    max-width:760px;
    margin-bottom:36px;
}

.section-heading h2{
    margin:16px 0 14px;
    font-family:Manrope,Inter,sans-serif;
    font-size:clamp(2rem, 3.4vw, 3.3rem);
    line-height:1.02;
    letter-spacing:-.04em;
}

.section-heading p{
    margin:0;
    color:var(--muted);
    font-size:1.02rem;
    line-height:1.75;
}

.grid-three,
.module-grid,
.benefit-grid,
.segment-grid,
.workflow{
    display:grid;
    gap:22px;
}

.grid-three{grid-template-columns:repeat(3, minmax(0, 1fr))}
.module-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
.benefit-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
.segment-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
.workflow{grid-template-columns:repeat(3, minmax(0, 1fr))}

.card,
.step{
    padding:28px;
    border-radius:28px;
    background:var(--panel);
    border:1px solid rgba(216,227,243,.9);
    box-shadow:var(--shadow-soft);
}

.card-label{
    min-height:30px;
    padding:0 12px;
    background:var(--accent-soft);
    color:#0d6e7c;
}

.card h3,
.step h3{
    margin:18px 0 12px;
    font-size:1.22rem;
    line-height:1.35;
}

.card p,
.step p{
    margin:0;
    color:var(--muted);
    line-height:1.72;
}

.module-card{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.module-card ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:10px;
}

.module-card li{
    min-height:42px;
    padding:0 14px;
    display:flex;
    align-items:center;
    border-radius:14px;
    background:rgba(19,105,234,.06);
    color:var(--primary-deep);
    font-weight:600;
    font-size:.92rem;
}

.benefit-card::before,
.segment-card::before{
    content:"";
    display:block;
    width:46px;
    height:46px;
    margin-bottom:18px;
    border-radius:14px;
    background:linear-gradient(135deg, rgba(19,105,234,.16), rgba(47,181,200,.22));
}

.step-number{
    width:52px;
    height:52px;
    margin-bottom:20px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--primary), var(--primary-deep));
    color:#fff;
    font-weight:800;
    font-size:1.12rem;
}

.cta-section{
    padding:18px 0 96px;
}

.cta-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    padding:40px;
    border-radius:32px;
    background:linear-gradient(135deg, #133371, #1369ea 62%, #2fb5c8);
    color:#fff;
    box-shadow:0 28px 60px rgba(19,51,113,.24);
}

.cta-panel h2{
    margin:16px 0 14px;
    font-family:Manrope,Inter,sans-serif;
    font-size:clamp(2rem, 3vw, 3rem);
    line-height:1.02;
    letter-spacing:-.04em;
}

.cta-panel p{
    max-width:680px;
    margin:0;
    color:rgba(255,255,255,.86);
    line-height:1.72;
}

.cta-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.cta-panel .btn-secondary{
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.10);
    color:#fff;
}

.site-footer{
    padding:68px 0 28px;
    background:#0d1a3a;
    color:#eef4ff;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.3fr .8fr .8fr .8fr;
    gap:28px;
    padding-bottom:30px;
}

.footer-brand img{
    width:min(280px, 100%);
    margin-bottom:18px;
    padding:14px 18px;
    border-radius:18px;
    background:#fff;
}

.footer-brand p,
.footer-column a,
.footer-column li{
    color:rgba(238,244,255,.78);
    line-height:1.75;
}

.footer-column h4{
    margin:0 0 14px;
    font-size:1rem;
}

.footer-column ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:10px;
}

.footer-bottom{
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    color:rgba(238,244,255,.72);
    font-size:.92rem;
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

@media (max-width: 1120px){
    .hero-grid,
    .module-grid,
    .workflow,
    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .hero-grid{align-items:start}
    .nav{display:none}
    .cta-panel{flex-direction:column;align-items:flex-start}
}

@media (max-width: 840px){
    .topbar{
        min-height:auto;
        padding:18px 0;
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-grid,
    .grid-three,
    .module-grid,
    .benefit-grid,
    .workflow,
    .segment-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

    .header-actions,
    .hero-actions,
    .cta-actions{
        width:100%;
    }

    .btn{width:100%}
    .hero-highlights,
    .visual-grid{
        grid-template-columns:1fr;
    }

    .section{padding:74px 0}
    .hero{padding-top:42px}

    .floating-note{
        position:static;
        width:100%;
        margin-top:16px;
    }

    .cta-panel{padding:30px 24px}
}