:root{--navy:#00265d;--blue:#278fee;--sky:#64b5f6;--ink:#10243f;--muted:#63758b;--pale:#f2f8ff}
    html{scroll-behavior:smooth;scroll-padding-top:88px}
    body{font-family:'DM Sans',sans-serif;color:var(--ink);overflow-x:hidden}
    h1,h2,h3,h4,.navbar-brand{font-family:Muli,sans-serif;letter-spacing:-.045em}
    a{text-decoration:none} iconify-icon{vertical-align:-.13em}
    .navbar{background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid #e9f0f7;padding:14px 0}
    .navbar-brand img{width:49px;height:49px;object-fit:contain}
    .navbar-brand span{font-weight:800;letter-spacing:-.045em;font-size:2rem;color:var(--navy)}
    .nav-link{font-weight:700;color:#52647a!important;margin-left:18px}.nav-link:hover{color:var(--blue)!important}
    .btn-brand{background:var(--navy);border:1px solid var(--navy);color:white;border-radius:13px;font-weight:700;padding:13px 22px;transition:.2s}
    .btn-brand:hover{background:#064080;border-color:#064080;color:white;transform:translateY(-2px)}
    .btn-outline-brand{border:1px solid #b9d4ee;border-radius:13px;font-weight:700;color:var(--navy);padding:13px 22px}
    .btn-outline-brand:hover{background:var(--pale);color:var(--navy);border-color:var(--sky)}
    .hero{background:radial-gradient(circle at 35% 22%,#d7edff 0,transparent 37%),linear-gradient(150deg,#f8fbff 0%,#eef7ff 100%);padding:100px 0 110px;position:relative;overflow:hidden}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;color:#1475c8;background:#e3f2ff;border:1px solid #cce7ff;padding:8px 13px;border-radius:50px;font-size:.79rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
    .hero h1{font-weight:800;font-size:clamp(3.1rem,6vw,5.8rem);line-height:1.09;margin:24px 0}
    .accent{color:#258fea}.lead-copy{color:#61758d;font-size:1.16rem;line-height:1.8;max-width:530px}
    .hero-notes{color:#62768e;font-size:.87rem;font-weight:600;display:flex;gap:19px;flex-wrap:wrap;margin-top:25px}
    .hero-notes iconify-icon{color:#248de8;margin-right:5px}
        .avatar{height:37px;width:37px;border-radius:50%;display:grid;place-items:center;background:#d8edff;color:#1976cb;font-weight:800;font-size:.8rem}
    .bubble{padding:12px 15px;border-radius:16px;max-width:84%;font-size:.84rem;line-height:1.5;margin:14px 0;box-shadow:0 2px 9px rgba(0,38,93,.03)}
    .bubble.in{background:#f0f4f8;border-bottom-left-radius:5px}.bubble.out{background:#228fe9;color:white;margin-left:auto;border-bottom-right-radius:5px}
    .bubble small{display:block;opacity:.62;text-align:right;font-size:.63rem;margin-top:5px}
    .chat-compose{border:1px solid #e6edf4;border-radius:25px;color:#9aabba;padding:11px 14px;font-size:.8rem;display:flex;justify-content:space-between;margin-top:23px}
    .float-note{position:absolute;z-index:2;background:white;border:1px solid #e1edf9;box-shadow:0 15px 35px #12385b17;border-radius:16px;padding:13px 17px;font-size:.83rem;font-weight:800;display:flex;align-items:center;gap:9px}
    .float-note iconify-icon{font-size:1.3rem;color:#238ce9}.note-a{left:-40px;top:25%}.note-b{right:-40px;bottom:16%}
    .section{padding:100px 0}.section-title{font-weight:800;font-size:clamp(2rem,4vw,3.15rem);line-height:1.17}.section-copy{color:var(--muted);line-height:1.8;font-size:1.05rem}
    .feature-card{height:100%;padding:31px;border:1px solid #e4edf7;border-radius:23px;background:#fff;transition:transform .2s,box-shadow .2s}
    .feature-card:hover{transform:translateY(-5px);box-shadow:0 17px 45px #0a3d7110}
    .feature-icon{width:54px;height:54px;border-radius:17px;background:#e9f5ff;color:#248be7;display:grid;place-items:center;font-size:1.65rem;margin-bottom:23px}
    .feature-card h3{font-size:1.12rem;font-weight:800;letter-spacing:-.025em}.feature-card p{color:var(--muted);line-height:1.7;font-size:.94rem;margin:12px 0 0}
    .light-section{background:#f5f9fe}.image-panel{height:440px;overflow:hidden;border-radius:28px;position:relative;background:#dceafa}
    .image-panel img{width:100%;height:100%;object-fit:cover}.image-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,38,93,.35),transparent 60%)}
    .image-label{position:absolute;bottom:22px;left:24px;color:white;z-index:1;font-weight:800;font-size:1.05rem}
    .check-item{display:flex;align-items:flex-start;gap:13px;margin:22px 0;color:#465b72;line-height:1.6}.check-item iconify-icon{color:#238de8;font-size:1.35rem;flex-shrink:0;margin-top:2px}
    .statement{background:var(--navy);color:white;border-radius:30px;padding:65px 7%;position:relative;overflow:hidden}
    .statement:after{content:"";position:absolute;width:380px;height:380px;border:65px solid #ffffff0b;border-radius:50%;right:-90px;top:-160px;pointer-events:none}
    .statement h2{font-size:clamp(2rem,4vw,3.4rem);font-weight:800;line-height:1.17}.statement p{color:#c4d9f0;line-height:1.8;}
    .step-number{width:44px;height:44px;border:1px solid #badbf9;color:#177dce;background:#eaf5ff;border-radius:14px;display:grid;place-items:center;font-weight:800;margin-bottom:20px}
    .step h3{font-size:1.1rem;font-weight:800}.step p{color:var(--muted);line-height:1.7;font-size:.95rem}
    .faq .accordion-item{border:1px solid #e4edf7;border-radius:15px!important;margin-bottom:12px;overflow:hidden}
    .faq .accordion-button{font-weight:800;color:var(--ink);padding:20px 23px;box-shadow:none!important}.faq .accordion-button:not(.collapsed){background:#f2f8ff;color:var(--navy)}
    .faq .accordion-body{color:var(--muted);line-height:1.7;padding:0 23px 22px}
    footer{background:#071c39;color:#b7c9dc;padding:55px 0 30px}footer a{color:#b7c9dc}footer a:hover{color:white}footer .foot-logo{height:48px;width:48px;object-fit:contain;background:white;border-radius:13px;padding:5px}footer .brand-name{font-family:Muli,sans-serif;color:white;font-size:1.25rem;font-weight:800}
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s,transform .55s}.reveal.visible{opacity:1;transform:none}
    @media(max-width:991px){.hero{padding:70px 0 85px}.phone-wrap{margin-top:75px}.note-a{left:0}.note-b{right:0}.section{padding:75px 0}}
    @media(max-width:575px){.phone{transform:none}.float-note{font-size:.73rem;padding:9px}.note-a{left:-4px;top:20%}.note-b{right:-5px;bottom:12%}.image-panel{height:320px}.statement{padding:40px 26px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation-duration:.01ms!important}}

    .hero-app-image {
    max-width: 560px;
    margin: 0 auto;
}

.hero-app-image img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

@media (max-width: 991px) {
    .hero-app-image {
        max-width: 440px;
        margin: 20px auto 0;
    }
}

@media (max-width: 575px) {
    .hero-app-image {
        max-width: 360px;
    }
}

/* How It Works */

.step {
    position: relative;
}

.step-number {
    margin-bottom: 20px;
}

.step-image {
    width: 100%;
    aspect-ratio: 4 / 4;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid #e0eaf5;
    background: #fff;
    margin-bottom: 25px;
    box-shadow: 0 8px 25px rgba(0, 38, 93, 0.045);
}

.step-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .35s ease;
}

.step:hover .step-image img {
    transform: scale(1.035);
}

.step h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.step p {
    color: var(--muted);
    line-height: 1.7;
    font-size: .95rem;
    margin-bottom: 0;
}

/* Mobile */

@media (max-width: 767px) {

    .step {
        max-width: 480px;
        margin: 0 auto;
    }

    .step-image {
        aspect-ratio: 4 / 3;
    }

}