/*
 * WHALER BUILD SIGNATURE
 * Project   : WHALER Website (v4.0.0)
 * Build     : WHALER_WEBSITE_V4_0_0
 * Released  : 2026-07-22
 * Updated   : 2026-07-22
 * Author    : MAD_TECHIE
 * Path      : assets/css/style.css
 * Content   : sha256:3999c83fa0c186ccdb5b7eb157c356fc78789d351e7c3b7b0170bdc35975ab58
 * Authored by MAD_TECHIE.
 * Copyright (c) 2026 MAD_TECHIE. All rights reserved.
 * END WHALER BUILD SIGNATURE
 */
/* ============================================================
   WHALER Website v2.9.0 — "Reef" design system
   Bright Pixar-style underwater universe. Written from scratch:
   every rule maps to live markup (templates, PublicRenderer, main.js).
   ============================================================ */

:root {
  /* Deep Reef dive palette (v3.0) — measured from the hero artwork, zone by
     zone. Overridable from Ops → Site Settings → Design Tokens (the server
     injects a #whaler-theme style block with CMS values). */
  --dive-surface: #0090f0;
  --dive-upper: #0060d8;
  --dive-reef: #0048a8;
  --dive-deep: #003060;
  --dive-floor: #122645;
  --glow: #46d6ff;
  --ink-light: #eaf6ff;
  /* Water & light — legacy aliases kept for component styles */
  --water-sky: #5fbdf0;
  --water-mid: #2f96dd;
  --water-deep: #14639f;
  --water-floor: #cfeafc;
  --sand: #f6e6c4;
  /* Reef accents (from the artwork) */
  --coral: #ff5f4e;
  --seahorse: #f6a72c;
  --octo: #8d5ded;
  --turtle: #3fbf82;
  --pearl: #ffd7e8;
  /* Ink */
  --ink: #0a2540;
  --ink-soft: #2c5375;
  --ink-faint: #58789a;
  /* Surfaces */
  --card: rgba(255, 255, 255, .86);
  --card-solid: #ffffff;
  --line: rgba(20, 99, 159, .18);
  --line-strong: rgba(20, 99, 159, .36);
  --shadow: 0 16px 46px rgba(10, 58, 102, .22);
  --shadow-soft: 0 6px 22px rgba(10, 58, 102, .14);
  --radius: 22px;
  --radius-sm: 14px;
  --header: 74px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 18px); }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  /* The dive (v3.0): surface azure just below the hero, progressively deeper
     water through the sections, darkest just above the seabed strip. The
     footer supplies the sunlit sand at the bottom. */
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .28), transparent 55%),
    radial-gradient(circle at 82% 30%, rgba(70, 214, 255, .10), transparent 40%),
    linear-gradient(180deg,
      var(--dive-surface) 0%,
      var(--dive-upper) 26%,
      var(--dive-reef) 52%,
      var(--dive-deep) 76%,
      var(--dive-floor) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: var(--water-deep); }
h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0 0 14px; }

