/* ============================================================
   TravelGrid — Theme v5: Light premium tech (tg-ultra.css)
   Loads LAST, after applify.min.css → tg-redesign.css →
   tg-modern.css → tg-stripe.css. Deliberately overrides all.

   Aesthetic — soft off-white canvas, Linear / Vercel inspired:
     - Soft off-white canvas (#f6f7fb base), white cards,
       slate hairlines and ink
     - One vivid accent: indigo #6d5bff + mint signal #00e0b4
       (mint reads as #0a9b7d when used as text on light)
     - Mono-font eyebrow labels + tight Inter display type
     - Dotted-grid hero with aurora glows, glass browser frame
     - Logo marquee, bento-style card grids, reveal-on-scroll,
       count-up stats; fully respects prefers-reduced-motion
   Note: brand + client logos are intentionally left untouched so
   they render in their true colours on the light canvas.
   ============================================================ */

:root {
  /* Canvas — soft off-white light theme */
  --u-bg: #f6f7fb;
  --u-bg-2: #eef0f7;
  --u-bg-3: #e7eaf3;
  --u-card: #ffffff;
  --u-card-2: #fbfcfe;

  /* Hairlines — slate on light */
  --u-hair: rgba(15, 18, 40, 0.09);
  --u-hair-2: rgba(15, 18, 40, 0.16);
  --u-hair-3: rgba(15, 18, 40, 0.28);

  /* Ink */
  --u-ink: #101223;
  --u-ink-2: #3d4159;
  --u-ink-3: #6b7089;
  --u-ink-4: #9298ad;

  /* Brand */
  --u-primary: #6d5bff;
  --u-primary-2: #8470ff;
  --u-primary-deep: #4d3ddd;
  --u-tint: rgba(109, 91, 255, 0.10);
  --u-tint-soft: rgba(109, 91, 255, 0.06);
  --u-signal: #00e0b4;
  --u-signal-ink: #0a9b7d;
  --u-lime: #6f9c26;

  /* Type */
  --u-font-head: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --u-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Shape / shadow */
  --u-radius: 16px;
  --u-radius-sm: 12px;
  --u-shadow-card: 0 1px 2px rgba(16, 18, 35, 0.05), 0 14px 34px -20px rgba(16, 18, 35, 0.20);
  --u-glow: 0 10px 30px -10px rgba(109, 91, 255, 0.42);
}

/* ---------- Remap the v3/v4 tokens so every component follows ---------- */
:root {
  --m-bg: var(--u-bg);
  --m-bg-soft: var(--u-bg-2);
  --m-bg-lav: var(--u-bg-3);
  --m-ink: var(--u-ink);
  --m-ink-2: var(--u-ink-2);
  --m-ink-3: var(--u-ink-3);
  --m-ink-4: var(--u-ink-4);
  --m-border: var(--u-hair);
  --m-border-soft: rgba(15, 18, 40, 0.06);
  --m-border-strong: var(--u-hair-2);
  --m-primary: var(--u-primary);
  --m-primary-deep: var(--u-primary-deep);
  --m-primary-deeper: #2f2298;
  --m-primary-soft: var(--u-tint);
  --m-primary-softer: rgba(109, 91, 255, 0.06);
  --m-accent: var(--u-signal);
  --m-track: #eceef4;
  --m-font-head: var(--u-font-head);
  --m-font-body: var(--u-font-head);
  --m-radius: var(--u-radius);
  --m-radius-sm: var(--u-radius-sm);
  --m-shadow-sm: 0 1px 2px rgba(16, 18, 35, 0.05), 0 8px 20px -16px rgba(16, 18, 35, 0.25);
  --m-shadow-md: 0 2px 4px rgba(16, 18, 35, 0.06), 0 18px 38px -20px rgba(16, 18, 35, 0.28);
  --m-shadow-lg: 0 4px 8px rgba(16, 18, 35, 0.07), 0 32px 64px -28px rgba(16, 18, 35, 0.32);
  --m-glass-bg: rgba(255, 255, 255, 0.7);
  --m-glass-border: var(--u-hair);
  --lg-bg: var(--u-bg);
  --lg-bg-soft: var(--u-bg-2);
  --lg-ink: var(--u-ink);
  --lg-ink-2: var(--u-ink-2);
  --lg-ink-3: var(--u-ink-3);
  --lg-ink-4: var(--u-ink-4);
  --lg-primary: var(--u-primary);
  --lg-primary-hover: var(--u-primary-2);
  --lg-border: var(--u-hair);
  --lg-border-soft: rgba(15, 18, 40, 0.06);
  --lg-border-strong: var(--u-hair-2);
  --lg-primary-soft: var(--u-tint);
}

/* ---------- Base canvas ---------- */
html {
  scroll-behavior: smooth;
  background: var(--u-bg);
}

