/* === Load Cal Sans first (hero + section titles) === */
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans:wght@400&display=swap');

/* Local UI font */
@font-face {
  font-family: 'WF Visual Sans';
  src: url('../font/WFVisualSansVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Base */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Space Grotesk', sans-serif;
  background: #023F8C;
  color-scheme: dark;
}

/* ================= HERO ================= */
.hero-section {
  height: 540px;
  margin-top: 60px;        /* 60px navbar gap */
  scroll-margin-top: 60px; /* anchor clearance */

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: #023F8C;
}

.hero-section::before,
.hero-section::after {
  content: "";
  position: absolute;
  inset: -20% -10% -20% -10%;
  pointer-events: none;
  z-index: 0;
}

.hero-section::before {
  background:
    repeating-conic-gradient(
      from 0deg at 50% -10%,
      rgba(255,255,255,0.14) 0deg 2deg,
      transparent 2deg 8deg
    );
  filter: blur(16px);
  opacity: 0.08;
  transform: rotate(-12deg) translateZ(0);
  animation: skw-rays 36s linear infinite;
  mix-blend-mode: screen;
}

.hero-section::after {
  background:
    radial-gradient(circle, rgba(255,255,255,0.20) 3px, transparent 4px) 0 0 / 140px 140px,
    radial-gradient(circle, rgba(255,255,255,0.14) 2px, transparent 3px) 70px 20px / 120px 120px,
    radial-gradient(circle, rgba(255,255,255,0.12) 4px, transparent 5px) 50px 80px / 200px 200px,
    radial-gradient(circle, rgba(255,255,255,0.16) 2.5px, transparent 3.5px) 120px 60px / 180px 180px,
    radial-gradient(circle, rgba(255,255,255,0.12) 2px, transparent 3px) 30px 110px / 160px 160px;
  opacity: 0.15;
  animation: skw-bubbles 80s linear infinite;
}

@keyframes skw-rays { from { transform: rotate(-12deg) translateY(0); } to { transform: rotate(-12deg) translateY(-10%); } }
@keyframes skw-bubbles {
  0%   { background-position: 0 0, 70px 20px, 50px 80px, 120px 60px, 30px 110px; }
  100% { background-position: 0 -900px, 70px -880px, 50px -920px, 120px -940px, 30px -910px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-section::before, .hero-section::after { animation: none !important; }
}

.hero-content {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 20px;
  box-sizing: border-box;
  z-index: 1;
}

.hero-text-container {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  text-align: left;
  z-index: 2;
}

/* HERO TITLE — Cal Sans */
.hero-title {
  margin: 0;
  font-family: 'Cal Sans', sans-serif !important;
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  color: #ffffff;
}

.hero-subtitle {
  margin: 16px 0;
  font-family: 'WF Visual Sans', sans-serif;
  margin-bottom: 22px; /* +6px over the current 16px */
  font-size: 20px;
  color: #ffffff;
}

.hero-buttons {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.hero-buttons a {
  flex: 1;
  text-align: center;
  font-family: 'WF Visual Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 12px 0;
  border-radius: 6px;
  text-decoration: none;
  border: none;
}

.call-to-action { background-color: #605CEB; color: #ffffff; }

/* TINY BRIGHTER GOLD + subtle hover */
.login-button   { background-color: #D5B23E; color: #272934; }
.login-button:hover { filter: brightness(1.03); }

.hero-image {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-height: 450px;
  width: auto;
  z-index: 1;
}

/* ================= SECTION 1 ================= */
.section-1 {
  height: 600px;
  background-color: rgba(39, 41, 52, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-1-content { display: flex; max-width: 1200px; width: 100%; margin: 0 20px; box-sizing: border-box; }
.section-1-left  { flex: 1; display: flex; justify-content: center; align-items: center; }
.section-1-left img { max-height: 500px; width: auto; display: block; }
.section-1-right { flex: 1; display: flex; flex-direction: column; text-align: left; align-items: flex-start; padding: 0 20px; }

.section1-title {
  margin: 0 0 16px;
  font-family: 'Cal Sans', sans-serif !important;
  font-size: 42px;
  color: #ffffff;
  line-height: 1.1;
}
.section1-description { margin: 0; font-family: 'WF Visual Sans', sans-serif; font-size: 20px; color: #dddddd; line-height: 1.4; }

/* ================= SECTION 2 ================= */
.section-2 {
  height: 600px;
  background-color: rgba(31, 34, 41, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-2-content { display: flex; max-width: 1200px; width: 100%; margin: 0 20px; box-sizing: border-box; }
.section-2-left { flex: 1; display: flex; flex-direction: column; text-align: left; align-items: flex-start; padding: 0 20px; }
.section2-title {
  margin: 0 0 16px;
  font-family: 'Cal Sans', sans-serif !important;
  font-size: 48px;
  color: #ffffff;
  line-height: 1.1;
}
.section2-description { margin: 0; font-family: 'WF Visual Sans', sans-serif; font-size: 20px; color: #dddddd; line-height: 1.4; }
.section-2-right { flex: 1; display: flex; justify-content: center; align-items: center; }
.section-2-right img { max-height: 500px; width: auto; display: block; }

/* ================= SECTION 3 ================= */
.section-3 {
  height: 600px;
  background-color: rgba(39, 41, 52, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-3-content { display: flex; max-width: 1200px; width: 100%; margin: 0 20px; box-sizing: border-box; }
.section-3-left { flex: 1; display: flex; justify-content: center; align-items: center; }
.section-3-left img { max-height: 500px; width: auto; display: block; }
.section-3-right { flex: 1; display: flex; flex-direction: column; text-align: left; align-items: flex-start; padding: 0 20px; }
.section3-title {
  margin: 0 0 16px;
  font-family: 'Cal Sans', sans-serif !important;
  font-size: 48px;
  color: #ffffff;
  line-height: 1.1;
}
.section3-description { margin: 0; font-family: 'WF Visual Sans', sans-serif; font-size: 20px; color: #dddddd; line-height: 1.4; }

/* ================= SECTION 4 ================= */
.section-4 {
  height: 600px;
  background-color: rgba(31, 34, 41, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-4-content { display: flex; max-width: 1200px; width: 100%; margin: 0 20px; box-sizing: border-box; }
.section-4-left { flex: 1; display: flex; flex-direction: column; text-align: left; align-items: flex-start; padding: 0 20px; }
.section4-title {
  margin: 0 0 16px;
  font-family: 'Cal Sans', sans-serif !important;
  font-size: 48px;
  color: #ffffff;
  line-height: 1.1;
}
.section4-description { margin: 0; font-family: 'WF Visual Sans', sans-serif; font-size: 20px; color: #dddddd; line-height: 1.4; }
.section-4-right { flex: 1; display: flex; justify-content: center; align-items: center; }
.section-4-right img { max-height: 500px; width: auto; display: block; }

/* ================= SECTION 5 — LEVELING (image left, text right) ================= */
.section-5 {
  height: 600px;
  background-color: rgba(39, 41, 52, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-5-content { display: flex; max-width: 1200px; width: 100%; margin: 0 20px; box-sizing: border-box; }
.section-5-left { flex: 1; display: flex; justify-content: center; align-items: center; }
.section-5-left img { max-height: 500px; width: auto; display: block; }
.section-5-right { flex: 1; display: flex; flex-direction: column; text-align: left; align-items: flex-start; padding: 0 20px; }
.section5-title {
  margin: 0 0 16px;
  font-family: 'Cal Sans', sans-serif !important;
  font-size: 48px;
  color: #ffffff;
  line-height: 1.1;
}
.section5-description { margin: 0; font-family: 'WF Visual Sans', sans-serif; font-size: 20px; color: #dddddd; line-height: 1.4; }

/* ================= SECTION 6 — GAMES (text left, image right) ================= */
.section-6 {
  height: 600px;
  background-color: rgba(31, 34, 41, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-6-content { display: flex; flex-direction: row-reverse; max-width: 1200px; width: 100%; margin: 0 20px; box-sizing: border-box; }
.section-6-left { flex: 1; display: flex; justify-content: center; align-items: center; }
.section-6-left img { max-height: 500px; width: auto; display: block; }
.section-6-right { flex: 1; display: flex; flex-direction: column; text-align: left; align-items: flex-start; padding: 0 20px; }
.section6-title {
  margin: 0 0 16px;
  font-family: 'Cal Sans', sans-serif !important;
  font-size: 48px;
  color: #ffffff;
  line-height: 1.1;
}
.section6-description { margin: 0; font-family: 'WF Visual Sans', sans-serif; font-size: 20px; color: #dddddd; line-height: 1.4; }

/* ================= SECTION 7 ================= */
.section-7 {
  height: 600px;
  background-color: rgba(39, 41, 52, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-7-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; width: 100%; margin: 0 20px; box-sizing: border-box; }
.section-7-item { display: flex; flex-direction: column; align-items: flex-start; }
.section7-item-icon { width: 48px; height: 48px; margin-bottom: 12px; }
.section7-item-title {
  margin: 0 0 8px;
  font-family: 'Cal Sans', sans-serif !important;
  font-size: 24px;
  color: #ffffff;
  line-height: 1.1;
}
.section7-item-description { margin: 0; font-family: 'WF Visual Sans', sans-serif; font-size: 16px; color: #dddddd; line-height: 1.4; }

.banner { height: 300px; background-color: #023F8C; }

/* Shared layout tweaks */
.section-1-content, .section-2-content, .section-3-content, .section-4-content, .section-5-content, .section-6-content { gap: 32px; }
.section-1-right, .section-2-left, .section-3-right, .section-4-left, .section-5-right, .section-6-right { flex: 1 1 0; min-width: 0; }
.section-1-left, .section-2-right, .section-3-left, .section-4-right, .section-5-left, .section-6-left { flex: 0 0 clamp(300px, 40%, 520px); min-width: 0; }
.section-1-left img, .section-2-right img, .section-3-left img, .section-4-right img, .section-5-left img, .section-6-left img {
  width: 100%; max-width: 100%; height: auto; max-height: min(500px, 60vh); object-fit: contain; display: block;
}
.section-1 img, .section-2 img, .section-3 img, .section-4 img, .section-5 img, .section-6 img { max-width: 100%; }
.page-container { overflow-x: hidden; }

/* Overlays */
.section-1-left { position: relative; }
.section-1-left .jelly-overlay {
  position: absolute; z-index: 2; width: clamp(160px, 32%, 280px);
  top: 70%; left: -10%; pointer-events: none; transform: translateZ(0);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}
.section-2-right { position: relative; }
.section-2-right .jelly-overlay2 {
  position: absolute; z-index: 2; width: clamp(160px, 32%, 280px);
  top: 70%; left: -10%; pointer-events: none; transform: translateZ(0);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}
.section-2-right img:first-child { position: relative; z-index: 1; }