.container { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.section { padding: 74px 0; }
.eyebrow {
  margin: 0 0 12px;
  color: var(--water-deep);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.skip-link { position: absolute; left: -999px; top: auto; }
.skip-link:focus { left: 12px; top: 12px; z-index: 999; background: #fff; color: var(--ink); padding: 10px 12px; border-radius: 10px; box-shadow: var(--shadow-soft); }

/* Scroll reveal */
.reveal { opacity: 0; translate: 0 24px; transition: opacity .6s ease, translate .6s ease; }
.reveal.is-visible { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------
   Header / navigation (glass over hero, white glass on scroll)
   ------------------------------------------------------------ */
/* Header as part of the water world (v3.0 point 12): deep-glass band with a
   faint glow line — never a flat white bar. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(4, 24, 50, .88), rgba(6, 32, 66, .78));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(70, 214, 255, .22);
}
.has-ocean-hero .site-header--overlay {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.has-ocean-hero .site-header--overlay.is-scrolled {
  background: linear-gradient(180deg, rgba(4, 24, 50, .88), rgba(6, 32, 66, .78));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-color: rgba(70, 214, 255, .22);
  box-shadow: 0 10px 34px rgba(2, 14, 34, .45);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 40px, var(--max)); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .1em; color: #fff; text-decoration: none; font-size: 1.05rem; text-shadow: 0 1px 10px rgba(9, 46, 88, .5); }
.brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: contain; box-shadow: 0 0 0 1px rgba(70, 214, 255, .35), 0 4px 16px rgba(2, 14, 34, .5); }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 999px;
  color: rgba(234, 246, 255, .86);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(9, 46, 88, .55);
  transition: background-color .15s ease, color .15s ease;
}
/* Uniform nav (billede 4): all items share one look — no coral Telegram, no
   gold Lounge border. Hover/active apply to every link equally. */
.site-nav a:hover { background: rgba(70, 214, 255, .14); color: #fff; }
.site-nav a.is-active {
  background: rgba(70, 214, 255, .16);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--glow);
}

/* Disabled nav items (v3.0 point 10): the Soon tag flows inline after the
   label — it can never overlap the text. */
.site-nav .is-disabled { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border-radius: 999px; color: rgba(234, 246, 255, .55); font-size: .88rem; font-weight: 700; }
.site-nav .disabled-badge, .site-nav .is-disabled .disabled-badge {
  position: static;
  translate: none;
  margin-left: 7px;
}
/* Closed Holders Lounge (billede 4): a padlock sits on top of the "Lounge"
   text instead of a separate coloured pill. */
.site-nav .lounge-closed { position: relative; }
.site-nav .lounge-closed .disabled-badge {
  position: absolute;
  top: 3px;
  right: 2px;
  margin: 0;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(10, 26, 48, .9);
  color: #ffd166;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.site-nav .lounge-closed .disabled-badge svg { width: 10px; height: 10px; }

.menu-button { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; }
.menu-button span { display: block; width: 25px; height: 2.5px; margin: 5px; background: #fff; border-radius: 99px; }

/* ------------------------------------------------------------
   Pills — the shared oval component
   ------------------------------------------------------------ */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: var(--card-solid);
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pill:hover, .pill:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--water-deep); }
.pill:active { transform: translateY(0); }
/* Shine sweep on hover */
.pill::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.pill:hover::after { animation: reef-pill-shine .7s ease; }
@keyframes reef-pill-shine { from { left: -80%; opacity: 1; } to { left: 130%; opacity: 0; } }
/* Icon sits in a colored round chip */
.pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px; height: 33px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(47, 150, 221, .16), rgba(20, 99, 159, .1));
  color: var(--water-deep);
}
.pill__icon svg { width: 18px; height: 18px; }
/* Uploaded image icons fill the whole circle so the artwork is clearly
   visible (billede 3). The image covers the tinted background entirely, so the
   section-specific circle tint below simply sits behind it. Applies globally
   wherever a pill uses an uploaded icon. */
.pill__icon--img { padding: 0; }
/* contain (not cover) so the whole icon stays visible and fills the circle
   without cropping off-centre or portrait artwork. */
.pill__icon--img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.pill__label { white-space: nowrap; }
/* v2.10.1: compact icon pills site-wide — the label slides out on hover or
   keyboard focus. Only on hover-capable devices; touch users keep the full
   label since they cannot hover. Disabled pills keep their label + Soon tag. */
@media (hover: hover) and (pointer: fine) {
  .pill:has(.pill__icon) {
    gap: 0;
    padding: 8px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, padding .3s ease;
  }
  .pill:has(.pill__icon) .pill__label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    transition: max-width .3s ease, opacity .22s ease, margin-left .3s ease;
  }
  .pill:has(.pill__icon):hover,
  .pill:has(.pill__icon):focus-visible,
  .pill:has(.pill__icon):focus-within {
    padding-right: 20px;
  }
  .pill:has(.pill__icon):hover .pill__label,
  .pill:has(.pill__icon):focus-visible .pill__label,
  .pill:has(.pill__icon):focus-within .pill__label {
    max-width: 260px;
    opacity: 1;
    margin-left: 9px;
  }
}
.pill--qwerti { background: linear-gradient(135deg, #ffe9a8, #ffd166); border-color: rgba(178, 106, 0, .35); }
.pill--qwerti .pill__icon { color: #8a5200; }
.pill--new { background: linear-gradient(135deg, var(--coral), #ff9d7e); border-color: transparent; color: #fff; }
.pill--new .pill__icon { color: #fff; }
.pill--doc .pill__icon { color: var(--octo); }
button.pill { font-family: inherit; }

/* ------------------------------------------------------------
   Hero — bright reef universe
   ------------------------------------------------------------ */
.hero--ocean {
  position: relative;
  min-height: clamp(520px, 62vw, 92vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-ocean { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--water-mid); }
.hero-ocean__picture { position: absolute; inset: 0; display: block; }
.hero-ocean__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none; /* the global img cap would otherwise expose gaps */
  object-fit: cover;
  object-position: center 38%;
  /* Base overscan: parallax translations can never expose an edge. */
  transform: scale(1.12);
  will-change: transform;
}
/* Caustics — drifting light patterns on the water */
.hero-ocean::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 32% 18% at 22% 28%, rgba(255, 255, 255, .28), transparent 70%),
    radial-gradient(ellipse 26% 14% at 64% 16%, rgba(255, 255, 255, .22), transparent 70%),
    radial-gradient(ellipse 30% 16% at 84% 38%, rgba(255, 255, 255, .18), transparent 70%);
  mix-blend-mode: soft-light;
  animation: reef-caustics 16s ease-in-out infinite alternate;
}
@keyframes reef-caustics {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); opacity: .7; }
  to { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); opacity: 1; }
}
/* The hero artwork runs clean to its bottom edge — the slim ticker current
   is the deliberate divider between artwork and open water (v3.0). */
.hero-ocean__rays { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; }
.hero-ocean__rays span {
  position: absolute;
  top: -12%;
  width: 20%;
  height: 70%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .95), rgba(255, 255, 255, .12) 65%, transparent);
  filter: blur(16px);
  transform-origin: top center;
  animation: reef-ray-sway 9s ease-in-out infinite alternate;
}
.hero-ocean__rays span:nth-child(1) { left: 30%; rotate: -8deg; }
.hero-ocean__rays span:nth-child(2) { left: 46%; width: 14%; rotate: 3deg; animation-delay: -3s; opacity: .85; }
.hero-ocean__rays span:nth-child(3) { left: 60%; rotate: 10deg; animation-delay: -6s; opacity: .7; }
@keyframes reef-ray-sway {
  from { transform: rotate(-2deg) translateX(-1.5%); opacity: .6; }
  to { transform: rotate(2deg) translateX(1.5%); opacity: 1; }
}
.hero-ocean__bubbles { position: absolute; inset: 0; pointer-events: none; }
.hero-ocean__bubbles span {
  position: absolute;
  bottom: -4%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35) 60%, transparent 78%);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, .8);
  opacity: 0;
  animation: reef-bubble-rise linear infinite;
}
.hero-ocean__bubbles span:nth-child(1)  { left: 6%;  animation-duration: 11s; animation-delay: 0s;   scale: .7; }
.hero-ocean__bubbles span:nth-child(2)  { left: 14%; animation-duration: 14s; animation-delay: 2s;   scale: 1.1; }
.hero-ocean__bubbles span:nth-child(3)  { left: 23%; animation-duration: 10s; animation-delay: 5s;   scale: .5; }
.hero-ocean__bubbles span:nth-child(4)  { left: 31%; animation-duration: 16s; animation-delay: 1s;   scale: .9; }
.hero-ocean__bubbles span:nth-child(5)  { left: 42%; animation-duration: 12s; animation-delay: 7s;   scale: .6; }
.hero-ocean__bubbles span:nth-child(6)  { left: 51%; animation-duration: 15s; animation-delay: 3.5s; scale: 1.2; }
.hero-ocean__bubbles span:nth-child(7)  { left: 60%; animation-duration: 11s; animation-delay: 6s;   scale: .8; }
.hero-ocean__bubbles span:nth-child(8)  { left: 68%; animation-duration: 13s; animation-delay: .5s;  scale: .55; }
.hero-ocean__bubbles span:nth-child(9)  { left: 76%; animation-duration: 17s; animation-delay: 4s;   scale: 1; }
.hero-ocean__bubbles span:nth-child(10) { left: 84%; animation-duration: 12s; animation-delay: 8s;   scale: .7; }
.hero-ocean__bubbles span:nth-child(11) { left: 91%; animation-duration: 14s; animation-delay: 2.5s; scale: .9; }
.hero-ocean__bubbles span:nth-child(12) { left: 97%; animation-duration: 10s; animation-delay: 6.5s; scale: .6; }
@keyframes reef-bubble-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: .95; }
  50% { transform: translateY(-55vh) translateX(12px); }
  92% { opacity: .4; }
  100% { transform: translateY(-105vh) translateX(-8px); opacity: 0; }
}
/* v3.0: the old light-blue depth wash is gone — the artwork runs clean to
   the ticker edge. The layer stays as an (empty) parallax hook only. */
