/* ============================================================
   TRUE GOA TAXI — style.css
   Mobile-first, fully responsive
   ============================================================ */

/* ----- Reset & Base ----- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold:       #F5C242;
  --gold2:      #FFD97D;
  --gold-dim:   #C9963A;
  --dark:       #07090D;
  --card:       #101722;
  --card2:      #161D28;
  --muted:      #6B7A92;
  --muted2:     #9AAABB;
  --border:     rgba(245,194,66,.12);
  --border2:    rgba(255,255,255,.07);
  --gg:         linear-gradient(135deg,#C9963A 0%,#F5C242 55%,#FFD97D 100%);
  --r-xl:       24px;
  --r-lg:       18px;
  --r-md:       12px;
  --nav-h:      64px;
  --sg:         0 8px 28px rgba(245,194,66,.22);
  --t:         .22s cubic-bezier(.4,0,.2,1);
  --f-display: 'Playfair Display', Georgia, serif;
  --f-ui:      'Raleway', sans-serif;
  --f-body:    'Outfit', 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  background: var(--dark);
  color: #fff;
  overflow-x: hidden;
  -ms-overflow-style: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
}

/* ----- NAV ----- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw;
  background: rgba(7,9,13,.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
nav.scrolled { background: rgba(7,9,13,.99); }

.nlogo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.nlogo img {
  height: 42px; width: 42px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(245,194,66,.35);
  box-shadow: 0 0 0 3px rgba(245,194,66,.1);
  flex-shrink: 0;
}
.nbrand {
  font-weight: 900;
  font-size: 1rem;
  background: linear-gradient(135deg, #FFD97D 0%, #F5C242 45%, #C9963A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(245,194,66,.35));
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nbrand small {
  display: block; font-size: .6rem; font-weight: 600;
  color: var(--gold); letter-spacing: .12em; text-transform: uppercase;
}

.nbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gg); color: #07090D;
  font-weight: 800; font-size: .85rem;
  padding: .55rem 1.2rem; border-radius: 50px;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  box-shadow: var(--sg);
  transition: box-shadow var(--t);
}
.nbtn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ----- HERO (desktop default) ----- */
.hero {
  min-height: 100svh;
  min-height: -webkit-fill-available;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--nav-h) + 3.5rem) 6vw 5rem;
  position: relative; overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 30%, rgba(245,194,66,.09) 0%, transparent 70%),
    radial-gradient(ellipse 55% 75% at 85% 85%, rgba(201,150,58,.05) 0%, transparent 60%);
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .035;
  background-image:
    linear-gradient(rgba(245,194,66,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,194,66,.5) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}

.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,194,66,.07); border: 1px solid rgba(245,194,66,.2);
  color: var(--gold2); font-size: .74rem; font-weight: 600;
  padding: .4rem .9rem; border-radius: 50px;
  margin-bottom: 1.3rem; letter-spacing: .04em;
  animation: fadeUp .55s both;
}
.live-dot {
  width: 7px; height: 7px; background: #22c55e; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 7px #22c55e; animation: blink 1.6s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.4rem, 8.5vw, 5rem);
  font-weight: 900; line-height: 1.08; letter-spacing: 1px;
  margin-bottom: .75rem;
  animation: fadeUp .6s .1s both;
  -webkit-font-smoothing: antialiased;
}
h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #FFD97D 0%, #F5C242 40%, #E8952A 80%, #FFD97D 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.hero-sub {
  color: var(--muted2); font-size: .93rem; line-height: 1.7;
  margin-bottom: 2rem; max-width: 400px;
  animation: fadeUp .6s .2s both;
}
.hbtns {
  display: flex; gap: .85rem; flex-wrap: wrap; justify-content: center;
  animation: fadeUp .6s .3s both;
}
.hbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .88rem 1.75rem; border-radius: 60px;
  font-weight: 700; font-size: .94rem;
  text-decoration: none; transition: all var(--t);
}
.hbtn svg { width: 17px; height: 17px; flex-shrink: 0; }
.hbtn-primary { background: var(--gg); color: #07090D; box-shadow: var(--sg); }
.hbtn-ghost { border: 1.5px solid rgba(255,255,255,.13); color: #fff; background: rgba(255,255,255,.04); }

.hstats {
  display: flex; gap: 2.5rem; margin-top: 2.8rem; justify-content: center;
  animation: fadeUp .6s .4s both;
}
.hstat { text-align: center; }
.hstat-n { font-size: 1.9rem; font-weight: 900; color: var(--gold); line-height: 1; }
.hstat-l { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
.hstat-div { width: 1px; background: var(--border2); align-self: stretch; }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

/* ----- SECTION COMMONS ----- */
section { padding: 4rem 5vw; }
.stag {
  display: block; text-align: center; color: var(--gold);
  text-transform: uppercase; letter-spacing: .2em;
  font-size: .66rem; font-weight: 700; margin-bottom: .5rem;
}
.sh {
  font-size: clamp(1.5rem, 3.8vw, 2.3rem);
  font-weight: 900; text-align: center;
  margin-bottom: 1.8rem; letter-spacing: -.02em; line-height: 1.15;
}
.sh span { color: var(--gold); }
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,194,66,.18), transparent);
  margin: 0 5vw;
}

