/* =========================================================
   AifoBeta — 3D Effects & Animations
   ========================================================= */

/* ── 1. 3D TILT CARD SYSTEM ─────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
}

.tilt-card .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 30%,
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.tilt-card:hover .tilt-shine { opacity: 1; }

.tilt-card .tilt-layer {
  transform: translateZ(20px);
}

/* ── 2. HERO LAYOUT ─────────────────────────────────────── */
.hero-inner {
  position: relative;
  overflow: visible;
}

/* ── WebGL 3D Scene container ───────────────────────────── */
.hero-3d-scene {
  position: absolute;
  inset: -45% -40%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease 0.5s;
  /* Soft vignette — dissolves canvas edges into the page */
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 35%, transparent 78%);
}

.hero-3d-scene.hero-3d-ready {
  opacity: 1;
}

.hero-3d-scene canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.hero-3d-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90%, 480px);
  height: min(90%, 480px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,229,204,0.2) 0%, rgba(124,58,237,0.07) 50%, transparent 75%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
  animation: hero-core-pulse 4s ease-in-out infinite;
}

@keyframes hero-core-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.hero-widgets-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
}

/* ── HERO FX LAYER (clipped from nav zone) ──────────────── */
.hero-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, rgba(0,0,0,0.3) 60px, black 120px);
  mask-image: linear-gradient(to bottom, transparent 0px, rgba(0,0,0,0.3) 60px, black 120px);
}

/* ── ORBITAL HERO VISUAL ────────────────────────────────── */
.hero-orbit {
  position: absolute;
  inset: 8% 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  z-index: 2;
  overflow: visible;
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbit-ring svg {
  width: 100%;
  height: 100%;
  animation: orbit-spin linear infinite;
  overflow: visible;
}

.orbit-ring-1 {
  width: min(72%, 300px);
  height: min(72%, 300px);
}
.orbit-ring-1 svg { animation-duration: 40s; }

.orbit-ring-2 {
  width: min(88%, 370px);
  height: min(88%, 370px);
}
.orbit-ring-2 svg { animation-duration: 60s; animation-direction: reverse; }

@keyframes orbit-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.orbit-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  background: rgba(6,6,18,0.75);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  will-change: transform;
  pointer-events: auto;
  cursor: default;
}

.orbit-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.orbit-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.orbit-node-1 { top: 6%;  right: 8%;  animation: orbit-float-1 7s ease-in-out infinite; }
.orbit-node-2 { top: 32%; left: 4%;   animation: orbit-float-2 8s ease-in-out infinite; }
.orbit-node-3 { bottom: 18%; right: 6%; animation: orbit-float-3 6.5s ease-in-out infinite; }
.orbit-node-4 { bottom: 6%; left: 14%; animation: orbit-float-4 9s ease-in-out infinite; }

@keyframes orbit-float-1 {
  0%, 100% { transform: translateY(0) translateZ(20px); }
  50% { transform: translateY(-14px) translateZ(40px); }
}
@keyframes orbit-float-2 {
  0%, 100% { transform: translateY(0) translateZ(10px); }
  50% { transform: translateY(-18px) translateZ(30px); }
}
@keyframes orbit-float-3 {
  0%, 100% { transform: translateY(0) translateZ(15px); }
  50% { transform: translateY(-12px) translateZ(35px); }
}
@keyframes orbit-float-4 {
  0%, 100% { transform: translateY(0) translateZ(5px); }
  50% { transform: translateY(-16px) translateZ(25px); }
}

