*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --cyan: #00D4FF;
  --cyan-dark: #00A8CC;
  --black: #0A0A0A;
  --bg-nav: #0C0C12;
  --bg-card: #12121A;
  --bg-border: #181822;
  --t100: #FFFFFF;
  --t80: #CCCCCC;
  --t50: #888888;
  --t30: #555555;
  --border: rgba(255, 255, 255, 0.05);
  --border-cyan: rgba(0, 212, 255, 0.15);
  --border-cyan-h: rgba(0, 212, 255, 0.35);
  --icon-bg: rgba(0, 212, 255, 0.06);
  --icon-bdr: rgba(0, 212, 255, 0.12);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--black);
  color: var(--t100);
  overflow-x: hidden;
}

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

/* ── DOT GRID BACKGROUND ───────────────────────────── */
.dot-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 212, 255, 0.12) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* ── LOGO ──────────────────────────────────────────── */
.logo {
  font-family: 'Poppins', sans-serif;
  font-size: 21px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.logo-mystiq {
  color: var(--cyan);
  font-weight: 500;
}

.logo-media {
  color: var(--t100);
  font-weight: 700;
}

.logo-icon {
  margin-right: 7px;
}

/* ── NAVBAR (Mystiq Media – v2) ──────────────────────── */
:root {
  --mm-bg: #0a0a0a;
  --mm-bg-nav: #0c0c12;
  --mm-cyan: #00d4ff;
  --mm-cyan-dark: #00a8cc;
  --mm-cyan-glow: #00ffff;
  --mm-white: #ffffff;
  --mm-white-80: #cccccc;
  --mm-white-50: #888888;
  --mm-border: rgba(255, 255, 255, 0.08);
  --navbar-h: 72px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  height: var(--navbar-h);
  background: var(--mm-bg);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.navbar--scrolled {
  background: rgba(10, 10, 10, 0.88);
  border-bottom-color: var(--mm-border);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.navbar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--mm-cyan) 40%, var(--mm-cyan) 60%, transparent 100%);
  opacity: 0;
  transition: opacity var(--transition);
}

.navbar--scrolled::after {
  opacity: 0.35;
}

.navbar__inner {
  height: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.navbar__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar__logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  transition: opacity var(--transition);
}

.navbar__logo:hover .navbar__logo-img {
  opacity: 0.85;
}

/* Desktop nav */
.navbar__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.navbar__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
}

.navbar__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mm-white-80);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color var(--transition);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.navbar__nav-link:hover,
.navbar__nav-link:focus-visible {
  color: var(--mm-white);
  outline: none;
}

.navbar__nav-link-underline {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--mm-cyan);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.navbar__nav-link:hover .navbar__nav-link-underline,
.navbar__nav-link:focus-visible .navbar__nav-link-underline {
  transform: scaleX(1);
}

/* Dropdown */
.navbar__dropdown-wrap {
  position: relative;
}

.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 180px;
  background: var(--mm-bg-nav);
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  padding: 8px 4px 4px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.navbar__dropdown--open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.navbar__dropdown::before {
  content: "";
  display: block;
  height: 1.5px;
  background: linear-gradient(90deg, var(--mm-cyan), transparent);
  margin: 0 4px 4px;
  border-radius: 2px;
  opacity: 0.5;
}

.navbar__dropdown-item {
  display: block;
  padding: 9px 14px;
  border-radius: 5px;
  color: var(--mm-white-80);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background var(--transition), color var(--transition);
}

.navbar__dropdown-item:hover {
  background: rgba(0, 212, 255, 0.07);
  color: var(--mm-white);
}

/* CTA */
.navbar__cta {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.375rem;
  border-radius: 999px;
  border: 1.5px solid var(--mm-cyan);
  background: transparent;
  color: var(--mm-cyan);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}

.navbar__cta:hover,
.navbar__cta:focus-visible {
  background: var(--mm-cyan);
  color: var(--mm-bg);
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.35);
  outline: none;
}

.navbar__cta-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(0, 212, 255, 0.25) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.navbar__cta:hover .navbar__cta-glow {
  transform: translateX(120%);
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 4px;
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.navbar__hamburger-bar {
  display: block;
  height: 2px;
  background: var(--mm-white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), width var(--transition);
}

.navbar__hamburger-bar:nth-child(1) {
  width: 24px;
}

.navbar__hamburger-bar:nth-child(2) {
  width: 18px;
}

.navbar__hamburger-bar:nth-child(3) {
  width: 24px;
}

.navbar__hamburger--open .navbar__hamburger-bar:nth-child(1) {
  width: 22px;
  transform: translateY(7px) rotate(45deg);
}

.navbar__hamburger--open .navbar__hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: translateX(8px);
}

.navbar__hamburger--open .navbar__hamburger-bar:nth-child(3) {
  width: 22px;
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.navbar__mobile-menu {
  position: fixed;
  inset-inline: 0;
  top: var(--navbar-h);
  background: var(--mm-bg-nav);
  border-bottom: 1px solid var(--mm-border);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  z-index: 999;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s;
}

.navbar__mobile-menu--open {
  max-height: 520px;
  visibility: visible;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

.navbar__mobile-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem) 1.75rem;
  gap: 0.25rem;
}

.navbar__mobile-link {
  display: block;
  width: 100%;
  padding: 0.75rem 0;
  color: var(--mm-white-80);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--mm-border);
  cursor: pointer;
  transition: color var(--transition), padding-left var(--transition);
}

.navbar__mobile-link:hover {
  color: var(--mm-cyan);
  padding-left: 0.5rem;
}

.navbar__mobile-resources-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.navbar__mobile-chevron {
  color: var(--mm-white-50);
  transition: transform var(--transition), color var(--transition);
  flex-shrink: 0;
}

.navbar__mobile-resources-btn--open .navbar__mobile-chevron {
  transform: rotate(180deg);
  color: var(--mm-cyan);
}