/* ----- FLEET SLIDER ----- */
.fleet-sec { padding: 3rem 0 3.5rem; }

.swrap { overflow-x: hidden; width: 100%; }
.strack {
  display: flex; gap: 1.1rem;
  padding: 0 5vw 1.6rem;
  transition: transform .42s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
  touch-action: pan-y pinch-zoom;
}
.scard {
  flex: 0 0 min(80vw, 340px);
  background: var(--card);
  border-radius: var(--r-xl);
  border: 1px solid var(--border2);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.scard.act {
  border-color: rgba(245,194,66,.32);
  transform: translateY(-5px);
  box-shadow: 0 18px 48px rgba(245,194,66,.09);
}
.scard-img { height: 200px; position: relative; overflow: hidden; background: #e8eaf0; }
.scard-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; transition: none; }
.scard-badge {
  position: absolute; top: 11px; right: 11px;
  background: rgba(7,9,13,.78); backdrop-filter: blur(10px);
  border: 1px solid rgba(245,194,66,.28);
  color: var(--gold2); font-size: .63rem; font-weight: 700;
  padding: 4px 11px; border-radius: 50px;
  text-transform: uppercase; letter-spacing: .06em;
}
.scard-body { padding: 1.2rem 1.4rem 1.5rem; }
.scard-name { font-size: 1.2rem; font-weight: 800; margin-bottom: .8rem; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.chip {
  display: flex; align-items: center; gap: 5px;
  font-size: .68rem; padding: 4px 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50px; color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-family: inherit;
}
.chip svg { width: 10px; height: 10px; color: var(--gold); flex-shrink: 0; }
.scard-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: .78rem; border-radius: var(--r-md);
  background: rgba(245,194,66,.07);
  border: 1.5px solid rgba(245,194,66,.24);
  color: var(--gold2); font-weight: 700; font-size: .86rem;
  text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
.scard-btn svg { width: 14px; height: 14px; }

.sdots { display: flex; gap: .45rem; justify-content: center; align-items: center; margin-top: 1rem; }
.sdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.14); cursor: pointer; transition: all .28s; }
.sdot.act { background: var(--gold); width: 24px; border-radius: 4px; }

.sarrows { display: flex; justify-content: flex-end; gap: .55rem; padding: 0 5vw .8rem; }
.sarr {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border2);
  background: var(--card2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--t); flex-shrink: 0;
}
.sarr svg { width: 17px; height: 17px; }
.sarr:disabled { opacity: .2; cursor: default; pointer-events: none; }

