/* =============================================
   CLUB SIREN — sections.css
   Hero, About, Gallery, Testimonials,
   Social, Ocean Floor
   ============================================= */

/* ============================================
   HERO SECTION
   ============================================ */
#hero {
  height: 100vh;
  height: 100dvh; /* iOS Safari: uses dynamic viewport (excludes browser chrome) */
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* Own sunset gradient — depth-bg stays ocean-colored so no orange bleeds below */
  background: linear-gradient(
    to bottom,
    rgb(20,  8, 45)  0%,
    rgb(90, 25, 65) 22%,
    rgb(200, 75, 30) 58%,
    rgb(245,150, 50) 78%,
    rgb(160, 80, 20) 100%
  );
}

/* Sunset atmospheric glow */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Sun disc glow at horizon */
    radial-gradient(ellipse 55% 35% at 50% 72%, rgba(255,180,60,0.55) 0%, transparent 70%),
    /* Warm upper sky bloom */
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(180,60,120,0.30) 0%, transparent 65%),
    /* Left horizon warmth */
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(255,100,40,0.18) 0%, transparent 60%),
    /* Right horizon warmth */
    radial-gradient(ellipse 40% 60% at 90% 80%, rgba(255,100,40,0.15) 0%, transparent 60%);
  animation: hero-light-shift 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* Animated sunset light rays fanning up from the horizon */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 260deg at 50% 80%,
    rgba(255,160,60,0.06) 0deg,
    transparent           4deg,
    transparent           10deg,
    rgba(255,120,40,0.04) 10deg,
    transparent           14deg
  );
  animation: hero-rays 20s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes hero-light-shift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(1%,2%) scale(1.03); }
  100% { transform: translate(-1%,-1%) scale(0.98); }
}

@keyframes hero-rays {
  from { opacity: 0.8; }
  to   { opacity: 1; }
}

/* ── Sunset logo — sits just above the wave at the bottom of the hero ── */
.hero-logo {
  position: absolute;
  left: 50%;
  bottom: -90px;
  transform: translateX(-50%);
  width: clamp(200px, 32vw, 420px);
  height: auto;
  opacity: 0.50;
  pointer-events: none;
  z-index: 4;            /* above hero pseudo-elements (z:1), below wave (z:5) */
  mix-blend-mode: multiply;   /* white background of PNG becomes invisible */
  filter:
    drop-shadow(0 0 24px rgba(255, 130,  40, 0.30))
    drop-shadow(0 0 55px rgba(255, 100,  20, 0.18))
    drop-shadow(0 0 35px rgba(200,  20,   0, 0.80))
    drop-shadow(0 4px 12px rgba(0,    0,   0, 0.25));
}

/* Hero content sits above the pseudo-elements */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  transform: translateY(-60px); /* raise content above the logo */
}

/* When a real hero image is available */
#hero.has-image {
  background:
    linear-gradient(to bottom, rgba(0,4,20,0.45) 0%, rgba(0,10,40,0.2) 60%, transparent 100%),
    url('../assets/img/hero-bg.jpg') center center / cover no-repeat;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}



.hero-tagline {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  letter-spacing: 0.45em;
  color: rgba(232,244,255,0.75);
  font-family: var(--font-display);
  text-transform: uppercase;
}

.hero-title {
  color: var(--white);
  text-shadow: 0 0 30px rgba(0,212,255,0.4);
  margin-bottom: 0.4rem;
}

.hero-sub {
  max-width: 520px;
  color: rgba(232,244,255,0.7);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
}

.hero-ctas {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
  isolation: isolate;   /* prevent logo mix-blend-mode from affecting buttons */
}

/* ── Sunset-themed hero buttons ───────────────────────────── */
#hero .btn {
  border: 2px solid rgba(255, 170, 60, 1);
  color: #fff;
  background: linear-gradient(135deg, rgba(220, 90, 10, 0.55) 0%, rgba(180, 50, 0, 0.45) 100%);
  text-shadow: 0 0 10px rgba(255, 160, 50, 0.9);
  box-shadow: 0 0 14px rgba(255, 120, 30, 0.45), inset 0 1px 0 rgba(255,200,100,0.15);
}
#hero .btn:hover,
#hero .btn:focus {
  background: linear-gradient(135deg, rgba(255, 120, 20, 0.85) 0%, rgba(220, 60, 0, 0.75) 100%);
  color: #fff;
  border-color: #ffb040;
  box-shadow: 0 0 24px rgba(255, 130, 30, 0.85), 0 0 60px rgba(255, 80, 10, 0.45);
}
#hero .btn--magenta {
  border: 2px solid rgba(255, 100, 60, 1);
  color: #fff;
  background: linear-gradient(135deg, rgba(200, 40, 10, 0.55) 0%, rgba(150, 20, 0, 0.45) 100%);
  text-shadow: 0 0 10px rgba(255, 90, 40, 0.9);
  box-shadow: 0 0 14px rgba(220, 60, 20, 0.45), inset 0 1px 0 rgba(255,160,100,0.15);
}
#hero .btn--email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Adds space between the icon and text */
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px; /* Optional: adds a slight curve */

  border: 2px solid rgba(255, 100, 60, 1);
  color: #fff;
  background: linear-gradient(135deg, rgba(200, 40, 10, 0.55) 0%, rgba(150, 20, 0, 0.45) 100%);
  text-shadow: 0 0 10px rgba(255, 90, 40, 0.9);
  box-shadow: 0 0 14px rgba(220, 60, 20, 0.45), inset 0 1px 0 rgba(255,160,100,0.15);
  
  /* Transition for the "Different" feel */
  transition: all 0.3s ease;
}
/* Hover effect to make it feel unique */
#hero .btn--email:hover {
  background: linear-gradient(135deg, rgba(255, 100, 60, 0.7) 0%, rgba(200, 40, 10, 0.6) 100%);
  box-shadow: 0 0 20px rgba(255, 90, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-2px); /* Lifts the button slightly */
}
#hero .btn--magenta:hover,
#hero .btn--magenta:focus {
  background: linear-gradient(135deg, rgba(240, 70, 20, 0.85) 0%, rgba(180, 20, 0, 0.75) 100%);
  color: #fff;
  border-color: #ff6030;
  box-shadow: 0 0 24px rgba(240, 60, 20, 0.85), 0 0 60px rgba(180, 20, 0, 0.45);
}

