:root{--blue:#0038ff;--cyan:#18d6ff;--cyan2:#8ff0ff;--white:#fff}
*{box-sizing:border-box}
/* html/body rules removed – intro runs as overlay, not standalone page */
/* body font is inherited from theme's Cairo font stack */
.sp-intro{position:relative;width:100vw;height:100vh;min-height:720px;overflow:hidden;isolation:isolate;background:#0038ff}
.sp-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;animation:bgFloat 11s ease-in-out infinite alternate}
.sp-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,24,160,.02) 0%,rgba(0,56,255,.03) 42%,rgba(0,56,255,.08) 100%),radial-gradient(circle at 75% 42%,rgba(255,255,255,.06),transparent 38%)}
.sp-logo-head{position:absolute;z-index:5;top:32px;left:50%;transform:translateX(-50%);width:min(900px,88vw);display:flex;align-items:center;justify-content:center;gap:34px}
.sp-logo-card{display:flex;align-items:center;justify-content:center;width:min(330px,36vw);animation:logoDrop 1.1s cubic-bezier(.16,1,.3,1) both;text-decoration:none}
.sp-logo-card img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 10px rgba(255,255,255,.25)) drop-shadow(0 0 16px rgba(24,214,255,.35))}
.sp-line{flex:1;max-width:320px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),rgba(24,214,255,.85),transparent);box-shadow:0 0 14px rgba(24,214,255,.75);animation:lineIn 1s ease .2s both}
.sp-copy{position:relative;z-index:4;height:100%;display:flex;align-items:center;justify-content:flex-end;padding:116px 8vw 82px;pointer-events:none}
.sp-copy-inner{width:min(620px,41vw);text-align:right;pointer-events:auto;transform:translateY(15px);animation:contentIn 1s cubic-bezier(.16,1,.3,1) .18s both}
.sp-copy h1{margin:0 0 24px;color:#fff;font-size:clamp(56px,5.4vw,98px);line-height:1.04;font-weight:700;letter-spacing:-1.6px;text-shadow:0 10px 26px rgba(0,0,0,.25)}
.sp-copy h1 span{display:block;color:var(--cyan);text-shadow:0 0 18px rgba(24,214,255,.55)}
.sp-features{display:flex;gap:16px;align-items:center;justify-content:flex-start;margin-bottom:34px}
.sp-feature{display:flex;align-items:center;gap:10px}
.sp-feature span{position:relative;width:54px;height:54px;display:grid;place-items:center;color:#fff;font-size:18px;filter:drop-shadow(0 0 8px rgba(24,214,255,.42))}
.sp-feature span:before{content:"";position:absolute;inset:6px;transform:rotate(45deg);border:1.8px solid rgba(143,240,255,.95);border-radius:10px;background:linear-gradient(135deg,rgba(24,214,255,.18),rgba(0,56,255,.08));box-shadow:0 0 18px rgba(24,214,255,.38),inset 0 0 18px rgba(24,214,255,.14)}
.sp-feature i{position:relative;z-index:2}
.sp-feature p{margin:0;font-size:16px;font-weight:500;line-height:1.35;color:#fff}
.sp-actions{display:flex;gap:28px;justify-content:flex-start}
.sp-action{width:220px;height:156px;border:2px solid rgba(143,240,255,.95);border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(24,214,255,.24),transparent 55%),linear-gradient(180deg,rgba(0,56,255,.38),rgba(0,20,160,.25));box-shadow:0 0 32px rgba(24,214,255,.55),inset 0 0 32px rgba(24,214,255,.16);color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;backdrop-filter:blur(6px);transition:.25s ease}
.sp-action:hover{color:#fff;text-decoration:none;transform:translateY(-5px);box-shadow:0 0 46px rgba(24,214,255,.9),inset 0 0 40px rgba(24,214,255,.24)}
.sp-action i{font-size:40px}.sp-action strong{font-size:25px;font-weight:600;line-height:1}
.sp-enter{position:absolute;z-index:5;left:50%;bottom:22px;transform:translateX(-50%);width:58px;height:58px;border:1.5px solid rgba(143,240,255,.95);border-radius:18px;display:grid;place-items:center;color:#fff;background:rgba(0,56,255,.24);box-shadow:0 0 22px rgba(24,214,255,.48),inset 0 0 22px rgba(24,214,255,.15);font-size:26px;text-decoration:none;animation:arrowPulse 1.6s ease-in-out infinite}.sp-enter:hover{color:#fff;text-decoration:none}
.sp-modal .modal-content{position:relative;overflow:hidden;border-radius:26px;border:1px solid rgba(143,240,255,.5);background:linear-gradient(180deg,#0038ff,#04107a);color:#fff;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 48px rgba(24,214,255,.35)}
.modal-x{position:absolute;left:18px;top:18px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1}
.modal-header small{color:#95f2ff;font-weight:600}.modal-header h4{margin:.25rem 0;font-weight:700}.modal-header p{margin:0;color:rgba(255,255,255,.75)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px;border-radius:16px;background:rgba(255,255,255,.12);margin-bottom:12px}.tabs button{border:0;border-radius:12px;padding:12px;color:#fff;background:transparent;font-weight:600}.tabs button.active{background:linear-gradient(135deg,var(--blue),var(--cyan))}
.sp-modal label{margin-top:10px;font-size:13px;font-weight:600}.sp-modal .form-control{height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff}.sp-modal .form-control option{color:#111}
.submit-request{width:100%;border:0;border-radius:15px;padding:14px;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--blue),var(--cyan))}
.success-state{position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,#0038ff,#04107a);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.success-state div{width:76px;height:76px;margin-bottom:18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));font-size:34px}
@keyframes bgFloat{to{transform:scale(1.024)}}@keyframes logoDrop{from{opacity:0;transform:translateY(-28px) scale(.94)}to{opacity:1;transform:none}}@keyframes lineIn{from{opacity:0;transform:scaleX(.25)}to{opacity:1;transform:scaleX(1)}}@keyframes contentIn{from{opacity:0;transform:translateX(54px) translateY(15px)}to{opacity:1;transform:translateX(0) translateY(15px)}}@keyframes arrowPulse{0%,100%{opacity:.78;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,9px)}}
@media(max-width:991px){
html,body{overflow:auto}.sp-intro{height:auto;min-height:100svh}.sp-bg{background-position:21% center}.sp-logo-head{top:18px;width:100%;padding:0 18px}.sp-logo-card{width:218px}.sp-line{display:none}
.sp-copy{min-height:100svh;align-items:flex-start;justify-content:center;padding:102px 20px 88px;text-align:center}
.sp-copy-inner{width:100%;max-width:390px;text-align:center;transform:none;margin:0 auto}
.sp-copy h1{font-size:40px;margin-bottom:16px;text-align:center}
.sp-features{justify-content:center;gap:10px;margin:0 auto 20px;max-width:340px}
.sp-feature{flex-direction:column;flex:1;gap:7px}.sp-feature span{width:44px;height:44px;font-size:15px}.sp-feature p{font-size:11px;line-height:1.35;text-align:center}
.sp-actions{justify-content:center;gap:12px}.sp-action{width:140px;height:106px;border-radius:20px;gap:9px}.sp-action i{font-size:28px}.sp-action strong{font-size:17px}.sp-enter{width:50px;height:50px;bottom:18px}
}
@media(max-width:390px){.sp-copy{padding-left:16px;padding-right:16px}.sp-copy h1{font-size:36px}.sp-action{width:132px}}


/* ===== Desktop right-side content fix ===== */
@media (min-width: 992px){
  .sp-copy{
    position:absolute;
    inset:0;
    height:100%;
    display:block;
    padding:0;
    pointer-events:none;
    z-index:4;
  }

  .sp-copy-inner{
    position:absolute;
    right:7.5vw;
    top:50%;
    transform:translateY(-42%);
    width:min(610px,36vw);
    text-align:right;
    pointer-events:auto;
    animation:rightContentIn 1s cubic-bezier(.16,1,.3,1) .18s both;
  }

  .sp-copy h1{
    font-size:clamp(58px,5.1vw,96px);
    line-height:1.05;
    margin-bottom:24px;
  }

  .sp-features,
  .sp-actions{
    justify-content:flex-start;
  }

  .sp-bg{
    background-position:center center;
  }
}

@keyframes rightContentIn{
  from{
    opacity:0;
    transform:translate(50px,-42%);
  }
  to{
    opacity:1;
    transform:translate(0,-42%);
  }
}


/* ===== Final tuning: desktop buttons + one-line title + mobile background ===== */
.sp-copy h1 .one-line-title{
  display:block;
  white-space:nowrap;
  color:#fff;
}

.sp-copy h1 .one-line-title::first-letter{
  color:inherit;
}

@media (min-width: 992px){
  .sp-copy h1{
    font-size:clamp(52px,4.7vw,88px) !important;
    line-height:1.1 !important;
    margin-bottom:28px !important;
  }

  .sp-actions{
    gap:34px !important;
  }

  .sp-action{
    width:260px !important;
    height:178px !important;
    border-radius:28px !important;
  }

  .sp-action i{
    font-size:48px !important;
  }

  .sp-action strong{
    font-size:29px !important;
  }
}

@media (max-width: 991px){
  .sp-bg{
    background-size:auto 100% !important;
    background-position:24% center !important;
  }

  .sp-copy{
    padding-top:104px !important;
  }

  .sp-copy h1{
    font-size:34px !important;
    line-height:1.15 !important;
    margin-bottom:18px !important;
  }

  .sp-copy h1 .one-line-title{
    white-space:nowrap;
  }

  .sp-actions{
    margin-bottom:18px !important;
  }
}

@media (max-width: 430px){
  .sp-bg{
    background-size:auto 92% !important;
    background-position:17% 58% !important;
  }

  .sp-copy h1{
    font-size:30px !important;
  }

  .sp-copy{
    padding-top:98px !important;
  }
}

@media (max-width: 370px){
  .sp-bg{
    background-size:auto 88% !important;
    background-position:16% 58% !important;
  }

  .sp-copy h1{
    font-size:27px !important;
  }
}


/* ===== Final spacing + premium buttons ===== */
@media (min-width: 992px){
  .sp-copy-inner{
    top:52% !important;
    transform:translateY(-45%) !important;
  }

  .sp-copy h1{
    margin-bottom:42px !important;
  }

  .sp-features{
    margin-bottom:44px !important;
    gap:30px !important;
    align-items:center !important;
  }

  .sp-feature{
    gap:14px !important;
  }

  .sp-actions{
    gap:42px !important;
  }

  .sp-action{
    position:relative !important;
    overflow:hidden !important;
    width:275px !important;
    height:188px !important;
    border-radius:30px !important;
    border:2px solid rgba(160,245,255,.98) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.20), transparent 34%),
      radial-gradient(circle at 50% 52%, rgba(24,214,255,.28), transparent 58%),
      linear-gradient(180deg, rgba(0,92,255,.62), rgba(0,36,190,.42)) !important;
    box-shadow:
      0 22px 55px rgba(0,18,130,.36),
      0 0 36px rgba(24,214,255,.68),
      inset 0 0 34px rgba(24,214,255,.22),
      inset 0 1px 0 rgba(255,255,255,.35) !important;
    transform:translateZ(0);
  }

  .sp-action::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 42%, transparent 62%);
    transform:translateX(135%) skewX(-18deg);
    transition:transform .75s ease;
    pointer-events:none;
  }

  .sp-action::after{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.14);
    pointer-events:none;
  }

  .sp-action:hover{
    transform:translateY(-8px) scale(1.015) !important;
    box-shadow:
      0 28px 68px rgba(0,18,130,.42),
      0 0 52px rgba(24,214,255,.92),
      inset 0 0 42px rgba(24,214,255,.30),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }

  .sp-action:hover::before{
    transform:translateX(-135%) skewX(-18deg);
  }

  .sp-action i{
    font-size:52px !important;
    text-shadow:0 0 18px rgba(24,214,255,.9);
    margin-bottom:2px;
  }

  .sp-action strong{
    font-size:31px !important;
    font-weight:700 !important;
    text-shadow:0 6px 16px rgba(0,0,0,.24);
  }
}

/* Mobile spacing refinement */
@media (max-width: 991px){
  .sp-copy h1{
    margin-bottom:24px !important;
  }

  .sp-features{
    margin-bottom:28px !important;
    gap:14px !important;
  }

  .sp-actions{
    gap:16px !important;
  }

  .sp-action{
    box-shadow:
      0 16px 36px rgba(0,18,130,.30),
      0 0 30px rgba(24,214,255,.65),
      inset 0 0 28px rgba(24,214,255,.20) !important;
  }
}


/* ===== Cinematic 3D logo + shiny side lines + car plate logo ===== */

/* 3D cinematic logo container */
.sp-logo-card,
.intro-logo img{
  position:relative;
}

.sp-logo-card{
  perspective:1100px;
  transform-style:preserve-3d;
}

.sp-logo-card::before{
  content:"";
  position:absolute;
  inset:-18px -28px;
  z-index:-1;
  border-radius:32px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.18), transparent 34%),
    radial-gradient(circle at 50% 54%, rgba(24,214,255,.30), transparent 62%);
  filter:blur(16px);
  opacity:.85;
  animation:logoAuraPulse 3.6s ease-in-out infinite alternate;
}

