:root {
  --nav-h: 72px;
  --bg: #ffffff;
  --text: #0b0b0b;
  --muted: #6b7280;
  --accent: #F59E0B;
  --ring: #e5e7eb;
  --primary: #3c97f1;
  /* Easily swap ARBOTWENTY (card-2) background image */
  --card2-bg: url('./assets/card-1.png');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: #fafafa;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.nav-container {
  max-width: 1200px; margin: 0 auto;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}

/* Move primary navigation to the right side */
.primary-nav { justify-self: end; }
.primary-nav ul { justify-content: flex-end; }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.logo { display: grid; place-items: center; width: 44px; height: 44px; }

.primary-nav ul {
  display: flex; align-items: center; justify-content: center;
  list-style: none; gap: 36px; margin: 0; padding: 0;
}
.primary-nav a { position: relative; text-decoration: none; color: var(--text); font-weight: 600; letter-spacing: .2px; transition: color .2s ease; }
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--accent); outline: none; }
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.primary-nav a:hover::after,
/* .primary-nav a:focus-visible::after { transform: scaleX(1); } */
.primary-nav .btn-download { padding: 6px 10px; border-radius: 6px; }


.nav-right { display: flex; align-items: center; gap: 16px; }

.lang-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.lang-label { font-size: 14px; color: var(--text); }

.switch {
  position: relative; width: 46px; height: 24px;
  border-radius: 999px; border: 1px solid var(--ring);
  background: #3c97f1; padding: 0; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.switch[aria-pressed="true"] { background: var(--accent); border-color: #f4c566; }
.switch[aria-pressed="true"] .knob { transform: translateX(22px); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--ring);
  border-radius: 10px; background: #fff; cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .bar { display: block; width: 20px; height: 2px; background: #111; position: relative; transition: background .2s ease; }
.nav-toggle .bar::before, .nav-toggle .bar::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #111; transition: transform .2s ease; }
.nav-toggle .bar::before { top: -6px; }
.nav-toggle .bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.hero {
  min-height: calc(100vh - var(--nav-h));
  display: grid; place-items: center;
  background-image: url('./assets/bg.png');
  background-size: cover; /* fill full width and height, may crop */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff; /* visible behind image if aspect ratios differ */
}
.hero-content {
  position: relative;
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  align-items: start;
  gap: clamp(40px, 5vw, 80px);
}
.hero-fox {
  grid-column: 1;
  position: absolute;
  width: 100%;
  max-width: 460px;
  margin-top: -80px;
  height: auto;
  z-index: 2;
}
.hero-right {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 680px;
  align-self: start;
  padding-top: clamp(20px, 3vw, 48px);
}
.hero-title {
  max-width: 100%;
  width: 100%;
  margin-top: 10px ;
  height: auto;
  display: block;
}
.hero-content p {
  max-width: 100%;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 0;
  margin-top: 10px;
  color: #014da7;
}
.hero-actions {
  margin-top: 8px;
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all .2s ease;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(60,151,241,.3);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(60,151,241,.4);
}
.btn-cta {
  background: #fff;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-cta:hover,
.btn-cta:focus-visible {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(60,151,241,.3);
}

/* Floating puzzle pieces */
.hero-content img[class^="puzzle"],
.hero-content img[class*=" puzzle"] {
  position: absolute;
  z-index: 1;
  opacity: .85;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.1));
  pointer-events: none;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-12px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
.puzzle1 {
  top: 5%;
  left: -5%;
  width: 100px;
  --rot: -12deg;
  animation: float 6s ease-in-out infinite;
}
.puzzle2 {
  top: 78%;
  left: -14%;
  width: 100px;
  --rot: 10deg;
  animation: float 7s ease-in-out infinite .5s;
}
.puzzle3 {
  top: -2%;
  left: 42%;
  width: 100px;
  --rot: -8deg;
  animation: float 6.5s ease-in-out infinite 1s;
}
.puzzle4 {
  bottom: 1%;
  left: 40%;
  width: 100px;
  --rot: 15deg;
  animation: float 7.2s ease-in-out infinite 1.5s;
}
.puzzle5 {
  bottom: 20%;
  right: 12%;
  width: 100px;
  --rot: -10deg;
  animation: float 6.8s ease-in-out infinite .8s;
}
.puzzle6 {
  top: 10%;
  right: -10%;
  width: 78px;
  --rot: 12deg;
  animation: float 7.5s ease-in-out infinite 1.2s;
}

/* Mobile Navigation */
@media (max-width: 900px) {
  .nav-container {
    grid-template-columns: auto 1fr auto;
    padding: 0 14px;
  }

  /* Right-side drawer panel with soft blur + shadow */
  .primary-nav {
    position: fixed;
    right: 0;
    left: auto;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    width: min(88vw, 520px); /* wider drawer */
    z-index: 1100; /* above header/backdrop */
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.98));
    border-radius: 14px 0 0 14px;
    border: 1px solid rgba(11,11,11,0.06);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    transform: translateX(110%); /* off-canvas by default */
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease, box-shadow .18s;
    box-shadow: 0 12px 34px rgba(11,11,11,.10);
    overflow: auto; /* allow scroll for long menus */
  }
  .primary-nav.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Fullscreen backdrop under the rounded panel */
  .nav-backdrop {
    position: fixed;
    z-index: 1050; /* below drawer, above content */
    left: 0; right: 0; bottom: 0; top: var(--nav-h);
    background: rgba(11,11,11,0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Vertical list with roomy tap targets */
  .primary-nav ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 0;
  }
  .primary-nav a {
    display: block;
    padding: 16px 20px; /* bigger tap target */
    border-bottom: 1px solid rgba(11,11,11,0.03);
    font-size: 18px;
    color: var(--text);
    font-weight: 800;
    background: transparent;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    border-radius: 10px;
    margin: 6px 12px;
  }
  .primary-nav a:hover,
  .primary-nav a:focus {
    background: rgba(245,158,11,0.07);
    color: var(--accent);
    transform: translateX(4px);
    outline: none;
  }
  /* hide desktop underline on mobile to reduce visual clutter */
  .primary-nav a::after { display: none; }

  /* Download CTA more prominent on mobile */
  .primary-nav .btn-download {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px;
    padding: 14px 18px;
    border-radius: 14px;
    /* background: linear-gradient(90deg, var(--accent), #f7b53b); */
    color: rgb(255, 196, 0);
    /* text-align: center; */
    box-shadow: 0 12px 34px rgba(245,158,11,.18);
    font-weight: 800;
    letter-spacing: .2px;
  }

  /* Nav toggle: clearer touch target and subtle elevation */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ring);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(2,6,23,.06);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .nav-toggle:active { transform: translateY(1px); }
  .nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after {
    background: #0b0b0b;
  }
  .nav-toggle[aria-expanded="true"] .bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bar::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar::after { transform: translateY(-6px) rotate(-45deg); }

  .nav-right { margin-left: auto; }

  /* Prevent background scroll when menu open */
  body.no-scroll { overflow: hidden; }

  /* Soft overlay shimmer below the rounded panel when open */
  /* Backdrop replaces previous pseudo-element overlay */

  /* Accessibility & touch improvements */
  .primary-nav a,
  .primary-nav .btn-download {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}