/* ── 3. FLOATING HERO WIDGETS (legacy — unused) ─────────── */
.hero-widget {
  position: absolute;
  background: rgba(12, 12, 28, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(99,102,241,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform-style: preserve-3d;
  cursor: default;
  user-select: none;
  will-change: transform;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.hero-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
}

/* Widget 1 — Analytics */
.hw-analytics {
  top: 10px;
  left: 10px;
  width: 220px;
  animation: float-1 6s ease-in-out infinite;
  transform: rotateY(-8deg) rotateX(4deg);
}

/* Widget 2 — Notification */
.hw-notify {
  top: 130px;
  right: 0px;
  width: 240px;
  animation: float-2 7s ease-in-out infinite;
  transform: rotateY(6deg) rotateX(-3deg);
}

/* Widget 3 — Tech Stack */
.hw-tech {
  bottom: 140px;
  left: 0px;
  width: 210px;
  animation: float-3 8s ease-in-out infinite;
  transform: rotateY(-5deg) rotateX(2deg);
}

/* Widget 4 — Status */
.hw-status {
  bottom: 20px;
  right: 20px;
  width: 190px;
  animation: float-4 5.5s ease-in-out infinite;
  transform: rotateY(7deg) rotateX(5deg);
}

/* ── Widget float keyframes ───────────────────────────────── */
@keyframes float-1 {
  0%, 100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0px); }
  50%       { transform: rotateY(-6deg) rotateX(2deg) translateY(-18px); }
}
@keyframes float-2 {
  0%, 100% { transform: rotateY(6deg) rotateX(-3deg) translateY(0px); }
  50%       { transform: rotateY(4deg) rotateX(-1deg) translateY(-22px); }
}
@keyframes float-3 {
  0%, 100% { transform: rotateY(-5deg) rotateX(2deg) translateY(0px); }
  40%       { transform: rotateY(-3deg) rotateX(4deg) translateY(-15px); }
}
@keyframes float-4 {
  0%, 100% { transform: rotateY(7deg) rotateX(5deg) translateY(0px); }
  60%       { transform: rotateY(5deg) rotateX(3deg) translateY(-20px); }
}

/* Widget internals */
.hw-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}

.hw-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}

.hw-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 5px;
}

.hw-up   { color: #10B981; }
.hw-icon { font-size: 16px; margin-bottom: 6px; display: block; }

.hw-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 10px 0;
}

/* Notification widget */
.hw-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hw-notif-dot {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}

.hw-notif-text { flex: 1; }
.hw-notif-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.hw-notif-detail {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

/* Tech pills */
.hw-tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hw-pill {
  padding: 4px 10px;
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #A78BFA;
}

/* Live pulse dot */
.hw-live {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #10B981;
  font-weight: 600;
}

.hw-live::before {
  content: '';
  width: 8px; height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10B981;
  animation: hw-pulse 1.5s ease-in-out infinite;
}

@keyframes hw-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* Mini bar chart */
.hw-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  margin-top: 10px;
}

.hw-bar {
  flex: 1;
  background: rgba(99,102,241,0.3);
  border-radius: 3px 3px 0 0;
  position: relative;
  overflow: hidden;
}

.hw-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: bar-grow 1s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes bar-grow {
  to { transform: scaleY(1); }
}

/* ── 4. PERSPECTIVE GRID (hero background) ──────────────── */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-grid::before {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -20%;
  right: -20%;
  height: 60%;
  background-image:
    linear-gradient(rgba(99,102,241,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(600px) rotateX(60deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 80%);
}

/* ── 5. MAGNETIC BUTTON ─────────────────────────────────── */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}

/* ── 6. 3D SECTION REVEAL (replaces flat reveal) ────────── */
.reveal-3d {
  opacity: 0;
  transform: perspective(800px) rotateX(16deg) translateY(32px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.reveal-3d.visible {
  opacity: 1;
  transform: perspective(800px) rotateX(0deg) translateY(0);
}

.reveal-3d.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-3d.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-3d.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-3d.reveal-delay-4 { transition-delay: 0.4s; }

/* ── 7. MORPHING GRADIENT BLOB ──────────────────────────── */
.morph-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: morph-blob 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes morph-blob {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1) rotate(0deg); }
  33%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.1) rotate(60deg); }
  66%  { border-radius: 70% 30% 50% 50% / 30% 70% 60% 40%; transform: scale(0.95) rotate(120deg); }
  100% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; transform: scale(1.05) rotate(180deg); }
}

/* ── 8. GLOWING BORDER ANIMATION ────────────────────────── */
@keyframes border-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(99,102,241,0.1), 0 0 20px rgba(99,102,241,0.05); }
  50%       { box-shadow: 0 0 0 1px rgba(99,102,241,0.3), 0 0 40px rgba(99,102,241,0.15); }
}

.card-glow { animation: border-glow 4s ease-in-out infinite; }

/* ── 9. CURSOR GLOW ─────────────────────────────────────── */
#cursor-glow {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,204,0.06) 0%, rgba(124,58,237,0.03) 40%, transparent 65%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: -1;
  will-change: left, top;
}

/* ── 10. CANVAS PARTICLE FIELD ──────────────────────────── */
#particle-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
}

/* ── 11. GRADIENT TEXT SHIMMER ──────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer-text {
  background: linear-gradient(
    90deg,
    #00E5CC 0%,
    #A78BFA 30%,
    #FF3D9A 55%,
    #A78BFA 75%,
    #00E5CC 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}

/* ── 12. STAGGER ENTRANCE ───────────────────────────────── */
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.stagger > * {
  opacity: 0;
  animation: stagger-in 0.5s var(--ease-out) forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.19s; }
