@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --bg-color-primary: #161618;
  --bg-color-secondary: #28282c;
  --element-primary: #0095da;
  --text-primary: #FFFFFF;
  --text-secondary: #f5f5f5;
  --text-light-2: #adb1b7;
  --text-dark: #000000;
}
.light-theme {
  --bg-color-primary: #f5f5f5;   
  --bg-color-secondary: #ffffff; 
  --element-primary: #0077b6;    
  --text-primary: #1a1a1a;       
  --text-secondary: #555555;     
  --text-dark: #000000;    
  --text-light-2: #161618;  
  background: #f5f5f7 !important;
}
/* 🔥 Banner Styling */
@media (min-width: 1920px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
      max-width: 1360px;
      /* padding: 0 56px; */
  }
}
*
{
  font-family: "Roboto", sans-serif !important;
}
.text-theme {
  color: var(--text-primary);
}
p
{
line-height: 1.5;
text-align: unset;
}
.navbar-brand img
{
  max-width: 120px;
}
.navbar-section
{
  background-color: var(--bg-color-primary);
  padding: 0;
}
.navbar-section .nav-link
{
  color: var(--text-secondary);
}
/* The 'active' state color */
.navbar-nav .nav-link.active {
  color: var(--element-primary) !important; /* Your neon/accent color */
  font-weight: bold;
  position: relative;
}
/* Optional: Add a small neon underline to the active link */
.navbar-nav .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--element-primary);
  box-shadow: 0 0 10px var(--element-primary);
}
/* 1. Pill Shape for the same row */
.pill-wrapper {
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  padding: 10px;
}
@media (min-width: 768px) {
  .pill-wrapper {
    border-radius: 100px;
    padding: 10px !important;
  }
}
/* Default state: Hide the light-theme logo, show the dark-theme one */
.logo-light-theme { display: none; }
.logo-dark-theme { display: block; }
/* If body has .light-theme: Show the dark logo, hide the white one */
body.light-theme .logo-light-theme {
    display: block;
}
body.light-theme .logo-dark-theme {
    display: none;
}
/* 1. Default State: Hamburger (3 horizontal lines) */
.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 6px; }
.hamburger-icon span:nth-child(3) { top: 12px; }
/* 2. Active State: ONLY when NOT collapsed (The X) */
.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(2) {
    opacity: 0;
}
.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}
/* 2. Custom Hamburger to X Animation */
.hamburger-icon {
  width: 24px;
  height: 18px;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--text-primary);
  border-radius: 9px;
  opacity: 1;
  transition: .25s ease-in-out;
  float: inline-end;
}
.light-theme .hamburger-icon span
{
  background-color: var(--element-primary);
}
.hamburger-icon span:nth-child(1)
{
  width: 70%;
}
.hamburger-icon span:nth-child(2)
{
  width: 100%;
}
.hamburger-icon span:nth-child(3)
{
  width: 70%;
}
/* Transform to Close (X) */
.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  width: 100%;
}
.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(2) {
  opacity: 0;
}
.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  width: 100%;
}
/* 3. Ensure Menu is horizontal on Desktop */
@media (min-width: 992px) {
.navbar-section  .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
  }
}
/* Mobile Adjustments */
@media (max-width: 991px) {
  .navbar-section .navbar-collapse {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--bg-color-grey);
      border-radius: 20px;
      margin-top: 10px;
      padding: 20px;
      z-index: 1000;
      height: auto !important;
  }
}
@media (max-width: 991px) {
  .navbar-section .navbar-collapse {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0%;
    width: 50%;
    background: rgb(39 39 43) !important;
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 0;
    padding: 20px 0;
    margin-top: 0;
    height: auto !important;
    max-height: 50vh;
    /* overflow-y: auto; */
    z-index: 9999;
    box-shadow: none;
}
.light-theme .navbar-section .navbar-collapse
{
  background-color: #ffffff !important;
}
  /* 5. Center the Links */
  .navbar-section .navbar-nav {
      text-align: center;
      width: 100%;
      padding: 0 ;
  }
  .navbar-section .navbar .navbar-nav
  {
        padding-left: 0px !important; 
  }
  .nav-item {
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      width: 80%; /* Makes the underline shorter/cleaner */
      margin: 0 auto;
  }
  .nav-item:last-child {
      border-bottom: none;
  }
  .nav-link {
      color: var(--text-primary) !important;
      font-size: 1.1rem;
      font-weight: 500;
      letter-spacing: 0.5px;
      display: block;
      text-align: left;
  }
}
@media only screen and (max-width: 767px) {
  .navbar-section  .navbar .navbar-nav {
      float: none !important;
      margin: 0px -15px 12px 15px;
      padding-left: 23px;
  }
  .navbar-section .navbar-collapse {
    /* If you want it to cover the whole screen width */
    width: 100%; 
    /* If you want it to be even wider than the container (be careful with this) */
    /* width: 100vw; 
       left: 0; */
    /* Optional: Add a subtle border or glow to match your "Cryx" theme */
    border-top: 1px solid rgba(0, 119, 182, 0.3);
}
  @media (max-width: 576px) {
}
}
.hero-section {
  position: relative;
  padding: 490px 0 56px;
  background: var(--bg-color-primary);
  overflow: hidden;
  width: 100%;
}
.cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  top: -129px;
  left: -13px;
}
.cryx-hero.svelte-dmrdcl .container-main.svelte-dmrdcl
 {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 56px;
}
.carousel-indicators [data-bs-target] {
  width: 4px;
  height: 4px;
  margin-right: 2px;
  border-radius: 50%;
  background-color: var(--text-primary);
  opacity: 0.5;
}
.carousel-indicators .active {
  opacity: 1;
  background-color: var(--text-secondary); 
}
.hero-section nav
{
  width: 100%;
}
.hero-section .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes content top & bottom */
}
.hero-section .row:first-child {
  flex: 1;
  align-items: center; /* vertical center */
}
.logo-slider {
  overflow: hidden;
  position: relative;
}
.logo-track {
  display: flex;
  gap: 150px;
  width: max-content;
  animation: scroll 20s linear infinite;
}
.logo-slider 
{
  padding: 10px 0;
}
.logo-track img {
  height: 50px;
  opacity: 0.8;
  transition: 0.3s;
}
.logo-track img:hover {
  opacity: 1;
  transform: scale(1.1);
}
@keyframes scroll {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(-50%);
  }
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--text-dark) 0%, #0000004d 60%, var(--bg-color-primary) 100%);
  z-index: 1;
  pointer-events: none; 
}
.hero-section .container {
  position: relative;
  z-index: 2;
}
.hero-title {
  font-size: 2rem;
  font-weight: 600;
}
.stats
{
  padding: 25px 0;
}
.stats h3 {
  font-size: 36px;
    line-height: 40px;
    font-weight: 400;
    color: var(--text-primary);
}
.stats p {
  font-size: 0.9rem;
  color: var(--text-light-2);
  text-align: center;
  line-height: 1.3;
}
.banner-list
{
  display: flex;
  list-style: none;
  justify-content: space-between;
  padding-left: 0;
  margin-top: 50px;
  flex-wrap: wrap;
  /* gap: 15px; */
}
.banner-list li
{
width: 48%;
}
.banner-list li
{
  display: flex;
  align-items:flex-start;
  flex-direction: column;
}
.banner-list li p
{
  margin: 0 !important;
  padding: 15px 0px;
  text-align: left;
  line-height: 1.2;
  font-size: 16px;
}
.custom-navbar {
  position: relative;
  transition: all 0.3s ease;
  background: var(--bg-color-secondary);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 0;
  margin: 0px auto;
  max-width: 1335px;
  box-shadow: 2px 4px 12px #00000014;
}
/* When scrolled */
.custom-navbar.scrolled {
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1360px;
  /* background: #14161cf2; */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 0px;
  box-shadow: 0 10px 30px #00000080;
  z-index: 999;
}
.light-theme .custom-navbar.scrolled
{
  box-shadow: 2px 4px 12px #00000014;
}
@media (min-width:992px) {
  .navbar-section
  {
    padding: 20px 0 0 0;
  }
  .custom-navbar {
    position: relative;
    transition: all 0.3s ease;
    background: var(--bg-color-secondary);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 45px;
    margin: 0px auto;
    max-width: 1335px;
    box-shadow: 2px 4px 12px #00000014;
  }
  /* When scrolled */
  .custom-navbar.scrolled {
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1360px;
    background: var(--bg-color-secondary);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 0px;
    box-shadow: 0 10px 30px #00000080;
    z-index: 999;
  }
  .pill-wrapper {
    border-radius: 100px;
    padding: 10px !important;
}
}
.nav-link {
  font-size: 14px;
  opacity: 0.85;
  transition: 0.3s;
}
.nav-link:hover {
  opacity: 1;
}
.navbar-brand small {
  font-size: 10px;
}
.navbar-toggler {
  border: none;
}
section
{
  padding: 45px 0;
}
#awardCarousel  .carousel-item img
{
max-height: 120px;
}
@media(min-width: 768px)
{
section
{
  padding: 45px 0;
}
.hero-img {
  margin-top: 30px;
  transform: none;
}
.hero-btn
{
margin-top: 15px;
/* padding: 10px 25px; */
}
.stats
{
width: 100%;
}
.banner-list li
{
  display: flex;
  align-items:center;
  flex-direction: row;
}
.banner-list li p
{
padding: 0 0 0 10px;
}
}
@media(min-width:992px)
{
  .custom-navbar.scrolled
{
top: 10px;
border-radius: 50px;
}
  .banner-list
{
flex-wrap: nowrap;
}
#awardCarousel  .carousel-item img
{
/* max-height:fit-content; */
width: 55px;
    height: auto;
    object-fit: contain;
}
.hero-section
{
/* background-size: 1000px auto; */
background-position: bottom bottom;
}
/* .hero-section .container
{
  padding: 0 56px;
} */
}
section.details
{
  background-color: var(--bg-color-secondary);
}
section.details .label
{
display: inline-block;
  padding: 5px 15.5px;
  border: 1px solid #cfdae1;
  border-radius: 100px;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-light-2);
  /* margin-bottom: 44px; */
}
section.details .card
{
  margin: 20px 0;
  border: none !important;
  padding: 15px;
}
section.details .card.card-grey
{
  background-color: var(--bg-color-primary);
}
section.details .card h2
{
  color: var(--text-dark);
  font-size: 30px;
  line-height: 44px;
  font-weight: 400;
  text-align: left;
}
/* .light-theme section.details .card h2
{
  color: var(--text-dark);
} */
section.details .card ul
{
  list-style: none;
  padding-left: 0;
}
section.details .card ul li
{
line-height: 1.3;
margin-bottom: 10px;
}
section.details .card ul.d-card-flex
{
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: 25px;
  gap: 15px;
}
section.details .card ul.d-card-flex li
{
  margin: 0 10px;
  line-height: 1.3;
}
section.details .card ul.d-card-flex li:last-child
{
  margin-right: 0;
}
section.details .card ul.d-card-flex li:first-child
{
  margin-left: 0;
}
@media(min-width: 768px)
{
section.details .card
{
  padding: 25px;
  margin: 50px 0;
}
section.details .card h2
{
  font-size: 56px;
  line-height: 68px;
}
}
Section.assets
{
  background-color: var(--bg-color-primary);
}
section.assets h1 
{
  background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-light-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
section.assets ul
{
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
section.assets  ul li
{
  margin:0 20px;
}
section.assets  ul li:first-child
{
  margin-left: 0;
}
section.assets  ul li:last-child
{
  margin-right: 0;
}
section.assets  ul li .count
{
  background: linear-gradient(180deg, #ff564b 0%, var(--element-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 40px;
  line-height: .93;
  font-weight: 500;
}
section.assets  ul li h5
{
  color: #7d8387;
  font-size: 16px;
  line-height: 20px;
}
/* Layout box */
/* .custom-tabs {
  background: #1a1d24;
  padding: 30px;
  border-radius: 20px;
} */
 /* 1. Reset Bootstrap Defaults */
.custom-tabs .tab-pane.fade {
  display: none;
  opacity: 1 !important;
  transition: none !important;
}
.custom-tabs .tab-pane.active {
  display: block !important;
}
/* 2. The Zoom-Out Animation */
.tab-pane.active .main-img {
  animation: cinematicZoomOut 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}
@keyframes cinematicZoomOut {
  0% {
      opacity: 0;
      transform: scale(1.25); /* Starts zoomed in */
      filter: blur(10px) brightness(1.5); /* Starts blurry and bright */
  }
  100% {
      opacity: 1;
      transform: scale(1); /* Settles to normal size */
      filter: blur(0) brightness(1);
  }
}
/* 3. Text Reveal (Slide Up & Fade) */
.tab-pane.active h4, 
.tab-pane.active ul {
  animation: textFocus 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes textFocus {
  0% {
      opacity: 0;
      transform: translateY(20px);
      filter: blur(5px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
  }
}
/* 4. Thumbnail "Active" Glow */
.custom-pills .nav-link {
  transition: all 0.4s ease;
  border-radius: 12px;
  border: 1px solid transparent;
}
.custom-pills .nav-link.active {
  background: #ffffff !important;
  border-color: #1d8fe1 !important;
  box-shadow: 0 10px 25px rgba(29, 143, 225, 0.12);
  transform: scale(1.05);
}
/* Left thumbnails */
section.assets .custom-pills .nav-link {
  background: #2a2e38;
  margin-bottom: 15px;
  padding: 8px;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: 0.3s;
  text-align: center;
}
.light-theme section.assets .custom-pills .nav-link
{
  background-color: var(--bg-color-secondary);
  box-shadow: 2px 4px 12px #00000014;
}
section.assets .custom-pills .nav-link.active {
  border: 2px solid var(--element-primary);
}
/* Thumbnail images */
section.assets .nav-link
{
  width: 150px;
}
section.assets .thumb-img {
  /* max-height: 150px; */
  width: 100px;
  border-radius: 10px;
}
/* Right preview */
section.assets .preview-box {
  /* background: linear-gradient(135deg, #2a2e38, #1a1d24); */
  background-color: #000000;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
}
.light-theme section.assets .preview-box
{
  background: var(--bg-color-secondary);
  box-shadow: 2px 4px 12px #00000014;
}
/* Main image */
section.assets .main-img {
  max-width: 100%;
  border-radius: 20px;
  height: 500px;
  object-fit: cover;
}
@media (max-width: 768px) {
  section.assets .main-img {
    max-width: 100%;
    border-radius: 20px;
    height: auto;
    object-fit: cover;
  }
}
/* Bottom text (optional like PWA) */
section.assets .nav-pills .nav-link.active, section.assets .nav-pills .show>.nav-link {
  background-color: transparent;
}
.assets .nav-pills .nav-link
{
  max-width: 100%;
  height: 120px;
  overflow: hidden;
  text-align: center;
}
.light-theme .assets .nav-pills .nav-link.active, .light-theme section.assets .nav-pills .show>.nav-link {
  background-color: var(--bg-color-secondary);
  box-shadow: 2px 4px 12px #00000014;
}
section.assets .nav-pills .nav-link.active {
border: 2px solid #0095da4f !important;
}
section.assets .tab-content .tab-pane ul li img
{
  width: 35px;
}
section.assets .tab-content .tab-pane h4
{
  font-weight: 400;
  font-size: 36px;
  line-height: 40px;
  background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-light-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
section.assets h2{
  font-weight: 400;
  font-size: 44px;
  line-height: 52px;
  /* max-width: 60%; */
  background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-light-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 34px;
  text-align: left;
}
section.assets .label
{
  min-width: 1px;
  max-width: 78px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #6ce9a6;
  color: #6ce9a6;
  padding: 0 10px;
  border-radius: 12px;
  margin-bottom: 12px;
}
section.assets .label-content
{
  color: var(--text-primary);
  font-size: 14px;
  line-height: 20px;
}
section.assets .feature-card
{
  background: var(--bg-color-secondary);
  color: var(--text-primary);
  border-radius: 24px;
  padding: 10px 8px;
  margin-bottom: 20px;
}
.light-theme section.assets .feature-card
{
  border: none;
  box-shadow: 2px 4px 12px #00000014;
}
section.assets .feature-card h4
{
  color: var(--text-primary);
  font-size: 24px;
  line-height: 32px;
}
section.assets .feature-card img
{
  margin: 12px 0;
}
section.assets .feature-card ul
{
  list-style: none;
  padding-left: 0;
  flex-direction: column;
}
section.assets .feature-card ul li {
  margin: 0 !important;
  padding-left: 30px;
  position: relative;
}
section.assets .feature-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2328a745' d='M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-464a208 208 0 1 0 0 416 208 208 0 1 0 0-416zm70.7 121.9c7.8-10.7 22.8-13.1 33.5-5.3 10.7 7.8 13.1 22.8 5.3 33.5L243.4 366.1c-4.1 5.7-10.5 9.3-17.5 9.8-7 .5-13.9-2-18.8-6.9l-55.9-55.9c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l36 36 105.6-145.2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  color: red;
}
.business-plan h4
{
  font-size: 36px;
  font-weight: 600;
  line-height: 46px;
  color: var(--text-primary);
}
.business-plan h3
{
  font-size: 42px;
  line-height: 52px;
  white-space: nowrap;
  color: var(--text-primary);
}
.business-plan .plan__button
{
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  background: var(--element-primary);
  border-radius: 40px;
  color: var(--text-primary);
  border: none;
  outline: none;
}
.journey-card 
{
      background: #f2f5f7;
  border-radius: 32px;
  padding: 56px;
  display: grid;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border: 1px solid #f2f5f7;
  padding: 32px 0;
  margin-top: 25px;
}
.journey-card h2
{
  font-size: 36px;
  line-height: 44px;
  font-weight: 400;
  max-width: 451px;
  color: var(--text-primary);
  font-weight: 400;
}
.journey-card .download-btn
{
  gap: 8px;
  padding: 8px 12px;
  border-radius: 48px;
  color: #1b1c1d;
  border: 1px solid #d4d8db;
  font-size: 14px;
  line-height: 20px;
  transition: all .2s ease;
}
section.assets .tab-pane ul
{
  flex-direction: column;
}
section.assets .tab-pane ul li
{
  margin: 0;
}
.journey-card h5
{
  font-size: 24px;
      line-height: 28px;
}
@media(min-width: 768px)
{
  section.assets .tab-pane ul
  {
    flex-direction: row;
  }
  section.assets .tab-pane ul li
  {
    margin: 0 20px;
  }
  section.assets ul
  {
    justify-content: end;
  }
  section.assets .tab-pane ul
  {
    justify-content: center;
  }
  section.assets h2
  {
    font-size: 64px;
  line-height: 72px;
  margin-bottom: 64px;
  }
  section.assets .feature-card
  {
    padding: 40px 28px;
    margin-bottom: 0px;
  }
  section.assets .feature-card img
  {
    margin: 32px 0;
  }
  .business-plan h4
  {
    font-size: 46px;
    font-weight: 600;
    line-height: 56px;
  }
  .business-plan h3
  {
    font-size: 72px;
    line-height: 82px;
  }
  .journey-card
  {
    padding: 112px 0;
    margin-top: 0;
  }
  .journey-card h5
{
  font-size: 25px;
  font-weight: 600;
  line-height: 40px;
}
.journey-card h2
{
  font-size: 56px;
  line-height: 68px;
}
}
@media(min-width: 992px)
{
  section.assets ul
  {
    justify-content: start;
  }
  .journey-card h2
{
  font-size: 64px;
  line-height: 72px;
}
}
/* Picing */
/* The Bottom Line */
.btn-neon-outline {
  position: relative;
  background: transparent;
  color: #00c4cc; /* Your accent color */
  /* border: 1px solid #00c4cc; */
  padding: 0 0 10px 0;
  text-transform: uppercase;
  font-weight: bold;
  transition: all 0.3s ease;
  overflow: hidden;
  border-bottom: 1px solid #00c4cc;
}
.btn-neon-outline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; /* Start from the middle */
  width: 0;
  height: 3px;
  /* background: #00c4cc; */
  /* Neon Glow Effect */
  /* box-shadow: 0 0 10px #00c4cc, 0 0 20px #00c4cc; */
  transition: all 0.4s ease;
}
.btn-neon-outline:hover {
  color: var(--text-primary);
  /* background: rgba(0, 196, 204, 0.1);  */
  /* box-shadow: 0 0 15px rgba(0, 196, 204, 0.4); */
  border-bottom: 2px solid #00c4cc;
}
/* Hover Action for the line */
.btn-neon-outline:hover::after {
  width: 100%;
  left: 0; /* Expand to full width */
}
.pricing 
{
  background-color: var(--bg-color-secondary);
}
.light-theme .pricing
{
  background-color: var(--bg-color-primary);
}
.pricing .list ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.pricing .list ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  opacity: 0.7;
}
/* DEFAULT (optional) */
.pricing  .list ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
}
.pricing .list ul li.A {
  color: var(--text-secondary);       /* normal text */
  opacity: 1;
  font-weight: 500;
}
/* ✅ YES → TICK (GREEN) */
.pricing  .list ul li.A::before {
  background: url("../img/product/tick.png") no-repeat center;
  opacity: 1;
}
/* ❌ NA → CROSS (RED) */
.pricing .list ul li.NA::before {
  background: url("../img/product/close.svg") no-repeat center;
  opacity: 0.7;
}
.pricing .price-card
{
  border-radius: 22px;
  border: 1px solid var(--bg-color-primary);
  background: var(--bg-color-primary);
  padding: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
  color: var(--text-primary);
}
.light-theme .pricing .price-card
{
  background-color: var(--bg-color-secondary);
  box-shadow: 2px 4px 12px #00000014;
}
/* .pricing .price-card.active 
{
  margin-top: 40px;
} */
.pricing .price-card .card-header 
{
  position: absolute;
  top: -40px;
  left: 0;
  margin-bottom: 100px;
  width: 100%;
  z-index: -1;
  padding-bottom: 45px;
  color: var(--element-primary);
  background: #0095da59;
  border-radius: 32px;
}
.pricing .price-card.active, .pricing .price-card:hover
{
  border: 2px solid #0095da4f;
}
.pricing .price-card .heading h4
{
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.pricing .price-card .heading p
{
  font-size: 15px;
}
.pricing .price-card .price
{
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 24px;
  color: var(--element-primary);
}
.get-started .btn 
{
  cursor: pointer;
  border-radius: 64px;
  font-size: 14px;
  line-height: 20px;
  background: var(--element-primary);
  color: var(--text-primary);
  border: none;
  padding: 8px 16px;
  width: fit-content;
  transition: background .2s ease;
  text-transform: inherit;
}
.light-theme .get-started .btn
{
  color: var(--bg-color-secondary);
}
.get-started .btn:hover
{
  background: var(--element-primary);
}
.pricing .title 
{
  font-size: 54px;
  font-weight: 600;
  line-height: 62px;
  text-align: center;
  width: 100%;
  margin-bottom: 50px;
  color: var(--text-primary);
}
@media(min-width: 768px)
{
  .pricing .title 
  {
    font-size: 64px;
    font-weight: 400;
    line-height: 72px;
  }
  .pricing .price-card
  {
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 0;
  }
  .pricing .price-card.active
  {
    margin-top: 0;
  }
}
/* FAQ */
.faq-section {
  margin: 0px auto;
  background: var(--bg-color-primary);
}
.final-cta-section
{
  background: var(--bg-color-secondary);
}
.light-theme .final-cta-section
{
  background-color: var(--bg-color-primary)
}
.faq-section h3{
  font-size: 54px;
  line-height: 62px;
  font-weight: 400;
  margin-bottom: 14px;
  color: var(--text-primary);
}
.faq-section .btn
{
  margin-top: 20px;
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #cdd1d4;
  border-radius: 48px;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all .2s ease;
}
/* Item */
.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
/* Question */
.faq-question {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-primary);
}
/* Number */
.faq-number {
  width: 30px;
  color: #999;
}
/* Icon */
.faq-icon {
  margin-left: auto;
  color: red;
  transition: 0.3s;
}
/* Answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  color: var(--text-secondary);
  padding-left: 30px;
}
/* Active */
.faq-item.active .faq-answer {
  max-height: 100px;
  margin-top: 10px;
}
.faq-item.active .faq-icon {
  transform: rotate(180deg);
}
@media(min-width: 768px)
{
  .faq-section h3{
    font-size: 64px;
    line-height: 72px;
    font-weight: 400;
    margin-bottom: 34px;
  }
}
/* new */
.cryx-hero.svelte-dmrdcl.svelte-dmrdcl {
  position: relative;
  padding: 390px 0 56px;
  background: var(--bg-color-primary);
  overflow: hidden;
  width: 100%;
}
.cryx-hero.svelte-dmrdcl.svelte-dmrdcl::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 60%, var(--bg-color-primary) 100%); */
  background: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(0, 149, 218, 0.05) 100%);
  /* background: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(0, 0, 0, 1) 100%); */
  z-index: 1;
  pointer-events: none; /* 🔥 FIX */
}
/* .cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  top: -129px;
  left: -13px;
} */
 /* The main container */
