/* ===== CUSTOM FONT ===== */
@font-face {
  font-family: 'Clickerscript';
  src: url('/assets/fonts/ClickerScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}
body {
  font-family: 'Karla', sans-serif;
  color: #333;
  line-height: 1.6;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  position: relative;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 { font-family: 'Rubik', sans-serif; }

/* ===== UTILITY ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
.text-white { color: #fff; }
.text-gray { color: #999; }
.text-small { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.title-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #767676; margin-bottom: 8px; }
.sub-heading-line { width: 40px; height: 2px; background: #d4a5a5; margin: 20px auto 0; }
.section-script { font-family: 'Clickerscript', cursive; font-size: 42px; color: #ff9ee0; text-align: center; margin-bottom: 4px; display: block; }
.section-heading { text-align: center; font-family: 'Rubik', sans-serif; font-size: 28px; font-weight: 500; letter-spacing: 2px; margin-bottom: 12px; }

.btn-outline {
  display: inline-block; padding: 12px 32px; border: 1px solid #fff; color: #fff;
  font-family: 'Rubik', sans-serif; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; transition: all 0.3s;
}
.btn-outline:hover { background: #fff; color: #1a1a2e; }
.btn-solid {
  display: inline-block; padding: 14px 36px; background: #1a1a2e; color: #fff;
  font-family: 'Rubik', sans-serif; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; border: none; cursor: pointer; transition: background 0.3s;
}
.btn-solid:hover { background: #2d2d4a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ===== ANIMATIONS ===== */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px;
  background: #1a1a2e; color: #fff; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.3s; z-index: 99;
}
.back-to-top.visible { opacity: 1; }
.back-to-top svg { width: 16px; height: 16px; fill: #fff; }

/* ===== SKIP LINK (ADA) ===== */
.skip-link {
  position: absolute; top: -40px; left: 0; background: #1a1a2e;
  color: #fff; padding: 8px 16px; z-index: 200; transition: top 0.3s;
}
.skip-link:focus { top: 0; }

/* ===== FOCUS VISIBLE ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #ff71cb; outline-offset: 2px;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; }
}

/* ===== FORM SUCCESS ===== */
.form-success {
  text-align: center;
  padding: 40px 20px;
  color: #fff;
  animation: fadeIn 0.5s ease;
}