/* =====================================================
   VARIABLES & RESET
===================================================== */
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueThin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueUltraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueUltraLightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueLightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueRoman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueMediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueBoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueHeavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueHeavyItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueBlack.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("fonts/HelveticaNeueBlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --primary:      #5a6a89;
  --primary-card: #717f9a;
  --teal:         #00C8C8;
  --light-blue:   #00C8C8;
  --light-azure:  #263b9c;
  --footer-bg:    #74829c;
  --dark:         #000215;
  --white:        #ffffff;
  --gray:         #d9d9d9;
  --text-nav:     #202020;
  --azure:        #57d6ff;
  --light-cyan:   #B5F3F3;

  /* Prefer Google font, keep HelveticaNeue as fallback */
  --font-sans:    "Montserrat", sans-serif;
  --font-inter:   var(--font-sans);
  --font-poppins: var(--font-sans);
  --font-mont:    var(--font-sans);
  --font-jakarta: var(--font-sans);
  --font-inst:    var(--font-sans);

  --container:    1320px;   /* outer cap — content width = container - 2×gutter */
  /* --gutter:       160px;     */
  --nav-h:        115px;    /* Union.svg height: arch at 164px, teal stroke bottom at 172px */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--primary);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.5;
  position: relative;   /* positioning context for page-bg */
}

/* ── Global paragraph baseline ── */
p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: inherit;
}

/* Cap the visible content area at 1920px and center it.
   Screens wider than 1920px show the brand background colour on the
   sides and the page layout centered — consistent on any display. */
body::before {
  content: none; /* no pseudo needed — body background handles sides */
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

/* =====================================================
   PAGE-LEVEL BACKGROUND DECORATIONS
   Exact pixel coords from Figma (1920px-wide design)
===================================================== */
.page-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  /* overflow:clip clips visually without creating a scroll container,
     so the body still scrolls normally but decorations don't extend
     beyond the page bounds causing unwanted scrollbars. */
  overflow: clip;
}

/* Shared deco style */
.deco {
  position: absolute;
}
.deco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deco-g1, .deco-g2, .deco-g3, .deco-g4, .deco-g5 {
  opacity: 0.1;
}

/* ─── Wave TOP
   Outer container: left:-321px top:-622px w:2560px h:2308px
   Inner image div: scaleY(-1) rotate(144.31deg), w:2294px h:1194px, opacity:0.42
─── */
.bg-wave {
  position: absolute;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────
   ALL DECORATIONS USE vw / % UNITS (1920px design reference).
   Formula: vw_value = px_value / 1920 × 100
   Horizontal positions scale proportionally with any viewport width.
   Vertical (top) positions stay in px — section heights don't change
   meaningfully across viewport widths.
───────────────────────────────────────────────────────────────────── */

/* ─── Wave TOP — centered horizontally, scales with viewport ─── */
.bg-wave-top {
  left:   50%;
  top:    -622px;
  width:  133.3vw;   /* 2560 / 1920 */
  height: 120.2vw;   /* 2308 / 1920 */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-wave-inner--top {
  flex-shrink: 0;
  width:  119.5vw;   /* 2294 / 1920 */
  height:  62.2vw;   /* 1194 / 1920 */
  transform: scaleY(-1) rotate(215.31deg);
  position: relative; /* containing block for animated glow pseudos */
}
.bg-wave-inner--top img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

/* ─── Wave BOTTOM — centered horizontally ─── */
.bg-wave-bottom {
  left:   45%;
  top:    4618px;
  width:  135.8vw;   /* 2607 / 1920 */
  height: 120.4vw;   /* 2311 / 1920 */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-wave-inner--bottom {
  flex-shrink: 0;
  width:  121.3vw;   /* 2329 / 1920 */
  height:  63.1vw;   /* 1211 / 1920 */
  transform: rotate(34.2deg);
  opacity: 0.49;
  position: relative; /* containing block for animated glow pseudos */
}
.bg-wave-inner--bottom img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

/* =====================================================
   ANIMATED WAVE GLOW
   The bg-wave.png is reused as a CSS mask on two pseudo-elements
   so we only paint where the wave lines are. A teal / azure
   gradient sweep is animated across, producing pulses of light
   that appear to travel along the curves.
===================================================== */
.bg-wave-inner::before,
.bg-wave-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  -webkit-mask-image: url('/assest-new-design/bg-wave.png');
          mask-image: url('/assest-new-design/bg-wave.png');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;

  background-repeat: no-repeat;
  mix-blend-mode: screen;
  will-change: background-position;
}

/* Primary pulse: bright azure, faster (front layer) */
.bg-wave-inner::after {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(87, 214, 255, 0) 30%,
    rgba(87, 214, 255, 1) 50%,
    rgba(87, 214, 255, 0) 70%,
    transparent 100%
  );
  background-size: 55% 100%;
  background-position: -120% 0;
  filter: blur(0.8px);
  animation: bg-wave-flow 3s linear infinite;
}

/* Secondary pulse: softer teal, slower, offset (back layer) */
.bg-wave-inner::before {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 200, 200, 0) 30%,
    rgba(0, 200, 200, 0.85) 50%,
    rgba(0, 200, 200, 0) 70%,
    transparent 100%
  );
  background-size: 38% 100%;
  background-position: 220% 0;
  filter: blur(0.6px);
  animation: bg-wave-flow 9s linear infinite;
  animation-delay: -3s;
}