.hero-ocean__depth {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  will-change: transform;
}

.hero--ocean .hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(120px, 16vw, 210px) 0 clamp(44px, 7vh, 84px);
  max-width: 720px;
}
.hero--ocean .eyebrow { color: #fff; text-shadow: 0 1px 10px rgba(9, 46, 88, .6); }
.hero--ocean h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: .95;
  text-shadow: 0 3px 26px rgba(9, 46, 88, .55);
}
.hero--ocean h1 span:first-child { display: block; margin-bottom: 8px; font-size: clamp(.95rem, 1.7vw, 1.25rem); letter-spacing: .3em; color: #eaf7ff; }
.hero-title-main { display: block; }
.hero-lead {
  max-width: 54ch;
  margin: 18px 0 22px;
  color: #f4fbff;
  font-size: clamp(.98rem, 1.15vw, 1.1rem);
  line-height: 1.7;
  text-shadow: 0 1px 14px rgba(9, 46, 88, .6);
}
/* Hero copy legibility (v3.0 point 6): a soft depth scrim sits behind the
   text block so the headline never drowns in busy artwork. */
.hero-content { position: relative; }
.hero-content::before {
  content: '';
  position: absolute;
  inset: -12% -8% -10% -10%;
  z-index: -1;
  background: radial-gradient(75% 85% at 32% 62%, rgba(3, 17, 40, .58), rgba(3, 17, 40, .22) 60%, transparent 78%);
  filter: blur(6px);
  pointer-events: none;
}
.hero--ocean h1, .hero--ocean .eyebrow {
  text-shadow: 0 2px 8px rgba(2, 14, 34, .75), 0 6px 30px rgba(2, 14, 34, .55);
}
.hero-lead { text-shadow: 0 1px 6px rgba(2, 14, 34, .8), 0 4px 22px rgba(2, 14, 34, .6); }

/* v3.0.1: pills collapse to icon buttons on ALL devices (same finish as
   desktop). Pointer devices expand the label on hover/focus; on touch the
   aria-label carries the name and the icon is the button. */
.pill:has(.pill__icon) {
  gap: 0;
  padding: 8px;
}
.pill:has(.pill__icon) .pill__label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
}
/* Touch first-tap reveal (v3.0.2, paired with main.js): the label slides out
   on the first tap — the second tap performs the action. is-peek is a
   JS-driven state class, so it must always win — hence !important. */
.pill.is-peek { padding-right: 20px !important; }
.pill.is-peek .pill__label,
.cta-icon.is-peek .cta-icon__label {
  max-width: 260px !important;
  opacity: 1 !important;
  margin-left: 9px !important;
}

/* Hero pills: one uniform bright frosted-glass look (v3.0.2) — clearly
   visible against the artwork, no color mix. */
.hero-pill-row .pill,
.hero-pill-row .pill--qwerti,
.hero-pill-row .pill--new {
  background: rgba(240, 250, 255, .5);
  border: 1px solid rgba(255, 255, 255, .92);
  color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
  box-shadow: 0 8px 26px rgba(2, 16, 40, .35), inset 0 1px 0 rgba(255, 255, 255, .65);
}
.hero-pill-row .pill .pill__icon {
  background: rgba(255, 255, 255, .55);
  color: #0a2540;
}
.hero-pill-row .pill:hover, .hero-pill-row .pill:focus-visible {
  background: rgba(238, 249, 255, .45);
  border-color: #fff;
  box-shadow: 0 10px 30px rgba(2, 16, 40, .5), 0 0 18px rgba(160, 226, 255, .45);
}
.hero-reveal { opacity: 0; translate: 0 26px; animation: reef-hero-reveal .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-reveal:nth-child(1) { animation-delay: .12s; }
.hero-reveal:nth-child(2) { animation-delay: .26s; }
.hero-reveal:nth-child(3) { animation-delay: .4s; }
.hero-reveal:nth-child(4) { animation-delay: .54s; }
.hero-reveal:nth-child(5) { animation-delay: .68s; }
@keyframes reef-hero-reveal { to { opacity: 1; translate: 0 0; } }

/* ------------------------------------------------------------
   Announcement ticker v3 — a slim ocean current the text drifts
   through: translucent deep-water band with a slow light sweep.
   ------------------------------------------------------------ */
.ticker {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(4, 26, 54, .78), rgba(8, 46, 92, .55) 40%, rgba(4, 26, 54, .78));
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border-block: 1px solid rgba(70, 214, 255, .22);
}
.ticker::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(120, 220, 255, .1) 50%, transparent 70%);
  animation: reef-current-sweep 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes reef-current-sweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.ticker__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--glow);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid rgba(70, 214, 255, .2);
}
.ticker__label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 10px var(--glow);
  animation: reef-ticker-pulse 1.8s ease-in-out infinite;
}
@keyframes reef-ticker-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ticker__window {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.ticker__track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: reef-ticker-scroll 36s linear infinite;
}
.ticker__window:hover .ticker__track { animation-play-state: paused; }
.ticker__track span {
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  color: rgba(234, 246, 255, .88);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.ticker__track span::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-inline: 26px;
  border-radius: 50%;
  background: rgba(70, 214, 255, .7);
  box-shadow: 0 0 6px rgba(70, 214, 255, .5);
}
@keyframes reef-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
   Chart section
   ------------------------------------------------------------ */
/* Depth-tinted glass (v3.0): the section cards share the water column's own
   colors and get progressively deeper down the page, so the dive continues
   THROUGH the content instead of being interrupted by white panels. */