/* Nav bar */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 3rem;
  /* iPhone notch / Dynamic Island: push content below status bar */
  padding-top: max(1.2rem, env(safe-area-inset-top));
  transition: background 0.4s, backdrop-filter 0.4s;
}
#navbar.scrolled {
  background: rgba(0, 8, 32, 0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,212,255,0.1);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,40,100,0.72) 0%, rgba(0,15,50,0.60) 100%);
  border: 1px solid rgba(0,212,255,0.25);
  box-shadow: 0 0 12px rgba(0,212,255,0.15), inset 0 1px 0 rgba(0,212,255,0.1);
  flex-shrink: 0;
}

.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0,212,255,0.35));
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.25em;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
}

.nav-logo:hover .nav-logo-img {
  filter: drop-shadow(0 0 14px rgba(0,212,255,0.7));
  opacity: 0.9;
}
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: rgba(232,244,255,0.75);
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--cyan); text-shadow: var(--glow-cyan); }
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  /* Expand tap target to 44×44px without changing visual size */
  padding: 10px;
  margin: -10px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}
/* Animate to × when menu is open */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   GLASSMORPHISM PANEL (shared by all sections)
   ============================================ */
.glass-panel {
  background: rgba(0, 10, 35, 0.38);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 20px;
  box-shadow:
    0 0 50px rgba(0, 212, 255, 0.07),
    inset 0 1px 0 rgba(0, 212, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 80, 0.2);
}

/* Content sections wrapper */
.content-section {
  margin: 0 auto 6vh;
  max-width: var(--max-width);
  width: calc(100% - 3rem);
}

/* ============================================
   ABOUT SECTION
   ============================================ */
#about {
  padding: 6vh 0 8vh;
  position: relative;
  overflow: hidden;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-text .section-tag { text-align: left; }
.about-text h2 { margin-bottom: 1rem; }
.about-text p { margin-bottom: 1.2rem; }

.about-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  /* Align items to top so height is driven by the tallest label, not the number */
  align-items: flex-start;
}
.stat-item {
  text-align: center;
  /* Fixed width prevents layout reflow as counter digits change */
  width: 7rem;
  flex-shrink: 0;
}
.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  line-height: 1;
  /* Reserve height up front so the row never shifts vertically */
  min-height: 1em;
}
.stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.55);
  margin-top: 0.25rem;
  display: block;
}

/* Neon viewport panel (right side of about) */
.about-viewport {
  aspect-ratio: 4/3;
  border-radius: 16px;
  border: 1.5px solid rgba(0,212,255,0.3);
  background: rgba(0,8,32,0.7);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,212,255,0.1), inset 0 0 60px rgba(0,30,80,0.5);
}

/* Club video fills the panel; ::before / ::after overlays sit on top */
.about-viewport video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Pseudo-elements need a higher stacking context — z-index on video keeps them on top */
  z-index: 0;
}
.about-viewport::before,
.about-viewport::after {
  z-index: 1;
}
.about-viewport::before {
  content: 'LIVE FEED';
  position: absolute;
  top: 12px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--cyan);
  opacity: 0.7;
}
.about-viewport::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
.viewport-particles {
  position: absolute;
  inset: 0;
}
.v-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.9) 0%, rgba(0,102,255,0.3) 60%, transparent 100%);
  animation: float-particle linear infinite;
  will-change: transform;
}
@keyframes float-particle {
  from { transform: translateY(110%); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  to   { transform: translateY(-20%); opacity: 0; }
}
.viewport-scene-text {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: rgba(0,212,255,0.6);
  text-transform: uppercase;
}

/* ============================================
   GALLERY SECTION
   ============================================ */
#gallery {
  padding: 6vh 0 8vh;
}

.gallery-header {
  text-align: center;
  margin-bottom: 3rem;
}
.gallery-header h2 { margin-bottom: 0.5rem; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.gallery-item {
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(0,212,255,0.1);
  background: rgba(0,20,60,0.8);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.gallery-item:hover {
  transform: scale(1.03);
  border-color: rgba(0,212,255,0.5);
  box-shadow: 0 0 20px rgba(0,212,255,0.2);
  z-index: 2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.gallery-item:hover img { transform: scale(1.07); }

/* Scan-line hover overlay */
.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,212,255,0.04) 3px,
    rgba(0,212,255,0.04) 4px
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover::before { opacity: 1; }

/* Caption overlay */
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.8rem 1rem;
  background: linear-gradient(transparent, rgba(0,5,20,0.85));
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}
.gallery-item:hover .gallery-caption { opacity: 1; }

/* ── DJ Hiring CTA ─────────────────────────────────────── */
.dj-hiring-cta {
  margin-top: 3rem;
  border-top: 1px solid rgba(0,212,255,0.15);
  padding-top: 2.5rem;
}

.dj-hiring-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.dj-hiring-text {
  flex: 1;
  min-width: 260px;
}

.dj-hiring-text p {
  color: rgba(232,244,255,0.75);
  line-height: 1.7;
  max-width: 520px;
  margin: 0;
}

.dj-hiring-img {
  width: 340px;
  max-width: 100%;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 0 32px rgba(0,212,255,0.15);
  flex-shrink: 0;
}

.dj-hiring-btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  flex-shrink: 0;
}

/* ── Birthday CTA ─────────────────────────────────────── */
.birthday-cta {
  margin-top: 3rem;
  border-top: 1px solid rgba(0,212,255,0.15);
  padding-top: 2.5rem;
}

.birthday-inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.birthday-img {
  width: 340px;
  max-width: 100%;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 0 32px rgba(0,212,255,0.15);
  flex-shrink: 0;
}

.birthday-text {
  flex: 1;
  min-width: 260px;
}

.birthday-text p {
  color: rgba(232,244,255,0.75);
  line-height: 1.7;
  max-width: 520px;
  margin: 0;
}

/* Placeholder gallery image (when no real photos) */
.gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(0,30,80,0.9) 0%, rgba(0,10,40,0.95) 100%);
}
.gallery-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.3;
  stroke: var(--cyan);
}
.gallery-placeholder span {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(0,212,255,0.4);
  text-transform: uppercase;
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */
#testimonials {
  padding: 6vh 0 8vh;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 3rem;
}

