/* =========================================================
   SAHARA ARABIAN — Navbar + Hero
   Tokens
========================================================= */
:root{
  --sa-deep-navy:#09091F;
  --sa-navy:#101024;
  --sa-cyan:#00D9FF;
  --sa-blue:#0787F5;
  --sa-blue-mid:#177FD5;
  --sa-silver:#D9DEE5;
  --sa-white:#FFFFFF;
  --sa-bg:#F9F7F2;

  --sa-font: 'Brown', 'Plus Jakarta Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;

  --sa-nav-h: 92px;
  --sa-nav-h-scrolled: 76px;
  --sa-ease: cubic-bezier(.22,.75,.32,1);
}

@font-face {
    font-family: 'TheBrown';
    src: url('/assets/TheBrown.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Brown typeface — loads if licensed files are added to assets/fonts/.
   Falls back gracefully to Plus Jakarta Sans, never to Arial. */
@font-face{
  font-family:'Brown';
  src: url('../fonts/Brown-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Brown';
  src: url('../fonts/Brown-Bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sa-font);
  background:var(--sa-bg);
  color:var(--sa-deep-navy);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}

/* =========================================================
   HEADER / NAVBAR
========================================================= */
.sa-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  opacity:0;
  transform:translateY(-16px);
  animation: saNavIn .7s var(--sa-ease) .1s forwards;
}
@keyframes saNavIn{ to{opacity:1; transform:translateY(0);} }

.sa-nav{
  height:var(--sa-nav-h);
  display:flex;
  align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition: height .45s var(--sa-ease), background-color .45s var(--sa-ease),
              box-shadow .45s var(--sa-ease), border-color .45s var(--sa-ease);
}

  .sa-mobile__links{
   background-color: rgba(9, 9, 31, 0.96) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border-radius: 10px;
    padding-left: 10px;
  }

.sa-header.is-scrolled .sa-nav{
  height:var(--sa-nav-h-scrolled);
  background:rgba(249,247,242,0.95);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 30px rgba(9,9,31,0.08);
  border-bottom:1px solid rgba(9,9,31,0.06);
}

.sa-nav__inner{
  width:100%;
  max-width:1360px;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  gap:24px;
}

/* Brand */
.sa-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:auto;
  flex-shrink:0;
}
.sa-brand__mark{
  height:42px;
  width:42px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 10px rgba(0,217,255,0.25));
  transition:transform .3s var(--sa-ease);
}
.sa-brand:hover .sa-brand__mark{transform:rotate(-6deg) scale(1.04);}
.sa-brand__text{display:flex;flex-direction:column;line-height:1;}
.sa-brand__name{
  font-weight:700;
  font-size:15px;
  letter-spacing:.06em;
  color:var(--sa-white);
  transition:color .4s var(--sa-ease);
  white-space:nowrap;
}
.sa-brand__tag{
  font-size:10px;
  letter-spacing:.14em;
  color:var(--sa-silver);
  margin-top:4px;
  transition:color .4s var(--sa-ease);
  white-space:nowrap;
}
.sa-header.is-scrolled .sa-brand__name{color:var(--sa-deep-navy);}
.sa-header.is-scrolled .sa-brand__tag{color:var(--sa-blue-mid);}

/* Links */
.sa-links{
  display:flex;
  align-items:center;
  gap:30px;
}
.sa-links__link{
  position:relative;
  font-size:14.5px;
  font-weight:500;
  color:rgba(255,255,255,0.88);
  padding:6px 0;
  transition:color .3s var(--sa-ease);
  white-space:nowrap;
}
.sa-links__link::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:2px;
  background:var(--sa-cyan);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--sa-ease);
}
.sa-links__link:hover,
.sa-links__link.is-active{color:var(--sa-blue);}
.sa-links__link:hover::after,
.sa-links__link.is-active::after{transform:scaleX(1);}

.sa-header.is-scrolled .sa-links__link{color:var(--sa-deep-navy);}
.sa-header.is-scrolled .sa-links__link:hover,
.sa-header.is-scrolled .sa-links__link.is-active{color:var(--sa-blue);}

/* CTA button (shared) */
.sa-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--sa-deep-navy);
  background:linear-gradient(120deg,var(--sa-cyan),var(--sa-blue));
  box-shadow:0 6px 18px rgba(7,135,245,0.28);
  transition:transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease), filter .3s var(--sa-ease);
}
.sa-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,217,255,0.4);
  filter:brightness(1.05);
}
.sa-cta__arrow{transition:transform .3s var(--sa-ease);}
.sa-cta:hover .sa-cta__arrow{transform:translateX(4px);}
.sa-cta--nav{flex-shrink:0;}