.sp-logo-card::after{
  content:"";
  position:absolute;
  top:8%;
  bottom:8%;
  width:34%;
  right:-38%;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.75) 48%, transparent 100%);
  transform:skewX(-18deg);
  filter:blur(3px);
  opacity:0;
  animation:logoShineSweep 3.8s ease-in-out 1.1s infinite;
}

.sp-logo-card img,
.intro-logo img{
  transform:rotateX(5deg) translateZ(20px);
  transform-origin:center;
  filter:
    drop-shadow(0 8px 0 rgba(0,20,130,.22))
    drop-shadow(0 0 10px rgba(255,255,255,.38))
    drop-shadow(0 0 22px rgba(24,214,255,.58)) !important;
  animation:
    logoDrop 1.05s cubic-bezier(.16,1,.3,1) both,
    logoCinematicFloat 4.5s ease-in-out 1.2s infinite alternate !important;
}

/* shiny side lines */
.sp-line,
.logo-line,
.intro-logo span{
  position:relative !important;
  overflow:hidden !important;
  height:2px !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.88), rgba(24,214,255,.95), rgba(255,255,255,.75), transparent) !important;
  box-shadow:
    0 0 14px rgba(24,214,255,.70),
    0 0 28px rgba(24,214,255,.34) !important;
}