@keyframes bg-wave-flow {
  0%   { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-wave-inner::before,
  .bg-wave-inner::after {
    animation: none;
    opacity: 0;
  }
}

/* ─── Hero circle mask (Mask group)
   Figma: left:1033px top:118px size:887px
─── */
.deco-hero-circle {
  left:   72.8vw;    /* 1033 / 1920 */
  top:    118px;
  width:  46.2vw;    /* 887  / 1920 */
  height: 46.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.deco-hero-circle-inner {
  flex-shrink: 0;
  width:  46.2vw;
  height: 46.2vw;
  transform: scaleY(-1) rotate(180deg);
}
.deco-hero-circle-inner img {
  width: 100%; height: 100%;
  display: block;
}

/* ─── Group 1 — right hero floating: left:1442px top:649px 488×473 ─── */
.deco-g1 {
  left:   75.1vw;    /* 1442 / 1920 */
  top:    649px;
  width:  25.4vw;    /* 488  / 1920 */
  aspect-ratio: 488 / 473;
}

/* ─── Group 2 — left problem/platform: left:-182px top:1418px 597×579 ─── */
.deco-g2 {
  left:   -9.48vw;   /* -182 / 1920 */
  top:    1418px;
  width:  31.1vw;    /* 597  / 1920 */
  aspect-ratio: 597 / 579;
}

/* ─── Group 3 — right audience: left:1463px top:2428px 716×694 ─── */
.deco-g3 {
  left:   76.2vw;    /* 1463 / 1920 */
  top:    2428px;
  width:  31.1vw;    /* 716  / 1920 */
  aspect-ratio: 716 / 694;
}

/* ─── Group 4 — left testimonial: left:-176px top:3626px 679×659 ─── */
.deco-g4 {
  left:   -9.17vw;   /* -176 / 1920 */
  top:    3626px;
  width:  31.1vw;    /* 679  / 1920 */
  aspect-ratio: 679 / 659;
}

/* ─── Group 5 — right side of hero: left:1442px top:649px w:488px h:473 ─── */
.deco-g5 {
  left:   76.2vw;    /* 1442 / 1920 */
  top:    4626px;
  width:  31.1vw;    /* 488  / 1920 */
  aspect-ratio: 716 / 694;
}

/* ─── Ellipses — glow circles with "inset bleed" effect
   The inner img is larger than its container to create a soft glow.
   All sizes and offsets converted to vw (1920px reference).
─── */
.deco-ellipse {
  overflow: visible;
}
.deco-ellipse img {
  position: absolute;
  object-fit: contain;
}

/* Ellipse 1 — left platform: left:-214px top:1772px  473×473px container
   img = 1075px → 301px inset each side
   vw: container=24.6vw  img=55.99vw  offset=-15.68vw */
.deco-e1 {
  left:   5.15vw;  /* -214 / 1920 */
  top:    1772px;
  width:  24.64vw;   /* 473  / 1920 */
  height: 24.64vw;
  opacity: 0.7;
}
.deco-e1 img {
  width:  55.99vw;   /* 1075 / 1920 */
  height: 55.99vw;
  top:   -15.68vw;   /* -301 / 1920 */
  left:  -15.68vw;
}

/* Ellipse 2 — right testimonial: left:1582px top:3742px  523×523px container
   img = 1101px → 289px inset each side
   vw: container=27.24vw  img=57.34vw  offset=-15.05vw */
.deco-e2 {
  left:   95.4vw;    /* 1582 / 1920 */
  top:    3742px;
  width:  27.24vw;   /* 523  / 1920 */
  height: 27.24vw;
  opacity: 0.7;
}
.deco-e2 img {
  width:  57.34vw;   /* 1101 / 1920 */
  height: 57.34vw;
  top:   -15.05vw;   /* -289 / 1920 */
  left:  -15.05vw;
}

/* Ellipse 3 — centered how-it-works: top:4448px  679×679px container
   img = 1257px → 289px inset each side
   vw: container=35.37vw  img=65.47vw  offset=-15.05vw */
.deco-e3 {
  left:   66%;
  transform: translateX(-50%);
  top:    4600px;
  width:  1257px;   /* 679  / 1920 */
  height: 1257px;
  opacity: 0.7;
}
.deco-e3 img {
  width:  65.47vw;   /* 1257 / 1920 */
  height: 65.47vw;
  top:   -15.05vw;   /* -289 / 1920 */
  left:  -15.05vw;
}


/* =====================================================
   UTILITIES
===================================================== */
.container {
  width: 100%;
  max-width: var(--container);  /* 1920px outer cap */
  margin: 0 auto;
  padding: 0 var(--gutter);     /* side gutters driven by one variable */
  position: relative;
  z-index: 1;
}

.text-teal   { color: var(--teal); }
.text-dark   { color: var(--dark); }
.text-center { text-align: center; }

/* Scroll-reveal
   Base .fade-in is observed by the IntersectionObserver in script.js which
   simply toggles `.visible` once each element enters the viewport. The
   directional variants below can be opted-in via HTML class. */
.fade-in {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity   .85s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform .85s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Direction = the side the element comes FROM.
   - .fade-in            → comes from below (default, footer-style)
   - .fade-in--up        → comes from above (slides down into place)
   - .fade-in--left      → comes from the left  (slides right into place)
   - .fade-in--right     → comes from the right (slides left into place)
   - .fade-in--scale     → grows in from 0.88×
   - .fade-in--clip      → curtain reveal, left to right */
.fade-in.fade-in--up    { transform: translateY(-44px); }
.fade-in.fade-in--left  { transform: translateX(-64px); }
.fade-in.fade-in--right { transform: translateX(64px); }
.fade-in.fade-in--scale { transform: scale(0.88); }
.fade-in.fade-in--up.visible,
.fade-in.fade-in--left.visible,
.fade-in.fade-in--right.visible,
.fade-in.fade-in--scale.visible { transform: none; }

.fade-in.fade-in--clip {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fade-in.fade-in--clip.visible {
  clip-path: inset(0 0 0 0);
}

/* ── Footer-specific reveal modifier ──
   The default .fade-in is too subtle on the footer (it sits on a dark
   panel, so a small 44px rise barely reads). This modifier dials every
   axis up so the whole footer block clearly lifts into place:
     • Bigger travel    → translateY(72px)
     • Soft scale       → 0.96 → 1
     • Atmospheric blur → 6px → 0
     • Longer duration  → 1.1s with a swift-out ease for a cinematic feel
   Apply alongside the base class: <div class="fade-in fade-in--footer">. */
.fade-in.fade-in--footer {
  opacity: 0;
  transform: translateY(72px) scale(0.96);
  filter: blur(6px);
  transition:
    opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter    1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.fade-in.fade-in--footer.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}


/* =====================================================
   BUTTONS
===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  height: 45px;
  padding: 3px 35px 0;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease,
              background .22s ease, color .22s ease,
              border-color .22s ease;
}

a.btn {
  text-decoration: none;
}

/* Shimmer sweep that plays on hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,0.2) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: none;
  pointer-events: none;
}
.btn:hover::after {
  transform: translateX(120%);
  transition: transform .5s ease;
}

.btn:hover  { box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.btn:active { transform: translateY(0);    box-shadow: none; }

/* Arrow / icon inside slides right on hover */
.btn svg { transition: transform .22s ease; }
.btn:hover svg { transform: translateX(5px); }

/* ── Variant styles ── */
.btn-primary-solid { background: var(--primary); color: var(--white); }
.btn-primary-solid:hover { background: #4a5a7a; }

.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn-outline-primary:hover {
  background: var(--primary);
  color: var(--white);
}
.btn-outline-primary:hover svg path { stroke: var(--white); }

.btn-white { background: var(--white); color: var(--primary); }
.btn-white:hover { background: #eef2fc; }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--teal);
  font-size: 18px;
  font-weight: 400;
}
.btn-outline-white:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.btn-outline-white-trial:hover svg path {
  stroke: var(--teal) !important;
}
.btn-outline-white:hover svg path {
  stroke: var(--white);
}
.btn-outline-white a { color: var(--white); }
.btn-outline-white:hover a { color: var(--white); }



.btn-outline-azure {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--azure);
  font-size: 18px;
  font-weight: 400;
}
.btn-outline-azure:hover {
  background: var(--azure);
  border-color: var(--azure);
  color: var(--white);
}

.btn-outline-azure-trial:hover svg path {
  stroke: var(--azure) !important;
}
.btn-outline-azure:hover svg path {
  stroke: var(--white);
}
.btn-outline-azure a { color: var(--white); }
.btn-outline-azure:hover a { color: var(--white); }




.btn-teal { background: var(--teal); color: var(--white); }
.btn-teal:hover { background: #00aeae; }

.teal-arrow-circle {
  width: 32px; height: 32px;
  background: var(--white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* =====================================================
   NAVBAR
   Figma: h=164px, Union image full-width bg
   Nav content: 1600px centered, top=34px
   Logo pill: #5a6b89, 417×140px, radius 47px, top:24px
===================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: transparent;
  box-shadow: none;
  overflow: visible;
  /* One-shot slide-down on first page load. Plays once when the navbar
     is injected into the DOM. `both` keeps the final state applied. */
  animation: nav-slide-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes nav-slide-in {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .navbar { animation: none; }
}

/* Full-width Union header background — Union.svg is 1920×172px exactly matching --nav-h */
.navbar-union-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: url("assest-new-design/Union.svg");
  background-position: top center;
}

.navbar-container {
  box-shadow: 0px 50px 70px 27px rgb(35 44 62 / 55%);
}

.nav-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Nav links (left) ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 6px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;   /* dropdown anchor */
}

/* anchor tags inside nav items inherit the text style */
.nav-item a {
  color: inherit;
  text-decoration: none;
}
.nav-item a span,
.nav-item > span:first-child,
.dropdown-trigger span {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--white);
  white-space: nowrap;
  line-height: normal;
  transition: color .25s;
}
.nav-item:hover a span,
.nav-item:hover > span:first-child,
.nav-item:hover .dropdown-trigger span { color: rgba(255,255,255,0.9); }

/* ── Dropdown trigger button (Resources) ── */
.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ── Chevron rotates when dropdown is open ── */
.chevron {
  margin-top: 2px;
  flex-shrink: 0;
  transition: transform .25s;
}
.has-dropdown.dropdown-open .chevron { transform: rotate(180deg); }
.dropdown-trigger .chevron path { stroke: currentColor; }
.dropdown-trigger { color: var(--white); }

/* ── Sliding underline — appears on hover/active only ── */
.nav-underline {
  height: 2px;
  background: var(--teal);
  border-radius: 1px;
  width: 0;
  transition: width .3s ease;
  margin-top: 3px;
}
.has-dropdown { flex-direction: column; }

/* Hover "bridge" so moving from trigger to dropdown doesn't close it.
   The dropdown sits 10px below the trigger; this fills that gap. */
.has-dropdown::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}
.nav-item:hover .nav-underline,
.nav-item--active .nav-underline { width: 100%; }

/* ── Active nav item — persistent underline + slightly bolder text ── */
.nav-item--active a span,
.nav-item--active > span,
.nav-item--active .dropdown-trigger span {
  color: var(--white);
}

/* ── Nav dropdown panel ── */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #4a5b77;
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
  min-width: 460px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 2000;
}
.nav-dropdown::before {
  content: none;
}
.has-dropdown.dropdown-open .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Solutions dropdown: align to left so it can't overflow off-screen */
.nav-item.has-dropdown[data-nav="solutions"] .nav-dropdown {
  left: 0;
  transform: translateY(-6px);
}
.nav-item.has-dropdown[data-nav="solutions"].dropdown-open .nav-dropdown {
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--white) !important;
  white-space: normal;
  position: relative;
  transition: background .2s ease;
}

.dropdown-item:first-child {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.dropdown-item:last-child {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.dropdown-item::after {
  content: none;
}
.dropdown-item:hover {
  background: var(--teal) !important;
}

.dropdown-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
}
.dropdown-icon i {
  font-size: 24px;
  line-height: 1;
}

.dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.dropdown-title {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--white);
}
.dropdown-subtitle {
  font-family: var(--font-inter);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.62);
}

