/* ===== MISHWARI — FEMININE PREMIUM DESIGN ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --rose-50:#FFF1F2;--rose-100:#FFE4E6;--rose-200:#FECDD3;--rose-300:#FDA4AF;
  --rose-400:#FB7185;--rose-500:#F43F5E;--rose-600:#E11D48;
  --pink-50:#FDF2F8;--pink-100:#FCE7F3;--pink-200:#FBCFE8;--pink-300:#F9A8D4;
  --pink-400:#F472B6;--pink-500:#EC4899;
  --purple-300:#C4B5FD;--purple-400:#A78BFA;
  --bg:#FFFBFC;--bg-soft:#FFF5F7;--bg-card:#FFFFFF;
  --text:#1E1B2E;--text-soft:#64607D;--text-muted:#A09CB5;
  --gradient:linear-gradient(135deg,#F472B6,#EC4899,#E11D48);
  --gradient-soft:linear-gradient(135deg,#FECDD3,#FBCFE8,#E9D5FF);
  --shadow-sm:0 2px 8px rgba(244,114,182,.08);
  --shadow-md:0 8px 30px rgba(244,114,182,.12);
  --shadow-lg:0 20px 60px rgba(244,114,182,.15);
  --shadow-glow:0 0 40px rgba(244,114,182,.2);
  --radius:20px;--radius-sm:12px;--radius-full:100px;
}
html{scroll-behavior:smooth}
body{font-family:'Cairo','Tajawal',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.7}
.container{max-width:1140px;margin:0 auto;padding:0 1.5rem}

/* ANIMATIONS */
[data-anim]{opacity:0;transform:translateY(40px);transition:all .7s cubic-bezier(.16,1,.3,1)}
[data-anim="fade-left"]{transform:translateX(60px)}
[data-anim].visible{opacity:1;transform:translate(0)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes slideIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes carMove{0%{left:20%}50%{left:65%}100%{left:20%}}

/* NAV */
nav{position:fixed;top:0;width:100%;z-index:999;padding:1rem 0;transition:all .4s}
nav.scrolled{background:rgba(255,251,252,.92);backdrop-filter:blur(20px);box-shadow:var(--shadow-sm);padding:.7rem 0}
.nav-inner{max-width:1140px;margin:0 auto;padding:0 1.5rem;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.logo-icon{font-size:1.8rem}
.logo-text{font-size:1.4rem;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{color:var(--text-soft);text-decoration:none;font-size:.95rem;font-weight:600;transition:.3s;position:relative}
.nav-links a:hover{color:var(--rose-500)}
.nav-btn{background:var(--gradient)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;padding:.6rem 1.5rem;border-radius:var(--radius-full);font-weight:700!important;box-shadow:0 4px 20px rgba(236,72,153,.3);transition:all .3s!important}
.nav-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(236,72,153,.4)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 2rem;border-radius:var(--radius-full);font-size:1.05rem;font-weight:700;text-decoration:none;transition:all .3s;cursor:pointer;border:none;font-family:inherit}
.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 6px 30px rgba(236,72,153,.3)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(236,72,153,.4)}
.btn-secondary{background:linear-gradient(135deg,#C4B5FD,#A78BFA);color:#fff;box-shadow:0 6px 30px rgba(167,139,250,.3)}
.btn-secondary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(167,139,250,.4)}
.btn-glass{background:rgba(244,114,182,.08);color:var(--rose-500);border:2px solid rgba(244,114,182,.2)}
.btn-glass:hover{background:rgba(244,114,182,.15);transform:translateY(-3px)}
.btn-full{width:100%}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding:7rem 1.5rem 4rem;max-width:1140px;margin:0 auto;gap:3rem;position:relative}
.hero-bg-shapes{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3}
.shape-1{width:500px;height:500px;background:var(--rose-200);top:-10%;right:-10%}
.shape-2{width:400px;height:400px;background:var(--pink-200);bottom:10%;left:-5%}
.shape-3{width:300px;height:300px;background:var(--purple-300);top:40%;right:20%;opacity:.15}
.blob{position:absolute;border-radius:40% 60% 70% 30%/40% 50% 60% 50%;animation:float 8s ease-in-out infinite}
.blob-1{width:200px;height:200px;background:linear-gradient(135deg,rgba(249,168,212,.2),rgba(196,181,253,.2));top:15%;left:5%}
.blob-2{width:150px;height:150px;background:linear-gradient(135deg,rgba(253,164,175,.2),rgba(251,207,232,.2));bottom:20%;right:10%;animation-delay:4s}
.hero-content{flex:1;position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,rgba(244,114,182,.1),rgba(196,181,253,.1));border:1px solid rgba(244,114,182,.15);padding:.5rem 1.2rem;border-radius:var(--radius-full);font-size:.9rem;color:var(--rose-500);font-weight:600;margin-bottom:1.5rem}
.badge-dot{width:8px;height:8px;background:var(--rose-400);border-radius:50%;animation:pulse 2s infinite}
.hero h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;line-height:1.25;margin-bottom:1.2rem;color:var(--text)}
.gradient-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-desc{font-size:clamp(.95rem,1.8vw,1.15rem);color:var(--text-soft);max-width:500px;margin-bottom:2rem;line-height:1.8}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero-trust{display:flex;align-items:center;gap:1rem}
.trust-avatars{display:flex}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-right:-8px;border:3px solid var(--bg);box-shadow:var(--shadow-sm)}
.trust-text{font-size:.9rem;color:var(--text-soft)}
.trust-text strong{color:var(--rose-500)}

