/* =========================
   MODERN SERVICES UI
========================= */
/* =========================
   for courses logo
========================= */
.tag-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
}

.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 30px;
  border-radius: 60px;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02));

  color: white;
  font-weight: 500;
  letter-spacing: 0.3px;

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

  backdrop-filter: blur(14px);

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -8px 12px rgba(0, 0, 0, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(123, 47, 247, 0.15);

  overflow: hidden;

  transform-style: preserve-3d;

  transition: all 0.4s ease;
}

.tag::before {
  content: "";

  position: absolute;
  inset: -2px;

  border-radius: inherit;

  background: linear-gradient(90deg,
      transparent,
      #7b2ff7,
      #2000f3,
      #7b2ff7,
      transparent);

  background-size: 300% 300%;

  animation: neonBorder 5s linear infinite;

  z-index: -1;

  filter: blur(8px);

  opacity: 0.9;
}

.tag::after {
  content: "";

  position: absolute;
  top: 1px;
  left: 10%;
  width: 80%;
  height: 45%;

  border-radius: 50px;

  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.25),
      transparent);

  pointer-events: none;
}

@keyframes neonBorder {

  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }

}

.tag:hover {
  transform:
    translateY(-4px) rotateX(4deg);

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -8px 12px rgba(0, 0, 0, 0.5),
    0 20px 40px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(123, 47, 247, 0.4);
}




.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  margin-top: 30px;
  background: #814ac8;
  color: white;
  text-decoration: none;
  border-radius: 14px;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow:none;
  transition: 0.3s ease;
}

.hero-btn:hover {

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

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -8px 12px rgba(0, 0, 0, 0.5),
    0 18px 40px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(123, 47, 247, 0.5);

}

.services {
  width: 100%;
  max-width: 1250px;
  margin: auto;
  padding: 80px 30px 100px;
}

.section-title {
  text-align: center;
  margin-bottom: 100px;
}

.section-title h1 {
  font-size: clamp(36px, 6.5vw, 76px);
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: -4px;
}

.section-title p {
  max-width: 720px;
  margin: auto;
  color: rgba(255, 255, 255, .6);
  line-height: 1.9;
  font-size: 17px;
}

.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 120px;
}

.service-content h2 {
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -2px;
}

.service-content .sub {
  color: rgba(255, 255, 255, .6);
  margin-bottom: 35px;
  line-height: 1.8;
}

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

.acc-item {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
  transition: .3s;
}

.acc-item.active {
  border-color: rgba(124, 77, 255, .8);

  box-shadow:
    0 0 35px rgba(124, 77, 255, .15);
}

.acc-head {
  padding: 18px 22px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;

  font-size: 16px;
  font-weight: 500;
}

.acc-body {
  max-height: 0;
  overflow: hidden;

  transition: max-height .4s ease;

  padding: 0 22px;
}

.acc-item.active .acc-body {
  max-height: 220px;
  padding: 0 22px 22px;
}

.acc-body p {
  color: rgba(255, 255, 255, .6);
  line-height: 1.8;
  font-size: 14px;
}
.service-image {
  position: relative;
  border-radius: 26px;
  overflow: hidden;

  border: none;
  box-shadow: none;

  animation: floatImage 6s ease-in-out infinite;
}

.service-image img {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}

.service-image:hover img {
  transform: translateZ(0) scale(1.03);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-image.is-animating:hover img {
  transform: translateZ(0);
}

.service-image img.img-exit {
  transform: translateZ(0) scale(0.9);
  opacity: 0;
  filter: blur(4px);
  transition:
    transform 300ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 300ms cubic-bezier(0.2, 0.9, 0.2, 1),
    filter 300ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.service-image img.img-enter {
  opacity: 0;
  transform: scale(0.97);
  filter: blur(6px);
}

.service-image img.img-enter.img-enter-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);

  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 700ms ease,
    filter 700ms ease;
}