/* ----- WHY US ----- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem; max-width: 900px; margin: 0 auto;
}
.why-card {
  background: #111a26;
  border: 1.5px solid rgba(245,194,66,.14);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.3rem;
  text-align: center;
  transition: border-color var(--t), box-shadow var(--t);
}
.why-ico {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .9rem;
}
.why-ico svg { width: 40px; height: 40px; }
.why-title { font-size: .95rem; font-weight: 700; margin-bottom: .35rem; }
.why-desc { font-size: .78rem; color: var(--muted2); line-height: 1.65; }

/* ----- CONTACT ----- */
.ccards { display: flex; flex-direction: column; gap: .9rem; max-width: 500px; margin: 0 auto; }
.ccard {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--card);
  border: 1.5px solid var(--border2);
  border-radius: var(--r-lg);
  text-decoration: none; color: #fff;
  transition: border-color var(--t), transform var(--t);
}
.cico {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cico svg { width: 21px; height: 21px; }
.cico-call {
  background: linear-gradient(135deg, #C9963A 0%, #F5C242 50%, #FFD97D 100%);
  border: none;
  color: #07090D;
  box-shadow: 0 0 16px rgba(245,194,66,.35);
}
.cico-wa { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.2); color: #4ade80; }
.clbl { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
.cval { font-weight: 700; font-size: 1rem; }
.abadge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(45,212,191,.07); border: 1px solid rgba(45,212,191,.17);
  color: #2DD4BF; padding: .6rem 1.2rem; border-radius: 50px;
  font-size: .8rem; font-weight: 600; margin: 1.6rem auto 0;
}

/* ----- COVERAGE ----- */
.pills { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; max-width: 640px; margin: 0 auto; }
.pill {
  padding: .45rem 1rem;
  background: rgba(245,194,66,.05); border: 1px solid rgba(245,194,66,.12);
  border-radius: 50px; font-size: .78rem; color: rgba(255,255,255,.62);
  transition: all var(--t); cursor: default;
}

/* ----- CTA BANNER ----- */
.ctabanner {
  margin: 0 5vw 2.5rem; padding: 3rem 2rem;
  background: var(--gg); border-radius: var(--r-xl);
  text-align: center; color: #07090D;
  position: relative; overflow: hidden;
}
.ctabanner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,.26), transparent 55%);
  pointer-events: none;
}
.ctabanner h2 { font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 900; margin-bottom: .3rem; position: relative; z-index: 1; }
.ctabanner p  { font-size: .9rem; opacity: .7; font-weight: 500; margin-bottom: 1.5rem; position: relative; z-index: 1; }
.ctabanner a  {
  display: inline-flex; align-items: center; gap: 8px;
  background: #07090D; color: #fff;
  padding: .9rem 2.2rem; border-radius: 60px;
  font-weight: 800; font-size: .96rem;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform var(--t), box-shadow var(--t);
  position: relative; z-index: 1;
}
.ctabanner a svg { width: 16px; height: 16px; }

/* ----- FOOTER ----- */
footer {
  padding: 1.2rem 5vw 7rem;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: .4rem; text-align: center;
  color: var(--muted); font-size: .78rem;
  border-top: 1px solid var(--border2);
}
footer strong { color: var(--gold); }
.foot-domain { font-size: .68rem; color: rgba(245,194,66,.45); margin-top: 2px; display: block; }

