/* ============================================================


   SABKI SAWARI  -  DESIGN SYSTEM CSS


   ============================================================ */





/* 1. CSS RESET + BOX-SIZING */


*, *::before, *::after {


  box-sizing: border-box;


  margin: 0;


  padding: 0;


}


html { scroll-behavior: smooth; }


/* Mobile safety net: nothing in the page should ever be wider than the


   viewport (a fixed min-width on a flex child, e.g. the cookie banner's


   text, is enough to do this)  -  this stops that from ever surfacing as a


   sideways-scrolling page instead of just a cramped element. */


html, body { max-width: 100%; overflow-x: hidden; }


img, video { max-width: 100%; display: block; }


button, input, select, textarea { font: inherit; }


a { text-decoration: none; color: inherit; }


ul, ol { list-style: none; }





/* 2. CSS CUSTOM PROPERTIES */


:root {

  --green:        #7C5CFF;

  --green-dark:   #6947EE;

  --green-deep:   #14121F;

  --green-light:  #EFEBFF;

  --green-xlight: #F7F6FB;

  --gold:         #B5A5FF;

  --gold-light:   #EFEBFF;

  --ink:          #14121F;

  --body:         #3A374A;

  --muted:        #6B6880;

  --border:       #E2DEF2;

  --white:        #ffffff;

  --primary:      #7C5CFF;

  --primary-hover:#6947EE;

  --primary-tint: #EFEBFF;

  --surface:      #F7F6FB;

  --accent:       #B5A5FF;

  --success:      #4CAF7D;

  --danger:       #DC2626;




  --radius-sm:    8px;


  --radius-md:    12px;

  --radius-lg:    16px;

  --radius-pill:  999px;


  --shadow-card:  0 1px 3px rgba(0,0,0,0.06);


  --shadow-hover: 0 16px 40px rgba(20,18,31,0.11);

  --transition:   0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

}





/* 3. BASE TYPOGRAPHY */


body {


  /* Manrope  -  same font used app-wide across the SabKi Sawari admin/driver/


     passenger portals, for a consistent brand identity between the


     marketing site and the actual product. */


  font-family: 'Manrope', system-ui, -apple-system, sans-serif;


  font-size: 16px;


  line-height: 1.6;


  color: var(--body);


  background: var(--white);


  -webkit-font-smoothing: antialiased;


}





h1, h2, h3, h4, h5, h6 {


  color: var(--ink);


  line-height: 1.2;


  font-weight: 700;


}





p { color: var(--body); }





/* 4. UTILITY CLASSES */


.container {


  max-width: 1200px;


  margin: 0 auto;


  padding: 0 1.5rem;


}





.section-tag {


  display: inline-block;


  font-size: 0.75rem;


  font-weight: 700;


  letter-spacing: 0.12em;


  text-transform: uppercase;


  color: var(--green);


  background: var(--green-light);


  padding: 0.35rem 0.9rem;


  border-radius: var(--radius-pill);


  margin-bottom: 1rem;


}





.section-title {


  font-size: clamp(1.6rem, 3vw, 2.5rem);


  font-weight: 800;


  color: var(--ink);


  margin-bottom: 1rem;


  line-height: 1.15;


}





.section-sub {


  font-size: 1.05rem;


  color: var(--muted);


  max-width: 600px;


  line-height: 1.7;


}





.section-header {


  text-align: center;


  margin-bottom: 3.5rem;


}





.section-header .section-sub {


  margin: 0 auto;


}





/* BUTTONS */


.btn-primary {


  display: inline-flex;


  align-items: center;


  gap: 0.5rem;


  background: var(--green);


  color: var(--white);


  font-weight: 600;


  font-size: 0.95rem;


  padding: 0.8rem 1.75rem;


  border-radius: var(--radius-pill);


  border: 2px solid var(--green);


  cursor: pointer;


  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);


  white-space: nowrap;


}


.btn-primary:hover {


  background: var(--green-dark);


  border-color: var(--green-dark);


  transform: translateY(-2px);


  box-shadow: 0 6px 20px rgba(124,92,255,0.22);


}





.btn-outline {


  display: inline-flex;


  align-items: center;


  gap: 0.5rem;


  background: transparent;


  color: var(--white);


  font-weight: 600;


  font-size: 0.95rem;


  padding: 0.8rem 1.75rem;


  border-radius: var(--radius-pill);


  border: 2px solid rgba(255,255,255,0.5);


  cursor: pointer;


  transition: all var(--transition);


  white-space: nowrap;


}


.btn-outline:hover {


  background: rgba(255,255,255,0.1);


  border-color: var(--white);


  transform: translateY(-2px);


}





.btn-outline-dark {


  display: inline-flex;


  align-items: center;


  gap: 0.5rem;


  background: transparent;


  color: var(--green);


  font-weight: 600;


  font-size: 0.95rem;


  padding: 0.8rem 1.75rem;


  border-radius: var(--radius-pill);


  border: 2px solid var(--green);


  cursor: pointer;


  transition: all var(--transition);


  white-space: nowrap;


}


.btn-outline-dark:hover {


  background: var(--green);


  color: var(--white);


  transform: translateY(-2px);


}





.btn-gold {


  display: inline-flex;


  align-items: center;


  gap: 0.5rem;


  background: var(--white);


  color: var(--gold);


  font-weight: 700;


  font-size: 0.95rem;


  padding: 0.85rem 2rem;


  border-radius: var(--radius-pill);


  border: 2px solid var(--white);


  cursor: pointer;


  transition: all var(--transition);


  white-space: nowrap;


}


.btn-gold:hover {


  background: var(--gold-light);


  transform: translateY(-2px);


  box-shadow: 0 6px 20px rgba(0,0,0,0.15);


}





.green-text { color: var(--green); }





/* ============================================================


   5. NAVIGATION


   ============================================================ */


.nav {


  position: fixed;


  top: 0;


  left: 0;


  right: 0;


  z-index: 1000;


  padding: 1rem 0;


  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);


}





.nav.scrolled {


  background: var(--white);


  box-shadow: 0 2px 20px rgba(0,0,0,0.08);


  padding: 0.65rem 0;


}





.nav-inner {


  display: flex;


  align-items: center;


  gap: 2rem;


}





.nav-logo {


  font-size: 1.25rem;


  font-weight: 800;


  color: var(--white);


  display: flex;


  align-items: center;


  gap: 0.4rem;


  transition: color var(--transition);


  flex-shrink: 0;


  text-decoration: none;


}





.nav.scrolled .nav-logo { color: var(--ink); }





.logo-icon {


  width: 1.55rem;


  height: 1.55rem;


  border-radius: 0.45rem;


  background: url('../images/logo.svg') center / contain no-repeat;


  color: transparent;


  display: inline-block;


  flex-shrink: 0;


  font-size: 0;


  line-height: 0;


}





.nav-links {


  display: flex;


  align-items: center;


  gap: 1.25rem;


  margin-left: auto;


}





.nav-links a {


  font-size: 0.85rem;


  font-weight: 500;


  color: rgba(255,255,255,0.82);


  transition: color var(--transition);


  position: relative;


  padding-bottom: 3px;


}





.nav-links a::after {


  content: '';


  position: absolute;


  bottom: -2px;


  left: 0;


  width: 0;


  height: 2px;


  background: var(--green);


  transition: width var(--transition);


  border-radius: 2px;


}





.nav-links a:hover,


.nav-links a.active { color: var(--green); }





.nav-links a:hover::after,


.nav-links a.active::after { width: 100%; }





.nav.scrolled .nav-links a { color: var(--body); }


.nav.scrolled .nav-links a:hover,


