/* ==========================================================================
   CSS Reset
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

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

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  /* Colors */
  --black: #000000;
  --white: #FFFFFF;
  --dark: #111111;
  --dark-2: #1A1A1A;
  --dark-3: #222222;
  --light: #F5F5F5;
  --light-2: #EBEBEB;
  --gray: #CCCCCC;
  --gray-light: #EEEEEE;
  --gray-dark: #333333;
  --gray-darker: #444444;
  
  /* Borders */
  --border-light: rgba(255, 255, 255, 0.12);
  --border-dark: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(255, 255, 255, 0.06);
  
  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Sizes */
  --container-xl: 1400px;
  --container-lg: 1200px;
  --container-md: 960px;
  --container-sm: 720px;
  
  /* Spacing scale */
  --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;
  --space-6xl: 10rem;
  --space-7xl: 14rem;
  
  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.6s;
  --duration-slower: 0.8s;
  
  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-top: 999;
  
  /* Header */
  --header-height: 80px;
}

/* ==========================================================================
   Typography Scale
   ========================================================================== */

h1, .h1 { font-size: 80px; }
h2, .h2 { font-size: 52px; }
h3, .h3 { font-size: 32px; }
h4, .h4 { font-size: 24px; }
h5, .h5 { font-size: 20px; }
h6, .h6 { font-size: 16px; }

@media (max-width: 1023px) {
  h1, .h1 { font-size: 48px; }
  h2, .h2 { font-size: 40px; }
  h3, .h3 { font-size: 28px; }
  h4, .h4 { font-size: 22px; }
  h5, .h5 { font-size: 18px; }
}

@media (max-width: 767px) {
  h1, .h1 { font-size: 36px; }
  h2, .h2 { font-size: 32px; }
  h3, .h3 { font-size: 24px; }
  h4, .h4 { font-size: 20px; }
}

/* ==========================================================================
   Base Typography Styles
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

p {
  margin-bottom: var(--space-md);
}

.text-small {
  font-size: 14px;
}

/* Links */
a {
  color: var(--white);
  transition: color var(--duration-fast) var(--ease-out);
}

.section-light a,
.section-white a,
.bg-light a,
.bg-white a {
  color: var(--black);
}

p a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

p a:hover {
  text-decoration: underline;
  border-bottom-color: currentColor;
}

/* Strong text */
strong, b {
  font-weight: 600;
  color: var(--white);
}

.section-light strong,
.section-white strong,
.bg-light strong,
.bg-white strong {
  color: var(--black);
}

/* Contextual body text color */
.section-dark p,
.section-darker p,
.bg-dark p,
.bg-black p {
  color: var(--gray);
}

.section-light p,
.section-white p,
.bg-light p,
.bg-white p {
  color: var(--gray-dark);
}

/* ==========================================================================
   Selection Styles
   ========================================================================== */

::selection {
  background-color: var(--white);
  color: var(--black);
}

::-moz-selection {
  background-color: var(--white);
  color: var(--black);
}