/* ----- STICKY BAR (mobile) ----- */
.sbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  display: flex; gap: .65rem;
  padding: .8rem 5vw calc(.8rem + env(safe-area-inset-bottom));
  background: rgba(7,9,13,.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(245,194,66,.12);
}
.sbar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: .88rem; border-radius: var(--r-md);
  font-weight: 700; font-size: .93rem; text-decoration: none;
  transition: transform .14s, opacity .14s;
}
.sbar a:active { transform: scale(.96); opacity: .85; }
.sbar-call {
  background: linear-gradient(135deg, #C9963A 0%, #F5C242 50%, #FFD97D 100%);
  color: #07090D;
  box-shadow: 0 4px 20px rgba(245,194,66,.35);
}
.sbar-wa {
  background: linear-gradient(135deg, rgba(37,211,102,.15) 0%, rgba(37,211,102,.28) 100%);
  border: 1.5px solid rgba(37,211,102,.4);
  color: #4ade80;
}
.sbar svg  { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet 768+ */
@media (min-width: 768px) {
  .sbar { display: none; }
  footer { padding-bottom: 2rem; }

  /* Fleet: equal 4-col grid on desktop */
  .swrap { overflow: visible; }
  .strack {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    padding: 0 5vw 1.6rem;
    transform: none !important;
    transition: none;
  }
  .scard { flex: unset; width: 100%; }
  .sarrows { display: none; }
  .sdots { display: none; }
  .ccards { flex-direction: row; max-width: 720px; margin: 0 auto; justify-content: center; }
}

/* Desktop 1024+ */
@media (min-width: 1024px) {
  :root { --nav-h: 70px; }
  nav { padding: 0 6vw; }
  section { padding: 5rem 8vw; }
  .fleet-sec { padding: 4.5rem 0; }
  .sarrows { padding: 0 8vw .8rem; }
  .strack { padding: 0 8vw 1.4rem; }
  .ctabanner { margin: 0 8vw 3rem; padding: 4rem 3rem; }
  footer { padding: 2rem 8vw 2.5rem; }
  .divider { margin: 0 8vw; }
  .scard { flex: 0 0 355px; }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Large desktop 1280+ */
@media (min-width: 1280px) {
  nav { padding: 0 max(5vw, 64px); }
  section { padding: 5.5rem max(8vw, 100px); }
}

/* ============================================================
   MOBILE — ultra-compact hero so fleet shows on load
   ============================================================ */
@media (max-width: 767px) {
  /* Hero: strip down to bare minimum */
  .hero {
    min-height: 0;
    padding: calc(var(--nav-h) + .9rem) 5vw 1.4rem;
    align-items: flex-start;
    text-align: left;
  }
  .hero-bg, .hero-grid { display: none; }
  .hero-pill { margin-bottom: .8rem; font-size: .7rem; }
  h1 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); margin-bottom: .55rem; }
  .hero-sub { display: none; }
  .hstats    { display: none; }
  .hbtns { justify-content: flex-start; gap: .6rem; }
  .hbtn { padding: .72rem 1.25rem; font-size: .85rem; }

  /* Hide divider between hero and fleet */
  .hero + .divider { display: none; }

  /* Fleet: tight */
  .fleet-sec { padding-top: 1.4rem; padding-bottom: .6rem; }
  .stag { font-size: .62rem; margin-bottom: .3rem; }
  .sh   { font-size: 1.35rem; margin-bottom: .9rem; }

  /* Smaller card image so book button is visible */
  .scard-img { height: 155px; }
  .scard-body { padding: 1rem 1.1rem 1.2rem; }
  .scard-name { font-size: 1.05rem; margin-bottom: .65rem; }

  /* Hide arrows — swipe is enough on mobile */
  .sarrows { display: none; }

  /* Hide divider between fleet and why-us */
  .fleet-sec + .divider { display: none; }

  /* Reduce section padding on mobile */
  section { padding: 1.5rem 5vw; }

  /* dots spacing */
  .sdots { margin-top: .6rem; }

  /* Why us: 2 cols on mobile */
  .why-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .why-card { padding: 1.2rem .9rem; }
  .why-ico { width: 42px; height: 42px; }

  /* CTA + footer */
  .ctabanner { margin: 0 4vw 2rem; border-radius: 20px; padding: 2.2rem 1.3rem; }
  .nbtn span { display: none; }
  .nbtn { padding: .55rem .9rem; }
}

/* Very small ≤ 360px */
@media (max-width: 360px) {
  h1 { font-size: 1.55rem; }
  .ctabanner h2 { font-size: 1.35rem; }
  .hbtn { padding: .65rem 1rem; font-size: .8rem; }
}

/* ============================================================
   TYPOGRAPHY SYSTEM
   Playfair Display → headings & card names (elegance)
   Raleway         → UI: nav, buttons, tags, pills (crisp)
   Outfit          → body copy, descriptions (readable)
   ============================================================ */

/* — DISPLAY: headings — */
h2, .sh, .scard-name, .why-title, .cval, .ctabanner h2 {
  font-family: var(--f-display);
}
.sh       { font-weight: 800; }
.scard-name { font-weight: 700; }
.why-title  { font-weight: 700; }
.cval       { font-weight: 700; }

/* — UI: nav, tags, buttons, labels, pills — */
.stag, .nbtn, .hbtn,
.scard-btn, .sbar a,
.scard-badge,
.clbl, .pill,
.abadge, .hero-pill,
.hstat-n, .hstat-l,
.sdot, footer {
  font-family: var(--f-ui);
}
.stag       { font-weight: 700; letter-spacing: .22em; }
.nbtn       { font-weight: 800; }
.hbtn       { font-weight: 700; }
.scard-btn  { font-weight: 700; }
.sbar a     { font-weight: 800; }
.hero-pill  { font-weight: 600; }
.hstat-n    { font-weight: 900; }
.hstat-l    { font-weight: 600; }

/* — BODY: descriptions, subtitle, footer text — */
.hero-sub, .why-desc, .foot-domain {
  font-family: var(--f-body);
}

/* Book This Ride icon — gold tint */
.book-ico {
  display: inline-block; vertical-align: middle; flex-shrink: 0;
  width: 16px; height: 16px;
  filter: invert(87%) sepia(44%) saturate(700%) hue-rotate(340deg) brightness(105%) contrast(98%);
}
.nav-ico {
  display: inline-block; vertical-align: middle; flex-shrink: 0;
  width: 16px; height: 16px;
  filter: brightness(0) opacity(.85);
}

/* ===== DESKTOP SEO SECTIONS ===== */
.desktop-seo { display: none; }
@media (min-width: 768px) {
  .desktop-seo { display: block; }

  /* Services */
  .svc-grid {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 1.2rem; max-width: 1100px; margin: 0 auto;
  }
  .svc-card {
    background: var(--card); border: 1.5px solid var(--border);
    border-radius: var(--r-lg); padding: 1.8rem 1.4rem;
    text-align: center; transition: border-color var(--t);
  }
  .svc-ico { font-size: 2rem; margin-bottom: .8rem; }
  .svc-card h3 { font-family: var(--f-display); font-size: 1rem; font-weight: 700; margin-bottom: .5rem; color: var(--gold2); }
  .svc-card p  { font-size: .8rem; color: var(--muted2); line-height: 1.65; }

  /* Routes */
  .routes-grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: .9rem; max-width: 860px; margin: 0 auto;
  }
  .route-card {
    background: var(--card2); border: 1px solid var(--border2);
    border-radius: var(--r-md); padding: 1rem 1.2rem;
    display: flex; align-items: center; gap: .8rem;
    transition: border-color var(--t);
  }
  .route-from { font-weight: 700; font-size: .9rem; }
  .route-arrow { color: var(--gold); font-size: 1.1rem; flex-shrink: 0; }
  .route-to { font-size: .85rem; color: var(--muted2); }

  /* FAQ */
  .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
  .faq-item {
    background: var(--card); border: 1px solid var(--border2);
    border-radius: var(--r-md); overflow: hidden;
    transition: border-color var(--t);
  }
  .faq-item summary {
    padding: 1rem 1.3rem; cursor: pointer; font-weight: 600;
    font-size: .93rem; list-style: none; display: flex;
    justify-content: space-between; align-items: center;
  }
  .faq-item summary::after { content: '+'; color: var(--gold); font-size: 1.2rem; }
  .faq-item[open] summary::after { content: '−'; }
  .faq-item p { padding: 0 1.3rem 1rem; font-size: .83rem; color: var(--muted2); line-height: 1.7; }
}

