:root {

  --blue: #1e398f;

  --pink: #c7007e;

  --white: #ffffff;

  --off-white: #f8f7ff;

  --light-gray: #f0eeff;

  --dark: #0b2545;

  --accent: #fda423;

  --grad: linear-gradient(135deg, #1e398f, #c7007e);

  --grad-rev: linear-gradient(135deg, #c7007e, #1e398f);

  --grad-rev-new: linear-gradient(90deg, #ff4fd8, #00eaff);

  --font-display: "DM Sans", sans-serif;

  --font-body: "DM Sans", sans-serif;

  --font-mono: "DM Sans", sans-serif;

}



*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  overflow-x: hidden;

}



body {

  font-family: var(--font-body);

  background: var(--white);

  color: var(--dark);

  overflow-x: hidden;



}

/*@media (pointer: fine) {*/

/*  body {*/

/*    */

/*  }*/

/*}*/

/* ── CUSTOM CURSOR ── */

/*#cursor {*/

/*  width: 20px;*/

/*  height: 20px;*/

/*  position: fixed;*/

/*  top: 0;*/

/*  left: 0;*/

/*  pointer-events: none;*/

/*  z-index: 99999;*/

/*  border-radius: 50%;*/

/*  transform: translate(-50%, -50%);*/



/*  background: linear-gradient(135deg, #ff00cc, #3333ff, #00ffe7);*/

/*  background-size: 300% 300%;*/



/*  animation: funkyGradient 4s ease infinite;*/



/*  box-shadow:*/

/*    0 0 10px rgba(255, 0, 200, 0.8),*/

/*    0 0 20px rgba(0, 255, 255, 0.6),*/

/*    0 0 40px rgba(0, 0, 255, 0.5);*/

/*}*/



/* TRAIL AURA */

/*#cursor-aura {*/

/*  width: 70px;*/

/*  height: 70px;*/

/*  position: fixed;*/

/*  top: 0;*/

/*  left: 0;*/

/*  pointer-events: none;*/

/*  border-radius: 50%;*/

/*  transform: translate(-50%, -50%);*/



/*  background: radial-gradient(circle, rgba(255, 0, 200, 0.25), transparent 60%);*/



/*  filter: blur(6px);*/

/*  animation: pulseAura 2s infinite ease-in-out;*/

/*}*/



/* ✨ Gradient animation */

/*@keyframes funkyGradient {*/

/*  0% {*/

/*    background-position: 0% 50%;*/

/*  }*/



/*  50% {*/

/*    background-position: 100% 50%;*/

/*  }*/



/*  100% {*/

/*    background-position: 0% 50%;*/

/*  }*/

/*}*/



/* 💥 Aura pulse */

@keyframes pulseAura {

  0% {

    transform: translate(-50%, -50%) scale(1);

    opacity: 0.6;

  }



  50% {

    transform: translate(-50%, -50%) scale(1.3);

    opacity: 0.3;

  }



  100% {

    transform: translate(-50%, -50%) scale(1);

    opacity: 0.6;

  }

}



body:has(a:hover) #cursor,

body:has(button:hover) #cursor {

  width: 26px;

  height: 26px;

  background: var(--blue);

}



@media not all and (pointer: fine) {

  #cursor,

  #cursor-aura {

    display: none !important;

  }



  body,

  a,

  button,

  .btn-primary,

  .btn-secondary,

  .nav-cta,

  .submit-btn,

  .ptab,

  .plan-btn,

  .faq-q,

  .portfolio-item,

  .service-card,

  .spec-card,

  .why-card,

  .industry-card,

  #btt {

    cursor: auto !important;

  }

}



/* ── NAV ── */

nav {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;

  padding: 1.1rem 5%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  backdrop-filter: blur(18px);

  background: rgba(255, 255, 255, 0.75);

  border-bottom: 1px solid rgba(30, 57, 143, 0.08);

  transition: all 0.4s ease;

}



.nav-logo {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 800;

  background: var(--grad);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  letter-spacing: -0.02em;

  text-decoration: none;

}

.nav-item-dropdown {
  position: relative;
  list-style: none;
}

.nav-item-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  /*transform: translateY(0);*/
  pointer-events: auto;
}

.nav-item-dropdown.open .nav-drop-arrow {
  transform: rotate(180deg);
}

.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-drop-arrow {
  font-size: 0.7rem;
  transition: transform 0.25s ease;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 220px;
  padding: 0.6rem;
  margin: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(30, 57, 143, 0.08);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  /*transform: translateY(10px);*/
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 1001;
}

.nav-dropdown-menu li {
  margin: 0;
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--dark);
  font-size: 0.86rem;
  font-weight: 600;
  transition: all 0.22s ease;
}

.nav-dropdown-menu a:hover {
  background: rgba(30, 57, 143, 0.06);
  color: var(--blue);
  /*transform: translateX(4px);*/
}



/* Mobile dropdown */
.mobile-item-dropdown {
  list-style: none;
}

.mobile-drop-toggle {
  width: 100%;
  min-height: 54px;
  padding: 0 1rem;
  border: 1px solid rgba(30, 57, 143, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.22s ease;
}

.mobile-drop-toggle:hover {
  color: var(--blue);
  background: rgba(248, 250, 255, 0.98);
}

.mobile-drop-arrow {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}

.mobile-dropdown-menu {
  display: none;
  list-style: none;
  margin: 0.45rem 0 0 0;
  padding: 0.35rem 0 0.2rem 0.8rem;
}

.mobile-dropdown-menu li a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--dark);
  font-size: 0.86rem;
  font-weight: 600;
  transition: all 0.22s ease;
}

.mobile-dropdown-menu li a:hover {
  color: var(--blue);
  background: rgba(30, 57, 143, 0.05);
}

.mobile-item-dropdown.open .mobile-dropdown-menu {
  display: block;
}

.mobile-item-dropdown.open .mobile-drop-arrow {
  transform: rotate(180deg);
}

.nav-logo span {

  font-weight: 400;

}



.nav-links {

  display: flex;

  gap: 2.2rem;

  list-style: none;

}



.nav-links a {

  font-family: var(--font-display);

  font-size: 0.88rem;

  font-weight: 600;

  color: var(--dark);

  text-decoration: none;

  letter-spacing: 0.04em;

  position: relative;

  transition: color 0.3s;

}

.nav-links button {

  font-family: var(--font-display);

  font-size: 0.88rem;

  font-weight: 600;

  color: var(--dark);

  text-decoration: none;

  letter-spacing: 0.04em;

  position: relative;

  transition: color 0.3s;

}





.nav-links a::after {

  content: "";

  position: absolute;

  bottom: -4px;

  left: 0;

  width: 0;

  height: 2px;

  background: var(--grad);

  transition: width 0.3s ease;

}



.nav-links a:hover {

  color: var(--blue);

}



.nav-links a:hover::after {

  width: 100%;

}



