/* ============================================================
   XPRESS MONEY — BRAND THEME
   Every colour below is sampled directly from the logo file.
   Retune the whole site from this block alone.
   Shared stylesheet for index + all inner pages.
   ============================================================ */
:root{
  /* Core brand */
  --xm-orange:      #FE7914;   /* "Xpress" wordmark + lightning bolt */
  --xm-orange-deep: #DD5F00;   /* pressed / hover */
  --xm-orange-soft: #FFF1E4;   /* tint wash */

  --xm-cyan:        #3DDCFA;   /* train body highlight */
  --xm-cyan-bright: #41E3FF;   /* motion streaks */
  --xm-cyan-deep:   #16B4E3;   /* "Money" wordmark, deep trail */
  --xm-cyan-soft:   #E8F9FE;   /* tint wash */

  /* Neutrals pulled toward the cyan so nothing reads grey-dead */
  --xm-ink:         #06283A;   /* headings + dark sections */
  --xm-ink-2:       #0B3A52;
  --xm-body:        #52707E;   /* paragraph text */
  --xm-line:        #DCEEF5;
  --xm-mist:        #F3FBFE;
  --xm-white:       #FFFFFF;

  /* Gradients */
  --grad-cyan:   linear-gradient(135deg, var(--xm-cyan-bright) 0%, var(--xm-cyan-deep) 100%);
  --grad-orange: linear-gradient(135deg, #FF9440 0%, var(--xm-orange) 55%, var(--xm-orange-deep) 100%);
  --grad-ink:    linear-gradient(150deg, #06283A 0%, #0C4462 60%, #0A3A52 100%);

  /* Type */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, sans-serif;

  --radius:   18px;
  --radius-l: 26px;
  --shadow-s: 0 4px 18px rgba(6,40,58,.06);
  --shadow-m: 0 14px 40px rgba(6,40,58,.09);
  --shadow-l: 0 26px 70px rgba(6,40,58,.14);
}

/* ---------- base ---------- */
*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--xm-body);
  background: var(--xm-white);
  line-height: 1.72;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  color: var(--xm-ink);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.18;
}
h2{ font-size: clamp(1.75rem, 3.1vw, 2.6rem); }
h3{ font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
h4{ font-size: clamp(1.18rem, 1.7vw, 1.5rem); }
p{ margin-bottom: 1rem; }
a{ text-decoration: none; transition: color .2s ease; }
:focus-visible{ outline: 3px solid var(--xm-orange); outline-offset: 3px; border-radius: 6px; }
section{ position: relative; }

.body-content{ font-size: .98rem; color: var(--xm-body); }
.text-brand{ color: var(--xm-orange); }
.text-cyan{ color: var(--xm-cyan-deep); }

/* ---------- SIGNATURE: motion streaks ----------
   Tapered cyan lines that echo the speed trails behind the train
   in the logo. Used as the hero field, section eyebrows and
   card hover sweeps. This is the one loud idea on the page. */
.streakfield{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.streakfield span{
  position:absolute; height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, var(--xm-cyan-bright), transparent);
  opacity:.5; transform: translateX(-30%);
  animation: rush 5.5s cubic-bezier(.45,0,.15,1) infinite;
}
.streakfield span:nth-child(1){ top:14%; left:-14%; width:34%; animation-delay:0s;   }
.streakfield span:nth-child(2){ top:27%; left:-24%; width:52%; animation-delay:.7s; opacity:.3; }
.streakfield span:nth-child(3){ top:46%; left:-10%; width:26%; animation-delay:1.5s; }
.streakfield span:nth-child(4){ top:63%; left:-30%; width:60%; animation-delay:.35s; opacity:.28; }
.streakfield span:nth-child(5){ top:78%; left:-16%; width:38%; animation-delay:2.1s; }
.streakfield span:nth-child(6){ top:89%; left:-20%; width:30%; animation-delay:1.1s; opacity:.35; }
.streakfield.warm span:nth-child(3),
.streakfield.warm span:nth-child(5){
  background: linear-gradient(90deg, transparent, var(--xm-orange), transparent);
}
@keyframes rush{
  0%{ transform: translateX(-40%) scaleX(.4); opacity:0; }
  18%{ opacity:.6; }
  70%{ opacity:.5; }
  100%{ transform: translateX(320%) scaleX(1.5); opacity:0; }
}

/* eyebrow: bolt + tapered rule */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--font-display); font-size:.7rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
  color: var(--xm-orange); margin-bottom:.85rem;
}
.eyebrow::after{
  content:""; width:56px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--xm-orange), transparent);
}
.eyebrow i{ font-size:.8rem; }
.eyebrow.on-dark{ color: var(--xm-cyan); }
.eyebrow.on-dark::after{ background: linear-gradient(90deg, var(--xm-cyan), transparent); }

