:root{--blk:#0A0A0A;--dk:#111;--dk2:#1A1A1A;--dk3:#242424;--gr:#00D67F;--gr2:#00B86B;--gd:rgba(0,214,127,0.12);--gw:rgba(0,214,127,0.25);--w:#FFF;--mu:#888;--go:#F5C842;}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Cairo',sans-serif;background:var(--blk);color:var(--w);overflow-x:hidden;direction:rtl;}

/* LANG */
.lang-switcher{position:fixed;top:20px;left:24px;z-index:1000;display:flex;gap:4px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:50px;padding:4px;backdrop-filter:blur(10px);}
.lang-btn{padding:6px 14px;border-radius:40px;border:none;background:transparent;color:rgba(255,255,255,0.5);font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;}
.lang-btn.active{background:var(--gr);color:var(--blk);}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:999;padding:0 40px;height:72px;display:flex;align-items:center;justify-content:space-between;transition:all 0.3s;}
.nav.scrolled{background:rgba(10,10,10,0.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.06);}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-logo-icon{width:40px;height:40px;background:var(--gr);border-radius:12px;display:flex;align-items:center;justify-content:center;}
.nav-logo-text{font-size:20px;font-weight:800;color:var(--w);}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;}
.nav-links a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:15px;font-weight:500;transition:color 0.2s;}
.nav-links a:hover{color:var(--w);}
.nav-cta{background:var(--gr);color:var(--blk)!important;padding:10px 22px;border-radius:50px;font-weight:700!important;}
.nav-menu-btn{display:none;background:none;border:none;color:white;font-size:24px;cursor:pointer;}

/* MOBILE DRAWER */
.mobile-drawer{position:fixed;inset:0;z-index:2000;display:none;}
.mobile-drawer.open{display:block;}
.drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:80%;max-width:300px;background:var(--dk2);padding:24px;display:flex;flex-direction:column;gap:8px;border-left:1px solid rgba(255,255,255,0.08);}
.drawer-close{align-self:flex-start;background:none;border:none;color:white;font-size:22px;cursor:pointer;margin-bottom:12px;}
.drawer-link{display:block;padding:14px 16px;border-radius:12px;color:rgba(255,255,255,0.7);text-decoration:none;font-size:16px;font-weight:500;transition:all 0.2s;}
.drawer-link:hover{background:var(--dk3);color:var(--w);}
.drawer-cta{display:block;padding:14px 16px;border-radius:12px;background:var(--gr);color:var(--blk);text-decoration:none;font-size:16px;font-weight:700;text-align:center;margin-top:10px;}

/* HERO */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(0,214,127,0.07) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(0,214,127,0.04) 0%,transparent 50%),linear-gradient(180deg,#0A0A0A 0%,#0f1a14 50%,#0A0A0A 100%);}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,214,127,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,214,127,0.03) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%);}
.hero-content{position:relative;z-index:10;max-width:1200px;margin:0 auto;padding:120px 40px 80px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;width:100%;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--gd);border:1px solid rgba(0,214,127,0.25);border-radius:50px;padding:6px 16px;font-size:13px;font-weight:600;color:var(--gr);margin-bottom:20px;}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--gr);animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hero-title{font-size:clamp(36px,5vw,62px);font-weight:900;line-height:1.1;letter-spacing:-1px;margin-bottom:20px;}
.hl{color:var(--gr);}
.hero-sub{font-size:17px;color:rgba(255,255,255,0.5);line-height:1.7;margin-bottom:32px;max-width:460px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--gr);color:var(--blk);padding:15px 30px;border-radius:50px;font-size:16px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:all 0.25s;font-family:'Cairo',sans-serif;box-shadow:0 4px 30px rgba(0,214,127,0.3);}
.btn-primary:hover{background:var(--gr2);transform:translateY(-2px);box-shadow:0 8px 40px rgba(0,214,127,0.4);}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--w);padding:14px 28px;border-radius:50px;font-size:16px;font-weight:600;text-decoration:none;border:1.5px solid rgba(255,255,255,0.2);cursor:pointer;transition:all 0.25s;font-family:'Cairo',sans-serif;}
.btn-secondary:hover{border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.05);}
.hero-stats{display:flex;gap:32px;}
.hs-num{font-size:26px;font-weight:800;color:var(--w);letter-spacing:-0.5px;}
.hs-num span{color:var(--gr);}
.hs-lbl{font-size:12px;color:rgba(255,255,255,0.4);margin-top:2px;}