body {
  font-family: var(--u-font-head);
  background: var(--u-bg) !important;
  color: var(--u-ink-2);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.heading,
.card-title,
.form-card .card-header h3 {
  font-family: var(--u-font-head);
  color: var(--u-ink) !important;
  font-weight: 700;
  letter-spacing: -0.028em;
}

h1, h2, h3 { text-wrap: balance; }
p { color: var(--u-ink-2); }

a { color: var(--u-primary-deep); transition: color 150ms ease; }
a:hover, a:focus { color: var(--u-primary); }

::selection { background: rgba(109, 91, 255, 0.22); color: #101223; }

.text-indigo { color: var(--u-ink) !important; }
.bg-light { background: var(--u-bg-2) !important; }

img { max-width: 100%; }

:focus-visible {
  outline: 3px solid rgba(109, 91, 255, 0.55);
  outline-offset: 2px;
  border-radius: 8px;
}

body {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(109, 91, 255, 0.06), transparent 62%),
    var(--u-bg) !important;
}

/* Light scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #eceef4; }
::-webkit-scrollbar-thumb { background: #c6cad8; border-radius: 8px; border: 3px solid #eceef4; }
::-webkit-scrollbar-thumb:hover { background: #aab0c2; }

/* ---------- Navbar: light glass ---------- */
.navbar-fixed-top,
.navbar.navbar-fixed-top {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid var(--u-hair) !important;
  box-shadow: 0 10px 30px -18px rgba(16, 18, 35, 0.22) !important;
}

.navbar .nav > li > a,
.navbar .nav.navbar-nav > li > a {
  font-family: var(--u-font-head) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--u-ink-2) !important;
  transition: color 150ms ease;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus,
.navbar .nav > li.active > a,
.navbar .nav > li.active > a:focus,
.navbar .nav > li.active > a:hover {
  color: var(--u-ink) !important;
}

.navbar li.active > a { font-weight: 600 !important; }

.navbar .ui-navigation .nav.navbar-nav { align-items: center; }

@media (min-width: 992px) {
  .navbar .nav > li.active > a::after {
    content: "";
    display: block;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--u-primary), var(--u-signal));
    margin-top: 3px;
  }
}

/* Logo — light bar, so show the mark in its true colours (no invert).
   The global `img { max-width:100% }` was clamping the wordmark to the
   collapsed navbar-brand box and squashing it; opt the logo out and give
   the brand a fixed width so it never compresses. */
.navbar-brand img {
  filter: none;
  opacity: 1;
  max-width: none !important;
  width: auto !important;
}
.navbar .navbar-brand { width: 175px; }
@media (max-width: 740px) { .navbar .navbar-brand { width: 152px; } }
@media (max-width: 480px) { .navbar .navbar-brand { width: 132px; } }

/* Remove the legacy Apple / Google-Play store icons from CTA buttons */
.btn-download.btn-app-store::before,
.btn-download.btn-google-play::before {
  display: none !important;
  content: none !important;
}
.btn-download.btn-app-store,
.btn-download.btn-google-play {
  padding-left: 1.4rem !important;
  text-align: center;
}

/* "Book a demo" pill in the nav */
.navbar .nav > li.tg-nav-cta > a {
  background: var(--u-primary);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.5rem 1.15rem !important;
  margin-left: 0.75rem;
  font-weight: 600 !important;
  box-shadow: var(--u-glow);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.navbar .nav > li.tg-nav-cta > a:hover {
  background: var(--u-primary-2);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -8px rgba(109, 91, 255, 0.65);
}

/* Mobile nav (collapsible) — light */
.ui-collapsible-nav,
.ui-collapsible-nav .navbar-nav {
  background: #ffffff !important;
}
.ui-collapsible-nav .toggle,
.ui-collapsible-nav .toggle.current-page {
  color: var(--u-ink-2) !important;
}
.ui-mobile-nav-toggle::before,
.ui-mobile-nav-toggle::after,
.uk-close { background: var(--u-ink-2) !important; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--u-font-head);
  font-weight: 600;
  font-size: 0.94rem;
  border-radius: var(--u-radius-sm);
  border: 1px solid transparent;
  letter-spacing: -0.01em;
  padding: 0.8rem 1.4rem;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
  box-shadow: none;
}
.btn:active { transform: translateY(0); }

/* Primary CTA — vivid indigo */
.ui-gradient-green.btn,
.btn.ui-gradient-green,
.ui-gradient-green {
  background: linear-gradient(180deg, var(--u-primary-2), var(--u-primary)) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: var(--u-glow) !important;
}
.ui-gradient-green.btn:hover,
.btn.ui-gradient-green:hover,
.ui-gradient-green:hover,
.ui-gradient-green:focus-visible {
  background: linear-gradient(180deg, var(--u-primary-2), var(--u-primary-deep)) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(109, 91, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Secondary CTA — ghost glass */
.ui-gradient-blue.btn,
.btn.ui-gradient-blue,
.ui-gradient-blue {
  background: rgba(16, 18, 35, 0.04) !important;
  color: var(--u-ink) !important;
  border: 1px solid var(--u-hair-2) !important;
  box-shadow: none !important;
}
.ui-gradient-blue.btn:hover,
.btn.ui-gradient-blue:hover,
.ui-gradient-blue:hover {
  background: rgba(16, 18, 35, 0.08) !important;
  color: var(--u-ink) !important;
  border-color: var(--u-hair-3) !important;
  transform: translateY(-2px);
}

/* Purple / peach aliases -> indigo */
.ui-gradient-purple.btn,
.btn.ui-gradient-purple,
.ui-gradient-peach.btn,
.btn.ui-gradient-peach,
.ui-gradient-purple {
  background: var(--u-primary) !important;
  color: #fff !important;
}
.ui-gradient-purple.btn:hover,
.btn.ui-gradient-purple:hover,
.ui-gradient-peach.btn:hover,
.btn.ui-gradient-peach:hover { background: var(--u-primary-2) !important; color: #fff !important; }

/* Link buttons */
.btn.btn-link {
  color: var(--u-primary-deep) !important;
  text-decoration: none;
  font-weight: 600;
}
.btn.btn-link:hover { color: var(--u-primary) !important; }

/* Social circles */
.btn-circle.ui-gradient-blue,
.btn-circle.ui-gradient-green,
.btn-circle.ui-gradient-purple {
  background: rgba(16, 18, 35, 0.05) !important;
  color: var(--u-ink-2) !important;
  border: 1px solid var(--u-hair) !important;
  box-shadow: none !important;
}
.btn-circle.ui-gradient-blue:hover,
.btn-circle.ui-gradient-green:hover,
.btn-circle.ui-gradient-purple:hover {
  background: var(--u-primary) !important;
  color: #fff !important;
}

/* ---------- Hero: light dotted grid + aurora ---------- */
.ui-hero.ui-gradient-purple,
.ui-hero-slider.ui-gradient-purple,
.page-hero.ui-gradient-purple,
.hero-lg.ui-gradient-purple,
.ui-hero.ui-gradient-purple .slider-pro {
  background-color: var(--u-bg) !important;
  background-image:
    radial-gradient(rgba(15, 18, 40, 0.10) 1px, transparent 1.1px),
    radial-gradient(1000px 520px at 86% -16%, rgba(109, 91, 255, 0.14), transparent 60%),
    radial-gradient(860px 480px at -8% 112%, rgba(0, 224, 180, 0.10), transparent 55%) !important;
  background-size: 22px 22px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--u-hair);
}

/* Aurora blob */
.ui-hero.ui-gradient-purple::before,
.ui-hero-slider.ui-gradient-purple::before,
.page-hero.ui-gradient-purple::before {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  right: 6%;
  top: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 91, 255, 0.22), transparent 65%);
  filter: blur(56px);
  pointer-events: none;
  z-index: 0;
}
.ui-hero.ui-gradient-purple::after,
.ui-hero-slider.ui-gradient-purple::after,
.page-hero.ui-gradient-purple::after {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  left: 18%;
  bottom: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 224, 180, 0.13), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.ui-hero .container, .page-hero .container { position: relative; z-index: 1; }

