/* ===========================================
   ZenOps - Global Styles
   =========================================== */

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

/* CSS Variables */
:root {
  /* Colors */
  --color-primary-green: #3BCC78;
  --color-accent-green: #3BFF9A;
  --color-accent-cyan: #A1F3FF;
  --color-text-dark: #121826;
  --color-text-light: #F4F6FB;
  --color-text-muted: #A0B6D9;
  --color-white: #FFFFFF;
  --color-shadow-primary: #134C66;
  --color-btn-secondary: #063246;

  /* Gradients */
  --gradient-primary: linear-gradient(90deg, #3BFF9A 0%, #A1F3FF 100%);
  --gradient-text: linear-gradient(90deg, #3BFF9A 0%, #A1F3FF 65.15%);

  /* Typography */
  --font-primary: 'Raleway', sans-serif;
  --font-display: 'Clash Grotesk', sans-serif;

  /* Spacing */
  --container-max-width: 1352px;
  --container-padding: 80px;

  /* Border Radius */
  --radius-pill: 100px;
}

/* Base Styles */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-text-dark);
  color: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul, ol {
  list-style: none;
}

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

/* Page Wrapper - 1512px centered */
.page-wrapper {
  position: relative;
  width: 1512px;
  margin: 0 auto;
}

/* Espacement entre sections */
.page-wrapper > section {
  margin-bottom: 80px;
  scroll-margin-top: 160px;
}

@media (max-width: 1200px) {
  .page-wrapper > section {
    scroll-margin-top: 96px;
  }
}

.page-wrapper > section:last-of-type {
  margin-bottom: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}