/* ==========================================================================
   Khaira Travels — Design System
   Clean, minimal, trustworthy. CSS transitions only, no heavy libs.
   ========================================================================== */

/* ----- Design Tokens ----- */
:root {
  /* Brand — teal for trust, coral for CTAs */
  --brand:        #0E6E6E;
  --brand-dark:   #0A5252;
  --brand-light:  #E6F4F3;
  --brand-tint:   #F2FAF9;
  --accent:       #FF6A3D;
  --accent-dark:  #EA5528;
  --accent-tint:  #FFF1EC;

  /* Neutrals */
  --ink:          #0F1B2D;   /* headings */
  --body:         #48566B;   /* body text */
  --muted:        #7A8699;   /* secondary text */
  --line:         #E7EBF0;   /* borders */
  --line-soft:    #F0F3F7;
  --bg:           #FFFFFF;
  --bg-soft:      #F7F9FB;
  --bg-alt:       #F2F6F8;

  /* Feedback */
  --success:      #12996B;
  --success-bg:   #E7F7F0;
  --star:         #FFB020;

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(15,27,45,.06), 0 1px 3px rgba(15,27,45,.04);
  --shadow:     0 4px 16px rgba(15,27,45,.08);
  --shadow-md:  0 10px 30px rgba(15,27,45,.10);
  --shadow-lg:  0 24px 60px rgba(15,27,45,.14);

  /* Radii */
  --r-sm: 8px;
  --r:    12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(18px, 5vw, 40px);
  --header-h: 72px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ----- Reset / Base ----- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--body);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