@media (max-width: 400px) {
  /* Center nav links & download CTA in mobile rounded panel */
  .primary-nav ul { align-items: center; }
  .primary-nav a { margin: 8px auto; text-align: center; }
  .primary-nav .btn-download { margin: 12px auto; display: block; text-align: center; width: calc(100% - 28px); max-width: 360px; }

  /* Center common button groups (hero / download) and stack on very small screens */
  .hero-actions,
  .download-buttons {
    justify-content: center;
    gap: 12px;
    flex-direction: column;
    align-items: center;
  }

  .hero-actions .btn,
  .download-buttons .app-store-btn,
  .download-buttons .download-btn {
    width: 100%;
    max-width: 320px;
    margin: 0;
    box-sizing: border-box;
  }

  /* Ensure comfortable tap targets */
  .hero-actions .btn,
  .download-buttons .app-store-btn,
  .download-buttons .download-btn {
    padding: 12px 16px;
  }

  /* Prevent rounded panel from overflowing the viewport */
  .primary-nav,
  .primary-nav.open {
    left: 8px;
    right: 8px;
  }
}
/* Games Section */
.games-section {
  padding: clamp(60px, 8vw, 100px) 20px;
  background: linear-gradient(190deg, #c8f4fb 0%, #ffffff 80%);
  position: relative;
  overflow: hidden;
}

.games-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 28vw, 360px), 1fr));
  gap: clamp(20px, 3vw, 40px);
  perspective: 1000px;
}

.game-card {
  position: relative;
  border-radius: 30px;
  padding: 24px 20px 20px;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity .3s ease, filter .3s ease;
  overflow: hidden;
  will-change: transform, opacity, filter;
  --tilt: 0deg;
  --depth: 0px;
  outline: 1px solid rgba(255,255,255,.22);
  outline-offset: -1px;
}

.games-container:not(.games-intro) .game-card {
  transform: rotate(var(--tilt)) translateZ(var(--depth));
}

.game-card:hover {
  transform: translateY(-8px) rotate(var(--tilt)) translateZ(var(--depth)) scale(1.02);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  outline-color: rgba(255,255,255,.45);
}

