/* @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'); */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&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: #f5f5f7;   
  --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; */
  }
}
.crimson-text {
  font-family: "Crimson Text", serif !important;
  
  font-style: normal;
}
*
{
  font-family: "Roboto", sans-serif !important;
}
.text-theme {
  color: var(--text-primary);
}
p
{
line-height: 1.5;
text-align: unset;
}
/* 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;
}
.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;
  right: 15%;
  align-content: flex-end;
    flex-wrap: wrap;
    flex-direction: column;
}
.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;
}
}
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;
} */
/* 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);
  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;
}
/* Bottom text (optional like PWA) */
section.assets .nav-pills .nav-link.active, section.assets .nav-pills .show>.nav-link {
  background-color: transparent;
}
.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 var(--element-primary) !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 var(--element-primary);
}
.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: 32px;
    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: #FFFFFF;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.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)); */
}
.cryx-hero__background h2 span
{
  font-size: 100px;
  color: #0095da;
}
/* 1. Desktop (Base Layer) */
/* .cryx-hero__background.svelte-dmrdcl picture:nth-child(1) {
  z-index: 1;
  width: 60%;
  top: 250px;
  left: 50%;
  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;
} */
.cryx-hero__background.svelte-dmrdcl picture:nth-child(1) {
  z-index: 1;
  width: 45%;
  top: 250px;
  left: 44%;
  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: 50% !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%;
  }
  .mockup-desktop {
    width: 90% !important;
    left: 0;
    top: 0px !important;
    z-index: 1;
}
.mockup-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 150px !important;
  margin: 50px auto;
  overflow: visible;
}
.inner-wrapper p, .products-inner p {
  line-height: 22px;
  text-align: justify;
}
}
/* --- 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;
  }
  .showcase-header h1
  {
    font-size: 60px !important;
  }
  .showcase-header h2 span
  {
    font-size: 30px !important;
  }
  .mockup-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 200px !important;
    margin: 50px auto;
    overflow: visible;
}
  .cryx-hero__background.svelte-dmrdcl picture {
    position: absolute;
    display: block;
    /* filter: drop-shadow(0 8px 4px rgba(0,0,0,0.5)); */
  }
  .cryx-hero.svelte-dmrdcl.svelte-dmrdcl
  {
    height: 40vh;
  }
  /* 1. Desktop - Now acts as the main background image */
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(1) {
      width: 50%; 
      top: 20%;
      left: 25%;
  }
  .products-inner h2
  {
    font-size: 25px;
  }
  .cryx-hero__background h2 span {
    font-size: 40px;
    color: #0095da;
}
  /* 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;
  }
}
/* --- SMALL PHONE FIX (480px and below) --- */
@media screen and (max-width: 480px) {
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(1) {
      width: 70%; /* Full width on tiny screens */
      top: 120px;
      left: 50%;
  }
  .products-inner h2 {
    font-size: 18px;
    margin-bottom: 20px;
}
.cryx-hero__background h2 span {
  font-size: 30px;
  color: #0095da;
}
.cryx-hero.svelte-dmrdcl.svelte-dmrdcl {
  padding: 287px 0 43px;
  height: 60vh;
}
  .cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl
  {
    flex-direction: row;
  }
  /* 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); }
}
/* --- Tablet & Small Laptop Base (Starting Point) --- */
@media (min-width: 769px) and (max-width: 899px) {
  .cryx-hero.svelte-dmrdcl.svelte-dmrdcl
  {
    height: 60vh !important;
  }
  .cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl
  {
    flex-direction: row;
    right: 5%;
  }
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(1) {
    width: 60% !important;
    top: 105px !important;
    left: 50%;
}
.products-inner h2
{
  text-align: center;
}
}
/* --- 900px Range --- */
@media (min-width: 900px) and (max-width: 999px) {
  .cryx-hero.svelte-dmrdcl.svelte-dmrdcl
  {
    height: 60vh;
  }
  .cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl
  {
    flex-direction: row;
    right: 5%;
  }
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(1)
  {
    width: 65%;
    top: 80px;
    left: 50%;
  }
  .products-inner h2
  {
    font-size: 32px;
  }
  .products-inner h2 span
  {
    font-size: 42px;
  }
}
/* --- 1000px Range (Common Small Laptop) --- */
@media (min-width: 1000px) and (max-width: 1099px) {
  .cryx-hero.svelte-dmrdcl.svelte-dmrdcl
  {
    height: 75vh;
  }
  .cryx-hero__background.svelte-dmrdcl.svelte-dmrdcl
  {
    flex-direction: row;
    right: 5% !important;
  }
  .products-inner h2
  {
    text-align: center;
  }
}
/* --- 1100px Range --- */
@media (min-width: 1100px) and (max-width: 1199px) {
  .cryx-hero.svelte-dmrdcl.svelte-dmrdcl
  {
    height: 40vh;
  }
  .cryx-hero__background.svelte-dmrdcl picture:nth-child(1)
  {
    left: 25%;
  }
  .products-inner h2
  {
    font-size: 35px;
  }
  .products-inner h2 span
  {
    font-size: 40px;
  }
}
/* --- 1200px Range (Standard Desktop) --- */
@media (min-width: 1200px) and (max-width: 1299px) {
}
/* --- 1300px Range --- */
@media (min-width: 1300px) and (max-width: 1399px) {
}
/* --- 1400px Range (Large Screen) --- */
@media (min-width: 1400px) and (max-width: 1500px) {
}
/* 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::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 */
}
/* 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;
    height: 55vh;
}
.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(min-width: 1921px)
{
  .cryx-hero.svelte-dmrdcl.svelte-dmrdcl
  {
    height: 50vh;
  }
}
@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: 30px;
  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 var(--element-primary);
  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: 30px;
  transition: all 0.5s ease;
  margin: 0 15px;
}
.light-theme .step-item
{
  box-shadow: 2px 4px 12px #00000014;
  background: var(--bg-color-secondary);
}
.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-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: 40px;
  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: 24px;
  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;
}
/* 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;
  }
  .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: 30px;
  padding: 40px;
  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: absolute;
  top: 20px;
  right: 30px;
  color: var(--element-primary);
}
.light-theme .problem-number { 
  opacity: 0.3;
  top: 10px;
}
.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: 40px;
  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.7); 
  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: 80%; left: 0; top: -50px; 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); }
}
.product-hero-container {
  position: relative;
  width: 100%;
  height: 75vh; 
  min-height: 400px;
  overflow: hidden;
}
.hero-img {
  width: 100%;
  height: 100%;
  /* 'cover' ensures the image doesn't stretch or leave gaps */
  object-fit: cover; 
  object-position: center;
  display: block;
}
.hero-overlay-text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 10;
  color: #fff;
}
@media screen and (max-width: 480px) {
  .mockup-desktop {
    width: 100%;
    left: 0;
    top: 0px;
    z-index: 1;
}
}
.showcase-section
{
  height: 135vh;
  padding: 55px 0;
  text-align: center;
  position: relative;
  background-color: #FFFFFF;
}
.showcase-section .showcase-container .device-mockup .device-screen img
{
  max-width: 800px;
}
.showcase-section .showcase-container
{
  background-color: #0095da;
  height: 500px;
  top: 160px;
  border-radius: 25px;
}
.showcase-section .showcase-container .device-mockup .device-screen img {
  position: absolute;
  top: -10px;
  /* bottom: 0; */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.glow-bg-box {
    background: linear-gradient(to right, #1d5d7b, rgb(45, 120, 155), #58a2c4);
    /* background: #1d5d7b; */
    /* border-radius: 40px; */
    height: 520px;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Sits on the bottom edge */
    perspective: 1000px; /* Enables 3D space */
    position: relative;
    overflow: visible;
    margin-top: 180px;
    box-shadow:  2px 4px 12px #00000014;
   
}

.card-new
{
  background-color: var(--bg-color-secondary);
    box-shadow: 2px 4px 12px #00000014;
    border: none;
    border-radius: 20px;
}
/* .laptop-3d-mockup {
    position: relative;
    width: 100%;
    max-width: 700px;
    top: -10px; 
    
 
    transform: rotateX(10deg) rotateY(0deg) scale(1.05);
    transform-style: preserve-3d;
    
  
    filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6));
    transition: transform 0.5s ease;
} */
 /* Keep the perspective on the parent */
 .perspective-stage {
  /* Increasing perspective from 2000 to 3000 makes the tilt less extreme */
  perspective: 3000px; 
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  overflow: hidden; /* Prevents the image from overlapping other sections when tilting */
}

.laptop-3d-mockup {
  transform-style: preserve-3d;
  will-change: transform;
  /* Ensure the image doesn't scale up on hover unless you want it to */
  transform: scale(1); 
}

/* Remove your previous .perspective-stage:hover .laptop-3d-mockup { transform: ... } */
.laptop-3d-mockup {
  position: relative;
  width: 100%;
  max-width: 1000px;
  top: 15px;
  /* Combined your existing transform with a slight perspective */
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1.08);
  /* transform-style: preserve-3d; */
  /* filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)); */
  /* transition: transform 0.5s ease; */
  
  /* Padding creates the "thickness" of the border */
  padding: 6px; 
  border-radius: 20px;
  /* background: rgba(255, 255, 255, 0.1);  */
  overflow: hidden;
}

/* The Animated Gradient Layer */
.laptop-3d-mockup::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  /* Forex-themed gradient: Gold to Deep Red/Purple */
  background: conic-gradient(
      transparent, 
      #22E1FF, 
      #1D8FE1, 
      #625EB1, 
      transparent 30%
  );
  /* background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%); */
  animation: rotateBorder 4s linear infinite;
  z-index: -1;
}