/* ── Nav logo — absolutely centered ──
   Figma: pill bg-[#5a6b89] h-[140px] w-[417px] rounded-[47px] top-[24px]
   Logo img sits inside the pill
─── */
.nav-logo {
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translateX(-50%);
  width:  280px;
  height: auto;
  z-index: 1010;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  text-decoration: none;
}

/* Dark blue rounded pill — matches Figma exactly */
.logo-pill {
  position: absolute;
  left: 0;
  top: 24px;
  width:  417px;
  height: 140px;
  background: #5a6b89;
  border-radius: 47px;
}

.logo-img {
  position: absolute;
  left: 49%;
  top: 20px;
  transform: translateX(-50%);
  width:  260px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Nav actions (right) ── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}


/* =====================================================
   HERO SECTION
   Content at Figma top:285px → padding-top from section top:167px
   (285 - 118 nav = 167px)
   Trusted by at Figma top:796px → 796-118=678px from section top
===================================================== */
.hero {
  background: transparent;
  position: relative;
  z-index: 1;
  padding-top: var(--nav-h);
  /* clip horizontal overflow so absolutely-positioned stat cards
     cannot widen the body and shift background decorations off-center */
  overflow-x: clip;
  overflow-y: visible;
}

/* hero-container: full-width flex row capped at 1320px and centred.
   Symmetric horizontal gutters match other sections; visual column is centred
   within the row so laptop/tablet layouts do not look pushed to one side. */
.hero-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left:  var(--gutter);
  padding-right: var(--gutter);
  padding-top:   100px;
  padding-bottom: 25px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.au-page-title {
  text-align: center;
}
/* Same size range as .section-heading */
.au-page-title-text {
  font-family: var(--font-sans);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 700;
  line-height: 1.18;
  color: var(--white);
}

/* Left: headline + desc + CTA
   clamp(400px, 44%, 778px):
     at 1920px → 44% of 1920 = 844px  → clamps to 778px  ✓
     at 1500px → 44% of 1500 = 660px  → uses 660px       ✓
     at 1280px → 44% of 1280 = 563px  → uses 563px       ✓ */
.hero-content {
  flex: 0 0 clamp(400px, 46%, 778px);
  max-width: 778px;
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.hero-title {
  font-family: var(--font-sans);
  font-size: 50px;
  font-weight: 700;
  line-height: 60px;
  /* text-transform: uppercase; */
  color: var(--white);
  max-width: 768px;
}

.hero-title-line {
  display: block;
}
.hero-title-line:empty { display: none; }

.hero-desc {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  max-width: 832px;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 17px;
}

/* Right: mockup + stat cards
   flex:1 fills whatever space is left after the content column.
   max-width caps it at the Figma design width (855px).
   aspect-ratio maintains correct proportions at every screen size
   → no height overrides needed in breakpoints. */
.hero-visual {
  flex: 0 0 clamp(400px, 54%, 778px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: right;
}

/* Hero carousel slide transition — pure crossfade.
   The carousel JS uses a 3-phase pattern: fade current slide out, swap
   its content while it's invisible, fade the new slide in. No horizontal
   slide — content stays put so we never see the new slide arriving from
   one side. */
.hero-container {
  /* Slow, smooth crossfade (~1.5s per phase, ~3s total slide change). */
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
/* Phase 1 — fade current slide out (uses base transition). */
.hero-container.is-sliding-out {
  opacity: 0;
}
/* Phase 2 — invisible "ready" state while the slide content is swapped.
   The JS pairs this with .is-no-transition + a forced reflow so the
   swap commits silently before phase 3. */
.hero-container.is-from-right {
  opacity: 0;
}
.hero-container.is-no-transition {
  transition: none !important;
}
/* Legacy classes kept as no-ops so any stale state still resolves to base. */
.hero-container.hero-container--animate,
.hero-container.is-sliding-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-container,
  .hero-container.is-sliding-out,
  .hero-container.is-from-right,
  .hero-container.is-sliding-in {
    transition: none !important;
    opacity: 1 !important;
  }
}
.hero-carousel-controls {
  display: flex;
  justify-content: right;
  padding: 18px var(--gutter) 6px;
  max-width: var(--container);
  margin: 15px auto;
}
.hero-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: all .35s;
}
.hero-dot.active {
  background: var(--white);
  width: 32px;
  border-radius: 5px;
}

/* imgAsset22 — laptop frame, fills the visual area */
.mockup-frame {
  width:  83%;
  height: auto;
  /* border-radius: 16px; */
}

/* imgScreenShot — platform screenshot inside the laptop frame.
   Percentage values derived from Figma px offsets relative to the
   855×487px frame:  left=102/855=11.93%  top=26/487=5.34%
                     width=657/855=76.84% height=411/487=84.39%
   Since hero-visual uses aspect-ratio: 855/487, these percentages
   stay pixel-accurate at every viewport width — zero breakpoint
   overrides needed for the screen overlay. */
.mockup-screen {
  position: absolute;
  left:   11.93%;
  top:     5.34%;
  width:  76.84%;
  height: 84.39%;
  object-fit: cover;
  border-radius: 3px;
}

/* Floating stat cards
   In Figma page coords:
   Card1 (10+hrs): left:904px top:642px
   Card2 (94%):    left:1606px top:382px
   Relative to hero-visual (starts at 938px, 318.69px from page):
   Card1: left=904-938=-34px  top=642-318=324px → bottom-left of visual
   Card2: left=1606-938=668px top=382-318=64px  → top-right (overflows)
*/
.stat-card {
  position: absolute;
  background: var(--white);
  border-radius: 5px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.25);
  padding: 10px;
  display: flex;
  gap: 19px;
  align-items: center;
  z-index: 3;
}

.stat-card--bl {  /* bottom-left — fixed left bleed, % vertical matches aspect-ratio */
  left: -34px;
  top:  66.5%;   /* 324/487 = 66.5% — scales as visual height changes */
}

.stat-card--tr {  /* top-right — anchored to the right of the visual.
   Using right instead of left prevents overflow at any viewport width.
   At 1920px: visual is 855px, right:10px = 7px from Figma's exact position ✓ */
  left: auto;
  right:  10px;
  top:  13.1%;   /* 64/487 = 13.1% — scales proportionally */
}

.stat-icon-box {
  width:  64px;
  height: 63px;
  background: #e8ebf5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 7px;
  flex-shrink: 0;
  overflow: hidden;
}
.stat-icon-box--white {
  background: var(--white);
  border: 1px solid #e0e4f0;
}
.stat-icon-box img {
  width:  43px;
  height: auto;
  object-fit: contain;
}

.stat-info { display: flex; flex-direction: column; gap: 5px; }

.stat-value {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  color: var(--primary);
  white-space: nowrap;
}
.stat-label {
  font-family: var(--font-inter);
  font-size: 14px;
  line-height: 24px;
  color: var(--primary);
  white-space: nowrap;
}

/* ── Trusted by bar ──
   In Figma: content starts at page top:796px → 796-118=678px from section top
   Below the hero visual which is ~318+487=805px tall from page top.
   So trusted bar is roughly at 796-118-487=191px below hero content area.
*/
.trusted-bar {
  position: relative;
  z-index: 1;
  padding: 30px 0 60px;
}
.trusted-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);     /* same gutter as every other section */
}
.trusted-label {
  font-family: var(--font-inter);
  font-size: 26px;
  font-weight: 600;
  line-height: 28px;
  color: var(--white);
  margin-bottom: 24px;
  text-align: center;
}

/* ── Static teal-bordered pill row (desktop ≥ 768px) ── */
.trusted-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--teal);
  border-radius: 16px;
  padding: 18px 10px;
  background: var(--white);
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.trusted-pill-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0;
}

.trusted-pill-logo {
  height: 45px;
  width: 100%;
  object-fit: contain;
  flex: 1;
}
.trusted-pill-logo.sw-care-homes {
  height: 65px;
}

/* duplicates hidden on desktop */
.trusted-pill-dupe { display: none; }


/* =====================================================
   SHARED SECTION STYLES
   All sections are transparent — page-bg decorations show through.
   Only footer has its own background (#74829c).
===================================================== */
.section {
  padding: 100px 0;
  position: relative;
  z-index: 1;
  background: transparent; /* explicitly transparent so page-bg shows */
}

