/* =========================================================
   ABOU HAMZE AUTO CENTER — Coming Soon
   Palette pulled straight from the logo: racing yellow on black
   ========================================================= */

:root{
  --yellow:      #FFD400;
  --yellow-soft: #FFE45C;
  --yellow-deep: #C9A400;
  --black:       #050505;
  --carbon:      #0C0C0C;
  --smoke:       #151515;
  --line:        rgba(255,212,0,.16);
  --white:       #FFFFFF;
  --muted:       #A3A3A3;

  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --body:    'Barlow Condensed', 'Segoe UI', Tahoma, sans-serif;

  --shadow-glow: 0 0 40px rgba(255,212,0,.28);
  --ease: cubic-bezier(.16,1,.3,1);
}

html[lang="ar"]{
  --display: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --body:    'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--yellow); color:#000; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0a0a0a; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--yellow),var(--yellow-deep)); border-radius:10px; }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.done{ opacity:0; visibility:hidden; }
.gear-spin{ width:78px; height:78px; fill:var(--yellow); animation:spin 2.4s linear infinite;
  filter:drop-shadow(0 0 18px rgba(255,212,0,.55)); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.preloader-text{
  font-family:var(--display); letter-spacing:.28em; font-size:.8rem;
  color:var(--yellow); opacity:.75; animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  transition:background .4s var(--ease), backdrop-filter .4s, padding .4s var(--ease);
}
.topbar.stuck{
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:8px 22px;
}
.topbar-brand img{ height:44px; width:auto; transition:height .4s var(--ease); }
.topbar.stuck .topbar-brand img{ height:36px; }
/* Logo only appears in the bar once the hero logo scrolls away */
.topbar-brand{ opacity:0; transform:translateY(-8px); transition:opacity .4s, transform .4s; pointer-events:none; }
.topbar.stuck .topbar-brand{ opacity:1; transform:none; pointer-events:auto; }

.lang-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,212,0,.07);
  border:1px solid var(--line);
  color:var(--yellow);
  font-family:var(--body); font-size:1rem; font-weight:600; letter-spacing:.06em;
  padding:8px 16px; border-radius:999px; cursor:pointer;
  transition:.3s var(--ease);
}
.lang-toggle:hover{ background:var(--yellow); color:#000; box-shadow:var(--shadow-glow); }
.lang-flag{
  font-family:var(--display); font-size:.72rem; letter-spacing:.1em;
  background:var(--yellow); color:#000; border-radius:4px; padding:2px 6px;
  transition:.3s;
}
.lang-toggle:hover .lang-flag{ background:#000; color:var(--yellow); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:110px 20px 60px;
  overflow:hidden;
  isolation:isolate;
}

/* Cinematic photo layer — assets/banner.jpg */
.hero-photo{
  position:absolute; inset:0; z-index:-5;
  background:url('../assets/banner.jpg') center 58% / cover no-repeat;
  opacity:.8;
  filter:contrast(1.06) brightness(.72) saturate(1.05);
  /* fade the bottom edge so the hero melts into the next section */
  mask-image:linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.35) 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,.35) 90%, transparent 100%);
  animation:slowZoom 30s ease-in-out infinite alternate;
}
@keyframes slowZoom{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }

/* Dark scrim over the photo — keeps the logo and headline readable,
   lets the car and the yellow reflections breathe around the edges */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 62% at 50% 46%,
        rgba(5,5,5,.94) 0%, rgba(5,5,5,.86) 38%, rgba(5,5,5,.45) 72%, transparent 100%),
    linear-gradient(to bottom,
        rgba(5,5,5,.88) 0%, rgba(5,5,5,.45) 20%, rgba(5,5,5,.25) 55%, rgba(5,5,5,.9) 100%);
}

/* Carbon-fibre style grid */
.hero-grid{
  position:absolute; inset:-2px; z-index:-3;
  background-image:
    linear-gradient(rgba(255,212,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,212,0,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 75%);
  animation:gridDrift 22s linear infinite;
}
@keyframes gridDrift{ to{ background-position:64px 64px, 64px 64px; } }

/* Warm glow behind the logo, exactly like the logo artwork */
.hero-glow{
  position:absolute; z-index:-2; mix-blend-mode:screen;
  width:min(1100px,120vw); height:min(1100px,120vw);
  left:50%; top:42%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,
      rgba(255,212,0,.20) 0%,
      rgba(255,212,0,.09) 32%,
      rgba(255,212,0,.02) 55%,
      transparent 70%);
  animation:breathe 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breathe{
  0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.08); }
}