.ui-hero .heading,
.ui-hero-slider .heading {
  color: var(--u-ink) !important;
  font-family: var(--u-font-head) !important;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: clamp(2.4rem, 4.8vw, 3.7rem);
  line-height: 1.06;
}

.ui-hero .paragraph,
.ui-hero-slider .paragraph {
  color: var(--u-ink-2) !important;
  font-size: 1.1rem;
  max-width: 56ch;
}
.ui-hero .paragraph a, .ui-hero-slider .paragraph a { color: var(--u-primary-deep); }

.tg-gradient-text {
  background: linear-gradient(105deg, var(--u-primary-2) 10%, var(--u-signal) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hero chips — mono pills with live dot */
.tg-chip.tg-chip-orange,
.tg-chip.tg-chip-purple {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--u-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--u-primary-deep) !important;
  background: rgba(109, 91, 255, 0.1) !important;
  border: 1px solid rgba(109, 91, 255, 0.32) !important;
  border-radius: 999px !important;
  padding: 0.4rem 0.9rem !important;
}
.tg-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--u-signal-ink);
  box-shadow: 0 0 10px 1px rgba(0, 224, 180, 0.6);
}

/* Hero stats */
.tg-hero-stat .tg-hero-stat-num {
  color: var(--u-ink) !important;
  font-family: var(--u-font-head);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.5rem;
}
.tg-hero-stat .tg-hero-stat-lbl {
  color: var(--u-ink-3);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Hero product screenshot — glass browser frame */
.tg-browser {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--u-hair-2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px -36px rgba(16, 18, 35, 0.35), 0 0 0 1px rgba(109, 91, 255, 0.08);
}
.tg-browser::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 60%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(109, 91, 255, 0.12), transparent 70%);
  pointer-events: none;
}
.tg-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 0.95rem;
  background: #f1f3f9;
  border-bottom: 1px solid var(--u-hair);
  position: relative;
  z-index: 1;
}
.tg-browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.tg-browser-dot + .tg-browser-dot { margin-left: 0; }
.tg-browser-dot.r { background: #ff5f57; }
.tg-browser-dot.y { background: #febc2e; }
.tg-browser-dot.g { background: #28c840; }
.tg-browser-url {
  margin-left: 0.8rem;
  font-family: var(--u-font-mono);
  font-size: 0.7rem;
  color: var(--u-ink-4);
  letter-spacing: 0.02em;
}
.tg-browser-body img { display: block; width: 100%; height: auto; }

/* ---------- Logo marquee (white tiles on dark) ---------- */
.tg-logo-marquee {
  width: 100%;
  overflow: hidden;
  padding: 0.75rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tg-logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tg-marquee 42s linear infinite;
  will-change: transform;
}
.tg-logo-marquee:hover .tg-logo-track { animation-play-state: paused; }
@keyframes tg-marquee {
  to { transform: translateX(-50%); }
}
.tg-marquee-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 1rem;
}
.tg-marquee-tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  min-width: 150px;
  padding: 0 1.5rem;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--u-hair);
  box-shadow: 0 10px 26px -18px rgba(16, 18, 35, 0.30);
}
.tg-marquee-tile img {
  max-height: 34px;
  max-width: 118px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 180ms ease, opacity 180ms ease;
}
.tg-marquee-tile:hover img {
  filter: none;
  opacity: 1;
}
/* Dark-mode logo (Visaka) — invert to ink so it reads on the white tile */
.tg-marquee-tile img.tg-logo-invert { filter: grayscale(1) invert(1); }
.tg-marquee-tile:hover img.tg-logo-invert { filter: grayscale(0) invert(1); }
.tg-marquee-note {
  font-family: var(--u-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--u-ink-3);
}

/* ---------- Section headings ---------- */
.section-heading { margin-bottom: 2.5rem; }

.section-heading .heading {
  font-weight: 800 !important;
  letter-spacing: -0.033em !important;
  color: var(--u-ink) !important;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.12;
}

