:root {
    --orange: #F59E0B;
    --orange-deep: #EA580C;
    --dark: #030305;
    --glass: rgba(17, 24, 39, 0.6);
  }
  
  body { 
    font-family: 'Poppins', sans-serif; 
    background-color: var(--dark);
    color: #e5e7eb;
    margin: 0;
    overflow-x: hidden;
  }

  /* Fixed 3D Canvas Background */
  #webgl-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #050505; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #F59E0B, #EA580C); border-radius: 4px; }
  
  .hide-scrollbar::-webkit-scrollbar { display: none; }
  .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* Glassmorphism & Neon */
  .glass-panel {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(245, 158, 11, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
  .glass-panel:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
  }

  .grad-text { 
    background: linear-gradient(90deg, #F59E0B, #EA580C); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
  }

  /* Scroll Animations */
  .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
  .reveal-left { opacity: 0; transform: translateX(-60px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
  .reveal-right { opacity: 0; transform: translateX(60px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
  .zoom-in { opacity: 0; transform: scale(0.85); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
  
  /* Stagger Delays */
  .delay-100 { transition-delay: 100ms; }
  .delay-200 { transition-delay: 200ms; }
  .delay-300 { transition-delay: 300ms; }
  .delay-400 { transition-delay: 400ms; }
  .delay-500 { transition-delay: 500ms; }
  .delay-600 { transition-delay: 600ms; }

  .active { opacity: 1 !important; transform: none !important; }

  /* Ticker & Marquee */
  @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  .ticker-wrap { overflow: hidden; white-space: nowrap; }
  .ticker-content { display: inline-block; animation: ticker 35s linear infinite; }
  .ticker-content:hover { animation-play-state: paused; }

  @keyframes scrollX { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  .animate-infinite-scroll { animation: scrollX 35s linear infinite; width: max-content; }
  .animate-infinite-scroll:hover { animation-play-state: paused; }
  .mask-edges { -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); }

  /* Gradient Text Animation */
  .animate-gradient-x { animation: gradientX 4s linear infinite; }
  @keyframes gradientX { 0% { background-position: 0% center; } 100% { background-position: -200% center; } }

  /* Chat Widget */
  .chat-panel-hidden { opacity: 0; transform: scale(0.9) translateY(20px); pointer-events: none; }
  .chat-panel-visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
  .typing-dot { animation: typingBounce 1.4s infinite ease-in-out both; }
  .typing-dot:nth-child(1) { animation-delay: -0.32s; }
  .typing-dot:nth-child(2) { animation-delay: -0.16s; }
  @keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

  /* Timeline Specifics */
  .timeline-btn { min-width: 80px; }
  .timeline-btn.active { color: white !important; font-weight: bold; }
  #tilt-card { will-change: transform; transform-style: preserve-3d; }
  
  .tab-btn.active { background: linear-gradient(135deg, #F59E0B, #EA580C); color: white !important; border-bottom: none !important; box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4); }
  .tab-content { display: none; }
  .tab-content.active { display: block; animation: fadeIn 0.4s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
  .progress-bar-fill { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #F59E0B, #EA580C); width: 0; transition: width 1.5s ease; box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
  
  @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } }
  @keyframes shimmer { 100% { transform: translateX(100%); } }

  /* Accessible focus ring — many buttons/inputs use Tailwind's outline-none
     with no replacement, which removes all visible focus for keyboard users
     (WCAG 2.4.7). This restores a visible ring on every interactive element. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid #F59E0B !important;
    outline-offset: 2px !important;
    border-radius: 4px;
  }