/* PHONE MOCKUP */
.hero-visual{flex:1;position:relative;z-index:2;display:flex;justify-content:center}
.phone-mockup{width:280px;height:560px;background:var(--text);border-radius:40px;padding:12px;box-shadow:var(--shadow-lg),0 0 0 2px rgba(244,114,182,.1);position:relative}
.phone-screen{width:100%;height:100%;background:var(--bg);border-radius:30px;overflow:hidden;display:flex;flex-direction:column}
.mock-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:linear-gradient(135deg,var(--pink-400),var(--rose-500));color:#fff;font-weight:700;font-size:.85rem}
.mock-status{font-size:.7rem;background:rgba(255,255,255,.2);padding:.2rem .6rem;border-radius:20px}
.mock-map{flex:1;background:linear-gradient(180deg,#FDF2F8,#FFF1F2,#FCE7F3);position:relative;overflow:hidden}
.mock-map::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(244,114,182,.05) 30px,rgba(244,114,182,.05) 31px),repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(244,114,182,.05) 30px,rgba(244,114,182,.05) 31px)}
.mock-pin{position:absolute;font-size:1.3rem}
.mock-pin-a{top:25%;right:30%}
.mock-pin-b{bottom:30%;left:25%}
.mock-route{position:absolute;top:32%;right:35%;width:3px;height:35%;background:linear-gradient(180deg,var(--rose-400),var(--purple-400));border-radius:3px;transform:rotate(30deg)}
.mock-car{position:absolute;font-size:1.5rem;top:45%;animation:carMove 4s ease-in-out infinite}
.mock-card{background:#fff;margin:0;padding:1rem;border-top:1px solid var(--rose-100)}
.mock-driver{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.mock-driver-avatar{width:40px;height:40px;background:var(--pink-100);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.mock-driver-name{font-weight:700;font-size:.85rem}
.mock-driver-rate{font-size:.7rem;color:var(--text-muted)}
.mock-eta{display:flex;justify-content:space-between;align-items:center;background:var(--rose-50);padding:.6rem .8rem;border-radius:var(--radius-sm)}
.mock-eta-time{font-weight:900;color:var(--rose-500);font-size:1rem}
.mock-eta-label{font-size:.75rem;color:var(--text-muted)}

/* FLOATING CARDS */
.floating-card{position:absolute;background:#fff;padding:.7rem 1.2rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;box-shadow:var(--shadow-md);animation:slideIn .6s ease both;z-index:3;white-space:nowrap;border:1px solid rgba(244,114,182,.08)}
.fc-1{top:15%;right:-30px;animation-delay:1.5s}
.fc-2{top:45%;left:-40px;animation-delay:2.3s}
.fc-3{bottom:15%;right:-20px;animation-delay:3.1s}
.floating-card strong{color:var(--rose-500)}

/* STATS BAR */
.stats-bar{background:var(--bg-card);border-top:1px solid var(--rose-100);border-bottom:1px solid var(--rose-100);padding:2.5rem 1.5rem;margin-top:-1px}
.stats-inner{max-width:1000px;margin:0 auto;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:1.5rem}
.stat-item{text-align:center}
.stat-icon{font-size:1.8rem;margin-bottom:.3rem}
.stat-num{font-size:1.6rem;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat-label{font-size:.85rem;color:var(--text-muted);font-weight:500}
.stat-divider{width:1px;height:50px;background:var(--rose-100)}

/* SECTION HEADERS */
.section-header{text-align:center;margin-bottom:3.5rem}
.section-badge{display:inline-block;background:linear-gradient(135deg,rgba(244,114,182,.1),rgba(196,181,253,.08));color:var(--rose-500);padding:.4rem 1.2rem;border-radius:var(--radius-full);font-size:.85rem;font-weight:700;margin-bottom:1rem;border:1px solid rgba(244,114,182,.12)}
.section-header h2{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:900;margin-bottom:.5rem}
.section-header p{color:var(--text-soft);font-size:1.05rem}

/* FEATURES GRID */
.features{padding:6rem 0;background:var(--bg-soft)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.f-card{background:var(--bg-card);border:1px solid rgba(244,114,182,.06);border-radius:var(--radius);padding:2rem;transition:all .4s;position:relative;overflow:hidden}
.f-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient);opacity:0;transition:.4s}
.f-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(244,114,182,.15)}
.f-card:hover::before{opacity:1}
.f-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.2rem;box-shadow:var(--shadow-sm)}
.f-card h3{font-size:1.1rem;font-weight:800;margin-bottom:.5rem}
.f-card p{color:var(--text-soft);font-size:.9rem;line-height:1.8}

/* HOW IT WORKS */
.how-section{padding:6rem 0}
.steps-grid{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.step-card{background:var(--bg-card);border:1px solid rgba(244,114,182,.08);border-radius:var(--radius);padding:2.5rem 2rem;text-align:center;width:280px;position:relative;transition:all .4s}
.step-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.step-num{position:absolute;top:-14px;right:50%;transform:translateX(50%);width:32px;height:32px;background:var(--gradient);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;box-shadow:0 4px 15px rgba(236,72,153,.3)}
.step-icon{font-size:2.5rem;margin-bottom:1rem}
.step-card h3{font-size:1.1rem;font-weight:800;margin-bottom:.4rem}
.step-card p{color:var(--text-soft);font-size:.88rem}
.step-line{display:flex;align-items:center;padding:0 .5rem}
.step-arrow{font-size:1.5rem;color:var(--rose-300);font-weight:900}

/* DOWNLOAD */
.download-section{padding:6rem 0;background:var(--bg-soft);position:relative;overflow:hidden}
.download-section::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(244,114,182,.06),transparent 70%);pointer-events:none}
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:800px;margin:0 auto}
.dl-card{background:var(--bg-card);border:1px solid rgba(244,114,182,.1);border-radius:var(--radius);padding:2.5rem 2rem;text-align:center;position:relative;overflow:hidden;transition:all .4s}
.dl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.dl-glow{position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:200px;height:200px;border-radius:50%;opacity:0;transition:.4s}
.dl-rider .dl-glow{background:radial-gradient(circle,rgba(244,114,182,.15),transparent)}
.dl-driver .dl-glow{background:radial-gradient(circle,rgba(167,139,250,.15),transparent)}
.dl-card:hover .dl-glow{opacity:1}
.dl-emoji{font-size:3.5rem;margin-bottom:.5rem}
.dl-tag{display:inline-block;background:linear-gradient(135deg,rgba(244,114,182,.1),rgba(196,181,253,.1));color:var(--rose-500);padding:.25rem .8rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;margin-bottom:.8rem}
.dl-card h3{font-size:1.3rem;font-weight:900;margin-bottom:.5rem}
.dl-card p{color:var(--text-soft);font-size:.9rem;margin-bottom:1.2rem;line-height:1.7}
.dl-features{list-style:none;text-align:right;margin-bottom:1.5rem}
.dl-features li{padding:.3rem 0;font-size:.88rem;color:var(--text-soft)}
.dl-size{display:block;margin-top:.8rem;font-size:.8rem;color:var(--text-muted)}