.nav.scrolled .nav-links a.active { color: var(--green); }





.btn-nav {


  background: var(--green);


  color: var(--white);


  font-weight: 600;


  font-size: 0.875rem;


  padding: 0.6rem 1.4rem;


  border-radius: var(--radius-pill);


  border: none;


  cursor: pointer;


  transition: all var(--transition);


  flex-shrink: 0;


}


.btn-nav:hover {


  background: var(--green-dark);


  transform: translateY(-1px);


  box-shadow: 0 4px 12px rgba(124,92,255,0.24);


}





/* HAMBURGER */


.hamburger {


  display: none;


  flex-direction: column;


  justify-content: center;


  align-items: center;


  gap: 5px;


  width: 40px;


  height: 40px;


  background: none;


  border: none;


  cursor: pointer;


  margin-left: auto;


  padding: 4px;


}





.hamburger span {


  display: block;


  width: 24px;


  height: 2px;


  background: var(--white);


  border-radius: 2px;


  transition: all 0.25s ease;


  transform-origin: center;


}





.nav.scrolled .hamburger span { background: var(--ink); }





.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }


.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }


.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }





/* MOBILE MENU */


.mobile-menu {


  display: none;


  position: fixed;


  inset: 0;


  background: var(--green-deep);


  z-index: 999;


  flex-direction: column;


  justify-content: center;


  align-items: center;


  opacity: 0;


  pointer-events: none;


  transition: opacity 0.3s ease;


}





.mobile-menu.open {


  opacity: 1;


  pointer-events: all;


}





.mobile-menu ul {


  display: flex;


  flex-direction: column;


  align-items: center;


  gap: 2rem;


  text-align: center;


}





.mobile-menu ul a {


  font-size: 1.5rem;


  font-weight: 700;


  color: var(--white);


  transition: color var(--transition);


}


.mobile-menu ul a:hover { color: var(--green); }





.mobile-menu .btn-primary {


  font-size: 1rem;


  padding: 0.9rem 2.5rem;


}





/* ============================================================


   6. HERO


   ============================================================ */


.hero {

  min-height: 92vh;

  /* Mobile bug fix: 100vh uses the viewport size as if the browser's


     address/toolbar were hidden, so on iOS Safari / Android Chrome the


     hero was taller than the actually-visible area on first load, cutting


     off the CTA buttons below the fold. 100dvh tracks the real visible


     viewport and is supported by every current mobile browser; the 100vh


     line above stays as a fallback for older browsers that don't know dvh. */


  min-height: 92dvh;

  background: #14121F;

  display: flex;


  align-items: center;


  padding: 7.5rem 0 4rem;

  position: relative;


  overflow: hidden;


}





.hero::before {

  content: '';


  position: absolute;


  inset: 0;


  background-image: linear-gradient(rgba(181,165,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(181,165,255,0.06) 1px, transparent 1px);

  background-size: 52px 52px;

  -webkit-mask-image: linear-gradient(to right, transparent 8%, black 55%, black 100%);

  mask-image: linear-gradient(to right, transparent 8%, black 55%, black 100%);

  pointer-events: none;


}





.hero-content {

  position: relative;


  z-index: 1;


  max-width: 680px;

}





.hero h1 {

  font-size: clamp(2.4rem, 6vw, 4.5rem);


  font-weight: 800;


  color: var(--white);


  line-height: 1.07;


  margin-bottom: 1.25rem;


  letter-spacing: 0;

}




.hero h1 .green-text { color: var(--green); }





.hero p {


  font-size: 1.12rem;


  color: rgba(255,255,255,0.7);


  max-width: 560px;


  line-height: 1.75;


  margin-bottom: 2rem;


}





.hero-ctas {


  display: flex;


  gap: 1rem;


  flex-wrap: wrap;


  align-items: center;


  margin-bottom: 2.5rem;


}





.hero-trust {


  display: flex;


  gap: 1.75rem;


  flex-wrap: wrap;


}





.trust-item {


  display: flex;


  align-items: center;


  gap: 0.4rem;


  font-size: 0.875rem;


  font-weight: 500;


  color: rgba(255,255,255,0.6);


}


.trust-item .check { color: var(--green); font-weight: 700; }





/* ============================================================


   7. STATS BAR


   ============================================================ */


.stats-bar {


  background: var(--white);


  border-bottom: 1px solid var(--border);


  padding: 1.75rem 0;


}





.stats-inner {


  display: flex;


  justify-content: center;


  flex-wrap: wrap;


}





.stat-item {


  display: flex;


  flex-direction: column;


  align-items: center;


  padding: 0.75rem 3rem;


  border-right: 1px solid var(--border);


}


.stat-item:last-child { border-right: none; }





.stat-number {


  font-size: 1.5rem;


  font-weight: 800;


  color: var(--green);


  line-height: 1.1;


}





.stat-label {


  font-size: 0.78rem;


  font-weight: 500;


  color: var(--muted);


  text-align: center;


  margin-top: 0.25rem;


  text-transform: uppercase;


  letter-spacing: 0.06em;


}





/* ============================================================


   8. CARDS


   ============================================================ */


.card {


  background: var(--white);


  border: 1px solid var(--border);


  border-radius: var(--radius-md);


  padding: 2rem;


  box-shadow: var(--shadow-card);


  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);


}


.card:hover {


  transform: translateY(-4px);


  box-shadow: var(--shadow-hover);


  background: var(--green-xlight);


}





.card-icon {


  width: 52px;


  height: 52px;


  background: var(--green-light);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 1.4rem;


  margin-bottom: 1.25rem;


  flex-shrink: 0;


  color: var(--green);


}


.card-icon svg { width: 24px; height: 24px; }





.card h3 {


  font-size: 1.05rem;


  font-weight: 700;


  color: var(--ink);


  margin-bottom: 0.55rem;


}





.card p {


  font-size: 0.92rem;


  color: var(--body);


  line-height: 1.65;


}





.cards-grid {


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: 1.5rem;


}





.cards-grid-2 {


  display: grid;


  grid-template-columns: repeat(2, 1fr);


  gap: 1.5rem;


}





.cards-grid-3 {


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: 1.5rem;


}





/*  -  Cookie Consent Banner  -  */


#cookie-banner {


  position: fixed;


  bottom: 0; left: 0; right: 0;


  background: #0f2318;


  color: #e8f2ea;


  padding: 1.1rem 1.5rem;


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 1.25rem;


  z-index: 9999;


  box-shadow: 0 -4px 24px rgba(0,0,0,0.28);


  flex-wrap: wrap;


  font-size: 0.82rem;


  line-height: 1.5;


}


#cookie-banner p { margin: 0; flex: 1; min-width: 220px; opacity: 0.88; }


#cookie-banner a { color: #B5A5FF; font-weight: 600; text-decoration: underline; }


#cookie-banner-actions { display: flex; gap: 0.65rem; flex-shrink: 0; }


#cookie-accept {


  background: #7C5CFF; color: #fff; border: none; border-radius: 8px;


  padding: 0.5rem 1.2rem; font-weight: 700; font-size: 0.82rem; cursor: pointer;


  transition: background 0.2s;


}


#cookie-accept:hover { background: #0d8446; }


#cookie-decline {


  background: transparent; color: #a0b8a4; border: 1px solid rgba(255,255,255,0.15);


  border-radius: 8px; padding: 0.5rem 1.1rem; font-weight: 600; font-size: 0.82rem;


  cursor: pointer; transition: border-color 0.2s;


}


#cookie-decline:hover { border-color: rgba(255,255,255,0.35); }





/* ============================================================


   SECTIONS


   ============================================================ */