@keyframes floatImage {
  0% {
    transform: translateY(0px);
  }

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

  100% {
    transform: translateY(0px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-image {
    animation: none;
  }

  .service-image img,
  .service-image:hover img,
  .service-image img.img-exit,
  .service-image img.img-enter,
  .service-image img.img-enter.img-enter-active {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}
.service-image img {
  width: 100%;
  display: block;
}

.service-image img {
  width: 100%;
  display: block;
}

.reverse {
  direction: rtl;
}

.reverse>* {
  direction: ltr;
}

/* Desktop/tablet proportions (keep mobile behavior unchanged) */
@media (min-width: 981px) {
  .services {
    padding: 52px 30px 90px;
  }

  .service-block {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    margin-bottom: 96px;
  }

  .service-content {
    max-width: 640px;
  }

  .service-content h2 {
    font-size: clamp(22px, 3.6vw, 42px);
    line-height: 1.08;
    margin-bottom: 14px;
  }

  .service-content .sub {
    margin-bottom: 28px;
  }

  .service-image {
    max-width: 520px;
    justify-self: end;
  }

  .service-block.reverse .service-image {
    justify-self: start;
  }
}

@media(max-width:980px) {

  .service-block {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .section-title h1 {
    font-size: 52px;
  }

  .service-content h2 {
    font-size: 34px;
  }

}

@media(max-width:640px) {

  .section-title h1 {
    font-size: 42px;
  }

  .service-content h2 {
    font-size: 32px;
  }

  .services {
    padding: 60px 20px;
  }

}


/* ── RESET & VARIABLES ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --black: #000;
  --off-black: #080808;
  --deep: #0d0d0d;
  --purple: #814ac8;
  --purple-light: #df7afe;
  --purple-dim: rgba(129, 74, 200, 0.3);
  --purple-glow: rgba(129, 74, 200, 0.4);
  --white: #fff;
  --w75: rgba(255, 255, 255, 0.75);
  --w50: rgba(255, 255, 255, 0.5);
  --w10: rgba(255, 255, 255, 0.10);
  --w07: rgba(255, 255, 255, 0.07);
  --w05: rgba(255, 255, 255, 0.05);
  --border: #222;
  --card: rgba(13, 13, 13, 0.85);
  --fh: 'Figtree', sans-serif;
  --fb: 'DM Sans', sans-serif;
  --r: 8px;
  --rlg: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-ease: cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

html {
  scroll-behavior: smooth;
  background: #000;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

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

button {
  cursor: pointer;
  font-family: inherit;
}

.hero-content,
.section-header,
.card,
.service-body,
.p-card-content,
.contact-info,
.form,
.footer-brand,
.footer-col,
.footer-contact {
  min-width: 0;
}

p,
h1,
h2,
h3,
h4,
a,
span {
  overflow-wrap: break-word;
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: 74px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-100%);
  animation: slideDown 0.6s var(--ease) 0.2s forwards;
}

@keyframes slideDown {
  to {
    transform: translateY(0);
  }
}

.nav-logo {
  height: 90px;
  width: auto;
  max-width: 240px;
}

.nav-links {
  position: relative;
  display: flex;
  gap: 4px;
  list-style: none;
}
.nav-indicator {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: #9f6fff;
  border-radius: 999px;
  transition: all 0.35s ease;
}
.nav-links a {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  color: var(--w75);
  padding: 6px 12px;
  border-radius: 4px;
  letter-spacing: -0.02em;
  transition: color .25s, background .25s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
  background: var(--w05);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--purple);
  color: var(--white);
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid var(--w10);
  box-shadow: 0 4px 20px var(--purple-glow);
  transition: opacity .25s, transform .25s;
}

.nav-cta:hover {
  opacity: .85;
  transform: translateY(-1px);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: .3s;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 24px;
  flex-direction: column;
  gap: 2px;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu a {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  padding: 12px 8px;
  border-bottom: 1px solid var(--w05);
  letter-spacing: -0.04em;
}

.mobile-menu .mob-cta {
  margin-top: 10px;
  background: var(--purple);
  border-radius: 6px;
  text-align: center;
  border-bottom: none;
  padding: 14px;
}

/* ── HERO ── */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 100px 40px 80px;
  background: #000;
  isolation: isolate;
}

.hero-bg,
.hero-bg>* {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg {
  z-index: 0;
  overflow: hidden;
  background: #000;
  transform: translateZ(0);
}

.hero-art {
  background-image: url("rextech-demo-bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  will-change: transform;
  transform: translateZ(0) scale(1);
}

.hero-art-cover {
  background-size: cover;
  filter: blur(16px) saturate(1.18) brightness(.82);
  opacity: .58;
  transform: translateZ(0) scale(1.06);
  animation: cinematicPush 42s ease-in-out infinite alternate;
}

.hero-art-main {
  background-size: cover;
  filter: saturate(1.08) contrast(1.03);
}

.hero-fog {
  mix-blend-mode: screen;
  opacity: .45;
  will-change: transform, opacity;
}

  .hero-fog-a {
  background:
    radial-gradient(ellipse 42% 24% at 21% 53%, rgba(132, 48, 205, .28), transparent 70%),
    radial-gradient(ellipse 36% 22% at 82% 57%, rgba(184, 78, 255, .24), transparent 72%),
    radial-gradient(ellipse 54% 22% at 50% 75%, rgba(116, 42, 210, .22), transparent 76%);
  animation: fogDriftA 31s ease-in-out infinite alternate;
}

.hero-fog-b {
  background:
    radial-gradient(ellipse 52% 18% at 48% 28%, rgba(116, 35, 210, .16), transparent 72%),
    radial-gradient(ellipse 42% 26% at 73% 43%, rgba(223, 122, 254, .13), transparent 74%);
  opacity: .34;
  animation: fogDriftB 45s ease-in-out infinite alternate;
}

.hero-portal-field {
  left: auto;
  top: 48.2%;
  right: 4.9%;
  bottom: auto;
  width: clamp(170px, 22vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: visible;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(223, 122, 254, .7)) drop-shadow(0 0 38px rgba(116, 35, 210, .55));
  transform: translateZ(0);
}

.hero-portal-field>* {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}


.portal-energy {
  inset: 6%;
  mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 10%, rgba(223, 122, 254, .0) 13%, rgba(255, 222, 255, .65) 17%, rgba(156, 54, 255, .3) 23%, transparent 31%, rgba(223, 122, 254, .56) 42%, transparent 54%, rgba(255, 222, 255, .45) 69%, transparent 80% 100%);
  filter: blur(4px);
  animation: portalEnergyFlow 4.5s linear infinite;
}

.portal-core {
  inset: 36%;
  background: radial-gradient(circle, rgba(255, 230, 255, .95) 0 3%, rgba(223, 122, 254, .62) 15%, rgba(90, 22, 170, .32) 42%, transparent 75%);
  filter: blur(3px);
}

.portal-wave {
  inset: -12%;
  border: 1.5px solid rgba(223, 122, 254, .45);
  background: radial-gradient(circle, transparent 45%, rgba(223, 122, 254, .25) 52%, transparent 70%);
  filter: blur(4px);
  opacity: .36;
}

.portal-wave-b {
  opacity: .22;
}

.hero-portal-smoke {
  left: auto;
  top: 37%;
  right: -2%;
  bottom: auto;
  width: clamp(300px, 38vw, 620px);
  height: clamp(280px, 36vw, 590px);
  border-radius: 50%;
  opacity: .72;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 35% 22% at 45% 44%, rgba(223, 122, 254, .32), transparent 70%),
    radial-gradient(ellipse 50% 30% at 58% 58%, rgba(116, 35, 210, .28), transparent 72%),
    radial-gradient(ellipse 46% 24% at 38% 66%, rgba(184, 78, 255, .22), transparent 74%);
  filter: blur(20px);
}

.hero-particles {
  mix-blend-mode: screen;
  opacity: .8;
  background-image:
    radial-gradient(circle at 78% 42%, rgba(255, 230, 255, .92) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 49%, rgba(223, 122, 254, .85) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 61%, rgba(223, 122, 254, .75) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 66%, rgba(255, 230, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 54%, rgba(223, 122, 254, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 51%, rgba(223, 122, 254, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 19% 62%, rgba(255, 230, 255, .62) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 70%, rgba(223, 122, 254, .62) 0 1px, transparent 2px);
  animation: particleDriftA 9s linear infinite;
  will-change: transform, opacity;
}

.hero-particles-b {
  opacity: .55;
  background-position: 0 0;
  transform: scale(1.08);
  animation: particleDriftB 13s linear infinite;
}

.hero-island-drift {
  inset: 4% 5% 20% 55%;
  opacity: .42;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 14% 8% at 76% 16%, rgba(223, 122, 254, .22), transparent 72%),
    radial-gradient(ellipse 18% 10% at 82% 31%, rgba(153, 60, 255, .18), transparent 74%),
    radial-gradient(ellipse 10% 7% at 62% 53%, rgba(223, 122, 254, .16), transparent 72%);
  filter: blur(6px);
  animation: islandHover 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.hero-controller-drift {
  inset: 44% auto auto 15%;
  width: clamp(92px, 13vw, 210px);
  height: clamp(70px, 10vw, 160px);
  opacity: .36;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 48% 44%, rgba(223, 122, 254, .45), rgba(108, 38, 210, .16) 45%, transparent 68%);
  filter: blur(12px);
  animation: controllerFloat 10s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.hero-river-shimmer {
  inset: auto 31% 0 31%;
  height: 29%;
  opacity: .28;
  mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent 0%, rgba(223, 122, 254, 0.45) 50%, rgba(255, 255, 255, 0.75) 53%, rgba(223, 122, 254, 0.45) 56%, transparent 100%);
  background-size: 100% 200%;
  clip-path: polygon(49% 0, 55% 0, 66% 100%, 34% 100%);
  filter: blur(6px);
}

.hero-castle-glow {
  inset: auto 33% 16% 33%;
  height: 27%;
  opacity: .32;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 184, 255, .38), rgba(152, 45, 232, .26) 35%, transparent 72%);
  filter: blur(12px);
}

.portal-wave-b {
  opacity: .22;
}

.hero-milky-way {
  opacity: .5;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 5% 18% at 28% 18%, rgba(230, 165, 255, .78), transparent 58%),
    linear-gradient(112deg, transparent 0 20%, rgba(120, 35, 205, .05) 27%, rgba(213, 89, 255, .62) 36%, rgba(125, 43, 220, .22) 46%, transparent 62% 100%),
    radial-gradient(ellipse 50% 12% at 36% 24%, rgba(100, 45, 178, .28), transparent 72%),
    radial-gradient(ellipse 68% 18% at 47% 30%, rgba(58, 31, 120, .22), transparent 78%);
  filter: blur(1.5px) drop-shadow(0 0 12px rgba(178, 66, 255, .42));
  transform: translate3d(-8%, 0, 0);
  animation: milkyWayStreak 16s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

.hero-stars {
  opacity: .72;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 11% 35%, rgba(255, 226, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 29% 29%, rgba(223, 122, 254, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 17%, rgba(255, 255, 255, .65) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 36%, rgba(223, 122, 254, .75) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 22%, rgba(255, 255, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 30%, rgba(223, 122, 254, .8) 0 1px, transparent 2px);
  animation: starFieldDrift 22s linear infinite;
  will-change: transform;
}

.hero-meteor {
  display: none;
  width: 180px;
  height: 1px;
  inset: 22% auto auto 65%;
  opacity: 0;
  transform: rotate(-31deg) translate3d(0, 0, 0);
  background: linear-gradient(90deg, transparent, rgba(223, 122, 254, .72), rgba(255, 255, 255, .9), transparent);
  filter: drop-shadow(0 0 8px rgba(223, 122, 254, .8));
}

.hero-meteor-b {
  inset: 31% auto auto 22%;
  width: 130px;
  animation-delay: 5.4s;
}

.hero-cinematic-overlay {
  width: 100%;
  height: 100%;
  z-index: 1;
  background:
    radial-gradient(ellipse 64% 62% at 50% 49%, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .36) 56%, #000 100%),
    linear-gradient(to right, rgba(0, 0, 0, .62) 0%, transparent 25%, transparent 72%, rgba(0, 0, 0, .6) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .52) 0%, transparent 18%, rgba(0, 0, 0, .04) 58%, rgba(0, 0, 0, .9) 100%);
}

@keyframes cinematicPush {
  from {
    transform: translate3d(0, 0, 0) scale(1.06);
  }

  to {
    transform: translate3d(-1.2%, -.8%, 0) scale(1.11);
  }
}

@keyframes cinematicPushMain {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-.7%, -.45%, 0) scale(1.045);
  }
}

@keyframes fogDriftA {
  from {
    transform: translate3d(-2%, 1%, 0) scale(1.02);
    opacity: .34;
  }

  to {
    transform: translate3d(2.2%, -1.5%, 0) scale(1.08);
    opacity: .52;
  }
}

@keyframes fogDriftB {
  from {
    transform: translate3d(2%, -1%, 0) scale(1);
    opacity: .26;
  }

  to {
    transform: translate3d(-2%, 1.5%, 0) scale(1.05);
    opacity: .42;
  }
}

@keyframes portalFieldGlow {
  0%, 100% {
    filter: drop-shadow(0 0 16px rgba(223, 122, 254, .72)) drop-shadow(0 0 38px rgba(116, 35, 210, .58));
  }
  50% {
    filter: drop-shadow(0 0 24px rgba(255, 222, 255, .92)) drop-shadow(0 0 62px rgba(156, 54, 255, .82));
  }
}

@keyframes portalRotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes portalRotateCounter {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes portalEnergyFlow {
  0% {
    transform: rotate(0deg) scale(.98);
    opacity: .55;
  }
  50% {
    transform: rotate(180deg) scale(1.03);
    opacity: .88;
  }
  100% {
    transform: rotate(360deg) scale(.98);
    opacity: .55;
  }
}

@keyframes portalCorePulse {
  0%, 100% {
    transform: scale(.9);
    opacity: .7;
  }
  50% {
    transform: scale(1.08);
    opacity: .95;
  }
}

@keyframes portalWave {
  0% {
    transform: scale(.68) translateZ(0);
    opacity: 0.7;
  }
  50% {
    opacity: 0.45;
  }
  100% {
    transform: scale(1.35) translateZ(0);
    opacity: 0;
  }
}

@keyframes portalSmokeFlow {
  0% {
    transform: translate3d(-2%, 2%, 0) scale(1) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(2%, -2%, 0) scale(1.08) rotate(3deg);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(-2%, 2%, 0) scale(1) rotate(0deg);
    opacity: 0.5;
  }
}

@keyframes islandHover {
  0% {
    transform: translate3d(0, 4px, 0);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(0, -6px, 0);
    opacity: 0.46;
  }
  100% {
    transform: translate3d(0, 4px, 0);
    opacity: 0.35;
  }
}

@keyframes controllerFloat {
  0% {
    transform: translate3d(-4px, 4px, 0) rotate(-0.5deg) scale(0.98);
    opacity: 0.28;
  }
  50% {
    transform: translate3d(4px, -4px, 0) rotate(0.5deg) scale(1.02);
    opacity: 0.42;
  }
  100% {
    transform: translate3d(-4px, 4px, 0) rotate(-0.5deg) scale(0.98);
    opacity: 0.28;
  }
}

@keyframes riverShimmerFlow {
  0% {
    background-position: 50% 100%;
    opacity: 0.35;
  }
  50% {
    opacity: 0.65;
  }
  100% {
    background-position: 50% -100%;
    opacity: 0.35;
  }
}

@keyframes castleFlicker {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.97);
    filter: blur(12px) brightness(0.9);
  }
  30% {
    opacity: 0.65;
    transform: scale(1.03);
    filter: blur(10px) brightness(1.1);
  }
  35% {
    opacity: 0.55;
    transform: scale(0.99);
  }
  70% {
    opacity: 0.7;
    transform: scale(1.05);
    filter: blur(9px) brightness(1.2);
  }
  85% {
    opacity: 0.45;
    transform: scale(0.98);
  }
}

@keyframes milkyWayDrift {
  from {
    transform: rotate(-12deg) translate3d(-1.5%, 0, 0) scale(1);
    opacity: .28;
  }
  to {
    transform: rotate(-12deg) translate3d(1.5%, -1%, 0) scale(1.05);
    opacity: .42;
  }
}

@keyframes milkyWayStreak {
  0%, 100% {
    transform: translate3d(-9%, 1%, 0);
    opacity: .26;
    filter: blur(1.8px) drop-shadow(0 0 8px rgba(178, 66, 255, .32));
  }
  45% {
    opacity: .58;
  }
  60% {
    transform: translate3d(6%, -3%, 0);
    opacity: .46;
    filter: blur(1.2px) drop-shadow(0 0 16px rgba(213, 89, 255, .5));
  }
}

@keyframes starFieldDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-22px, 10px, 0);
  }
}

