/* =========================================================
 * BET808 · #23 TROPICAL SUNSET CORAL
 * Single-site mock · light beach theme · Phuket vibe
 * ---------------------------------------------------------
 * Vibe   : leisure escape · 28-55 resort
 * Surface: sunset gradient bg · sand texture · radius 18
 * Accent : sacramento script tagline · quicksand rounded
 * ========================================================= */

/* ---------- 0. RESET & TOKENS ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
  /* sunset palette */
  --coral:        #FF6B6B;
  --coral-soft:   #FFA07A;
  --jasmine:      #FFD93D;
  --sand:         #F7E1B5;
  --sand-soft:    #FFF4E0;
  --sand-cream:   #FFFCF5;
  --turq:         #4ECDC4;
  --turq-deep:    #2A8E87;
  --palm:         #2F4F2F;
  --palm-deep:    #1B2820;
  --dusk-purple:  #6A4877;

  /* text */
  --ink:          #2A2A2A;
  --ink-soft:     #54483B;
  --ink-mute:     #8C7B68;

  /* surfaces */
  --paper:        #FFFCF5;
  --paper-warm:   #FFF7E8;
  --paper-cool:   #F2FAFA;
  --shore:        rgba(255, 247, 232, 0.72);
  --shore-strong: rgba(255, 247, 232, 0.88);

  /* borders */
  --bd-soft:      1px solid rgba(255,160,122,0.28);
  --bd-warm:      1px solid rgba(247,225,181,0.85);
  --bd-turq:      1px solid rgba(78,205,196,0.30);

  /* shadows */
  --sh-card:      0 14px 36px rgba(255, 107, 107, 0.10), 0 4px 12px rgba(78, 205, 196, 0.08), inset 0 1px 0 rgba(255,255,255,0.85);
  --sh-soft:      0 8px 22px rgba(132, 90, 60, 0.10), inset 0 1px 0 rgba(255,255,255,0.85);
  --sh-coral:     0 18px 40px rgba(255, 107, 107, 0.28), 0 0 0 1px rgba(255,255,255,0.6);
  --sh-glow:      0 0 0 4px rgba(255,160,122,0.18);
  --sh-tile:      0 22px 50px rgba(255,107,107,0.18), 0 6px 18px rgba(78,205,196,0.12);

  /* radius — 18 is signature */
  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* spacing */
  --container: 1240px;

  /* transitions */
  --t-soft: 480ms cubic-bezier(.22,.61,.36,1);
  --t-fast: 220ms cubic-bezier(.22,.61,.36,1);
}

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Mitr", "Quicksand", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.65;
  font-size: 15.5px;
  letter-spacing: 0.005em;
  background: var(--paper);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
}

/* sunset gradient background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    /* layered sunset glow */
    radial-gradient(70% 55% at 80% 8%, rgba(255,217,61,0.55), rgba(255,217,61,0) 65%),
    radial-gradient(60% 50% at 30% 12%, rgba(255,160,122,0.45), rgba(255,160,122,0) 65%),
    radial-gradient(80% 60% at 50% 0%, rgba(255,107,107,0.35), rgba(255,107,107,0) 60%),
    /* soft turquoise hint near bottom */
    radial-gradient(80% 70% at 50% 100%, rgba(78,205,196,0.25), rgba(78,205,196,0) 60%),
    /* base wash */
    linear-gradient(180deg, var(--sand-soft) 0%, var(--paper-warm) 35%, var(--paper) 70%, var(--paper-cool) 100%);
}

/* sand grain texture overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(165,116,60,0.06) 1px, transparent 1.2px),
    radial-gradient(rgba(165,116,60,0.04) 1px, transparent 1.2px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 3px 3px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  border: 0;
  cursor: pointer;
  background: none;
  color: inherit;
}
input, select, textarea {
  font-family: inherit;
  color: var(--ink);
}

/* shared headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .4em;
  color: var(--ink);
}

h1 { font-size: clamp(34px, 5.4vw, 64px); font-weight: 700; line-height: 1.08; }
h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 600; line-height: 1.18; }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; }
h4 { font-size: 17px; font-weight: 600; letter-spacing: 0; }

p  { margin: 0 0 1em; color: var(--ink-soft); }

/* signature script tagline */
.tagline {
  font-family: "Sacramento", "Mitr", cursive;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--coral);
  font-size: 1.15em;
  line-height: 0.85;
}

/* sunset gradient text */
.sunset-text {
  background: linear-gradient(95deg, var(--coral) 0%, var(--coral-soft) 45%, var(--jasmine) 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sunsetShift 9s ease-in-out infinite;
  font-weight: 700;
}

@keyframes sunsetShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* container */
.container {
  width: min(var(--container), 100% - 36px);
  margin-inline: auto;
}

/* page sections */
section.page { padding: 56px 0 72px; position: relative; }
.page { display: none; }
.page.is-active { display: block; }

/* ---------- 0.5 SEABREEZE LAYER (floating leaves + bubbles) ---------- */
.seabreeze {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.leaf {
  position: absolute;
  top: -60px;
  width: 36px;
  height: 14px;
  background:
    radial-gradient(circle at 70% 50%, rgba(47,79,47,0.55) 0%, rgba(47,79,47,0.30) 60%, transparent 100%);
  border-radius: 50%;
  filter: blur(0.4px);
  transform-origin: 30% 50%;
  animation: leafFall 22s linear infinite;
  --r: 0deg;
}
.leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(47,79,47,0.40), rgba(78,205,196,0.30));
  border-radius: 50%;
  transform: rotate(var(--r));
}

@keyframes leafFall {
  0%   { top: -60px;   transform: translateX(0) rotate(0); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateX(-30px) rotate(160deg); }
  90%  { opacity: 0.85; }
  100% { top: 102vh;   transform: translateX(40px) rotate(360deg); opacity: 0; }
}

.bubble {
  position: absolute;
  bottom: -20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(78,205,196,0.20) 70%, transparent 100%);
  border: 1px solid rgba(78,205,196,0.40);
  animation: bubbleRise 18s linear infinite;
}

@keyframes bubbleRise {
  0%   { bottom: -20px; opacity: 0; transform: translateX(0) scale(0.6); }
  20%  { opacity: 0.6; }
  100% { bottom: 105vh; opacity: 0; transform: translateX(60px) scale(1.2); }
}

/* ---------- 1. UTILITIES (chips · buttons · eyebrows) ---------- */