section { padding: 5rem 0; }


.section-light { background: var(--green-light); }


.section-white { background: var(--white); }


.section-dark  { background: var(--green-deep); }





/* ============================================================


   9. HOW IT WORKS  -  NUMBERED STEPS


   ============================================================ */


.steps {


  display: flex;


  gap: 0;


  position: relative;


  align-items: flex-start;


}





.steps::before {


  content: '';


  position: absolute;


  top: 27px;


  left: 15%;


  right: 15%;


  height: 2px;


  background: linear-gradient(90deg, var(--green), var(--green-dark));


  opacity: 0.25;


  z-index: 0;


}





.step {


  flex: 1;


  display: flex;


  flex-direction: column;


  align-items: center;


  text-align: center;


  padding: 0 1.5rem;


  position: relative;


}





.step-number {


  width: 54px;


  height: 54px;


  background: var(--green);


  color: var(--white);


  font-size: 1.2rem;


  font-weight: 800;


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  margin-bottom: 1.25rem;


  flex-shrink: 0;


  position: relative;


  z-index: 1;


  box-shadow: 0 4px 14px rgba(124,92,255,0.28);


}





.step h3 {


  font-size: 1.05rem;


  font-weight: 700;


  color: var(--ink);


  margin-bottom: 0.5rem;


}





.step p {


  font-size: 0.9rem;


  color: var(--muted);


  line-height: 1.65;


}





/* ============================================================


   10. PROMO BANNER


   ============================================================ */


.promo-section { padding: 5rem 0; }