.section-heading .paragraph {
  color: var(--u-ink-2) !important;
  font-size: 1.05rem;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

.tg-subheading { color: var(--u-ink) !important; }

.tg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--u-font-mono) !important;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--u-primary-deep) !important;
  background: rgba(109, 91, 255, 0.1) !important;
  border: 1px solid rgba(109, 91, 255, 0.28) !important;
  border-radius: 999px !important;
  padding: 0.42rem 0.9rem !important;
  margin-bottom: 1.1rem !important;
}
.tg-eyebrow::before { content: "//"; font-size: 0.62rem; color: var(--u-primary); }

/* ---------- Proof strip ---------- */
.tg-proof-strip {
  background: var(--u-bg-2) !important;
  border-top: 1px solid var(--u-hair);
  border-bottom: 1px solid var(--u-hair);
  padding-top: 2.2rem;
  padding-bottom: 2.2rem;
}

.tg-proof {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 1.5rem;
  border-left: 1px solid var(--u-hair);
}
.tg-proof:first-child { border-left: none; padding-left: 0; }

.tg-proof h3 {
  color: var(--u-ink) !important;
  font-family: var(--u-font-head) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  margin-bottom: 0.35rem;
}
.tg-proof p {
  color: var(--u-ink-3) !important;
  font-size: 0.92rem;
  line-height: 1.6;
}
.tg-proof strong, .tg-proof h3 span { color: var(--u-signal-ink); }

@media (max-width: 992px) {
  .tg-proof { border-left: none; border-top: 1px solid var(--u-hair); padding: 1.25rem 0 0; margin-top: 1.25rem; }
  .tg-proof:first-child { border-top: none; padding-top: 0; margin-top: 0; }
}

/* ---------- Cards: light surfaces ---------- */
.tg-feature-card,
.tg-client-item,
.tg-sector-card,
.tg-sector-logo,
.tg-module-card,
.tg-blog-card,
.tg-capability-card,
.tg-journey-node,
.tg-role-card,
.tg-ai-cap-col,
.tg-faq details,
.tg-global-map-card,
.ui-card,
.card,
.form-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)),
    var(--u-card) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--u-hair) !important;
  border-radius: var(--u-radius) !important;
  box-shadow: var(--u-shadow-card) !important;
}

.tg-feature-card,
.tg-module-card,
.tg-capability-card,
.tg-journey-node,
.tg-sector-card,
.tg-ai-cap-col {
  position: relative;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.tg-feature-card:hover,
.tg-module-card:hover,
.tg-capability-card:hover,
.tg-journey-node:hover,
.tg-sector-card:hover,
.tg-ai-cap-col:hover {
  transform: translateY(-3px);
  border-color: rgba(109, 91, 255, 0.5) !important;
  box-shadow: 0 24px 48px -28px rgba(16, 18, 35, 0.28), 0 0 0 1px rgba(109, 91, 255, 0.12) !important;
}

/* Hairline accent on top of key cards */
.tg-module-card::before,
.tg-feature-card::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(132, 112, 255, 0.9), rgba(0, 224, 180, 0.7), transparent);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.tg-module-card:hover::before,
.tg-feature-card:hover::before { opacity: 1; }

.tg-feature-card h4,
.tg-module-card h4,
.tg-journey-node h4,
.tg-capability-card h4 { color: var(--u-ink) !important; }

.tg-feature-card p,
.tg-module-card p,
.tg-sector-card h4,
.tg-capability-card > p,
.tg-role-card p,
.tg-card p { color: var(--u-ink-2) !important; }

.tg-module-card a {
  display: inline-block;
  margin-top: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--u-primary-deep);
  border-bottom: 1px solid rgba(109, 91, 255, 0.3);
  text-underline-offset: 4px;
}
.tg-module-card a:hover { color: var(--u-primary); border-color: currentColor; }

