@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  /* overflow: hidden; */
}

body {
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  background-color: #fff;
  color: #121316;
  overflow-x: hidden;
}

/* Fixed Outer Header Container */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  /* Allows click-through outside the inner bar */
}

/* Inner Wrapper - The Main Pill Container */
.header-inner {
  pointer-events: auto;
  width: min(1200px, 90vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  border-radius: 100px;
  /* background: rgba(255, 255, 255, 0); */
  background: #ebeef5;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  will-change: transform, background, box-shadow, width;
  transition:
    width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.5s ease,
    box-shadow 0.5s ease,
    padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Logo Container */
/* .logo-container {
      display: flex;
      align-items: center;
      background: #ffffff;
      padding: 6px;
      border-radius: 50px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
      will-change: transform, box-shadow, background;
      transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    } */

.logo-container {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  /* padding: 15px 30px; */
  /* background-color: #ffffff; */
  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
  max-width: 1200px;
  /* margin: 0 auto; */
}

.logo-icon img {
  height: 36px;
  /* Adjust height according to your image size */
  width: auto;
  display: block;
}

h1.company-name {
  font-size: 22px;
  margin: 0 10px 0 7px;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Middle Content (Text) */
.company-name {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 20px;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

/* Last Image (SAP Partner Logo) */
.partner-logo img {
  height: 38px;
  /* Adjust height according to your image size */
  width: auto;
  display: block;
}

@media screen and (min-width: 1024px) {
  button#menu-toggle {
    display: none;
  }
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .company-name {
    font-size: 1.6rem;
    margin: 0;
  }
}

.logo-icon {
  width: 36px;
  height: 38px;
  /* background-color: #ffffff; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon::before,
.logo-icon::after {
  content: '';
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  margin: 0 2px;
}

/* Center Nav Box */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  background: transparent;
  padding: 8px 24px;
  border-radius: 40px;

  will-change: transform, box-shadow, background, padding;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Options Badge */
.hero-options {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #efefef;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: #666;
  margin-right: 8px;
  opacity: 1;
  transform-origin: center center;
  will-change: transform, opacity, max-width, margin;
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
}

.hero-options span.opt {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.hero-options span.opt-1 {
  background-color: #ccff00;
  color: #000;
}

.hero-options span.opt-2 {
  background-color: #333;
  color: #fff;
}

.hero-options span.opt-3 {
  background-color: #333;
  color: #fff;
}

nav a {
  text-decoration: none;
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
  font-weight: 600;
  transition: color 0.2s;
}

nav a:hover {
  color: #000;
}

/* Right CTA Button */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  /* background-color: #ffffff; */
  background-color: #232326;
  padding: 6px 18px 6px 8px;
  border-radius: 30px;
  text-decoration: none;
  /* color: rgb(36, 36, 38); */
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  will-change: transform, box-shadow, background;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-cta-arrow {
  /* background-color: #f0f0f0; */
  background-color: #fccf0f;
  color: #000;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* ----------------------------------------------------
       SCROLLED STATE - BUTTER SMOOTH MORPH
    ---------------------------------------------------- */
header.scrolled .header-inner {
  /* width: min(1100px, 92vw); */
  background: #ebeef5;
  ;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  padding: 6px 8px 6px 10px;
}

header.scrolled .logo-container,
header.scrolled .nav-links,
header.scrolled .nav-cta {
  background: transparent;
  box-shadow: none;
  color: #000;
}

header.scrolled .nav-links {
  padding: 0;
}

/* Ultra Smooth Badge Collapse */
header.scrolled .hero-options {
  opacity: 0;
  transform: scale(0.7);
  max-width: 0;
  margin-right: 0;
  padding: 0;
  pointer-events: none;
}

/* Hero Main Section */
.hero-section {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0px 35px 0 35px;
  display: grid;
  grid-template-columns: 2.1fr 1.9fr;
  align-items: center;
  /* min-height: 180vh; */
  position: relative;
  background-color: #ebeef5;
}

.hero-left {
  padding-bottom: 0px;
}

.badge-ai {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: #444;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 14px;
}

.badge-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-left: 2px solid #666;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

.hero-title {
  font-size: 72px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -1.5px;
  color: #111111;
  margin-bottom: 24px;
}

.hero-subtitle {
  font-size: 16px;
  color: rgba(36, 36, 38, 0.75);
  line-height: 1.5;
  max-width: 360px;
  margin-bottom: 40px;
}

.cta-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn-main {
  display: flex;
  align-items: center;
  background-color: #232326;
  padding: 6px 20px 6px 6px;
  border-radius: 40px;
  text-decoration: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.2s ease;
}

.btn-main:hover {
  transform: translateY(-2px);
}

.btn-arrow-box-serve {
  width: 35px !important;
  height: 35px !important;
}

.btn-arrow-box {
  width: 44px;
  height: 44px;
  background: #fccf0f;
  /* background-color: #ccff00; */
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  color: #000;
  font-size: 18px;
}

/* Infinite Avatar Marquee */
.trusted-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.avatar-carousel-wrapper {
  width: 120px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.avatar-carousel-track {
  display: flex;
  gap: -8px;
  width: max-content;
  animation: scroll-avatars 10s linear infinite;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  object-fit: cover;
  margin-right: -8px;
  flex-shrink: 0;
}

.trusted-text {
  font-size: 12px;
  color: #888888;
}

@keyframes scroll-avatars {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.hero-right {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
}

.hero-image-container {
  position: relative;
  width: 635px;
}

.hero-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  .hero-section {
    grid-template-columns: 1fr;
    padding: 120px 20px 20px 20px;
  }

  .hero-title {
    font-size: 42px;
  }
}


/* Outer Wrapper Section */
.trusted-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  padding: 60px 20px;

}

/* Section Top Header Bar */
.trusted-header {
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  margin-bottom: 24px;
  padding: 20px 34px;
}

.trusted-title {
  /* font-size: 16px; */
  font-size: 30px;
  font-weight: 400;
  color: #000;
      padding-bottom: 20px;
  /* letter-spacing: -0.2px; */
}

.case-study-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #525866;
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.case-study-badge:hover {
  opacity: 0.8;
}

.icon-box {
  width: 28px;
  height: 28px;
  background-color: #fccf0f;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box svg {
  width: 16px;
  height: 16px;
  stroke: #121316;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Soft Blue-Gray Container for Logos */
.logos-container {
  background-color: #ebf0f7;
  border-radius: 28px;
  padding: 48px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.logo-item:hover {
  opacity: 0.85;
}

.logo-item svg {
  height: 32px;
  width: auto;
  fill: #22262e;
}

/* Responsive Scaling */
@media (max-width: 900px) {
  .logos-container {
    padding: 32px 24px;
    justify-content: center;
    gap: 36px;
  }

  .logo-item svg {
    height: 26px;
  }
}

/* stack section */





/* =========================================
   TRUSTED LOGOS - CONTINUOUS CAROUSEL
========================================= */

.trusted-carousel {
    width: 100%;
    overflow: hidden;
    background-color: #ebeef5;
    border-radius: 28px;
    padding: 48px 0;
    position: relative;
    box-sizing: border-box;
}

.trusted-header {
    position: relative;
    z-index: 2;
    padding: 0 38px;
    margin-bottom: 35px;
}

.trusted-title {
    text-align: center;
    margin: 0;
}

/* Carousel viewport */

.trusted-carousel-viewport {
    width: 100%;
    overflow: hidden;
}

/* Moving track */

.trusted-carousel-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 0;
    animation: trustedContinuousMove 45s linear infinite;
    will-change: transform;
}

/* Each complete logo set */

.trusted-carousel-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 65px;
    padding: 0 32px;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* Individual logos */

.trusted-carousel-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    opacity: 0.65;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.trusted-carousel-logo:hover {
    opacity: 1;
    transform: scale(1.06);
}

/* Logo images */

.trusted-carousel-logo img {
    display: block;
    width: 150px;
    /* height: 55px; */
    object-fit: contain;
    flex-shrink: 0;
}

/* Seamless infinite movement */

@keyframes trustedContinuousMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Pause when hovering */

.trusted-carousel:hover .trusted-carousel-track {
    /* animation-play-state: paused; */
}

/* Tablet */

@media (max-width: 900px) {
    .trusted-carousel {
        padding: 38px 0;
        border-radius: 24px;
    }

    .trusted-header {
        margin-bottom: 28px;
    }

    .trusted-carousel-group {
        gap: 45px;
        padding: 0 24px;
    }

    .trusted-carousel-logo img {
        width: 125px;
        height: 45px;
    }

    .trusted-carousel-track {
        animation-duration: 38s;
    }
}

/* Mobile */

@media (max-width: 600px) {
    .trusted-carousel {
        padding: 30px 0 38px;
        border-radius: 20px;
    }

    .trusted-header {
        margin-bottom: 24px;
    }

    .trusted-title {
        font-size: 22px;
        line-height: 1.4;
    }

    .trusted-carousel-group {
        gap: 30px;
        padding: 0 18px;
    }

    .trusted-carousel-logo img {
        width: 105px;
        height: 60px;
    }

    .trusted-carousel-track {
        animation-duration: 30s;
    }
}

/* Accessibility: reduced motion */

@media (prefers-reduced-motion: reduce) {
    .trusted-carousel-track {
        animation: none;
        transform: none;
    }
}





.makro-hero-section {
  background-color: #f7f9f6;
  color: #121826;
  width: 100%;
  min-height: 100vh;
  padding: 80px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  box-sizing: border-box;
}

.makro-hero-section *,
.makro-hero-section *::before,
.makro-hero-section *::after {
  box-sizing: border-box;
}

.makro-hero-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

/* ================================
       HERO TITLE
    ================================= */

.makro-hero-title {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #121826;
  max-width: 960px;
  margin: 0 auto 64px;
}

.makro-hero-word {
  display: inline-block;
  opacity: 0;
  color: #121826;
  margin-right: 0.22em;

  animation-name: makroWordReveal;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
  animation-delay: calc(var(--makro-word-delay) * 0.08s + 0.2s);
}

@keyframes makroWordReveal {
  0% {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ================================
       FEATURES
    ================================= */

.makro-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  text-align: left;
}

.makro-feature-card {
  background-color: #ffffff;
  border: 1px solid #eaedf1;
  border-radius: 16px;
  padding: 20px 24px;

  display: flex;
  align-items: center;
  gap: 16px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);

  opacity: 0;

  animation-name: makroCardReveal;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
  animation-delay: calc(1.8s + (var(--makro-card-index) * 0.25s));
}

@keyframes makroCardReveal {
  0% {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ================================
       ICON
    ================================= */

.makro-feature-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;

  background-color: #ccff00;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.makro-feature-icon svg {
  width: 22px;
  height: 22px;

  stroke: #121826;
  stroke-width: 2;
  fill: none;
}

/* ================================
       FEATURE TEXT
    ================================= */

.makro-feature-content h3 {
  margin: 0 0 2px;
  padding: 0;

  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 600;

  color: #121826;
}

.makro-feature-content p {
  margin: 0;
  padding: 0;

  font-size: 0.875rem;
  line-height: 1.5;

  color: #64748b;
}

/* ================================
       TABLET
    ================================= */

@media (max-width: 850px) {

  .makro-hero-section {
    padding: 60px 20px;
  }

  .makro-hero-title {
    font-size: 2.2rem;
  }

  .makro-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
       MOBILE
    ================================= */

@media (max-width: 600px) {

  .makro-hero-section {
    padding: 50px 16px;
  }

  .makro-hero-title {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 45px;
  }

  .makro-feature-card {
    padding: 18px;
  }

  .makro-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }
}








/* Makro – Stack Cards | all classes prefixed mkr-stk- */
:root {
  --mkr-stk-ink: #16181d;
  --mkr-stk-mute: #8a8e97;
  --mkr-stk-line: #ececee;
  --mkr-stk-lime: #dcff55;
  --mkr-stk-pill: #eef0f4;
  --mkr-stk-ease: cubic-bezier(.22, .8, .2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.mkr-stk-body {
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  color: var(--mkr-stk-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased
}

/* ---------- INTRO ---------- */
.mkr-stk-intro {
  max-width: 1160px;
  /* max-width: 1280px; */
  margin: 0 auto;
  /* padding: 110px 32px 90px */
  /* padding: 75px 32px 25px; */
  padding: 72px 32px 72px;
}

.mkr-stk-statement-line {
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 14px;
}

.mkr-stk-chart img {
  width: 100%;
}

.mkr-stk-statement-para {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 8px;
  color: rgba(36, 36, 38, 0.75);
}

.mkr-stk-statement {
  font-size: 48px;
  line-height: 1.28;
  font-weight: 400;
  letter-spacing: -.02em;
  text-align: center;
  max-width: 860px;
  margin: 0 auto 13px;
}

.mkr-stk-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  transition: opacity .7s var(--mkr-stk-ease), filter .7s var(--mkr-stk-ease), transform .7s var(--mkr-stk-ease)
}

.mkr-stk-statement.is-in .mkr-stk-word {
  opacity: 1;
  filter: blur(0);
  transform: none
}

.mkr-stk-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 45px;
  padding-top: 34px;
  border-top: 1px solid var(--mkr-stk-line)
}

.mkr-stk-feature {
  display: flex;
  align-items: center;
  gap: 14px
}

.mkr-stk-feature b {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: rgba(36, 36, 38, 0.75);
}

.mkr-stk-feature small {
  display: block;
  font-size: 16px;
  color: rgba(36, 36, 38, 0.75);
  line-height: 1.4;
  margin-top: 2px
}

.mkr-stk-ficon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fccf0f;
  display: grid;
  place-items: center;
  flex: none
}

.mkr-stk-ficon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #1d2200;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

@media (max-width: 768px) {
  .mkr-stk-statement-line {
    font-size: 18px;
  }

  .mkr-stk-intro {
    padding: 40px 20px 40px;
  }

  .mkr-stk-statement {
    font-size: 28px;
    line-height: 1.1;
  }

  .mkr-stk-statement-para {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 13px;
  }

  .mkr-stk-features {
    margin-top: 28px;
  }
}




/* Layout Container */
.fp-hero-layout--center {
  text-align: center;
  /* padding: 42px 20px 25px; */
  padding: 65px 20px 25px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Badge / Tag Component */
.fp-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 5px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fp-hero-tag--dark {
  background-color: #4a4b51;
  color: #ffffff;
}

.fp-hero-tag--light {
  background-color: #e8ecf2;
  color: #4b4f5a;
}

/* Icon inside Tag */
.fp-hero-tag-icon {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #333333;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
}

.fp-hero-tag--light .fp-hero-tag-icon {
  background-color: #ffffff;
}

/* Heading */
.fp-hero-title {
  font-weight: 400;
  font-size: 48px;
  /* letter-spacing: -0.03em; */
  line-height: 1.15;
  margin: 20px 0 14px;
}

/* Subheading / Description */
.fp-hero-description {
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 540px;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .fp-hero-title {
    font-size: 28px;
    line-height: 1.3;
    /* margin: 20px 0 16px; */

  }

  .fp-hero-layout--center {
    /* padding: 32px 16px 40px; */
    /* padding: 20px 16px 40px; */
            padding: 40px 16px 32px;
  }

  /* Hide strict line break on small screens so text flows naturally */
  .fp-hero-break {
    display: none;
  }
}

/* ---------- STACK ---------- */
.mkr-stk-stack {
  padding: 0 20px 100px;
}

.mkr-stk-card {
  position: sticky;
  top: 20px;
  /* height:calc(100vh - 40px); */
  min-height: 460px;
  margin-bottom: 12vh;
  border-radius: 30px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #d7d9e0;
  border: 5px solid #cfd2da;
  box-shadow: 0 -10px 40px rgba(20, 22, 30, .06);
  transform-origin: 50% 0;
  will-change: transform, filter
}

.mkr-stk-card:last-child {
  margin-bottom: 0
}

.mkr-stk-bg {
  position: absolute;
  inset: -6%;
  filter: blur(40px);
  z-index: 0
}

.mkr-stk-card--1 .mkr-stk-bg {
  background: radial-gradient(60% 55% at 85% 20%, #aab9c3, transparent 70%), radial-gradient(50% 50% at 15% 100%, #c99f8e, transparent 70%), radial-gradient(70% 60% at 60% 70%, #c7c3cf, transparent 70%), #cdd0d8
}

.mkr-stk-card--2 .mkr-stk-bg {
  background: radial-gradient(55% 50% at 20% 5%, #cfb9c3, transparent 70%), radial-gradient(50% 45% at 55% 100%, #c8884f, transparent 70%), radial-gradient(60% 60% at 10% 80%, #b69a9b, transparent 70%), #ddd0d6
}

.mkr-stk-card--3 .mkr-stk-bg {
  background: radial-gradient(60% 55% at 90% 15%, #b9c4d2, transparent 70%), radial-gradient(55% 50% at 40% 100%, #d5a77d, transparent 70%), radial-gradient(60% 60% at 70% 55%, #d8c6d2, transparent 70%), #d9d3dc
}

.mkr-stk-card--4 .mkr-stk-bg {
  background: radial-gradient(40% 50% at 0% 90%, #3f6c78, transparent 70%), radial-gradient(40% 45% at 35% 100%, #c9855a, transparent 70%), radial-gradient(60% 50% at 60% 0%, #d8c6cf, transparent 70%), radial-gradient(40% 40% at 100% 100%, #6e5a52, transparent 70%), #d6d0d8
}

.mkr-stk-flip .mkr-stk-visual {
  order: 0
}

/* panel */
.mkr-stk-panel {
  position: relative;
  z-index: 2;
  background: #fff;
  margin: 0;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 22px;
  margin: 14px
}

.mkr-stk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mkr-stk-pill);
  color: #5a5e66;
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px
}

.mkr-stk-pill svg,
.mkr-stk-note svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mkr-stk-title {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  margin: 46px 0 20px;
  max-width: 430px
}

.mkr-stk-text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(36, 36, 38, 0.75);
  /* max-width: 300px; */
  font-weight: 400;
}

.mkr-stk-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: rgba(36, 36, 38, 0.75);
}

.mkr-stk-note a {
  text-decoration: none;
  color: rgba(36, 36, 38, 0.75);
}

.mkr-stk-reveal {
  transition: opacity .2s linear, filter .2s linear, transform .2s linear
}

/* visual */
.mkr-stk-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 30px
}

@media (max-width: 768px) {
  .mkr-stk-visual.visual-zoho {
        margin-top: 20px !important;
    padding-bottom: 0 !important;
  }
}

/* ui cards */
.mkr-stk-ui {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 50px rgba(30, 30, 50, .12);
  width: min(100%, 400px)
}

.mkr-stk-ui-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start
}

.mkr-stk-ui-head small {
  display: block;
  font-size: 11.5px;
  color: var(--mkr-stk-mute)
}

.mkr-stk-ui-head strong {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em
}

.mkr-stk-ui-head strong.mkr-stk-sm {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0
}

.mkr-stk-ui-head em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  background: #14161a;
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px
}

.mkr-stk-ui-head em.mkr-stk-chip {
  background: #ececef;
  color: #777b84
}

.mkr-stk-chart {
  /* margin-top:14px; */
  /* background:#eceef3; */
  border-radius: 10px;
  padding: 10px 10px 8px
}

.mkr-stk-chart svg {
  width: 100%;
  height: 170px;
  display: block
}

.mkr-stk-line {
  fill: none;
  stroke: #3a3d44;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1
}

.mkr-stk-fillfade {
  opacity: 0;
  transition: opacity 1.2s ease .6s
}

.mkr-stk-xlabels {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: #9ba0a9;
  margin-top: 6px
}

.mkr-stk-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px
}

.mkr-stk-stats small {
  display: block;
  font-size: 9.5px;
  color: var(--mkr-stk-mute)
}

.mkr-stk-stats b {
  font-size: 12px;
  font-weight: 600
}

/* in-view anim triggers */
.mkr-stk-card.is-live .mkr-stk-line {
  animation: mkrStkDraw 1.8s var(--mkr-stk-ease) .2s forwards
}

.mkr-stk-card.is-live .mkr-stk-fillfade {
  opacity: .55
}

@keyframes mkrStkDraw {
  to {
    stroke-dashoffset: 0
  }
}

/* glass cards (card 2) */
.mkr-stk-ui--glass {
  position: absolute;
  width: 230px;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .5);
  padding: 20px;
  border-radius: 20px
}

.mkr-stk-ui--retention {
  left: 12%;
  top: 34%;
  transform: rotate(-1deg)
}

.mkr-stk-ui--runway {
  left: calc(12% + 150px);
  top: 52%;
  background: rgba(255, 255, 255, .88)
}

.mkr-stk-big {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 60px;
  font-size: 46px;
  letter-spacing: -.03em;
  color: #2a2c32
}

.mkr-stk-big i {
  font-style: normal;
  color: #8a8e97;
  font-size: 34px
}

.mkr-stk-big u {
  margin-left: auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #9a9a5a
}

.mkr-stk-card .mkr-stk-ui--glass {
  opacity: 0;
  transform: translateY(60px) scale(.96);
  transition: opacity .9s var(--mkr-stk-ease), transform 1s var(--mkr-stk-ease)
}

.mkr-stk-card.is-live .mkr-stk-ui--glass {
  opacity: 1;
  transform: none
}

.mkr-stk-card.is-live .mkr-stk-ui--runway {
  transition-delay: .18s
}

/* sources (card 3) */
.mkr-stk-ui--sources {
  width: min(100%, 430px)
}

.mkr-stk-seg {
  display: flex;
  gap: 3px;
  margin: 16px 0 12px;
  background: #eceef3;
  padding: 5px;
  border-radius: 6px
}

.mkr-stk-seg i {
  display: block;
  height: 6px;
  border-radius: 2px;
  background: var(--c);
  flex: var(--w);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--mkr-stk-ease) .3s
}

.mkr-stk-card.is-live .mkr-stk-seg i {
  transform: none
}

.mkr-stk-rows {
  list-style: none
}

.mkr-stk-rows li {
  display: grid;
  grid-template-columns: 1fr 40px 62px;
  font-size: 11px;
  color: #70747c;
  padding: 7px 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease
}

.mkr-stk-rows li span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
  margin-right: 8px
}

.mkr-stk-rows li strong {
  text-align: right;
  color: #2a2c32;
  font-weight: 500
}

.mkr-stk-card.is-live .mkr-stk-rows li {
  opacity: 1;
  transform: none
}

.mkr-stk-card.is-live .mkr-stk-rows li:nth-child(1) {
  transition-delay: .4s
}

.mkr-stk-card.is-live .mkr-stk-rows li:nth-child(2) {
  transition-delay: .5s
}

.mkr-stk-card.is-live .mkr-stk-rows li:nth-child(3) {
  transition-delay: .6s
}

.mkr-stk-card.is-live .mkr-stk-rows li:nth-child(4) {
  transition-delay: .7s
}

.mkr-stk-card.is-live .mkr-stk-rows li:nth-child(5) {
  transition-delay: .8s
}

/* yearly (card 4) */
.mkr-stk-ui--year {
  width: min(100%, 540px)
}

.mkr-stk-bars {
  height: 220px;
  margin-top: 14px;
  background: #eceef3;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 14px
}

.mkr-stk-bars i {
  display: block;
  width: 10px;
  border-radius: 4px 4px 0 0;
  background: #85878d;
  height: calc(var(--h) * 1%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .9s var(--mkr-stk-ease)
}

.mkr-stk-card.is-live .mkr-stk-bars i {
  transform: none
}

.mkr-stk-bars i:nth-child(n) {
  transition-delay: calc(.25s + var(--n, 0)*.05s)
}

.mkr-stk-months {
  display: flex;
  justify-content: space-around;
  font-size: 8.5px;
  color: #9ba0a9;
  padding: 10px 6px 2px
}

/* end spacer */
.mkr-stk-end {
  /* height: 20vh */
}

/* responsive */
@media(max-width:860px) {

  .mkr-stk-title {
    font-size: 26px;
  }
  .mkr-stk-text {
    padding-bottom: 18px;
  }

  .mkr-stk-features {
    grid-template-columns: 1fr
  }

  .mkr-stk-stack {
    padding: 0 12px 50px;
  }

  .mkr-stk-card {
    margin-bottom: 24px !important;
  }

  .mkr-stk-end {
    height: 0vh;
  }

  .mkr-stk-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    /* min-height: calc(100vh - 40px) */
  }

  .mkr-stk-flip .mkr-stk-visual {
    order: 2
  }

  .mkr-stk-ui--glass {
    position: relative;
    left: auto !important;
    top: auto !important;
    margin: 8px
  }

  .mkr-stk-visual {
    padding: 0px 15px 20px 15px;
    /* padding: 20px; */
    /* min-height: 340px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center   */
  }

  .mkr-stk-big {
    margin-top: 30px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition: none !important;
    animation: none !important
  }

  .mkr-stk-word,
  .mkr-stk-bars i,
  .mkr-stk-seg i,
  .mkr-stk-rows li,
  .mkr-stk-ui--glass {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important
  }

  .mkr-stk-line {
    stroke-dashoffset: 0
  }
}





/* Makro – AI Finance | all classes prefixed "mk-" */
:root {
  --mk-bg: #34353a;
  --mk-nav: #2a2b30;
  --mk-ink: #2b2c31;
  --mk-muted: #8a8d98;
  --mk-blue-top: #5f6f86;
  --mk-blue-mid: #7a8ba1;
  --mk-blue-bot: #e4e5ea;
  --mk-peach: #fbeee9;
  --mk-lime: #d9f55a;
  --mk-sky: #1aa3ff;
  --mk-pill: #7d7d82;
  --mk-ease: cubic-bezier(.22, 1, .36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.mk-body {
  background: var(--mk-bg);
  color: #fff;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  min-height: 100vh;
  padding-bottom: 100px;
  overflow-x: hidden
}

a {
  color: inherit;
  text-decoration: none
}

/* NAV */
.mk-nav {
  position: sticky;
  top: 12px;
  z-index: 50;
  margin: 12px 22px 0;
  height: 52px;
  padding: 0 10px 0 18px;
  border-radius: 16px;
  background: var(--mk-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  animation: mk-drop .8s var(--mk-ease) both
}

.mk-nav__logo {
  width: 34px;
  height: 20px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px
}

.mk-nav__logo span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk-nav)
}

.mk-nav__links {
  display: flex;
  gap: 30px;
  font-size: 13px;
  color: #a7a9b3
}

.mk-nav__links a {
  transition: color .3s
}

.mk-nav__links a:hover,
.mk-nav__links .is-active {
  color: #fff
}

.mk-nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  background: #3c3d43;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  transition: background .3s
}

.mk-nav__cta i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #e9e9ee;
  color: #222;
  display: grid;
  place-items: center;
  font-style: normal;
  transition: transform .4s var(--mk-ease)
}

.mk-nav__cta:hover {
  background: #4a4b52
}

.mk-nav__cta:hover i {
  transform: translateX(3px)
}

/* HERO */
.fn-hero-centered {
  text-align: center !important;
  padding: 60px 20px 30px !important;
}

@media screen and (max-width: 768px) {
  .mk-body {
    padding-bottom: 58px;
  }

  .fn-hero-centered {
    padding: 24px 20px 15px !important;
  }

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

.fn-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 5px;
  border-radius: 20px;
  font-size: 11px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  backdrop-filter: blur(6px);
}

.fn-hero-badge--dark {
  background: #4a4b51;
}

.fn-hero-badge--light {
  background: #e8ecf2;
  color: #4b4f5a;
}

.fn-hero-icon {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-style: normal;
}

.fn-hero-badge--light .fn-hero-icon {
  background: #fff;
}

.fn-hero-heading {
  color: #000;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.02em;
  margin: 20px 0 14px;
}

.fn-hero-subheading {
  color: #666;
  font-size: 16px;
  line-height: 1.55;
}

/* GRID */
.mk-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start
}