/* The Inner "Mask" (Ensures the gradient only shows on the edge) */
.laptop-3d-mockup::after {
  content: '';
  position: absolute;
  inset: 3px; /* Controls border thickness */
  background: #1a1a1a; /* Match your laptop's bezel or background */
  border-radius: 17px;
  z-index: -1;
}

@keyframes rotateBorder {
  100% {
      transform: rotate(360deg);
  }
}

/* Optional: Boost glow on hover */
.laptop-3d-mockup:hover {
  transform: perspective(1000px) rotateX(10deg) rotateY(0deg) scale(1.05);
  
  /* filter: drop-shadow(0 50px 80px rgba(139, 50, 44, 0.4)); */
}

/* Hover effect to make it feel interactive */
/* .laptop-3d-mockup:hover {
    transform: rotateX(5deg) scale(1.08);
} */

.laptop-3d-mockup img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* Add a glossy "Screen" reflection like Fig 2 */
.screen-gloss {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    pointer-events: none;
}
.showcase-header h1{
font-size: 160px;
text-transform: none;
letter-spacing: -5px;
}
.showcase-header h2 {
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 1.6; /* Adds vertical space between lines if it wraps */
  text-transform: capitalize;
}

.showcase-header h2 span {
  /* 1. Use the specific blue color */
  background-color: #7dcaee; 
  
  /* 2. Add padding to create the 'box' look around the text */
  padding: 5px 15px;
  
  /* 3. Ensures the background only wraps the text width */
  display: inline; 
  
  /* 4. Optional: shadow-box effect if text is multi-line */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media screen and (max-width: 768px) {
 
  .showcase-header h1
  {
    font-size: 60px !important;
  }
  .showcase-header h2 span
  {
    font-size: 30px !important;
  }
  .glow-bg-box
  {
    /* margin-top: 10px; */
    height: 100px;
    background-color: transparent;
  }
  .showcase-section
  {
    height: 100vh;
  }
  .laptop-3d-mockup
  {
    max-width: 350px !important;
  }
  .showcase-section
  {
    height: auto;
  }
}
@media (min-width: 768px) and (max-width: 997px)
{
  .laptop-3d-mockup
  {
    max-width: 450px !important;
  }
}
/* 1. Remove focus outline from the toggler button */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. Remove focus outline from the nav links */
.nav-link:focus,
.nav-link:active {
    outline: none !important;
    box-shadow: none !important;
}

/* 3. Specifically for Bootstrap 5 'box-shadow' focus */
.btn:focus, 
.navbar-toggler:focus {
    box-shadow: none !important;
}