/* ---------- buttons ---------- */
.btn{
  font-family: var(--font-display);
  font-weight:600; font-size:.92rem; letter-spacing:.005em;
  border-radius:100px; padding:.78rem 1.75rem; border:2px solid transparent;
  position:relative; overflow:hidden; transition:all .25s ease;
}
.btn:focus{ box-shadow:none; }
.btn.blue_btn,
.card-content .btn,
.bio .btn,
.cta-r .btn{
  background: var(--grad-orange); color:#fff;
  box-shadow: 0 10px 26px rgba(254,121,20,.32);
}
.btn.blue_btn::before,
.card-content .btn::before,
.bio .btn::before,
.cta-r .btn::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-22deg); transition: left .55s ease;
}
.btn.blue_btn:hover::before,
.card-content .btn:hover::before,
.bio .btn:hover::before,
.cta-r .btn:hover::before{ left:120%; }
.btn.blue_btn:hover,
.card-content .btn:hover,
.bio .btn:hover,
.cta-r .btn:hover{
  color:#fff; transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(254,121,20,.4);
}
.btn-light-2{
  background: transparent; color: var(--xm-ink);
  border-color: var(--xm-cyan-deep);
}
.btn-light-2:hover{
  background: var(--grad-cyan); color: var(--xm-ink);
  border-color: transparent; transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(22,180,227,.32);
}

/* ---------- header ---------- */
.header{ transition: background .3s ease, box-shadow .3s ease, padding .3s ease; }
.header .navbar-brand img{ height:46px; width:auto; }
.header .nav-link{
  font-family: var(--font-display); font-weight:500; font-size:.93rem;
  color: var(--xm-ink); padding:.5rem 1rem; position:relative;
}
.header .nav-link::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.25rem; height:2px;
  background: var(--grad-orange); border-radius:2px;
  transform: scaleX(0); transform-origin:left; transition: transform .28s ease;
}
.header .nav-link:hover{ color: var(--xm-orange); }
.header .nav-link:hover::after{ transform: scaleX(1); }
.header.stuck{
  position: fixed !important; background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); box-shadow: 0 6px 30px rgba(6,40,58,.09);
}
.header.stuck .header_bottom{ padding-top:.6rem !important; padding-bottom:.6rem !important; }
.navbar-toggler{ border:0; color: var(--xm-ink); font-size:1.4rem; padding:.25rem .5rem; }
.navbar-toggler:focus{ box-shadow:none; }
.topright .btn-light-2{ padding:.6rem 1.5rem; }