.carousel-wrapper {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.carousel-track {
  display: flex;
  gap: 1.5rem;
  will-change: transform;
}
.testimonial-card {
  flex: 0 0 calc(33.333% - 1rem);
  min-width: 280px;
  padding: 2rem 1.8rem;
  border-radius: 16px;
  border-left: 3px solid var(--cyan);
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: 1.5rem;
  font-size: 5rem;
  line-height: 1;
  color: var(--cyan);
  opacity: 0.15;
  font-family: Georgia, serif;
}
.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  object-fit: cover;
  background: linear-gradient(135deg, var(--blue-deep), var(--navy));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  overflow: hidden;
}
.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testimonial-avatar svg {
  width: 28px;
  height: 28px;
  stroke: var(--cyan);
  opacity: 0.7;
}
.testimonial-name {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: var(--cyan);
  margin-bottom: 0.2rem;
}
.testimonial-handle {
  font-size: 0.75rem;
  color: rgba(232,244,255,0.45);
  margin-bottom: 1rem;
}
.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(232,244,255,0.8);
}
.stars {
  color: var(--cyan);
  font-size: 0.85rem;
  margin-top: 0.8rem;
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px var(--cyan);
}

/* Carousel nav dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(0,212,255,0.25);
  background-clip: content-box;
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
  border: none;
  box-sizing: content-box;
}
.carousel-dot.active {
  background: var(--cyan);
  background-clip: content-box;
  transform: scale(1.3);
  box-shadow: 0 0 6px var(--cyan);
}

/* ============================================
   SOCIAL SECTION
   ============================================ */
#social {
  padding: 6vh 0 8vh;
}

.social-header {
  text-align: center;
  margin-bottom: 3rem;
}

.social-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  max-width: 860px;
  margin: 0 auto;
}

.social-btn {
  flex: 0 0 calc(33.333% - 0.8rem);
  min-width: 180px;
}

.social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.8rem 1.2rem;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,15,50,0.5);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
}
.social-btn:hover {
  transform: translateY(-4px);
}
.social-btn svg, .social-btn img {
  width: 36px;
  height: 36px;
  transition: filter 0.3s;
}
.social-btn-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.social-btn-sub {
  font-size: 0.7rem;
  opacity: 0.55;
  letter-spacing: 0.1em;
}

/* Platform colors */
.social-btn--discord   { --platform: #5865f2; }
.social-btn--patreon   { --platform: #ff424d; }
.social-btn--tiktok    { --platform: #ff0050; }
.social-btn--instagram { --platform: #e1306c; }
.social-btn--youtube   { --platform: #ff0000; }
.social-btn--x         { --platform: #e7e9ea; }
.social-btn--vrchat    { --platform: var(--cyan); }

.social-btn:hover {
  border-color: var(--platform, var(--cyan));
  box-shadow: 0 0 20px rgba(var(--platform-rgb, 0,212,255), 0.25);
  background: rgba(0,15,50,0.8);
}
.social-btn:hover .social-btn-label {
  color: var(--platform, var(--cyan));
}
.social-btn:hover svg {
  filter: drop-shadow(0 0 6px var(--platform, var(--cyan)));
}

/* ============================================
   OCEAN FLOOR / FOOTER
   ============================================ */
#ocean-floor {
  position: relative;
  padding: 5vh 0 0;
  overflow: visible; /* crab walks within this element — must not clip */
}

.ocean-floor-content {
  text-align: center;
  padding: 3rem 1.5rem 2rem;
  position: relative;
  z-index: 2;
}

.footer-logo {
  width: 120px;
  filter: drop-shadow(0 0 10px rgba(0,212,255,0.5));
  margin-bottom: 1.2rem;
  opacity: 0.9;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 1.2rem 0;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.5);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--cyan); }

.footer-copy {
  font-size: 0.75rem;
  color: rgba(232,244,255,0.3);
  letter-spacing: 0.1em;
  margin-top: 0.8rem;
}

/* Sand strip */
.ufo-decor {
  position: absolute;
  bottom: 12px;
  left: 8%;
  width: 260px;
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.trident-decor {
  position: absolute;
  bottom: 60px;
  right: 8%;
  width: 460px;
  height: auto;
  pointer-events: none;
  z-index: 2;
  transform: rotate(8deg);
}

.sand-strip {
  position: relative;
  height: 120px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(180,140,80,0.08) 0px,
      rgba(210,170,100,0.12) 2px,
      rgba(180,140,80,0.08) 4px
    ),
    linear-gradient(
      to bottom,
      rgba(80,55,20,0.4) 0%,
      rgba(120,90,40,0.55) 40%,
      rgba(80,55,20,0.5) 100%
    );
  overflow: hidden;
}
.sand-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40'%3E%3Cellipse cx='30' cy='15' rx='28' ry='12' fill='rgba(150,110,50,0.15)'/%3E%3Cellipse cx='100' cy='25' rx='40' ry='14' fill='rgba(130,95,40,0.12)'/%3E%3Cellipse cx='170' cy='12' rx='25' ry='10' fill='rgba(160,120,55,0.13)'/%3E%3C/svg%3E") repeat-x center;
}

.seabed-decor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Back to top button */
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-top: 1rem;
  cursor: pointer;
  background: none;
  border: none;
  transition: text-shadow 0.2s;
}
.back-to-top:hover { text-shadow: var(--glow-cyan); }
.back-to-top svg { width: 16px; height: 16px; stroke: var(--cyan); }

/* ============================================
   CLUB SIREN COIN SECTION
   ============================================ */
#coin {
  padding: 6vh 0 8vh;
}

.coin-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.coin-header h2 { margin-bottom: 0.6rem; }
.coin-header p {
  max-width: 540px;
  margin: 0 auto;
}

/* Mission callout */
.coin-mission {
  border-left: 3px solid var(--cyan);
  background: rgba(0,212,255,0.05);
  border-radius: 0 12px 12px 0;
  padding: 1.4rem 2rem;
  margin: 0 0 3rem;
}
.coin-mission p {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: rgba(232,244,255,0.85);
  line-height: 1.7;
  font-style: italic;
  letter-spacing: 0.04em;
}