.game-card-1 {
  background-color: #93c5fd; /* fallback */
  background-image: url('./assets/card-2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2; /* center card above others for visual stack */
}

.game-card-2 {
  /* Use the provided image as the full card background */
  background-color: #93c5fd; /* fallback */
  background-image: var(--card2-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2; /* center card above others for visual stack */
}

/* By default, the fox inside the card is hidden on large screens */
.game-card-2 .card-fox { display: none; }

.game-card-3 {
  background-color: #93c5fd; /* fallback */
  background-image: url('./assets/card-3.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1; /* center card above others for visual stack */
}

.card-badge {
  position: absolute;
  top: 16px;
  right: -32px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 40px;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  letter-spacing: 0.5px;
  z-index: 2;
}

.card-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 6px 18px rgba(0,0,0,.18);
  position: relative;
  z-index: 1;
}


/* ARBOTWENTY: use full-bleed background image and hide inner image wrapper */
.game-card-2 .card-image { display: none !important; }
.game-card-2 .card-title { position: relative; z-index: 1; margin-bottom: 16px; }

/* Match inner wrapper rounding to the card */
.card-image { border-radius: inherit; overflow: hidden; }

/* Side cards tilt slightly like the reference */
.game-card-1 { --tilt: -8deg; --depth: -180px; }
.game-card-3 { --tilt: 8deg;  --depth: -180px; }
.game-card-2 { --tilt: 0deg;  --depth: 0px; }

/* Games intro animation: show ARBOTWENTY first, others come from behind */
.games-container.games-intro .game-card {
  opacity: 0;
  transform: translateY(20px) translateZ(-220px) scale(0.92);
  filter: blur(2px) saturate(.9);
}
.games-container.games-intro .game-card-2 { /* ARBOTWENTY */
  opacity: 0;
  transform: translateY(20px) translateZ(-120px) scale(0.96);
}

.games-container.games-intro.in-view .game-card-2 {
  opacity: 1;
  transform: translateY(0) translateZ(0) scale(1);
  filter: none;
  transition: transform .6s cubic-bezier(.2,.9,.2,1), opacity .5s ease, filter .5s ease;
  transition-delay: .05s;
}
.games-container.games-intro.in-view .game-card-1 {
  opacity: 1;
  transform: translateY(0) translateZ(0) scale(1);
  filter: none;
  transition: transform .8s cubic-bezier(.2,.9,.2,1), opacity .6s ease, filter .6s ease;
  transition-delay: .55s;
}
.games-container.games-intro.in-view .game-card-3 {
  opacity: 1;
  transform: translateY(0) translateZ(0) scale(1);
  filter: none;
  transition: transform .85s cubic-bezier(.2,.9,.2,1), opacity .65s ease, filter .65s ease;
  transition-delay: .75s;
}

/* Optional subtle hover after animation only */
.games-container.games-intro.in-view .game-card:hover {
  transform: translateY(-8px) rotate(var(--tilt)) translateZ(var(--depth));
}

/* Mobile: reduce tilt/stack for clarity */
@media (max-width: 640px) {
  .game-card { --tilt: 0deg; --depth: 0px; }
  .game-card-1, .game-card-2, .game-card-3 { --tilt: 0deg; --depth: 0px; }
}

/* Tablets: center card on first row, side cards below */
@media (min-width: 641px) and (max-width: 1024px) {
  .games-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: clamp(18px, 3vw, 28px);
  }
  .game-card { aspect-ratio: 4 / 5; }
  .game-card-2 {
    order: -1; /* place first */
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    width: 100%;
  }
  /* slightly reduce tilt/depth on tablets */
  .game-card-1 { --tilt: -5deg; --depth: -120px; }
  .game-card-3 { --tilt: 5deg;  --depth: -120px; }
}

@media (max-width: 640px) {
  .games-section {
    padding: 60px 20px;
  }
  .games-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .game-card {
    min-height: 380px;
    margin: 0 auto;
    max-width: 420px;
    width: 100%;
  }
  .game-card-2 {
    grid-column: auto;
    max-width: 100%;
  }
  .card-title {
    font-size: 1.5rem;
  }
  /* ARBOTWENTY card: refine fox position/size on mobile */
  .game-card-2 .card-fox {
    display: block;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: clamp(140px, 56vw, 300px);
    max-width: 90%;
    height: auto;
    z-index: 1;
    pointer-events: none;
  }
}

/* Fine-tune ARBOTWENTY fox specifically between 361–400px */
@media (max-width: 400px) and (min-width: 361px) {
  .game-card-2 .card-fox {
    top: 64%;
    left: -38%;
    transform: translate(-50%, -50%) scale(0.88);
    width: clamp(150px, 54%, 240px);
  }
}

/* Fine-tune between 300–360px */
@media (max-width: 360px) and (min-width: 300px) {
  .game-card-2 .card-fox {
    top: 66%;
    left: 26%;
    transform: translate(-50%, -50%) scale(0.86);
    width: clamp(140px, 52%, 220px);
  }
}
/* Responsive breakpoints */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: minmax(240px, 380px) 1fr;
    gap: clamp(28px, 4vw, 60px);
  }
  /* Show fox inside card and hide hero fox on tablet and below */
  .hero-fox { display: none; }
  .game-card-2 { position: relative; }
  .game-card-2 .card-fox {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(160px, 55%, 280px);
    height: auto;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.25));
    opacity: .98;
    z-index: 0; /* above ::before gradient, below title */
    pointer-events: none; /* keep the whole card clickable */
    user-select: none;
  }
  .hero-fox {
    max-width: 380px;
  }
  .hero-right {
    padding-top: clamp(6px, 1.2vw, 18px);
  }
  .hero-content p {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  }
  .btn {
    padding: 10px 20px;
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    padding: 20px 0;
  }
  /* Slightly larger fox in card on smaller screens */
  .game-card-2 .card-fox { width: clamp(180px, 62%, 300px); }
  .hero-fox {
    grid-column: 1;
    max-width: 320px;
    margin: 0 auto;
    order: 1;
  }
  .hero-right {
    grid-column: 1;
    align-items: center;
    max-width: 100%;
    padding-top: 0;
    order: 2;
  }
  .hero-title {
    max-width: 400px;
  }
  .hero-content p {
    font-size: clamp(0.9rem, 2vw, 1rem);
    text-align: center;
    max-width: 90%;
  }
  .hero-actions {
    justify-content: center;
    margin-top: 20px;
  }
  .btn {
    padding: 11px 22px;
    font-size: 0.95rem;
  }
  /* Adjust puzzle pieces for mobile */
  .puzzle1 { width: 60px; left: 2%; top: 8%; }
  .puzzle2 { width: 50px; left: 5%; top: 70%; }
  .puzzle3 { width: 55px; left: 45%; top: 2%; }
  .puzzle4 { width: 60px; left: 42%; bottom: 5%; }
  .puzzle5 { width: 52px; right: 8%; bottom: 25%; }
  .puzzle6 { width: 48px; right: 3%; top: 12%; }
}

@media (max-width: 480px) {
  .hero {
    min-height: calc(100vh - var(--nav-h));
    padding: 20px 0;
  }
  .hero-content {
    width: 94vw;
    gap: 24px;
    padding: 0 8px;
  }
  .hero-fox {
    max-width: 260px;
  }
  .hero-title {
    max-width: 320px;
  }
  .hero-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 100%;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 14px;
  }
  .btn {
    width: 100%;
    max-width: 300px;
    padding: 14px 24px;
    font-size: 1rem;
  }
  /* Smaller puzzle pieces on small screens */
  .puzzle1, .puzzle2, .puzzle3, .puzzle4, .puzzle5, .puzzle6 {
    width: 40px;
    opacity: 0.6;
  }
}

