:root {
  --ink: #0c124c;
  --ink-deep: #070a30;
  --ink-soft: #0f1660;
  --mist: #d5d8dd;
  --signal: #08b98b;
  --signal-bright: #2ed8a8;
  --steel: #5a6876;
  --slate: #7c8394;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  background: var(--ink-deep);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .no-rm { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Outfit", system-ui, sans-serif;
  background: var(--ink-deep);
  color: var(--mist);
  overflow-x: hidden;
}

::selection {
  background: rgba(8, 185, 139, 0.4);
  color: #fff;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(8,185,139,0.45), rgba(8,185,139,0.15));
  border-radius: 999px;
  border: 2px solid var(--ink-deep);
}

/* ─────────── 3D base ─────────── */
.perspective-1200 { perspective: 1200px; }
.perspective-1800 { perspective: 1800px; }
.perspective-2400 { perspective: 2400px; }
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; }

/* ─────────── Aurora / mesh background ─────────── */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora-1 {
  width: 60vmax; height: 60vmax;
  left: -15vmax; top: -10vmax;
  background: radial-gradient(circle, rgba(8,185,139,0.55), rgba(8,185,139,0) 70%);
  animation: aurora-drift-a 22s ease-in-out infinite alternate;
}
.aurora-2 {
  width: 55vmax; height: 55vmax;
  right: -18vmax; top: 20vh;
  background: radial-gradient(circle, rgba(46,216,168,0.40), rgba(8,185,139,0) 70%);
  animation: aurora-drift-b 28s ease-in-out infinite alternate;
}
.aurora-3 {
  width: 70vmax; height: 70vmax;
  left: 30vw; top: 60vh;
  background: radial-gradient(circle, rgba(124,131,148,0.30), rgba(12,18,76,0) 70%);
  animation: aurora-drift-c 34s ease-in-out infinite alternate;
}

@keyframes aurora-drift-a {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(15vw, 8vh, 0) scale(1.15); }
}
@keyframes aurora-drift-b {
  0% { transform: translate3d(0,0,0) scale(1.05); }
  100% { transform: translate3d(-12vw, 10vh, 0) scale(0.95); }
}
@keyframes aurora-drift-c {
  0% { transform: translate3d(0,0,0) scale(0.95); }
  100% { transform: translate3d(8vw, -10vh, 0) scale(1.1); }
}

/* Perspective grid floor */
.grid-floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 60vh;
  pointer-events: none;
  z-index: 0;
  perspective: 600px;
  perspective-origin: 50% 0%;
  mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 80%, transparent 100%);
}
.grid-floor-inner {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8, 185, 139, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 185, 139, 0.32) 1px, transparent 1px);
  background-size: 60px 60px;
  transform-origin: 50% 0%;
  transform: rotateX(72deg);
  animation: grid-scroll 14s linear infinite;
}
@keyframes grid-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 60px; }
}

/* Noise overlay */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  mix-blend-mode: overlay;
}

/* Cursor glow follower */
.cursor-glow {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(8, 185, 139, 0.18), rgba(8, 185, 139, 0) 60%);
  mix-blend-mode: screen;
  filter: blur(20px);
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.3s ease;
  will-change: left, top;
}

/* ─────────── Type ─────────── */
.text-gradient {
  background-image: linear-gradient(
    115deg,
    #ffffff 0%,
    #d5e6e0 24%,
    #2ed8a8 50%,
    #08b98b 64%,
    #7c8394 100%
  );
  background-size: 200% 200%;
  background-position: 30% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradient-drift 14s ease-in-out infinite alternate;
}
@keyframes gradient-drift {
  0% { background-position: 0% 30%; }
  100% { background-position: 100% 70%; }
}

.headline-shadow {
  text-shadow:
    0 0 1px rgba(7, 10, 48, 0.9),
    0 2px 24px rgba(7, 10, 48, 0.78),
    0 6px 40px rgba(7, 10, 48, 0.42);
}

/* ─────────── Glass surfaces ─────────── */
.glass {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(12, 18, 76, 0.45) 50%,
    rgba(7, 10, 48, 0.65) 100%
  );
  border: 1px solid rgba(213, 216, 221, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -28px rgba(0, 0, 0, 0.6);
}

.glass-strong {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(12, 18, 76, 0.55) 50%,
    rgba(7, 10, 48, 0.75) 100%
  );
  border: 1px solid rgba(213, 216, 221, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ─────────── Tilt card ─────────── */
.tilt-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tilt-card .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(8, 185, 139, 0.18),
    rgba(8, 185, 139, 0) 50%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}
