/* ==========================================================================
   BASE STYLES
   CSS variables, resets, container, typography, and text effects
   ========================================================================== */

  :root {
    --primary: #0066FF;
    --primary-dark: #0052CC;
    --secondary: #00D4FF;
    --accent: #FFB800;
    --dark: #0A0E27;
    --dark-blue: #141B3C;
    --gray: #6B7280;
    --light-gray: #F3F4F6;
    --white: #FFFFFF;
    --gradient-main: linear-gradient(135deg, #0066FF 0%, #00D4FF 100%);
    --gradient-dark: linear-gradient(135deg, #0A0E27 0%, #141B3C 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, hsla(215,100%,50%,.3) 0px, transparent 50%),
                     radial-gradient(at 80% 0%, hsla(189,100%,56%,.3) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, hsla(343,100%,76%,.2) 0px, transparent 50%);
    --shadow-sm: 0 2px 4px rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,.1);
    --shadow-glow: 0 0 40px rgba(0,102,255,.3);
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Container */
  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  /* Typography - Mobile First */
  .display-1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .display-2 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
  }

  .display-3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.3;
  }

  @media (min-width: 768px) {
    .display-1 { font-size: clamp(3rem, 7vw, 5.5rem); }
    .display-2 { font-size: clamp(2.5rem, 5vw, 4rem); }
    .display-3 { font-size: clamp(2rem, 4vw, 3rem); }
  }

  /* Text Effects */
  .text-gradient {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
  }

  .text-gradient-animated {
    background: linear-gradient(90deg, #0066FF, #00D4FF, #0066FF);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
  }

  @keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .text-swoosh {
    position: relative;
    display: inline-block;
    font-weight: 800;
    padding-bottom: 0.2em;
  }

  .text-swoosh::after {
    content: '';
    position: absolute;
    left: -0.1em;
    right: -0.1em;
    bottom: 0;
    height: 0.25em;
    width: calc(100% + 0.2em);
    background: url("data:image/svg+xml,%3Csvg width='100%25' height='12' viewBox='0 0 100 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8 Q 25 2, 50 6 T 100 8' stroke='%2300D4FF' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    opacity: 0.8;
  }