/* HERO VISUAL */
.hero-visual{display:flex;flex-direction:column;gap:16px;position:relative;}
.app-logo-badge{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:18px;padding:14px 18px;animation:fadeSlideDown 0.8s ease both;}
@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
.alb-name{font-size:17px;font-weight:800;color:var(--w);}
.alb-sub{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;}
.scene-card{position:relative;border-radius:24px;overflow:visible;box-shadow:0 30px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(0,214,127,0.1);animation:fadeSlideUp 1s ease 0.2s both;}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.sc-chip{position:absolute;background:rgba(11,30,60,0.92);border:1px solid rgba(0,214,127,0.3);border-radius:50px;padding:8px 16px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--w);backdrop-filter:blur(8px);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,0.4);}
.sc-chip-top{top:-14px;right:24px;animation:chipFloat 3s ease-in-out infinite;}
.sc-chip-bottom{bottom:-14px;left:24px;animation:chipFloat 3.5s ease-in-out 1s infinite;}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sc-dot-live{width:7px;height:7px;border-radius:50%;background:var(--gr);animation:blink 1.2s infinite;}
.install-row{display:flex;flex-direction:column;gap:10px;animation:fadeSlideUp 1s ease 0.4s both;}
.install-label{font-size:12px;color:rgba(255,255,255,0.4);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;}
.install-btns{display:flex;gap:10px;}
.inst-btn{flex:1;display:flex;align-items:center;gap:10px;background:var(--dk2);border:1.5px solid rgba(255,255,255,0.1);border-radius:14px;padding:12px 14px;cursor:pointer;transition:all 0.25s;text-decoration:none;}
.inst-btn:hover{border-color:rgba(255,255,255,0.25);transform:translateY(-2px);}
.inst-btn-green{border-color:rgba(0,214,127,0.3);background:var(--gd);}
.inst-btn-green:hover{border-color:var(--gr);}
.inst-ico{font-size:22px;}
.inst-sub{font-size:10px;color:rgba(255,255,255,0.4);}
.inst-name{font-size:13px;font-weight:700;color:var(--w);}
.install-hint{font-size:11px;color:rgba(255,255,255,0.25);text-align:center;padding-top:4px;}

/* SECTIONS */
.section-wrap{max-width:1200px;margin:0 auto;padding:90px 40px;}
.dark-section{background:var(--dk);border-radius:40px;margin:0 20px;}
.sec-badge{display:inline-flex;align-items:center;gap:8px;background:var(--gd);border:1px solid rgba(0,214,127,0.2);border-radius:50px;padding:5px 14px;font-size:12px;font-weight:700;color:var(--gr);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px;}
.sec-title{font-size:clamp(26px,4vw,46px);font-weight:900;line-height:1.15;letter-spacing:-0.5px;margin-bottom:14px;}
.sec-sub{font-size:16px;color:rgba(255,255,255,0.5);line-height:1.7;max-width:500px;margin-bottom:0;}
.fade-in{opacity:0;transform:translateY(22px);transition:opacity 0.7s ease,transform 0.7s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* HOW IT WORKS */
.how-tabs{display:flex;gap:8px;background:var(--dk2);border-radius:50px;padding:5px;width:fit-content;margin:28px 0 40px;border:1px solid rgba(255,255,255,0.06);}
.htab{padding:10px 24px;border-radius:40px;border:none;background:transparent;font-family:'Cairo',sans-serif;font-size:15px;font-weight:600;color:rgba(255,255,255,0.45);cursor:pointer;transition:all 0.25s;}
.htab.active{background:var(--gr);color:var(--blk);box-shadow:0 4px 16px rgba(0,214,127,0.25);}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step-card{background:var(--dk2);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:26px 22px;transition:all 0.3s;}
.step-card:hover{border-color:rgba(0,214,127,0.2);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.3);}
.sn{width:52px;height:52px;border-radius:50%;background:var(--gd);border:1.5px solid rgba(0,214,127,0.3);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--gr);margin-bottom:16px;}
.si{font-size:28px;margin-bottom:12px;}
.st{font-size:15px;font-weight:700;color:var(--w);margin-bottom:8px;}
.sd{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.6;}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;}
.srv-card{background:var(--dk2);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:28px 24px;transition:all 0.3s;cursor:pointer;}
.srv-card:hover{border-color:rgba(0,214,127,0.25);transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,0.3);}
.srv-ico{font-size:40px;margin-bottom:16px;display:block;}
.srv-name{font-size:18px;font-weight:700;color:var(--w);margin-bottom:8px;}
.srv-desc{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.6;}
.srv-price{display:inline-block;margin-top:14px;background:var(--gd);border:1px solid rgba(0,214,127,0.2);color:var(--gr);padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;}

