/* =========================================================
   حافلتي — Design System
   Palette:
     --ink:        #0E1F17   (deep pine text)
     --ink-soft:    #4A5D54   (muted body text)
     --green:       #17A34A  (primary brand green)
     --green-deep:  #0B5C33  (deep green / dark sections)
     --teal:        #0E9488  (gradient partner to green)
     --paper:       #FBFDFC  (page background)
     --mist:        #F1F6F3  (card / section background)
     --line:        #E3EBE6  (hairline borders)
     --amber:       #E8A33D  (alert / attention accent, used sparingly)
   Type:
     Display: "Tajawal" (700/800) — bold geometric Arabic display
     Body:    "IBM Plex Sans Arabic" (400/500) — clean utility body
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap');

:root{
  --ink: #0E1F17;
  --ink-soft: #4A5D54;
  --green: #17A34A;
  --green-deep: #0B5C33;
  --teal: #0E9488;
  --paper: #FBFDFC;
  --mist: #F1F6F3;
  --mist-2: #E9F2ED;
  --line: #E3EBE6;
  --amber: #E8A33D;
  --red: #D8483F;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(14,31,23,.05);
  --shadow-md: 0 12px 32px rgba(14,31,23,.09);
  --container: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans Arabic", "Tajawal", sans-serif;
  direction: rtl;
  text-align: right;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:"Tajawal", sans-serif;
  font-weight:800;
  margin:0;
  color: var(--ink);
  letter-spacing:-.01em;
}
p{ margin:0; }
.container{ max-width: var(--container); margin:0 auto; padding:0 28px; }
section{ position:relative; }

/* -------- focus & motion -------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ================= NAV ================= */
.nav{
  position: sticky; top:0; z-index:60;
  background: rgba(251,253,252,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:var(--container); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:40px; height:40px; border-radius:10px; }
.brand span{ font-family:"Tajawal"; font-weight:800; font-size:19px; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:15px; font-weight:600; color:var(--ink-soft);
  padding:6px 2px; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; right:0; left:0; bottom:-3px; height:2px;
  background:var(--green); transform:scaleX(0); transition:transform .25s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--ink); }
.nav-cta{
  display:flex; align-items:center; gap:12px;
}
.burger{ display:none; background:none; border:none; padding:8px; cursor:pointer; }
.burger span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; }

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"IBM Plex Sans Arabic"; font-weight:600; font-size:15px;
  padding:12px 24px; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--green) 0%, var(--teal) 100%);
  color:#fff; box-shadow: 0 8px 20px rgba(23,163,74,.28);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(23,163,74,.36); }
.btn-ghost{
  background:transparent; border-color: var(--line); color:var(--ink);
}
.btn-ghost:hover{ border-color: var(--green); color: var(--green-deep); }
.btn-dark{
  background: var(--ink); color:#fff;
}
.btn-dark:hover{ background: var(--green-deep); }
.btn-sm{ padding:9px 18px; font-size:14px; }