/* On inner pages the header sits on a solid brand bar (no hero behind it). */
.header.header-solid{
  position: relative; background: var(--grad-ink);
}
.header.header-solid .nav-link{ color: rgba(255,255,255,.9); }
.header.header-solid .nav-link:hover{ color: var(--xm-cyan); }
.header.header-solid .navbar-toggler{ color:#fff; }
.header.header-solid .btn-light-2{ color:#fff; border-color: var(--xm-cyan); }

/* ---------- hero ---------- */
.h_slider{
  min-height: 100vh; padding: 130px 0 70px;
  background:
    radial-gradient(1100px 620px at 82% 18%, rgba(61,220,250,.24), transparent 62%),
    radial-gradient(760px 500px at 6% 88%, rgba(254,121,20,.13), transparent 62%),
    var(--xm-mist);
}
.h_slider .carousel-inner{ width:100%; }
.hbanner1{ position:relative; z-index:2; }
.main-header-title{
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight:800; line-height:1.1; margin-bottom:1.15rem;
}
.main-header-title .accentword{
  background: var(--grad-orange);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.h_slider .body-content{ font-size:1.03rem; max-width:33rem; }
.top-interactive{ position:relative; }
.top-interactive .shot{ aspect-ratio: 1/1; max-width:440px; margin-inline:auto; }

.hero-strip{
  display:flex; flex-wrap:wrap; gap:0; margin-top:2.2rem;
  background:#fff; border:1px solid var(--xm-line); border-radius: var(--radius);
  box-shadow: var(--shadow-m); overflow:hidden; max-width:36rem;
}
.hero-strip div{ flex:1 1 0; min-width:120px; padding:1rem 1.15rem; }
.hero-strip div + div{ border-left:1px solid var(--xm-line); }
.hero-strip strong{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:1.4rem; color:var(--xm-ink); line-height:1.2;
}
.hero-strip span{ font-size:.78rem; letter-spacing:.04em; color:var(--xm-body); }

.carousel-indicators{ bottom:24px; z-index:5; margin-bottom:0; }
.carousel-indicators [data-bs-target]{
  width:26px; height:4px; border-radius:4px; border:0; opacity:.35;
  background: var(--xm-ink); transition: all .3s ease;
}
.carousel-indicators .active{ opacity:1; width:52px; background: var(--xm-orange); }

/* ---------- inner-page banner ----------
   Compact dark hero for Terms / Privacy / Refund / Join Us so every
   inner page opens with the same brand voice as the home hero. */
.page-hero{
  background: var(--grad-ink); color: rgba(255,255,255,.82);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.6rem, 6vw, 4rem);
  overflow:hidden;
}
.page-hero h1{
  color:#fff; font-size: clamp(2rem, 4vw, 3rem); font-weight:800; margin:0;
}
.page-hero p{ color: rgba(255,255,255,.78); max-width:42rem; margin:.9rem 0 0; }
.page-hero .breadcrumbs{
  font-family: var(--font-display); font-size:.82rem; font-weight:500;
  color: rgba(255,255,255,.65); margin-top:1.1rem;
}
.page-hero .breadcrumbs a{ color: var(--xm-cyan); }
.page-hero .breadcrumbs i{ font-size:.6rem; margin:0 .5rem; opacity:.6; }

/* ---------- shared image placeholder ----------
   Drop your real photo inside <figure class="shot"> and it sits on top.
   If the file is missing, this themed panel shows instead of a broken icon. */
.shot{
  position:relative; margin:0; border-radius: var(--radius-l); overflow:hidden;
  background: var(--grad-cyan);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 4/3; box-shadow: var(--shadow-m);
}
.shot::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.16) 0 2px, transparent 2px 26px),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.34), transparent 58%);
}
.shot > i{ position:relative; font-size:3.1rem; color:rgba(255,255,255,.94); }
.shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shot.warm{ background: var(--grad-orange); }

/* ---------- section headings ---------- */
.service-title h3,
.section-head h2{ margin-bottom:.7rem; }
.section-head p{ max-width:40rem; margin-inline:auto; }