/* Burger */
.sa-burger{
  display:none;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.06);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color .3s, background-color .3s;
}
.sa-burger span{
  width:18px;height:2px;
  background:var(--sa-white);
  border-radius:2px;
  transition:background-color .3s, transform .3s var(--sa-ease), opacity .3s;
}
.sa-header.is-scrolled .sa-burger{
  border-color:rgba(9,9,31,0.15);
  background:rgba(9,9,31,0.04);
}
.sa-header.is-scrolled .sa-burger span{background:var(--sa-deep-navy);}

/* =========================================================
   MOBILE PANEL
========================================================= */
.sa-mobile__backdrop{
  position:fixed;inset:0;
  background:rgba(5,5,15,0.5);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--sa-ease), visibility .4s;
  z-index:1090;
}
.sa-mobile{
  position:fixed;
  top:0; right:0;
  height:100%;
  width:min(360px,86vw);
  background:var(--sa-deep-navy);
  z-index:1100;
  padding:26px 26px 34px;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .45s var(--sa-ease);
  box-shadow:-20px 0 60px rgba(0,0,0,0.35);
}
body.sa-menu-open .sa-mobile{transform:translateX(0);}
body.sa-menu-open .sa-mobile__backdrop{opacity:1;visibility:visible;}
body.sa-menu-open{overflow:hidden;}

.sa-mobile__top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:36px;
}
.sa-brand--mobile{gap:10px;}
.sa-brand--mobile .sa-brand__name{color:var(--sa-white);font-size:13.5px;}
.sa-mobile__close{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  background:transparent;color:var(--sa-white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}

.sa-mobile__links{display:flex;flex-direction:column;gap:4px;margin-bottom:auto;}
.sa-mobile__links li a{
  display:block;
  padding:14px 4px;
  font-size:19px;
  font-weight:600;
  color:rgba(255,255,255,0.9);
  border-bottom:1px solid rgba(255,255,255,0.08);
  opacity:0; transform:translateX(16px);
}
body.sa-menu-open .sa-mobile__links li a{
  animation: saStagger .5s var(--sa-ease) forwards;
  animation-delay: calc(var(--i) * 0.06s + .12s);
}
@keyframes saStagger{ to{opacity:1; transform:translateX(0);} }
.sa-mobile__links li a:hover{color:var(--sa-cyan);}

.sa-cta--mobile{justify-content:center;margin-top:22px;}

/* =========================================================
   HERO
========================================================= */
.sa-hero{
  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:var(--sa-deep-navy);
  isolation:isolate;
}

.sa-hero__bg{
  position:absolute; inset:0;
  overflow:hidden;
}
.sa-hero__art{
  width:100%;height:100%;display:block;
  transform:scale(1.05);
  animation: saBgZoom 8s var(--sa-ease) forwards;
}
@keyframes saBgZoom{ from{transform:scale(1.05);} to{transform:scale(1);} }

/* Real looping truck footage — sits above the fallback illustration,
   positioned so the truck/road reads center-right, keeping the left
   clear for the heading. */
.sa-hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:62% 55%;
  display:block;
}

.sa-hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,6,25,0.94) 0%, rgba(5,6,25,0.65) 50%, rgba(5,6,25,0.35) 100%),
    linear-gradient(0deg, rgba(9,9,31,0.45) 0%, rgba(9,9,31,0) 30%);
  z-index:1;
}
.sa-hero__grain{
  position:absolute; inset:0; z-index:1;
  background-image:radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
  pointer-events:none;
}

.sa-hero__container{
  position:relative; z-index:2;
  width:100%;
  max-width:1360px;
  margin:0 auto;
  padding:calc(var(--sa-nav-h) + 40px) 32px 90px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:60px;
  align-items:center;
  flex:1;
}

.sa-hero__content{max-width:640px;}

.sa-eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:600;
  letter-spacing:.16em;
  color:var(--sa-silver);
  margin-bottom:28px;
}
.sa-eyebrow__line{width:34px;height:2px;background:var(--sa-cyan);display:inline-block;}