.mk-col {
  display: flex;
  flex-direction: column;
  gap: 16px
}

article.mk-card.mk-card--white.mk-card--tall2.mk-reveal.is-in {
  display: none;
}

article.mk-card.mk-card--peach.mk-card--short.mk-reveal.is-in {
  height: 421px;
}

.new-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

article.mk-card.mk-card--white.mk-card--mid.mk-reveal.is-in {
  height: 748px;
}

article.mk-card.mk-card--blue.mk-card--mid.mk-reveal.is-in {
  height: 420px;
}

.mk-card {
  position: relative;
  border-radius: 14px;
  padding: 22px 22px 0;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
  transition: transform .6s var(--mk-ease), box-shadow .6s
}

.mk-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .3)
}


.mk-card--blue-gradient {
  /* background: linear-gradient(180deg, #20418d 0%, #019af6 45%, var(--mk-blue-bot) 100%) !important; */
  /* background: linear-gradient(180deg, #bfe7ff, #fff) !important; */
  background: linear-gradient(180deg, #c4deed, #fff) !important;
}

.mk-card--blue {
  /* background: linear-gradient(180deg, #f5af32 0%, #eccf4a 45%, var(--mk-blue-bot) 100%); */
  background: linear-gradient(180deg, #ece6cd, #fff);
  /* background: linear-gradient(180deg, var(--mk-blue-top) 0%, var(--mk-blue-mid) 45%, var(--mk-blue-bot) 100%); */
}

.mk-card--white {
  background: linear-gradient(180deg, #fff, #eef1f6);
  color: var(--mk-ink)
}

.mk-card--peach {
  background: linear-gradient(180deg, var(--mk-peach), #fff);
  color: var(--mk-ink)
}

.mk-card--tall {
  height: 420px
}

.mk-card--short {
  height: 310px
}

.mk-card--mid {
  height: 352px
}

.mk-card--tall2 {
  height: 468px
}

.mk-card__title {
  font-weight: 400;
  font-size: 20px;
  /* letter-spacing: -.02em; */
  margin: 16px 0 8px
}

span.mk-chip {
  color: #000;
}

.mk-card__text {
  color: #000;
  font-size: 16px;
  line-height: 1.5;
  opacity: .75;
  max-width: 230px;
  margin: 10px auto
}

.mk-card--blue .mk-card__title {
  color: #000;
}


.mk-pills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* gap: 16px; */
  width: 100%;
  /* padding-top: 93px; */

  gap: 12px;
  padding-top: 12px;
}

.mk-grid-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height: 60px; */
  padding: 12px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: rgba(36, 36, 38, 0.75);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.mk-grid-pill:hover {
  transform: translateY(-4px);
  /* border-color: #2287e0; */
  /* box-shadow: 0 10px 25px rgba(34, 135, 224, 0.12); */
}

/* Tablet */
@media (max-width: 768px) {
  .mk-pills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

  }

  .mk-grid-pill {
    min-height: 40px;
    font-size: 14px;
    padding: 0px;
            border-radius: 8px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .mk-pills-grid {
    grid-template-columns: repeat(2, 1fr);
    /* gap: 12px; */
    gap: 12px;
    padding-top: 20px;
  }
}



/* PILLS (Smart Expenses) */
.mk-pills {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.mk-pill {
  position: absolute;
  padding: 9px 16px;
  border-radius: 30px;
  background: var(--mk-pill);
  color: #f1f1f3;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
  animation: var(--mk-a) var(--mk-t) ease-in-out infinite alternate
}

.mk-pill--1 {
  left: 28%;
  top: 62%;
  --mk-a: mk-tumble1;
  --mk-t: 5s
}

.mk-pill--2 {
  left: 48%;
  top: 66%;
  --mk-a: mk-tumble2;
  --mk-t: 6s
}

.mk-pill--3 {
  left: 40%;
  top: 75%;
  --mk-a: mk-tumble3;
  --mk-t: 5.5s
}

.mk-pill--4 {
  left: 14%;
  top: 78%;
  --mk-a: mk-tumble2;
  --mk-t: 7s
}

.mk-pill--5 {
  left: 26%;
  top: 88%;
  --mk-a: mk-tumble1;
  --mk-t: 6.5s
}

.mk-pill--6 {
  left: 62%;
  top: 87%;
  --mk-a: mk-tumble3;
  --mk-t: 5s
}

.mk-pill--7 {
  left: 5%;
  top: 90%;
  --mk-a: mk-tumble4;
  --mk-t: 8s
}

/* BANK SYNC */
.mk-wire {
  margin: 22px auto 0;
  width: 78%;
  border-radius: 12px;
  background: #2c2d32;
  border: 2px solid #2c2d32;
  box-shadow: 0 -10px 0 -4px #cfd2d9
}

.mk-wire__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  font-size: 11px;
  color: #fff
}

.mk-wire__bar em {
  font-style: normal;
  color: #9a9ca6
}

.mk-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fccf0f;
  margin-right: 7px;
  animation: mk-pulse 1.8s infinite
}

.mk-wire__body {
  background: #fff;
  border-radius: 10px 10px 8px 8px;
  padding: 22px 0;
  font-size: 28px;
  font-weight: 300;
  color: #555;
  font-style: italic;
  transition: transform .3s
}

.mk-wire__body b {
  font-weight: 800;
  color: #333;
  font-size: 32px;
}

.mk-wire__body span {
  color: #aaa
}

.mk-wire__body.is-bump {
  transform: scale(1.05)
}

/* INVOICES */
.mk-invoices {
  height: 190px;
  margin: 20px -4px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent)
}

.mk-invoices__track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: mk-scrollY 16s linear infinite
}

.mk-inv {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  flex-shrink: 0
}

.mk-inv>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px
}

.mk-inv h4 {
  font-weight: 400;
  font-size: 17px;
  margin: 16px 0 6px
}

.mk-inv p {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mk-muted)
}

.mk-inv p b {
  font-weight: 500;
  color: #555;
  font-size: 12px
}

.mk-badge {
  padding: 5px 14px 5px 26px;
  border-radius: 20px;
  font-size: 11px;
  position: relative
}

.mk-badge::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff
}

.mk-badge--paid {
  background: #fccf0f
}

.mk-badge--over {
  background: #e3c7bb
}

.mk-badge--pend {
  background: #eceef2;
  color: #777
}

/* UPCOMING BILLS */
.mk-bills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px
}

.mk-bills__side {
  width: 34px;
  height: 116px;
  border-radius: 12px;
  background: #fff;
  border: 3px solid #6f7078;
  opacity: .95
}

.mk-bills__main {
  width: 136px;
  height: 118px;
  border-radius: 14px;
  background: #fff;
  border: 3px solid #6f7078;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  animation: mk-slideswap 3s var(--mk-ease) infinite
}

.mk-bills__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eceef2;
  display: grid;
  place-items: center;
  font-size: 14px
}

.mk-bills__amt {
  font-weight: 500;
  font-size: 16px
}

.mk-bills__lbl {
  font-size: 11px;
  color: #aaa
}

/* AI INSIGHTS */
.mk-orbit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 210px
}

.mk-orbit__arc {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 10px;
  height: 300px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .6)
}

.mk-orbit__ball {
  position: absolute;
  /* top: 50px; */
  left: 0;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #fff;
  color: #555;
  display: grid;
  place-items: center;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  offset-path: path("M -20 90 Q 190 -50 400 90");
  animation: mk-orbit 12s linear infinite
}

.mk-orbit__ball--1 {
  animation-delay: 0s
}

.mk-orbit__ball--2 {
  animation-delay: -3s
}

.mk-orbit__ball--3 {
  animation-delay: -6s
}

.mk-orbit__ball--4 {
  animation-delay: -9s
}

.mk-stat {
  position: absolute;
  left: 0;
  right: 0;
  top: 112px;
  color: #555;
  transition: opacity .4s, transform .4s
}

.mk-stat__num {
  display: block;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: -.02em
}

.mk-stat__lbl {
  font-size: 18px;
  color: #777;
  font-weight: bold;
}

.mk-stat.is-out {
  opacity: 0;
  transform: translateY(10px)
}

/* ANOMALY */
button.mk-alert-btn {
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
}

.mk-alert {
  position: absolute;
  /* left: 20px; */
  left: 100px;
  /* right: 20px; */
  bottom: 40px;
  overflow: hidden;
  animation: mk-nudge 4s ease-in-out infinite
}

.mk-alert__top {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  color: #444;
  padding: 12px;
  border-radius: 9px
}

.mk-alert__top i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef0f4;
  display: grid;
  place-items: center;
  font-style: normal
}

.mk-alert__top b {
  display: block;
  font-weight: 500;
  font-size: 12px
}

.mk-alert__top small {
  font-size: 11px;
  color: #888
}

.mk-alert__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  font-size: 12px;
  color: #fff
}

.mk-alert__tick {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #fccf0f;
  color: #333;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 12px;
  animation: mk-tick 4s ease-in-out infinite
}

/* FLOATING BUTTONS */
.mk-float {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 60;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  animation: mk-rise 1s .6s var(--mk-ease) both
}

.mk-float a {
  display: block;
  text-align: center;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  transition: transform .3s
}

.mk-float a:hover {
  transform: scale(1.04)
}

.mk-float__btn {
  background: var(--mk-sky);
  color: #fff
}

.mk-float__badge {
  background: #fff;
  color: #111
}

/* LOAD + SCROLL REVEAL */
.mk-fade {
  opacity: 0;
  animation: mk-up .9s var(--d, 0s) var(--mk-ease) forwards
}

.mk-reveal {
  opacity: 0;
  transform: translateY(60px) scale(.97);
  transition: opacity .9s var(--mk-ease), transform .9s var(--mk-ease)
}

.mk-reveal.is-in {
  opacity: 1;
  transform: none
}

.mk-col:nth-child(2) .mk-reveal {
  transition-delay: .12s
}

.mk-col:nth-child(3) .mk-reveal {
  transition-delay: .24s
}

/* KEYFRAMES */
@keyframes mk-up {
  from {
    opacity: 0;
    transform: translateY(24px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mk-drop {
  from {
    opacity: 0;
    transform: translateY(-40px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mk-rise {
  from {
    opacity: 0;
    transform: translateY(40px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mk-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(217, 245, 90, .7)
  }

  50% {
    box-shadow: 0 0 0 6px rgba(217, 245, 90, 0)
  }
}

@keyframes mk-scrollY {
  to {
    transform: translateY(calc(-50% - 6px))
  }
}

@keyframes mk-tumble1 {
  0% {
    transform: rotate(-60deg) translate(0, 0)
  }

  100% {
    transform: rotate(-20deg) translate(10px, -12px)
  }
}

@keyframes mk-tumble2 {
  0% {
    transform: rotate(20deg) translate(0, 0)
  }

  100% {
    transform: rotate(-15deg) translate(-8px, 8px)
  }
}

@keyframes mk-tumble3 {
  0% {
    transform: rotate(25deg)
  }

  100% {
    transform: rotate(-8deg) translate(6px, -6px)
  }
}

@keyframes mk-tumble4 {
  0% {
    transform: rotate(-10deg)
  }

  100% {
    transform: rotate(60deg) translate(14px, -18px)
  }
}

@keyframes mk-orbit {
  0% {
    offset-distance: -10%;
    opacity: 0
  }

  12% {
    opacity: 1
  }

  88% {
    opacity: 1
  }

  100% {
    offset-distance: 110%;
    opacity: 0
  }
}

@keyframes mk-slideswap {

  0%,
  70% {
    transform: translateX(0);
    opacity: 1
  }

  85% {
    transform: translateX(-30px);
    opacity: 0
  }

  86% {
    transform: translateX(30px);
    opacity: 0
  }

  100% {
    transform: translateX(0);
    opacity: 1
  }
}

@keyframes mk-nudge {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-4px)
  }
}

@keyframes mk-tick {

  0%,
  60%,
  100% {
    transform: scale(1)
  }

  70% {
    transform: scale(1.35)
  }

  80% {
    transform: scale(1)
  }
}

/* RESPONSIVE */
@media(max-width:900px) {
  .mk-grid {
    grid-template-columns: 1fr;
        padding: 0 12px !important;
  }

  .mk-nav__links {
    display: none
  }

  button.mk-alert-btn {
    margin-bottom: 7px;
  }

  .mk-card__text {
    margin: 15px auto;
  }

  .mk-alert {
    /* top: 60%; */
    left: 56px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important
  }

  .mk-reveal,
  .mk-fade {
    opacity: 1;
    transform: none
  }
}






/* About page */
/* Makro recreation — all project classes use the mk- prefix to avoid collisions. */
:root {
  --mk-bg: #eef0f7;
  --mk-ink: #232329;
  --mk-muted: #666872;
  --mk-dark: #33343b;
  --mk-lime: #caff38;
  --mk-white: #ffffff;
  --mk-radius: 34px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}



body {
  margin: 0;
  background: var(--mk-bg);
  color: var(--mk-ink);
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a,
button {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.mk-page {
  overflow: clip;
  min-height: 100vh;
}

.mk-hero {
  min-height: 100svh;
  padding: 22px 3.1vw 44px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.mk-nav {
  position: sticky;
  top: 16px;
  z-index: 10;
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

.mk-nav:hover {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 30px rgba(25, 28, 38, .06);
  backdrop-filter: blur(14px);
}

.mk-brand {
  width: 46px;
  height: 34px;
  border: 4px solid #5d5e64;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  animation: mk-brand-float 5s ease-in-out infinite;
}

.mk-brand__dot {
  width: 7px;
  height: 7px;
  background: #5d5e64;
  border-radius: 50%;
}

.mk-nav__links {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #5c5d64;
}

.mk-nav__links a {
  transition: color .25s ease, transform .25s ease;
}

.mk-nav__links a:hover {
  color: var(--mk-ink);
  transform: translateY(-1px);
}

.mk-nav__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .92);
  border-radius: 999px;
  padding: 7px 18px 7px 7px;
  font-size: 14px;
  color: #45464c;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.mk-nav__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(30, 32, 42, .1);
}

.mk-nav__arrow {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #f0f1f6;
  display: grid;
  place-items: center;
  font-size: 25px;
  line-height: 1;
}

.mk-hero__options {
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--mk-white);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  animation: mk-rise .8s .08s both cubic-bezier(.2, .8, .2, 1);
}

.mk-hero__options-label {
  padding: 8px 10px 8px 16px;
  color: #9a9ba2;
  font-size: 14px;
}

.mk-option {
  width: 42px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #8a8b91;
  background: transparent;
  cursor: pointer;
  transition: background .35s cubic-bezier(.2, .8, .2, 1), color .35s ease, transform .35s ease;
}

.mk-option--active {
  color: #222329;
  background: #fccf0f;
  transform: scale(1.02);
}

.mk-hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 22px;
}

.mk-changelog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mk-white);
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  font-size: 13px;
  color: #686970;
  margin-bottom: 38px;
  animation: mk-rise .8s .18s both cubic-bezier(.2, .8, .2, 1);
}

.mk-changelog__icon {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #f1f2f6;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
}

.mk-copy {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: mk-copy-in 1s .2s both cubic-bezier(.2, .8, .2, 1);
}

.mk-copy--refresh {
  animation: mk-copy-refresh .8s cubic-bezier(.2, .8, .2, 1);
}

.mk-copy__title {
  margin: 0;
  font-size: 48px;
  line-height: .99;
  /* letter-spacing: -0.02em; */
  font-weight: 400;
  max-width: 980px;
}

.mk-copy__title span {
  display: block;
}

.mk-copy__body {
  margin: 30px 0 30px;
  color: #c5c2c2;
  ;
  font-size: 16px;
  line-height: 1.45;
  /* letter-spacing: -.025em; */
}

.mk-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #f5f5f6;
  background: #b2b3be59;
  padding: 5px 18px 5px 5px;
  border-radius: 16px;
  font-size: 16px;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.mk-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(25, 26, 32, .18);
}

.mk-primary__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #202126;
  background: #fccf0f;
  border-radius: 13px;
  font-size: 25px;
  transition: transform .3s ease;
}

.mk-primary:hover .mk-primary__icon {
  transform: translateX(3px);
}

.mk-media-wrap {
  padding: 0 3.1vw 60px;
  margin-top: -2px;
}

.mk-media-card {
  position: relative;
  width: 100%;
  aspect-ratio: 2.06 / 1;
  overflow: hidden;
  border-radius: var(--mk-radius);
  background: #171719;
  transform: translateY(120px) scale(.985);
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.25s cubic-bezier(.16, 1, .3, 1);
}

.mk-media-card--visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.mk-media-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
}

.mk-media-card--visible .mk-media-card__image {
  transform: scale(1);
}

.mk-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border: 0;
  background: rgba(255, 255, 255, .97);
  color: #292a2f;
  border-radius: 18px;
  padding: 6px 20px 6px 6px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .18);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.mk-play:hover {
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .25);
}

.mk-play__icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #34353b;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 19px;
  padding-left: 2px;
}

.mk-spacer {
  min-height: 55vh;
  display: grid;
  place-items: center;
  color: #85868e;
  font-size: 18px;
  padding: 80px 20px;
}