/* Tokenomics */
.coin-tokenomics {
  margin: 0 0 3.5rem;
}
.coin-tokenomics h3 {
  margin: 0.4rem 0 2rem;
}
.tokenomics-rows {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.tokenomics-row {}
.tokenomics-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.tokenomics-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.75);
}
.tokenomics-pct {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.tokenomics-track {
  height: 8px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}
.tokenomics-fill {
  height: 100%;
  width: 0; /* animated to data-pct via JS */
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: width 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.tokenomics-fill--mag  { background: linear-gradient(90deg, var(--magenta), #cc0088); }
.tokenomics-fill--coral { background: linear-gradient(90deg, var(--coral-pink), #cc4444); }
.tokenomics-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

.tokenomics-note {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.38);
}

.tokenomics-tax {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.38);
}

/* Sustainability block */
.coin-sustainability {
  padding: 1.6rem 2rem;
  border-radius: 14px;
  margin-bottom: 2.5rem;
}
.coin-sustainability .section-tag { margin-bottom: 0.5rem; }
.coin-sustainability p { font-size: 0.95rem; line-height: 1.7; }

/* Two-column layout: coin visual left, stats right */
.coin-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 4rem;
}

/* ── Coin visual — futuristic HUD display ── */
.coin-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer frame — sizes the whole HUD widget */
.coin-frame {
  position: relative;
  width: clamp(260px, 32vw, 340px);
  height: clamp(260px, 32vw, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ambient deep glow behind everything */
.coin-frame::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(120, 0, 220, 0.18) 0%,
    rgba(0, 150, 255, 0.10) 50%,
    transparent 75%
  );
  animation: frame-breathe 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes frame-breathe {
  0%, 100% { opacity: 0.6; transform: scale(0.97); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

/* ── Coin image (clipped circle) ── */
.coin-inner {
  position: relative;
  z-index: 5;
  border-radius: 50%;
  overflow: hidden;
  width: clamp(180px, 22vw, 240px);
  height: clamp(180px, 22vw, 240px);
  box-shadow:
    0 0 0 1.5px rgba(0, 212, 255, 0.3),
    0 0 28px rgba(120, 0, 220, 0.55),
    0 0 60px rgba(0, 150, 255, 0.25);
}

.coin-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scan line sweeping down the coin face */
.coin-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 38%,
    rgba(0, 212, 255, 0.10) 47%,
    rgba(0, 212, 255, 0.28) 50%,
    rgba(0, 212, 255, 0.10) 53%,
    transparent 62%,
    transparent 100%
  );
  animation: scan-sweep 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}
@keyframes scan-sweep {
  0%   { transform: translateY(-130%); }
  100% { transform: translateY(130%); }
}

/* ── Orbital rings (flat ellipses rotating in-plane) ── */
.coin-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid;
  pointer-events: none;
  z-index: 3;
}
.coin-orbit--1 {
  width: 112%;
  height: 112%;
  margin: -56% 0 0 -56%;
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.15);
  transform: scaleY(0.16);
  animation: orbit-1 10s linear infinite;
}
.coin-orbit--2 {
  width: 130%;
  height: 130%;
  margin: -65% 0 0 -65%;
  border-color: rgba(136, 0, 255, 0.38);
  box-shadow: 0 0 8px rgba(136, 0, 255, 0.12);
  transform: scaleY(0.2) rotate(50deg);
  animation: orbit-2 15s linear infinite reverse;
}
@keyframes orbit-1 {
  from { transform: scaleY(0.16) rotate(0deg); }
  to   { transform: scaleY(0.16) rotate(360deg); }
}
@keyframes orbit-2 {
  from { transform: scaleY(0.2) rotate(50deg); }
  to   { transform: scaleY(0.2) rotate(410deg); }
}

/* ── Sonar ping rings ── */
.coin-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.7);
  width: clamp(180px, 22vw, 240px);
  height: clamp(180px, 22vw, 240px);
  animation: sonar-ping 3.6s ease-out infinite;
  pointer-events: none;
  z-index: 2;
}
.coin-pulse--2 { animation-delay: 1.2s;  border-color: rgba(136, 0, 255, 0.55); }
.coin-pulse--3 { animation-delay: 2.4s;  border-color: rgba(0, 212, 255, 0.45); }
@keyframes sonar-ping {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0;    }
}

/* ── Corner targeting brackets ── */
.coin-bracket {
  position: absolute;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-color: rgba(0, 212, 255, 0.8);
  z-index: 6;
  animation: bracket-pulse 2.8s ease-in-out infinite;
}
.coin-bracket--tl { top: 5%;    left: 5%;    border-width: 2px 0 0 2px; }
.coin-bracket--tr { top: 5%;    right: 5%;   border-width: 2px 2px 0 0; }
.coin-bracket--bl { bottom: 5%; left: 5%;    border-width: 0 0 2px 2px; }
.coin-bracket--br { bottom: 5%; right: 5%;   border-width: 0 2px 2px 0; }
.coin-bracket--tr { animation-delay: 0.7s; }
.coin-bracket--bl { animation-delay: 1.4s; }
.coin-bracket--br { animation-delay: 2.1s; }
@keyframes bracket-pulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1;   box-shadow: 0 0 8px rgba(0, 212, 255, 0.7); }
}

/* Listed on exchanges */
.coin-listings {
  margin-bottom: 2.5rem;
}
.coin-listings .section-tag { margin-bottom: 1rem; }

.coin-listings-row {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.coin-listing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  align-self: flex-start;
  width: fit-content;
  padding: 1rem 1.8rem;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(0,212,255,0.15);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.coin-listing-badge:hover {
  border-color: rgba(0,212,255,0.4);
  box-shadow: 0 0 20px rgba(0,212,255,0.12);
}

.coin-listing-img {
  height: 32px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.coin-listing-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.coin-listing-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.05em;
}
.coin-listing-sub {
  font-size: 0.8rem;
  color: rgba(232,244,255,0.55);
}

/* Verification badges */
.coin-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.coin-cert-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.coin-cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.coin-cert-img {
  width: clamp(90px, 12vw, 130px);
  height: clamp(90px, 12vw, 130px);
  object-fit: cover;
  border-radius: 50%;
  /* Gold glow to match the badge colour */
  box-shadow:
    0 0 12px rgba(200, 160, 20, 0.5),
    0 0 30px rgba(200, 160, 20, 0.2);
  transition: box-shadow 0.3s, transform 0.3s;
}
.coin-cert-img:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 18px rgba(200, 160, 20, 0.75),
    0 0 45px rgba(200, 160, 20, 0.35);
}
.coin-cert-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(200, 160, 20, 0.7);
}
.coin-cert-sublabel {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.3);
  text-align: center;
}

/* 2×2 stats grid */
.coin-stats-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
}

.coin-stat {
  text-align: left;
}

.coin-stat-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.coin-stat-tax {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ff9500;
  background: rgba(255,120,0,0.18);
  border: 1px solid rgba(255,120,0,0.4);
  border-radius: 4px;
  padding: 0.2em 0.5em;
  white-space: nowrap;
  align-self: center;
  margin-bottom: 0.15rem;
}

.coin-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  line-height: 1;
  letter-spacing: 0.05em;
}

.coin-stat-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.5);
  margin-top: 0.35rem;
}

/* Three-column feature cards */
.coin-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-bottom: 3rem;
}