/* ================= EYEBROW / LABEL ================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color: var(--green-deep);
  background: var(--mist-2); border:1px solid var(--line);
  padding:6px 14px; border-radius:100px; margin-bottom:18px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); }

/* ================= HERO ================= */
.hero{
  padding:64px 0 40px;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center;
}
.hero h1{
  font-size:52px; line-height:1.18; margin-bottom:22px;
}
.hero h1 .accent{
  background: linear-gradient(135deg, var(--green) 0%, var(--teal) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{
  font-size:18px; color:var(--ink-soft); max-width:520px; margin-bottom:32px;
}
.hero-actions{ display:flex; gap:14px; margin-bottom:36px; flex-wrap:wrap; }
.hero-trust{ display:flex; gap:28px; flex-wrap:wrap; }
.hero-trust div{ font-family:"Tajawal"; font-weight:800; font-size:22px; color:var(--ink); }
.hero-trust span{ display:block; font-family:"IBM Plex Sans Arabic"; font-weight:500; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

/* ---- Route signature graphic ---- */
.route-card{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding:26px; height:100%;
}
.route-card .route-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.route-card .route-head b{ font-family:"Tajawal"; font-size:15px; }
.pulse-live{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--green-deep); font-weight:700; }
.pulse-live i{ width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 0 0 rgba(23,163,74,.6); animation: pulse 1.8s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(23,163,74,.5); }
  70%{ box-shadow:0 0 0 9px rgba(23,163,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(23,163,74,0); }
}
.route-svg-wrap{ position:relative; width:100%; height:220px; }
.route-svg-wrap svg{ width:100%; height:100%; }
.route-path{
  fill:none; stroke: var(--line); stroke-width:4; stroke-linecap:round;
}
.route-path-active{
  fill:none; stroke: var(--green); stroke-width:4; stroke-linecap:round;
  stroke-dasharray: 480; stroke-dashoffset:480;
  animation: draw 3.2s ease-in-out forwards .3s;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.route-bus{ offset-rotate: 0deg; }
.route-stops circle{ fill:#fff; stroke:var(--line); stroke-width:3; }
.route-stops circle.done{ stroke:var(--green); }
.route-mini-list{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.route-mini-list li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft); }
.route-mini-list li b{ color:var(--ink); font-weight:600; }
.route-mini-list li .tag{ margin-right:auto; font-size:11.5px; padding:2px 9px; border-radius:100px; background:var(--mist-2); color:var(--green-deep); font-weight:700; }

/* ================= SECTION HEADERS ================= */
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:36px; line-height:1.28; margin-bottom:14px; }
.section-head p{ font-size:16.5px; color:var(--ink-soft); }
.section-pad{ padding:88px 0; }
.bg-mist{ background: var(--mist); }

/* ================= PROBLEM CARDS ================= */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.audience-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:26px 22px; transition: transform .2s ease, box-shadow .2s ease;
}
.audience-card:hover{ transform:translateY(-4px); box-shadow: var(--shadow-md); }
.audience-card .ic{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: var(--mist-2); color:var(--green-deep); margin-bottom:16px;
}
.audience-card h4{ font-size:16px; margin-bottom:10px; }
.audience-card ul li{ font-size:13.8px; color:var(--ink-soft); padding-right:14px; position:relative; margin-bottom:6px; }
.audience-card ul li::before{ content:"–"; position:absolute; right:0; color:var(--red); opacity:.7; }

/* ================= STEPS ================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.step{ text-align:center; padding:0 14px; position:relative; }
.step .num{
  width:52px; height:52px; margin:0 auto 18px; border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--teal)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:"Tajawal"; font-weight:800; font-size:18px;
  box-shadow: var(--shadow-sm); position:relative; z-index:2;
}
.step h4{ font-size:16px; margin-bottom:8px; }
.step p{ font-size:13.8px; color:var(--ink-soft); }
.steps::before{
  content:""; position:absolute; top:26px; right:12.5%; left:12.5%; height:2px;
  background: repeating-linear-gradient(to left, var(--line) 0 8px, transparent 8px 14px);
  z-index:1;
}

/* ================= FEATURE GRID ================= */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feat-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:28px 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.feat-card .ic{
  width:48px; height:48px; border-radius:13px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--green),var(--teal));
}
.feat-card h4{ font-size:17px; margin-bottom:9px; }
.feat-card p{ font-size:14px; color:var(--ink-soft); }
.feat-card .more{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--green-deep); }

/* ================= STATS ================= */
.stats-bar{
  background: linear-gradient(135deg, var(--green-deep), #0B4A44);
  border-radius: var(--radius-lg); padding:44px 40px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; color:#fff;
}
.stats-bar .stat b{ display:block; font-family:"Tajawal"; font-weight:800; font-size:34px; }
.stats-bar .stat span{ font-size:13.5px; opacity:.82; }

/* ================= CTA BANNER ================= */
.cta-banner{
  background: linear-gradient(120deg, var(--green-deep) 0%, var(--teal) 100%);
  border-radius: var(--radius-lg); padding:56px 48px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-banner::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.14), transparent 55%);
}
.cta-banner h3{ color:#fff; font-size:28px; margin-bottom:10px; max-width:460px; }
.cta-banner p{ color:rgba(255,255,255,.85); max-width:440px; font-size:15px; }
.cta-banner .btn-primary{ background:#fff; color:var(--green-deep); box-shadow:none; }
.cta-banner .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); }