/* Icons */
.tg-module-icon,
.tg-feature-icon {
  background: var(--u-tint) !important;
  color: var(--u-primary) !important;
  border: 1px solid rgba(109, 91, 255, 0.22) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
.tg-feature-icon-accent { background: rgba(0, 224, 180, 0.1) !important; color: var(--u-signal-ink) !important; border-color: rgba(0, 224, 180, 0.28) !important; }

.tg-capability-stat {
  background: rgba(109, 91, 255, 0.1) !important;
  border: 1px solid rgba(109, 91, 255, 0.22);
  color: var(--u-ink-2);
  border-radius: 10px;
}
.tg-capability-stat span { color: var(--u-signal-ink); }

/* Sector cards (kept for compatibility with other pages) */
.tg-sector-card h4 span {
  display: inline-block;
  color: var(--u-primary-deep);
  background: var(--u-tint);
  border: 1px solid rgba(109, 91, 255, 0.24);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.8rem;
}
.tg-sector-logo { background: #fff !important; border: 1px solid var(--u-hair-2) !important; }

/* Pills */
.tg-pill,
.tg-location-pill {
  background: rgba(16, 18, 35, 0.04) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--u-hair-2) !important;
  color: var(--u-ink-2) !important;
  box-shadow: none !important;
  font-size: 0.85rem;
}
.tg-pill:hover { border-color: var(--u-primary); color: var(--u-ink) !important; }

/* ---------- Journey ---------- */
.tg-journey-grid { gap: 1.1rem; }

.tg-journey-num,
.tg-journey-num-yellow,
.tg-journey-num-blue,
.tg-journey-num-green,
.tg-journey-num-purple {
  background: var(--u-primary) !important;
  box-shadow: 0 6px 18px -6px rgba(109, 91, 255, 0.6) !important;
  color: #fff !important;
  border: none !important;
}
.tg-journey-num-yellow { background: #3f3a8f !important; }
.tg-journey-num-blue { background: #3b6cf7 !important; }
.tg-journey-num-green { background: #0e9f7c !important; }
.tg-journey-num-purple { background: var(--u-primary-deep) !important; }

.tg-journey-icon {
  border-radius: 12px;
  font-size: 1.35rem;
  background: var(--u-tint) !important;
  color: var(--u-primary) !important;
  border: 1px solid rgba(109, 91, 255, 0.2);
}
.tg-journey-icon-orange { background: rgba(0, 224, 180, 0.1) !important; color: var(--u-signal-ink) !important; border-color: rgba(0, 224, 180, 0.28); }
.tg-journey-icon-yellow { background: var(--u-tint) !important; color: var(--u-primary) !important; }
.tg-journey-icon-blue { background: rgba(59, 108, 247, 0.12) !important; color: #3b6cf7 !important; }
.tg-journey-icon-green { background: rgba(14, 159, 124, 0.12) !important; color: var(--u-signal-ink) !important; }
.tg-journey-icon-purple { background: rgba(132, 112, 255, 0.14) !important; color: #6d5bff !important; }

/* ---------- AI section (light indigo band) ---------- */
.tg-ai-section {
  background:
    radial-gradient(720px 460px at 82% 10%, rgba(109, 91, 255, 0.14), transparent 66%),
    radial-gradient(620px 460px at 4% 94%, rgba(0, 224, 180, 0.10), transparent 68%),
    linear-gradient(165deg, #f2f0ff 0%, #eef1fb 52%, #eafcfa 100%) !important;
  border-top: 1px solid rgba(109, 91, 255, 0.2);
  border-bottom: 1px solid rgba(109, 91, 255, 0.2);
}
.tg-ai-section::before { background: none; }

.tg-ai-section .section-heading .heading { color: var(--u-ink); }
.tg-ai-section .section-heading .paragraph { color: var(--u-ink-2); }
.tg-ai-eyebrow {
  color: var(--u-primary-deep) !important;
  background: rgba(109, 91, 255, 0.12) !important;
  border-color: rgba(132, 112, 255, 0.4) !important;
}
.tg-ai-copy p, .tg-ai-copy .tg-lead { color: var(--u-ink-2); }
.tg-ai-copy .tg-lead strong { color: var(--u-ink); }
.tg-ai-examples li { color: var(--u-ink-2); }

.tg-ai-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
  color: #fff !important;
  background: var(--u-primary) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: var(--u-glow) !important;
}
.tg-ai-cta:hover,
.tg-ai-cta:focus {
  color: #fff !important;
  background: var(--u-primary-2) !important;
  border-color: var(--u-signal) !important;
}

.tg-ai-chat {
  border-color: rgba(132, 112, 255, 0.42) !important;
  box-shadow: 0 32px 80px -40px rgba(16, 18, 35, 0.35), 0 0 0 1px rgba(109, 91, 255, 0.12);
  background: #ffffff;
}

.tg-ai-cap-heading { color: var(--u-ink) !important; font-size: 1.15rem; }
.tg-ai-cap-card {
  background: #ffffff !important;
  border-color: rgba(132, 112, 255, 0.28) !important;
}
.tg-ai-cap-card h5 { color: var(--u-ink) !important; }
.tg-ai-cap-card p { color: var(--u-ink-2) !important; }
.tg-ai-cap-note {
  background: rgba(109, 91, 255, 0.06) !important;
  border: 1px solid rgba(132, 112, 255, 0.2) !important;
  color: var(--u-ink-2) !important;
}

/* ---------- Module overview grid ---------- */
.tg-module-overview-heading h2 { color: var(--u-ink); }
.tg-module-overview-heading p { color: var(--u-ink-2); }
.tg-module-overview-grid .tg-module-card h3 { color: var(--u-ink); }

/* ---------- Roles / trust ---------- */
.tg-role-note {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--u-hair);
  border-left: 4px solid var(--u-primary);
}
.tg-role-note p { color: var(--u-ink-2); }

.tg-trust-strip {
  background: linear-gradient(160deg, rgba(109, 91, 255, 0.08), rgba(0, 224, 180, 0.06)) !important;
  border: 1px solid var(--u-hair) !important;
  box-shadow: var(--u-shadow-card) !important;
  border-radius: 20px;
}
.tg-trust-item > .icon { color: var(--u-primary) !important; }
.tg-trust-item h5 { color: var(--u-ink) !important; }
.tg-trust-item p { color: var(--u-ink-2) !important; }
.tg-trust-item { border-bottom: 1px solid var(--u-hair); }
.tg-trust-item:last-child { border-bottom: none; }

/* ---------- Inline CTA band ---------- */
.tg-cta-band {
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(109, 91, 255, 0.18), transparent 62%),
    linear-gradient(155deg, #f3f1ff 0%, #eef0fb 55%, #eaf6ff 100%) !important;
  border: 1px solid rgba(132, 112, 255, 0.28) !important;
  border-radius: 20px;
  box-shadow: var(--u-shadow-card) !important;
}
.tg-cta-band h3 { color: var(--u-ink); }
.tg-cta-band p { color: var(--u-ink-2); }

/* ---------- Prose / content ---------- */
.tg-prose h2 { color: var(--u-ink); }
.tg-prose h3 { color: var(--u-ink); }
.tg-prose p, .tg-prose li, .tg-policy-body p, .tg-policy-body li { color: var(--u-ink-2); }
.tg-prose .tg-lead { color: var(--u-ink); font-weight: 500; }
.tg-prose a { color: var(--u-primary-deep); text-decoration-color: rgba(109, 91, 255, 0.3); }
.tg-prose table { color: var(--u-ink-2); }

.tg-note { border-left: 3px solid var(--u-primary); background: rgba(109, 91, 255, 0.07); }
.tg-note .tg-label { color: var(--u-primary-deep); }

.tg-prose th {
  background: rgba(109, 91, 255, 0.12);
  color: var(--u-ink);
  font-weight: 600;
}
.tg-prose td { border-bottom: 1px solid var(--u-hair); }

/* ---------- FAQ ---------- */
.tg-faq details {
  border: 1px solid var(--u-hair);
  border-radius: var(--u-radius-sm);
  background: var(--u-card) !important;
  box-shadow: var(--u-shadow-card) !important;
}
.tg-faq summary { font-family: var(--u-font-head); font-weight: 600; color: var(--u-ink); }
.tg-faq details[open] { border-color: rgba(109, 91, 255, 0.4); }
.tg-faq details[open] summary { color: var(--u-ink); }
.tg-faq summary::after { color: var(--u-signal-ink); }
.tg-faq p { color: var(--u-ink-2); }

/* ---------- Breadcrumb ---------- */
.tg-breadcrumb { color: var(--u-ink-3); font-weight: 500; }
.tg-breadcrumb a { color: var(--u-primary-deep) !important; text-decoration: none; font-weight: 600; }
.tg-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Testimonials ---------- */
.ui-testimonials .ui-card {
  background: var(--u-card) !important;
  border: 1px solid var(--u-hair) !important;
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow-card) !important;
}
.ui-testimonials .ui-card p { color: var(--u-ink-2); font-size: 0.98rem; }
.ui-testimonials .user h6 { color: var(--u-ink) !important; }
.ui-testimonials .user .sub-heading { color: var(--u-ink-3) !important; }
.tg-testimonial-result { color: var(--u-ink-3); }

.owl-theme .owl-dots .owl-dot span { background: var(--u-hair-2) !important; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: var(--u-primary) !important; }

/* Static testimonials grid (replaces the JS carousel so it always renders) */
.tg-testi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 2rem;
}
.tg-testi-card {
  display: flex;
  flex-direction: column;
  background: var(--u-card);
  border: 1px solid var(--u-hair);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow-card);
  padding: 1.5rem;
}
.tg-testi-quote {
  flex: 1;
  margin: 0 0 0.9rem;
  color: var(--u-ink-2);
  font-size: 0.98rem;
  line-height: 1.65;
}
.tg-testi-result {
  margin: 0 0 1.1rem;
  color: var(--u-ink-3);
  font-size: 0.85rem;
  line-height: 1.5;
}
.tg-testi-result .fa { color: var(--u-primary); margin-right: 0.35rem; }
.tg-testi-author {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--u-hair);
}
.tg-testi-author .heading { margin: 0 0 0.15rem; color: var(--u-ink) !important; }
.tg-testi-author .sub-heading { margin: 0; color: var(--u-ink-3) !important; font-size: 0.9rem; }
@media (max-width: 640px) {
  .tg-testi-grid { grid-template-columns: 1fr; }
}

/* ---- Testimonials: scroll reveal + hover (progressive enhancement) ----
   Cards are fully visible by default (no JS / reduced-motion safe).
   JS adds html.js-anim; until then the cards never hide. */
html.js-anim .tg-testi-card:not(.tg-testi-done):not(.tg-testi-in) { opacity: 0; }
.tg-testi-card.tg-testi-in { animation: tg-testi-in 0.6s ease forwards; }
.tg-testi-card.tg-testi-in:nth-child(2) { animation-delay: 0.08s; }
.tg-testi-card.tg-testi-in:nth-child(3) { animation-delay: 0.16s; }
.tg-testi-card.tg-testi-in:nth-child(4) { animation-delay: 0.24s; }
@keyframes tg-testi-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tg-testi-card {
  transition: transform 0.3s ease, box-shadow 0.35s ease, border-color 0.3s ease;
  will-change: transform;
}
.tg-testi-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--u-glow), 0 18px 36px -14px rgba(109, 91, 255, 0.28);
  border-color: rgba(109, 91, 255, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  html.js-anim .tg-testi-card:not(.tg-testi-done):not(.tg-testi-in) { opacity: 1; }
  .tg-testi-card { animation: none !important; transition: none !important; }
}

