:root{
  --bg:            #10140f;
  --surface:       #171d16;
  --surface-2:     #1f2a1c;
  --line:          rgba(242,244,240,0.09);

  --green:         rgb(12,171,69);
  --green-rgb:     12,171,69;
  --green-dark:    #086a2c;
  --green-soft:    rgba(12,171,69,0.14);

  --amber:         #f2b705;
  --steel:         #9aa39c;

  --text:          #f4f6f2;
  --muted:         #aab3a5;

  --font-display:  'Tajawal', 'Cairo', sans-serif;
  --font-body:     'Cairo', 'Tajawal', sans-serif;
  --font-mono:     'Roboto Mono', monospace;

  --radius:        14px;
  --shadow-lg:     0 20px 45px -18px rgba(0,0,0,0.55);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.75;
  overflow-x:hidden;
}

h1,h2,h3,h4,.brand-text strong{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
}

a{ text-decoration:none; }

.text-muted-2{ color:var(--muted); }

::selection{ background:var(--green); color:#08120a; }

/* focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}


.hazard-strip{
  height:14px;
  width:100%;
  background:repeating-linear-gradient(
    135deg,
    #0d0f0c 0 18px,
    var(--green) 18px 36px
  );
}


.awija-nav{
  background:rgba(16,20,15,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding-top:.6rem;
  padding-bottom:.6rem;
  top:14px; /* below hazard strip */
}

.brand-logo{
  width:165px;
  height:42px;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}

.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-size:1.05rem; color:var(--text); }
.brand-text small{ font-family:var(--font-mono); letter-spacing:.12em; color:var(--muted); font-size:.62rem; }

.awija-nav .nav-link{
  color:var(--steel);
  font-weight:600;
  padding:.5rem .9rem !important;
  transition:color .2s ease;
}
.awija-nav .nav-link:hover{ color:var(--text); }


.btn-award{
  background:var(--green);
  border:1px solid var(--green);
  color:#08120a;
  font-weight:700;
  border-radius:10px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-award:hover{
  background:#0dbd4d;
  color:#08120a;
  transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(var(--green-rgb),0.55);
}

.btn-outline-award{
  background:transparent;
  border:1px solid rgba(var(--green-rgb),0.55);
  color:var(--text);
  font-weight:700;
  border-radius:10px;
  transition:all .18s ease;
}
.btn-outline-award:hover{
  background:var(--green-soft);
  border-color:var(--green);
  color:var(--text);
  transform:translateY(-2px);
}

.hero{
  min-height:92vh;
  position:relative;
  padding-top:110px;
  background:
    radial-gradient(circle at 85% 15%, rgba(var(--green-rgb),0.16), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(var(--green-rgb),0.10), transparent 50%),
    var(--bg);
}

.hero-texture{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 26px
  );
  pointer-events:none;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green);
  background:var(--green-soft);
  border:1px solid rgba(var(--green-rgb),0.35);
  padding:.4rem .8rem;
  border-radius:999px;
  margin-bottom:1.2rem;
}
.eyebrow-light{ color:#0d1a10; background:rgba(255,255,255,0.85); border-color:transparent; }

.hero-title{
  font-size:clamp(2.1rem, 4.4vw, 3.6rem);
  line-height:1.25;
  margin-bottom:1.1rem;
}
.text-award{ color:var(--green); }

.hero-sub{
  color:var(--muted);
  font-size:1.08rem;
  max-width:46rem;
}

.stats-row{ border-top:1px solid var(--line); }
.stat-num{
  font-family:var(--font-mono);
  font-size:1.8rem;
  font-weight:700;
  color:var(--green);
}
.stat-label{ color:var(--muted); font-size:.85rem; }

.stamp-wrap{
  display:inline-block;
  animation:float-stamp 6s ease-in-out infinite;
}
.stamp-badge{
  width:min(320px, 78vw);
  height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.45));
}
.stamp-badge-sm{ width:min(200px,60vw); }

.stamp-ring-outer{ fill:none; stroke:var(--green); stroke-width:2.5; opacity:.85; }
.stamp-ring-dashed{ fill:none; stroke:var(--steel); stroke-width:1.4; stroke-dasharray:4 6; opacity:.55; }
.stamp-inner-circle{ fill:var(--green-soft); stroke:var(--green); stroke-width:2; }
.stamp-check{ fill:none; stroke:var(--green); stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.stamp-text{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:2px;
  fill:var(--steel);
  text-transform:uppercase;
}

@keyframes float-stamp{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-14px) rotate(3deg); }
}