/* CITIES */
.cities-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:36px;}
.city-chip{background:var(--dk2);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:16px 12px;text-align:center;cursor:pointer;transition:all 0.25s;text-decoration:none;}
.city-chip:hover{border-color:rgba(0,214,127,0.3);background:var(--gd);transform:translateY(-3px);}
.city-flag{font-size:24px;display:block;margin-bottom:6px;}
.city-ar{font-size:13px;font-weight:700;color:var(--w);display:block;}
.city-fr{font-size:10px;color:rgba(255,255,255,0.35);display:block;margin-top:2px;}

/* DRIVER */
.driver-inner{max-width:1200px;margin:0 auto;padding:80px 40px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.earn-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;}
.earn-card{background:rgba(0,214,127,0.07);border:1px solid rgba(0,214,127,0.15);border-radius:14px;padding:16px;}
.earn-n{font-size:26px;font-weight:800;color:var(--gr);}
.earn-l{font-size:12px;color:rgba(255,255,255,0.4);margin-top:3px;}
.credit-box{background:var(--dk3);border-radius:20px;padding:26px;border:1px solid rgba(255,255,255,0.08);}
.credit-title{font-size:15px;font-weight:700;color:var(--w);margin-bottom:14px;}
.cpkg{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;margin-bottom:8px;border:1.5px solid rgba(255,255,255,0.06);cursor:pointer;transition:all 0.2s;background:var(--dk2);position:relative;}
.cpkg:hover{border-color:rgba(0,214,127,0.3);}
.cpkg-pop{border-color:var(--gr);background:var(--gd);}
.cp-cr{font-size:18px;font-weight:800;color:var(--w);}
.cp-lb{font-size:11px;color:rgba(255,255,255,0.4);}
.cp-pr{margin-right:auto;font-size:16px;font-weight:700;color:var(--gr);}
.cp-bdg{font-size:9px;background:var(--gr);color:var(--blk);padding:2px 8px;border-radius:20px;font-weight:700;}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px;}
.faq-item{background:var(--dk2);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:20px 22px;cursor:pointer;transition:all 0.2s;}
.faq-item:hover{border-color:rgba(0,214,127,0.2);}
.faq-q{font-size:14px;font-weight:700;color:var(--w);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.fa{color:var(--gr);font-size:18px;transition:transform 0.2s;flex-shrink:0;}
.faq-item.open .fa{transform:rotate(180deg);}
.faq-a{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.7;margin-top:12px;display:none;}
.faq-item.open .faq-a{display:block;}

/* FOOTER */
footer{background:var(--dk);border-top:1px solid rgba(255,255,255,0.06);padding:60px 40px 32px;margin-top:80px;}
.footer-inner{max-width:1200px;margin:0 auto;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px;text-decoration:none;}
.footer-desc{font-size:14px;color:rgba(255,255,255,0.4);line-height:1.7;}
.ftitle{font-size:14px;font-weight:700;color:var(--w);margin-bottom:14px;}
.flinks{list-style:none;display:flex;flex-direction:column;gap:10px;}
.flinks a{font-size:14px;color:rgba(255,255,255,0.4);text-decoration:none;transition:color 0.2s;}
.flinks a:hover{color:var(--gr);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* FRENCH LTR overrides */
html[lang="fr"] body{direction:ltr;}
html[lang="fr"] .lang-switcher{left:auto;right:24px;}
html[lang="fr"] .drawer-panel{right:auto;left:0;border-left:none;border-right:1px solid rgba(255,255,255,0.08);}
html[lang="fr"] .cp-pr{margin-right:0;margin-left:auto;}

/* RESPONSIVE */
@media(max-width:1000px){
  .nav-links{display:none;}
  .nav-menu-btn{display:block;}
  .hero-content{grid-template-columns:1fr;padding:100px 24px 60px;}
  .hero-visual{display:none;}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:1fr 1fr;}
  .cities-grid{grid-template-columns:repeat(3,1fr);}
  .driver-inner{grid-template-columns:1fr;padding:60px 24px;}
  .faq-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .section-wrap{padding:60px 24px;}
  .dark-section{margin:0;border-radius:0;}
}
@media(max-width:560px){
  .steps-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .cities-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .hero-stats{gap:18px;}
  .hero-actions{flex-direction:column;}
  .btn-primary,.btn-secondary{width:100%;justify-content:center;}
  .nav{padding:0 20px;}
}