/* Motion used by the reference: gentle, long, non-bouncy transitions. */
@keyframes mk-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-copy-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-copy-refresh {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  35% {
    opacity: .18;
    transform: translateY(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-brand-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@media (max-width: 800px) {
  .mk-hero {
    padding: 16px 18px 32px;
  }

  .mk-nav {
    grid-template-columns: 1fr auto;
  }

  .mk-nav__links {
    display: none;
  }

  .mk-copy__title {
    font-size: clamp(42px, 12vw, 66px);
  }

  .mk-copy__body {
    font-size: 15px;
  }

  .mk-media-wrap {
    padding: 0 18px 40px;
  }

  .mk-media-card {
    aspect-ratio: 1.18 / 1;
    border-radius: 24px;
  }

  .mk-play {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* next section */
:root {
  --mkc-bg: #eef0f7;
  --mkc-ink: #28292f;
  --mkc-muted: #686a73;
  --mkc-border: rgba(38, 39, 45, .08);
  --mkc-white: #ffffff;
  --mkc-lime: #caff38;
}

a {
  color: inherit;
  text-decoration: none;
}

section.mkc-founders-outer {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  /* padding: 0 100px 100px; */
  box-sizing: border-box;
  overflow-x: hidden;
}

.mkc-founders {
  padding: 0 4.5% 80px;
  /* width: min(1240px, 100%); */
  /* margin: clamp(70px, 9vw, 125px) auto 0; */
  /* margin-top: 4%; */
  display: grid;
  grid-template-columns: minmax(260px, .88fr) minmax(440px, 1.12fr);
  /* gap: clamp(70px, 9vw, 150px);  */
  align-items: start;
}

.mkc-founders__left {
  /* padding-top: 2px; */
  animation: mkc-content-in .9s .08s cubic-bezier(.2, .8, .2, 1) both;
}

.mkc-kicker {
  /* display: inline-flex; */
  align-items: center;
  gap: 7px;
  color: #85868e;
  font-size: 12px;
  /* margin-bottom: 20px; */
}

.mkc-kicker__mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .65);
  color: #6c6d74;
  font-size: 13px;
}

.mkc-letter__copy {
  font-size: 22px !important;
}

.mkc-founders__title {
  margin: 0;
  max-width: 420px;
  font-size: 48px;
  font-weight: 400;
  /* letter-spacing: -0.02emem; */
  line-height: .99;
}

.mkc-stats {
  margin-top: clamp(25px, 9vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 31px;
}

.mkc-stats img {
  width: 90%;
  height: 360px;
  border-radius: 25px;
  object-fit: cover;
}

@media screen and (max-width: 768px) {

  /* CSS rules placed here only apply to screens 768px wide or smaller */
  .mkc-stats img {
    width: 100%;
    /* height: 415px; */
    border-radius: 25px;
    object-fit: cover;
  }
}

.mkc-stat {
  opacity: 0;
  transform: translateY(15px);
  animation: mkc-stat-in .75s var(--mkc-delay, 0ms) cubic-bezier(.2, .8, .2, 1) forwards;
}

.mkc-stat__number {
  display: block;
  font-size: 42px;
  line-height: 1;
  /* letter-spacing: -.045em; */
  font-weight: 500;
}

.mkc-stat__label {
  display: block;
  margin-top: 7px;
  color: rgba(36, 36, 38, 0.75);
  font-size: 18px;
  line-height: 1.2;
}

.mkc-letter {
  margin-top: 89px;
  min-height: 360px;
  padding: clamp(34px, 4vw, 53px);
  border-radius: 27px;
  background: var(--mkc-white);
  box-shadow: 0 2px 1px rgba(25, 27, 34, .015), 0 18px 55px rgba(25, 27, 34, .035);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: mkc-card-in 1s .16s cubic-bezier(.16, 1, .3, 1) both;
}

.mkc-letter__copy {
  max-width: 650px;
  color: #5e6068;
  font-size: 16px;
  line-height: 1.58;
  letter-spacing: -.01em;
}

.mkc-letter__copy p {
  margin: 0 0 26px;
  font-size: 16px;
  color: rgba(36, 36, 38, 0.75);
}

.mkc-letter__copy p:last-child {
  margin-bottom: 0;
}

.mkc-letter__footer {
  margin-top: 45px;
  padding-top: 22px;
  border-top: 1px solid var(--mkc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.mkc-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mkc-person__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #d98476;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .02em;
}

.mkc-person strong,
.mkc-person small {
  display: block;
}

.mkc-person strong {
  font-size: 10px;
  font-weight: 600;
  color: #4e5057;
}

.mkc-person small {
  margin-top: 2px;
  color: #999aa1;
  font-size: 8px;
}

.mkc-signature {
  width: 125px;
  height: 47px;
  color: #57585f;
  flex: 0 0 auto;
  transform: rotate(-2deg);
  opacity: .85;
}

/* The reference uses restrained movement: no bounce and no dramatic parallax. */
@keyframes mkc-nav-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mkc-content-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mkc-card-in {
  from {
    opacity: 0;
    transform: translateY(38px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mkc-stat-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 850px) {
  .mkc-page {
    padding: 12px 16px 70px;
  }

  .mkc-nav {
    grid-template-columns: 1fr auto;
  }

  .mkc-nav__links {
    display: none;
  }

  .mkc-founders {
    /* margin-top: 65px; */
    grid-template-columns: 1fr;
    /* gap: 30px; */
    padding: 0 0 0px;
  }

  .mkc-letter__copy h3 {
    font-size: 20px;
  }

  .mkc-letter__copy p {
    font-size: 16px;
  }

  .mkc-job p {
    line-height: 1.4;
  }

  .mkc-founders__title {
    font-size: 28px;
    text-align: center;
  }

  .mkc-stat__number {
    font-size: 38px;
  }

  .mkc-stat__label {
    font-size: 16px;
  }

  .mkc-stats {
    /* margin-top: 24px; */
    padding-top: 6%;
  }

  .mkc-letter {
    min-height: 390px;
    padding: 30px 25px;
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}




/* next section */
:root {
  --mfc-light: #edf0f8;
  --mfc-dark: #34353b;
  --mfc-white: #f8f8f8;
  --mfc-lime: #caff38;
}

.mfc-page {
  /* padding: 0 3.1vw 60px; */
  min-height: 0svh !important;
  overflow: hidden;
  background: #313236 !important;
}

/*
  The recording begins in the pale site background and settles into
  the charcoal CTA section. This is deliberately slow and soft.
*/
.mfc-cta {
  /* border-radius: 20px; */
  min-height: 0svh !important;
  width: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: #313236 !important;
  animation: mfc-section-reveal 1.15s cubic-bezier(.22, .8, .22, 1) both;
}

.mfc-cta__inner {
  width: min(940px, calc(100% - 40px));
  min-height: 0svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 70px 0 0;
}

/* Minimal two-dot brand mark seen above the heading. */
.mfc-mark {
  width: 79px;
  height: 52px;
  border: 7px solid #d7d7d9;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 49px;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  animation: mfc-mark-in .8s .18s cubic-bezier(.2, .8, .2, 1) forwards;
}

.mfc-mark__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #d7d7d9;
}

.mfc-cta__title {
  margin: 0;
  padding-top: 3%;
  color: var(--mfc-white);
  font-size: 48px;
  font-weight: 400;
  line-height: .99;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(26px);
  animation: mfc-copy-in .95s .25s cubic-bezier(.2, .8, .2, 1) forwards;
}

.mfc-cta__title span {
  display: block;
}

.mfc-cta__description {
  margin: 26px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  /* letter-spacing: -.025em; */
  opacity: 0;
  transform: translateY(18px);
  animation: mfc-copy-in .85s .39s cubic-bezier(.2, .8, .2, 1) forwards;
}

.mfc-action {
  margin-top: 38px;
  display: block;
  width: 207px;
  height: 60px;
  border: 4px solid #fccf0f;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  color: #24252a;
  opacity: 0;
  transform: translateY(20px);
  animation: mfc-button-in .8s .53s cubic-bezier(.2, .8, .2, 1) forwards;
  -webkit-tap-highlight-color: transparent;
}

.mfc-action__track,
.mfc-action__default,
.mfc-action__panel {
  position: absolute;
  inset: 0;
}

.mfc-action__default {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
  background: #fccf0f;
  font-size: 20px;
  transition:
    transform .62s cubic-bezier(.77, 0, .18, 1),
    opacity .42s ease;
}

.mfc-action__default-text,
.mfc-action__default-arrow {
  display: inline-block;
  transition:
    transform .62s cubic-bezier(.77, 0, .18, 1),
    opacity .38s ease;
}

.mfc-action__default-arrow {
  font-size: 34px;
  line-height: 1;
}

.mfc-action__panel {
  left: -1px;
  top: -1px;
  right: auto;
  bottom: -1px;
  width: 0;
  border-radius: 22px;
  background: var(--mfc-dark);
  color: var(--mfc-white);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  z-index: 2;
  transition: width .72s cubic-bezier(.77, 0, .18, 1);
}

.mfc-action__arrow {
  flex: 0 0 82px;
  width: 82px;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  color: var(--mfc-white);
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity .28s .08s ease,
    transform .55s cubic-bezier(.2, .8, .2, 1);
}

.mfc-action__hover-text {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 20px;
  padding-right: 22px;
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity .28s ease,
    transform .62s cubic-bezier(.2, .8, .2, 1);
}

/*
  Reference hover behavior:
  the dark panel grows from the left, the arrow becomes the visual anchor,
  and the label is carried into the panel. The lime surface remains visible.
*/
.mfc-action:hover .mfc-action__panel,
.mfc-action:focus-visible .mfc-action__panel {
  width: 72%;
}

.mfc-action:hover .mfc-action__arrow,
.mfc-action:focus-visible .mfc-action__arrow {
  opacity: 1;
  transform: translateX(0);
}

.mfc-action:hover .mfc-action__hover-text,
.mfc-action:focus-visible .mfc-action__hover-text {
  opacity: 1;
  transform: translateX(0);
}

.mfc-action:hover .mfc-action__default-text,
.mfc-action:focus-visible .mfc-action__default-text {
  transform: translateX(42px);
  opacity: .25;
}

.mfc-action:hover .mfc-action__default-arrow,
.mfc-action:focus-visible .mfc-action__default-arrow {
  transform: translateX(30px);
  opacity: .25;
}

.mfc-action:active {
  transform: translateY(1px);
}

.mfc-action:focus-visible {
  outline: 3px solid rgba(202, 255, 56, .55);
  outline-offset: 5px;
}

/* Subtle cursor-free ambient motion, kept almost imperceptible like the video. */
.mfc-cta::after {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 46%,
      rgba(255, 255, 255, .018),
      transparent 38%);
  animation: mfc-ambient 7s ease-in-out infinite alternate;
}

@keyframes mfc-section-reveal {
  from {
    opacity: 0;
    background: var(--mfc-light);
  }

  to {
    opacity: 1;
    background: var(--mfc-dark);
  }
}

@keyframes mfc-mark-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mfc-copy-in {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mfc-button-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mfc-ambient {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(0, -1%, 0) scale(1.015);
  }
}

@media (max-width: 700px) {
  .mfc-cta__inner {
    width: min(100% - 30px, 600px);
    padding: 50px 0;
  }

  .mfc-mark {
    width: 66px;
    height: 44px;
    border-width: 6px;
    margin-bottom: 36px;
  }

  .mfc-mark__dot {
    width: 12px;
    height: 12px;
  }

  .mfc-cta__title {
    font-size: 28px;
    line-height: 1.1;
    margin-top: 3%;
  }

  .mfc-cta__description {
    margin-top: 18px;
    font-size: 16px;
  }

  .mfc-action {
    width: 235px;
    height: 78px;
    margin-top: 48px;
    border-radius: 23px;
  }

  .mfc-action__default {
    font-size: 18px;
  }

  .mfc-action__hover-text {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}





/* next section */
:root {
  --mkc-bg: #e8ebf2;
  --mkc-row: #e8ebf2;
  --mkc-ink: #2b2c31;
  --mkc-mute: #7d808b;
  --mkc-lime: #ddf65a;
  --mkc-sky: #1aa3ff;
  --mkc-ease: cubic-bezier(.22, 1, .36, 1)
}

/* BOARD */
.mkc-careers {
  /* max-width: 1340px; */
  max-width: 1150px;
  margin: 0 auto;
  /* padding: 0 3.1vw 10%; */
  text-align: center;
  padding-bottom: 90px;
}

.mkc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 5px;
  border-radius: 20px;
  background: #fff;
  font-size: 11px;
  color: #555
}

.mkc-chip i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #eceff4;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-style: normal
}

.mkc-title {
  font-weight: 400;
  font-size: 48px;
  margin: 18px 0 44px
}


.mkc-board {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
  background: #fff;
  border-radius: 18px;
  padding: 8px;
  text-align: left;
  align-items: start
}

.mkc-jobs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 780px;
}

.mkc-job {
  position: relative;
  display: block;
  background: var(--mkc-row);
  padding: 35px 28px 35px;
  transition: background .4s, transform .5s var(--mkc-ease)
}

.mkc-jobs li:first-child .mkc-job {
  border-radius: 12px 12px 0 0
}

.mkc-jobs li:last-child .mkc-job {
  border-radius: 0 0 12px 12px
}

.mkc-job h3 {
  font-weight: 400;
  font-size: 18px;
  color: #000;
  transition: color .3s, transform .5s var(--mkc-ease)
}

.mkc-job p {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
  color: rgba(36, 36, 38, 0.75);
}

.mkc-job b {
  font-weight: 400;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 20px;
  background: #fff;
  color: #666;
  transition: transform .4s var(--mkc-ease)
}

.mkc-job__arrow {
  position: absolute;
  right: 34px;
  top: 24px;
  font-size: 35px;
  color: #b0b3bd;
  transition: color .3s, transform .5s var(--mkc-ease)
}

.mkc-job:hover {
  background: #dfe3ec
}

.mkc-job:hover h3 {
  color: #111;
  transform: translateX(4px)
}

.mkc-job:hover .mkc-job__arrow {
  color: #111;
  transform: translate(4px, -4px)
}

.mkc-job:hover b {
  transform: translateX(4px)
}

/* SIDE (sticky) */
.mkc-side {
  position: sticky;
  top: 100px;
  padding: 26px 28px 24px
}

.mkc-side__title {
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -.02em;
  margin-bottom: 12px
}

.mkc-side__text {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(36, 36, 38, 0.75);
  margin-bottom: 24px
}

.mkc-word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px);
  transition: opacity .6s, filter .6s, transform .6s var(--mkc-ease);
  transition-delay: calc(var(--i)*35ms)
}

.mkc-side__text.is-on .mkc-word {
  opacity: 1;
  filter: none;
  transform: none
}

.mkc-mail {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #e8ebf2;
  border-radius: 12px;
  padding: 4px;
  font-size: 12px;
  color: #444;
  position: relative;
  overflow: hidden
}

.mkc-mail__ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #2a2b30;
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 1;
  transition: width .5s var(--mkc-ease)
}

.mkc-mail__lbl {
  font-size: 14px;
  flex: 1;
  text-align: center;
  transition: transform .5s var(--mkc-ease)
}

.mkc-mail:hover .mkc-mail__ico {
  width: calc(100% - 0px)
}

.mkc-mail:hover .mkc-mail__lbl {
  opacity: 0
}

/* PERKS */
.mkc-perks {
  margin-top: 14px;
  background: #fff;
  border-radius: 18px;
  padding: 24px 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left
}

.mkc-perk {
  display: flex;
  align-items: center;
  gap: 12px
}

.mkc-perk i {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--mkc-lime);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 15px;
  transition: transform .5s var(--mkc-ease)
}

.mkc-perk:hover i {
  transform: rotate(-12deg) scale(1.1)
}

.mkc-perk b {
  display: block;
  font-weight: 400;
  font-size: 14px
}

.mkc-perk small {
  font-size: 11px;
  color: var(--mkc-mute)
}

/* DARK SECTION (top edge seen at end of video) */
.mkc-dark {
  max-width: 1340px;
  height: 520px;
  margin: 30px auto 0;
  background: #2a2b30;
  border-radius: 28px 28px 0 0
}

/* FLOAT */
.mkc-float {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 60;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 30px rgba(30, 40, 70, .18);
  animation: mkc-rise 1s .6s var(--mkc-ease) both
}

.mkc-float a {
  display: block;
  text-align: center;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  transition: transform .3s
}

.mkc-float a:hover {
  transform: scale(1.04)
}

.mkc-float__btn {
  background: var(--mkc-sky);
  color: #fff
}

.mkc-float__badge {
  background: #fff;
  color: #111
}

/* REVEAL */
.mkc-in {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--d, 0s), transform .9s var(--d, 0s) var(--mkc-ease)
}

.mkc-in.is-in {
  opacity: 1;
  transform: none
}

.mkc-jobs li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s calc(var(--r, 0)*90ms), transform .7s calc(var(--r, 0)*90ms) var(--mkc-ease)
}

.mkc-board.is-in .mkc-jobs li {
  opacity: 1;
  transform: none
}

@keyframes mkc-drop {
  from {
    opacity: 0;
    transform: translateY(-40px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mkc-rise {
  from {
    opacity: 0;
    transform: translateY(40px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media(max-width:900px) {

  .mkc-careers {
    /* padding-top: 4%; */
    padding-bottom: 60px;
  }

  .mkc-jobs {
    width: 100%;
  }

  .mkc-board,
  .mkc-perks {
    grid-template-columns: 1fr
  }

  .mkc-side {
    position: static
  }

  .mkc-nav__links {
    display: none
  }

  .mkc-title {
    font-size: 28px;
    /* line-height: 1.2; */
    margin: 14px 0 20px;
  }

  .mkc-side {
    padding: 30px 28px 30px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important
  }

  .mkc-in,
  .mkc-jobs li,
  .mkc-word {
    opacity: 1;
    transform: none;
    filter: none
  }
}



/* next section */
/*
  MAKRO RECREATION (UNIQUE CLASS NAMES & CONTAINER SCOPED)
  Removed :root and body selectors. Variables scoped directly to .mk-page.
*/

span.mfc-action__default-text {
  color: #000;
}

span.mfc-action__default-arrow {
  color: #000;
}

.mk-page {
  /* padding: 0% 0 8%; */
  --mk-bg: #313236;
  --mk-white: #f7f7f7;
  --mk-muted: #a6a7aa;
  --mk-lime: #caff38;
  --mk-card: #eef0f6;

  background: var(--mk-bg);
  color: var(--mk-white);
  /* font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */
  -webkit-font-smoothing: antialiased;
}

.mk-page * {
  box-sizing: border-box;
}

.mk-page a {
  /* color: inherit; */
  text-decoration: none;
}

.mk-page button {
  font: inherit;
}

/* Scroll Container & Pinned Stage */
.mk-scroll {
  height: 420vh;
  position: relative;
}

.mk-stage {
  position: sticky;
  top: 64px;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--mk-bg);
}

/* Header & Navigation */
.mk-nav {
  position: absolute;
  z-index: 20;
  top: 17px;
  left: 3.4vw;
  right: 3.4vw;
  height: 55px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 7px 0 11px;
  border-radius: 999px;
  color: #b9b9bd;
  animation: mk-nav-in .8s ease both;
}

.mk-logo {
  width: 31px;
  height: 19px;
  position: relative;
  display: block;
  border: 2px solid #aeb0b4;
  border-radius: 999px;
}

.mk-logo span {
  position: absolute;
  top: 5px;
  width: 5px;
  height: 5px;
  background: #aeb0b4;
  border-radius: 50%;
}

.mk-logo span:first-child {
  left: 8px;
}

.mk-logo span:last-child {
  right: 8px;
}

.mk-nav__links {
  display: flex;
  gap: 29px;
  font-size: 10px;
}

.mk-nav__links a {
  transition: color .25s ease;
}

.mk-nav__links a:hover {
  color: #fff;
}

.mk-nav__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 4px 11px 4px 4px;
  font-size: 10px;
  transition: background .25s ease, transform .25s ease;
}

.mk-nav__cta:hover {
  background: rgba(255, 255, 255, .13);
  transform: translateY(-1px);
}

.mk-nav__cta-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f4f4f4;
  color: #3b3c40;
  font-size: 15px;
}

/* Layout Engine */
.mk-layout {
  --mk-split: 0;
  --mk-hero-opacity: 1;
  --mk-feature-opacity: 0;
  --mk-return: 0;

  position: absolute;
  inset: 0;
  /* width: min(1260px, 92vw); */
  margin: auto;
}

/* Centered Hero Section */
.mk-copy__hero {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 112px;
  width: 850px;
  transform:
    translateX(-50%) translateY(calc(50px * var(--mk-split))) scale(calc(1 - (.07 * var(--mk-split))));
  opacity: var(--mk-hero-opacity);
  text-align: center;
  pointer-events: none;
  transition: none;
}

.mk-copy__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #b4b5b8;
  margin-bottom: 14px;
}

.mk-mini-mark {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}

.mk-copy__hero h1 {
  margin: 0;
  font-size: clamp(38px, 4vw, 59px);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .99;
}

.mk-copy__hero p {
  margin: 17px 0 0;
  color: #b4b5b8;
  font-size: 11px;
  line-height: 1.45;
}

/* Left Column Feature Section */
.mk-copy__feature {
  position: absolute;
  z-index: 7;
  left: 5%;
  top: 50px;
  /* width: 280px; */
  opacity: var(--mk-feature-opacity);
  transform:
    translateX(calc(-30px * (1 - var(--mk-feature-opacity)))) translateY(calc(8px * (1 - var(--mk-feature-opacity))));
  pointer-events: auto;
}

.mk-copy__feature h2 {
  margin: 0 0 35px;
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.045em;
}

.mk-feature-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.mk-feature {
  position: relative;
  width: 100%;
  padding: 0 0 0 15px;
  border: 0;
  background: transparent;
  color: #a2a3a8;
  text-align: left;
  cursor: pointer;
}

.mk-feature__bar {
  position: absolute;
  left: 0;
  top: 2px;
  width: 2px;
  height: 100%;
  background: transparent;
  transition: background .4s ease, transform .4s ease;
}

.mk-feature--active .mk-feature__bar {
  background: #fccf0f;
}

.mk-feature strong {
  display: block;
  color: #e8e8e9;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 4px;
}

.mk-feature small {
  display: block;
  /* max-width: 215px; */
  color: #c5c2c2;
  font-size: 16px;
  line-height: 1.4;
}

.mk-feature--active small {
  color: #b1b2b6;
}

.mk-feature-cta {
  margin-top: 38px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 9px 4px 5px;
  border-radius: 12px;
  background: #fccf0f;
  color: #28292c;
  font-size: 10px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mk-feature-cta b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #313236;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.mk-feature-cta span {
  padding: 8px;
  font-size: 16px;
  color: #000 !important;
}

.mk-feature-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

/* Interactive Dashboard & Screenshots */
.mk-dashboard {
  --mk-dashboard-y: 38px;
  --mk-dashboard-scale: 1.035;

  position: absolute;
  z-index: 4;
  /* left: 30%; */
  left: 33%;
  /* top: 12%; */
  top: 3%;
  width: 74%;
  aspect-ratio: 2.1 / 1;
  /* aspect-ratio: 1.88 / 1; */
  transform:
    translateY(var(--mk-dashboard-y)) scale(var(--mk-dashboard-scale));
  transition: none;
}

.mk-dashboard__glow {
  position: absolute;
  z-index: -1;
  inset: 7% 4% 0;
  border-radius: 40px;
  background: radial-gradient(ellipse at 50% 75%,
      rgba(232, 177, 110, .46),
      rgba(130, 139, 156, .2) 40%,
      transparent 70%);
  filter: blur(22px);
}

.mk-ui {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition:
    opacity .58s cubic-bezier(.22, .8, .22, 1),
    transform .72s cubic-bezier(.22, .8, .22, 1);
  pointer-events: none;
}

.mk-ui--active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mk-ui img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Bottom Floating Elements */
.mk-float {
  position: absolute;
  z-index: 30;
  right: 13px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mk-float button {
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #303136;
  padding: 5px 9px;
  font-size: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
}

/* Animations & Media Queries */
@keyframes mk-nav-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* @media (max-width: 900px) {
  .mk-nav__links {
    display: none;
  }

  .mk-nav {
    grid-template-columns: 1fr auto;
  }

  .mk-copy__hero {
    width: calc(100% - 30px);
  }

  .mk-copy__feature {
    left: 4%;
    width: 230px;
  }

  .mk-dashboard {
    left: 23%;
    width: 72%;
  }
}

@media (max-width: 680px) {
  .mk-stage {
    min-height: 600px;
  }

  .mk-copy__hero h1 {
    font-size: 42px;
  }

  .mk-copy__hero p {
    font-size: 10px;
  }

  .mk-copy__feature {
    top: 27%;
    left: 5%;
    width: 170px;
  }

  .mk-copy__feature h2 {
    font-size: 19px;
  }

  .mk-feature small {
    font-size: 8px;
  }

  .mk-dashboard {
    left: 20%;
    top: 36%;
    width: 85%;
  }
} */

@media (max-width: 991px) {
  .mk-copy__feature h2 {
    font-size: 22px;
    text-align: justify;
    letter-spacing: 0;
  }

  .mk-feature strong {
    font-size: 18px;
  }

  .mk-scroll {
    height: auto !important;
  }

  .mk-copy {
    align-items: flex-start;
    text-align: right;
  }

  .mk-stage {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0px 16px 40px;
  }

  .mk-layout {
    position: relative !important;
    inset: auto !important;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .mk-copy__feature {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .mk-dashboard {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    aspect-ratio: 1.48 / 1;
    transform: none !important;
  }

  .mk-ui {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .mk-ui--active {
    opacity: 1;
    pointer-events: auto;
  }

  .mk-ui img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (prefers-reduced-motion: reduce) {

  .mk-page *,
  .mk-page *::before,
  .mk-page *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}






/* contact page */
/* Makro Contact – all classes prefixed "mkt-" */
:root {
  --mkt-bg: #e8ebf2;
  --mkt-dark: #34353a;
  --mkt-ink: #2b2c31;
  --mkt-mute: #8a8d98;
  --mkt-lime: #ddf65a;
  --mkt-sky: #1aa3ff;
  --mkt-ease: cubic-bezier(.22, 1, .36, 1)
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

a {
  color: inherit;
  text-decoration: none
}

.mkt-body {
  background: var(--mkt-bg);
  color: var(--mkt-ink);
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  overflow-x: hidden
}

/* NAV – transparent at top, white pill after scroll */
.mkt-nav {
  position: sticky;
  top: 12px;
  z-index: 50;
  margin: 12px 22px 0;
  height: 46px;
  padding: 0 10px 0 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background .4s, box-shadow .4s;
  animation: mkt-drop .8s var(--mkt-ease) both
}

.mkt-nav.is-solid {
  background: #fff;
  box-shadow: 0 6px 24px rgba(40, 50, 80, .08)
}

.mkt-nav__logo {
  width: 32px;
  height: 19px;
  border-radius: 12px;
  background: #2a2b30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px
}

.mkt-nav__logo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff
}

.mkt-nav__links {
  display: flex;
  gap: 30px;
  font-size: 12.5px;
  color: #6b6e79
}

.mkt-nav__links a {
  transition: color .3s
}

.mkt-nav__links a:hover,
.mkt-nav__links .is-active {
  color: #111
}

.mkt-nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: 10px;
  font-size: 12.5px;
  background: transparent;
  transition: background .3s
}

.mkt-nav__cta i {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #dde1ea;
  display: grid;
  place-items: center;
  font-style: normal;
  transition: transform .4s var(--mkt-ease)
}

.mkt-nav__cta:hover i {
  transform: translateX(3px)
}

.mkt-nav.is-solid .mkt-nav__cta {
  background: #f1f3f7
}

/* LAYOUT */
.mkt-get-started-btn {
  /* padding-top: 10px; */
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
}

.mk-changelog span {
  color: #000;
}

.mkt-wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 10% 0px 2%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch
}

.mkt-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0 14px
}

.mkt-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 5px;
  border-radius: 20px;
  background: #fff;
  font-size: 11px;
  color: #555
}

.mkt-chip i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #eceff4;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-style: normal
}

.mkt-h1 {
  font-weight: 400;
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -.035em;
  margin: 26px 0 18px;
}

.mkt-line {
  display: block;
  overflow: hidden;
}

.mkt-line em {
  display: block;
  font-style: normal;
  transform: translateY(110%);
  animation: mkt-line 1.1s var(--d, 0s) var(--mkt-ease) forwards
}

.mkt-lead {
  max-width: 350px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(36, 36, 38, 0.75);
  margin-bottom: 20px;
}

.mkt-trust small {
  font-size: 11px;
  color: var(--mkt-mute)
}

.mkt-trust__row {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-top: 20px;
  color: #8c8f9b;
  font-size: 15px;
  letter-spacing: .04em
}

.mkt-trust__row b {
  font-weight: 600;
  transition: color .3s, transform .4s var(--mkt-ease)
}

.mkt-trust__row b:hover,
.mkt-trust__row span:hover {
  color: #333;
  transform: translateY(-3px)
}

.mkt-serif {
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-style: italic
}

/* FORM */
.mkt-form {
  background: var(--mkt-dark);
  border-radius: 22px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(30, 40, 70, .12)
}

.mkt-form__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 16px 18px 20px
}

.mkt-form__head h2 {
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -.02em
}

.mkt-form__head p {
  font-size: 10.5px;
  line-height: 1.5;
  text-align: right;
  color: #c7c9d1
}

.mkt-form__head a {
  color: #8d909b
}

.mkt-form__body {
  background: #fff;
  border-radius: 16px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 26px
}

.mkt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px
}

.mkt-field {
  position: relative;
  display: block;
  font-size: 14px;
  color: #444
}

.mkt-field span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.mkt-field input,
.mkt-field textarea,
.mkt-field select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #222;
  padding: 2px 0 10px;
  border-bottom: 1px solid #ececf0;
  resize: none
}

.mkt-field select {
  appearance: none;
  cursor: pointer
}

.mkt-field textarea {
  height: 96px;
  resize: vertical
}

.mkt-field ::placeholder {
  color: #b5b7c0
}

.mkt-field select:invalid {
  color: #b5b7c0
}

.mkt-field::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--mkt-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--mkt-ease)
}

.mkt-field:focus-within::after {
  transform: scaleX(1)
}

.mkt-field--area::after {
  bottom: 6px
}

.mkt-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: var(--mkt-dark);
  color: #fff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  overflow: hidden
}

.mkt-submit i {
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 44px;
  border-radius: 7px;
  background: #fccf0f;
  color: #222;
  display: grid;
  place-items: center;
  font-style: normal;
  transition: width .6s var(--mkt-ease)
}

.sba-accordion-body p {
  color: rgba(36, 36, 38, 0.75);
}

.mkt-submit span {
  position: relative;
  transition: transform .5s var(--mkt-ease);
  font-size: 16px;
}

.mkt-submit:hover i {
  width: calc(100% - 8px);
}

.mkt-submit:hover span {
  transform: translateX(-12px);
  color: #222;
  z-index: 1
}

.mkt-submit:active {
  transform: scale(.99)
}

/* CARDS (top edges visible at end of video) */
.mkt-cards {
  max-width: 1340px;
  margin: 44px auto 0;
  padding: 0 22px 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.mkt-cards__item {
  height: 260px;
  background: #fff;
  border-radius: 20px;
  transition: opacity .9s var(--d, 0s), transform .9s var(--d, 0s) var(--mkt-ease), box-shadow .4s
}

.mkt-cards__item.is-in:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(30, 40, 70, .1)
}

/* FLOAT */
.mkt-float {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 60;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 30px rgba(30, 40, 70, .16);
  animation: mkt-rise 1s .6s var(--mkt-ease) both
}

.mkt-float a {
  display: block;
  text-align: center;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  transition: transform .3s
}

.mkt-float a:hover {
  transform: scale(1.04)
}

.mkt-float__btn {
  background: var(--mkt-sky);
  color: #fff
}

.mkt-float__badge {
  background: #fff;
  color: #111
}

/* REVEAL */
.mkt-in {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--d, 0s), transform .9s var(--d, 0s) var(--mkt-ease)
}

.mkt-in.is-in {
  opacity: 1;
  transform: none
}

.mkt-form .mkt-field,
.mkt-form .mkt-submit {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s calc(.5s + var(--f, 0)*90ms), transform .6s calc(.5s + var(--f, 0)*90ms) var(--mkt-ease)
}

.mkt-form.is-in .mkt-field,
.mkt-form.is-in .mkt-submit {
  opacity: 1;
  transform: none
}

@keyframes mkt-line {
  to {
    transform: none
  }
}