@keyframes starTwinkle {
  from {
    opacity: .42;
    filter: brightness(.82);
  }
  to {
    opacity: .78;
    filter: brightness(1.25);
  }
}

@keyframes meteorStreak {
  0%, 72% {
    opacity: 0;
    transform: rotate(-31deg) translate3d(0, 0, 0);
  }
  76% {
    opacity: .82;
  }
  84%, 100% {
    opacity: 0;
    transform: rotate(-31deg) translate3d(-220px, 92px, 0);
  }
}

@keyframes particleDriftA {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  20% {
    opacity: 0.75;
  }
  80% {
    opacity: 0.75;
  }
  100% {
    transform: translate3d(-20px, -30px, 0);
    opacity: 0;
  }
}

@keyframes particleDriftB {
  0% {
    transform: translate3d(20px, 20px, 0) scale(1.08);
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.08);
    opacity: 0;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 14px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 1.2s var(--spring-ease) 0.2s forwards;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple-light);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

  50% {
    opacity: .4;
    transform: scale(.7)
  }
}

.hero h1 {
  font-family: var(--fh);
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 600;
  letter-spacing: -2.5px;
  line-height: 1.05;
  margin-bottom: 22px;
}

.word {
  display: inline-block;
  opacity: 1;
  transform: none;
}

.w1, .w2, .w3, .w4, .w5 {
  animation: none;
}

/* ── PREMIUM HERO ENTRANCE ANIMATION ── */
.hero h1,
.page-hero h1,
.contact-page-hero h1,
.ar-hero h1 {
  opacity: 0;
  transform: scale(0.9) translateZ(0);
  filter: blur(8px);
  will-change: transform, opacity, filter;
  animation: premiumHeroEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* Disable scroll reveal transition conflicts on hero elements */
.page-hero h1.reveal,
.contact-page-hero h1.reveal,
.ar-hero h1.reveal-left {
  transition: none !important;
}

@keyframes premiumHeroEntrance {
  0% {
    opacity: 0;
    transform: scale(0.9) translateZ(0);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px)
  }

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

.hero-sub {
  font-family: var(--fh);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 500;
  color: var(--w75);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 36px;
  letter-spacing: -0.02em;
  opacity: 0;
  animation: fadeUp 1.2s var(--spring-ease) 1.0s forwards;
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1.2s var(--spring-ease) 1.2s forwards;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 6px;
  border: 1px solid var(--w10);
  letter-spacing: -0.04em;
  transition: opacity .25s, transform .25s, box-shadow .25s;
}

.btn-primary {
  background: var(--purple);
  color: var(--white);
  box-shadow: 0 0 20px var(--purple-glow);
  position: relative;
  z-index: 1;
}

.btn-primary:hover {
  opacity: .88;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--purple-glow);
}

.btn-primary:active {
  transform: scale(0.97);
}

/* ─────────────────────────────────────────────
   SECONDARY BUTTON — PREMIUM PURPLE SWEEP
───────────────────────────────────────────── */

.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;

  background: rgba(255, 255, 255, 0.02);
  color: var(--white);

  border: 1.5px solid rgba(129, 74, 200, 0.55);
  border-radius: 8px;

  overflow: hidden;
  isolation: isolate;

  backdrop-filter: blur(0px);

  transition:
    transform 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.3s var(--ease),
    color 0.25s var(--ease);

  z-index: 1;
}

/* glowing border */
.btn-secondary::after {
  content: '';

  position: absolute;
  inset: 0;

  border-radius: inherit;

  padding: 1px;

  background:
    linear-gradient(135deg,
      rgba(223, 122, 254, 0.7),
      rgba(129, 74, 200, 0.15),
      rgba(223, 122, 254, 0.7));

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0.7;

  pointer-events: none;
}

/* purple sweep */
.btn-secondary::before {
  content: '';

  position: absolute;

  top: 0;
  left: -110%;

  width: 120%;
  height: 100%;

  background:
    linear-gradient(90deg,
      rgba(129, 74, 200, 0) 0%,
      rgba(129, 74, 200, 0.95) 50%,
      rgba(129, 74, 200, 0) 100%);

  transform: skewX(-18deg);

  z-index: -1;
}

/* hover */
.btn-secondary:hover::before {
  left: -110%;
}

.btn-secondary:hover {
  color: var(--white);

  border-color: rgba(223, 122, 254, 0.9);

  transform: translateY(-3px);

  box-shadow:
    0 0 18px rgba(129, 74, 200, 0.35),
    0 10px 32px rgba(129, 74, 200, 0.22);
}

/* active click */
.btn-secondary:active {
  transform: scale(0.97);
}

/* mobile button styling handled in dedicated hero responsive section */

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--w10);
}

.btn-outline:hover {
  background: var(--w05);
  transform: translateY(-2px);
}
.portfolio-btn {
  margin-bottom: 40px;
}
/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: 120px 40px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(129, 74, 200, 0.18) 0%, transparent 70%);
}

.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.page-hero h1 {
  font-family: var(--fh);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.page-hero p {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
}

/* ── SECTION UTILS ── */
.section {
  padding: 100px 40px;
}

.section-sm {
  padding: 60px 40px;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--fh);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.section-sub {
  font-family: var(--fh);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  line-height: 1.5;
  margin-top: 12px;
}

.max-w {
  max-width: 1120px;
  margin: 0 auto;
}

.max-w-md {
  max-width: 800px;
  margin: 0 auto;
}

.max-w-sm {
  max-width: 640px;
  margin: 0 auto;
}

/* ── CARDS ── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--rlg);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition:
    border-color 0.4s var(--ease),
    transform 0.5s var(--spring-ease),
    box-shadow 0.4s var(--ease);
  will-change: transform;
}

/* shimmer sweep on hover */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.045) 50%,
    transparent 80%
  );
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
  z-index: 10;
}

.card:hover::after {
  left: 160%;
}

.card:hover {
  border-color: rgba(129, 74, 200, 0.55);
  transform: translateY(-6px) scale(1.012);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    0 0 0 1px rgba(129,74,200,0.15),
    0 0 32px rgba(129,74,200,0.12);
}

.card-purple {
  background: radial-gradient(60% 80% at 100% 100%, rgba(80, 30, 160, 0.45) 0%, #0e0e12 70%);
}

/* ── SERVICE CARDS ── */
.service-card {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 36px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.service-card-link {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.service-card-link:focus-visible {
  outline: 2px solid rgba(129, 74, 200, 0.7);
  outline-offset: 4px;
  border-radius: var(--rlg);
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, rgba(129, 74, 200, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

.service-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  flex-shrink: 0;
}

.service-body h3 {
  font-family: var(--fh);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin-bottom: 10px;
}

.service-body p {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  line-height: 1.5;
}

/* ── NEW SERVICES LAYOUT ── */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 120px;
  padding: 40px 0;
}

.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.service-content h3 {
  font-family: var(--fh);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
  color: var(--white);
  line-height: 1.2;
}

.service-content p {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 500;
  color: var(--w75);
  line-height: 1.6;
}

.service-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes clickZoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

.services-list .service-image img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  transition: transform 0.2s ease-out;
}

img.click-zoom {
  animation: clickZoomInOut 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-image:active img {
  transform: scale(0.88) !important;
  transition: transform 0.1s ease-out !important;
}

/* ── PROCESS STEPS ── */
.step-item {
  padding: 24px 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.step-item:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.step-num {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.04em;
  margin-bottom: 14px;
}

.step-item h3 {
  font-family: var(--fh);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-bottom: 6px;
}

.step-item p {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.step-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  object-fit: contain;
  margin-top: 16px;
  display: block;
  border-radius: 8px;
  background: #000;
}

/* —— PROCESS (Simple) —— */
.process-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 70px 90px;
  margin-top: 28px;
}

.process-step-num {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 600;
  color: var(--w75);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.process-step-title {
  font-family: var(--fb);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin: 0 0 10px;
}

.process-step-desc {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0;
}

@media (max-width: 820px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .process-step-title {
    font-size: 30px;
  }
}

/* ── PORTFOLIO ── */
.portfolio-title-main {
  font-family: var(--fb);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 1;
}

.portfolio-title-dim {
  font-family: var(--fb);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 1;
  color: rgba(255, 255, 255, .3);
}

.p-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.p-card {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 30px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1.15fr 0.85fr;

  align-items: stretch;

  min-height: 470px;

  transition: .35s ease;
}

.p-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.p-card-link:focus-visible {
  outline: 2px solid rgba(129, 74, 200, 0.7);
  outline-offset: 4px;
  border-radius: 30px;
}

.p-card:hover {
  border-color: rgba(129, 74, 200, .35);
  transform: translateY(-3px);
}

.p-card-content {
  position: relative;

  padding: 42px 44px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(circle at top left,
      rgba(129, 74, 200, .12) 0%,
      transparent 45%),
    #050505;
}

.p-card-content::before {
  content: '';

  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 0% 0%,
      rgba(129, 74, 200, .08) 0%,
      transparent 55%);

  pointer-events: none;
}

.p-card-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -2px;

  margin-bottom: 18px;
}

.p-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .02) 0%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .02) 100%);
}

.p-points {
  display: flex;
  flex-direction: column;
  gap: 20px;

  margin-top: 20px;
}

.p-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  font-size: 20px;
  line-height: 1.6;

  color: rgba(255, 255, 255, .62);
}

.p-point::before {
  content: '✦';
  font-size: 9px;
  color: var(--purple);
  margin-top: 8px;
  flex-shrink: 0;
}

.p-card-img {
  width: 100%;
  height: 100%;

  overflow: hidden;

  border-left: 1px solid rgba(255, 255, 255, .05);
}

.p-card-img img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}

/* ── TESTIMONIALS ── */
.testi-card {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  color: #f5a623;
  font-size: 15px;
}

.testi-review {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  line-height: 1.5;
  flex: 1;
}