.sa-heading{
  font-size:clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--sa-white);
  margin:0 0 26px;
}
.sa-heading__row{display:block;}
.sa-heading em{
  font-style:normal;
  background:linear-gradient(100deg,var(--sa-cyan),var(--sa-blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sa-desc{
  max-width:560px;
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,0.78);
  margin:0 0 40px;
}

.sa-hero__buttons{display:flex;flex-wrap:wrap;gap:16px;}

.sa-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px;
  border-radius:999px;
  font-size:14.5px; font-weight:700; letter-spacing:.02em;
  transition:transform .3s var(--sa-ease), box-shadow .3s var(--sa-ease), background-color .3s var(--sa-ease), border-color .3s var(--sa-ease);
}
.sa-btn i{transition:transform .3s var(--sa-ease);}
.sa-btn:hover{transform:translateY(-3px);}
.sa-btn:hover i{transform:translateX(4px);}

.sa-btn--primary{
  color:var(--sa-deep-navy);
  background:linear-gradient(120deg,var(--sa-cyan),var(--sa-blue));
  box-shadow:0 10px 26px rgba(0,217,255,0.28);
}
.sa-btn--primary:hover{box-shadow:0 16px 36px rgba(0,217,255,0.42);}

.sa-btn--ghost{
  color:var(--sa-white);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.32);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.sa-btn--ghost:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(0,217,255,0.6);
}

/* Floating card */
.sa-hero__card{
  position:relative;
  background:rgba(0, 0, 33, 0.466);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:22px;
  padding:28px 26px 26px;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:0 30px 60px rgba(0,0,0,0.4);
  will-change:transform;
}

/* Card header */
.sa-card__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.sa-card__title{
  font-size:11.5px; font-weight:700; letter-spacing:.1em;
  color:rgba(255,255,255,0.72);
  text-transform:uppercase;
}
.sa-card__live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  color:var(--sa-cyan);
}
.sa-card__live i{
  width:6px;height:6px;border-radius:50%;
  background:var(--sa-cyan);
  box-shadow:0 0 8px 2px rgba(0,217,255,0.7);
  animation:saPulse 1.6s ease-in-out infinite;
}
@keyframes saPulse{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:.4; transform:scale(0.7);}
}

/* Map */
.sa-card__map {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #101a35 0%, #080d21 100%);
    border: 1px solid rgba(9, 9, 31, 0.14);
    margin-bottom: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.sa-card__map svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Country boundaries */
.sa-country {
    transition:
        fill 0.4s var(--sa-ease),
        stroke 0.4s var(--sa-ease);
}

.sa-country--context {
    fill: rgba(82, 112, 150, 0.07);
    stroke: rgba(147, 171, 199, 0.28);
    stroke-width: 0.65;
}

.sa-country--main {
    fill: rgba(61, 100, 145, 0.12);
    stroke: rgba(164, 190, 218, 0.42);
    stroke-width: 0.75;
}

/* Arabian Sea / map labels */
.sa-map__sea {
    font-size: 7px;
    letter-spacing: 0.16em;
    fill: rgba(185, 198, 215, 0.48);
    font-family: var(--sa-font);
}

/* City labels */
.sa-city {
    fill: #DCE3EC;
    font-size: 7.5px;
    font-weight: 600;
    font-family: var(--sa-font);
    paint-order: stroke;
    stroke: rgba(8, 13, 33, 0.65);
    stroke-width: 1.5px;
    stroke-linejoin: round;
}
.sa-city--origin{fill:var(--sa-white); font-size:8px; font-weight:700;}
.sa-city--active{fill:var(--sa-cyan);}
.sa-node{fill:#C7CCD6;}
.sa-node--origin{fill:var(--sa-cyan);}
.sa-node--active{fill:var(--sa-cyan);}
.sa-node--pulse{
  fill:none;
  stroke:var(--sa-cyan);
  stroke-width:1;
  opacity:0;
  transform-origin:224.33px 93.26px;
  transform-box:fill-box;
}
@keyframes saMapPulse{
  0%{ transform:scale(1); opacity:.9; }
  100%{ transform:scale(3.4); opacity:0; }
}

/* Destination row */
.sa-card__dest{
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:700; color:var(--sa-white);
  margin-bottom:12px;
}
.sa-card__dest i{color:var(--sa-cyan); font-size:14px;}

/* Pager dots */
.sa-card__pager{
  display:flex; gap:6px;
  margin-bottom:20px;
}
.sa-card__pager span{
  width:14px; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.18);
  transition:background-color .3s var(--sa-ease), width .3s var(--sa-ease);
}
.sa-card__pager span.is-active{
  background:var(--sa-cyan);
  width:22px;
}

/* Stats grid — 3 columns, matches reference layout */
.sa-card__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.sa-card__stat{display:flex; flex-direction:column; gap:6px;}
.sa-card__stat-label{
  font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sa-cyan);
}
.sa-card__num{font-size:20px;font-weight:700;color:var(--sa-white); line-height:1;}
.sa-card__sub{
  font-size:10.5px; line-height:1.35;
  color:rgba(255,255,255,0.55);
}