@keyframes mkt-drop {
  from {
    opacity: 0;
    transform: translateY(-30px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes mkt-rise {
  from {
    opacity: 0;
    transform: translateY(40px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media(max-width:900px) {

  .mkt-h1 {
    font-size: 30px;
        letter-spacing: -0.02em;
  }

  .mkt-lead {
    font-size: 16px;
  }

  span.mkt-line {
    font-size: 42px;
  }

  .mkt-wrap,
  .mkt-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mkt-nav__links {
    display: none
  }

  .mkt-trust {
    margin-top: 30px
  }

  .mkt-trust__row {
    flex-wrap: wrap;
    gap: 20px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important
  }

  .mkt-in,
  .mkt-line em,
  .mkt-form .mkt-field,
  .mkt-form .mkt-submit {
    opacity: 1;
    transform: none
  }
}




/* next section */
.sba-container {
  margin: 0 auto;
  padding: 60px 0px 7%;
  width: 100%;
  max-width: 1150px;
}

.sba-sidebar-inner {
  display: flex;
  gap: 25px;
  /* max-width: 1180px; */
  margin: 0 auto;
  align-items: flex-start;
}

/* --- Smooth Max-Height Animation Wrapper --- */
.sba-accordion-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  /* Smooth spring-like ease */
  will-change: max-height;


}

/* Inner content container */
.sba-accordian-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 20px 24px 20px;
  gap: 20px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.sba-accordion-item.sba-open .sba-accordian-inner {
  opacity: 1;
  transform: translateY(0);
}

.sba-accordion-body-image img {
  display: none;
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

/* --- Left Sidebar (Sticky) --- */
.sba-sidebar {
  width: 280px;
  background: #eef2f6;
  border-radius: 16px;
  padding: 16px;
  position: sticky;
  /* top: 30px; */
  top: 92px;
  flex-shrink: 0;
}

.sba-menu-item {
  padding: 14px 20px;
  border-radius: 12px;
  color: #64748b;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 8px;
}

.sba-menu-item:last-child {
  margin-bottom: 0;
}

.sba-menu-item.sba-active {

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background: linear-gradient(120deg, #eccf4a, #f5af32);

  color: #000;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-weight: 500;
}

/* --- Right Content Area --- */
.sba-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sba-header-banner h1 {
  text-align: center;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 40px;
  /* font-family: 'Montserrat', sans-serif; */
}

.sba-header-banner p {
  font-size: 1.05rem;
  color: #475569;
}

.sba-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 14%);
  scroll-margin-top: 30px;
}

.sba-section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #0f172a;
}

/* --- Accordion Item --- */
.sba-accordion-item {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.sba-accordion-item:last-child {
  margin-bottom: 0;
}

.sba-accordion-header {
  padding: 16px 20px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #ffffff;
  user-select: none;
}

.sba-accordion-header::after {
  content: '+';
  font-size: 1.2rem;
  color: #64748b;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sba-accordion-item.sba-open .sba-accordion-header::after {
  content: '✕';
  transform: rotate(180deg);
}

.sba-accordion-body {
  color: #475569;
  line-height: 1.6;
}

.sba-accordion-body ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
}

.sba-accordion-body li {
  margin-bottom: 6px;
}

.sba-accordion-body li:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .sba-section-title {
    font-weight: 500 !important;
  }
  .sba-accordion-header {
    line-height: 1.4;
  }

  .sba-sidebar-inner {
    flex-direction: column-reverse;
  }

  .sba-sidebar {
    display: none;
  }

  .sba-container {
    padding-top: 44px;
    padding-bottom: 14%;
  }

  .sba-header-banner h1 {
    font-size: 28px;
    margin-bottom: 30px;
    /* padding-bottom: 6%; */

  }

  .sba-accordion-header::after {
    font-size: 1rem;
  }

  .sba-accordian-inner {
    grid-template-columns: 1fr;
  }
}







/* faqs */
:root {
  --aif-bg: #0b0f19;
  --aif-card-bg: rgba(22, 30, 49, 0.6);
  --aif-card-hover: rgba(30, 41, 67, 0.7);
  --aif-card-active: rgba(30, 41, 67, 0.95);
  --aif-border: rgba(255, 255, 255, 0.08);
  --aif-border-hover: rgba(99, 102, 241, 0.3);
  --aif-text-primary: #f8fafc;
  --aif-text-secondary: #94a3b8;
  --aif-accent: #6366f1;
  --aif-accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --aif-badge-bg: rgba(99, 102, 241, 0.12);
  --aif-badge-text: #818cf8;
  --aif-radius: 16px;
  --aif-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.aif-faq-container-outer {
  /* font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; */
  background-color: #fff;
  color: var(--aif-text-primary);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 5% 20px 7%; */
  padding: 72px 20px 6%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


/* Outer Wrapper */
.aif-faq-container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

/* Header & Hero Area */
.aif-faq-header {
  text-align: center;
  margin-bottom: 36px;
}

.aif-faq-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--aif-badge-bg);
  color: var(--aif-badge-text);
  border: 1px solid rgba(99, 102, 241, 0.2);
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}

.aif-faq-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--aif-accent);
  box-shadow: 0 0 10px var(--aif-accent);
}

.aif-faq-title {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #000;
  margin-bottom: 12px;
  text-align: center;
  /* background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; */
}

.aif-faq-subtitle {
  font-size: 15px;
  color: var(--aif-text-secondary);
  max-width: 520px;
  margin: 0 auto 24px;
}

/* Search Bar */
.aif-faq-search-wrapper {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.aif-faq-search-input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--aif-border);
  color: var(--aif-text-primary);
  font-size: 14px;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  outline: none;
  transition: var(--aif-transition);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.aif-faq-search-input::placeholder {
  color: #64748b;
}

.aif-faq-search-input:focus {
  border-color: var(--aif-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 4px 20px rgba(0, 0, 0, 0.3);
}

.aif-faq-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: #64748b;
  fill: none;
  pointer-events: none;
  transition: var(--aif-transition);
}

.aif-faq-search-input:focus+.aif-faq-search-icon {
  stroke: var(--aif-accent);
}

/* Accordion List */
.aif-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}

/* Individual Accordion Item */
.aif-faq-item {
  /* background: var(--aif-card-bg); */
  border: 1px solid var(--aif-border);
  border-radius: var(--aif-radius);
  overflow: hidden;
  transition: var(--aif-transition);
  /* backdrop-filter: blur(12px); */
}

.aif-faq-item:hover {
  /* background: var(--aif-card-hover); */
  /* border-color: var(--aif-border-hover); */
}

.aif-faq-item--expanded {
  /* background: var(--aif-card-active); */
  /* border-color: rgba(99, 102, 241, 0.4); */
  /* box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3); */
}

/* Question Header Button */
.aif-faq-trigger {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* background: none; */
  border: none;
  /* color: var(--aif-text-primary); */
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.aif-faq-question-text {
  flex-grow: 1;
  line-height: 1.4;
}

/* Icon Toggle Box */
.aif-faq-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  /* border: 1px solid var(--aif-border); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--aif-transition);
}

.aif-faq-item:hover .aif-faq-icon-box {
  /* background: var(--aif-badge-bg); */
  /* border-color: rgba(99, 102, 241, 0.3); */
}

.aif-faq-chevron {
  width: 16px;
  height: 16px;
  stroke: var(--aif-text-secondary);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}

.aif-faq-item--expanded .aif-faq-chevron {
  transform: rotate(180deg);
  /* stroke: var(--aif-badge-text); */
}

.aif-faq-item--expanded .aif-faq-icon-box {
  /* background: var(--aif-badge-bg); */
  /* border-color: rgba(99, 102, 241, 0.4); */
}

/* Accordion Content Wrapper */
.aif-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.aif-faq-item--expanded .aif-faq-content {
  opacity: 1;
}

.aif-faq-answer {
  padding: 0 24px 22px 24px;
  font-size: 16px;
  color: rgba(36, 36, 38, 0.75);
  line-height: 1.65;
  background: rgb(240 240 240);
}

/* No Results Message */
.aif-faq-empty {
  display: none;
  text-align: center;
  padding: 40px 20px;
  color: var(--aif-text-secondary);
  font-size: 14px;
  /* background: var(--aif-card-bg); */
  border: 1px dashed var(--aif-border);
  border-radius: var(--aif-radius);
}

/* Mobile & Tablet Responsive Adjustments */
@media (max-width: 640px) {
  body {
    padding: 24px 10px 0px;
  }

  .aif-faq-container-outer {
    min-height: 0vh;
    padding: 11% 12px 11%;
  }

  .aif-faq-title {
    font-size: 28px;
    line-height: 1.3;
  }

  .aif-faq-header {
    margin-bottom: 24px;
  }

  .aif-faq-trigger {
    padding: 16px 18px;
    font-size: 15px;
  }

  .aif-faq-answer {
    padding: 0 18px 18px 18px;
    font-size: 14px;
  }

  .aif-faq-icon-box {
    width: 28px;
    height: 28px;
  }

  .aif-faq-chevron {
    width: 14px;
    height: 14px;
  }
}


@media (max-width: 768px) {
    .aif-faq-question-text {
        line-height: 1.6 !important;
        font-size: 16px !important;
    }
    .aif-faq-content {
      min-height: auto !important;
    }
    .aif-faq-answer {
      font-size: 16px !important; 
    }
}



/* =========================================
   ANANTH INFO - FINAL CTA BANNER
========================================= */

.ani-final-cta {
  /* background: #303137; */
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 90px 25px;
  /* background:
        radial-gradient(
            circle at 15% 20%,
            rgba(18, 183, 224, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(47, 95, 224, 0.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #07111b 0%,
            #0b1724 50%,
            #07121c 100%
        ); */
}

/* Background Wrapper */

.ani-final-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Animated Orbs */

.ani-cta-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(5px);
  opacity: 0.55;
  animation: aniCtaFloat 7s ease-in-out infinite;
}

.ani-cta-orb-one {
  width: 230px;
  height: 230px;
  top: -100px;
  left: 8%;
  /* background: rgba(18, 183, 224, 0.18); */
}

.ani-cta-orb-two {
  width: 280px;
  height: 280px;
  right: 5%;
  bottom: -150px;
  /* background: rgba(47, 95, 224, 0.20); */
  animation-delay: -3s;
}

/* Subtle Grid */

.ani-cta-grid {
  position: absolute;
  inset: 0;
  opacity: 0.07;

  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.5) 1px,
      transparent 1px);

  background-size: 55px 55px;

  mask-image: linear-gradient(to bottom,
      transparent,
      black 25%,
      black 75%,
      transparent);
}

/* Main Container */

.ani-final-cta-container {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Content */

.ani-final-cta-content {
  max-width: 850px;
  margin: 0 auto;
}

/* Label */

.ani-final-cta-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin-bottom: 24px;

  color: rgb(133, 134, 142);
  ;

  font-size: 13px;
  font-weight: 700;
  /* letter-spacing: 2.5px; */
}

.ani-cta-label-line {
  width: 38px;
  height: 1px;
  /* background: linear-gradient(
        90deg,
        transparent,
        #12b7e0
    ); */
}

.ani-cta-label-line:last-child {
  /* background: linear-gradient(
        90deg,
        #12b7e0,
        transparent
    ); */
}

/* Heading */

.ani-final-cta-title {
  margin: 0;

  color: #000;

  font-size: 48px;
  line-height: 1.04;
  font-weight: 400;
  /* letter-spacing: -0.02em; */
}

.ani-final-cta-title span {
  display: inline-block;

  /* background: linear-gradient(
        120deg,
        #12b7e0,
        #2f5fe0
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; */

  animation: aniCtaTextGlow 4s ease-in-out infinite;
}

/* Description */

.ani-final-cta-text {
  max-width: 620px;
  margin: 28px auto 0;

  color: rgba(36, 36, 38, 0.75);
  /* color: rgb(175 176 185); */


  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
}

/* Buttons */

.ani-final-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  margin-top: 38px;
}

/* Common Button */

.ani-cta-primary,
.ani-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  min-height: 56px;
  padding: 0 26px;

  border-radius: 100px;

  text-decoration: none;

  font-size: 16px;
  font-weight: 400;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

/* Primary */

.ani-cta-primary {
  color: #000;

  background: linear-gradient(120deg, #eccf4a, #f5af32);

  /* box-shadow:
        0 12px 35px rgba(18, 183, 224, 0.22); */
}

.ani-cta-primary:hover {
  transform: translateY(-4px);

  /* box-shadow:
        0 18px 45px rgba(18, 183, 224, 0.35); */
}

/* Secondary */

.ani-cta-secondary {
  color: #000;

  border: 1px solid rgb(195 196 203);

  /* background: rgb(87 80 80 / 24%); */

  backdrop-filter: blur(12px);
}

.ani-cta-secondary:hover {
  transform: translateY(-4px);

  /* border-color: rgba(18, 183, 224, 0.7); */

  /* background: rgba(18, 183, 224, 0.10); */

  /* box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.20); */
}

/* Arrow */

.ani-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border-radius: 50%;

  font-size: 18px;

  transition: transform 0.3s ease;
}

.ani-cta-primary .ani-cta-arrow {
  background: rgba(255, 255, 255, 0.16);
}

.ani-cta-secondary .ani-cta-arrow {
  background: rgba(255, 255, 255, 0.08);
}

.ani-cta-primary:hover .ani-cta-arrow,
.ani-cta-secondary:hover .ani-cta-arrow {
  transform: translateX(5px);
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes aniCtaFloat {

  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(25px, -25px, 0) scale(1.08);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes aniCtaTextGlow {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.3);
  }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {

  .ani-final-cta {
    padding: 85px 20px;
  }

  .ani-final-cta-title {
    font-size: clamp(40px, 9vw, 58px);
    letter-spacing: -1.5px;
  }

  .ani-final-cta-text {
    font-size: 16px;
    line-height: 1.6;
  }

  .ani-final-cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .ani-cta-primary,
  .ani-cta-secondary {
    width: 100%;
    max-width: 300px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

  .ani-final-cta {
    padding: 54px 18px 50px;
  }

  .ani-final-cta-label {
    gap: 9px;
    font-size: 11px;
    letter-spacing: 1.8px;
  }

  .ani-cta-label-line {
    width: 24px;
  }

  .ani-final-cta-title {
    font-size: 28px;
    line-height: 1.08;
  }

  .ani-final-cta-text {
    margin-top: 22px;
    font-size: 16px;
  }

  .ani-final-cta-buttons {
    margin-top: 30px;
  }

  .ani-cta-primary,
  .ani-cta-secondary {
    min-height: 53px;
    font-size: 14px;
  }
}






/* footer*/
.ai-ftr-demo-header-outer {
  /* font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
  background-color: #eaedf2;
  color: #334155;
  /* min-height: 100vh; */
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-x: hidden;
}

/* Top Bar Info Banner for quick preview controls */
.ai-ftr-demo-header {
  padding: 16px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ai-ftr-demo-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-ftr-demo-badge {
  background-color: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-weight: 700;
}

.ai-ftr-dl-btn {
  background-color: #0284c7;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease;
}

.ai-ftr-dl-btn:hover {
  background-color: #0369a1;
}

/* -------------------------------------------------------------
           FOOTER MAIN STYLES (MATCHING DESIGN PRECISELY)
           ------------------------------------------------------------- */
.ai-ftr-wrapper {
  background-color: #eaedf2;
  /* Exact cool light blue-gray tint */
  width: 100%;
  position: relative;
  /* padding-top: 60px; */
  padding-bottom: 0px;
  overflow: hidden;
  /* border-top: 1px solid #e1e6ed; */
  /* margin-top: 100px; */
}

.ai-ftr-container {
  max-width: 1320px;
  margin: 0 auto;
  /* padding: 0 40px 50px; */
  padding: 0 40px 0px;
  position: relative;
  z-index: 2;
}

/* Top Grid Layout: Logo on Left, 4 Columns on Right */
.ai-ftr-top-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  /* margin-bottom: 60px; */
}

/* Logo Component */
.ai-ftr-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 38px;
  border: 3.5px solid #2d3139;
  border-radius: 9999px;
  padding: 4px;
  box-sizing: border-box;
  background: transparent;
}

.ai-ftr-logo-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-ftr-logo-dot {
  width: 13px;
  height: 13px;
  background-color: #2d3139;
  border-radius: 50%;
}

/* 4 Columns Nav Layout */
.ai-ftr-nav-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ai-ftr-col-heading {
  font-size: 16px;
  font-weight: 600;
  color: #2d3139;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.ai-ftr-links-list {
  gap: 10px !important;
}

.ai-ftr-link-list-row {
  flex-direction: row !important;
}

.ai-ftr-col ul li a img {
  width: 90%;
  /* height: 34px; */
}

.ai-ftr-link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-ftr-link-item a {
  color: #5d6675;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  transition: color 0.15s ease;
  display: inline-block;
}

.ai-ftr-link-item a:hover {
  color: #111827;
}

/* Bottom Hero Section with Big Text & Floating Card */
.ai-ftr-bottom-section {
  position: relative;
  width: 100%;
  min-height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

/* Floating Copyright Dark Card */
.ai-ftr-copyright-card {
  background-color: #232529;
  color: #ffffff;
  padding: 16px 18px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 13.5px;
  font-weight: 400;
  /* letter-spacing: -0.01em; */
  position: relative;
  z-index: 5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-left: 40px;
  /* margin-bottom: 24px; */
  white-space: nowrap;
}

/* Giant Stylized Ananthinfo Background Typography */
.ai-ftr-giant-text-container {
  position: absolute;
  bottom: -15px;
  left: 57px;
  width: 100%;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 1;
  line-height: 0.8;
  padding-left: 26%;
}

.ai-ftr-giant-text {
  font-size: 160px;
  margin-bottom: 8px;
  ;
  font-weight: 900;
  color: #212429;
  letter-spacing: -0.05em;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  text-transform: none;
  /* margin: 0; */
  padding: 0;
  display: block;
}

/* Floating Badge Buttons (Bottom Right) */
.ai-ftr-floating-badges {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  z-index: 10;
}

.ai-ftr-badge-primary {
  background-color: #0091ff;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 145, 255, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.ai-ftr-badge-primary:hover {
  background-color: #007ce6;
  transform: translateY(-2px);
}

.ai-ftr-badge-secondary {
  background-color: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.ai-ftr-badge-secondary:hover {
  transform: translateY(-2px);
}

.ai-ftr-framer-icon {
  width: 14px;
  height: 14px;
  fill: #000000;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .ai-ftr-top-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ai-ftr-nav-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  .ai-ftr-giant-text-container {
    /* bottom: -20px; */
  }
}

@media (max-width: 768px) {
  .ai-ftr-bottom-section{
    min-height: auto !important;
    margin-top: 10px !important;
  }
.ai-ftr-giant-text {
    /* font-size: 63px;
    margin-bottom: 15px; */
    font-size: 58px;
        margin-bottom: 63px;
  }
}

@media (max-width: 600px) {

  /* .ai-ftr-brand-col h1.company-name, .company-name {
    font-size: 19px;
    max-width: 207px;
  } */
  .ai-ftr-link-list-row {
    gap: 5px;
  }

  .ai-ftr-col ul li a img {
    width: 28px;
    height: 28px;
  }

  .ai-ftr-links-list {
    gap: 15px !important;
  }

  .ai-ftr-giant-text {
    /* font-size: 63px;
    margin-bottom: 15px; */
    /* font-size: 58px; */
        /* margin-bottom: 63px; */
  }

  .ai-ftr-giant-text-container {
    left: 0px;
    padding-left: 0%;
  }



  .ai-ftr-wrapper {
    padding-top: 40px;
  }

  .ai-ftr-container {
    padding: 0 0px 25px;
  }

  .ai-ftr-demo-header-outer {
    padding-top: 0px;
  }

  .ai-ftr-nav-cols {
    grid-template-columns: repeat(1, 1fr);
    padding-left: 8px;
  }

  .ai-ftr-copyright-card {
    margin-left: 20px;
    font-size: 12px;
    padding: 12px 18px;
  }

  .ai-ftr-floating-badges {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 20px;
    align-items: flex-start;
  }
}




/* ========================================== ANANTH INFO GET IN TOUCH - ALTERNATIVE DESIGN ========================================== */
.ananth-gti-section {
  position: relative;
  overflow: hidden;
  /* padding: 120px 0px 120px; */
  padding: 90px 0px 6%;
  background: #ffffff;
  /* font-family: "Inter", Arial, sans-serif; */
}

/* ========================================== CONTAINER ========================================== */
.ananth-gti-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
}

/* ========================================== TOP LABEL ========================================== */
.ananth-gti-top-label {
  font-style: italic;
  /* display: flex; */
  align-items: center;
  gap: 12px;
  margin-bottom: 19px;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.ananth-contact-connect-container {
  max-width: 1150px;
}

.ananth-gti-label-line {
  /* width: 38px;
        height: 2px; */
  border-radius: 10px;
  /* background: linear-gradient(120deg, #12b7e0, #2f5fe0); */
}

/* ========================================== MAIN LAYOUT ========================================== */
.ananth-gti-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  /* gap: 100px; */
  margin-top: 2%;
  /* align-items: center; */
}

/* ========================================== LEFT INTRO ========================================== */
.ananth-gti-intro {
  position: relative;
}

.ananth-gti-small-title {
  margin-bottom: 22px;
  color: #8791a2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}

.ananth-gti-heading {
  margin: 0;
  color: #111827;
  font-size: 58px;
  line-height: 1.15;
  letter-spacing: -3px;
  font-weight: 400;
}

.ananth-gti-heading span {
  display: block;
  /* background: linear-gradient(120deg, #12b7e0, #2f5fe0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text; */
}

.ananth-gti-description {
  max-width: 520px;
  margin: 32px 0 0;
  color: #687386;
  font-size: 16px;
  line-height: 1.85;
}

/* ========================================== NUMBER ========================================== */
.ananth-gti-number {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 60px;
  color: #9ba5b5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.ananth-gti-number-line {
  width: 70px;
  height: 1px;
  background: #dce2eb;
}

/* ========================================== INFORMATION AREA ========================================== */
.ananth-gti-information {
  border-top: 1px solid #e3e8ef;
}

/* ========================================== INFO ROW ========================================== */
.ananth-gti-info-row {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr 40px;
  align-items: center;
  gap: 20px;
  min-height: 115px;
  padding: 18px 5px;
  border-bottom: 1px solid #e3e8ef;
  transition: padding 0.4s ease, background 0.4s ease;
}

.ananth-gti-info-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(120deg, #eccf4a, #f5af32);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.4s ease;
}

.ananth-gti-info-row:hover {
  padding-left: 20px;
  background: #f8fbff;
}

.ananth-gti-info-row:hover::before {
  transform: scaleY(1);
}

/* ========================================== NUMBER ========================================== */
.ananth-gti-info-number {
  color: #a3adbb;
  font-size: 11px;
  font-weight: 700;
  transition: color 0.35s ease;
}

.ananth-gti-info-row:hover .ananth-gti-info-number {
  color: #fccf0f;
}

/* ========================================== INFO CONTENT ========================================== */
.ananth-gti-info-main {
  min-width: 0;
}

.ananth-gti-info-label {
  display: block;
  margin-bottom: 8px;
  color: #8a94a4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
}

.ananth-gti-info-main h3 {
  margin: 0;
  color: #1d2635;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
  word-break: break-word;
}

.ananth-gti-info-main p {
  margin: 5px 0 0;
  color: #7b8594;
  font-size: 13px;
}

/* ========================================== ARROW ========================================== */
.ananth-gti-info-symbol {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #8e98a7;
  font-size: 17px;
  border: 1px solid #e2e7ee;
  transition: color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}

.ananth-gti-info-row:hover .ananth-gti-info-symbol {
  color: #000;
  border-color: transparent;
  background: linear-gradient(120deg, #eccf4a, #f5af32);
  transform: translate(3px, -3px);
}

/* ========================================== OPEN STATUS ========================================== */
.ananth-gti-open-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #000;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

.ananth-gti-open-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fccf0f;
  box-shadow: 0 0 0 4px rgba(76, 189, 131, 0.1);
  animation: ananthGtiPulse 2s ease-in-out infinite;
}

@keyframes ananthGtiPulse {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(76, 189, 131, 0.1);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(76, 189, 131, 0.03);
  }
}

/* ========================================== BOTTOM CTA ========================================== */
.ananth-gti-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 70px;
  padding: 28px 30px;
  border-radius: 14px;
  background: linear-gradient(120deg, #f1fbff, #f4f7ff);
  border: 1px solid #e2ebf5;
}

.ananth-gti-bottom-text span {
  display: block;
  margin-bottom: 7px;
  color: #2f5fe0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.ananth-gti-bottom-text strong {
  color: #202938;
  font-size: 17px;
  font-weight: 650;
}

/* ========================================== CTA BUTTON ========================================== */
.ananth-gti-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 12px 16px 12px 20px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 7px;
  background: linear-gradient(120deg, #12b7e0, #2f5fe0);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(47, 95, 224, 0.16);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ananth-gti-contact-btn b {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  font-weight: 400;
  transition: transform 0.35s ease;
}

.ananth-gti-contact-btn:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(47, 95, 224, 0.25);
}

.ananth-gti-contact-btn:hover b {
  transform: translateX(4px);
}

/* ========================================== BACKGROUND SHAPES ========================================== */
.ananth-gti-bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px);
}

.ananth-gti-bg-one {
  width: 380px;
  height: 380px;
  right: -190px;
  top: -160px;
  background: radial-gradient(circle, rgba(18, 183, 224, 0.08), transparent 70%);
  animation: ananthGtiFloat 9s ease-in-out infinite;
}

.ananth-gti-bg-two {
  width: 300px;
  height: 300px;
  left: -160px;
  bottom: -160px;
  background: radial-gradient(circle, rgba(47, 95, 224, 0.06), transparent 70%);
  animation: ananthGtiFloat 11s ease-in-out infinite reverse;
}

@keyframes ananthGtiFloat {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(25px, -25px, 0);
  }
}

/* ========================================== SCROLL REVEAL ========================================== */
.ananth-gti-reveal,
.ananth-gti-reveal-left,
.ananth-gti-reveal-right {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.ananth-gti-reveal {
  transform: translateY(35px);
}

.ananth-gti-reveal-left {
  transform: translateX(-65px);
}

.ananth-gti-reveal-right {
  transform: translateX(65px);
}

.ananth-gti-reveal.ananth-gti-show,
.ananth-gti-reveal-left.ananth-gti-show,
.ananth-gti-reveal-right.ananth-gti-show {
  opacity: 1;
  transform: translate(0, 0);
}

/* ========================================== TABLET ========================================== */
@media (max-width: 991px) {
  .ananth-gti-section {
    padding: 90px 20px;
  }

  .ananth-gti-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ananth-gti-heading {
    font-size: 60px;
  }
}

/* ========================================== MOBILE ========================================== */
@media (max-width: 600px) {
  .ananth-gti-section {
    /* padding: 50px 17px 0px; */
    padding: 45px 17px 0px;
  }

  .ananth-gti-top-label {
    margin-bottom: 20px;
  }

  .ananth-gti-heading {
    font-size: 42px;
    letter-spacing: 0px;
  }

  .ananth-gti-description {
    margin-top: 25px;
    font-size: 14px;
  }

  .ananth-gti-number {
    margin-top: 40px;
  }

  .ananth-gti-info-row {
    grid-template-columns: 35px 1fr;
    gap: 12px;
    min-height: 100px;
  }

  .ananth-gti-info-symbol {
    display: none;
  }

  .ananth-gti-open-status {
    grid-column: 2;
    margin-top: -5px;
  }

  .ananth-gti-info-main h3 {
    font-size: 15px;
  }

  .ananth-gti-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 50px;
    padding: 23px;
  }

  .ananth-gti-bottom-text strong {
    font-size: 15px;
  }

  .ananth-gti-contact-btn {
    width: 100%;
    justify-content: space-between;
  }
}






