/* ===========================
   CIBCY LANDING
=========================== */

:root{

--primary:#2563eb;
--secondary:#1d4ed8;
--dark:#0f172a;
--light:#f8fafc;
--gray:#64748b;
--border:#e2e8f0;
--success:#10b981;
--radius:18px;
--shadow:0 15px 40px rgba(0,0,0,.08);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#f8fafc;
color:var(--dark);

}

a{

text-decoration:none;
color:inherit;

}

img{

max-width:100%;
display:block;

}

button{

cursor:pointer;
font-family:inherit;

}

/* ===========================
NAVBAR
=========================== */

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
background:rgba(255,255,255,.85);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(0,0,0,.05);

}

.navbar{

max-width:1300px;
margin:auto;

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 30px;

}

.logo{

font-size:28px;
font-weight:800;
color:var(--primary);

}

.navbar ul{

display:flex;
gap:35px;
list-style:none;

}

.navbar li{

font-weight:500;
transition:.3s;

}

.navbar li:hover{

color:var(--primary);

}

.buttons{

display:flex;
gap:15px;

}

.btn-primary{

background:var(--primary);
color:white;
border:none;
padding:14px 28px;
border-radius:50px;
font-size:15px;
font-weight:600;
transition:.3s;

}

.btn-primary:hover{

background:var(--secondary);
transform:translateY(-3px);

}

.btn-secondary{

background:white;
border:2px solid var(--primary);
color:var(--primary);

padding:14px 28px;
border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn-secondary:hover{

background:var(--primary);
color:white;

}

.btn-login{

background:none;
border:none;
font-weight:600;

}

/* ===========================
HERO
=========================== */

.hero{

padding-top:150px;

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

padding-left:30px;
padding-right:30px;
padding-bottom:100px;

}

.badge{

display:inline-block;

padding:10px 18px;

background:#dbeafe;

color:var(--primary);

border-radius:40px;

font-weight:600;

margin-bottom:25px;

}

.hero h1{

font-size:60px;

line-height:1.1;

margin-bottom:25px;

}

.hero p{

font-size:20px;

line-height:1.8;

color:var(--gray);

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:45px;

}

.hero-right{

display:flex;

justify-content:center;

}

.hero-right img{

border-radius:20px;

box-shadow:var(--shadow);

transition:.4s;

}

.hero-right img:hover{

transform:translateY(-10px);

}

.stats{

display:flex;

gap:50px;

}

.stats h2{

font-size:40px;

color:var(--primary);

}

.stats span{

color:var(--gray);

}

/* ===========================
FEATURES
=========================== */

.features{

padding:100px 30px;

max-width:1300px;

margin:auto;

}

.features h2{

text-align:center;

font-size:42px;

margin-bottom:70px;

}

.cards{

display:grid;

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

gap:30px;

}

.card{

background:white;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

font-size:40px;

}

.card:hover{

transform:translateY(-10px);

}

.card h3{

font-size:25px;

margin-top:20px;

margin-bottom:15px;

}

.card p{

color:var(--gray);

line-height:1.8;

}

/* BUSINESS */

.business{

padding:100px 30px;

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.business-right h2{

font-size:45px;

margin-bottom:25px;

}

.business-right p{

font-size:19px;

line-height:2;

color:var(--gray);

margin-bottom:30px;

}

/* PRICING */

.pricing{

padding:120px 30px;

text-align:center;

}

.pricing h2{

font-size:45px;

margin-bottom:60px;

}

.price-card{

max-width:420px;

margin:auto;

background:white;

border-radius:25px;

padding:60px;

box-shadow:var(--shadow);

}

.price-card span{

color:var(--primary);

font-weight:700;

}

.price-card h1{

font-size:70px;

margin:20px 0;

}

.price-card p{

color:var(--gray);

margin-bottom:30px;

}

.price-card ul{

list-style:none;

text-align:left;

margin-bottom:35px;

}

.price-card li{

padding:10px 0;

}

/* CTA */

.cta{

padding:120px 30px;

text-align:center;

background:linear-gradient(135deg,#2563eb,#1e40af);

color:white;

}

.cta h2{

font-size:50px;

margin-bottom:20px;

}

.cta p{

font-size:20px;

margin-bottom:35px;

}

.cta .btn-primary{

background:white;

color:var(--primary);

}

/* FOOTER */

footer{

background:#0f172a;

color:white;

padding:80px 30px;

display:grid;

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

gap:40px;

}

footer h2{

margin-bottom:20px;

}

footer h3{

margin-bottom:20px;

}

footer a{

display:block;

margin-bottom:12px;

color:#cbd5e1;

transition:.3s;

}

footer a:hover{

color:white;

}

/* =====================
RESPONSIVE
===================== */

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.business{

grid-template-columns:1fr;

}

.cards{

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

}

.hero-buttons{

justify-content:center;

}

.stats{

justify-content:center;

}

}

@media(max-width:768px){

.navbar ul{

display:none;

}

.cards{

grid-template-columns:1fr;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.business h2{

font-size:35px;

}

footer{

grid-template-columns:1fr;

text-align:center;

}

}

@media(max-width:500px){

.hero{

padding-left:20px;
padding-right:20px;

}

.features{

padding-left:20px;
padding-right:20px;

}

.business{

padding-left:20px;
padding-right:20px;

}

.price-card{

padding:40px 25px;

}

.hero-buttons{

flex-direction:column;

}

.stats{

flex-direction:column;

gap:25px;

}

}