.navbar__mobile-sublist {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar__mobile-sublist--open {
  max-height: 160px;
}

.navbar__mobile-sublink {
  display: block;
  padding: 0.6rem 0 0.6rem 1rem;
  color: var(--mm-white-50);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: color var(--transition), padding-left var(--transition);
}

.navbar__mobile-sublink:hover {
  color: var(--mm-cyan);
  padding-left: 1.5rem;
}

.navbar__mobile-cta {
  display: block;
  margin-top: 1.25rem;
  padding: 0.75rem 1.5rem;
  text-align: center;
  border: 1.5px solid var(--mm-cyan);
  border-radius: 6px;
  color: var(--mm-cyan);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.navbar__mobile-cta:hover {
  background: var(--mm-cyan);
  color: var(--mm-bg);
}

.navbar__backdrop {
  position: fixed;
  inset: 0;
  top: var(--navbar-h);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 998;
  animation: backdropFadeIn 0.25s ease forwards;
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 767px) {

  .navbar__nav,
  .navbar__cta {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }
}

/* ── BUTTONS ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  border: none;
  transition: all 0.25s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.btn-primary {
  background: var(--cyan);
  color: #000;
}

.btn-primary:hover {
  background: var(--cyan-dark);
  transform: translateY(-2px);
}

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

.btn-outline:hover {
  border-color: var(--cyan);
  background: rgba(0, 212, 255, 0.05);
}

/* ── HERO BUTTONS (Hero.css style) ────────────────────── */
.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.8rem 1.75rem;
  border-radius: 7px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.hero__btn--primary {
  background: #00d4ff;
  color: #0a0a0a;
  border: 1.5px solid #00d4ff;
}

.hero__btn--primary:hover {
  background: transparent;
  color: #00d4ff;
  box-shadow: 0 0 28px rgba(0, 212, 255, 0.3);
}

.hero__btn--primary svg {
  transition: transform 0.3s ease;
}

.hero__btn--primary:hover svg {
  transform: translateX(4px);
}

.hero__btn--ghost {
  background: transparent;
  color: #cccccc;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.hero__btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

/* ── SECTION HELPERS ───────────────────────────────── */
.section-tag {
  display: inline-block;
  position: relative;
  border-radius: 999px;
  padding: 2px;
  margin-bottom: 18px;
  background: rgba(0, 212, 255, 0.08);
  overflow: hidden;
}

.section-tag::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(transparent 0deg,
      transparent 100deg,
      #00d4ff 160deg,
      #00ffff 200deg,
      #00d4ff 240deg,
      transparent 300deg,
      transparent 360deg);
  animation: sectionTagSpin 3s linear infinite;
  z-index: 0;
}

@keyframes sectionTagSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.section-tag-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  background: var(--black);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}

.section-tag-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
  flex-shrink: 0;
  animation: sectionDotBlink 2s ease-in-out infinite;
}

@keyframes sectionDotBlink {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
  }

  50% {
    opacity: 0.4;
    box-shadow: none;
  }
}

/* ── FADE ANIMATION ────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 32px 10px;
  position: relative;
  overflow: hidden;
}

/* Radial cyan glow */
.hero::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(0, 212, 255, 0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative arcs */
.hero-arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.08);
  pointer-events: none;
}

.arc1 {
  width: 500px;
  height: 500px;
  top: 3%;
  left: -12%;
}

.arc2 {
  width: 290px;
  height: 290px;
  top: 18%;
  left: -4%;
  border-color: rgba(0, 212, 255, 0.13);
}

.arc3 {
  width: 500px;
  height: 500px;
  top: 3%;
  right: -12%;
}

.arc4 {
  width: 290px;
  height: 290px;
  top: 18%;
  right: -4%;
  border-color: rgba(0, 212, 255, 0.13);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: center;
  max-width: 1400px;
  width: 100%;
}

.hero-left {
  text-align: left;
}

.hero-badge {
  display: inline-block;
  position: relative;
  border-radius: 999px;
  padding: 2px;
  margin-bottom: 28px;
  background: rgba(0, 212, 255, 0.08);
  overflow: hidden;
}

.hero-badge::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(transparent 0deg,
      transparent 100deg,
      #00d4ff 160deg,
      #00ffff 200deg,
      #00d4ff 240deg,
      transparent 300deg,
      transparent 360deg);
  animation: sectionTagSpin 3s linear infinite;
  z-index: 0;
}

.hero-badge-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  background: var(--black);
  border-radius: 999px;
  padding: 0.42rem 1.1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.hero h1 {
  font-size: clamp(34px, 4.5vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2px;
  margin-bottom: 22px;
  color: var(--t100);
}

.hero h1 em {
  font-style: italic;
  color: var(--cyan);
}

.hero-sub {
  font-size: 16px;
  color: var(--t80);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 40px;
}

.hero-btns {
  display: flex;
  gap: 14px;
}

/* ── HERO VISUAL (Right Panel) ──────────────────────── */
.hero-visual {
  position: relative;
  height: 100%;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero-illustration {
  width: 120%;
  max-width: 120%;
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 48px rgba(0, 212, 255, 0.15));
  animation: float1 6s ease-in-out infinite;
}

/* Floating metric chips */
.chip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border-cyan);
  border-radius: 14px;
  padding: 12px 16px;
  white-space: nowrap;
}

.chip-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--cyan);
}

.chip-lbl {
  font-size: 11px;
  color: var(--t50);
  margin-top: 2px;
}

.chip-arrow {
  font-size: 11px;
  color: #4ade80;
  font-weight: 700;
}

.chip1 {
  bottom: 100px;
  left: 10px;
  animation: float2 4s ease-in-out infinite;
}

.chip2 {
  bottom: 20px;
  right: 10px;
  animation: float3 5s ease-in-out infinite;
}

.chip3 {
  top: 80px;
  left: 10px;
  animation: float1 4.5s ease-in-out infinite;
}

@keyframes float1 {

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

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

@keyframes float2 {

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

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

@keyframes float3 {

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

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

/* Donut chart chip */
.chip-donut {
  top: 300px;
  right: -10px;
  padding: 14px;
}

.donut-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) 0% 72%, rgba(0, 212, 255, 0.1) 72% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}

.donut-inner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--cyan);
}

.donut-lbl {
  font-size: 10px;
  color: var(--t50);
  text-align: center;
}

/* ══════════════════════════════════════════════════════
       STATS BAR
    ═══════════════════════════════════════════════════════ */
.stats-bar {
  background: var(--black);
  padding: 50px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 0 40px;
  border-right: 1px solid var(--border);
}

.stat-item:last-child {
  border-right: none;
}

.stat-number {
  font-size: 42px;
  font-weight: 800;
  color: var(--t100);
  line-height: 1;
}

.stat-number .su {
  color: var(--cyan);
}

.stat-label {
  font-size: 13px;
  color: var(--t50);
  margin-top: 6px;
  font-weight: 500;
}

.stat-bar-wrap {
  height: 3px;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background: var(--cyan);
  border-radius: 3px;
  animation: grow 1.8s ease forwards;
  transform-origin: left;
}

@keyframes grow {
  from {
    width: 0;
  }
}