/* ========================================== ANANTH INFO - GET IN TOUCH ========================================== */
.ananth-contact-section {
  position: relative;
  overflow: hidden;
  padding: 110px 20px;
  background: #f7faff;
  font-family: "Inter", Arial, sans-serif;
}

/* ========================================== CONTAINER ========================================== */
.ananth-contact-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* ========================================== HEADER ========================================== */
.ananth-contact-header {
  max-width: 760px;
  margin-bottom: 65px;
}

.ananth-contact-eyebrow {
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #000;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.ananth-contact-eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 10px;
}

.ananth-contact-title {
  margin: 0;
  color: #121827;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -2.5px;
  font-weight: 700;
}

.ananth-contact-title span {
  display: block;
  background: linear-gradient(120deg, #12b7e0, #2f5fe0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ananth-contact-intro {
  max-width: 650px;
  margin: 25px 0 0;
  color: #687386;
  font-size: 16px;
  line-height: 1.8;
}

/* ========================================== MAIN CONTACT AREA ========================================== */
.ananth-contact-main {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 25px;
  margin-bottom: 85px;
}

/* ========================================== BRAND CARD ========================================== */
.ananth-contact-brand {
  position: relative;
  padding: 45px;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 22px;
  background: linear-gradient(145deg, #111827, #18263d);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(18, 42, 80, 0.15);
}

.ananth-contact-brand::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  top: -100px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(18, 183, 224, 0.3), rgba(47, 95, 224, 0.08));
  filter: blur(5px);
}

.ananth-contact-brand-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ananth-contact-mini-label {
  color: #9ba8bd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}

.ananth-contact-brand-mark {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(120deg, #12b7e0, #2f5fe0);
  box-shadow: 0 10px 30px rgba(18, 183, 224, 0.25);
}

.ananth-contact-brand h3 {
  position: relative;
  z-index: 2;
  margin: 55px 0 18px;
  color: #ffffff;
  font-size: clamp(30px, 3vw, 43px);
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.ananth-contact-brand h3 span {
  display: block;
  color: #54d9ef;
}

.ananth-contact-brand p {
  position: relative;
  z-index: 2;
  max-width: 470px;
  margin: 0 0 30px;
  color: #b7c1d0;
  font-size: 14px;
  line-height: 1.8;
}

/* ========================================== PRIMARY BUTTON ========================================== */
.ananth-contact-primary-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  padding: 13px 18px;
  border-radius: 7px;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition: transform 0.35s ease, background 0.35s ease;
}

.ananth-contact-primary-btn:hover {
  color: #ffffff;
  transform: translateY(-4px);
  background: linear-gradient(120deg, #12b7e0, #2f5fe0);
}

.ananth-contact-btn-arrow {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  transition: transform 0.35s ease;
}

.ananth-contact-primary-btn:hover .ananth-contact-btn-arrow {
  transform: translateX(5px);
}

/* ========================================== CONTACT DETAILS ========================================== */
.ananth-contact-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.ananth-contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  padding: 28px 23px;
  min-height: 155px;
  border-radius: 15px;
  background: #ffffff;
  border: 1px solid #e7edf5;
  box-shadow: 0 8px 25px rgba(35, 63, 104, 0.045);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.ananth-contact-info-card:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 95, 224, 0.25);
  box-shadow: 0 18px 35px rgba(35, 63, 104, 0.09);
}

/* ICON */
.ananth-contact-info-icon {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #eef7ff;
  transition: background 0.35s ease, transform 0.35s ease;
}

.ananth-contact-info-icon span {
  color: #2f5fe0;
  font-size: 11px;
  font-weight: 700;
}

.ananth-contact-info-card:hover .ananth-contact-info-icon {
  background: linear-gradient(120deg, #12b7e0, #2f5fe0);
  transform: rotate(-4deg);
}

.ananth-contact-info-card:hover .ananth-contact-info-icon span {
  color: #ffffff;
}

/* TEXT */
.ananth-contact-info-content {
  min-width: 0;
}

.ananth-contact-info-label {
  display: block;
  margin-bottom: 8px;
  color: #8993a3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.ananth-contact-info-content h4 {
  margin: 0;
  color: #202735;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
  word-break: break-word;
}

.ananth-contact-info-content h4 a {
  color: #202735;
  text-decoration: none;
  transition: color 0.3s ease;
}

.ananth-contact-info-content h4 a:hover {
  color: #2f5fe0;
}

.ananth-contact-info-content p {
  margin: 5px 0 0;
  color: #788294;
  font-size: 13px;
}

/* ========================================== CONNECT WITH US ========================================== */
.ananth-contact-connect {
  padding: 90px 0;
  /* padding: 90px 90px 7%; */
}

.ananth-contact-connect-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
}

.ananth-contact-connect-heading {
  margin-bottom: 30px;
}

.ananth-contact-connect-heading h3 {
  margin: 15px 0 10px;
  color: #171e2c;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.7px;
}

.ananth-contact-connect-heading p {
  margin: 14px 0 0;
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
}

/* ========================================== SOCIAL GRID ========================================== */
.ananth-contact-social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ananth-contact-social-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border-radius: 15px;
  background: #ffffff;
  border: 1px solid #e6ebf3;
  text-decoration: none;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.ananth-contact-social-card:hover {
  color: inherit;
  transform: translateY(-6px);
  border-color: rgba(47, 95, 224, 0.25);
  box-shadow: 0 18px 40px rgba(35, 63, 104, 0.08);
}

/* SOCIAL ICON */
.ananth-contact-social-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #000;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(120deg, #eccf4a, #f5af32);
  transition: transform 0.35s ease;
}

.ananth-contact-social-card:hover .ananth-contact-social-icon {
  transform: rotate(-5deg) scale(1.08);
}

/* SOCIAL CONTENT */
.ananth-contact-social-content {
  flex: 1;
}

.ananth-contact-social-content span {
  display: block;
  margin-bottom: 6px;
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

.ananth-contact-social-content p {
  margin: 5px 0;
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
  line-height: 1.6;
}

/* SOCIAL ARROW */
.ananth-contact-social-arrow {
  color: #9aa4b3;
  font-size: 20px;
  transition: color 0.35s ease, transform 0.35s ease;
}

.ananth-contact-social-card:hover .ananth-contact-social-arrow {
  color: #fccf0f;
  transform: translate(4px, -4px);
}

/* ========================================== BACKGROUND GLOW ========================================== */
.ananth-contact-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.ananth-contact-glow-one {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -100px;
  background: rgba(18, 183, 224, 0.08);
  animation: ananthContactFloat 8s ease-in-out infinite;
}

.ananth-contact-glow-two {
  width: 220px;
  height: 220px;
  bottom: -100px;
  left: -80px;
  background: rgba(47, 95, 224, 0.06);
  animation: ananthContactFloat 10s ease-in-out infinite reverse;
}

@keyframes ananthContactFloat {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(25px, -20px, 0);
  }
}

/* ========================================== SCROLL REVEAL ========================================== */
.ananth-contact-reveal,
.ananth-contact-reveal-left,
.ananth-contact-reveal-right {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.ananth-contact-reveal {
  transform: translateY(40px);
}

.ananth-contact-reveal-left {
  transform: translateX(-60px);
}

.ananth-contact-reveal-right {
  transform: translateX(60px);
}

.ananth-contact-reveal.ananth-contact-show,
.ananth-contact-reveal-left.ananth-contact-show,
.ananth-contact-reveal-right.ananth-contact-show {
  opacity: 1;
  transform: translate(0, 0);
}

/* ========================================== TABLET ========================================== */
@media (max-width: 991px) {
  .ananth-contact-section {
    padding: 85px 20px;
  }

  .ananth-contact-main {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .ananth-contact-brand {
    min-height: 400px;
  }
}

/* ========================================== MOBILE ========================================== */
@media (max-width: 650px) {

  .ananth-contact-connect-heading h3 {
    font-size: 30px;
  }

  .ananth-contact-connect-heading p {
    line-height: 1.6;
  }

  .ananth-contact-connect-heading {
    margin-bottom: 22px;
  }

  .ananth-contact-social-card {
    align-items: flex-start;

  }

  .ananth-contact-connect {
    /* padding: 50px 0 50px; */
    padding: 45px 0 50px;
  }

  .ananth-contact-section {
    padding: 70px 17px;
  }

  .ananth-contact-title {
    font-size: 43px;
    letter-spacing: -1.5px;
  }

  .ananth-contact-intro {
    font-size: 14px;
  }

  .ananth-contact-brand {
    min-height: auto;
    padding: 30px 25px;
  }

  .ananth-contact-brand h3 {
    margin-top: 45px;
    font-size: 32px;
  }

  .ananth-contact-details {
    grid-template-columns: 1fr;
  }

  .ananth-contact-info-card {
    min-height: auto;
    padding: 22px 18px;
  }

  .ananth-contact-social-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ananth-contact-social-card {
    padding: 20px 17px;
  }
}














/* service page*/
/* =========================================================
       TGBX — isolated styles. All classes use the tgbx- prefix.
       ========================================================= */

:root {
  --tgbx-page: #eef1f7;
  --tgbx-ink: #303137;
  --tgbx-white: #ffffff;
  --tgbx-muted: rgba(255, 255, 255, .72);
  --tgbx-accent: #c9ff45;
  --tgbx-accent-soft: #d6ff63;
  --tgbx-nav-shadow: 0 18px 45px rgba(22, 24, 32, .08);
  --tgbx-ease: cubic-bezier(.22, 1, .36, 1);
}

.tgbx-shell-outer {
  margin: 0;
  /* min-height: 100vh; */
  background: var(--tgbx-page);
  color: var(--tgbx-ink);
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.tgbx-shell {
  width: min(100% - 32px, 1576px);
  margin: 0 auto;
  padding: 104px 0 90px;
}

/* Floating pill navigation — modeled after the uploaded reference */
.tgbx-nav {
  position: relative;
  z-index: 10;
  width: min(100% - 180px, 1380px);
  min-height: 64px;
  margin: 0 auto -32px;
  padding: 8px 12px 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--tgbx-nav-shadow);
  backdrop-filter: blur(16px);
  transform: translateY(-18px);
  opacity: 0;
  animation: tgbx-nav-in .9s var(--tgbx-ease) .05s forwards;
}

.tgbx-brand {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 3px solid #606168;
  border-radius: 50%;
  color: #606168;
}

.tgbx-brand svg {
  width: 26px;
  height: 18px;
}

.tgbx-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
  margin-left: auto;
}

.tgbx-nav-links a {
  position: relative;
  color: #5e6067;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  transition: color .25s ease;
}

.tgbx-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: currentColor;
  transition: right .35s var(--tgbx-ease);
}

.tgbx-nav-links a:hover {
  color: #17181d;
}

.tgbx-nav-links a:hover::after {
  right: 0;
}

.tgbx-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #27282d;
  text-decoration: none;
  white-space: nowrap;
  font-size: 14px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
}

.tgbx-nav-arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef1f7;
  transition: transform .35s var(--tgbx-ease), background .25s ease;
}

.tgbx-nav-cta:hover .tgbx-nav-arrow {
  transform: translateX(4px);
  background: #e4e7ee;
}

/* Main hero */
.tgbx-hero {
  position: relative;
  /* min-height: min(850px, calc(100vh - 50px)); */
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 60px 24px 100px;
  border-radius: 40px;
  background: var(--tgbx-ink);
  isolation: isolate;
}

/* Soft radial lighting keeps the flat dark reference from feeling static */
.tgbx-hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .055), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(201, 255, 69, .035), transparent 32%);
  animation: tgbx-glow 7s ease-in-out infinite alternate;
}

.tgbx-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -170px;
  width: 680px;
  height: 300px;
  z-index: -1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(201, 255, 69, .08), transparent 68%);
  filter: blur(18px);
}

.tgbx-content {
  width: min(900px, 100%);
  text-align: center;
  color: var(--tgbx-white);
}

.tgbx-mark {
  width: 66px;
  height: 48px;
  margin: 0 auto 30px;
  display: grid;
  place-items: center;
  /* border: 4px solid rgba(255, 255, 255, .76); */
  border-radius: 999px;
  opacity: 0;
  transform: translateY(28px) scale(.92);
  animation: tgbx-rise .8s var(--tgbx-ease) .28s forwards;
}

.tgbx-mark img {
  width: 100%;
}

.tgbx-mark svg {
  width: 42px;
  height: 28px;
}

.tgbx-eyebrow {
  margin: 45px 0 18px;
  color: rgba(255, 255, 255, .68);
  /* font-size: clamp(12px, 1.1vw, 15px); */
  font-weight: 400;
  letter-spacing: .10em;
  /* text-transform: uppercase; */
  opacity: 0;
  transform: translateY(24px);
  animation: tgbx-rise .8s var(--tgbx-ease) .38s forwards;
}

.tgbx-title {
  max-width: 930px;
  margin: 0 auto;
  font-size: 64px;
  line-height: 1.2;
  font-weight: 400;
  /* letter-spacing: -.055em; */
  text-wrap: balance;
  opacity: 0;
  transform: translateY(32px);
  animation: tgbx-rise 1s var(--tgbx-ease) .48s forwards;
}

.tgbx-copy {
  max-width: 650px;
  margin: 18px auto 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.55;
  /* letter-spacing: -.015em; */
  text-wrap: balance;
  opacity: 0;
  transform: translateY(24px);
  animation: tgbx-rise .9s var(--tgbx-ease) .62s forwards;
}

.tgbx-copy-h2 {
  margin: 25px 0 25px;
  font-size: 22px;
  font-weight: 400;
}

.tgbx-actions {
  margin-top: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(24px);
  animation: tgbx-rise .9s var(--tgbx-ease) .76s forwards;
}

.tgbx-btn {
  position: relative;
  /* min-height: 72px; */
  /* padding: 6px 24px 6px 6px; */
  padding: 6px 20px 6px 6px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  border: 2px solid #fccf0f;
  border-radius: 40px;
  color: #202126;
  background: #fccf0f;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  overflow: hidden;
  transition:
    transform .4s var(--tgbx-ease),
    background .35s ease,
    color .35s ease,
    box-shadow .4s ease;
}

.tgbx-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .35), transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--tgbx-ease);
}

.tgbx-btn:hover {
  transform: translateY(-4px);
  color: #fff;
  background: transparent;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
}

.tgbx-btn:hover::before {
  transform: translateX(120%);
}

.tgbx-btn:active {
  transform: translateY(-1px) scale(.98);
}

.tgbx-btn-abt-secondary {
  color: #fff !important;
  background: #232326 !important;
  border-color: rgba(255, 255, 255, .35) !important;
}

.tgbx-btn-abt-secondary:hover {
  background: #fff !important;
  color: #000 !important;
}

.tgbx-btn-abt-secondary:hover .tgbx-btn-icon {
  left: 25px !important;
}

.tgbx-btn-icon {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  /* flex: 0 0 58px; */
  border-radius: 50%;
  background: var(--tgbx-ink);
  color: #fff;
  transition: transform .45s var(--tgbx-ease), background .35s ease;
}

.tgbx-btn-label {
  position: relative;
  z-index: 1;
}

.tgbx-btn:hover .tgbx-btn-icon {
  left: 28px;
  transform: translateX(calc(100% + 100px));
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.tgbx-actions .tgbx-btn:hover .tgbx-btn-label {
  left: 7px;
}

.mk-alert .tgbx-btn:hover .tgbx-btn-label {
  left: 10px !important;
}

.tgbx-btn:hover .tgbx-btn-label {
  transform: translateX(-48px);
  transition: transform .45s var(--tgbx-ease);
}

.ani-final-cta-buttons .tgbx-btn-about:hover .tgbx-btn-label {
  color: #000;
}

.ani-final-cta-buttons .tgbx-btn-about:hover .tgbx-btn-icon {
  left: 29px !important;
}

.mk-alert .tgbx-btn-serve {
  width: 100% !important;
}

.mk-alert .tgbx-btn-serve:hover .tgbx-btn-icon {
  left: 16px !important;
}

.cta-container .tgbx-btn:hover .tgbx-btn-label {
  left: 10px !important;
}

.ananth-why-intro .banner-btn {
  width: 41% !important;
}

.ananth-why-intro .banner-btn:hover .tgbx-btn-icon {
  left: 0px !important;
}

.cta-container .banner-btn {
  width: 40% !important;
}

.cta-container .banner-btn:hover .tgbx-btn-icon {
  left: 35px !important;
}

.mkc-side .tgbx-btn:hover .tgbx-btn-label {
  left: 13px;
}

.header-inner .nav-cta {
  width: 20% !important;
}

.header-inner .nav-cta:hover .tgbx-btn-icon {
  left: 50px !important;
}

.tgbx-btn-icon-banner {
  width: 34px !important;
  height: 34px !important;
}

.tgbx-btn-label-book {
  width: 79% !important;
  padding: 6px 20px 6px 6px !important;
  background-color: #232326 !important;
  color: #fff !important;
  border: none !important;
}

.tgbx-btn-icon-book {
  background: #fccf0f !important;
  color: #000 !important;
}

.tgbx-btn-label-book span.tgbx-btn-label {
  font-size: 16px !important;
}

.header-inner .tgbx-btn-label-book:hover .tgbx-btn-label {
  left: 18px !important;
  color: #fff !important;
}

.tgbx-btn-label-book:hover .tgbx-btn-icon {
  left: 45px !important;
  transform: translateX(calc(100% + 100px));
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.tgbx-btn-secondary {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
}

.tgbx-btn-secondary .tgbx-btn-icon {
  background: rgba(255, 255, 255, .1);
}

.tgbx-btn-secondary:hover .tgbx-btn-icon {
  /* left: 16px; */
  /* transform: translateX(calc(100% + 100px)); */
  background: #303137 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.tgbx-btn-secondary:hover {
  background: #fff;
  color: #202126;
  border-color: #fff;
}

.tgbx-btn-solution {
  width: 82% !important;
  padding: 4px 20px 4px 6px !important;
  /* border: 1.5px solid #fccf0f !important; */
  background-color: #232326 !important;
  color: #fff !important;
  border: none !important;
}

.tgbx-btn-solution .tgbx-btn-icon {
  background: #fccf0f;
  color: #000;
}


/* Subtle bottom reveal, inspired by modern Framer landing pages */
.tgbx-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  animation: tgbx-fade-in 1s ease 1.25s forwards;
}

.tgbx-scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tgbx-accent);
  animation: tgbx-pulse 1.8s ease-in-out infinite;
}

@keyframes tgbx-nav-in {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }

  to {
    opacity: 1;
    transform: translateY(-18px);
  }
}