.coin-feature {
  padding: 2rem 1.6rem;
  border-radius: 16px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.coin-feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 28px rgba(0,212,255,0.18);
}

.coin-feature-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  border: 1.5px solid rgba(0,212,255,0.35);
  background: rgba(0,212,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coin-feature-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--cyan);
}

.coin-feature h3 {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  margin-bottom: 0.7rem;
  color: var(--white);
}
.coin-feature p {
  font-size: 0.9rem;
  line-height: 1.65;
}

/* Centered CTA */
.coin-contract {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.coin-contract-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: rgba(0,212,255,0.6);
  text-transform: uppercase;
}

.coin-contract-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.18);
  border-radius: 50px;
  padding: 0.45em 1em;
  flex-wrap: wrap;
  justify-content: center;
}

.coin-contract-addr {
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  color: rgba(232,244,255,0.85);
  letter-spacing: 0.04em;
}

.coin-contract-copy {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(0,212,255,0.7);
  padding: 0.2em 0.3em;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.coin-contract-copy:hover { color: var(--cyan); }
.coin-contract-copy .icon-check { display: none; }
.coin-contract-copy.copied .icon-copy  { display: none; }
.coin-contract-copy.copied .icon-check { display: block; color: #4ade80; }

.coin-contract-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cyan);
  text-decoration: none;
  border-left: 1px solid rgba(0,212,255,0.2);
  padding-left: 0.7em;
  margin-left: 0.2em;
  transition: opacity 0.2s;
}
.coin-contract-link:hover { opacity: 0.75; }

.coin-cta {
  text-align: center;
}

/* ============================================
   ANGLERFISH LURE GLOW
   ============================================ */

/* Lure position: % of the wrapper div (= fish image size).
   Adjust top/left if the lure tip sits elsewhere in the PNG. */
.anglerfish-lure {
  position: absolute;
  top:  33%;   /* distance from top of image to lure tip   */
  left: 13%;   /* distance from left edge to lure tip      */
  width:  11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* Bioluminescent core */
  background: radial-gradient(circle, #e8ff90 0%, #aaff40 45%, #60ff80 100%);
  animation: lure-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lure-pulse {
  0%, 100% {
    box-shadow:
      0 0  6px  3px rgba(180, 255,  80, 0.95),
      0 0 18px  9px rgba(120, 255,  60, 0.60),
      0 0 40px 18px rgba( 80, 255,  40, 0.28);
    filter: brightness(1);
  }
  50% {
    box-shadow:
      0 0 10px  6px rgba(210, 255, 100, 1.00),
      0 0 30px 15px rgba(150, 255,  80, 0.75),
      0 0 65px 28px rgba(100, 255,  50, 0.40);
    filter: brightness(1.35);
  }
}

/* ============================================
   PARTNERSHIPS SECTION
   ============================================ */
#partners {
  padding: 6vh 0 8vh;
}
#partners .section-inner {
  padding-bottom: 1.5rem;
}

.partners-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.partners-header h2 { margin-bottom: 0.6rem; }
.partners-header p  { max-width: 560px; margin: 0 auto; }

/* Grid — single column now, expands as more partners added */
.partners-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

/* ── Individual partner card ── */
.partner-card {
  border-radius: 20px;
  padding: 2.8rem;
  border: 1px solid rgba(0,212,255,0.14);
  transition: border-color 0.35s, box-shadow 0.35s;
}
.partner-card:hover {
  border-color: rgba(0,212,255,0.32);
  box-shadow: 0 0 40px rgba(0,212,255,0.10);
}

/* Two-column: logo left, info right */
.partner-card-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* ── Logo column ── */
.partner-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative; /* establishes stacking context for children */
}

/* HUD frame around the logo — same design language as .coin-frame */
.partner-logo-hud {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Stacking context — rings are contained within z-index: 1 */
  isolation: isolate;
  z-index: 1;
}

/* Ambient breathing glow — cyan + magenta mix (distinct from coin's purple+cyan) */
.partner-logo-hud::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 0, 170, 0.12) 0%,
    rgba(0, 212, 255, 0.10) 50%,
    transparent 75%
  );
  animation: frame-breathe 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* ── Circular logo container — clip + glow ── */
.plh-inner {
  position: relative;
  z-index: 5;
  border-radius: 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
  box-shadow:
    0 0 0 1.5px rgba(255, 0, 170, 0.35),
    0 0 28px rgba(255, 0, 170, 0.45),
    0 0 60px rgba(0, 150, 255, 0.20);
  transition: box-shadow 0.35s, transform 0.35s;
}
.partner-card:hover .plh-inner {
  box-shadow:
    0 0 0 2px rgba(255, 0, 170, 0.6),
    0 0 38px rgba(255, 0, 170, 0.6),
    0 0 80px rgba(0, 200, 255, 0.28);
  transform: scale(1.04);
}

/* The logo image fills the circular container */
.partner-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Initials fallback when no logo image is available */
.partner-initials {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #00d4ff, #0066ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  user-select: none;
}


/* ── Tilted orbital rings ── */
/* scaleY(0.32/0.40) = moderately tilted — visually distinct from coin's
   extreme scaleY(0.16/0.20) flat equatorial rings                        */
.plh-orbit {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid;
  pointer-events: none;
  z-index: 3;
}
.plh-orbit--1 {
  width: 112%; height: 112%;
  margin: -56% 0 0 -56%;
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.12);
  transform: scaleY(0.32);
  animation: plh-orb-1 8s linear infinite;
}
.plh-orbit--2 {
  width: 130%; height: 130%;
  margin: -65% 0 0 -65%;
  border-color: rgba(255, 0, 170, 0.40);
  box-shadow: 0 0 8px rgba(255, 0, 170, 0.12);
  transform: scaleY(0.40) rotate(65deg);
  animation: plh-orb-2 14s linear infinite reverse;
}
@keyframes plh-orb-1 {
  from { transform: scaleY(0.32) rotate(0deg); }
  to   { transform: scaleY(0.32) rotate(360deg); }
}
@keyframes plh-orb-2 {
  from { transform: scaleY(0.40) rotate(65deg); }
  to   { transform: scaleY(0.40) rotate(425deg); }
}