/* ══════════════════════════════════════════════════════
       TICKER
    ═══════════════════════════════════════════════════════ */
.ticker-section {
  padding: 30px 0;
  overflow: hidden;
  background: var(--black);
  border-bottom: 1px solid var(--border);
}

.ticker-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--t50);
  margin-bottom: 28px;
}

.ticker-wrapper {
  overflow: hidden;
}

.ticker-track {
  display: flex;
  animation: ticker 35s linear infinite;
  width: max-content;
}

.ticker-track:hover {
  animation-play-state: paused;
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: flex;
  align-items: center;
  padding: 0 36px;
  font-size: 15px;
  font-weight: 600;
  color: var(--t30);
  white-space: nowrap;
  transition: color 0.2s;
}

.ticker-item:hover {
  color: var(--t80);
}

.ticker-sep {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.3;
  flex-shrink: 0;
  align-self: center;
}

/* ══════════════════════════════════════════════════════
       TRANSFORM / ABOUT
    ═══════════════════════════════════════════════════════ */
/* ── ABOUT SECTION ─────────────────────────────────── */
/* ─────────────────────────────────────────
   About.css  |  Mystiq Media
   ───────────────────────────────────────── */

.about {
  background: #0a0a0a;
  padding: 100px 32px;
  position: relative;
  overflow: hidden;
}

/* Subtle grid texture */
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.about__inner {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

/* ── Left visual placeholder ── */
.about__visual {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__visual-placeholder {
  height: 100%;
  min-height: 420px;
}

/* ── ABOUT INFOGRAPHIC CARDS ── */
.about-infographic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 520px;
}

.about-card {
  background: #12121c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 28px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.about-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(0, 212, 255, 0.04), transparent);
  pointer-events: none;
}

.about-card:hover {
  border-color: rgba(0, 212, 255, 0.22);
  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.08);
  transform: translateY(-3px);
}

.about-card .ac-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.about-card:hover .ac-icon {
  background: rgba(0, 212, 255, 0.10);
  border-color: rgba(0, 212, 255, 0.25);
}

.about-card .ac-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cyan);
  stroke-width: 1.75;
  fill: none;
}

.about-card h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--t100);
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.01em;
}

.about-card .ac-desc {
  font-size: 13px;
  color: var(--t50);
  line-height: 1.6;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

@media (max-width: 900px) {
  .about-infographic {
    max-width: 100%;
  }
}

/* ── Right content ── */
.about__eyebrow {
  display: inline-block;
  position: relative;
  border-radius: 999px;
  padding: 2px;
  margin-bottom: 1.5rem;
  background: rgba(0, 212, 255, 0.08);
  overflow: hidden;
}

.about__eyebrow::before {
  content: "";
  position: absolute;
  /* Make it large enough to always cover corners when rotating */
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(transparent 0deg,
      transparent 100deg,
      #00d4ff 160deg,
      #00ffff 200deg,
      #00d4ff 240deg,
      transparent 300deg,
      transparent 360deg);
  animation: borderSpin 3s linear infinite;
  z-index: 0;
}

@keyframes borderSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


.about__eyebrow-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  background: #0a0a0a;
  border-radius: 999px;
  padding: 0.35rem 1rem;

  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00d4ff;
  white-space: nowrap;
}

.about__eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
  flex-shrink: 0;
  animation: dotBlink 2s ease-in-out infinite;
}

@keyframes dotBlink {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
  }

  50% {
    opacity: 0.4;
    box-shadow: none;
  }
}

.about__heading {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 600;
  color: #CCCCCC;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 1.75rem;
}

.about__heading em {
  font-style: italic;
  color: #00d4ff;
}

.about__body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.975rem;
  font-weight: 400;
  line-height: 1.75;
  color: #888888;
  margin-bottom: 1rem;
}

.about__body:last-of-type {
  margin-bottom: 2rem;
}

/* ── Stats row ── */
.about__stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.about__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about__stat-num {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.about__stat-num em {
  font-style: normal;
  color: #00d4ff;
}

.about__stat-lbl {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555555;
}

/* ── CTA ── */
.about__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.625rem;
  border-radius: 7px;
  border: 1.5px solid #00d4ff;
  background: transparent;
  color: #00d4ff;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.about__cta:hover {
  background: #00d4ff;
  color: #0a0a0a;
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.3);
}

.about__cta svg {
  transition: transform 0.3s ease;
}

.about__cta:hover svg {
  transform: translateX(4px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .about__inner {
    grid-template-columns: 1fr;
  }

  .about__visual {
    display: none;
  }
}

.about__image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ══════════════════════════════════════════════════════
       SERVICES SECTION
    ═══════════════════════════════════════════════════════ */
.services-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 32px;
}

.section-header {
  max-width: 800px;
  margin: 0 auto 64px;
  text-align: center;
}

.section-header h2 {
  font-size: clamp(26px, 3.5vw, 46px);
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 16px;
}

.section-header h2 em {
  font-style: italic;
  color: var(--cyan);
}

.section-header p {
  font-size: 15px;
  color: var(--t80);
  line-height: 1.75;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cyan);
  opacity: 0;
  transition: opacity 0.25s;
}

/* Decorative background shape per card */
.service-card::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.06);
  pointer-events: none;
}

.service-card:hover {
  border-color: var(--border-cyan-h);
  transform: translateY(-4px);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 18px 0 10px;
}

.service-card p {
  font-size: 13px;
  color: var(--t50);
  line-height: 1.7;
}

/* Illustrated service card headers */
.svc-visual {
  height: 160px;
  border-radius: 14px;
  background: var(--bg-border);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 16px 14px;
  flex-shrink: 0;
}

.svc-visual svg {
  position: relative;
  z-index: 1;
}

.svc-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(0, 212, 255, 0.12) 0%, transparent 70%);
}

/* Mini bar chart inside service card */
.svc-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 60px;
}

.svc-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgba(0, 212, 255, 0.15);
}

.svc-bar.hi {
  background: var(--cyan);
}

/* Mini funnel */
.funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.funnel-step {
  border-radius: 4px;
  height: 18px;
  background: rgba(0, 212, 255, 0.15);
}

.funnel-step.hi {
  background: var(--cyan);
}

/* Code lines */
.code-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
  width: 140px;
}

.code-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 212, 255, 0.1);
}

.code-line.kw {
  background: var(--cyan);
  width: 40% !important;
}

.code-line.str {
  background: rgba(0, 212, 255, 0.35);
}