@keyframes tgbx-rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tgbx-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tgbx-glow {
  from {
    transform: scale(1);
    opacity: .7;
  }

  to {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes tgbx-pulse {

  0%,
  100% {
    transform: scale(.8);
    opacity: .5;
  }

  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}

@media (max-width: 900px) {


  .mkc-side .tgbx-btn-label-book {
    width: 79% !important;
  }

  .tgbx-shell-outer {
    margin: 48px 0 0 0;
  }

  .tgbx-nav {
    width: calc(100% - 28px);
    margin-bottom: -30px;
  }

  .tgbx-nav-links {
    display: none;
  }

  .tgbx-hero {
    /* min-height: 760px; */
    border-radius: 28px;
    padding: 130px 20px 90px;
  }

  .mk-page {
    min-height: 0vh;
  }

  .tgbx-title {
    font-size: 30px;
    line-height: 1.2;
  }
}

@media (max-width: 560px) {
  .cta-container .banner-btn:hover .tgbx-btn-icon {
        left: 14px !important;
  }
  .tgbx-shell {
    width: min(100% - 0px, 1576px);
    padding-top: 8px;
    padding-bottom: 40px;
  }

  .mk-page {
    min-height: 0vh;
  }

  .tgbx-nav {
    width: calc(100% - 20px);
    min-height: 58px;
    padding-left: 12px;
  }

  .tgbx-brand {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .tgbx-nav-cta {
    font-size: 13px;
  }

  .tgbx-nav-arrow {
    width: 34px;
    height: 34px;
  }

  .tgbx-hero {
    /* min-height: 720px; */
    padding: 40px 18px 40px;
    border-radius: 24px;
  }

  .tgbx-mark {
    margin-bottom: 24px;
    transform: scale(.85);
  }

  .tgbx-eyebrow {
    font-size: 11px;
    line-height: 1.5;
  }

  .tgbx-title {
    font-size: 30px;
    line-height: 1.2;
  }

  .tgbx-copy {
    font-size: 15px;
    line-height: 1.55;
  }

  .tgbx-actions {
    margin-top: 32px;
    flex-direction: column;
  }

  .tgbx-btn {
    /* width: min(100%, 330px); */
    justify-content: flex-start;
  }
}




/* ERP solution */
/* =========================================================
   ANANTH VALUES SECTION
   Unique Prefix: anv-
========================================================= */

.anv-values-section {
  width: 100%;
  /* padding: 0px 20px 100px; */
  padding-bottom: 90px;
  /* background: #eef2f8; */
  overflow: hidden;
  box-sizing: border-box;
}

.anv-values-container {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  box-sizing: border-box;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.anv-values-label {
  width: fit-content;
  margin: 0 auto 25px;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 5px 6px 5px 5px;

  background: #ffffff;
  border-radius: 50px;

  color: #383a40;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 12px;
  font-weight: 400;

  box-shadow: 0 2px 8px rgba(20, 25, 35, 0.03);

  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(.2, .8, .2, 1);
}

.anv-values-section.anv-is-visible .anv-values-label {
  opacity: 1;
  transform: translateY(0);
}


/* Small menu/list icon */

.anv-values-label-icon {
  width: 30px;
  height: 30px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;

  padding: 0 8px;

  background: #f1f3f6;
  border-radius: 50%;
  box-sizing: border-box;
}

.anv-values-label-icon span {
  display: block;
  width: 12px;
  height: 1.5px;
  background: #555960;
  border-radius: 10px;
}


/* =========================================================
   HEADING
========================================================= */

.anv-values-heading {
  margin: 0 auto;

  max-width: 700px;

  text-align: center;

  color: #303239;

  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 48px;
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -3.5px;

  opacity: 0;
  transform: translateY(35px);

  transition:
    opacity 0.8s ease 0.12s,
    transform 0.8s cubic-bezier(.2, .8, .2, 1) 0.12s;
}

.anv-values-section.anv-is-visible .anv-values-heading {
  opacity: 1;
  transform: translateY(0);
}


/* Good highlight */

.anv-values-heading-highlight {
  display: inline-block;

  padding: 5px 13px 7px;

  color: #ffffff;
  background: #35363b;

  border-radius: 15px;

  font-style: italic;
  font-weight: 500;

  letter-spacing: -3px;

  transform: rotate(-1deg);
}


/* =========================================================
   CARD GRID
========================================================= */

.anv-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;

  /* margin-top: 42px; */
}


/* =========================================================
   COMMON CARD
========================================================= */

.anv-values-card img {
  width: 100%;
}

.anv-values-card {
  position: relative;

  min-height: 335px;

  border-radius: 30px;

  overflow: hidden;

  box-sizing: border-box;

  opacity: 0;
  transform: translateY(55px);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(.2, .8, .2, 1);

  will-change: transform;
}

.anv-values-section.anv-is-visible .anv-values-card {
  opacity: 1;
  transform: translateY(0);
}

.anv-values-section.anv-is-visible .anv-values-card:nth-child(1) {
  transition-delay: 0.18s;
}

.anv-values-section.anv-is-visible .anv-values-card:nth-child(2) {
  transition-delay: 0.32s;
}

.anv-values-section.anv-is-visible .anv-values-card:nth-child(3) {
  transition-delay: 0.46s;
}


/* =========================================================
   WHITE CARDS
========================================================= */

.anv-values-card-light {
  background: #ffffff;

  padding: 45px 48px;
}


/* =========================================================
   CARD ICONS
========================================================= */

.anv-values-card-icon {
  position: absolute;
  top: 48px;
  left: 48px;

  width: 39px;
  height: 39px;

  box-sizing: border-box;
}


/* Heart */

.anv-heart-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: #c7c9cc;
  stroke-width: 1.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Circle */

.anv-circle-icon {
  border: 2px solid #c7c9cc;
  border-radius: 50%;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.anv-values-card-content {
  position: absolute;

  left: 48px;
  right: 48px;
  bottom: 48px;
}

.anv-values-card-content h3 {
  margin: 0 0 16px;

  color: #000;

  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 19px;
  line-height: 1.15;
  font-weight: 400;

  letter-spacing: -0.8px;
}

.anv-values-card-content p {
  margin: 0;

  max-width: 460px;

  color: rgba(36, 36, 38, 0.75);

  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}


/* =========================================================
   IMAGE CARD
========================================================= */

.anv-values-card-image {
  position: relative;

  background: #34353b;
}


/* Image */

.anv-values-card-image-element {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.08);

  transition:
    transform 8s cubic-bezier(.2, .6, .2, 1);
}


/* Start image animation after section appears */

.anv-values-section.anv-is-visible .anv-values-card-image-element {
  transform: scale(1);
}


/* Slow image movement */

.anv-values-card-image:hover .anv-values-card-image-element {
  transform: scale(1.07);
}


/* =========================================================
   DARK IMAGE OVERLAY
========================================================= */

.anv-values-image-overlay {
  position: absolute;

  inset: 0;

  /* background:
    linear-gradient(180deg,
      rgba(15, 15, 18, 0.15) 0%,
      rgba(25, 25, 30, 0.28) 35%,
      rgba(30, 31, 37, 0.92) 100%); */
  background: linear-gradient(180deg, rgba(15, 15, 18, 0.65) 0%, rgba(25, 25, 30, 0.78) 35%, rgba(30, 31, 37, 0.92) 100%);

  z-index: 1;
}


/* =========================================================
   DECORATIVE STAR
========================================================= */

.anv-values-star {
  position: absolute;

  top: 52px;
  left: 48px;

  width: 42px;
  height: 42px;

  z-index: 3;

  animation: anvStarPulse 2.8s ease-in-out infinite;
}

.anv-values-star span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 2px;
  height: 25px;

  background: #c9ff3d;

  transform: translate(-50%, -50%);

  border-radius: 10px;
}

.anv-values-star span:nth-child(2) {
  transform:
    translate(-50%, -50%) rotate(90deg);
}

.anv-values-star span:nth-child(3) {
  transform:
    translate(-50%, -50%) rotate(45deg);
}

.anv-values-star span:nth-child(4) {
  transform:
    translate(-50%, -50%) rotate(-45deg);
}


@keyframes anvStarPulse {

  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}


/* =========================================================
   IMAGE CARD CONTENT
========================================================= */

.anv-values-image-content {
  position: absolute;

  left: 48px;
  right: 48px;
  bottom: 48px;

  z-index: 3;

  color: #ffffff;
}

.anv-values-image-content h3 {
  margin: 0 0 15px;

  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 19px;
  line-height: 1.15;
  font-weight: 400;

  letter-spacing: -0.8px;
}

.anv-values-image-content p {
  margin: 0 0 28px;

  max-width: 390px;

  color: rgba(255, 255, 255, 0.9);

  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.anv-values-button {
  position: relative;

  width: 100%;
  /* min-height: 65px; */

  display: flex;
  align-items: center;

  padding: 5px;

  box-sizing: border-box;

  background: linear-gradient(120deg, #eccf4a, #f5af32);

  border: 2px solid #fccf0f;
  border-radius: 22px;

  color: #25272a;

  text-decoration: none;

  overflow: hidden;

  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}


/* Button icon */

.anv-values-button-icon {
  width: 42px;
  height: 32px;

  flex: 0 0 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #34353b;

  border-radius: 17px;

  transition:
    transform 0.4s cubic-bezier(.2, .8, .2, 1),
    background 0.35s ease;
}

.anv-values-button-icon svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke: #ffffff;
  stroke-width: 1.6;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Button text */

.anv-values-button-text {
  flex: 1;

  text-align: center;

  padding-right: 54px;

  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 400;
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.anv-values-button:hover {
  background: transparent;
  color: #ffffff;
}

.anv-values-button:hover .anv-values-button-icon {
  transform: translateX(3px);
  background: #fccf0f;
}

.anv-values-button:hover .anv-values-button-icon svg {
  stroke: #27282b;
}


/* =========================================================
   BUTTON ARROW ANIMATION
========================================================= */

.anv-values-button-icon svg {
  transition: transform 0.35s ease;
}

.anv-values-button:hover .anv-values-button-icon svg {
  transform: translateX(3px);
}


/* =========================================================
   CARD HOVER
========================================================= */

.anv-values-card-light {
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(.2, .8, .2, 1),
    box-shadow 0.35s ease;
}

.anv-values-card-light:hover {
  box-shadow:
    0 18px 45px rgba(30, 35, 45, 0.08);
}

.anv-values-card-light:hover .anv-values-card-icon {
  transform: scale(1.06);
}

.anv-values-card-icon {
  transition: transform 0.35s ease;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1050px) {

  .anv-values-section {
    padding-top: 65px;
  }

  .anv-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .anv-values-card-image {
    grid-column: span 2;
    min-height: 460px;
  }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 700px) {

  .anv-values-section {
    padding: 28px 0px 20px;
  }

  .anv-values-label {
    font-size: 13px;
  }

  .anv-values-heading {
    font-size: clamp(38px, 11vw, 52px);
    letter-spacing: -2.5px;
  }

  .anv-values-heading-highlight {
    padding: 4px 9px 6px;
    border-radius: 11px;
    letter-spacing: -2px;
  }


  .anv-values-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .anv-values-card {
    min-height: 390px;
    border-radius: 24px;
  }

  .anv-values-card-image {
    grid-column: auto;
    min-height: 470px;
  }

  .anv-values-card-light {
    padding: 32px;
  }

  .anv-values-card-icon {
    top: 32px;
    left: 32px;
  }

  .anv-values-card-content {
    left: 32px;
    right: 32px;
    bottom: 32px;
  }

  .anv-values-card-content h3,
  .anv-values-image-content h3 {
    font-size: 22px;
  }

  .anv-values-card-content p,
  .anv-values-image-content p {
    font-size: 15px;
  }

  .anv-values-star {
    top: 35px;
    left: 32px;
  }

  .anv-values-image-content {
    left: 32px;
    right: 32px;
    bottom: 32px;
  }

  .anv-values-button {
    min-height: 59px;
    border-radius: 19px;
  }

  .anv-values-button-icon {
    width: 49px;
    height: 49px;
    flex-basis: 49px;
    border-radius: 15px;
  }

  .anv-values-button-text {
    font-size: 14px;
    padding-right: 49px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .anv-values-heading {
    font-size: 30px;
        letter-spacing: -0.02em;
  }

  .anv-values-card {
    min-height: 300px;
  }

  .anv-values-card-image {
    min-height: 300px;
  }

}








/* =========================================================
   SOLX — isolated/namespaced styles for the Solutions section
   ========================================================= */

.solx-section {
  --solx-bg: #eef1f7;
  --solx-card: #ffffff;
  --solx-text: #303137;
  --solx-muted: #747780;
  --solx-line: #e4e7ed;
  --solx-accent: #c9ff45;
  --solx-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  width: 100%;
  padding: 35px 24px 90px;
  overflow: hidden;
  background: var(--solx-bg);
  color: var(--solx-text);
  /* font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif; */
  -webkit-font-smoothing: antialiased;
}

.solx-section *,
.solx-section *::before,
.solx-section *::after {
  box-sizing: border-box;
}

.solx-container {
  /* width: min(1180px, 100%); */
  max-width: 1150px;
  margin: 0 auto;
}

/* Heading */
.solx-heading {
  max-width: 760px;
  margin: 0 auto 68px;
  text-align: center;
}

.solx-eyebrow {
  margin: 0 0 17px;
  color: #858892;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;

  opacity: 0;
  transform: translateY(18px);
  animation: solx-rise .75s var(--solx-ease) .05s forwards;
}

.solx-title {
  margin: 0;
  color: var(--solx-text);
  font-size: clamp(43px, 5.5vw, 76px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.055em;
  text-wrap: balance;

  opacity: 0;
  transform: translateY(25px);
  animation: solx-rise .9s var(--solx-ease) .14s forwards;
}

.solx-description {
  max-width: 650px;
  margin: 25px auto 0;
  color: var(--solx-muted);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.6;
  letter-spacing: -.012em;
  text-wrap: balance;

  opacity: 0;
  transform: translateY(20px);
  animation: solx-rise .8s var(--solx-ease) .25s forwards;
}

/* Card grid */
.solx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Individual cards */
.solx-card {
  position: relative;
  min-height: 285px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  background: var(--solx-card);
  box-shadow:
    0 10px 30px rgba(38, 43, 56, .035),
    0 1px 2px rgba(38, 43, 56, .035);

  opacity: 0;
  transform: translateY(35px);
  animation: solx-card-in .85s var(--solx-ease) forwards;

  transition:
    transform .5s var(--solx-ease),
    box-shadow .5s var(--solx-ease),
    border-color .35s ease;
}

.solx-card:nth-child(1) {
  animation-delay: .32s;
}

.solx-card:nth-child(2) {
  animation-delay: .40s;
}

.solx-card:nth-child(3) {
  animation-delay: .48s;
}

.solx-card:nth-child(4) {
  animation-delay: .56s;
}

.solx-card:nth-child(5) {
  animation-delay: .64s;
}

.solx-card:nth-child(6) {
  animation-delay: .72s;
}

.solx-card::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  top: -95px;
  right: -80px;
  border-radius: 50%;
  /* background: radial-gradient(
    circle,
    rgba(201,255,69,.17) 0%,
    rgba(201,255,69,0) 68%
  ); */
  opacity: 0;
  transform: scale(.65);
  transition:
    opacity .5s ease,
    transform .7s var(--solx-ease);

}

.solx-card:hover {
  /* transform: scale(0.94); */
  transform: translateY(-8px);
  /* border-color: rgba(201,255,69,.55); */
  box-shadow:
    0 25px 55px rgba(38, 43, 56, .10),
    0 4px 12px rgba(38, 43, 56, .04);
}

.solx-card:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Number / icon row */
.solx-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.solx-number {
  /* color: #b1b4bc; */
  background-image: linear-gradient(180deg,
      rgba(196, 222, 237, 0.4),
      rgba(196, 222, 237, 0.4)) !important;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 78px;
  font-weight: 600;
  letter-spacing: .08em;
}

.solx-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  border: 1px solid var(--solx-line);
  border-radius: 13px;
  color: #73767e;
  background: #f8f9fb;

  transition:
    transform .5s var(--solx-ease),
    background .35s ease,
    border-color .35s ease,
    color .35s ease;
}

.solx-icon svg {
  width: 20px;
  height: 20px;
}

.solx-card:hover .solx-icon {
  transform: rotate(-6deg) scale(1.08);
  /* border-color: #202126; */
  /* color: ; */
  background: #fccf0f;
}

/* Card content */
.solx-card-content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 55px;
}

.solx-card-title {
  margin: 0;
  color: #000;
  font-size: 19px;
  line-height: 1.12;
  font-weight: 400;
  /* letter-spacing: -.035em; */
}

.solx-card-copy {
  max-width: 270px;
  margin: 10px 0 0;
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
  line-height: 1.5;
}

/* Bottom action — closely follows the small pill interaction in the reference */
.solx-card-link {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 23px;
  padding: 7px 11px 7px 7px;

  border: 1px solid var(--solx-line);
  border-radius: 999px;
  color: #686b73;
  background: #f8f9fb;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;

  overflow: hidden;
  transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    gap .4s var(--solx-ease);
}

.solx-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fccf0f;
  transform: translateX(-102%);
  transition: transform .45s var(--solx-ease);
}

.solx-card-link:hover {
  gap: 14px;
  color: #202126;
  border-color: var(--solx-accent);
}

.solx-card-link:hover::before {
  transform: translateX(0);
}

.solx-card-link span,
.solx-card-link svg {
  position: relative;
  z-index: 1;
}

.solx-card-link svg {
  width: 13px;
  height: 13px;
  transition: transform .4s var(--solx-ease);
}

.solx-card-link:hover svg {
  transform: translateX(2px);
}

/* Small lower reveal */
.solx-footer-note {
  margin-top: 48px;
  text-align: center;
  color: #9a9da5;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  animation: solx-fade .8s ease 1.05s forwards;
}

/* Motion */
@keyframes solx-rise {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes solx-card-in {
  from {
    opacity: 0;
    transform: translateY(35px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes solx-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .solx-section {
    padding: 90px 20px 100px;
  }

  .solx-heading {
    margin-bottom: 50px;
  }

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

/* Mobile */
@media (max-width: 580px) {
  .solx-section {
    padding: 30px 0px 0px;
  }

  .solx-heading {
    margin-bottom: 38px;
  }

  .solx-eyebrow {
    font-size: 11px;
  }

  .solx-title {
    font-size: clamp(40px, 12vw, 57px);
  }

  .solx-description {
    font-size: 15px;
    line-height: 1.55;
  }

  .solx-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .solx-card {
    min-height: 260px;
    padding: 24px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

  .solx-section *,
  .solx-section *::before,
  .solx-section *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}




/* Unique namespace: ops_vanta_solutions_7f3c */
.ops_vanta_solutions_7f3c {
  --ops-bg: #f1f3f8;
  --ops-heading: #2d2e35;
  --ops-muted: #747883;
  --ops-label: #858a95;

  /* min-height: 100vh; */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* background: var(--ops-bg); */
  /* font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; */
}

.ops_vanta_solutions_7f3c *,
.ops_vanta_solutions_7f3c *::before,
.ops_vanta_solutions_7f3c *::after {
  box-sizing: border-box;
}

.ops_vanta_solutions_7f3c__hero {
  width: min(100%, 1180px);
  padding: 44px 32px 0px;
  text-align: center;
}

.ops_vanta_solutions_7f3c__eyebrow {
  margin: 0 0 15px;
  color: var(--ops-label);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  /* text-transform: uppercase; */
  opacity: 0;
  transform: translateY(18px);
  animation: opsVantaFadeUp_7f3c 0.8s cubic-bezier(.22, 1, .36, 1) 0.05s forwards;
}

.ops_vanta_solutions_7f3c__title {
  margin: 0 auto;
  max-width: 1160px;
  color: #000;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(35px);
  animation: opsVantaFadeUp_7f3c 1s cubic-bezier(.22, 1, .36, 1) 0.16s forwards;
}

.ops_vanta_solutions_7f3c__copy {
  max-width: 760px;
  margin: 20px auto 0;
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  /* letter-spacing: -0.45px; */
  opacity: 0;
  transform: translateY(24px);
  animation: opsVantaFadeUp_7f3c 0.9s cubic-bezier(.22, 1, .36, 1) 0.34s forwards;
}

/* Subtle ambient movement keeps the section alive after the page loads. */
/* .ops_vanta_solutions_7f3c__hero::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: 50%;
  top: 50%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  filter: blur(70px);
  transform: translate(-50%, -50%);
  animation: opsVantaGlow_7f3c 7s ease-in-out infinite alternate;
  pointer-events: none;
} */

@keyframes opsVantaFadeUp_7f3c {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes opsVantaGlow_7f3c {
  from {
    opacity: .18;
    transform: translate(-50%, -50%) scale(.88);
  }

  to {
    opacity: .42;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

@media (max-width: 800px) {
  .ops_vanta_solutions_7f3c__hero {
    padding: 24px 24px 0px;
  }

  .ops_vanta_solutions_7f3c__eyebrow {
    margin-bottom: 25px;
    font-size: 14px;
    letter-spacing: 2.5px;
  }

  .ops_vanta_solutions_7f3c__title {
    font-size: 42px;
    letter-spacing: -0.02em;
  }

  .ops_vanta_solutions_7f3c__copy {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.55;
  }
}

@media (max-width: 768px) {
  .ops_vanta_solutions_7f3c__desktop-break {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ops_vanta_solutions_7f3c__eyebrow,
  .ops_vanta_solutions_7f3c__title,
  .ops_vanta_solutions_7f3c__copy {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .ops_vanta_solutions_7f3c__hero::after {
    animation: none;
  }
}



/* service industries */
#mkx-updates {
  background: #eef0f9;
  color: #26272b;
}

.mkx7q2-page {
  min-height: 100vh;
  overflow-x: hidden;
}

.mkx7q2-header {
  position: absolute;
  z-index: 20;
  top: 24px;
  left: 3.1%;
  right: 3.1%;
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 0;
  transition: all .45s cubic-bezier(.22, 1, .36, 1)
}

.mkx7q2-header.is-scrolled {
  position: fixed;
  top: 12px;
  height: 66px;
  padding: 0 14px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 34px;
  box-shadow: 0 8px 28px rgba(38, 39, 43, .08)
}

.mkx7q2-brand {
  width: 50px;
  height: 35px;
  border: 4px solid #62636a;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px
}

.mkx7q2-brand-eye {
  width: 10px;
  height: 10px;
  background: #62636a;
  border-radius: 50%
}

.mkx7q2-nav {
  display: flex;
  gap: 34px;
  align-items: center;
  font-size: 16px;
  color: #5e6067
}

.mkx7q2-nav a {
  transition: color .25s ease, transform .25s ease
}

.mkx7q2-nav a:hover {
  color: #17181b;
  transform: translateY(-1px)
}

.mkx7q2-nav .is-active {
  color: #202125
}

.mkx7q2-start {
  justify-self: end;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 5px 10px 5px 6px;
  background: #fff;
  border: 1px solid rgba(20, 20, 20, .05);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04)
}

.mkx7q2-start-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #eef0f6;
  border-radius: 13px;
  font-size: 25px
}

.mkx7q2-hero {
  /* min-height: 680px; */
  /* padding: 166px 24px 80px; */
  padding-bottom: 35px;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.mkx7q2-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 99px;
  background: #fff;
  font-size: 14px;
  color: #45464c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .02)
}

.mkx7q2-pill-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef0f6;
  color: #6c6e75;
  font-size: 17px
}

.mkx7q2-hero h1 {
  font-size: 48px;
  line-height: .98;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 28px 0 20px;
}

.mkx7q2-hero p {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(36, 36, 38, 0.75);
  margin: 0;
  /* letter-spacing: -.025em */
}

.mkx7q2-feed {
  max-width: 1150px;
  /* width: min(1460px, 94vw); */
  margin: 0 auto;
  padding: 0 0 0px
}

.mkx7q2-entry {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
  margin-bottom: 70px;
}

.mkx7q2-meta {
  padding-top: 42px;
  position: sticky;
  top: 104px;
  height: max-content;
  color: #60626a
}

.mkx7q2-meta time {
  color: rgba(36, 36, 38, 0.75);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  padding-bottom: 27px;
  border-bottom: 1px solid #c5c8d1;
}

.mkx7q2-meta span {
  position: relative;
  display: block;
  width: max-content;
  margin: -55px 0 0 auto;
  padding: 6px 13px;
  border: 1px solid #bdc1ca;
  border-radius: 30px;
  background: #eef0f9;
  font-size: 14px;
}

.mkx7q2-card {
  background: #fff;
  border-radius: 32px;
  /* padding: 77px 78px 78px; */
  padding: 35px 35px 35px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(30, 35, 50, .02)
}

.mkx7q2-card-title {
  font-size: 18px;
  font-weight: 600;
  /* letter-spacing: -.03em; */
}

.mkx7q2-rule {
  height: 1px;
  background: #d5d7dc;
  margin: 25px 0 34px
}

.mkx7q2-card p {
  font-size: 18px;
  line-height: 1.48;
  color: #62646a;
  /* letter-spacing: -.022em; */
  margin: 0 0 34px
}

.mkx7q2-visual {
  margin-top: 35px;
  /* min-height: 360px; */
  border-radius: 2px;
  overflow: hidden;
  /* background: linear-gradient(135deg, #ddd5d7, #c7c8d0) */
}

.mkx7q2-visual img {
  width: 100%;
  border-radius: 20px;
}

.mkx7q2-dashboard {
  /* padding: 56px 62px; */
  /* background: linear-gradient(135deg, #e2d9db 0%, #c9c8d0 55%, #dddfe5 100%) */
}

.mkx7q2-dash-window {
  height: 330px;
  background: #f9fafc;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 35px rgba(44, 45, 55, .14)
}

.mkx7q2-dash-top {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 18px;
  border-bottom: 1px solid #d9dbe0
}

.mkx7q2-dash-top b {
  font-size: 19px
}

.mkx7q2-dash-top span {
  margin-left: auto;
  font-size: 11px;
  color: #7b7e86
}

.mkx7q2-dash-top i {
  width: 15px;
  height: 15px;
  background: #34363c;
  border-radius: 50%
}

.mkx7q2-dash-grid {
  display: grid;
  grid-template-columns: 1.6fr .7fr .7fr;
  gap: 16px;
  padding-top: 25px
}

.mkx7q2-chart,
.mkx7q2-stat {
  background: #fff;
  border: 1px solid #e3e4e8;
  border-radius: 12px;
  padding: 18px
}

.mkx7q2-chart small,
.mkx7q2-stat small {
  display: block;
  color: #7a7c82;
  font-size: 11px
}

.mkx7q2-chart-line {
  height: 100px;
  margin-top: 20px;
  background: linear-gradient(145deg, transparent 48%, #a7abb5 49%, #a7abb5 51%, transparent 52%), linear-gradient(30deg, transparent 55%, #777b85 56%, #777b85 58%, transparent 59%);
  border-bottom: 1px solid #cfd2d8
}

.mkx7q2-stat strong {
  display: block;
  font-size: 23px;
  margin: 18px 0 7px
}

.mkx7q2-accordions {
  margin-top: 52px
}

.mkx7q2-accordions button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  border-top: 1px solid #d6d8dd;
  padding: 22px 0;
  font: inherit;
  font-size: 22px;
  color: #66686e;
  text-align: left;
  cursor: pointer
}

.mkx7q2-accordions button:last-child {
  border-bottom: 1px solid #d6d8dd
}

.mkx7q2-accordions b {
  font-size: 32px;
  font-weight: 300;
  transition: transform .3s ease
}

.mkx7q2-accordions button:hover b {
  transform: translateX(4px)
}

.mkx7q2-scenario {
  /* padding: 45px; */
  /* background: #e4e4ea */
}

.mkx7q2-scenario-bar {
  background: #fff;
  border-radius: 14px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 8px 25px rgba(50, 50, 65, .08)
}

.mkx7q2-scenario-bar span {
  margin-left: auto;
  border: 1px solid #dddfe5;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 11px;
  color: #777a82
}

.mkx7q2-scenario-bar i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #333
}

.mkx7q2-scenario-chart {
  height: 250px;
  background: #fff;
  margin-top: 15px;
  border-radius: 14px;
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 25px
}

.mkx7q2-scenario-chart div {
  flex: 1;
  border-radius: 7px 7px 2px 2px;
  background: #c6c8d0
}

.mkx7q2-scenario-chart div:nth-child(1) {
  height: 25%
}

.mkx7q2-scenario-chart div:nth-child(2) {
  height: 35%
}

.mkx7q2-scenario-chart div:nth-child(3) {
  height: 42%
}

.mkx7q2-scenario-chart div:nth-child(4) {
  height: 57%
}

.mkx7q2-scenario-chart div:nth-child(5) {
  height: 72%
}

.mkx7q2-scenario-chart div:nth-child(6) {
  height: 86%
}

.mkx7q2-template-float {
  position: fixed;
  z-index: 40;
  right: 28px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.mkx7q2-template-float a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 174px;
  height: 48px;
  padding: 0 18px;
  border-radius: 13px;
  background: #14a7ed;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  box-shadow: 0 5px 20px rgba(20, 167, 237, .28)
}

.mkx7q2-template-float .mkx7q2-framer-link {
  background: #fff;
  color: #17181b;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  font-size: 14px;
  gap: 9px
}

.mkx7q2-reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1)
}

.mkx7q2-reveal.is-visible {
  opacity: 1;
  transform: none
}

@media(max-width:1000px) {
  .mkx7q2-header {
    grid-template-columns: 1fr auto
  }

  .mkx7q2-nav {
    display: none
  }

  .mkx7q2-hero h1 {
    font-size: 56px
  }

  .mkx7q2-entry {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .mkx7q2-meta {
    display: none;
    position: static;
    padding-top: 0
  }

  .mkx7q2-meta time {
    max-width: 420px
  }

  .mkx7q2-card {
    padding: 48px 40px
  }
}

@media(max-width:650px) {
  .mkx7q2-header {
    top: 12px;
    left: 16px;
    right: 16px
  }

  .mkx7q2-start span:last-child {
    display: none
  }

  .mkx7q2-start {
    padding: 5px
  }

  .mkx7q2-hero {
    /* min-height: 570px; */
    padding-top: 22px;
    padding-bottom: 35px;

  }

  .mkx7q2-hero h1 {
            font-size: 28px;
        margin-top: 22px;
        line-height: 1.2;
  }

  .mkx7q2-hero p {
    font-size: 16px;
  }

  .mkx7q2-feed {
    /* width: calc(100% - 24px) */
    padding: 0 0 24px;
  }

  .mkx7q2-entry {
    margin-bottom: 15px;
  }

  .mkx7q2-card {
    border-radius: 24px;
    padding: 34px 24px
  }

  .mkx7q2-card p {
    font-size: 17px
  }

  .mkx7q2-card-title {
    font-size: 20px
  }

  .mkx7q2-meta time {
    font-size: 14px
  }

  .mkx7q2-meta span {
    font-size: 13px;
    margin-top: -46px
  }

  .mkx7q2-visual {
    /* min-height: 260px */
    margin-top: 0px;
  }

  .mkx7q2-dashboard {
    /* padding: 25px */
  }

  .mkx7q2-dash-window {
    height: 245px;
    padding: 15px
  }

  .mkx7q2-scenario {
    /* padding: 22px */
  }

  .mkx7q2-template-float {
    right: 12px;
    bottom: 12px
  }

  .mkx7q2-template-float a {
    min-width: 145px;
    height: 42px;
    font-size: 12px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .mkx7q2-reveal {
    transition: none
  }

  .mkx7q2-header {
    transition: none
  }
}



/* service page counter section */
/* =========================================
   ANX BUSINESS STATISTICS
========================================= */

.anx-business-stats {
  width: 100%;
  padding: 0px 20px 60px;
  box-sizing: border-box;
  /* font-family: Arial, Helvetica, sans-serif; */
}

h1.anx-counter-title {
  text-align: center;
  padding-bottom: 3%;
  font-size: 48px;
  font-weight: 400;
}

.anx-stats-container {
  max-width: 1150px;
  /* width: min(1100px, 100%); */
  min-height: 140px;
  margin: 0 auto;
  padding: 28px 35px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;

  /* background: linear-gradient(120deg, #058fe9, #1d4a98); */
  /* background: linear-gradient(180deg, #fbeee9, #fff); */
  background: linear-gradient(180deg, #c4deed, #fff);
  border-radius: 16px;

  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.15);

  position: relative;
  overflow: hidden;
}


/* Subtle background effect */
.anx-stats-container::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  top: -180px;
  left: 15%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  pointer-events: none;
}


/* =========================================
   INDIVIDUAL STAT
========================================= */

.anx-stat-item {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 5px 15px;
}


/* Vertical separators */
.anx-stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}


/* =========================================
   ICON
========================================= */

.anx-stat-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 10px;

  border-radius: 50%;

  /* background: rgba(255, 255, 255, 0.18); */
  background: rgba(0, 0, 0, 0.05);

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.anx-stat-icon svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: #000;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Hover effect */
.anx-stat-item:hover .anx-stat-icon {
  transform: translateY(-4px) scale(1.08);
  /* background: rgba(76, 205, 188, 0.25); */
  background: rgba(0, 0, 0, 0.25);
}


/* =========================================
   NUMBER
========================================= */

.anx-stat-number {
  font-size: 34px;
  line-height: 1.1;

  font-weight: 700;

  color: #000;

  letter-spacing: -0.5px;

  min-height: 34px;
  padding: 8px;
}


/* =========================================
   LABEL
========================================= */

.anx-stat-label {
  margin-top: 7px;

  color: rgba(36, 36, 38, 0.75);

  font-size: 16px;
  font-weight: 400;

  line-height: 1.4;

  /* opacity: 0.9; */
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 800px) {

  h1.anx-counter-title {
    font-size: 28px;
    line-height: 1.2;
    padding-bottom: 6%;
  }

  .anx-stats-container {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
    padding: 30px 20px;
  }

  .anx-stat-item:nth-child(2)::after {
    display: none;
  }

  .anx-stat-item:nth-child(3)::after {
    display: block;
  }

  .anx-stat-item:nth-child(3),
  .anx-stat-item:nth-child(4) {
    padding-top: 5px;
  }
}


@media (max-width: 500px) {

  .anx-business-stats {
    /* padding: 35px 0px; */
    padding: 45px 0px 35px;
  }

  .mkx-break {
    display: none;
  }

  .anx-stats-container {
    grid-template-columns: 1fr 1fr;
    padding: 25px 10px;
    border-radius: 13px;
  }

  .anx-stat-item {
    padding: 8px 5px;
  }

  .anx-stat-item::after {
    display: none !important;
  }

  .anx-stat-icon {
    width: 38px;
    height: 38px;
  }

  .anx-stat-icon svg {
    width: 18px;
    height: 18px;
  }

  .anx-stat-number {
    font-size: 25px;
  }

  .anx-stat-label {
    font-size: 12px;
  }
}





/* ==========================================
   ANANTH INFO - WHY CHOOSE ANANTH
========================================== */

.ananth-why-section {
  position: relative;
  width: 100%;
  padding: 80px 0;
  overflow: hidden;
  background: #f7f9fc;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
}

.ananth-why-container {
  position: relative;
  z-index: 2;
  /* width: min(1180px, 90%); */
  max-width: 1150px;
  margin: 0 auto;
}


/* ==========================================
   HEADING
========================================== */

.ananth-why-heading-wrap {
  margin-bottom: 50px;
}

.ananth-why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #2f5fe0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ananth-why-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: linear-gradient(120deg,
      #12b7e0,
      #2f5fe0);
}

.ananth-why-main-title {
  margin: 0;
  color: #111827;
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
  /* letter-spacing: -2px; */
}

.ananth-why-main-title span {
  display: inline-block;
  background: linear-gradient(120deg,
      #12b7e0,
      #2f5fe0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ananth-why-heading-line {
  width: 75px;
  height: 4px;
  margin-top: 25px;
  border-radius: 10px;
  background: linear-gradient(120deg,
      #12b7e0,
      #2f5fe0);
}


/* ==========================================
   MAIN GRID
========================================== */

.ananth-why-main-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}


/* ==========================================
   LEFT INTRO
========================================== */

.ananth-why-intro {
  position: relative;
  /* padding: 35px 0; */
}

.ananth-why-number {
  position: absolute;
  top: -10px;
  left: -5px;
  color: rgba(47, 95, 224, 0.07);
  font-size: 110px;
  line-height: 1;
  font-weight: 400;
  pointer-events: none;
}

.ananth-why-subtitle {
  position: relative;
  z-index: 1;
  margin: 0px 0 15px;
  color: #111827;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  /* letter-spacing: -1px; */
}

.ananth-why-description {
  max-width: 500px;
  margin: 0 0 22px;
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
  line-height: 1.85;
}


/* ==========================================
   CTA
========================================== */

.ananth-why-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 15px 23px;
  overflow: hidden;
  border-radius: 40px;
  color: #000;
  background: linear-gradient(120deg, #eccf4a, #f5af32);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  /* box-shadow: 0 12px 30px rgba(47, 95, 224, 0.18); */
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.ananth-why-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: rgba(255, 255, 255, 0.18);
  transform: skewX(-25deg);
  transition: left 0.55s ease;
}

.ananth-why-cta:hover::before {
  left: 140%;
}

.ananth-why-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(47, 95, 224, 0.25);
}

.ananth-why-arrow {
  position: relative;
  z-index: 1;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.3s ease;
}

.ananth-why-cta:hover .ananth-why-arrow {
  transform: translateX(5px);
}


/* ==========================================
   BENEFITS
========================================== */

.ananth-why-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ananth-why-benefits-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 5px;
}

.ananth-why-benefits-title span {
  color: #111827;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.5px;
}

.ananth-why-benefits-title div {
  flex: 1;
  height: 1px;
  background: #dce2eb;
}


/* ==========================================
   BENEFIT CARD
========================================== */

.ananth-why-card {
  position: relative;
  padding: 26px 30px;
  border: 1px solid #e1e7ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 30px rgba(20, 45, 80, 0.04);
  overflow: hidden;
  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.ananth-why-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(120deg, #eccf4a, #f5af32);
  transition: width 0.45s ease;
}

.ananth-why-card:hover {
  transform: translateX(8px);
  border-color: rgba(47, 95, 224, 0.2);
  box-shadow: 0 18px 45px rgba(20, 45, 80, 0.09);
}

.ananth-why-card:hover::after {
  width: 100%;
}


/* ==========================================
   CARD TOP
========================================== */

.ananth-why-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.ananth-why-card-number {
  color: #8a94a6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.ananth-why-card-icon {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 25px;
  height: 23px;
}

.ananth-why-card-icon span {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg,
      #12b7e0,
      #2f5fe0);
}

.ananth-why-card-icon span:nth-child(1) {
  height: 10px;
}

.ananth-why-card-icon span:nth-child(2) {
  height: 17px;
}

.ananth-why-card-icon span:nth-child(3) {
  height: 23px;
}


/* ==========================================
   CARD TEXT
========================================== */

.ananth-why-card h4 {
  margin: 0;
  max-width: 600px;
  color: #000;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 500;
}

.ananth-why-card p {
  margin: 4px 0 0;
  color: #7a8494;
  font-size: 14px;
  line-height: 1.5;
}


/* ==========================================
   BACKGROUND SHAPES
========================================== */

.ananth-why-bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.ananth-why-bg-one {
  top: 8%;
  right: -120px;
  width: 300px;
  height: 300px;
  background: rgba(18, 183, 224, 0.05);
}

.ananth-why-bg-two {
  bottom: -150px;
  left: -120px;
  width: 330px;
  height: 330px;
  background: rgba(47, 95, 224, 0.05);
}


/* ==========================================
   SCROLL REVEAL ANIMATION
========================================== */

.ananth-reveal-up,
.ananth-reveal-left,
.ananth-reveal-right {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ananth-reveal-up {
  transform: translateY(35px);
}

.ananth-reveal-left {
  transform: translateX(-45px);
}

.ananth-reveal-right {
  transform: translateX(45px);
}

.ananth-reveal-up.ananth-visible,
.ananth-reveal-left.ananth-visible,
.ananth-reveal-right.ananth-visible {
  opacity: 1;
  transform: translate(0);
}


/* ==========================================
   STAGGERED CARD ANIMATION
========================================== */

.ananth-why-card:nth-child(2) {
  transition-delay: 0.1s;
}

.ananth-why-card:nth-child(3) {
  transition-delay: 0.2s;
}

.ananth-why-card:nth-child(4) {
  transition-delay: 0.3s;
}

.ananth-why-card:nth-child(5) {
  transition-delay: 0.4s;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 991px) {

  .ananth-why-section {
    padding: 85px 0;
  }

  .ananth-why-main-grid {
    grid-template-columns: 1fr;
    gap: 14px !important;
  }

  .ananth-why-intro {
    padding: 20px 0;
  }

  .ananth-why-description {
    max-width: 700px;
  }
}


@media (max-width: 767px) {

  .ananth-why-intro .banner-btn {
    width: 53% !important;
  }

  .ananth-why-benefits {
    gap: 12px;
  }

  .ananth-why-section {
    padding: 70px 0;
  }

  .ananth-why-heading-wrap {
    margin-bottom: 5px !important;
  }

  .ananth-why-main-title {
    font-size: 42px;
    letter-spacing: -1.5px;
  }

  .ananth-why-subtitle {
    /* margin-top: 35px; */
    font-size: 30px;
  }

  .ananth-why-description {
    font-size: 15px;
    line-height: 1.75;
  }

  .ananth-why-card {
    padding: 23px;
  }

  .ananth-why-card h4 {
    font-size: 16px;
  }

  .ananth-why-card:hover {
    transform: translateY(-5px);
  }
}


@media (max-width: 480px) {

  .ananth-why-section {
    padding: 50px 0 0;
    background: none;
  }

  .ananth-why-main-title {
    font-size: 28px;
  }

  .ananth-why-number {
    font-size: 80px;
  }

  .ananth-why-subtitle {
    font-size: 22px;
  }

  .ananth-why-card {
    border-radius: 11px;
  }

}









/* hero section responsive */
/* =========================================
   HERO SECTION - MOBILE RESPONSIVE
========================================= */

/* Tablet */
@media (max-width: 1024px) {

  .hero-section {
    padding: 70px 40px;
    gap: 40px;
  }

  .hero-left {
    width: 50%;
  }

  .hero-right {
    width: 50%;
  }

  .hero-title {
    font-size: 48px;
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
  }

  .hero-image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .cta-container {
    flex-wrap: wrap;
    gap: 20px;
  }
}


/* =========================================
   MOBILE - 768px
========================================= */

@media (max-width: 768px) {

  .hero-section {
    width: 100%;
    padding: 70px 20px 40px;

    display: flex;
    flex-direction: column;

    gap: 40px;
  }


  /* LEFT CONTENT */

  .hero-left {
    width: 100%;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
  }


  /* HERO TITLE */

  .hero-title {
    width: 100%;
    margin: 0;

    font-size: 38px;
    line-height: 1.15;

    text-align: center;
  }


  /* HERO SUBTITLE */

  .hero-subtitle {
    width: 100%;
    max-width: 600px;

    margin: 20px auto 0;

    font-size: 16px;
    line-height: 1.6;

    text-align: center;
  }

  .cta-container .banner-btn {
    /* width: 63% !important; */
    width: 69% !important;
  }


  /* CTA AREA */

  .cta-container {
    width: 100%;

    margin-top: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 25px;
  }


  /* MAIN BUTTON */

  .btn-main {
    width: auto;
    /* min-width: 210px; */

    display: inline-flex;
    align-items: center;
    /* justify-content: center; */

    /* padding: 12px 20px; */
  }


  /* TRUSTED BOX */

  .trusted-box {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
  }


  .avatar-carousel-wrapper {
    max-width: 140px;
    overflow: hidden;
  }


  .trusted-text {
    font-size: 14px;
    white-space: nowrap;
  }


  /* RIGHT IMAGE */

  .hero-right {
    width: 100%;

    display: flex;
    justify-content: center;
  }


  .hero-image-container {
    width: 100%;
    max-width: 600px;

    margin: 0 auto;
  }


  .hero-image-container img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: cover;
  }
}


/* =========================================
   SMALL MOBILE - 480px
========================================= */

@media (max-width: 480px) {

  .hero-section {
    padding: 70px 15px 30px;
    gap: 30px;
  }


  .hero-title {
    font-size: 30px;
    line-height: 1.18;
  }


  .hero-subtitle {
    margin-top: 15px;

    font-size: 15px;
    line-height: 1.55;
  }


  .cta-container {
    margin-top: 22px;
    gap: 22px;
  }


  .btn-main {
    /* width: 100%; */
    /* max-width: 230px; */

    /* font-size: 14px ; */
  }

  .btn-arrow-box {
    height: 38px;
    width: 38px;
  }


  .trusted-box {
    gap: 8px;
  }


  .avatar-carousel-wrapper {
    max-width: 125px;
  }


  .avatar {
    width: 35px;
    height: 35px;
  }


  .trusted-text {
    font-size: 12px;
  }


  .hero-image-container {
    width: 100%;
  }


  .hero-image-container img {
    width: 100%;
    height: auto;

    border-radius: 12px;
  }
}


/* =========================================
   EXTRA SMALL DEVICES - 360px
========================================= */

@media (max-width: 360px) {

  .hero-section {
    padding-left: 12px;
    padding-right: 12px;
  }


  .hero-title {
    font-size: 27px;
  }


  .hero-subtitle {
    font-size: 14px;
  }


  .btn-main {
    max-width: 210px;
  }


  .trusted-text {
    font-size: 11px;
  }
}




/* header mobile responsive */
/* =========================================================
   MOBILE RESPONSIVE HEADER
   ========================================================= */

@media (max-width: 768px) {

  /* Fixed header */
  header {
    padding: 12px 0;
    width: 100%;
  }

  /* Main pill */
  .header-inner {
    width: calc(100% - 24px);
    min-height: 52px;
    padding: 6px 8px 6px 10px;
    border-radius: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ebeef5;
  }

  /* ---------------------------------------------------------
     LOGO SECTION
     --------------------------------------------------------- */

  .logo-container {
    display: flex;
    align-items: center;
    gap: 5px;

    /* max-width: calc(100% - 50px); */
    min-width: 0;
  }

  /* Main logo */
  .logo-icon {
    width: 34px;
    height: 36px;
    flex-shrink: 0;
  }

  .logo-icon img {
    width: 34px;
    height: 36px;
    object-fit: contain;
  }

  /* Remove decorative dots on mobile */
  .logo-icon::before,
  .logo-icon::after {
    display: none;
  }

  /* Company name */
  h1.company-name,
  .company-name {
    font-size: 15px;
    line-height: 1.2;

    font-weight: 600;

    margin: 0 4px;

    letter-spacing: -0.2px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* SAP Partner logo */
  .partner-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .partner-logo img {
    height: 30px;
    width: auto;
    object-fit: contain;
  }


  /* ---------------------------------------------------------
     DESKTOP NAVIGATION - HIDDEN
     --------------------------------------------------------- */

  .nav-links {
    display: none;

    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    width: 100%;

    padding: 10px;

    flex-direction: column;
    align-items: stretch;

    gap: 0;

    background: #ebeef5;

    border-radius: 22px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

    z-index: 999;
  }

  /* Open mobile menu */
  .nav-links.active {
    display: flex;
  }

  /* Navigation links */
  .nav-links a {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 13px 15px;

    border-radius: 12px;

    font-size: 15px;
    font-weight: 500;

    color: rgb(36, 36, 38);

    text-decoration: none;

    transition:
      background 0.2s ease,
      color 0.2s ease;
  }

  .nav-links a:hover {
    background: rgba(255, 255, 255, 0.7);
    color: #000;
  }


  /* ---------------------------------------------------------
     CTA - HIDDEN ON MOBILE
     --------------------------------------------------------- */

  .nav-cta {
    display: none;
  }


  /* ---------------------------------------------------------
     MOBILE MENU BUTTON
     --------------------------------------------------------- */

  .menu-toggle {
    display: flex;

    width: 40px;
    height: 40px;

    padding: 0;

    flex-shrink: 0;

    border: none;
    border-radius: 50%;

    background: #232326;

    cursor: pointer;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    z-index: 1001;
  }

  /* Hamburger lines */
  .menu-toggle span {
    display: block;

    width: 18px;
    height: 2px;

    border-radius: 5px;

    background: #ffffff;

    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }


  /* ---------------------------------------------------------
     HAMBURGER → X ANIMATION
     --------------------------------------------------------- */

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }


  /* ---------------------------------------------------------
     SCROLLED HEADER
     --------------------------------------------------------- */

  header.scrolled .header-inner {
    width: calc(100% - 24px);

    padding: 6px 8px 6px 10px;

    background: #ebeef5;

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
  }

  header.scrolled .nav-links {
    padding: 10px;
    background-color: #fff;
  }

  header.scrolled .logo-container {
    background: transparent;
    box-shadow: none;
  }


  /* Hide hero options on mobile */
  .hero-options {
    display: none;
  }

}


/* =========================================================
   EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  header {
    padding: 10px 0;
  }

  .header-inner {
    width: calc(100% - 20px);
    min-height: 50px;

    padding: 5px 6px 5px 8px;
  }

  .logo-container {
    gap: 3px;
  }

  .logo-icon,
  .logo-icon img {
    width: 48px;
    height: 48px;
  }

  h1.company-name,
  .company-name {
    font-size: 16px;
    margin: 0 2px;

    max-width: 163px;
  }

  .partner-logo img {
    height: 26px;
  }

  .menu-toggle {
    width: 38px;
    height: 38px;
  }

  .menu-toggle span {
    width: 17px;
  }

  .nav-links {
    top: calc(100% + 7px);
    border-radius: 20px;
  }

  .nav-links a {
    padding: 12px 14px;
    font-size: 14px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

  h1.company-name,
  .company-name {
    font-size: 12px;
    max-width: 120px;
  }

  .partner-logo img {
    height: 23px;
  }

  .logo-icon,
  .logo-icon img {
    width: 29px;
    height: 31px;
  }

  .menu-toggle {
    width: 36px;
    height: 36px;
  }

}






/* =========================================
   ANANTH VALUES SECTION
========================================= */

.anv-values-section {
  width: 100%;
  padding: 0px 30px 90px;
  background: #edf2f8;
  overflow: hidden;
}

.anv-values-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}


/* =========================================
   HEADER
========================================= */

.anv-values-header {
  text-align: center;
  margin-bottom: 50px;
}

.anv-values-section-top {
  padding: 30px 30px 100px;
}

.anv-values-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 8px;
  background: #ffffff;
  border-radius: 40px;
  color: #4a4c53;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 25px;
  box-shadow: 0 5px 20px rgba(25, 35, 50, 0.04);
}

.anv-values-label-icon {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  border-radius: 50%;
}

.anv-values-label-icon svg {
  width: 15px;
  height: 15px;
}

.anv-values-title {
  margin: 0;
  color: #303239;
  font-size: 48px;
  line-height: 0.99;
  font-weight: 400;
  /* letter-spacing: -3.5px; */
}

.anv-title-highlight {
  display: inline-block;
  padding: 4px 15px 7px;
  color: #ffffff;
  background: #303239;
  border-radius: 17px;
  font-style: italic;
  font-weight: 500;
  transform: rotate(-1deg);
  transition: 0.35s ease;
}

.anv-title-highlight:hover {
  transform: rotate(2deg) scale(1.04);
}

.anv-values-subtitle {
  max-width: 570px;
  margin: 24px auto 0;
  color: #777b84;
  font-size: 16px;
  line-height: 1.7;
}


/* =========================================
   MAIN GRID
========================================= */

.anv-values-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(330px, 0.82fr);
  gap: 16px;
  align-items: stretch;
}


/* =========================================
   LEFT CARDS
========================================= */

.anv-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 50px;
}


.anv-values-grids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media screen and (max-width: 768px) {

  /* CSS rules placed here only apply to screens 768px wide or smaller */
  .anv-values-grids {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.anv-value-card {
  height: 210px !important;
  position: relative;
  /* min-height: 330px; */
  /* padding: 38px 39px 36px; */
      /* padding: 50px 39px 50px; */
          padding: 15px 39px 26px;
  background: #ffffff;
  border-radius: 25px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform 0.4s cubic-bezier(.2, .8, .2, 1),
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.anv-value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(33, 43, 57, 0.11);
}


/* Animated background glow */

.anv-value-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  top: -80px;
  border-radius: 50%;
  /* background: #caff39; */
  opacity: 0;
  transition: 0.5s ease;
  filter: blur(5px);
}

.anv-value-card:hover::before {
  opacity: 0.18;
}


/* =========================================
   ICON
========================================= */

.anv-card-icon {
  width: 37px;
  height: 37px;
  color: #c5c7ca;
  transition: 0.35s ease;
}

.anv-card-icon svg {
  width: 100%;
  height: 100%;
}

.anv-value-card:hover .anv-card-icon {
  color: #25272b;
  transform: rotate(-8deg) scale(1.1);
}


/* =========================================
   CARD CONTENT
========================================= */

.anv-card-content {
  position: relative;
  z-index: 2;
}

.anv-card-number {
  display: block;
  margin-bottom: 12px;
  color: #a8adb4;
  font-size: 11px;
  letter-spacing: 1.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: 0.35s ease;
}

.anv-value-card:hover .anv-card-number {
  opacity: 1;
  transform: translateY(0);
}

.anv-card-content h3 {
  margin: 0 0 12px;
  color: #000;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 450;
  /* letter-spacing: -0.8px; */
}

.anv-card-content p {
  max-width: 390px;
  margin: 0;
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
  line-height: 1.5;
}


/* =========================================
   CARD ARROW
========================================= */

.anv-card-arrow {
  position: absolute;
  right: 27px;
  bottom: 24px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e3e6;
  border-radius: 50%;
  color: #5a5d63;
  font-size: 17px;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.35s ease;
}

.anv-value-card:hover .anv-card-arrow {
  opacity: 1;
  transform: translateY(0);
  background: #fccf0f;
  border-color: #fccf0f;
  color: #202227;
}


/* =========================================
   RIGHT FEATURE CARD
========================================= */

.anv-feature-card {
  position: relative;
  /* min-height: 676px; */
  border-radius: 26px;
  overflow: hidden;
  background: #3e4149;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.anv-feature-image-wrap {
  position: absolute;
  inset: 0;
  height: 100%;
}

.anv-feature-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}

.anv-feature-card:hover .anv-feature-image {
  transform: scale(1.06);
}


/* =========================================
   IMAGE OVERLAY
========================================= */

.anv-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(20, 22, 27, 0.82) 15%,
      rgba(28, 30, 37, 0.82) 42%,
      rgba(34, 36, 44, 0.82) 100%);
}