.testi-name {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.testi-role {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.04em;
}

/* ── FAQ ── */
.faq-item {
  background: var(--w05);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .3s;
}

.faq-item:hover {
  border-color: rgba(129, 74, 200, .4);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.02em;
  user-select: none;
}

.faq-icon {
  font-size: 20px;
  color: var(--w50);
  transition: transform .35s var(--ease);
  flex-shrink: 0;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  color: var(--w75);
  line-height: 1.6;
  letter-spacing: -0.02em;
  transition: max-height .4s var(--ease), padding .3s;
}

.faq-item.open .faq-a {
  max-height: 200px;
  padding: 0 20px 18px;
}

/* ── CTA BOX ── */
.cta-box {
  background: linear-gradient(149deg, var(--purple-dim) 0%, var(--card) 29%, var(--card) 74%, var(--purple-dim) 100%);
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
}

.cta-box h2 {
  font-family: var(--fh);
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.cta-box p {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 500;
  color: var(--w75);
  line-height: 1.5;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}


/* ── FOOTER ── */
footer {
  background: conic-gradient(from 0deg at 50% 0%, #000 90deg, rgba(79, 26, 214, .4) 181deg, #000 270deg);
  border-top: 1px solid var(--w10);
  padding: 80px 80px 0;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  padding-bottom: 60px;
}

.footer-logo {
  height: 90px;
  width: auto;
  margin-bottom: 10px;
}

.footer-tagline {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--w50);
  letter-spacing: -0.2px;
  line-height: 1.6;
  max-width: 230px;
  margin-left: 18px;
}
.footer-brand {
  margin-top:-30px;
}

.footer-cols {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font-family: var(--fb);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col a {
  font-family: var(--fb);
  font-size: 15px;
  color: var(--w50);
  letter-spacing: -0.2px;
  transition: color .25s;
}

.footer-col a:hover {
  color: var(--white);
}

.footer-contact p {
  font-family: var(--fb);
  font-size: 14px;
  color: var(--w50);
  line-height: 1.6;
}

.footer-contact a {
  color: var(--w50);
  transition: color .25s;
}

.footer-contact a:hover {
  color: var(--white);
}

.footer-bottom {
  border-top: 2px solid var(--border);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy,
.footer-rights {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  color: var(--w75);
}

/* ── STATS ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  text-align: center;
}

.stat-card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 32px 20px;
  box-shadow: 0 0 30px rgba(129, 74, 200, 0.12);
}

.stat-card::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(
    circle,
    rgba(129, 74, 200, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.stat-num {
  font-family: var(--fh);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -2px;
  margin-bottom: 6px;
}

.stat-label {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
}

/* ── COURSE CARDS ── */

/* logo */
.academy-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.academy-tag-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.course-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  transition: border-color .3s, transform .3s;
}

.course-card:hover {
  border-color: rgba(129, 74, 200, .5);
  transform: translateY(-3px);
}

.course-icon {
  width: 42px;
  height: 42px;
  background: rgba(129, 74, 200, 0.25);
  border: 1px solid rgba(129, 74, 200, 0.35);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c084fc;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}

.course-card h3 {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.course-card p {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.course-tag {
  display: inline-block;
  font-family: var(--fh);
  font-size: 11px;
  font-weight: 500;
  background: rgba(129, 74, 200, .2);
  color: var(--purple-light);
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.02em;
}

/* ── REVEAL ANIMATION — Modern blur + scale + Y ── */
.reveal {
  opacity: 0;
  transform: translateY(52px) scale(0.97);
  filter: blur(6px);
  transition:
    opacity 0.85s cubic-bezier(0.16,1,0.3,1),
    transform 1.1s cubic-bezier(0.175,0.885,0.32,1.075),
    filter 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform, filter;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

/* reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px) scale(0.97);
  filter: blur(5px);
  transition:
    opacity 0.85s cubic-bezier(0.16,1,0.3,1),
    transform 1.1s cubic-bezier(0.175,0.885,0.32,1.075),
    filter 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform, filter;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0px);
}

/* reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(48px) scale(0.97);
  filter: blur(5px);
  transition:
    opacity 0.85s cubic-bezier(0.16,1,0.3,1),
    transform 1.1s cubic-bezier(0.175,0.885,0.32,1.075),
    filter 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform, filter;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0px);
}

/* Stagger delays — deeper separation for drama */
.rd1 { transition-delay: 0.05s }
.rd2 { transition-delay: 0.18s }
.rd3 { transition-delay: 0.31s }
.rd4 { transition-delay: 0.44s }

.blog-section .rd1 {
    transition-delay: 2.8s !important;
}

.blog-section .rd2 {
    transition-delay: 3.0s !important;
}

.blog-section .rd3 {
    transition-delay: 3.2s !important;
}
.blog-img {
    width: 100%;
    height: 220px;       /* Keep all images the same height */
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: #111;    /* Shows if image doesn't fill */
}

.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Best for blog cards */
    object-position: center;
    display: block;
    transition: transform .4s ease;
}

.blog-card:hover .blog-img img {
    transform: scale(1.05);
}

/* ── RESPONSIVE ── */
@media(max-width:884px) {
  .nav {
    padding: 0 20px;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .hero {
    padding: 80px 24px 60px;
  }

  .hero-cinematic-overlay {
    background:
      radial-gradient(ellipse 86% 76% at 50% 50%, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .52) 66%, #000 100%),
      linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, transparent 20%, transparent 68%, rgba(0, 0, 0, .92) 100%);
  }

  .section,
  .section-sm {
    padding: 60px 24px;
  }

  .grid-2,
  .grid-3,
  .contact-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .service-card {
    flex-direction: column;
    padding: 24px;
  }

  .service-row {
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }

  .service-row .service-image {
    order: 1;
  }

  .service-row .service-content {
    order: 2;
  }

  .services-list {
    gap: 70px;
  }

  .service-icon {
    width: 70px;
    height: 70px;
  }

  .p-card {
    grid-template-columns: 1fr;
    border-radius: 20px;
    min-height: auto;
  }

  .p-card-img {
    width: 100%;
    height: 220px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .05);
  }

  footer {
    padding: 60px 24px 0;
  }

  .footer-top {
    flex-direction: column;
    gap: 40px;
  }

  .footer-cols {
    flex-direction: column;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .cta-box {
    padding: 40px 24px;
  }

  .page-hero {
    padding: 100px 24px 48px;
  }
}

@media(max-width:640px) {
  .nav {
    height: 64px;
    padding: 0 26px;
  }

  .nav-logo {
    height: 38px;
    max-width: 150px;
  }

  .mobile-menu {
    top: 64px;
    padding: 12px 16px 20px;
  }

  .mobile-menu a {
    font-size: 16px;
    padding: 11px 6px;
  }

  /* old hero styles removed - handled in dedicated mobile hero media query */

  .page-hero {
    padding: 90px 18px 42px;
  }

  .page-hero p {
    font-size: 16px;
  }

  .section,
  .section-sm {
    padding: 48px 18px;
  }

  .section-header {
    margin-bottom: 34px;
  }

  .service-card,
  .step-card,
  .testi-card,
  .course-card,
  .p-card-content {
    padding: 20px;
  }

  .p-card {
    border-radius: 16px;
  }

  .p-card-content {
    border-radius: 16px;
  }

  .p-card-img {
    height: 190px;
    border-radius: 16px;
  }

  .contact-grid {
    gap: 34px;
  }

  .contact-info h2 {
    font-size: 26px;
  }

  .cta-box {
    padding: 34px 18px;
  }

  footer {
    padding: 48px 18px 0;
  }

  .footer-top {
    padding-bottom: 42px;
  }
}

@media(max-width:420px) {
  .nav {
    height: 64px;
    padding: 0 26px;
  }

  .nav-logo {
    height: 38px;
    max-width: 150px;
  }

  .mobile-menu {
    top: 64px;
  }

  /* old hero styles removed - handled in dedicated mobile hero media query */

  .section,
  .section-sm {
    padding-left: 14px;
    padding-right: 14px;
  }

  .page-hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .section-title,
  .page-hero h1,
  .cta-box h2 {
    letter-spacing: -.02em;
  }

  .portfolio-title-main,
  .portfolio-title-dim {
    letter-spacing: -1px;
  }

  .p-card-img {
    height: 165px;
  }

  .faq-q {
    gap: 14px;
    padding: 16px;
  }

  .faq-a {
    padding: 0 16px;
  }

  .faq-item.open .faq-a {
    padding: 0 16px 16px;
  }

  .c-link {
    padding: 13px 14px;
  }

  .footer-logo {
    height: 44px;
  }
}

/* ─────────────────────────────────────────────
   MODERN SERVICE SHOWCASE
───────────────────────────────────────────── */
.services-modern-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 60px 40px 100px;
  background: var(--black);
}

.service-showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 60px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at bottom,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 60%),
    linear-gradient(145deg,
      rgba(16, 16, 16, 0.95),
      rgba(8, 8, 8, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.service-showcase:hover {
  border-color: rgba(129, 74, 200, 0.3);
  box-shadow: 0 10px 40px rgba(129, 74, 200, 0.05);
}

.service-showcase.reverse {
  grid-template-columns: 0.9fr 1.1fr;
}

/* purple glow */
.service-showcase::before {
  content: '';
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 74, 200, 0.18), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.service-showcase.reverse::before {
  left: -100px;
  right: auto;
  background: radial-gradient(circle, rgba(223, 122, 254, 0.12), transparent 70%);
}

/* LEFT SIDE */
.service-showcase-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.service-mini-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(129, 74, 200, 0.1);
  border: 1px solid rgba(129, 74, 200, 0.25);
  color: #df7afe;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.service-showcase h2 {
  font-family: var(--fh);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  font-weight: 600;
}

.service-showcase p {
  font-family: var(--fh);
  font-size: 16px;
  line-height: 1.6;
  color: var(--w75);
  margin-bottom: 24px;
}

.service-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}

.service-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fb);
  font-size: 15px;
  color: var(--w75);
}

.service-feature-item::before {
  content: '✦';
  font-size: 10px;
  color: var(--purple-light);
  flex-shrink: 0;
}

/* RIGHT SIDE */
.service-showcase-visual {
  position: relative;
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* floating logos */
.service-float {
  position: absolute;
  object-fit: contain;
  animation: floating 6s ease-in-out infinite;
}

.service-main-icon {
  width: 200px;
  height: auto;
  object-fit: contain;
  animation: floating 5s ease-in-out infinite;
  z-index: 1;
}

.unity-logo {
  width: 180px;
  right: 20px;
  top: 60px;
  z-index: 1;
}

.unreal-logo {
  width: 140px;
  left: 30px;
  bottom: 40px;
  animation-delay: 1.5s;
  z-index: 2;
}

.flutter-logo {
  width: 80px;
  right: 40px;
  bottom: 50px;
  animation-delay: 2.5s;
  z-index: 2;
}

.csharp-logo {
  width: 80px;
  left: 40px;
  bottom: 40px;
  animation-delay: 2s;
  z-index: 2;
}

/* floating animation */
@keyframes floating {

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

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

/* RESPONSIVE */
@media(max-width: 980px) {
  .services-modern-layout {
    padding: 40px 20px 80px;
    gap: 40px;
  }

  .service-showcase,
  .service-showcase.reverse {
    grid-template-columns: 1fr;
    padding: 40px 30px;
    gap: 30px;
    text-align: center;
  }

  .service-showcase.reverse .service-showcase-content {
    order: 1;
  }

  .service-showcase.reverse .service-showcase-visual {
    order: 2;
  }

  .service-showcase-content {
    max-width: 100%;
  }

  .service-features {
    align-items: center;
  }

  .service-showcase-visual {
    height: 280px;
  }

  .service-main-icon {
    width: 150px;
  }

  .unity-logo {
    width: 120px;
    right: 20px;
    top: 30px;
  }

  .unreal-logo {
    width: 90px;
    left: 20px;
    bottom: 20px;
  }

  .flutter-logo {
    width: 60px;
    right: 30px;
    bottom: 20px;
  }

  .csharp-logo {
    width: 60px;
    left: 30px;
    bottom: 20px;
  }
}

@media(max-width: 640px) {
  .service-showcase {
    padding: 30px 20px;
    border-radius: 16px;
  }

  .service-showcase h2 {
    font-size: 28px;
    letter-spacing: -1px;
  }

  .service-showcase p {
    font-size: 14px;
  }

  .service-showcase-visual {
    height: 220px;
  }

  .service-main-icon {
    width: 120px;
  }

  .unity-logo {
    width: 100px;
  }

  .unreal-logo {
    width: 80px;
  }
}

.contact-section {
  background: #000;
  padding: 40px 40px 100px;
}

.contact-wrapper {
  max-width: 1200px;
  margin: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;

  padding: 60px;

  border-radius: 30px;

  background:
    linear-gradient(145deg,
      rgba(10, 10, 10, .95),
      rgba(4, 4, 4, .98));

  border: 1px solid rgba(255, 255, 255, .06);

  box-shadow:
    0 0 50px rgba(129, 74, 200, .06);
}

/* LEFT SIDE (Now used for right-side details card structure in HTML) */
.contact-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.c-link {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(16, 16, 16, 0.95), rgba(8, 8, 8, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  text-decoration: none;
  color: var(--white);
}

.c-link:hover {
  transform: translateY(-4px);
  border-color: rgba(129, 74, 200, 0.4);
  box-shadow: 0 10px 40px rgba(129, 74, 200, 0.08);
}

.c-link-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.c-link-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}

.c-link-icon {
  width: 18px;
  height: 18px;
  color: #814ac8;
  flex-shrink: 0;
}

.c-link-badge {
  background: #814ac8;
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--fh);
  letter-spacing: 0.5px;
}

.c-link-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 14px;
  width: 100%;
}

.c-link-val {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  text-decoration: none;
}

.c-link:hover .c-link-val {
  color: var(--white);
}

/* RIGHT SIDE (Now Form structure) */
.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 500;
  color: var(--w75);
}

