/* ── Fonts ── */
@import url('fonts/stylesheet.css');

@font-face {
  font-family: 'PoppinsHero';
  src: url('fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'),
    url('fonts/Poppins-ExtraBoldItalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

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

/* ── Page ── */
html {
  height: 100%;
  background: #000;
}

body {
  background: #000;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-family: 'Poppins', sans-serif;
}

.page {
  position: relative;
  width: 100%;
  height: 932px;
  overflow: hidden;
  isolation: isolate;
  background-color: #000;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  margin: 0;
  transform-origin: top left;
}

.page::before,
.page::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

.page::before {
  top: 0;
  height: 176px;
  background: linear-gradient(
    180deg,
    #000 0%,
    #000 36%,
    rgba(4, 4, 4, 0.92) 50%,
    rgba(4, 4, 4, 0.52) 78%,
    rgba(0, 0, 0, 0) 100%
  );
}

.page::after {
  bottom: 0;
  height: 244px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(4, 4, 4, 0.28) 26%,
    rgba(4, 4, 4, 0.78) 58%,
    #000 84%,
    #000 100%
  );
}

/* ── Shared Layer Positioning ── */
.layer {
  position: absolute;
  pointer-events: none;
}

/* ── Background Glow Effects (disabled for iOS performance) ── */
.bg-glow {
  display: none;
}

/* ── Particle Canvas ── */
.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.bg-glow--top {
  width: 120%;
  height: 40%;
  top: 5%;
  left: -10%;
  background: radial-gradient(ellipse at center, rgba(180, 140, 50, 0.15) 0%, transparent 70%);
}

.bg-glow--mid {
  width: 100%;
  height: 30%;
  top: 35%;
  left: 0;
  background: radial-gradient(ellipse at center, rgba(220, 180, 60, 0.12) 0%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 1: Joker Logo — top left
   ═══════════════════════════════════════════════════════════════ */
.layer-joker {
  z-index: 10;
  top: 15px;
  left: 20px;
  width: 110px;
  height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 2: "NEW FEATURE" vertical text — right edge
   ═══════════════════════════════════════════════════════════════ */
.layer-new-feature {
  z-index: 5;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 62px;
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: rgba(128, 83, 56, 0.18);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  opacity: 1;
}

.layer-new-feature .spacer {
  height: 0.3em;
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 3: "RAISE YOUR HIT RATE" heading
   ═══════════════════════════════════════════════════════════════ */
.layer-heading {
  z-index: 10;
  top: 62px;
  left: 0;
  right: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 60px;
  line-height: 0.8;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 12px rgba(247, 192, 86, 0.18));
}

.heading-line {
  display: block;
  white-space: nowrap;
  background: linear-gradient(180deg,
      #f2c77d 0%,
      #fad98b 15%,
      #fef0ae 40%,
      #fff9e6 70%,
      #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 4: "3X" large text with arrow accents
   ═══════════════════════════════════════════════════════════════ */
.layer-3x {
  z-index: 8;
  top: 170px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.img-3x {
  width: 280px;
  height: auto;
  position: relative;
  z-index: 0;
}

.arrow-accents {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 10px;
  margin-top: 14px;
}

.arrow-svg {
  display: none;
}

.arrow-triangle {
  display: block;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, #8affff 0%, #47dbe9 55%, #1ba2b4 100%);
  filter: drop-shadow(0 0 8px rgba(104, 246, 255, 0.28));
}

.arrow-triangle--lg {
  width: 34px;
  height: 28px;
}

.arrow-triangle--md,
.arrow-triangle--sm {
  width: 29px;
  height: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 5: Golden triangle glow behind characters
   ═══════════════════════════════════════════════════════════════ */
.layer-triangle-glow {
  z-index: 3;
  top: 252px;
  left: 26px;
  right: 26px;
  height: 354px;
  background:
    linear-gradient(to top, transparent 0%, rgba(220, 180, 50, 0.08) 30%, rgba(250, 210, 70, 0.18) 50%, rgba(220, 180, 50, 0.08) 70%, transparent 100%);
  clip-path: polygon(50% 0%, 100% 95%, 0% 95%);
  filter: blur(12px);
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 6: Characters (Medusa & Rome King)
   In the original hero_visual, characters are the dominant center
   element — they span roughly from 30% to 72% of the viewport height
   ═══════════════════════════════════════════════════════════════ */
.layer-characters {
  z-index: 6;
  top: 288px;
  left: calc(50% + 30px);
  transform: translateX(-50%);
  width: 421px;
  height: auto;
  max-height: none;
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 7: Crown — overlaps characters at their lower body
/* ═══════════════════════════════════════════════════════════════
   LAYER 7: Crown + AI BOOSTERS grouped container
   ═══════════════════════════════════════════════════════════════ */
.layer-crown-group {
  z-index: 7;
  top: 508px;
  left: calc(50% + 5px);
  transform: translateX(-50%);
  width: 380px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.crown-img {
  width: 348px;
  height: auto;
  display: block;
}

.ai-title-img {
  width: 306px;
  height: auto;
  display: block;
  margin-top: -105px;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 8: Feature Buttons — stacked vertically, lower-left area
   ═══════════════════════════════════════════════════════════════ */
.layer-features {
  z-index: 12;
  top: 632px;
  left: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.feature-btn {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding-right: 10px;
  pointer-events: auto;
  cursor: default;
}

.feature-btn-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 16px;
  opacity: 0.96;
}

.feature-btn-icon {
  position: relative;
  z-index: 1;
  width: 29px;
  height: 29px;
  margin-left: 1px;
  flex-shrink: 0;
}

.feature-btn-text {
  position: relative;
  z-index: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  color: rgb(245, 231, 138);
  letter-spacing: 0;
  margin-left: 5px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

/* ═══════════════════════════════════════════════════════════════
   CTA Row — absolute bottom
   ═══════════════════════════════════════════════════════════════ */
.cta-row {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 409px;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 0 14px 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  pointer-events: auto;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.btn-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn-link:active {
  transform: scale(0.96);
}

.btn-cta {
  width: 167px;
  height: 48px;
  border-radius: 24px;
  border: none;
}

/* FAQ button: orange gradient bg, white text */
#btn-faq.btn-cta {
  background: linear-gradient(
    180deg,
    #ff8c2e 0%,
    #ff6a00 40%,
    #f55800 100%
  );
  box-shadow:
    0 3px 10px rgba(255, 100, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#btn-faq .btn-cta-text {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* TRY IT button: cream/beige bg, orange text */
#btn-try.btn-cta {
  background: linear-gradient(
    180deg,
    #fff8ee 0%,
    #fef0da 40%,
    #fce8c8 100%
  );
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

#btn-try .btn-cta-text {
  color: #f55800;
  text-shadow: none;
}

.btn-cta-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   Animations — subtle entrance & float
   ═══════════════════════════════════════════════════════════════ */

/* Entrance animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes fadeInUpPlain {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes floatY {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -6px);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    filter: blur(15px) brightness(1);
  }

  50% {
    filter: blur(20px) brightness(1.15);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL EFFECTS — glows, shimmer sweeps, energy pulses
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes: Glow & Energy ── */
@keyframes energyPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(90, 237, 246, 0.3)) drop-shadow(0 0 20px rgba(90, 237, 246, 0.15));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(90, 237, 246, 0.6)) drop-shadow(0 0 40px rgba(90, 237, 246, 0.3)) drop-shadow(0 0 60px rgba(90, 237, 246, 0.1));
  }
}

@keyframes strokeRunning {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes edgeGlowRun {
  0%, 100% {
    filter:
      drop-shadow(-4px -2px 6px rgba(90, 237, 246, 0.9))
      drop-shadow(4px 2px 2px rgba(90, 237, 246, 0));
  }
  25% {
    filter:
      drop-shadow(2px -4px 6px rgba(90, 237, 246, 0.9))
      drop-shadow(-2px 4px 2px rgba(90, 237, 246, 0));
  }
  50% {
    filter:
      drop-shadow(4px 2px 6px rgba(90, 237, 246, 0.9))
      drop-shadow(-4px -2px 2px rgba(90, 237, 246, 0));
  }
  75% {
    filter:
      drop-shadow(-2px 4px 6px rgba(90, 237, 246, 0.9))
      drop-shadow(2px -4px 2px rgba(90, 237, 246, 0));
  }
}

@keyframes goldenGlow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(242, 191, 66, 0.25)) drop-shadow(0 0 20px rgba(242, 191, 66, 0.1));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(242, 191, 66, 0.5)) drop-shadow(0 0 40px rgba(242, 191, 66, 0.25)) drop-shadow(0 0 60px rgba(220, 180, 50, 0.1));
  }
}

@keyframes crownFloat {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -6px);
  }
}

@keyframes characterBreath {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.008);
  }
}

@keyframes triangleBreathe {
  0%, 100% {
    opacity: 0.5;
    filter: blur(12px) brightness(1);
  }
  50% {
    opacity: 0.9;
    filter: blur(16px) brightness(1.3);
  }
}

@keyframes shineSweep {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes buttonGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(242, 191, 66, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(242, 191, 66, 0.45)) drop-shadow(0 0 20px rgba(242, 191, 66, 0.15));
  }
}

@keyframes bgGlowBreathe {
  0%, 100% {
    opacity: 0.6;
    filter: blur(80px);
  }
  50% {
    opacity: 1;
    filter: blur(70px);
  }
}

@keyframes aiTitleShimmer {
  0% {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 6px rgba(242,191,66,0.15)) brightness(1);
  }
  25% {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)) drop-shadow(0 0 14px rgba(242,191,66,0.4)) brightness(1.06);
  }
  50% {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) drop-shadow(0 0 22px rgba(255,215,0,0.5)) drop-shadow(0 0 50px rgba(242,191,66,0.15)) brightness(1.1);
  }
  75% {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)) drop-shadow(0 0 14px rgba(242,191,66,0.4)) brightness(1.06);
  }
  100% {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 6px rgba(242,191,66,0.15)) brightness(1);
  }
}

