/* ------------------------------
   Global Reset
------------------------------ */

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

html, body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: #ffffff;
  color: #1a1a1a;
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* ------------------------------
   Color System (DataIsland)
------------------------------ */

:root {
  --blue: #0077cc;
  --blue-light: #e6f3ff;
  --yellow: #ffcc33;
  --green: #2e8b57;
  --sand: #f7f3e9;
  --gray-light: #f5f5f5;
  --gray: #888;
  --gray-dark: #333;

  --radius: 12px;
  --transition: 0.3s ease;
}

/* ------------------------------
   Layout
------------------------------ */

main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ------------------------------
   Typography
------------------------------ */

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
  color: var(--gray-dark);
}

/* ------------------------------
   Links
------------------------------ */

a {
  color: var(--blue);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  opacity: 0.8;
}

/* ------------------------------
   Buttons
------------------------------ */

button,
.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: var(--transition);
}

button:hover,
.btn:hover {
  background: #005fa3;
}

/* ------------------------------
   Sections
------------------------------ */

section {
  padding: 4rem 0;
  border-bottom: 1px solid var(--gray-light);
}

/* ------------------------------
   Scroll Animations
------------------------------ */

.fade-in {
  opacity: 0;
  /* exit (reverse) — snappier */
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.left  { transform: translateX(-300px) rotate(-15deg); }
.fade-in.right { transform: translateX(300px)  rotate(15deg);  }
.fade-in:not(.left):not(.right) { transform: translateY(200px) scale(0.5); }

.fade-in.go {
  opacity: 1 !important;
  transform: none !important;
  /* entrance — slow and dramatic */
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------
   Responsive
------------------------------ */

@media (max-width: 768px) {
  main {
    padding: 1.5rem 1rem;
  }
}