.promo-banner {


  background: linear-gradient(135deg, #B5A5FF 0%, #E9A86F 100%);


  border-radius: var(--radius-lg);


  padding: 3rem 3.5rem;


  color: var(--white);


  display: flex;


  align-items: center;


  gap: 3rem;


}





.promo-badge {


  flex-shrink: 0;


  width: 120px;


  height: 120px;


  background: rgba(255,255,255,0.15);


  border: 3px solid rgba(255,255,255,0.45);


  border-radius: 50%;


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  text-align: center;


  padding: 0.5rem;


}





.promo-badge-number {


  font-size: 2.4rem;


  font-weight: 800;


  line-height: 1;


  color: var(--white);


}





.promo-badge-label {


  font-size: 0.62rem;


  font-weight: 700;


  text-transform: uppercase;


  letter-spacing: 0.08em;


  opacity: 0.85;


  line-height: 1.3;


}





.promo-content { flex: 1; }





.promo-tag {


  display: inline-block;


  font-size: 0.72rem;


  font-weight: 700;


  letter-spacing: 0.1em;


  text-transform: uppercase;


  background: rgba(255,255,255,0.2);


  padding: 0.3rem 0.8rem;


  border-radius: var(--radius-pill);


  margin-bottom: 0.75rem;


}





.promo-content h2 {


  font-size: clamp(1.4rem, 3vw, 2rem);


  font-weight: 800;


  color: var(--white);


  margin-bottom: 0.6rem;


  line-height: 1.1;


}





.promo-content p {


  font-size: 0.95rem;


  color: rgba(255,255,255,0.82);


  margin-bottom: 1.5rem;


  max-width: 480px;


  line-height: 1.65;


}





/* ============================================================


   SPLIT SECTIONS


   ============================================================ */


.split-section {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 5rem;


  align-items: center;


}





.split-section.reverse .split-text { order: 2; }


.split-section.reverse .split-visual { order: 1; }





.split-text .section-tag { margin-bottom: 0.75rem; }


.split-text h2 { margin-bottom: 1rem; }


.split-text p { margin-bottom: 1.5rem; }





.split-features {


  display: flex;


  flex-direction: column;


  gap: 0.9rem;


  margin-bottom: 2rem;


}





.split-feature {


  display: flex;


  align-items: flex-start;


  gap: 0.75rem;


  font-size: 0.95rem;


  color: var(--body);


}





.split-feature .feat-icon {


  color: var(--green);


  font-weight: 700;


  flex-shrink: 0;


  margin-top: 2px;


}





/* ============================================================


   11. DOWNLOAD CTA SECTION


   ============================================================ */


.download-section {


  background: var(--green-deep);


  text-align: center;


  padding: 5rem 0;


}





.download-section h2 {


  color: var(--white);


  font-size: clamp(1.8rem, 3.5vw, 2.75rem);


  margin-bottom: 1rem;


}





.download-section p {


  color: rgba(255,255,255,0.65);


  font-size: 1.05rem;


  max-width: 500px;


  margin: 0 auto 2.5rem;


}





.download-actions {


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 2.5rem;


  flex-wrap: wrap;


}





/* ============================================================

   12. FAQ ACCORDION


   ============================================================ */


.faq-list {


  max-width: 760px;


  margin: 0 auto;


}





.faq-item { border-bottom: 1px solid var(--border); }





.faq-question {


  display: flex;


  justify-content: space-between;


  align-items: center;


  padding: 1.4rem 0;


  cursor: pointer;


  font-size: 1rem;


  font-weight: 600;


  color: var(--ink);


  gap: 1rem;


  transition: color var(--transition);


  background: none;


  border: none;


  width: 100%;


  text-align: left;


}


.faq-question:hover { color: var(--green); }





.faq-chevron {


  flex-shrink: 0;


  width: 24px;


  height: 24px;


  background: var(--green-light);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  transition: transform var(--transition), background var(--transition);


  color: var(--green);


  font-size: 0.7rem;


}





.faq-item.open .faq-chevron {


  transform: rotate(180deg);


  background: var(--green);


  color: var(--white);


}





.faq-answer {


  max-height: 0;


  overflow: hidden;


  transition: max-height 0.35s ease;


}





.faq-answer-inner {


  padding: 0 0 1.4rem;


  font-size: 0.95rem;


  color: var(--body);


  line-height: 1.7;


}





/* ============================================================


   13. FOOTER


   ============================================================ */


.footer {


  background: var(--green-deep);


  color: rgba(255,255,255,0.65);


  padding: 4rem 0 0;


}





.footer-grid {


  display: grid;


  grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;


  gap: 3rem;


  padding-bottom: 3rem;


}





.footer-brand .nav-logo {


  color: var(--white);


  font-size: 1.2rem;


  margin-bottom: 1rem;


  display: inline-flex;


}





.footer-brand p {


  font-size: 0.88rem;


  color: rgba(255,255,255,0.5);


  line-height: 1.75;


  max-width: 240px;


}





.footer-col h4 {


  color: var(--white);


  font-size: 0.82rem;


  font-weight: 700;


  text-transform: uppercase;


  letter-spacing: 0.09em;


  margin-bottom: 1.25rem;


}





.footer-col ul {


  display: flex;


  flex-direction: column;


  gap: 0.75rem;


}





.footer-col ul a {


  font-size: 0.88rem;


  color: rgba(255,255,255,0.5);


  transition: color var(--transition);


}


.footer-col ul a:hover { color: var(--green); }





.footer-bottom {


  border-top: 1px solid rgba(255,255,255,0.07);


  padding: 1.5rem 0;


  display: flex;


  justify-content: center;


  align-items: center;


  font-size: 0.83rem;


  color: rgba(255,255,255,0.3);


  text-align: center;


}





/* ============================================================


   VISUAL MOCKS


   ============================================================ */


.visual-card {


  background: var(--white);


  border: 1px solid var(--border);


  border-radius: var(--radius-md);


  padding: 1.5rem;


  box-shadow: 0 4px 20px rgba(0,0,0,0.07);


}





/* SEAT MAP */


.seat-map {


  background: var(--white);


  border: 1px solid var(--border);


  border-radius: var(--radius-md);


  padding: 1.5rem;


  box-shadow: 0 4px 20px rgba(0,0,0,0.07);


}





.seat-map-header {


  display: flex;


  align-items: center;


  justify-content: space-between;


  margin-bottom: 1.25rem;


  padding-bottom: 1rem;


  border-bottom: 1px solid var(--border);


}





.seat-map-title {


  font-size: 0.88rem;


  font-weight: 700;


  color: var(--ink);


}





.seat-legend {


  display: flex;


  gap: 1rem;


  flex-wrap: wrap;


}





.legend-item {


  display: flex;


  align-items: center;


  gap: 0.35rem;


  font-size: 0.7rem;


  color: var(--muted);


}





.legend-dot {


  width: 12px;


  height: 12px;


  border-radius: 3px;


}


.legend-dot.available { background: var(--green-light); border: 1px solid var(--green); }


.legend-dot.taken { background: var(--border); }


.legend-dot.selected { background: var(--green); }





.seat-grid {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: 0.5rem;


}





.seat {


  aspect-ratio: 1;


  border-radius: 6px;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 0.68rem;


  font-weight: 600;


  cursor: pointer;


  transition: transform 0.15s ease;


}





.seat.available {


  background: var(--green-light);


  border: 1px solid var(--green);


  color: var(--green);


}


.seat.taken {


  background: var(--border);


  color: var(--muted);


  cursor: not-allowed;


}


.seat.selected {


  background: var(--green);


  color: var(--white);


  transform: scale(1.08);


  box-shadow: 0 2px 8px rgba(124,92,255,0.28);


}





/* MAP CARD MOCK */


.map-card {


  background: linear-gradient(135deg, #F7F6FB, #B5A5FF);


  border: 1px solid var(--border);


  border-radius: var(--radius-md);


  padding: 1.5rem;


  min-height: 200px;


  display: flex;


  flex-direction: column;


  box-shadow: 0 4px 20px rgba(0,0,0,0.07);


  position: relative;


  overflow: hidden;


}





.map-card::before {


  content: '';


  position: absolute;


  inset: 0;


  background:


    repeating-linear-gradient(0deg, rgba(124,92,255,0.10) 0px, rgba(124,92,255,0.10) 1px, transparent 1px, transparent 30px),


    repeating-linear-gradient(90deg, rgba(124,92,255,0.10) 0px, rgba(124,92,255,0.10) 1px, transparent 1px, transparent 30px);


}





.map-card-header {


  font-size: 0.75rem;


  font-weight: 700;


  color: var(--green-dark);


  text-transform: uppercase;


  letter-spacing: 0.08em;


  position: relative;


  z-index: 1;


  margin-bottom: auto;


}





.map-pin-wrap {


  display: flex;


  align-items: center;


  justify-content: center;


  flex: 1;


  position: relative;


  z-index: 1;


}





.map-pin {


  width: 42px;


  height: 42px;


  background: var(--green);


  border-radius: 50% 50% 50% 0;


  transform: rotate(-45deg);


  box-shadow: 0 4px 14px rgba(124,92,255,0.42);


  position: relative;


}





.map-pin::after {


  content: '';


  position: absolute;


  width: 16px;


  height: 16px;


  background: var(--white);


  border-radius: 50%;


  top: 50%;


  left: 50%;


  transform: translate(-50%, -50%);


}





/* BOOKING CARDS */


.booking-cards-stack {


  display: flex;


  flex-direction: column;


  gap: 0.75rem;


}





.booking-card {


  background: var(--white);


  border: 1px solid var(--border);


  border-radius: var(--radius-md);


  padding: 1.25rem;


  box-shadow: 0 2px 10px rgba(0,0,0,0.06);


}





.booking-card-header {


  display: flex;


  justify-content: space-between;


  align-items: center;


  margin-bottom: 0.5rem;


}





.booking-route {


  font-size: 0.92rem;


  font-weight: 700;


  color: var(--ink);


}





.booking-status {


  font-size: 0.7rem;


  font-weight: 700;


  padding: 0.22rem 0.65rem;


  border-radius: var(--radius-pill);


  text-transform: uppercase;


  letter-spacing: 0.05em;


}





.status-confirmed { background: var(--green-light); color: var(--green-dark); }


.status-upcoming  { background: var(--gold-light); color: var(--gold); }


.status-completed { background: var(--border); color: var(--muted); }





.booking-detail {


  font-size: 0.8rem;


  color: var(--muted);


}





/* ELIGIBILITY GRID */


.eligibility-grid {


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: 1rem;


}





.eligibility-item {


  background: var(--white);


  border: 1px solid var(--border);


  border-radius: var(--radius-md);


  padding: 1.25rem 1.5rem;


  display: flex;


  align-items: center;


  gap: 0.75rem;


  font-size: 0.92rem;


  font-weight: 600;


  color: var(--ink);


  box-shadow: var(--shadow-card);


}





.eligibility-check {


  width: 28px;


  height: 28px;


  background: var(--green-light);


  border-radius: 50%;


  display: flex;


  align-items: center;


  justify-content: center;


  color: var(--green);


  font-weight: 700;


  font-size: 0.82rem;


  flex-shrink: 0;


}





/* EARNINGS */


.earnings-stats {


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: 1.5rem;


  margin-bottom: 2rem;


}





.earning-stat {


  background: var(--green-light);


  border-radius: var(--radius-md);


  padding: 2rem;


  text-align: center;


}





.earning-stat-num {


  font-size: 2.2rem;


  font-weight: 800;


  color: var(--green);


  line-height: 1;


  margin-bottom: 0.4rem;


}





.earning-stat-label {


  font-size: 0.88rem;


  font-weight: 700;


  color: var(--ink);


  margin-bottom: 0.2rem;


}





.earning-stat-sub {


  font-size: 0.78rem;


  color: var(--muted);


}





/* TRUST LEVELS */


.trust-cards {


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: 1.5rem;


}





.trust-card {


  background: var(--white);


  border: 1px solid var(--border);


  border-radius: var(--radius-md);


  padding: 2rem;


  text-align: center;


  box-shadow: var(--shadow-card);


  transition: transform var(--transition), box-shadow var(--transition);


}


.trust-card:hover {


  transform: translateY(-4px);


  box-shadow: var(--shadow-hover);


}





.trust-badge { margin-bottom: 0.75rem; display: flex; justify-content: center; }


.trust-badge svg { width: 44px; height: 44px; }


.trust-badge.bronze { color: #b45309; }


.trust-badge.silver { color: #9ca3af; }


.trust-badge.gold   { color: #d4a017; }


.trust-card h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }


.trust-trips { font-size: 0.8rem; color: var(--green); font-weight: 700; margin-bottom: 0.6rem; }


.trust-card p { font-size: 0.88rem; color: var(--muted); }





/* CITIES SECTION */


.cities-section {


  background: var(--green-deep);


  padding: 5rem 0;


  text-align: center;


}


.cities-section .section-title { color: var(--white); }


.cities-section .section-sub { color: rgba(255,255,255,0.55); margin: 0 auto 2.5rem; }





.route-card {


  background: rgba(255,255,255,0.06);


  border: 1px solid rgba(255,255,255,0.12);


  border-radius: var(--radius-lg);


  padding: 2.5rem 4rem;


  display: inline-flex;


  align-items: center;


  gap: 2rem;


}





.route-city {


  font-size: 1.6rem;


  font-weight: 800;


  color: var(--white);


}





.route-arrow {


  font-size: 1.4rem;


  color: var(--green);


  font-weight: 700;


}





/* SAFETY */


.safety-grid {


  display: grid;


  grid-template-columns: repeat(4, 1fr);


  gap: 1.5rem;


}





.safety-card {


  background: var(--white);


  border-radius: var(--radius-md);


  padding: 1.75rem;


  text-align: center;


  box-shadow: var(--shadow-card);


}





.safety-icon { margin-bottom: 0.75rem; display: flex; justify-content: center; color: var(--green); }


.safety-icon svg { width: 32px; height: 32px; }


.safety-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.45rem; }


.safety-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }





/* VEHICLE CARDS */


.vehicle-cards {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 2rem;


}





.vehicle-card {


  background: var(--white);


  border: 2px solid var(--border);


  border-radius: var(--radius-lg);


  padding: 2.5rem;


  text-align: center;


  transition: all var(--transition);


}


.vehicle-card:hover {


  border-color: var(--green);


  box-shadow: var(--shadow-hover);


  transform: translateY(-4px);


}





.vehicle-emoji { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1; }


.vehicle-card h3 { font-size: 1.2rem; margin-bottom: 0.65rem; }


.vehicle-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }





/* DRIVER PROMO BANNER (top of driver page, very prominent) */


.driver-promo-banner {


  background: linear-gradient(135deg, #B5A5FF 0%, #E9A86F 60%, #B5A5FF 100%);


  padding: 4rem 0;


}





.driver-promo-inner {


  background: rgba(0,0,0,0.12);


  border: 2px solid rgba(255,255,255,0.22);


  border-radius: var(--radius-lg);


  padding: 3.5rem;


  text-align: center;


}





.driver-promo-inner .promo-tag {


  background: rgba(255,255,255,0.25);


  font-size: 0.82rem;


}





.driver-promo-inner h2 {


  font-size: clamp(2rem, 5vw, 3.5rem);


  font-weight: 800;


  color: var(--white);


  margin: 0.5rem 0;


  line-height: 1.05;


}





.promo-subtitle {


  font-size: 1.15rem;


  font-weight: 700;


  color: rgba(255,255,255,0.88);


  margin-bottom: 1rem;


}





.driver-promo-divider {


  width: 60px;


  height: 2px;


  background: rgba(255,255,255,0.25);


  margin: 1.5rem auto;


}





.driver-promo-inner > p {


  font-size: 1rem;


  color: rgba(255,255,255,0.8);


  max-width: 540px;


  margin: 0 auto 0.4rem;


  line-height: 1.65;


}





.driver-promo-perks {


  display: flex;


  justify-content: center;


  gap: 2.5rem;


  margin: 1.5rem 0 2rem;


  flex-wrap: wrap;


}





.driver-promo-perk {


  font-size: 0.9rem;


  font-weight: 600;


  color: rgba(255,255,255,0.85);


  display: flex;


  align-items: center;


  gap: 0.4rem;


}





.driver-promo-perk .check { color: var(--white); font-size: 1rem; }





/* ============================================================


   14. ANIMATIONS


   ============================================================ */


.fade-up {


  opacity: 0;


  transform: translateY(30px);


  transition: opacity 0.6s ease, transform 0.6s ease;


}





.fade-up.visible {


  opacity: 1;


  transform: translateY(0);


}





.fade-up[data-delay="100"] { transition-delay: 0.10s; }


.fade-up[data-delay="200"] { transition-delay: 0.20s; }


.fade-up[data-delay="300"] { transition-delay: 0.30s; }


.fade-up[data-delay="400"] { transition-delay: 0.40s; }


.fade-up[data-delay="500"] { transition-delay: 0.50s; }


.fade-up[data-delay="600"] { transition-delay: 0.60s; }





/* ============================================================


   15. MODAL


   ============================================================ */


.modal-overlay {


  position: fixed;


  inset: 0;


  background: rgba(0,0,0,0.6);


  display: flex;


  align-items: center;


  justify-content: center;


  z-index: 9999;


  opacity: 0;


  pointer-events: none;


  transition: opacity 0.25s ease;


  padding: 1.5rem;


  backdrop-filter: blur(4px);


  -webkit-backdrop-filter: blur(4px);


}





.modal-overlay.open {


  opacity: 1;


  pointer-events: all;


}





.modal-box {


  background: var(--white);


  border-radius: var(--radius-lg);


  padding: 2.5rem 2rem;


  max-width: 380px;


  width: 100%;


  text-align: center;


  position: relative;


  box-shadow: 0 20px 60px rgba(0,0,0,0.3);


  transform: scale(0.92);


  transition: transform 0.25s ease;


}





.modal-overlay.open .modal-box { transform: scale(1); }





.modal-close {


  position: absolute;


  top: 1rem;


  right: 1rem;


  width: 36px;


  height: 36px;


  border-radius: 50%;


  background: var(--green-light);


  border: none;


  cursor: pointer;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 1rem;


  color: var(--muted);


  transition: all var(--transition);


  line-height: 1;


}


.modal-close:hover { background: var(--border); color: var(--ink); }





.modal-logo {


  width: 52px;


  height: 52px;


  background: url('../images/logo.svg') center / contain no-repeat;


  border-radius: 14px;


  display: flex;


  align-items: center;


  justify-content: center;


  font-size: 0;


  margin: 0 auto 1rem;


  color: transparent;


  font-weight: 800;


}





.modal-box h3 {


  font-size: 1.2rem;


  font-weight: 800;


  color: var(--ink);


  margin-bottom: 0.3rem;


}





.modal-sub {


  font-size: 0.85rem;


  color: var(--muted);


  margin-bottom: 1.5rem;


}





.modal-scan-text {

  font-size: 0.82rem;


  color: var(--muted);


  margin-bottom: 0.35rem;


}





.modal-coming-soon {


  font-size: 0.76rem;


  font-weight: 700;


  color: var(--green);


  margin-bottom: 1.25rem;


  text-transform: uppercase;


  letter-spacing: 0.08em;


}





.play-store-state {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  width: min(100%, 320px);

  justify-content: center;

  background: var(--primary-tint);

  color: var(--ink);

  padding: 0.9rem 1.25rem;

  border: 1px solid var(--border);

  border-radius: 10px;

  font-size: 0.82rem;

}

.play-store-icon { color: var(--primary); font-size: 1.4rem; }

.play-store-state span:last-child { text-align: left; }

.play-store-state small {

  display: block;

  font-size: 0.62rem;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.06em;

}

.play-store-state strong { display: block; font-size: 0.95rem; font-weight: 800; }




/* About stats 2 - 2 grid  -  class replaces inline style */


.about-stats {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 1rem;


}





/* ============================================================


   16. RESPONSIVE


   ============================================================ */





@media (max-width: 1024px) {


  .cards-grid { grid-template-columns: repeat(2, 1fr); }


  .safety-grid { grid-template-columns: repeat(2, 1fr); }


  .split-section { gap: 3rem; }


  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }


  .eligibility-grid { grid-template-columns: repeat(2, 1fr); }


  .earnings-stats { grid-template-columns: repeat(3, 1fr); }


  .trust-cards { grid-template-columns: repeat(3, 1fr); }


}





@media (max-width: 768px) {


  /* Nav  -  only the logo and hamburger remain, and the hamburger's own


     margin-left:auto already pushes it flush to the right edge. The


     desktop 2rem gap was still being added on TOP of that auto-margin


     push, forcing extra guaranteed spacing between them that had nowhere


     to go on narrow/zoomed-out phones and cramped/clipped the hamburger's


     tap target against the edge of the screen. */


  .nav-inner { gap: 0.75rem; }


  .nav-links, .btn-nav { display: none; }


  .hamburger { display: flex; }


  .mobile-menu { display: flex; }





  /* Sections */


  section { padding: 3rem 0; }





  /* Hero  -  center on mobile, full-width CTAs */


  .hero { padding: 6rem 0 3rem; }


  .hero-content { text-align: center; }


  .hero h1 { font-size: clamp(2rem, 8vw, 3rem); }


  .hero p { font-size: 1rem; margin-left: auto; margin-right: auto; }


  .hero-ctas { flex-direction: column; align-items: stretch; gap: 0.75rem; }


  .hero-ctas .btn-primary,


  .hero-ctas .btn-outline { width: 100%; justify-content: center; }


  .hero-trust { justify-content: center; }





  /* Stats */


  .stats-inner { flex-wrap: wrap; }


  .stat-item {


    width: 50%;


    border-right: none;


    border-bottom: 1px solid var(--border);


    padding: 1rem 1.5rem;


  }


  .stat-item:nth-child(odd) { border-right: 1px solid var(--border); }


  .stat-item:last-child, .stat-item:nth-last-child(2) { border-bottom: none; }





  /* Cards */


  .cards-grid { grid-template-columns: 1fr; }


  .cards-grid-2 { grid-template-columns: 1fr; }


  .safety-grid { grid-template-columns: 1fr 1fr; }


  .vehicle-cards { grid-template-columns: 1fr; }


  .eligibility-grid { grid-template-columns: 1fr 1fr; }


  .earnings-stats { grid-template-columns: 1fr; }


  .trust-cards { grid-template-columns: 1fr; }





  /* How it works */


  .steps { flex-direction: column; gap: 1.5rem; }


  .steps::before { display: none; }


  .step { flex-direction: row; text-align: left; padding: 0; gap: 1.25rem; align-items: flex-start; }


  .step-number { margin-bottom: 0; flex-shrink: 0; }





  /* Split sections */


  .split-section { grid-template-columns: 1fr; gap: 2rem; }


  .split-section.reverse .split-text { order: 1; }


  .split-section.reverse .split-visual { order: 2; }





  /* Seat map header wraps on narrow screens */


  .seat-map-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }





  /* Promo banner */


  .promo-banner { flex-direction: column; text-align: center; padding: 2.5rem 1.5rem; gap: 1.5rem; }





  /* Footer  -  single column (inline style removed) */


  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }





  .download-actions { flex-direction: column; gap: 1.5rem; align-items: stretch; }


  .download-actions .btn-primary { width: 100%; justify-content: center; font-size: 1rem; }





  /* Driver page specifics */


  .driver-promo-inner { padding: 2.5rem 1.5rem; }


  .driver-promo-perks { gap: 1rem; flex-direction: column; align-items: center; }





  /* Route card */


  .route-card { padding: 2rem 1.5rem; gap: 0.75rem; flex-direction: column; width: 100%; }





  /* Cookie consent banner  -  the desktop layout put the message text


     (min-width: 220px, so it never shrank below that) in the same row as


     the Accept/Decline buttons (flex-shrink: 0). On a narrow phone, or a


     desktop window zoomed out enough to report a narrow layout viewport,


     those two fixed-size pieces together didn't fit the available width,


     squeezing the buttons or forcing the whole banner to overflow


     sideways. Stack it into a column instead, drop the min-width floor,


     and make the two buttons share the row evenly so they're still easy


     to tap. */


  #cookie-banner { flex-direction: column; align-items: stretch; text-align: center; padding: 1rem 1.25rem; }


  #cookie-banner p { min-width: 0; flex: initial; }


  #cookie-banner-actions { width: 100%; }


  #cookie-accept, #cookie-decline { flex: 1; }


}