/* ================= FOOTER ================= */
footer{ background: var(--ink); color: #C9D6CD; padding:64px 0 26px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.footer-brand .brand span{ color:#fff; }
.footer-brand p{ font-size:13.8px; color:#8FA097; margin-top:14px; max-width:280px; }
footer h5{ color:#fff; font-family:"Tajawal"; font-size:14.5px; margin-bottom:16px; }
footer ul li{ margin-bottom:10px; }
footer ul li a{ color:#A9B9AF; font-size:13.8px; }
footer ul li a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.09); padding-top:22px;
  display:flex; justify-content:space-between; font-size:12.5px; color:#7C8D82; flex-wrap:wrap; gap:10px;
}
.social{ display:flex; gap:10px; }
.social a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
.social a:hover{ background: var(--green); color:#fff; }

/* ================= REVEAL ================= */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ================= PAGE HERO (sub pages) ================= */
.page-hero{ padding:52px 0 20px; }
.page-hero .eyebrow{ margin-bottom:16px; }
.page-hero h1{ font-size:42px; margin-bottom:16px; }
.page-hero p{ font-size:16.5px; color:var(--ink-soft); max-width:620px; }

/* ================= VALUES ================= */
.grid-6{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.value-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; }
.value-card .ic{ width:42px; height:42px; border-radius:11px; background:var(--mist-2); color:var(--green-deep); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.value-card h4{ font-size:15.5px; margin-bottom:8px; }
.value-card p{ font-size:13.6px; color:var(--ink-soft); }

/* ================= TIMELINE (about) ================= */
.timeline{ position:relative; padding-right:26px; border-right:2px dashed var(--line); }
.timeline .item{ position:relative; padding-bottom:34px; }
.timeline .item:last-child{ padding-bottom:0; }
.timeline .item::before{
  content:""; position:absolute; right:-31px; top:2px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:3px solid var(--green);
}
.timeline .item h4{ font-size:16px; margin-bottom:6px; }
.timeline .item p{ font-size:14px; color:var(--ink-soft); max-width:560px; }

/* ================= QUOTE BLOCK ================= */
.quote-block{
  background: var(--mist); border-radius: var(--radius-lg); padding:44px;
  border-right:4px solid var(--green);
}
.quote-block p{ font-size:19px; font-family:"Tajawal"; font-weight:700; line-height:1.6; color:var(--ink); }

/* ================= FORM (contact) ================= */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px; box-shadow: var(--shadow-sm); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; color:var(--ink); }
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:"IBM Plex Sans Arabic"; font-size:14.5px; background:#FBFDFC; color:var(--ink);
  transition:border-color .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--green); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.role-pick{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.role-pick label{
  border:1.5px solid var(--line); border-radius:10px; padding:12px 8px; text-align:center; font-size:12.8px;
  cursor:pointer; transition:.18s ease; font-weight:600; color:var(--ink-soft);
}
.role-pick input{ display:none; }
.role-pick input:checked + span{ color:var(--green-deep); }
.role-pick label:has(input:checked){ border-color:var(--green); background:var(--mist-2); color:var(--green-deep); }
.contact-info-card{ background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:34px; }
.contact-info-card h4{ color:#fff; font-size:18px; margin-bottom:6px; }
.contact-info-card p{ color:#A9B9AF; font-size:14px; margin-bottom:26px; }
.contact-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.contact-row .ic{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-row b{ display:block; font-size:14px; margin-bottom:2px; }
.contact-row span{ font-size:13px; color:#A9B9AF; }
.success-note{
  display:none; background:var(--mist-2); border:1px solid var(--green); color:var(--green-deep);
  border-radius:10px; padding:14px 16px; font-size:14px; font-weight:600; margin-top:16px; align-items:center; gap:8px;
}
.success-note.show{ display:flex; }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .grid-4, .grid-3, .grid-6{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:28px 0; }
  .steps::before{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .stats-bar{ grid-template-columns:repeat(2,1fr); }
  .field-row{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .hero h1{ font-size:36px; }
  .section-head h2{ font-size:28px; }
  .grid-4, .grid-3, .grid-6{ grid-template-columns:1fr; }
  .role-pick{ grid-template-columns:repeat(2,1fr); }
  .cta-banner{ padding:38px 26px; flex-direction:column; text-align:center; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}