*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --bg: #05040b;
  --line: #110c2d;
  --highlight: #191042; /* hover glow color */
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background-color: #070511;
  overflow-x: hidden !important;
}

@font-face {
  font-family: GeneralSansBold;
  src: url(../fonts/GeneralSans-Semibold.otf);
}
@font-face {
  font-family: GeneralSansMedium;
  src: url(../fonts/GeneralSans-Medium.otf);
}
@font-face {
  font-family: GeneralSansRegular;
  src: url(../fonts/GeneralSans-Regular.otf);
}
@font-face {
  font-family: GeneralSansLight;
  src: url(../fonts/GeneralSans-Light.otf);
}
@font-face {
  font-family: NeueMontrealRegular;
  src: url(../fonts/NeueMontreal-Regular.otf);
}
@font-face {
  font-family: NeueMontrealMedium;
  src: url(../fonts/NeueMontreal-Medium.otf);
}

.generalsansb {
  font-family: GeneralSansBold;
}
.generalsansm {
  font-family: GeneralSansMedium;
}
.generalsansr {
  font-family: GeneralSansRegular;
}
.generalsansl {
  font-family: GeneralSansLight;
}
.neuemontrealr {
  font-family: NeueMontrealRegular;
}
.neuemontrealm {
  font-family: NeueMontrealMedium;
}

.sm-text {
  font-size: clamp(12px, calc(0.75rem + 0.4vw), 18px);
}
.xl-text {
  font-size: clamp(30px, calc(1.5rem + 2.5vw), 64px);
}
.lg-text {
  font-size: clamp(20px, calc(1rem + 1.5vw), 36px);
}
.md-text {
  font-size: clamp(14px, calc(0.75rem + 0.3vw), 20px);
}
.cta-text {
  font-size: clamp(24px, calc(1.5rem + 2vw), 58px);
}
.crd-head {
  font-size: clamp(14px, calc(0.875rem + 0.6vw), 22px);
}
.crd-text {
  font-size: clamp(12px, calc(0.75rem + 0.4vw), 16px);
}
/* .img-w-clamp {
  width: clamp(190px, 8vw, 230px);
} */
.counter {
  border-top: 1px solid;

  border-image-source: linear-gradient(
    90deg,
    rgba(17, 12, 45, 0) 0%,
    #4b21ef 50%,
    rgba(17, 12, 45, 0) 100%
  );
}
.cta-sec {
  background-image: url(../img/text-sec-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.mySwiper .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.stack-cards {
  position: relative;
  width: 100%;
}

.card {
  position: relative;
  width: 100%;
  margin-bottom: 100px;
  transform-origin: center top;
  z-index: 1;
}

.inner-card {
  transform: scale(0.9);
  /* opacity: 0.8; */
  border-color: #110c2d;
  transition: all 0.5s ease;
}
/* Layer 2 slightly larger */
.card.depth-1 .inner-card {
  transform: scale(0.95);
  /* opacity: 0.8; */
}

.card.active .inner-card {
  transform: scale(1);
  opacity: 1;
  border-color: #4b21ef; /* highlight border color */
  z-index: 10;
}
.line-br {
  height: 2px;
  background: linear-gradient(90deg, #110c2d 0%, #4b21ef 50%, #110c2d 100%);
}

.gradient-heading {
  font-size: clamp(35px, 3vw + 1rem, 80px);
  background: linear-gradient(
    90deg,
    #110c2d 20%,
    rgba(75, 33, 239, 0.7) 50%,
    #110c2d 80%
  );
  background-size: 200% 100%;
  background-position: 0% 0%;
  animation: gradientMove 10s linear infinite;

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -200% 0%;
  }
}

/* Tag Css  */
/* Custom pill style */
.glow-btn {
  border-radius: 2000px;
  background: rgba(10, 7, 25, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden; /* keeps svg inside radius */
}
/* Responsive gradient border overlay */
.glow-btn svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
}
/* Tag Css  */
/* Word wrapper - prevent line breaking */
.framer-text .word-group {
  display: inline-block;
  white-space: nowrap; /* keep all chars in one word together */
}

/* Each character animation */
.framer-text .char,
.img-anim-wrap {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px) scale(1.15);
  filter: blur(8px);
  transition: all 0.9s cubic-bezier(0.3, 0.7, 0.4, 1);
}

.framer-text .char.show,
.img-anim-wrap.show {
  opacity: 1;
  transform: translateY(0px) scale(1);
  filter: blur(0px);
}

#myVideo {
  /* mix-blend-mode: screen; */
}

/* hero grid css  */
/* WRAPPERS */
.grid-wrapper {
  width: 100%;
  max-width: 1920px;
}

/* DESKTOP visible by default, mobile hidden */
.grid-desktop {
  display: block;
}
.grid-mobile {
  display: none;
}

