/* ============================================
   Base Styles — Reset, Typography, Utilities,
   Animations, Premium Effects
   ============================================ */
   @import url('variables.css');

   /* ── Reset ── */
   *, *::before, *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html {
       font-size: 16px;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       scroll-behavior: smooth;
       overflow-x: hidden;
       width: 100%;
       max-width: 100vw;
   }
   
   body {
       font-family: var(--font-family);
       font-size: var(--text-base);
       font-weight: var(--font-normal);
       line-height: var(--leading-normal);
       color: var(--text-primary);
       background: var(--bg-body);
       overflow-x: hidden;
       width: 100%;
       max-width: 100vw;
   }
   
   /* ── Typography ── */
   h1, h2, h3, h4, h5, h6 {
       font-weight: var(--font-semibold);
       line-height: var(--leading-tight);
       color: var(--text-primary);
       letter-spacing: var(--tracking-tight);
   }
   
   h1 { font-size: var(--text-3xl); }
   h2 { font-size: var(--text-2xl); }
   h3 { font-size: var(--text-xl); }
   h4 { font-size: var(--text-lg); }
   
   p {
       color: var(--text-secondary);
       line-height: var(--leading-relaxed);
   }
   
   a {
       color: var(--primary);
       text-decoration: none;
       transition: color var(--transition-fast);
   }
   
   a:hover { color: var(--primary-dark); }
   
   small {
       font-size: var(--text-sm);
       color: var(--text-muted);
   }
   
   strong { font-weight: var(--font-semibold); }
   
   ::selection {
       background: var(--primary-200);
       color: var(--primary-900);
   }
   
   /* ── Utilities — Spacing ── */
   .container {
       max-width: var(--content-max-width);
       margin: 0 auto;
       padding: 0 var(--space-6);
   }
   
   .text-center   { text-align: center; }
   .text-right    { text-align: right; }
   .text-muted    { color: var(--text-muted); }
   .text-success  { color: var(--success); }
   .text-danger   { color: var(--danger); }
   .text-sm       { font-size: var(--text-sm); }
   .text-xs       { font-size: var(--text-xs); }
   .font-medium   { font-weight: var(--font-medium); }
   .font-semibold { font-weight: var(--font-semibold); }
   
   .mt-1 { margin-top: var(--space-1); }
   .mt-2 { margin-top: var(--space-2); }
   .mt-4 { margin-top: var(--space-4); }
   .mt-6 { margin-top: var(--space-6); }
   .mt-8 { margin-top: var(--space-8); }
   .mb-2 { margin-bottom: var(--space-2); }
   .mb-4 { margin-bottom: var(--space-4); }
   .mb-6 { margin-bottom: var(--space-6); }
   .mb-8 { margin-bottom: var(--space-8); }
   
   .flex { display: flex; }
   .flex-wrap { flex-wrap: wrap; }
   .items-center { align-items: center; }
   .justify-between { justify-content: space-between; }
   .gap-2 { gap: var(--space-2); }
   .gap-3 { gap: var(--space-3); }
   .gap-4 { gap: var(--space-4); }
   
   .hidden { display: none !important; }
   
   /* ════════════════════════════════════════════
      ANIMATION KEYFRAMES
      ════════════════════════════════════════════ */
   @keyframes fadeIn {
       from { opacity: 0; }
       to   { opacity: 1; }
   }
   
   @keyframes fadeInUp {
       from { opacity: 0; transform: translateY(40px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeInDown {
       from { opacity: 0; transform: translateY(-30px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes fadeInLeft {
       from { opacity: 0; transform: translateX(-40px); }
       to   { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes fadeInRight {
       from { opacity: 0; transform: translateX(40px); }
       to   { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes slideInRight {
       from { opacity: 0; transform: translateX(60px); }
       to   { opacity: 1; transform: translateX(0); }
   }
   
   @keyframes scaleIn {
       from { opacity: 0; transform: scale(0.85); }
       to   { opacity: 1; transform: scale(1); }
   }
   
   @keyframes scaleInBounce {
       0%   { opacity: 0; transform: scale(0.5); }
       60%  { opacity: 1; transform: scale(1.05); }
       100% { transform: scale(1); }
   }
   
   @keyframes float {
       0%, 100% { transform: translateY(0); }
       50%      { transform: translateY(-20px); }
   }
   
   @keyframes floatSlow {
       0%, 100% { transform: translateY(0) rotate(0deg); }
       33%      { transform: translateY(-15px) rotate(2deg); }
       66%      { transform: translateY(8px) rotate(-2deg); }
   }
   
   @keyframes floatX {
       0%, 100% { transform: translateX(0) translateY(0); }
       25%      { transform: translateX(10px) translateY(-8px); }
       50%      { transform: translateX(-5px) translateY(-16px); }
       75%      { transform: translateX(8px) translateY(-6px); }
   }
   
   @keyframes pulse {
       0%, 100% { opacity: 1; }
       50%      { opacity: 0.6; }
   }
   
   @keyframes pulseGlow {
       0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
       50%      { box-shadow: 0 0 20px 8px rgba(99, 102, 241, 0); }
   }
   
   @keyframes shimmer {
       0%   { background-position: -200% 0; }
       100% { background-position: 200% 0; }
   }
   
   @keyframes gradientShift {
       0%   { background-position: 0% 50%; }
       50%  { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   
   @keyframes gradientRotate {
       0%   { background-position: 0% 0%; }
       25%  { background-position: 100% 0%; }
       50%  { background-position: 100% 100%; }
       75%  { background-position: 0% 100%; }
       100% { background-position: 0% 0%; }
   }
   
   @keyframes breathe {
       0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.2); }
       50%      { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
   }
   
   @keyframes spin {
       from { transform: rotate(0deg); }
       to   { transform: rotate(360deg); }
   }
   
   @keyframes spinSlow {
       from { transform: rotate(0deg); }
       to   { transform: rotate(360deg); }
   }
   
   @keyframes countUp {
       from { opacity: 0; transform: translateY(10px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes drawLine {
       from { stroke-dashoffset: 1000; }
       to   { stroke-dashoffset: 0; }
   }
   
   @keyframes typewriter {
       from { width: 0; }
       to   { width: 100%; }
   }
   
   @keyframes ripple {
       0%   { transform: scale(0); opacity: 0.5; }
       100% { transform: scale(4); opacity: 0; }
   }
   
   @keyframes borderGlow {
       0%, 100% { border-color: var(--primary-300); box-shadow: 0 0 8px rgba(99,102,241,0.2); }
       50%      { border-color: var(--plum-500); box-shadow: 0 0 16px rgba(168,85,247,0.3); }
   }
   
   @keyframes slideUp {
       from { transform: translateY(100%); opacity: 0; }
       to   { transform: translateY(0); opacity: 1; }
   }
   
   @keyframes morphBlob {
       0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
       25%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
       50%      { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
       75%      { border-radius: 60% 30% 60% 40% / 70% 40% 50% 60%; }
   }
   
   /* ════════════════════════════════════════════
      SCROLL-TRIGGERED ANIMATION CLASSES
      Elements start invisible, animate in when
      .is-visible is added via Intersection Observer
      ════════════════════════════════════════════ */
   .reveal {
       opacity: 0;
       transform: translateY(40px);
       transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                   transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .reveal.is-visible {
       opacity: 1;
       transform: translateY(0);
   }
   
   .reveal-left {
       opacity: 0;
       transform: translateX(-50px);
       transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                   transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .reveal-left.is-visible {
       opacity: 1;
       transform: translateX(0);
   }
   
   .reveal-right {
       opacity: 0;
       transform: translateX(50px);
       transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                   transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .reveal-right.is-visible {
       opacity: 1;
       transform: translateX(0);
   }
   
   .reveal-scale {
       opacity: 0;
       transform: scale(0.8);
       transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                   transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   
   .reveal-scale.is-visible {
       opacity: 1;
       transform: scale(1);
   }
   
   /* Stagger delays for children */
   .reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
   .reveal-stagger > *:nth-child(2) { transition-delay: 100ms; }
   .reveal-stagger > *:nth-child(3) { transition-delay: 200ms; }
   .reveal-stagger > *:nth-child(4) { transition-delay: 300ms; }
   .reveal-stagger > *:nth-child(5) { transition-delay: 400ms; }
   .reveal-stagger > *:nth-child(6) { transition-delay: 500ms; }
   .reveal-stagger > *:nth-child(7) { transition-delay: 600ms; }
   .reveal-stagger > *:nth-child(8) { transition-delay: 700ms; }
   
   /* ── Immediate animation classes ── */
   .animate-fade-in {
       animation: fadeIn 0.6s ease-out both;
   }
   
   .animate-fade-in-up {
       animation: fadeInUp 0.7s ease-out both;
   }
   
   .animate-fade-in-down {
       animation: fadeInDown 0.6s ease-out both;
   }
   
   .animate-fade-in-left {
       animation: fadeInLeft 0.7s ease-out both;
   }
   
   .animate-fade-in-right {
       animation: fadeInRight 0.7s ease-out both;
   }
   
   .animate-scale-in {
       animation: scaleIn 0.5s ease-out both;
   }
   
   .animate-scale-bounce {
       animation: scaleInBounce 0.8s ease-out both;
   }
   
   .animate-float {
       animation: float 4s ease-in-out infinite;
   }
   
   .animate-float-slow {
       animation: floatSlow 6s ease-in-out infinite;
   }
   
   .animate-float-x {
       animation: floatX 8s ease-in-out infinite;
   }
   
   .animate-pulse {
       animation: pulse 2s ease-in-out infinite;
   }
   
   .animate-pulse-glow {
       animation: pulseGlow 2s ease-in-out infinite;
   }
   
   .animate-shimmer {
       background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
       background-size: 200% 100%;
       animation: shimmer 2s infinite;
   }
   
   .animate-spin-slow {
       animation: spinSlow 20s linear infinite;
   }
   
   .animate-morph {
       animation: morphBlob 8s ease-in-out infinite;
   }
   
   .animate-border-glow {
       animation: borderGlow 3s ease-in-out infinite;
   }
   
   /* Stagger children animation delays */
   .stagger-children > *:nth-child(1) { animation-delay: 0ms; }
   .stagger-children > *:nth-child(2) { animation-delay: 100ms; }
   .stagger-children > *:nth-child(3) { animation-delay: 200ms; }
   .stagger-children > *:nth-child(4) { animation-delay: 300ms; }
   .stagger-children > *:nth-child(5) { animation-delay: 400ms; }
   .stagger-children > *:nth-child(6) { animation-delay: 500ms; }
   .stagger-children > *:nth-child(7) { animation-delay: 600ms; }
   .stagger-children > *:nth-child(8) { animation-delay: 700ms; }
   
   /* ── Glassmorphism Utility ── */
   .glass {
       background: var(--glass-bg);
       backdrop-filter: blur(var(--glass-blur));
       -webkit-backdrop-filter: blur(var(--glass-blur));
       border: 1px solid var(--glass-border);
   }
   
   .glass-dark {
       background: var(--glass-bg-dark);
       backdrop-filter: blur(var(--glass-blur));
       -webkit-backdrop-filter: blur(var(--glass-blur));
       border: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   /* ── Gradient Text ── */
   .gradient-text {
       background: var(--gradient-primary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   /* ── Animated Gradient Border ── */
   .gradient-border {
       position: relative;
       border: none !important;
   }
   
   .gradient-border::before {
       content: '';
       position: absolute;
       inset: -2px;
       border-radius: inherit;
       padding: 2px;
       background: linear-gradient(135deg, var(--primary), var(--plum), var(--accent), var(--primary));
       background-size: 300% 300%;
       animation: gradientRotate 4s linear infinite;
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       pointer-events: none;
       z-index: 0;
   }
   
   /* ── Focus Visible Styles ── */
   :focus-visible {
       outline: 2px solid var(--primary);
       outline-offset: 2px;
       border-radius: var(--radius-sm);
   }
   
   /* ── Scrollbar ── */
   ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
   }
   
   ::-webkit-scrollbar-track {
       background: transparent;
   }
   
   ::-webkit-scrollbar-thumb {
       background: var(--gray-300);
       border-radius: var(--radius-full);
   }
   
   ::-webkit-scrollbar-thumb:hover {
       background: var(--gray-400);
   }