@font-face{font-family:Material Symbols Outlined;font-style:normal;font-weight:100 700;font-display:block;src:url(/_next/static/media/material-symbols-outlined.ec1fa111.woff2) format("woff2")}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/ba9851c3c22cd980-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/21350d82a1f187e9-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Inter Fallback;src:local("Arial");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.00%;size-adjust:107.12%}.__className_d8ebd1{font-family:Inter,Inter Fallback;font-style:normal}.__variable_d8ebd1{--font-inter:"Inter","Inter Fallback"}

/* ============================================================
   9Router 3D & Ultra-Animated UI/UX System
   ============================================================ */

/* 1. Global Perspective & Dynamic 3D Environment */
html {
  perspective: 1200px;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  min-height: 100vh;
  transform-style: preserve-3d;
  overflow-x: hidden;
}

/* Moving Cyberpunk / Spatial 3D Ambient Lighting */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.10) 0%, transparent 50%);
  animation: bgOrbRotate 22s ease-in-out infinite alternate;
}

.dark body::before {
  background:
    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(168, 85, 247, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(14, 165, 233, 0.16) 0%, transparent 45%);
}

@keyframes bgOrbRotate {
  0% { transform: scale(1) translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: scale(1.12) translate3d(-3%, 4%, 0) rotate(3deg); }
  100% { transform: scale(1.04) translate3d(4%, -2%, 0) rotate(-2deg); }
}

/* 3D Perspective Plane Grid */
.landing-grid {
  background-size: 44px 44px;
  background-image:
    linear-gradient(to right, rgba(99, 102, 241, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.12) 1px, transparent 1px);
  transform: perspective(600px) rotateX(40deg) translateZ(0);
  transform-origin: 50% 20%;
  mask-image: radial-gradient(ellipse at 50% 40%, black 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 35%, transparent 75%);
  animation: gridDrift 16s linear infinite;
  pointer-events: none;
}

@keyframes gridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 44px 44px; }
}

/* 2. 3D Floating & Entrance Stagger */
main, .main-content {
  animation: pageFadeIn3D 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pageFadeIn3D {
  0% {
    opacity: 0;
    transform: perspective(1000px) translateY(18px) translateZ(-40px) rotateX(-2deg);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) translateY(0) translateZ(0) rotateX(0deg);
  }
}

/* 3. Cards - 3D Depth, Glassmorphism, Specular Highlights & Tilt */
.bg-surface,
div[class*="rounded-[14px]"][class*="border"],
div[class*="bg-surface"][class*="border"] {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              background-color 0.25s ease;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 8px 24px -4px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  position: relative;
}

.dark .bg-surface,
.dark div[class*="rounded-[14px]"][class*="border"],
.dark div[class*="bg-surface"][class*="border"] {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 12px 36px -6px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
}