/* =========================================
   FEATURE TOP
========================================= */

.anv-feature-star {
  position: absolute;
  top: 38px;
  left: 37px;
  z-index: 3;
  color: #d2ff38;
  font-size: 32px;
  line-height: 1;
  /* animation: anvStarRotate 5s linear infinite; */
}

.anv-feature-star img {
  width: 15%;
}

.anv-feature-top-label {
  position: absolute;
  top: 38px;
  right: 30px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.anv-feature-top-label span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d2ff38;
  box-shadow: 0 0 12px #d2ff38;
}


/* =========================================
   FEATURE CONTENT
========================================= */

.anv-feature-content {
  position: relative;
  z-index: 4;
  padding: 40px 38px 36px;
}

.anv-feature-small {
  display: block;
  margin-bottom: 13px;
  color: #d2ff38;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
}

.anv-feature-content h3 {
  max-width: 320px;
  margin: 0 0 15px;
  color: #ffffff;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 450;
  letter-spacing: -1.5px;
}

.anv-feature-content p {
  max-width: 350px;
  margin: 0 0 27px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.6;
}


/* =========================================
   BUTTON
========================================= */

.anv-feature-button {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 5px 7px 5px 6px;
  border: 2px solid #d2ff38;
  border-radius: 15px;
  background: #d2ff38;
  color: #25272b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: 0.35s ease;
}

.anv-feature-button:hover {
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-3px);
}

.anv-button-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #303239;
  border-radius: 11px;
  color: #ffffff;
  font-size: 20px;
  transition: 0.35s ease;
}

.anv-feature-button:hover .anv-button-icon {
  transform: translateX(4px);
}


/* =========================================
   SCROLL REVEAL
========================================= */

.anv-reveal {
  opacity: 0;
  transform: translateY(45px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(.2, .8, .2, 1);
}

.anv-reveal.anv-visible {
  opacity: 1;
  transform: translateY(0);
}

.anv-values-grid .anv-value-card:nth-child(1) {
  transition-delay: 0.05s;
}

.anv-values-grid .anv-value-card:nth-child(2) {
  transition-delay: 0.15s;
}

.anv-values-grid .anv-value-card:nth-child(3) {
  transition-delay: 0.25s;
}

.anv-values-grid .anv-value-card:nth-child(4) {
  transition-delay: 0.35s;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes anvStarRotate {

  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.12);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .anv-values-section {
    padding: 80px 22px;
  }

  .anv-values-layout {
    grid-template-columns: 1fr;
  }

  .anv-feature-card {
    min-height: 560px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

  .anv-values-section {
    padding: 0px 0px;
    /* padding: 40px 0px 50px; */
  }

  .anv-values-container-inner {
    padding: 20px 0px 50px !important;
  }

  .anv-values-header {
    margin-bottom: 38px !important;
    /* padding-bottom: 6%; */
  }

  .anv-values-title {
    font-size: 30px;
    letter-spacing: -2px;
  }

  .anv-values-subtitle {
    font-size: 14px;
  }

  .anv-values-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 30px;
  }

  .anv-value-card {
    min-height: 270px;
    padding: 28px;
    border-radius: 20px;
  }

  .anv-card-content h3 {
    font-size: 22px;
  }

  .anv-card-content p {
    font-size: 14px;
  }

  .anv-feature-card {
    min-height: 520px;
    border-radius: 20px;
  }

  .anv-feature-content {
    padding: 30px 25px 25px;
  }

  .anv-feature-content h3 {
    font-size: 24px;
  }

  .anv-feature-star {
    top: 25px;
    left: 25px;
  }

  .anv-feature-top-label {
    top: 27px;
    right: 20px;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

  .anv-values-title {
    font-size: 30px;
  }

  .anv-title-highlight {
    padding: 3px 10px 5px;
  }

  .anv-feature-content h3 {
    font-size: 27px;
  }

}




/* slider design */
.mkr-tsl-section {
  max-width: 1280px;
  margin: 0 auto;
  /* padding: 72px 24px 8px; */
  padding: 72px 24px 72px;
}

.mkr-tsl-section {
    background: #35363b;
}

.mkr-tsl-head {
  text-align: center;
  margin-bottom: 35px
}

.mkr-tsl-title {
  color: #fff;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -.03em;
  margin: 14px 0 16px
}

.mkr-tsl-sub {
  color: #fff;
  margin: 0 auto;
  max-width: 420px;
  /* color: rgba(36, 36, 38, 0.75); */
  line-height: 1.5
}

/* viewport + track */
.mkr-tsl-viewport {
  overflow: hidden;
  border-radius: 28px;
  cursor: grab;
  touch-action: pan-y
}

.mkr-tsl-viewport.is-drag {
  cursor: grabbing
}

.mkr-tsl-track {
  display: flex;
  gap: 16px;
  will-change: transform;
  transition: transform 1.05s cubic-bezier(.65, .02, .15, 1)
}

.mkr-tsl-track.no-anim {
  transition: none
}

.mkr-tsl-track.is-drag {
  transition: none
}

#mkrTslTrack {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    will-change: transform;
}

.mkr-tsl-card {
    flex: 0 0 auto;
}

/* card */
.mkr-tsl-card {
  flex: 0 0 min(100%, 1180px); 
  /* flex: 0 0 min(78%, 980px); */
  min-height: 320px;
  border-radius: 28px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1fr minmax(240px, 34%);
  grid-template-rows: auto 1fr auto;
  column-gap: 40px;
  color: var(--ink);
  user-select: none
}

.mkr-tsl-quote-logo img {
    width: 17%;
    margin-bottom: 35px;
}







.mkr-tsl-lime {
  background: #dcff5c
}

.mkr-tsl-taupe {
  background: #dbc1b4
}

.mkr-tsl-sky {
  background: #b7ddff
}

.mkr-tsl-fog {
  background: #d9d6dc
}

.mkr-tsl-logo {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  font-weight: 900;
  font-style: italic;
  font-size: 34px;
  letter-spacing: -.04em;
  color: rgba(43, 45, 42, .38);
  text-shadow: 4px 4px 0 rgba(43, 45, 42, .12);
  line-height: 1
}

.mkr-tsl-logo img {
  width: 10%;
}

/* .mkr-tsl-photo {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 16px;
  overflow: hidden;
  position: relative
}

.mkr-tsl-photo svg {
  display: block;
  width: 100%;
  height: 100%
} */



.mkr-tsl-quote {
  grid-column: 1;
  grid-row: 3;
  align-self: anchor-center !important;
  max-width: 400px
}

/* .mkr-tsl-quote {
    grid-column: 1;
    grid-row: 0;
    align-self: auto;
    max-width: 400px;
    margin-top: 50px;
} */

.mkr-tsl-company {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0 0 16px
}

.mkr-tsl-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5
}