.form-input,
.form-textarea,
.form-select {
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 16px;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  outline: none;
  transition: border-color .3s, box-shadow .3s;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #814ac8;
  box-shadow: 0 0 0 4px rgba(129, 74, 200, .12);
}

/* Custom Select Arrow */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.5)' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
  padding-right: 48px;
  cursor: pointer;
}

.form-select option {
  background: #0b0b0b;
  color: var(--white);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-submit {
  height: 58px;
  border-radius: 16px;
  background: #4f1ad6;
  color: var(--white);
  border: none;
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s, opacity .3s;
}

.form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(129, 74, 200, .25);
  opacity: 0.95;
}

/* MOBILE

@media(max-width:884px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
    padding: 32px;
  }
}
*/

@media(max-width:884px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}
.contact-page-hero {
  padding-top: 140px;
  padding-bottom: 100px;

  text-align: center;
}

.contact-page-hero h1 {
  font-size: clamp(32px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: -3px;

  margin-top: 28px;
  margin-bottom: 26px;
}

.contact-page-hero p {
  max-width: 760px;

  margin:
    0 auto 40px;

  font-size: 20px;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.72);
}

.contact-page-hero .hero-btn {
  margin-top: 10px;
}

.contact-wrapper {
  margin-top: 80px;
}

/*about page card design */
.card-glow {
  position: absolute;

  width: 320px;
  height: 320px;

  top: -120px;
  left: -120px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(140, 70, 255, 0.28) 0%,
      rgba(140, 70, 255, 0.12) 35%,
      transparent 70%);

  filter: blur(45px);

  animation: floatGlow 7s ease-in-out infinite;

  pointer-events: none;

  z-index: 0;
}

@keyframes floatGlow {

  0% {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(90px, 20px);
  }

  50% {
    transform: translate(130px, 90px);
  }

  75% {
    transform: translate(40px, 140px);
  }

  100% {
    transform: translate(0px, 0px);
  }

}


.about-card {
  position: relative;
  overflow: hidden;
}

.about-card>* {
  position: relative;
  z-index: 2;
}

.about-section .rd1 {
    transition-delay: 2.6s;
}

.about-section .rd2 {
    transition-delay: 2.8s;
}
/* ── PREMIUM LINE REVEAL ANIMATION ── */

/* Cancel the generic .hero h1 entrance animation so only per-line reveals run */
.premium-hero-title {
  opacity: 0;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  will-change: opacity;
  /* Snap visible the moment JS marks it ready — lines carry all the drama */
  transition: opacity 0s;
}

.premium-hero-title.is-premium-ready {
  opacity: 1;
}

/* Reduced-motion: skip straight to visible */
@media (prefers-reduced-motion: reduce) {
  .premium-hero-title {
    opacity: 1 !important;
    transition: none !important;
  }
  .premium-line {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
}

.premium-line {
  display: block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(28px) scale(0.96);
  will-change: transform, opacity, filter;
  /* animation-delay is set inline per-line by JS */
  animation: premiumLineReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes premiumLineReveal {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(28px) scale(0.96);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0) scale(1);
  }
}

/* ── PERFORMANCE HINTS ── */
.reveal {
  will-change: transform, opacity;
}

.reveal.visible {
  will-change: auto;
}

.hero-bg {
  content-visibility: auto;
  contain: layout paint style;
}

@media(max-width:640px) {
  .portal-svg-runes-outer,
  .portal-svg-geometry-a {
    animation-duration: 18s;
  }

  .portal-svg-runes-inner,
  .portal-svg-geometry-b {
    animation-duration: 10s;
  }

  .hero-fog-b,
  .hero-meteor,
  .hero-stars {
    animation-duration: 18s;
  }

  .hero-particles-b,
  .portal-wave-b {
    display: none;
  }
}

@media(prefers-reduced-motion: reduce) {
  .hero-art,
  .hero-fog,
  .hero-island-drift,
  .hero-controller-drift,
  .hero-portal-field,
  .hero-portal-field>*,
  .hero-portal-smoke,
  .hero-particles,
  .hero-river-shimmer,
  .hero-castle-glow,
  .hero-milky-way,
  .hero-stars,
  .hero-meteor {
    animation: none;
  }
}