/* ===== Additional Sections: About, Partner, Contact, Footer ===== */
/* Shared container and section header */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-header { margin-bottom: clamp(20px, 3vw, 32px); }
.section-header h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .3px;
  color: #0b3c74;
  position: relative;
}
.section-header h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -10px;
  width: 64px; height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3c97f1, #60a5fa 60%, #93c5fd);
}

/* About */
.about { padding: clamp(60px, 8vw, 100px) 0; background: linear-gradient(180deg, #e9f7ff 0%, #f7fbff 100%); }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.about-image { position: relative; }
.about-img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 16px 40px rgba(2, 60, 120, .12); }
.social-media-links { position: absolute; bottom: 14px; left: 14px; display: flex; gap: 10px; }
.social-link { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: #ffffffcc; color: #0b0b0b; text-decoration: none; box-shadow: 0 8px 20px rgba(2,6,23,.12); transition: transform .15s ease, background .15s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.social-link:hover { transform: translateY(-2px); background: #fff; }
.about-content { color: #0b0b0b; }
.about-text p { line-height: 1.7; margin: 0 0 12px; color: #234d7d; }
.about-text strong { color: #0b3c74; }
.games-list { display: grid; gap: 10px; margin: 12px 0 6px; }
.games-list .game-item h4 { margin: 0 0 4px; color: #0b3c74; }
.mission-text { margin-top: 10px; font-weight: 600; }

/* Partner */
.partner { padding: clamp(60px, 8vw, 100px) 0; background: linear-gradient(180deg, #f8fbff 0%, #f1f5ff 100%); }
.partner-content { display: grid; gap: clamp(24px, 3vw, 40px); }
.partner-intro p { margin: 0 0 10px; line-height: 1.8; color: #234d7d; }
.partner-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 24px); }
.benefit { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 12px 30px rgba(2, 60, 120, .08); }
.benefit i { color: #3c97f1; font-size: 22px; }
.benefit h4 { margin: 8px 0 6px; color: #0b3c74; }
.benefit p { margin: 0; color: #234d7d; line-height: 1.6; }
.partner-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 24px); }
.category { background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 10px 24px rgba(2, 60, 120, .06); }
.category i { color: #f59e0b; font-size: 20px; }
.category h4 { margin: 8px 0 6px; color: #0b3c74; }
.category p { margin: 0; color: #234d7d; line-height: 1.6; }
.partner-cta { text-align: center; }
.partner-cta .btn { margin-top: 10px; }

/* Contact */
.contact { padding: clamp(60px, 8vw, 100px) 0; background: linear-gradient(180deg, #f7fbff 0%, #f0f9ff 100%); }
.contact-content { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(24px, 3vw, 40px); }
.contact-form form { display: grid; gap: 14px; }
.form-group { display: grid; gap: 6px; }
.form-group label { font-weight: 700; color: #0b3c74; }
.form-group input, .form-group textarea { padding: 12px 14px; border-radius: 12px; border: 1px solid #d9e6f5; background: #fff; font: inherit; color: #0b0b0b; box-shadow: 0 4px 10px rgba(2,60,120,.04) inset; font-size: 16px; /* Prevents zoom on iOS */ }
.form-group textarea { resize: vertical; min-height: 120px; }
.contact-info { display: grid; gap: 14px; }
.contact-item { display: flex; align-items: center; gap: 12px; background: #fff; padding: 12px 14px; border-radius: 12px; box-shadow: 0 10px 24px rgba(2,60,120,.06); }
.contact-item i { color: #3c97f1; font-size: 18px; }
.contact-item h4 { margin: 0 0 2px; color: #0b3c74; }
.contact-item p { margin: 0; color: #234d7d; }

/* Footer */
.footer { background: #0b1320; color: #c7d2fe; padding: 50px 0 26px; }
.footer a { color: #e5e7eb; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-content { display: grid; gap: 22px; grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
.footer-section h4 { margin: 0 0 8px; color: #ffffff; }
.footer-section ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-logo img { max-width: 120px; height: auto; }
.footer-social-media .social-media-links { position: static; gap: 10px; }
.footer-bottom { margin-top: 18px; text-align: center; color: #9aa6c8; }

/* Responsive tweaks for new sections */
@media (max-width: 1024px) {
  .about-layout { grid-template-columns: 1fr; }
  .partner-benefits, .partner-categories { grid-template-columns: repeat(2, 1fr); }
  .contact-content { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .about { padding: clamp(50px, 6vw, 80px) 0; }
  .about-layout { gap: clamp(16px, 3vw, 28px); }
  .about-img { border-radius: 18px; }
  .social-media-links { gap: 8px; }
  .social-link { width: 36px; height: 36px; font-size: 16px; }
  .about-text { padding: 20px 18px; border-radius: 20px; }
  .section-header h2 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
  .section-header h2::after { width: 48px; }
  .about-text p { font-size: 0.95rem; }
  .games-list { gap: 8px; }
  .games-list .game-item { padding: 11px 13px; border-radius: 14px; }
  .games-list .game-item h4 { font-size: 0.95rem; }
  .games-list .game-item p { font-size: 0.85rem; }
  .partner { padding: clamp(50px, 6vw, 80px) 0; }
  .partner-benefits, .partner-categories { gap: clamp(12px, 2vw, 18px); }
  .benefit, .category { padding: 14px; border-radius: 12px; }
  .benefit i, .category i { font-size: 18px; }
  .benefit h4, .category h4 { font-size: 0.95rem; }
  .benefit p, .category p { font-size: 0.85rem; }
  .contact { padding: clamp(50px, 6vw, 80px) 0; }
  .contact-form form { gap: 12px; }
  .form-group input, .form-group textarea { padding: 11px 12px; border-radius: 10px; font-size: 0.95rem; }
  .contact-info { gap: 12px; }
  .contact-item { padding: 11px 12px; border-radius: 10px; }
  .contact-item i { font-size: 16px; }
  .contact-item h4 { font-size: 0.9rem; }
  .contact-item p { font-size: 0.85rem; }
  .download { padding: clamp(60px, 7vw, 100px) 0; }
  .download-text h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
  .download-text p { font-size: 0.95rem; }
  .feature { padding: 9px 14px; font-size: 0.9rem; gap: 6px; }
  .feature i { font-size: 16px; }
  .download-buttons { gap: 12px; }
  .app-store-btn { padding: 12px 18px; }
  .app-store-btn img { height: 40px; }
  .download-stats { gap: 16px; }
  .stat { padding: 16px 18px; }
  .stat-number { font-size: clamp(1.5rem, 2.8vw, 2rem); }
  .stat-label { font-size: 0.8rem; }
  .footer { padding: 40px 0 20px; }
  .footer-content { gap: 18px; }
  .footer-logo img { max-width: 100px; }
  .footer-section h4 { font-size: 0.95rem; }
  .footer-section ul { gap: 5px; }
  .footer-section a { font-size: 0.9rem; }
  .footer-bottom { font-size: 0.85rem; }
}
@media (max-width: 640px) {
  .footer-content { grid-template-columns: 1fr; }
  .partner-benefits, .partner-categories { grid-template-columns: 1fr; }
  .about { padding: 40px 16px; }
  .container { padding: 0 16px; }
  .section-header h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: clamp(16px, 2vw, 20px); }
  .section-header p { font-size: 0.9rem; }
  .about-layout { gap: 20px; }
  .about-img { border-radius: 16px; }
  .social-media-links { bottom: 10px; left: 10px; gap: 7px; }
  .social-link { width: 32px; height: 32px; font-size: 14px; }
  .about-text { padding: 18px 16px; border-radius: 16px; }
  .about-text p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 10px; }
  .games-list { gap: 6px; margin: 10px 0 4px; }
  .games-list .game-item { padding: 10px 12px; border-radius: 12px; }
  .games-list .game-item h4 { font-size: 0.9rem; }
  .games-list .game-item p { font-size: 0.8rem; line-height: 1.4; }
  .mission-text { font-size: 0.95rem; }
  .mission-text::after { width: 80px; }
  .partner { padding: 40px 16px; }
  .partner-benefits, .partner-categories { gap: clamp(10px, 2vw, 14px); }
  .benefit, .category { padding: 12px; border-radius: 10px; }
  .benefit i, .category i { font-size: 16px; }
  .benefit h4, .category h4 { font-size: 0.9rem; margin: 6px 0 4px; }
  .benefit p, .category p { font-size: 0.8rem; line-height: 1.5; }
  .partner-cta { text-align: center; }
  .contact { padding: 40px 16px; }
  .contact-content { gap: 20px; }
  .contact-form form { gap: 11px; }
  .form-group label { font-size: 0.9rem; }
  .form-group input, .form-group textarea { padding: 10px 11px; border-radius: 8px; font-size: 0.9rem; }
  .form-group textarea { height: 100px; }
  .contact-info { gap: 11px; }
  .contact-item { padding: 10px 11px; border-radius: 8px; gap: 10px; }
  .contact-item i { font-size: 15px; }
  .contact-item h4 { font-size: 0.85rem; }
  .contact-item p { font-size: 0.8rem; }
  .download { padding: 50px 16px; }
  .download-content { gap: 24px; }
  .download-text h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); margin-bottom: 12px; }
  .download-text p { font-size: 0.9rem; margin-bottom: 14px; }
  .feature { padding: 8px 12px; font-size: 0.85rem; gap: 5px; }
  .feature i { font-size: 14px; }
  .download-features { gap: 8px; }
  .download-buttons { flex-direction: column; gap: 12px; align-items: stretch; }
  .app-store-btn { width: 100%; padding: 11px 16px; }
  .app-store-btn img { height: 36px; }
  .backup-buttons { gap: 10px; }
  .download-btn { font-size: 0.9rem; padding: 10px 18px; }
  .download-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .stat { flex: 1 1 auto; min-width: auto; padding: 14px 16px; border-radius: 14px; }
  .stat-number { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
  .stat-label { font-size: 0.75rem; }
  .download-social-media h4 { font-size: 0.95rem; margin: 8px 0 6px; }
  .footer { padding: 35px 16px 18px; }
  .footer-content { gap: 16px; }
  .footer-logo img { max-width: 90px; }
  .footer-section { padding-bottom: 12px; }
  .footer-section h4 { font-size: 0.9rem; margin-bottom: 6px; }
  .footer-section ul { gap: 4px; }
  .footer-section a { font-size: 0.85rem; }
  .footer-section p { font-size: 0.85rem; line-height: 1.5; }
  .footer-social-media .social-media-links { gap: 8px; }
  .footer-bottom { font-size: 0.8rem; margin-top: 14px; }
}
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .about { padding: 35px 14px; }
  .section-header h2 { font-size: 1.25rem; margin-bottom: 12px; }
  .section-header p { font-size: 0.85rem; }
  .about-text { padding: 16px 14px; }
  .about-text p { font-size: 0.88rem; }
  .games-list .game-item { padding: 9px 11px; }
  .games-list .game-item h4 { font-size: 0.85rem; }
  .games-list .game-item p { font-size: 0.78rem; }
  .partner { padding: 35px 14px; }
  .benefit, .category { padding: 10px; }
  .benefit h4, .category h4 { font-size: 0.85rem; }
  .benefit p, .category p { font-size: 0.78rem; }
  .contact { padding: 35px 14px; }
  .contact-content { gap: 16px; }
  .contact-form form { gap: 10px; }
  .form-group input, .form-group textarea { padding: 9px 10px; font-size: 0.88rem; }
  .contact-info { gap: 10px; }
  .contact-item { padding: 9px 10px; }
  .download { padding: 45px 14px; }
  .download-content { gap: 20px; }
  .download-text h3 { font-size: 1.2rem; }
  .download-text p { font-size: 0.88rem; }
  .feature { padding: 7px 10px; font-size: 0.8rem; }
  .download-buttons { gap: 10px; }
  .app-store-btn { padding: 10px 14px; }
  .app-store-btn img { height: 32px; }
  .download-stats { grid-template-columns: 1fr; gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat-number { font-size: 1.4rem; }
  .stat-label { font-size: 0.7rem; }
  .footer { padding: 30px 14px 15px; }
  .footer-content { gap: 12px; }
  .footer-logo img { max-width: 80px; }
  .footer-section h4 { font-size: 0.85rem; }
  .footer-section a { font-size: 0.8rem; }
  .footer-bottom { font-size: 0.75rem; }
  .marquee span { font-size: clamp(40px, 10vw, 120px) !important; }
}

/* --- Visual polish & reveal animations --- */
/* Top overlay to improve title contrast on busy backgrounds */
.game-card::before {
  content: "";
  position: absolute;
  inset: 0 0 60% 0;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 0;
}

/* Gentle animated snow overlay for ARBOTWENTY */
.game-card-2::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 10%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 30%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 50%, rgba(255,255,255,.8) 50%, transparent 51%);
  background-size: 260px 260px, 220px 220px, 200px 200px, 240px 240px;
  background-repeat: repeat;
  animation: snow var(--snow-speed, 18s) linear infinite;
  opacity: .14;
  pointer-events: none;
}
@keyframes snow {
  from { background-position: 0 -260px, 0 -220px, 0 -200px, 0 -240px; }
  to   { background-position: 0 520px, 0 440px, 0 400px, 0 480px; }
}

/* Generic reveal utility */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; }
.reveal.in-view { opacity: 1; transform: none; }

/* Staggered reveal for lists */
.partner-benefits .benefit:nth-child(1) { --reveal-delay: .02s; }
.partner-benefits .benefit:nth-child(2) { --reveal-delay: .08s; }
.partner-benefits .benefit:nth-child(3) { --reveal-delay: .14s; }
.partner-benefits .benefit:nth-child(4) { --reveal-delay: .2s; }
.partner-categories .category:nth-child(1) { --reveal-delay: .02s; }
.partner-categories .category:nth-child(2) { --reveal-delay: .08s; }
.partner-categories .category:nth-child(3) { --reveal-delay: .14s; }
.partner-categories .category:nth-child(4) { --reveal-delay: .2s; }

/* Hover polish for info cards */
.benefit:hover, .category:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2, 60, 120, .14);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Decorative soft blob behind about image */
.about-image::after {
  content: "";
  position: absolute; inset: -10% -6% auto -6%; height: 60%;
  background: radial-gradient(60% 70% at 30% 50%, rgba(60,151,241,.18), rgba(60,151,241,0));
  filter: blur(10px);
  z-index: -1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; opacity: 1; }
  .game-card-2::after { animation: none; }
}

/* ===== Download Section (Modern Appeal) ===== */
.download { padding: clamp(70px, 9vw, 120px) 0; position: relative; background: linear-gradient(140deg,#e6f8ff 0%,#ffffff 48%,#e9f3ff 100%); overflow: hidden; }
.download::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 30%, rgba(60,151,241,.18), transparent 60%), radial-gradient(circle at 80% 65%, rgba(245,158,11,.18), transparent 55%); pointer-events:none; }
.download-content { display:grid; gap:clamp(30px,4vw,60px); grid-template-columns:1.2fr .8fr; align-items:center; }
@media (max-width: 940px){ .download-content { grid-template-columns:1fr; } }

.download-hero { display:flex; flex-direction:column; gap:26px; }
.download-text h3 { margin:0 0 14px; font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; background:linear-gradient(90deg,#0b3c74,#3c97f1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.download-text p { margin:0 0 18px; line-height:1.7; color:#1d4b70; font-weight:600; }

.download-features { display:flex; flex-wrap:wrap; gap:12px; }
.feature { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:14px; background:linear-gradient(135deg,#ffffff,#f2f8ff); box-shadow:0 6px 18px rgba(2,60,120,.08); font-weight:600; color:#0b3c74; position:relative; overflow:hidden; transition:.3s; }
.feature i { color:#3c97f1; }
.feature::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(60,151,241,.18),transparent 70%); opacity:0; transition:.4s; }
.feature:hover { transform:translateY(-4px) scale(1.04); box-shadow:0 12px 28px rgba(2,60,120,.18); }
.feature:hover::after { opacity:1; }

.download-buttons { display:flex; flex-direction:row; gap:18px; align-items:flex-start; }
.app-store-btn { display:inline-flex; align-items:center; justify-content:center; position:relative; border-radius:22px; background:#fff; padding:14px 22px; box-shadow:0 12px 34px rgba(2,60,120,.14); transition:.35s; }
.app-store-btn img { height:44px; width:auto; display:block; }
.app-store-btn:hover { transform:translateY(-6px); box-shadow:0 18px 46px rgba(2,60,120,.22); }

.backup-buttons { display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
.download-btn { width:100%; justify-content:center; }

.download-social-media h4 { margin:10px 0 8px; font-size:1.05rem; font-weight:800; color:#0b3c74; }
.download-social-media .social-media-links { position:static; }

.download-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; justify-content:stretch; }
.stat { padding:18px 20px; border-radius:20px; background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.55)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); position:relative; overflow:hidden; box-shadow:0 14px 40px rgba(2,60,120,.12); border:1px solid rgba(60,151,241,.25); }
.stat::before { content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(60,151,241,.18),transparent 60%); opacity:.5; }
.stat-number { font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:800; letter-spacing:.5px; color:#0b3c74; position:relative; z-index:1; }
.stat-label { font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#3c97f1; margin-top:4px; position:relative; z-index:1; }
.stat:hover { transform:translateY(-6px); box-shadow:0 22px 50px rgba(2,60,120,.22); transition:.35s; }

@media (max-width:640px){
  .download-stats { justify-content:center; }
  .download-buttons { align-items:center; }
  .app-store-btn { width:100%; }
  .app-store-btn img { height:38px; }
  .backup-buttons { grid-template-columns: 1fr; }
}

/* Animated gradient BORDER for app buttons */
.app-store-btn::after { content:""; position:absolute; inset:0; padding:2px; border-radius:inherit; background:linear-gradient(120deg,#3c97f1,#60a5fa,#93c5fd,#3c97f1); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation:borderFlow 8s linear infinite; }
@keyframes borderFlow { 0%{background-position:0 0} 100%{background-position:400% 0} }

/* Tilt transition smoothing */
.game-card { transition: transform .35s cubic-bezier(.16,.84,.41,1), box-shadow .35s, outline-color .35s; }

/* === Modern Animated About Section Enhancements === */
.about { position: relative; overflow: hidden; }
/* Animated subtle shifting background gradient */
.about { background: linear-gradient(115deg,#e9f7ff 0%,#f7fbff 45%,#e6f4ff 60%,#f2fbff 100%); background-size: 180% 180%; animation: aboutBgShift 18s ease-in-out infinite; }
@keyframes aboutBgShift { 0%,100% { background-position: 0 0; } 50% { background-position: 90% 60%; } }

/* Header gradient text with animated sheen */
.about .section-header h2 { background: linear-gradient(90deg,#0b3c74,#3c97f1,#0b3c74); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; overflow: visible; }
.about .section-header h2::before { content:""; position:absolute; top:0; left:-10%; width:30%; height:100%; background: linear-gradient(100deg, rgba(255,255,255,.0) 20%, rgba(255,255,255,.7) 45%, rgba(255,255,255,0) 70%); transform: skewX(-20deg) translateX(-120%); animation: headerSheen 6s cubic-bezier(.25,.8,.25,1) infinite; }
@keyframes headerSheen { 0% { transform: skewX(-20deg) translateX(-120%); } 55% { transform: skewX(-20deg) translateX(220%); } 100% { transform: skewX(-20deg) translateX(220%); } }

/* About image gentle float + accent glow pulse */
.about-image { perspective: 800px; }
.about-img { animation: aboutFloat 9s ease-in-out infinite; position: relative; }
@keyframes aboutFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.about-image::before { content:""; position:absolute; inset:0; border-radius:24px; background: radial-gradient(circle at 30% 35%, rgba(60,151,241,.28), rgba(60,151,241,0) 70%); filter: blur(22px); opacity:.55; animation: glowPulse 7s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity:.38; } 50% { opacity:.72; } }

/* Social links: animated gradient border + pop on hover */
.about .social-link { transition: transform .35s cubic-bezier(.16,.84,.41,1), box-shadow .35s, background .4s; background: linear-gradient(160deg,#ffffffee,#f2f7ff); }
.about .social-link::after { content:""; position:absolute; inset:0; padding:2px; border-radius:inherit; background: linear-gradient(120deg,#3c97f1,#60a5fa,#93c5fd,#3c97f1); background-size:300% 300%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition:opacity .35s; }
.about .social-link:hover { transform: translateY(-6px) scale(1.08); box-shadow:0 18px 40px rgba(2,60,120,.24); }
.about .social-link:hover::after { opacity:1; animation: borderFlow 10s linear infinite; }

/* Glass panel enhancement for text */
.about-text { position: relative; background: linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.82)); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border:1px solid rgba(60,151,241,.18); border-radius:28px; padding: clamp(22px,3vw,38px) clamp(22px,3vw,38px); box-shadow: 0 20px 50px rgba(2,60,120,.10); overflow:hidden; }
.about-text::before { content:""; position:absolute; inset:0; background: linear-gradient(160deg,rgba(60,151,241,.22),rgba(245,158,11,.20)); mix-blend-mode: overlay; opacity:.18; pointer-events:none; }

/* Animated text highlight for strong */
.about-text strong { background: linear-gradient(90deg,#f59e0b,#3c97f1,#f59e0b); -webkit-background-clip:text; background-clip:text; color: transparent; animation: hueShift 8s linear infinite; }
@keyframes hueShift { 0% { filter:hue-rotate(0deg); } 100% { filter:hue-rotate(360deg); } }

/* Game list items entrance & interactive tilt */
.games-list { --tilt-max: 6deg; }
.games-list .game-item { position:relative; background: linear-gradient(135deg,#ffffff,#f3f9ff); padding: 14px 16px; border-radius:18px; box-shadow:0 8px 24px rgba(2,60,120,.08); transition: transform .45s cubic-bezier(.16,.84,.41,1), box-shadow .45s; transform: translateY(14px); opacity:0; }
.about-content.in-view .games-list .game-item { animation: itemRise .9s cubic-bezier(.2,.9,.2,1) forwards; }
.about-content.in-view .games-list .game-item:nth-child(1) { animation-delay:.05s; }
.about-content.in-view .games-list .game-item:nth-child(2) { animation-delay:.15s; }
.about-content.in-view .games-list .game-item:nth-child(3) { animation-delay:.25s; }
@keyframes itemRise { to { transform: translateY(0); opacity:1; } }
.games-list .game-item:hover { transform: translateY(-8px) rotateX(4deg) rotateY(-3deg) scale(1.03); box-shadow:0 18px 42px rgba(2,60,120,.18); }
.games-list .game-item h4 { display:flex; align-items:center; gap:6px; }
.games-list .game-item h4::before { content:""; width:10px; height:10px; border-radius:50%; background: radial-gradient(circle at 30% 30%,#3c97f1,#60a5fa); box-shadow:0 0 0 0 rgba(60,151,241,.5); animation: pulseDot 2.8s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { box-shadow:0 0 0 0 rgba(60,151,241,0); } 50% { box-shadow:0 0 0 10px rgba(60,151,241,0); } }

/* Mission text subtle reveal gradient underline */
.mission-text { position:relative; }
.mission-text::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:3px; background: linear-gradient(90deg,#3c97f1,#f59e0b); border-radius:999px; animation: underlineGrow 1.2s ease forwards; animation-delay:.7s; }
@keyframes underlineGrow { to { width:120px; } }

/* Responsive fine-tuning */
@media (max-width: 768px) {
  .about-text { padding: 24px 20px; }
  .games-list .game-item { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .about, .about-img, .about .section-header h2::before, .games-list .game-item, .mission-text::after, .social-link, .about-text strong { animation: none !important; }
  .games-list .game-item { opacity:1; transform:none; }
  .about .section-header h2::before { display:none; }
}

.arbomeric-marquee {
      padding: 28px 0;
      overflow: hidden;
      background: linear-gradient(90deg, #e9f7ff 0%, #f7fbff 100%);
      display: block;
      pointer-events: none;
    }

    .marquee-wrap {
      width: 100%;
      overflow: hidden;
      display: block;
      box-sizing: border-box;
    }

    .marquee {
      display: inline-flex;
      gap: 4rem;
      align-items: center;
      white-space: nowrap;
      will-change: transform;
      animation: slideLR 14s linear infinite;
    }

    /* Typography + gradient text */
    .marquee span {
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      font-weight: 800;
      font-size: clamp(48px, 8.5vw, 140px);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: linear-gradient(90deg, #3c97f1 0%, #f4c566 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 10px 30px rgba(123,97,255,0.12);
      display: inline-block;
      padding: 8px 0;
      line-height: 1;
    }

      /* Make the marquee much larger while keeping the same transparent background */
        .arbomeric-marquee {
          padding: 48px 0 !important;
          background: transparent !important;
        }
        .arbomeric-marquee .marquee span {
          /* larger sizes: min 64px, responsive up to 220px */
          font-size: clamp(64px, 12vw, 220px) !important;
          line-height: 1 !important;
        } 
    /* Slide from left to right */
    @keyframes slideLR {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      .marquee {
        animation: none;
        transform: none;
        justify-content: center;
        width: 100%;
      }
      .marquee span { pointer-events: auto; }
    }

    /* Make sure it doesn't interfere with clicks/inputs on the page */
    .arbomeric-marquee { z-index: 0; }

    /* Mobile Marquee responsiveness */
    @media (max-width: 768px) {
      .marquee span {
        font-size: clamp(48px, 10vw, 120px) !important;
        gap: 2rem;
      }
      .arbomeric-marquee {
        padding: 32px 0 !important;
      }
    }
    @media (max-width: 640px) {
      .marquee span {
        font-size: clamp(40px, 9vw, 100px) !important;
        gap: 1.5rem;
      }
      .arbomeric-marquee {
        padding: 24px 0 !important;
      }
    }

/* === Additional Mobile Optimizations === */
@media (max-width: 768px) {
  /* Improve all clickable elements for mobile */
  a, button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Better section spacing on mobile */
  section {
    scroll-margin-top: var(--nav-h);
  }
  
  /* Ensure cards don't overflow */
  .benefit, .category, .contact-item {
    max-width: 100%;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  /* Optimize container padding */
  .container {
    padding: 0 20px;
  }
  
  /* Make sure text is readable */
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  
  /* Prevent horizontal scroll issues */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Orientation change handling */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 40px 0;
  }
  
  .hero-content {
    gap: 30px;
  }
  
  .nav-container {
    height: 60px;
  }
  
  :root {
    --nav-h: 60px;
  }
}

/* Use card-2-new.png for tablet and mobile, hide fox on mobile */
@media (max-width: 1024px) {
  :root {
    --card2-bg: url('./assets/card-2-new.png');
  }
}

@media (max-width: 640px) {
  .game-card-2 .card-fox { display: none !important; }
  .game-card-2 {
    background-image: var(--card2-bg) !important;
    background-color: #93c5fd;
    background-size: cover;
    background-position: center;
  }
}

/* === Mobile-only marquee for Games cards (CSS-only, no HTML change) === */
@media (max-width: 640px) {
  .games-section { overflow: hidden; }
  .games-container {
    display: inline-flex; /* override grid on mobile */
    gap: clamp(16px, 4vw, 24px);
    align-items: stretch;
    white-space: nowrap;
    will-change: transform;
    animation: gamesScroll 18s linear infinite;
  }
  .games-container .game-card {
    flex: 0 0 80vw;
    margin: 0;
  }
}
@keyframes gamesScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-140vw); }
}