@media (max-width: 480px) {


  /* Tighter sections on small phones */


  section { padding: 2.5rem 0; }


  .section-header { margin-bottom: 2rem; }





  /* Safety / eligibility full width */


  .safety-grid { grid-template-columns: 1fr; }


  .eligibility-grid { grid-template-columns: 1fr; }





  /* Stats full width */


  .stat-item { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }


  .stat-item:last-child { border-bottom: none; }





  /* Promo */


  .promo-section { padding: 2.5rem 0; }


  .promo-banner { padding: 2rem 1.25rem; }





  /* About stats stays 2x2  -  small cards are fine at this width */





  /* Typography scale down slightly */


  .section-title { font-size: clamp(1.4rem, 6vw, 2rem); }





  /* Touch-friendly FAQ */


  .faq-question { padding: 1.2rem 0; font-size: 0.95rem; }


  .faq-chevron { width: 28px; height: 28px; flex-shrink: 0; }





  /* Footer brand description max-width */


  .footer-brand p { max-width: 100%; }


}





@media (max-width: 360px) {


  /* Very small phones (Galaxy A series etc.) */


  .hero h1 { font-size: 1.75rem; }


  .hero p { font-size: 0.92rem; }


  .about-stats { gap: 0.6rem; }


  .card { padding: 1.25rem; }


  .step-number { width: 44px; height: 44px; font-size: 1rem; }


  .section-tag { font-size: 0.68rem; }





  /* A little extra breathing room for the nav logo + hamburger on the


     smallest/most zoomed-out screens, where the default 1.5rem side


     padding left the least amount of slack between them. */


  .container { padding: 0 1rem; }


}





