*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#ffffff;

    color:#0f172a;

}

.navbar{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 8%;

    position:fixed;

    top:0;

    background:white;

    border-bottom:1px solid #ececec;

    z-index:1000;

}

.logo{

    font-size:30px;

    font-weight:800;

}

.logo span{

    color:#2563eb;

}

nav{

    display:flex;

    gap:40px;

    align-items:center;

}

nav a{

    text-decoration:none;

    color:#0f172a;

    font-weight:500;

}

.btn{

    background:#2563eb;

    color:white;

    padding:14px 24px;

    border-radius:12px;

}

.hero{

    .hero::before{

content:"";

position:absolute;

right:-250px;

top:100px;

width:700px;

height:700px;

background:radial-gradient(circle,#3b82f655 0%,transparent 70%);

z-index:-1;

filter:blur(40px);

}

    position:relative;
    
    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

    padding:140px 8% 80px;

}

.hero-left{

    flex:1;

}

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

}

.hero h1{

    font-size:84px;

    font-weight:800;

    line-height:0.95;

    letter-spacing:-3px;

    margin-bottom:25px;

}

.hero p{

    font-size:22px;

    color:#475569;

    line-height:1.7;

    margin-bottom:40px;

    max-width:650px;

}

.phone{

    width:430px;px;

    background:white;

    border-radius:28px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    overflow:hidden;

    border:1px solid #e5e7eb;

}

.phone-header{

    background:#2563eb;

    color:white;

    padding:18px;

    font-weight:700;

    text-align:center;

}

.phone-body{

    padding:25px;

}

.bubble{

    background:#eff6ff;

    color:#2563eb;

    padding:15px;

    border-radius:14px;

    margin-bottom:25px;

    font-weight:600;

}

.customer-card{

    background:#f8fafc;

    border-radius:16px;

    padding:22px;

    margin-bottom:20px;

}

.customer-card h3{

    margin-bottom:15px;

}

.customer-card p{

    margin:10px 0;

    font-size:16px;

}

.notification{

    background:#dcfce7;

    color:#166534;

    padding:18px;

    border-radius:14px;

    font-weight:600;

}

.primary-btn{

    background:#2563eb;

    color:white;

    text-decoration:none;

    padding:18px 34px;

    border-radius:14px;

    font-weight:600;

}

.secondary-btn{

    border:2px solid #d6d6d6;

    color:#111827;

    text-decoration:none;

    padding:18px 34px;

    border-radius:14px;

    font-weight:600;

}

.primary-btn:hover{

    transform:translateY(-2px);

    transition:.3s;

}

.secondary-btn:hover{

    background:#f8fafc;

}

@media(max-width:900px){

.hero h1{

font-size:48px;

}

.hero p{

font-size:18px;

}

.buttons{

flex-direction:column;

}

nav{

display:none;

}

}

.trusted{

padding:120px 8%;

text-align:center;

}

.trusted h2{

font-size:42px;

margin-bottom:60px;

}

.business-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

max-width:900px;

margin:auto;

}

.business-grid div{

background:#f8fafc;

padding:30px;

border-radius:18px;

font-size:20px;

font-weight:600;

border:1px solid #e5e7eb;

transition:.3s;

}

.business-grid div:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,.08);

}

@media(max-width:900px){

    .timeline{

flex-direction:column;

}

.line{

width:3px;

height:50px;

margin:auto;

}

.business-grid{

grid-template-columns:repeat(2,1fr);

}

.hero{

flex-direction:column;

text-align:center;

}

.hero-right{

margin-top:60px;

}

.hero h1{

font-size:52px;

}

.bubble,
.customer-card,
.notification{

transition:.6s ease;

}

.phone{

animation:float 5s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

.green-dot{

width:10px;

height:10px;

background:#22c55e;

border-radius:50%;

display:inline-block;

margin-right:10px;

animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.6);

opacity:.6;

}

100%{

transform:scale(1);

opacity:1;

}

}

.badge{

display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:999px;

background:#eff6ff;

color:#2563eb;

font-weight:600;

margin-bottom:30px;

font-size:15px;

}

.hero h1 span{
    color:#2563eb;
}

.how-it-works{

padding:140px 8%;

background:#f8fafc;

}

.section-title{

text-align:center;

margin-bottom:80px;

}

.section-title h2{

font-size:52px;

margin-bottom:20px;

}

.section-title p{

font-size:20px;

color:#64748b;

}

.timeline{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:20px;

}

.step{

background:white;

padding:35px;

border-radius:24px;

box-shadow:0 20px 50px rgba(0,0,0,.05);

text-align:center;

flex:1;

transition:.3s;

}

.step:hover{

transform:translateY(-10px);

}

.icon{

font-size:46px;

margin-bottom:20px;

}

.step h3{

margin-bottom:18px;

font-size:24px;

}

.step p{

color:#64748b;

line-height:1.6;

}

.line{

height:3px;

background:#2563eb;

flex:.4;

margin-top:80px;

border-radius:20px;

}

}