::selection { background: var(--brand); color: #fff; }

/* ----- Layout helpers ----- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 96px); }
.section--tight { padding-block: clamp(40px, 6vw, 64px); }
.bg-soft { background: var(--bg-soft); }
.bg-brand-tint { background: var(--brand-tint); }
.text-center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-light);
  padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 16px;
}
.section-head { max-width: 640px; margin: 0 auto clamp(32px, 5vw, 52px); }
.section-head.left { margin-inline: 0; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.lead { font-size: 1.15rem; color: var(--body); }

/* ----- Buttons ----- */
.btn {
  --btn-bg: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: .98rem; line-height: 1;
  padding: 14px 26px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; background: var(--btn-bg); color: #fff;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  box-shadow: 0 6px 18px rgba(14,110,110,.22);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14,110,110,.28); }
.btn:active { transform: translateY(0); }
.btn--accent { --btn-bg: var(--accent); box-shadow: 0 6px 18px rgba(255,106,61,.28); }
.btn--accent:hover { background: var(--accent-dark); box-shadow: 0 12px 26px rgba(255,106,61,.34); }
.btn--ghost {
  background: #fff; color: var(--ink); border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--shadow); }
.btn--light { background: rgba(255,255,255,.16); color:#fff; border-color: rgba(255,255,255,.35); box-shadow:none; backdrop-filter: blur(4px); }
.btn--light:hover { background: rgba(255,255,255,.26); }
.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn--lg { padding: 17px 34px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* ----- Header / Nav ----- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .2s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; color: var(--ink); font-size: 1.18rem; letter-spacing: -.02em; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), #14a3a3); color:#fff; box-shadow: var(--shadow-sm);
}
.brand__mark svg { width: 22px; height: 22px; }
.brand small { display:block; font-size: .62rem; font-weight: 600; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; margin-top: 1px; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links a {
  padding: 9px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: .95rem; color: var(--body);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav__links a:hover { color: var(--brand); background: var(--brand-tint); }
.nav__links a.active { color: var(--brand); }
.nav__cta { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
.nav__phone { display:inline-flex; align-items:center; gap:7px; font-weight:700; color: var(--ink); font-size:.92rem; }
.nav__phone svg { width:16px;height:16px;color:var(--brand); }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background:#fff; margin-left:auto; align-items:center; justify-content:center; }
.nav__toggle svg { width: 22px; height: 22px; color: var(--ink); }

@media (max-width: 940px) {
  .nav__links, .nav__cta .btn, .nav__phone { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px;
    box-shadow: var(--shadow-md); margin: 0;
  }
  .nav__links.open a { padding: 13px 12px; border-radius: var(--r-sm); }
  .nav__links.open .btn { display: inline-flex; margin-top: 8px; }
}

/* ----- Sticky mini search bar (appears on scroll) ----- */
.ministrip {
  position: sticky; top: var(--header-h); z-index: 55;
  background: #fff; border-bottom: 1px solid var(--line-soft);
  transform: translateY(-120%); opacity: 0; pointer-events: none;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.ministrip.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ministrip__inner { display: flex; align-items: center; gap: 14px; padding-block: 10px; }
.ministrip__route { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); font-size:.95rem; }
.ministrip__route .dot { width:7px;height:7px;border-radius:50%;background:var(--brand); }
.ministrip__meta { color: var(--muted); font-size: .88rem; font-weight:600; }
.ministrip .btn { margin-left: auto; }
@media (max-width: 700px){ .ministrip__meta { display:none; } }

/* ----- Hero ----- */
.hero { position: relative; overflow: hidden; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(120px, 14vw, 180px); }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(20,163,163,.16), transparent 60%),
    radial-gradient(760px 420px at 8% 8%, rgba(255,106,61,.10), transparent 55%),
    linear-gradient(180deg, var(--brand-tint), #fff 62%);
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image: radial-gradient(rgba(14,110,110,.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
          mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.hero__grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items:center; }
.hero__badge { margin-bottom: 20px; }
.hero h1 { margin-bottom: 18px; }
.hero h1 .hl { color: var(--brand); position: relative; white-space: nowrap; }
.hero__sub { font-size: 1.18rem; color: var(--body); max-width: 30ch; margin-bottom: 26px; }
.hero__stats { display:flex; gap: 30px; margin-top: 30px; flex-wrap:wrap; }
.hero__stat b { display:block; font-size: 1.6rem; color: var(--ink); font-weight: 800; letter-spacing:-.02em; }
.hero__stat span { font-size: .86rem; color: var(--muted); font-weight:600; }
.hero__art { position: relative; }
@media (max-width: 900px){
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { display:none; }
  .hero { padding-bottom: clamp(150px, 30vw, 200px); }
}

/* Hero illustration card */
.travel-card {
  background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 22px; border: 1px solid var(--line-soft); position: relative;
}
.travel-card__map {
  height: 210px; border-radius: var(--r-md); background:
    linear-gradient(135deg, #e9f5f4, #f4faf9);
  position: relative; overflow: hidden; border: 1px solid var(--line-soft);
}
.travel-card__row { display:flex; align-items:center; gap:12px; padding: 14px 4px 4px; }
.travel-card__ic { width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--brand-light);color:var(--brand); }
.travel-card__ic svg{width:20px;height:20px;}
.travel-card__row b { color: var(--ink); font-size:.98rem; }
.travel-card__row span { display:block; color: var(--muted); font-size:.82rem; }
.travel-card__row .price { margin-left:auto; text-align:right; }
.travel-card__row .price b { color: var(--brand); font-size: 1.15rem; }
.float-chip {
  position:absolute; background:#fff; border-radius: var(--r); box-shadow: var(--shadow-md);
  padding: 11px 15px; display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); font-size:.9rem;
  border:1px solid var(--line-soft);
}
.float-chip svg { width:18px;height:18px; }
.float-chip--tl { top: -18px; left: -18px; }
.float-chip--br { bottom: -20px; right: -14px; }
.float-chip .ok { color: var(--success); }
.float-chip .star { color: var(--star); }

/* ----- Search widget ----- */
.search-wrap { position: relative; z-index: 5; margin-top: clamp(-90px, -8vw, -70px); }
.search-card {
  background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-soft); padding: 10px;
}
.search-tabs { display:flex; gap: 6px; padding: 6px; }
.search-tab {
  flex: 0 0 auto; display:inline-flex; align-items:center; gap:9px;
  padding: 11px 20px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  background: transparent; color: var(--muted); font-weight: 700; font-size:.95rem;
  transition: all .18s var(--ease);
}
.search-tab svg { width: 19px; height:19px; }
.search-tab[aria-selected="true"] { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-light); }
.search-tab:hover { color: var(--brand); }
.search-form { display:grid; grid-template-columns: 1fr 1fr auto 1fr auto; gap: 0; align-items: stretch; padding: 6px; }
.search-field { position: relative; padding: 12px 16px; border-radius: var(--r); transition: background .15s var(--ease); }
.search-field:hover { background: var(--bg-soft); }
.search-field label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); margin-bottom: 4px; }
.search-field input, .search-field select {
  border:0; background:transparent; width:100%; padding:0; color: var(--ink); font-weight:700; font-size:1.02rem; outline:none;
  appearance:none;
}
.search-field .sub { font-size:.78rem; color:var(--muted); font-weight:600; }
.search-div { width:1px; background: var(--line); align-self:center; height:44px; }
.search-swap {
  align-self:center; width:40px;height:40px;border-radius:50%; border:1px solid var(--line); background:#fff;
  display:grid;place-items:center; color:var(--brand); transition: transform .3s var(--ease), box-shadow .15s var(--ease); flex:0 0 auto;
}
.search-swap:hover { box-shadow: var(--shadow); }
.search-swap.spin { transform: rotate(180deg); }
.search-swap svg { width:18px;height:18px; }
.search-submit { padding: 6px; display:flex; align-items:stretch; }
.search-submit .btn { width:100%; }
/* micro-interaction on search button */
.btn--search { position: relative; overflow: hidden; }
.btn--search .btn__spinner { display:none; width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }
.btn--search.loading .btn__label { visibility: hidden; }
.btn--search.loading .btn__spinner { display:block; position:absolute; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 860px){
  .search-form { grid-template-columns: 1fr 1fr; gap: 4px; }
  .search-div, .search-swap { display:none; }
  .search-submit { grid-column: 1 / -1; }
}

/* ----- Trust bar ----- */
.trust-bar { display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trust-item { display:flex; align-items:center; gap:13px; padding: 6px 4px; }
.trust-item__ic { width:46px;height:46px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;background:var(--brand-light);color:var(--brand); }
.trust-item__ic svg{width:23px;height:23px;}
.trust-item b { color:var(--ink); font-size:.98rem; display:block; }
.trust-item span { font-size:.84rem; color:var(--muted); }
@media (max-width: 760px){ .trust-bar { grid-template-columns: 1fr 1fr; gap: 22px 16px; } }

/* ----- Cards / grids ----- */
.grid { display:grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px){ .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background:#fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card__ic { width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand); margin-bottom:16px; }
.card__ic svg { width:25px;height:25px; }
.card h3 { margin-bottom:8px; }
.card p { color: var(--muted); font-size:.96rem; margin:0; }

/* Feature icon accent variant */
.card--accent .card__ic { background: var(--accent-tint); color: var(--accent); }

/* Popular route card */
.route-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); display:flex; flex-direction:column;
}
.route-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.route-card__top { height: 130px; position: relative; display:flex; align-items:flex-end; padding: 14px; color:#fff; }
.route-card__top::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(10,60,60,.55)); }
.route-card__tag { position:relative; z-index:1; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:rgba(255,255,255,.2); backdrop-filter:blur(4px); padding:5px 11px; border-radius:var(--r-pill); }
.route-card__body { padding: 16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.route-card__cities { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); font-size:1.08rem; }
.route-card__cities svg { width:16px;height:16px;color:var(--muted);flex:0 0 auto; }
.route-card__meta { display:flex; gap:14px; font-size:.85rem; color:var(--muted); font-weight:600; }
.route-card__meta span { display:inline-flex; align-items:center; gap:5px; }
.route-card__foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; border-top:1px solid var(--line-soft); }
.route-card__price small { color:var(--muted); font-size:.78rem; font-weight:600; }
.route-card__price b { color:var(--ink); font-size:1.25rem; letter-spacing:-.02em; }
.route-card__price b span { color:var(--brand); }
.route-card__go { display:inline-flex;align-items:center;gap:6px; color:var(--brand); font-weight:700; font-size:.9rem; transition: gap .15s var(--ease); }
.route-card:hover .route-card__go { gap:10px; }

