/* ─── CSS CUSTOM PROPERTIES (Design Tokens) ─── */

/* ─── Registered property for smooth conic-gradient animation ─── */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


    @font-face {
      font-family: 'PP Editorial New';
      src: url('https://www.eurekasec.com/wp-content/uploads/infinity/HTML/v3/fonts/PPEditorialNew-Regular.ttf') format('truetype');
      font-display: swap;
    }
    :root {
      --primary-100: #b2d6f8;
      --primary-500: #1884ea;
      --primary-700: #0e59a0;
      --primary-800: #0b447a;
      --primary-900: #083259;
      --primary-1000: #051f38;

      --secondary-100: #d3f1f9;
      --secondary-200: #a8e3f3;
      --secondary-400: #50c7e7;
      --secondary-500: #31bde3;
      --secondary-700: #1993b3;
      --secondary-800: #147994;
      --secondary-900: #105f75;

      --neutral-100: #ffffff;
      --neutral-200: #e5e5e5;
      --neutral-600: #7b7b7b;
      --neutral-800: #464646;
      --neutral-900: #2b2b2b;
      --neutral-1000: #111111;

      --font-heading: 'PP Editorial New', Georgia, serif;
      --font-body: 'Roboto', sans-serif;

      --card-bg: #e5faff;
      --accent-orange: #fb923c;
      --text-gray: #94a3b8;
      --border-color: #1f2937;
      --aritar-card-height: 520px;

      --glass-bg: rgba(255, 255, 255, 0.13);
      --glass-border: rgba(255, 255, 255, 0.15);
    }

    /* ─── BASE ─── */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; font-family: var(--font-body); color: var(--neutral-900); overflow-x: clip; scroll-behavior: smooth; }

    /* ─── OVERSCROLL PREVENTION ─── */
    /* Kills rubber-band bounce that exposes background behind hero/footer.
       overscroll-behavior is respected by Chrome/Firefox/Edge on all platforms
       and by iOS Safari 16+. The html background-color acts as a fallback for
       older Safari where the CSS property is ignored — it matches the hero top
       so any OS-level bounce reveals the same dark navy rather than white. */
    html {
      overscroll-behavior-y: none;
      background-color: var(--primary-900); /* matches hero dark top */
    }
    body {
      overscroll-behavior-y: none;
    }
    
   
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; height: auto; display: block; }



    /*Custom*/
    .footer-text-cast{
      color: var(--Color-Primary-900, #083259);
      text-align: center;
      font-family: Roboto;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px; /* 160% */
    }
    /*Custom end*/
  

    /* ─── TYPOGRAPHY HELPERS ─── */
    .heading-display {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: clamp(28px, 5vw, 60px);
      line-height: 1.2;
      letter-spacing: 0;
    }
    .heading-h3 {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: clamp(28px, 3.5vw, 40px);
      line-height: 1.3;
    }
    .heading-h4 {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: clamp(22px, 2.5vw, 32px);
      line-height: 1.25;
    }
    .label-caps {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 2.2px;
      text-transform: uppercase;
    }
    .body-base { font-size: 14px; line-height: 20px; font-weight: 400; }
    .body-sm   { font-size: 12px; line-height: 18px; font-weight: 400; }
    .body-xs   { font-size: 10px; line-height: 14px; font-weight: 400; }

    /* ─── GRADIENT TEXT UTILITY ─── */
    .gradient-text {
      background: linear-gradient(135deg, #105f75 0%, #083259 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ─── ITALIC SERIF SPAN ─── */
    .italic-serif { font-family: var(--font-heading); font-style: italic; font-weight: 400; }
    .roboto-serif { font-family: var(--font-body); font-style: italic; font-weight: 600; }


    .footer-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 24px;
    }

    /* ════════════════════════════════════════
       NAVBAR
    ════════════════════════════════════════ */
.site-navbar {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 48px);
      max-width: 1440px;
      z-index: 1000;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-radius: 12px;
      border: 1px solid transparent;
      box-shadow: none;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
      /* shrink-on-scroll: add these to transition when enabling compact nav below */
      /* , max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease */
    }

    .site-navbar.nav-hidden {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) translateY(-8px);
    }

    .site-navbar.scrolled {
      background: rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      /* compact nav on scroll — uncomment to enable shrink interaction */
      /* max-width: 860px; */
      /* padding: 4px 20px; */
    }
    .fixed-position { position: fixed; }

    /* ── Logo: crossfade + subtle hover lift ── */
    .brand a {
      position: relative;
      display: inline-block;
      opacity: 0.92;
      transition: opacity 0.25s ease;
    }
    .brand a:hover { opacity: 1; }
    .logo-light,
    .logo-dark { width: 120px; height: auto; display: block; }
    .logo-dark {
      position: absolute;
      top: 0; left: 0;
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .logo-light { transition: opacity 0.35s ease; }
    .site-navbar.scrolled .logo-light { opacity: 0; }
    .site-navbar.scrolled .logo-dark  { opacity: 1; }

    /* ── Nav links ── */
    .nav-pill-wrap {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
    }
    .nav-pill-wrap .nav-link {
      position: relative;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--neutral-200);
      opacity: 0.68;
      padding: 6px 17px;
      white-space: nowrap;
      text-decoration: none;
      transition: color 0.25s ease, opacity 0.25s ease;
    }
    /* Hero hover / active — full opacity */
    .nav-pill-wrap .nav-link:hover,
    .nav-pill-wrap .nav-link.nav-active { color: var(--neutral-100); font-style: italic; opacity: 1; }

    /* Scrolled base + hover + active */
    .site-navbar.scrolled .nav-pill-wrap .nav-link { color: var(--primary-700); opacity: 0.68; }
    .site-navbar.scrolled .nav-pill-wrap .nav-link:hover,
    .site-navbar.scrolled .nav-pill-wrap .nav-link.nav-active { color: var(--primary-900); opacity: 1; }

    /* Underline signal */
    .nav-pill-wrap .nav-link::after {
      content: "";
      position: absolute;
      left: 17px;
      bottom: 6px;
      width: 0;
      height: 1.5px;
      background: currentColor;
      transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-pill-wrap .nav-link:hover::after,
    .nav-pill-wrap .nav-link.nav-active::after { width: calc(100% - 34px); }

    /* ── Mobile icons ── */
    .login svg path,
    .login svg circle {
      stroke: var(--neutral-100);
      transition: stroke 0.25s ease;
    }
    .site-navbar.scrolled .login svg path,
    .site-navbar.scrolled .login svg circle { stroke: var(--primary-900); }

    /* Hamburger lines — animated to X on open */
    .ham-line {
      stroke: var(--neutral-100);
      stroke-width: 1.5;
      transform-box: fill-box;
      transform-origin: center;
      transition: transform 0.3s ease, opacity 0.25s ease, stroke 0.25s ease;
    }
    .site-navbar.scrolled .ham-line { stroke: var(--primary-900); }
    .menu-toggle-btn.open .ham-top { transform: translateY(6px) rotate(45deg); }
    .menu-toggle-btn.open .ham-mid { opacity: 0; transform: scaleX(0); }
    .menu-toggle-btn.open .ham-bot { transform: translateY(-6px) rotate(-45deg); }

    /* ── CTA button — inverts on scroll, directional hover ── */
    .btn-open-account {
      position: relative;
      display: inline-flex;
      align-items:center;
      gap: 6px;
      overflow: hidden;
      background: var(--neutral-100);
      color: var(--secondary-800);
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 14px;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-open-account .btn-text {
      display: inline-flex;
      align-items: center;
    }
    .btn-open-account .btn-arrow { display: none; }
    .site-navbar.scrolled .btn-open-account {
      background: var(--primary-800);
      color: var(--neutral-100);
    }
    .btn-open-account:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(24, 132, 234, 0.14);
    }
    .btn-open-account:active { transform: translateY(0); }

    /* Mobile nav toggle */
    .navbar-toggler-icon-custom {
      display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px;
    }
    .navbar-toggler-icon-custom span {
      display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px;
    }

    /* ════════════════════════════════════════
       HERO SECTION
    ════════════════════════════════════════ */
    .line-gap{
      display: inline-block;
      margin-top: 12px; /* adjust this value */
    }
    .mobile-break { display: none; }

    .hero {
      position: relative;
      min-height: calc(100vh - 100px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 110px;
      overflow: hidden;
      background-image: url('../Asset/Gradient bg_header_new.png');
      /* background-size: cover; */
      background-size: 100% 120%;
       background-position: top center;
        background-repeat: no-repeat;
      /* background-position: center;
      background-repeat: no-repeat; */
      /* background: var(--primary-700); */
    }
    /* ── Animated gradient overlay ── */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 30% 30%, rgba(49, 189, 227, 0.12), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(24, 132, 234, 0.10), transparent 65%);
      mix-blend-mode: screen;
      animation: gradientFloat 16s ease-in-out infinite;
      will-change: transform;
    }

    /* ── Noise texture overlay ── */
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      opacity: 0.04;
    }

    /* ── Mesh gradient blobs ── */
    .hero-blob {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      will-change: transform;
      z-index: 0;
    }
    .hero-blob-1 {
      width: 700px; height: 700px;
      top: -20%; left: -12%;
      background: radial-gradient(circle, rgba(80, 199, 231, 0.42) 0%, transparent 68%);
      filter: blur(90px);
    }
    .hero-blob-2 {
      width: 580px; height: 580px;
      top: 0%; right: -12%;
      background: radial-gradient(circle, rgba(24, 132, 234, 0.32) 0%, transparent 68%);
      filter: blur(100px);
    }
    .hero-blob-3 {
      width: 520px; height: 520px;
      bottom: 0%; left: 30%;
      background: radial-gradient(circle, rgba(49, 189, 227, 0.28) 0%, transparent 68%);
      filter: blur(85px);
    }




    /* ════════ MOBILE NAV — SINGLE SURFACE EXPANSION ════════ */