.eyebrow {
  display: inline-block;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 600;
  margin-bottom: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  border: 1px solid rgba(255,160,122,0.35);
  position: relative;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.85),
    0 6px 16px rgba(255,107,107,0.10);
}
.btn:hover {
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.95),
    0 14px 30px rgba(255,107,107,0.20);
}
.btn--solid {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-soft) 50%, var(--jasmine) 100%);
  background-size: 220% 220%;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(255,107,107,0.4);
  animation: sunsetShift 9s ease-in-out infinite;
}
.btn--solid:hover { color: #fff; }
.btn--ghost {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(78,205,196,0.40);
  color: var(--turq-deep);
}
.btn--lg { padding: 14px 28px; font-size: 15px; }
.btn--sm { padding: 8px 14px; font-size: 12.5px; }
.btn--full { width: 100%; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.6);
  color: var(--ink-soft);
  border: 1px solid rgba(255,160,122,0.28);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 56px 0 28px;
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .tagline { font-size: 1.4em; }
.section-head__intro { max-width: 640px; }
.section-head__intro p { color: var(--ink-soft); font-weight: 300; }

.hot-pulse {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: #fff;
  font-size: 10.5px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: 4px;
  animation: hotPulse 1.4s ease-in-out infinite;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255,107,107,0); }
}

/* ---------- 2. NAVIGATION (top horizontal sticky) ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  padding: 12px 0;
  background: rgba(255,247,232,0.75);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(255,160,122,0.18);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.brand__sun {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--coral-soft) 0%, var(--jasmine) 60%, var(--turq) 100%);
  box-shadow:
    inset 0 -6px 14px rgba(255,107,107,0.4),
    0 6px 18px rgba(255,160,122,0.4);
}
.brand__sun-disc {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFF6D8, #FFD93D 70%, #FF6B6B 100%);
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(255,217,61,0.7);
  animation: sunBob 6s ease-in-out infinite;
}
@keyframes sunBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-2px); }
}
.brand__palm {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22px;
  background:
    linear-gradient(180deg, transparent 60%, var(--palm-deep) 60%);
}
.brand__palm::before {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 30%;
  width: 4px;
  height: 18px;
  background: var(--palm-deep);
  border-radius: 2px;
  transform: rotate(-8deg);
  box-shadow: 12px 2px 0 -2px var(--palm-deep);
}
.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand__name b {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand__num {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.30em;
  color: var(--turq-deep);
  margin-top: -2px;
}
.brand__sub {
  font-family: "Sacramento", "Mitr", cursive;
  font-size: 14px;
  color: var(--coral);
  line-height: 1;
  margin-top: -1px;
}

.nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.nav__link:hover {
  background: rgba(255,217,61,0.22);
  color: var(--ink);
}
.nav__link.is-active {
  background: linear-gradient(135deg, rgba(255,107,107,0.22), rgba(255,217,61,0.22));
  color: var(--coral);
  box-shadow: inset 0 0 0 1px rgba(255,107,107,0.20);
}
.nav__icon { font-size: 15px; }
.nav__sub {
  font-family: "Sacramento", "Mitr", cursive;
  font-size: 12px;
  color: var(--turq-deep);
  font-style: normal;
  margin-left: 2px;
  font-weight: 400;
}

.topbar__cta {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.burger {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255,160,122,0.40);
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--coral);
}

@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: flex; }
  .topbar.is-open .nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 4px;
    margin-top: 14px;
  }
  .topbar.is-open .nav__link {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---------- 3. HERO ---------- */

.hero {
  position: relative;
  min-height: 600px;
  margin: 28px auto 28px;
  width: min(var(--container), 100% - 36px);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-tile);
  border: 1px solid rgba(255,160,122,0.18);
}
.hero__sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #FFB088 0%, #FF8E72 25%, #FF6B6B 55%, #C26C8E 80%, #6A4877 100%);
}
.hero__sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 30% at 75% 35%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(50% 40% at 30% 50%, rgba(255,217,61,0.30), transparent 60%);
}

.hero__sun {
  position: absolute;
  width: 220px;
  height: 220px;
  right: 12%;
  top: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFAE0 0%, #FFD93D 35%, #FFA07A 70%, rgba(255,107,107,0) 100%);
  box-shadow:
    0 0 60px rgba(255,217,61,0.6),
    0 0 120px rgba(255,107,107,0.4);
  animation: sunGlow 6s ease-in-out infinite;
}
@keyframes sunGlow {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.04); filter: brightness(1.06); }
}

.hero__sea {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  overflow: hidden;
}
.hero__sea .wave {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  display: block;
  animation: waveMove 8s ease-in-out infinite;
}
.hero__sea .wave--1 { animation-duration: 8s; bottom: 30%; opacity: 0.6; }
.hero__sea .wave--2 { animation-duration: 11s; bottom: 12%; opacity: 0.7; animation-direction: reverse; }
.hero__sea .wave--3 { animation-duration: 6s; bottom: 0;   opacity: 1;  }
@keyframes waveMove {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3%); }
}

.hero__sand {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8%;
  background: linear-gradient(180deg, rgba(247,225,181,0.85), rgba(247,225,181,0.95));
}

.hero__palms {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.palm {
  position: absolute;
  bottom: 6%;
  width: 200px;
  height: 360px;
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.18));
  transform-origin: 50% 100%;
}
.palm--left {
  left: -2%;
  transform: rotate(-6deg);
  animation: palmSway 7s ease-in-out infinite;
}
.palm--right {
  right: 22%;
  transform: rotate(8deg) scale(0.8);
  animation: palmSway 8s ease-in-out 1.5s infinite reverse;
}
@keyframes palmSway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(-2deg); }
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding: 64px 56px 100px;
  display: grid;
  grid-template-columns: 1.45fr 0.55fr;
  align-items: center;
  gap: 36px;
}