.sp-line::after,
.logo-line::after,
.intro-logo span::after{
  content:"";
  position:absolute;
  top:-5px;
  width:70px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 18px rgba(255,255,255,.95),
    0 0 38px rgba(24,214,255,.95),
    0 0 70px rgba(24,214,255,.45);
  animation:lineSparkMove 2.9s ease-in-out infinite;
}

.sp-line:first-child::after,
.logo-line:first-child::after,
.intro-logo span:first-child::after{
  right:-20px;
}

.sp-line:last-child::after,
.logo-line:last-child::after,
.intro-logo span:last-child::after{
  left:-20px;
  animation-direction:reverse;
}

/* logo on the car plate - positioned over the background car plate */
.car-plate-logo{
  position:absolute;
  z-index:4;
  left:29.2%;
  top:68.2%;
  width:106px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px 7px;
  border-radius:5px;
  background:linear-gradient(180deg, rgba(0,14,45,.82), rgba(0,4,22,.92));
  border:1px solid rgba(143,240,255,.55);
  box-shadow:
    0 0 12px rgba(24,214,255,.42),
    inset 0 0 10px rgba(24,214,255,.18);
  transform:perspective(500px) rotateY(-3deg) rotateZ(-.5deg);
  pointer-events:none;
}

.car-plate-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 4px rgba(24,214,255,.65));
}

/* fallback if project uses intro-logo instead of sp-logo-card */
.intro-logo{
  perspective:1100px;
}

.intro-logo::before{
  content:"";
  position:absolute;
  width:min(360px,38vw);
  height:100px;
  border-radius:32px;
  background:radial-gradient(circle, rgba(24,214,255,.28), transparent 65%);
  filter:blur(16px);
  animation:logoAuraPulse 3.6s ease-in-out infinite alternate;
}

.intro-logo::after{
  content:"";
  position:absolute;
  top:15%;
  width:90px;
  height:70%;
  right:43%;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.72) 48%, transparent 100%);
  transform:skewX(-18deg);
  filter:blur(3px);
  opacity:0;
  animation:logoShineSweep 3.8s ease-in-out 1.1s infinite;
}

@keyframes logoCinematicFloat{
  0%{ transform:rotateX(5deg) rotateY(0deg) translateY(0) translateZ(20px); }
  100%{ transform:rotateX(7deg) rotateY(-3deg) translateY(-4px) translateZ(24px); }
}

@keyframes logoAuraPulse{
  from{ opacity:.48; transform:scale(.94); }
  to{ opacity:1; transform:scale(1.08); }
}

@keyframes logoShineSweep{
  0%, 28%{ opacity:0; transform:translateX(0) skewX(-18deg); }
  42%{ opacity:.95; }
  68%, 100%{ opacity:0; transform:translateX(-360%) skewX(-18deg); }
}

@keyframes lineSparkMove{
  0%, 100%{ transform:translateX(0); opacity:.35; }
  50%{ transform:translateX(210px); opacity:1; }
}

/* Plate responsive position */
@media (max-width: 991px){
  .car-plate-logo{
    left:23%;
    top:69%;
    width:76px;
    height:25px;
    padding:2px 5px;
  }

  .sp-logo-card::after,
  .intro-logo::after{
    display:none;
  }
}

@media (max-width: 430px){
  .car-plate-logo{
    left:19%;
    top:70%;
    width:62px;
    height:21px;
  }
}


/* ===== Remove logo shine and white background glow ===== */

.sp-logo-card::before,
.sp-logo-card::after,
.intro-logo::before,
.intro-logo::after{
    display:none !important;
    opacity:0 !important;
    animation:none !important;
}

.sp-logo-card img,
.intro-logo img{
    filter:
      drop-shadow(0 10px 18px rgba(0,0,0,.28))
      drop-shadow(0 0 12px rgba(24,214,255,.22)) !important;
    transform:translateZ(18px) rotateX(4deg) !important;
}

/* keep cinematic 3D without white aura */
.sp-logo-card,
.intro-logo{
    background:transparent !important;
    box-shadow:none !important;
}


/* ===== Enlarge features and main buttons ===== */
@media (min-width: 992px){
  .sp-features,
  .features{
    gap:42px !important;
    margin-bottom:52px !important;
  }

  .sp-feature,
  .feature{
    gap:18px !important;
  }

  .sp-feature span,
  .feature i{
    width:70px !important;
    height:70px !important;
    font-size:24px !important;
  }

  .sp-feature span::before,
  .feature i::after{
    inset:7px !important;
    border-width:2.2px !important;
    border-radius:14px !important;
  }

  .sp-feature p,
  .feature p{
    font-size:22px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
  }

  .sp-actions,
  .actions{
    gap:54px !important;
  }

  .sp-action,
  .action-card{
    width:310px !important;
    height:210px !important;
    border-radius:34px !important;
    border-width:2.5px !important;
  }

  .sp-action i,
  .action-card i{
    font-size:58px !important;
  }

  .sp-action strong,
  .action-card strong{
    font-size:34px !important;
    font-weight:700 !important;
  }
}

@media (max-width: 991px){
  .sp-feature span,
  .feature i{
    width:50px !important;
    height:50px !important;
    font-size:17px !important;
  }

  .sp-feature p,
  .feature p{
    font-size:12px !important;
  }

  .sp-action,
  .action-card{
    width:152px !important;
    height:116px !important;
  }

  .sp-action i,
  .action-card i{
    font-size:31px !important;
  }

  .sp-action strong,
  .action-card strong{
    font-size:18px !important;
  }
}


/* ===== Keep diamond shape + wider layout ===== */

