/* ============================================================
   TravelGrid — Theme v3: mysa.io inspired (tg-modern.css)
   Loads AFTER applify.min.css and tg-redesign.css.

   Inspired by mysa.io:
     - Font: Inter (300–700) everywhere
     - Untitled-UI gray text palette: #101828 / #475467 / #98a2b3
     - Warm off-white surfaces: #ffffff / #f5f5f4, border #e7e5e4
     - White cards, 16px radius, 1px warm border, soft shadow
     - Brand: deep teal CTA #007466, bright teal #00C2AC,
       dark teal band #032A25
     - Visible focus states, reduced-motion support, 4.5:1 contrast
   ============================================================ */

:root {
  --m-bg: #ffffff;
  --m-bg-soft: #f5f5f4;
  --m-bg-lav: #fcfcfd;
  --m-ink: #101828;
  --m-ink-2: #344054;
  --m-ink-3: #475467;
  --m-ink-4: #98a2b3;
  --m-border: #e7e5e4;
  --m-border-soft: #f0efed;
  --m-border-strong: #d0d5dd;
  --m-primary: #007466;
  --m-primary-deep: #00645a;
  --m-primary-deeper: #004037;
  --m-primary-soft: #e6f5f2;
  --m-primary-softer: #f4fbf9;
  --m-accent: #00c2ac;
  --m-track: #032a25;
  --m-orange: #ff5d17;
  --m-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
  --m-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 28px rgba(16, 24, 40, 0.08);
  --m-shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.06), 0 28px 56px rgba(16, 24, 40, 0.1);
  --m-font-head: "Space Grotesk", "Inter", "Open Sans", sans-serif;
  --m-font-body: "DM Sans", "Inter", "Open Sans", "Source Sans Pro", sans-serif;
  --m-radius: 16px;
  --m-radius-sm: 10px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--m-font-body);
  background: var(--m-bg);
  color: var(--m-ink-2);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.01em;
  -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(--m-font-head);
  color: var(--m-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.heading,
h1, h2, h3 {
  text-wrap: balance;
}

a { color: var(--m-primary); }
a:hover, a:focus { color: var(--m-primary-deep); }

::selection { background: var(--m-primary-soft); color: var(--m-primary-deeper); }

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

img { max-width: 100%; }

img[loading="lazy"] {
  content-visibility: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- Interaction quality ---------- */
.btn,
a[role="button"],
details summary,
.ui-mobile-nav-toggle,
.ui-video-toggle { cursor: pointer; }

:focus-visible {
  outline: 3px solid rgba(0, 116, 102, 0.5);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Navbar ---------- */
.navbar-fixed-top,
.navbar.navbar-fixed-top {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--m-border-soft);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02), 0 8px 24px rgba(16, 24, 40, 0.04);
}

.navbar .nav > li > a,
.navbar .nav.navbar-nav > li > a {
  font-family: var(--m-font-head);
  color: var(--m-ink-2) !important;
  font-family: var(--m-font-body);
  font-weight: 500;
  font-size: 0.9rem;
}

.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(--m-primary) !important;
}

@media (min-width: 992px) {
  .navbar .nav > li.active > a::after {
    content: "";
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--m-primary);
    margin-top: 2px;
  }
}

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

.uk-close,
.ui-mobile-nav-toggle::before,
.ui-mobile-nav-toggle::after {
  background: var(--m-ink-2);
}

/* Collapsible mobile nav */
.ui-collapsible-nav,
.ui-collapsible-nav .navbar-nav {
  background: #fff !important;
}
.ui-collapsible-nav .toggle.current-page,
.ui-collapsible-nav .toggle {
  color: var(--m-ink-2) !important;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--m-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  border-radius: var(--m-radius-sm);
  border: 1px solid transparent;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  box-shadow: none;
}

.btn:active { transform: translateY(0); }

/* Primary CTA — mysa deep teal */
.ui-gradient-green.btn,
.btn.ui-gradient-green,
.ui-gradient-green {
  background: var(--m-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 116, 102, 0.25);
}

.ui-gradient-green.btn:hover,
.btn.ui-gradient-green:hover,
.ui-gradient-green:hover,
.ui-gradient-green:focus-visible {
  background: var(--m-primary-deeper) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 116, 102, 0.32);
}