/* Legal pages */


.legal-content {


  max-width: 780px;


  margin: 0 auto;


  padding: 7rem 1.5rem 5rem;


}


.legal-content h1 {


  font-size: clamp(1.8rem, 3.5vw, 2.5rem);


  font-weight: 800;


  color: var(--ink);


  margin-bottom: 0.5rem;


}


.legal-content .legal-date {


  font-size: 0.82rem;


  color: var(--muted);


  margin-bottom: 2.5rem;


}


.legal-content h2 {


  font-size: 1.15rem;


  font-weight: 700;


  color: var(--ink);


  margin: 2rem 0 0.6rem;


}


.legal-content p {


  font-size: 0.95rem;


  color: var(--body);


  line-height: 1.75;


  margin-bottom: 1rem;


}


.legal-content ul {


  list-style: disc;


  padding-left: 1.5rem;


  margin-bottom: 1rem;


}


.legal-content ul li {


  font-size: 0.95rem;


  color: var(--body);


  line-height: 1.75;


  margin-bottom: 0.4rem;


}


.legal-content a { color: var(--green); font-weight: 600; }


.legal-content .legal-back {


  display: inline-flex;


  align-items: center;


  gap: 0.4rem;


  font-size: 0.85rem;


  font-weight: 700;


  color: var(--green);


  margin-bottom: 2rem;


  text-decoration: none;


}


.legal-content .legal-back:hover { text-decoration: underline; }





/* OWNER REQUEST FORM */


.owner-request-form {


  background: var(--white);


  border: 1px solid var(--border);


  border-radius: var(--radius-md);


  box-shadow: var(--shadow-card);


  padding: 2rem;


  display: flex;


  flex-direction: column;


  gap: 1.1rem;


}


.owner-request-form .form-row {


  display: flex;


  flex-direction: column;


  gap: 0.4rem;


}


.owner-request-form label {


  font-size: 0.85rem;


  font-weight: 700;


  color: var(--ink);


}


.owner-request-form .optional-tag {


  font-weight: 500;


  color: var(--muted);


}


.owner-request-form input,


.owner-request-form textarea {


  border: 1px solid var(--border);


  border-radius: var(--radius-sm);


  padding: 0.7rem 0.9rem;


  font-size: 0.95rem;


  color: var(--body);


  background: var(--white);


  transition: border-color var(--transition);


}


.owner-request-form input:focus,