.nav-cta {

  background: var(--grad);

  color: #fff;

  border: none;

  padding: 0.65rem 1.6rem;

  border-radius: 50px;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 0.85rem;



  letter-spacing: 0.06em;

  box-shadow: 0 4px 20px rgba(199, 0, 126, 0.35);

  transition:

    transform 0.2s,

    box-shadow 0.2s;

}



.nav-cta:hover {

  /*transform: translateY(-2px) scale(1.04);*/

  box-shadow: 0 8px 30px rgba(199, 0, 126, 0.5);

}



/* ── MOBILE NAV TOGGLE ── */

.nav-toggle {

  display: none;

  width: 52px;

  height: 52px;

  border: 1px solid rgba(30, 57, 143, 0.1);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 6px;

  cursor: pointer;

  box-shadow: 0 10px 30px rgba(30, 57, 143, 0.08);

  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease,

    background 0.25s ease;

}



.nav-toggle:hover {

  /*transform: translateY(-1px);*/

  box-shadow: 0 14px 34px rgba(30, 57, 143, 0.12);

}



.nav-toggle span {

  display: block;

  width: 22px;

  height: 2px;

  border-radius: 999px;

  background: linear-gradient(90deg, #1e3a8f, #c7007e);

  transition:

    transform 0.32s ease,

    opacity 0.24s ease,

    width 0.24s ease;

}



.nav-toggle.active span:nth-child(1) {

  /*transform: translateY(8px) rotate(45deg);*/

}



.nav-toggle.active span:nth-child(2) {

  opacity: 0;

  transform: scaleX(0.2);

}



.nav-toggle.active span:nth-child(3) {

  transform: translateY(-8px) rotate(-45deg);

}



/* ── MOBILE MENU PANEL ── */

.mobile-menu {

  position: fixed;

  top: 84px;

  left: 50%;

  /*transform: translateX(-50%) translateY(-12px);*/

  width: calc(100% - 24px);

  max-width: 520px;

  padding: 1rem;

  border-radius: 24px;

  background: rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(22px);

  -webkit-backdrop-filter: blur(22px);

  border: 1px solid rgba(30, 57, 143, 0.08);

  box-shadow:

    0 24px 60px rgba(15, 23, 42, 0.14),

    0 10px 30px rgba(199, 0, 126, 0.08);

  z-index: 999;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:

    opacity 0.28s ease,

    transform 0.32s ease,

    visibility 0.28s ease;

}



.mobile-menu::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 24px;

  padding: 1px;

  background: linear-gradient(135deg,

      rgba(30, 57, 143, 0.16),

      rgba(199, 0, 126, 0.16));

  -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

}



.mobile-menu.open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateX(-50%) translateY(0);

}



.mobile-links {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.45rem;

  margin: 0 0 1rem;

  padding: 0;

}



.mobile-links li {

  margin: 0;

}



.mobile-links a {

  display: flex;

  align-items: center;

  min-height: 54px;

  padding: 0 1rem;

  border-radius: 16px;

  text-decoration: none;

  font-family: var(--font-display);

  font-size: 0.95rem;

  font-weight: 700;

  letter-spacing: 0.03em;

  color: var(--dark);

  background: rgba(255, 255, 255, 0.72);

  border: 1px solid rgba(30, 57, 143, 0.06);

  transition:

    transform 0.22s ease,

    background 0.22s ease,

    color 0.22s ease,

    box-shadow 0.22s ease;

}



.mobile-links a:hover {

  /*transform: translateX(4px);*/

  color: var(--blue);

  background: rgba(248, 250, 255, 0.98);

  box-shadow: 0 10px 24px rgba(30, 57, 143, 0.08);

}



.mobile-nav-cta {

  width: 100%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 54px;

  font-size: 0.88rem;

  border-radius: 18px;

  cursor: pointer;

}



/* ── RESPONSIVE NAVBAR ── */

@media (max-width: 1024px) {

  nav {

    padding: 0.95rem 1rem;

    gap: 1rem;

  }



  .nav-links {

    gap: 1.3rem;

  }



  .nav-cta {

    padding: 0.62rem 1.1rem;

    font-size: 0.8rem;

  }



  .nav-logo {

    width: 170px;

    max-width: 48vw;

    height: auto;

    object-fit: contain;

  }

}



@media (max-width: 860px) {

  nav {

    padding: 0.85rem 0.9rem;

    border-bottom: 1px solid rgba(30, 57, 143, 0.08);

  }



  .nav-links,

  .nav-cta {

    display: none;

  }



  .nav-toggle {

    display: inline-flex;

    flex-shrink: 0;

  }



  .nav-logo {

    width: 150px;

    max-width: 52vw;

  }

}



@media (max-width: 480px) {

  nav {

    top: 10px;

    left: 10px;

    right: 10px;

    width: auto;

    padding: 0.7rem 0.75rem;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.84);

    box-shadow: 0 14px 44px rgba(15, 23, 42, 0.1);

  }



  .nav-logo {

    width: 132px;

    max-width: 50vw;

  }



  .nav-toggle {

    width: 46px;

    height: 46px;

    border-radius: 14px;

  }



  .nav-toggle span {

    width: 20px;

  }



  .mobile-menu {

    top: 78px;

    width: calc(100% - 20px);

    padding: 0.8rem;

    border-radius: 20px;

  }



  .mobile-links a {

    min-height: 50px;

    padding: 0 0.9rem;

    font-size: 0.9rem;

    border-radius: 14px;

  }



  .mobile-nav-cta {

    min-height: 50px;

    border-radius: 16px;

    font-size: 0.84rem;

  }

}



@media (max-width: 360px) {

  nav {

    padding: 0.62rem 0.65rem;

  }



  .nav-logo {

    width: 118px;

  }



  .nav-toggle {

    width: 42px;

    height: 42px;

    gap: 5px;

  }



  .nav-toggle span {

    width: 18px;

  }



  .mobile-menu {

    top: 72px;

    width: calc(100% - 16px);

    padding: 0.7rem;

  }



  .mobile-links a {

    min-height: 46px;

    font-size: 0.86rem;

  }



  .mobile-nav-cta {

    min-height: 46px;

    font-size: 0.8rem;

  }

}



/* ── HERO ── */

#hero {

  min-height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--white);

  padding: 7rem 5% 4rem;

}



/* Animated blob background */

.blob-wrap {

  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

}



.blob {

  position: absolute;

  border-radius: 50%;

  filter: blur(70px);

  opacity: 0.18;

  animation: blobFloat 10s ease-in-out infinite alternate;

}



.blob-1 {

  width: 520px;

  height: 520px;

  background: var(--blue);

  top: -120px;

  right: -80px;

  animation-duration: 13s;

}



.blob-2 {

  width: 400px;

  height: 400px;

  background: var(--pink);

  bottom: -80px;

  left: -60px;

  animation-duration: 10s;

  animation-delay: -4s;

}



.blob-3 {

  width: 260px;

  height: 260px;

  background: var(--pink);

  top: 40%;

  right: 20%;

  animation-duration: 8s;

  animation-delay: -2s;

  opacity: 0.12;

}



.blob-4 {

  width: 180px;

  height: 180px;

  background: var(--blue);

  top: 20%;

  left: 30%;

  animation-duration: 11s;

  animation-delay: -6s;

  opacity: 0.1;

}