/* Secondary CTA — white, warm gray border */
.ui-gradient-blue.btn,
.btn.ui-gradient-blue,
.ui-gradient-blue {
  background: #fff !important;
  color: var(--m-ink-2) !important;
  border-color: var(--m-border-strong) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.ui-gradient-blue.btn:hover,
.btn.ui-gradient-blue:hover,
.ui-gradient-blue:hover {
  background: var(--m-primary-softer) !important;
  color: var(--m-primary-deeper) !important;
  border-color: var(--m-primary) !important;
  transform: translateY(-1px);
}

/* Aliases -> teal accents */
.ui-gradient-purple.btn,
.btn.ui-gradient-purple,
.ui-gradient-purple.btn.btn-circle {
  background: var(--m-primary) !important;
}

.ui-gradient-peach.btn,
.btn.ui-gradient-peach {
  background: var(--m-primary) !important;
  color: #fff !important;
}

/* Social circles */
.btn-circle.ui-gradient-blue,
.btn-circle.ui-gradient-green,
.btn-circle.ui-gradient-purple {
  background: var(--m-primary-soft) !important;
  color: var(--m-primary) !important;
  border: 1px solid var(--m-border);
  box-shadow: none;
}
.btn-circle.ui-gradient-blue:hover,
.btn-circle.ui-gradient-green:hover,
.btn-circle.ui-gradient-purple:hover {
  background: var(--m-primary) !important;
  color: #fff !important;
}

/* ---------- Hero ---------- */
.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-image:
    radial-gradient(rgba(0, 116, 102, 0.05) 1px, transparent 1.1px),
    radial-gradient(1100px 560px at 88% -12%, #e6f5f2 0%, rgba(230, 245, 242, 0) 55%),
    radial-gradient(900px 520px at -8% 112%, #f0fdfa 0%, rgba(240, 253, 250, 0) 50%) !important;
  background-size: 26px 26px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

.page-hero.ui-gradient-purple {
  background-image:
    radial-gradient(rgba(0, 116, 102, 0.06) 1px, transparent 1.1px),
    radial-gradient(760px 360px at 92% -20%, #e6f5f2 0%, rgba(230, 245, 242, 0) 55%) !important;
  background-size: 26px 26px, auto;
  background-repeat: repeat, no-repeat;
}

.ui-hero .heading,
.ui-hero-slider .heading {
  color: var(--m-ink) !important;
  font-family: var(--m-font-head);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ui-hero .paragraph,
.ui-hero-slider .paragraph {
  color: var(--m-ink-3) !important;
  font-size: 1.125rem;
}

.ui-hero .paragraph a,
.ui-hero-slider .paragraph a { color: var(--m-primary); }

.tg-gradient-text {
  background: linear-gradient(120deg, var(--m-primary) 10%, var(--m-accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hero chips — mint */
.tg-chip.tg-chip-orange,
.tg-chip.tg-chip-purple {
  background: var(--m-primary-soft);
  color: var(--m-primary-deeper);
  border: 1px solid #bfe4dd;
  font-weight: 600;
  border-radius: 999px;
}

/* Hero stats */
.tg-hero-stat .tg-hero-stat-num {
  color: var(--m-primary);
  font-family: var(--m-font-head);
  font-weight: 700;
}

.tg-hero-stat .tg-hero-stat-lbl {
  color: var(--m-ink-4);
}

/* Hero product screenshot — framed and lifted */
.ui-hero .sp-slide img.responsive-on-sm {
  border-radius: 20px;
  border: 1px solid var(--m-border);
  box-shadow: 0 28px 64px -24px rgba(16, 24, 40, 0.3), 0 6px 16px rgba(16, 24, 40, 0.06);
}

.ui-hero .sp-arrow,
.ui-hero-slider .sp-arrow {
  min-width: 44px;
  min-height: 44px;
}

/* Slider arrows + dots */
.ui-hero .sp-arrow,
.ui-hero-slider .sp-arrow {
  background: #fff !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: var(--m-shadow-md);
}
.ui-hero .sp-arrow::before,
.ui-hero-slider .sp-arrow::before {
  border-color: var(--m-ink) !important;
}
.ui-hero .sp-previous-arrow::after,
.ui-hero .sp-next-arrow::after,
.ui-hero-slider .sp-previous-arrow::after,
.ui-hero-slider .sp-next-arrow::after {
  border-color: var(--m-ink) !important;
}
.ui-hero .slider-pro .sp-dot, .ui-hero-slider .slider-pro .sp-dot {
  background: var(--m-border-strong) !important;
}
.ui-hero .slider-pro .sp-dot.sp-selected-dot,
.ui-hero-slider .slider-pro .sp-dot.sp-selected-dot {
  background: var(--m-primary) !important;
}

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

.section-heading .heading {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--m-ink);
}

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

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

/* Eyebrow labels above headings */
.tg-eyebrow {
  display: inline-block;
  font-family: var(--m-font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m-primary-deeper);
  background: var(--m-primary-soft);
  border: 1px solid #bfe4dd;
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  margin-bottom: 1rem;
}

/* ---------- Site proof strip ---------- */
.tg-proof-strip {
  background: var(--m-primary-softer) !important;
  border-top: 1px solid var(--m-border-soft);
  border-bottom: 1px solid var(--m-border-soft);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.tg-proof {
  background: #fff !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-sm);
}

.tg-proof h3 {
  color: var(--m-primary) !important;
  font-family: var(--m-font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tg-proof p {
  color: var(--m-ink-3) !important;
}

/* ---------- Cards: mysa-style white cards ---------- */
.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 {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: var(--m-shadow-sm) !important;
  border-radius: var(--m-radius);
}

.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);
  box-shadow: var(--m-shadow-md) !important;
  border-color: #bfe4dd !important;
}

/* Teal accent line on key cards */
.tg-module-card::before,
.tg-feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: var(--m-radius) var(--m-radius) 0 0;
  background: linear-gradient(90deg, var(--m-primary), var(--m-accent));
  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(--m-ink) !important; }

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

.tg-module-card a {
  display: inline-block;
  margin-top: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--m-primary);
  border-bottom: 1px solid transparent;
}
.tg-module-card a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Icons */
.tg-module-icon {
  background: var(--m-primary-soft) !important;
  color: var(--m-primary) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 12px;
}

/* ---------- Product module overview ---------- */
.tg-module-overview {
  margin: 2.5rem 0 1rem;
}

.tg-module-overview-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.4rem;
}

.tg-module-overview-heading h2 {
  margin: 0.55rem 0 0;
  color: var(--m-primary-deeper);
}

.tg-module-overview-heading p {
  max-width: 38rem;
  margin: 0;
  color: var(--m-ink-3);
}

.tg-module-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.tg-module-overview-grid .tg-module-card {
  min-height: 208px;
  padding: 1.2rem;
}

.tg-module-overview-grid .tg-module-card h3 {
  margin: 0 0 0.45rem;
  color: var(--m-ink);
  font-size: 1rem;
}

.tg-module-overview-grid .tg-module-card h3,
.tg-module-card h4,
.tg-feature-card h4 {
  font-family: var(--m-font-head);
  letter-spacing: -0.025em;
}

.tg-module-overview-grid .tg-module-card p {
  margin: 0;
  line-height: 1.5;
  font-size: 0.9rem;
}

@media (max-width: 1100px) {
  .tg-module-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tg-module-overview-heading {
    display: block;
  }

  .tg-module-overview-heading p {
    margin-top: 0.8rem;
  }

  .tg-module-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .tg-module-overview-grid {
    grid-template-columns: 1fr;
  }

  .tg-module-overview-grid .tg-module-card {
    min-height: 0;
  }
}

/* ---------- Restrained glass surfaces ---------- */
:root {
  --m-glass-bg: rgba(255, 255, 255, 0.72);
  --m-glass-bg-strong: rgba(255, 255, 255, 0.86);
  --m-glass-border: rgba(255, 255, 255, 0.78);
  --m-glass-blur: 18px;
}

body {
  background:
    radial-gradient(900px 520px at 92% 4%, rgba(0, 194, 172, 0.1), transparent 62%),
    radial-gradient(760px 480px at 4% 34%, rgba(91, 75, 219, 0.08), transparent 62%),
    var(--m-bg);
}

.ui-hero.ui-gradient-purple,
.ui-hero-slider.ui-gradient-purple,
.page-hero.ui-gradient-purple {
  position: relative;
  overflow: hidden;
}

.ui-hero.ui-gradient-purple::before,
.ui-hero-slider.ui-gradient-purple::before,
.page-hero.ui-gradient-purple::before {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  right: 8%;
  top: 12%;
  border-radius: 50%;
  background: rgba(0, 194, 172, 0.12);
  filter: blur(8px);
  pointer-events: none;
}

.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-global-map-card,
.ui-card,
.form-card {
  background: var(--m-glass-bg) !important;
  border: 1px solid var(--m-glass-border) !important;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 18px 40px rgba(49, 38, 128, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: saturate(150%) blur(var(--m-glass-blur));
  backdrop-filter: saturate(150%) blur(var(--m-glass-blur));
}

.tg-feature-card::after,
.tg-module-card::after,
.tg-blog-card::after,
.tg-capability-card::after,
.form-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 42%);
  pointer-events: none;
}

.tg-feature-card,
.tg-module-card,
.tg-blog-card,
.tg-capability-card,
.form-card {
  position: relative;
  isolation: isolate;
}

.tg-feature-card > *,
.tg-module-card > *,
.tg-blog-card > *,
.tg-capability-card > *,
.form-card > * {
  position: relative;
  z-index: 1;
}

.ui-hero .sp-slide img.responsive-on-sm,
.tg-cta-band {
  border: 1px solid rgba(255, 255, 255, 0.38);
}

@media (max-width: 767px) {
  .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-global-map-card,
  .ui-card,
  .form-card {
    -webkit-backdrop-filter: saturate(130%) blur(12px);
    backdrop-filter: saturate(130%) blur(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-hero.ui-gradient-purple::before,
  .ui-hero-slider.ui-gradient-purple::before,
  .page-hero.ui-gradient-purple::before {
    filter: none;
  }
}

/* ---------- Warm modern background system ---------- */
:root {
  --m-bg: #fafaf9;
  --m-bg-soft: #f3f3f0;
  --m-bg-lav: #f8f7ff;
  --m-border: #e8e6e1;
  --m-border-soft: #efeee9;
}

body {
  background:
    radial-gradient(900px 520px at 92% -6%, rgba(139, 92, 246, 0.09), transparent 62%),
    radial-gradient(760px 480px at 0% 42%, rgba(91, 75, 219, 0.055), transparent 62%),
    linear-gradient(180deg, #fbfbfa 0%, #f7f7f5 54%, #fafaf9 100%);
}

.tg-ai-section .tg-ai-cap-grid .tg-ai-cap-heading {
  color: #fff !important;
}

.bg-light,
#how-it-works,
#app,
#roles {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(247, 246, 242, 0.86)),
    var(--m-bg-soft) !important;
}

.ui-hero.ui-gradient-purple,
.ui-hero-slider.ui-gradient-purple,
.page-hero.ui-gradient-purple,
.hero-lg.ui-gradient-purple {
  background-color: #f7f6ff !important;
}

.tg-proof-strip,
.tg-trust-section,
.tg-global-section {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(246, 245, 252, 0.78)),
    var(--m-bg-lav) !important;
}

.tg-demo-form {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: saturate(145%) blur(16px);
  backdrop-filter: saturate(145%) blur(16px);
}

.tg-feature-icon {
  background: var(--m-primary-soft) !important;
  color: var(--m-primary) !important;
}
.tg-feature-icon-accent {
  background: #fff1ea !important;
  color: #c2410c !important;
}

.tg-capability-stat {
  background: var(--m-primary-soft);
  color: var(--m-ink-2);
}
.tg-capability-stat span { color: var(--m-primary); }

/* ---------- Sector cards ---------- */
.tg-sector-card { box-shadow: var(--m-shadow-sm) !important; }
.tg-sector-card h4 span {
  display: inline-block;
  color: var(--m-primary-deeper);
  background: var(--m-primary-soft);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.82rem;
}
.tg-sector-logo { background: #fff !important; border: 1px solid var(--m-border-soft) !important; }

/* ---------- Global map / footprint ---------- */
.tg-global-footprint {
  background: var(--m-bg-soft) !important;
  border-top: 1px solid var(--m-border-soft);
  border-bottom: 1px solid var(--m-border-soft);
}

/* ---------- Module band ---------- */
.tg-module-band {
  background: #fff !important;
  border-bottom: 1px solid var(--m-border-soft);
}

/* ---------- Pills ---------- */
.tg-pill,
.tg-location-pill {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--m-border-strong) !important;
  color: var(--m-ink-2) !important;
  box-shadow: none !important;
}

.tg-pill:hover { border-color: var(--m-primary); color: var(--m-primary) !important; }

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

.tg-journey-num {
  background: var(--m-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 116, 102, 0.3) !important;
}
.tg-journey-num-yellow { background: var(--m-orange) !important; box-shadow: 0 4px 12px rgba(255, 93, 23, 0.3) !important; }
.tg-journey-num-blue { background: #0f766e !important; box-shadow: 0 4px 12px rgba(15, 118, 110, 0.32) !important; }
.tg-journey-num-green { background: var(--m-primary-deeper) !important; box-shadow: 0 4px 12px rgba(0, 64, 55, 0.32) !important; }
.tg-journey-num-purple { background: var(--m-accent) !important; box-shadow: 0 4px 12px rgba(0, 194, 172, 0.32) !important; }

.tg-journey-icon {
  border-radius: 12px;
  font-size: 1.35rem;
  background: var(--m-primary-soft) !important;
  color: var(--m-primary);
}
.tg-journey-icon-orange { background: #fff1ea !important; color: #c2410c; }
.tg-journey-icon-yellow { background: var(--m-primary-soft) !important; color: var(--m-primary); }
.tg-journey-icon-blue { background: #e0f2f1 !important; color: #0f766e; }
.tg-journey-icon-green { background: var(--m-primary-softer) !important; color: var(--m-primary-deeper); }
.tg-journey-icon-purple { background: #ccfbf1 !important; color: #0d9488; }

/* ---------- AI section (dark teal band) ---------- */
.tg-ai-section {
  background:
    radial-gradient(1000px 520px at 85% -10%, rgba(0, 194, 172, 0.2), transparent 60%),
    radial-gradient(760px 500px at -5% 110%, rgba(0, 116, 102, 0.3), transparent 55%),
    var(--m-track) !important;
}

.tg-ai-section::before { background: none; }

.tg-ai-section .section-heading .heading { color: #fff; }
.tg-ai-section .section-heading .paragraph { color: #a9ccc7; }
.tg-ai-copy p, .tg-ai-copy .tg-lead { color: #d7e8e4; }
.tg-ai-copy .tg-lead strong { color: #fff; }
.tg-ai-examples li { color: #d7e8e4; }

.tg-ai-section {
  background:
    radial-gradient(620px 420px at 78% 18%, rgba(139, 92, 246, 0.44), transparent 68%),
    radial-gradient(520px 420px at 8% 88%, rgba(0, 194, 172, 0.26), transparent 70%),
    linear-gradient(135deg, #17133d 0%, #24195f 48%, #30208f 100%) !important;
  border-top: 1px solid rgba(139, 92, 246, 0.32);
  border-bottom: 1px solid rgba(139, 92, 246, 0.32);
}

.tg-ai-section .section-heading {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.tg-ai-section .section-heading .heading {
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.045em;
}

.tg-ai-eyebrow {
  color: #ede9fe !important;
  background: rgba(139, 92, 246, 0.22) !important;
  border-color: rgba(196, 181, 253, 0.38) !important;
}

.tg-ai-copy .tg-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}

.tg-ai-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
  color: #20145f !important;
  background: #fff !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 12px 28px rgba(8, 5, 35, 0.24);
}

.tg-ai-cta:hover,
.tg-ai-cta:focus {
  color: #fff !important;
  background: var(--m-accent) !important;
  border-color: var(--m-accent) !important;
}

.tg-ai-chat {
  border-color: rgba(196, 181, 253, 0.48);
  box-shadow:
    0 28px 70px rgba(8, 5, 35, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.tg-ai-cap-grid {
  margin-top: 2.25rem;
}

.tg-ai-cap-heading {
  color: #fff !important;
  font-size: 1.15rem;
}

.tg-ai-cap-card {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.tg-ai-cap-card h5 {
  font-family: var(--m-font-head);
  color: var(--m-primary-deeper) !important;
}

.tg-ai-cap-card p {
  color: var(--m-ink-3) !important;
}

.tg-ai-cap-note {
  background: rgba(10, 7, 48, 0.32) !important;
  border-color: rgba(196, 181, 253, 0.3) !important;
}

/* White capability cards on the dark band */
.tg-ai-cap-grid .tg-ai-cap-heading {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--m-ink) !important;
}

.tg-ai-cap-col h4 { margin: 0 0 0.7rem; font-size: 1.1rem; }

.tg-ai-cap-list li { color: var(--m-ink-2); }
.tg-ai-cap-list li::before { background: var(--m-primary) !important; }

.tg-ai-cap-note {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #d7e8e4 !important;
}

/* ---------- Roles note ---------- */
.tg-role-note {
  background: #fff;
  border: 1px solid var(--m-border);
  border-left: 4px solid var(--m-primary);
}
.tg-role-note p { color: var(--m-ink-3); }

/* ---------- Trust strip ---------- */
.tg-trust-strip {
  background: linear-gradient(135deg, #f4fbf9 0%, #e6f5f2 45%, #ccfbf1 100%) !important;
  border: 1px solid var(--m-border);
  box-shadow: var(--m-shadow-md) !important;
  border-radius: 20px;
}

.tg-trust-item > .icon { color: var(--m-primary) !important; }
.tg-trust-item h5 { color: var(--m-ink) !important; }
.tg-trust-item p { color: var(--m-ink-3) !important; }

/* ---------- Inline CTA band (dark teal) ---------- */
.tg-cta-band {
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(0, 194, 172, 0.28), transparent 60%),
    linear-gradient(135deg, #032a25, #0b4740) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px;
  box-shadow: var(--m-shadow-lg) !important;
}

.tg-cta-band h3 { color: #fff; }
.tg-cta-band p { color: #d7e8e4; }

/* ---------- Prose / content ---------- */
.tg-prose h2 { color: var(--m-ink); }
.tg-prose h3 { color: var(--m-ink); }
.tg-prose p, .tg-prose li, .tg-policy-body p, .tg-policy-body li { color: var(--m-ink-2); }
.tg-prose .tg-lead { color: var(--m-ink); font-weight: 500; }
.tg-prose a { text-decoration-color: rgba(0, 116, 102, 0.35); text-underline-offset: 2px; }
.tg-prose table { color: var(--m-ink-2); }

.tg-note { border-left: 3px solid var(--m-primary); background: var(--m-primary-softer); }
.tg-note .tg-label { color: var(--m-primary-deeper); }

/* ---------- Tables ---------- */
.tg-prose th {
  background: var(--m-primary-soft);
  color: var(--m-ink);
  font-family: var(--m-font-head);
  font-weight: 600;
}

.tg-prose td { border-bottom: 1px solid var(--m-border-soft); }

/* ---------- FAQ ---------- */
.tg-faq details {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  background: #fff !important;
  box-shadow: none !important;
}

.tg-faq summary {
  font-family: var(--m-font-body);
  font-weight: 600;
  color: var(--m-ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tg-faq summary::-webkit-details-marker { display: none; }

.tg-faq summary::after {
  content: "+";
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--m-primary);
  transition: transform 150ms ease;
}

.tg-faq details[open] summary::after { transform: rotate(45deg); }

.tg-faq p { color: var(--m-ink-2); }

/* ---------- Page hero breadcrumb ---------- */
.tg-breadcrumb {
  color: var(--m-ink-4);
  font-weight: 500;
}
.tg-breadcrumb a { color: var(--m-primary) !important; text-decoration: none; font-weight: 600; }
.tg-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Testimonials ---------- */
.ui-testimonials .ui-card {
  background: #fff !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-sm) !important;
}

.ui-testimonials .ui-card p {
  color: var(--m-ink-2);
  font-size: 0.98rem;
}

.ui-testimonials .user h6 { color: var(--m-ink) !important; }
.ui-testimonials .user .sub-heading { color: var(--m-ink-4) !important; }

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

/* ---------- App screens ---------- */
.ui-app-screens .ui-card {
  background: #fff !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 20px;
  box-shadow: var(--m-shadow-md) !important;
}

/* ---------- Contact form ---------- */
#contact_form .card-body {
  background: #fff;
}

#contact_form .form-control {
  border: 1px solid var(--m-border-strong);
  border-radius: var(--m-radius-sm);
}

#contact_form .form-control:focus {
  border-color: var(--m-primary);
  box-shadow: 0 0 0 3px rgba(0, 116, 102, 0.14);
  outline: none;
}

/* ---------- Footer (dark teal) ---------- */
.ui-footer .footer-bg,
.ui-footer.footer-bg,
.footer-bg.ui-gradient-purple {
  background:
    radial-gradient(800px 420px at 85% -10%, rgba(0, 194, 172, 0.18), transparent 60%),
    #032a25 !important;
}

.ui-footer .section-heading .heading,
.ui-footer .download-section .heading { color: #fff; }

.download-section .btn-download.ui-gradient-blue.btn,
.download-section .btn-download.ui-gradient-green.btn {
  background: var(--m-primary) !important;
  color: #fff !important;
}
.download-section .btn-download.ui-gradient-blue.btn:hover,
.download-section .btn-download.ui-gradient-green.btn:hover {
  background: var(--m-primary-deeper) !important;
}

/* Footer link columns */
.tg-footer-col h4 { color: #f0f7f5; }
.tg-footer-col a { color: #9fc4bd; }
.tg-footer-col a:hover { color: #fff; }

/* ---------- Sticky CTA ---------- */
.tg-sticky-cta {
  background: rgba(3, 42, 37, 0.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px;
  box-shadow: var(--m-shadow-lg) !important;
}

.tg-sticky-cta p { color: #d7e8e4 !important; }
.tg-sticky-cta a { background: var(--m-accent) !important; color: #032a25 !important; font-weight: 700; }
.tg-sticky-cta a:hover { background: #fff !important; color: var(--m-track) !important; }

/* ---------- Contact card header (on dark footer) ---------- */
.form-card .card-header.ui-gradient-peach {
  background: #fff !important;
  border-bottom: 1px solid var(--m-border-soft);
}

.form-card .card-header.ui-gradient-peach .heading { color: var(--m-ink) !important; }
.form-card .card-header.ui-gradient-peach .paragraph { color: var(--m-ink-3) !important; }

/* ---------- Video section ---------- */
.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(3, 42, 37, 0.6), rgba(3, 42, 37, 0.78)) !important;
}

.ui-video-toggle .icon,
.ui-video-toggle .fa {
  background: #fff !important;
  color: var(--m-primary) !important;
}

/* ---------- Misc template components ---------- */
.ui-icon-blocks .ui-icon-block .icon,
.ui-icon-blocks h5 { color: var(--m-ink); }

.form-control,
.input,
select,
textarea {
  border-radius: var(--m-radius-sm);
}

/* Alternating white / soft section rhythm */
#how-it-works,
#app,
#roles {
  background: var(--m-bg-soft) !important;
}

/* ---------- Responsive refinements ---------- */
@media (max-width: 768px) {
  .ui-hero .heading { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .ui-hero .paragraph { font-size: 1rem; }
  .tg-hide-mobile { display: none !important; }
}

/* ---------- 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;
  }
}

/* ---------- Appy-inspired product theme ---------- */
:root {
  --m-primary: #5b4bdb;
  --m-primary-deep: #4938c5;
  --m-primary-deeper: #30208f;
  --m-primary-soft: #efedff;
  --m-primary-softer: #f8f7ff;
  --m-accent: #8b5cf6;
  --m-track: #17133d;
  --m-border: #e6e2f5;
  --m-border-soft: #f0eef9;
  --m-border-strong: #cfc8ed;
  --m-shadow-sm: 0 2px 8px rgba(49, 38, 128, 0.06), 0 10px 24px rgba(49, 38, 128, 0.05);
  --m-shadow-md: 0 4px 12px rgba(49, 38, 128, 0.08), 0 18px 38px rgba(49, 38, 128, 0.12);
  --m-shadow-lg: 0 8px 18px rgba(49, 38, 128, 0.1), 0 30px 64px rgba(49, 38, 128, 0.16);
  --m-radius: 20px;
  --m-radius-sm: 12px;
}

body {
  background:
    radial-gradient(circle at 100% 0, rgba(139, 92, 246, 0.045), transparent 26rem),
    var(--m-bg);
}

.navbar-fixed-top,
.navbar.navbar-fixed-top {
  box-shadow: 0 8px 30px rgba(49, 38, 128, 0.08);
}

.navbar .nav > li > a,
.navbar .nav.navbar-nav > li > a {
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

.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-image:
    radial-gradient(rgba(91, 75, 219, 0.08) 1px, transparent 1.1px),
    radial-gradient(900px 500px at 86% -18%, #ede9fe 0%, rgba(237, 233, 254, 0) 60%),
    radial-gradient(760px 440px at -8% 110%, #fce7f3 0%, rgba(252, 231, 243, 0) 55%) !important;
  background-size: 24px 24px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

.ui-hero .heading,
.ui-hero-slider .heading {
  letter-spacing: -0.045em;
}

.ui-hero .sp-slide img.responsive-on-sm {
  border-radius: 24px;
  box-shadow: 0 24px 60px -22px rgba(49, 38, 128, 0.38), 0 8px 18px rgba(49, 38, 128, 0.1);
}

.ui-gradient-green.btn,
.btn.ui-gradient-green,
.ui-gradient-green,
.tg-sticky-cta a {
  background: linear-gradient(135deg, var(--m-primary), var(--m-accent)) !important;
}

.ui-gradient-green.btn:hover,
.btn.ui-gradient-green:hover,
.ui-gradient-green:hover {
  background: linear-gradient(135deg, var(--m-primary-deep), var(--m-primary)) !important;
}

.ui-gradient-blue.btn,
.btn.ui-gradient-blue,
.ui-gradient-blue {
  border-color: var(--m-border-strong) !important;
  color: var(--m-primary-deeper) !important;
}

.section-heading .heading {
  letter-spacing: -0.04em;
}

.tg-eyebrow,
.tg-chip.tg-chip-orange,
.tg-chip.tg-chip-purple {
  color: var(--m-primary-deeper);
  background: var(--m-primary-soft);
  border-color: #d8d1ff;
}

.tg-eyebrow {
  font-family: var(--m-font-head);
  letter-spacing: 0.14em;
}

.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 {
  border-radius: var(--m-radius) !important;
}

.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 {
  border-color: #c9c0ff !important;
  box-shadow: var(--m-shadow-md) !important;
}

.tg-cta-band {
  background: linear-gradient(135deg, #3b2b9a, #7c3aed) !important;
  border-radius: 24px;
  box-shadow: var(--m-shadow-md);
}

.ui-footer .footer-bg,
.ui-footer.footer-bg,
.footer-bg.ui-gradient-purple {
  background:
    radial-gradient(780px 420px at 85% -10%, rgba(139, 92, 246, 0.3), transparent 60%),
    #17133d !important;
}

.tg-prose h2 {
  color: var(--m-primary-deeper);
}

.tg-prose h3,
.tg-faq summary {
  color: var(--m-ink);
}

.tg-prose a {
  text-underline-offset: 3px;
}

/* ---------- Demo form ---------- */
.tg-demo-form {
  padding: 1.5rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-sm);
}

.tg-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.tg-demo-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  color: var(--m-ink);
  font-size: 0.88rem;
  font-weight: 600;
}

.tg-demo-form input,
.tg-demo-form select,
.tg-demo-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  color: var(--m-ink);
  background: #fff;
  border: 1px solid var(--m-border-strong);
  border-radius: var(--m-radius-sm);
  font: inherit;
  font-weight: 400;
}

.tg-demo-form textarea {
  resize: vertical;
}

.tg-demo-form input:focus,
.tg-demo-form select:focus,
.tg-demo-form textarea:focus {
  border-color: var(--m-primary);
  outline: 3px solid rgba(91, 75, 219, 0.16);
  outline-offset: 1px;
}

.tg-form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.tg-form-actions .btn {
  min-height: 46px;
}

.tg-form-note,
.tg-form-status {
  margin: 0;
  color: var(--m-ink-3);
  font-size: 0.82rem;
}

.tg-form-status.is-error {
  color: #b42318;
}

.tg-form-status.is-success {
  color: var(--m-primary-deeper);
}

@media (max-width: 640px) {
  .tg-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tg-demo-form {
    padding: 1rem;
  }

  .tg-form-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Final surface pass: warm, modern mysa-inspired page canvas. */
body {
  background:
    radial-gradient(900px 520px at 92% -6%, rgba(139, 92, 246, 0.09), transparent 62%),
    radial-gradient(760px 480px at 0% 42%, rgba(91, 75, 219, 0.055), transparent 62%),
    linear-gradient(180deg, #fbfbfa 0%, #f7f7f5 54%, #fafaf9 100%);
}