.section-tag {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
  margin-bottom: 18px;
}
.tag-line {
  display: block;
  width: 43px; height: 2px;
  background: var(--light-blue);
  border-radius: 1px;
  flex-shrink: 0;
}
.tag-text {
  font-family: var(--font-poppins);
  font-size: 16px; font-weight: 600;
  line-height: 32px;
  color: var(--light-blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.section-heading {
  font-family: var(--font-poppins);
  font-size: 50px; font-weight: 600;
  line-height: 64px;
  color: var(--white);
  margin-bottom: 18px;
}
.section-subtitle {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  max-width: 1000px;
  margin: 0 auto 52px;
}

/* Label row (used in platform, testimonial, trial sections) */
.label-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.label-text {
  font-family: var(--font-poppins);
  font-size: 16px; font-weight: 600;
  line-height: 32px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.label-line {
  display: block;
  width: 113px; height: 2px;
  background: var(--light-blue);
  border-radius: 1px;
  flex-shrink: 0;
}


/* =====================================================
   PROBLEM SECTION
===================================================== */
.problem-section { overflow: visible; }

/* Two-column layout */
.problem-inner {
  display: flex;
  align-items: center;
  gap: 56px;
  margin-top: 52px;
}
.problem-left {
  flex: 0 0 56%;
  min-width: 0;
}
.problem-right {
  flex: 0 0 40%;
  border-radius: 16px;
}
.problem-img {
  width: 100%;
  height: auto;
  min-height: 565px;
  object-fit: fill;
  border-radius: 16px;
  display: block;
  border: 3px solid var(--teal);
}

/* Stacked card list */
.problem-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}
/* Card = flex row: icon circle left, teal-bordered body right */
.problem-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
}
.problem-card .p-icon {
  flex-shrink: 0;
  align-self: center;
}
.problem-card .p-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: none;
  display: block;
}
/* White circle container — icon sits outside the card border */
.problem-card .p-icon--outlined {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  position: absolute;
  left: -32px;
}

.problem-card-body-content {
  padding-left: 40px;
}
/* Teal-bordered card body */
.problem-card-body {
  display: flex;
  flex-direction: row;
  gap: 15px;
  flex: 1;
  min-width: 0;
  border: 3px solid var(--teal);
  border-radius: 16px;
  padding: 16.5px 20px;
}
.problem-card h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  margin: 0;
  margin-bottom: 10px;
}
.problem-card p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0;
}


/* =====================================================
   PLATFORM SECTION
===================================================== */
.platform-inner {
  display: flex;
  align-items: center;
  gap: 95px;
}
/* min(765px, 48%):
     at 1920px → 48% of content (1600px) = 768px → clamps to 765px  ✓
     at 1500px → 48% of content (1340px) = 643px → uses 643px        ✓
     at 1280px → 48% of content (1200px) = 576px → uses 576px        ✓ */
.platform-img-wrap {
  flex: 0 0 min(765px, 48%);
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
}
.platform-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 3px solid var(--teal);
  border-radius: 16px;
}
.platform-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.platform-heading {
  font-family: var(--font-poppins);
  font-size: 54px; font-weight: 600;
  line-height: 64px;
  color: var(--white);
}
.platform-desc {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.feature-item {
  display: flex;
  gap: 18px;
  align-items: center;
}
.feature-icon {
  width: 52px; height: 52px;
  background: var(--white);
  border-radius: 10px;
  padding: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feature-icon img { width: 32px; height: 32px; object-fit: contain; }
.feature-item span {
  font-family: var(--font-poppins);
  font-size: 18px; font-weight: 300;
  line-height: 28px;
  color: var(--white);
}


/* =====================================================
   AUDIENCE SECTION
===================================================== */
.audience-cards {
  display: flex;
  gap: 32px;
  margin-top: 52px;
}
.audience-card {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--teal);
}
.audience-card-img {
  height: 300px;
  overflow: hidden;
  flex-shrink: 0;
}
.audience-card-img img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center top;
  display: block;
}
/* Second card image position */
.audience-card-img--offset img {
  object-position: center 30%;
}
.audience-card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.audience-card-body h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  margin: 0;
}
.audience-card-body > p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 15px;
}
.check-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  align-items: start;
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  color: var(--white);
  margin-bottom: 10px;
}

/* White circle + azure check (same look as fa-circle-check, two colours) */
.check-list li::before,
.check-list li::after {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  margin-top: 2px;
  line-height: 1;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.check-list li::before {
  content: "\f111";
  color: var(--white);
  font-size: 22px;
}

.check-list li::after {
  content: "\f00c";
  color: var(--azure);
  font-size: 14px;
  margin-top: 7px;
  z-index: 1;
}


/* =====================================================
   TESTIMONIAL SECTION
===================================================== */
.testimonial-section { overflow: hidden; }

/* ── Shared marquee scroll (used by trusted logos carousel lower on page) ── */
@keyframes marquee-scroll {
  to { transform: translateX(calc(-1 * var(--marquee-shift, 1105px))); }
}
.logo-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0px, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0px, black 80px, black calc(100% - 80px), transparent 100%);
}
.logo-track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
  animation: marquee-scroll var(--marquee-speed, 22s) linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }

/* ── Heading block ── */
.t-heading-wrap {
  text-align: center;
  margin-bottom: 52px;
}
.t-main-heading {
  font-family: var(--font-poppins);
  font-style: italic;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 20px;
}
.t-heading-line1 {
  display: block;
  font-size: clamp(34px, 4vw, 56px);
}
.t-heading-line2 {
  display: block;
  font-size: clamp(40px, 5vw, 68px);
}

/* ── 3-card carousel outer ── */
.t-carousel-outer {
  padding: 16px 0 24px;
  /* expose width as custom property so JS can read it */
}

.t-track {
  display: flex;
  gap: 20px;
  will-change: transform;
  /* transition controlled entirely by JS */
}

/* Base card style — width set via JS so the track slide amount is pixel-accurate */
.t-card {
  flex: 0 0 var(--t-card-w, 32%);
  width: var(--t-card-w, 32%);
  background: var(--footer-bg);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  min-height: 370px;
  transition: opacity .3s ease, transform .3s ease;
  position: relative;
  padding-bottom: 54px; /* room for logo badge */
}

/* Active (centre) card */
.t-card--active {
  opacity: 1;

  border-color: rgba(255,255,255,0.3);
}

/* Side cards */
.t-card--side {
  opacity: 0.45;
  /* transform: scale(0.96); */
  pointer-events: none;
}

.stars { display: flex; gap: 2px; }
.stars span { font-size: 24px; font-weight: 600; color: var(--light-cyan); line-height: 1; }

.t-card blockquote {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--white);
  font-style: normal;
  margin: 20px 0;
}
.reviewer {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px 0 0;
}
.reviewer-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.reviewer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reviewer-name {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600;
  line-height: 22px;
  color: var(--white);
}
.reviewer-role {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;

  margin-top: 4px;
  font-weight: 600;
}

/* Company logo badge (bottom centered) */
.t-company-badge {
  position: absolute;
  left: 50%;
  bottom: -40px; /* hang over the card edge like the screenshot */
  transform: translateX(-50%);
  background: #ffffff;
  border: 2px solid var(--teal);
  border-radius: 12px;
  padding: 15px 0px;
  width: min(360px, calc(100% - 88px));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}
.t-company-badge img {
  height: 45px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* =====================================================
   PARTNERS & ACCREDITATIONS (carousel)
===================================================== */
.partners-section { overflow: hidden; }

.p-heading-wrap { margin-bottom: 52px; text-align: center; }

.p-carousel-outer {
  padding: 16px 0 24px;
}
.p-track {
  display: flex;
  gap: 20px;
  will-change: transform;
}

.p-card {
  flex: 0 0 var(--p-card-w, 32%);
  width: var(--p-card-w, 32%);
  background: var(--footer-bg);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 32px;
  padding-bottom: 54px; /* room for logo badge */
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
  transition: opacity .3s ease, transform .3s ease;
  position: relative;
}
.p-card--active {
  opacity: 1;
  border-color: rgba(255,255,255,0.3);
}
.p-card--side {
  opacity: 0.45;
  /* transform: scale(0.96); */
  pointer-events: none;
}

.p-card blockquote {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--white);
  margin: 0;
  flex: 1;
}

.p-company-badge {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  background: #ffffff;
  border: 3px solid var(--teal);
  border-radius: 12px;
  padding: 15px 0px;
  width: min(360px, calc(100% - 88px));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}
.p-company-badge img {
  height: 45px;
  width: auto;
  object-fit: contain;
  display: block;
}

.p-carousel-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
.p-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.p-dot {
  width: 10px; height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: all .35s;
}
.p-dot.active { background: var(--white); width: 32px; border-radius: 5px; }