/* gradient covers used as lightweight "images" */
.cover-1 { background: linear-gradient(135deg,#0E6E6E,#14a3a3); }
.cover-2 { background: linear-gradient(135deg,#1f6feb,#38bdf8); }
.cover-3 { background: linear-gradient(135deg,#8b5cf6,#c084fc); }
.cover-4 { background: linear-gradient(135deg,#f97316,#fbbf24); }
.cover-5 { background: linear-gradient(135deg,#0ea5a5,#34d399); }
.cover-6 { background: linear-gradient(135deg,#e11d63,#fb7185); }

/* ----- Badges / pills ----- */
.badge { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700; padding:4px 11px; border-radius: var(--r-pill); }
.badge--green { background: var(--success-bg); color: var(--success); }
.badge--accent { background: var(--accent-tint); color: var(--accent-dark); }
.badge--brand { background: var(--brand-light); color: var(--brand); }
.badge--gray { background: var(--bg-alt); color: var(--muted); }

/* ----- Stars ----- */
.stars { display:inline-flex; gap:2px; color: var(--star); }
.stars svg { width:16px;height:16px; }

/* ----- Testimonials ----- */
.tcard { background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding: 26px; display:flex; flex-direction:column; gap:14px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tcard p { color: var(--body); font-size:1.02rem; margin:0; }
.tcard__by { display:flex; align-items:center; gap:12px; margin-top:auto; }
.avatar { width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1rem; }
.tcard__by b { color:var(--ink); display:block; font-size:.95rem; }
.tcard__by span { color:var(--muted); font-size:.82rem; }
.tcard__by .badge { margin-left:auto; }

/* ----- CTA band ----- */
.cta-band { position:relative; overflow:hidden; border-radius: var(--r-lg); padding: clamp(36px,6vw,64px); color:#fff;
  background: linear-gradient(120deg, var(--brand-dark), var(--brand) 70%); }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 90% -20%, rgba(255,255,255,.18), transparent 60%); }
.cta-band__inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.cta-band h2 { color:#fff; margin-bottom:8px; }
.cta-band p { color: rgba(255,255,255,.85); margin:0; max-width: 46ch; }

/* ----- App download ----- */
.appbadge { display:inline-flex; align-items:center; gap:11px; background:var(--ink); color:#fff; padding:10px 18px; border-radius: var(--r); transition: transform .18s var(--ease); }
.appbadge:hover { transform: translateY(-2px); }
.appbadge svg { width:26px;height:26px; }
.appbadge small { display:block; font-size:.66rem; opacity:.8; letter-spacing:.04em; }
.appbadge b { font-size:1rem; }

/* ----- Footer ----- */
.footer { background: #0B1622; color: #A9B6C6; padding-block: clamp(48px,6vw,72px) 28px; }
.footer a { color:#A9B6C6; transition: color .15s var(--ease); }
.footer a:hover { color:#fff; }
.footer__grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer .brand { color:#fff; margin-bottom:16px; }
.footer .brand small { color:#7A8699; }
.footer__about { font-size:.92rem; max-width: 34ch; margin-bottom:18px; }
.footer h4 { color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.footer__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:.93rem; }
.footer__social { display:flex; gap:10px; margin-top:4px; }
.footer__social a { width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07); display:grid;place-items:center; }
.footer__social a:hover { background: var(--brand); color:#fff; }
.footer__social svg { width:18px;height:18px; }
.footer__apps { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:24px; font-size:.86rem; flex-wrap:wrap; }
.footer__pay { display:flex; align-items:center; gap:10px; }
.footer__pay span { width:44px;height:28px;border-radius:6px;background:rgba(255,255,255,.1); display:grid;place-items:center; font-size:.6rem; font-weight:800; letter-spacing:.03em; color:#cdd6e2; }
@media (max-width: 860px){ .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px){ .footer__grid { grid-template-columns: 1fr; } }

/* ----- Scroll reveal ----- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.06s; } .reveal[data-d="2"]{ transition-delay:.12s; }
.reveal[data-d="3"]{ transition-delay:.18s; } .reveal[data-d="4"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1 !important; transform:none !important; }
  html { scroll-behavior:auto; }
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ----- Page hero (interior pages) ----- */
.page-hero { background: linear-gradient(180deg, var(--brand-tint), #fff); padding-block: clamp(40px,6vw,64px) clamp(32px,5vw,48px); border-bottom:1px solid var(--line-soft); }
.page-hero .eyebrow { margin-bottom:14px; }
.page-hero h1 { margin-bottom:12px; }
.page-hero p { color: var(--muted); font-size:1.1rem; max-width: 56ch; margin:0; }
.crumbs { display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--muted); margin-bottom:18px; font-weight:600; }
.crumbs a:hover { color:var(--brand); }
.crumbs svg { width:14px;height:14px; }

/* ==== Search Results page ==== */
.results-layout { display:grid; grid-template-columns: 280px 1fr; gap: 28px; align-items:start; }
@media (max-width: 900px){ .results-layout { grid-template-columns: 1fr; } }
.filters { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 22px; position: sticky; top: calc(var(--header-h) + 16px); }
.filters h4 { font-size:.95rem; margin: 0 0 4px; }
.filters__grouphead { display:flex; align-items:center; justify-content:space-between; margin: 20px 0 12px; }
.filters__grouphead:first-of-type { margin-top:8px; }
.filters__grouphead span { font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.check { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:.93rem; color:var(--body); font-weight:600; cursor:pointer; }
.check input { width:18px;height:18px; accent-color: var(--brand); }
.check .count { margin-left:auto; color:var(--muted); font-size:.82rem; font-weight:600; }
.range { width:100%; accent-color: var(--brand); margin-top:6px; }
.range-vals { display:flex; justify-content:space-between; font-size:.84rem; color:var(--muted); font-weight:700; margin-top:6px; }
.filter-clear { background:none;border:0;color:var(--brand);font-weight:700;font-size:.85rem;padding:0; }
.filter-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }

.results-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.results-bar h2 { font-size:1.2rem; margin:0; }
.results-bar .muted { color:var(--muted); font-weight:600; font-size:.9rem; }
.sort { display:flex; gap:6px; align-items:center; }
.sort button { border:1px solid var(--line); background:#fff; padding:8px 14px; border-radius: var(--r-pill); font-weight:700; font-size:.86rem; color:var(--body); transition: all .15s var(--ease); }
.sort button.active { background: var(--brand-tint); color:var(--brand); border-color: var(--brand-light); }
.sort button:hover { border-color: var(--brand); color:var(--brand); }

.trip { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; margin-bottom:16px; transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.trip:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.trip__grid { display:grid; grid-template-columns: 1.2fr 1.6fr auto; gap: 20px; align-items:center; }
.trip__op { display:flex; align-items:center; gap:12px; }
.trip__logo { width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.05rem;flex:0 0 auto; }
.trip__op b { color:var(--ink); font-size:1rem; display:block; }
.trip__op .type { font-size:.82rem; color:var(--muted); font-weight:600; }
.trip__op .stars { margin-top:3px; }
.trip__time { display:flex; align-items:center; gap:14px; }
.trip__time .t b { color:var(--ink); font-size:1.25rem; letter-spacing:-.02em; }
.trip__time .t span { color:var(--muted); font-size:.82rem; font-weight:600; }
.trip__dur { text-align:center; flex:1; min-width:88px; }
.trip__dur .line { height:2px; background:var(--line); position:relative; margin:6px 0; }
.trip__dur .line::before,.trip__dur .line::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--brand);}
.trip__dur .line::before{left:0;} .trip__dur .line::after{right:0;background:var(--accent);}
.trip__dur span { font-size:.8rem;color:var(--muted);font-weight:700; }
.trip__price { text-align:right; }
.trip__price .from { font-size:.76rem;color:var(--muted);font-weight:600; }
.trip__price b { font-size:1.5rem;color:var(--ink); letter-spacing:-.02em; display:block; }
.trip__price .seats { font-size:.8rem; color:var(--success); font-weight:700; margin:4px 0 10px; }
.trip__foot { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); flex-wrap:wrap; gap:10px; }
.trip__tags { display:flex; gap:8px; flex-wrap:wrap; }
.trip__amen { display:flex; gap:14px; color:var(--muted); font-size:.82rem; font-weight:600; }
.trip__amen span { display:inline-flex; align-items:center; gap:5px; }
.trip__amen svg { width:15px;height:15px; }
@media (max-width: 720px){
  .trip__grid { grid-template-columns: 1fr; gap:14px; }
  .trip__price { text-align:left; }
  .trip__price b { display:inline-block; }
}

/* skeleton loaders */
.skeleton { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding:20px 22px; margin-bottom:16px; }
.sk { background: linear-gradient(90deg,#eef1f5 25%, #f6f8fa 37%, #eef1f5 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius:6px; }
@keyframes shimmer { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.sk-row { display:flex; align-items:center; gap:16px; }
.sk-line { height:12px; } .sk-line.lg{height:20px;} .sk-line.sm{height:9px;}

/* ==== Booking / seat selection ==== */
.booking-layout { display:grid; grid-template-columns: 1fr 340px; gap: 28px; align-items:start; }
@media (max-width: 920px){ .booking-layout { grid-template-columns: 1fr; } }
.panel { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 24px; margin-bottom:20px; }
.panel h3 { margin-bottom: 4px; }
.panel__sub { color:var(--muted); font-size:.92rem; margin-bottom:18px; }

.deck { display:flex; gap:36px; flex-wrap:wrap; }
.deck__legend { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:20px; }
.legend-item { display:flex; align-items:center; gap:8px; font-size:.84rem; font-weight:600; color:var(--body); }
.legend-swatch { width:22px;height:22px;border-radius:6px;border:2px solid; }
.ls-avail { background:#fff; border-color: var(--line); }
.ls-sel { background: var(--brand); border-color: var(--brand); }
.ls-booked { background: var(--bg-alt); border-color: var(--line); }
.ls-ladies { background: #FDECF3; border-color:#F5A9C9; }

.bus { border:1px solid var(--line); border-radius: var(--r-md); padding: 18px; background: var(--bg-soft); }
.bus__title { font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted); margin-bottom:14px; display:flex;align-items:center;gap:8px; }
.bus__title svg{width:16px;height:16px;color:var(--brand);}
.seat-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; max-width:280px; }
.seat-grid .gap { grid-column: 3; }
.seat {
  aspect-ratio: 1; border:2px solid var(--line); border-radius:8px; background:#fff; color:var(--muted);
  font-size:.72rem; font-weight:800; display:grid;place-items:center; transition: all .14s var(--ease); position:relative;
}
.seat:not(.booked):hover { border-color: var(--brand); color:var(--brand); transform: translateY(-2px); }
.seat.sel { background: var(--brand); border-color: var(--brand); color:#fff; }
.seat.booked { background: var(--bg-alt); border-color: var(--line); color:#cbd3dd; cursor:not-allowed; }
.seat.ladies { background:#FDECF3; border-color:#F5A9C9; color:#d1548a; }
.seat.ladies.sel { background: var(--brand); border-color: var(--brand); color:#fff; }

/* ==== Forms ==== */
.field { margin-bottom:16px; }
.field label { display:block; font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field label .req { color: var(--accent); }
.input, .field select, .field textarea {
  width:100%; padding: 13px 15px; border:1.5px solid var(--line); border-radius: var(--r); background:#fff; color:var(--ink); font-weight:600;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.input::placeholder, .field textarea::placeholder { color:#aab4c2; font-weight:500; }
.field-row { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.field-row-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row, .field-row-3 { grid-template-columns:1fr; } }
.hint { font-size:.82rem; color:var(--muted); margin-top:6px; }

/* ==== Fare summary sidebar ==== */
.summary { position: sticky; top: calc(var(--header-h) + 16px); background:#fff; border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; }
.summary__head { padding:18px 22px; background: var(--brand-tint); border-bottom:1px solid var(--line-soft); }
.summary__head .route { display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink); }
.summary__head .route svg { width:15px;height:15px;color:var(--muted);}
.summary__head .meta { color:var(--muted); font-size:.85rem; font-weight:600; margin-top:5px; }
.summary__body { padding: 18px 22px; }
.sline { display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:.94rem; color:var(--body); }
.sline span:last-child { font-weight:700; color:var(--ink); }
.sline--muted span { color:var(--muted); font-weight:600; }
.sline--free span:last-child { color: var(--success); }
.summary__total { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-top:1px dashed var(--line); background: var(--bg-soft); }
.summary__total b { font-size:1.4rem; color:var(--ink); }
.summary__total small { color:var(--muted); font-size:.8rem; display:block; }
.summary__foot { padding: 0 22px 22px; }
.secure-note { display:flex; align-items:center; gap:8px; justify-content:center; color:var(--muted); font-size:.82rem; font-weight:600; margin-top:12px; }
.secure-note svg { width:15px;height:15px; color:var(--success); }

/* coupon */
.coupon { display:flex; gap:8px; margin: 6px 0 4px; }
.coupon .input { padding:11px 13px; }
.coupon button { flex:0 0 auto; }
.coupon-applied { display:flex;align-items:center;gap:8px; background:var(--success-bg); color:var(--success); padding:10px 14px; border-radius:var(--r); font-weight:700; font-size:.88rem; margin-top:8px; }
.coupon-applied svg{width:16px;height:16px;}

/* ==== Stepper ==== */
.stepper { display:flex; align-items:center; gap:0; margin: 0 auto; max-width:640px; }
.step { display:flex; align-items:center; gap:10px; flex:1; }
.step__dot { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem; background:#fff;border:2px solid var(--line); color:var(--muted); flex:0 0 auto; }
.step__label { font-weight:700; font-size:.88rem; color:var(--muted); white-space:nowrap; }
.step__bar { height:2px; background:var(--line); flex:1; margin:0 12px; border-radius:2px; }
.step.done .step__dot { background:var(--success); border-color:var(--success); color:#fff; }
.step.done .step__label { color:var(--ink); }
.step.active .step__dot { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 0 0 4px var(--brand-light); }
.step.active .step__label { color:var(--brand); }
.step.done + .step .step__bar, .step.done .step__bar { background: var(--success); }
@media (max-width:640px){ .step__label { display:none; } .step { flex:0 0 auto; } .step__bar{ min-width:28px; } }

/* ==== Payment ==== */
.pay-methods { display:flex; flex-direction:column; gap:12px; }
.pay-method { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1.5px solid var(--line); border-radius:var(--r); cursor:pointer; transition: all .15s var(--ease); }
.pay-method:hover { border-color: var(--brand); }
.pay-method.sel { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 3px var(--brand-light); }
.pay-method__radio { width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:grid;place-items:center; }
.pay-method.sel .pay-method__radio { border-color: var(--brand); }
.pay-method.sel .pay-method__radio::after { content:""; width:10px;height:10px;border-radius:50%;background:var(--brand); }
.pay-method__ic { width:42px;height:42px;border-radius:10px;background:var(--bg-alt);display:grid;place-items:center;color:var(--brand);flex:0 0 auto; }
.pay-method__ic svg{width:22px;height:22px;}
.pay-method b { color:var(--ink); font-size:.98rem; }
.pay-method span { font-size:.84rem; color:var(--muted); }
.pay-method .badge { margin-left:auto; }
.pay-logos { display:flex; gap:8px; margin-left:auto; align-items:center; }
.pay-logos span { padding:3px 9px; border:1px solid var(--line); border-radius:6px; font-size:.62rem; font-weight:800; color:var(--muted); }

/* ==== Confirmation ==== */
.confirm-hero { text-align:center; padding-block: clamp(40px,6vw,64px) 20px; }
.confirm-check { width:88px;height:88px;border-radius:50%;background:var(--success-bg);display:grid;place-items:center;margin:0 auto 22px; animation: pop .5s var(--ease); }
.confirm-check svg { width:46px;height:46px;color:var(--success); }
@keyframes pop { 0%{transform:scale(.5);opacity:0;} 60%{transform:scale(1.08);} 100%{transform:scale(1);opacity:1;} }
.ticket { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-md); max-width:640px; margin:0 auto; }
.ticket__head { background: linear-gradient(120deg, var(--brand-dark), var(--brand)); color:#fff; padding: 22px 26px; display:flex; align-items:center; justify-content:space-between; }
.ticket__head b { font-size:1.15rem; color:#fff; }
.ticket__head small { opacity:.85; font-size:.82rem; }
.ticket__pnr { text-align:right; }
.ticket__pnr b { display:block; letter-spacing:.12em; font-size:1.3rem; }
.ticket__body { padding: 26px; }
.ticket__route { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.ticket__city b { font-size:1.5rem; color:var(--ink); letter-spacing:-.02em; }
.ticket__city span { color:var(--muted); font-size:.85rem; font-weight:600; }
.ticket__mid { flex:1; text-align:center; color:var(--muted); }
.ticket__mid .line { height:2px;background:var(--line);position:relative;margin:8px 0; }
.ticket__mid .line svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:0 6px; width:26px;height:20px; color:var(--brand);}
.ticket__perf { border-top:2px dashed var(--line); margin: 4px -26px; position:relative; }
.ticket__perf::before,.ticket__perf::after{content:"";position:absolute;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--bg-soft);border:1px solid var(--line);}
.ticket__perf::before{left:-11px;} .ticket__perf::after{right:-11px;}
.ticket__meta { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; padding-top:22px; }
.ticket__meta div span { font-size:.76rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; display:block; }
.ticket__meta div b { color:var(--ink); font-size:1rem; }
@media (max-width:560px){ .ticket__meta{ grid-template-columns:1fr 1fr; } }

/* ==== Offers ==== */
.offer { border-radius: var(--r-md); overflow:hidden; position:relative; color:#fff; padding:26px; display:flex;flex-direction:column; min-height:190px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.offer:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.offer::after { content:""; position:absolute; inset:0; background: radial-gradient(400px 200px at 90% 10%, rgba(255,255,255,.2), transparent 60%); }
.offer > * { position:relative; z-index:1; }
.offer .badge { align-self:flex-start; background:rgba(255,255,255,.2); color:#fff; margin-bottom:auto; }
.offer h3 { color:#fff; font-size:1.6rem; margin:14px 0 6px; }
.offer p { color:rgba(255,255,255,.9); margin:0 0 14px; font-size:.95rem; }
.offer__code { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.16); border:1.5px dashed rgba(255,255,255,.5); padding:8px 14px; border-radius:var(--r); font-weight:800; letter-spacing:.05em; align-self:flex-start; backdrop-filter:blur(4px); }
.offer__code svg { width:15px;height:15px; }

.promo-banner { border-radius: var(--r-lg); overflow:hidden; position:relative; color:#fff; padding: clamp(28px,5vw,44px); background: linear-gradient(120deg,#EA5528,#FF6A3D 60%, #ff9a52); }
.promo-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(500px 260px at 88% -10%,rgba(255,255,255,.22),transparent 60%);}
.promo-banner__inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.promo-banner h2{color:#fff;margin-bottom:8px;}
.promo-banner p{color:rgba(255,255,255,.92);margin:0;}

/* ==== FAQ ==== */
.faq { max-width: 780px; margin:0 auto; }
.faq-item { border:1px solid var(--line); border-radius: var(--r); margin-bottom:12px; background:#fff; overflow:hidden; transition: box-shadow .18s var(--ease); }
.faq-item[open] { box-shadow: var(--shadow); }
.faq-item summary { list-style:none; padding: 18px 22px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:14px; cursor:pointer; font-size:1rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .ico { margin-left:auto; width:24px;height:24px; flex:0 0 auto; display:grid;place-items:center; color:var(--brand); transition: transform .25s var(--ease); }
.faq-item[open] summary .ico { transform: rotate(45deg); }
.faq-item summary .ico svg { width:20px;height:20px; }
.faq-item__body { padding: 0 22px 20px; color:var(--body); font-size:.96rem; }
.faq-item__body p { margin:0; }

/* ==== Contact ==== */
.contact-layout { display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:start; }
@media (max-width: 820px){ .contact-layout { grid-template-columns:1fr; } }
.contact-card { display:flex; align-items:flex-start; gap:15px; padding: 20px; border:1px solid var(--line); border-radius: var(--r-md); background:#fff; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.contact-card__ic { width:48px;height:48px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center; }
.contact-card__ic svg{width:23px;height:23px;}
.contact-card b { color:var(--ink); display:block; margin-bottom:3px; }
.contact-card p { color:var(--muted); font-size:.92rem; margin:0; }
.contact-card a { color:var(--brand); font-weight:700; }
.ic-wa { background:#E7F8EF; color:#25D366; }
.ic-phone { background: var(--brand-light); color: var(--brand); }
.ic-mail { background: var(--accent-tint); color: var(--accent); }
.ic-loc { background:#EDE9FE; color:#7c3aed; }

/* ==== About ==== */
.stat-band { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; }
.stat-band .num { font-size: clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--brand); letter-spacing:-.03em; }
.stat-band .lbl { color:var(--muted); font-weight:600; font-size:.92rem; }
@media (max-width:620px){ .stat-band{ grid-template-columns:1fr 1fr; gap:28px 18px; } }
.story-img { border-radius: var(--r-lg); overflow:hidden; min-height: 340px; position:relative; box-shadow: var(--shadow-md); }
.operator-logos { display:grid; grid-template-columns: repeat(6,1fr); gap:16px; align-items:center; }
@media (max-width:760px){ .operator-logos { grid-template-columns: repeat(3,1fr); } }
.op-logo { height:70px; border:1px solid var(--line); border-radius:var(--r); display:grid; place-items:center; background:#fff; color:var(--muted); font-weight:800; letter-spacing:-.02em; font-size:1rem; transition: all .18s var(--ease); }
.op-logo:hover { color:var(--brand); border-color:var(--brand-light); box-shadow: var(--shadow-sm); }

/* misc utilities */
.mb-0{margin-bottom:0;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:32px;}
.flex{display:flex;} .items-center{align-items:center;} .gap-2{gap:12px;} .gap-3{gap:20px;} .wrap{flex-wrap:wrap;}
.muted-text{color:var(--muted);}
.divider{height:1px;background:var(--line);margin:20px 0;}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;}

/* toast */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%); background:var(--ink); color:#fff; padding:13px 22px; border-radius:var(--r-pill); font-weight:700; font-size:.92rem; box-shadow: var(--shadow-lg); z-index:200; display:flex; align-items:center; gap:10px; transition: transform .3s var(--ease); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast svg { width:18px;height:18px;color:#5eead4; }

/* WhatsApp float */
.wa-float { position:fixed; bottom:22px; right:22px; z-index:90; width:56px;height:56px;border-radius:50%; background:#25D366; display:grid;place-items:center; box-shadow: 0 8px 24px rgba(37,211,102,.4); transition: transform .2s var(--ease); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width:30px;height:30px;color:#fff; }