/* Globe rings */
.globe {
  position: relative;
  width: 70px;
  height: 70px;
}

.globe-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.3);
  transform: translate(-50%, -50%);
}

.globe-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

/* Social icons cluster */
.social-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100px;
  justify-content: center;
}

.sc-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid var(--icon-bdr);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--cyan);
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* AI nodes */
.ai-nodes {
  position: relative;
  width: 100px;
  height: 70px;
}

.ai-node {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.ai-line {
  position: absolute;
  height: 1px;
  background: rgba(0, 212, 255, 0.3);
  transform-origin: left;
}

/* ══════════════════════════════════════════════════════
       RESULTS INFOGRAPHIC
    ═══════════════════════════════════════════════════════ */
.results-section {
  background: var(--black);
  padding: 100px 32px;
  position: relative;
  overflow: hidden;
}

.results-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
}

.results-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}

.result-card:hover {
  border-color: var(--border-cyan-h);
  transform: translateY(-4px);
}

/* Large bg number watermark */
.result-watermark {
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-size: 100px;
  font-weight: 800;
  color: rgba(0, 212, 255, 0.04);
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1;
  pointer-events: none;
}

.result-stat {
  font-size: 48px;
  font-weight: 800;
  color: var(--t100);
  line-height: 1;
  margin-bottom: 6px;
}

.result-stat .su {
  color: var(--cyan);
}

.result-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--t80);
  margin-bottom: 10px;
}

.result-desc {
  font-size: 13px;
  color: var(--t50);
  line-height: 1.65;
}

/* Mini sparkline */
.sparkline {
  margin: 14px 0 0;
}

.sparkline svg {
  width: 100%;
  height: 36px;
  overflow: visible;
}

/* Progress ring */
.progress-ring-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}

.p-ring-item {
  flex: 1;
}

.p-ring-label {
  font-size: 11px;
  color: var(--t50);
  margin-bottom: 6px;
}

.p-ring-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.p-ring-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--cyan);
  animation: grow 2s ease forwards;
}

/* ══════════════════════════════════════════════════════
       SOCIAL PROOF
    ═══════════════════════════════════════════════════════ */
.social-proof {
  padding: 60px 32px;
  text-align: center;
  position: relative;
}

.social-proof::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
}

.social-proof h2 {
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.08;
  max-width: 800px;
  margin: 0 auto 18px;
  position: relative;
}

.social-proof h2 em {
  font-style: italic;
  color: var(--cyan);
}

.social-proof>p {
  font-size: 15px;
  color: var(--t80);
  max-width: 520px;
  margin: 0 auto 56px;
  line-height: 1.75;
  position: relative;
}

/* Logo ticker */
.logo-ticker-wrap {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.logo-ticker-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: ticker-scroll 35s linear infinite;
  will-change: transform;
}

.logo-ticker-track:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.logo-ticker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 163px;
}

.logo-ticker-item img {
  height: 163px;
  width: auto;
  max-width: 325px;
  object-fit: contain;
  opacity: 0.55;
  filter: brightness(1.1);
  transition: opacity 0.25s;
}

.logo-ticker-item:hover img {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════
       WHY CHOOSE – Redesigned Bento Animated Layout
    ═══════════════════════════════════════════════════════ */

.why-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 32px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.why-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  transition: all 0.25s;
}

.why-card:hover {
  border-color: var(--border-cyan-h);
  transform: translateY(-3px);
}

.why-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--cyan);
  margin-bottom: 18px;
}

.why-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.why-card p {
  font-size: 13px;
  color: var(--t50);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════
       DUAL SERVICES
    ═══════════════════════════════════════════════════════ */
.dual-services {
  background: var(--black);
  padding: 100px 32px;
}

.dual-services-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.service-list-col h3 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.service-list-col>p {
  font-size: 14px;
  color: var(--t50);
  margin-bottom: 28px;
  line-height: 1.6;
}

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

.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--t80);
  line-height: 1.5;
  transition: border-color 0.2s;
}

.service-list li:hover {
  border-color: var(--border-cyan);
}

.service-list li svg {
  width: 16px;
  height: 16px;
  stroke: var(--cyan);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════
       TECH SHOWCASE (App mockup infographic)
    ═══════════════════════════════════════════════════════ */
.tech-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 32px;
}

.tech-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Phone mockup */
.phone-frame {
  width: 220px;
  height: 420px;
  background: var(--bg-card);
  border: 2px solid rgba(0, 212, 255, 0.2);
  border-radius: 36px;
  padding: 16px;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 0 60px rgba(0, 212, 255, 0.06);
}

.phone-notch {
  width: 60px;
  height: 8px;
  background: var(--bg-border);
  border-radius: 4px;
  margin: 0 auto 16px;
}

.phone-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phone-row {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-border);
}

.phone-row.hi {
  background: rgba(0, 212, 255, 0.3);
  width: 60%;
}

.phone-row.md {
  width: 80%;
}

.phone-card-mini {
  background: var(--bg-border);
  border-radius: 10px;
  padding: 10px;
}

.phone-card-mini-bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}

.pcmb {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: rgba(0, 212, 255, 0.2);
}

.pcmb.hi {
  background: var(--cyan);
}

.phone-home {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* Browser mockup */
.browser-frame {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
}

.browser-bar {
  background: var(--bg-border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.bd-r {
  background: #ff5f57;
}

.bd-y {
  background: #febc2e;
}

.bd-g {
  background: #28c840;
}

.browser-url {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--t50);
  font-family: 'JetBrains Mono', monospace;
  margin-left: 8px;
}

.browser-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bb-row {
  display: flex;
  gap: 10px;
}

.bb-block {
  border-radius: 8px;
  background: var(--bg-border);
}

.bb-block.tall {
  height: 80px;
}

.bb-block.sm {
  height: 40px;
}

.bb-line {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-border);
}

.bb-line.cyan {
  background: rgba(0, 212, 255, 0.3);
}

.bb-line.wide {
  width: 75%;
}

.bb-line.med {
  width: 55%;
}

.tech-right h2 {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  line-height: 1.1;
}

.tech-right h2 em {
  font-style: italic;
  color: var(--cyan);
}

.tech-right p {
  font-size: 15px;
  color: var(--t80);
  line-height: 1.8;
  margin-bottom: 28px;
}

.tech-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tech-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s;
}

.tech-feat:hover {
  border-color: var(--border-cyan);
}