.cryx-hero__background.svelte-dmrdcl {
  position: absolute;
  top: -129px;
  left: -13px;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible; /* Changed from hidden so the floating/shadows show */
}
/* Base style for every picture element inside the background */
.cryx-hero__background.svelte-dmrdcl picture {
  position: absolute;
  display: block;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5));
}
/* 1. Desktop (Base Layer) */
.cryx-hero__background.svelte-dmrdcl picture:nth-child(1) {
  z-index: 1;
  width: 50%;
  top: 200px;
  left: 45%;
  /* PRE-LOAD STATE: Hidden and pushed up */
  opacity: 0;
  transform: translateX(-35%);
  animation: 
        fallCenter 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        floatCenter 9s ease-in-out infinite 1.2s;
}
/* 2. Tablets (Middle Layer) */
.cryx-hero__background.svelte-dmrdcl picture:nth-child(2) {
  z-index: 2;
  width: 35%;
  top: 280px;
  right: 25%;
  /* PRE-LOAD STATE: Hidden and pushed up */
    opacity: 0;
  transform: translateX(40%);
  position: absolute;
  animation: 
        fallSide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.2s,
        floatSide 6s ease-in-out infinite 1.4s;
}
/* 3. Mobile (Top Layer) */
.cryx-hero__background.svelte-dmrdcl picture:nth-child(3) {
  z-index: 3;
  width: 15%;
  bottom: 30%;
  right: 20%;
  /* PRE-LOAD STATE: Hidden and pushed up */
  opacity: 0;
  transform: translate(30%, 50%);
  position: absolute;
  animation: 
        fallSide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s,
        floatSide 3s ease-in-out infinite 1.6s;
}
@media(min-width: 1923px)
{
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3)
  {
    bottom: 18% !important;
  }
}
/* @media (min-width: 768px) and (max-width: 1920px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3) {
      bottom: 38% !important;
  }
} */
/* --- TABLET RESPONSIVE (1024px and below) --- */
@media screen and (max-width: 1024px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(1) {
      width: 70%; /* Desktop grows a bit for better visibility */
      top: 150px;
      left: 50%;
  }
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(2) {
      width: 45%;
      top: 250px;
      right: 5%;
  }
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3) {
      width: 20%;
      bottom: 20%;
      right: 10%;
  }
}
/* --- MOBILE RESPONSIVE (768px and below) --- */
@media screen and (max-width: 768px) {
  /* Main Background Container adjustments */
  .cryx-hero__background.svelte-dmrdcl {
      top: 0; /* Pull up for smaller headers */
      left: 0;
  }
  .cryx-hero__background.svelte-dmrdcl picture {
    position: absolute;
    display: block;
    filter: drop-shadow(0 8px 4px rgba(0,0,0,0.5));
  }
  /* 1. Desktop - Now acts as the main background image */
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(1) {
      width: 70%; 
      top: 40px;
      left: 40%;
      /* No need to change the animation, it will follow the new top/left */
  }
  /* 2. Tablet - Move it so it doesn't cover the main text too much */
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(2) {
      width: 65%;
      top: 45px;
      right:35px;
      z-index: 2;
  }
  /* 3. Mobile - Scale it down and tuck it in the corner */
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3) {
      width: 25%;
      bottom: 60%;
      right: 15%;
      z-index: 3;
      animation: 
      fallSide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s,
      floatSide 6s ease-in-out infinite 1.6s;
  }
}
@media (min-width: 769px) and (max-width: 899px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3)
  {
    bottom: 45%;
  }
}
@media (min-width: 900px) and (max-width: 999px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3)
  {
    bottom: 40%;
  }
}
@media (min-width: 1000px) and (max-width: 1099px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3)
  {
    bottom: 50%;
  }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3)
  {
    bottom: 50%;
  }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3)
  {
    bottom: 45%;
  }
}
@media (min-width: 1300px) and (max-width: 1399px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3)
  {
    bottom: 45%;
  }
}
@media (min-width: 1400px) and (max-width: 1500px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3)
  {
    bottom: 40%;
  }
}
/* --- SMALL PHONE FIX (480px and below) --- */
@media screen and (max-width: 480px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(1) {
      width: 80%; /* Full width on tiny screens */
      top: 80px;
  }
  /* Hide the Tablet on very small screens to keep it clean, or scale it tiny */
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(2) {
      width: 75%;
      top: 86px;
  }
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(3) {
      width: 25%;
      bottom: 75%;
      animation: 
      fallSide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s,
      floatSide 6s ease-in-out infinite 1.6s;
  }
}
/* For the centered Desktop - preserves translateX(-50%) */
@keyframes fallCenter {
  0% { opacity: 0; transform: translate(-50%, -500px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes floatCenter {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -20px); }
}
/* For Tablet and Mobile - simple Y-axis movement */
@keyframes fallSide {
  0% { opacity: 0; transform: translateY(-00px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes floatSide {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
/* Ensure the images fill the picture containers */
.cryx-hero__background.svelte-dmrdcl img {
  width: 100%;
  height: auto;
}
.cryx-hero.svelte-dmrdcl .container-main.svelte-dmrdcl {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 56px;
}
.container {
  width: 100%;
  max-width: 1328px;
  margin: 0 auto;
  position: relative;
}
.cryx-hero__container.svelte-dmrdcl.svelte-dmrdcl {
  position: relative;
  z-index: 1;
}
.cryx-hero__left.svelte-dmrdcl.svelte-dmrdcl {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
}
.cryx-hero__title.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 64px;
  line-height: 72px;
  max-width: 900px;
  font-weight: 500;
  letter-spacing: -3px;
  /* Create a background that has the blue gradient AND a white shine stripe */
  background: linear-gradient(
      to right, 
      #0077b6 0%, 
      #0077b6 40%, 
      #ffffff 50%, 
      #0077b6 60%, 
      #0077b6 100%
  );
  /* Make the background size 200% so we can slide the shine across */
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Apply the shine animation: 3 seconds long, infinite loop */
  animation: textShine 8s linear infinite;
}
/* Shine Animation Keyframes */
@keyframes textShine {
  0% {
      background-position: 200% center;
  }
  100% {
      background-position: -200% center;
  }
}
.cryx-hero__subtitle.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-light-2);
  margin-bottom: 16px;
  max-width: 700px;
}
.cryx-hero__button.svelte-dmrdcl {
  position: relative; /* Required for the shine positioning */
  overflow: hidden;    /* Required to clip the shine to the button shape */
  padding: 8px 16px;
  background: var(--element-primary);
  font-weight: 450;
  color: var(--text-primary);
  border: none;
  border-radius: 1000px;
  font-size: 14px;
  line-height: 20px;
  width: fit-content;
  cursor: pointer;
  transition: background .2s ease;
}
.light-theme .cryx-hero__button.svelte-dmrdcl
{
  color: var(--bg-color-secondary);
}
/* The Shine Element */
.cryx-hero__button.svelte-dmrdcl::before {
  content: ''; 
  position: absolute;
  right: 18px;
  top: 50%;
  width: 14px; /* Icon size */
  height: 14px;
  background-color: #ffffff;
  
  /* Using the SVG as a mask so it changes color with the background-color property */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M535.1 342.6C547.6 330.1 547.6 309.8 535.1 297.3L375.1 137.3C362.6 124.8 342.3 124.8 329.8 137.3C317.3 149.8 317.3 170.1 329.8 182.6L467.2 320L329.9 457.4C317.4 469.9 317.4 490.2 329.9 502.7C342.4 515.2 362.7 515.2 375.2 502.7L535.2 342.7zM183.1 502.6L343.1 342.6C355.6 330.1 355.6 309.8 343.1 297.3L183.1 137.3C170.6 124.8 150.3 124.8 137.8 137.3C125.3 149.8 125.3 170.1 137.8 182.6L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M535.1 342.6C547.6 330.1 547.6 309.8 535.1 297.3L375.1 137.3C362.6 124.8 342.3 124.8 329.8 137.3C317.3 149.8 317.3 170.1 329.8 182.6L467.2 320L329.9 457.4C317.4 469.9 317.4 490.2 329.9 502.7C342.4 515.2 362.7 515.2 375.2 502.7L535.2 342.7zM183.1 502.6L343.1 342.6C355.6 330.1 355.6 309.8 343.1 297.3L183.1 137.3C170.6 124.8 150.3 124.8 137.8 137.3C125.3 149.8 125.3 170.1 137.8 182.6L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7z'/%3E%3C/svg%3E") no-repeat center;
  
  transform: translateY(-50%) translateX(15px); 
  opacity: 0;
  /* Smooth transition for the icon itself */
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.cryx-hero__button.svelte-dmrdcl::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Start far to the left */
  width: 100%;
  height: 100%;
  background: linear-gradient(
      120deg, 
      transparent, 
      rgba(255, 255, 255, 0.4), 
      transparent
  );
  transition: all 0.6s translateY; /* Speed of the sweep */
}
.cryx-hero__button.svelte-dmrdcl:hover {
  padding-right: 36px; /* Create space for the arrow */
  background: var(--element-primary);
}
.cryx-hero__button.svelte-dmrdcl:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0); /* Arrow slides in */
}