@keyframes blobFloat {

  0% {

    transform: translate(0, 0) scale(1);

  }



  50% {

    transform: translate(30px, -40px) scale(1.08);

  }



  100% {

    transform: translate(-20px, 20px) scale(0.96);

  }

}



/* Dot grid */

.dot-grid {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background-image: radial-gradient(circle,

      rgba(30, 57, 143, 0.12) 1px,

      transparent 1px);

  background-size: 34px 34px;

  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,

      black 40%,

      transparent 100%);

}



.hero-inner {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  align-items: center;

  max-width: 1280px;

  width: 100%;

  margin: 0 auto;

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background: rgba(30, 57, 143, 0.07);

  border: 1px solid rgba(30, 57, 143, 0.18);

  padding: 0.4rem 1rem;

  border-radius: 50px;

  font-family: var(--font-mono);

  font-size: 0.75rem;

  letter-spacing: 0.08em;

  color: var(--blue);

  margin-bottom: 1.4rem;

  animation: pulse-border 2.5s ease-in-out infinite;

}



@keyframes pulse-border {



  0%,

  100% {

    border-color: rgba(30, 57, 143, 0.18);

  }



  50% {

    border-color: rgba(199, 0, 126, 0.6);

  }

}



.badge-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--pink);

  animation: blink 1.4s ease-in-out infinite;

}



@keyframes blink {



  0%,

  100% {

    opacity: 1;

  }



  50% {

    opacity: 0.2;

  }

}



.hero-title {

  font-family: var(--font-display);

  font-size: clamp(2.8rem, 5.5vw, 5rem);

  font-weight: 800;

  line-height: 1.06;

  letter-spacing: -0.03em;

  color: var(--dark);

}



.hero-title .line {

  display: block;

  overflow: hidden;

}



.hero-title .grad-text {

  background: var(--grad);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.hero-subtitle {

  font-size: 1.08rem;

  color: #555;

  line-height: 1.75;

  margin: 1.4rem 0 2.2rem;

  max-width: 480px;

}



.hero-btns {

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

}



.hero-image-section {

  position: relative;

  left: 100px;

  top: auto;

  transform: none;

  margin-top: 2rem;

}



.hero-image {

  width: 100%;

  max-width: 420px;

}



.btn-primary {

  background: var(--grad);

  color: #fff;

  border: none;

  padding: 0.85rem 2.2rem;

  border-radius: 50px;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 0.95rem;



  letter-spacing: 0.04em;

  box-shadow: 0 6px 28px rgba(199, 0, 126, 0.38);

  transition:

    transform 0.22s,

    box-shadow 0.22s;

  position: relative;

  overflow: hidden;

}



.btn-primary::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent);

  transition: opacity 0.3s;

}



.btn-primary:hover {

  /*transform: translateY(-3px) scale(1.03);*/

  box-shadow: 0 12px 40px rgba(199, 0, 126, 0.52);

}



.btn-secondary {

  background: transparent;

  color: var(--blue);

  border: 2px solid var(--blue);

  padding: 0.83rem 2.2rem;

  border-radius: 50px;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 0.95rem;



  letter-spacing: 0.04em;

  transition: all 0.22s;

}



.btn-secondary:hover {

  background: var(--blue);

  color: #fff;

  /*transform: translateY(-3px);*/

  box-shadow: 0 8px 28px rgba(30, 57, 143, 0.3);

}



.hero-stats {

  display: flex;

  gap: 2.2rem;

  margin-top: 2.8rem;

}



.stat-num {

  font-family: var(--font-display);

  font-size: 1.9rem;

  font-weight: 800;

  background: var(--grad);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.stat-label {

  font-size: 0.78rem;

  color: #888;

  letter-spacing: 0.06em;

  font-weight: 500;

}



/* Hero right - floating cards */

.hero-visual {

  position: relative;

  height: 520px;

}



.hero-main-card {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  width: 340px;

  height: 340px;

  background: var(--grad);

  border-radius: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow:

    0 30px 80px rgba(199, 0, 126, 0.35),

    0 0 0 1px rgba(255, 255, 255, 0.2) inset;

  overflow: hidden;

}



.hero-main-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='28' stroke='rgba(255,255,255,.06)' fill='none' stroke-width='1'/%3E%3C/svg%3E") repeat;

}



.hero-main-icon {

  /* font-size: 6rem;

  position: relative; */

  z-index: 1;

  animation: float 3s ease-in-out infinite;

}



@keyframes float {



  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(-14px);

  }

}



.float-card {

  position: absolute;

  background: #fff;

  border-radius: 18px;

  padding: 1rem 1.3rem;

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);

  border: 1px solid rgba(30, 57, 143, 0.08);

  animation: floatCard 5s ease-in-out infinite;

  backdrop-filter: blur(10px);

}



.fc-1 {

  top: 40px;

  right: 20px;

  animation-delay: 0s;

}



.fc-2 {

  bottom: 80px;

  left: 0;

  animation-delay: -1.8s;

}



.fc-3 {

  top: 120px;

  left: 10px;

  animation-delay: -3.2s;

}



@keyframes floatCard {



  0%,

  100% {

    transform: translateY(0) rotate(0deg);

  }



  50% {

    transform: translateY(-12px) rotate(1.5deg);

  }

}



.fc-title {

  font-family: var(--font-display);

  font-size: 0.72rem;

  font-weight: 700;

  color: #aaa;

  letter-spacing: 0.06em;

}



.fc-value {

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 800;

  color: var(--dark);

  margin-top: 0.2rem;

}



.fc-sub {

  font-size: 0.7rem;

  color: #8bc34a;

  font-weight: 600;

}



.fc-sub.red {

  color: var(--pink);

}



.fc-dots {

  display: flex;

  gap: 0.3rem;

  margin-top: 0.5rem;

}



.dot-sm {

  width: 6px;

  height: 6px;

  border-radius: 50%;

}



@media (max-width: 1024px) {

  .hero-inner {

    grid-template-columns: 1fr;

    text-align: center;

  }



  .hero-text {

    display: flex;

    flex-direction: column;

    align-items: center;

  }



  .hero-subtitle {

    max-width: 100%;

  }



  .hero-btns {

    justify-content: center;

  }



  .hero-stats {

    justify-content: center;

    flex-wrap: wrap;

  }

}



@media (max-width: 768px) {

  .hero-title {

    font-size: clamp(2rem, 7vw, 2.8rem);

  }



  .hero-subtitle {

    font-size: 0.95rem;

  }



  .stat-num {

    font-size: 1.5rem;

  }



  .stat-label {

    font-size: 0.7rem;

  }

}



/* ── MARQUEE ── */

.marquee-wrap {

  overflow: hidden;

  background: var(--grad);

  padding: 1rem 0;

  position: relative;

}



.marquee-track {

  display: flex;

  gap: 0;

  animation: marquee 22s linear infinite;

  white-space: nowrap;

}



