body{
    margin:0;
    font-family: 'Segoe UI', sans-serif;
    background:#f6f7fb;
    color:#111;
}

/* NAV */
.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 60px;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.nav a{margin:0 10px;text-decoration:none;color:#333;font-weight:500}

/* HERO */
.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:60px;
    gap:40px;
}

.hero h1{
    font-size:48px;
    line-height:1.2;
}

.badge{
    background:#e6f7ec;
    padding:8px 16px;
    border-radius:30px;
    display:inline-block;
    margin-bottom:10px;
    font-weight:600;
}

/* BUTTONS */
.btn{
    background:#ff6b00;
    color:#fff;
    padding:14px 22px;
    border-radius:30px;
    text-decoration:none;
    font-weight:700;
    display:inline-block;
    margin-right:10px;
    transition:0.3s;
}
.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(255,107,0,0.3);
}

.btn2{
    background:#fff;
    color:#ff6b00;
    border:2px solid #ff6b00;
}

/* RIGHT OFFER CARD */
.offer{
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    transition:0.3s;
}
.offer:hover{
    transform:translateY(-5px);
}

/* GRID */
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* CARD */
.card{
    background:#fff;
    padding:25px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    transition:0.3s;
}
.card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

/* AVATAR */
.avatar{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#ff6b00;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:20px;
}

/* WHY SECTION FIX */
.why{
    background:#fff;   /* ❌ dark hata diya */
    padding:60px;
    border-radius:20px;
    margin:50px;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.why-card{
    background:#f8fafc;
    padding:25px;
    border-radius:15px;
    transition:0.3s;
}
.why-card:hover{
    transform:translateY(-5px);
}

/* MOBILE */
@media(max-width:900px){
.hero{flex-direction:column}
.grid{grid-template-columns:1fr}
.why-grid{grid-template-columns:1fr}
.nav{padding:15px}
}

/* PREMIUM ANIMATIONS */
html{scroll-behavior:smooth}

.nav{
  backdrop-filter: blur(14px);
  background:rgba(255,255,255,.88)!important;
}

.hero{
  position:relative;
  overflow:hidden;
  animation:fadeUp .7s ease both;
}

.hero:before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-70px;
  top:-70px;
  background:radial-gradient(circle,#ff8a00 0%,rgba(255,138,0,.18) 40%,transparent 70%);
  filter:blur(10px);
  z-index:0;
}

.hero>*{position:relative;z-index:1}

.offer{
  animation:floatCard 3s ease-in-out infinite;
}

.card,.cat,.why-card{
  animation:fadeUp .8s ease both;
}

.card:hover{
  transform:translateY(-10px) scale(1.015)!important;
}

.cat:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(255,107,0,.18);
}

.avatar{
  background:linear-gradient(135deg,#ff6b00,#ffb000)!important;
  box-shadow:0 10px 24px rgba(255,107,0,.35);
}

.badge{
  position:relative;
}

.badge:before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:#16a34a;
  display:inline-block;
  margin-right:8px;
  box-shadow:0 0 0 6px rgba(22,163,74,.15);
}

.btn{
  position:relative;
  overflow:hidden;
}

.btn:after{
  content:"";
  position:absolute;
  top:0;
  left:-90%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);
}

.btn:hover:after{
  animation:shine .8s ease;
}

.why{
  background:linear-gradient(135deg,#111827,#1f2937)!important;
  color:#fff;
}

.why-card{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.08);
}

/* Bottom sticky CTA */
.mobile-cta{
  display:none;
}

@media(max-width:700px){
  .mobile-cta{
    display:flex;
    position:fixed;
    bottom:14px;
    left:14px;
    right:14px;
    z-index:999;
    background:#fff;
    padding:10px;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.18);
    gap:10px;
  }
  .mobile-cta a{
    flex:1;
    text-align:center;
  }
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes floatCard{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

@keyframes shine{
  from{left:-90%}
  to{left:130%}
}

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:80px;
    background:linear-gradient(135deg,#fff7ed,#fff);
}

.gradient-text{
    background:linear-gradient(90deg,#ff6b00,#ffb000);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-btns{
    margin-top:20px;
}

.glass-card{
    background:rgba(255,255,255,0.6);
    backdrop-filter:blur(20px);
    padding:30px;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,0.1);
    animation:float 3s ease-in-out infinite;
}

.mini-box{
    background:#fff;
    padding:12px;
    border-radius:12px;
    margin-top:15px;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

/* animation */
@keyframes float{
    0%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
    100%{transform:translateY(0)}
}

.card{
  transition: all 0.3s ease;
}

.card:hover{
  transform: translateY(-10px);
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.btn{
  transition: all 0.3s ease;
}

.btn:hover{
  transform: scale(1.05);
  box-shadow:0 5px 15px rgba(255,122,0,0.4);
}

.hero span{
  background:linear-gradient(45deg,#ff7a00,#8a2be2);
}

/* PREMIUM EFFECTS */

.hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:40px 8%;
  padding:70px;
  border-radius:25px;

  background:linear-gradient(135deg,#ffffff,#ede7ff);
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

/* TEXT GLOW */
.hero h1{
  font-size:60px;
  line-height:1.2;
  letter-spacing:-1px;
  animation: fadeUp 1s ease;
}
@keyframes fadeUp{
    from{opacity:0; transform:translateY(40px);}
    to{opacity:1; transform:translateY(0);}
}


/* BUTTON HOVER */
.btn-main{
  background: linear-gradient(45deg,#ff6900,#ff3c00);
    color:#fff;
    padding:14px 28px;
    border:none;
    border-radius:30px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 8px 25px rgba(255,105,0,0.4);
}

.btn-main:hover{
  transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(255,105,0,0.6);
}

/* CARD PREMIUM */
.card{
   background:#fff;
    border-radius:18px;
    padding:20px;
    transition:0.3s;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.card:hover{
  transform:translateY(-8px) scale(1.02);
    box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

/* RIGHT BOX PREMIUM */
.phone{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(12px);
  padding:25px;
  border-radius:25px;
  box-shadow:0 20px 50px rgba(0,0,0,0.1);
}

/* PRICE GLOW */
.price-box{
  background:linear-gradient(135deg,#ff7a00,#ff9500);
  color:white;
  padding:22px;
  border-radius:18px;
  font-size:24px;
  box-shadow:0 10px 30px rgba(255,122,0,0.5);
}

/* SMOOTH ANIMATION */
*{
  transition:all 0.3s ease;
}