@media (max-width: 1024px) {
  /* No gap: collapsed side slots + 100% active basis would otherwise overflow (shift right) */
  .p-track { align-items: flex-start; gap: 0; }
  .p-card--side {
    opacity: 0;
    pointer-events: none;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  .p-card--active {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto;
    align-self: flex-start;
  }
  .p-carousel-controls { justify-content: center; }
}

/* ── Controls ── */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.t-carousel-controls {
  margin-top: 25px;
}

/* Testimonial: dots on the right (no arrows) */
.t-carousel-controls { justify-content: flex-end; }
.carousel-dots { display: flex; gap: 8px; align-items: center; }
.dot {
  width: 10px; height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: all .35s;
}
.dot.active { background: var(--white); width: 32px; border-radius: 5px; }
.carousel-arrows { display: flex; gap: 9px; }
.arrow-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.arrow-btn:hover { background: rgba(255,255,255,.15); }

/* ── Static logo strip ── */
.t-logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 52px;
  padding: 20px 32px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.12);
}
.t-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}
.t-logo-item img {
  max-height: 36px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}


/* =====================================================
   HOW IT WORKS
===================================================== */
.steps-timeline {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 52px auto 0;
}
.timeline-track {
  position: absolute;
  top: 50%; left: 80px; right: 80px;
  height: 3px;
  background: rgba(255,255,255,.3);
  transform: translateY(-50%);
  z-index: 0;
  overflow: hidden;
}
.timeline-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal);
  transform-origin: left center;
  transform: scaleX(var(--timeline-progress, 0));
  transition: transform 1.1s ease;
}
.step-num {
  width: 68px; height: 68px;
  border-radius: 35px;
  border: 4px solid var(--white);
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-poppins);
  font-size: 36px; font-weight: 700;
  color: var(--white);
  position: relative; z-index: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.step-num--active { background: var(--teal); }

.steps-grid {
  display: flex;
  gap: 22px;
  margin-top: 80px;
}
/* Desktop: step-col is transparent — cards sit in a flat flex row */
.step-col {
  display: contents; /* children participate in parent flex as if no wrapper */
}
.step-card {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}

/* Mobile/tablet number badges — hidden at full desktop only */
.step-num-mobile { display: none; }
/* Content wrapper — centred on desktop, left-aligned when number is shown */
.step-card-content {
  display: flex; flex-direction: column;
  gap: 18px;
  align-items: center;
}
.step-icon {
  width: 62px; height: 62px;
  background: var(--white);
  border-radius: 10px;
  padding: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.step-icon img { width: 32px; height: 32px; object-fit: contain; }
.step-card h3 {
  font-family: var(--font-sans);
  font-size: 26px; font-weight: 700;
  line-height: 38px;
  color: var(--white);
}
.step-card p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  max-width: 365px;
}


/* =====================================================
   TRIAL CTA SECTION
===================================================== */
.trial-card {
  width: min(1420px, 100%);
  margin: 0 auto;
  padding: 44px clamp(22px, 4vw, 72px);
  border-radius: 18px;
  background: url('/assest-new-design/cta_bg.jpg');
  border: 3px solid var(--teal);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 18px;
  text-align: left;
  background-position: center;
  background-size: cover;
}
.trial-heading {
  font-family: var(--font-poppins);
  font-size: 42px; font-weight: 600;
  line-height: 64px;
  color: var(--white);
  text-shadow: 2px 2px 5px rgba(0,0,0,0.15);
}
.trial-desc {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  max-width: 670px;
}
.trial-actions {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.trial-note {
  font-family: var(--font-poppins);
  font-size: 18px;
  line-height: 28px;
  color: var(--white);
  white-space: normal;
  opacity: 0.9;
}

/* =====================================================
   VIDEO MODAL (Watch a demo)
===================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.video-modal.is-open { display: flex; }
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}
.video-modal__panel {
  position: relative;
  width: min(980px, 100%);
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid var(--teal);
  background: #5a6a89;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
}
.video-modal__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.video-modal__title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
}
.video-modal__close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--teal);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.video-modal__close:hover { background: var(--teal); }
.video-modal__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-modal__video video {
  width: 100%;
  height: 100%;
  display: block;
}


/* =====================================================
   FOOTER
===================================================== */
.footer {
  background: var(--footer-bg);
  padding: 70px 0 20px;
  position: relative;
  z-index: 1;
  border-top: 3px solid var(--teal);
}
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 30px;
}
.footer-brand {
  max-width: 433px;
  display: flex; flex-direction: column;
  gap: 32px;
  flex-shrink: 0;
}
.footer-logo img {
  width: 232px; height: auto;
  object-fit: contain;
}
.footer-tagline {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
}
.social-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.social-link {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
}
.social-link:hover { background: var(--teal); border-color: var(--teal); color: var(--white); }
.social-link i { font-size: 20px; }

.footer-col {
  display: flex; flex-direction: column;
  gap: 24px;
  min-width: 160px;
}
.footer-col h4 {
  font-family: var(--font-mont);
  font-size: 22px; font-weight: 500;
  line-height: 34px;
  /* text-transform: uppercase; */
  color: #b5f3f3;
  white-space: nowrap;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  font-family: var(--font-inst);
  font-size: 18px;
  line-height: normal;
  color: var(--white);
  transition: opacity .2s;
}
.footer-col ul li a:hover { color: var(--teal); }

/* ── Newsletter column ── */
.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex-shrink: 0;
}

.footer-newsletter h4 {
  font-family: var(--font-mont);
  font-size: 22px; font-weight: 500;
  line-height: 34px;
  /* text-transform: uppercase; */
  color: #b5f3f3;
  white-space: nowrap;
}