.tf-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--icon-bg);
  border: 1px solid var(--icon-bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tf-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--cyan);
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tf-text h5 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.tf-text p {
  font-size: 13px;
  color: var(--t50);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════
       HOW WE WORK
    ═══════════════════════════════════════════════════════ */
.how-section {
  background: var(--bg-nav);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 60px 32px;
}

.how-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
  position: relative;
  align-items: start;
}

/* Diagonal dashed connector line */
.how-steps::before {
  content: '';
  position: absolute;
  top: 44px;
  left: calc(12.5% - 2px);
  right: calc(12.5% - 2px);
  height: 130px;
  border: none;
  background: none;
  pointer-events: none;
}

.how-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px 28px;
  transition: all 0.3s;
  text-align: left;
  overflow: hidden;
  position: relative;
}

/* Staircase offset — ascending left to right */
.how-step:nth-child(1) {
  margin-top: 132px;
}

.how-step:nth-child(2) {
  margin-top: 88px;
}

.how-step:nth-child(3) {
  margin-top: 44px;
}

.how-step:nth-child(4) {
  margin-top: 0;
}

.how-step:hover {
  border-color: var(--border-cyan-h);
  transform: translateY(-4px) translateX(4px);
  box-shadow: 0 16px 48px rgba(0, 212, 255, 0.1);
}

/* Giant ghost number */
.how-step::before {
  content: attr(data-num);
  position: absolute;
  bottom: -10px;
  right: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 88px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 212, 255, 0.08);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 50px;
  padding: 3px 10px;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.how-step-icon {
  width: 44px;
  height: 44px;
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.how-step h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.how-step p {
  font-size: 13px;
  color: var(--t50);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════
       CTA
    ═══════════════════════════════════════════════════════ */
.cta-section {
  padding: 60px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
}

.cta-section h2 {
  font-size: clamp(28px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 18px;
  position: relative;
}

.cta-section h2 em {
  font-style: italic;
  color: var(--cyan);
}

.cta-section>p {
  font-size: 16px;
  color: var(--t80);
  margin-bottom: 44px;
  position: relative;
}

.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  position: relative;
}

/* ══════════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════════ */
footer {
  background: var(--black);
  padding-top: 100px;
  padding-bottom: 40px;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 60px;
}

.footer-brand p {
  font-size: 14px;
  color: var(--t50);
  line-height: 1.7;
  margin-top: 14px;
  max-width: 280px;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t50);
  transition: all 0.2s;
}

.footer-social a:hover {
  border-color: var(--border-cyan);
  color: var(--cyan);
}

.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: var(--t100);
}

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

.footer-col ul li a {
  font-size: 14px;
  color: var(--t50);
  transition: color 0.2s;
}

.footer-col ul li a:hover {
  color: var(--t100);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--t50);
  margin-bottom: 12px;
  line-height: 1.5;
}

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--cyan);
  stroke-width: 1.75;
  fill: none;
  flex-shrink: 0;
  margin-top: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-bottom {
  max-width: 1400px;
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--t30);
}

/* ══ HAMBURGER & MOBILE NAV — replaced by .navbar__* styles above ══ */

/* ══ RESPONSIVE ════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero {
    padding: 60px 24px 30px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    display: flex;
    min-height: 360px;
    margin-top: 32px;
    justify-content: center;
    overflow: hidden;
  }

  .hero-illustration {
    width: 90%;
    max-width: 520px;
  }

  .chip {
    display: none;
  }

  .hero-left {
    text-align: center;
  }

  .hero-sub {
    margin: 0 auto 36px;
  }

  .hero-btns {
    justify-content: center;
  }

  .hero {
    gap: 0;
  }

  .hero-left h1 {
    font-size: clamp(32px, 8vw, 48px);
  }

  .stats-bar {
    padding: 36px 32px;
    flex-wrap: wrap;
    gap: 20px 40px;
  }

  .stat-item {
    border-right: none;
    min-width: 45%;
  }

  .about {
    padding: 48px 20px;
  }

  .about__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about__visual {
    display: none;
  }

  .services-section {
    padding: 48px 20px;
  }

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

  .results-section {
    padding: 48px 20px;
  }

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

  .social-proof {
    padding: 48px 20px;
  }

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

  .why-section {
    padding: 48px 20px;
  }

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

  .why-card--featured {
    grid-column: 1 / 3;
    grid-row: auto;
    min-height: 280px;
  }

  .why-card--wide {
    grid-column: auto;
  }

  .dual-services {
    padding: 48px 20px;
  }

  .dual-services-inner {
    grid-template-columns: 1fr;
  }

  .tech-section {
    padding: 48px 20px;
  }

  .tech-inner {
    grid-template-columns: 1fr;
  }

  .how-section {
    padding: 48px 20px;
  }

  .how-steps {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .how-step:nth-child(1),
  .how-step:nth-child(2),
  .how-step:nth-child(3),
  .how-step:nth-child(4) {
    margin-top: 0;
  }

  .cta-section {
    padding: 48px 20px;
  }

  footer {
    padding: 48px 32px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width:640px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

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

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

  .why-card--featured {
    grid-column: 1;
    grid-row: auto;
    min-height: 260px;
  }

  .why-card--wide {
    grid-column: 1;
  }

  .how-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

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

  .cta-btns {
    flex-direction: column;
    align-items: center;
  }

  .hero {
    padding: 100px 20px 40px;
  }

  .hero-left h1 {
    font-size: clamp(28px, 9vw, 40px);
  }

  .hero-left p {
    font-size: 15px;
  }

  .stat-item .num {
    font-size: 28px;
  }

  .stat-item .lbl {
    font-size: 12px;
  }

  .section-tag-inner {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  nav {
    padding: 14px 16px;
  }

  .hero {
    padding: 90px 16px 32px;
  }

  .hero-visual {
    margin-top: 24px;
    overflow: hidden;
  }

  .hero-illustration {
    width: 100%;
    max-width: 480px;
  }

  .hero-left h1 {
    font-size: clamp(26px, 10vw, 36px);
  }

  .hero-left p {
    font-size: 14px;
  }

  .cta-btns {
    flex-direction: column;
    width: 100%;
  }

  .cta-btns .btn-primary,
  .cta-btns .btn-outline {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .stats-bar {
    padding: 24px 16px;
    gap: 16px 0;
  }

  .stat-item {
    min-width: 50%;
  }

  .stat-item .num {
    font-size: 26px;
  }

  .services-grid,
  .results-grid,
  .why-grid,
  .how-steps {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    font-size: 12px;
  }

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

  /* ── Stats bar numbers: smaller on phones ── */
  .stat-number {
    font-size: 26px;
  }

  /* ── Result stats: smaller on phones ── */
  .result-stat {
    font-size: 34px;
  }

  /* ── Logo ticker: tighter gap + faster scroll ── */
  .logo-ticker-track {
    gap: 32px;
    animation-duration: 18s;
  }
}