/* ── Sonar pulse rings — magenta-led (coin is cyan-led) ── */
.plh-pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 0, 170, 0.80);
  width: 150px; height: 150px;
  animation: plh-sonar 3.4s ease-out infinite;
  pointer-events: none;
  z-index: 2;
}
.plh-pulse--2 { animation-delay: 1.13s; border-color: rgba(0, 212, 255, 0.65); }
.plh-pulse--3 { animation-delay: 2.27s; border-color: rgba(255, 0, 170, 0.55); }
@keyframes plh-sonar {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: 0.85; }
  100% { transform: translate(-50%,-50%) scale(1.7); opacity: 0;    }
}

/* ── Corner diamond markers ── */
/* Rotated squares = diamond shapes: clearly different from coin's L-brackets */
.plh-diamond {
  position: absolute;
  width: 10px; height: 10px;
  border: 1.5px solid rgba(255, 0, 170, 0.85);
  transform: rotate(45deg);
  z-index: 6;
  animation: plh-diamond-blink 2.6s ease-in-out infinite;
}
.plh-diamond--tl { top: 6%;    left: 6%;    }
.plh-diamond--tr { top: 6%;    right: 6%;   animation-delay: 0.65s; }
.plh-diamond--bl { bottom: 6%; left: 6%;    animation-delay: 1.30s; }
.plh-diamond--br { bottom: 6%; right: 6%;   animation-delay: 1.95s; }
@keyframes plh-diamond-blink {
  0%, 100% { opacity: 0.25; box-shadow: none; }
  50%       { opacity: 1;
              box-shadow: 0 0 10px rgba(255,0,170,0.9),
                          0 0 22px rgba(255,0,170,0.45); }
}

/* Verified badge — z-index: 2 places it above the HUD's stacking context (z-index: 1) */
.partner-verified {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.22);
  border-radius: 50px;
  padding: 0.3rem 0.8rem;
}
.partner-verified svg { flex-shrink: 0; stroke: var(--cyan); }

/* ── Info column ── */
.partner-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,0,170,0.8);
  background: rgba(255,0,170,0.06);
  border: 1px solid rgba(255,0,170,0.18);
  border-radius: 50px;
  padding: 0.25rem 0.8rem;
  margin-bottom: 0.8rem;
}

.partner-name {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--white);
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
}

.partner-desc {
  font-size: 0.97rem;
  line-height: 1.75;
  color: rgba(232,244,255,0.78);
  margin-bottom: 1.4rem;
}

/* Perks checklist */
.partner-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.8rem;
}
.partner-perks li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.72);
}
.partner-perks svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  stroke: var(--cyan);
}

/* Store buttons row */
.partner-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Google Play button */
.partner-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(10,10,20,0.75);
  color: var(--white);
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.25s;
  min-width: 170px;
}
.partner-store-btn:hover {
  border-color: rgba(0,212,255,0.45);
  background: rgba(0,212,255,0.07);
  box-shadow: 0 0 18px rgba(0,212,255,0.18);
  transform: translateY(-3px);
}
.partner-store-btn span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.partner-store-btn small {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.5);
}
.partner-store-btn span:last-of-type,
.partner-store-btn > span {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.partner-store-btn--google svg { color: #fff; }
.partner-store-btn--google:hover svg {
  filter: drop-shadow(0 0 5px rgba(0,212,255,0.7));
}

/* ── "Get in touch" interest row ── */
.partner-interest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1rem 2rem;
  border-top: 1px solid rgba(0,212,255,0.08);
}
.partner-interest p {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232,244,255,0.45);
}

/* ── About section: video + CTA column ──────────────────────── */
.about-video-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.about-video-col .about-viewport {
  width: 100%;
}

/* ── About section: Join the World CTA ──────────────────────── */
.about-world-cta {
  display: flex;
  justify-content: center;
  padding: 1.4rem 0 0.4rem;
}

.btn--join-world {
  position: relative;
  overflow: hidden;
  /* Filled cyan-to-blue gradient base so it reads immediately */
  background: linear-gradient(135deg, rgba(0,212,255,0.22) 0%, rgba(0,80,180,0.18) 100%);
  border: 1.5px solid var(--cyan);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 1.05em 2.8em;
  border-radius: 50px;
  box-shadow:
    0 0 14px rgba(0,212,255,0.55),
    0 0 38px rgba(0,212,255,0.25),
    0 0 70px rgba(0,212,255,0.10),
    inset 0 0 18px rgba(0,212,255,0.10);
  animation: world-btn-pulse 2.6s ease-in-out infinite;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}

/* Sweeping shimmer that slides across the button */
.btn--join-world::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%
  );
  animation: world-btn-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}

.btn--join-world:hover,
.btn--join-world:focus {
  background: linear-gradient(135deg, rgba(0,212,255,0.85) 0%, rgba(0,140,255,0.75) 100%);
  color: #001030;
  box-shadow:
    0 0 24px rgba(0,212,255,0.95),
    0 0 55px rgba(0,212,255,0.55),
    0 0 100px rgba(0,212,255,0.25);
  animation: none;
}

@keyframes world-btn-shimmer {
  0%   { left: -75%; opacity: 0; }
  10%  { opacity: 1; }
  60%  { left: 130%; opacity: 1; }
  61%, 100% { opacity: 0; }
}

@keyframes world-btn-pulse {
  0%, 100% {
    box-shadow:
      0 0 14px rgba(0,212,255,0.55),
      0 0 38px rgba(0,212,255,0.25),
      0 0 70px rgba(0,212,255,0.10),
      inset 0 0 18px rgba(0,212,255,0.10);
  }
  50% {
    box-shadow:
      0 0 22px rgba(0,212,255,0.90),
      0 0 60px rgba(0,212,255,0.45),
      0 0 110px rgba(0,212,255,0.18),
      inset 0 0 18px rgba(0,212,255,0.10);
  }
}