/* FOOTER */
footer{background:var(--text);color:rgba(255,255,255,.7);padding:3.5rem 0 0}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand p{margin-top:.8rem;font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.5)}
.footer-brand .logo-text{background:linear-gradient(135deg,#F9A8D4,#F472B6);-webkit-background-clip:text}
.footer-links h4{font-weight:800;margin-bottom:.8rem;color:#fff;font-size:.95rem}
.footer-links a{display:block;color:rgba(255,255,255,.5);text-decoration:none;padding:.3rem 0;font-size:.88rem;transition:.3s}
.footer-links a:hover{color:var(--pink-300)}
.footer-bottom{text-align:center;padding:1.5rem 0;font-size:.85rem;color:rgba(255,255,255,.4)}

/* MOBILE */
@media(max-width:900px){
  .hero{flex-direction:column;text-align:center;padding-top:6rem}
  .hero-desc{margin:0 auto 2rem}
  .hero-actions{justify-content:center}
  .hero-trust{justify-content:center}
  .hero-visual{margin-top:2rem}
  .features-grid{grid-template-columns:1fr 1fr}
  .steps-grid{flex-direction:column;gap:1rem}
  .step-line{transform:rotate(90deg)}
  .dl-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .nav-links a:not(.nav-btn){display:none}
}
@media(max-width:600px){
  .features-grid{grid-template-columns:1fr}
  .floating-card{display:none}
  .phone-mockup{width:240px;height:480px}
  .stat-divider{display:none}
  .stats-inner{gap:.8rem}
}