@keyframes marquee {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



.marquee-item {

  font-family: var(--font-display);

  font-size: 0.85rem;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.85);

  letter-spacing: 0.1em;

  padding: 0 2rem;

  display: inline-flex;

  align-items: center;

  gap: 0.8rem;

}



.marquee-sep {

  opacity: 0.4;

}



/* ── SECTION COMMONS ── */

section {

  position: relative;

  overflow: hidden;

}



.section-label {

  font-family: var(--font-mono);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.18em;

  color: var(--pink);

  margin-bottom: 0.8rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.section-label::before {

  content: "//";

  color: var(--blue);

}

.section-label.light::before {

  content: "//";

  color: var(--accent);

}



.section-title {

  font-family: var(--font-display);

  font-size: clamp(2rem, 3.5vw, 3rem);

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.025em;

  color: var(--dark);

}



.section-title .hl {

  background: var(--grad-rev);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.section-title .bright {

  background: var(--grad-rev-new);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.section-sub {

  font-size: 1rem;

  color: #666;

  line-height: 1.7;

  margin-top: 0.9rem;

  max-width: 520px;

}



.container {

  max-width: 1280px;

  margin: 0 auto;

  padding: 0 5%;

}



/* ── offer ── */

#offerings {

  padding: 7rem 5%;

}



/* ── ABOUT / WHY US ── */

#about {

  padding: 7rem 5%;

  background: var(--off-white);

}



.about-grid {

  max-width: 1280px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 5rem;

  align-items: center;

}



.about-visual {

  position: relative;

}



.about-big-num {

  font-family: var(--font-display);

  font-size: 9rem;

  font-weight: 800;

  background: var(--grad);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  opacity: 0.12;

  position: absolute;

  top: -2rem;

  left: -1rem;

  line-height: 1;

  pointer-events: none;

  z-index: 0;

}



.about-card-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.2rem;

  position: relative;

  z-index: 1;

}



.about-mini-card {

  background: #fff;

  border-radius: 20px;

  padding: 1.6rem;

  border: 1px solid rgba(30, 57, 143, 0.08);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  transition:

    transform 0.3s,

    box-shadow 0.3s;

}



.about-mini-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 16px 40px rgba(199, 0, 126, 0.15);

}



.amc-icon {

  font-size: 2rem;

  margin-bottom: 0.8rem;

}



.amc-title {

  font-family: var(--font-display);

  font-size: 1rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 0.3rem;

}



.amc-desc {

  font-size: 0.8rem;

  color: #777;

  line-height: 1.5;

}



.about-mini-card.featured {

  background: var(--grad);

  color: #fff;

  border-color: transparent;

  box-shadow: 0 8px 32px rgba(199, 0, 126, 0.3);

}



.about-mini-card.featured .amc-title {

  color: #fff;

}



.about-mini-card.featured .amc-desc {

  color: rgba(255, 255, 255, 0.78);

}



/* ── SERVICES ── */

#services {

  padding: 7rem 5%;

  background: var(--white);

}



.services-head {

  max-width: 1280px;

  margin: 0 auto 3.5rem;

}



.services-grid {

  max-width: 1280px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.6rem;

}



.service-card {

  border-radius: 24px;

  padding: 2.2rem;

  border: 1.5px solid rgba(30, 57, 143, 0.1);

  background: #fff;

  position: relative;

  overflow: hidden;

  transition:

    transform 0.3s,

    box-shadow 0.3s,

    border-color 0.3s;



}



.service-card::before {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: var(--grad);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.4s ease;

}



.service-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 24px 60px rgba(30, 57, 143, 0.12);

  border-color: rgba(199, 0, 126, 0.2);

}



.service-card:hover::before {

  transform: scaleX(1);

}



.sc-num {

  font-family: var(--font-mono);

  font-size: 0.7rem;

  color: rgba(30, 57, 143, 0.3);

  letter-spacing: 0.1em;

  margin-bottom: 1.2rem;

}



.sc-icon {

  color: white;

  width: 56px;

  height: 56px;

  border-radius: 16px;

  background: var(--grad);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.6rem;

  margin-bottom: 1.2rem;

  box-shadow: 0 6px 20px rgba(199, 0, 126, 0.28);

}



.sc-title {

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 0.6rem;

}



.sc-desc {

  font-size: 0.87rem;

  color: #666;

  line-height: 1.65;

}



.sc-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  margin-top: 1.2rem;

}



.sc-tag {

  font-family: var(--font-mono);

  font-size: 0.65rem;

  letter-spacing: 0.06em;

  padding: 0.25rem 0.7rem;

  border-radius: 50px;

  background: rgba(30, 57, 143, 0.07);

  color: var(--blue);

  border: 1px solid rgba(30, 57, 143, 0.14);

}



/* ── PROCESS ── */

#process {

  padding: 7rem 5%;

  background: var(--dark);

  color: #fff;

}



.process-head {

  max-width: 1280px;

  margin: 0 auto 3.5rem;

}



.process-head .section-label {

  color: rgba(199, 0, 126, 0.9);

}

.process-head .section-label.light {
  color: var(--accent);
}

.mc-left .section-label.light {
  color: var(--accent);
}

.contact-left .section-label.light {
  color: var(--accent);
}

.process-head .section-title {

  color: #fff;

}



.process-head .section-sub {

  color: rgba(255, 255, 255, 0.55);

}



.process-steps {

  max-width: 1280px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 0;

  position: relative;

}



.process-steps::before {

  content: "";

  position: absolute;

  top: 36px;

  left: 10%;

  right: 10%;

  height: 2px;

  background: linear-gradient(90deg, var(--blue), var(--pink));

  z-index: 0;

}



.step {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 0 1rem;

  position: relative;

  z-index: 1;

}



.step-num {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-display);

  font-size: 1.3rem;

  font-weight: 800;

  margin-bottom: 1.2rem;

  position: relative;

}



.step-num::before {

  content: "";

  position: absolute;

  inset: -3px;

  border-radius: 50%;

  background: var(--grad);

  z-index: -1;

}



.step-num span {

  position: relative;

  z-index: 1;

  background: var(--dark);

  width: 66px;

  height: 66px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.step-title {

  font-family: var(--font-display);

  font-size: 0.95rem;

  font-weight: 700;

  color: #fff;

  margin-bottom: 0.4rem;

}



.step-desc {

  font-size: 0.78rem;

  color: rgba(255, 255, 255, 0.5);

  line-height: 1.55;

}



/* ── PRICING ── */

#pricing {

  padding: 7rem 5%;

  background: var(--off-white);

}



.pricing-head {

  max-width: 1280px;

  margin: 0 auto 1.5rem;

}



.pricing-tabs {

  max-width: 1280px;

  margin: 0 auto 3rem;

  display: flex;

  gap: 0.5rem;

  background: #fff;

  border-radius: 50px;

  padding: 0.35rem;

  width: fit-content;

  border: 1px solid rgba(30, 57, 143, 0.1);

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

}



.ptab {

  padding: 0.6rem 1.8rem;

  border-radius: 50px;

  font-family: var(--font-display);

  font-size: 0.85rem;

  font-weight: 700;



  border: none;

  background: transparent;

  color: #888;

  transition: all 0.3s;

  letter-spacing: 0.03em;

}