/* ══════════════════════════════════════════════════════
       CRAZY ANIMATIONS — ENGAGEMENT PACK
    ═══════════════════════════════════════════════════════ */

/* Custom cursor — desktop/mouse only */
@media (hover: hover) and (pointer: fine) {
  * {
    cursor: none !important;
  }

  .cursor-glow {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cyan);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.15s, height 0.15s, opacity 0.15s;
    mix-blend-mode: screen;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.8), 0 0 20px rgba(0, 212, 255, 0.4);
  }

  .cursor-ring {
    position: fixed;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 212, 255, 0.5);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, width 0.2s, height 0.2s, border-color 0.2s;
  }

  body:has(a:hover) .cursor-ring,
  body:has(.btn:hover) .cursor-ring {
    width: 56px;
    height: 56px;
    border-color: rgba(0, 212, 255, 0.9);
  }

  body:has(a:hover) .cursor-glow,
  body:has(.btn:hover) .cursor-glow {
    width: 6px;
    height: 6px;
    opacity: 0.5;
  }
}

/* Scanline overlay */
.scanline-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px,
      rgba(0, 0, 0, 0.03) 3px, rgba(0, 0, 0, 0.03) 4px);
}

/* Aurora hero layers */
@keyframes aurora1 {

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

  50% {
    transform: rotate(180deg) scale(1.3);
    opacity: 0.14;
  }
}

@keyframes aurora2 {

  0%,
  100% {
    transform: rotate(0deg) scale(1.1);
    opacity: 0.05;
  }

  33% {
    transform: rotate(120deg) scale(0.85);
    opacity: 0.1;
  }

  66% {
    transform: rotate(240deg) scale(1.4);
    opacity: 0.07;
  }
}

.hero-aurora {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1100px;
  height: 1100px;
  margin: -550px 0 0 -550px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      rgba(0, 212, 255, 0) 0deg, rgba(0, 212, 255, 0.09) 60deg,
      rgba(100, 0, 255, 0.06) 120deg, rgba(0, 212, 255, 0) 180deg,
      rgba(0, 255, 180, 0.05) 240deg, rgba(0, 212, 255, 0) 360deg);
  animation: aurora1 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.hero-aurora2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  margin: -350px 0 0 -350px;
  border-radius: 50%;
  background: conic-gradient(from 90deg,
      rgba(0, 212, 255, 0) 0deg, rgba(0, 255, 150, 0.07) 90deg,
      rgba(0, 212, 255, 0) 180deg, rgba(180, 0, 255, 0.05) 270deg,
      rgba(0, 212, 255, 0) 360deg);
  animation: aurora2 18s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Floating orbs */
@keyframes orb1 {

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

  25% {
    transform: translate(40px, -30px) scale(1.1);
  }

  50% {
    transform: translate(-25px, 40px) scale(0.9);
  }

  75% {
    transform: translate(25px, 25px) scale(1.05);
  }
}

@keyframes orb2 {

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

  33% {
    transform: translate(-50px, 25px) scale(0.8);
  }

  66% {
    transform: translate(35px, -40px) scale(1.2);
  }
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.orb-cyan {
  width: 500px;
  height: 500px;
  top: 5%;
  left: 5%;
  background: rgba(0, 212, 255, 0.045);
  animation: orb1 22s ease-in-out infinite;
}

.orb-purple {
  width: 350px;
  height: 350px;
  top: 35%;
  right: 5%;
  background: rgba(140, 0, 255, 0.03);
  animation: orb2 19s ease-in-out infinite;
}

.orb-green {
  width: 250px;
  height: 250px;
  bottom: 8%;
  left: 30%;
  background: rgba(0, 255, 150, 0.025);
  animation: orb1 16s ease-in-out infinite reverse;
}

/* Hero entrance animations */
@keyframes badgeEntrance {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.75);
  }

  65% {
    transform: translateY(4px) scale(1.06);
  }

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

@keyframes heroH1 {
  0% {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes heroBtns {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

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

.hero-badge {
  animation: badgeEntrance 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.hero h1 {
  animation: heroH1 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.hero-sub {
  animation: heroBtns 0.9s ease 0.9s both;
}

.hero-btns {
  animation: heroBtns 0.9s ease 1.1s both;
}

/* Chip entrances (combine with existing float keyframes) */
@keyframes chipIn {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(20px);
  }

  70% {
    transform: scale(1.1) translateY(-4px);
  }

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

.chip1 {
  animation: float2 4s ease-in-out infinite, chipIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
}

.chip2 {
  animation: float3 5s ease-in-out infinite, chipIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.65s both;
}

.chip3 {
  animation: float1 4.5s ease-in-out infinite, chipIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.9s both;
}

/* Section-tag shimmer text */
@keyframes tagShimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* section-tag shimmer removed — spinning border handles the effect */

/* Animated gradient on primary button */
@keyframes btnGrad {

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

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

.btn-primary {
  background: linear-gradient(270deg, #00D4FF, #00FFCC, #00A8CC, #00D4FF);
  background-size: 300% 300%;
  animation: btnGrad 4s ease infinite;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 212, 255, 0.35);
}

/* Ripple on buttons */
.btn {
  position: relative;
  overflow: hidden;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.28);
  animation: rippleAnim 0.6s linear forwards;
  pointer-events: none;
}

@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Card shimmer sweep on hover */
@keyframes shimmerSweep {
  0% {
    transform: translateX(-120%) skewX(-15deg);
  }

  100% {
    transform: translateX(350%) skewX(-15deg);
  }
}

.service-card,
.result-card,
.why-card,
.how-step {
  transform-style: preserve-3d;
}

.shimmer-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
}

.shimmer-layer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.07), rgba(255, 255, 255, 0.04), transparent);
  transform: translateX(-120%) skewX(-15deg);
  transition: none;
}

.service-card:hover .shimmer-layer::after,
.result-card:hover .shimmer-layer::after,
.why-card:hover .shimmer-layer::after {
  animation: shimmerSweep 0.65s ease forwards;
}

/* Neon flicker on stat numbers hover */
@keyframes neonFlicker {

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 7px rgba(0, 212, 255, 0.9), 0 0 14px rgba(0, 212, 255, 0.6), 0 0 30px rgba(0, 212, 255, 0.4);
  }

  20%,
  24%,
  55% {
    text-shadow: none;
  }
}