.chart-panel {
  background: linear-gradient(165deg, rgba(21, 64, 122, .62), rgba(14, 48, 98, .5));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(150, 210, 255, .2);
  border-radius: var(--radius);
  box-shadow: 0 20px 55px rgba(2, 14, 34, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  padding: clamp(20px, 3vw, 34px);
}
.chart-copy { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.chart-copy .eyebrow { color: var(--glow); }
.chart-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); text-transform: uppercase; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 18px rgba(2, 16, 40, .4); }
.chart-copy p { max-width: 58ch; color: rgba(224, 240, 255, .78); margin: 8px 0 0; }
.chart-shell {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 560px;
  background: #0d1526; /* the embedded DexScreener terminal is dark */
}
.chart-shell iframe { position: absolute; inset: 0; width: 100%; height: calc(100% - 44px); border: 0; }
.chart-facade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(77, 180, 236, .3), transparent 60%),
    linear-gradient(165deg, #12335c, #0a1e3a 70%);
}
.chart-facade { transition: opacity .5s ease; }
.chart-facade.is-gone { opacity: 0; pointer-events: none; }
.chart-facade__inner { display: grid; gap: .9rem; justify-items: center; padding: 2rem; max-width: 460px; color: #eaf7ff; }
.chart-facade__inner strong { font-size: 1.15rem; }
.chart-facade__inner p { margin: 0; color: rgba(220, 238, 255, .8); font-size: .92rem; }
.chart-facade__spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: #9fd8ff;
  animation: reef-spin 1s linear infinite;
}
@keyframes reef-spin { to { transform: rotate(360deg); } }
.chart-fallback { position: absolute; left: 0; right: 0; bottom: 44px; z-index: 3; padding: 10px; text-align: center; background: rgba(9, 30, 58, .9); color: #ffe2a8; font-size: .85rem; }
.chart-fallback[hidden] { display: none; }
.chart-direct-link { color: #9fd8ff; font-weight: 700; }
.chart-disclaimer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 11px 14px;
  font-size: .78rem;
  color: rgba(224, 240, 255, .6);
  background: rgba(7, 18, 38, .94);
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}

/* ------------------------------------------------------------
   Pill sections (documents, wallet, tech, brand)
   ------------------------------------------------------------ */
.pills-section { padding: 40px 0; }
.pills-shell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(150, 210, 255, .18);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(2, 14, 34, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
  padding: clamp(20px, 3vw, 30px);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.pills-shell:hover {
  box-shadow: 0 22px 58px rgba(2, 14, 34, .42), inset 0 1px 0 rgba(255, 255, 255, .14);
  border-color: rgba(150, 210, 255, .32);
  transform: translateY(-2px);
}
/* The dive continues through the cards: each shell is tinted to its depth. */
#documents .pills-shell { background: linear-gradient(165deg, rgba(18, 58, 114, .6), rgba(13, 46, 94, .5)); }
#wallet-structure .pills-shell { background: linear-gradient(165deg, rgba(15, 50, 102, .62), rgba(11, 40, 84, .52)); }
#tech-utilities .pills-shell { background: linear-gradient(165deg, rgba(12, 42, 90, .64), rgba(9, 34, 74, .54)); }
#official-brand .pills-shell { background: linear-gradient(165deg, rgba(9, 34, 76, .68), rgba(7, 27, 62, .58)); }
/* Icon chips keep their section accents — as light glows on deep glass the
   colors stay in the white pill buttons only. */
#documents .pill__icon { background: rgba(141, 93, 237, .14); color: var(--octo); }
#wallet-structure .pill__icon { background: rgba(246, 167, 44, .16); color: #a86a00; }
#tech-utilities .pill__icon { background: rgba(63, 191, 130, .16); color: #157a4d; }
#official-brand .pill__icon { background: rgba(255, 95, 78, .14); color: #c23a2c; }
.pills-intro { flex: 1 1 300px; min-width: 260px; }
.pills-intro .eyebrow { color: var(--glow); }
.pills-intro h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: #fff; text-shadow: 0 2px 16px rgba(2, 16, 40, .4); }
.pills-intro p { color: rgba(224, 240, 255, .75); margin: 8px 0 0; font-size: .95rem; }
.pills-shell .pill-row { flex: 2 1 420px; }

/* ------------------------------------------------------------
   Community / vision
   ------------------------------------------------------------ */
.community-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 30px;
  align-items: center;
}
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); text-transform: uppercase; }
.section-head p { color: var(--ink-soft); max-width: 60ch; margin-top: 10px; }
.section-head .pill-row { margin: 16px 0 6px; }
.principle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.principle-grid article {
  background: rgba(8, 32, 70, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(150, 210, 255, .18);
  border-radius: var(--radius-sm);
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 26px rgba(2, 14, 34, .25);
}
.principle-grid strong { display: block; font-size: .95rem; margin-bottom: 4px; color: #fff; }
.principle-grid span { color: rgba(224, 240, 255, .68); font-size: .84rem; line-height: 1.5; }
.community-media { margin: 0; }
.media-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--card-solid); }
.media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   Deep Reef dive backdrop (v3.0) — light shafts, drifting motes
   and depth fog rendered behind ALL content. The layers live in a
   fixed element so the whole page shares one coherent water column.
   ------------------------------------------------------------ */
/* Content sits above the fixed water backdrop — but NEVER above the header
   (z 100) or the mobile bar (z 90), which keep their own stacking. */
main, .site-footer, .seabed-strip { position: relative; z-index: 1; }
.dive-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.dive-rays {
  position: absolute;
  inset: 0 0 30% 0;
  background:
    linear-gradient(112deg, transparent 24%, rgba(255, 255, 255, .16) 27%, transparent 31%),
    linear-gradient(112deg, transparent 44%, rgba(255, 255, 255, .10) 48%, transparent 53%),
    linear-gradient(112deg, transparent 64%, rgba(255, 255, 255, .13) 67%, transparent 72%),
    linear-gradient(112deg, transparent 84%, rgba(255, 255, 255, .08) 86%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 82%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 82%);
  mix-blend-mode: soft-light;
  animation: diveRays 26s ease-in-out infinite alternate;
}
@keyframes diveRays {
  from { transform: translateX(-1.5%); opacity: .8; }
  to { transform: translateX(1.5%); opacity: 1; }
}
.dive-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2.2px 2.2px at 22% 18%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.6px 1.6px at 64% 42%, rgba(190, 235, 255, .42), transparent 60%),
    radial-gradient(2.6px 2.6px at 84% 12%, rgba(255, 255, 255, .34), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 72%, rgba(190, 235, 255, .38), transparent 60%),
    radial-gradient(2px 2px at 10% 52%, rgba(255, 255, 255, .3), transparent 60%),
    radial-gradient(1.8px 1.8px at 74% 82%, rgba(190, 235, 255, .3), transparent 60%);
  background-size: 640px 900px;
  opacity: .55;
  animation: diveDrift 60s linear infinite;
}
@keyframes diveDrift {
  from { background-position: 0 0; }
  to { background-position: -180px -900px; }
}
.dive-fog {
  position: absolute;
  inset: 45% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(2, 14, 34, .34) 70%, rgba(2, 14, 34, .5));
}

/* Seabed strip: real reef artwork bridging the dive into the sand footer.
   CMS-managed via the decor_seabed media slot. */
.seabed-strip { margin: 64px 0 0; line-height: 0; }
.seabed-strip img {
  display: block;
  width: 100%;
  height: clamp(150px, 22vw, 300px);
  object-fit: cover;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 58%);
  mask-image: linear-gradient(180deg, transparent 0, #000 58%);
}