.ptab.active {

  background: var(--grad);

  color: #fff;

  box-shadow: 0 4px 16px rgba(199, 0, 126, 0.3);

}



.pricing-grid {

  max-width: 1350px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.6rem;

}



.plan-card {

  display: flex;

  flex-direction: column;

  background: #fff;

  border-radius: 28px;

  padding: 2.4rem;

  border: 1.5px solid rgba(30, 57, 143, 0.1);

  position: relative;

  overflow: hidden;

  transition:

    transform 0.3s,

    box-shadow 0.3s;

}



.plan-card:hover {

  transform: translateY(-8px);

}



.plan-card.popular {

  background: var(--grad);

  border-color: transparent;

  box-shadow: 0 24px 70px rgba(199, 0, 126, 0.4);

  transform: scale(1.03);

}



.plan-card.popular:hover {

  transform: scale(1.03) translateY(-8px);

}



.popular-badge {

  position: absolute;

  top: 1.4rem;

  right: 1.4rem;

  background: rgba(255, 255, 255, 0.25);

  color: #fff;

  font-family: var(--font-mono);

  font-size: 0.65rem;

  font-weight: 700;

  padding: 0.3rem 0.8rem;

  border-radius: 50px;

  letter-spacing: 0.1em;

  border: 1px solid rgba(255, 255, 255, 0.35);

}



.plan-name {

  font-family: var(--font-display);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  color: var(--blue);

  margin-bottom: 0.6rem;

}



.plan-card.popular .plan-name {

  color: rgba(255, 255, 255, 0.75);

}



.plan-price {

  font-family: var(--font-display);

  font-size: 2.8rem;

  font-weight: 800;

  color: var(--dark);

  line-height: 1;

}



.plan-card.popular .plan-price {

  color: #fff;

}



.plan-price sup {

  font-size: 1.3rem;

  font-weight: 600;

  vertical-align: super;

}



.plan-price span {

  font-size: 0.9rem;

  font-weight: 400;

  opacity: 0.6;

}



.plan-desc {

  font-size: 0.83rem;

  color: #888;

  margin: 0.6rem 0 1.4rem;

  line-height: 1.5;

}



.plan-card.popular .plan-desc {

  color: rgba(255, 255, 255, 0.65);

}



.plan-divider {

  height: 1px;

  background: rgba(0, 0, 0, 0.06);

  margin: 1.2rem 0;

}



.plan-card.popular .plan-divider {

  background: rgba(255, 255, 255, 0.2);

}



.plan-features {

  list-style: none;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

  gap: 0.65rem;

  margin-bottom: 1.8rem;

}



.plan-features li {

  font-size: 0.85rem;

  color: #555;

  display: flex;

  align-items: center;

  gap: 0.6rem;

}



.plan-card.popular .plan-features li {

  color: rgba(255, 255, 255, 0.85);

}



.check {

  color: #22c55e;

  font-size: 1rem;

  flex-shrink: 0;

}



.plan-card.popular .check {

  color: rgba(255, 255, 255, 0.9);

}



.plan-btn {

  width: 100%;

  margin-top: auto;



  padding: 0.9rem;

  border-radius: 50px;

  border: none;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 0.9rem;



  letter-spacing: 0.04em;

  transition: all 0.25s;

}



.plan-btn-outline {

  background: transparent;

  border: 2px solid var(--blue);

  color: var(--blue);

}



.plan-btn-outline:hover {

  background: var(--blue);

  color: #fff;

  transform: translateY(-2px);

}



.plan-btn-white {

  background: #fff;

  color: var(--pink);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

}



.plan-btn-white:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



@media (max-width: 1024px) {

  .pricing-grid {

    grid-template-columns: 1fr 1fr;

    gap: 1.2rem;

  }



  .plan-card {

    padding: 1.8rem;

    border-radius: 22px;

  }



  .plan-price {

    font-size: 2.2rem;

  }



  .plan-desc {

    font-size: 0.78rem;

  }



  .plan-features li {

    font-size: 0.78rem;

  }



  .plan-name {

    font-size: 0.7rem;

  }



  .plan-btn {

    font-size: 0.85rem;

    padding: 0.8rem;

  }

}



@media (max-width: 640px) {

  .pricing-grid {

    grid-template-columns: 1fr;

    gap: 1rem;

  }



  .plan-card {

    padding: 1.4rem;

    border-radius: 18px;

  }



  .plan-name {

    font-size: 0.65rem;

    letter-spacing: 0.1em;

  }



  .plan-price {

    font-size: 1.9rem;

  }



  .plan-price sup {

    font-size: 1rem;

  }



  .plan-price span {

    font-size: 0.75rem;

  }



  .plan-desc {

    font-size: 0.75rem;

    line-height: 1.4;

  }



  .plan-features {

    gap: 0.5rem;

  }



  .plan-features li {

    font-size: 0.75rem;

    gap: 0.4rem;

  }



  .check {

    font-size: 0.85rem;

  }



  .plan-btn {

    font-size: 0.8rem;

    padding: 0.75rem;

  }



  .popular-badge {

    font-size: 0.55rem;

    padding: 0.25rem 0.6rem;

  }



  @media (max-width: 640px) {

    .plan-features li:nth-child(n + 6) {

      display: none;

    }

  }

}



@media (max-width: 400px) {

  .plan-card {

    padding: 1.2rem;

  }



  .plan-price {

    font-size: 1.6rem;

  }



  .plan-desc {

    font-size: 0.7rem;

  }



  .plan-features li {

    font-size: 0.7rem;

  }

}



/* ── PORTFOLIO ── */

#portfolio {

  padding: 7rem 5%;

  background: var(--white);

}



.portfolio-head {

  max-width: 1280px;

  margin: 0 auto 3.5rem;

}



.portfolio-grid {

  max-width: 1280px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.5rem;

}



.portfolio-item {

  border-radius: 24px;

  overflow: hidden;

  position: relative;

  height: 260px;



  background: var(--light-gray);

  transition: transform 0.3s;

}



.portfolio-item:hover {

  transform: scale(1.02);

}



.portfolio-item:first-child {

  grid-row: span 2;

  height: auto;

  min-height: 540px;

}



.pi-bg {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 5rem;

}



.pi-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(10, 10, 20, 0.85), transparent 50%);

  opacity: 0;

  transition: opacity 0.35s;

}



.portfolio-item:hover .pi-overlay {

  opacity: 1;

}



.pi-info {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 1.5rem;

  transform: translateY(100%);

  transition: transform 0.35s ease;

}



.portfolio-item:hover .pi-info {

  transform: translateY(0);

}



.pi-title {

  font-family: var(--font-display);

  font-size: 1.1rem;

  font-weight: 700;

  color: #fff;

}



.pi-cat {

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.65);

  margin-top: 0.2rem;

  letter-spacing: 0.06em;

}



/* Gradient overlays for portfolio items */