/* Switch below 900px */
@media (max-width: 540px) {
  .grid-desktop {
    display: none;
  }
  .grid-mobile {
    display: block;
  }
}

/* ------------- DESKTOP GRID (LOCKED) ------------- */

/* 1920×640 aspect ratio */
.grid-inner-desktop {
  position: relative;
  width: 100%;
  padding-top: 33.3333%; /* 640 / 1920 */
  overflow: hidden;
}

/* Layers */
.grid-lines,
.icons-layer,
.reveal-mask {
  position: absolute;
  inset: 0;
}

/* ---------- DESKTOP LINES ---------- */

/* HORIZONTAL */
.h-line {
  position: absolute;
  width: 100%;
  height: 1px;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Row positions (scaled) */
.h1 {
  top: 25%;
} /* 160/640 */
.h2 {
  top: 43.75%;
} /* 280/640 */
.h3 {
  top: 62.5%;
} /* 400/640 */
.h4 {
  top: 81.25%;
} /* 520/640 */
.h5 {
  top: 100%;
}

/* Top solid */
.h1,
.h2 {
  background: var(--line);
  opacity: 0.9;
}

/* Bottom gradient */
.h3,
.h4,
.h5 {
  background: linear-gradient(
    to right,
    rgba(17, 12, 45, 1) 0%,
    rgba(17, 12, 45, 0) 50%,
    rgba(17, 12, 45, 1) 100%
  );
  opacity: 0.9;
}

/* VERTICAL */
.v-line {
  position: absolute;
  height: 100%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(17, 12, 45, 1) 0%,
    rgba(17, 12, 45, 0) 100%
  );
  opacity: 0.9;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* 120/1920 = 6.25% */
.v1 {
  left: 6.25%;
}
.v2 {
  left: 12.5%;
}
.v3 {
  left: 18.75%;
}
.v4 {
  left: 25%;
}
.v5 {
  left: 31.25%;
}
.v6 {
  left: 37.5%;
}
.v7 {
  left: 43.75%;
}
.v8 {
  left: 50%;
}
.v9 {
  left: 56.25%;
}
.v10 {
  left: 62.5%;
}
.v11 {
  left: 68.75%;
}
.v12 {
  left: 75%;
}
.v13 {
  left: 81.25%;
}
.v14 {
  left: 87.5%;
}
.v15 {
  left: 93.75%;
}

/* Highlight class (used by BOTH desktop + mobile lines) */
.line-highlight {
  background: var(--highlight) !important;
  opacity: 1 !important;
}

/* ---------- DESKTOP ICONS ---------- */

.icon {
  position: absolute;
  width: 6.25%; /* 120/1920 */
  height: 18.75%; /* 120/640 */
  background: rgba(17, 12, 45, 0.459);
  opacity: 0;
  transform: scale(0.4);
}

/* Desktop columns */
.col-1 {
  left: 0%;
}
.col-2 {
  left: 6.25%;
}
.col-3 {
  left: 12.5%;
}
.col-4 {
  left: 18.75%;
}
.col-5 {
  left: 25%;
}
.col-6 {
  left: 31.25%;
}
.col-7 {
  left: 37.5%;
}
.col-8 {
  left: 43.75%;
}
.col-9 {
  left: 50%;
}
.col-10 {
  left: 56.25%;
}
.col-11 {
  left: 62.5%;
}
.col-12 {
  left: 68.75%;
}
.col-13 {
  left: 75%;
}
.col-14 {
  left: 81.25%;
}
.col-15 {
  left: 87.5%;
}
.col-16 {
  left: 93.75%;
}

/* Desktop rows */
.row-1 {
  top: 0%;
}
.row-2 {
  top: 25%;
}
.row-3 {
  top: 43.75%;
}
.row-4 {
  top: 62.5%;
}
.row-5 {
  top: 81.25%;
}

/* Bounce once */
.icon-show {
  animation: iconBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes iconBounce {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.grid-icon:hover path {
  fill: #4b21ef !important;
  transition: fill 2s;
}

/* ---------- DESKTOP MASK ---------- */
.reveal-mask {
  background: var(--bg);
  transform: translateY(0%);
  animation: revealDown 2s ease-out forwards;
  animation-delay: 0.5s;
  z-index: 10;
  /* mix-blend-mode: screen; */
}

@keyframes revealDown {
  to {
    transform: translateY(100%);
  }
}

.grid-lines {
  z-index: 1;
}
.icons-layer {
  z-index: 5;
}

/* ------------- MOBILE GRID 10×8 ------------- */

/* Mobile inner with 900×740 ratio → 740/900 ≈ 82.22% */
.grid-inner-mobile {
  position: relative;
  width: 100%;
  padding-top: 82.2222%;
  overflow: hidden;
}

/* Layers */
.m-grid-lines,
.m-icons-layer,
.m-reveal-mask {
  position: absolute;
  inset: 0;
}

/* ---------- MOBILE LINES ---------- */

/* Horizontal mobile lines (8 rows) */
.m-h-line {
  position: absolute;
  width: 100%;
  height: 1px;
  transition: background 0.2s ease, opacity 0.2s ease;
}

/* Row boundaries based on 110 + 7×90 over 740 */
.m-h1 {
  top: 14.9%;
} /* 110 / 740 */
.m-h2 {
  top: 27%;
} /* 200 / 740 */
.m-h3 {
  top: 39.2%;
} /* 290 / 740 */
.m-h4 {
  top: 51.4%;
} /* 380 / 740 */
.m-h5 {
  top: 63.5%;
} /* 470 / 740 */
.m-h6 {
  top: 75.7%;
} /* 560 / 740 */
.m-h7 {
  top: 87.8%;
} /* 650 / 740 */
.m-h8 {
  top: 100%;
} /* 740 / 740 */

/* Top two solid, rest gradient like desktop */
.m-h1,
.m-h2 {
  background: var(--line);
  opacity: 0.9;
}

.m-h3,
.m-h4,
.m-h5,
.m-h6,
.m-h7,
.m-h8 {
  background: linear-gradient(
    to right,
    rgba(17, 12, 45, 1) 0%,
    rgba(17, 12, 45, 0) 50%,
    rgba(17, 12, 45, 1) 100%
  );
  opacity: 0.9;
}

/* Vertical mobile lines: 10 columns → 9 inner lines at 10% steps */
.m-v-line {
  position: absolute;
  height: 100%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(17, 12, 45, 1) 0%,
    rgba(17, 12, 45, 0) 100%
  );
  opacity: 0.9;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.m-v1 {
  left: 10%;
}
.m-v2 {
  left: 20%;
}
.m-v3 {
  left: 30%;
}
.m-v4 {
  left: 40%;
}
.m-v5 {
  left: 50%;
}
.m-v6 {
  left: 60%;
}
.m-v7 {
  left: 70%;
}
.m-v8 {
  left: 80%;
}
.m-v9 {
  left: 90%;
}

/* ---------- MOBILE ICONS (separate system) ---------- */

.m-icon {
  position: absolute;
  width: 10% !important;
  height: 12% !important;
  background: rgba(17, 12, 45, 0.3);
  opacity: 0;
  transform: scale(0.4);
}

/* Mobile columns: centers of 10 cols (5%, 15%, ... 95%) */
.m-col-1 {
  left: calc(5% - 5%);
}
.m-col-2 {
  left: calc(15% - 5%);
}
.m-col-3 {
  left: calc(25% - 5%);
}
.m-col-4 {
  left: calc(35% - 5%);
}
.m-col-5 {
  left: calc(45% - 5%);
}
.m-col-6 {
  left: calc(55% - 5%);
}
.m-col-7 {
  left: calc(65% - 5%);
}
.m-col-8 {
  left: calc(75% - 5%);
}
.m-col-9 {
  left: calc(85% - 5%);
}
.m-col-10 {
  left: calc(95% - 5%);
}

/* Mobile rows: exact visual centers for 110 + 7×90 grid */
/* perfectly centered for a 12%-tall icon */
.m-row-1 {
  top: calc(7.432432% - 6%);
}
.m-row-2 {
  top: calc(20.945946% - 6%);
}
.m-row-3 {
  top: calc(33.108108% - 6%);
}
.m-row-4 {
  top: calc(45.27027% - 6%);
}
.m-row-5 {
  top: calc(57.432432% - 6%);
}
.m-row-6 {
  top: calc(69.594595% - 6%);
}
.m-row-7 {
  top: calc(81.756757% - 6%);
}
.m-row-8 {
  top: calc(93.918919% - 6%);
}

/* ---------- MOBILE MASK ---------- */
.m-reveal-mask {
  background: var(--bg);
  transform: translateY(0%);
  animation: revealDown 2s ease-out forwards;
  animation-delay: 0.5s;
  z-index: 10;
}

.m-grid-lines {
  z-index: 1;
}
.m-icons-layer {
  z-index: 5;
}

@media (max-width: 768px) {
  .hero-video {
    height: 250px; /* jitna height chaho yahan badal lo */
    object-fit: cover;
    object-position: center;
  }
}

.gradient-line {
  height: 1px;
  width: 90%;
  margin: 0 auto;

  background: linear-gradient(90deg, #110C2D, #4B21EF, #110C2D);
  background-size: 100%;

  animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
  0% {
    filter: brightness(0.5);
  }
  50% {
    filter: brightness(1.6);
  }
  100% {
    filter: brightness(0.5);
  }
}