.footer-newsletter-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-social-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-underline {
  width: 100%;
  height: 1px;
  background: #b5f3f3;
  margin-top: 4px;
}
.footer-nl-label {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}
.footer-nl-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
}
.footer-nl-input {
  flex: 1;
  width: 280px;
  padding: 11.5px 14px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: #1a2a3a;
  background: #ffffff;
  border: none;
  outline: none;
}
.footer-nl-input::placeholder { color: #8a9ab0; }
.footer-nl-btn {
  padding: 10px 18px;
  background: var(--azure);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.footer-nl-btn:hover { background: #0bbffb; }
.footer-social-label {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}

.footer-divider {
  height: 1px;
  background: #c0c0c0;
  margin-bottom: 28px;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-bottom p {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  white-space: nowrap;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-legal-link {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  text-underline-offset: 3px;
  opacity: 0.9;
  transition: opacity .2s, color .2s;
}
.footer-legal-link:hover {
  opacity: 1;
  color: var(--teal);
}

/* Dot separators between legal links */
.footer-legal-link + .footer-legal-link::before {
  content: "·";
  display: inline-block;
  margin-right: 18px; /* matches .footer-legal-links gap */
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}


/* =====================================================
   HAMBURGER + MOBILE NAV
   (always in the stylesheet, visibility controlled by media queries)
===================================================== */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1100;
}
.ham-bar {
  display: block;
  width: 26px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease;
}
/* Animated X when open */
.nav-hamburger.is-open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav panel */
.mobile-nav {
  display: none;             /* hidden until media query enables it */
  flex-direction: column;
  gap: 0;
  background: var(--primary);
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.mobile-nav.is-open { max-height: 600px; }

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 8px 24px 0;
  gap: 0;
}
.mobile-nav-item {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: block;
  transition: color .2s;
}
.mobile-nav-item:hover { color: var(--teal); }
.mobile-nav-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }

/* Mobile dropdowns */
.mobile-has-dropdown { border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-dropdown-trigger {
  width: 100%;
  background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans); font-size: 17px; font-weight: 500;
  color: var(--white);
  padding: 14px 0;
  transition: color .2s;
}
.mobile-dropdown-trigger:hover { color: var(--teal); }
.mobile-dropdown-trigger svg { transition: transform .25s; }
.mobile-dropdown-trigger svg path { stroke: var(--white); }
.mobile-has-dropdown.is-open .mobile-dropdown-trigger svg { transform: rotate(180deg); }
.mobile-dropdown-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  padding-left: 16px;
  background: rgba(0,0,0,0.12);
  border-radius: 0 0 8px 8px;
  margin: 0 -24px;
  padding-left: 40px;
  padding-right: 24px;
}
.mobile-has-dropdown.is-open .mobile-dropdown-panel { max-height: 300px; }
.mobile-dropdown-link {
  display: block;
  font-family: var(--font-sans); font-size: 15px; font-weight: 400;
  color: rgba(255,255,255,0.8);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color .2s;
}
.mobile-dropdown-link:last-child { border-bottom: none; }
.mobile-dropdown-link:hover { color: var(--teal); }
.mobile-nav-actions {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 8px;
}
.mobile-nav-actions .btn { height: 50px; font-size: 15px; width: 100%; }


/* =====================================================
   RESPONSIVE
   One --gutter variable drives all horizontal padding.
   Layouts adapt via flex/aspect-ratio; only genuine layout
   changes (stacking, font-size, etc.) go in media queries.
   Breakpoints: 1600 → 1500 → 1280 → 1024 → 768 → 480 → 375
===================================================== */

/* @media screen and (min-width: 1921px) {
  .problem-img {
    min-height: 675px;
  }
} */

@media (max-width: 1700px) {
  /* hero-container values now in the consolidated HERO RESPONSIVE block below */

  .trusted-pill-logo {
    min-width: 160px;
  }
  .problem-img {
    min-height: 550px;
  }
  .problem-card-body {
    padding: 10px 20px;
  }

  .problem-card h3 {
    font-size: 18px;
  }

  .platform-img-wrap {
    border-radius: 16px;
  }

  /* .problem-card p {
    font-size: 18px;
  } */

  .problem-cards {
    gap: 36px;
  }
}

/* ── 1600px: wide laptops / small monitors ──────────────── */
@media (max-width: 1600px) {

  /* Hero title starts scaling down at 1600px */
  .section-heading { font-size: 50px; line-height: 60px; }
  .page-bg { opacity: 0.8; }

  .problem-img {
    min-height: 550px;
  }

}

/* ── 1500px: large laptops ──────────────────────────────── */
@media (max-width: 1500px) {
  .platform-img-wrap {
    height: 392px;
  }


  .section-heading { font-size: 46px; line-height: 56px; }

  .platform-inner   { gap: 60px; }
  .platform-heading { font-size: 44px; line-height: 54px; }

  /* Problem: tighten image at this breakpoint */
  .problem-inner { gap: 60px; }
  /* Steps: hide floating row, 2-column layout with vertical lines */
  .steps-timeline { display: none; }
  .steps-grid {
    flex-wrap: nowrap;
    gap: 80px;
    margin-top: 48px;
    align-items: flex-start;
    justify-content: space-around;  /* centres the two columns like the heading */
  }
  /* Each column: fixed width so grid sits centered with breathing room */
  .step-col {
    flex: 0 0 auto;
    width: min(380px, 42%);
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
  }
  /* Vertical line from bottom of circle 1 to top of circle 2 */
  .step-col::before {
    content: '';
    position: absolute;
    left: 27px;               /* centre of the 54px circle */
    top: 58px;                /* just below circle 1 */
    bottom: 58px;             /* just above circle 2 */
    width: 2px;
    background: rgba(255,255,255,0.35);
    z-index: 0;
  }
  .step-card {
    flex: unset;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 0;
    padding: 16px 0;
  }
  .step-num-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 3px solid var(--white);
    background: var(--primary);
    font-family: var(--font-poppins);
    font-size: 18px; font-weight: 700;
    color: var(--white);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    position: relative; z-index: 1;
  }
  .step-num-mobile.step-num--active { background: var(--teal); }
  .step-card-content {
    flex: 1;
    align-items: flex-start;
    padding-left: 18px;
    gap: 10px;
  }

  .page-bg { opacity: 0.7; }

  .problem-img {
    min-height: 550px;
  }
}

@media (max-width: 1300px) {
  .problem-cards {
    gap: 34px;
  }
}

/* ── 1280px: standard laptops ──────────────────────────── */
@media (max-width: 1280px) {
  :root { --gutter: 40px; }

  /* Nav logo shrinks */
  .nav-logo { width: 273px;
    left: 59%;
    top: 10px;}
  .logo-img { left: 22px; width: 280px; height: 86px; top: 8px; }

  .section-heading  { font-size: 42px; line-height: 52px; }

  .platform-inner   { gap: 48px; }
  .platform-heading { font-size: 40px; line-height: 50px; }

  .section { padding: 88px 0; }
  .page-bg { opacity: 0.5; }
  .problem-left  { flex: 0 0 50%; }
  .problem-right { flex: 0 0 calc(50% - 32px); }
  .problem-img   { min-height: 570px; }
  .problem-cards {
    gap: 10px;
  }
}

/* ── 1360px: footer — single flex row overflows; switch to grid until tablet ── */
@media (max-width: 1360px) {
  .footer-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
    align-items: start;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
  }
  .footer-newsletter {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
  }
  .footer-col h4,
  .footer-newsletter h4 {
    white-space: normal;
  }
  .footer-nl-form {
    max-width: min(100%, 440px);
  }
  .footer-nl-input {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
  .footer-bottom {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
  }
  .footer-bottom p {
    white-space: normal;
    flex: 1 1 100%;
    text-align: center;
  }
  .footer-legal-links {
    justify-content: center;
    flex: 1 1 100%;
  }
}

/* ── 1024px: tablets landscape ─────────────────────────── */
@media (max-width: 1024px) {

  .nav-logo { top: 50px;}
  :root { --gutter: 32px; }
  .page-bg { display: none; }

  /* Nav logo: hide the decorative circle so it stays within the navbar
     height and doesn't overlap nav links or action buttons */
  .nav-logo   { width: 180px;
    height: 58px; }
  .logo-union { display: none; }
  .logo-img   {
    position: relative;
    left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Hero responsive values are defined in the consolidated HERO RESPONSIVE block below. */

  /* Platform: image above text */
  .platform-inner    { flex-direction: column; gap: 48px; }
  .platform-img-wrap { flex: unset; width: 100%; height: 440px; }
  .platform-heading  { font-size: 42px; line-height: 52px; }

  /* Problem: keep side-by-side at 1024px, 50-50 split */
  .problem-inner { gap: 32px; }
  .problem-left  { flex: 0 0 50%; }
  .problem-right { flex: 0 0 calc(50% - 32px); }
  .problem-img   { min-height: 600px; }

  /* Audience: stacks */
  .audience-cards    { flex-direction: column; gap: 32px; }
  .audience-card-img { height: 320px; }

  /* Testimonial: one card full width; side slots collapsed so stretch cannot inflate active card */
  .t-track { align-items: flex-start; gap: 0; justify-content: center; }
  .t-card--side {
    opacity: 0;
    pointer-events: none;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  .t-card--active {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto;
    align-self: flex-start;
  }
  .t-carousel-controls { justify-content: center; }

  /* How it works: 2-column */
  .steps-grid { flex-wrap: wrap; gap: 20px; }
  .step-card  { flex: 0 0 calc(50% - 10px); }

  /* Trial: card stays centered */
  .trial-card { padding: 34px 22px; border-radius: 16px; }
  .trial-actions { width: 100%; }

  /* Footer: grid from 1360px; spacing for tablet gutters */
  .footer-top    { gap: 32px 24px; }
  .footer-brand  { max-width: 100%; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal-links { justify-content: center; }

  .section         { padding: 80px 0; }
  .section-heading { font-size: 40px; line-height: 50px; }

}

@media (max-width: 900px) {
  .problem-img {
    min-height: 680px;
  }
}
@media (max-width: 800px) {
  .problem-img {
    min-height: 740px;
  }
}

/* ── 768px: tablets portrait & large phones ─────────────── */
@media (max-width: 768px) {
  :root {
    --nav-h:   68px;
    --gutter:  20px;
  }

  /* Nav: switch to hamburger, restore solid bg */
  .navbar { background: var(--primary); height: var(--nav-h); }
  .nav-inner  { padding: 14px var(--gutter); }
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-nav    { display: flex; }

  /* Logo: fixed to viewport so it stays in nav bar when menu slides open */
  .nav-logo {
    position: fixed;
    top: calc(var(--nav-h) / 2);
    transform: translateX(-30%) translateY(-50%);
    width:  180px;
    height:  54px;
  }
  .logo-pill { display: none; }
  .navbar-union-bg { display: none; }
  .logo-img {
    position: relative;
    left: 0; top: 0;
    width:  100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Hero responsive values are defined in the consolidated HERO RESPONSIVE block below. */
  .carousel-controls {
    margin-top: 20px;
  }

  /* Trusted bar */
  .trusted-bar   { padding: 40px 0 60px; }
  .trusted-label { font-size: 18px; }

  /* Sections */
  .section          { padding: 70px 0; }
  .section-heading  { font-size: 36px; line-height: 46px; }
  .section-subtitle { font-size: 18px; line-height: 28px; max-width: 100%; }

  /* Problem: stack at 768px — image on top, cards below */
  .problem-inner { flex-direction: column-reverse; gap: 24px; }
  .problem-left  { flex: unset; width: 100%; }
  .problem-right { flex: unset; width: 100%; }
  .problem-img   { min-height: unset; height: 280px; }

  /* Platform */
  .platform-img-wrap { flex: unset; width: 100%; height: 320px; }
  .platform-heading  { font-size: 34px; line-height: 44px; }
  .platform-desc     { font-size: 18px; }
  .feature-grid      { grid-template-columns: 1fr; gap: 14px; }

  /* Audience */
  .audience-card-img  { height: 240px; }
  .audience-card-body { padding: 20px 20px 24px; gap: 12px; }
  .check-list li            { font-size: 16px; line-height: 24px; }

  /* Testimonial */
  .t-card              { padding: 28px; padding-bottom: 50px; }
  .t-logo-strip        { padding: 16px 20px; gap: 12px 16px; }

  /* How it works */
  /* ── Mobile: single column, both step-cols stack vertically ── */
  .steps-timeline { display: none; }

  .steps-grid {
    flex-direction: column;
    gap: 0;
    margin-top: 40px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  /* On mobile, each col becomes a real block (not display:contents) */
  .step-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    width: 100%;
  }
  /* Vertical line connecting the two cards inside each column */
  .step-col::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 58px;
    bottom: 58px;
    width: 2px;
    background: rgba(255,255,255,0.3);
    z-index: 0;
  }
  /* Gap between the two columns */
  .step-col + .step-col { margin-top: 24px; }

  .step-card {
    flex: unset;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 0;
    padding: 14px 0;
    background: transparent;
  }
  .step-num-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 3px solid var(--white);
    background: var(--primary);
    font-family: var(--font-poppins);
    font-size: 18px; font-weight: 700;
    color: var(--white);
    position: relative; z-index: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  .step-num-mobile.step-num--active { background: var(--teal); }
  .step-card-content {
    flex: 1;
    align-items: flex-start;
    padding-left: 20px;
    gap: 10px;
  }
  .step-card h3 { font-size: 20px; line-height: 28px; }
  .step-card p  { font-size: 18px; line-height: 1.5; max-width: 100%; }

  /* Trial */
  .trial-heading { font-size: 34px; line-height: 44px; }
  .trial-desc    { font-size: 18px; }
  .trial-note    { white-space: normal; font-size: 15px; }
  .trial-actions { align-items: stretch; }
  .trial-actions .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer          { padding: 70px 0 40px; }
  .footer-col ul   { gap: 12px; }
  .footer-col h4   { font-size: 20px; }
  .footer-brand    { gap: 20px; }
  .footer-tagline  { font-size: 18px; }
  .footer-bottom p { white-space: normal; font-size: 15px; }
  .footer-logo img { width: 180px; }
  .footer-newsletter { min-width: unset; width: 100%; }
}

/* ── ≤768px: switch to infinite-scroll carousel ── */
@media (max-width: 768px) {
  .trusted-pill {
    padding: 16px 0;
    justify-content: flex-start;
  }
  .trusted-pill-track {
    justify-content: flex-start;
    width: max-content;
    animation: marquee-scroll 12s linear infinite;
  }
  .trusted-pill:hover .trusted-pill-track { animation-play-state: paused; }
  .trusted-pill-dupe { display: block; }
  .trusted-pill-logo {
    flex: 0 0 auto;
    height: 44px;
    max-width: 130px;
    padding: 0 16px;
  }
  .trusted-pill-logo.sw-care-homes { height: 54px; }
}

/* ── ≤480px: even smaller logos ── */
@media (max-width: 480px) {
  .trusted-pill-logo { height: 36px; max-width: 100px; padding: 0 12px; }
  .trusted-pill-logo.sw-care-homes { height: 44px; }
}

/* ── 480px: small phones ────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --nav-h:  64px;
    --gutter: 16px;
  }
  .nav-logo { width: 150px; height: 46px; }

  .section          { padding: 56px 0; }
  .section-heading  { font-size: 28px; line-height: 38px; }
  .section-subtitle { font-size: 16px; }

  .btn { height: 52px; font-size: 15px; padding: 0 22px; gap: 10px; }

  .platform-img-wrap   { height: 240px; }
  .problem-img         { height: 200px; }
  .platform-heading    { font-size: 28px; line-height: 38px; }
  .audience-card-img { height: 200px; }
  .trial-heading       { font-size: 28px; line-height: 38px; }

  .footer-top  { gap: 28px; }
  .footer-cols { flex-direction: column !important; gap: 24px; }
  .footer-bottom p {line-height: 20px;}
  .footer {
    padding: 60px 0 30px;
  }
}

/* ── 375px: very small phones (iPhone SE etc) ───────────── */
@media (max-width: 375px) {
  .nav-logo    { width: 130px; height: 40px; }

  .btn { height: 48px; font-size: 14px; padding: 0 16px; }

  .section { padding: 48px 0; }
  .trusted-pill-logo { height: 35px; max-width: 100px; padding: 0 8px; }

  .footer-bottom p {line-height: 20px;}
  .footer {
    padding: 60px 0 20px;
  }
}


/* =====================================================
   HERO RESPONSIVE  (home page only — index.html)
   One canonical block per breakpoint. Every hero value is restated
   so the cascade is predictable and each screen size can be tuned
   in one place. Order: widest → narrowest.
===================================================== */

/* ── ≤1700px : extra-wide monitors ── */
@media (max-width: 1700px) {
  .hero-container { padding-top: 100px; padding-bottom: 18px; }
}

/* ── ≤1600px : wide laptops / small monitors ── */
@media (max-width: 1600px) {
  .hero-container { padding-top: 92px; padding-bottom: 20px; }
}

/* ── ≤1440px : 15" laptops (NEW) ── */
@media (max-width: 1440px) {
  .hero-container { padding-top: 84px; padding-bottom: 24px; }
  .hero-content   { gap: 24px; }
  .hero-cta       { gap: 18px; margin-top: 14px; }
  .hero-cta .btn  { padding: 0 30px; }
}

/* ── ≤1280px : standard 13–14" laptops ── */
@media (max-width: 1280px) {
  .hero-container { padding-top: 76px; padding-bottom: 28px; }
  .hero-content   { flex: 0 0 clamp(420px, 50%, 720px); max-width: 720px; gap: 22px; }
  .hero-title     { font-size: 42px; line-height: 52px; }
  .hero-desc      { font-size: 18px; line-height: 1.55; }
  .hero-visual    { flex: 0 0 clamp(380px, 50%, 720px); max-width: 545px; }
}

/* ── ≤1024px : tablets landscape ── */
@media (max-width: 1024px) {
  .hero-container {
    flex-direction: column;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 40px;
    padding-right: var(--gutter);
    gap: 40px;
  }
  .hero-content {
    flex: unset;
    width: 100%;
    max-width: 780px;
    gap: 20px;
  }
  .hero-title { font-size: 44px; line-height: 1.18; }
  .hero-desc  { font-size: 18px; line-height: 1.55; }
  .hero-cta   { margin-top: 8px; gap: 18px; }
  .hero-visual {
    flex: unset;
    width: 100%;
    max-width: 780px;
    margin-top: 0;
  }
  /* Stat cards repositioned when the hero stacks vertically */
  .stat-card--bl { left: -10px; right: auto; top: auto; bottom: 0; }
  .stat-card--tr { left: auto; right: -10px; top: 30px; }
}

/* ── ≤900px : small tablets (NEW) ── */
@media (max-width: 900px) {
  .hero-container { padding-top: 48px; padding-bottom: 32px; gap: 32px; }
  .hero-content   { gap: 18px; }
  .hero-title     { font-size: 40px; line-height: 1.2; }
  .hero-desc      { font-size: 17px; }
  .hero-cta       { gap: 16px; }
  .stat-card      { padding: 8px; gap: 14px; }
  .stat-icon-box  { width: 56px; height: 55px; }
  .stat-icon-box img { width: 36px; }
}

/* ── ≤768px : tablets portrait / large phones ── */
@media (max-width: 768px) {
  .hero-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 28px;
    padding-right: var(--gutter);
    gap: 28px;
  }
  .hero-content { flex: unset; width: 100%; max-width: 100%; gap: 16px; }
  .hero-title   { font-size: 38px; line-height: 1.22; }
  .hero-desc    { font-size: 17px; line-height: 1.55; }
  .hero-cta     {
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
  }
  .hero-visual  {
    flex: unset;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .stat-card--bl { left: 0; bottom: 0; top: auto; }
  .stat-card--tr { left: auto; right: 0; top: 20px; }
}

/* ── ≤600px : mid phones (NEW) ── */
@media (max-width: 600px) {
  .hero-container { padding-top: 32px; padding-bottom: 24px; gap: 24px; }
  .hero-content   { gap: 14px; }
  .hero-title     { font-size: 32px; line-height: 1.22; }
  .hero-desc      { font-size: 16px; line-height: 1.5; }
  .hero-cta       { gap: 12px; }
  .hero-cta .btn  { padding: 0 22px; font-size: 15px; }
  .stat-card      { padding: 7px; gap: 10px; }
  .stat-icon-box  { width: 48px; height: 47px; }
  .stat-icon-box img { width: 30px; }
}

/* ── ≤480px : small phones ── */
@media (max-width: 480px) {
  .hero-container { padding-top: 24px; padding-bottom: 20px; gap: 20px; }
  .hero-content   { gap: 12px; }
  .hero-title     { font-size: 28px; line-height: 1.25; }
  .hero-desc      { font-size: 16px; line-height: 1.5; }
  .hero-cta       { gap: 10px; flex-direction: column; align-items: stretch; }
  .hero-cta .btn  { width: 100%; }
  .stat-card      { display: none; } /* room is too tight to display gracefully */
}

/* ── ≤375px : iPhone SE / very small ── */
@media (max-width: 375px) {
  .hero-container { padding-top: 20px; padding-bottom: 16px; gap: 18px; }
  .hero-title     { font-size: 24px; line-height: 1.25; }
  .hero-desc      { font-size: 15px; }
  .hero-cta .btn  { font-size: 14px; height: 48px; }
}


/* =====================================================
   GLOBAL ANIMATIONS
   Tasteful, low-amplitude motion applied site-wide:
   - Background decoration drift / breathing
   - Hero & feature illustrations float
   - Card hover lift
   - Stat-card bob
   All animations are disabled when prefers-reduced-motion: reduce.
===================================================== */

/* ── 1) Decorative wave-blobs — gentle "breathing" pulse.
   Replaces the previous up/down drift with a pure scale oscillation:
   grows by 10% (scale 1.1), settles, then shrinks by 10% (scale 0.9),
   settles. No translation, so the blobs stay anchored in place and
   only "breathe" — much subtler than the prior translateY drift. */
@keyframes deco-drift {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}

.deco-g1 img,
.deco-g2 img,
.deco-g3 img,
.deco-g4 img,
.deco-g5 img {
  animation: deco-drift 13s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
.deco-g2 img { animation-duration: 16s; animation-delay: -3s; }
.deco-g3 img { animation-duration: 19s; animation-delay: -6s; }
.deco-g4 img { animation-duration: 15s; animation-delay: -9s; }
.deco-g5 img { animation-duration: 17s; animation-delay: -12s; }
/* ── 2) Radial glow ellipses — clear breathing pulse ── */

@keyframes deco-pulse {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}
.deco-e1 img,
.deco-e2 img,
.deco-e3 img {
  animation: deco-pulse 6s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}
.deco-e2 img { animation-duration: 8s;  animation-delay: -2s; }
.deco-e3 img { animation-duration: 10s; animation-delay: -4s; }

/* ── 3) Floating section illustrations — bigger amplitude.
   Hero images (.au-hero-img) are intentionally excluded — they should
   stay completely static, no float, no border glow. */
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ── 4) Homepage hero load entrance (one-shot on page open) ──
   Title → desc → CTA → mockup → stat cards, gently staggered. */
.hero-title  { animation: hero-rise 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both; }
.hero-desc   { animation: hero-rise 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) 0.20s both; }
.hero-cta    { animation: hero-rise 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both; }
.hero-visual { animation: hero-zoom 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s both; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-zoom {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── 5) Stat cards — slide in from the edges, then keep bobbing
   (entrance + ambient halo chained together). ── */
@keyframes stat-in-left {
  from { opacity: 0; transform: translateX(-40px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes stat-in-right {
  from { opacity: 0; transform: translateX(40px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes stat-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
/* Subtle teal halo on the stat cards — visible "alive" glow that
   matches the wave-glow aesthetic. Only touches box-shadow, so it
   layers cleanly with the entrance + bob transforms below. */
@keyframes stat-halo {
  0%, 100% {
    box-shadow:
      0 4px 32px rgba(0, 0, 0, 0.25),
      0 0 0 0 rgba(73, 224, 224, 0);
  }
  50% {
    box-shadow:
      0 4px 32px rgba(0, 0, 0, 0.25),
      0 0 22px 4px rgba(73, 224, 224, 0.28);
  }
}
.stat-card--bl {
  animation:
    stat-in-left 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.0s both,
    stat-bob 5.5s ease-in-out 1.9s infinite,
    stat-halo 4.5s ease-in-out infinite;
}
.stat-card--tr {
  animation:
    stat-in-right 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.15s both,
    stat-bob 5.5s ease-in-out 2.1s infinite,
    stat-halo 4.5s ease-in-out -2.25s infinite;
}

/* ── 6) Section-heading teal shimmer ──
   Same "light traveling through brand color" idea as the wave glow,
   applied to every teal accent inside headings. Only the .text-teal
   spans become a moving gradient; the surrounding white text is
   untouched. */
/* Heading shimmer — applies ONLY to non-hero section headings.
   Hero-section headings (.au-page-title-text, .au-h1, .hero-title-line,
   and .section-heading when combined with .au-h1) are intentionally
   excluded so the first section of every page stays static and the
   shimmer reads as a secondary, scroll-revealed flourish on lower
   sections. */
.section-heading:not(.au-h1) .text-teal,
.platform-heading .text-teal {
  background-image: linear-gradient(
    100deg,
    var(--teal) 0%,
    var(--teal) 30%,
    #b6f5ff 50%,
    var(--teal) 70%,
    var(--teal) 100%
  );
  background-size: 220% 100%;
  background-position: 220% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: heading-shimmer 6s linear infinite;
}
@keyframes heading-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

/* ── 7) Primary CTA in the hero — soft breathing teal halo ──
   Draws the eye without changing the button geometry. */
.hero-cta .btn-outline-white {
  position: relative;
}
.hero-cta .btn-outline-white::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(73, 224, 224, 0);
  animation: cta-breath 3.4s ease-in-out infinite;
}
@keyframes cta-breath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(73, 224, 224, 0); }
  50%      { box-shadow: 0 0 22px 2px rgba(73, 224, 224, 0.55); }
}

.trial-card {
  position: relative;
  isolation: isolate;
}


/* ── 11) Soft "alive" teal halo for image containers that clip overflow.
   .platform-img-wrap and .problem-right both use overflow:hidden to clip
   the inner photo to the rounded border, so a rotating ::before would be
   clipped. Box-shadow lives outside the element so we use that instead. */
@keyframes section-halo {
  0%, 100% {
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.22),
      0 0 0 0 rgba(73, 224, 224, 0);
  }
  50% {
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.22),
      0 0 28px 4px rgba(73, 224, 224, 0.32);
  }
}

.problem-right { animation-delay: -2.5s; }

/* ── 12) Homepage mockup diagonal sheen.
   A thin white light bar sweeps diagonally across the hero visual every
   ~6.5s, like a screen reflection passing by. */
.hero-visual {
  overflow: hidden;
}

@keyframes mockup-sheen {
  0%   { background-position: 220% 0; }
  55%  { background-position: -120% 0; }
  100% { background-position: -120% 0; }
}

/* ── 14) Reduced motion: turn everything off ── */
@media (prefers-reduced-motion: reduce) {
  .deco-g1 img, .deco-g2 img, .deco-g3 img, .deco-g4 img,
  .deco-g5 img,
  .deco-e1 img, .deco-e2 img, .deco-e3 img,
  .au-hero-img, .au-side-img, .big-img, .platform-img,
  .platform-photo, .problem-img,
  .hero-title, .hero-desc, .hero-cta, .hero-visual,
  .hero-visual::after,
  .stat-card, .stat-card--bl, .stat-card--tr,
  .section-heading .text-teal,
  .au-page-title-text .text-teal,
  .au-h1 .text-teal,
  .platform-heading .text-teal,
  .hero-cta .btn-outline-white::after,
  .deco-hero-circle::after,
  .trial-card::before,
  .platform-img-wrap,
  .problem-right,
  .fade-in {
    animation: none;
    transition: none;
  }
  .fade-in,
  .fade-in--up,
  .fade-in--left,
  .fade-in--right,
  .fade-in--scale,
  .fade-in--clip,
  .fade-in--footer {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }
  .section-heading .text-teal,
  .au-page-title-text .text-teal,
  .au-h1 .text-teal,
  .platform-heading .text-teal {
    background: none;
    -webkit-text-fill-color: var(--teal);
            color: var(--teal);
  }
}