/* ---------- App screens ---------- */
.ui-app-screens .ui-card {
  background: var(--u-card) !important;
  border: 1px solid var(--u-hair) !important;
  border-radius: 18px;
  box-shadow: var(--u-shadow-card) !important;
}

/* ---------- Contact / demo form ---------- */
/* #contact_card is the contact strip on case-study.html. It was previously
   mis-named #contact_form, which collided with the real capture forms. */
#contact_form .card-body,
#contact_card .card-body { background: transparent; }
#contact_form .form-control,
.tg-demo-form input,
.tg-demo-form select,
.tg-demo-form textarea,
.form-control,
.input,
select,
textarea {
  background: #ffffff;
  color: var(--u-ink);
  border: 1px solid var(--u-hair-2);
  border-radius: var(--u-radius-sm);
}
#contact_form .form-control:focus,
.tg-demo-form input:focus,
.tg-demo-form select:focus,
.tg-demo-form textarea:focus,
.form-control:focus {
  background: #ffffff;
  border-color: var(--u-primary);
  box-shadow: 0 0 0 3px rgba(109, 91, 255, 0.2);
  outline: none;
}
.tg-demo-form { background: var(--u-card) !important; border: 1px solid var(--u-hair); border-radius: 16px; padding: 1.5rem; }
.tg-demo-form label { color: var(--u-ink); }
.tg-form-status.is-success { color: var(--u-signal); }
.tg-form-status.is-error { color: #f87171; }
.tg-demo-form-head h3 { margin: 0 0 0.35rem; color: var(--u-ink); font-size: 1.3rem; letter-spacing: -0.02em; font-family: var(--u-font-head); }
.tg-demo-form-head p { margin: 0 0 1.1rem; font-size: 0.92rem; color: var(--u-ink-2); }
.tg-demo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem 1rem; }
.tg-demo-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; }
.tg-demo-form input, .tg-demo-form select, .tg-demo-form textarea { padding: 0.62rem 0.78rem; font-size: 0.93rem; font-weight: 400; resize: vertical; }
.tg-demo-form input::placeholder, .tg-demo-form textarea::placeholder { color: var(--u-ink-4); }
.tg-demo-form-full { grid-column: 1 / -1; }
.tg-form-optional { font-weight: 400; font-size: 0.74rem; color: var(--u-ink-4); }
.tg-demo-form-submit {
  margin-top: 1.05rem; display: inline-flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(180deg, var(--u-primary-2), var(--u-primary));
  color: #fff; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px; padding: 0.72rem 1.3rem; cursor: pointer; box-shadow: var(--u-glow);
}
.tg-demo-form-submit:hover { background: linear-gradient(180deg, var(--u-primary-2), var(--u-primary-deep)); color: #fff; }
.tg-demo-form-submit:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 560px) { .tg-demo-form-grid { grid-template-columns: 1fr; } }