.tilt-card:hover .tilt-shine { opacity: 1; }
.tilt-card .tilt-stroke {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    var(--stroke-angle, 135deg),
    rgba(8, 185, 139, 0.55),
    rgba(8, 185, 139, 0) 30%,
    rgba(8, 185, 139, 0) 70%,
    rgba(8, 185, 139, 0.4) 100%
  );
  opacity: 0;
  padding: 1px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity 0.4s ease;
}
.tilt-card:hover .tilt-stroke { opacity: 1; }

/* Magnetic button */
.magnetic {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* ─────────── Hero policy cube ─────────── */
.cube-stage {
  perspective: 1600px;
  perspective-origin: 50% 38%;
  --tx: 0deg;
  --ty: 0deg;
}
.cube-stage::before {
  /* ambient atmospheric glow behind the cube */
  content: "";
  position: absolute;
  inset: -10% -10% -20% -10%;
  background:
    radial-gradient(ellipse 50% 40% at 50% 45%, rgba(8, 185, 139, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 30% at 50% 80%, rgba(12, 18, 76, 0.55), transparent 80%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: cube-spin 22s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform: rotateX(var(--ty)) rotateY(var(--tx));
  z-index: 1;
}
.cube-stage:hover .cube { animation-play-state: paused; }

.cube-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.04) 28%,
      rgba(12, 18, 76, 0.65) 55%,
      rgba(6, 9, 40, 0.92) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 80px rgba(8, 185, 139, 0.08),
    0 0 60px -10px rgba(8, 185, 139, 0.35);
  display: flex;
  flex-direction: column;
  padding: 22px;
  backface-visibility: visible;
  transform-style: preserve-3d;
}

/* tech grid */
.cube-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8, 185, 139, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 185, 139, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 45%, black 25%, transparent 78%);
  pointer-events: none;
  opacity: 0.7;
}

/* glossy highlight sweep */
.cube-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.10) 48%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0.10) 52%,
      transparent 60%,
      transparent 100%
    ),
    radial-gradient(ellipse 60% 30% at 30% 0%, rgba(255, 255, 255, 0.18), transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* corner bevels */
.cube-face > .face-bevel {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 22%),
    linear-gradient(315deg, rgba(0, 0, 0, 0.35), transparent 22%);
  mix-blend-mode: overlay;
  z-index: 2;
}

/* per-face content sits above decoration */
.cube-face > * { position: relative; z-index: 3; }

@keyframes cube-spin {
  0%   { transform: rotateX(-14deg) rotateY(0deg); }
  25%  { transform: rotateX(-8deg)  rotateY(90deg); }
  50%  { transform: rotateX(-14deg) rotateY(180deg); }
  75%  { transform: rotateX(-20deg) rotateY(270deg); }
  100% { transform: rotateX(-14deg) rotateY(360deg); }
}

.cube-paused .cube { animation-play-state: paused; }