.stagger > *:nth-child(4) { animation-delay: 0.26s; }
.stagger > *:nth-child(5) { animation-delay: 0.33s; }

/* ── 13. 3D PRODUCT CARD ENHANCEMENTS ───────────────────── */
.product-card.tilt-card {
  transform-style: preserve-3d;
}

.product-card.tilt-card .product-icon {
  transform: translateZ(30px);
  transition: transform 0.3s ease;
}

.product-card.tilt-card:hover .product-icon {
  transform: translateZ(48px) scale(1.1);
}

.product-card.tilt-card .product-card-title {
  transform: translateZ(20px);
}

/* ── 14. 3D GEOMETRIC SHAPE ─────────────────────────────── */
.geo-shape {
  position: absolute;
  transform-style: preserve-3d;
  animation: geo-rotate 20s linear infinite;
}

@keyframes geo-rotate {
  from { transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  to   { transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(120deg); }
}

/* ── 15. SCROLL PROGRESS BAR ────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--gradient);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(99,102,241,0.6);
}

/* ── 16. AURORA BACKGROUND EFFECT ──────────────────────── */
.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora-band {
  position: absolute;
  width: 150%;
  height: 300px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  animation: aurora-move 15s ease-in-out infinite;
}

.aurora-band:nth-child(1) {
  background: linear-gradient(90deg, #00E5CC, #7C3AED, transparent);
  top: 15%; left: -20%;
  animation-delay: 0s;
  opacity: 0.08;
}

.aurora-band:nth-child(2) {
  background: linear-gradient(90deg, transparent, #7C3AED, #FF3D9A);
  top: 45%; right: -20%;
  animation-delay: -5s;
  height: 200px;
  opacity: 0.06;
}

.aurora-band:nth-child(3) {
  background: linear-gradient(90deg, #7C3AED, transparent, #00E5CC);
  bottom: 5%; left: 10%;
  animation-delay: -10s;
  height: 180px;
  opacity: 0.05;
}

@keyframes aurora-move {
  0%, 100% { transform: translateX(0) scaleX(1); }
  33%       { transform: translateX(5%) scaleX(1.05); }
  66%       { transform: translateX(-5%) scaleX(0.95); }
}

/* ── 17. NUMBER FLIP ANIMATION ──────────────────────────── */
.flip-num {
  display: inline-block;
  animation: flip-in 0.4s var(--spring) both;
}

@keyframes flip-in {
  from { transform: rotateX(-90deg) translateY(-20px); opacity: 0; }
  to   { transform: rotateX(0deg)   translateY(0px);  opacity: 1; }
}

/* ── 18. TOOLTIP 3D ─────────────────────────────────────── */
[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) perspective(400px) rotateX(-10deg);
  background: rgba(10, 10, 20, 0.95);
  border: 1px solid rgba(99,102,241,0.25);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s var(--ease-out);
  z-index: 100;
  backdrop-filter: blur(12px);
}

[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) perspective(400px) rotateX(0deg);
}

/* ── 19. HOLOGRAPHIC CARD BORDER ───────────────────────── */
.holo-card {
  position: relative;
  overflow: hidden;
}

.holo-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    transparent 0%,
    rgba(99,102,241,0.5) 10%,
    rgba(192,132,252,0.6) 20%,
    transparent 30%,
    transparent 70%,
    rgba(99,102,241,0.4) 80%,
    rgba(139,92,246,0.5) 90%,
    transparent 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: holo-spin 6s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}

.holo-card:hover::after { opacity: 1; }

@keyframes holo-spin {
  to { --holo-angle: 360deg; }
}

@property --holo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.product-card.tilt-card,
.service-card.tilt-card,
.why-item.tilt-card,
.portfolio-card.tilt-card {
  position: relative;
  overflow: hidden;
}

.product-card.tilt-card::after,
.service-card.tilt-card::after,
.why-item.tilt-card::after,
.portfolio-card.tilt-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    transparent,
    rgba(99,102,241,0.45),
    rgba(192,132,252,0.55),
    transparent,
    transparent,
    rgba(99,102,241,0.35),
    transparent
  );
  z-index: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: holo-spin 8s linear infinite;
  pointer-events: none;
}

.product-card.tilt-card:hover::after,
.service-card.tilt-card:hover::after,
.why-item.tilt-card:hover::after,
.portfolio-card.tilt-card:hover::after {
  opacity: 1;
}