.hero__copy { color: #fff; }
.hero__copy .eyebrow { color: rgba(255,255,255,0.95); text-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.hero__copy h1 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.30);
  margin-bottom: 14px;
}
.hero__copy h1 .tagline {
  color: #FFD93D;
  font-size: 1.05em;
  text-shadow: 0 2px 14px rgba(255,107,107,0.4);
  display: inline-block;
  transform: rotate(-2deg);
}
.hero__copy h1 .sunset-text { color: transparent; -webkit-text-fill-color: transparent; }
.hero__copy p {
  color: rgba(255,255,255,0.92);
  font-size: 16px;
  max-width: 560px;
  line-height: 1.7;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  margin-bottom: 22px;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.hero__cta .btn--solid {
  background: linear-gradient(135deg, #FFD93D, #FFA07A 60%, #FF6B6B);
  color: #5C2C1A;
  font-weight: 800;
  text-shadow: none;
  border: 0;
  padding: 16px 32px;
  font-size: 15px;
}
.hero__cta .btn--ghost {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(6px);
}

.hero__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(8px);
  border-radius: var(--r-md);
  padding: 14px 20px;
  max-width: 720px;
}
.hero__strip-item {
  display: flex;
  flex-direction: column;
  color: #fff;
}
.hero__strip-item strong {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.hero__strip-item small {
  font-size: 11.5px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}

.hero__cocktail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cocktail {
  position: relative;
  width: 180px;
  height: 220px;
}
.cocktail__umbrella {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  width: 100px;
  height: 60px;
  background:
    conic-gradient(from 90deg at 50% 100%,
      #FF6B6B 0deg, #FFD93D 60deg, #FF6B6B 120deg, #FFD93D 180deg, #FFFFFF 240deg, #FFD93D 360deg);
  clip-path: polygon(0 100%, 50% 0%, 100% 100%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}
.cocktail__umbrella::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100px;
  background: #4A2410;
  transform: translateX(-50%) rotate(8deg);
  transform-origin: top;
}
.cocktail__straw {
  position: absolute;
  top: 35px;
  left: 58%;
  width: 4px;
  height: 100px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFD93D 50%, #FF6B6B 100%);
  border-radius: 2px;
  transform: rotate(12deg);
  z-index: 2;
}
.cocktail__glass {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 110px;
  background: rgba(255,255,255,0.35);
  border: 2px solid rgba(255,255,255,0.55);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  overflow: hidden;
  backdrop-filter: blur(2px);
}
.cocktail__liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75%;
  background: linear-gradient(180deg, #FFA07A 0%, #FF6B6B 60%, #C26C8E 100%);
}
.cocktail__bubble {
  position: absolute;
  bottom: 10px;
  left: var(--x);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  animation: ckBubble 3s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes ckBubble {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translateY(-70px); opacity: 0; }
}
.cocktail__cherry {
  position: absolute;
  top: 10px;
  left: 30%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FF8888, #B22222);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cocktail__cherry::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1.5px;
  height: 10px;
  background: var(--palm-deep);
  transform: translateX(-50%) rotate(8deg);
}

.cocktail__caption {
  text-align: center;
  font-family: "Quicksand", "Mitr", sans-serif;
  color: #fff;
  font-size: 13px;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.cocktail__caption b {
  font-family: "Sacramento", "Mitr", cursive;
  font-size: 22px;
  color: #FFD93D;
  font-weight: 400;
  display: block;
  margin-top: 4px;
}

@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; padding: 48px 28px 88px; }
  .hero__cocktail { display: none; }
}

/* ---------- 4. TIME-OF-DAY (auto promo) ---------- */

.tod { padding-top: 24px; }

.tod__clock {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,160,122,0.35);
  border-radius: var(--r-md);
  padding: 12px 18px;
  box-shadow: var(--sh-soft);
}
.tod__clock-face {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1;
}
.tod__clock-face b {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: 0.04em;
}
.tod__clock-face em {
  font-family: "Sacramento", "Mitr", cursive;
  font-style: normal;
  color: var(--ink-mute);
  font-size: 13px;
  margin-top: 4px;
}

.tod__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 12px;
}

.tod__card {
  background: var(--shore);
  border: 1px solid rgba(255,160,122,0.25);
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--sh-card);
  transition: transform var(--t-soft), box-shadow var(--t-soft), border-color var(--t-soft);
  position: relative;
  overflow: hidden;
}
.tod__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,217,61,0.08), transparent 60%);
  border-radius: inherit;
  pointer-events: none;
}
.tod__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-tile);
  border-color: rgba(255,107,107,0.40);
}
.tod__card.is-live {
  background: linear-gradient(180deg, rgba(255,217,61,0.18), rgba(255,160,122,0.18));
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(255,107,107,0.18), var(--sh-tile);
  transform: translateY(-4px);
}