.bg-1 {

  background: linear-gradient(135deg,

      rgba(30, 57, 143, 0.15),

      rgba(199, 0, 126, 0.1));

}



.bg-2 {

  background: linear-gradient(135deg,

      rgba(199, 0, 126, 0.12),

      rgba(30, 57, 143, 0.08));

}



.bg-3 {

  background: linear-gradient(135deg,

      rgba(30, 57, 143, 0.18),

      rgba(30, 57, 143, 0.05));

}



.bg-4 {

  background: linear-gradient(135deg,

      rgba(199, 0, 126, 0.15),

      rgba(30, 57, 143, 0.12));

}



/* ── TESTIMONIALS ── */

#testimonials {

  padding: 7rem 5%;

  background: var(--white);

}



.testi-head {

  max-width: 1280px;

  margin: 0 auto 3.5rem;

}



.testi-grid {

  max-width: 1280px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}



.testi-card {

  background: #fff;

  border-radius: 22px;

  padding: 2rem;

  border: 1px solid rgba(30, 57, 143, 0.07);

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);

  transition:

    transform 0.3s,

    box-shadow 0.3s;

  position: relative;

}



.testi-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 16px 40px rgba(30, 57, 143, 0.1);

}



.testi-card::before {

  content: '"';

  position: absolute;

  top: 1rem;

  right: 1.5rem;

  font-size: 5rem;

  font-family: Georgia, serif;

  line-height: 1;

  background: var(--grad);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  opacity: 0.25;

}



.testi-stars {

  display: flex;

  gap: 0.2rem;

  margin-bottom: 1rem;

}



.star {

  color: #f59e0b;

  font-size: 0.9rem;

}



.testi-text {

  font-size: 0.9rem;

  color: #555;

  line-height: 1.7;

  margin-bottom: 1.4rem;

}



.testi-author {

  display: flex;

  align-items: center;

  gap: 0.8rem;

}



.testi-avatar {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  background: var(--grad);

  color: #fff;

  font-family: var(--font-display);

  font-weight: 700;

  flex-shrink: 0;

}



.testi-name {

  font-family: var(--font-display);

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--dark);

}



.testi-role {

  font-size: 0.75rem;

  color: #aaa;

}



/* ── FAQ ── */

#faq {

  padding: 7rem 5%;

  background: var(--off-white);

}



.faq-inner {

  max-width: 860px;

  margin: 0 auto;

}



.faq-head {

  margin-bottom: 3rem;

}



.faq-item {

  border-bottom: 1px solid rgba(30, 57, 143, 0.1);

  overflow: hidden;

}



.faq-q {

  width: 100%;

  text-align: left;

  background: none;

  border: none;

  padding: 1.4rem 0;



  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  font-family: var(--font-display);

  font-size: 1rem;

  font-weight: 700;

  color: var(--dark);

  transition: color 0.2s;

}



.faq-q:hover {

  color: var(--pink);

}



.faq-icon {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  flex-shrink: 0;

  background: var(--grad);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.1rem;

  font-weight: 700;

  transition: transform 0.3s;

}



.faq-a {

  font-size: 0.9rem;

  color: #666;

  line-height: 1.7;

  max-height: 0;

  overflow: hidden;

  transition:

    max-height 0.4s ease,

    padding 0.3s;

  padding: 0;

}



.faq-item.open .faq-a {

  max-height: 300px;

  padding-bottom: 1.2rem;

}



.faq-item.open .faq-icon {

  transform: rotate(45deg);

}



/* ── CONTACT ── */

#contact {

  padding: 7rem 5%;

  background: var(--dark);

  position: relative;

  overflow: hidden;

}



.contact-blob-1 {

  position: absolute;

  width: 500px;

  height: 500px;

  border-radius: 50%;

  background: var(--blue);

  opacity: 0.12;

  filter: blur(100px);

  top: -100px;

  right: -100px;

}



.contact-blob-2 {

  position: absolute;

  width: 400px;

  height: 400px;

  border-radius: 50%;

  background: var(--pink);

  opacity: 0.12;

  filter: blur(100px);

  bottom: -100px;

  left: -80px;

}



.contact-inner {

  max-width: 1280px;

  margin: 0 auto;

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 5rem;

  align-items: start;

}



.contact-left .section-title {

  color: #fff;

}



.contact-left .section-sub {

  color: rgba(255, 255, 255, 0.55);

}



.contact-info {

  margin-top: 2.5rem;

  display: flex;

  flex-direction: column;

  gap: 1.3rem;

}



.ci-item {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.ci-icon {

  width: 44px;

  height: 44px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.1);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.1rem;

  flex-shrink: 0;

}



.ci-text {

  font-size: 0.9rem;

  word-break: break-word;

  color: rgba(255, 255, 255, 0.7);

}



.ci-text strong {

  color: #fff;

  font-family: var(--font-display);

  display: block;

  font-size: 0.8rem;

  letter-spacing: 0.06em;

  margin-bottom: 0.1rem;

}



.contact-form {

  display: flex;

  flex-direction: column;

  width: 100%;

  gap: 1.1rem;

}



.form-row {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

}



.form-group {

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}



.form-group label {

  font-family: var(--font-mono);

  font-size: 0.7rem;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.5);

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 12px;

  padding: 0.85rem 1rem;

  font-family: var(--font-body);

  font-size: 0.9rem;

  color: #fff;

  outline: none;

  transition:

    border-color 0.25s,

    background 0.25s;

  resize: none;

}



.form-group input::placeholder,

.form-group textarea::placeholder {

  color: rgba(255, 255, 255, 0.25);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  border-color: var(--pink);

  background: rgba(255, 255, 255, 0.09);

}



.form-group select option {

  background: var(--dark);

}



.submit-btn {

  background: var(--grad);

  color: #fff;

  border: none;

  padding: 1rem 2rem;

  border-radius: 50px;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 0.95rem;



  letter-spacing: 0.04em;

  box-shadow: 0 6px 28px rgba(199, 0, 126, 0.38);

  transition:

    transform 0.22s,

    box-shadow 0.22s;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

}



.submit-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 12px 40px rgba(199, 0, 126, 0.55);

}



@media (max-width: 1024px) {

  .contact-inner {

    grid-template-columns: 1fr;

    gap: 3rem;

  }



  .contact-left {

    text-align: center;

  }



  .contact-left,

  .contact-inner>div {

    min-width: 0;

  }



  .contact-info {

    align-items: center;

  }



  .ci-item {

    justify-content: center;

    text-align: left;

    width: 100%;

    max-width: 400px;

  }

}



@media (max-width: 768px) {

  #contact {

    padding: 5rem 4%;

  }



  .contact-inner {

    grid-template-columns: 1fr;

    gap: 2.5rem;

  }



  .contact-left {

    text-align: left;

    min-width: 0;

  }



  .contact-info {

    align-items: flex-start;

  }



  .ci-item {

    justify-content: flex-start;

    width: 100%;

  }



  .form-row {

    grid-template-columns: 1fr;

  }

}



/* ── FOOTER ── */