/* Overlay — dim backdrop below navbar */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 31, 56, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 999;
  pointer-events: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.mobile-overlay.open {
  background: rgba(5, 31, 56, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: all;
}

/* Dropdown — extends from inside navbar as a single continuous surface */
.mobile-nav {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  width: auto;
  background: linear-gradient(to bottom, #0b447a 0%, var(--primary-1000) 100%);
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.22s ease 0.04s;
}
.mobile-nav.open {
  transform: scaleY(1);
  opacity: 1;
  pointer-events: all;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.18s ease;
}

/* Flatten navbar bottom radius + match the gradient start colour exactly */
.site-navbar.menu-open {
  border-radius: 16px 16px 0 0;
  background: #0b447a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}

/* Nav links */
.mobile-nav-links {
  list-style: none;
  padding: 8px 20px 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-nav-links li {
  opacity: 0;
  transform: translateY(6px);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.mobile-nav.open .mobile-nav-links li:nth-child(1) { transition-delay: 0.06s; }
.mobile-nav.open .mobile-nav-links li:nth-child(2) { transition-delay: 0.11s; }
.mobile-nav.open .mobile-nav-links li:nth-child(3) { transition-delay: 0.16s; }
.mobile-nav.open .mobile-nav-links li:nth-child(4) { transition-delay: 0.21s; }
.mobile-nav.open .mobile-nav-links li:nth-child(5) { transition-delay: 0.26s; }
.mobile-nav.open .mobile-nav-links li { transform: translateY(0); opacity: 1; }

.mobile-nav-links a {
  display: block;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--neutral-100);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.mobile-nav-links a:hover {
  color: var(--secondary-400);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

/* Login text link in navbar (mobile) */
.login-text {
  color: var(--neutral-100);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
}
.site-navbar.scrolled .login-text { color: var(--primary-900); }

/* Force white navbar elements when drawer is open */
.site-navbar.menu-open .login-text  { color: var(--neutral-100); }
.site-navbar.menu-open .ham-line    { stroke: var(--neutral-100); }
.site-navbar.menu-open .logo-light  { opacity: 1; }
.site-navbar.menu-open .logo-dark   { opacity: 0; }
















  /* ── Scroll-to-top button ── */
  .scroll-top-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(8, 24, 52, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(80, 199, 231, 0.25);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  }
  .scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .scroll-top-btn:hover {
    background: rgba(8, 24, 52, 0.98);
    transform: translateY(-2px);
  }
  /* Glass style once over the dark footer */
  .scroll-top-btn.glass {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .scroll-top-btn.glass:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  .scroll-top-btn:active {
    transform: translateY(0);
  }
  .scroll-top-btn svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .foot-blob { position: absolute; pointer-events: none; }
    .foot-blob-0 {
      bottom:0; left: 50%; transform: translateX(-50%);
      width: 145%; height: 30%;
      
      filter: blur(40px);
     
      background:#0b447a;

      opacity:10;
    }
    .foot-blob-1 {
      bottom:20%; left: 50%; transform: translateX(-50%);
      width: 145%; height: 40%;
      border-radius: 50%;
      filter: blur(80px);
      background:#34abc6;

      opacity: 10;
    }


    .card-container {
      display: flex;
      flex-direction: column;
      gap: 50px;
      position: relative;
      overflow: visible;
    }

    .watermarkdiv{height:400px; position: relative;}
    .watermark{
      width:75%; height:60%; opacity:0.85; justify-self: center;bottom:0; position: absolute;
    }


    .hero-content { position: relative; z-index: 2; text-align: center; width: 100%; }

    /* Live pill */
    /* Dot breathe — still used for the live indicator */
    @keyframes breathe {
      0%, 100% { opacity: 0.55; transform: scale(1); }
      50%       { opacity: 1;   transform: scale(1.07); }
    }

    /* Rotating comet border */
    @keyframes glow-spin {
      to { --glow-angle: 360deg; }
    }

    /* Outer glow pulse — synced to border breathe */
    @keyframes pill-outer-pulse {
      0%, 100% { box-shadow: 0 0 0   0   rgba(80,199,231,0),    0 0 0  0   rgba(80,199,231,0); }
      50%       { box-shadow: 0 0 10px 0   rgba(80,199,231,0.18), 0 0 22px 2px rgba(80,199,231,0.07); }
    }

    /* Base border breathe — the always-visible cyan ring */
    @keyframes pill-border-breathe {
      0%, 100% { border-color: rgba(80,199,231,0.18); }
      50%       { border-color: rgba(80,199,231,0.5); }
    }

    .hero-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 16px;
      border-radius: 100px;
      /* Original glassy fill — sits behind content, above pseudo-elements */
      background: rgba(255, 255, 255, 0.05);
      border: none;
      margin-bottom: 48px;
      position: relative;
      isolation: isolate;
      animation: pill-outer-pulse 5s ease-in-out infinite;
    }

    /* ── Rotating comet — border ring only ──────────
       mask-composite: exclude punches out the content-box
       area, so the conic-gradient is only ever visible
       inside the 1.5 px padding strip — the border ring.
       Nothing bleeds into the pill center.
    ─────────────────────────────────────────────── */
    .hero-pill::before {
      content: '';
      position: absolute;
      inset: -1.5px;
      padding: 1.5px;              /* border thickness */
      border-radius: 100px;
      background: conic-gradient(
        from var(--glow-angle),
        transparent            0%,
        transparent            60%,
        rgba(80,199,231,0.12)  72%,
        rgba(80,199,231,0.45)  84%,
        rgba(255,255,255,0.48) 88%,
        rgba(80,199,231,0.45)  92%,
        rgba(80,199,231,0.08)  98%,
        transparent            100%
      );
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: glow-spin 4s linear infinite;
      z-index: 1;
    }

    /* ── Base border — always-visible breathing ring ─
       Sits behind the comet layer. Slowly pulses opacity.
    ─────────────────────────────────────────────── */
    .hero-pill::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 100px;
      border: 1px solid rgba(80,199,231,0.2);
      animation: pill-border-breathe 5s ease-in-out infinite;
      z-index: 0;
    }

    .hero-pill .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--secondary-500);
      flex-shrink: 0;
      position: relative; /* ensure above pseudo-elements */
      animation: breathe 5s ease-in-out infinite;
    }
    .hero-pill span {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 400;
      color: var(--secondary-100);
      position: relative;
    }

    /* Hero heading */
    .hero-heading {
      font-family: var(--font-heading);
      font-weight: 400;
      font-size: clamp(40px, 6vw, 58px);
      line-height: 1.2;
      color: var(--neutral-100);
      margin-bottom: 0;
    }
    .hero-sub {
      font-family: var(--font-body);
      font-size: 20px;
      font-weight: 400;
      color: #eef9ff;
      margin-top: 64px !important;
      margin-bottom: 0;
      letter-spacing: 2px;
      font-size: 10px;
    }

    /* Hero CTAs */
    .hero-ctas { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; margin-bottom: 40px; position: relative; z-index: 3; }
    /*
    .btn-hero-outline {
      border: 2px solid var(--neutral-100);
      background: rgba(0,0,0,0);
      color: var(--neutral-100);
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      padding: 16px 36px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .btn-hero-outline:hover {
      background: rgba(255,255,255,0.15);
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(49, 189, 227, 0.2);
      border-color: rgba(255,255,255,0.9);
    }
    .btn-hero-outline:active {
      transform: scale(0.98);
    }
    */
    .btn-hero-solid {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      overflow: hidden;
      background: var(--neutral-100);
      color: var(--secondary-800);
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      padding: 16px 32px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-hero-solid .btn-text {
      display: inline-flex;
      align-items: center;
    }
    .btn-hero-solid .btn-arrow { display: none; }

    .btn-hero-solid:active {
      transform: scale(0.97);
    }

    /* ── Swipe-letters character animation ── */
    .btn-char {
      display: inline-block;
      position: relative;
      overflow: hidden;
      line-height: 1.15;
      height: 1.15em;
      vertical-align: bottom;
      /* Custom property carries the correct off-screen reset transform per direction */
      --bot-reset: translateY(100%); /* even chars: bot rests below */
    }
    .btn-char-top,
    .btn-char-bot {
      display: block;
      transition: none; /* transitions only active during .btn-slot-play */
    }
    .btn-char-bot {
      position: absolute;
      top: 0; left: 0;
      white-space: pre;
      /* Default rest position: below the clip area */
      transform: translateY(100%);
    }
    /* space chars need a width */
    .btn-char.is-space { width: 0.3em; }

    /* Odd chars: bot rests above the clip area */
    .btn-char--down {
      --bot-reset: translateY(-100%);
    }
    .btn-char--down .btn-char-bot {
      transform: translateY(-100%);
    }

    /* ── Instant reset (no transition, no delay) ──
       btn-char-top snaps to visible (0); btn-char-bot snaps to its off-screen rest */
    .btn-slot-reset .btn-char-top {
      transition: none !important;
      transition-delay: 0s !important;
      transform: translateY(0) !important;
    }
    .btn-slot-reset .btn-char-bot {
      transition: none !important;
      transition-delay: 0s !important;
      transform: var(--bot-reset) !important;
    }

    /* ── Slot-machine play state ──
       Rockets in fast then decelerates — staggered per character */
    .btn-slot-play .btn-char-top,
    .btn-slot-play .btn-char-bot {
      transition: transform 0.55s cubic-bezier(0.08, 0.92, 0.12, 1);
      transition-delay: calc(var(--i) * 0.04s);
    }

    /* Even: top exits up */
    .btn-slot-play .btn-char-top       { transform: translateY(-100%); }
    /* ALL bots land at translateY(0) — same target regardless of direction */
    .btn-slot-play .btn-char-bot       { transform: translateY(0); }

    /* Odd: top exits down (bot is already covered by the rule above) */
    .btn-slot-play .btn-char--down .btn-char-top { transform: translateY(100%); }

    /* Hero phone mockup */
    .hero-phone {
      position: relative; z-index: 2;
      max-width: 600px;
      width: 80%;
      margin: 0 auto;
    }
    .hero-visual-wrap {
      position: relative;
      width: 100%;
      perspective: 1200px;
    }
    /* phone-wrapper receives scroll-driven 3D transforms via JS */
    .phone-wrapper {
      position: relative;
      width: 100%;
      transform: translateX(50px);
      will-change: transform;
      z-index: 2;
    }
    /* Soft ground shadow under phone */
    .phone-wrapper::after {
      content: '';
      position: absolute;
      bottom: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 58%;
      height: 26px;
      background: radial-gradient(ellipse at center, rgba(5, 31, 56, 0.22) 0%, transparent 70%);
      border-radius: 50%;
      filter: blur(10px);
      pointer-events: none;
      z-index: -1;
    }
    .phone-img-primary {
      display: block;
      width: 100%;
      height: auto;
      pointer-events: none;
      opacity: 1;
    }

    /* Hero fade overlay at bottom */
    .hero-fade {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 320px;
      background: linear-gradient(to top,
        rgba(255,255,255,1)    10%,
        rgba(255,255,255,0.85) 40%,
        rgba(255,255,255,0)    100%
      );
      pointer-events: none;
      z-index: 10;
    }

    /* ════════════════════════════════════════
       HERO — MOTION & DEPTH ENHANCEMENTS
    ════════════════════════════════════════ */

    /* ── Keyframes ── */
    @keyframes gradientFloat {
      0%,  100% { transform: translateY(0px); }
      50%        { transform: translateY(-14px); }
    }
    @keyframes orbit-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes hero-float {
      0%,  100% { transform: translateY(0px)   rotateZ(0deg);     }
      35%        { transform: translateY(-7px)  rotateZ(0.3deg);   }
      65%        { transform: translateY(-3px)  rotateZ(-0.12deg); }
    }
    @keyframes hero-rise {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes hero-rise-scale {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes hero-fade-up {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Entry animations ── */
    .hero-pill {
      animation:
        hero-fade-up     0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both,
        pill-outer-pulse 5s  ease-in-out                    1.4s infinite;
    }
    .hero-heading {
      animation: hero-rise    1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
    }
    .hero-sub {
      animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s  both;
    }
    .hero-ctas {
      animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
    }
    .hero-phone {
      animation:
        hero-rise-scale 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s  both,
        hero-float      9s   ease-in-out                    1.6s  infinite;
      will-change: transform;
    }

    /* ── Ambient glow behind phone ── */
    .hero-glow {
      position: absolute;
      top: 50%; left: calc(50% + 50px);
      transform: translate(-50%, -50%);
      width:  clamp(320px, 55vw, 920px);
      height: clamp(320px, 55vw, 920px);
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(80, 199, 231, 0.32) 0%,
        rgba(80, 199, 231, 0.16) 35%,
        rgba(178, 214, 248, 0.07) 60%,
        transparent 76%
      );
      filter: blur(38px);
      opacity: 1;
      pointer-events: none;
      z-index: 0;
      will-change: transform;
      transition: transform 0.12s ease;
    }

    /* ── Cursor-following glow (disabled — replaced by mesh blobs) ── */
    .hero-cursor-glow { display: none; }

    /* ── Orbital system ── */
    .hero-orbits {
      position: absolute;
      top: 50%; left: calc(50% + 50px);
      transform: translate(-50%, -50%);
      width:  clamp(300px, 64vw, 1060px);
      height: clamp(300px, 64vw, 1060px);
      pointer-events: none;
      z-index: 1;
      -webkit-mask-image: radial-gradient(ellipse at center, black 38%, transparent 72%);
              mask-image: radial-gradient(ellipse at center, black 38%, transparent 72%);
    }
    .orbit-ring {
      position: absolute;
      border-radius: 50%;
      top: 50%; left: 50%;
      will-change: transform;
    }
    .orbit-ring-1 {
      width: 43%; height: 43%;
      margin: -21.5% 0 0 -21.5%;
      border: 1px solid rgba(80, 199, 231, 0.22);
      animation: orbit-spin 20s linear infinite;
    }
    .orbit-ring-2 {
      width: 64%; height: 64%;
      margin: -32% 0 0 -32%;
      border: 1px solid rgba(80, 199, 231, 0.16);
      animation: orbit-spin 26s linear infinite reverse;
    }
    .orbit-ring-3 {
      width: 87%; height: 87%;
      margin: -43.5% 0 0 -43.5%;
      border: 1px solid rgba(80, 199, 231, 0.12);
      animation: orbit-spin 18s linear infinite;
    }
    .orbit-node {
      position: absolute;
      width: 7px; height: 7px;
      background: var(--secondary-400);
      border-radius: 50%;
      top: -3.5px; left: 50%;
      margin-left: -3.5px;
      box-shadow: 0 0 8px rgba(80, 199, 231, 0.55), 0 0 18px rgba(80, 199, 231, 0.25);
      will-change: transform;
    }

    /* ── Responsive — mobile hero ── */
    @media (max-width: 768px) {

      /* ── 1. Hero container — breathes naturally past one viewport ── */
      .hero {
        min-height: auto;
        padding-top: 140px;
        padding-bottom: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      /* ── 2. Content — centred column, generous rhythm ── */
      .hero-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 0 28px;
        width: 100%;
      }

      /* ── 3. Pill ── */
      .hero-pill { margin-bottom: 48px; align-self: center; }

      /* ── 4. Headline ── */
      .hero-heading {
        font-size: 40px;
        letter-spacing: -0.02em;
        line-height: 1.35;
        margin-bottom: 0;
        width: 100%;
      }
      .hero-heading .line-gap { display: block; margin-top: 2px; }
      .mobile-break { display: inline; }

      /* ── 5. Subtext — .hero-content .hero-sub beats .section-label { margin-top: 0 } ── */
      .hero-content .hero-sub {
        margin-top: 20px;
        margin-bottom: 0;
        letter-spacing: 0.07em;
        font-size: 11px;
        line-height: 1.8;
        opacity: 0.75;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }

      /* ── 6. CTA ── */
      .hero-ctas {
        margin-top: 32px;
        margin-bottom: 0;
        justify-content: center;
      }
      .btn-hero-solid {
        padding: 14px 36px;
        font-size: 14px;
        width: auto;
        min-width: 0;
      }

      /* ── 7. Phone — cinematic, large, immersive ── */
      .hero-phone {
        width: 100%;
        max-width: none;
        margin-top: 72px;
        margin-bottom: -60px;
        flex-shrink: 0;
        -webkit-mask-image: linear-gradient(to right, black 78%, transparent 100%);
        mask-image: linear-gradient(to right, black 78%, transparent 100%);
      }
      .phone-wrapper { transform: none; }
      .phone-img-primary {
        width: 140%;
        max-width: 140%;
        margin-left: -2%;
        display: block;
      }

      /* ── 8. Orbits — whisper quiet, atmospheric only ── */
      .orbit-ring-1 { opacity: 0.14; }
      .orbit-ring-2 { opacity: 0.08; }
      .orbit-ring-3 { display: none; }
      .hero-orbits {
        left: 50%;
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.75);
      }

      /* ── 9. Glow — soft centred bloom ── */
      .hero-glow {
        left: 50%;
        opacity: 0.35;
        transform: translate(-50%, -50%);
      }

      /* ── 10. Fade — gentle transition to next section ── */
      .hero-fade { height: 140px; }

      /* ── 11. Background motion — slow and calm ── */
      .hero::before { animation-duration: 30s; opacity: 0.55; }
      .hero::after  { opacity: 0.01; }
    }

    /* ── Reduced-motion ── */
    @media (prefers-reduced-motion: reduce) {
      .hero-glow          { transition: none; }
      .hero-cursor-glow   { display: none; }
      .hero-pill, .hero-heading, .hero-sub, .hero-ctas {
        animation: none; opacity: 1; transform: none;
      }
      /* Stop the glow spin; static base border from ::after still shows */
      .hero-pill::before  { animation: none; }
      .hero-pill::after   { animation: none; border-color: rgba(80,199,231,0.35); }
      .hero-phone { animation: none; opacity: 1; transform: none; }
      .orbit-ring { animation: none; }
      .hero::before { animation: none; }
    }

    /* ════════════════════════════════════════
       NUMBERS / STATS BAR
    ════════════════════════════════════════ */
    .stats-bar {
      position: relative;
      background: transparent;
      padding: 52px 0 40px;
      overflow: hidden;
    }
    /* Centred ambient glow — keeps the floating atmospheric feel */
    .stats-bar::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 100%;
      background: radial-gradient(ellipse, rgba(8, 148, 205, 0.055) 0%, transparent 68%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── Stat item ─────────────────────────── */
    .stats-bar .stat-item {
      text-align: center;
      padding: 28px 32px 36px;
      position: relative;
      z-index: 1;
      /* entrance: starts invisible */
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity 0.75s cubic-bezier(0.22,1,0.36,1),
        transform 0.75s cubic-bezier(0.22,1,0.36,1);
    }
    .stats-bar .stat-item.stat-revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* Soft ambient halo behind each stat */
    .stats-bar .stat-item::before {
      content: '';
      position: absolute;
      top: 40%; left: 50%;
      transform: translate(-50%, -50%);
      width: 220px; height: 160px;
      background: radial-gradient(ellipse, rgba(8,130,195,0.085) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
      animation: stat-ambient 6s ease-in-out infinite;
    }
    @keyframes stat-ambient {
      0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
      50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
    }

    /* Vertical separator on desktop */
    @media (min-width: 768px) {
      .stats-bar .col-md-4:not(:last-child) .stat-item::after {
        content: '';
        position: absolute;
        right: 0; top: 18%; height: 64%;
        width: 1px;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(8,50,89,0.1) 30%,
          rgba(8,50,89,0.1) 70%,
          transparent
        );
      }
    }

    /* ── Sparkline ─────────────────────────── */
    .stat-spark {
      display: flex;
      justify-content: center;
      margin: 0 auto 14px;
      width: 80px;
      color: #0e59a0;
      opacity: 0.18;
      transition: opacity 0.4s ease;
    }
    .stat-item:hover .stat-spark { opacity: 0.32; }
    .stat-spark svg path {
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
      transition: stroke-dashoffset 1.4s cubic-bezier(0.22,1,0.36,1) 0.3s;
    }
    .stat-item.stat-revealed .stat-spark svg path {
      stroke-dashoffset: 0;
    }

    /* ── Number ────────────────────────────── */
    .stat-number {
      font-family: var(--font-heading);
      font-weight: 400;
      font-style: normal;
      font-size: clamp(52px, 6.5vw, 84px);
      line-height: 1;
      display: inline-block;
      padding: 0.04em 0.06em;
      background: linear-gradient(130deg, #089ac3 0%, #083259 75%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 10px;
      letter-spacing: -0.025em;
    }

    /* ── Label ─────────────────────────────── */
    .stat-label {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      color: var(--neutral-900);
      line-height: 1.4;
      letter-spacing: 0.01em;
      margin-bottom: 5px;
    }

    /* ── Context ───────────────────────────── */
    .stat-context {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--neutral-600);
      opacity: 0.55;
      margin-top: 2px;
    }

    /* ── Live pulse dot ────────────────────── */
    .stat-live-dot { display: none; }

    /* ── Mobile overrides ──────────────────── */
    @media (max-width: 768px) {
      .stats-bar { padding-top: 56px; padding-bottom: 24px; }
      .stats-bar .stat-item {
        padding: 16px 16px 20px;
      }
      .stat-number { font-size: clamp(40px, 12vw, 56px); }
      .stats-bar .stat-item::before { display: none; }
    }

    /* ════════════════════════════════════════
       SECTION: WHY / FEATURE CARDS
    ════════════════════════════════════════ */
    /* ================================================
       FEATURES SCROLL STACK
    ================================================ */
    .feat-stack-scroll {
      position: relative;
      height: 500vh;
      margin-top: 0;
    }
    .feat-stack-sticky {
      position: sticky;
      top: 80px;
      height: calc(100vh - 140px);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: transparent;
    }
    /* Z-index: first card on top, exits first */
    .feat-stack-inner .feature-card:nth-child(1) { z-index: 4; }
    .feat-stack-inner .feature-card:nth-child(2) { z-index: 3; }
    .feat-stack-inner .feature-card:nth-child(3) { z-index: 2; }
    .feat-stack-inner .feature-card:nth-child(4) { z-index: 1; }
    /* Progress dots */
    .feat-prog {
      position: fixed;
      right: 32px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 100;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }
    .feat-prog.visible { opacity: 1; pointer-events: auto; }
    .feat-prog-dot {
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background: rgba(8, 50, 89, 0.18);
      transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                  height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                  background 0.3s ease,
                  transform 0.3s ease;
      cursor: pointer;
    }
    .feat-prog-dot.active {
      width: 4px;
      height: 28px;
      border-radius: 4px;
      background: var(--primary-700);
      transform: none;
    }

    /* ── Trust strip ───────────────────────────────────────────────────────── */
    .trust-strip {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 12px 0 64px;
    }
    .trust-item {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--primary-800);
      opacity: 0.38;
    }
    .trust-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--secondary-500);
      opacity: 0.35;
      flex-shrink: 0;
    }
    /* Combined NSE & BSE span — desktop hides it, mobile shows it */
    .trust-nse-bse-combined { display: none; }

    .section-why {
      background:
        radial-gradient(ellipse 90% 55% at 50% 8%, rgba(180, 228, 246, 0.14) 0%, transparent 72%),
        var(--neutral-100);
      padding: 96px 0 0;
    }

    /* ── Universal scroll-reveal base ──────────────────────────────
       Any element with .aritar-reveal starts hidden and transitions
       in when JS adds .show. Specific element types (.section-label,
       .heading-h3 etc.) may override the transition timing below.
    ─────────────────────────────────────────────────────────────── */
    .aritar-reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .aritar-reveal.show {
      opacity: 1;
      transform: translateY(0);
    }
    /* Stagger siblings — data-reveal-delay on each child */
    .aritar-reveal[data-reveal-delay="1"] { transition-delay: 0.12s; }
    .aritar-reveal[data-reveal-delay="2"] { transition-delay: 0.24s; }
    .aritar-reveal[data-reveal-delay="3"] { transition-delay: 0.36s; }

    /* Step cards - heavier elements, slower + deeper settle */
    .step-item.aritar-reveal {
      transform: translateY(32px);
      transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .step-item.aritar-reveal[data-reveal-delay="1"] { transition-delay: 0.14s; }
    .step-item.aritar-reveal[data-reveal-delay="2"] { transition-delay: 0.28s; }

    .section-label {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 2.8px;
      text-transform: uppercase;
      color: var(--secondary-500);
      margin-bottom: 20px;
      margin-top: 0;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
    }

    .section-label.show {
      opacity: 1;
      transform: translateY(0);
    }

    .heading-h3 {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
    }

    .heading-h3.show {
        opacity: 1;
        transform: translateY(0);
    }

    .section-why h2 {
      color: var(--primary-800);
      padding-bottom: 0 !important;
      margin-bottom: 48px;
    }

    .feature-card {
      background: linear-gradient(145deg, #f0fbff 0%, #e2f6fd 55%, #d8f1fc 100%);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 0;
      min-height: 400px;
      position: sticky;
      top: 90px;
      display: flex;
      align-items: center;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity;
    }

    .feature-card.show {
        opacity: 1;
        transform: translateY(0);
    }

    .feature-card:hover {
        transform: translateY(-3px);
    }

    .feature-card:nth-child(1) {
      z-index: 1;
      margin-top: 0;
    }

    .feature-card:nth-child(2) {
      z-index: 2;
      margin-top: 0px;
    }

    .feature-card:nth-child(3) {
      z-index: 3;
      margin-top: 40px;
    }

    .feature-card:nth-child(4) {
      z-index: 4;
      margin-top: 60px;
    }

     .feature-card-body {
      /* padding: 48px 56px; */
      padding: 48px 10px 48px 48px;
      max-width: 620px;
      z-index: 2;
      position: relative;
       transition: padding 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .feature-card-eyebrow {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 2.4px;
      text-transform: uppercase;
      color: var(--primary-800);
      opacity: 0.6;
      margin-bottom: 12px;
    }
    .feature-card-title {
      /* font-family: var(--font-heading); */
      font-family: var(--font-body);
      font-weight: 600;
      font-size: clamp(22px, 2.5vw, 28px);
      line-height: 1.4;
      color: var(--neutral-900);
      margin-bottom: 12px;
    }
    .feature-card-desc {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 400;
      color: var(--neutral-600);
      line-height: 1.7;
      margin-bottom: 20px;
    }
    .pill-group { display: flex; flex-wrap: nowrap; gap: 10px; }
    .pill-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      padding: 7px 14px;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(49, 189, 227, 0.22);
      border-radius: 100px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 11px;
      color: var(--secondary-800);
      line-height: 1.4;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
    }

    .feature-card.show .pill-tag {
        opacity: 1;
        transform: translateY(0);
    }

        .feature-card.show .pill-tag:nth-child(1) {
            transition-delay: 0.15s;
        }

        .feature-card.show .pill-tag:nth-child(2) {
            transition-delay: 0.25s;
        }

        .feature-card.show .pill-tag:nth-child(3) {
            transition-delay: 0.35s;
        }

        .feature-card.show .pill-tag:nth-child(4) {
            transition-delay: 0.45s;
        }
   .feature-card-img {
      position: absolute;
      padding: 10px 0px 10px 10px;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 100%;
      max-width: 65%;
      object-fit: contain;
      object-position: right center;
    }

    @media (max-width: 767px) {
      .feature-card { flex-direction: column; min-height: auto; max-height: none; overflow: hidden; }
      .feature-card-body { padding: 32px 24px 0px 24px; max-width: 100%; }
      /* .feature-card-img {
        position: relative; right: auto; bottom: auto;
        max-width: 100%; height: auto;
        width: 100%;
        object-position: center;
      } */

      .feature-card-img {
        position: relative !important;
        right: auto !important; left: auto !important; bottom: auto !important; top: auto !important;
        transform: none !important;
        /*width: 100% !important;*/
        max-width: 100% !important;
        height: 300px !important;
        object-fit: cover !important;
        object-position: 50% 0% !important;
        padding: 0 !important;
      }
      
      .w-md-100 {
    width: 60% !important;
    top: 15% !important;
  }

      /* 4th card — collapse to content height, no gap at bottom */
      #fc3 {
        min-height: 0 !important;
        padding-bottom: 0 !important;
      }


       /*  .feature-card{
          max-height:520px;
        }

        .feature-card-img {
        position: relative; right: -20px;left:-20px; bottom: 25px;
        
        height: 350px;
        width: 350%;
        object-position: center bottom;
        padding:0px;
        
      }  */






      .section-why { padding: 64px 0 40px; }
      .section-platform { padding: 64px 0 0; }
      .section-how { padding: 60px 0 60px; }
      .section-cta { padding: 80px 0 20px; }
      .phones-section { padding: 0 0 0; }
      .heading-h3 { padding: 16px 0 16px; }
      .feature-card-title { font-size: 16px; line-height: 1.3; }

      /* CTA text */
      .section-cta .heading-display { font-size: clamp(24px, 7.5vw, 36px); }
      .app-badges { gap: 10px; margin-top: 28px; }

      /* Phones image — scale to fit mobile */
      .phones-img-wrap { max-width: 100%; padding: 0 16px; }

      /* Cover panel override moved below global rule — see footer mobile block */
    }

    /* ════════════════════════════════════════
       FEATURES — TAB LAYOUT
    ════════════════════════════════════════ */

    /* Tab nav — glass pill track */
    .features-tab-nav {
      display: flex;
      width: fit-content;
      margin: 0 auto 32px;
      background: rgba(230, 247, 255, 0.30);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.42);
      box-shadow: 0 1px 8px rgba(8, 50, 89, 0.04);
      border-radius: 50px;
      padding: 5px;
      position: relative;
      gap: 0;
    }
    .tab-slider {
      position: absolute;
      top: 5px;
      left: 5px;
      height: calc(100% - 10px);
      background: rgba(255, 255, 255, 0.80);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.75);
      border-radius: 50px;
      box-shadow: 0 1px 8px rgba(8, 50, 89, 0.06),
                  inset 0 1px 0 rgba(255, 255, 255, 0.7);
      transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      z-index: 0;
    }
    .ftab {
      position: relative;
      z-index: 1;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 400;
      color: var(--secondary-800);
      opacity: 0.55;
      background: transparent;
      border: none;
      border-radius: 50px;
      padding: 10px 22px;
      cursor: pointer;
      transition: color 0.25s ease, opacity 0.25s ease;
      white-space: nowrap;
    }
    .ftab:hover { color: var(--primary-900); opacity: 0.8; }
    .ftab.active { color: var(--primary-900); font-weight: 500; opacity: 1; }

    /* Pane show/hide — directional slide */
    .ftab-pane { display: none; overflow: hidden; }
    .ftab-pane.active { display: block; }
    .ftab-pane.enter-from-right {
      animation: ftabFromRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .ftab-pane.enter-from-left {
      animation: ftabFromLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes ftabFromRight {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes ftabFromLeft {
      from { opacity: 0; transform: translateX(-20px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* Narrower content area — reduce white space */
    .feat-stack-inner {
      position: relative;
      width: 100%;
      max-width: 1140px;
      height: 520px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Override sticky/scroll-reveal behaviour inside tabs */
    .feat-stack-inner .feature-card {
      position: absolute;
      inset: 0;
      opacity: 1;
      transform: none;
      margin: 0;
      min-height: auto;
      border-radius: 20px;
      transition: none;
      will-change: transform, opacity;
      transform-origin: top center;
      overflow: hidden;
      background:
        radial-gradient(ellipse 60% 85% at 88% 52%, rgba(8, 148, 205, 0.09) 0%, transparent 62%),
        radial-gradient(ellipse 40% 40% at 12% 15%, rgba(180, 228, 246, 0.12) 0%, transparent 65%),
        linear-gradient(150deg, #f8fdff 0%, #e6f6fd 50%, #d6eefb 100%);
      border: none;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
      isolation: isolate;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 2px 20px rgba(8, 50, 89, 0.04),
        0 8px 64px rgba(8, 50, 89, 0.05);
    }
    .feat-stack-inner .feature-card:hover {
      transform: none;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 4px 32px rgba(8, 50, 89, 0.07),
        0 16px 72px rgba(8, 50, 89, 0.07),
        0 0 0 1px rgba(49, 189, 227, 0.07);
    }
    .feat-stack-inner .feature-card-body {
      max-width: 400px;
      padding: 48px 24px 48px 48px;
    }

    /* Alt background for cards 2 & 4 */
    .feat-stack-inner .ftab-card-alt {
      background:
        radial-gradient(ellipse 60% 85% at 88% 52%, rgba(8, 148, 205, 0.11) 0%, transparent 62%),
        radial-gradient(ellipse 40% 40% at 12% 15%, rgba(180, 228, 246, 0.14) 0%, transparent 65%),
        linear-gradient(150deg, #edf9fd 0%, #d5f0fb 50%, #c5e8fa 100%);
    }

    /* Geometric decoration — concentric arcs clipped by card overflow */
    .feat-stack-inner .feature-card::before {
      content: '';
      position: absolute;
      bottom: -110px;
      right: 32%;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      border: 1px solid rgba(49, 189, 227, 0.10);
      box-shadow: 0 0 0 44px rgba(49, 189, 227, 0.028),
                  0 0 0 88px rgba(49, 189, 227, 0.016),
                  0 0 0 132px rgba(49, 189, 227, 0.008);
      pointer-events: none;
      z-index: 1;
    }

    /* Ambient device glow — floats behind the phone image */
    .feat-stack-inner .feature-card::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 58%;
      height: 120%;
      background: radial-gradient(ellipse at 70% 50%, rgba(49, 189, 227, 0.10) 0%, rgba(8, 100, 165, 0.05) 45%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* Card image — slides in from right edge on tab switch, fades in from left edge */
    .feat-stack-inner .feature-card-img {
      opacity: 1;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 11%);
      mask-image: linear-gradient(to right, transparent 0%, black 11%);
    }
    .ftab-pane.active .feature-card-img {
      animation: imgSetIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
    }
    @keyframes imgSetIn {
      from { transform: translateX(28px); opacity: 0; }
      to   { transform: translateX(0);    opacity: 1; }
    }

    /* Card text body — subtle counter-slide */
    .feat-stack-inner .feature-card-body {
      opacity: 1;
    }
    .ftab-pane.active .feature-card-body {
      animation: bodySetIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
    }
    @keyframes bodySetIn {
      from { transform: translateX(-14px); opacity: 0; }
      to   { transform: translateX(0);     opacity: 1; }
    }

    /* Pill tags animate in per tab switch */
    .feat-stack-inner .pill-tag {
      opacity: 1;
      transform: none;
    }
    .ftab-pane.active .pill-tag {
      animation: ftabPillIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .ftab-pane.active .pill-tag:nth-child(1) { animation-delay: 0.18s; }
    .ftab-pane.active .pill-tag:nth-child(2) { animation-delay: 0.26s; }
    .ftab-pane.active .pill-tag:nth-child(3) { animation-delay: 0.34s; }
    .ftab-pane.active .pill-tag:nth-child(4) { animation-delay: 0.42s; }
    @keyframes ftabPillIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Mobile tab layout */
    @media (max-width: 767px) {
      .features-tab-nav { width: calc(100% - 32px); flex-wrap: wrap; border-radius: 16px; padding: 4px; }
      .tab-slider { border-radius: 12px; }
      .ftab { font-size: 13px; padding: 8px 14px; border-radius: 12px; }

      /* ── Feature stack → horizontal carousel on mobile ── */
      .feat-stack-scroll {
        height: auto !important;
        margin-top: 0;
      }
      .feat-stack-sticky {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        overflow: visible;
        padding-top: 0;
        display: block;
      }
      .feat-stack-inner {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        height: auto !important;
        overflow-x: scroll;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        padding: 0 28px 32px;
        max-width: 100%;
        scroll-padding-inline: 28px;
      }
      .feat-stack-inner::-webkit-scrollbar { display: none; }
      .feat-stack-inner .feature-card {
        position: relative !important;
        inset: auto !important;
        min-width: calc(100vw - 80px) !important;
        width: calc(100vw - 80px) !important;
        height: auto !important;
        min-height: 480px;
        filter: none !important;
        scroll-snap-align: center;
        flex-shrink: 0;
        border-radius: 20px;
        transform-origin: center center;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
        will-change: transform, opacity;
        background:
          radial-gradient(ellipse 60% 85% at 88% 52%, rgba(8, 148, 205, 0.09) 0%, transparent 62%),
          radial-gradient(ellipse 40% 40% at 12% 15%, rgba(180, 228, 246, 0.12) 0%, transparent 65%),
          linear-gradient(150deg, #f8fdff 0%, #e6f6fd 50%, #d6eefb 100%) !important;
      }
      .feat-stack-inner .feature-card-body { max-width: 100%; padding: 28px 24px 0; }
      .feat-stack-inner .feature-card::before { display: none; }
      /* 4th card — zoom image to push transparent bottom out of view */
      .feat-stack-inner #fc3 { min-height: 0 !important; padding-bottom: 0 !important; }
      #fc3 .feature-card-img { transform: scale(1.25); transform-origin: top center; }
      /* Pills wrap on mobile */
      .feat-stack-inner .pill-group { flex-wrap: wrap; }

      /* Progress dots → horizontal row below carousel */
      .feat-prog {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        flex-direction: row !important;
        justify-content: center;
        opacity: 1 !important;
        pointer-events: auto !important;
        padding: 4px 0 24px;
        gap: 6px;
      }
      .feat-prog-dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
      }
      .feat-prog-dot.active {
        width: 20px !important;
        height: 6px !important;
        border-radius: 3px !important;
      }

      /* Trust strip — single line on mobile */
      .trust-strip {
        flex-wrap: nowrap;
        gap: 6px 8px;
        padding: 16px 12px 48px;
        justify-content: center;
      }
      .trust-item { font-size: 8.5px; white-space: nowrap; }
      .trust-nse, .trust-bse { display: none; }
      .trust-nse-bse-combined { display: inline; }
    }

    /* Section card images (full-bleed) */
    .section-card-image img {
      width: 100%;
      border-radius: 8px;
      box-shadow: 0 8px 48px rgba(0,0,0,0.10);
    }

    /* ════════════════════════════════════════
       SECTION: PLATFORM / EVERY DEVICE
    ════════════════════════════════════════ */
    .section-platform {
      background: linear-gradient(180deg, #fff 0%, rgba(211,240,248,0.35) 60%, #f8fdff 100%);
      padding: 80px 0 0;
      overflow: hidden;
    }
    .section-platform .section-label { color: var(--secondary-500); }

    .section-platform .heading-h3 {
      font-size: clamp(26px, 3vw, 38px);
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 16px;
    }
    /* .section-platform .devices-img { width: 100%; max-width: 960px; margin: 40px auto 0; display: block; } */

    .section-platform .devices-img {
  width: 100%;
  /*max-width: 1300px;  increase this */
  max-width: 1000px; 
  margin: 40px auto 0;
  display: block;
}

    /* ════════════════════════════════════════
       SECTION: HOW IT WORKS
    ════════════════════════════════════════ */
    .section-how {
      background: linear-gradient(180deg, #f8fdff 74%, #fff 100%);
      padding: 120px 0 120px;
      position: relative;
      z-index: 1;
    }

    /* Cover panel — seamless transition into How It Works */
    .cover-panel {
      position: relative;
      z-index: 2;
      border-radius: 0;
      overflow: hidden;
      margin-top: 0;
      box-shadow: none;
    }

    .how-header { max-width: 300px; }

    /* ── How it Works — inline CTA ─────────── */
    .how-cta-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 28px;
      padding-top: 20px;
    }
    .how-cta-line {
      width: 40px;
      height: 3px;
      background: linear-gradient(90deg, var(--secondary-500), var(--primary-700));
      border-radius: 2px;
    }
    .how-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--primary-800);
      color: #fff;
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.4;
      font-weight: 500;
      letter-spacing: 0.01em;
      padding: 13px 28px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      transition: opacity 0.25s ease;
    }
    .how-cta-btn .btn-char { vertical-align: middle; }

    .how-cta-arrow {
      font-style: normal;
      opacity: 0.75;
    }
    .sticky-header {
      position: sticky;
      top: 120px;
    }
    .steps-scroll-region {
      position: relative;
    }
    .steps-sticky {
      position: relative;
      overflow: visible;
    }
    .steps-track {
      display: flex;
      flex-direction: column;
      gap: 28px;
      align-items: stretch;
      will-change: auto;
    }
    .step-item {
      flex: 1 1 auto;
      max-width: 100%;
    }
    .step-card {
      background: var(--neutral-100);
      width: 558px;
      max-width: 100%;
      margin: 0 auto;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      transition: box-shadow 0.3s ease;
    }
    .step-card:hover {
      box-shadow: 0 8px 40px rgba(8, 148, 205, 0.1);
    }
    .step-card-body { padding: 32px 32px 16px; flex-shrink: 0; }
    .step-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      background: rgba(80,199,231,0.05);
      border: 1px solid rgba(80,199,231,0.4);
      border-radius: 100px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 12px;
      color: var(--secondary-500);
      margin-bottom: 12px;
    }
    .step-card-title {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: clamp(20px, 2.2vw, 28px);
      line-height: 1.4;
      color: var(--neutral-900);
      margin-bottom: 10px;
    }
    .step-card-desc {
      font-size: 12px;
      font-weight: 400;
      color: var(--neutral-600);
      line-height: 1.7;
    }
    .step-card-img-wrap {
      margin: 0 24px 24px;
      overflow: hidden;
      border-radius: 12px;
    }
    .step-card-img {
      display: block;
      height: 300px;
      width: auto;
      max-width: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transform: translateZ(0);
    }
    @media (max-width: 767px) {
      /* How it works — stack header above cards, centred */
      .how-header {
        max-width: 100%;
        text-align: center;
        margin-bottom: 32px;
      }
      .how-header .how-cta-wrap {
        align-items: center;
      }
      .sticky-header {
        position: static !important;
        top: auto !important;
      }
      .steps-sticky { top: auto; }

      /* Step card — reduce video height so cards aren't towering */
      .step-card { width: 100%; border-radius: 16px; }
      .step-card-body { padding: 24px 20px 12px; }
      .step-card-img-wrap { margin: 0 16px 16px; }
      .step-card-img { width: 100%; height: auto; object-fit: unset; }
      .steps-track { gap: 20px; }

      /* Section how — tighter padding on mobile */
      .section-how { padding: 60px 0 60px; }

      /* Empowering India — reduce gap between heading and phones */
      .section-cta { padding: 80px 0 20px !important; }
      .phones-section { padding: 0 0 0 !important; }
    }

    /* ════════════════════════════════════════
       SECTION: CTA / EMPOWERING INDIA
    ════════════════════════════════════════ */
    .section-cta {
      background: var(--neutral-100);
      padding: 140px 0 60px;
    }
    .section-cta .heading-display {
      color: var(--primary-800);
      font-size: clamp(26px, 3.5vw, 44px);
      line-height: 1.2;
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    /* App download badges */
    .app-badges { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
    .app-badge {
      background: var(--neutral-1000);
      border-radius: 7px;
      padding: 11px 16px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 138px;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .app-badge:hover { opacity: 0.85; }
    .app-badge-icon { width: 24px; flex-shrink: 0; }
    .app-badge-text { text-align: left; }
    .app-badge-text .badge-upper {
      font-size: 6.5px;
      font-weight: 500;
      color: #fff;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 3px;
    }
    .app-badge-text .badge-lower {
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      line-height: 1;
    }




  
    
   
    





    /* Phone mockup section */
    .phones-section {
      background: var(--neutral-100);
      padding: 32px 0 80px;
      overflow: hidden;
      position: relative;
    }
    .phones-img-wrap {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
    }
    .phones-img-wrap img { width: 100%; display: block; }

    .phones-fade {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(to top, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);
      pointer-events: none;
    }

    /* ════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════ */
    .site-footer {
      position: relative;
      background: var(--neutral-100);
      background-image: url('../Asset/Gradient bg_footer_1.png');
      background-size: 100% 100%;
     background-position: center bottom;
      background-repeat: no-repeat;
      padding: 0px 0 0px;
    }
    .footer-logo-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
    .footer-logo-wrap img { height: 40px; width: auto; }
    .footer-tagline {
      font-size: 10px;
      font-weight: 400;
      color: var(--primary-1000);
      line-height: 16px;
      max-width: 200px;
    }
    .footer-col-title {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 14px;
      color: var(--primary-900);
      margin-bottom: 16px;
      line-height: 20px;
    }
    .footer-link {
      display: block;
      font-size: 12px;
      font-weight: 400;
      color: var(--primary-900);
      line-height: 19.5px;
      margin-bottom: 4px;
      transition: opacity 0.2s;
    }
    .footer-link:hover { opacity: 0.7; font-style: italic; }
    .footer-divider {
      border: none;
      border-top: 1px solid var(--neutral-200);
      margin: 32px 0;
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-copyright {
      font-size: 12px;
      font-weight: 400;
      color: var(--neutral-900);
      line-height: 18px;
    }
    .footer-socials { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
    .footer-socials a {
      font-size: 10px;
      font-weight: 500;
      color: var(--primary-900);
      line-height: 18px;
      transition: opacity 0.2s;
    }
    .footer-socials a:hover { opacity: 0.65; font-style: italic; }
    .footer-seo {
      font-size: 10px;
      font-weight: 600;
      color: var(--neutral-800);
      line-height: 18px;
      margin-top: 24px;
    }
    .footer-seo a { color: var(--neutral-900); text-decoration: underline; }
    .footer-seo a:hover { font-style: italic; }
    .footer-house {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 24px;
      margin-left: auto;
      text-align: right;
    }
    /* Footer link columns — text left-aligned, columns distributed by row space-between */
    .site-footer .footer-col-title,
    .site-footer .footer-link {
      text-align: left;
    }
    .footer-house span { font-size: 10px; font-weight: 600; color: var(--neutral-900); }
    .footer-house img { height: 80px; width: auto; }

    /* =========================
       ARITAR FEATURES SECTION
    ========================= */
    .aritar-features-section {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 80px 20px 100px;
        overflow: visible;
    }

    .aritar-section-header {
        text-align: center;
        margin-bottom: 60px;
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
    }

        .aritar-section-header.show {
            opacity: 1;
            transform: translateY(0);
        }

    .aritar-label {
        color: var(--accent-orange);
        font-weight: 700;
        letter-spacing: 2px;
        font-size: 0.78rem;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .aritar-section-title {
        font-size: clamp(2rem, 5vw, 3.2rem);
        font-weight: 500;
        line-height: 1.2;
    }

        .aritar-section-title i {
            font-family: serif;
            color: var(--text-gray);
        }

    /* =========================
       ARITAR STACKING CARDS
    ========================= */
    #aritar-cards-list {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 50px;
        overflow: visible;
    }

    .aritar-card {
        position: sticky;
        top: 90px;
        min-height: var(--aritar-card-height);
        background: var(--card-bg);
        border-radius: 28px;
        border: 1px solid var(--border-color);
        box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform, opacity;
        backdrop-filter: blur(2px);
    }

        .aritar-card.show {
            opacity: 1;
            transform: translateY(0);
        }

        .aritar-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
        }

    #aritar-card-1 {
        z-index: 1;
        margin-top: 0;
    }

    #aritar-card-2 {
        z-index: 2;
        margin-top: 20px;
    }

    #aritar-card-3 {
        z-index: 3;
        margin-top: 40px;
    }

    #aritar-card-4 {
        z-index: 4;
        margin-top: 60px;
    }

    .aritar-card-content {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
        min-height: var(--aritar-card-height);
        padding: 50px;
        gap: 40px;
    }

    .aritar-info-side h3 {
        font-size: clamp(2rem, 4vw, 2.7rem);
        margin: 14px 0 18px;
        line-height: 1.15;
        font-weight: 500;
    }

        .aritar-info-side h3 i {
            font-family: serif;
            color: var(--text-gray);
        }

    .aritar-info-side p {
        color: var(--text-gray);
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 30px;
        max-width: 540px;
    }

    .aritar-pill-container {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .aritar-pill {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid #374151;
        padding: 10px 18px;
        border-radius: 999px;
        font-size: 0.9rem;
        color: white;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
    }

    .aritar-card.show .aritar-pill {
        opacity: 1;
        transform: translateY(0);
    }

        .aritar-card.show .aritar-pill:nth-child(1) {
            transition-delay: 0.15s;
        }

        .aritar-card.show .aritar-pill:nth-child(2) {
            transition-delay: 0.25s;
        }

        .aritar-card.show .aritar-pill:nth-child(3) {
            transition-delay: 0.35s;
        }

        .aritar-card.show .aritar-pill:nth-child(4) {
            transition-delay: 0.45s;
        }

    .aritar-image-side {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .aritar-image-side img {
            width: 100%;
            max-width: 460px;
            height: auto;
            border-radius: 20px;
           /* box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.3);*/
            object-fit: cover;
            transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

    .aritar-card:hover .aritar-image-side img {
        transform: scale(1.015);
    }

    /* =========================
       LARGE TABLETS
    ========================= */
    @media (max-width: 1024px) {

        
       .step-card-img {
    max-width: 100%;
  }




        .aritar-features-section {
            padding: 70px 20px 90px;
        }

        .aritar-card-content {
            grid-template-columns: 1fr;
            text-align: center;
            padding: 40px 35px;
        }

        .aritar-info-side p {
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .aritar-pill-container {
            justify-content: center;
        }

        .aritar-image-side img {
            max-width: 420px;
        }

        .aritar-card {
            min-height: auto;
        }

        .aritar-card-content {
            min-height: auto;
        }
    }

    /* =========================
       TABLETS / MOBILE
    ========================= */
    @media (max-width: 768px) {
        :root {
            --aritar-card-height: auto;
        }



        .step-card-img {
          max-width: 100%;
        }




        .aritar-features-section {
            padding: 60px 16px 80px;
        }

        .aritar-section-header {
            margin-bottom: 40px;
        }

        #aritar-cards-list {
            gap: 18px;
        }

        .aritar-card {
            position: sticky;
            top: 70px;
            border-radius: 24px;
            min-height: auto;
            transform: translateY(20px);
        }

            .aritar-card.show {
                transform: translateY(0);
            }

            .aritar-card:hover {
                transform: translateY(0);
            }

        #aritar-card-1 {
            margin-top: 0;
        }

        #aritar-card-2 {
            margin-top: 12px;
        }

        #aritar-card-3 {
            margin-top: 24px;
        }

        #aritar-card-4 {
            margin-top: 36px;
        }

        .aritar-card-content {
            grid-template-columns: 1fr;
            text-align: center;
            padding: 26px 20px;
            gap: 22px;
            min-height: auto;
        }

        .aritar-info-side h3 {
            font-size: clamp(1.7rem, 7vw, 2.2rem);
        }

        .aritar-info-side p {
            font-size: 0.95rem;
            line-height: 1.7;
            margin-bottom: 22px;
            max-width: 100%;
        }

        .aritar-pill-container {
            gap: 10px;
            justify-content: center;
        }

        .aritar-pill {
            font-size: 0.84rem;
            padding: 8px 14px;
        }

        .aritar-image-side img {
            max-width: 100%;
            width: 100%;
            border-radius: 16px;
        }

        .sticky-header {
          position: static; /* or relative */
        }

        .hh{
          padding: 10px 0px 10px 0px;
        }
        
    }

    /* =========================
       SMALL MOBILE
    ========================= */
    @media (max-width: 480px) {
        .aritar-section-title {
            font-size: 1.9rem;
        }


        .step-card-img {
          max-width: 100%;
        }


        .feature-card {
          max-height: none !important;
          overflow: hidden !important;
        }

        .feature-card-img {
          position: relative !important;
          right: auto !important; left: auto !important; bottom: auto !important; top: auto !important;
          transform: none !important;
          /*width: 100% !important;*/
          max-width: 100% !important;
          height: 300px !important;
          object-fit: cover !important;
          object-position: 50% 0% !important;
          padding: 0 !important;
        }
        
        .w-md-100 {
    width: 60% !important;
    top: 15% !important;
  }

        /* 4th card — zoom image to push transparent bottom out of view */
        #fc3 {
          min-height: 0 !important;
          padding-bottom: 0 !important;
        }
        #fc3 .feature-card-img { transform: scale(1.25); transform-origin: top center; }



        /* .aritar-label {
            font-size: 0.72rem;
            letter-spacing: 1.5px;
        }

        #aritar-cards-list {
            gap: 14px;
        }

        .aritar-card {
            top: 55px;
            border-radius: 20px;
        }

        #aritar-card-1 {
            margin-top: 0;
        }

        #aritar-card-2 {
            margin-top: 10px;
        }

        #aritar-card-3 {
            margin-top: 20px;
        }

        #aritar-card-4 {
            margin-top: 30px;
        }

        .aritar-card-content {
            padding: 22px 16px;
            gap: 18px;
        }

        .aritar-info-side h3 {
            font-size: 1.55rem;
        }

        .aritar-info-side p {
            font-size: 0.92rem;
        }

        .aritar-pill {
            font-size: 0.8rem;
            padding: 8px 12px;
        } */

        .hero-heading { font-size: 28px; }
        
        
    }





     @media (max-width: 344px) {
        .aritar-section-title {
            font-size: 1.9rem;
        }


        .step-card-img {
          max-width: 100%;
        }


        .feature-card{
          max-height:480px;
        }

        .feature-card-img {
        position: relative; right: -20px;left:-20px; bottom: 15px;
        /* max-width: 140%;  */
        height: 400px;
        width: 400%;
        object-position: center bottom;
        padding:0px;
        
      }


        /* .aritar-label {
            font-size: 0.72rem;
            letter-spacing: 1.5px;
        }

        #aritar-cards-list {
            gap: 14px;
        }

        .aritar-card {
            top: 55px;
            border-radius: 20px;
        }

        #aritar-card-1 {
            margin-top: 0;
        }

        #aritar-card-2 {
            margin-top: 10px;
        }

        #aritar-card-3 {
            margin-top: 20px;
        }

        #aritar-card-4 {
            margin-top: 30px;
        }

        .aritar-card-content {
            padding: 22px 16px;
            gap: 18px;
        }

        .aritar-info-side h3 {
            font-size: 1.55rem;
        }

        .aritar-info-side p {
            font-size: 0.92rem;
        }

        .aritar-pill {
            font-size: 0.8rem;
            padding: 8px 12px;
        } */


        
        
    }











    /* ════════════════════════════════════════
       RESPONSIVE OVERRIDES
    ════════════════════════════════════════ */
    @media (max-width: 991px) {
      .site-navbar { padding: 10px 16px; width: calc(100% - 32px); top: 16px; border-radius: 10px; }
      .site-navbar.scrolled { padding: 6px 16px; }
      .nav-pill-wrap { display: none; }
      .nav-pill-wrap.open { display: flex; flex-direction: column; position: fixed; top: 80px; left: 0; right: 0; background: rgba(5,31,56,0.97); padding: 16px; border-radius: 0 0 16px 16px; z-index: 999; }
      .nav-pill-wrap.open .nav-link { color: #fff; border-radius: 8px; }
      .mobile-menu-toggle { display: flex !important; }
    }
    @media (min-width: 992px) {
      .mobile-menu-toggle { display: none !important; }
      .login{display:none;}
      
     
    }
    @media (max-width: 576px) {
      .site-navbar { top: 12px; width: calc(100% - 24px); border-radius: 10px; }
      .hero { padding-top: 124px; }
      .hero-heading { font-size: 40px; }
      .hero-sub { font-size: 9px; }
      .btn-hero-outline, .btn-hero-solid { padding: 12px 24px; font-size: 14px; }
      .feature-card-body { padding: 24px 20px; }
      .section-platform, .section-how, .section-cta, .site-footer { padding-left: 16px; padding-right: 16px; }
    }

    /* ── Footer mobile ──────────────────────────────────────────── */
    @media (max-width: 767px) {
      /* Cover panel — seamless on mobile, no radius or shadow */
      .cover-panel { border-radius: 0 !important; box-shadow: none !important; margin-top: 0 !important; overflow: visible !important; }

      /* Show mobile accordion footer, hide desktop column footer */
      #footer01 { display: none !important; }
      #footer02 { display: block !important; }

      /* Logo col — full width, centred */
      .site-footer .col-lg-4.col-md-6 {
        width: 100%;
        text-align: center;
        margin-bottom: 28px;
      }
      .footer-logo-wrap { justify-content: center; }
      .footer-tagline { max-width: 260px; margin: 0 auto; text-align: center; }

      /* Link columns — 2-up grid (Bootstrap col-6 already handles this) */
      .site-footer .footer-col-title,
      .site-footer .footer-link { text-align: left; }

      /* Footer bottom — stack, centred */
      .footer-top {
        flex-direction: column;
        gap: 16px;
      }
      .footer-house {
        margin-left: 0;
        justify-content: center;
        text-align: center;
        margin-top: 16px;
      }
      .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: center;
        text-align: center;
      }
      .footer-socials { justify-content: center; }

      /* Footer02 app store badges — smaller on mobile */
      #footer02 .app-badge { padding: 7px 12px; }
      #footer02 .app-badge-icon { width: 95px !important; height: 26px !important; }

    }