/* ---------- services tabs ---------- */
.services_wrap{ background:#fff; padding-block: clamp(3.5rem, 7vw, 6rem); }
.services_wrap .nav-tabs{
  border:0; flex-direction:column; gap:.4rem;
  background: var(--xm-mist); padding:.75rem; border-radius: var(--radius-l);
  border:1px solid var(--xm-line);
}
.services_wrap .nav-tabs .nav-item{ width:100%; }
.services_wrap .nav-link{
  width:100%; text-align:left; border:0; border-radius:14px;
  font-family: var(--font-display); font-weight:600; font-size:.93rem;
  color: var(--xm-ink); padding:.8rem 1.1rem; position:relative;
  transition: all .25s ease;
}
.services_wrap .nav-link::before{
  content:""; position:absolute; left:0; top:22%; bottom:22%; width:3px;
  border-radius:3px; background: var(--xm-orange);
  transform: scaleY(0); transition: transform .25s ease;
}
.services_wrap .nav-link:hover{ background:#fff; color: var(--xm-cyan-deep); }
.services_wrap .nav-link.active{
  background: var(--xm-ink); color:#fff; box-shadow: var(--shadow-m);
}
.services_wrap .nav-link.active::before{ transform: scaleY(1); }
.card-content i{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:16px; margin-bottom:1rem;
  background: var(--xm-orange-soft); color: var(--xm-orange); font-size:1.4rem;
}
.card-content h6{
  font-family: var(--font-display); font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color: var(--xm-cyan-deep);
  margin-bottom:.55rem;
}
.card-content h4{ margin-bottom:.85rem; }
.card-content .btn{ margin-top:.4rem; }

/* ---------- dark: get started ---------- */
.one_app{
  background: var(--grad-ink); color: rgba(255,255,255,.82);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.one_app h2, .one_app h4{ color:#fff; }
.one_app .accordion{ --bs-accordion-bg:transparent; }
.one_app .accordion-item{
  background: rgba(255,255,255,.055); border:1px solid rgba(61,220,250,.2);
  border-radius: var(--radius) !important; margin-bottom:.85rem; overflow:hidden;
}
.one_app .accordion-button{
  background: transparent; color:#fff; box-shadow:none;
  font-family: var(--font-display); font-weight:600; font-size:1.03rem;
  padding:1.1rem 1.35rem; gap:.9rem;
}
.one_app .accordion-button:not(.collapsed){ color: var(--xm-cyan); background: rgba(61,220,250,.08); }
.one_app .accordion-button::after{
  filter: invert(1) sepia(1) saturate(6) hue-rotate(155deg); opacity:.85;
}
.one_app .accordion-body{ color: rgba(255,255,255,.75); padding:0 1.35rem 1.3rem 4.85rem; font-size:.95rem; }
/* 01 / 02 / 03 — this section IS an ordered flow, so the numbers carry meaning */
.stepno{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; font-size:.9rem;
  background: var(--grad-orange); color:#fff;
}
.men-pic .shot{ aspect-ratio: 3/4; max-width:340px; }

/* ---------- why xpress money ---------- */
.xm_advantage{ background: var(--xm-mist); padding-block: clamp(3.5rem, 7vw, 6rem); }
.mr_adv{
  background:#fff; border:1px solid var(--xm-line); border-radius: var(--radius-l);
  padding:2.1rem 1.5rem 1.8rem; flex:1 1 auto; min-width:0; position:relative; overflow:hidden;
  box-shadow: var(--shadow-s); transition: transform .3s ease, box-shadow .3s ease;
}
.mr_adv::after{
  content:""; position:absolute; top:0; left:-100%; width:100%; height:3px;
  background: linear-gradient(90deg, transparent, var(--xm-orange), var(--xm-cyan), transparent);
  transition: left .6s ease;
}
.mr_adv:hover{ transform: translateY(-8px); box-shadow: var(--shadow-l); }
.mr_adv:hover::after{ left:100%; }
.ic_left{
  width:64px; height:64px; margin:0 auto 1.15rem; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background: var(--xm-cyan-soft); color: var(--xm-cyan-deep); font-size:1.5rem;
}
.xm_advantage .col:nth-child(even) .ic_left{ background: var(--xm-orange-soft); color: var(--xm-orange); }
.mr_adv .detail{
  font-family: var(--font-display); font-weight:600; font-size:1.02rem;
  color: var(--xm-ink); line-height:1.4; margin-bottom:.5rem;
}
.mr_adv .sub{ font-size:.88rem; margin:0; }

/* ---------- services & bio ---------- */
.bio{ background:#fff; padding-block: clamp(3.5rem, 7vw, 6rem); }
.bio .biobox{
  background: var(--xm-mist); border:1px solid var(--xm-line);
  border-radius: var(--radius-l); padding: 2.6rem 1.5rem 1.4rem;
}
.bio .services{ padding-inline:.9rem; }
.bio .services i{
  display:inline-flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:50%; margin-bottom:1rem;
  background:#fff; color: var(--xm-cyan-deep); font-size:1.5rem;
  box-shadow: var(--shadow-s); transition: all .3s ease;
}
.bio .services:hover i{ background: var(--grad-orange); color:#fff; transform: translateY(-5px); }
.bio .services h5{ font-size:1.02rem; margin-bottom:.4rem; }
.bio .services p{ font-size:.88rem; }

/* ---------- compare ---------- */
.compare{ padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--xm-mist); }
.indrun{
  background:#fff; border:1px solid var(--xm-line); border-radius: var(--radius-l);
  padding: 2.3rem; height:100%; box-shadow: var(--shadow-s);
}
.indrun.win{
  background: var(--xm-ink); border-color: transparent; box-shadow: var(--shadow-l);
  position:relative; overflow:hidden;
}
.indrun.win h3, .indrun.win h6{ color:#fff; }
.indrun.win p{ color: rgba(255,255,255,.76); }
.indrun h3{ margin-bottom:.7rem; }
.indrun > p{ font-size:.95rem; }
.indrun ul li{ padding-left:2.2rem; position:relative; margin-top:1.4rem; }
.indrun ul li::before{
  content:"\f00d"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.1rem; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.7rem;
  background:#FFE9E4; color:#D6452B;
}
.indrun.win ul li::before{ content:"\f00c"; background: rgba(61,220,250,.16); color: var(--xm-cyan); }
.indrun h6{ font-family:var(--font-display); font-size:1rem; margin-bottom:.25rem; }
.indrun ul li p{ font-size:.9rem; margin:0; }

/* ---------- testimonials ---------- */
.testimonials{
  background: var(--grad-ink); padding-block: clamp(3.5rem, 7vw, 6rem);
}
.testimonials h2{ color:#fff; }
.testimonials .item{ padding:.65rem; }
.user-info{
  background: rgba(255,255,255,.06); border:1px solid rgba(61,220,250,.18);
  border-radius: var(--radius-l); padding: 2rem 1.7rem; height:100%;
  backdrop-filter: blur(6px);
}
.user-info .stars{ color: var(--xm-orange); font-size:.85rem; letter-spacing:.14em; margin-bottom:1rem; }
.user-info > p{ color: rgba(255,255,255,.85); font-size:.96rem; min-height:6.5rem; }
.user-meta{ display:flex; align-items:center; gap:.85rem; margin-top:1.2rem; }
.avatar{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  background: var(--grad-cyan); color: var(--xm-ink);
}
.user-meta h6{ color:#fff; margin:0; font-size:.95rem; }
.user-meta span{ display:block; font-size:.8rem; color: var(--xm-cyan); font-weight:400; letter-spacing:.02em; }
.owl-carousela .owl-nav{ margin-top:1.6rem; text-align:center; }
.owl-carousela .owl-nav button.owl-prev,
.owl-carousela .owl-nav button.owl-next{
  width:44px; height:44px; border-radius:50% !important; margin:0 .3rem !important;
  background: rgba(255,255,255,.1) !important; color:#fff !important; font-size:1.2rem !important;
  transition: all .25s ease;
}
.owl-carousela .owl-nav button:hover{ background: var(--xm-orange) !important; }
.owl-carousela .owl-dots{ display:none; }

/* ---------- legal / long-form content ----------
   Terms, Privacy and Refund pages share this readable column. */
.legal{ background:#fff; padding-block: clamp(3rem, 6vw, 5rem); }
.legal .legal-wrap{ max-width:52rem; margin-inline:auto; }
.legal .updated{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-display); font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color: var(--xm-cyan-deep);
  background: var(--xm-cyan-soft); border-radius:100px; padding:.4rem 1rem;
  margin-bottom:2rem;
}
.legal .lead-note{
  background: var(--xm-mist); border:1px solid var(--xm-line);
  border-left:4px solid var(--xm-orange); border-radius: var(--radius);
  padding:1.2rem 1.4rem; font-size:.95rem; margin-bottom:2.4rem;
}
.legal h2{ font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin:2.4rem 0 .9rem; }
.legal h2 .num{
  font-family: var(--font-display); font-weight:800; color: var(--xm-orange);
  margin-right:.5rem;
}
.legal h3{ font-size:1.15rem; margin:1.6rem 0 .7rem; }
.legal p, .legal li{ font-size:.97rem; color: var(--xm-body); }
.legal ul, .legal ol{ padding-left:1.3rem; margin-bottom:1.2rem; }
.legal ul li, .legal ol li{ margin-bottom:.5rem; }
.legal ul li::marker{ color: var(--xm-cyan-deep); }
.legal a{ color: var(--xm-cyan-deep); font-weight:500; }
.legal a:hover{ color: var(--xm-orange); }
.legal .contact-card{
  margin-top:2.6rem; background: var(--grad-ink); color:#fff;
  border-radius: var(--radius-l); padding:1.8rem 1.6rem;
}
.legal .contact-card h3{ color:#fff; margin-top:0; }
.legal .contact-card p{ color: rgba(255,255,255,.82); margin:0; }
.legal .contact-card a{ color: var(--xm-cyan); }

/* ---------- join us form ---------- */
.joinus{ background: var(--xm-mist); padding-block: clamp(3.5rem, 7vw, 6rem); }
.joinbox{
  background:#fff; border:1px solid var(--xm-line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-m); padding: clamp(1.6rem, 4vw, 2.8rem);
}
.joinbox .form-label{
  font-family: var(--font-display); font-weight:600; font-size:.85rem;
  color: var(--xm-ink); margin-bottom:.4rem;
}
.joinbox .form-control,
.joinbox .form-select{
  border:1.5px solid var(--xm-line); border-radius:12px;
  padding:.75rem 1rem; font-size:.95rem; color: var(--xm-ink);
  background: var(--xm-mist); transition: all .2s ease;
}
.joinbox .form-control:focus,
.joinbox .form-select:focus{
  border-color: var(--xm-cyan-deep); background:#fff;
  box-shadow: 0 0 0 4px rgba(22,180,227,.12);
}
.joinbox .form-control::placeholder{ color:#9DB4BF; }
.joinbox .btn{ width:100%; padding:.9rem 1.75rem; font-size:1rem; }
.join-aside{
  background: var(--grad-ink); color: rgba(255,255,255,.82);
  border-radius: var(--radius-l); padding: clamp(1.8rem, 4vw, 2.8rem); height:100%;
  position:relative; overflow:hidden;
}
.join-aside h3{ color:#fff; }
.join-aside .perk{ display:flex; gap:.9rem; margin-top:1.4rem; }
.join-aside .perk i{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--grad-orange); color:#fff; font-size:1.1rem;
}
.join-aside .perk h6{ color:#fff; margin:0 0 .2rem; font-size:1rem; }
.join-aside .perk p{ color: rgba(255,255,255,.72); font-size:.88rem; margin:0; }

/* ---------- CTA ---------- */
.cta_section{ padding-block: clamp(3rem, 6vw, 5rem); background:#fff; }
.cta_bx{
  background: var(--grad-orange); border-radius: 30px; overflow:hidden;
  padding: 2.8rem clamp(1.5rem, 4vw, 3.4rem);
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
  box-shadow: 0 24px 60px rgba(254,121,20,.3);
}
.cta_bx h3{ color:#fff; margin:0; max-width:24rem; position:relative; z-index:2; }
.cta-r{ position:relative; z-index:2; text-align:right; }
.cta-r h5{ color:#fff; font-family:var(--font-body); font-size:1rem; }
.cta-r .telnumber{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:.02em; }
.cta-r .btn{ background:#fff !important; color: var(--xm-orange) !important; box-shadow:0 10px 26px rgba(6,40,58,.18) !important; }
.cta-r .btn:hover{ color: var(--xm-orange-deep) !important; }

/* ---------- footer ---------- */
.footer{ background: var(--xm-ink); color: rgba(255,255,255,.72); }
.footer .footer-logo{ height:64px; width:auto; margin-bottom:1.2rem; }
.footer .widget-title{
  color:#fff; font-size:1.02rem; margin-bottom:1.15rem;
  position:relative; padding-bottom:.7rem;
}
.footer .widget-title::after{
  content:""; position:absolute; left:0; bottom:0; width:44px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--xm-orange), transparent);
}
.footer p, .footer li{ font-size:.92rem; }
.footer a{ color: rgba(255,255,255,.72); }
.footer a:hover{ color: var(--xm-cyan); }
.footer .widget_nav_menu li{ margin-bottom:.55rem; }
.social-icons a{
  width:38px; height:38px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center; margin-right:.5rem;
  background: rgba(255,255,255,.08); color:#fff; transition: all .25s ease;
}
.social-icons a:hover{ background: var(--grad-orange); color:#fff; transform: translateY(-3px); }
.ttm-our-location-list li{ display:flex; gap:.8rem; margin-bottom:.75rem; }
.ttm-our-location-list i{ color: var(--xm-cyan); margin-top:.4rem; }
.bottom-footer-text{ border-top:1px solid rgba(255,255,255,.1); font-size:.86rem; }
.footer-nav-menu li{ margin-left:1.5rem; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px){
  .services_wrap .nav-tabs{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:.5rem; }
  .services_wrap .nav-tabs .nav-item{ width:auto; }
  .services_wrap .nav-link{ white-space:nowrap; }
  .services_wrap .nav-link::before{ display:none; }
  .navbar-collapse{ background:#fff; border-radius: var(--radius-l); padding:1rem; margin-top:1rem; box-shadow: var(--shadow-l); }
  .header.header-solid .navbar-collapse{ background: var(--xm-ink-2); }
  .header.header-solid .navbar-collapse .nav-link{ color:#fff; }
  .topright{ margin-top:.75rem; }
  .h_slider{ min-height:auto; padding-top:120px; }
}
@media (max-width: 767.98px){
  .cta_bx{ text-align:center; justify-content:center; }
  .cta-r{ text-align:center; width:100%; }
  .footer-nav-menu{ justify-content:flex-start !important; margin-top:.7rem; }
  .footer-nav-menu li{ margin:0 1.2rem 0 0; }
  .one_app .accordion-body{ padding-left:1.35rem; }
  .hero-strip div + div{ border-left:0; border-top:1px solid var(--xm-line); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}
.header {
    background: radial-gradient(1100px 620px at 82% 18%, rgba(61,220,250,.24), #fff0 62%), radial-gradient(760px 500px at 6% 88%, rgba(255, 255, 255, 0.13), transparent 62%), var(--xm-mist);
}
.page-hero {
     margin-top: 2%;
}