/* ── TABLET (641px – 884px) ── */
@media(min-width:768px) and (max-width:884px) {
  .hero {
    padding: 110px 32px 64px;
  }

  .hero-content {
    max-width: 760px;
  }

  .hero h1 {
    font-size: clamp(48px, 8.2vw, 68px);
    line-height: 1.04;
    margin-bottom: 20px;
  }

  .hero-sub {
    max-width: 520px;
    font-size: clamp(15px, 2.2vw, 17px);
    margin-bottom: 30px;
  }

  .hero-art-main {
    background-position: 54% 58%;
  }

  .hero-portal-field {
    top: 48%;
    right: 0;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .p-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .p-card-img {
    height: 240px;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.05);
  }

  .contact-page-hero {
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .service-showcase,
  .service-showcase.reverse {
    padding: 40px 30px;
  }

  .contact-wrapper {
    padding: 32px 24px;
  }
}

/* ── MOBILE (≤ 640px) additional fixes ── */
@media(max-width:640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .p-card {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 16px;
  }

  .p-card-img {
    height: 200px;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.05);
    border-radius: 0 0 16px 16px;
  }

  .p-point {
    font-size: 15px;
    gap: 8px;
  }

  .p-card-title {
    font-size: 28px;
    letter-spacing: -1px;
  }

  .contact-page-hero {
    padding-top: 100px;
    padding-bottom: 60px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .contact-page-hero p {
    font-size: 16px;
  }

  .contact-wrapper {
    padding: 24px 16px;
    border-radius: 20px;
    margin-top: 24px;
  }

  .services-modern-layout {
    padding: 32px 16px 60px;
  }

  .service-showcase {
    padding: 24px 16px;
    border-radius: 14px;
  }

  .service-showcase h2 {
    font-size: clamp(24px, 6vw, 36px);
  }

  .footer-logo {
    height: 52px;
  }

  .section-title h1 {
    font-size: clamp(32px, 8vw, 52px);
    letter-spacing: -2px;
  }

  .service-content h2 {
    font-size: clamp(24px, 7vw, 36px);
  }

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

  .blog-body {
    padding: 18px;
  }

  .filter-tabs {
    gap: 8px;
  }

  .filter-tab {
    font-size: 13px;
    padding: 7px 14px;
  }
}

/* ── DEDICATED TABLET PORTRAIT HERO (768px – 1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-art {
    background-image: url("images/tab responsive hero page vertical.png") !important;
  }

  .hero-art-cover,
  .hero-art-main {
    background-size: cover !important;
    background-position: center center !important;
  }

  .hero-art-cover {
    filter: blur(18px) saturate(1.28) brightness(.76) !important;
    opacity: .82 !important;
  }

  .hero-art-main {
    filter: saturate(1.16) contrast(1.03) brightness(1.03) !important;
  }

  .hero {
    min-height: 85svh !important;
    padding: 130px 40px 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── DEDICATED MOBILE PORTRAIT HERO (< 768px) ── */
@media(max-width: 767px) {
  /* Swapping to the portrait image asset */
  .hero-art {
    background-image: url("images/mobile responive  home profile.png") !important;
  }

  /* Fullscreen background behavior with cover & centered position */
  .hero-art-cover,
  .hero-art-main {
    background-size: cover !important;
    background-position: center center !important;
  }

  .hero-art-cover {
    filter: blur(18px) saturate(1.28) brightness(.76) !important;
    opacity: .82 !important;
  }

  .hero-art-main {
    filter: saturate(1.16) contrast(1.03) brightness(1.03) !important;
  }

  /* Compact Hero height and balanced padding (moves content slightly down) */
  .hero {
    min-height: 95svh !important;
    padding: 120px 18px 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* Spacing Rhythm */
  .hero-badge {
    display: inline-flex !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
  }

  .hero h1 {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    line-height: 1.15 !important;
    letter-spacing: -1.2px !important;
    margin: 0 auto 12px !important;
    max-width: 12ch !important;
  }

  .hero h1 .word {
    display: inline-block !important;
  }

  .hero-sub {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    max-width: 90% !important;
    margin: 0 auto 24px !important;
    padding: 0 !important;
  }

  /* Symmetrical Side-by-Side Buttons */
  .hero-ctas {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .hero-ctas .btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 110px !important;
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    min-height: 40px !important;
    border-radius: 6px !important;
    justify-content: center !important;
  }

  .hero-ctas .btn-beam-wrap {
    flex: 0 1 auto !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .hero-ctas .btn-beam-wrap .btn {
    width: 100% !important;
  }

  .btn,
  .btn-secondary {
    min-height: 40px !important;
    font-size: 13.5px !important;
    padding: 9px 18px !important;
    border-radius: 6px !important;
  }

  .hero-ctas .btn::after {
    display: none !important; /* Hide extra arrow suffix on mobile buttons for compact, clean look */
  }

  /* Portrait Overlay Coordinates (aligned with portrait artwork) */
  .hero-portal-field {
    right: 3% !important;
    left: auto !important;
    top: 62% !important;
    bottom: auto !important;
    width: clamp(100px, 26vw, 130px) !important;
    opacity: .76 !important;
    transform: translateZ(0) !important;
  }

  .hero-portal-smoke {
    right: -6% !important;
    left: auto !important;
    top: 52% !important;
    bottom: auto !important;
    width: clamp(180px, 45vw, 240px) !important;
    height: clamp(160px, 40vw, 220px) !important;
    opacity: .34 !important;
    filter: blur(14px) !important;
  }

  .hero-controller-drift {
    left: 6% !important;
    right: auto !important;
    top: 48% !important;
    bottom: auto !important;
    width: clamp(75px, 20vw, 95px) !important;
    height: clamp(58px, 15vw, 72px) !important;
    opacity: .28 !important;
  }

  .hero-castle-glow {
    inset: auto 30% 12% 30% !important;
    height: 22% !important;
    opacity: .32 !important;
  }

  .hero-river-shimmer {
    inset: auto 32% 0 28% !important;
    height: 24% !important;
    opacity: .28 !important;
  }

  /* Optimize secondary elements for mobile visual performance */
  .hero-island-drift,
  .hero-meteor-b {
    display: none !important;
  }

  .hero-stars {
    opacity: .46 !important;
  }

  .hero-milky-way {
    opacity: .34 !important;
  }

  .hero-fog-a,
  .hero-fog-b {
    opacity: .28 !important;
  }

  .hero-particles {
    opacity: .54 !important;
  }
}

/* ── SMALL PHONE (≤ 380px) ── */
@media(max-width:380px) {
  .p-card-title {
    font-size: 24px;
  }

  .hero h1 {
    font-size: clamp(25px, 8.5vw, 29px) !important;
    letter-spacing: -0.8px !important;
    max-width: 12ch !important;
  }

  .stat-num {
    font-size: 32px;
  }

  .service-showcase h2 {
    font-size: 22px;
  }

  .contact-wrapper {
    padding: 20px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MODERN PREMIUM ANIMATIONS — Enhancement Layer
════════════════════════════════════════════════════════════════ */

/* ─── Custom cursor glow orb ─── */
#cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129,74,200,0.13) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  will-change: transform;
  mix-blend-mode: screen;
  transition: opacity 0.3s;
}

/* ─── Scroll progress bar ─── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
  z-index: 9999;
  pointer-events: none;
}

/* ─── nav scroll shadow ─── */
.nav.scrolled {
  background: rgba(0,0,0,0.97);
  box-shadow: 0 4px 24px rgba(0,0,0,0.7);
}

/* ─── Section badge shimmer ─── */
.section-badge {
  position: relative;
  overflow: hidden;
}
.section-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  animation: badgeShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badgeShimmer {
  0%   { left: -80%; opacity: 0; }
  30%  { opacity: 1; }
  60%  { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* ─── Step cards: numbered label glow on hover ─── */
.step-num {
  transition: all 0.4s var(--ease);
}
.step-card:hover .step-num {
  background: linear-gradient(135deg, rgba(129,74,200,0.35), rgba(223,122,254,0.2));
  border-color: rgba(129,74,200,0.7);
  color: var(--purple-light);
  box-shadow: 0 0 14px rgba(129,74,200,0.3);
}

/* ─── Testimonial cards: star pop on hover ─── */
.testi-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 14px 42px rgba(0,0,0,0.55), 0 0 28px rgba(129,74,200,0.14);
}
.testi-card:hover .star {
  animation: starPop 0.4s var(--spring-ease) forwards;
  display: inline-block;
}
.testi-card:hover .star:nth-child(1) { animation-delay: 0.00s }
.testi-card:hover .star:nth-child(2) { animation-delay: 0.06s }
.testi-card:hover .star:nth-child(3) { animation-delay: 0.12s }
.testi-card:hover .star:nth-child(4) { animation-delay: 0.18s }
.testi-card:hover .star:nth-child(5) { animation-delay: 0.24s }
@keyframes starPop {
  0%   { transform: scale(1) }
  50%  { transform: scale(1.45) rotate(12deg); color: #ffcc44; }
  100% { transform: scale(1) }
}

/* ─── Portfolio cards: image zoom on hover ─── */
.p-card-img img {
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.p-card:hover .p-card-img img {
  transform: scale(1.07);
}

/* ─── Course cards: icon bounce on hover ─── */
.course-card:hover .course-icon {
  animation: iconBounce 0.5s var(--spring-ease) forwards;
}
@keyframes iconBounce {
  0%   { transform: scale(1) translateY(0) }
  40%  { transform: scale(1.28) translateY(-5px) }
  75%  { transform: scale(0.96) translateY(1px) }
  100% { transform: scale(1.06) translateY(-4px) }
}

/* ─── CTA Box: border glow pulse on hover ─── */
.cta-box {
  transition: box-shadow 0.45s var(--ease), transform 0.4s var(--spring-ease);
  border: 1px solid rgba(129,74,200,0.22);
}
.cta-box:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(129,74,200,0.42),
    0 0 48px rgba(129,74,200,0.18),
    0 20px 50px rgba(0,0,0,0.5);
}

/* ─── FAQ: active state glow ─── */
.faq-item.open {
  background: rgba(129,74,200,0.06);
  border-color: rgba(129,74,200,0.5);
  box-shadow: 0 0 20px rgba(129,74,200,0.1);
}

/* ─── Magnetic button radial highlight ─── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.18) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover::before {
  opacity: 1;
}

/* ─── Service icon float on hover ─── */
.service-icon {
  transition: transform 0.55s var(--spring-ease);
}
.service-card:hover .service-icon {
  transform: translateY(-7px) scale(1.07);
}

/* ─── hero-badge dot pulse ring ─── */
.badge-dot {
  position: relative;
}
.badge-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--purple-light);
  animation: dotRing 2s ease-in-out infinite;
  opacity: 0;
}
@keyframes dotRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  80%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ─── Reduced-motion: honour user preference ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    transition: opacity 0.4s ease !important;
    transform: none !important;
    filter: none !important;
  }
  .card:hover,
  .p-card:hover,
  .testi-card:hover,
  .course-card:hover,
  .cta-box:hover {
    transform: none !important;
  }
  .card::after,
  .badge-dot::after,
  .section-badge::after {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE ANIMATION RESPONSIVE OVERRIDES
   Ensures all new animations feel native & performant on touch
════════════════════════════════════════════════════════════ */

/* ── Touch devices: disable hover-only effects ── */
@media (pointer: coarse) {
  /* Remove shimmer sweep (hover-only, doesn't work on touch) */
  .card::after {
    display: none;
  }

  /* Cards: only lift slightly instead of full tilt */
  .card:hover,
  .card:active {
    transform: translateY(-3px) scale(1.005);
    box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 18px rgba(129,74,200,0.1);
  }

  /* Portfolio cards: gentler hover */
  .p-card:active {
    border-color: rgba(129,74,200,0.35);
    transform: translateY(-2px);
  }

  /* Testi cards: no scale on touch */
  .testi-card:hover,
  .testi-card:active {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }

  /* Service icon: no float on touch */
  .service-card:hover .service-icon {
    transform: none;
  }

  /* CTA box: minimal lift */
  .cta-box:hover,
  .cta-box:active {
    transform: translateY(-2px);
  }

  /* Course card: no bounce */
  .course-card:hover .course-icon {
    animation: none;
  }

  /* Magnetic btn radial — not applicable on touch */
  .btn-primary::before {
    display: none;
  }

  /* Star pop — disable on touch (no persistent hover) */
  .testi-card:hover .star {
    animation: none;
  }
}

/* ── Small screens (≤ 768px): lighter reveal animations ── */
@media (max-width: 768px) {
  /* Reduce blur + translate for smoother GPU performance */
  .reveal {
    transform: translateY(32px) scale(0.98);
    filter: blur(3px);
    transition:
      opacity 0.7s cubic-bezier(0.16,1,0.3,1),
      transform 0.9s cubic-bezier(0.175,0.885,0.32,1.075),
      filter 0.6s cubic-bezier(0.16,1,0.3,1);
  }

  .reveal-left {
    transform: translateX(-28px) scale(0.98);
    filter: blur(2px);
    transition:
      opacity 0.7s cubic-bezier(0.16,1,0.3,1),
      transform 0.9s cubic-bezier(0.175,0.885,0.32,1.075),
      filter 0.6s cubic-bezier(0.16,1,0.3,1);
  }

  .reveal-right {
    transform: translateX(28px) scale(0.98);
    filter: blur(2px);
    transition:
      opacity 0.7s cubic-bezier(0.16,1,0.3,1),
      transform 0.9s cubic-bezier(0.175,0.885,0.32,1.075),
      filter 0.6s cubic-bezier(0.16,1,0.3,1);
  }

  /* Tighten stagger — feels snappier on small screens */
  .rd1 { transition-delay: 0.03s }
  .rd2 { transition-delay: 0.10s }
  .rd3 { transition-delay: 0.17s }
  .rd4 { transition-delay: 0.24s }

  /* Section title word-split: ensure proper wrapping */
  .section-title .split-word {
    display: inline-block;
    white-space: normal;
    word-break: normal;
  }

  /* Section badge shimmer: slightly slower for readability */
  .section-badge::after {
    animation-duration: 4.5s;
  }

  /* Scroll progress bar: slightly thicker on mobile */
  #scroll-progress {
    height: 3px;
  }

  /* Reduce hero badge dot ring size */
  .badge-dot::after {
    animation: dotRingMobile 2s ease-in-out infinite;
  }
  @keyframes dotRingMobile {
    0%   { transform: scale(1); opacity: 0.6; }
    80%  { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
  }

  /* Step card: simpler glow on hover/active */
  .step-card:hover .step-num,
  .step-card:active .step-num {
    box-shadow: 0 0 8px rgba(129,74,200,0.25);
  }

  /* FAQ active: lighter glow */
  .faq-item.open {
    box-shadow: 0 0 12px rgba(129,74,200,0.08);
  }
}

/* ── Extra small (≤ 480px): minimal motion for low-end devices ── */
@media (max-width: 480px) {
  .reveal,
  .reveal-left,
  .reveal-right {
    transform: translateY(20px);
    filter: blur(0px); /* no blur on very small screens — GPU relief */
    transition:
      opacity 0.65s ease,
      transform 0.75s cubic-bezier(0.175,0.885,0.32,1.075);
  }

  .reveal.visible,
  .reveal-left.visible,
  .reveal-right.visible {
    transform: translateY(0);
    filter: none;
  }

  /* Stagger: minimal delay on small phones */
  .rd1 { transition-delay: 0.02s }
  .rd2 { transition-delay: 0.07s }
  .rd3 { transition-delay: 0.12s }
  .rd4 { transition-delay: 0.17s }

  /* Section badge: disable shimmer on very small screens */
  .section-badge::after {
    display: none;
  }

  /* Portfolio image: no zoom on tiny screens */
  .p-card:hover .p-card-img img,
  .p-card:active .p-card-img img {
    transform: none;
  }

  /* CTA box: no border animation */
  .cta-box:hover,
  .cta-box:active {
    transform: none;
    box-shadow: none;
  }
}

/* ── Mobile menu: slide-down animation ── */
.mobile-menu {
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
  display: none;
}

.mobile-menu.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  animation: mobileMenuIn 0.32s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes mobileMenuIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Mobile menu links: staggered fade-in ── */
.mobile-menu.open a:nth-child(1) { animation: linkFadeIn 0.3s ease 0.05s both; }
.mobile-menu.open a:nth-child(2) { animation: linkFadeIn 0.3s ease 0.10s both; }
.mobile-menu.open a:nth-child(3) { animation: linkFadeIn 0.3s ease 0.15s both; }
.mobile-menu.open a:nth-child(4) { animation: linkFadeIn 0.3s ease 0.20s both; }
.mobile-menu.open a:nth-child(5) { animation: linkFadeIn 0.3s ease 0.25s both; }
.mobile-menu.open a:nth-child(6) { animation: linkFadeIn 0.3s ease 0.30s both; }

@keyframes linkFadeIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Hamburger: animated X on open ── */
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.hamburger span {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease, background 0.2s;
}

/* ── contact card  layout solve ── */
/* CONTACT FORM MOBILE FIX */
@media (max-width: 768px) {

  .form-row {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .form-field {
    width: 100%;
  }

  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .contact-wrapper {
    padding: 20px;
    overflow: hidden;
  }
}

/* Cinematic Text Animations */
@keyframes blurRevealCustom {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeUpBtn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-custom-title .hero-word {
  display: inline-block;
  opacity: 0;
  animation: blurRevealCustom 1.1s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  margin-right: 0.25em;
}

.hero-custom-sub .hero-sub-word {
  display: inline-block;
  opacity: 0;
  animation: blurRevealCustom 1.1s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  margin-right: 0.25em;
}

.hero-custom-ctas {
  opacity: 0;
  animation: fadeUpBtn 1s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
/* =========================================================
   ZOHO CRM — PURE GLASSMORPHISM
   Transparent / Minimal / Dark Purple Theme
   HTML + Zoho fields remain unchanged
========================================================= */

.crm-overlay {
    --crm-purple: #814AC8;
    --crm-dark-purple: #2A1642;
    --crm-dark-purple-2: #351C50;

    --crm-white: #F5F3F8;
    --crm-muted: #A09AAE;

    position: fixed;
    inset: 0;

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

    padding: 24px;

    z-index: 1000;

    /* Keep the page visible behind the glass */
    background: rgba(0, 0, 0, 0.62);

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    overflow-y: auto;
}

.crm-overlay.visible {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   MAIN GLASS CARD
========================================================= */

.crm-wrap {
    position: relative;

    width: 100%;
    max-width: 470px;

    border-radius: 22px;

    /*
       IMPORTANT:
       Very transparent background.
       This is what creates the real glass appearance.
    */
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );

    /*
       Glass border
    */
    border: 1px solid rgba(255, 255, 255, 0.18);

    /*
       ONLY a subtle neutral shadow.
       NO large purple glow.
    */
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /*
       Main glass effect
    */
    backdrop-filter:
        blur(28px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(135%);

    transform:
        translateY(15px)
        scale(0.98);

    transition:
        transform 0.35s cubic-bezier(.2, .8, .2, 1);

    isolation: isolate;
}

.crm-overlay.visible .crm-wrap {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   SUBTLE GLASS HIGHLIGHT
   Gives the card a glass surface without a purple glow
========================================================= */

.crm-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            transparent 35%,
            transparent 70%,
            rgba(129, 74, 200, 0.025)
        );

    z-index: -1;
}


/* =========================================================
   FORM PANEL
========================================================= */

.crm-form-panel {
    position: relative;

    z-index: 2;

    padding: 38px 34px 34px;

    font-family:
        'Figtree',
        sans-serif;

    color: var(--crm-white);
}

/* =========================================================
   TOP USER ICON — CSS ONLY
   Sits half outside the glass card
========================================================= */

/* =========================================================
   TOP USER ICON
   Dark purple filled circle + white user icon
========================================================= */

.crm-form-panel::before {
    content: "";

    position: absolute;

    top: -38px;
    left: 50%;

    width: 70px;
    height: 70px;

    transform: translateX(-50%);

    border-radius: 50%;

    /* SOLID DARK PURPLE CIRCLE */
    background-color: #241035;

    /* White user icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='21' r='9' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Cpath d='M16 52c1-10 7-16 16-16s15 6 16 16' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 42px 42px;

    /* Subtle glass/purple edge */
    border: 1px solid rgba(129, 74, 200, 0.65);

    /* Very subtle shadow — not a glow */
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45);

    z-index: 20;

    pointer-events: none;
}
/* =========================================================
   HEADING
========================================================= */

.crm-form-panel h2 {
    margin: 0 0 24px;

    color: #F7F5FA;

    font-family:
        'Figtree',
        sans-serif;

    font-size: 27px;

    line-height: 1.2;

    font-weight: 650;

    letter-spacing: -0.025em;
}


/*
   If your old subtitle exists, hide it.
   This removes:
   "Just the essentials — required."
*/

.crm-form-panel .crm-sub {
    display: none;
}


/* =========================================================
   NAME ROW
========================================================= */

.crm-row {
    display: flex;

    width: 100%;

    gap: 14px;
}


/* =========================================================
   FIELD
========================================================= */

.crm-field {
    flex: 1;

    min-width: 0;

    margin-bottom: 19px;
}


/* =========================================================
   LABEL
========================================================= */
.crm-field label {
    display: block;

    margin-bottom: 8px;

    color: rgba(245, 243, 248, 0.82);

    font-family:
        'Figtree',
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* Required star */

.crm-field label .crm-req {
    color: #814AC8;

    margin-left: 2px;
}


/* Optional */

.crm-field label .crm-opt {
    color: rgba(245, 243, 248, 0.45);

    letter-spacing: 0;

    text-transform: none;

    font-weight: 400;
}


/* =========================================================
   GLASS INPUTS
========================================================= */

.crm-field input,
.crm-field select {
    width: 100%;

    height: 49px;

    box-sizing: border-box;

    padding: 0 14px;

    border-radius: 11px;

    /*
       Transparent field
    */
    background:
        rgba(255, 255, 255, 0.045);

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

    outline: none;

    color: #F5F3F8;

    font-family:
        'Figtree',
        sans-serif;

    font-size: 13px;

    /*
       Small inner highlight
    */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.crm-field input::placeholder {
    color: rgba(220, 215, 228, 0.42);

    opacity: 1;
}


/* =========================================================
   HOVER
========================================================= */

.crm-field input:hover,
.crm-field select:hover {
    background:
        rgba(255, 255, 255, 0.06);

    border-color:
        rgba(255, 255, 255, 0.20);
}


/* =========================================================
   FOCUS
========================================================= */

.crm-field input:focus,
.crm-field select:focus {

    background:
        rgba(129, 74, 200, 0.075);

    border-color:
        rgba(129, 74, 200, 0.55);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(129, 74, 200, 0.08);
}


/* =========================================================
   PHONE NUMBER FIELD
   Keeps +91 visually separated from typed number
========================================================= */

.crm-field input[type="tel"] {
    letter-spacing: 0.01em;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

/* =========================================================
   DARK PURPLE SUBMIT BUTTON
========================================================= */

.crm-submit-btn {
    width: 100%;
    height: 48px;

    margin-top: 4px;

    border: 1px solid rgba(129, 74, 200, 0.45);

    border-radius: 10px;

    background: #30144A;

    color: #FFFFFF;

    font-family: 'Figtree', sans-serif;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.01em;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 6px 18px rgba(0, 0, 0, 0.35);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.crm-submit-btn:hover {
    background: #3B1A5A;

    border-color:
        rgba(155, 98, 226, 0.55);

    transform: translateY(-1px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.4);
}


.crm-submit-btn:active {
    transform: translateY(0);
}

/* =========================================================
   BUTTON HOVER
========================================================= */

.crm-submit-btn:hover {

    transform:
        translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #42245F,
            #30194A
        );

    border-color:
        rgba(129, 74, 200, 0.65);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 10px 25px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   BUTTON ACTIVE
========================================================= */
.crm-submit-btn:active {
    transform: translateY(0);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.crm-modal-close {

    position: absolute;

    top: 16px;
    right: 16px;

    width: 31px;
    height: 31px;

    border-radius: 50%;

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

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

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

    font-size: 16px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    z-index: 10;

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

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.crm-modal-close:hover {

    color: #FFFFFF;

    background:
        rgba(129, 74, 200, 0.12);

    border-color:
        rgba(129, 74, 200, 0.35);
}


/* =========================================================
   THANK YOU MESSAGE
========================================================= */

.crm-thankyou-mini {

    display: none;

    margin-top: 14px;

    padding: 11px 13px;

    border:
        1px solid
        rgba(129, 74, 200, 0.25);

    background:
        rgba(129, 74, 200, 0.06);

    border-radius: 9px;

    font-family:
        'Figtree',
        sans-serif;

    font-size: 12px;

    color: var(--crm-white);

    text-align: center;

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

.crm-thankyou-mini.visible {
    display: block;
}


/* =========================================================
   AUTOFILL
========================================================= */

.crm-form-panel input:-webkit-autofill,
.crm-form-panel input:-webkit-autofill:hover,
.crm-form-panel input:-webkit-autofill:focus,
.crm-form-panel input:-webkit-autofill:active {

    -webkit-box-shadow:
        0 0 0 1000px rgba(20, 17, 28, 0.95) inset !important;

    box-shadow:
        0 0 0 1000px rgba(20, 17, 28, 0.95) inset !important;

    -webkit-text-fill-color:
        #F5F3F8 !important;

    caret-color:
        #FFFFFF !important;

    transition:
        background-color 9999s ease-in-out 0s;
}


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

@media (max-width: 480px) {

    .crm-overlay {
        padding: 16px;
    }

    .crm-wrap {
        max-width: 100%;

        border-radius: 19px;
    }

    .crm-form-panel {
        padding: 32px 20px 25px;
    }

    .crm-form-panel h2 {
        font-size: 24px;

        margin-bottom: 21px;
    }

    .crm-row {
        flex-direction: column;

        gap: 0;
    }

    .crm-field {
        margin-bottom: 16px;
    }

    .crm-field input,
    .crm-field select {
        height: 47px;
    }

    .crm-submit-btn {
        height: 48px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .crm-wrap {
        transition: none;
    }

    .crm-submit-btn {
        transition: none;
    }

    .crm-overlay {
        transition: none;
    }
}
/* =========================================================
   TELEPHONE INPUT — DARK PURPLE GLASS DROPDOWN
   ========================================================= */

/* Main telephone input */
.iti {
    width: 100%;
    position: relative;
}

.iti__tel-input {
    width: 100% !important;
    height: 58px;
    padding-left: 150px !important;

    background: rgba(20, 14, 32, 0.45) !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;

    outline: none !important;
    box-shadow: none !important;
    font-family: 'Figtree', sans-serif !important;
}

.iti__tel-input::placeholder {
    color: rgba(255, 255, 255, 0.42) !important;
}


/* =========================================================
   COUNTRY SELECT BUTTON
   ========================================================= */

.iti__selected-country {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

.iti__selected-country:hover,
.iti__selected-country:focus {
    background: transparent !important;
}

.iti__selected-dial-code {
    color: #ffffff !important;
}


/* =========================================================
   DROPDOWN CONTAINER
   ========================================================= */

.iti__dropdown-content {
    background: rgba(12, 8, 20, 0.97) !important;

    border: 1px solid rgba(131, 71, 255, 0.45) !important;
    border-radius: 14px !important;

    box-shadow: none !important;

    overflow: hidden !important;
}


/* =========================================================
   SEARCH AREA
   ========================================================= */

.iti__search-input {
    width: calc(100% - 24px) !important;

    margin: 12px !important;
    padding: 12px 14px !important;

    background: rgba(30, 20, 45, 0.95) !important;
    color: #ffffff !important;

    border: 1px solid rgba(131, 71, 255, 0.35) !important;
    border-radius: 10px !important;

    outline: none !important;
    box-shadow: none !important;

    font-family: 'Figtree', sans-serif !important;
}


/* Search placeholder */
.iti__search-input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}


/* Search focus */
.iti__search-input:focus {
    background: rgba(35, 23, 52, 0.98) !important;

    border-color: rgba(131, 71, 255, 0.65) !important;

    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   COUNTRY LIST
   ========================================================= */

.iti__country-list {
    background: rgba(12, 8, 20, 0.98) !important;

    border: none !important;
    box-shadow: none !important;

    scrollbar-color: #6736a8 transparent !important;
    scrollbar-width: thin !important;
}


/* =========================================================
   COUNTRY ITEMS
   ========================================================= */

.iti__country {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.88) !important;

    padding: 12px 14px !important;

    border: none !important;
}


/* Hover */
.iti__country:hover {
    background: rgba(131, 71, 255, 0.16) !important;
}


/* Selected country */
.iti__country--highlight {
    background: rgba(131, 71, 255, 0.20) !important;
}


/* Country name */
.iti__country-name {
    color: #ffffff !important;
}


/* Dial code */
.iti__dial-code {
    color: rgba(255, 255, 255, 0.55) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

/* Chrome / Edge / Safari */
.iti__country-list::-webkit-scrollbar {
    width: 6px !important;
}

.iti__country-list::-webkit-scrollbar-track {
    background: transparent !important;
    border: none !important;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: rgba(131, 71, 255, 0.65) !important;
    border-radius: 10px !important;
}
.iti__country-list::-webkit-scrollbar-thumb:hover {
    background: rgba(131, 71, 255, 0.9) !important;
}


/* =========================================================
   REMOVE WHITE EDGES / BORDERS FROM LIBRARY
   ========================================================= */

.iti__dropdown-content *,
.iti__country-list *,
.iti__search-input {
    box-sizing: border-box;
}


/* Remove possible default white backgrounds */
.iti__dropdown-content,
.iti__country-list,
.iti__country,
.iti__search-input {
    -webkit-appearance: none !important;
    appearance: none !important;
}


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

@media (max-width: 600px) {

    .iti__dropdown-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .iti__search-input {
        width: calc(100% - 20px) !important;
        margin: 10px !important;
    }

    .iti__country {
        padding: 11px 12px !important;
    }
}
/* ================================
   PHONE INPUT - REDUCE COUNTRY CODE GAP
   ================================ */

.iti {
    width: 100%;
}

.iti__selected-country {
    padding: 0 6px 0 10px !important;
}

/* Reduce the gap between +91 and phone number */
.iti__selected-dial-code {
    margin-right: 4px !important;
}

/* Phone number typing area */
.iti input[type="tel"] {
    padding-left: 85px !important;
}

/* Keep the phone number close to +91 */
.iti__tel-input {
    padding-left: 85px !important;
}

/* Prevent the country selector from becoming unnecessarily wide */
.iti__selected-country-primary {
    padding-right: 4px !important;
}

/* Keep the flag + dropdown arrow compact */
.itiselected-country .itiflag {
    margin-right: 4px !important;
}

html, body {
    margin: 0;
    padding: 0;
  }

  .certifications-section {
    background: #0a0a0c;
    padding: 100px 24px;
    font-family: inherit;
  }

  .cert-container {
    max-width: 1100px;
    margin: 0 auto;
  }

  .cert-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px;
  }

  .cert-pill {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid rgba(129, 74, 200, 0.4);
    border-radius: 999px;
    color: #a97ee0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
  }

 .cert-title {
    color: #ffffff;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 16px;
  }

  .cert-gradient {
    color: #ffffff;
  }

  .cert-subtext {
    color: #a1a1aa;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
  }

  .cert-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .cert-card {
    position: relative;
    overflow: hidden;

    background: #121014;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px;

    transition: border-color 0.25s ease, transform 0.25s ease;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 0 40px rgba(129,74,200,0.08);
}

.cert-card:hover {
    border-color: rgba(129, 74, 200, 0.45);
    transform: translateY(-4px);
}
.cert-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left,
        rgba(129,74,200,0.18),
        transparent 45%);
    pointer-events: none;
}
.cert-card::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 80%;
    height: 220%;

    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255,255,255,0.03) 45%,
        rgba(129,74,200,0.16) 50%,
        rgba(255,255,255,0.03) 55%,
        transparent 65%
    );

    transform: rotate(20deg);
    animation: cardShine 6s linear infinite;
    pointer-events: none;
}

@keyframes cardShine {
    0% {
        transform: translateX(-180%) rotate(20deg);
    }

    100% {
        transform: translateX(260%) rotate(20deg);
    }
}

@keyframes certGlow {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(70px, 50px);
    }
}

.cert-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

  .cert-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #814ac8, #6b3aa8);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cert-icon svg {
    width: 24px;
    height: 24px;
  }

  .cert-badge {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(129, 74, 200, 0.15);
    color: #c9a8ec;
    font-size: 12px;
    font-weight: 600;
  }

  .cert-card-title {
    color: #f5f5f5;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
  }

  .cert-card-desc {
    color: #a1a1aa;
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 20px;
  }

  .cert-benefits {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding: 0;
    margin: 0 0 24px;
  }

  .cert-benefits li {
    color: #d4d4d8;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .cert-benefits li::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: #814ac8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .cert-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #a1a1aa;
    font-size: 13px;
  }

  .cert-footer span {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .cert-mini-icon {
    width: 14px;
    height: 14px;
    color: #814ac8;
  }

  .cert-id {
    font-family: monospace;
    color: #71717a;
  }

  @media (max-width: 768px) {
    .cert-grid { grid-template-columns: 1fr; }
    .cert-title { font-size: 30px; }
    .certifications-section { padding: 64px 16px; }
  }