footer {

  position: relative;

  background: linear-gradient(180deg, #070712 0%, #05050d 100%);

  padding: 3.5rem 5% 2.2rem;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  overflow: hidden;

}

.footer-bg {
  background-color: #fff;
  border-radius: 15%;

}


footer::before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),

    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);

  background-size: 36px 36px;

  opacity: 0.18;

  pointer-events: none;

}



.footer-inner {

  position: relative;

  z-index: 1;

  max-width: 1280px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  flex-wrap: wrap;

}



.footer-brand {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0.9rem;

}



.footer-logo {

  width: 200px;

  max-width: 100%;

  height: auto;

  object-fit: contain;

}



.footer-copy {

  font-size: 0.84rem;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.42);

  margin: 0;

}



.footer-links-wrap {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 1.1rem;

}



.footer-links {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 0.9rem 1.3rem;

}



.footer-links a {

  position: relative;

  font-size: 0.84rem;

  font-weight: 500;

  color: rgba(255, 255, 255, 0.56);

  text-decoration: none;

  transition:

    color 0.25s ease,

    transform 0.25s ease;

}



.footer-links a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -4px;

  width: 0;

  height: 2px;

  border-radius: 999px;

  background: var(--grad);

  /*transition: width 0.28s ease;*/

}



.footer-links a:hover {

  color: #fff;

  /*transform: translateY(-1px);*/

}



.footer-links a:hover::after {

  width: 100%;

}



.footer-socials {

  display: flex;

  align-items: center;

  gap: 0.8rem;

  flex-wrap: wrap;

}



.social-link {

  position: relative;

  width: 46px;

  height: 46px;

  border-radius: 16px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  color: rgba(255, 255, 255, 0.82);

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.04),

    0 8px 24px rgba(0, 0, 0, 0.2);

  overflow: hidden;

  transition:

    transform 0.28s ease,

    box-shadow 0.28s ease,

    border-color 0.28s ease,

    color 0.28s ease,

    background 0.28s ease;

}



.social-link::before {

  content: "";

  position: absolute;

  inset: 0;

  background: var(--grad);

  opacity: 0;

  transition: opacity 0.28s ease;

}



.social-link i {

  position: relative;

  z-index: 1;

  font-size: 1rem;

}



.social-link:hover {

  transform: translateY(-4px) scale(1.05);

  color: #fff;

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow:

    0 16px 34px rgba(199, 0, 126, 0.18),

    0 10px 24px rgba(30, 57, 143, 0.16);

}



.social-link:hover::before {

  opacity: 1;

}



/* ── RESPONSIVE ── */

@media (max-width: 992px) {

  footer {

    padding: 3rem 4% 2rem;

  }



  .footer-inner {

    flex-direction: column;

    align-items: flex-start;

  }



  .footer-links-wrap {

    width: 100%;

    align-items: flex-start;

  }



  .footer-links {

    justify-content: flex-start;

  }

}



@media (max-width: 640px) {

  footer {

    padding: 2.6rem 1rem 1.8rem;

  }



  .footer-logo {

    width: 170px;

  }



  .footer-copy {

    font-size: 0.78rem;

  }



  .footer-links {

    gap: 0.75rem 1rem;

  }



  .footer-links a {

    font-size: 0.8rem;

  }



  .footer-socials {

    gap: 0.65rem;

  }



  .social-link {

    width: 42px;

    height: 42px;

    border-radius: 14px;

  }



  .social-link i {

    font-size: 0.92rem;

  }

}



@media (max-width: 420px) {

  .footer-logo {

    width: 150px;

  }



  .footer-links {

    flex-direction: column;

    align-items: flex-start;

    gap: 0.75rem;

  }



  .footer-socials {

    width: 100%;

  }



  .social-link {

    width: 40px;

    height: 40px;

    border-radius: 13px;

  }

}



/* ── SCROLL PROGRESS ── */

#progress {

  position: fixed;

  top: 0;

  left: 0;

  height: 3px;

  z-index: 9999;

  background: var(--grad);

  width: 0;

  transition: width 0.1s;

}



/* ── BACK TO TOP ── */

#btt {

  position: fixed;

  bottom: 2rem;

  right: 2rem;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  border: none;

  background: var(--grad);

  color: #fff;

  font-size: 1.2rem;



  z-index: 999;

  box-shadow: 0 6px 20px rgba(199, 0, 126, 0.4);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transform: translateY(20px);

  transition:

    opacity 0.3s,

    transform 0.3s;

}



#btt.show {

  opacity: 1;

  transform: translateY(0);

}



#btt:hover {

  /*transform: translateY(-3px);*/

}



/* ── RESPONSIVE ── */

@media (max-width: 1024px) {

  .hero-inner {

    grid-template-columns: 1fr;

    text-align: center;

  }



  .hero-visual {

    display: none;

  }



  .hero-btns {

    justify-content: center;

  }



  .hero-stats {

    justify-content: center;

  }



  .hero-subtitle {

    margin-left: auto;

    margin-right: auto;

  }



  .about-grid {

    grid-template-columns: 1fr;

    gap: 3rem;

  }



  .services-grid {

    grid-template-columns: 1fr 1fr;

  }



  .process-steps {

    grid-template-columns: 1fr;

  }



  .process-steps::before {

    display: none;

  }



  .step {

    flex-direction: row;

    text-align: left;

    gap: 1.2rem;

    padding: 1rem 0;

  }



  .step-num {

    margin-bottom: 0;

    flex-shrink: 0;

  }



  .pricing-grid {

    grid-template-columns: 1fr 1fr;

  }



  .portfolio-grid {

    grid-template-columns: 1fr;

  }



  .portfolio-item:first-child {

    min-height: 260px;

  }



  .testi-grid {

    grid-template-columns: 1fr;

  }



  .contact-inner {

    grid-template-columns: 1fr;

    gap: 3rem;

  }

}



@media (max-width: 640px) {

  .nav-links {

    display: none;

  }



  .services-grid {

    grid-template-columns: 1fr;

  }



  .pricing-grid {

    grid-template-columns: 1fr;

  }



  .plan-card.popular {

    transform: none;

  }



  /* .form-row {

    grid-template-columns: 1fr;

  } */



  .about-card-grid {

    grid-template-columns: 1fr;

  }

}



/* Typing cursor */

.typed-cursor {

  color: var(--pink);


}



/* Noise overlay */

body::after {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 99990;

  opacity: 0.018;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}



/* ── ULTRA CLEAN MODERN SCROLLBAR (No Gradient) ── */



::-webkit-scrollbar {

  width: 6px;

  height: 6px;

}



::-webkit-scrollbar-track {

  background: transparent;

}



::-webkit-scrollbar-thumb {

  background: #1e398f;

  /* Your --pink color */

  border-radius: 20px;

  transition: all 0.35s ease;

}



::-webkit-scrollbar-thumb:hover {

  background: #001455;

}



/* Firefox */

* {

  scrollbar-width: thin;

  scrollbar-color: #1e398f transparent;

}



/* ── SPECIALIZED SOLUTIONS GRID ── */

.specialized-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.4rem;

  margin-top: 3rem;

}