/* ── Apply Effects ── */

.layer-joker {
  animation: none;
}

.layer-heading {
  animation: shineSweep 4s linear infinite;
  background-size: 200% 100%;
  background-image: linear-gradient(
    90deg,
    #f2c77d 0%,
    #fad98b 20%,
    #ffffff 48%,
    #fff9e6 52%,
    #fef0ae 80%,
    #f2c77d 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.layer-3x {
  animation: edgeGlowRun 2s ease-in-out infinite;
}

.layer-characters {
  animation: characterBreath 4s ease-in-out infinite;
}

.layer-crown-group {
  animation: crownFloat 3.5s ease-in-out infinite;
}

.layer-crown-group.loaded {
  animation: crownFloat 3.5s ease-in-out infinite;
}

.layer-features {
  animation: none;
}

.feature-btn {
  animation: none;
}

.ai-title-img {
  animation: none;
}

.layer-triangle-glow {
  opacity: 0.6;
  animation: none;
}

.layer-new-feature {
  animation: none;
}

/* ── Heading shine sweep override ── */
.heading-line {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
}

/* ── Background glow ambient (static — no animated blur for iOS perf) ── */
.bg-glow--top {
  opacity: 0.7;
  animation: none;
}

.bg-glow--mid {
  opacity: 0.6;
  animation: none;
}

/* ── CTA buttons ── */
.btn-link {
  transition: transform 0.25s ease, filter 0.25s ease;
  animation: none;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive Adjustments
   ═══════════════════════════════════════════════════════════════ */

/* (max-height query removed — height is treated as constant, only width varies) */

/* All sizes locked to 430x932 baseline — no responsive overrides */

/* ═══════════════════════════════════════════════════════════════
   Language Selector
   ═══════════════════════════════════════════════════════════════ */
.lang-selector {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 49px;
  border: 2px solid rgba(245, 217, 107, 0.4);
  border-radius: 50%;
  background: rgba(30, 15, 5, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.lang-btn:hover {
  border-color: rgba(245, 217, 107, 0.8);
  background: rgba(50, 25, 10, 0.85);
}

.lang-flag {
  width: 31px;
  height: 31px;
  display: block;
  object-fit: contain;
}

.lang-dropdown {
  display: none;
  position: absolute;
  top: 57px;
  right: 0;
  min-width: 182px;
  background: rgba(30, 15, 5, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 217, 107, 0.3);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.lang-dropdown.open {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  border: none;
  background: none;
  color: rgba(245, 231, 138, 0.85);
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease;
  text-align: left;
}

.lang-option:hover {
  background: rgba(245, 217, 107, 0.15);
}

.lang-option.active {
  background: rgba(245, 217, 107, 0.2);
  color: rgb(245, 231, 138);
}

.lang-option-flag {
  width: 23px;
  height: 23px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}