.tod__phase {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tod__icon { font-size: 32px; line-height: 1; }
.tod__time {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--turq-deep);
  font-weight: 600;
}
.tod__name {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.tod__phase small { font-size: 12.5px; color: var(--ink-mute); font-style: italic; }

.tod__deal { border-top: 1px dashed rgba(255,160,122,0.40); padding-top: 14px; }
.tod__deal h3 {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
}
.tod__deal h3 em {
  font-style: normal;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--coral);
  background: linear-gradient(95deg, var(--coral), var(--jasmine));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.tod__deal p { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.tod__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.tod__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
}
.tod__list li::before {
  content: "🌊";
  position: absolute;
  left: 0;
  font-size: 11px;
}
.tod__list code {
  font-family: "Quicksand", "Mitr", "Courier New", monospace;
  background: rgba(78,205,196,0.18);
  color: var(--turq-deep);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 1000px) {
  .tod__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .tod__grid { grid-template-columns: 1fr; }
}

/* ---------- 5. RIBBON COUNTDOWN ---------- */

.ribbon {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 20px;
  padding: 16px 22px;
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgba(255,217,61,0.85), rgba(255,160,122,0.85), rgba(78,205,196,0.85));
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: var(--sh-tile);
  flex-wrap: wrap;
  color: #4A2310;
}
.ribbon__icon {
  font-size: 26px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ribbon__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.ribbon__text strong {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.ribbon__text span {
  font-size: 13px;
  color: rgba(74,35,16,0.78);
}
.ribbon__cd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Quicksand", "Mitr", sans-serif;
}
.ribbon__cd b {
  font-size: 22px;
  font-weight: 700;
  background: rgba(255,255,255,0.55);
  padding: 6px 12px;
  border-radius: 10px;
  min-width: 50px;
  display: inline-block;
  text-align: center;
}
.ribbon__cd em {
  display: block;
  font-style: normal;
  font-size: 10px;
  text-align: center;
  margin-top: 2px;
  font-family: "Sacramento", "Mitr", cursive;
  font-size: 12px;
  color: rgba(74,35,16,0.7);
}
.ribbon__cd .dot { font-size: 22px; font-weight: 700; }
.ribbon__btn {
  background: rgba(255,255,255,0.85) !important;
  color: var(--coral) !important;
  border-color: rgba(255,255,255,0.7) !important;
  font-weight: 700;
}

/* ---------- 6. COCKTAIL MENU ---------- */

.ck { position: relative; }

.ck__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ck__card {
  background: var(--shore);
  border: 1px solid rgba(255,160,122,0.22);
  border-radius: var(--r-md);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-soft), box-shadow var(--t-soft), border-color var(--t-soft);
  box-shadow: var(--sh-card);
  isolation: isolate;
  min-height: 220px;
}
.ck__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0.38;
}
.ck__card:hover {
  transform: translateY(-5px) rotate(-0.3deg);
  box-shadow: var(--sh-tile);
}
.ck__emoji {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
}
.ck__card h3 {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.ck__card .tagline { font-size: 22px; margin-bottom: 8px; line-height: 0.9; }
.ck__card small {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.ck__count {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--turq-deep);
  background: rgba(255,255,255,0.85);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-style: normal;
  border: 1px solid rgba(78,205,196,0.30);
}
.ck__card--maitai      { background: linear-gradient(140deg, #FFE3D0, #FFF7E8); }
.ck__card--maitai      .tagline { color: var(--coral); }
.ck__card--mojito      { background: linear-gradient(140deg, #E5F8E8, #FFF7E8); }
.ck__card--mojito      .tagline { color: #4F9D5C; }
.ck__card--pinacolada  { background: linear-gradient(140deg, #FFF6CD, #FFFCF5); }
.ck__card--pinacolada  .tagline { color: #B8893B; }
.ck__card--coconut     { background: linear-gradient(140deg, #DFEFEC, #FFFCF5); }
.ck__card--coconut     .tagline { color: var(--turq-deep); }
.ck__card--margarita   { background: linear-gradient(140deg, #E0F4D8, #FFFCF5); }
.ck__card--margarita   .tagline { color: #5BA042; }
.ck__card--daiquiri    { background: linear-gradient(140deg, #FCDCE2, #FFFCF5); }
.ck__card--daiquiri    .tagline { color: #BC4F6C; }
.ck__card--tequila     { background: linear-gradient(140deg, #FFD8B0, #FFE9C0); }
.ck__card--tequila     .tagline { color: var(--coral); }
.ck__card--virgin      { background: linear-gradient(140deg, #FBCFE8, #FFFCF5); }
.ck__card--virgin      .tagline { color: #B86F9A; }

@media (max-width: 1080px) {
  .ck__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .ck__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ck__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 7. GAME GRID ---------- */

.game-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.game-card {
  background: var(--shore-strong);
  border-radius: var(--r-md);
  border: 1px solid rgba(255,160,122,0.20);
  overflow: hidden;
  transition: transform var(--t-soft), box-shadow var(--t-soft), border-color var(--t-soft);
  box-shadow: var(--sh-soft);
  display: flex;
  flex-direction: column;
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-tile);
  border-color: rgba(255,107,107,0.45);
}
.game-card.is-hidden { display: none; }
.game-card__thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(135deg, var(--sand-soft), var(--paper-cool));
}
.game-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-soft);
}
.game-card:hover .game-card__thumb img { transform: scale(1.08); }
.game-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.badge--hot      { background: linear-gradient(95deg, var(--coral), var(--coral-soft)); }
.badge--new      { background: linear-gradient(95deg, var(--turq), var(--turq-deep)); }
.badge--jackpot  { background: linear-gradient(95deg, var(--jasmine), var(--coral-soft)); color: #5C2C1A; text-shadow:none; }
.game-card__provider {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(2px);
}
.game-card__rtp {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.85);
  color: var(--turq-deep);
}
.game-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.game-card__body h4 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-card__body small {
  color: var(--ink-mute);
  font-size: 12px;
}
.game-card__body .btn { margin-top: 4px; align-self: flex-start; }

@media (max-width: 1080px) { .game-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px)  { .game-grid { grid-template-columns: repeat(2, 1fr); } }

.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-pill {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,160,122,0.35);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all var(--t-fast);
}
.filter-pill:hover { background: rgba(255,217,61,0.30); }
.filter-pill.is-on {
  background: linear-gradient(135deg, var(--coral), var(--coral-soft));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255,107,107,0.30);
}

/* ---------- 8. TIDES (sports preview + page) ---------- */

.tides__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.match {
  background: var(--shore-strong);
  border: 1px solid rgba(78,205,196,0.22);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--sh-soft);
  transition: border-color var(--t-fast);
}
.match:hover { border-color: var(--turq); }
.match__league {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--turq-deep);
  letter-spacing: 0.04em;
}
.match__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.match__team {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-weight: 600;
  font-size: 16px;
}
.match__team--away { justify-content: flex-end; flex-direction: row-reverse; }
.match__team span { font-size: 22px; line-height: 1; }
.match__odds {
  display: flex;
  gap: 8px;
}
.odd {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--sand-soft), #fff);
  border: 1px solid rgba(255,160,122,0.30);
  border-radius: 12px;
  min-width: 56px;
  transition: all var(--t-fast);
}
.odd em {
  font-style: normal;
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  font-family: "Quicksand", "Mitr", sans-serif;
}
.odd b {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--coral);
  margin-top: 2px;
}
.odd:hover {
  background: linear-gradient(180deg, var(--coral), var(--coral-soft));
  border-color: var(--coral);
}
.odd:hover em, .odd:hover b { color: #fff; }
.match__meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-mute);
  border-top: 1px dashed rgba(78,205,196,0.30);
  padding-top: 8px;
  font-family: "Quicksand", "Mitr", sans-serif;
}

.tide-strip {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.tide-pill {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(78,205,196,0.30);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  display: inline-flex;
  gap: 8px;
}
.tide-pill em {
  font-style: normal;
  background: rgba(78,205,196,0.18);
  color: var(--turq-deep);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
}
.tide-pill.is-on {
  background: linear-gradient(135deg, var(--turq), var(--turq-deep));
  color: #fff;
  border-color: transparent;
}
.tide-pill.is-on em { background: rgba(255,255,255,0.30); color: #fff; }

.tide-h {
  margin: 28px 0 12px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--turq-deep);
  letter-spacing: 0.02em;
}

.tide-cashout {
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(255,217,61,0.18), rgba(78,205,196,0.18));
  border: 1px solid rgba(78,205,196,0.30);
  border-radius: var(--r-md);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--sh-soft);
}
.tide-cashout__icon { font-size: 36px; }
.tide-cashout h3 { margin: 0 0 4px; font-size: 18px; }
.tide-cashout p { margin: 0; color: var(--ink-soft); font-size: 13.5px; }

/* ---------- 9. LOTTERY ---------- */

.lot__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.lot__card {
  background: var(--shore-strong);
  border: 1px solid rgba(255,160,122,0.22);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--sh-card);
  transition: transform var(--t-soft), box-shadow var(--t-soft);
}
.lot__card:hover { transform: translateY(-3px); box-shadow: var(--sh-tile); }
.lot__card header {
  display: flex;
  gap: 10px;
  align-items: center;
}
.lot__flag {
  font-size: 28px;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-warm);
  border-radius: 12px;
  border: 1px solid rgba(255,160,122,0.20);
}
.lot__card header h3 { font-size: 17px; margin-bottom: 0; }
.lot__card header small { font-size: 11.5px; color: var(--ink-mute); }
.lot__rates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--paper-cool);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(78,205,196,0.30);
}
.lot__rates span {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-family: "Quicksand", "Mitr", sans-serif;
}
.lot__rates b { font-weight: 600; color: var(--ink); }
.lot__rates em {
  font-style: normal;
  color: var(--coral);
  font-weight: 700;
}
.lot__cd {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: "Quicksand", "Mitr", sans-serif;
  flex-wrap: wrap;
}
.lot__cd span {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, var(--sand-soft), #fff);
  border-radius: 8px;
  padding: 6px 8px;
  min-width: 42px;
}
.lot__cd b { font-size: 18px; font-weight: 700; color: var(--coral); line-height: 1; }
.lot__cd em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-top: 2px;
}
.lot__cd .dot {
  background: none;
  font-size: 16px;
  color: var(--ink-mute);
  padding: 0 2px;
  min-width: 0;
}
.lot__cd--live b { color: var(--turq-deep); }
.lot__round {
  background: rgba(78,205,196,0.18) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  flex-direction: row !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--turq-deep) !important;
  min-width: 0 !important;
}
.lot__card--yk {
  background: linear-gradient(180deg, rgba(255,217,61,0.18), rgba(255,160,122,0.18));
  border-color: rgba(255,107,107,0.35);
}

.lot-tip {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,217,61,0.22), rgba(255,160,122,0.18));
  border: 1px dashed rgba(255,107,107,0.40);
  border-radius: var(--r-md);
  padding: 14px 22px;
}
.lot-tip span { font-size: 28px; }
.lot-tip p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

@media (max-width: 1080px) { .lot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .lot__grid { grid-template-columns: 1fr; } }

/* ---------- 10. REEF (live casino) ---------- */

.reef__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.reef__row--full {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 24px;
}
.reef__card {
  background: var(--shore-strong);
  border: 1px solid rgba(78,205,196,0.25);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-card);
  transition: transform var(--t-soft), box-shadow var(--t-soft), border-color var(--t-soft);
}
.reef__card:hover { transform: translateY(-4px); box-shadow: var(--sh-tile); border-color: var(--turq); }
.reef__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.reef__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reef__live {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 107, 107, 0.95);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.reef__provider {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
}
.reef__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reef__body h4 { margin: 0; font-size: 15px; font-weight: 600; }
.reef__body small { font-size: 12px; color: var(--ink-mute); }
.reef__stats {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 11px;
  font-weight: 700;
}
.reef__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  position: relative;
}
.reef__dot--p { background: var(--coral); }
.reef__dot--b { background: var(--turq-deep); }
.reef__dot--t { background: var(--jasmine); color: #5C2C1A; }
.reef__stats b { color: var(--ink-mute); margin-right: 4px; font-size: 10px; }
.reef__body .btn { margin-top: 4px; align-self: flex-start; }

.reef-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.reef-tab {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(78,205,196,0.30);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.reef-tab.is-on {
  background: linear-gradient(135deg, var(--turq), var(--turq-deep));
  color: #fff;
  border-color: transparent;
}

.reef-tip {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, rgba(78,205,196,0.18), rgba(255,217,61,0.14));
  border: 1px solid rgba(78,205,196,0.35);
  border-radius: var(--r-md);
  padding: 14px 22px;
}
.reef-tip span { font-size: 28px; }
.reef-tip p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

@media (max-width: 1080px) {
  .reef__row { grid-template-columns: repeat(2, 1fr); }
  .reef__row--full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .reef__row, .reef__row--full { grid-template-columns: 1fr; }
}

/* ---------- 11. DROPS (live withdrawal feed) ---------- */

.drops__pulse {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.drops__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--shore);
  border: 1px solid rgba(78,205,196,0.22);
  border-radius: var(--r-md);
  padding: 14px 18px;
  box-shadow: var(--sh-soft);
}
.drop {
  display: grid;
  grid-template-columns: 36px 1.4fr 1fr 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,160,122,0.22);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13.5px;
}
.drop:last-child { border-bottom: 0; }
.drop:nth-child(1) {
  background: linear-gradient(90deg, rgba(255,217,61,0.22), transparent);
  border-radius: 8px;
  padding-left: 8px;
  margin-left: -8px;
  animation: dropFlash 1.2s ease-out;
}
@keyframes dropFlash {
  0%   { background: rgba(255,217,61,0.4); }
  100% { background: linear-gradient(90deg, rgba(255,217,61,0.22), transparent); }
}
.drop__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral-soft), var(--jasmine));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.drop__name {
  font-weight: 600;
  color: var(--ink);
}
.drop__amount {
  font-weight: 800;
  color: var(--coral);
  font-size: 15px;
}
.drop__bank {
  font-size: 12px;
  color: var(--turq-deep);
  background: rgba(78,205,196,0.18);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  text-align: center;
  font-weight: 600;
}
.drop__time {
  font-size: 11.5px;
  color: var(--ink-mute);
  text-align: right;
  font-style: italic;
}