/* 3D Card Hover Lift & Depth */
.bg-surface:hover,
div[class*="rounded-[14px]"][class*="border"]:hover {
  transform: perspective(1000px) translateY(-5px) translateZ(14px) rotateX(1deg);
  box-shadow:
    0 16px 36px -8px rgba(99, 102, 241, 0.22),
    0 8px 18px -4px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(99, 102, 241, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.dark .bg-surface:hover,
.dark div[class*="rounded-[14px]"][class*="border"]:hover {
  box-shadow:
    0 20px 42px -10px rgba(99, 102, 241, 0.32),
    0 10px 22px -4px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(129, 140, 248, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* 4. 3D Tactile Buttons & Interactive Controls */
button,
a[class*="inline-flex"][class*="rounded-"] {
  transform-style: preserve-3d;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.18s ease;
  position: relative;
  will-change: transform, box-shadow;
}

/* Primary Button - Physical 3D Extrusion */
button[class*="bg-brand-"],
button[class*="bg-primary"],
button[class*="bg-orange-"],
button[type="submit"] {
  box-shadow:
    0 4px 0 rgba(79, 70, 229, 0.6),
    0 8px 20px -3px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}

button[class*="bg-brand-"]:hover,
button[class*="bg-primary"]:hover,
button[class*="bg-orange-"]:hover,
button[type="submit"]:hover {
  transform: perspective(600px) translateY(-2px) translateZ(6px);
  box-shadow:
    0 6px 0 rgba(79, 70, 229, 0.7),
    0 12px 26px -3px rgba(99, 102, 241, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: brightness(1.06);
}

button[class*="bg-brand-"]:active,
button[class*="bg-primary"]:active,
button[class*="bg-orange-"]:active,
button[type="submit"]:active {
  transform: perspective(600px) translateY(3px) translateZ(0);
  box-shadow:
    0 1px 0 rgba(79, 70, 229, 0.8),
    0 3px 8px rgba(99, 102, 241, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Subtle Hologram Shimmer Sweep on Primary Buttons */
button[class*="bg-brand-"]::after,
button[class*="bg-primary"]::after,
button[type="submit"]::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: btnShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btnShimmer {
  0%, 65% { transform: translateX(0) rotate(25deg); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: translateX(500%) rotate(25deg); opacity: 0; }
}

/* Secondary & Surface Buttons */
button[class*="bg-surface"],
button[class*="border"] {
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

button[class*="bg-surface"]:hover,
button[class*="border"]:hover {
  transform: perspective(600px) translateY(-2px) translateZ(4px);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

button[class*="bg-surface"]:active,
button[class*="border"]:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.1);
}

/* 5. 3D Form Inputs with Inset Depth & Focus Radiance */
input,
select,
textarea {
  transform-style: preserve-3d;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
}

input:focus,
select:focus,
textarea:focus {
  transform: perspective(600px) translateY(-1px) translateZ(4px) scale(1.006);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 3px rgba(99, 102, 241, 0.32),
    0 8px 22px -4px rgba(99, 102, 241, 0.22) !important;
}

/* 6. 3D Floating Logos & Icons */
div[class*="bg-gradient-to-br"][class*="rounded-[10px]"],
div[class*="size-9"][class*="rounded-[10px]"] {
  animation: logoFloat3D 4s ease-in-out infinite alternate;
  transform-style: preserve-3d;
  box-shadow:
    0 8px 20px -3px rgba(99, 102, 241, 0.4),
    0 0 15px rgba(99, 102, 241, 0.25);
}

@keyframes logoFloat3D {
  0% {
    transform: perspective(600px) translateY(0) rotateX(0deg) rotateY(0deg) translateZ(0);
  }
  100% {
    transform: perspective(600px) translateY(-5px) rotateX(8deg) rotateY(-8deg) translateZ(8px);
  }
}

/* 7. Pulsing 3D Status Badges (Green / Active) */
.bg-\[\#27C93F\],
span[class*="bg-green-"],
span[class*="bg-emerald-"] {
  animation: statusGlow3D 2.5s infinite;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

@keyframes statusGlow3D {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.9), 0 0 28px rgba(34, 197, 94, 0.4);
  }
}

/* 8. 3D Sidebar Navigation Depth */
aside,
div[class*="w-72"][class*="border-r"] {
  box-shadow: 4px 0 28px -4px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(24px) saturate(180%);
  z-index: 20;
}

a[class*="group"][class*="rounded-lg"],
button[class*="group"][class*="rounded-lg"] {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              box-shadow 0.2s ease !important;
}

a[class*="group"][class*="rounded-lg"]:hover,
button[class*="group"][class*="rounded-lg"]:hover {
  transform: perspective(600px) translateX(5px) translateZ(6px);
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.2);
}

[class*="bg-primary/10"],
[class*="bg-brand-500/10"] {
  transform: perspective(600px) translateX(4px) translateZ(6px);
  box-shadow:
    0 3px 10px -2px rgba(99, 102, 241, 0.25),
    inset 0 0 0 1px rgba(99, 102, 241, 0.3);
}

/* 9. 3D Unfolding Modals */
div[role="dialog"],
div[class*="fixed"][class*="z-50"] > div[class*="bg-surface"] {
  animation: modalUnfold3D 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow:
    0 25px 60px -15px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 45px rgba(99, 102, 241, 0.22) !important;
}

@keyframes modalUnfold3D {
  0% {
    opacity: 0;
    transform: perspective(1000px) translateY(32px) translateZ(-60px) rotateX(-12deg) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) translateY(0) translateZ(0) rotateX(0deg) scale(1);
  }
}