:root{

--primary:#8E44EC;

--secondary:#6E2DC7;

--gold:#D4AF37;

--dark:#121212;

--light:#F5F6F7;

--white:#FFFFFF;

--radius:20px;

--transition:.35s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

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

background:#fff;

color:#222;

overflow-x:hidden;

}

h1,h2,h3,h4{

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

font-weight:700;

}

section{

padding:100px 0;

}

.container{

max-width:1280px;

}

.navbar{

padding:18px 0;

transition:.4s;

}

.navbar.scrolled{

background:#fff;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.navbar-brand{

display:flex;

align-items:center;

font-family:Poppins;

font-size:24px;

font-weight:700;

color:#222;

}

.navbar-brand img{

height:45px;

margin-right:12px;

}

.nav-link{

margin-left:20px;

font-weight:500;

color:#333;

transition:.3s;

}

.nav-link:hover{

color:var(--primary);

}

.download-btn{

background:var(--primary);

padding:12px 28px;

border-radius:40px;

color:#fff;

text-decoration:none;

margin-left:25px;

transition:.3s;

font-weight:600;

}

.download-btn:hover{

background:var(--gold);

color:#111;

}

.hero{

height:100vh;

display:flex;

align-items:center;

background:linear-gradient(rgba(111,53,194,.85),rgba(111,53,194,.85)),url('images/selsapp_bg3.webp');

background-size:cover;

background-position:center;

color:white;

}

.hero h1{

font-size:62px;

font-weight:800;

margin-bottom:20px;

}

.hero p{

font-size:22px;

max-width:600px;

}

footer{

background:#111;

padding:40px 0;

color:#fff;

}

.footer-icons{

display:flex;

justify-content:space-around;

text-align:center;

}

.footer-icons i{

color:var(--gold);

font-size:26px;

margin-bottom:10px;

transition:.3s;

}

.footer-icons i:hover{

color:var(--primary);

transform:translateY(-6px);

}


.hero{

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(rgba(88,38,154,.90),

rgba(88,38,154,.90)),

url("../images/hero-bg.jpg");

background-size:cover;

background-position:center;

color:white;

overflow:hidden;

}

.hero-badge{

display:inline-block;

padding:10px 20px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(12px);

border-radius:40px;

margin-bottom:25px;

font-weight:600;

}

.hero-badge i{

color:gold;

margin-right:8px;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.1;

margin-bottom:20px;

}

.hero h1 span{

color:var(--gold);

}

.hero p{

font-size:20px;

line-height:1.8;

margin-bottom:30px;

max-width:560px;

}

.hero-features{

display:grid;

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

gap:18px;

margin-bottom:35px;

}

.hero-features div{

font-size:18px;

font-weight:600;

}

.hero-features i{

color:var(--gold);

margin-right:10px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.demo-btn{

padding:13px 30px;

border:2px solid white;

border-radius:50px;

text-decoration:none;

color:white;

transition:.35s;

font-weight:600;

}

.demo-btn:hover{

background:white;

color:#6E2DC7;

}

.phone-wrapper{

position:relative;

display:inline-block;

}

.phone-image{

width:340px;

position:relative;

z-index:2;

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

filter:drop-shadow(0 25px 60px rgba(0,0,0,.35));

}

.gold-ring{

position:absolute;

width:380px;

height:380px;

background:

radial-gradient(circle,

rgba(212,175,55,.7),

transparent 70%);

border-radius:50%;

left:50%;

top:50%;

transform:translate(-50%,-50%);

animation:pulse 5s infinite;

}




@keyframes floatPhone{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

@keyframes pulse{

0%{

transform:translate(-50%,-50%) scale(.9);

opacity:.7;

}

50%{

transform:translate(-50%,-50%) scale(1.05);

opacity:1;

}

100%{

transform:translate(-50%,-50%) scale(.9);

opacity:.7;

}

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:48px;

font-weight:800;

margin-bottom:15px;

}

.section-title p{

font-size:20px;

color:#777;

max-width:700px;

margin:auto;

}

.business-section{

padding:110px 0;

background:#fff;

}

.business-card{

background:#fff;

padding:35px;

text-align:center;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.business-card:hover{

transform:translateY(-10px);

}

.business-card i{

font-size:46px;

color:#D4AF37;

margin-bottom:20px;

}

.features-section{

background:#f8f9fb;

padding:120px 0;

}

.feature-card{

background:white;

padding:40px;

border-radius:24px;

box-shadow:0 10px 35px rgba(0,0,0,.08);

height:100%;

transition:.35s;

}

.feature-card:hover{

transform:translateY(-10px);

}

.feature-card i{

font-size:44px;

color:#8E44EC;

margin-bottom:25px;

}

.feature-card h4{

margin-bottom:20px;

font-weight:700;

}

.feature-card ul{

padding-left:20px;

}

.feature-card li{

margin-bottom:10px;

}

.screenshots{

padding:120px 0;

background:#fff;

}

.screen{

border-radius:35px;

box-shadow:0 20px 60px rgba(0,0,0,.18);

transition:.35s;

}

.screen:hover{

transform:translateY(-15px) scale(1.04);

}