.stat-number:hover {
  animation: neonFlicker 1.5s ease;
  cursor: default;
}

/* Why card number glow on hover */
.why-number {
  transition: all 0.3s;
  display: inline-block;
}

.why-card:hover .why-number {
  text-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan);
  transform: scale(1.25) translateX(4px);
}

/* How step glow override */
.how-step:hover {
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.35),
    0 24px 64px rgba(0, 212, 255, 0.18),
    inset 0 1px 0 rgba(0, 212, 255, 0.1) !important;
}

/* Service list li slide */
.service-list li {
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.service-list li:hover {
  transform: translateX(8px);
  box-shadow: -3px 0 0 var(--cyan);
  border-color: var(--border-cyan-h) !important;
}

/* Result card stat glow */
.result-card:hover .result-stat {
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
  transition: text-shadow 0.3s;
}

/* Logo ticker enhanced hover */
.logo-ticker-item:hover img {
  opacity: 1 !important;
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 212, 255, 0.45));
}

/* Stagger helpers */
.stagger-1 {
  transition-delay: 0.06s !important;
}

.stagger-2 {
  transition-delay: 0.12s !important;
}

.stagger-3 {
  transition-delay: 0.18s !important;
}

.stagger-4 {
  transition-delay: 0.24s !important;
}

.stagger-5 {
  transition-delay: 0.30s !important;
}

.stagger-6 {
  transition-delay: 0.36s !important;
}

/* Floating spark particles */
.spark {
  position: fixed;
  pointer-events: none;
  z-index: 9995;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.8);
  animation: sparkFloat linear forwards;
}

@keyframes sparkFloat {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}

/* Typewriter caret */
.typewriter-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--cyan);
  margin-left: 3px;
  vertical-align: middle;
  animation: caretBlink 0.75s step-end infinite;
}

@keyframes caretBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Counter pulse when done */
@keyframes counterDone {
  0% {
    text-shadow: 0 0 0 rgba(0, 212, 255, 0);
  }

  40% {
    text-shadow: 0 0 25px rgba(0, 212, 255, 0.6), 0 0 50px rgba(0, 212, 255, 0.3);
  }

  100% {
    text-shadow: 0 0 0 rgba(0, 212, 255, 0);
  }
}

.counter-done {
  animation: counterDone 0.6s ease forwards;
}

/* CTA section burst ring */
@keyframes burstRing {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.burst-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.4);
  pointer-events: none;
  z-index: 0;
  animation: burstRing 2.5s ease-out infinite;
}

.burst-ring:nth-child(2) {
  animation-delay: 0.8s;
}

.burst-ring:nth-child(3) {
  animation-delay: 1.6s;
}

/* Glitch on hero h1 hover */
@keyframes glitch1 {

  0%,
  100% {
    clip-path: inset(35% 0 55% 0);
    transform: translate(-4px, 0);
    color: rgba(0, 212, 255, 0.7);
  }

  25% {
    clip-path: inset(75% 0 10% 0);
    transform: translate(4px, 0);
  }

  50% {
    clip-path: inset(10% 0 75% 0);
    transform: translate(-3px, 0);
  }

  75% {
    clip-path: inset(55% 0 30% 0);
    transform: translate(3px, 0);
  }
}

@keyframes glitch2 {

  0%,
  100% {
    clip-path: inset(60% 0 20% 0);
    transform: translate(4px, 0);
    color: rgba(255, 50, 100, 0.5);
  }

  25% {
    clip-path: inset(5% 0 90% 0);
    transform: translate(-4px, 0);
  }

  50% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(3px, 0);
  }

  75% {
    clip-path: inset(25% 0 65% 0);
    transform: translate(-3px, 0);
  }
}

.hero h1 {
  position: relative;
}

.hero h1::before,
.hero h1::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.hero h1.glitching::before {
  animation: glitch1 0.25s steps(1) forwards;
  opacity: 1;
}

.hero h1.glitching::after {
  animation: glitch2 0.25s steps(1) forwards;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════
       HOW WE WORK  (Howwework.css)
    ═══════════════════════════════════════════════════════ */
.howwework {
  background: var(--black);
  padding: 100px 32px;
  position: relative;
  overflow: hidden;
}

.howwework::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.howwework__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

/* ── LEFT: Interactive SVG Canvas ── */
.howwework__visual {
  min-height: 480px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: sticky;
  top: 96px;
}

/* The animated process canvas */
.hww-canvas {
  width: 100%;
  background: transparent;
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.hww-canvas__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(0, 212, 255, 0.5);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hww-canvas__svg-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hww-canvas__svg-wrap svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* SVG node styles */
.hww-node {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hww-node rect,
.hww-node circle {
  transition: fill 0.4s ease, stroke 0.4s ease;
}

/* Draw-on path animation */
@keyframes hwwDrawPath {
  from {
    stroke-dashoffset: var(--path-len, 400);
  }

  to {
    stroke-dashoffset: 0;
  }
}

.hww-path-animated {
  stroke-dasharray: var(--path-len, 400);
  stroke-dashoffset: var(--path-len, 400);
  animation: hwwDrawPath 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Pulsing dot on active node */
@keyframes hwwPulse {
  0% {
    r: 5;
    opacity: 1;
  }

  70% {
    r: 14;
    opacity: 0;
  }

  100% {
    r: 14;
    opacity: 0;
  }
}

.hww-pulse {
  animation: hwwPulse 1.6s ease-out infinite;
}

/* Canvas bottom metrics strip */
.hww-canvas__metrics {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 212, 255, 0.08);
}

.hww-metric {
  flex: 1;
  text-align: center;
}

.hww-metric__val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #00D4FF;
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}

.hww-metric__lbl {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.05em;
}

/* ── RIGHT: Step tabs ── */
.howwework__eyebrow {
  display: inline-block;
  position: relative;
  border-radius: 999px;
  padding: 2px;
  margin-bottom: 1.5rem;
  background: rgba(0, 212, 255, 0.08);
  overflow: hidden;
}

.howwework__eyebrow::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(transparent 0deg, transparent 100deg, #00d4ff 160deg, #00ffff 200deg, #00d4ff 240deg, transparent 300deg, transparent 360deg);
  animation: sectionTagSpin 3s linear infinite;
  z-index: 0;
}

.howwework__eyebrow-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  background: #0a0a0a;
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00d4ff;
  white-space: nowrap;
}

.howwework__eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
  flex-shrink: 0;
  animation: sectionDotBlink 2s ease-in-out infinite;
}

