:root{
    --primary:#5b3df5;
    --primary-dark:#3f27ce;
    --ink:#151828;
    --muted:#6f7485;
    --bg:#f7f8fc;
    --card:#ffffff;
    --line:#e8eaf2;
    --success:#13a66a;
    --shadow:0 18px 45px rgba(34,38,68,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:#fff;
}
a{text-decoration:none;color:inherit}
button,select,input{font:inherit}
.container{width:min(1180px,92%);margin:0 auto}
.topbar{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(232,234,242,.9)
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-size:21px}
.brand-mark{
    width:42px;height:42px;border-radius:14px;
    display:grid;place-items:center;color:#fff;font-weight:800;
    background:linear-gradient(135deg,var(--primary),#8b5cf6);
    box-shadow:0 10px 25px rgba(91,61,245,.25)
}
.brand small{color:var(--primary);font-weight:800}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:650}
.nav-links a:hover{color:var(--primary)}
.partner-link{
    padding:12px 17px;border-radius:12px;
    background:#f0edff;color:var(--primary)!important
}
.menu-btn{display:none;border:0;background:transparent;font-size:27px}
.mobile-menu{display:none;padding:10px 4%;background:#fff;border-top:1px solid var(--line)}
.mobile-menu a{display:block;padding:12px 0;font-weight:650}

.hero{
    min-height:700px;
    display:flex;align-items:center;
    position:relative;overflow:hidden;
    background:
      radial-gradient(circle at 85% 20%,rgba(111,79,255,.14),transparent 33%),
      linear-gradient(180deg,#fcfbff 0%,#fff 100%)
}
.hero-grid{
    display:grid;grid-template-columns:1.12fr .88fr;
    align-items:center;gap:55px;padding:70px 0
}
.eyebrow{
    display:inline-block;
    text-transform:uppercase;letter-spacing:.12em;
    font-size:12px;font-weight:800;color:var(--primary);
    margin-bottom:14px
}
.hero h1{
    margin:0;
    font-size:clamp(42px,5.2vw,72px);
    line-height:1.03;letter-spacing:-.055em
}
.hero h1 span{
    background:linear-gradient(90deg,var(--primary),#8b5cf6);
    -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-copy>p{
    max-width:690px;
    font-size:18px;line-height:1.7;color:var(--muted);
    margin:24px 0 28px
}
.search-card{
    background:#fff;border:1px solid var(--line);border-radius:22px;
    padding:14px;display:grid;grid-template-columns:1.25fr 1fr auto;
    gap:10px;box-shadow:var(--shadow)
}
.field{padding:4px 10px}
.field label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}
.field select{
    width:100%;border:0;outline:0;background:transparent;color:#42485a;
    padding:4px 0
}
.primary-btn,.white-btn{
    border:0;border-radius:14px;padding:17px 22px;
    font-weight:850;cursor:pointer;
    transition:.2s transform,.2s box-shadow
}
.primary-btn{
    background:linear-gradient(135deg,var(--primary),#7c4dff);
    color:#fff;box-shadow:0 12px 26px rgba(91,61,245,.25)
}
.primary-btn:hover,.white-btn:hover{transform:translateY(-2px)}
.trust-row{
    display:flex;flex-wrap:wrap;gap:20px;
    color:#555b6e;font-size:13px;font-weight:700;margin-top:20px
}
.trust-row span::first-letter{color:var(--success)}
.hero-panel{position:relative;min-height:510px;display:grid;place-items:center}
.phone-mockup{
    width:285px;height:540px;border:10px solid #151828;border-radius:42px;
    background:#fff;box-shadow:0 30px 70px rgba(35,30,79,.22);
    overflow:hidden;position:relative;transform:rotate(3deg)
}
.phone-top{width:105px;height:24px;background:#151828;border-radius:0 0 16px 16px;margin:0 auto}
.phone-content{padding:24px}
.phone-brand{font-weight:850;color:var(--primary);margin-bottom:28px}
.phone-content h3{font-size:26px;margin:0 0 18px}
.phone-search{
    border:1px solid var(--line);border-radius:13px;
    padding:12px;color:#8a8fa0;font-size:13px
}
.phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.phone-grid span{
    min-height:78px;border-radius:18px;background:#f7f5ff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;font-size:22px
}
.phone-grid small{font-size:11px;font-weight:700;color:#555b6e}
.phone-cta{
    background:linear-gradient(135deg,var(--primary),#7c4dff);
    color:#fff;border-radius:14px;text-align:center;padding:13px;
    font-size:13px;font-weight:850
}
.floating-card{
    position:absolute;z-index:3;background:#fff;border:1px solid var(--line);
    box-shadow:var(--shadow);border-radius:18px;padding:14px 16px;
    display:flex;align-items:center;gap:12px;min-width:220px
}
.floating-card strong,.floating-card small{display:block}
.floating-card small{color:var(--muted);margin-top:4px;font-size:12px}
.mini-icon{
    width:42px;height:42px;background:#f2efff;border-radius:13px;
    display:grid;place-items:center
}
.card-one{left:0;top:95px}
.card-two{right:-5px;bottom:80px}
.hero-glow{position:absolute;border-radius:50%;filter:blur(4px)}
.hero-glow-one{width:240px;height:240px;background:rgba(91,61,245,.08);right:-50px;top:80px}
.hero-glow-two{width:180px;height:180px;background:rgba(12,177,114,.07);left:-40px;bottom:0}

.stats-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stats div{padding:25px;text-align:center;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats strong{display:block;font-size:21px;margin-bottom:4px}
.stats span{font-size:13px;color:var(--muted)}

.section{padding:90px 0}
.soft{background:var(--bg)}
.section-heading{
    display:flex;align-items:end;justify-content:space-between;
    gap:20px;margin-bottom:34px
}
.section h2,.center-heading h2{
    margin:0;font-size:clamp(30px,4vw,45px);letter-spacing:-.035em
}
.text-link{color:var(--primary);font-weight:800;font-size:14px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.service-card{
    background:#fff;border:1px solid var(--line);border-radius:20px;
    padding:24px;min-height:155px;transition:.22s;
    box-shadow:0 6px 20px rgba(34,38,68,.035)
}
.service-card:hover{
    transform:translateY(-5px);border-color:#d9d2ff;
    box-shadow:var(--shadow)
}
.service-icon{
    width:48px;height:48px;border-radius:15px;background:#f5f2ff;
    display:grid;place-items:center;font-size:23px;margin-bottom:20px
}
.service-card strong,.service-card small{display:block}
.service-card small{margin-top:7px;color:var(--muted);font-size:12px}
.center-heading{text-align:center;max-width:680px;margin:0 auto 45px}
.center-heading p{color:var(--muted);font-size:16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step-card{
    background:#fff;border:1px solid var(--line);border-radius:24px;
    padding:30px;position:relative
}
.step-no{
    position:absolute;right:20px;top:16px;
    font-size:34px;font-weight:900;color:#eeeafd
}
.step-icon{font-size:34px;margin-bottom:24px}
.step-card h3{font-size:20px;margin:0 0 10px}
.step-card p{color:var(--muted);line-height:1.6;margin:0}

.business-section{padding-top:30px}
.business-box{
    border-radius:32px;padding:58px;
    color:#fff;display:grid;grid-template-columns:1.15fr .85fr;
    gap:50px;align-items:center;
    background:
      radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 30%),
      linear-gradient(135deg,#4029cf,#7148ff)
}
.eyebrow.light{color:#ddd6ff}
.business-box h2{font-size:clamp(32px,4vw,48px);margin:0 0 14px}
.business-box p{color:#e7e3ff;font-size:17px;line-height:1.7}
.business-points{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0 28px;font-weight:700;font-size:13px}
.white-btn{display:inline-block;background:#fff;color:var(--primary)}
.lead-demo{
    background:#fff;color:var(--ink);border-radius:24px;padding:26px;
    box-shadow:0 24px 50px rgba(20,14,80,.26)
}
.lead-top{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}
.lead-top small{margin-left:auto;color:var(--muted);font-weight:600}
.live-dot{width:9px;height:9px;border-radius:50%;background:#18b56f;box-shadow:0 0 0 5px #dff8ed}
.lead-demo h3{font-size:22px;margin:22px 0 12px}
.lead-demo p{color:#5f6575;margin:8px 0;font-size:14px}
.masked{background:#f7f5ff;border-radius:12px;padding:12px;margin:18px 0;font-weight:800}
.lead-demo button{
    width:100%;border:0;border-radius:13px;padding:14px;
    background:var(--primary);color:#fff;font-weight:850
}
.city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.city-grid a{
    border:1px solid var(--line);border-radius:16px;padding:19px;
    display:flex;align-items:center;gap:10px;font-size:14px
}
.city-grid a:hover{border-color:#cfc6ff;background:#faf9ff}
.final-cta{padding:50px 0 80px}
.final-cta-inner{
    background:#151828;color:#fff;border-radius:28px;padding:44px 50px;
    display:flex;align-items:center;justify-content:space-between;gap:30px
}
.final-cta h2{font-size:36px;margin:0 0 8px}
.final-cta p{color:#aeb3c5;margin:0}
footer{border-top:1px solid var(--line);background:#fff;padding-top:60px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;padding-bottom:40px}
.footer-brand{margin-bottom:14px}
.footer-grid p{max-width:320px;color:var(--muted);line-height:1.6}
.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:12px;font-size:14px}
.footer-grid>div:not(:first-child) strong{margin-bottom:6px}
.footer-grid a:hover{color:var(--primary)}
.copyright{text-align:center;padding:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

@media(max-width:980px){
    .nav-links{display:none}
    .menu-btn{display:block}
    .mobile-menu.open{display:block}
    .hero-grid{grid-template-columns:1fr}
    .hero-copy{text-align:center}
    .hero-copy>p{margin-left:auto;margin-right:auto}
    .search-card{grid-template-columns:1fr;text-align:left}
    .trust-row{justify-content:center}
    .hero-panel{min-height:570px}
    .service-grid{grid-template-columns:repeat(3,1fr)}
    .business-box{grid-template-columns:1fr}
    .city-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
    .nav{height:68px}
    .brand{font-size:18px}
    .brand-mark{width:38px;height:38px}
    .hero{min-height:auto}
    .hero-grid{padding:54px 0 35px}
    .hero h1{font-size:42px}
    .hero-copy>p{font-size:16px}
    .hero-panel{min-height:500px}
    .phone-mockup{width:245px;height:475px}
    .card-one{left:-4px;top:72px}
    .card-two{right:-6px;bottom:65px}
    .floating-card{min-width:190px;padding:11px 12px}
    .stats{grid-template-columns:1fr 1fr}
    .stats div:nth-child(2){border-right:0}
    .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
    .section{padding:68px 0}
    .section-heading{align-items:flex-start;flex-direction:column}
    .service-grid{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr}
    .business-box{padding:34px 24px}
    .city-grid{grid-template-columns:1fr 1fr}
    .final-cta-inner{padding:34px 25px;flex-direction:column;align-items:flex-start}
    .final-cta h2{font-size:30px}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
    .hero h1{font-size:37px}
    .service-grid,.city-grid{grid-template-columns:1fr 1fr}
    .service-card{padding:18px;min-height:140px}
    .card-one{left:0}
    .card-two{right:0}
    .floating-card{min-width:175px;font-size:12px}
    .footer-grid{grid-template-columns:1fr}
}