.cryx-hero__button.svelte-dmrdcl:hover::after {
  left: 150%; /* Shine sweeps across */
}
/* Hover Trigger */
.cryx-hero__button.svelte-dmrdcl:hover::after {
  left: 150%; /* Sweep all the way to the right */
  transition: all 0.6s ease;
}
/* Optional: Slight darken on hover to make shine pop */
.cryx-hero__button.svelte-dmrdcl:hover {
  background: var(--element-primary);
}
.cryx-hero__features.svelte-dmrdcl.svelte-dmrdcl {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-top: 35px;
  padding-bottom: 66px;
  margin-bottom: 39px;
  border-bottom: 1px solid #464646;
}
.cryx-hero__feature.svelte-dmrdcl.svelte-dmrdcl {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cryx-hero__right.svelte-dmrdcl.svelte-dmrdcl {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 200px;
  z-index: 15;
  width: fit-content;
  max-width: 130px;
  top: -250px;
  right: -16.5px;
}
/* .cryx-hero__stats.svelte-dmrdcl.svelte-dmrdcl {
  display: flex;
  flex-direction: column;
  gap: 48px;
} */
/* Apply this to the parent of the stats sidebar */
.hero-container-selector { 
  display: flex;
  align-items: center; /* This centers the children vertically */
  justify-content: space-between; /* Keeps the sidebar on the far right */
}
/* Your existing class with the added centering fix */
.cryx-hero__stats.svelte-dmrdcl.svelte-dmrdcl {
  display: flex;
  flex-direction: column;
  gap: 75px;
  margin-top: auto;   /* These two lines ensure it stays centered */
  margin-bottom: auto; /* if the parent height is larger than the content */
  text-align: right;   /* Keeps the text aligned like the image */
}
.cryx-hero__stat.svelte-dmrdcl.svelte-dmrdcl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cryx-hero__stat-value.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 30px;
  line-height: 36px;
  font-weight: 400;
  color: var(--text-primary);
}
.cryx-hero__stat-label.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--text-light-2);
  max-width: 81px;
  text-align: center;
}
.cryx-hero__featured.svelte-dmrdcl.svelte-dmrdcl {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.cryx-hero__featured-label.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #525659;
}
.cryx-hero__featured-logos-wrapper.svelte-dmrdcl.svelte-dmrdcl {
  width: 100%;
  overflow: hidden;
  height: 85px;
  position: relative;
  display: flex;
  align-items: center;
}
.cryx-hero__featured-logos.svelte-dmrdcl.svelte-dmrdcl {
  display: flex;
  align-items: center;
  gap: 100px;
  animation: svelte-dmrdcl-marquee 20s linear infinite;
  width: fit-content;
}
.cryx-hero__feature-text.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text-primary);
}
@media (max-width: 480px) {
  .cryx-hero.svelte-dmrdcl.svelte-dmrdcl {
    padding: 287px 0 43px;
}
.cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
  top: -595px;
  left: 0;
}
.cryx-hero.svelte-dmrdcl .container-main.svelte-dmrdcl {
  padding: 0 24px;
}
.cryx-hero__container.svelte-dmrdcl.svelte-dmrdcl {
  padding: 0;
}
.cryx-hero__feature-icon.svelte-dmrdcl.svelte-dmrdcl {
  width: 24px;
  height: 24px;
}
.cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
  top: -595px ;
  left: 0;
}
}
@media (max-width: 720px)
{
  .cryx-hero.svelte-dmrdcl.svelte-dmrdcl {
    padding: 276px 0 44px !important;
}
.cryx-hero__awards.svelte-dmrdcl.svelte-dmrdcl {
  display: none;
}
.cryx-hero__feature.svelte-dmrdcl.svelte-dmrdcl {
  max-width: 200px !important;
}
.cryx-hero.svelte-dmrdcl.svelte-dmrdcl::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 10%, var(--bg-color-primary) 100%) !important; */
  background: none;
  z-index: 1;
  pointer-events: none;
}
.cryx-hero__title.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 36px !important;
  line-height: 44px !important;
  max-width: 406px;
}
  .cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
    /* top: -750px !important;
    left: -95px !important; */
    top: -45px !important;
    left: 40px !important;
}
.cryx-hero__container.svelte-dmrdcl.svelte-dmrdcl {
  display: flex;
  flex-direction: column;
  padding: 11px 0 0;
}
.cryx-hero__left.svelte-dmrdcl.svelte-dmrdcl {
  display: contents;
}
.cryx-hero__subtitle.svelte-dmrdcl.svelte-dmrdcl {
  order: 2;
  margin-bottom: 24px !important;
}
.cryx-hero__button.svelte-dmrdcl.svelte-dmrdcl {
  order: 3;
  margin-bottom: 15px;
  font-size: 12px;
  line-height: 16px;
  padding: 8px 12px;
}
.btn.cryx-hero__button.svelte-dmrdcl.svelte-dmrdcl
{
  margin-bottom: 0 !important;
}
.cryx-hero__features.svelte-dmrdcl.svelte-dmrdcl
 {
        flex-wrap: wrap;
        order: 5;
        margin-top: 2px;
        column-gap: 28px;
        row-gap: 36px;
        padding-bottom: 26px;
        align-items: center;
    }
    .cryx-hero__features.svelte-dmrdcl.svelte-dmrdcl {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 43px;
      margin-top: 40px;
      gap: 57px;
  }
  .cryx-hero__feature.svelte-dmrdcl.svelte-dmrdcl {
    width: calc(50% - 16px);
    flex: 0 0 calc(50% - 16px);
    max-width: none;
    gap: 16px;
}
.cryx-hero__feature.svelte-dmrdcl.svelte-dmrdcl {
  max-width: 119px;
}
.cryx-hero__featured.svelte-dmrdcl.svelte-dmrdcl
 {
        order: 6;
    }
    .cryx-hero__right.svelte-dmrdcl.svelte-dmrdcl {
      position: static;
      order: 4;
      max-width: 100%;
      width: 100%;
      align-items: stretch;
      margin-bottom: 34px;
  }
  .cryx-hero__stats.svelte-dmrdcl.svelte-dmrdcl {
    margin-top: -10px;
    gap: 15px;
}
.cryx-hero__stats.svelte-dmrdcl.svelte-dmrdcl {
  /* flex-direction: row;
  gap: 24px;
  justify-content: space-between;
  width: 100%; */
  /* Switch from flex to grid */
  display: grid;
  /* Create exactly 2 columns of equal width */
  grid-template-columns: repeat(2, 1fr);
  /* Adjust spacing between items */
  gap: 32px 24px; 
  width: 100%;
  text-align: left; /* Align text to match your image style */
  padding: 0 15px; /* Add slight padding so it doesn't hit screen edges */
}
.cryx-hero__stat.svelte-dmrdcl.svelte-dmrdcl {
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
}
.cryx-hero__stat-label.svelte-dmrdcl.svelte-dmrdcl {
  text-align: left;
  max-width: none;
}
.cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
  top: -373px;
  left: -21px;
}
.cryx-hero__features.svelte-dmrdcl.svelte-dmrdcl {
  flex-wrap: wrap;
  order: 5;
  margin-top: 2px;
  column-gap: 28px;
  row-gap: 36px;
  padding-bottom: 26px;
  align-items: center;
}
}
@media (max-width: 1023px) {
    .cryx-hero__title.svelte-dmrdcl.svelte-dmrdcl {
        font-size: 36px;
        line-height: 44px;
        max-width: 406px;
    }
    .cryx-hero__subtitle.svelte-dmrdcl.svelte-dmrdcl {
      font-size: 14px;
      line-height: 20px;
      max-width: 506px;
      margin-bottom: 4px;
  }
  .cryx-hero__feature.svelte-dmrdcl.svelte-dmrdcl {
    max-width: 150px;
}
.cryx-hero__stat-value.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 22px;
  line-height: 26px;
}
.cryx-hero__feature-text.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 14px;
  line-height: 20px;
}
.cryx-hero__title.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 36px !important;
  line-height: 44px !important;
  max-width: 406px;
}
}
@media(max-width: 1024px)
{
  .cryx-hero.svelte-dmrdcl.svelte-dmrdcl {
    padding: 421px 0 56px;
}
  .cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
    top: -499px;
    left: 44px;
}
.cryx-hero.svelte-dmrdcl .container-main.svelte-dmrdcl {
  padding: 0 32px;
}
.cryx-hero__title.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 36px;
  line-height: 44px;
  max-width: 550px;
}
.cryx-hero__title.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 56px;
  line-height: 68px;
}
.cryx-hero__features.svelte-dmrdcl.svelte-dmrdcl {
  padding-bottom: 49px;
}
.cryx-hero__feature.svelte-dmrdcl.svelte-dmrdcl {
  flex-direction: column;
  align-items: flex-start;
}
.cryx-hero__stat.svelte-dmrdcl.svelte-dmrdcl {
  gap: 0;
}
.cryx-hero__stat-value.svelte-dmrdcl.svelte-dmrdcl {
  font-size: 22px;
  line-height: 26px;
}
.cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
  /* top: -499px; */
  top: 0;
  left: 44px;
}
}
@media (max-width: 1366px) {
  .cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
      left: -124px;
  }
  .cryx-hero.svelte-dmrdcl .container-main.svelte-dmrdcl {
    padding: 0 40px;
}
.cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl {
  /* left: -124px; */
  left: 0;
}
}
.btn-ghost {
  background: #ffffff;
  color: var(--element-primary);
  border: 1.5px solid var(--element-primary);
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block; 
  border-radius: 1000px;
  font-size: 14px;
  line-height: 20px;
  width: fit-content;
}
.btn-ghost:hover {
  background: rgba(0, 149, 218, 0.1); 
  border-color: var(--element-primary);;
  color: var(--text-primary);
  box-shadow: 0 0 15px rgba(0, 149, 218, 0.2);
  transform: translateY(-2px);
}
/* Testinomonials */
.testimonial-slider-section{
  background-color: var(--bg-color-primary);
}
.slider-viewport {
  width: 100%;
  overflow: hidden;
  /* padding: 40px 0; */
  perspective: 1500px; /* Adds 3D depth */
}
.testimonial-track {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  gap: 4%; /* Space between cards */
}
.testi-slide {
  flex: 0 0 48%; /* Shows exactly 2 cards on desktop */
  background: var(--bg-color-secondary); 
  backdrop-filter: blur(20px);
  /* border: 1px solid var(--element-primary); */
  border-radius: 20px;
  padding: 40px;
  /* ANIMATION STATE */
  opacity: 0.5;
  transform: scale(0.9) rotateY(10deg);
  filter: blur(4px);
  transition: all 0.8s ease;
}
/* Active Class for Visible Cards */
.testi-slide.is-active {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
  filter: blur(0);
  /* border-color: var(--element-primary); */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.light-theme .testi-slide.is-active 
{
  box-shadow: none;
  border: 1px solid #0095da4f;
  box-shadow: 2px 4px 12px #00000014;
}
.user-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.user-profile img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--element-primary);
}
.user-profile h5{
  color: var(--element-primary);
  line-height: 10px;
}
.user-profile p
{
  margin-bottom: 0;
}
p.quote { color: var(--text-secondary);}
/* Mobile: Show only 1 card */
@media (max-width: 991px) {
  .testi-slide {
      flex: 0 0 100%;
  }
  .testimonial-track { gap: 0; }
}
.slider-nav {
  display: flex;
  gap: 15px;
}
.nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 149, 218, 0.3); /* #134B2F Glass */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 149, 218, 0.1);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.nav-btn:hover {
  background: rgba(255, 40, 43, 0.2);
  border-color: var(--element-primary);
  color: var(--element-primary);
  box-shadow: 0 0 20px rgba(255, 40, 43, 0.2);
  transform: translateY(-2px);
}
.nav-btn:active {
  transform: scale(0.95);
}
/* Metric Callout Styling */
.metric-badge {
  background: rgba(0, 149, 218, 0.1);
  color: #fcfcfc;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 20px;
  display: inline-block;
  border: 1px solid 1px solid rgba(0, 149, 218, 0.5);
}
.light-theme .metric-badge
{
  color: var(--text-dark); 
}
/* Case Study CTA Styling */
.case-study-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--element-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: 0.3s ease;
}
.case-study-link:hover {
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 255, 156, 0.5);
}
/* Client Logos Strip Requirement */
.logo-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  opacity: 0.6;
  flex-wrap: wrap;
  padding: 30px;
  background: #bbbbbb; /* Subdued #134B2F */
  border-radius: 20px;
}
.light-theme .logo-grid
{
  background-color: #ffffff;
  box-shadow: 2px 4px 12px #00000014;
}
.logo-grid img {
  height: 50px;
  /* filter: grayscale(1) invert(1); */
  transition: 0.3s;
}
.logo-grid img:hover {
  filter: none;
  opacity: 1;
}
.light-theme .logo-grid img {
  filter: none;
  opacity: 1;
}
.light-theme .logo-grid
{
  opacity: 1;
}
@media(min-width: 768px)
{
  .logo-grid
  {
    gap: 60px;
  }
}
/* Hpw its work */
.how-it-works-path
{
background-color: var(--bg-color-secondary);
border-bottom: 1px solid #0095da4f;
}
.light-theme .how-it-works-path
{
  background-color : var(--bg-color-primary);
}
.step-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0 50px 0;
}
.step-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 0;
}
.animated-path {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  transition: stroke-dashoffset 2s ease;
}
.steps-grid {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.step-item {
  flex: 0 0 300px;
  background: var(--bg-color-primary); /* #134B2F with transparency */
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 149, 218, 0.5);
  padding: 20px 15px;
  border-radius: 20px;
  transition: all 0.5s ease;
  margin: 0 15px;
}
.light-theme .step-item
{
  box-shadow: 2px 4px 12px #00000014;
  background: var(--bg-color-primary);
}
.step-item h3
{
  color: var(--text-primary);
}
.step-item p
{
  color: var(--text-secondary);
}
/* Step Number Badge */
.step-num-circle {
  width: 70px;
  height:70px;
  background: var(--element-primary);;
  color: #f2f5f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin: -60px auto 20px auto;
  box-shadow: 0 0 20px rgba(0, 149, 218, 0.4);
}
.step-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}
.step-icon img
{
  width: 5rem;
  height: 5rem;
}
.step-item:hover {
  transform: translateY(-10px);
  border-color: var(--element-primary);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
/* Mobile: Stack vertically and hide SVG path */
@media (max-width: 991px) {
  .step-line { display: none; }
  .steps-grid { flex-direction: column; gap: 60px; align-items: center; }
}
@media(min-width: 991px)
{
  .step-item
  {
    margin: 0;
  }
}
/* Lead Generation Form */
.lead-gen-section {
  background-color: var(--bg-color-primary); 
}
.glass-container {
  background: var(--bg-color-secondary); 
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius:20px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}
.light-theme .glass-container
{
  box-shadow: 2px 4px 12px #00000014;
}
/* Part A: Visual Styling */
.demo-visual-panel {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.floating-mockup {
  animation: floating 6s ease-in-out infinite;
  transform-origin: center;
}
/* Part B: Innovative Form Inputs */
.innovative-form .form-control,
.innovative-form .form-select {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--element-primary);
  color: var(--text-primary);
  padding: 15px 20px;
  border-radius: 50px; /* Pill-shaped inputs */
  font-size: 0.95rem;
  transition: all 0.3s ease;
}
.innovative-form .form-control:focus,
.innovative-form .form-select:focus {
  background: rgb(0 149 218 / 5%);
  border-color: var(--element-primary); /* Brand accent green */
  color: var(--text-primary);
  box-shadow: 0 0 15px rgb(0 149 218 / 5%);
}
/* Styled Placeholder Text */
.innovative-form ::placeholder { color: rgba(255, 255, 255, 0.5); }
.light-theme .innovative-form ::placeholder { color: rgba(57, 56, 56, 0.5); }
/* Animation definition */
@keyframes floating {
  0% { transform: translateY(0px) rotate(-1deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(-1deg); }
}
/* Mobile: Stack panels and remove borders */
@media (max-width: 991px) {
  .demo-visual-panel { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .lead-gen-section { padding: 50px 0; }
}
.innovative-dropdown {
  position: relative;
  width: 100%;
  /* margin-top: 20px;  */
}
/* The Main Pill Bar */
.dropdown-selected {
  background: rgb(0 149 218 / 5%);
  border: 1px solid var(--element-primary);
  backdrop-filter: blur(15px);
  border-radius: 50px; /* Pill shape */
  padding: 14px 25px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.light-theme .dropdown-selected
{
  color: #0077b680;
}
/* The Pop-out Menu (This is what you wanted to finetune) */
.dropdown-menu-list {
  position: absolute;
  top: 100%; /* Sits below the pill */
  left: 0;
  right: 0;
  background: var(--bg-color-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px; /* Rounded corners for the list */
  margin-top: 12px; /* THE SPACE TO TOP you requested */
  padding: 10px 0;
  list-style: none;
  display: none; /* Hidden by default */
  z-index: 1000;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
/* Show menu when active */
.innovative-dropdown.active .dropdown-menu-list {
  display: block;
  /* animation: fadeInDown 0.3s ease forwards; */
}
.dropdown-menu-list li {
  padding: 6px 25px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}
.light-theme .dropdown-menu-list li
{
  color: var(--text-dark);
}
.dropdown-menu-list li:hover {
  background: rgba(255, 40, 43, 0.1);
  color: var(--element-primary);
}
/* Style for the item that is currently selected */
.dropdown-menu-list li.selected {
  background: rgba(255, 40, 43, 0.02); /* Slightly stronger neon tint */
  color: var(--element-primary);
  font-weight: 700;
  position: relative;
}
/* Optional: Add a small checkmark dot for the selected item */
.dropdown-menu-list li.selected::after {
  content: '•';
  position: absolute;
  right: 20px;
  font-size: 1.5rem;
  line-height: 1;
}
.lock-icon-svg {
  fill: var(--element-primary); /* Matches your brand neon green */
  flex-shrink: 0; /* Prevents the icon from squishing on small screens */
  display: inline-block;
}
/* FINAL CTA SECTION */
.cta-glass-card {
  background: var(--bg-color-primary);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.light-theme .cta-glass-card
{
  background-color: var(--bg-color-secondary);
  box-shadow: 2px 4px 12px #00000014;
}
.cta-chart-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('trading-chart-pattern.svg'); /* Abstract visual req */
  opacity: 0.1;
  background-size: cover;
  mix-blend-mode: overlay;
}
.btn-primary-neon {
  background: var(--element-primary);
  color: var(--text-secondary);
  padding: 15px 35px;
  border-radius: 50px;
  font-weight: 700;
  transition: 0.3s;
}
.light-theme .btn-primary-neon
{
  color: var(--bg-color-secondary);
}
.btn-primary-neon:hover {
  background: transparent;
  box-shadow: 0;
  border: 1px solid var(--element-primary);
  color: var(--element-primary);
}
.btn-ghost-white {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-primary);
  padding: 15px 35px;
  border-radius: 50px;
  transition: 0.3s;
}
.light-theme .btn-ghost-white
{
  border:1px solid var(--element-primary);
}
.light-theme .btn-ghost-white:hover
{
  border:1px solid var(--element-primary);
  background-color: var(--element-primary);
  color: var(--bg-color-secondary);
}
.btn-ghost-white:hover {
  background: rgba(255, 40, 43, 0.1);
  border-color: var(--text-primary);
  color: var(--text-primary);
  box-shadow: 0;
}
/* FOOTER STYLING */
.ax1-footer {
  background: var(--bg-color-primary); /* Near black deep background */
}
.footer-links li { margin-bottom: 12px; }
.footer-links li a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: 0.3s;
}
.light-theme .footer-links li a
{
  color: var(--text-dark);
}
.footer-links li a:hover {
  color: var(--element-primary);
  padding-left: 5px;
}
.newsletter-box {
  background: var(--bg-color-secondary);
  border: 1px solid #ffffff0d;
}
.light-theme .newsletter-box
{
  background-color: var(--bg-color-secondary);
  box-shadow: 2px 4px 12px #00000014;
}
.newsletter-input {
  background: #ffffff08;
  border: 1px solid #ffffff1a;
  color: var(--text-primary);
  border-radius: 50px 0 0 50px !important;
}
.light-theme .newsletter-input
{
  border: 1px solid var(--element-primary);
}
.light-theme .newsletter-input::placeholder {
  color: #0077b680;
}
.newsletter-input::placeholder {
  color: #ffffff80;
}
.btn-neon-sm {
  background: var(--element-primary);
  border-radius: 0 50px 50px 0 !important;
  padding: 10px 25px;
  font-weight: 600;
}
.light-theme .btn-neon-sm
{
  color: var(--bg-color-secondary);
}
.btn-neon-sm:hover {
  background: transparent;
}
.social-svg {
  width: 20px;
  height: 20px;
  /* This applies your specific red color */
  fill: var(--element-primary); 
  transition: fill 0.3s ease, transform 0.3s ease;
}
.social-icon-link:hover .social-svg {
  /* Optional: Brighten slightly on hover or keep it consistent */
  fill: var(--element-primary);; 
  transform: scale(1.1);
}
footer:before
{
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, var(--element-primary), #191a1e) !important;
}
.integrations-section {
  background: var(--bg-color-secondary);
}
.light-theme .integrations-section
{
  background: var(--bg-color-primary);
}
.integration-card {
  background: var(--bg-color-primary);
  border: 1px solid #ffffff0d;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.light-theme .integration-card
{
  background-color: var(--bg-color-secondary);
  box-shadow: 2px 4px 12px #00000014;
}
.integration-card:hover {
  background: #0095da40;
  border-color: var(--element-primary);
  transform: translateY(-10px);
  box-shadow: 0 20px 40px #0095da1a;
}
.icon-circle {
  width: 45px;
  height: 45px;
  background: var(--element-primary);
  color: var(--text-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Logo "Pills" styling */
.partner-logo {
  background: rgb(255, 255, 255);
  /* border: 1px solid rgba(255, 255, 255, 0.08); */
  padding: 4px 9px;
  /* border-radius: 50px; */
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 500;
}
/* Glowing CTA Button */
.btn-view-all {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
}
.btn-view-all:hover {
  color: var(--text-primary);
  border-bottom-color: #09c079;
}
/* Highlighting the Blockchain card */
.highlight-card {
  background: var(--bg-color-primary);
}
.logo-cloud img
{
  max-width: 50px;
}
/* Alert Popup */
/* Modal Overlay */
.exit-modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(1, 8, 17, 0.85); /* Deep dark tint */
  backdrop-filter: blur(10px); /* Glass effect */
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
/* Modal Content Box */
.exit-modal-content {
  background: linear-gradient(135deg, #080808 0%, var(--bg-color-primary) 100%);
  border: 1px solid var(--element-primary);
  border-radius: 30px;
  max-width: 500px;
  width: 90%;
  position: relative;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Custom Input Styling */
.form-control-modal {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 15px 25px;
  color: var(--text-primary);
  width: 100%;
}
.form-control-modal:focus {
  border-color: #09c079;
  background: rgba(0, 255, 156, 0.05);
  outline: none;
}
/* Red High-Contrast Button */
.btn-modal-submit {
  background: var(--element-primary);
  color: var(--text-primary);
  border: none;
  border-radius: 50px;
  padding: 15px;
  font-weight: 700;
  transition: 0.3s;
}
.btn-modal-submit:hover {
  background: var(--element-primary);
  transform: translateY(-2px);
}
.modal-close-btn {
  position: absolute;
  top: 20px; right: 25px;
  background: none; border: none;
  color: rgba(255,255,255,0.5);
  font-size: 30px; cursor: pointer;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Sticky Bar Container */
.mobile-sticky-bar {
  position: fixed;
  bottom: -100px; /* Start hidden below screen */
  left: 0;
  width: 100%;
  height: 70px;
  background:linear-gradient(
    90deg, var(--bg-color-primary) 0%, #272a33ad 100%);
  border-top: 1px solid var(--element-primary);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  z-index: 9998;
  transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: none; /* Hidden by default for desktop */
}
.light-theme .mobile-sticky-bar
{
  background:#ffffff;
}
/* CTA Button inside bar */
.btn-floating-cta {
  background: var(--element-primary); /* Your high-contrast red */
  color: var(--text-primary);
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 15px var(--element-primary);
}
.text-neon { color: #09c079; }
.extra-small { font-size: 11px; }
/* Show only on mobile devices */
@media (max-width: 767px) {
  .mobile-sticky-bar {
      display: block;
  }
}
/* Animation class added by JS */
.mobile-sticky-bar.visible {
  bottom: 0;
}
/* Features Secrion */
.features-flow-layout {
  background-color: var(--bg-color-primary);
  position: relative;
  overflow: hidden;
}
.flow-wrapper {
  position: relative;
}
/* Central Line - Desktop Only */
@media (min-width: 768px) {
  .flow-wrapper::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, transparent, var(--element-primary), #e02427, transparent);
      transform: translateX(-50%);
      z-index: 1;
  }
}
/* Icon Node Styling */
.node-circle {
  width: 60px;
  height: 60px;
  background: var(--bg-color-primary);
  border: 2px solid var(--element-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--element-primary);
  font-size: 1.3rem;
  box-shadow: 0 0 20px rgba(0, 149, 218, 0.3);
  position: relative;
  z-index: 5; /* Keeps icon above the line */
  transition: 0.4s;
}
.light-theme .node-circle
{
  border-color: #09c079;
}
.flow-item:hover .node-circle {
  transform: scale(1.1);
  border-color: #09c079;
  color: #09c079;
  box-shadow: 0 0 30px rgba(0, 255, 156, 0.4);
}
.content-box {
  padding: 20px;
}
.node-circl img
  {
    max-width: 75%;
  }
/* Mobile Version: One icon and content per row stack */
@media (max-width: 767px) {
  .flow-wrapper::before {
      display: none; 
  }
  .flow-item {
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      /* padding-bottom: 30px; */
      margin-bottom: 30px;
  }
  .flow-item:last-child {
      border-bottom: none;
  }
  .node-circle {
      width: 50px;
      height: 50px;
      font-size: 1.1rem;
  }
  .node-circl
  {
    text-align: center;
  }
  .node-circl img
  {
    max-width: 25%;
    text-align: center;
  }
  .content-box {
      padding: 10px;
  }
}

/* Center Vertical Line */
@media (min-width: 768px) {
  .flow-wrapper::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, transparent, var(--element-primary), #e02427, transparent);
      transform: translateX(-50%);
      z-index: 1;
  }
}
.node-circle {
  width: 50px;
  height: 50px;
  background: var(--bg-color-primary);
  border: 2px solid #09c079; /* Default Neon Green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #09c079;
  font-size: 1.1rem;
  position: relative;
  z-index: 5;
  transition: 0.3s;
}
/* Positioning nodes to touch the center line on Desktop */
@media (min-width: 768px) {
  .node-left { margin-right: -10px; }
  .node-right { margin-left: -10px; }
}
.node-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px currentColor;
}
/* Mobile Stacking: One Icon then its Content */
@media (max-width: 767px) {
  .flow-wrapper::before { display: none; }
  .node-circle {
      margin: 0 auto !important;
  }
  /* .content-box {
      margin-bottom: 30px;
  } */
  /* Force specific order for mobile: Icon -> Content -> Icon -> Content */
  .order-md-1 { order: 2 !important; } /* Left Content */
  .order-md-2 { order: 1 !important; } /* Left Icon */
  .order-md-3 { order: 3 !important; } /* Right Icon */
  .order-md-4 { order: 4 !important; } /* Right Content */
}
/* Animation Initial States */
.flow-item .col-md-5:nth-child(1) {
  opacity: 0;
  transform: translateX(-50px); /* Start further left */
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.flow-item .col-md-5:nth-child(4) {
  opacity: 0;
  transform: translateX(50px); /* Start further right */
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.flow-item .node-circle {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.6s ease;
}
/* Active State (Triggered by JS) */
.flow-item.reveal-active .col-md-5:nth-child(1),
.flow-item.reveal-active .col-md-5:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
}
.flow-item.reveal-active .node-circle {
  opacity: 1;
  transform: scale(1);
}
/* Optional: Stagger the delay so icons pop after text */
.flow-item.reveal-active .node-circle {
  transition-delay: 0.3s;
}
/* Problem Solution  */
.problem-solution-section {
  background: var(--bg-color-secondary);
  position: relative;
}
.light-theme .problem-solution-section {
  background: var(--bg-color-primary);
}
/* Problem Cards */
.problem-card {
  background: var(--bg-color-primary);
  border: 1px solid #ffffff0d;
  border-radius: 20px;
  padding: 20px;
  height: 100%;
  transition: 0.4s ease;
  position: relative;
}
.light-theme .problem-card
{
  background-color: var(--bg-color-secondary);
  box-shadow: 2px 4px 12px #00000014;
}
.problem-number {
  font-size: 3rem;
  font-weight: 800;
  opacity: 0.1;
  position: relative;
  bottom: 0px;
  padding:01px;
  left: 0px;
  padding-bottom: 10px;
  color: var(--element-primary);
}
.light-theme .problem-number { 
  opacity: 0.3;
  bottom: 0px;
}
.problem-card:hover {
  background: rgba(0, 149, 218, 0.1);
  border-color: rgba(0, 149, 218, 0.8);
  transform: translateY(-10px);
}
.active-danger {
  border-color: rgba(0, 149, 218, 0.2);
  box-shadow: 0 10px 30px rgb(0 149 218 / 10%);
}
/* Solution Bridge */
.solution-bridge {
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0, 149, 218, 0.05) 100%);
  border-radius: 20px;
  border: 1px solid rgba(0, 149, 218, 0.2);
}
.light-theme .solution-bridge
{
  box-shadow: 2px 4px 12px #00000014;
}
.transition-text {
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}
.divider-line {
  width: 80px;
  height: 3px;
  background: var(--element-primary);
}
.text-glow {
  color: #09c079;
  text-shadow: 0 0 15px rgba(0, 255, 156, 0.5);
}
.light-theme .text-glow
{
  color: #dc3545;
  text-shadow: 0 0 15px #dc354580;
}
.cryx-cta-main {
  background: var(--element-primary);
  color: white;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: 0 10px 20px rgb(0 149 218 / 30%);
}
.cryx-cta-main:hover
{
  border: 1px solid var(--element-primary);
  color: var(--element-primary);
}
.text-cyan { color: var(--element-primary); }
/* Animation Part */
/* Initial State for Titles */
.reveal-title {
  opacity: 0;
  transform: translateY(30px); /* Starts slightly lower */
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Active State (triggered by the class your JS adds) */
.reveal-title.reveal-active {
  opacity: 1;
  transform: translateY(0);
}
/* Hero Container - Must have overflow hidden so image doesn't bleed out */
.cryx-hero__background {
  overflow: hidden;
  perspective: 1000px;
}
/* The Image Style */
.cryx-hero__monitor {
  /* Base state: Slightly zoomed in on load */
  transform: scale(0.8); 
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); /* For the initial load zoom */
  will-change: transform;
}
/* Initial Load Class (Triggered by JS) */
.cryx-hero__monitor.loaded {
  transform: scale(1); /* Zoom in depth on load */
}
.mockup-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 250px;
  margin: 50px auto;
  overflow: visible; /* Ensure shadows aren't clipped */
}
.mockup-img {
  position: absolute;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
  /* Combine both animations: fallIn (once) and float (infinite) */
  animation: 
      fallIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards, 
      float 6s ease-in-out infinite 1.2s; /* float starts after fallIn ends */
  opacity: 0; /* Hidden initially */
}
/* Positioning the Desktop (Background) */
.mockup-desktop {
  width: 80%;
  left: 0;
  top: 50px;
  z-index: 1;
}
/* Positioning the Tablet (Middle) */
.mockup-tablet {
  width: 45%;
  right: 17%;
  top: 35px;
  z-index: 2;
  animation-delay: -1s; /* Offset animation timing */
}
/* Positioning the Mobile (Front) */
.mockup-mobile {
  width: 18%;
  right: 5%;
  top: 120px;
  z-index: 3;
  animation-delay: -2s; /* Offset animation timing */
}
/* Floating Animation */
@keyframes float {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-20px);
  }
}
/* Interaction: Hover to separate them further */
.mockup-container:hover .mockup-tablet {
  transform: translate(20px, -30px);
}
.mockup-container:hover .mockup-mobile {
  transform: translate(30px, -40px);
}
.mockup-img {
  position: absolute;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
  /* Combine both animations: fallIn (once) and float (infinite) */
  animation: 
      fallIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards, 
      float 6s ease-in-out infinite 1.2s; /* float starts after fallIn ends */
  opacity: 0; /* Hidden initially */
}
/* Base positions */
.mockup-desktop { width: 100%; left: 0; top: 0px; z-index: 1; }
.mockup-tablet  { width: 42%; right: 15%; top: 80px; z-index: 2; animation-delay: 0.2s, 1.4s; }
.mockup-mobile  { width: 16%; right: 5%; top: 120px; z-index: 3; animation-delay: 0.4s, 1.6s; }
/* 1. Initial Fall-Down Entrance */
@keyframes fallIn {
  0% {
      transform: translateY(-600px) scale(0.8);
      opacity: 0;
  }
  100% {
      transform: translateY(0) scale(1);
      opacity: 1;
  }
}
/* 2. Continuous Floating Idle */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
/* Price New Updated Design  */
.pricing-flip-scene {
  perspective: 2000px;
  height: 600px; /* Ensure this is tall enough for your content */
  width: 100%;
}
.pricing-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.pricing-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  top: 0;
  left: 0;
}
.pricing-back {
  transform: rotateY(180deg);
}
.is-flipped {
  transform: rotateY(180deg);
}
/* Tab Styling */
.pricing-tabs-wrapper {
  display: inline-flex;
  background: rgb(0 149 218 / 26%);
  padding: 6px;
  border-radius: 50px;
}
.pricing-tab {
  border: none;
  padding: 10px 30px;
  border-radius: 40px;
  background: transparent;
  font-weight: 700;
  transition: 0.3s;
  color: #ffffff;
}
.light-theme .pricing-tab
{
  color: #000000;
}
.pricing-tab.active {
  background: var(--element-primary); /* Matches your brand red */
  color: #ffffff;
}
/* Container for the sliding effect */
.pricing-tabs-wrapper {
  display: inline-flex;
  /* background: #f0f0f0; */
  color: #ffffff;
  padding: 6px;
  border-radius: 50px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
}
.pricing-tab {
  border: none;
  padding: 12px 35px;
  border-radius: 40px;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  z-index: 2;
  color: #FFFFFF;
  transition: color 0.4s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* The Active State Text */
.pricing-tab.active {
  color: #fff;
  /* We remove the background-color from .active because the JS will slide a pill behind it */
}
/* Click Animation (Shrink & Grow) */
.pricing-tab:active {
  transform: scale(0.92);
}
/* The Sliding Liquid Pill */
.tab-slider-pill {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  background: var(--element-primary); /* Your brand red */
  border-radius: 40px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
  box-shadow: 0 4px 12px rgba(224, 36, 39, 0.3);
}
/* Banner cu */
.interactive-hero {
  padding: 80px 0;
  overflow: hidden;
}
/* 1. Perspective Container */
.tilt-container {
  perspective: 1500px; 
  display: inline-block;
}
/* 2. The Box that will rotate via JS */
.tilt-box {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out; /* Smooths the mouse movement */
  will-change: transform;
}
/* 3. The Image with its own independent floating animation */
.floating-monitor {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.2));
  /* Existing floating animation */
  animation: simpleFloat 4s ease-in-out infinite;
}
@keyframes simpleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
/* Glass effect that moves slightly faster than the image */
.tilt-glass-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
  transform: translateZ(50px); /* Makes the shine appear to float above the image */
}
/* The actual card inside the flip faces */
.price-card {
  background: rgba(255, 255, 255, 0.08); /* Semi-transparent dark glass */
  backdrop-filter: blur(15px); /* Glass blur */
  -webkit-backdrop-filter: blur(15px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* 3D RIM LIGHT: Makes the edges look like thick glass */
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  /* 3D DEPTH SHADOW */
  box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.4),  /* Soft floor shadow */
      inset 0 0 20px rgba(255, 255, 255, 0.05); /* Inner glow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: translateZ(50px); /* Pushes content forward in 3D space */
}
/* Hover Effect: The card "lifts" higher */
/* .pricing-flip-scene:hover .pricing-card-inner {
  transform: scale(1.02) rotateY(var(--y-rotation, 0deg));
} */
/* Make the list items also feel like they have depth */
.price-card ul li {
  padding: 8px 0;
  transition: 0.3s;
  transform: translateZ(20px); /* Makes text float slightly above the card */
}
/* Highlighting the 'Most Popular' Scale card */
/* .price-card.active {
  background: linear-gradient(145deg, rgba(224, 36, 39, 0.15) 0%, rgba(20, 20, 20, 0.9) 100%);
  border: 1px solid rgba(224, 36, 39, 0.4);
  box-shadow: 0 25px 50px rgba(224, 36, 39, 0.2);
} */
/* 3D Flip for Steps */
/* 1. Setup the Scene */
.step-item {
  perspective: 1000px;
  background: transparent;
  height: 300px; /* Adjust based on your design */
}
.step-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  cursor: pointer;
}
/* 2. The Flip Trigger */
.step-item:hover .step-card-inner {
  transform: rotateX(180deg);
}
/* 3. Common Face Styles */
.step-card-front, .step-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* 4. Back Face Setup */
.step-card-back {
  transform: rotateX(180deg);
  background: rgba(0, 149, 218, 0.15); /* Slightly darker for contrast */
}
/* 5. Innovative Hints */
.flip-hint {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.5;
  margin-top: 15px;
  color: #0095da;
}
/* Ensure glass-card styles don't conflict */
.glass-card {
  background: var(--bg-color-secondary);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: white;
}
.how-it-works-scroll-wrapper {
  position: relative;
  /* height: 250vh;  */
  /* background: transparent; */
}
.sticky-viewport {
  position: sticky;
  top: 0;
  /* height: 100vh; */
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* 3D Card Setup */
.step-item {
  perspective: 1500px;
  height: 350px;
  width: 100%;
}
.step-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}
/* Case 1: Manual Hover Flip */
.step-item:hover .step-card-inner {
  transform: rotateX(180deg);
}
/* Logic for Flipped State */
.step-card-inner.is-flipped {
  transform: rotateX(180deg);
}
.step-card-front, .step-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.step-card-front {
  z-index: 2;
  transform: rotateX(0deg);
}
.step-card-back {
  transform: rotateX(180deg); /* Pre-rotated hidden side */
  background: var(--bg-color-secondary);
  border: 1px solid var(--bg-color-secondary);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  position: relative;
  z-index: 10;
}
.step-line {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
/* --- MOBILE & TABLET SETTINGS (< 1024px) --- */
@media (max-width: 1024px) {
  .how-it-works-scroll-wrapper {
      height: auto !important; /* Disable the long scroll distance */
      padding: 60px 0;
  }
  .sticky-viewport {
      position: relative !important; /* Unlock from top of screen */
      height: auto !important;
      top: 0 !important;
      overflow: visible !important;
  }
  .steps-grid {
      grid-template-columns: 1fr; /* Stack cards vertically */
      gap: 40px;
  }
  .step-item {
      height: 280px; /* Adjust height for mobile */
      max-width: 400px;
      margin: 0 auto;
  }
  /* Disable Hover on Mobile (prevents double-tap issues) */
  .step-item:hover .step-card-inner {
      transform: none;
  }
  /* SVG Line usually looks messy on mobile, hide or flatten it */
  .step-line {
      display: none;
  }
}
/* --- DESKTOP ONLY HOVER --- */
@media (min-width: 1025px) {
  .step-item:hover .step-card-inner {
      transform: rotateX(180deg);
  }
}
@media (max-width: 991px) {
  /* 1. Reset the wrapper and sticky behavior */
  .how-it-works-scroll-wrapper {
      height: auto !important; /* Removes the 250vh scroll distance */
      padding: 40px 0;
  }
  .sticky-viewport {
      position: relative !important;
      height: auto !important;
      top: 0 !important;
      overflow: visible !important;
      display: block !important;
  }
  /* 2. Fix the Card Spacing */
  .steps-grid {
      display: flex !important;
      flex-wrap: wrap !important; /* Allows items to wrap to next line */
        flex-direction: row !important; /* Back to row for side-by-side */
        justify-content: center;
      gap: 30px !important;
      margin-top: 0 !important;
      padding: 0 15px;
  }
  .step-item {
      height: auto !important; /* Let content dictate height */
      min-height: 350px;
      perspective: none !important; /* Kill 3D on mobile to prevent clipping */
  }
  .step-card-inner {
      transform: none !important; /* Disable auto-flip */
      transition: 0.3s !important;
  }
  /* 3. Handle the Flip on Mobile */
  /* Only flip when the 'is-flipped' class is manually toggled by JS click */
  .step-card-inner.is-flipped {
      transform: rotateX(180deg) !important;
  }
  .step-card-front, .step-card-back {
      position: relative !important; /* Stack faces if needed or keep absolute for flip */
  }
  .step-card-back {
      position: absolute !important;
      top: 0;
      left: 0;
  }
  /* 4. Hide the SVG line (it doesn't work vertically) */
  .step-line {
      display: none !important;
  }
}
/* Slider */
.slider-v1 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #28282c;
}
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out;
}
.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}
/* Background Circles */
.circle {
  position: absolute;
  width: 300px;
  height: 300px;
  /* background: linear-gradient(45deg, #868182, #868182); */
  background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
  /* filter: blur(50px); */
  /* opacity: 0.5; */
}
.step2 .circle, .step2 .circle-rt
{
  background-image: linear-gradient(-180deg, #c1c161 0%, #d4d4b1 100%);
  /* background-image: linear-gradient(to right, #c1c161 0%, #c1c161 0%, #d4d4b1 100%); */
}
.step2 .circle-rt::after
{
  background-image: linear-gradient(190deg, #c1c161 0%, #d4d4b1 100%);
}
.circle-lb
{
  width: 700px;
  height: 100%;
  border-radius: 0 50% 50% 0;
  transform: translateX(-100%);
}
/* The Main Rectangle part */
.circle-rt {
  position: absolute;
  top: 0;
  right: 0;
  width: 850px; /* Adjust this to control how much solid red shows on the right */
  height: 100%;
  background-image: linear-gradient(-60deg, #ff5858 0%, #ff5858 100%);
  z-index: 1;
  /* Initial state: hidden off-screen to the right */
  transform: translateX(100%);
  transition: transform 1s ease-out;
}
/* The Rounded "Nose" part */
.circle-rt::after {
  content: '';
  position: absolute;
  top: 0;
  left: -450px; /* Matches the width of this square to create a perfect circle side */
  width: 800px; /* Large width for a big curve */
  height: 100%;
  background-image: linear-gradient(270deg, #ff5858 0%, #f09819 100%);
  border-radius: 50% 0 0 50%; /* Rounded only on the left side */
}
/* Animation trigger */
.active .circle-rt {
  /* Stop at 0 so the rectangle sits perfectly against the right edge */
  /* transform: translateX(0);  */
}
.circle-lb { left: -150px; bottom: 0; transform: translate(0%, 100%); }
.circle-rt { right: 0px; top: -0; transform: translate(100%, -100%); }
.active .circle-lb,
.active .circle-rt { 
  animation: elasticReveal 1.2s forwards cubic-bezier(0.68, -0.6, 0.32, 1.6); 
}
@keyframes elasticReveal {
  to { transform: translateX(0) scale(1); opacity: 1; filter: blur(0px); }
}
/* Initial state adjustment for this animation */
.circle-lb { transform: translateX(-100%) scale(0.8); opacity: 0; filter: blur(10px); }
.circle-rt { transform: translateX(100%) scale(0.8); opacity: 0; filter: blur(10px); }
/* Content Grid */
.slider-v1 .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 80%;
  max-width: 1200px;
  gap: 50px;
  align-items: center;
  color: white;
  z-index: 20;
}
.content-section h1 {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 20px;
  transform: translateY(50px);
  opacity: 0;
}
.content-section p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  transform: translateY(30px);
  opacity: 0;
}
.image-section {
  /* background: radial-gradient(circle at 30% 30%, #ffffff, #e0e0e0);  */
  background: radial-gradient(circle at 30% 30%, #ff585870, #f28f2170);
  border-radius: 50%;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* 3D Badge Shadows */
  /* box-shadow: inset -10px -10px 20px rgba(0,0,0,0.1),  inset 10px 10px 15px rgba(255,255,255,0.8),  0 20px 40px rgba(0,0,0,0.4), 0 10px 10px rgba(0,0,0,0.2); */
    box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.1), inset 10px 10px 15px rgb(0 0 0 / 80%), 0 20px 40px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);
  /* Optional: Add a subtle border to define the edge better */
  /* border: 1px solid rgba(255,255,255,0.5); */
  border: 1px solid rgb(0 0 0 / 50%);
  overflow: visible; /* Changed to visible so shadows don't get cut off */
  transition: all 0.8s ease;
}
.step2 .image-section
{
  background: radial-gradient(circle at 30% 30%, #c1c164, #d0d0a1);
}
/* Add a hover or active tilt effect */
.active .image-section {
  transform: perspective(1000px) rotateX(10deg) rotateY(-5deg);
}
.image-section img {
  /* width: 100%; */
  max-width: 300px;
  border-radius: 20px;
  transform: scale(0.8);
  opacity: 0;
}
/* Active state for the image inside the slider */
.active .image-section img {
  animation: zoomInCenter 0.8s 0.6s forwards;
}
@keyframes zoomInCenter {
  to {
    opacity: 1;
    transform: scale(1); /* Zooms to fit the 80% width centered */
  }
}
/* Active Animations */
.active .content-section h1 { animation: fadeIn 0.8s 0.3s forwards; }
.active .content-section p { animation: fadeIn 0.8s 0.5s forwards; }
.active .image-section img { animation: zoomIn 0.8s 0.6s forwards; }
.step2.active .content-section h1,p { color: #28282c; }
.content-section {
  max-width: 600px;
  padding: 40px;
  /* Glass backing to make text pop against the background */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 20;
}
.content-section h1 {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: #121212; /* Darker for contrast on the light gold */
  letter-spacing: -2px;
  opacity: 0;
}
.content-section p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 35px;
  border-left: 4px solid #8b322c; /* Theme accent line */
  padding-left: 20px;
  opacity: 0;
}
@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  to { opacity: 1; transform: scale(1); }
}
/* Controls */
/* .controls {
  position: absolute;
  bottom: 30px;
  right: 50px;
  z-index: 100;
} */
.controls {
  position: absolute;
  /* Centering vertically on the right side */
  top: 50%; 
  right: 40px; 
  transform: translateY(-50%);
  /* The Magic: Stacks them vertically */
  display: flex;
  flex-direction: column; 
  gap: 15px; 
  z-index: 100;
}
.controls button {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Keep your Glass Effect */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  /* 3D Depth Shadow */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Vertical Hover Animation */
.controls button:hover {
  background: #8b322c; /* Matching your maroon theme */
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(139, 50, 44, 0.6);
}
.explore-btn {
  /* 1. Semi-transparent background */
  background: radial-gradient(circle at 30% 30%, rgba(255, 88, 88, 0.25), rgba(240, 152, 25, 0.25));
  /* 2. The Glass Magic: Blurs whatever is behind the button */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  /* 3. Border that looks like a glass edge (light on top, dark on bottom) */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  /* 4. Layered 3D Shadows */
  box-shadow: 
    inset 4px 4px 6px rgba(255, 255, 255, 0.1), 
    inset -4px -4px 6px rgba(0, 0, 0, 0.1),     
    0 15px 35px rgba(0, 0, 0, 0.3);            
  /* Standard button styling */
  padding: 12px 30px;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: visible;
}
.step2 .explore-btn {
  background: radial-gradient(circle at 30% 30%, #c2c26640, #d1d1a440);
  color: #28282c;
}
/* Hover effect for more "Innovation" */
.explore-btn:hover {
  background: radial-gradient(circle at 30% 30%, #d1d1a440, #c2c26640);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
}
/* banner v05 */
/* .banner-v05
{
  height: 150vh;
} */
 .banner-v05 h1
 {
  font-size: 50px;
  line-height: 1.5;
  background: linear-gradient(
    to right, 
    #0077b6 0%, 
    #0077b6 40%, 
    #ffffff 50%, 
    #0077b6 60%, 
    #0077b6 100%
);
/* Make the background size 200% so we can slide the shine across */
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* Apply the shine animation: 3 seconds long, infinite loop */
animation: textShine 8s linear infinite;
}
/* Shine Animation Keyframes */
@keyframes textShine {
0% {
    background-position: 200% center;
}
100% {
    background-position: -200% center;
}
 }
.banner-image-positioning
{
  position: relative;
  width: 100%;
}
.banner-image-positioning img:nth-child(1)
{
max-width: 800px;
opacity: 0;
transform: translateX(-35%);
animation: 
      fallCenter1 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
      floatSide 9s ease-in-out infinite 1.2s;
}
.banner-image-positioning img:nth-child(2)
{
  position: absolute;
  top: 15%;
  right: 5%;
  opacity: 0;
transform: translateX(-35%);
animation: 
fallSide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.2s,
        floatSide 6s ease-in-out infinite 1.4s;
}
.banner-image-positioning img:nth-child(3)
{
  position: absolute;
  top: 25%;
  right: 10%;
  opacity: 0;
transform: translateX(-35%);
animation: 
fallSide 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.4s,
floatSide 3s ease-in-out infinite 1.6s;
}
@keyframes fallCenter1 {
  0% { opacity: 0; transform: translate(0%, -500px); }
  100% { opacity: 1; transform: translate(-0, 0); }
}
@keyframes floatCenter1 {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(0, 0); }
}
.banner-list{
  display: flex;
}
.banner-list li img
{
  margin-right: 10px;
}
.banner-v05 p
{
  font-size: 16px;
    /* line-height: 20px; */
    font-weight: 400;
}
.logo-slider {
  width: 100%;
  overflow: hidden;
}
/* mobile */
/* Tablet View (iPads/Laptops) */
@media (max-width: 1024px) {
  .banner-image-positioning img:nth-child(1)
  {
    max-width: 700px;
  }
  .banner-image-positioning img:nth-child(2)
  {
    right: 0;
    max-width: 500px;
  }
  .v2 .cryx-hero__stats.svelte-dmrdcl.svelte-dmrdcl
  {
    flex-direction: row;
    justify-content: space-evenly;
    margin: 30px 0;
  }
  .v2 .cryx-hero__stat-label.svelte-dmrdcl.svelte-dmrdcl
  {
    max-width: 100%;
  }
}
/* Mobile View (Phones) */
@media (max-width: 767px) {
  .banner-image-positioning
  {
    padding: 20px 0;
  }
  .banner-image-positioning img, .banner-image-positioning img:nth-child(1)
  {
  max-width: 100%;
  }
  .banner-image-positioning img:nth-child(2)
  {
    max-width: 250px;
    right: -10px;
  }
  .banner-image-positioning img:nth-child(3)
  {
    max-width: 100px;
    right: 0px;
  }
  .banner-v05 h1
  {
    font-size: 35px;
    margin-bottom: 20px;
  }
  .banner-list li
  {
    align-items: center;
    margin-bottom: 15px;
  }
}

/* Button v2 */
.btn-request-demo {
  position: relative;
  background: #007bbd; /* Your base blue */
  color: white;
  padding: 12px 30px;
  border-radius: 50px;
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden; /* Important for the shimmer effect */
  transition: all 0.3s ease;
  cursor: pointer;
}
/* 1. The Shimmer Wipe Effect */
.btn-request-demo::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(30deg);
  transition: none;
  animation: shimmer 4s infinite;
}
@keyframes shimmer {
  0% { left: -60%; }
  20% { left: 120%; }
  100% { left: 120%; }
}
/* 2. The Pulsing Icon */
.demo-icon {
  width: 18px;
  height: 18px;
  animation: iconPulse 2s infinite;
}
@keyframes iconPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(255,255,255,0.8)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
}
/* 3. Hover Effects */
.btn-request-demo:hover {
  background: #006da8;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 123, 189, 0.3);
}
.btn-request-demo:active {
  transform: translateY(0);
}
/* V2 Updates */
/* Define the floating movement */
@keyframes bounce-icon {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  50% {
    /* Height reduced to -10px for a subtle jump */
    transform: translateY(-10px) rotate(3deg); 
    animation-timing-function: ease-in-out;
  }
}
.pricing .card img {
  position: absolute;
  max-width: 100px;
  opacity: 0.7;
}
.pricing .card:hover img {
  opacity: 1;
}
.pricing .card img.top-left {
  transition: opacity 0.3s ease, transform 0.9s ease;
  animation: bounce-icon 2s infinite;
  animation-delay: 2s; 
  pointer-events: none; 
  top: 0%;
  right: 0;
  left: auto;
}
.pricing .card img.bottom-right {
  max-width: 150px;
  opacity: 0.3;
  bottom: 0;
  right: 0;
  animation-delay: 0.5s; 
}
/* --- Tablet View (e.g., iPads) --- */
@media (max-width: 991px) {
  .pricing .card img.top-left {
    max-width: 80px; /* Smaller icons for smaller cards */
    top: 0%;
    right: 0%;
  }
  .pricing .card img.bottom-right {
    max-width: 110px;
    bottom: -5%;
    right: -5%;
  }
}
/* --- Mobile View --- */
@media (max-width: 767px) {
  .pricing .card img.top-left {
    max-width: 100px; /* Significantly smaller to avoid clutter */
    top: 0;
    right: 0;
    left: auto;
  }
  .pricing .card img.bottom-right {
    display: none;
    max-width: 80px;
    bottom: -10px;
    left: -10px;
    right: auto;
    opacity: 0.2; /* Faded more so text remains readable */
  }
  /* Optional: Disable animation on mobile to save battery/performance */
  /* .pricing .card img { animation: none; } */
}
.lock
{
  max-width:50px;
}