@media (max-width: 700px) {
  .drop { grid-template-columns: 30px 1fr 1fr; gap: 8px; font-size: 12px; }
  .drop__bank, .drop__time { display: none; }
}

/* ---------- 12. CABANA (VIP) ---------- */

.cab__strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.cab__tier {
  background: var(--shore);
  border: 1px solid rgba(255,160,122,0.22);
  border-radius: var(--r-md);
  padding: 18px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--sh-soft);
  transition: transform var(--t-soft);
  position: relative;
  overflow: hidden;
}
.cab__tier:hover { transform: translateY(-3px); }
.cab__tier::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.cab__tier--1::before { background: linear-gradient(90deg, #C8B69E, #A99175); }
.cab__tier--2::before { background: linear-gradient(90deg, var(--jasmine), #FFE874); }
.cab__tier--3::before { background: linear-gradient(90deg, var(--coral-soft), var(--coral)); }
.cab__tier--4::before { background: linear-gradient(90deg, var(--turq), var(--turq-deep)); }
.cab__tier--5::before { background: linear-gradient(90deg, #C485E8, #6A4877); }
.cab__icon { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.cab__tier h4 {
  margin: 0;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.cab__tier small {
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  font-family: "Quicksand", "Mitr", sans-serif;
}
.cab__tier em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--coral);
  font-family: "Sacramento", "Mitr", cursive;
  font-size: 18px;
  margin-top: 4px;
  font-weight: 400;
  line-height: 1.2;
}

@media (max-width: 1000px) { .cab__strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .cab__strip { grid-template-columns: 1fr 1fr; } }

.cab__detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.cab__big {
  background: var(--shore);
  border: 1px solid rgba(255,160,122,0.22);
  border-radius: var(--r-md);
  padding: 20px 24px;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cab__big--1 { background: linear-gradient(180deg, #F5EBDF, var(--paper-warm)); }
.cab__big--2 { background: linear-gradient(180deg, #FFF6CD, var(--paper-warm)); }
.cab__big--3 { background: linear-gradient(180deg, #FFE3D0, var(--paper-warm)); }
.cab__big--4 { background: linear-gradient(180deg, #DFEFEC, var(--paper-warm)); }
.cab__big--5 { background: linear-gradient(180deg, #E8DCF4, var(--paper-warm)); border-color: rgba(106,72,119,0.40); }
.cab__big header { display: flex; gap: 14px; align-items: center; }
.cab__big header h3 { margin: 0; font-size: 18px; }
.cab__big header small { font-size: 12px; color: var(--ink-mute); }
.cab__big ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
}
.cab__big li { line-height: 1.55; }

@media (max-width: 1000px) { .cab__detail { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .cab__detail { grid-template-columns: 1fr; } }

.cab-meter {
  background: var(--shore-strong);
  border: 1px solid rgba(255,160,122,0.28);
  border-radius: var(--r-md);
  padding: 22px 26px;
  box-shadow: var(--sh-card);
}
.cab-meter h3 { margin-bottom: 6px; }
.cab-meter p { margin: 0 0 12px; }
.cab-meter__bar {
  width: 100%;
  height: 18px;
  background: linear-gradient(90deg, rgba(255,160,122,0.22), rgba(78,205,196,0.22));
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
.cab-meter__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--coral-soft), var(--jasmine));
  background-size: 200% 100%;
  animation: meterShift 4s linear infinite;
  box-shadow: 0 0 8px rgba(255,107,107,0.40);
}
@keyframes meterShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---------- 13. PROVIDERS ---------- */

.prov__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
.prov__pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: var(--shore);
  border-radius: var(--r-md);
  border: 1px solid rgba(255,160,122,0.20);
  box-shadow: var(--sh-soft);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.prov__pill:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
  box-shadow: var(--sh-card);
}
.prov__pill img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}
.prov__pill span {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 1080px) { .prov__grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 720px)  { .prov__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px)  { .prov__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 14. BW CHIPS (shared with wallet bank pills) ---------- */

.bw__chip {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--coral), var(--coral-soft));
  box-shadow: 0 4px 8px rgba(0,0,0,0.10);
}
.bw__chip--scb  { background: linear-gradient(135deg, #4A2C7B, #6E3FB8); }
.bw__chip--kbank{ background: linear-gradient(135deg, #007236, #00A04A); }
.bw__chip--bbl  { background: linear-gradient(135deg, #0058A9, #1882D8); }
.bw__chip--ktb  { background: linear-gradient(135deg, #00A1E2, #4FC4FF); }
.bw__chip--bay  { background: linear-gradient(135deg, #DAB300, #F8C800); color: #2A1900; }
.bw__chip--ttb  { background: linear-gradient(135deg, #003F8B, #0064D1); }
.bw__chip--gsb  { background: linear-gradient(135deg, #E0359C, #FF6CC0); }
.bw__chip--cimb { background: linear-gradient(135deg, #B40000, #DA2929); }
.bw__chip--lh   { background: linear-gradient(135deg, #6B6B6B, #9C9C9C); }
.bw__chip--tmn  { background: linear-gradient(135deg, #FF7A00, #FFB74D); }
.bw__chip--usdt { background: linear-gradient(135deg, #25994F, #51C977); }

/* ---------- 14b. SURF WALLET BAND (mid-page · 14 banks · Catch a Wave) ----------
   Full-width band w/ sunset gradient · palm-frond dividers between every 4th cell ·
   wave-curve rounded 22px · cocktail umbrella accent top-right · cursor-tracked
   wave ripple on hover (radial expand from cursor position).
   ---------------------------------------------------------------- */

.surf-band {
  position: relative;
  width: min(var(--container), 100% - 36px);
  margin: 40px auto 24px;
  padding: 56px 0 24px;
  isolation: isolate;
  border-radius: 22px;
  overflow: hidden;
  background:
    /* sunset gradient: coral → coral-soft → jasmine */
    linear-gradient(125deg, #FF6B6B 0%, #FFA07A 52%, #FFD93D 100%);
  box-shadow:
    0 24px 60px rgba(255,107,107,0.28),
    0 8px 18px rgba(255,160,122,0.20),
    inset 0 1px 0 rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.45);
}

/* tinted-warm overlay */
.surf-band__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(255,107,107,0.15), rgba(255,160,122,0.10));
}

/* shimmery sunlight stripe (subtle, animated) */
.surf-band__shimmer {
  position: absolute;
  inset: -10% -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 18% 20%, rgba(255,255,255,0.32), rgba(255,255,255,0) 65%),
    radial-gradient(40% 50% at 82% 70%, rgba(255,217,61,0.30), rgba(255,217,61,0) 65%);
  mix-blend-mode: screen;
  animation: surfShimmer 12s ease-in-out infinite;
}
@keyframes surfShimmer {
  0%, 100% { transform: translate(0, 0) scale(1);   opacity: 0.85; }
  50%      { transform: translate(2%, -1.5%) scale(1.04); opacity: 1; }
}

/* cocktail umbrella accent (top-right corner, decorative + rotated) */
.surf-band__umbrella {
  position: absolute;
  top: -14px;
  right: 28px;
  width: 120px;
  height: 145px;
  z-index: 2;
  pointer-events: none;
  transform: rotate(14deg);
  filter: drop-shadow(0 10px 14px rgba(120,40,40,0.22));
  animation: umbrellaSway 7s ease-in-out infinite;
}
.surf-band__umbrella svg { width: 100%; height: 100%; display: block; }
@keyframes umbrellaSway {
  0%, 100% { transform: rotate(14deg)  translateY(0);    }
  50%      { transform: rotate(11deg)  translateY(-4px); }
}

.surf-band__inner { position: relative; z-index: 3; }

/* heading (Sacramento title + Quicksand subtitle) */
.surf-band__head {
  text-align: center;
  margin-bottom: 26px;
  padding: 0 24px;
}
.surf-band__head .eyebrow {
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(120,40,40,0.30);
  margin-bottom: 4px;
}
.surf-band__title {
  font-family: "Sacramento", "Mitr", cursive;
  font-weight: 400;
  font-size: clamp(54px, 7vw, 86px);
  line-height: 0.92;
  margin: 0 0 6px;
  color: #fff;
  letter-spacing: 0.005em;
  text-shadow:
    0 4px 14px rgba(120,30,30,0.32),
    0 1px 2px rgba(120,30,30,0.22);
}
.surf-band__sub {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.97);
  letter-spacing: 0.04em;
  margin: 0;
  text-shadow: 0 2px 6px rgba(120,30,30,0.20);
}

/* horizontal row */
.surf-band__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 0 30px;
}

/* palm-frond divider (between every 4th cell · vertical · faded silhouette) */
.surf-frond {
  flex: 0 0 26px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.62;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.10));
}
.surf-frond svg {
  width: 100%;
  max-height: 110px;
  display: block;
}

/* individual bank cell (sand bg · rounded 22px · Quicksand) */
.surf-bank {
  position: relative;
  flex: 1 1 calc((100% - 78px - 56px) / 14);
  min-width: 86px;
  max-width: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px 12px;
  background: var(--sand);
  color: var(--ink);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.55);
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 8px 18px rgba(120,40,40,0.18),
    0 2px 4px rgba(120,40,40,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.surf-bank:hover {
  transform: translateY(-5px);
  background: var(--sand-soft);
  box-shadow:
    0 18px 36px rgba(120,40,40,0.30),
    0 4px 10px rgba(120,40,40,0.18),
    inset 0 1px 0 rgba(255,255,255,0.95);
}
.surf-bank:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.surf-bank img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
  margin-bottom: 2px;
}
.surf-bank b {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.surf-bank small {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-mute);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* wave ripple (radial cyan expand from cursor position on hover) */
.surf-bank__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78,205,196,0.55) 0%, rgba(78,205,196,0.30) 35%, rgba(78,205,196,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.85;
  pointer-events: none;
  z-index: -1;
  transition:
    transform 0.85s cubic-bezier(.22,.61,.36,1),
    opacity  0.85s ease-out;
}
.surf-bank:hover .surf-bank__ripple {
  transform: translate(-50%, -50%) scale(8);
  opacity: 0;
}

/* bottom wave-cut SVG (decorative · matches existing site wave animation) */
.surf-band__waves {
  display: block;
  width: 100%;
  height: 50px;
  margin-top: 10px;
  animation: surfWaveDrift 8s ease-in-out infinite;
}
@keyframes surfWaveDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-2%); }
}

/* responsive: 2 rows ≤ 900px (hide palm fronds for clean wrap) */
@media (max-width: 1100px) {
  .surf-band__row { padding: 0 18px; gap: 7px; }
  .surf-bank { min-width: 82px; max-width: 108px; padding: 12px 6px 10px; }
  .surf-bank img { width: 40px; height: 40px; }
  .surf-bank small { font-size: 10px; }
  .surf-frond { flex: 0 0 22px; }
  .surf-frond svg { max-height: 96px; }
}
@media (max-width: 900px) {
  .surf-band { padding: 44px 0 18px; margin: 30px auto 20px; }
  .surf-band__umbrella { width: 96px; height: 116px; right: 14px; top: -8px; }
  .surf-frond { display: none; }
  .surf-band__row { padding: 0 16px; gap: 8px; }
  .surf-bank {
    flex: 0 0 calc((100% - 48px) / 7);
    min-width: 0;
    max-width: none;
    padding: 11px 6px 9px;
    border-radius: 18px;
  }
  .surf-bank img { width: 38px; height: 38px; }
  .surf-bank small { display: none; }
}
@media (max-width: 700px) {
  .surf-band__head { padding: 0 16px; margin-bottom: 20px; }
  .surf-band__sub { font-size: 13px; }
  .surf-band__row { gap: 7px; padding: 0 14px; }
  .surf-bank {
    flex: 0 0 calc((100% - 28px) / 5);
    padding: 10px 4px 8px;
    border-radius: 16px;
  }
  .surf-bank img { width: 34px; height: 34px; }
  .surf-bank b { font-size: 11px; }
}
@media (max-width: 460px) {
  .surf-band { padding: 36px 0 16px; }
  .surf-band__umbrella { width: 76px; height: 92px; right: 8px; top: -4px; }
  .surf-band__row { gap: 6px; padding: 0 12px; }
  .surf-bank {
    flex: 0 0 calc((100% - 18px) / 4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .surf-band__shimmer,
  .surf-band__umbrella,
  .surf-band__waves { animation: none; }
  .surf-bank__ripple { transition: none; }
}

/* ---------- 15. WHY US ---------- */

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.why__card {
  background: var(--shore);
  border: 1px solid rgba(255,160,122,0.22);
  border-radius: var(--r-md);
  padding: 26px 22px;
  box-shadow: var(--sh-card);
  text-align: left;
}
.why__icon { font-size: 36px; line-height: 1; margin-bottom: 12px; }
.why__card h4 { margin-bottom: 6px; font-size: 17px; }
.why__card p { font-size: 13.5px; line-height: 1.65; margin: 0; }

@media (max-width: 1000px) { .why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px)  { .why__grid { grid-template-columns: 1fr; } }

/* ---------- 16. PAGE HERO (sub-pages) ---------- */

.page__hero {
  background: var(--shore-strong);
  border: 1px solid rgba(255,160,122,0.22);
  border-radius: var(--r-xl);
  padding: 48px 54px 44px;
  margin-bottom: 32px;
  box-shadow: var(--sh-card);
  position: relative;
  overflow: hidden;
}
.page__hero::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--jasmine), var(--coral) 60%, transparent 100%);
  opacity: 0.18;
  pointer-events: none;
}
.page__hero h1 { margin-bottom: 8px; font-size: clamp(28px, 4.4vw, 48px); }
.page__hero h1 .tagline {
  display: inline-block;
  transform: rotate(-2deg);
  color: var(--coral);
}
.page__hero p { font-size: 15.5px; color: var(--ink-soft); max-width: 720px; }

/* ---------- 17. BEACH (slot page filter) ---------- */

.ck-mini {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.ck-mini__pill {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(255,160,122,0.30);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ck-mini__pill em {
  font-style: normal;
  font-size: 11px;
  background: rgba(78,205,196,0.18);
  color: var(--turq-deep);
  padding: 2px 8px;
  border-radius: 12px;
}
.ck-mini__pill.is-on {
  background: linear-gradient(135deg, var(--coral), var(--coral-soft));
  color: #fff;
  border-color: transparent;
}
.ck-mini__pill.is-on em { background: rgba(255,255,255,0.30); color: #fff; }

.beach__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.beach__grid .game-card { font-size: 13px; }
.beach__grid .game-card__body { padding: 10px 12px 12px; }
.beach__grid .game-card__body h4 { font-size: 13.5px; }
.beach__grid .game-card__body small { font-size: 11.5px; }

@media (max-width: 1080px) { .beach__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .beach__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px)  { .beach__grid { grid-template-columns: repeat(2, 1fr); } }

.beach__more {
  text-align: center;
  font-size: 14px;
  color: var(--ink-mute);
  font-family: "Quicksand", "Mitr", sans-serif;
}
.beach__more a {
  color: var(--coral);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: rgba(255,107,107,0.55);
}

/* ---------- 18. WALLET (Surf Wallet page) ---------- */

.wallet__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
}
.wallet__card {
  background: var(--shore-strong);
  border: 1px solid rgba(255,160,122,0.30);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wallet__card--in  { background: linear-gradient(180deg, rgba(255,217,61,0.15), var(--shore-strong)); }
.wallet__card--out { background: linear-gradient(180deg, rgba(78,205,196,0.15), var(--shore-strong)); }
.wallet__card header {
  display: flex;
  gap: 14px;
  align-items: center;
}
.wallet__big {
  font-size: 38px;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet__card header h3 { margin: 0; }
.wallet__card label {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.wallet__banks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.wallet__bank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,160,122,0.25);
  transition: all var(--t-fast);
}
.wallet__bank b {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}
.wallet__bank.is-on {
  background: linear-gradient(135deg, rgba(255,107,107,0.20), rgba(255,217,61,0.20));
  border-color: var(--coral);
  box-shadow: var(--sh-glow);
}
.wallet__bank .bw__chip { width: 36px; height: 36px; font-size: 11px; margin-bottom: 0; }
.wallet__card input[type="text"], .wallet__card input[type="tel"], .wallet__card input[type="password"] {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,160,122,0.35);
  background: rgba(255,255,255,0.78);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  transition: border-color var(--t-fast);
}
.wallet__card input:focus { border-color: var(--coral); }
.wallet__amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.wallet__amounts button {
  padding: 9px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,160,122,0.30);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.wallet__amounts button:hover {
  background: linear-gradient(135deg, var(--jasmine), var(--coral-soft));
  color: #5C2C1A;
  border-color: transparent;
}
.wallet__note {
  font-family: "Sacramento", "Mitr", cursive;
  font-size: 14px;
  color: var(--turq-deep);
  text-align: center;
  margin-top: 4px;
}

.wallet__history {
  background: var(--shore);
  border: 1px solid rgba(255,160,122,0.22);
  border-radius: var(--r-md);
  padding: 22px 26px;
  box-shadow: var(--sh-soft);
}
.wallet__history h3 { margin-bottom: 14px; }
.wallet__history ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.wallet__history li {
  display: grid;
  grid-template-columns: 36px 1.5fr 1.5fr 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255,160,122,0.22);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13.5px;
}
.wallet__history li:last-child { border-bottom: 0; }
.hist__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral-soft), var(--jasmine));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.hist__amt { font-style: normal; font-weight: 800; }
.hist__amt--in  { color: #4F9D5C; }
.hist__amt--out { color: var(--coral); }
.hist__st {
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hist__st--ok { color: #4F9D5C; }

@media (max-width: 880px) {
  .wallet__cards { grid-template-columns: 1fr; }
  .wallet__history li { grid-template-columns: 30px 1fr 1fr; gap: 8px; font-size: 12px; }
  .wallet__history li > span:nth-child(3), .wallet__history li > span:nth-child(5) { display: none; }
}

/* ---------- 19. TIKI BAR (FAQ) ---------- */

.tiki__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.tiki__faq {
  background: var(--shore-strong);
  border: 1px solid rgba(255,160,122,0.25);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.tiki__faq:hover { border-color: var(--coral); }
.tiki__faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 22px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
}
.tiki__faq summary::-webkit-details-marker { display: none; }
.tiki__faq summary::after {
  content: "↓";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--coral);
  font-size: 18px;
  transition: transform var(--t-fast);
}
.tiki__faq[open] summary::after { transform: translateY(-50%) rotate(-180deg); }
.tiki__faq p {
  margin: 0;
  padding: 0 22px 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- 20. FOOTER ---------- */

.footer {
  margin-top: 60px;
  background:
    linear-gradient(180deg, var(--paper-warm) 0%, var(--sand-soft) 100%);
  border-top: 1px solid rgba(255,160,122,0.30);
  padding: 56px 0 0;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--coral), var(--coral-soft), var(--jasmine), var(--turq), var(--dusk-purple));
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-bottom: 36px;
}
.footer__col h4 {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--coral);
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13.5px;
}
.footer__col a { color: var(--ink-soft); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--coral); }
.footer__col--brand p {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 14px;
  margin-bottom: 14px;
}
.footer__social {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13.5px;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.55);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,160,122,0.25);
  color: var(--ink);
  width: fit-content;
}
.footer__social a:hover { background: rgba(255,217,61,0.30); }
.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.footer__badge {
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.7);
  color: var(--turq-deep);
  border: 1px solid rgba(78,205,196,0.30);
}
.footer__bottom {
  border-top: 1px solid rgba(255,160,122,0.20);
  background: rgba(255,247,232,0.5);
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 12px;
  color: var(--ink-mute);
}
.footer__bottom > span:first-child { padding-left: 18px; }
.footer__bottom > span:last-child { padding-right: 18px; }

@media (max-width: 900px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* ---------- 21. FLOATING LINE + BACK TO TOP ---------- */

.float-line {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--coral), var(--coral-soft), var(--jasmine));
  color: #fff;
  box-shadow:
    0 16px 32px rgba(255,107,107,0.40),
    0 0 0 4px rgba(255,217,61,0.30);
  font-family: "Quicksand", "Mitr", sans-serif;
  text-decoration: none;
}
.float-line__pulse {
  position: absolute;
  inset: -4px;
  border-radius: var(--r-pill);
  border: 2px solid var(--coral);
  animation: floatPulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes floatPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(1.18); opacity: 0;   }
}
.float-line__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.float-line__txt b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.float-line__txt small {
  display: block;
  font-size: 10.5px;
  margin-top: 2px;
  opacity: 0.92;
  font-style: italic;
}

.back-top {
  position: fixed;
  right: 18px;
  bottom: 100px;
  z-index: 55;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,160,122,0.40);
  font-size: 18px;
  font-weight: 700;
  color: var(--coral);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.back-top.is-on { opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-3px); }

/* ---------- 22. MODAL ---------- */

.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(40, 25, 12, 0.58);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.modal-mask.is-on { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 30px 30px 26px;
  width: min(420px, 92%);
  position: relative;
  border: 1px solid rgba(255,160,122,0.35);
  box-shadow: 0 30px 60px rgba(255,107,107,0.30);
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,160,122,0.18);
  font-size: 13px;
  color: var(--coral);
}
.modal h3 { margin-bottom: 18px; }
.modal__tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,160,122,0.10);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: 18px;
}
.modal__tabs button {
  flex: 1;
  padding: 9px;
  border-radius: var(--r-pill);
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
}
.modal__tabs button.is-on {
  background: linear-gradient(135deg, var(--coral), var(--coral-soft));
  color: #fff;
  box-shadow: 0 4px 10px rgba(255,107,107,0.25);
}
.modal label {
  display: block;
  font-family: "Quicksand", "Mitr", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
  margin-top: 12px;
}
.modal input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,160,122,0.35);
  background: var(--paper-warm);
  font-size: 15px;
  outline: none;
}
.modal input:focus { border-color: var(--coral); }
.modal__hint {
  font-family: "Sacramento", "Mitr", cursive;
  text-align: center;
  font-size: 16px;
  color: var(--turq-deep);
  margin: 12px 0 0;
}
.modal form .btn { margin-top: 18px; }