/* btn--outline — softer alternative to filled .btn */
.btn--outline {
  border-color: rgba(0,212,255,0.45);
  color: rgba(0,212,255,0.75);
  font-size: 0.78rem;
  padding: 0.65em 1.8em;
}
.btn--outline:hover {
  border-color: var(--cyan);
  color: var(--navy);
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* Hide the video panel only on tablets (601–900px).
   Phones (≤600px) never match this rule so the browser always treats
   the video as visible and honours preload="metadata" from page load. */
@media (min-width: 601px) and (max-width: 900px) {
  .about-viewport { display: none; }
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card { flex: 0 0 calc(50% - 0.75rem); }
  .nav-hamburger { display: flex; }
  #navbar {
    padding: 1rem 1.5rem;
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  /* Mobile nav dropdown */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(0, 8, 32, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,212,255,0.12);
    padding: 0.4rem 0 0.8rem;
    z-index: 99;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 0.9rem 1.5rem;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(0,212,255,0.06);
  }

  /* Coin section */
  .coin-hero { grid-template-columns: 1fr; gap: 2rem; }
  .coin-visual { order: -1; }
  .coin-features { grid-template-columns: 1fr 1fr; }
  .coin-cert-badges { gap: 1.8rem; }

  /* Trident / UFO footer decors — scale for mid-size screens */
  .trident-decor { width: clamp(280px, 38vw, 420px); }
  .ufo-decor     { width: clamp(160px, 22vw, 240px); }

  /* Partners section */
  .partner-card { padding: 2rem 1.6rem; }
  .partner-card-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .partner-logo-wrap { margin: 0 auto; }
  .partner-perks li { justify-content: center; }
  .partner-ctas { justify-content: center; }

  /* DJ hiring — stack image above text */
  .dj-hiring-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .dj-hiring-img { width: 100%; max-width: 480px; }
  .dj-hiring-text p { max-width: 100%; }

  /* Birthday — stack image above text */
  .birthday-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .birthday-img { width: 100%; max-width: 480px; }
  .birthday-text p { max-width: 100%; }
}