/* ---------- Video section (light overlay) ---------- */
.bg-overlay-gradient-peach::before,
.bg-overlay-gradient-purple::before,
.bg-overlay-gradient-blue::before,
.bg-overlay-gradient-green::before {
  background: linear-gradient(180deg, rgba(246, 247, 251, 0.72), rgba(246, 247, 251, 0.88)) !important;
}
.ui-video-toggle .icon,
.ui-video-toggle .fa {
  background: var(--u-primary) !important;
  color: #fff !important;
}

/* ---------- Footer (light) ---------- */
.ui-footer .footer-bg,
.ui-footer.footer-bg,
.footer-bg.ui-gradient-purple {
  background:
    radial-gradient(820px 420px at 85% -10%, rgba(109, 91, 255, 0.12), transparent 62%),
    #f2f3f8 !important;
  border-top: 1px solid var(--u-hair);
}
.ui-footer .section-heading .heading,
.ui-footer .download-section .heading { color: var(--u-ink); }
.ui-footer .download-section p { color: var(--u-ink-2); }

.download-section .btn-download.ui-gradient-blue.btn,
.download-section .btn-download.ui-gradient-green.btn {
  background: linear-gradient(180deg, var(--u-primary-2), var(--u-primary)) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: var(--u-glow) !important;
}
.download-section .btn-download.ui-gradient-blue.btn:hover,
.download-section .btn-download.ui-gradient-green.btn:hover {
  background: linear-gradient(180deg, var(--u-primary-2), var(--u-primary-deep)) !important;
  color: #fff !important;
}

.tg-contact-strip { color: var(--u-ink-2) !important; }
.tg-location-pill { color: var(--u-ink-2) !important; }
.tg-contact-list a { color: var(--u-ink-2) !important; }
.tg-contact-list a:hover { color: var(--u-primary-deep) !important; }

.tg-footer-col h4 { color: var(--u-ink); }
.tg-footer-col a { color: var(--u-ink-3); }
.tg-footer-col a:hover { color: var(--u-ink); }

.tg-seo-cities { color: var(--u-ink-3) !important; }

.footer-copyright { background: #e9ebf2 !important; }
.tg-visitor-counter { color: var(--u-ink-4); }

/* Case-study: fill the container and use larger, readable type.
   Full-width cards reuse the horizontal space (no dead gutters), and the
   1.15rem body type matches the lead-paragraph size on the other content
   pages, so the page no longer reads smaller after navigating to it. */
.tg-cs-article .ui-blog-grid { max-width: none; }
.tg-cs-article p,
.tg-cs-article li {
  font-size: 1.15rem;
  line-height: 1.75;
  max-width: 62rem;
}

/* Case-study page scale: the hero title and the numbered section titles were
   the only text that read smaller than the homepage (hero 41.6px vs 59.2px,
   section titles 24px vs 43.2px). Bump them to the same scale so the whole
   page no longer looks reduced after navigating to it. */
.tg-case-study .ui-hero .heading {
  font-size: clamp(2.5rem, 5vw, 3.7rem);
  line-height: 1.12;
}
.tg-case-study .card-header .heading {
  font-size: clamp(1.45rem, 2.3vw, 1.8rem);
  line-height: 1.3;
}

/* "View product presentation" button — animated gradient pill (ui-gradient-animator
   normally only applies to heroes; extend it to .btn) */
.btn.ui-gradient-animator {
  background: linear-gradient(45deg, var(--tg-primary-dark), var(--tg-primary), var(--tg-violet), var(--tg-accent), var(--tg-accent-mid), var(--tg-violet), var(--tg-primary-dark));
  background-size: 450% 100%;
  -webkit-animation: animate_gradient 35s linear infinite;
  animation: animate_gradient 35s linear infinite;
  color: #fff;
}
.btn.ui-gradient-animator:hover { filter: brightness(1.12); }

/* ---------- Whitespace tightening (v5.1) ---------- */
/* Content must never depend on JS to become visible.
   The page fade-in left the whole body at ~0.2 opacity when the imagesLoaded animation stalled,
   which made lower sections (e.g. testimonials) look blank. */
body[data-fade_in="on-load"] { opacity: 1 !important; }

/* Page heroes: trim the oversized top/bottom padding (was 80px/112px on desktop) */
.ui-hero.hero-sm { padding: 3.25rem 0 3.75rem 0 !important; }
@media (min-width: 1200px) {
  .ui-hero.hero-lg { padding: 4.25rem 0 !important; }
}
/* Footer: collapse the stacked paddings that left ~290px of dead space above the CTA */
.ui-footer.subscribe-footer { padding-top: 0 !important; }
.ui-footer .footer-bg { padding: 3rem 0 2.25rem !important; }
.ui-footer .download-section { padding-top: 0 !important; }

/* ---------- Sticky CTA ---------- */
.tg-sticky-cta {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(132, 112, 255, 0.34) !important;
  border-radius: 999px;
  box-shadow: 0 24px 56px -24px rgba(16, 18, 35, 0.35), 0 0 0 1px rgba(109, 91, 255, 0.1);
}
.tg-sticky-cta p { color: var(--u-ink-2) !important; font-size: 0.86rem !important; }
.tg-sticky-cta a {
  background: var(--u-primary) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-weight: 700;
}
.tg-sticky-cta a:hover { background: var(--u-primary-2) !important; color: #fff !important; }

/* WhatsApp FAB */
a[aria-label="Chat with TravelGrid on WhatsApp"] {
  box-shadow: 0 12px 30px -10px rgba(37, 211, 102, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------- FAB / back-to-top clear the sticky CTA (pages that have it) ---------- */
body:has(.tg-sticky-cta) a[aria-label="Chat with TravelGrid on WhatsApp"],
body:has(.tg-sticky-cta) #tg-back-top {
  bottom: 88px !important;
}

/* ---------- Section rhythm ---------- */
.section { border-bottom: 1px solid var(--u-hair); }
.bg-light .section:last-child, .section.bg-light { border-bottom: 1px solid var(--u-hair); }

/* ---------- Reveal-on-scroll (driven by tg-ultra.js) ---------- */
.tg-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--tg-delay, 0ms);
}
.tg-reveal.is-inview { opacity: 1; transform: none; }

/* Hero entrance */
.tg-fade-up {
  animation: tg-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tg-fade-up-1 { animation-delay: 90ms; }
.tg-fade-up-2 { animation-delay: 180ms; }
.tg-fade-up-3 { animation-delay: 260ms; }
.tg-fade-up-4 { animation-delay: 340ms; }

@keyframes tg-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Reduced motion ---------- */
@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;
  }
  .tg-reveal { opacity: 1; transform: none; }
  .tg-fade-up { animation: none; }
  .tg-logo-track { animation: none; }
}