/* ── 20. CTA 3D SECTION ─────────────────────────────────── */
.cta-3d {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  border: 1px solid rgba(99,102,241,0.2);
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(15,15,30,0.9) 50%, rgba(139,92,246,0.06) 100%);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.cta-3d-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(99,102,241,0.15), transparent),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(139,92,246,0.12), transparent);
  animation: cta-bg-shift 10s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes cta-bg-shift {
  0% { transform: scale(1) translateX(0); }
  100% { transform: scale(1.1) translateX(3%); }
}

.cta-3d > *:not(.cta-3d-bg) {
  position: relative;
  z-index: 1;
}

/* ── 21. TRUST BAR 3D FLOAT ─────────────────────────────── */
.trust-item {
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-out);
}

.trust-item:hover {
  transform: translateY(-4px) translateZ(12px) rotateX(5deg);
}

.trust-icon {
  display: inline-block;
  transition: transform 0.4s var(--spring);
}

.trust-item:hover .trust-icon {
  transform: scale(1.2) translateZ(20px) rotateY(15deg);
}

/* ── 22. PROCESS STEP 3D POP ────────────────────────────── */
.process-step {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out);
}

.process-step.visible .process-step-num {
  animation: step-pop 0.7s var(--spring) both;
}

@keyframes step-pop {
  0% { transform: perspective(400px) rotateX(-30deg) scale(0.6); opacity: 0; }
  60% { transform: perspective(400px) rotateX(8deg) scale(1.08); }
  100% { transform: perspective(400px) rotateX(0deg) scale(1); opacity: 1; }
}

.process-connector.visible::after {
  width: 100%;
}

/* ── 23. SECTION DEPTH PARALLAX ─────────────────────────── */
.section-depth {
  transform-style: preserve-3d;
}

/* ── 24. ENHANCED HERO GRID (animated) ──────────────────── */
.hero-grid::before {
  animation: grid-scroll 20s linear infinite;
}

@keyframes grid-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 48px; }
}

/* ── 25. HEADLINE 3D DEPTH ──────────────────────────────── */
.hero-headline {
  transform-style: preserve-3d;
  text-shadow:
    0 1px 0 rgba(99,102,241,0.1),
    0 20px 60px rgba(99,102,241,0.08);
}

/* ── 26. NAV LOGO 3D HOVER ─────────────────────────────── */
.nav-logo-mark {
  transition: transform 0.4s var(--spring), box-shadow 0.4s ease;
  transform-style: preserve-3d;
}

.nav-logo:hover .nav-logo-mark {
  transform: perspective(400px) rotateY(-12deg) rotateX(8deg) scale(1.05);
  box-shadow: 0 12px 32px rgba(99,102,241,0.45);
}

/* ── 27. FLOATING GEOMETRIC DECORATIONS ─────────────────── */
.geo-deco {
  position: absolute;
  pointer-events: none;
  transform-style: preserve-3d;
  opacity: 0.15;
}

.geo-deco-1 {
  width: 60px; height: 60px;
  border: 2px solid rgba(99,102,241,0.4);
  border-radius: 12px;
  top: 15%; right: 8%;
  animation: geo-float-1 12s ease-in-out infinite;
}

.geo-deco-2 {
  width: 40px; height: 40px;
  border: 2px solid rgba(139,92,246,0.35);
  border-radius: 50%;
  bottom: 25%; left: 5%;
  animation: geo-float-2 9s ease-in-out infinite;
}

@keyframes geo-float-1 {
  0%, 100% { transform: perspective(600px) rotateX(20deg) rotateY(0deg) translateY(0); }
  50% { transform: perspective(600px) rotateX(30deg) rotateY(180deg) translateY(-20px); }
}

@keyframes geo-float-2 {
  0%, 100% { transform: perspective(600px) rotateY(0deg) translateY(0); }
  50% { transform: perspective(600px) rotateY(360deg) translateY(-15px); }
}

/* ── 28. SCROLL-LINKED SECTION FADE DEPTH ───────────────── */
.depth-reveal {
  opacity: 0;
  transform: perspective(1000px) translateZ(-80px) translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.depth-reveal.visible {
  opacity: 1;
  transform: perspective(1000px) translateZ(0) translateY(0);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner {
    padding: 48px 0 60px;
  }
}

@media (max-width: 768px) {
  .nav {
    top: 12px;
    width: calc(100% - 24px);
    height: 56px;
  }

  .hero-inner  { grid-template-columns: 1fr; }
  .hero { padding-top: calc(56px + 12px + 24px); }
}