/* ─────────── Orbital rings around cube ─────────── */
.cube-orbits {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 1600px;
}
.cube-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(8, 185, 139, 0.28);
  box-shadow:
    0 0 24px rgba(8, 185, 139, 0.15),
    inset 0 0 24px rgba(8, 185, 139, 0.1);
  transform-style: preserve-3d;
}
.cube-orbit.r1 {
  width: 105%; height: 105%;
  margin-left: -52.5%; margin-top: -52.5%;
  animation: orbit-spin-1 14s linear infinite;
  border-color: rgba(8, 185, 139, 0.35);
}
.cube-orbit.r2 {
  width: 120%; height: 120%;
  margin-left: -60%; margin-top: -60%;
  animation: orbit-spin-2 22s linear infinite reverse;
  border-style: dashed;
  border-color: rgba(213, 216, 221, 0.18);
}
.cube-orbit.r3 {
  width: 138%; height: 138%;
  margin-left: -69%; margin-top: -69%;
  animation: orbit-spin-3 32s linear infinite;
  border-color: rgba(8, 185, 139, 0.15);
}
@keyframes orbit-spin-1 {
  0%   { transform: rotateX(72deg) rotateZ(0deg); }
  100% { transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes orbit-spin-2 {
  0%   { transform: rotateX(60deg) rotateY(20deg) rotateZ(0deg); }
  100% { transform: rotateX(60deg) rotateY(20deg) rotateZ(360deg); }
}
@keyframes orbit-spin-3 {
  0%   { transform: rotateX(80deg) rotateY(-15deg) rotateZ(0deg); }
  100% { transform: rotateX(80deg) rotateY(-15deg) rotateZ(360deg); }
}

/* satellite nodes traveling on orbits */
.cube-sat {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #08b98b;
  box-shadow: 0 0 16px 2px rgba(8, 185, 139, 0.85), 0 0 4px #fff;
}
.cube-sat.s1 { top: -4px; left: 50%; margin-left: -4px; }
.cube-sat.s2 { bottom: -4px; left: 50%; margin-left: -4px; background: #d5d8dd; box-shadow: 0 0 12px rgba(213,216,221,0.6); }
.cube-sat.s3 { top: 50%; right: -4px; margin-top: -4px; background: #08b98b; }

/* ─────────── Floating particles ─────────── */
.cube-particles {
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #08b98b;
  box-shadow: 0 0 8px 1px rgba(8, 185, 139, 0.7);
  opacity: 0;
  animation: particle-float 6s ease-in-out infinite;
}
@keyframes particle-float {
  0%   { transform: translate3d(0, 20px, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { transform: translate3d(var(--px, 30px), -120px, 60px) scale(1); opacity: 0; }
}

/* ─────────── Scanline sweep across cube ─────────── */
.cube-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: 24px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 40%, transparent 75%);
}
.cube-scan::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(8, 185, 139, 0.85), transparent);
  filter: blur(3px);
  animation: cube-scan-sweep 4.5s ease-in-out infinite;
}
@keyframes cube-scan-sweep {
  0%   { top: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* hologram flicker on faces (subtle) */
.cube-face {
  animation: holo-flicker 7s steps(40) infinite;
}
@keyframes holo-flicker {
  0%, 96%, 100% { filter: none; }
  97% { filter: brightness(1.15) saturate(1.4); }
  98% { filter: brightness(0.85); }
  99% { filter: brightness(1.05); }
}

/* face badge on each cube face for label */
.face-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(8, 185, 139, 0.7);
  text-transform: uppercase;
  z-index: 3;
}

/* floor reflection ellipse */
.cube-floor {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 70%;
  height: 28px;
  transform: translateX(-50%) rotateX(75deg);
  background: radial-gradient(ellipse, rgba(8, 185, 139, 0.55), transparent 65%);
  filter: blur(14px);
  z-index: 0;
  pointer-events: none;
  animation: cube-floor-pulse 4s ease-in-out infinite;
}
@keyframes cube-floor-pulse {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) rotateX(75deg) scale(1); }
  50%      { opacity: 0.7;  transform: translateX(-50%) rotateX(75deg) scale(1.08); }
}

/* corner brackets on each face */
.cube-face .corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(8, 185, 139, 0.7);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(8, 185, 139, 0.6));
}
.cube-face .corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.cube-face .corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.cube-face .corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.cube-face .corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-bottom-right-radius: 4px; }

/* ─────────── Marquee / shimmer ─────────── */
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
  gap: 1.25rem;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─────────── Reveal ─────────── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) rotateX(8deg);
  transform-origin: 50% 100%;
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg);
}

/* ─────────── Pulse ring (badge) ─────────── */
.pulse-ring {
  box-shadow: 0 0 0 0 rgba(8, 185, 139, 0.5);
  animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(8, 185, 139, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(8, 185, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(8, 185, 139, 0); }
}

/* Terminal caret */
.caret::after {
  content: "▍";
  margin-left: 2px;
  color: var(--signal);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* Float subtly */
.float-y {
  animation: float-y 8s ease-in-out infinite alternate;
}
@keyframes float-y {
  0% { transform: translateY(-4px); }
  100% { transform: translateY(6px); }
}

/* Scan line */
.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(8, 185, 139, 0.12) 48%,
      rgba(8, 185, 139, 0.20) 50%,
      rgba(8, 185, 139, 0.12) 52%,
      transparent 100%
    );
  height: 30%;
  animation: scan 6s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.6;
}
@keyframes scan {
  0% { transform: translateY(-110%); }
  100% { transform: translateY(420%); }
}

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(8, 185, 139, 0.4),
    transparent
  );
}

/* Connector line for flow */
.flow-connector {
  background: linear-gradient(
    180deg,
    rgba(8, 185, 139, 0.6),
    rgba(8, 185, 139, 0.15),
    transparent
  );
}

/* Grid cell hover */
.cell-hover {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.4s ease, box-shadow 0.4s ease;
}
.cell-hover:hover {
  transform: translateY(-3px) translateZ(0);
  border-color: rgba(8, 185, 139, 0.4);
  box-shadow: 0 0 32px -8px rgba(8, 185, 139, 0.35);
}