/* ---------- Responsive touches ---------- */
@media (max-width: 992px) {
  .tg-proof-row { gap: 0; }
}

@media (max-width: 768px) {
  .ui-hero .heading { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .ui-hero .paragraph { font-size: 1rem; }
  .tg-hide-mobile { display: none !important; }
  .tg-browser { margin-top: 2rem; }
}

.hero-light .tg-gradient-text { color: var(--u-primary); }

/* ===== Lead capture + consent modules (see tg-forms.js / tg-consent.js) ===== */
/* TravelGrid shared module styles.
   Added for the lead-capture / measurement work. Uses only the tokens already
   defined in tg-ultra.css (:root) so it cannot drift from the site palette.
   Field styling for .tg-demo-form is inherited from tg-ultra.css and is not
   duplicated here. */

/* ---------- form status (polite live region) ---------- */
.tg-form-status {
  margin: 0.75rem 0 0;
  min-height: 1.2em;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--u-ink-2);
}
.tg-form-status:empty { margin: 0; min-height: 0; }

/* .is-success and .is-error are defined earlier in this file; only the
   empty-state spacing is added here so the colours are not duplicated. */

/* ---------- direct-channel fallback ---------- */
/* Hidden until the form needs it: no Formspree id configured, or a rejected or
   failed POST. The block is inert markup if JS never runs. */
.tg-form-fallback {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--u-hair);
}
.tg-form-fallback.is-visible { display: block; }
.tg-form-fallback p { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--u-ink-3); }
.tg-form-fallback ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tg-form-fallback a { color: var(--u-primary-2); font-weight: 600; text-decoration: none; }
.tg-form-fallback a:hover { color: var(--u-ink); text-decoration: underline; }

/* ---------- cookie settings control ---------- */
.tg-cookie-settings { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--u-ink-4); }
.tg-cookie-settings a { color: var(--u-ink-3); text-decoration: underline; }
.tg-cookie-settings a:hover { color: var(--u-ink); }

/* ---------- consent panel ---------- */
.tg-consent {
  position: fixed;
  z-index: 100000;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 34rem;
  margin-inline: auto;
  background: var(--u-card-2);
  border: 1px solid var(--u-hair-2);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow-card);
  color: var(--u-ink);
  font-family: var(--u-font-head);
}
.tg-consent-body { padding: 1.25rem; }
.tg-consent-msg { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.5; color: var(--u-ink-2); }

.tg-consent-cats { margin: 0 0 1.1rem; padding: 0; list-style: none; }
.tg-consent-cat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--u-hair);
}
.tg-consent-cat input {
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 0.3rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--u-primary);
}
.tg-consent-cat label { font-size: 0.88rem; font-weight: 700; color: var(--u-ink); cursor: pointer; }
.tg-consent-cat:has(input:disabled) label { color: var(--u-ink-3); cursor: default; }

.tg-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.tg-consent-actions .btn { border-radius: 999px; padding: 0.55rem 1.05rem; font-size: 0.88rem; cursor: pointer; }
.tg-consent-policy { margin-left: auto; font-size: 0.83rem; color: var(--u-ink-3); text-decoration: underline; }
.tg-consent-policy:hover { color: var(--u-ink); }

@media (max-width: 575.98px) {
  .tg-consent { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
  .tg-consent-policy { margin-left: 0; }
  .tg-form-fallback ul { flex-direction: column; gap: 0.4rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .tg-consent { animation: tg-consent-in 0.18s ease-out; }
}
@keyframes tg-consent-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}