@media (max-width: 600px) {
  .hero-ctas { flex-direction: column; align-items: center; }
  .about-stats { justify-content: center; }
  /* Social buttons — 2 per row on small phones */
  .social-btn { flex: 0 0 calc(50% - 0.4rem); min-width: 0; }
  /* Footer links — larger tap area */
  .footer-links a { padding: 0.5rem 0.3rem; display: inline-block; }
  /* Coin section — base layout fixes */
  .coin-features { grid-template-columns: 1fr; }
  /* Contract address — prevent overflow on small screens */
  .coin-contract-row { flex-wrap: wrap; justify-content: center; }
  .coin-contract-addr { font-size: 0.72rem; word-break: break-all; }

  /* Partners section */
  .partner-logo-hud { width: 170px; height: 170px; }
  .plh-inner        { width: 120px; height: 120px; }
  .plh-pulse        { width: 120px; height: 120px; }
  .partner-store-btn { min-width: 0; width: 100%; justify-content: center; }
  .partner-ctas { flex-direction: column; align-items: center; }

  /* ── Vertical compaction ──────────────────────────────────────────────────
     Each section has 6vh+8vh on the section element + 2rem top/bottom on
     section-inner. Across 7 sections that stacks up massively on a phone.
     Reduce both layers and tighten every internal margin.                  */

  /* Section element outer padding */
  #about, #gallery, #coin, #partners, #testimonials, #social {
    padding: 2vh 0 3vh;
  }
  /* Glass panel gap between sections */
  .content-section { margin-bottom: 2vh; }

  /* Section-inner vertical padding (vine is 40px; 1.5rem horizontal keeps text clear) */
  :root { --section-padding: 1rem 1.5rem; }

  /* Testimonial avatars */
  .testimonial-avatar { width: 52px; height: 52px; }

  /* Nav logo — smaller on phones */
  .nav-logo-badge { width: 48px; height: 48px; }
  .nav-logo-img   { width: 34px; height: 34px; }
  /* Hide text on small phones — badge alone is sufficient */
  .nav-logo-text  { display: none; }
  /* Tighter navbar padding on small phones */
  #navbar { padding: 0.8rem 1rem; padding-top: max(0.8rem, env(safe-area-inset-top)); }

  /* Hero content — reduce upward shift so content stays in frame on short screens */
  .hero-content { transform: translateY(-30px); }

  /* DJ hiring — remove min-width so children don't blow out on phones */
  .dj-hiring-text { min-width: 0; width: 100%; }
  .dj-hiring-inner { text-align: center; }

  /* Birthday — same fix */
  .birthday-text { min-width: 0; width: 100%; }
  .birthday-inner { text-align: center; }

  /* Partner cards — tighter padding on narrow phones */
  .partner-card { padding: 1.5rem 1rem; }

  /* Footer links — tighter gap so links don't crowd on one line */
  .footer-links { gap: 1rem; }

  /* Footer decorations — scale down so they don't overflow screen width */
  #ocean-floor   { overflow: hidden; }
  .trident-decor { width: clamp(150px, 44vw, 260px); bottom: 20px; right: -4%; }
  .ufo-decor     { width: clamp(110px, 32vw, 180px); }

  /* ── Coin visual — HUD frame ──────────────────────── */
  /* Clip sonar rings at the frame edge — overflow:visible caused the rings to extend
     beyond the viewport width, creating a tiny horizontal scroll on mobile. */
  .coin-visual        { overflow: clip; }
  /* Partner HUD pulse rings — clip at section level so the square HUD boundary
     doesn't cut off the circular glow. overflow:clip on the section prevents
     horizontal scroll without boxing in the effects on the HUD itself. */
  #partners           { overflow: clip; }
  /* Frame scales to 70vw so it fits the content area without clipping */
  .coin-frame  { width: clamp(200px, 70vw, 280px); height: clamp(200px, 70vw, 280px); }
  /* Inner coin circle + pulse rings scale proportionally */
  .coin-inner  { width: clamp(140px, 48vw, 196px); height: clamp(140px, 48vw, 196px); }
  .coin-pulse  { width: clamp(140px, 48vw, 196px); height: clamp(140px, 48vw, 196px); }

  /* ── Coin stats block — single centered column ─────── */
  /* Revert from the broken 2-col grid: contract/badge/button need full width */
  .coin-stats-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
  }
  /* Center-align each individual stat */
  .coin-stat       { text-align: center; width: 100%; }
  .coin-stat-row   { justify-content: center; flex-wrap: wrap; gap: 0.4rem; }
  /* Shrink the "5% Sales Tax" pill so it fits beside the stat value */
  .coin-stat-tax   { font-size: 0.58rem; letter-spacing: 0.07em; padding: 0.15em 0.4em; }
  /* Contract address block — centered */
  .coin-contract   { align-items: center; width: 100%; }
  /* Coinbase listing badge — stretch to full width */
  .coin-listing-badge {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
  /* "Start Earning SIREN" button — full width, centered */
  .coin-stats-block > .btn {
    width: 100%;
    justify-content: center;
    align-self: stretch;
    margin-top: 0.2rem;
  }

  /* Testimonial card — handled below in the full mobile block */

  /* Sun logo — raise it on mobile so it's clearly visible above the wave */
  .hero-logo {
    bottom: -20px;
    width: clamp(160px, 58vw, 240px);
  }

  /* ── About section ──────────────────────────────── */
  .about-text p           { margin-bottom: 0.7rem; }

  /* Stats — grid so all three cols share equal width regardless of label length */
  .about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-top: 0.8rem;
  }
  .stat-item              { width: auto; text-align: center; }
  .stat-number            { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
  .stat-label             { font-size: 0.58rem; letter-spacing: 0.1em; margin-top: 0.15rem; }

  .about-grid             { gap: 0.8rem; }
  .about-viewport         { margin-top: 0; }
  .about-video-col        { margin-top: 0; }

  /* Join the World button — full width, tighter padding */
  .about-world-cta        { padding: 0.9rem 0 0.2rem; }
  .btn--join-world {
    width: 100%;
    justify-content: center;
    font-size: 0.82rem;
    padding: 0.85em 1.4em;
    letter-spacing: 0.14em;
  }

  /* ── Gallery section ────────────────────────────── */
  /* 2-col grid: halves the stacked image height (6 photos × ~83px instead of ~234px) */
  .gallery-grid           { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .gallery-header         { margin-bottom: 1.5rem; }
  /* DJ / Birthday CTAs — tighter spacing + capped video height */
  .dj-hiring-cta,
  .birthday-cta           { margin-top: 1.5rem; padding-top: 1.2rem; }
  .dj-hiring-img,
  .birthday-img           { max-height: 200px; object-fit: cover; }

  /* ── Coin section ───────────────────────────────── */
  .coin-header            { margin-bottom: 1.5rem; }
  .coin-mission           { padding: 0.9rem 1rem; margin-bottom: 1.2rem; }
  .coin-hero              { gap: 1.2rem; margin-bottom: 1.5rem; }
  .coin-tokenomics        { margin-bottom: 1.5rem; }
  .coin-tokenomics h3     { margin-bottom: 1rem; }
  .tokenomics-rows        { gap: 0.8rem; }
  .coin-features          { gap: 0.8rem; margin-bottom: 1.2rem; }
  .coin-feature           { padding: 1.1rem 0.9rem; }
  .coin-sustainability    { padding: 0.9rem 1rem; margin-bottom: 1.2rem; }
  .coin-cert              { margin-bottom: 1rem; gap: 0.6rem; }
  .coin-cert-badges       { gap: 1.2rem; }
  .coin-listings          { margin-bottom: 1.2rem; }
  .coin-listing-badge     { padding: 0.7rem 1.1rem; }

  /* ── Partners section ───────────────────────────── */
  .partners-header        { margin-bottom: 1.5rem; }
  .partners-grid          { gap: 1rem; margin-bottom: 1.5rem; }
  .partner-desc           { margin-bottom: 0.8rem; font-size: 0.88rem; line-height: 1.55; }
  .partner-perks          { gap: 0.35rem; margin-bottom: 0.8rem; }
  .partner-name           { margin-bottom: 0.6rem; }
  .partner-interest       { padding: 0.8rem 1rem; }

  /* ── Testimonials section ───────────────────────── */
  .testimonials-header    { margin-bottom: 1.5rem; }
  .carousel-dots          { margin-top: 1rem; }
  .carousel-track         { gap: 0.8rem; }
  .testimonial-card {
    flex: 0 0 78vw;
    min-width: 0;
    padding: 1rem 1rem;
  }
  .testimonial-card::before { font-size: 3.5rem; top: -0.2rem; left: 1rem; }
  .testimonial-avatar     { width: 36px; height: 36px; margin-bottom: 0.6rem; }
  .testimonial-avatar svg { width: 20px; height: 20px; }
  .testimonial-name       { font-size: 0.78rem; letter-spacing: 0.1em; }
  .testimonial-handle     { font-size: 0.67rem; margin-bottom: 0.6rem; }
  .testimonial-text       { font-size: 0.82rem; line-height: 1.55; }
  .stars                  { font-size: 0.75rem; margin-top: 0.5rem; }

  /* ── Social section ─────────────────────────────── */
  .social-header          { margin-bottom: 1.5rem; }
  .social-grid            { gap: 0.5rem; }
  .social-btn             { padding: 1rem 0.5rem; gap: 0.4rem; }
  .social-btn svg,
  .social-btn img         { width: 24px; height: 24px; }
  .social-btn-label       { font-size: 0.68rem; letter-spacing: 0.12em; text-align: center; width: 100%; }
  .social-btn-sub         { font-size: 0.6rem; text-align: center; width: 100%; }

  /* ── Ocean floor / footer ───────────────────────── */
  .ocean-floor-content    { padding: 1.8rem 1.5rem 1.2rem; }
  .footer-logo            { width: 80px; margin-bottom: 0.7rem; }
  .sand-strip             { height: 80px; }

  /* ── Backdrop-filter removal ─────────────────────────────────────────────
     backdrop-filter: blur() forces the GPU to re-sample and blur every pixel
     behind each glass panel on every scroll frame. With multiple glass panels
     on screen, this creates a GPU spike — most severe when changing scroll
     direction — that stalls the compositor and causes the page to snap/jump.
     On mobile we replace the blur with a higher-opacity solid background that
     is visually equivalent on a small screen but has zero compositor cost.  */
  .glass-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 10, 35, 0.82);
  }

  /* Navbar — remove blur and disable background transition.
     Animating background on a position:fixed element requires a repaint;
     on mobile that repaint can interrupt the compositor mid-scroll. */
  #navbar {
    transition: none;
  }
  #navbar.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 8, 32, 0.95);
  }

  /* Mobile nav menu blur — same fix */
  .nav-links.is-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ── Hero height: use svh (Small Viewport Height) on mobile ─────────────
     100dvh (Dynamic Viewport Height) changes as the Android/iOS address bar
     shows and hides during scroll. Each change shifts the page height, which
     disrupts scroll position at the hero boundary — the "snap" the user sees
     when scrolling from the hero into the sections below.
     100svh is always the MINIMUM stable viewport height (address bar shown).
     It never changes during scroll, preventing the layout shift entirely.   */
  #hero {
    height: 100svh;
  }

  /* ── Hero pseudo-element animations — disable on mobile ─────────────────
     #hero::before (hero-light-shift) uses transform: translate()+scale() on
     an absolutely-positioned element with complex radial-gradient backgrounds.
     #hero::after  (hero-rays) uses opacity on a conic-gradient element.
     Both animations increase GPU texture memory for the hero stacking context.
     On mobile, pausing them removes that overhead from the compositor's budget
     during scroll — freeing cycles for the scroll-position update itself.    */
  #hero::before,
  #hero::after {
    animation: none;
  }

}