/* =====================================================
   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;
    --sky:          #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;    /* total navbar reserve (bar + room for logo pill to dip) */
    --nav-bar-h:    90px;     /* visible header bar height (teal border sits at its bottom) */
  }
  
  *, *::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;
  }

  .btn-p{
    padding: 0px;
    padding-left: 35px;
  }

  /* Small play disc inside video CTAs (hero secondary buttons). */
  .btn-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--white);
    flex-shrink: 0;
    font-size: 9px;
    line-height: 1;
  }
  .btn-play i {
    margin-left: 1px; /* optical centre for the play triangle */
    font-size: 24px;
  }

  /* Bold action line sitting directly above hero CTA buttons. */
  .hero-action,
  .au-hero-action {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--white);
    margin: 0 0 18px;
    max-width: 39rem;
  }
  
  /* 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-sky { 
    background: var(--sky); 
    color: #263B9C; 
    font-size: 18px;
    font-weight: 600;
    padding: 11.5px 40px;
    border-radius: 30px;
    border: 2px solid var(--sky);
  }
  .btn-sky:hover { 
    border: 2px solid var(--sky);
    color: var(--white);
    background: transparent;
  }
  
  
  
  
  .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; }
  }
  
  /* Header bar — solid band with a teal bottom border (replaces Union.svg). */
  .navbar-container {
    position: relative;
    height: var(--nav-bar-h);
    background: var(--primary);
    border-bottom: 3px solid var(--teal);
    box-shadow: 0 18px 40px rgba(35, 44, 62, 0.35);
  }
  
  .nav-inner {
    width: 100%;
    max-width: var(--container);
    height: var(--nav-bar-h);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* ── Nav links (left) ── */
  .nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
  }
  
  .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: 18px;
    font-weight: 400;
    color: var(--white);
    /*white-space: nowrap;*/
    line-height: normal;
    transition: color .25s;
  }
  .dropdown-subtitle{
     font-size:14px!important; 
  }
  .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);
  }
  
  .fa-xmark {
     font-size: 20px;
  }
  
  /* ── 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: 355px;
    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-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
  }
  
  .dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    max-width:240px;
  }
  .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
  ─── */
  /* ── Centred logo, sitting in a teal pill that dips below the bar ── */
  .nav-logo {
    position: absolute;
    left: 50%;
    top: 28px;                 /* near the top of the bar; pill dips past the teal line */
    transform: translateX(-50%);
    z-index: 1010;
    pointer-events: auto;
    display: flex;
    text-decoration: none;
  }
  
  /* Rounded pill — teal border, primary fill so it merges with the bar at
     the top and the teal outline reads as the line wrapping the logo. */
  .logo-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: var(--primary);
    border: 3px solid var(--azure);
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(35, 44, 62, 0.35);
  
  }
  
  .logo-img {
    display: block;
    width: 270px;
    height: auto;
    object-fit: contain;
  }
  
  /* ── Nav actions (right) ── */
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  /* Equal-sized type across nav links and the header action buttons. */
  .nav-actions .btn {
    font-size: 18px;
  }
  
  
  /* =====================================================
     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, 48%, 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: 18px;
    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, 51%, 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%; 
    /*width:  100%;*/
    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: cover;
    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 {
    height: auto;
    border-radius: 50%;
  }
  /* 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: 530px;
    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: 4px;
    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: 9px;
    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 */
    max-width:70%;
    margin:0 auto;
  }
  
  /* 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;
    max-width:85%;
  }
  
  /* =====================================================
     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;
    max-width:70%;
    margin:0 auto;
  }
  .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) {
  
    .nav-item a span,
    .nav-item > span:first-child,
    .dropdown-trigger span {
      font-size: 16px;
    }
    .nav-actions .btn {
      font-size: 16px;
    }
    .btn{
        font-size:16px;
    }
    .audience-card{
        max-width:750px;
        margin:0 auto;
    }
  
    /* 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 -10px 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: 300px; 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-nl-btn:disabled { opacity: 0.7; cursor: default; }
  .footer-nl-msg {
    margin: 10px 0 0;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
  }
  .footer-nl-msg--ok  { color: var(--teal); }
  .footer-nl-msg--err { color: #ffb4b4; }
  .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; border-bottom:3px solid var(--teal);}
  
  .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: 17px; 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;
    }
  }
  
  .platform-section > h2, .platform-section > p{
      padding:0 20px;
  }
  
  @media (max-width: 1300px) {
    .problem-cards {
      gap: 34px;
    }
  }
  
  @media (max-width: 1350px) {
    :root { --gutter: 40px; }
  
  }
  /* ── 1280px: standard laptops ──────────────────────────── */
  
  @media (max-width: 1280px) {
      .mockup-frame{
          width:92%;
      }
  .bg-wave-top{
      top:-400px;
  }
    /* Nav logo shrinks */
    .nav-logo { left: 50%; top: 50px; }
    .logo-pill { padding: 11px 36px; }
    .logo-img { width: 200px; }
  
    .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: 1320px) {
      .footer-brand{
          width:350px;
      }
      
  }
  /*@media (max-width: 1230px) {*/
  /*    .footer-brand{*/
  /*        width:300px;*/
  /*    }*/
      
  /*}*/
  @media (max-width: 1230px) {
    .footer-top {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 28px 32px;
      align-items: start;
    }
    .footer-brand {
      grid-column: 1 / 5;
      max-width: 100%;
      width: 100%;
      flex-direction:row;
    }
    .footer-tagline{
       margin-top:3px; 
    }
    .footer-newsletter {
      grid-column: 3 / 5;
      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) {
      .bg-wave-top{
      top:-200px;
  }
      .footer-tagline{
          margin-left:30px;
      }
      .footer-tagline,.footer-col ul li a{
          font-size:16px;
      }
      .footer-newsletter h4,.footer-col h4{
          font-size:20px;
      }
      
      
  
    :root { --gutter: 32px; }
    /*.page-bg { display: none; }*/
  
    /* Logo pill scales down but keeps the same centred-pill treatment. */
    .nav-logo  { left: 50%; top: 41px; }
    .logo-pill { padding: 12px 20px; }
    .logo-img  { width: 220px; }
    
    
     /* Nav: switch to hamburger */
    .navbar { background: transparent; height: var(--nav-h); }
    .nav-inner  { padding: 0 var(--gutter); }
    .nav-links, .nav-actions { display: none; }
    .nav-hamburger { display: flex; }
    .mobile-nav    { display: flex; }
  
    
    
    
    
    
    
    
    
    
    
  
    .mockup-frame {
      width: 70%;
      margin:0 auto;
    }
  
    /* 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: 50%; }
    .trial-desc{
        max-width:65%;
    }
  
    /* 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: 870px) {
      .p-trial{
        width:100%;
    }
  }
  @media (max-width: 800px) {
    .problem-img {
      min-height: 740px;
    }
  }
  
  /* ── 768px: tablets portrait & large phones ─────────────── */
  @media (max-width: 768px) {
    :root {
      --nav-h:     68px;
      --nav-bar-h: 68px;
      --gutter:    20px;
    }
    .bg-wave-top{
      top:-100px;
  }
    .footer-brand{
        flex-direction:column;
    }
    .footer-tagline{
        margin-left:0;
    }
    .footer-col{
        grid-column: 1 / 3;
    }
    .footer-top.fade-in.fade-in--footer.visible > div:nth-child(3){
         grid-column: 3 / 5;
    }
    .footer-newsletter{
         grid-column: 1 / 5;
    }
    /* Logo: compact pill, centred within the bar (no dip needed on mobile). */
    .nav-logo {
      left: 50%;
      top: 96%;
      transform: translate(-50%, -50%);
    }
    .logo-pill {
      padding: 12px 20px;
    }
    .logo-img {
      width: 215px;
    }
    
  
  .problem-card h3,.audience-card-body > p{
      font-size:16px;
  }
   
  
    /* 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%; padding-left:20px; }
    .problem-right { flex: unset; width: 100%; }
    .problem-img   { min-height: unset; height: auto;width:70%; margin:0 auto; }
  
    /* 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: 280px; }
    .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: 16px; line-height: 1.5; }
    .step-card p  { font-size: 16px; line-height: 1.5; max-width: 100%; }
  
    /* Trial */
    .trial-heading { font-size: 34px; line-height: 44px; }
    .trial-desc    { font-size: 16px; }
    .trial-note    { white-space: normal; font-size: 15px; }
    .trial-actions { align-items: stretch; }
    .trial-actions .btn { width: auto; 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: 16px; }
    .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; }
    .bg-wave-top{
      top:0px;
  }
  }
  
  /* ── 480px: small phones ────────────────────────────────── */
  @media (max-width: 480px) {
      .footer-newsletter h4, .footer-col h4{
          font-size:18px;
      }
      .feature-icon{
          width:40px;
          height:40px;
      }
      .feature-icon img{
          width:25px;
          height:25px;
      }
      .problem-img{
          width:100%;
      }
      .t-card,.p-card{
           max-width:100%;
      }
      .t-company-badge img,.p-company-badge img{
          transform:scale(0.8);
      }
      
      .step-icon img{
          width:25px;
          height:25px;
      }
      .step-icon{
          width:50px;
          height:50px;
      }
      .trial-desc{
        max-width:100%;
    }
    .mockup-frame{
        width:100%;
    }
    .trial-actions{
        width:100%;
    }
    :root {
      --nav-h:     64px;
      --nav-bar-h: 64px;
      --gutter:    16px;
    }
    .nav-logo {
      left: 52%;
    }
    .logo-pill { padding: 5px 14px; }
    .logo-img  { width: 230px; max-width: none; }
  
    .section          { padding: 56px 0; }
    .section-heading  { font-size: 28px; line-height: 38px; }
    .section-subtitle { font-size: 16px; }
  
    .btn { height: 52px; font-size: 16px; padding: 0 30px; gap: 10px; }
    .trial-actions .btn{
        padding:0 20px;
    }
  
    .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) {
    .logo-pill { padding: 4px 12px; }
    .logo-img  { width: 230px; }
  
    .btn { height: 48px; }
  
    .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) {
      .ct-review-text,.ct-detail-text{
          font-size:16px!important;
      }
      p{
          font-size:16px;
      }
      .step-icon{
          width:50px;
          height:50px;
      }
      .step-icon img{
          width:25px;
          height:25px;
      }
      .pp-x{
       max-width:600px;   
      }
      .platform-desc,.feature-item span{
          font-size:16px;
      }
    .hero-container {
      flex-direction: column;
      align-items: center;
        text-align: 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: 16px; line-height: 1.55; }
    .problem-card p,.au-bullet-list li, .section-subtitle,.audience-card-body > p,.check-list li,.step-card p,.trial-desc{
         font-size: 16px!important; line-height: 1.55; 
    }
    .au-bullet-list li{
        font-size:16px!important;
    }
    .hero-cta   { margin-top: 8px; gap: 18px;justify-content: center; }
    
    .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;
    
      text-align: center;
      padding-top: 80px;
      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: 16px; line-height: 1.55; }*/
    
    .audience-card{
        max-width:600px;
        margin:0 auto;
    }
    
    .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-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 50px; font-size: 16px; }
    .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-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;  }
    /*.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-bottom: 16px; gap: 18px; }
    .hero-title     { font-size: 24px; line-height: 1.25; }
    /*.hero-desc      { font-size: 15px; }*/
    .hero-cta .btn  { font-size: 16px; 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);
    }
  }