/* =============================================
   RESET & DESIGN TOKENS — PULSO DIGITAL
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

:root {
  /* Colors */
  --bg:             #000000;
  --bg-elevated:    #0a0a0a;
  --bg-surface:     #111111;
  --bg-glass:       rgba(10, 10, 10, 0.72);
  --bg-glass-light: rgba(255, 255, 255, 0.04);
  --text-primary:   #F5F5F7;
  --text-secondary: #A1A1A6;
  --text-tertiary:  #6e6e73;
  --accent:         #fb3502;
  --accent-dim:     rgba(251, 53, 2, 0.15);
  --accent-glow:    rgba(251, 53, 2, 0.35);
  --border:         rgba(255, 255, 255, 0.07);
  --border-accent:  rgba(251, 53, 2, 0.4);
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:      0 20px 60px rgba(0,0,0,0.8), 0 8px 24px rgba(0,0,0,0.5);
  --shadow-accent:  0 8px 32px rgba(251, 53, 2, 0.25);

  /* Typography */
  --font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs:        0.75rem;     /* 12px */
  --text-sm:        0.875rem;    /* 14px */
  --text-base:      1rem;        /* 16px */
  --text-lg:        1.125rem;    /* 18px */
  --text-xl:        1.25rem;     /* 20px */
  --text-2xl:       1.5rem;      /* 24px */
  --text-3xl:       1.875rem;    /* 30px */
  --text-4xl:       2.25rem;     /* 36px */
  --text-5xl:       3rem;        /* 48px */
  --text-6xl:       3.75rem;     /* 60px */
  --text-7xl:       4.5rem;      /* 72px */
  --text-8xl:       6rem;        /* 96px */

  /* Spacing */
  --space-xs:       0.25rem;
  --space-sm:       0.5rem;
  --space-md:       1rem;
  --space-lg:       1.5rem;
  --space-xl:       2rem;
  --space-2xl:      3rem;
  --space-3xl:      4rem;
  --space-4xl:      6rem;
  --space-5xl:      8rem;

  /* Border radius */
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-full:    9999px;

  /* Transitions */
  --ease-apple:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:        cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out:       cubic-bezier(0, 0.55, 0.45, 1);
  --dur-fast:       200ms;
  --dur-base:       350ms;
  --dur-slow:       600ms;
  --dur-slower:     900ms;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none; /* custom cursor */
}

body.loading {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font);
  cursor: none;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font);
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
}