.owner-request-form textarea:focus {


  outline: none;


  border-color: var(--green);


}


.owner-request-form textarea { resize: vertical; }


.owner-request-form button[type="submit"]:disabled {


  opacity: 0.6;


  cursor: not-allowed;


}


.owner-request-status {


  font-size: 0.85rem;


  font-weight: 600;


  min-height: 1.2em;


  margin: 0;


}


.owner-request-status.is-success { color: var(--green-dark); }


.owner-request-status.is-error { color: #B3261E; }





@media (max-width: 768px) {

  .owner-request-form { padding: 1.5rem; }

}





/* 2026 brand refresh: shared app palette and product-led marketing layer */

body { background: var(--surface); }

::selection { background: var(--accent); color: var(--ink); }

.container { max-width: 1240px; }

.section-white { background: var(--white); }

.section-light { background: var(--surface); }

.section-dark, .cities-section, .download-section, .footer { background: var(--ink); }

.section-tag {

  color: var(--green-dark);

  background: var(--primary-tint);

  border: 1px solid rgba(124,92,255,0.16);

  letter-spacing: 0.08em;

}

.nav.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(18px); }

.btn-primary, .btn-nav {

  box-shadow: 0 10px 28px rgba(124,92,255,0.22);

}

.btn-primary:hover, .btn-nav:hover { box-shadow: 0 14px 34px rgba(124,92,255,0.3); }

.btn-outline-dark { color: var(--green-dark); border-color: var(--green); }

.card { border-radius: 12px; box-shadow: 0 8px 28px rgba(20,18,31,0.05); }

.card:hover { background: var(--white); border-color: rgba(124,92,255,0.35); }

.card-icon, .safety-icon { border-radius: 12px; background: var(--primary-tint); }



.hero .container { width: 100%; }

.hero-shell { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(390px, 0.78fr); align-items: center; gap: 4rem; }

.hero-content { max-width: 680px; }

.hero-kicker { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; color: #DAD2FF; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }

.hero-kicker::before { content: ''; width: 28px; height: 2px; background: var(--accent); }

.hero h1 { max-width: 720px; font-size: clamp(3rem, 6vw, 5.4rem); }

.hero h1 .green-text { color: var(--accent); }

.hero p { max-width: 620px; font-size: 1.1rem; color: rgba(255,255,255,0.72); }

.hero-ctas .btn-primary { background: var(--green); border-color: var(--green); }

.hero-ctas .btn-outline { border-color: rgba(255,255,255,0.24); }

.hero-trust { gap: 1rem; }

.trust-item { padding: 0.45rem 0.65rem; border-radius: 8px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.72); }

.trust-item .check { color: var(--accent); }



.hero-product { position: relative; min-height: 590px; display: grid; place-items: center; perspective: 1200px; }

.route-orbit { position: absolute; inset: 10% 0 8%; border: 1px solid rgba(181,165,255,0.22); border-radius: 50%; transform: rotate(-16deg); }

.route-orbit::before, .route-orbit::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 8px rgba(181,165,255,0.12); }

.route-orbit::before { left: 8%; top: 47%; }

.route-orbit::after { right: 10%; bottom: 24%; background: var(--success); box-shadow: 0 0 0 8px rgba(76,175,125,0.14); }

.phone-frame { position: relative; z-index: 2; width: min(330px, 78vw); aspect-ratio: 0.49; border: 9px solid #2A254C; border-radius: 44px; padding: 12px; background: #0E0C18; box-shadow: 0 42px 90px rgba(0,0,0,0.44); transform: rotate(4deg); animation: phone-float 6s ease-in-out infinite; }

.phone-screen { height: 100%; overflow: hidden; border-radius: 29px; background: #F7F6FB; color: var(--ink); }

.phone-status { display: flex; justify-content: space-between; padding: 15px 19px 8px; font-size: 10px; font-weight: 800; }

.phone-header { padding: 11px 18px 13px; display: flex; align-items: center; justify-content: space-between; }

.phone-greeting small { display: block; color: var(--muted); font-size: 9px; }

.phone-greeting strong { font-size: 15px; }

.phone-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint); color: var(--green-dark); font-weight: 900; }

.phone-booking { margin: 0 14px; padding: 15px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 9px 24px rgba(20,18,31,0.07); }

.phone-field { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: var(--surface); }

.phone-field + .phone-field { margin-top: 8px; }

.phone-pin { width: 9px; height: 9px; border: 2px solid var(--success); border-radius: 50%; flex: none; }

.phone-pin.destination { border-color: var(--danger); border-radius: 2px 2px 6px 6px; transform: rotate(45deg); }

.phone-field small { display: block; color: var(--muted); font-size: 7px; text-transform: uppercase; }

.phone-field strong { display: block; font-size: 11px; }

.phone-search { margin-top: 11px; padding: 10px; text-align: center; color: #fff; background: var(--green); border-radius: 10px; font-size: 10px; font-weight: 900; }

.phone-results { padding: 16px 14px; }

.phone-results-head { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 9px; font-weight: 800; }

.ride-mini { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 5px 16px rgba(20,18,31,0.05); }

.ride-mini + .ride-mini { margin-top: 8px; }

.ride-mini-top { display: flex; justify-content: space-between; font-size: 10px; font-weight: 900; }

.ride-mini-price { color: var(--green-dark); }

.ride-mini-meta { margin-top: 5px; color: var(--muted); font-size: 8px; }

.live-chip { position: absolute; z-index: 3; right: -12px; top: 24%; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 800; box-shadow: 0 14px 34px rgba(0,0,0,0.2); animation: chip-float 5s ease-in-out infinite; }

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(76,175,125,0.14); }

.seat-chip { position: absolute; z-index: 3; left: -2px; bottom: 16%; padding: 11px 14px; border-radius: 10px; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 900; box-shadow: 0 14px 34px rgba(0,0,0,0.2); animation: chip-float 5s 1s ease-in-out infinite; }



.stats-bar { background: var(--white); }

.stat-number { color: var(--green-dark); }

.promo-banner { background: var(--green); color: var(--white); border-radius: 16px; }

.promo-badge { border-radius: 14px; }

.btn-gold { color: var(--green-dark); }

.seat.selected { background: var(--green); border-color: var(--green); }

.legend-dot.selected { background: var(--green); }

.route-card { border-color: rgba(181,165,255,0.25); box-shadow: 0 18px 50px rgba(0,0,0,0.22); }

.route-arrow { color: var(--accent); }

.faq-list { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 0 1.5rem; }

.footer { border-top: 1px solid rgba(181,165,255,0.14); }

#cookie-banner { background: var(--ink); color: #F4F2FC; }

#cookie-banner a { color: var(--accent); }

#cookie-accept { background: var(--green); }

#cookie-accept:hover { background: var(--green-dark); }



@keyframes phone-float { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-12px); } }

@keyframes chip-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }



@media (max-width: 920px) {

  .hero { min-height: auto; padding-top: 7.5rem; }

  .hero-shell { grid-template-columns: 1fr; gap: 2rem; }

  .hero-content { text-align: center; margin: 0 auto; }

  .hero-kicker { justify-content: center; }

  .hero p { margin-left: auto; margin-right: auto; }

  .hero-ctas, .hero-trust { justify-content: center; }

  .hero-product { min-height: 520px; }

}



@media (max-width: 600px) {

  .hero { padding: 6.5rem 0 2rem; }

  .hero h1 { font-size: 2.75rem; }

  .hero p { font-size: 1rem; }

  .hero-product { min-height: 470px; }

  .phone-frame { width: 260px; border-radius: 36px; }

  .live-chip { right: 0; }

  .seat-chip { left: 0; }

}



