/* ============================================
   NABIATEC - Variables & Base (Updated)
   ============================================ */

:root {
  --gold-primary:    #c89b3c;
  --gold-light:      #e8b84b;
  --gold-bright:     #f0c060;
  --gold-dark:       #a67c2e;
  --gold-glow:       rgba(200, 155, 60, 0.15);
  --gold-pulse:      rgba(200, 155, 60, 0.4);

  --black-primary:   #07111f;
  --black-secondary: #0f2035;
  --black-deep:      #040c15;
  --black-card:      #0a1628;

  --teal-accent:     #1eb8a0;
  --teal-glow:       rgba(30, 184, 160, 0.12);

  --white:           #ffffff;
  --off-white:       #f4f5f2;
  --gray-light:      #9ca3af;
  --gray-medium:     #6b7280;
  --gray-dark:       #4b5563;

  --text-muted:      rgba(255, 255, 255, 0.55);
  --border-subtle:   rgba(255, 255, 255, 0.08);
  --border-gold:     rgba(200, 155, 60, 0.2);

  --font-display:    'Syne', sans-serif;
  --font-body:       'DM Sans', sans-serif;
  --font-mono:       'DM Mono', monospace;

  --section-pad:     120px;
  --container-max:   1280px;
  --container-pad:   24px;

  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expo-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:     cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --shadow-gold:     0 12px 40px rgba(200, 155, 60, 0.25);
  --shadow-dark:     0 24px 48px rgba(0, 0, 0, 0.25);
  --shadow-card:     0 8px 32px rgba(0, 0, 0, 0.12);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); background: var(--white); color: var(--black-primary); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--black-primary); }
::-webkit-scrollbar-thumb { background: var(--gold-primary); border-radius: 2px; }
::selection { background: var(--gold-primary); color: var(--black-primary); }

/* ===== KEYFRAMES ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes growLine { from { width: 0; } to { width: 56px; } }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes gridDrift { 0% { transform: translateY(0); } 100% { transform: translateY(60px); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.6); } }
@keyframes pulseRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes heroGlow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } }

/* ===== LOGO ANIMATION KEYFRAMES ===== */
@keyframes logoSpin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
@keyframes logoFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.02); } }
@keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 15px rgba(200,155,60,0.3)); } 50% { filter: drop-shadow(0 0 40px rgba(200,155,60,0.8)) drop-shadow(0 0 80px rgba(200,155,60,0.4)); } }
@keyframes logoPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.9; } }
@keyframes logoShine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes orbit { 0% { transform: rotate(0deg) translateX(80px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); } }
@keyframes orbitReverse { 0% { transform: rotate(0deg) translateX(120px) rotate(0deg); } 100% { transform: rotate(-360deg) translateX(120px) rotate(360deg); } }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes rotate3D { 0% { transform: perspective(1000px) rotateY(0deg); } 100% { transform: perspective(1000px) rotateY(360deg); } }