@media (min-width: 992px){

  /* features row width */
  .sp-features,
  .features{
    width:100% !important;
    max-width:920px !important;
    justify-content:space-between !important;
    gap:28px !important;
  }

  .sp-feature,
  .feature{
    min-width:210px !important;
  }

  /* strict diamond */
  .sp-feature span,
  .feature i{
    width:72px !important;
    height:72px !important;
    border-radius:0 !important;
    transform:rotate(45deg) !important;
    border:2px solid rgba(135,245,255,.95) !important;
    background:linear-gradient(180deg, rgba(0,56,255,.28), rgba(0,56,255,.12)) !important;
    box-shadow:
      0 0 22px rgba(24,214,255,.34),
      inset 0 0 16px rgba(24,214,255,.18) !important;
  }

  .sp-feature span::before,
  .feature i::after{
    display:none !important;
  }

  .sp-feature span i,
  .feature i svg,
  .feature i::before{
    transform:rotate(-45deg) !important;
  }

  .sp-feature p,
  .feature p{
    max-width:145px !important;
    font-size:23px !important;
  }

  /* wider premium buttons */
  .sp-actions,
  .actions{
    width:100% !important;
    max-width:760px !important;
    justify-content:space-between !important;
    gap:36px !important;
  }

  .sp-action,
  .action-card{
    width:340px !important;
    height:220px !important;
  }

  .sp-action strong,
  .action-card strong{
    font-size:36px !important;
  }
}

/* Mobile */
@media (max-width: 991px){

  .sp-features,
  .features{
    width:100% !important;
    justify-content:center !important;
    gap:18px !important;
  }

  .sp-feature span,
  .feature i{
    width:52px !important;
    height:52px !important;
    border-radius:0 !important;
    transform:rotate(45deg) !important;
  }

  .sp-feature span i,
  .feature i svg,
  .feature i::before{
    transform:rotate(-45deg) !important;
  }

  .sp-actions,
  .actions{
    width:100% !important;
    justify-content:center !important;
    gap:18px !important;
  }

  .sp-action,
  .action-card{
    width:170px !important;
    height:124px !important;
  }
}


/* ===== Fix feature row to match reference: text then small rounded-diamond icon ===== */

@media (min-width: 992px){
  .sp-features,
  .features{
    width:100% !important;
    max-width:860px !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:34px !important;
    margin-bottom:46px !important;
    direction:rtl !important;
  }

  .sp-feature,
  .feature{
    min-width:auto !important;
    width:auto !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    text-align:right !important;
  }

  .sp-feature p,
  .feature p{
    order:1 !important;
    margin:0 !important;
    width:auto !important;
    max-width:128px !important;
    font-size:18px !important;
    line-height:1.28 !important;
    font-weight:600 !important;
    color:#fff !important;
    text-align:right !important;
    white-space:normal !important;
  }

  .sp-feature span,
  .feature i{
    order:2 !important;
    position:relative !important;
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    display:grid !important;
    place-items:center !important;
    transform:none !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    font-size:17px !important;
    filter:drop-shadow(0 0 10px rgba(24,214,255,.45)) !important;
  }

  .sp-feature span::before,
  .feature i::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:6px !important;
    transform:rotate(45deg) !important;
    border:1.6px solid rgba(143,240,255,.92) !important;
    border-radius:11px !important;
    background:linear-gradient(135deg, rgba(24,214,255,.14), rgba(0,56,255,.08)) !important;
    box-shadow:
      0 0 16px rgba(24,214,255,.38),
      inset 0 0 15px rgba(24,214,255,.12) !important;
    z-index:-1 !important;
  }

  .sp-feature span i,
  .feature i::before{
    position:relative !important;
    z-index:2 !important;
    transform:none !important;
  }
}

/* Same corrected structure on mobile */
@media (max-width: 991px){
  .sp-features,
  .features{
    max-width:330px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    gap:10px !important;
    direction:rtl !important;
  }

  .sp-feature,
  .feature{
    flex:1 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column-reverse !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    text-align:center !important;
  }

  .sp-feature p,
  .feature p{
    margin:0 !important;
    font-size:11px !important;
    line-height:1.3 !important;
    font-weight:600 !important;
    text-align:center !important;
    max-width:90px !important;
  }

  .sp-feature span,
  .feature i{
    position:relative !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    display:grid !important;
    place-items:center !important;
    transform:none !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    font-size:14px !important;
    filter:drop-shadow(0 0 9px rgba(24,214,255,.4)) !important;
  }

  .sp-feature span::before,
  .feature i::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:5px !important;
    transform:rotate(45deg) !important;
    border:1.4px solid rgba(143,240,255,.92) !important;
    border-radius:9px !important;
    background:linear-gradient(135deg, rgba(24,214,255,.14), rgba(0,56,255,.08)) !important;
    box-shadow:0 0 14px rgba(24,214,255,.32), inset 0 0 12px rgba(24,214,255,.10) !important;
    z-index:-1 !important;
  }

  .sp-feature span i,
  .feature i::before{
    position:relative !important;
    z-index:2 !important;
    transform:none !important;
  }
}


/* ===== Final Feature Alignment ===== */

/* icon on RIGHT side of text */
.sp-feature,
.feature{
    flex-direction:row-reverse !important;
}

/* mobile keep centered but icon right visually */
@media (max-width:991px){
  .sp-feature,
  .feature{
      flex-direction:row-reverse !important;
      justify-content:center !important;
      align-items:center !important;
      gap:10px !important;
  }

  .sp-feature p,
  .feature p{
      text-align:right !important;
  }
}

/* remove car plate logo */
.car-plate-logo,
.plate-logo,
.car-logo,
.license-logo{
    display:none !important;
}

.car-image::after,
.hero-car::after{
    display:none !important;
}


/* ===== Center align all content under heading ===== */

.hero-right,
.hero-content,
.sp-content{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
}

/* features row */
.sp-features,
.features{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:52px !important;
    margin-top:22px !important;
    margin-bottom:38px !important;
}

/* each feature */
.sp-feature,
.feature{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* buttons row */
.sp-actions,
.hero-actions,
.action-buttons{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:36px !important;
}

/* buttons size */
.sp-btn,
.hero-btn,
.action-btn{
    min-width:300px !important;
}

/* mobile responsive */
@media (max-width: 991px){

  .sp-features,
  .features{
      gap:18px !important;
      flex-wrap:nowrap !important;
      justify-content:center !important;
      align-items:flex-start !important;
  }

  .sp-actions,
  .hero-actions,
  .action-buttons{
      flex-direction:column !important;
      gap:18px !important;
      width:100% !important;
      align-items:center !important;
  }

  .sp-btn,
  .hero-btn,
  .action-btn{
      width:100% !important;
      max-width:320px !important;
      min-width:auto !important;
  }
}


/* language switch */

.lang-switch{
 position:fixed;
 top:24px;
 left:24px;
 width:56px;
 height:56px;
 border-radius:16px;
 border:1px solid rgba(143,240,255,.7);
 background:rgba(255,255,255,.08);
 backdrop-filter:blur(14px);
 color:#fff;
 font-size:15px;
 font-weight:700;
 z-index:9999;
 cursor:pointer;
 box-shadow:0 0 18px rgba(24,214,255,.28);
 transition:.3s ease;
}

.lang-switch:hover{
 transform:translateY(-3px);
 box-shadow:0 0 26px rgba(24,214,255,.5);
}

/* english layout */

body.english-mode{
 direction:ltr;
}

body.english-mode .hero-wrapper,
body.english-mode .hero-container{
 flex-direction:row-reverse !important;
}

body.english-mode .hero-content,
body.english-mode .hero-right{
 align-items:flex-start !important;
 text-align:left !important;
}

body.english-mode .hero-title{
 text-align:left !important;
}

body.english-mode .features{
 justify-content:flex-start !important;
}

body.english-mode .action-buttons{
 justify-content:flex-start !important;
}

body.english-mode .feature{
 flex-direction:row !important;
}

body.english-mode .feature p{
 text-align:left !important;
}

@media(max-width:991px){

 .lang-switch{
   top:16px;
   left:16px;
   width:48px;
   height:48px;
   border-radius:14px;
   font-size:13px;
 }

 body.english-mode .hero-wrapper,
 body.english-mode .hero-container{
   flex-direction:column !important;
 }

 body.english-mode .hero-content,
 body.english-mode .hero-right{
   align-items:center !important;
   text-align:center !important;
 }

 body.english-mode .features,
 body.english-mode .action-buttons{
   justify-content:center !important;
 }
}


/* ===== Correct bilingual layout: AR car left/content right, EN car right/content left ===== */
.lang-switch{
  position:fixed;
  top:24px;
  left:24px;
  z-index:9999;
  width:56px;
  height:56px;
  border-radius:16px;
  border:1px solid rgba(143,240,255,.78);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 0 18px rgba(24,214,255,.30);
}

/* Arabic: background/car left, content right */
body:not(.english-mode) .sp-bg,
body:not(.english-mode) .intro-bg{
  transform:scale(1.02) !important;
  background-position:center center !important;
}

@media (min-width:992px){
  body:not(.english-mode) .sp-copy,
  body:not(.english-mode) .intro-content{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    padding:0 !important;
    z-index:4 !important;
    pointer-events:none !important;
  }

  body:not(.english-mode) .sp-copy-inner,
  body:not(.english-mode) .content-box{
    position:absolute !important;
    right:7.5vw !important;
    left:auto !important;
    top:52% !important;
    transform:translateY(-45%) !important;
    width:min(760px,42vw) !important;
    text-align:center !important;
    pointer-events:auto !important;
  }

  body:not(.english-mode) .sp-features,
  body:not(.english-mode) .features,
  body:not(.english-mode) .sp-actions,
  body:not(.english-mode) .actions{
    justify-content:center !important;
  }
}

/* English: flip background image so car appears right, content left */
body.english-mode{
  direction:ltr !important;
}

body.english-mode .sp-bg,
body.english-mode .intro-bg{
  transform:scaleX(-1) scale(1.02) !important;
  background-position:center center !important;
}

@media (min-width:992px){
  body.english-mode .sp-copy,
  body.english-mode .intro-content{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    padding:0 !important;
    z-index:4 !important;
    pointer-events:none !important;
  }

  body.english-mode .sp-copy-inner,
  body.english-mode .content-box{
    position:absolute !important;
    left:7.5vw !important;
    right:auto !important;
    top:52% !important;
    transform:translateY(-45%) !important;
    width:min(760px,42vw) !important;
    text-align:center !important;
    pointer-events:auto !important;
  }

  body.english-mode .sp-copy h1,
  body.english-mode .content-box h1{
    direction:ltr !important;
    text-align:center !important;
    letter-spacing:-1px !important;
  }

  body.english-mode .sp-features,
  body.english-mode .features{
    direction:ltr !important;
    justify-content:center !important;
  }

  body.english-mode .sp-feature,
  body.english-mode .feature{
    flex-direction:row !important;
  }

  body.english-mode .sp-feature p,
  body.english-mode .feature p{
    text-align:left !important;
  }

  body.english-mode .sp-actions,
  body.english-mode .actions{
    justify-content:center !important;
  }
}

/* Mobile: keep layout centered, flip bg only for EN */
@media(max-width:991px){
  body.english-mode .sp-bg,
  body.english-mode .intro-bg{
    transform:scaleX(-1) scale(1.02) !important;
    background-position:center center !important;
  }

  body.english-mode .sp-copy-inner,
  body.english-mode .content-box,
  body:not(.english-mode) .sp-copy-inner,
  body:not(.english-mode) .content-box{
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.english-mode .sp-features,
  body.english-mode .features,
  body:not(.english-mode) .sp-features,
  body:not(.english-mode) .features,
  body.english-mode .sp-actions,
  body.english-mode .actions,
  body:not(.english-mode) .sp-actions,
  body:not(.english-mode) .actions{
    justify-content:center !important;
  }
}


/* finance partners slider */
.finance-strip{width:100%;max-width:780px;margin:34px auto 0;text-align:center}
.finance-strip h2{margin:0 0 14px;color:#fff;font-size:22px;font-weight:700;text-shadow:0 6px 16px rgba(0,0,0,.18)}
.finance-marquee{position:relative;width:100%;overflow:hidden;border:1px solid rgba(143,240,255,.45);border-radius:22px;background:rgba(255,255,255,.10);backdrop-filter:blur(10px);box-shadow:0 0 24px rgba(24,214,255,.24),inset 0 0 22px rgba(255,255,255,.06);padding:12px 0}
.finance-marquee:before,.finance-marquee:after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.finance-marquee:before{right:0;background:linear-gradient(90deg,transparent,rgba(0,56,255,.9))}
.finance-marquee:after{left:0;background:linear-gradient(270deg,transparent,rgba(0,56,255,.9))}
.finance-track{display:flex;width:max-content;gap:16px;animation:financeSlide 34s linear infinite}
.finance-logo{flex:0 0 132px;height:64px;border-radius:16px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;padding:10px 14px;box-shadow:0 8px 18px rgba(0,20,100,.18)}
.finance-logo img{max-width:100%;max-height:44px;object-fit:contain;display:block}
@keyframes financeSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
body.english-mode .finance-track{animation-name:financeSlideLTR}
@keyframes financeSlideLTR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(min-width:992px){.sp-copy-inner,.content-box{width:min(840px,47vw)!important}}
@media(max-width:991px){.finance-strip{max-width:340px;margin-top:22px}.finance-strip h2{font-size:16px;margin-bottom:10px}.finance-marquee{border-radius:18px;padding:9px 0}.finance-logo{flex-basis:104px;height:50px;border-radius:13px;padding:8px 10px}.finance-logo img{max-height:34px}.finance-track{gap:12px;animation-duration:28s}}


/* ===== FINAL POLISH: white title, correct buttons, seamless finance slider, mobile fix ===== */

/* Force main title white in both languages */
.sp-copy h1,
.content-box h1,
.sp-copy h1 span,
.content-box h1 span,
.sp-copy h1 [data-i18n="title"],
.content-box h1 [data-i18n="title"]{
  color:#fff !important;
  text-shadow:0 10px 26px rgba(0,0,0,.24), 0 0 20px rgba(255,255,255,.16) !important;
}

/* Fix action labels */
.sp-action strong,
.action-card strong,
.sp-action strong span,
.action-card strong span{
  color:#fff !important;
  display:block !important;
  font-weight:700 !important;
}

/* Desktop content placement */
@media(min-width:992px){
  body:not(.english-mode) .sp-copy-inner,
  body:not(.english-mode) .content-box{
    right:7.3vw !important;
    left:auto !important;
    width:min(840px,47vw) !important;
    text-align:center !important;
  }

  body.english-mode .sp-copy-inner,
  body.english-mode .content-box{
    left:7.3vw !important;
    right:auto !important;
    width:min(840px,47vw) !important;
    text-align:center !important;
  }

  body.english-mode .sp-bg,
  body.english-mode .intro-bg{
    transform:scaleX(-1) scale(1.02) !important;
    background-position:center center !important;
  }

  body:not(.english-mode) .sp-bg,
  body:not(.english-mode) .intro-bg{
    transform:scale(1.02) !important;
    background-position:center center !important;
  }

  .sp-copy h1,
  .content-box h1{
    font-size:clamp(46px,4.1vw,76px) !important;
    line-height:1.12 !important;
    white-space:nowrap !important;
    margin-bottom:32px !important;
  }

  .sp-features,
  .features{
    margin-bottom:34px !important;
  }

  .sp-actions,
  .actions{
    margin-bottom:0 !important;
  }
}

/* Seamless finance slider */
.finance-strip{
  width:100% !important;
  max-width:760px !important;
  margin:28px auto 0 !important;
  text-align:center !important;
}

.finance-strip h2{
  color:#fff !important;
  font-size:21px !important;
  font-weight:700 !important;
  margin:0 0 12px !important;
}

.finance-marquee{
  direction:ltr !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  border-radius:22px !important;
}

.finance-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  width:max-content !important;
  gap:16px !important;
  will-change:transform !important;
  animation:financeInfiniteRTL 30s linear infinite !important;
}

.finance-logo{
  flex:0 0 132px !important;
  width:132px !important;
  height:62px !important;
}

@keyframes financeInfiniteRTL{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

body.english-mode .finance-track{
  animation:financeInfiniteLTR 30s linear infinite !important;
}

@keyframes financeInfiniteLTR{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}

/* Mobile: balanced Arabic/English */
@media(max-width:991px){
  html,body{
    overflow:auto !important;
  }

  .sp-intro,
  .intro{
    min-height:100svh !important;
    height:auto !important;
  }

  body:not(.english-mode) .sp-bg,
  body:not(.english-mode) .intro-bg{
    transform:scale(1.02) !important;
    background-size:auto 100% !important;
    background-position:25% center !important;
  }

  body.english-mode .sp-bg,
  body.english-mode .intro-bg{
    transform:scaleX(-1) scale(1.02) !important;
    background-size:auto 100% !important;
    background-position:25% center !important;
  }

  .sp-copy,
  .intro-content{
    min-height:100svh !important;
    padding:94px 18px 92px !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }

  .sp-copy-inner,
  .content-box{
    width:100% !important;
    max-width:356px !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  .sp-copy h1,
  .content-box h1{
    font-size:28px !important;
    line-height:1.2 !important;
    white-space:normal !important;
    margin:10px 0 20px !important;
  }

  .sp-features,
  .features{
    width:100% !important;
    max-width:330px !important;
    margin:0 auto 22px !important;
    gap:8px !important;
    justify-content:space-between !important;
  }

  .sp-feature,
  .feature{
    flex:1 !important;
    min-width:0 !important;
  }

  .sp-feature p,
  .feature p{
    font-size:10px !important;
    line-height:1.25 !important;
    max-width:72px !important;
  }

  .sp-feature span,
  .feature i{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  .sp-actions,
  .actions{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    width:100% !important;
    max-width:250px !important;
    margin:0 auto 20px !important;
  }

  .sp-action,
  .action-card{
    width:100% !important;
    height:94px !important;
    border-radius:18px !important;
  }

  .sp-action i,
  .action-card i{
    font-size:26px !important;
  }

  .sp-action strong,
  .action-card strong{
    font-size:16px !important;
  }

  .finance-strip{
    max-width:330px !important;
    margin-top:14px !important;
  }

  .finance-strip h2{
    font-size:14px !important;
    margin-bottom:9px !important;
  }

  .finance-marquee{
    border-radius:16px !important;
    padding:8px 0 !important;
  }

  .finance-track{
    gap:10px !important;
    animation-duration:24s !important;
  }

  .finance-logo{
    flex-basis:96px !important;
    width:96px !important;
    height:46px !important;
    padding:7px 9px !important;
    border-radius:12px !important;
  }

  .finance-logo img{
    max-height:31px !important;
  }

  .sp-enter,
  .enter-site{
    bottom:16px !important;
  }
}

@media(max-width:390px){
  .sp-copy h1,
  .content-box h1{
    font-size:25px !important;
  }

  .sp-copy-inner,
  .content-box{
    max-width:330px !important;
  }
}


/* ===== RESTORE / FIX MAIN CTA BUTTONS VISIBILITY ===== */

/* make content stack explicit */
.sp-copy-inner,
.content-box{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

/* action row must stay visible between features and finance strip */
.sp-actions,
.actions{
  order:3 !important;
  position:relative !important;
  z-index:20 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  max-width:720px !important;
  justify-content:center !important;
  align-items:center !important;
  gap:34px !important;
  margin:6px auto 30px !important;
}

.finance-strip{
  order:4 !important;
}

/* strong premium buttons */
.sp-action,
.action-card{
  position:relative !important;
  z-index:21 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:315px !important;
  height:172px !important;
  min-width:315px !important;
  border-radius:28px !important;
  border:2.5px solid rgba(150,245,255,.98) !important;
  color:#fff !important;
  text-decoration:none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.24), transparent 34%),
    radial-gradient(circle at 50% 54%, rgba(24,214,255,.32), transparent 62%),
    linear-gradient(180deg, rgba(0,83,255,.72), rgba(0,31,180,.44)) !important;
  box-shadow:
    0 24px 58px rgba(0,22,140,.40),
    0 0 38px rgba(24,214,255,.72),
    inset 0 0 34px rgba(24,214,255,.24),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
  backdrop-filter:blur(8px) !important;
  overflow:hidden !important;
  cursor:pointer !important;
}

.sp-action::after,
.action-card::after{
  content:"" !important;
  position:absolute !important;
  inset:10px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  pointer-events:none !important;
}

.sp-action i,
.action-card i{
  display:block !important;
  color:#fff !important;
  font-size:46px !important;
  line-height:1 !important;
  margin-bottom:18px !important;
  filter:drop-shadow(0 0 12px rgba(24,214,255,.8)) !important;
}

.sp-action strong,
.action-card strong,
.sp-action strong span,
.action-card strong span{
  display:block !important;
  color:#fff !important;
  font-size:30px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-shadow:0 6px 14px rgba(0,0,0,.22) !important;
}

.sp-action:hover,
.action-card:hover{
  color:#fff !important;
  text-decoration:none !important;
  transform:translateY(-7px) scale(1.012) !important;
  box-shadow:
    0 30px 72px rgba(0,22,140,.46),
    0 0 54px rgba(24,214,255,.96),
    inset 0 0 42px rgba(24,214,255,.32) !important;
}

/* Desktop spacing: make room for buttons above finance */
@media(min-width:992px){
  .sp-features,
  .features{
    margin-bottom:34px !important;
  }

  .finance-strip{
    margin-top:0 !important;
  }
}

/* Mobile: show buttons clearly above finance */
@media(max-width:991px){
  .sp-actions,
  .actions{
    max-width:290px !important;
    flex-direction:column !important;
    gap:14px !important;
    margin:4px auto 18px !important;
  }

  .sp-action,
  .action-card{
    width:100% !important;
    min-width:0 !important;
    height:98px !important;
    border-radius:19px !important;
  }

  .sp-action i,
  .action-card i{
    font-size:28px !important;
    margin-bottom:8px !important;
  }

  .sp-action strong,
  .action-card strong,
  .sp-action strong span,
  .action-card strong span{
    font-size:17px !important;
  }

  .finance-strip{
    margin-top:6px !important;
  }
}


/* ===== Desktop order fix: title -> 3 features -> buttons -> finance ===== */
@media (min-width: 992px){

  .sp-copy-inner,
  .content-box{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
  }

  .sp-copy h1,
  .content-box h1{
    order:1 !important;
    margin-bottom:30px !important;
  }

  .sp-features,
  .features{
    order:2 !important;
    width:100% !important;
    max-width:760px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:36px !important;
    margin:0 auto 34px !important;
  }

  .sp-actions,
  .actions{
    order:3 !important;
    width:100% !important;
    max-width:720px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:34px !important;
    margin:0 auto 34px !important;
    position:relative !important;
    z-index:30 !important;
  }

  .finance-strip{
    order:4 !important;
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    position:relative !important;
    z-index:10 !important;
  }

  .sp-action,
  .action-card{
    width:315px !important;
    min-width:315px !important;
    height:172px !important;
  }
}


/* ===== Perfect desktop alignment ===== */
@media (min-width: 992px){

  .sp-copy{
    width:100%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding-inline:5vw;
  }

  .sp-copy-inner{
    width:min(760px, 100%);
    margin-inline-start:auto;
    margin-inline-end:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  body.english-mode .sp-copy{
    justify-content:flex-start;
  }

  body.english-mode .sp-copy-inner{
    margin-inline-start:0;
    margin-inline-end:auto;
  }

  .sp-copy h1{
    width:100%;
    text-align:center;
    margin-bottom:28px;
  }

  .sp-features{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:42px;
    margin:0 auto 34px;
  }

  .sp-actions{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:34px;
    margin:0 auto 38px;
  }

  .finance-strip{
    width:100%;
    max-width:760px;
    margin-inline:auto;
  }
}


@media (min-width: 992px) {
    .sp-actions, .actions {
        order: 3 !important;
        width: 100% !important;
        max-width: 720px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 34px !important;
        margin: 0 auto 34px !important;
        position: relative !important;
        z-index: 30 !important;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.lang-switch {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 3px solid rgb(143 240 255 / 95%);
    background: #03A9F4;
    backdrop-filter: blur(14px);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(24, 214, 255, .30);
}


.sp-enter {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
    border: 3.5px solid rgb(255 255 255 / 95%);
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #03A9F4;
    box-shadow: 0 0 22px rgba(24, 214, 255, .48), inset 0 0 22px rgba(24, 214, 255, .15);
    font-size: 26px;
    text-decoration: none;
    animation: arrowPulse 1.6s ease-in-out infinite;
}

/* =========================================================
   MOBILE RESPONSIVE REFINEMENT - Ultra Clean Layout
   الهدف: السيارة تحت خالص، مساحة زرقاء واضحة فوق، العناصر مرتبة
   ========================================================= */

@media (max-width: 991px){

  html,
  body{
    overflow:auto !important;
    min-height:100svh !important;
  }

  .sp-intro{
    min-height:100svh !important;
    height:100svh !important;
    overflow:hidden !important;
    background:#0038ff !important;
  }

  /* الخلفية أصغر والسيارة تنزل تحت */
  body:not(.english-mode) .sp-bg,
  body:not(.english-mode) .intro-bg{
    background-size:auto 74% !important;
    background-position:18% 100% !important;
    transform:scale(1) !important;
  }

  body.english-mode .sp-bg,
  body.english-mode .intro-bg{
    background-size:auto 74% !important;
    background-position:18% 100% !important;
    transform:scaleX(-1) scale(1) !important;
  }

  .sp-vignette{
    background:
      linear-gradient(180deg, rgba(0,56,255,.10) 0%, rgba(0,56,255,.02) 42%, rgba(0,30,210,.08) 100%),
      radial-gradient(circle at 50% 20%, rgba(255,255,255,.05), transparent 38%) !important;
  }

  /* الشعار أعلى بشكل مرتب */
  .sp-logo-head{
    top:18px !important;
    width:100% !important;
    padding:0 78px 0 78px !important;
    justify-content:center !important;
  }

  .sp-logo-card{
    width:190px !important;
    max-width:190px !important;
  }

  .sp-line{
    display:none !important;
  }

  .lang-switch{
    top:18px !important;
    left:18px !important;
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  /* المحتوى كله في الجزء الأزرق فوق */
  .sp-copy{
    position:relative !important;
    min-height:100svh !important;
    height:100svh !important;
    padding:94px 16px 96px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    pointer-events:none !important;
  }

  .sp-copy-inner{
    width:100% !important;
    max-width:360px !important;
    margin:0 auto !important;
    transform:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    pointer-events:auto !important;
  }

  .sp-copy h1{
    order:1 !important;
    width:100% !important;
    margin:4px auto 16px !important;
    font-size:25px !important;
    line-height:1.18 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    text-align:center !important;
    color:#fff !important;
  }

  .sp-copy h1 span,
  .sp-copy h1 [data-i18n="title"]{
    color:#fff !important;
    display:block !important;
  }

  /* الثلاث عناصر تحت العنوان */
  .sp-features{
    order:2 !important;
    width:100% !important;
    max-width:340px !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    gap:8px !important;
    margin:0 auto 16px !important;
    direction:rtl !important;
  }

  body.english-mode .sp-features{
    direction:ltr !important;
  }

  .sp-feature{
    flex:1 1 0 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    text-align:center !important;
  }

  .sp-feature span{
    order:1 !important;
    position:relative !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    display:grid !important;
    place-items:center !important;
    transform:none !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    font-size:13px !important;
    filter:drop-shadow(0 0 8px rgba(24,214,255,.42)) !important;
  }

  .sp-feature span::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:5px !important;
    transform:rotate(45deg) !important;
    border:1.4px solid rgba(143,240,255,.95) !important;
    border-radius:9px !important;
    background:linear-gradient(135deg, rgba(24,214,255,.14), rgba(0,56,255,.08)) !important;
    box-shadow:0 0 13px rgba(24,214,255,.32), inset 0 0 10px rgba(24,214,255,.10) !important;
    z-index:-1 !important;
  }

  .sp-feature p{
    order:2 !important;
    margin:0 !important;
    max-width:86px !important;
    font-size:10.5px !important;
    line-height:1.28 !important;
    font-weight:700 !important;
    text-align:center !important;
    color:#fff !important;
  }

  /* الأزرار واضحة فوق السيارة */
  .sp-actions{
    order:3 !important;
    width:100% !important;
    max-width:292px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    margin:0 auto 14px !important;
    position:relative !important;
    z-index:30 !important;
  }

  .sp-action{
    width:100% !important;
    min-width:0 !important;
    height:82px !important;
    border-radius:18px !important;
    border:2px solid rgba(150,245,255,.96) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.22), transparent 36%),
      linear-gradient(180deg, rgba(0,83,255,.60), rgba(0,31,180,.34)) !important;
    box-shadow:
      0 14px 34px rgba(0,22,140,.32),
      0 0 26px rgba(24,214,255,.52),
      inset 0 0 24px rgba(24,214,255,.18) !important;
    gap:6px !important;
  }

  .sp-action i{
    font-size:24px !important;
    margin:0 !important;
  }

  .sp-action strong,
  .sp-action strong span{
    font-size:15.5px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }

  /* تراك الشعارات أكبر وأكثر وضوحًا */
  .finance-strip{
    order:4 !important;
    width:100% !important;
    max-width:356px !important;
    margin:0 auto !important;
    position:relative !important;
    z-index:24 !important;
  }

  .finance-strip h2{
    font-size:13.5px !important;
    line-height:1.2 !important;
    margin:0 0 8px !important;
    font-weight:800 !important;
  }

  .finance-marquee{
    border-radius:18px !important;
    padding:9px 0 !important;
    background:rgba(255,255,255,.13) !important;
  }

  .finance-track{
    gap:12px !important;
    animation-duration:26s !important;
  }

  .finance-logo{
    flex:0 0 116px !important;
    width:116px !important;
    height:54px !important;
    border-radius:14px !important;
    padding:8px 10px !important;
  }

  .finance-logo img{
    max-height:38px !important;
  }

  /* سهم الدخول تحت وواضح */
  .sp-enter{
    width:52px !important;
    height:52px !important;
    bottom:16px !important;
    border-radius:16px !important;
    z-index:40 !important;
  }
}

/* أجهزة صغيرة جدًا */
@media (max-width: 380px){
  body:not(.english-mode) .sp-bg,
  body:not(.english-mode) .intro-bg{
    background-size:auto 70% !important;
    background-position:18% 100% !important;
  }

  body.english-mode .sp-bg,
  body.english-mode .intro-bg{
    background-size:auto 70% !important;
    background-position:18% 100% !important;
    transform:scaleX(-1) scale(1) !important;
  }

  .sp-copy{
    padding-top:88px !important;
  }

  .sp-logo-card{
    width:170px !important;
  }

  .sp-copy h1{
    font-size:23px !important;
    margin-bottom:13px !important;
  }

  .sp-feature p{
    font-size:9.5px !important;
  }

  .sp-actions{
    max-width:270px !important;
  }

  .sp-action{
    height:76px !important;
  }

  .finance-strip{
    max-width:330px !important;
  }

  .finance-logo{
    flex-basis:106px !important;
    width:106px !important;
    height:50px !important;
  }
}

/* =========================================================
   GREEN THEME OVERRIDE — أزرار الإجراءات وزر تبديل اللغة
   يجب أن يبقى هذا البلوك في آخر الملف حتى يتغلب على القواعد السابقة
   ========================================================= */
:root{
  --green:#00a86b;
  --green-deep:#046a45;
  --green-light:#3ee89b;
  --green-glow:62,232,155;
}

/* أزرار "اختر سيارتك" و "قدم طلبك" */
.sp-action,
.action-card{
  border-color:rgba(120,255,196,.98) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.24), transparent 34%),
    radial-gradient(circle at 50% 54%, rgba(var(--green-glow),.32), transparent 62%),
    linear-gradient(180deg, rgba(0,168,107,.78), rgba(4,86,58,.52)) !important;
  box-shadow:
    0 24px 58px rgba(0,60,38,.40),
    0 0 38px rgba(var(--green-glow),.62),
    inset 0 0 34px rgba(var(--green-glow),.22),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}

.sp-action:hover,
.action-card:hover{
  box-shadow:
    0 30px 72px rgba(0,60,38,.46),
    0 0 54px rgba(var(--green-glow),.88),
    inset 0 0 42px rgba(var(--green-glow),.30) !important;
}

.sp-action i,
.action-card i{
  filter:drop-shadow(0 0 12px rgba(var(--green-glow),.75)) !important;
}

/* زر تبديل اللغة EN / AR */
.lang-switch{
  border-color:rgba(120,255,196,.95) !important;
  background:var(--green) !important;
  box-shadow:0 0 18px rgba(var(--green-glow),.35) !important;
}

.lang-switch:hover{
  box-shadow:0 0 26px rgba(var(--green-glow),.6) !important;
}

/* سهم الدخول أسفل الشاشة */
.sp-enter{
  background:var(--green) !important;
  box-shadow:0 0 22px rgba(var(--green-glow),.48), inset 0 0 22px rgba(var(--green-glow),.15) !important;
}

/* نسخة الموبايل من الأزرار */
@media (max-width: 991px){
  .sp-action{
    border-color:rgba(120,255,196,.96) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.22), transparent 36%),
      linear-gradient(180deg, rgba(0,168,107,.68), rgba(4,86,58,.42)) !important;
    box-shadow:
      0 14px 34px rgba(0,60,38,.32),
      0 0 26px rgba(var(--green-glow),.46),
      inset 0 0 24px rgba(var(--green-glow),.18) !important;
  }
}