.spec-card {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 20px;

  padding: 1.8rem;

  display: flex;

  flex-direction: column;

  gap: 0.8rem;

  transition:

    background 0.3s,

    transform 0.3s,

    border-color 0.3s;



}



.spec-card:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(199, 0, 126, 0.4);

  /*transform: translateY(-6px);*/

}



.spec-icon {

  font-size: 2rem;

  /* color: var(--off-white); */

  width: 54px;

  height: 54px;

  border-radius: 14px;

  background: var(--white);

  /* white background */



  display: flex;

  align-items: center;

  justify-content: center;



  /* font-size: 20px; */

  color: var(--grad-rev);

  /* icon color */



  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

}



.spec-icon .fas {

  /* color: var(--grad-rev); */

  background: var(--grad);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.spec-title {

  font-family: var(--font-display);

  font-size: 1rem;

  font-weight: 700;

  color: #fff;

}



.spec-desc {

  font-size: 0.82rem;

  color: rgba(255, 255, 255, 0.5);

  line-height: 1.6;

}



/* ── PRODUCT SECTION ── */

.product-inner {

  max-width: 1280px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 5rem;

  align-items: center;

}



.product-benefits {

  display: flex;

  flex-direction: column;

  gap: 1.2rem;

  margin-top: 1.8rem;

}



.pb-item {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

}



.pb-icon {

  font-size: 1.5rem;

  flex-shrink: 0;

  margin-top: 0.1rem;

}



.pb-title {

  font-family: var(--font-display);

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 0.2rem;

}



.pb-desc {

  font-size: 0.82rem;

  color: #777;

  line-height: 1.5;

}



.product-use-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

  margin-top: 1.6rem;

}



.use-tag {

  background: rgba(30, 57, 143, 0.08);

  border: 1px solid rgba(30, 57, 143, 0.15);

  color: var(--dark);

  font-family: var(--font-mono);

  font-size: 0.75rem;

  padding: 0.4rem 1rem;

  border-radius: 50px;

  font-weight: 600;

}



/* Power Dashboard UI */

.power-dashboard {

  background: var(--dark);

  border-radius: 24px;

  padding: 2rem;

  box-shadow:

    0 30px 80px rgba(0, 0, 0, 0.2),

    0 0 0 1px rgba(255, 255, 255, 0.07) inset;

  position: relative;

  overflow: hidden;

}



.power-dashboard::before {

  content: "";

  position: absolute;

  top: -60px;

  right: -60px;

  width: 200px;

  height: 200px;

  background: var(--pink);

  border-radius: 50%;

  opacity: 0.07;

  filter: blur(40px);

}



.pd-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.5rem;

}



.pd-title {

  font-family: var(--font-display);

  font-size: 0.85rem;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.6);

  letter-spacing: 0.06em;

}



.pd-status {

  font-family: var(--font-mono);

  font-size: 0.7rem;

  color: #22c55e;

  letter-spacing: 0.1em;

  display: flex;

  align-items: center;

  gap: 0.4rem;

}



.pd-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-bottom: 2rem;

}



.pd-stat {

  background: rgba(255, 255, 255, 0.05);

  border-radius: 14px;

  padding: 1rem;

  text-align: center;

}



.pds-val {

  font-family: var(--font-display);

  font-size: 1.4rem;

  font-weight: 800;

}



.pds-label {

  font-family: var(--font-mono);

  font-size: 0.6rem;

  color: rgba(255, 255, 255, 0.4);

  letter-spacing: 0.08em;

  margin-top: 0.3rem;

}



.pd-bar-label {

  font-family: var(--font-mono);

  font-size: 0.65rem;

  color: rgba(255, 255, 255, 0.35);

  letter-spacing: 0.1em;

  margin-bottom: 1rem;

}



.pd-bars {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.pd-bar-row {

  display: flex;

  align-items: center;

  gap: 0.8rem;

  font-size: 0.75rem;

  color: rgba(255, 255, 255, 0.5);

}



.pd-bar-row>span:first-child {

  width: 55px;

  flex-shrink: 0;

}



.pd-bar-track {

  flex: 1;

  height: 6px;

  background: rgba(255, 255, 255, 0.07);

  border-radius: 10px;

  overflow: hidden;

}



.pd-bar-fill {

  height: 100%;

  border-radius: 10px;

  animation: barGrow 1.2s ease-out both;

}



@keyframes barGrow {

  from {

    width: 0 !important;

  }

}



/* ── WHY GRID ── */

.why-grid {

  max-width: 1280px;

  margin: 3rem auto 0;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.4rem;

}



.why-card {

  background: var(--off-white);

  border: 1.5px solid rgba(30, 57, 143, 0.09);

  border-radius: 22px;

  padding: 2rem;

  transition:

    transform 0.3s,

    box-shadow 0.3s,

    border-color 0.3s;



}



.why-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 18px 50px rgba(199, 0, 126, 0.12);

  border-color: rgba(199, 0, 126, 0.22);

}



.why-icon {

  font-size: 2rem;

  margin-bottom: 0.8rem;

}



.why-title {

  font-family: var(--font-display);

  font-size: 1rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 0.4rem;

}



.why-desc {

  font-size: 0.83rem;

  color: #777;

  line-height: 1.6;

}



/* ── INDUSTRIES GRID ── */

.industries-grid {

  max-width: 1280px;

  margin: 3rem auto 0;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.2rem;

}



.industry-card {

  background: #fff;

  border: 1.5px solid rgba(30, 57, 143, 0.09);

  border-radius: 20px;

  padding: 2rem 1.5rem;

  text-align: center;

  transition:

    transform 0.3s,

    box-shadow 0.3s,

    border-color 0.3s;



}



.industry-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 16px 40px rgba(30, 57, 143, 0.1);

  border-color: rgba(199, 0, 126, 0.2);

}



.ind-icon {

  font-size: 2.4rem;

  margin-bottom: 0.8rem;

}



.ind-icon i {

  background: var(--grad);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.ind-name {

  font-family: var(--font-display);

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--dark);

}



/* ── PROCESS 6-COLUMN ── */

.process-steps.six-col {

  grid-template-columns: repeat(6, 1fr) !important;

}



/* ── RESPONSIVE ADDITIONS ── */

@media (max-width: 1024px) {

  .specialized-grid {

    grid-template-columns: 1fr 1fr;

  }



  .product-inner {

    grid-template-columns: 1fr;

    gap: 3rem;

  }



  .why-grid {

    grid-template-columns: 1fr 1fr;

  }



  .industries-grid {

    grid-template-columns: repeat(4, 1fr);

  }

}



@media (max-width: 768px) {

  .specialized-grid {

    grid-template-columns: 1fr;

  }



  .why-grid {

    grid-template-columns: 1fr;

  }



  .industries-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .pd-stats {

    grid-template-columns: 1fr 1fr 1fr;

  }

}



@media (max-width: 480px) {

  .industries-grid {

    grid-template-columns: 1fr 1fr;

  }



  .pd-stats {

    grid-template-columns: 1fr;

  }

}