.mkr-tsl-meta {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  margin: 0
}

.mkr-tsl-meta img {
  width: 100%;
  border-radius: 20px;
      margin-top: 8px;
}

.mkr-tsl-meta dt {
  font-size: 14px;
  color: var(--mute);
  margin: 0 0 6px
}

.mkr-tsl-meta dd {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35
}

.mkr-tsl-meta dd:last-child {
  margin: 0;
  padding: 0;
  border: 0
}

/* arrows */
.mkr-tsl-nav {
  display: flex;
  gap: 10px;
  margin-top: 20px
}

.mkr-tsl-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 0;
  background: black;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .25s, opacity .25s, transform .25s
}

.mkr-tsl-btn:hover:not(:disabled) {
  background: black;
}

.mkr-tsl-btn:active:not(:disabled) {
  transform: scale(.92)
}

.mkr-tsl-btn:disabled {
  opacity: .35;
  cursor: default
}

.mkr-tsl-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px
}

.mkr-tsl-btn svg {
  width: 20px;
  height: 20px
}

@media (max-width:760px) {

  .mkr-tsl-nav-highlight{
        margin: 24px 0 10px;

  }

  .mkr-tsl-title {
    font-size: 28px;
    line-height: 1.3;
  }

  .mkr-tsl-section {
    /* padding: 20px 24px 34px; */
    padding: 40px 12px 35px;
  }

  .mkr-tsl-company {
    font-size: 22px;
    margin: 0px 0 10px;
  }

  .mkr-tsl-quote-logo img {
    margin-bottom: 17px;
  }

  .mkr-tsl-card {
    flex-basis: 88%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 0px;
    padding: 24px
  }

  .mkr-tsl-logo,
  .mkr-tsl-photo,
  .mkr-tsl-quote,
  .mkr-tsl-meta {
    grid-column: 1;
    grid-row: auto
  }

  .mkr-tsl-photo {
    max-width: 200px;
    margin-left: auto
  }

  .mkr-tsl-logo {
    position: absolute;
    margin: 11px 0 0;
  }

  .mkr-tsl-card {
    position: relative
  }

  .line-break {
    display: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .mkr-tsl-track {
    transition-duration: .01ms
  }
}







/* =========================================
   GTV COMPANY SECTION
   All classes use "gtv-" prefix
========================================= */

.gtv-company-section {
  /* position: relative; */
  overflow: hidden;
  padding: 0px 58px 80px;
  /* padding: 110px 24px; */
  /* background:
    radial-gradient(
      circle at 15% 20%,
      rgba(62, 120, 255, 0.10),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(115, 73, 255, 0.08),
      transparent 30%
    ),
    #f7f9fc; */
  /* font-family: Inter, Arial, Helvetica, sans-serif; */
  color: #101828;
}

.gtv-container {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: 0 auto;
}


/* =========================================
   BACKGROUND ORBS
========================================= */

.gtv-bg-orb {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.5;
  animation: gtvFloatOrb 8s ease-in-out infinite;
}

.gtv-bg-orb-one {
  top: -130px;
  left: -120px;
  background: rgba(46, 110, 255, 0.14);
}

.gtv-bg-orb-two {
  right: -130px;
  bottom: -130px;
  background: rgba(126, 78, 255, 0.12);
  animation-delay: -3s;
}

@keyframes gtvFloatOrb {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(25px, -20px, 0);
  }
}


/* =========================================
   SECTION HEADING
========================================= */

.gtv-section-heading {
  max-width: 760px;
  margin: 0 auto 65px;
  text-align: center;
}

.gtv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 14px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.7);
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.gtv-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #356cff;
  box-shadow: 0 0 0 5px rgba(53, 108, 255, 0.10);
  animation: gtvPulse 2s ease-in-out infinite;
}

@keyframes gtvPulse {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(53, 108, 255, 0.10);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(53, 108, 255, 0.03);
  }
}

.gtv-section-heading h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -2.5px;
  font-weight: 750;
}

.gtv-section-heading h2 span {
  display: block;
  background: linear-gradient(100deg,
      #2563eb,
      #6941c6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gtv-section-heading p {
  max-width: 650px;
  margin: 22px auto 0;
  color: #667085;
  font-size: 17px;
  line-height: 1.75;
}


/* =========================================
   CARD GRID
========================================= */

.gtv-content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}


/* =========================================
   CARDS
========================================= */

.gtv-info-card {
  position: relative;
  min-height: 390px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 10px 35px rgba(16, 24, 40, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(14px);
  transition:
    transform 0.45s cubic-bezier(.2, .8, .2, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

.gtv-info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  /* background: linear-gradient(
    90deg,
    #2563eb,
    #7c3aed
  ); */
  background: linear-gradient(120deg, #eccf4a, #f5af32);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.gtv-info-card:hover {
  transform: translateY(-10px);
  border-color: rgba(37, 99, 235, 0.15);
  box-shadow:
    0 25px 60px rgba(16, 24, 40, 0.10),
    0 0 0 1px rgba(37, 99, 235, 0.04);
}

.gtv-info-card:hover::before {
  transform: scaleX(1);
}


/* =========================================
   CARD TOP
========================================= */

.gtv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.gtv-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: #000;
  background: linear-gradient(180deg, #fbeee9, #fff);
  transition:
    transform 0.4s ease,
    background 0.4s ease;
}

.gtv-icon-box svg {
  width: 26px;
  height: 26px;
}

.gtv-info-card:hover .gtv-icon-box {
  transform: rotate(-5deg) scale(1.08);
  background: linear-gradient(180deg, #fbeee9, #fff);
}

.gtv-card-number {
  color: #98a2b3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}


/* =========================================
   CARD CONTENT
========================================= */

.gtv-info-card h3 {
  margin: 0 0 15px;
  font-size: 20px;
  color: #000;
  font-weight: 400;
  line-height: 1.2;
  /* letter-spacing: -0.6px; */
}

.gtv-info-card p {
  margin: 0;
  /* color: #667085; */
  color: rgba(36, 36, 38, 0.75);
  font-size: 16px;
  line-height: 1.8;
}


/* =========================================
   VALUES
========================================= */

.gtv-values-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.gtv-values-list span {
  padding: 7px 11px;
  border: 1px solid rgba(16, 24, 40, 0.07);
  border-radius: 50px;
  background: #f8fafc;
  color: #475467;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.gtv-values-list span:hover {
  border-color: rgba(37, 99, 235, 0.2);
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
  transform: translateY(-2px);
}


/* =========================================
   BOTTOM CARD LINE
========================================= */

.gtv-card-line {
  position: absolute;
  right: 34px;
  bottom: 30px;
  left: 34px;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(37, 99, 235, 0.20),
      transparent);
}


/* =========================================
   SCROLL REVEAL ANIMATION
========================================= */

.gtv-reveal {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(.2, .8, .2, 1);
}

.gtv-reveal.gtv-visible {
  opacity: 1;
  transform: translateY(0);
}


/* Stagger cards */

.gtv-content-grid .gtv-info-card:nth-child(1) {
  transition-delay: 0.05s;
}

.gtv-content-grid .gtv-info-card:nth-child(2) {
  transition-delay: 0.15s;
}

.gtv-content-grid .gtv-info-card:nth-child(3) {
  transition-delay: 0.25s;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {
  .gtv-company-section {
    padding: 80px 20px;
  }

  .gtv-content-grid {
    grid-template-columns: 1fr;
    max-width: 650px;
    margin: 0 auto;
    gap: 12px;
  }

  .gtv-info-card {
    min-height: auto;
  }

  .gtv-section-heading {
    margin-bottom: 45px;
  }
}


@media (max-width: 600px) {
  .gtv-company-section {
    /* padding: 65px 16px; */
    padding: 10px 0px 47px;
  }

  .gtv-section-heading h2 {
    font-size: 40px;
    letter-spacing: -1.8px;
  }

  .gtv-section-heading p {
    font-size: 15px;
  }

  .gtv-info-card {
    padding: 27px;
    border-radius: 20px;
  }

  .gtv-card-top {
    margin-bottom: 30px;
  }

  .gtv-info-card h3 {
    font-size: 20px;
  }

  .gtv-info-card p {
    font-size: 15px;
  }
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

  .gtv-reveal,
  .gtv-info-card,
  .gtv-icon-box,
  .gtv-values-list span,
  .gtv-bg-orb,
  .gtv-eyebrow-dot {
    animation: none !important;
    transition: none !important;
  }

  .gtv-reveal {
    opacity: 1;
    transform: none;
  }
}









/* ========================================= ANANTH INFO - BACK TO TOP ========================================= */
.anth-backtop-btn {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(120deg, #eccf4a, #f5af32);
  /* background: linear-gradient(135deg, #019af6, #20418d); */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.85);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 9999;
  /* box-shadow: 0 8px 25px rgba(1, 154, 246, 0.25); */
  box-shadow: 0 8px 25px rgb(241 191 62 / 38%);
}

/* Visible State */
.anth-backtop-btn.anth-backtop-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hover */
.anth-backtop-btn:hover {
  transform: translateY(-4px) scale(1.05);
  /* box-shadow: 0 12px 30px rgba(1, 154, 246, 0.35); */
  box-shadow: 0 8px 25px rgb(241 191 62 / 71%);
}

/* Icon */
.anth-backtop-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anth-backtop-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mobile */
@media (max-width: 600px) {
  .anth-backtop-btn {
    /* width: 44px;
    height: 44px;
    right: 18px;
    bottom: 18px; */
    width: 55px;
        height: 55px;
        right: 25px;
        bottom: 22px;
  }

  .anth-backtop-icon svg {
    /* width: 18px;
    height: 18px; */
    width: 25px;
        height: 25px;
  }
}





/* location */
/* =========================================
   UNIQUE ADDRESS SECTION
   ========================================= */

.uxloc-address-section {
    width: 100%;
    padding: 0px 0px 95px;
    box-sizing: border-box;
    /* background: #f7f8fc; */
    background: #fff;
    overflow: hidden;
}


/* Main container */

.uxloc-address-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;

    display: grid;
    /* grid-template-columns: repeat(3, 1fr);
    gap: 25px; */
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}


/* =========================================
   ADDRESS CARD
   ========================================= */

.uxloc-address-card {
    position: relative;

    min-height: 270px;
    /* padding: 35px 32px; */
    padding: 35px 32px 15px;

    box-sizing: border-box;

    /* background: linear-gradient(
        180deg,
        #dff2fb 0%,
        #edf7fb 50%,
        #ffffff 100%
    ); */

    background: linear-gradient(180deg, #c4deed, #fff) !important;

    border-radius: 24px;

    box-shadow:
        0 15px 35px rgba(42, 56, 90, 0.10);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* Decorative background circle */

.uxloc-address-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -75px;
    top: -75px;

    border-radius: 50%;

    /* background: rgba(255, 255, 255, 0.35); */

    pointer-events: none;
}


/* Hover */

.uxloc-address-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 22px 45px rgba(42, 56, 90, 0.15);
}






/* =========================================
   LOCATION ICON
   ========================================= */

.uxloc-icon-box {
    width: 64px;
    height: 64px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(160, 196, 216, 0.38);

    color: #263153;

    margin-bottom: 25px;

    position: relative;
    z-index: 2;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.uxloc-location-icon {
    width: 29px;
    height: 29px;
}


.uxloc-address-card:hover .uxloc-icon-box {
    background: rgba(160, 196, 216, 0.58);

    transform: translateY(-3px) scale(1.06);
}


/* =========================================
   TEXT
   ========================================= */

.uxloc-address-content {
    position: relative;
    z-index: 2;
}


.uxloc-address-content h3 {
    margin: 0 0 14px;

   

    font-size: 18px;

    line-height: 1.2;

    font-weight: 600;

    color: #000;

    letter-spacing: -0.5px;
}


.uxloc-address-content p {
    margin: 0;

 

    font-size: 16px;

    line-height: 1.5;

    font-weight: 400;

    color: rgba(36, 36, 38, 0.75);
}


/* =========================================
   REFRESH / PAGE LOAD ANIMATION
   ========================================= */

.uxloc-animate {
    opacity: 0;

    transform: translateY(35px);

    animation:
        uxlocFadeUp 0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


.uxloc-delay-1 {
    animation-delay: 0.18s;
}


.uxloc-delay-2 {
    animation-delay: 0.36s;
}


@keyframes uxlocFadeUp {

    0% {
        opacity: 0;
        transform: translateY(35px);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================
   ICON INTRO ANIMATION
   ========================================= */

.uxloc-animate .uxloc-icon-box {
    animation:
        uxlocIconPop 0.7s
        cubic-bezier(0.34, 1.56, 0.64, 1)
        backwards;
}


.uxloc-delay-1 .uxloc-icon-box {
    animation-delay: 0.25s;
}


.uxloc-delay-2 .uxloc-icon-box {
    animation-delay: 0.43s;
}


@keyframes uxlocIconPop {

    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

    .uxloc-address-container {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 620px) {

    .uxloc-address-section {
        padding: 40px 12px 50px;
    }

    .uxloc-address-container {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .uxloc-address-card {
        min-height: auto;
        padding: 30px 25px;
    }

    .uxloc-address-content h3 {
        font-size: 25px;
    }

    .uxloc-address-content p {
        font-size: 16px;
    }

}



#site-header::before {

content: "";
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(6px);
    pointer-events: none;
    opacity: 1;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: all .25s linear;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-mask-image: linear-gradient(#000 50%, transparent 100%);
    mask-image: linear-gradient(#000 50%, transparent 100%);

}

 



/* privacy policy */

/* Ananth Info - Privacy Policy Page */

.anth-privacy-page {
    width: 100%;
    padding: 10% 20px 1%;
    background: #ffffff;
    box-sizing: border-box;
}

.anth-privacy-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}

.anth-privacy-header {
    margin-bottom: 35px;
    text-align: center;
}

.anth-privacy-title {
    margin: 0;
    font-size: 48px;
    font-weight: 400;
    color: #000;
}

.anth-privacy-section {
    margin-bottom: 30px;
}

.anth-privacy-subtitle {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 400;
    color: #000;
}

.anth-privacy-ul-list {
  padding-left: 30px;
}
.anth-privacy-li-list {
  line-height: 1.8;
    padding-left: 6px;
    color: rgba(36, 36, 38, 0.75);
}

.anth-privacy-paragraph {
    margin: 0 0 15px;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(36, 36, 38, 0.75);
}

/* Responsive Design */
@media (max-width: 768px) {
    .anth-privacy-page {
        padding: 65px 18px 10px;
    }

    .anth-privacy-title {
        font-size: 28px;
    }

    .anth-privacy-header  {
      margin-bottom: 20px;
    }

    .anth-privacy-subtitle {
        font-size: 21px;
    }

    .anth-privacy-paragraph {
        font-size: 15px;
        line-height: 1.75;
    }
}



/* ANANTH INFO PRIVACY POLICY ANIMATIONS */

.anth-privacy-page {
    overflow: hidden;
}

.anth-privacy-header {
    opacity: 0;
    animation: anthPrivacyHeaderReveal 0.9s ease-out forwards;
}

.anth-privacy-title {
    animation: anthPrivacyTitleReveal 1s ease-out both;
}

.anth-privacy-section {
    opacity: 0;
    animation: anthPrivacySectionReveal 0.8s ease-out forwards;
}

.anth-privacy-section:nth-of-type(1) {
    animation-delay: 0.2s;
}

.anth-privacy-section:nth-of-type(2) {
    animation-delay: 0.4s;
}

.anth-privacy-section:nth-of-type(3) {
    animation-delay: 0.6s;
}

.anth-privacy-paragraph {
    transition: color 0.3s ease;
}

.anth-privacy-paragraph:hover {
    color: #333;
}

/* Header fade and slide */
@keyframes anthPrivacyHeaderReveal {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Title entrance */
@keyframes anthPrivacyTitleReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Content section entrance */
@keyframes anthPrivacySectionReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    .anth-privacy-header,
    .anth-privacy-title,
    .anth-privacy-section {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .anth-privacy-paragraph {
        transition: none;
    }
}







/* 
.rpa-industry-showcase {
    --rpa-navy: #0b1f43;
    --rpa-border: #e0e6ef;
    --rpa-orange: #ef9000;

    width: 96%;
    max-width: 1600px;
    margin: 0 auto 70px;
    overflow: hidden;
    border: 1px solid #e6eaf1;
    border-radius: 28px;
    background: #f5f7fa;
    
    color: var(--rpa-navy);
    
  }

  .rpa-industry-showcase *,
  .rpa-industry-showcase *::before,
  .rpa-industry-showcase *::after {
    box-sizing: border-box;
  }

  .rpa-industry-tabs {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 32px;
    overflow-x: auto;
    border-bottom: 1px solid var(--rpa-border);
    scrollbar-width: thin;
    scrollbar-color: #cbd4e1 transparent;
    scroll-behavior: auto;
  }

  .rpa-industry-tab {
    flex: 0 0 auto;
    padding: 10px 28px;
    border: 1px solid var(--rpa-border);
    border-radius: 50px;
    background: transparent;
    color: #344a6d;
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background 0.2s ease,
      color 0.2s ease,
      border-color 0.2s ease;
  }

  .rpa-industry-tab:hover {
    border-color: #fccf0f;
  }

  .rpa-industry-tab.rpa-is-active {
    background: linear-gradient(120deg, #eccf4a, #f5af32);
    
    border-color: #fccf0f;
    color: #000;
  }

  .rpa-industry-tab:focus-visible {
    outline: 3px solid var(--rpa-orange);
    outline-offset: 3px;
  }

 
  .rpa-industry-banner {
    position: relative;
    width: calc(100% - 64px);
    height: clamp(380px, 42vw, 650px);
    margin: 32px auto;
    overflow: hidden;
    border-radius: 18px;
    background: #dce3eb;
  }

  .rpa-industry-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .rpa-industry-image.rpa-is-changing {
    opacity: 0.65;
  }

  .rpa-industry-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(7, 24, 50, 0.65) 0%,
      rgba(7, 24, 50, 0.25) 48%,
      rgba(7, 24, 50, 0.02) 100%
    );
    pointer-events: none;
  }

  
  .rpa-industry-image-caption {
    display: none;
    position: absolute;
    left: clamp(30px, 4vw, 60px);
    bottom: clamp(30px, 4vw, 60px);
    max-width: 85%;
    color: #fff;
    pointer-events: none;
  }

  .rpa-industry-image-label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
  }

  .rpa-industry-image-title {
    margin: 0;
    font-size: clamp(36px, 4.5vw, 58px);
    line-height: 1.2;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

 
  .rpa-industry-progress {
    height: 3px;
    margin: 0 32px 26px;
    overflow: hidden;
    border-radius: 10px;
    background: #e4e9f0;
  }

  .rpa-industry-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #fccf0f;
  }

  .rpa-industry-progress-bar.rpa-is-running {
    animation: rpaIndustryProgress 5s linear forwards;
  }

  @keyframes rpaIndustryProgress {
    from { width: 0; }
    to { width: 100%; }
  }


  @media (max-width: 768px) {
    .rpa-industry-showcase  {
      margin-bottom: 40px;
    }
    .rpa-industry-showcase {
      width: 96%;
      border-radius: 20px;
    }

    .rpa-industry-tabs {
      gap: 10px;
      padding: 18px;
    }

    .rpa-industry-tab {
      padding: 13px 18px;
      font-size: 14px;
    }

    .rpa-industry-banner {
      width: calc(100% - 32px);
      height: 360px;
      margin: 20px auto;
      border-radius: 14px;
    }

    .rpa-industry-image-caption {
      left: 24px;
      bottom: 26px;
    }

    .rpa-industry-image-title {
      font-size: clamp(30px, 6vw, 42px);
    }

    .rpa-industry-progress {
      margin: 0 16px 18px;
    }
  }

  @media (max-width: 420px) {
    .rpa-industry-banner {
      height: 280px;
    }

    .rpa-industry-tab {
      padding: 11px 15px;
      font-size: 13px;
    }

    .rpa-industry-image-title {
      font-size: 28px;
    }

    .rpa-industry-image-label {
      font-size: 10px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .rpa-industry-showcase *,
    .rpa-industry-showcase *::before,
    .rpa-industry-showcase *::after {
      transition: none !important;
      animation: none !important;
    }
  } */


  .rpa-industry-showcase {
  --rpa-navy: #0b1f43;
  --rpa-border: #e0e6ef;
  --rpa-orange: #ef9000;

  width: 96%;
  max-width: 1600px;
  margin: 0 auto 70px;
  overflow: hidden;
  border: 1px solid #e6eaf1;
  border-radius: 28px;
  background: #f5f7fa;
  color: var(--rpa-navy);
  /* font-family: Arial, Helvetica, sans-serif; */
}

.rpa-industry-showcase *,
.rpa-industry-showcase *::before,
.rpa-industry-showcase *::after {
  box-sizing: border-box;
}

/* Navigation tabs */
.rpa-industry-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 32px;
  overflow-x: auto;
  border-bottom: 1px solid var(--rpa-border);
  scrollbar-width: thin;
  scrollbar-color: #cbd4e1 transparent;
}

.rpa-industry-tab {
  flex: 0 0 auto;
  padding: 10px 28px;
  border: 1px solid var(--rpa-border);
  border-radius: 50px;
  background: transparent;
  color: #344a6d;
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rpa-industry-tab:hover {
  border-color: #fccf0f;
}

.rpa-industry-tab.rpa-is-active {
  background: linear-gradient(120deg, #eccf4a, #f5af32);
  border-color: #fccf0f;
  color: #000;
  font-weight: 600;
}

.rpa-industry-tab:focus-visible {
  outline: 3px solid var(--rpa-orange);
  outline-offset: 3px;
}

/* Split layout grid: Left Content, Right Banner */
.rpa-industry-content-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 40px;
  padding: 40px 32px 20px;
}

@media (max-width: 1024px) {
  .rpa-industry-content-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 24px 10px;
  }
}

/* Left Content Styles */
.rpa-industry-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rpa-industry-image-label {
  display: none;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #536b90;
}

.rpa-industry-image-title {
  margin: 0 0 20px 0;
  font-size: 28px;
  /* font-size: clamp(32px, 3.5vw, 48px); */
  line-height: 1.2;
  font-weight: 400;
  color: #000;
}

.rpa-industry-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rpa-industry-features li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(36, 36, 38, 0.75);
  font-weight: 400;
}

.rpa-industry-features li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #df9e00;
  font-weight: bold;
  font-size: 14px;
}

/* Banner Image Styles */
.rpa-industry-banner {
  position: relative;
  width: 100%;
  height: 90%;
  /* height: clamp(350px, 38vw, 480px); */
  overflow: hidden;
  border-radius: 18px;
  background: #dce3eb;
}

.rpa-industry-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.rpa-industry-image.rpa-is-changing {
  opacity: 0.65;
}

.rpa-industry-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 24, 50, 0.15) 0%,
    rgba(7, 24, 50, 0.02) 100%
  );
  pointer-events: none;
}

/* Progress bar */
.rpa-industry-progress {
  height: 3px;
  margin: 20px 32px 26px;
  overflow: hidden;
  border-radius: 10px;
  background: #e4e9f0;
}

.rpa-industry-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #fccf0f;
}

.rpa-industry-progress-bar.rpa-is-running {
  animation: rpaIndustryProgress 5s linear forwards;
}

@keyframes rpaIndustryProgress {
  from { width: 0; }
  to { width: 100%; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .rpa-industry-image-title {
    font-size: 22px;
  }
  .rpa-industry-showcase {
    width: 96%;
    border-radius: 20px;
    margin-bottom: 40px;
  }
  .rpa-industry-tabs {
    gap: 10px;
    padding: 18px;
  }
  .rpa-industry-tab {
    padding: 11px 18px;
    font-size: 14px;
  }
  .rpa-industry-banner {
    height: 300px;
  }
  .rpa-industry-progress {
    margin: 10px 16px 18px;
  }
}


.mkt-website-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.mkt-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#mktFormStatus {
    width: 100%;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.nav-links a:hover {
    color: #000;
    transition: color 0.3s ease;
}

.nav-links a.active {
    color: #000 !important;
  
}