/* Headlight sweep across the hero */
.hero-sweep{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,212,0,.07) 48%, rgba(255,255,255,.05) 50%, rgba(255,212,0,.07) 52%, transparent 60%);
  background-size:250% 100%;
  animation:sweep 9s ease-in-out infinite;
}
@keyframes sweep{
  0%,65%{ background-position:180% 0; }
  100%  { background-position:-80% 0; }
}

.sparks{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

.hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:960px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

.logo-wrap{ position:relative; margin-bottom:18px; }
.hero-logo{
  width:min(560px,86vw);
  filter:drop-shadow(0 0 45px rgba(255,212,0,.45));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

.badge{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); background:rgba(255,212,0,.06);
  border-radius:999px; padding:7px 18px;
  font-size:.86rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:22px;
}
.badge-dot{
  width:8px; height:8px; border-radius:50%; background:var(--yellow);
  box-shadow:0 0 0 0 rgba(255,212,0,.6);
  animation:ping 1.8s infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(255,212,0,.55); }
  70%{ box-shadow:0 0 0 12px rgba(255,212,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,212,0,0); }
}

.title{
  font-family:var(--display);
  font-size:clamp(3rem, 12vw, 8.5rem);
  line-height:.92;
  letter-spacing:.02em;
  font-style:italic;
  margin-bottom:18px;
}
.title-shine{
  display:inline-block;
  /* The italic slant pushes glyph ink past the box; background-clip:text only
     paints inside the box, so without this padding the last letter loses its tail. */
  padding:.06em .2em .06em .12em;
  background:linear-gradient(100deg,
      #F0B900 0%, var(--yellow) 20%, #FFFFFF 40%,
      var(--yellow) 58%, #F0B900 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shine 5s linear infinite;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.75)) drop-shadow(0 8px 30px rgba(255,212,0,.4));
}
@keyframes shine{ to{ background-position:-250% 0; } }

.subtitle{
  max-width:660px;
  color:var(--muted);
  font-size:clamp(1rem,2.2vw,1.22rem);
  margin-bottom:38px;
}

/* ---------- Countdown ---------- */
.countdown{
  display:flex; align-items:flex-start; justify-content:center; gap:6px;
  margin-bottom:40px;
  direction:ltr;
}
.cd-unit{
  position:relative;
  min-width:96px;
  padding:16px 12px 12px;
  background:linear-gradient(160deg, rgba(255,212,0,.09), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:14px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  overflow:hidden;
}
.cd-unit::before{
  content:''; position:absolute; top:0; left:12%; right:12%; height:2px;
  background:linear-gradient(90deg, transparent, var(--yellow), transparent);
}
.cd-num{
  font-family:var(--display);
  font-size:clamp(2rem,6vw,3.2rem); line-height:1;
  color:var(--yellow);
  text-shadow:0 0 22px rgba(255,212,0,.5);
  font-variant-numeric:tabular-nums;
}
.cd-num.tick{ animation:tick .45s var(--ease); }
@keyframes tick{
  0%{ transform:translateY(-40%) scale(1.15); opacity:.2; filter:blur(3px); }
  100%{ transform:none; opacity:1; filter:none; }
}
.cd-label{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.cd-sep{
  font-family:var(--display); font-size:2rem; color:var(--yellow-deep);
  align-self:center; padding-top:6px; animation:pulse 1s steps(2,end) infinite;
}

/* ---------- Buttons ---------- */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  font-family:var(--body); font-size:1.05rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  border-radius:999px;
  border:2px solid var(--yellow);
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
}
.btn-ico{ width:20px; height:20px; fill:currentColor; flex-shrink:0; }
.btn-primary{ background:var(--yellow); color:#000; box-shadow:0 8px 30px rgba(255,212,0,.25); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 44px rgba(255,212,0,.5); }
.btn-ghost{ background:transparent; color:var(--yellow); }
.btn-ghost:hover{ background:var(--yellow); color:#000; transform:translateY(-3px); box-shadow:0 12px 44px rgba(255,212,0,.35); }
.btn::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-22deg); transition:left .7s var(--ease);
}
.btn:hover::after{ left:140%; }

/* ---------- Scroll hint ---------- */
.scroll-hint{
  margin-top:54px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
  transition:color .3s;
}
.scroll-hint:hover{ color:var(--yellow); }
.mouse{
  width:24px; height:38px; border:2px solid currentColor; border-radius:14px;
  display:flex; justify-content:center; padding-top:6px;
}
.wheel{ width:3px; height:7px; border-radius:2px; background:currentColor; animation:wheel 1.7s infinite; }
@keyframes wheel{ 0%{ opacity:0; transform:translateY(-3px);} 40%{opacity:1} 100%{ opacity:0; transform:translateY(12px);} }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding:110px 22px; max-width:1180px; margin:0 auto; }
.section-head{ text-align:center; max-width:700px; margin:0 auto 58px; }
.eyebrow{
  display:inline-block; font-size:.76rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:14px;
  position:relative; padding:0 34px;
}
.eyebrow::before,.eyebrow::after{
  content:''; position:absolute; top:50%; width:24px; height:1px; background:var(--yellow-deep);
}
.eyebrow::before{ left:0; } .eyebrow::after{ right:0; }
.section-title{
  font-family:var(--display); font-style:italic;
  font-size:clamp(2rem,6vw,3.6rem); line-height:1.02; letter-spacing:.01em;
  margin-bottom:14px;
  padding:.04em .18em .04em .1em; /* room for the italic overhang */
  background:linear-gradient(180deg,#fff 25%, #B9B9B9 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.section-sub{ color:var(--muted); font-size:1.08rem; }

/* ---------- Service cards ---------- */
.cards{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.card{
  position:relative; overflow:hidden;
  padding:34px 28px;
  background:linear-gradient(165deg, var(--smoke), var(--carbon));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.card::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--yellow),var(--yellow-deep));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.card:hover{ transform:translateY(-8px); border-color:var(--line); box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,212,0,.1); }
.card:hover::before{ transform:scaleX(1); }
.card-ico{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,212,0,.1); border:1px solid var(--line);
  margin-bottom:20px; transition:.4s var(--ease);
}
.card-ico svg{ width:28px; height:28px; fill:var(--yellow); }
.card:hover .card-ico{ background:var(--yellow); transform:rotate(-8deg) scale(1.06); box-shadow:var(--shadow-glow); }
.card:hover .card-ico svg{ fill:#000; }
.card h3{
  font-family:var(--display); font-style:italic; font-size:1.42rem; letter-spacing:.02em;
  margin-bottom:8px; color:var(--white);
}
.card p{ color:var(--muted); font-size:1rem; }

/* ---------- Car trading band ---------- */
.card-wide{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:36px;
  padding:42px 40px;
  background:
    radial-gradient(ellipse 70% 140% at 88% 50%, rgba(255,212,0,.16), transparent 70%),
    linear-gradient(120deg, var(--smoke), var(--carbon));
  border-color:var(--line);
}
.card-wide::before{ transform:scaleX(1); }
.cw-text{ flex:1 1 auto; }
.cw-tag{
  display:inline-block; margin-bottom:10px;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:#000; background:var(--yellow); border-radius:999px; padding:4px 14px;
}
.card-wide h3{ font-size:clamp(1.7rem,4vw,2.6rem); margin-bottom:10px; }
.card-wide p{ max-width:62ch; margin-bottom:22px; }
.cw-btn{ padding:13px 26px; font-size:.98rem; }
.cw-art{ flex:0 0 240px; opacity:.9; }
.cw-art svg{ width:100%; height:auto; fill:var(--yellow); filter:drop-shadow(0 0 26px rgba(255,212,0,.35)); }

@media (max-width:860px){
  .card-wide{ flex-direction:column-reverse; text-align:center; padding:34px 24px; gap:18px; }
  .card-wide p{ margin-inline:auto; }
  .cw-art{ flex:0 0 auto; width:190px; }
}

/* ---------- Contact ---------- */
.contact{ padding-top:20px; }
.contact-grid{
  display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:64px;
}
.contact-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:34px 22px;
  background:linear-gradient(165deg, rgba(255,212,0,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  transition:transform .4s var(--ease), border-color .4s, background .4s, box-shadow .4s;
}
.contact-card:hover{
  transform:translateY(-6px);
  border-color:var(--yellow);
  background:linear-gradient(165deg, rgba(255,212,0,.13), rgba(255,255,255,.02));
  box-shadow:0 20px 50px rgba(0,0,0,.55);
}
.cc-ico{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--yellow); margin-bottom:6px;
  box-shadow:0 0 26px rgba(255,212,0,.35);
  transition:transform .4s var(--ease);
}
.contact-card:hover .cc-ico{ transform:scale(1.1) rotate(6deg); }
.cc-ico svg{ width:26px; height:26px; fill:#000; }
.cc-label{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.cc-value{ font-family:var(--display); font-style:italic; font-size:1.25rem; color:var(--white); letter-spacing:.02em; }

/* ---------- Notify ---------- */
.notify{
  max-width:760px; margin:0 auto; text-align:center;
  padding:44px 28px;
  border:1px solid var(--line); border-radius:22px;
  background:
    radial-gradient(ellipse at top, rgba(255,212,0,.10), transparent 65%),
    var(--carbon);
}
.notify-title{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.4rem,4vw,2.1rem); margin-bottom:24px; color:var(--white);
}
.notify-form{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.notify-form input{
  flex:1 1 210px; min-width:0;
  padding:15px 20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:var(--white); font-family:var(--body); font-size:1.05rem;
  transition:.3s var(--ease);
}
.notify-form input::placeholder{ color:#6f6f6f; }
.notify-form input:focus{
  outline:none; border-color:var(--yellow); background:rgba(255,212,0,.06);
  box-shadow:0 0 0 4px rgba(255,212,0,.12);
}
.notify-form input.invalid{ border-color:#ff5a5a; box-shadow:0 0 0 4px rgba(255,90,90,.14); }
.notify-note{ margin-top:18px; font-size:.92rem; color:#7d7d7d; }
.notify-note.ok{ color:var(--yellow); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:relative; text-align:center;
  padding:56px 22px 90px;
  background:linear-gradient(180deg, transparent, rgba(255,212,0,.045));
}
.footer-line{
  height:2px; width:min(560px,80%); margin:0 auto 34px;
  background:linear-gradient(90deg, transparent, var(--yellow), transparent);
  opacity:.55;
}
.footer-logo{ width:190px; margin:0 auto 20px; filter:drop-shadow(0 0 24px rgba(255,212,0,.3)); }
.footer-manager{ margin-bottom:12px; display:flex; flex-direction:column; gap:2px; }
.fm-label{ font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.footer-manager strong{
  font-family:var(--display); font-style:italic; font-size:1.35rem; color:var(--yellow); letter-spacing:.02em;
}
.footer-meta{ color:var(--muted); font-size:1rem; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.footer-meta a:hover{ color:var(--yellow); }
.dot{ color:var(--yellow-deep); }
.footer-copy{ margin-top:16px; font-size:.85rem; color:#5f5f5f; letter-spacing:.04em; }

/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .3s var(--ease);
}
.fab:hover{ transform:scale(1.1) translateY(-2px); }
.fab svg{ width:30px; height:30px; fill:#fff; position:relative; z-index:2; }
.fab-pulse{
  position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.55;
  animation:fabPulse 2.4s ease-out infinite;
}
@keyframes fabPulse{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.10s; }
.reveal[data-delay="2"]{ transition-delay:.20s; }
.reveal[data-delay="3"]{ transition-delay:.30s; }
.reveal[data-delay="4"]{ transition-delay:.40s; }
.reveal[data-delay="5"]{ transition-delay:.50s; }

/* =========================================================
   ARABIC / RTL
   ========================================================= */
html[dir="rtl"] .eyebrow{ letter-spacing:0; }
html[dir="rtl"] .badge{ letter-spacing:0; }
html[dir="rtl"] .cd-label{ letter-spacing:0; }
html[dir="rtl"] .cc-label,
html[dir="rtl"] .fm-label,
html[dir="rtl"] .scroll-hint{ letter-spacing:.08em; }
html[dir="rtl"] .btn{ letter-spacing:0; }
/* Arabic letters must stay joined — kill all tracking on Arabic text */
html[dir="rtl"] .title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .card h3,
html[dir="rtl"] .cc-value,
html[dir="rtl"] .notify-title,
html[dir="rtl"] .footer-manager strong,
html[dir="rtl"] .preloader-text{ font-style:normal; letter-spacing:0; }
html[dir="rtl"] .title{ font-size:clamp(2.6rem, 10vw, 7rem); line-height:1.15; }
html[dir="rtl"] .cd-num{ letter-spacing:0; }
/* Latin runs inside Arabic keep their direction */
html[dir="rtl"] [dir="ltr"]{ unicode-bidi:isolate; }
html[dir="rtl"] .fab{ right:auto; left:20px; }
html[dir="rtl"] .cw-art svg{ transform:scaleX(-1); } /* car faces the text */

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:720px){
  body{ font-size:17px; }
  .hero{ padding:96px 18px 50px; }
  .countdown{ gap:4px; }
  .cd-unit{ min-width:72px; padding:12px 8px 10px; border-radius:12px; }
  .cd-sep{ font-size:1.4rem; }
  .cd-label{ font-size:.6rem; letter-spacing:.12em; }
  .btn{ padding:13px 22px; font-size:.95rem; }
  .section{ padding:80px 18px; }
  .card{ padding:28px 22px; }
  .notify{ padding:34px 20px; }
  .notify-form input{ flex:1 1 100%; }
  .notify-form .btn{ width:100%; justify-content:center; }
  .footer{ padding-bottom:100px; }
}

@media (max-width:400px){
  .cd-unit{ min-width:62px; }
  .cd-sep{ display:none; }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; border-radius:4px; }