/* ============================================================================
   First 1 Car — Design system
   Brand: neon green (#22c55e) + violet (#9333ea) on near-black, taken from
   the logo and the internal system's existing look.
   ============================================================================ */

:root{
  /* brand */
  --green:#22c55e;   --green-2:#4ade80;  --green-dim:rgba(34,197,94,.14);
  --violet:#9333ea;  --violet-2:#a855f7; --violet-dim:rgba(147,51,234,.14);

  /* surfaces */
  --bg:#020617;      --bg-2:#070d1c;     --bg-3:#0b1220;
  --surface:rgba(15,23,42,.72);
  --surface-solid:#0d1526;
  --border:rgba(255,255,255,.08);
  --border-hi:rgba(255,255,255,.18);

  /* text */
  --text:#f1f5f9;    --muted:#94a3b8;    --faint:#64748b;

  /* type */
  --font-ar:'Tajawal',system-ui,sans-serif;
  --font-en:'Inter',system-ui,sans-serif;

  /* shape */
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:36px;
  --shell:min(1240px,92vw);

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --tr:.45s var(--ease);

  --nav-h:74px;
}

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

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

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ar);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html[lang="en"] body{font-family:var(--font-en);line-height:1.65}

/* the page sits above the fixed canvas backdrop */
main,footer,header{position:relative;z-index:2}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--violet);color:#fff}

/* ── Typography ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{line-height:1.2;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.6vw,4rem);text-wrap:balance}
h2{font-size:clamp(1.75rem,4vw,2.9rem);text-wrap:balance}
h3{font-size:clamp(1.2rem,2.4vw,1.6rem)}
p{color:var(--muted)}

.lead{font-size:clamp(1.02rem,2.1vw,1.22rem);color:var(--muted);max-width:62ch}

/* gradient headline text */
.grad{
  background:linear-gradient(110deg,var(--green) 0%,var(--green-2) 32%,var(--violet-2) 78%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.grad-v{
  background:linear-gradient(110deg,var(--violet-2),var(--green-2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.shell{width:var(--shell);margin-inline:auto}
.section{padding:clamp(72px,11vw,148px) 0;position:relative}
.section-head{margin-bottom:clamp(36px,5vw,64px);max-width:70ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-2);
  background:var(--green-dim);
  border:1px solid rgba(34,197,94,.28);
  padding:.42rem 1rem;border-radius:999px;margin-bottom:1.15rem;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--green);box-shadow:0 0 10px var(--green);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.9rem;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:.97rem;cursor:pointer;
  transition:transform var(--tr),box-shadow var(--tr),background var(--tr),border-color var(--tr);
  will-change:transform;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}

.btn-primary{
  background:linear-gradient(135deg,var(--green),#16a34a);
  color:#04140a;
  box-shadow:0 10px 30px -10px rgba(34,197,94,.7);
}
.btn-primary:hover{box-shadow:0 18px 44px -12px rgba(34,197,94,.85)}

.btn-violet{
  background:linear-gradient(135deg,var(--violet-2),var(--violet));
  color:#fff;
  box-shadow:0 10px 30px -10px rgba(147,51,234,.7);
}
.btn-violet:hover{box-shadow:0 18px 44px -12px rgba(147,51,234,.85)}

.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--border-hi);
  color:var(--text);
  backdrop-filter:blur(12px);
}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--green)}

/* ── Cards / glass ────────────────────────────────────────────────────── */
.glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.card{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(15,23,42,.9),rgba(7,13,28,.75));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,2rem);
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr);
}
/* the sweep of light that follows the cursor */
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity var(--tr);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgba(34,197,94,.13),transparent 62%);
}
.card:hover{
  transform:translateY(-7px);
  border-color:rgba(34,197,94,.4);
  box-shadow:0 26px 60px -28px rgba(34,197,94,.55);
}
.card:hover::before{opacity:1}

/* ── Scroll reveal ────────────────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(38px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}
.reveal[data-delay="5"]{transition-delay:.45s}

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

/* ── Utility ──────────────────────────────────────────────────────────── */
.center{text-align:center}
.center .lead{margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* numbers stay latin & LTR even inside Arabic text */
.num{font-family:var(--font-en);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* mirror-safe icons in RTL */
html[dir="rtl"] .flip{transform:scaleX(-1)}