@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }

}



/* Production readiness: focus, consent, legal notices and error states */

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 10001; padding: 0.7rem 1rem; background: var(--white); color: var(--ink); transform: translateY(-150%); }

.skip-link:focus { transform: translateY(0); }

.legal-notice { margin-top: 2rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 8px; background: var(--primary-tint); color: var(--body); }

.error-page { min-height: 100dvh; display: grid; place-content: center; justify-items: start; gap: 1rem; max-width: 680px; margin: auto; padding: 2rem; }

.error-code { margin: 2rem 0 -1rem; color: var(--green); font-size: 1rem; font-weight: 900; }

.error-page h1 { font-size: clamp(2.2rem, 7vw, 4.5rem); }

.error-page p { max-width: 42rem; }

#cookie-banner { padding-bottom: calc(1.1rem + env(safe-area-inset-bottom)); }

#cookie-banner p { min-width: min(100%, 220px); }

#cookie-settings { background: transparent; color: #F4F2FC; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; padding: 0.5rem 1.1rem; font-weight: 700; cursor: pointer; }

.cookie-preferences { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 1rem; background: rgba(20,18,31,0.72); }

.cookie-preferences[hidden] { display: none; }

.cookie-panel { width: min(100%, 520px); max-height: min(90dvh, 650px); overflow: auto; border-radius: 12px; background: var(--white); color: var(--ink); padding: 1.5rem; box-shadow: 0 24px 80px rgba(0,0,0,0.3); }

.cookie-panel h2, .cookie-panel strong { margin-bottom: 0.5rem; color: var(--ink); }

.cookie-panel p, .cookie-category span { color: var(--body); }

.cookie-category { display: flex; justify-content: space-between; gap: 1rem; margin: 1.25rem 0; padding: 1rem 0; border-block: 1px solid var(--border); }

.cookie-category strong { display: block; }

.cookie-required { color: var(--green-dark) !important; font-size: 0.8rem; font-weight: 800; }

.cookie-panel-actions { display: flex; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; }

.cookie-reopen { border: 0; background: none; color: inherit; padding: 0; cursor: pointer; text-decoration: underline; }

@media (max-width: 600px) { #cookie-banner-actions { width: 100%; } #cookie-banner-actions button { flex: 1; min-height: 44px; } .cookie-panel-actions > * { width: 100%; justify-content: center; } }



/* Owner overview */

.owner-overview { max-width: 1080px; margin: 0 auto; }

.owner-overview-intro { max-width: 760px; }

.owner-overview-lead { max-width: 720px; color: var(--body); font-size: 1.05rem; line-height: 1.75; }

.owner-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; padding: 2.25rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.owner-capability-number { display: block; margin-bottom: 1rem; color: var(--primary); font-size: 0.78rem; font-weight: 800; }

.owner-capability h3 { margin-bottom: 0.65rem; color: var(--ink); font-size: 1.05rem; }

.owner-capability p { color: var(--muted); font-size: 0.92rem; line-height: 1.7; }

.owner-overview-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }

.owner-overview-actions .btn-primary { text-decoration: none; }

.owner-login-link { color: var(--primary); font-size: 0.92rem; font-weight: 700; }

.role-hero { min-height: 660px; }

@media (max-width: 768px) {

  .owner-capabilities { grid-template-columns: 1fr; gap: 1.75rem; }

  .owner-overview-actions { align-items: stretch; flex-direction: column; }

  .owner-overview-actions .btn-primary { justify-content: center; text-align: center; }

}



/* Shared consent surface: final theme authority */

#cookie-banner {

  left: 1rem;

  right: 1rem;

  bottom: 1rem;

  width: min(calc(100% - 2rem), 1120px);

  margin-inline: auto;

  padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));

  border: 1px solid rgba(181, 165, 255, 0.28);

  border-radius: 8px;

  background: var(--ink);

  color: #F8F7FC;

  box-shadow: 0 18px 54px rgba(10, 8, 20, 0.32);

  font-size: 0.84rem;

}

.cookie-banner-copy { display: flex; align-items: flex-start; gap: 0.85rem; flex: 1; min-width: min(100%, 280px); }

.cookie-banner-copy > div { min-width: 0; }

.cookie-banner-copy strong { display: block; margin-bottom: 0.2rem; color: #FFFFFF; font-size: 0.92rem; }

.cookie-banner-copy p { margin: 0; min-width: 0; color: #E4E0F2; opacity: 1; }

.cookie-banner-icon { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgba(76, 175, 125, 0.18); color: #8EE0AF; font-weight: 900; }

#cookie-banner a { color: #D4CAFF; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }

#cookie-banner a:hover { color: #FFFFFF; }

#cookie-banner-actions { display: flex; align-items: center; gap: 0.65rem; }

#cookie-settings, #cookie-accept { min-height: 44px; border-radius: 8px; padding: 0.65rem 1rem; font: inherit; font-weight: 800; cursor: pointer; }

#cookie-settings { border: 1px solid rgba(255,255,255,0.38); background: transparent; color: #FFFFFF; }

#cookie-settings:hover { border-color: #D4CAFF; background: rgba(255,255,255,0.08); }

#cookie-accept { border: 1px solid var(--primary); background: var(--primary); color: #FFFFFF; }

#cookie-accept:hover { border-color: var(--primary-hover); background: var(--primary-hover); }

#cookie-settings:focus-visible, #cookie-accept:focus-visible { outline-color: #FFFFFF; }

.cookie-panel { border: 1px solid var(--border); }

.cookie-panel a { color: var(--primary); }

.cookie-panel-actions button { min-height: 44px; }



.expansion-routes { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 0.75rem; }

.route-suggestion { display: inline-flex; flex-direction: column; align-items: center; gap: 0.45rem; }

.route-pill { padding: 0.5rem 1.25rem; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.72); font-size: 0.85rem; font-weight: 700; }

.route-suggestion a { color: #D4CAFF; font-size: 0.72rem; font-weight: 800; text-underline-offset: 3px; }

.route-suggestion a:hover { color: #FFFFFF; }



@media (max-width: 600px) {

  #cookie-banner { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: calc(100% - 1.5rem); align-items: stretch; text-align: left; }

  #cookie-banner-actions { width: 100%; }

  #cookie-banner-actions button { flex: 1 1 0; }

}





/* PayFast readiness additions */

.services-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 1rem;

}

.service-card {

  min-height: 260px;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  padding: 1.35rem;

  border: 1px solid var(--border);

  border-radius: 8px;

  background: var(--white);

  box-shadow: 0 8px 24px rgba(20,18,31,0.05);

}

.service-number {

  color: var(--primary);

  font-size: 0.76rem;

  font-weight: 900;

  letter-spacing: 0.08em;

}

.service-card h3 { font-size: 1rem; line-height: 1.25; }

.service-card p { font-size: 0.9rem; line-height: 1.62; }

.service-audience {

  margin-top: auto;

  color: var(--green-dark) !important;

  font-size: 0.78rem !important;

  font-weight: 800;

}

.fare-note {

  margin-top: 1.5rem;

  padding: 1rem 1.1rem;

  border: 1px solid rgba(124,92,255,0.22);

  border-left: 4px solid var(--primary);

  border-radius: 8px;

  background: var(--primary-tint);

  color: var(--body);

  line-height: 1.7;

}

.footer-contact {

  display: grid;

  gap: 0.45rem;

  margin-top: 1rem;

  color: rgba(255,255,255,0.68);

  font-style: normal;

  font-size: 0.85rem;

}

.footer-contact a { color: #D4CAFF; }

@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } .service-card { min-height: auto; } }