.howwework__heading {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.howwework__heading em {
  font-style: italic;
  color: #00d4ff;
}

.howwework__sub {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  color: #888888;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

/* Step tabs */
.howwework__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hww-step {
  display: flex;
  gap: 1.25rem;
  position: relative;
  cursor: pointer;
  border-radius: 14px;
  padding: 14px 14px 14px 0;
  transition: background 0.2s ease;
}

.hww-step:hover {
  background: rgba(0, 212, 255, 0.03);
}

.hww-step.hww-step--active {
  background: rgba(0, 212, 255, 0.05);
}

.hww-step__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  padding-left: 14px;
}

.hww-step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #00d4ff;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hww-step--active .hww-step__num {
  background: rgba(0, 212, 255, 0.18);
  border-color: #00d4ff;
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.35);
}

.hww-step__connector {
  display: block;
  width: 1px;
  flex: 1;
  min-height: 16px;
  background: linear-gradient(to bottom, rgba(0, 212, 255, 0.25), rgba(0, 212, 255, 0.04));
  margin: 4px 0;
}

.hww-step__right {
  padding-bottom: 0.5rem;
  padding-top: 8px;
  flex: 1;
}

.hww-step:last-child .hww-step__right {
  padding-bottom: 0;
}

.hww-step__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  transition: margin-bottom 0.3s ease;
}

.hww-step--active .hww-step__header {
  margin-bottom: 8px;
}

.hww-step__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}

.hww-step--active .hww-step__title,
.hww-step:hover .hww-step__title {
  color: #00d4ff;
}

.hww-step__tag {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 4px;
  padding: 2px 7px;
}

.hww-step__body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #666666;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.hww-step--active .hww-step__body {
  max-height: 120px;
  opacity: 1;
}

/* Active progress bar under body */
.hww-step__progress {
  height: 2px;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 99px;
  margin-top: 10px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hww-step--active .hww-step__progress {
  opacity: 1;
}

.hww-step__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00D4FF, rgba(0, 212, 255, 0.4));
  border-radius: 99px;
  transition: width 3s linear;
}

.hww-step--active .hww-step__progress-fill {
  width: 100%;
}

@media (max-width: 900px) {
  .howwework__inner {
    grid-template-columns: 1fr;
  }

  .howwework__visual {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════
       ONBOARDING  (Onboarding.css)
    ═══════════════════════════════════════════════════════ */
.onboarding {
  background: #0a0a0a;
  padding: clamp(5rem, 10vh, 8rem) clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  overflow: hidden;
}

.onboarding::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.onboarding__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.onboarding__eyebrow {
  display: inline-block;
  position: relative;
  border-radius: 999px;
  padding: 2px;
  margin-bottom: 1.5rem;
  background: rgba(0, 212, 255, 0.08);
  overflow: hidden;
}

.onboarding__eyebrow::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(transparent 0deg, transparent 100deg, #00d4ff 160deg, #00ffff 200deg, #00d4ff 240deg, transparent 300deg, transparent 360deg);
  animation: sectionTagSpin 3s linear infinite;
  z-index: 0;
}

.onboarding__eyebrow-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  background: #0a0a0a;
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00d4ff;
  white-space: nowrap;
}

.onboarding__eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
  flex-shrink: 0;
  animation: sectionDotBlink 2s ease-in-out infinite;
}

.onboarding__heading {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.onboarding__heading em {
  font-style: italic;
  color: #00d4ff;
}

.onboarding__sub {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  color: #888888;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.onboarding__steps {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.5rem;
}

.ob-step {
  display: flex;
  flex-direction: column;
}

.ob-step__top {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  cursor: default;
  transition: padding-left 0.25s ease;
  padding: 0.25rem 0;
}

.ob-step__top:hover {
  padding-left: 4px;
}

.ob-step__top:hover .ob-step__icon-wrap {
  background: rgba(0, 212, 255, 0.12);
  border-color: rgba(0, 212, 255, 0.4);
}

.ob-step__top:hover .ob-step__title {
  color: #00d4ff;
}

.ob-step__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.ob-step__meta {
  flex: 1;
  padding-top: 2px;
}

.ob-step__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.ob-step__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.975rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}

.ob-step__tag {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 212, 255, 0.7);
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 4px;
  padding: 2px 7px;
}

.ob-step__body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.83rem;
  font-weight: 400;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 6px;
}

.ob-step__detail {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(0, 212, 255, 0.5);
  letter-spacing: 0.04em;
}

.ob-step__line {
  display: block;
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(0, 212, 255, 0.2), rgba(0, 212, 255, 0.04));
  margin-left: 21px;
  margin-block: 4px;
}

.onboarding__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.8rem 1.75rem;
  border-radius: 7px;
  background: #00d4ff;
  color: #0a0a0a;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.onboarding__cta:hover {
  background: #00a8cc;
  box-shadow: 0 0 28px rgba(0, 212, 255, 0.3);
}

.onboarding__cta svg {
  transition: transform 0.3s ease;
}

.onboarding__cta:hover svg {
  transform: translateX(4px);
}

/* ── Flow animation illustration ── */
.ob-illus-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Flow canvas wrapper */
.flow-canvas {
  position: relative;
  width: 100%;
}

.flow-canvas svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

/* Arrow path animation */
#arrow-path-glow,
#arrow-path-core,
#arrow-path-shine {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  transition: stroke-dashoffset 0s linear;
}

/* Step cards overlay */
.steps-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.step-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(12, 18, 26, 0.9);
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 10px;
  padding: 11px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: all;
  cursor: default;
  opacity: 0;
  transform: scale(0.88) translateY(6px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.step-card.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.step-card:hover {
  border-color: #00d4ff;
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.18), 0 0 6px rgba(0, 212, 255, 0.18);
  transform: scale(1.04) translateY(-2px);
}

.step-num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #00d4ff;
  line-height: 1;
  display: block;
  margin-bottom: 3px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.step-title {
  font-size: 13px;
  font-weight: 600;
  color: #e8f6ff;
  white-space: nowrap;
  line-height: 1;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.step-text {
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .onboarding__inner {
    grid-template-columns: 1fr;
  }

  .ob-illus-wrap {
    display: none;
  }
}

@media (max-width: 640px) {
  .step-card {
    position: static !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    margin: 8px 0;
  }

  .steps-overlay {
    position: static;
    display: flex;
    flex-direction: column;
    padding: 24px 0 0;
  }

  .flow-canvas svg {
    display: none;
  }
}