/* Scroll indicator */
.sa-scroll{
  position:absolute;
  bottom:28px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.sa-scroll span{
  font-size:10.5px; letter-spacing:.18em; font-weight:600;
  color:rgba(255,255,255,0.6);
}
.sa-scroll__line{
  width:1px; height:36px;
  background:rgba(255,255,255,0.2);
  position:relative;
  overflow:hidden;
}
.sa-scroll__line i{
  position:absolute; left:0; top:-40%;
  width:100%; height:40%;
  background:linear-gradient(var(--sa-cyan),transparent);
  animation:saScrollMove 2.2s ease-in-out infinite;
}
@keyframes saScrollMove{
  0%{top:-40%;}
  60%{top:100%;}
  100%{top:100%;}
}

/* =========================================================
   REVEAL ANIMATION (page load sequence)
========================================================= */
[data-reveal]{opacity:0; transform:translateY(22px);}
.sa-hero.is-ready [data-reveal]{
  animation: saReveal .8s var(--sa-ease) forwards;
}
.sa-hero.is-ready [data-reveal="1"]{animation-delay:.3s;}
.sa-hero.is-ready [data-reveal="2"]{animation-delay:.5s;}
.sa-hero.is-ready [data-reveal="3"]{animation-delay:.8s;}
.sa-hero.is-ready [data-reveal="4"]{animation-delay:1s;}
.sa-hero.is-ready [data-reveal="5"]{animation-delay:1.2s; transform:translateY(34px);}
.sa-hero.is-ready [data-reveal="6"]{animation-delay:1.6s;}
@keyframes saReveal{ to{opacity:1; transform:translateY(0);} }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1200px){
  .sa-hero__container{grid-template-columns:minmax(0,1fr) 330px; gap:40px;}
  .sa-links{gap:22px;}
}

@media (max-width:1024px){
  .sa-nav__inner{padding:0 24px;}
  .sa-links{display:none;}
  .sa-cta--nav{display:none;}
  .sa-burger{display:flex;}
  .sa-hero__container{
    grid-template-columns:1fr;
  }
  .sa-hero__card{
    max-width:420px;
    margin-top:8px;
  }
}

@media (max-width:768px){
  :root{--sa-nav-h:78px; --sa-nav-h-scrolled:68px;}
  .sa-hero__container{
    padding:calc(var(--sa-nav-h) + 24px) 22px 60px;
    gap:34px;
  }
  .sa-desc{font-size:16px;}
  .sa-btn{padding:14px 22px; font-size:13.5px;}
  .sa-hero__overlay{
    background:
      linear-gradient(180deg, rgba(5,6,25,0.55) 0%, rgba(5,6,25,0.6) 45%, rgba(5,6,25,0.92) 100%),
      linear-gradient(90deg, rgba(5,6,25,0.92) 0%, rgba(5,6,25,0.55) 60%, rgba(5,6,25,0.4) 100%);
  }
  .sa-hero__video{ object-position:70% 50%; }
}

@media (max-width:430px){
  .sa-heading{font-size:clamp(2.2rem, 9vw, 3rem);}
  .sa-hero__buttons{flex-direction:column; align-items:stretch;}
  .sa-btn{justify-content:center;}
  .sa-brand__tag{display:none;}
  .sa-card__stats{gap:10px;}
}

/* =========================================================
   ACCESSIBILITY
========================================================= */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--sa-cyan);
  outline-offset:3px;
  border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .sa-header, .sa-hero__art, [data-reveal], .sa-scroll__line i{
    animation:none !important;
  }
  .sa-header{opacity:1; transform:none;}
  [data-reveal]{opacity:1; transform:none;}
  .sa-hero__card, .sa-hero__bg, .sa-hero__art, .sa-card__route{transform:none !important;}
  .sa-btn, .sa-cta, .sa-brand__mark{transition:none;}
  .sa-hero__video{ /* video motion itself is the content; leave it playing */ }
}



 /* Disable text selection */
    * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Allow typing in form fields */
    input,
    textarea,
    select {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    /* Prevent image dragging */
    img {
        -webkit-user-drag: none;
        user-drag: none;
        pointer-events: none;
    }