.section-py{ padding-block:5.5rem; }
.section-alt{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.section-heading{ max-width:42rem; margin-inline:auto; text-align:center; margin-bottom:3rem; }
.section-heading h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:.6rem; }
.section-heading p{ color:var(--muted); }

.service-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.1rem 1.6rem 1.7rem;
  height:100%;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--green-rgb),0.5);
  box-shadow:var(--shadow-lg);
}
.service-card::before{
  content:"";
  position:absolute; inset-inline-start:0; top:0;
  width:100%; height:3px;
  background:var(--green);
  border-radius:var(--radius) var(--radius) 0 0;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s ease;
}
.service-card:hover::before{ transform:scaleX(1); }

.wo-code{
  position:absolute; top:1.1rem; left:1.3rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--muted);
  letter-spacing:.08em;
}
.service-icon{
  width:56px; height:56px;
  border-radius:12px;
  background:var(--green-soft);
  color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin-bottom:1.1rem;
}
.service-card h3{ font-size:1.15rem; margin-bottom:.5rem; }
.service-card p{ color:var(--muted); font-size:.92rem; margin-bottom:0; }

/* =========================================================
   Why us
   ========================================================= */
.why-item{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem;
  height:100%;
}
.why-item i{ color:var(--green); font-size:1.6rem; margin-bottom:.7rem; display:block; }
.why-item h4{ font-size:1.02rem; margin-bottom:.35rem; }
.why-item p{ color:var(--muted); font-size:.88rem; margin-bottom:0; }

/* =========================================================
   New cars banner
   ========================================================= */
.new-cars-banner{
  background:
    linear-gradient(100deg, rgba(var(--green-rgb),0.16), transparent 60%),
    var(--surface);
  padding-block:4rem;
  border-bottom:1px solid var(--line);
}
.new-cars-banner h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:.6rem; }
.new-cars-banner p{ color:var(--muted); max-width:38rem; margin-bottom:0; }

/* =========================================================
   Booking form
   ========================================================= */
.booking-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px dashed rgba(var(--green-rgb),0.5);
  border-radius:var(--radius);
  padding:2.4rem;
  box-shadow:var(--shadow-lg);
  position:relative;
}

.form-label{ color:var(--steel); font-weight:600; font-size:.88rem; margin-bottom:.4rem; }

.form-control,.form-select{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:9px;
  padding:.65rem .9rem;
}
.form-control::placeholder{ color:#6f776b; }
.form-control:focus,.form-select:focus{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--green);
  box-shadow:0 0 0 .2rem rgba(var(--green-rgb),0.2);
}
.form-select option{ background:var(--surface-2); color:var(--text); }

.form-note{ color:var(--muted); font-size:.82rem; }

.booking-success .ref-code{
  font-family:var(--font-mono);
  color:var(--green);
  font-weight:700;
  letter-spacing:.05em;
}

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--surface); border-top:1px solid var(--line); }
.footer h5{ font-family:var(--font-display); font-size:1rem; margin-bottom:1rem; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; }
.footer-links a{ color:var(--muted); transition:color .2s ease; }
.footer-links a:hover{ color:var(--green); }
.footer-links li{ color:var(--muted); font-size:.9rem; }
.footer-divider{ border-color:var(--line); margin:2.2rem 0 1.5rem; }

.social-btn{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--steel);
  transition:all .2s ease;
}
.social-btn:hover{ background:var(--green); color:#08120a; border-color:var(--green); }

/* =========================================================
   WhatsApp floating button
   ========================================================= */
.whatsapp-fab{
  position:fixed;
  bottom:22px; left:22px;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--green);
  color:#08120a;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow:0 12px 26px -8px rgba(var(--green-rgb),0.65);
  z-index:1050;
  transition:transform .2s ease;
}
.whatsapp-fab:hover{ transform:scale(1.08); color:#08120a; }

/* =========================================================
   Scroll reveal
   ========================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .stamp-wrap{ animation:none; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .service-card,.btn-award,.btn-outline-award,.whatsapp-fab{ transition:none; }
}

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width: 991.98px){
  .hero{ min-height:auto; padding-top:130px; padding-bottom:2rem; }
  .section-py{ padding-block:3.6rem; }
  .booking-card{ padding:1.6rem; }
}