/* ===================================================
   HOVER EFFECTS — desktop/mouse only
   (no sticky hover on iOS/Android touch screens)
   =================================================== */
@media (hover: hover) and (pointer: fine) {
  .nbtn { transition: transform var(--t), box-shadow var(--t); }
  .scard { transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
  .scard-img img { transition: transform .5s ease; }
  .why-card { transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
  .ccard { transition: border-color var(--t), transform var(--t); }
  .svc-card { transition: border-color var(--t), transform var(--t); }
  .nbtn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(245,194,66,.38); }
  .hbtn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(245,194,66,.42); }
  .hbtn-ghost:hover { border-color: var(--gold); background: rgba(245,194,66,.07); }
  .scard:hover .scard-img img { transform: scale(1.05); }
  .scard-btn:hover { background: rgba(245,194,66,.15); border-color: rgba(245,194,66,.48); }
  .sarr:hover { border-color: var(--gold); color: var(--gold); }
  .why-card:hover { border-color: rgba(245,194,66,.28); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
  .ccard:hover { border-color: var(--gold); transform: translateY(-2px); }
  .pill:hover { border-color: var(--gold); color: var(--gold2); background: rgba(245,194,66,.1); }
  .svc-card:hover { border-color: rgba(245,194,66,.35); transform: translateY(-4px); }
  .route-card:hover { border-color: rgba(245,194,66,.3); }
  .faq-item:hover { border-color: rgba(245,194,66,.25); }
}

/* ===================================================
   TOUCH DEVICES — kill any residual tap-hover lift
   =================================================== */
@media (hover: none) {
  .nbtn,
  .nbtn:hover,
  .scard,
  .scard:hover,
  .why-card,
  .why-card:hover,
  .ccard,
  .ccard:hover,
  .svc-card,
  .svc-card:hover,
  .hbtn,
  .hbtn:hover {
    transform: none !important;
    transition: none !important;
  }
}