/* Deep-zone environment (v3.0 point 5): crystal glass bubbles rise slowly
   through the whole water column, and a distant whale silhouette drifts past
   the FAQ zone. Clean shapes only — no blurred overlays. */
.deep-zone { position: relative; overflow: hidden; }

.dive-bubbles { position: absolute; inset: 0; }
.dive-bubbles span {
  position: absolute;
  bottom: -30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .85) 0 12%, rgba(255, 255, 255, .18) 34%, rgba(255, 255, 255, .04) 62%, transparent 78%);
  box-shadow:
    inset -2px -3px 4px rgba(70, 214, 255, .25),
    0 0 10px rgba(160, 226, 255, .18);
  animation: bubbleRise linear infinite;
}
@keyframes bubbleRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  6% { opacity: .85; }
  50% { transform: translateY(-55vh) translateX(14px); opacity: .75; }
  94% { opacity: .5; }
  100% { transform: translateY(-108vh) translateX(-8px); opacity: 0; }
}

/* Free-standing text on deep water (outside the glass cards) */
.section-content { position: relative; z-index: 2; }
.community-section .section-head .eyebrow, .faq-heading .eyebrow { color: var(--glow); }
.community-section .section-head h2, .faq-heading h2 {
  color: #fff;
  text-shadow: 0 3px 26px rgba(2, 16, 40, .55);
}
.community-section .section-head > p, .faq-heading p { color: var(--ink-light); }

/* Compact icon CTAs — the label slides out on hover/focus (desktop);
   touch devices show the label permanently since they cannot hover. */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0 6px; }
.cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 46px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease;
}
.cta-icon svg { width: 20px; height: 20px; flex: none; }
.cta-icon:hover, .cta-icon:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); }
.cta-icon__label {
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .3s ease, opacity .22s ease, margin-left .3s ease;
}
.cta-icon:hover .cta-icon__label, .cta-icon:focus-visible .cta-icon__label {
  max-width: 240px;
  margin-left: 9px;
  opacity: 1;
}
/* v3.0.1: icon CTAs keep the same collapsed finish on touch as on desktop. */
.cta-icon--primary { background: #0c2947; color: #fff; }
.cta-icon--secondary { background: rgba(255, 255, 255, .82); color: #0c2947; border-color: rgba(12, 41, 71, .18); }

/* ------------------------------------------------------------
   Holders Lounge — the VIP room of the dive (v3.0 point 13):
   dark velvet glass, golden rim light and the royal lounge artwork.
   ------------------------------------------------------------ */
.lounge-section {
  background: radial-gradient(90% 70% at 70% 30%, rgba(246, 167, 44, .07), transparent 60%);
}
.lounge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 30px;
  align-items: center;
  background: linear-gradient(155deg, rgba(11, 18, 44, .94), rgba(26, 20, 56, .92) 55%, rgba(10, 24, 52, .94));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(246, 167, 44, .35);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(2, 10, 30, .55), inset 0 1px 0 rgba(246, 167, 44, .25), 0 0 44px rgba(246, 167, 44, .1);
  padding: clamp(22px, 3.4vw, 40px);
  position: relative;
  overflow: hidden;
}
.lounge-layout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(246, 167, 44, .1), transparent 70%);
  pointer-events: none;
}
.lounge-copy { position: relative; }
.lounge-copy .eyebrow { color: var(--seahorse); }
.lounge-copy h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
  color: #ffe9bd;
  text-shadow: 0 2px 20px rgba(246, 167, 44, .3);
}
.lounge-copy > p { color: rgba(234, 246, 255, .82); margin-top: 10px; }
.lounge-policy-card { margin-top: 16px; border: 1px solid rgba(246, 167, 44, .22); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); padding: 16px; }
.lounge-requirement-copy { font-weight: 700; color: #fff; margin: 0 0 12px; }
.lounge-tier-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lounge-tier-preview article {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.lounge-tier-preview article:nth-child(1) { border-top: 3px solid #d98a4a; }
.lounge-tier-preview article:nth-child(2) { border-top: 3px solid #c8d6ea; }
.lounge-tier-preview article:nth-child(3) { border-top: 3px solid var(--seahorse); }
.lounge-tier-preview strong { display: block; font-size: .95rem; color: #fff; }
.lounge-tier-preview span { display: block; color: var(--seahorse); font-weight: 800; font-size: .8rem; margin: 3px 0 6px; }
.lounge-tier-preview p { margin: 0; color: rgba(234, 246, 255, .66); font-size: .8rem; line-height: 1.5; }
.lounge-cta-block { margin-top: 18px; }
.lounge-availability { color: rgba(234, 246, 255, .62); font-size: .88rem; margin-bottom: 10px; }
/* The royal lounge artwork is 4:5 portrait — the frame matches it exactly,
   so the artwork shows without heavy cropping. */
.lounge-mascot { align-self: center; aspect-ratio: 4 / 5; min-height: 0; width: 100%; }
.lounge-mascot .media-frame, .lounge-section .media-frame {
  border-color: rgba(246, 167, 44, .4);
  box-shadow: 0 18px 55px rgba(2, 10, 30, .6), 0 0 34px rgba(246, 167, 44, .18);
  background: #0b122c;
}
.lounge-mascot img { height: 100%; }

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq-grid { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr); gap: 26px; align-items: start; }
.faq-heading h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); text-transform: uppercase; }
.faq-list details, .legal-list details {
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 4px 18px;
  margin-bottom: 10px;
}
.faq-list summary, .legal-list summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 800;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.faq-list summary::-webkit-details-marker, .legal-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after, .legal-list summary::after {
  content: '';
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--water-deep);
  border-bottom: 2.5px solid var(--water-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq-list details[open] summary::after, .legal-list details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-list p, .legal-list p { color: var(--ink-soft); padding-bottom: 14px; margin: 0; }

/* ------------------------------------------------------------
   Buttons (kept for lounge/cookie/modal flows)
   ------------------------------------------------------------ */
.btn, .small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover, .small-button:hover { transform: translateY(-2px); }
.btn:active, .small-button:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, var(--water-deep), var(--water-mid)); color: #fff; box-shadow: var(--shadow-soft); }
.btn-secondary { background: var(--card-solid); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.btn-lounge { background: linear-gradient(135deg, var(--seahorse), #ffcf7d); color: #5c3800; box-shadow: var(--shadow-soft); }
.btn-lounge.large { padding: 13px 30px; font-size: 1rem; }
.small-button { min-height: 40px; padding: 7px 16px; font-size: .84rem; background: rgba(31, 126, 203, .1); color: var(--water-deep); }
.mini-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* Disabled states (v3.0.3): locked features collapse to the same icon
   buttons as everything else — the red padlock sits ON the icon. */
.is-disabled, [aria-disabled="true"] { pointer-events: none; position: relative; }
.btn.is-disabled { padding-right: 44px; }
/* Locked buttons are DARK, dimmed glass — open buttons stay bright, so the
   eye immediately reads open vs. locked (v3.1.1). */
.pill.is-disabled, .pill--qwerti.is-disabled, .pill--new.is-disabled {
  background: rgba(8, 22, 46, .62);
  border-color: rgba(255, 255, 255, .26);
  color: rgba(234, 246, 255, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(2, 12, 30, .35);
}
.pill.is-disabled .pill__icon {
  background: rgba(255, 255, 255, .13);
  color: rgba(234, 246, 255, .85);
}
.disabled-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #e6483d;
}
.disabled-badge svg { width: 17px; height: 17px; }
/* On collapsed icon pills the padlock sits as a small chip on the top-right
   corner of the icon button. overflow must be visible so the chip is not
   clipped by the pill's rounded mask (no hover shine on locked pills anyway). */
.pill.is-disabled { overflow: visible; }
.pill.is-disabled .disabled-badge {
  right: -2px;
  top: -2px;
  translate: none;
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(2, 14, 34, .35);
}
.pill.is-disabled .disabled-badge svg { width: 11px; height: 11px; }

/* ------------------------------------------------------------
   Footer — bright sand seabed
   ------------------------------------------------------------ */
.site-footer {
  background: linear-gradient(180deg, var(--sand), #f4e2bd);
  border-top: 1px solid rgba(178, 136, 60, .22);
  padding-top: 3.2rem;
}
.footer-connect { display: grid; justify-items: center; gap: 1.1rem; padding-bottom: 2.4rem; }
.footer-connect__title { font-size: 1.3rem; }
.footer-social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; max-width: 560px; }
.footer-social-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: var(--card-solid);
  border: 1px solid rgba(178, 136, 60, .3);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.footer-social-button svg { width: 24px; height: 24px; }
.footer-social-button:hover, .footer-social-button:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); }
.footer-badge-new {
  display: inline-block;
  margin-left: .45em;
  padding: .14em .55em;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: var(--octo);
  vertical-align: middle;
}
.footer-social-button .footer-badge-new { position: absolute; top: -8px; right: -10px; margin: 0; }

.footer-premium-shell { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; padding-bottom: 24px; }
.footer-card { background: rgba(255, 255, 255, .7); border: 1px solid rgba(178, 136, 60, .2); border-radius: var(--radius-sm); padding: 18px; }
.footer-brand-block p { color: var(--ink-soft); font-size: .88rem; }
.footer-ca { display: grid; gap: 6px; margin-top: 10px; }
.footer-ca span { font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.footer-ca code { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; word-break: break-all; color: var(--ink); background: rgba(255, 255, 255, .8); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.footer-group-label { display: block; font-size: .7rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.footer-platform-link, .footer-legal-link, .footer-cookie-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}
.footer-platform-link:hover, .footer-legal-link:hover { color: var(--water-deep); }
.footer-cookie-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; }
/* Official platform logos in the footer link groups (v3.0 point 4) */
.footer-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; color: var(--water-deep); }
.footer-link-icon svg { width: 16px; height: 16px; }
.footer-link-icon--telegram { color: #2398c9; }
.footer-link-icon--x { color: var(--ink); }
.footer-link-icon--dexscreener { color: #1f7a4f; }
.footer-link-icon--bscscan { color: #b57a12; }
.footer-link-icon--qwerti { color: var(--octo); }
.footer-bottom-bar { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0 22px; border-top: 1px solid rgba(178, 136, 60, .22); color: var(--ink-faint); font-size: .8rem; }

/* ------------------------------------------------------------
   Mobile bottom navigation
   ------------------------------------------------------------ */
.mobile-actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(4, 24, 50, .92), rgba(6, 32, 66, .95));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid rgba(70, 214, 255, .25);
  box-shadow: 0 -8px 30px rgba(2, 14, 34, .5);
}
.mobile-actions a, .mobile-actions span, .mobile-more__button {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(70, 214, 255, .1);
  border: 1px solid rgba(70, 214, 255, .22);
  color: var(--ink-light);
  font-size: .78rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 6px;
}
.mobile-actions a:active, .mobile-more__button:active { background: rgba(70, 214, 255, .24); }
.mobile-actions .is-disabled { padding-right: 6px; }
.mobile-actions .disabled-badge {
  position: static;
  translate: none;
  margin-left: 4px;
  width: 15px;
  height: 15px;
}
.mobile-actions .disabled-badge svg { width: 13px; height: 13px; }
.mobile-more { position: relative; display: grid; min-width: 0; }
.mobile-more__button { width: 100%; font: inherit; font-size: .78rem; font-weight: 850; cursor: pointer; }
.mobile-more__sheet {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 95;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(5, 26, 54, .97), rgba(7, 36, 74, .97));
  border: 1px solid rgba(70, 214, 255, .28);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 50px rgba(2, 14, 34, .6);
}
.mobile-more.is-open .mobile-more__sheet { display: flex; }
.mobile-more__sheet a, .mobile-more__sheet span { justify-content: flex-start; padding: 0 12px; }

/* ------------------------------------------------------------
   Cookie panel, modal, toast
   ------------------------------------------------------------ */
.cookie-panel, .modal { position: fixed; inset: 0; z-index: 240; display: none; }
.cookie-panel.is-visible, .modal.is-open { display: flex; }
.cookie-panel { align-items: flex-end; justify-content: center; background: rgba(11, 44, 77, .35); padding: 18px; }
.cookie-card {
  width: min(760px, calc(100% - 28px));
  margin: 0 auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-solid);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}
.cookie-eyebrow { margin: 0 0 6px; color: var(--water-deep); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .18em; }
.cookie-card h2 { margin: 0; }
.cookie-card p { color: var(--ink-soft); margin: 6px 0 0; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.modal { align-items: flex-start; justify-content: center; padding: 16px; overflow: auto; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(2, 12, 30, .68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* The lounge modal is the VIP door: same dark velvet + gold as the lounge. */
.modal-card {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100% - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  margin: 0 auto;
  padding: 26px;
  border: 1px solid rgba(246, 167, 44, .35);
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(11, 18, 44, .98), rgba(26, 20, 56, .97) 55%, rgba(10, 24, 52, .98));
  box-shadow: 0 30px 90px rgba(0, 6, 18, .7), inset 0 1px 0 rgba(246, 167, 44, .25);
  color: var(--ink-light);
}
.modal-card h2 { color: #ffe9bd; text-shadow: 0 2px 18px rgba(246, 167, 44, .3); }
.modal-card h3, .modal-card strong { color: #fff; }
.modal-card p { color: rgba(234, 246, 255, .8); }
.modal-close { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.1rem; cursor: pointer; }
.modal-close:hover { background: rgba(255, 255, 255, .16); }
.modal-note { font-weight: 800; color: #7dffb0; }
.lounge-requirements { margin: 18px 0; border: 1px solid rgba(246, 167, 44, .25); border-radius: var(--radius-sm); padding: 16px; background: rgba(255, 255, 255, .05); }
.wallet-gate { display: grid; gap: 12px; }
.wallet-status { padding: 12px; border: 1px solid rgba(70, 214, 255, .28); border-radius: var(--radius-sm); background: rgba(70, 214, 255, .08); color: rgba(234, 246, 255, .85); font-size: .9rem; }
.wallet-small { color: rgba(234, 246, 255, .55); font-size: .82rem; margin: 0; }
.mobile-wallet-panel { border: 1px solid rgba(246, 167, 44, .28); border-radius: var(--radius-sm); padding: 14px; background: rgba(246, 167, 44, .08); }
.mobile-wallet-panel[hidden], .mobile-wallet-panel.is-closed { display: none !important; }
.mobile-wallet-panel p { color: rgba(234, 246, 255, .78); font-size: .86rem; }
.mobile-wallet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modal-card .small-button { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.modal-card .small-button:hover { background: rgba(255, 255, 255, .18); }
.wallet-guide-output { margin-top: 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); color: rgba(234, 246, 255, .8); font-size: .86rem; }
.lounge-unlocked[hidden] { display: none !important; }
.lounge-levels { display: grid; gap: 10px; margin: 14px 0; }
.lounge-level { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-sm); padding: 14px; background: rgba(255, 255, 255, .06); }
.lounge-level h3 { font-size: 1rem; margin-bottom: 4px; }
.lounge-level p { margin: 0; color: rgba(234, 246, 255, .72); font-size: .88rem; }

/* ------------------------------------------------------------
   Wallet picker (WHALER Wallet-bundlen, v3.1.0) — VIP-stil som loungen.
   Klasserne bruges af assets/js/wallet-appkit.js (bygget fra
   build-tools/wallet-bundle/src/whaler-wallet.js).
   ------------------------------------------------------------ */
.wwp-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow: auto;
  background: rgba(2, 12, 30, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wwp-card {
  width: min(440px, 100%);
  margin-top: clamp(16px, 10vh, 90px);
  padding: 22px;
  border: 1px solid rgba(246, 167, 44, .35);
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(11, 18, 44, .98), rgba(26, 20, 56, .97) 55%, rgba(10, 24, 52, .98));
  box-shadow: 0 30px 90px rgba(0, 6, 18, .7), inset 0 1px 0 rgba(246, 167, 44, .25);
  color: var(--ink-light);
}
.wwp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.wwp-title { margin: 0; font-size: 1.15rem; color: #ffe9bd; text-shadow: 0 2px 14px rgba(246, 167, 44, .3); }
.wwp-close {
  width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
}
.wwp-close:hover { background: rgba(255, 255, 255, .16); }
.wwp-list { display: grid; gap: 8px; }
.wwp-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.wwp-option:hover, .wwp-option:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(246, 167, 44, .45);
  transform: translateY(-1px);
}
.wwp-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; object-fit: contain; background: rgba(255, 255, 255, .1); }
.wwp-icon--fallback { color: var(--glow); }
.wwp-icon--fallback svg { width: 20px; height: 20px; }
.wwp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wwp-tag { font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--seahorse); border: 1px solid rgba(246, 167, 44, .4); border-radius: 999px; padding: 2px 8px; }
.wwp-note { color: rgba(234, 246, 255, .62); font-size: .82rem; margin: 12px 0 0; }
.wwp-empty { color: rgba(234, 246, 255, .75); font-size: .9rem; margin: 0; }
.wwp-qr {
  width: min(260px, 100%);
  margin: 14px auto;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(0, 6, 18, .5);
}
.wwp-waiting { margin: 0; color: #0a2540; font-size: .85rem; text-align: center; }
.wwp-links { display: grid; gap: 8px; margin: 12px 0 0; }
.wwp-deeplink {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.wwp-deeplink:active { background: rgba(255, 255, 255, .18); }
.wwp-copy {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid rgba(70, 214, 255, .35);
  border-radius: 999px;
  background: rgba(70, 214, 255, .12);
  color: var(--glow);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.wwp-copy:disabled { opacity: .5; cursor: default; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 300;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card-solid);
  box-shadow: var(--shadow);
  padding: 12px 18px;
  color: var(--ink);
  font-weight: 800;
  transition: .18s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------
   Legal pages (privacy/terms) + info detail pages
   ------------------------------------------------------------ */
/* Sub-pages live in the same water world: deep glass shells, light text. */
.legal-page .legal-shell, .legal-shell {
  background: linear-gradient(165deg, rgba(14, 48, 98, .62), rgba(9, 34, 74, .55));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(150, 210, 255, .2);
  border-radius: var(--radius);
  box-shadow: 0 20px 55px rgba(2, 14, 34, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  padding: clamp(22px, 3vw, 36px);
  max-width: 880px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.legal-shell .eyebrow { color: var(--glow); }
.legal-shell h1, .legal-shell h2 { text-transform: uppercase; color: #fff; text-shadow: 0 2px 18px rgba(2, 16, 40, .4); }
.legal-shell > p { color: rgba(224, 240, 255, .78); }

.info-detail-page { background-attachment: scroll; }
.info-detail { padding-top: 40px; position: relative; z-index: 1; }
.info-detail .btn { margin-bottom: 18px; }
.info-detail-shell {
  background: linear-gradient(165deg, rgba(14, 48, 98, .62), rgba(9, 34, 74, .55));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(150, 210, 255, .2);
  border-radius: var(--radius);
  box-shadow: 0 20px 55px rgba(2, 14, 34, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  padding: clamp(22px, 3vw, 38px);
  display: grid;
  gap: 18px;
}
.info-detail-shell .eyebrow { color: var(--glow); }
.info-detail-shell h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); text-transform: uppercase; color: #fff; text-shadow: 0 2px 18px rgba(2, 16, 40, .4); }
.info-detail-summary { color: rgba(224, 240, 255, .82); font-size: 1.02rem; }
/* Sticker look (billede 2): no rectangular frame/background — the artwork
   floats, and the drop-shadow follows the image's own (transparent) shape.
   Applies globally wherever a managed image is shown this way. */
.info-detail-media { margin: 0; max-width: 560px; border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.info-detail-media img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 26px rgba(2, 14, 34, .5)); }
.info-detail-doc { margin: 0; }
.info-detail-doc .btn { display: inline-flex; align-items: center; gap: 9px; }
.info-detail-doc__icon { display: inline-flex; }
.info-detail-doc__icon svg { width: 20px; height: 20px; }
.info-detail-body p { color: rgba(224, 240, 255, .75); line-height: 1.75; margin: 0 0 1em; }
.info-detail-body p:last-child { margin-bottom: 0; }
/* Rich-text subset from the Ops editor: emphasis, lists, headings and the
   three size classes (billede 2). Class-based sizes keep it CMS-controlled. */
.info-detail-body strong { color: rgba(238, 248, 255, .95); font-weight: 700; }
.info-detail-body em { font-style: italic; }
.info-detail-body u { text-decoration: underline; text-underline-offset: 2px; }
.info-detail-body h3 { color: #eaf4ff; font-size: 1.25em; margin: 1.2em 0 .5em; }
.info-detail-body ul, .info-detail-body ol { color: rgba(224, 240, 255, .75); line-height: 1.75; margin: 0 0 1em; padding-left: 1.4em; }
.info-detail-body li { margin: .25em 0; }
.info-detail-body .rt-sm { font-size: .82em; }
.info-detail-body .rt-lg { font-size: 1.28em; }
.info-detail-body .rt-xl { font-size: 1.6em; }
.info-asset-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
/* Sticker look (billede 1): gallery/asset thumbnails float with no frame or
   background — the drop-shadow follows the artwork's shape. Global. */
.info-asset-thumb {
  display: grid;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
  color: rgba(224, 240, 255, .7);
  box-shadow: none;
  transition: transform .16s ease;
}
.info-asset-thumb:hover { transform: translateY(-3px); }
.info-asset-thumb img { width: 100%; height: 110px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(2, 14, 34, .45)); }
.info-asset-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.asset-lightbox { position: fixed; inset: 0; z-index: 260; display: none; align-items: center; justify-content: center; padding: 20px; }
.asset-lightbox.is-open { display: flex; }
body.asset-lightbox-open { overflow: hidden; }
.asset-lightbox__backdrop { position: absolute; inset: 0; border: 0; background: rgba(11, 44, 77, .55); cursor: pointer; }
.asset-lightbox__card { position: relative; z-index: 1; margin: 0; max-width: min(920px, 100%); background: var(--card-solid); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.asset-lightbox__card img { max-height: 70vh; object-fit: contain; display: block; margin-inline: auto; }
.asset-lightbox__card figcaption { text-align: center; color: var(--ink-faint); font-size: .84rem; padding-top: 10px; }
.asset-lightbox__close { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card-solid); cursor: pointer; font-size: 1.05rem; }

/* Media slots / responsive pictures */
.picture-slot { display: contents; }
.media-slot--official-logo { border-radius: 12px; }

/* Focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(31, 126, 203, .65);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
/* Tablet */
@media (max-width: 1100px) {
  .site-nav a { padding: 0 9px; font-size: .82rem; }
}
@media (max-width: 980px) {
  .community-shell, .lounge-layout { grid-template-columns: 1fr; }
  .lounge-mascot { min-height: 220px; max-height: 320px; }
  .faq-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero--ocean { min-height: clamp(480px, 78vw, 88vh); }
  .pills-shell { gap: 12px 20px; }
  .chart-shell { min-height: 520px; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 40px, var(--max)); }
  /* ~35% less vertical air between sections so content enters the viewport
     sooner on mobile; the community section keeps room around its heading. */
  .section { padding: 42px 0; }
  .community-section { padding-top: clamp(40px, 9vw, 72px); }
  .section-head p { line-height: 1.55; max-width: 680px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .mobile-actions { display: grid; }
  .menu-button { display: block; }
  .site-nav {
    position: fixed;
    top: var(--header);
    left: 10px; right: 10px;
    z-index: 110;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(5, 26, 54, .97), rgba(7, 36, 74, .97));
    border: 1px solid rgba(70, 214, 255, .28);
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 50px rgba(2, 14, 34, .6);
  }
  .site-nav.is-open { display: flex; }
  .hero--ocean { min-height: 100svh; }
  .hero-ocean__image { object-position: center 30%; }
  .hero--ocean h1 { font-size: clamp(2.4rem, 13vw, 3.6rem); }
  .hero-pill-row { gap: 8px; }
  .hero-pill-row .pill { min-height: 42px; padding: 6px 15px; font-size: .85rem; }
  .ticker__label { padding: 10px 12px; font-size: .64rem; }
  .chart-panel { padding: 14px; }
  .chart-shell { min-height: 480px; }
  .pills-shell { padding: 18px; }
  .principle-grid, .lounge-tier-preview { grid-template-columns: 1fr; }
  .cookie-card { grid-template-columns: 1fr; }
  .cookie-actions .btn { width: 100%; }
  .mobile-wallet-actions { grid-template-columns: 1fr; }
  .lounge-cta-block .btn { width: 100%; }
  .footer-bottom-bar { flex-direction: column; gap: 6px; }
}
@media (max-width: 380px) {
  .mobile-actions { gap: 4px; padding-inline: 8px; }
  .mobile-actions a, .mobile-actions span, .mobile-more__button { font-size: .72rem; padding-inline: 4px; }
  .mobile-actions .disabled-badge { display: none; }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-ocean__rays span, .hero-ocean__bubbles span,
  .ticker__track, .ticker__label::before, .ticker::before, .hero-ocean::before,
  .pill::after, .chart-facade__spinner, .dive-rays, .dive-particles { animation: none !important; }
  .dive-bubbles { display: none; }
  .cta-icon__label, .pill__label, .pill { transition: none; }
  .hero-ocean__bubbles { display: none; }
  .hero-reveal { animation: none; opacity: 1; translate: 0 0; }
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  .hero-ocean__image { transform: scale(1.12) !important; }
  .hero-ocean__depth { transform: none !important; }
  .ticker__track { flex-wrap: wrap; white-space: normal; }
}