:root {
  --ink: #000000;
  --surface: #050505;
  --surface-2: #0a0a0c;
  --glow: #ffffff;
  --glow-cyan: #00eaff;
  --glow-rose: #ff0055;
  --text: #ffffff;
  --text-sub: #a0a0a0;
}
html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, sans-serif; background: #000; color: #fff; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.04em; line-height: 0.92; text-transform: uppercase; }
::selection { background: rgba(0, 234, 255, 0.15); color: #fff; }

/* Glass card */
.glass { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; }

/* Animated mesh gradient behind hero */
.mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mesh::before { content: ""; position: absolute; width: 160%; height: 160%; top: -30%; left: -30%; background: radial-gradient(circle at 20% 30%, rgba(0, 234, 255, 0.12) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(30, 58, 138, 0.10) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(30, 58, 138, 0.08) 0%, transparent 50%); animation: meshFloat 18s ease-in-out infinite alternate; will-change: transform; }
@keyframes meshFloat { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-2%, -2%); } }

/* Glowing text */
.glow-text { text-shadow: 0 0 40px rgba(0, 234, 255, 0.35), 0 0 80px rgba(0, 234, 255, 0.15); }

/* Button shine */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.12), transparent); animation: shine 3s infinite; }
@keyframes shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }

/* Input underline glow */
input:focus { box-shadow: 0 0 0 2px rgba(0, 234, 255, 0.15); border-color: rgba(0, 234, 255, 0.6); }

/* Grid orbit ring */
.orbit-ring { position: absolute; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; }

/* Mistral-style vertical reveal */
@keyframes revealUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.reveal-on-scroll { animation: revealUp 0.9s ease-out forwards; }
/* Sharp geometric card hover */
.glass:hover { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #3a3a50; }

/* Mistral-inspired float orbs */
@keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); opacity: 0.6; } 33% { transform: translate(30px, -20px) scale(1.1); opacity: 0.9; } 66% { transform: translate(-20px, 15px) scale(0.95); opacity: 0.7; } 100% { transform: translate(0, 0) scale(1); opacity: 0.6; } }
.float-orb { position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(20px); pointer-events: none; z-index: 0; will-change: transform, opacity; }
.float-orb-1 { animation: floatOrb 12s ease-in-out infinite; top: 10%; left: -10%; background: radial-gradient(circle, rgba(0, 234, 255, 0.3), transparent 70%); }
.float-orb-2 { animation: floatOrb 14s ease-in-out infinite reverse; top: 60%; right: -10%; background: radial-gradient(circle, rgba(30, 58, 138, 0.25), transparent 70%); }
.float-orb-3 { animation: floatOrb 10s ease-in-out infinite; top: 30%; left: 50%; background: radial-gradient(circle, rgba(110, 30, 255, 0.2), transparent 70%); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: transform, opacity; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Animation drawLine (inline) */
@keyframes drawLine { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }