/* ═══════════════════════════════════════════════════════════════
   MAFAZHA EXPLORE · style.css · OMEGA TRANSCENDENCE
   Palette Obsidian × Gold × Pearl · 6 Font Arsenal · 11 Motifs
   ═══════════════════════════════════════════════════════════════ */

/* ---------- LOCK 02 · PALETTE OMEGA ---------- */
:root {
  --obsidian-void:   #050507;
  --obsidian-base:   #0A0A0C;
  --obsidian-elev-1: #141418;
  --obsidian-elev-2: #1C1C22;
  --obsidian-elev-3: #22222A;
  --obsidian-glass:  rgba(10,10,12,0.75);

  --gold-whisper: #FFF8E7;
  --gold-pale:    #F4E4B8;
  --gold-light:   #E8D48B;
  --gold-primary: #C5A028;
  --gold-deep:    #A08018;
  --gold-shadow:  #6B5410;
  --gold-void:    #3D300A;

  --pearl:       #FFFFFF;
  --pearl-soft:  #E8E8E8;
  --pearl-muted: #B0B0B0;
  --pearl-ghost: #707070;

  --royal-gradient:  linear-gradient(135deg, #C5A028 0%, #E8D48B 50%, #F4E4B8 100%);
  --sunset-gradient: linear-gradient(135deg, #8B6F1C 0%, #C5A028 50%, #FFF8E7 100%);
  --aurora-gradient: conic-gradient(from 180deg, #C5A028 0deg, transparent 90deg, #E8D48B 180deg, transparent 270deg);

  --jade: #27AE60;  --jade-tint: rgba(39,174,96,0.08);
  --ruby: #C0392B;  --ruby-tint: rgba(192,57,43,0.08);
  --sapphire: #2E86DE;
  --whatsapp: #25D366;

  /* LOCK 03 · FONT ARSENAL + 3-tier fallback */
  --font-nameplate: 'Italiana', 'Didot', Georgia, serif;
  --font-display:   'Cinzel', 'Trajan Pro', 'Optima', Georgia, serif;
  --font-accent:    'Marcellus', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-editorial: 'Playfair Display', 'Didot', Georgia, serif;
  --font-ui:        'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid Typography (Silver Ratio) */
  --fs-nameplate: clamp(2.5rem, 10vw, 8rem);
  --fs-display:   clamp(2.5rem, 5vw + 1rem, 5rem);
  --fs-h2:        clamp(2rem, 3.5vw + 0.5rem, 3.5rem);
  --fs-h3:        clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
  --fs-eyebrow:   clamp(0.75rem, 0.5vw + 0.5rem, 0.9rem);
  --fs-body:      clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --fs-small:     clamp(0.875rem, 0.3vw + 0.75rem, 0.95rem);
  --fs-micro:     clamp(0.65rem, 0.3vw + 0.5rem, 0.75rem);

  color-scheme: dark;
}

/* ---------- BASE ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  background: var(--obsidian-base);
  color: var(--pearl-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.loading { overflow: hidden; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--gold-light); text-decoration: none; }
button { font-family: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
main { position: relative; z-index: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--gold-primary); color: var(--obsidian-base); }
::-moz-selection { background: var(--gold-primary); color: var(--obsidian-base); }

/* Gold Scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--obsidian-void); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-primary), var(--gold-light)); border-radius: 10px; border: 2px solid var(--obsidian-void); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-light), var(--gold-pale)); box-shadow: 0 0 10px rgba(197,160,40,0.5); }
html { scrollbar-width: thin; scrollbar-color: var(--gold-primary) var(--obsidian-void); }

.skip-link {
  position: absolute; top: -64px; left: 16px; z-index: 100000;
  background: var(--gold-primary); color: var(--obsidian-base);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-small);
  padding: 10px 20px; border-radius: 8px; transition: top 200ms ease;
}
.skip-link:focus-visible { top: 12px; }

.container { width: min(1360px, 100% - 48px); margin-inline: auto; position: relative; z-index: 2; }
.container-narrow { width: min(880px, 100% - 48px); }

.chapter { position: relative; overflow: hidden; padding: 120px 0; }
.ch-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Chapter head scaffold */
.chapter-head { text-align: center; margin-bottom: 64px; position: relative; }
.chapter-index {
  display: block; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.5rem, 8vw, 7rem); line-height: 1; margin-bottom: 8px;
  color: transparent; -webkit-text-stroke: 1px rgba(197,160,40,0.28);
}
.eyebrow {
  font-family: var(--font-accent); font-size: 11px; letter-spacing: 6px;
  text-transform: uppercase; color: var(--gold-primary); margin-bottom: 16px;
}
.chapter-head h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2);
  line-height: 1.15;
}
.holo {
  background: linear-gradient(100deg, var(--gold-pale) 0%, var(--gold-primary) 25%, var(--gold-whisper) 50%, var(--gold-primary) 75%, var(--gold-pale) 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: holo-shift 6s linear infinite;
}
@keyframes holo-shift { to { background-position: 220% center; } }

/* Reveal-on-scroll */
.revealable { opacity: 0; transform: translateY(26px); }
.revealable.revealed { opacity: 1; transform: none; transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22,1,0.36,1); }

/* Pause living backgrounds saat tab inactive */
body.tab-hidden .bg-anim { animation-play-state: paused !important; }

/* ═══════════ CURSOR PESAWAT + TRAIL (desktop) ═══════════ */
#plane-cursor, .trail-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  body, a, button, [role="button"], .tab-btn, .faq-q { cursor: none; }
  #plane-cursor {
    display: block; position: fixed; top: 0; left: 0; z-index: 9998;
    pointer-events: none; filter: drop-shadow(0 0 6px rgba(197,160,40,0.5));
    will-change: transform;
  }
  .trail-dot {
    display: block; position: fixed; top: 0; left: 0; z-index: 9997;
    background: var(--gold-primary); border-radius: 50%;
    box-shadow: 0 0 8px rgba(197,160,40,0.6); pointer-events: none;
    will-change: transform;
  }
  .trail-dot.t1 { width: 6px; height: 6px; opacity: 0.6; }
  .trail-dot.t2 { width: 5px; height: 5px; opacity: 0.5; }
  .trail-dot.t3 { width: 4px; height: 4px; opacity: 0.4; }
  .trail-dot.t4 { width: 3px; height: 3px; opacity: 0.25; }
  .trail-dot.t5 { width: 2px; height: 2px; opacity: 0.1; }
  #plane-cursor svg { will-change: transform; }
  #plane-cursor.hov svg { transform: scale(1.4) rotate(360deg); transition: transform 400ms ease; }
  #plane-cursor.pulse svg { animation: cursor-pulse 200ms ease; }
  body.cursor-hov .trail-dot { box-shadow: 0 0 14px rgba(197,160,40,0.95); }
  body.cursor-hov .trail-dot.t1 { opacity: 0.8; }
  body.cursor-hov .trail-dot.t2 { opacity: 0.65; }
  body.cursor-hov .trail-dot.t3 { opacity: 0.55; }
}
@keyframes cursor-pulse { 0% { transform: scale(1); } 40% { transform: scale(0.8); } 100% { transform: scale(1); } }

/* ═══════════ LIGHT ORB ═══════════ */
#light-orb {
  position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(197,160,40,0.5), transparent 65%);
  filter: blur(80px); opacity: 0.06; will-change: transform;
}

/* ═══════════ LOCK 06 · CINEMATIC 5-PHASE LOADING ═══════════ */
#cine-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--obsidian-void);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 600ms ease;
}
.ld-vignette {
  position: absolute; inset: 0; opacity: 0;
  background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(197,160,40,0.12), transparent 40%);
  transition: opacity 600ms ease;
}
#cine-loader.ph1 .ld-vignette { opacity: 0.3; }

.ld-dust { position: absolute; inset: 0; overflow: hidden; }
.ld-dust span {
  position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-light); box-shadow: 0 0 8px rgba(232,212,139,0.8);
  opacity: 0;
}
#cine-loader.ph2 .ld-dust span { animation: dust-in 900ms cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: var(--dd, 0ms); }
@keyframes dust-in {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
  35%  { opacity: 0.95; }
  100% { opacity: 0.85; transform: translate(calc(var(--dx) * 0.06), calc(var(--dy) * 0.06)) scale(1); }
}

.ld-core { position: relative; width: 320px; height: 320px; display: flex; align-items: center; justify-content: center; transition: transform 300ms ease; }
#cine-loader.ph5 .ld-core { transform: scale(1.1); }

.ld-logo-wrap {
  position: relative; z-index: 3; border-radius: 50%;
  opacity: 0; transform: scale(0.6); clip-path: circle(0% at 50% 50%);
}
#cine-loader.ph3 .ld-logo-wrap,
#cine-loader.ph4 .ld-logo-wrap,
#cine-loader.ph5 .ld-logo-wrap {
  opacity: 1; transform: scale(1); clip-path: circle(120% at 50% 50%);
  transition: opacity 500ms ease, transform 900ms cubic-bezier(0.22,1,0.36,1), clip-path 900ms ease;
}
#cine-loader.ph4 .ld-logo-wrap, #cine-loader.ph5 .ld-logo-wrap { animation: logo-glow 2s ease-in-out infinite; }
@keyframes logo-glow {
  0%, 100% { box-shadow: 0 0 24px rgba(197,160,40,0.35), 0 0 4px rgba(197,160,40,0.5); }
  50%      { box-shadow: 0 0 48px rgba(197,160,40,0.55), 0 0 12px rgba(197,160,40,0.7); }
}
.ld-logo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold-primary); display: block; }

.ld-rings { position: absolute; inset: 0; opacity: 0; transform: scale(0.9); transition: opacity 600ms ease, transform 600ms ease; }
#cine-loader.ph4 .ld-rings, #cine-loader.ph5 .ld-rings { opacity: 1; transform: scale(1); }

.ld-ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ld-ring.r1 { width: 170px; height: 170px; border: 1px solid rgba(197,160,40,0.25); animation: orbit-spin 10s linear infinite; }
.ld-ring.r2 { width: 220px; height: 220px; border: 1px solid rgba(232,212,139,0.20); animation: orbit-spin-rev 14s linear infinite; }
.ld-ring.r3 { width: 280px; height: 280px; border: 1px solid rgba(244,228,184,0.15); animation: orbit-spin 18s linear infinite; }
/* ☄️ SATELLITE DOTS — anak ring, ikut berputar = BERJALAN di orbit */
.ld-sat { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.r1 .ld-sat { width: 8px; height: 8px; background: #C5A028; box-shadow: 0 0 10px rgba(197,160,40,0.9); }
.r2 .ld-sat { width: 6px; height: 6px; background: #E8D48B; box-shadow: 0 0 10px rgba(232,212,139,0.9); }
.r3 .ld-sat { width: 5px; height: 5px; background: #F4E4B8; box-shadow: 0 0 10px rgba(244,228,184,0.9); }
@keyframes orbit-spin     { from { transform: translate(-50%, -50%) rotate(0deg); }   to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbit-spin-rev { from { transform: translate(-50%, -50%) rotate(360deg); } to { transform: translate(-50%, -50%) rotate(0deg); } }

.ld-plane-orbit { position: absolute; top: 50%; left: 50%; width: 280px; height: 280px; animation: orbit-spin 6s linear infinite; }
.ld-plane {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) rotate(90deg);
  color: var(--gold-light); font-size: 16px; filter: drop-shadow(0 0 6px rgba(232,212,139,0.7));
}

.ld-bar {
  position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
  width: min(320px, 70vw); height: 2px; background: rgba(197,160,40,0.15); border-radius: 2px; overflow: hidden;
}
.ld-bar-fill { width: 0%; height: 100%; background: var(--royal-gradient); transition: width 1100ms linear; }
#cine-loader.ph4 .ld-bar-fill { width: 100%; }
#cine-loader.ph5 .ld-bar-fill { width: 100%; }

.ld-text {
  position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-accent); font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(232,212,139,0.85); white-space: nowrap; transition: opacity 250ms ease;
}
#cine-loader.ph5 { opacity: 0; pointer-events: none; }

/* ═══════════ LOCK 08 · NAVBAR ═══════════ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  background: var(--obsidian-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(197,160,40,0.12);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 32px; max-width: 1600px; margin-inline: auto;
}
.nav-brand { display: inline-flex; align-items: center; gap: 14px; }
.nav-logo {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; aspect-ratio: 1/1;
  border: 2px solid var(--gold-primary); box-shadow: 0 0 12px rgba(197,160,40,0.3);
  transition: transform 1000ms ease, box-shadow 400ms ease;
}
.nav-brand:hover .nav-logo { transform: rotate(360deg) scale(1.05); box-shadow: 0 0 20px rgba(197,160,40,0.5); }
.nav-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--gold-primary); letter-spacing: 1px; }
.nav-controls { display: flex; align-items: center; gap: 12px; }
.nav-icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-primary); font-size: 17px;
  border: 1px solid rgba(197,160,40,0.25);
  transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}
.nav-icon-btn:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(197,160,40,0.4); background: rgba(197,160,40,0.08); }
.diary-badge {
  position: absolute; top: -7px; right: -7px; min-width: 26px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--gold-primary); color: var(--obsidian-base);
  font-family: var(--font-ui); font-weight: 700; font-size: 10px; line-height: 16px; text-align: center;
}
.diary-badge.complete { background: var(--jade); color: var(--pearl); }
.hamburger { flex-direction: column; gap: 5px; }
.hb-bar { display: block; width: 22px; height: 2px; background: var(--gold-primary); border-radius: 2px; transition: transform 350ms ease, opacity 350ms ease; }
.hamburger.open .hb-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open .hb-bar:nth-child(2) { opacity: 0; }
.hamburger.open .hb-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#scroll-progress {
  position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; z-index: 9501;
  background: transparent;
}
.sp-fill {
  width: 0%; height: 100%; background: var(--royal-gradient);
  box-shadow: 0 0 10px rgba(197,160,40,0.6);
  transition: width 100ms linear;
}

/* ═══════════ LOCK 09 · DRAWER KANAN ═══════════ */
#drawer-backdrop {
  position: fixed; inset: 0; z-index: 7999; background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 400ms ease;
}
#drawer-backdrop.active { opacity: 1; pointer-events: auto; }
#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 8000;
  width: 380px; max-width: 100vw;
  background: linear-gradient(160deg, var(--obsidian-elev-1), var(--obsidian-base));
  border-left: 1px solid rgba(197,160,40,0.2);
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column; overflow-y: auto;
}
#drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; gap: 14px; padding: 24px 24px 18px; border-bottom: 1px solid rgba(197,160,40,0.15); }
.drawer-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-primary); box-shadow: 0 0 14px rgba(197,160,40,0.35); }
.drawer-name { font-family: var(--font-display); font-weight: 700; color: var(--gold-primary); font-size: 1.1rem; flex: 1; }
.drawer-nav { display: flex; flex-direction: column; padding: 8px 0; }
.drawer-link {
  display: flex; align-items: center; gap: 16px; padding: 16px 24px;
  font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-small);
  color: var(--pearl-soft); border-bottom: 1px solid rgba(197,160,40,0.1);
  transition: background 250ms ease, transform 250ms ease, color 250ms ease;
}
.drawer-link i { width: 22px; text-align: center; color: var(--gold-primary); }
.drawer-link:hover { background: rgba(197,160,40,0.05); transform: translateX(4px); color: var(--gold-light); }
.drawer-link.active { color: var(--gold-primary); background: rgba(197,160,40,0.07); border-left: 3px solid var(--gold-primary); }
.drawer-divider { height: 1px; margin: 10px 24px; background: linear-gradient(90deg, transparent, var(--gold-primary), transparent); }
.drawer-foot { margin-top: auto; padding: 20px 24px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 3px; color: var(--pearl-ghost); }

/* ═══════════ LOCK 23 · 5 BUTTON ARCHETYPES ═══════════ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.btn-royal {
  background: var(--royal-gradient); color: var(--obsidian-base);
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: var(--fs-small);
  border-radius: 50px; padding: 16px 36px;
  box-shadow: 0 6px 24px rgba(197,160,40,0.3);
  transition: filter 300ms ease, box-shadow 300ms ease, transform 150ms ease;
}
.btn-royal:hover { filter: brightness(1.1); box-shadow: 0 10px 32px rgba(197,160,40,0.45); }
.btn-big { padding: 20px 44px; font-size: 1rem; }
.btn-boarding {
  position: relative; background: var(--gold-primary); color: var(--obsidian-base);
  font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; font-size: var(--fs-small);
  padding: 18px 40px; border-radius: 8px;
}
.btn-boarding::before { content: ""; position: absolute; inset: 4px; border: 2px dashed var(--gold-light); border-radius: 5px; pointer-events: none; }
.btn-boarding::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--gold-void) 0 2px, transparent 2px 5px); opacity: 0.6;
}
.btn-boarding:hover { filter: brightness(1.08); }
.btn-glass {
  background: rgba(197,160,40,0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--gold-light); font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-small);
  border: 1px solid rgba(197,160,40,0.3); border-radius: 12px; padding: 14px 28px;
  transition: background 300ms ease, transform 300ms ease;
}
.btn-glass:hover { background: rgba(197,160,40,0.18); transform: translateY(-2px); }
.btn-engraved {
  background: transparent; color: var(--gold-primary);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-small); letter-spacing: 1px;
  border: 2px solid var(--gold-primary); border-radius: 8px; padding: 13px 26px;
  transition: background 300ms ease, color 300ms ease, transform 300ms ease;
}
.btn-engraved:hover { background: var(--gold-primary); color: var(--obsidian-base); transform: translateY(-2px); }
.btn-ribbon {
  background: transparent; color: var(--gold-primary);
  font-family: var(--font-editorial); font-style: italic; font-size: var(--fs-body);
  text-decoration: underline wavy rgba(197,160,40,0.5); text-underline-offset: 6px;
  padding: 4px 2px; transition: text-decoration-color 250ms ease, transform 250ms ease;
}
.btn-ribbon:hover { text-decoration: underline solid var(--gold-primary); text-underline-offset: 6px; transform: translateX(4px); }

/* ═══════════ LOCK 12 · CHAPTER 01 HERO ═══════════ */
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px 0 90px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-bg > * { position: absolute; }

.hb-mandala {
  top: 50%; left: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; opacity: 0.03;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='none' stroke='%23C5A028' stroke-width='1'><circle cx='200' cy='200' r='190'/><circle cx='200' cy='200' r='150'/><circle cx='200' cy='200' r='110'/><circle cx='200' cy='200' r='70'/><circle cx='200' cy='200' r='30'/><path d='M200 10V390M10 200H390M66 66L334 334M334 66L66 334'/></g></svg>") center/contain no-repeat;
  animation: spin-ccw 60s linear infinite;
}
.hb-radial { inset: 0; background: radial-gradient(circle at 50% 42%, var(--obsidian-elev-1) 0%, var(--obsidian-base) 55%, var(--obsidian-void) 100%); }
.hb-aurora {
  top: 50%; left: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; opacity: 0.08;
  background: var(--aurora-gradient); border-radius: 50%; filter: blur(40px);
  animation: spin-cw 30s linear infinite;
}
.hb-globe {
  top: 50%; left: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: 0.06;
  animation: spin-cw 60s linear infinite;
}
.globe-svg { width: 100%; height: 100%; fill: none; stroke: var(--gold-light); stroke-width: 1; }
@keyframes spin-cw  { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

.hero-particles { inset: 0; overflow: hidden; }
.hero-particles span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-light); box-shadow: 0 0 6px rgba(232,212,139,0.8);
  animation: float-y var(--dur, 18s) ease-in-out var(--del, 0s) infinite alternate;
  will-change: transform;
}
@keyframes float-y { from { transform: translateY(0); } to { transform: translateY(-70px); } }

.hb-landmarks { top: 50%; left: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; animation: spin-cw 60s linear infinite; }
.hl-item {
  position: absolute; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--gold-primary); font-size: 20px; opacity: 0.5;
  animation: spin-ccw 60s linear infinite;
}
.hl-n { top: 0; left: 50%; transform: translate(-50%, -50%); }
.hl-e { top: 50%; right: 0; transform: translate(50%, -50%); }
.hl-s { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.hl-w { top: 50%; left: 0; transform: translate(-50%, -50%); }

.hero-frangipani { inset: 0; overflow: hidden; }
.frang { position: absolute; width: 34px; height: 34px; opacity: 0.3; transform: rotate(var(--rot, 0deg)); }
.frang svg { width: 100%; height: 100%; }
.frang .fp { fill: var(--gold-pale); }
.frang .fc { fill: var(--gold-primary); }

.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 20px; }
.hero-logo-wrap { position: relative; display: inline-flex; margin-bottom: 34px; }
.hero-logo {
  width: 140px; height: 140px; border-radius: 50%; object-fit: cover; aspect-ratio: 1/1;
  border: 3px solid var(--gold-primary);
  box-shadow: 0 0 40px rgba(197,160,40,0.35), inset 0 0 20px rgba(0,0,0,0.4);
}
.hero-mini-orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; }
.hero-mini-orbit.mo1 { width: 160px; height: 160px; margin: -80px 0 0 -80px; border: 1px solid rgba(197,160,40,0.35); animation: spin-cw 8s linear infinite; }
.hero-mini-orbit.mo2 { width: 190px; height: 190px; margin: -95px 0 0 -95px; border: 1px dashed rgba(232,212,139,0.25); animation: spin-ccw 12s linear infinite; }

.nameplate {
  font-family: var(--font-nameplate); font-weight: 400;
  font-size: var(--fs-nameplate); line-height: 1.06;
  white-space: nowrap; letter-spacing: 0.1em;
  text-shadow: 0 4px 50px rgba(197,160,40,0.4);
  margin: 0 auto;
}
.np-letter {
  display: inline-block; opacity: 0; transform: translateY(34px) rotate(5deg);
  background: linear-gradient(135deg, #FFF8E7 0%, #C5A028 45%, #FFF8E7 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.np-letter.np-space { width: 0.28em; }
.nameplate.play .np-letter { animation: np-in 700ms cubic-bezier(0.22,1,0.36,1) forwards, np-shimmer 8s linear infinite; }
@keyframes np-in { to { opacity: 1; transform: translateY(0) rotate(0deg); } }
@keyframes np-shimmer { to { background-position: 200% center; } }

.hero-desc {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 30px;
  font-family: var(--font-accent); font-size: 12px; letter-spacing: 5px; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.hd-line { display: inline-block; width: 46px; height: 1px; background: rgba(197,160,40,0.35); }

.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sc-text { font-family: var(--font-ui); font-weight: 500; font-size: 9px; letter-spacing: 4px; color: var(--pearl-ghost); }
.scroll-cue i { color: var(--gold-primary); font-size: 14px; animation: bounce-cue 2s ease-in-out infinite; }
@keyframes bounce-cue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ═══════════ MARQUEE ZONE ═══════════ */
.marquee-zone { position: relative; z-index: 2; border-block: 1px solid rgba(197,160,40,0.15); padding: 22px 0; overflow: hidden; background: var(--obsidian-void); }
.mq { overflow: hidden; white-space: nowrap; }
.mq + .mq { margin-top: 14px; }
.mq-track { display: inline-flex; white-space: nowrap; will-change: transform; }
.mq-set { display: inline-block; padding-right: 8px; }
.mq-a .mq-set { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: 3px; color: var(--gold-primary); }
.mq-b .mq-set { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-body); letter-spacing: 2px; color: var(--pearl-muted); }
.mq-set i { color: var(--gold-light); font-size: 0.8em; }

/* ═══════════ LIVING BACKGROUND MOTIFS (shared) ═══════════ */
.motif { position: absolute; inset: -12%; opacity: 0.03; pointer-events: none; }

.motif-hex {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 4 L52 18 L52 46 L28 60 L4 46 L4 18 Z' fill='none' stroke='%23C5A028' stroke-width='1'/></svg>") repeat;
  background-size: 56px 64px; animation: drift-diag 20s linear infinite;
}
@keyframes drift-diag { from { transform: translate(0,0); } to { transform: translate(56px, 64px); } }

.paper-frag { position: absolute; border: 1px solid rgba(197,160,40,0.2); background: rgba(197,160,40,0.03); border-radius: 4px; animation: float-y 22s ease-in-out infinite alternate; }
.pf1 { width: 90px; height: 120px; top: 12%; left: 6%; transform: rotate(-8deg); }
.pf2 { width: 60px; height: 84px; top: 58%; right: 8%; transform: rotate(6deg); animation-duration: 26s; }
.pf3 { width: 74px; height: 100px; bottom: 8%; left: 14%; transform: rotate(12deg); animation-duration: 19s; }

.motif-topo {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%23C5A028' stroke-width='1'><circle cx='160' cy='160' r='40'/><circle cx='160' cy='160' r='80'/><circle cx='160' cy='160' r='120'/><circle cx='160' cy='160' r='150'/></g></svg>") repeat;
  background-size: 320px 320px; animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.cloud { position: absolute; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,0.05), transparent 70%); filter: blur(18px); animation: drift-x 34s linear infinite; }
.cl1 { width: 320px; height: 90px; top: 14%; left: -10%; }
.cl2 { width: 240px; height: 70px; top: 38%; left: 30%; animation-duration: 44s; animation-delay: -12s; }
.cl3 { width: 380px; height: 110px; bottom: 10%; right: -8%; animation-duration: 52s; animation-delay: -24s; }
@keyframes drift-x { from { transform: translateX(-15vw); } to { transform: translateX(110vw); } }
.bird { position: absolute; color: rgba(197,160,40,0.35); font-size: 18px; animation: fly-ltr 40s linear infinite; }
.b1 { top: 18%; left: -5%; }
.b2 { top: 30%; left: -8%; animation-delay: -18s; animation-duration: 48s; font-size: 13px; }
@keyframes fly-ltr { from { transform: translateX(0) translateY(0); } 50% { transform: translateX(55vw) translateY(-24px); } to { transform: translateX(112vw) translateY(0); } }

.motif-barcode {
  background: repeating-linear-gradient(90deg, rgba(197,160,40,0.6) 0 2px, transparent 2px 9px, rgba(197,160,40,0.4) 9px 10px, transparent 10px 17px);
  animation: slide-x 30s linear infinite;
}
@keyframes slide-x { from { background-position: 0 0; } to { background-position: 340px 0; } }
.pplane { position: absolute; width: 42px; height: 42px; color: rgba(232,212,139,0.35); }
.pp1 { top: 20%; left: -4%; animation: fly-diag 25s linear infinite; }
.pp2 { bottom: 16%; left: -6%; animation: fly-diag 25s linear -12s infinite; width: 30px; height: 30px; }
@keyframes fly-diag { from { transform: translate(0, 40px) rotate(35deg); } to { transform: translate(112vw, -30vh) rotate(35deg); } }

.motif-diamond {
  background-image: repeating-linear-gradient(45deg, rgba(197,160,40,0.5) 0 1px, transparent 1px 46px), repeating-linear-gradient(-45deg, rgba(197,160,40,0.5) 0 1px, transparent 1px 46px);
  animation: diamond-pulse 6s ease-in-out infinite;
}
@keyframes diamond-pulse { 0%,100% { opacity: 0.03; } 50% { opacity: 0.05; } }
.gem { position: absolute; width: 8px; height: 8px; background: var(--gold-light); transform: rotate(45deg); box-shadow: 0 0 10px rgba(232,212,139,0.7); animation: gem-tw 3.4s ease-in-out infinite; }
.g1 { top: 16%; left: 9%; } .g2 { top: 26%; right: 12%; animation-delay: .7s; } .g3 { top: 52%; left: 5%; animation-delay: 1.4s; }
.g4 { top: 62%; right: 7%; animation-delay: 2.1s; } .g5 { bottom: 12%; left: 16%; animation-delay: 2.7s; } .g6 { bottom: 20%; right: 20%; animation-delay: 3.1s; }
@keyframes gem-tw { 0%,100% { opacity: 0.15; transform: rotate(45deg) scale(0.7); } 50% { opacity: 0.85; transform: rotate(45deg) scale(1.15); } }

.stat-ghost {
  position: absolute; font-family: var(--font-display); font-weight: 900; font-size: clamp(6rem, 14vw, 13rem);
  color: var(--gold-primary); opacity: 0.02; filter: blur(2px); animation: ghost-drift 30s ease-in-out infinite alternate;
}
.sg1 { top: 6%; left: 4%; } .sg2 { top: 20%; right: 4%; animation-delay: -8s; } .sg3 { bottom: 14%; left: 12%; animation-delay: -16s; } .sg4 { bottom: 6%; right: 14%; animation-delay: -22s; }
@keyframes ghost-drift { from { transform: translateY(0); } to { transform: translateY(-46px); } }

.polaroid { position: absolute; width: 54px; height: 66px; border: 1px solid rgba(197,160,40,0.4); border-bottom-width: 12px; background: rgba(197,160,40,0.05); border-radius: 3px; animation: float-y 25s ease-in-out infinite alternate; }
.pol1 { top: 10%; left: 7%; transform: rotate(-9deg); } .pol2 { top: 22%; right: 9%; transform: rotate(7deg); animation-delay: -4s; }
.pol3 { top: 44%; left: 3%; transform: rotate(12deg); animation-delay: -8s; } .pol4 { top: 56%; right: 4%; transform: rotate(-6deg); animation-delay: -11s; }
.pol5 { bottom: 20%; left: 12%; transform: rotate(4deg); animation-delay: -14s; } .pol6 { bottom: 8%; right: 16%; transform: rotate(-12deg); animation-delay: -18s; }
.pol7 { top: 34%; left: 44%; transform: rotate(9deg); animation-delay: -21s; }

.motif-letter {
  background: repeating-linear-gradient(0deg, rgba(197,160,40,0.5) 0 1px, transparent 1px 20px);
  animation: slide-y 28s linear infinite;
}
@keyframes slide-y { from { background-position: 0 0; } to { background-position: 0 220px; } }
.qmark { position: absolute; font-family: var(--font-editorial); font-weight: 700; font-size: clamp(5rem, 10vw, 9rem); color: var(--gold-primary); opacity: 0.04; animation: float-y 20s ease-in-out infinite alternate; }
.q1 { top: 8%; left: 6%; } .q2 { top: 16%; right: 8%; animation-delay: -4s; } .q3 { top: 48%; left: 12%; animation-delay: -9s; }
.q4 { bottom: 18%; right: 12%; animation-delay: -13s; } .q5 { bottom: 6%; left: 40%; animation-delay: -17s; }

.motif-chev {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'><path d='M4 16 L14 6 L24 16 M24 16 L34 6 L44 16' fill='none' stroke='%23C5A028' stroke-width='1.4'/></svg>") repeat;
  background-size: 48px 24px; animation: drift-diag-c 35s linear infinite;
}
@keyframes drift-diag-c { from { transform: translate(0,0); } to { transform: translate(48px, -24px); } }
.qfloat { position: absolute; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; color: var(--gold-light); opacity: 0.05; animation: float-y 15s ease-in-out infinite alternate; }
.qf1 { top: 14%; left: 8%; } .qf2 { top: 42%; right: 8%; animation-delay: -5s; } .qf3 { bottom: 12%; left: 46%; animation-delay: -9s; }

.compass-rose {
  position: absolute; top: 50%; left: 50%; width: min(720px, 90vw); height: min(720px, 90vw);
  transform: translate(-50%, -50%); margin: 0; opacity: 0.04;
  fill: none; stroke: var(--gold-primary); stroke-width: 1;
  animation: rose-spin 90s linear infinite;
}
@keyframes rose-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.crown-orn { position: absolute; color: var(--gold-primary); font-size: 20px; opacity: 0.12; animation: crown-pulse 3s ease-in-out infinite; }
.co1 { top: 6%; left: 5%; } .co2 { top: 6%; right: 5%; animation-delay: .75s; }
.co3 { bottom: 6%; left: 5%; animation-delay: 1.5s; } .co4 { bottom: 6%; right: 5%; animation-delay: 2.25s; }
@keyframes crown-pulse { 0%,100% { opacity: 0.08; transform: scale(1); } 50% { opacity: 0.2; transform: scale(1.12); } }

.motif-star {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><path d='M60 30 L64 56 L90 60 L64 64 L60 90 L56 64 L30 60 L56 56 Z' fill='%23C5A028'/></svg>") repeat;
  background-size: 120px 120px; animation: star-tw 4s ease-in-out infinite;
}
@keyframes star-tw { 0%,100% { opacity: 0.02; } 50% { opacity: 0.045; } }
.shooting { position: absolute; width: 120px; height: 1px; background: linear-gradient(90deg, var(--gold-whisper), transparent); top: 12%; left: -10%; opacity: 0; animation: shoot 8s linear infinite; }
.ss2 { top: 34%; animation-delay: 4s; }
@keyframes shoot { 0% { transform: translate(0,0) rotate(-18deg); opacity: 0; } 8% { opacity: 0.9; } 20% { transform: translate(120vw, 24vh) rotate(-18deg); opacity: 0; } 100% { transform: translate(120vw, 24vh) rotate(-18deg); opacity: 0; } }

/* ═══════════ LOCK 13 · CHAPTER 02 ABOUT ═══════════ */
.manifesto { max-width: 780px; margin: 0 auto 72px; text-align: center; }
.manifesto p + p { margin-top: 28px; }
.m-editorial { font-family: var(--font-editorial); font-style: italic; font-size: 1.15rem; color: var(--pearl); line-height: 1.85; }
.m-body { font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; color: var(--pearl-muted); line-height: 1.8; }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pillar { text-align: center; padding: 34px 20px; transition: transform 400ms ease; }
.pillar-hex {
  width: 96px; height: 108px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--obsidian-elev-2);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 1px solid rgba(197,160,40,0.4);
  font-size: 34px; color: var(--gold-primary);
  transition: transform 500ms ease, box-shadow 500ms ease;
  position: relative;
}
.pillar:hover .pillar-hex { transform: rotate(15deg); box-shadow: 0 0 30px rgba(197,160,40,0.35); }
.pillar:hover { transform: translateY(-6px); }
.pillar-title { font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; letter-spacing: 2px; color: var(--gold-light); margin-bottom: 10px; }
.pillar-desc { font-family: var(--font-body); font-size: var(--fs-small); color: var(--pearl-muted); }

/* ═══════════ LOCK 14 · CHAPTER 03 WHY BALI ═══════════ */
.why-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 64px; align-items: center; }
.wp-1 { font-family: var(--font-editorial); font-style: italic; font-size: 1.15rem; color: var(--pearl); line-height: 1.85; }
.wp-2 { font-family: var(--font-body); font-size: 1.02rem; color: var(--pearl-muted); margin-top: 24px; }
.why-hl { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-top: 32px; }
.hl { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-small); color: var(--pearl-soft); }
.hl i { color: var(--gold-primary); font-size: 26px; }
.pull-quote {
  margin-top: 34px; padding-left: 24px; border-left: 3px solid var(--gold-primary);
  font-family: var(--font-editorial); font-style: italic; font-size: 1.4rem; line-height: 1.6; color: var(--gold-pale);
}
.why .btn-ribbon { margin-top: 30px; }
.why-img-wrap { display: flex; justify-content: center; }
.why-img {
  width: clamp(15rem, 35vw, 25rem); aspect-ratio: 1/1; object-fit: cover; border-radius: 50%;
  border: 3px solid var(--gold-primary); outline: 1px solid rgba(232,212,139,0.4); outline-offset: 6px;
  box-shadow: 0 0 50px rgba(197,160,40,0.15);
  transition: transform 600ms cubic-bezier(0.22,1,0.36,1), box-shadow 600ms ease;
}
.why-img:hover { transform: scale(1.03) rotate(2deg); box-shadow: 0 0 70px rgba(197,160,40,0.3); }

/* ═══════════ LOCK 15 · CHAPTER 04 DUAL TAB + BOARDING PASS 3D ═══════════ */
.tab-bar { display: flex; justify-content: center; gap: 8px; margin-bottom: 44px; flex-wrap: wrap; }
.tab-btn {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-small); letter-spacing: 1.5px;
  color: var(--pearl-muted); opacity: 0.6; padding: 16px 30px; border-bottom: 3px solid transparent;
  transition: color 300ms ease, opacity 300ms ease, border-color 300ms ease, background 300ms ease;
}
.tab-btn:hover { opacity: 0.85; color: var(--gold-light); }
.tab-btn.active { color: var(--gold-primary); opacity: 1; border-bottom-color: var(--gold-primary); background: rgba(197,160,40,0.1); font-weight: 700; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tab-in 400ms ease; }
@keyframes tab-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.bp-scene { perspective: 1200px; max-width: 760px; margin-inline: auto; }
.bp-inner { display: grid; transform-style: preserve-3d; }
.bp-face { grid-area: 1 / 1; width: 100%; border-radius: 24px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bp-back { transform: rotateY(180deg); }

@media (min-width: 577px) {
  .bp-inner { transition: transform 1000ms cubic-bezier(0.4, 0.0, 0.2, 1); min-height: 600px; }
  .bp-inner.flipped { transform: rotateY(180deg); }
}
@media (max-width: 576px) {
  .bp-scene { perspective: 800px; overflow: hidden; border-radius: 24px; }
  .bp-front, .bp-back { transition: transform 800ms ease; }
  .bp-back { transform: translateY(101%); }
  .bp-inner.flipped .bp-front { transform: translateY(-101%); }
  .bp-inner.flipped .bp-back { transform: translateY(0); }
}

.bp-face {
  background: linear-gradient(165deg, var(--obsidian-elev-2), var(--obsidian-elev-1) 60%, var(--obsidian-base));
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 8px 16px rgba(0,0,0,0.26), 0 16px 32px rgba(0,0,0,0.22), 0 32px 64px rgba(0,0,0,0.2), 0 0 0 1px rgba(197,160,40,0.35), 0 0 30px rgba(197,160,40,0.08);
}
.bp-inner { border-radius: 24px; position: relative; }
.bp-inner::before {
  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 2px;
  background: var(--royal-gradient); z-index: 5; pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.bp-holo {
  position: absolute; inset: -60%; z-index: 4; pointer-events: none; opacity: 0.5;
  background: linear-gradient(115deg, transparent 42%, rgba(255,248,231,0.08) 48%, rgba(197,160,40,0.14) 50%, rgba(255,248,231,0.08) 52%, transparent 58%);
  animation: holo-sweep 6s linear infinite;
}
@keyframes holo-sweep { from { transform: translateX(-30%); } to { transform: translateX(30%); } }

.bp-pad { padding: 30px 34px; }
.bp-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bp-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 2px; color: var(--gold-primary); font-size: 1rem; }
.bp-brand i { margin-right: 8px; }
.bp-flight { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-small); color: var(--pearl-muted); }
.bp-meta { display: flex; flex-direction: column; gap: 10px; }
.bm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bm-big { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--gold-light); letter-spacing: 2px; }
.bm-cell { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--pearl-muted); }
.bm-cell b { color: var(--gold-light); font-weight: 700; }
.bm-class { color: var(--gold-primary); letter-spacing: 3px; font-weight: 700; font-size: var(--fs-micro); }

.bp-photo { position: relative; margin: 24px 0 0; }
.bp-photo img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
.bp-photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,0.72) 0%, rgba(10,10,12,0.25) 40%, rgba(10,10,12,0.78) 100%); }
.bp-price-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; padding: 16px 30px; border: 2px dashed var(--gold-primary); border-radius: 14px;
  background: rgba(10,10,12,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; gap: 8px; max-width: 86%;
}
.bp-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.1rem); color: var(--gold-whisper); white-space: nowrap; }
.bp-price small { font-size: 0.5em; color: var(--gold-light); font-weight: 400; }
.bp-chip {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-micro); letter-spacing: 1px;
  color: var(--obsidian-base); background: var(--royal-gradient); border-radius: 30px; padding: 6px 14px; text-transform: uppercase;
}
.bp-route { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; }
.rt-code { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: var(--gold-whisper); display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.rt-code small { font-family: var(--font-ui); font-weight: 400; font-size: 10px; letter-spacing: 2px; color: var(--pearl-muted); text-transform: uppercase; margin-top: 4px; }
.rt-line { flex: 0 1 130px; display: flex; align-items: center; gap: 6px; color: var(--gold-primary); }
.rt-line::before, .rt-line::after { content: ""; flex: 1; border-top: 2px dashed rgba(197,160,40,0.5); }
.rt-line i { transform: rotate(0deg); font-size: 15px; }

.bp-stub { display: flex; justify-content: center; padding-top: 24px; padding-bottom: 20px; }
.bp-perf { display: flex; justify-content: space-between; padding: 0 28px 6px; }
.bp-perf span { width: 6px; height: 6px; border-radius: 50%; background: rgba(197,160,40,0.45); transition: transform 150ms ease; }
.bp-barcode {
  height: 34px; margin: 8px 30px 26px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--gold-light) 0 2px, transparent 2px 5px, var(--gold-light) 5px 6px, transparent 6px 11px, var(--gold-light) 11px 14px, transparent 14px 17px);
  opacity: 0.7;
}
/* SIGNATURE #3 · THE TEAR-OFF */
.bp-front:hover .bp-perf span { transform: translateX(4px); }
.bp-front:hover .bp-price-box { animation: price-shake 200ms ease 3; }
.bp-front:hover .bp-barcode { animation: barcode-flash 150ms ease 2; }
.bp-front:hover .bp-holo { animation-duration: 100ms; }
@keyframes price-shake { 0%,100% { transform: translate(-50%, -50%); } 25% { transform: translate(calc(-50% - 2px), -50%); } 75% { transform: translate(calc(-50% + 2px), -50%); } }
@keyframes barcode-flash { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

.bp-back .bp-pad { padding: 34px; }
.bp-back-head { font-family: var(--font-display); font-weight: 700; color: var(--gold-primary); letter-spacing: 2px; font-size: var(--fs-h3); margin-bottom: 22px; text-align: center; }
.bp-block { margin-bottom: 20px; }
.bp-block h4 { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-small); letter-spacing: 1.5px; color: var(--gold-light); margin-bottom: 12px; text-transform: uppercase; }
.bp-block h4 i { margin-right: 8px; }
.bp-list { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.bp-list li {
  font-family: var(--font-body); font-size: var(--fs-small); color: var(--pearl-soft);
  background: rgba(197,160,40,0.06); border: 1px solid rgba(197,160,40,0.18);
  padding: 7px 14px; border-radius: 30px;
}
.bp-list.stars li::before { content: "\f005"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold-primary); margin-right: 7px; font-size: 0.8em; }
.bp-list.dots li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); margin-right: 8px; vertical-align: middle; }
.bp-block.inc { background: var(--jade-tint); border-left: 3px solid var(--jade); border-radius: 10px; padding: 16px 18px; }
.bp-block.inc h4 { color: var(--jade); }
.bp-list.check li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--jade); margin-right: 7px; font-size: 0.8em; }
.bp-block.exc { background: var(--ruby-tint); border-left: 3px solid var(--ruby); border-radius: 10px; padding: 16px 18px; }
.bp-block.exc h4 { color: var(--ruby); }
.bp-list.cross li::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--ruby); margin-right: 7px; font-size: 0.8em; }
.bp-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* Caption Parchment */
.caption-box {
  max-width: 760px; margin: 40px auto 0;
  background: rgba(197,160,40,0.03); border: 1px dashed rgba(197,160,40,0.2); border-radius: 12px;
  padding: 24px; position: relative;
}
.caption-content {
  font-family: var(--font-editorial); font-style: italic; font-size: var(--fs-body); color: var(--pearl-soft);
  line-height: 1.9; max-height: 4.5em; overflow: hidden; position: relative;
  transition: max-height 400ms ease;
}
.caption-content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
  background: linear-gradient(180deg, transparent, var(--obsidian-base));
  transition: opacity 300ms ease;
}
.caption-box.open .caption-content { max-height: 40em; }
.caption-box.open .caption-content::after { opacity: 0; }
.caption-toggle {
  margin-top: 14px; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-small);
  color: var(--gold-primary); letter-spacing: 1px; display: inline-flex; gap: 8px; align-items: center;
}
.caption-toggle .ct-close { display: none; }
.caption-box.open .ct-open { display: none; }
.caption-box.open .ct-close { display: inline-flex; gap: 8px; align-items: center; }

/* ═══════════ LOCK 23 · 7-LAYER 3D CARDS ═══════════ */
.l7-card {
  position: relative; background: var(--obsidian-elev-2); border-radius: 24px; padding: 32px; overflow: hidden;
  border: 1px solid rgba(197,160,40,0.12);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 8px 12px rgba(0,0,0,0.24), 0 16px 24px rgba(0,0,0,0.2), 0 32px 40px rgba(0,0,0,0.15);
  transition: transform 500ms ease, box-shadow 400ms ease, border-color 400ms ease;
  will-change: transform;
}
.l7-card::before { /* L3 gold accent line */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px;
  background: var(--royal-gradient); opacity: 0.8;
}
.l7-card::after { /* L4 shimmer sweep */
  content: ""; position: absolute; inset: -80%; pointer-events: none;
  background: linear-gradient(115deg, transparent 44%, rgba(232,212,139,0.07) 50%, transparent 56%);
  animation: holo-sweep 6s linear infinite;
}
.l7-card { box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 8px 12px rgba(0,0,0,0.24), 0 16px 24px rgba(0,0,0,0.2), 0 32px 40px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05); }
.l7-card:hover { border-color: rgba(197,160,40,0.3); box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 8px 12px rgba(0,0,0,0.26), 0 16px 28px rgba(0,0,0,0.24), 0 32px 48px rgba(0,0,0,0.2), 0 0 34px rgba(197,160,40,0.22), inset 0 1px 0 rgba(255,255,255,0.05); }
.card-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(197,160,40,0.12), transparent 60%);
  opacity: 0; transition: opacity 300ms ease;
}
.l7-card:hover .card-shine { opacity: 1; }

/* ═══════════ LOCK 16 · TRUST PAVILION ═══════════ */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trust-card { text-align: center; }
.tc-icon { font-size: 42px; color: var(--gold-primary); display: block; margin-bottom: 20px; filter: drop-shadow(0 0 12px rgba(197,160,40,0.4)); }
.tc-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--gold-light); margin-bottom: 12px; }
.tc-desc { font-family: var(--font-body); font-size: 0.95rem; color: var(--pearl-muted); }

/* ═══════════ LOCK 17 · STATS ═══════════ */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat { padding: 40px 16px; border-radius: 24px; background: rgba(197,160,40,0.03); border: 1px solid rgba(197,160,40,0.12); }
.stat i { font-size: 30px; color: var(--gold-primary); margin-bottom: 16px; display: block; }
.stat-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--gold-primary); line-height: 1.1; }
.stat-static { letter-spacing: 2px; }
.stat-label { display: block; margin-top: 10px; font-family: var(--font-body); font-size: var(--fs-small); color: var(--pearl-muted); }

/* ═══════════ LOCK 18 · GALERI + IG ═══════════ */
.gallery-sub { font-family: var(--font-editorial); font-style: italic; font-size: var(--fs-body); color: var(--pearl-muted); margin-top: 14px; }
.showcase-fig { margin: 0 0 48px; border-radius: 24px; overflow: hidden; border: 2px solid rgba(197,160,40,0.3); position: relative; box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.showcase-fig img { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; }
.showcase-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 26px;
  background: linear-gradient(180deg, transparent, rgba(5,5,7,0.9));
  font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-small); color: var(--gold-pale); letter-spacing: 1px;
}
.showcase-fig figcaption i { color: var(--gold-primary); margin-right: 8px; }

.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; justify-items: center; }
.ig-frame {
  position: relative; width: 100%; max-width: 480px;
  border-radius: 28px; padding: 28px;
  background: linear-gradient(160deg, rgba(197,160,40,0.07), var(--obsidian-elev-1) 40%, rgba(197,160,40,0.04));
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px transparent, 0 20px 50px rgba(0,0,0,0.4);
}
.ig-frame::before {
  content: ""; position: absolute; inset: 0; border-radius: 28px; padding: 2px;
  background: var(--royal-gradient); pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ig-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-micro); letter-spacing: 2px; text-transform: uppercase;
  color: var(--obsidian-base); background: var(--royal-gradient); padding: 7px 16px; border-radius: 30px;
}
.ig-zone { position: relative; min-height: 480px; border-radius: 14px; overflow: hidden; }
.ig-skeleton {
  position: absolute; inset: 0; z-index: 2; border-radius: 14px;
  background: linear-gradient(120deg, var(--obsidian-elev-2) 30%, var(--obsidian-elev-3) 45%, var(--obsidian-elev-2) 60%);
  background-size: 220% 220%; animation: skel 1.2s linear infinite;
  display: flex; align-items: center; justify-content: center;
}
.ig-skeleton::after { content: "\f16d"; font-family: "Font Awesome 6 Brands"; font-size: 44px; color: rgba(197,160,40,0.4); }
@keyframes skel { from { background-position: 200% 200%; } to { background-position: -20% -20%; } }
.ig-frame.ig-loaded .ig-skeleton { opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
.ig-zone .instagram-media { margin: 0 auto !important; min-width: 0 !important; width: calc(100% - 2px) !important; max-width: 100% !important; border-radius: 14px !important; }
.ig-zone iframe { border-radius: 14px !important; border: 0 !important; }
.ig-zone { background: var(--obsidian-elev-1); }
.ig-fallback {
  display: none; margin-top: 16px; justify-content: center; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-small); color: var(--gold-primary);
  border: 1px dashed rgba(197,160,40,0.4); border-radius: 12px; padding: 14px;
}
.ig-frame.ig-fail .ig-fallback { display: flex; }
.ig-frame.ig-fail .ig-skeleton { opacity: 0.35; animation: none; }
.gallery-note { margin-top: 24px; text-align: center; font-family: var(--font-body); font-size: var(--fs-small); color: rgba(255,255,255,0.5); }
.gallery-note i { color: var(--gold-primary); margin-right: 8px; }

/* REELS VIDEO EMBED (potret, centered) */
.reels-head {
  text-align: center; font-family: var(--font-accent); font-weight: 400;
  font-size: var(--fs-eyebrow); letter-spacing: 6px; text-transform: uppercase;
  color: var(--gold-primary); margin: 56px 0 26px;
}
.ig-reels-row { display: flex; justify-content: center; }
.ig-reels { width: 100%; max-width: 480px; }
.ig-reels .ig-zone { min-height: 700px; }
.ig-reels .ig-skeleton::after { content: "\f04b"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.ig-fallback-thumb {
  width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
  border: 1px solid rgba(197,160,40,0.35); flex-shrink: 0;
}

/* ═══════════ LOCK 19 · TESTIMONI LETTERS ═══════════ */
.letters-scroller {
  display: flex; gap: 26px; overflow-x: auto; padding: 20px 6px 34px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.letter-card { flex: 0 0 min(400px, 86vw); scroll-snap-align: center; perspective: 800px; }
.letter-card:nth-child(odd) { transform: rotate(1deg); }
.letter-card:nth-child(even) { transform: rotate(-1deg); }
.letter-inner { display: grid; transform-style: preserve-3d; transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1); }
@media (hover: hover) and (min-width: 1024px) {
  .letter-card:hover .letter-inner { transform: rotateY(180deg); }
}
.letter-face {
  grid-area: 1 / 1; border-radius: 4px; padding: 40px 30px 30px; min-height: 250px;
  background: linear-gradient(170deg, rgba(255,248,230,0.045), rgba(255,248,230,0.02));
  border: 1px solid rgba(197,160,40,0.15);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; position: relative;
}
.letter-back-face { transform: rotateY(180deg); align-items: center; justify-content: center; gap: 22px; }
.wax-seal {
  position: absolute; top: -10px; right: -10px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold-deep) 60%, var(--gold-shadow));
  display: flex; align-items: center; justify-content: center; color: var(--gold-void); font-size: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 -3px 6px rgba(0,0,0,0.3);
}
.letter-front::before {
  content: "\201C"; position: absolute; top: 6px; left: 16px;
  font-family: var(--font-editorial); font-size: 4rem; color: var(--gold-primary); opacity: 0.15; line-height: 1;
}
.lt-text { font-family: var(--font-editorial); font-style: italic; font-size: 1.02rem; line-height: 1.8; color: var(--pearl-soft); margin: 18px 0 auto; }
.lt-meta { margin-top: 24px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(197,160,40,0.18); padding-top: 14px; }
.lt-meta b { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-small); color: var(--gold-light); letter-spacing: 1px; }
.lt-meta span { font-family: var(--font-body); font-size: var(--fs-micro); color: var(--pearl-ghost); letter-spacing: 2px; text-transform: uppercase; }
.lt-stars { display: flex; gap: 8px; font-size: 22px; color: var(--gold-primary); filter: drop-shadow(0 0 8px rgba(197,160,40,0.6)); }
.verified {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 600;
  font-size: var(--fs-micro); letter-spacing: 2px; text-transform: uppercase;
  color: var(--jade); border: 1px solid rgba(39,174,96,0.5); padding: 8px 18px; border-radius: 30px;
}

/* ═══════════ LOCK 20 · FAQ ═══════════ */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { border: 1px solid rgba(197,160,40,0.16); border-radius: 16px; background: var(--obsidian-elev-1); overflow: hidden; transition: border-color 300ms ease; }
.faq-item.open { border-color: rgba(197,160,40,0.45); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 22px 26px; text-align: left;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-body); color: var(--gold-primary);
}
.faq-q i { color: var(--gold-primary); font-size: 14px; transition: transform 350ms ease; flex-shrink: 0; }
.faq-item.open .faq-q i { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 400ms ease; }
.faq-a-inner { padding: 0 26px 24px; }
.faq-a-inner p { font-family: var(--font-body); font-size: var(--fs-small); color: rgba(255,255,255,0.75); }

/* ═══════════ LOCK 21 · OWNER + BRANDS ═══════════ */
.owner-card {
  position: relative; max-width: 900px; margin: 0 auto 72px;
  border-radius: 24px; padding: 46px 40px 40px;
  background: linear-gradient(170deg, var(--obsidian-elev-1), var(--obsidian-base));
  box-shadow: 0 0 60px rgba(197,160,40,0.12), 0 24px 60px rgba(0,0,0,0.5);
  border: 1px solid rgba(197,160,40,0.25);
}
.owner-card::before { /* heraldic gradient frame */
  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 8px; pointer-events: none;
  background: var(--royal-gradient); opacity: 0.5;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.oc-corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--gold-primary); z-index: 2; }
.c-tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.c-tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.c-bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.c-br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.oc-crown {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; background: var(--obsidian-elev-2);
  border: 2px solid var(--gold-primary); display: flex; align-items: center; justify-content: center;
  color: var(--gold-primary); font-size: 20px; animation: crown-pulse 3s ease-in-out infinite;
  box-shadow: 0 0 22px rgba(197,160,40,0.4);
}
.oc-grid { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; position: relative; z-index: 1; }
.oc-photo-frame {
  position: relative; border-radius: 16px; padding: 6px; background: var(--royal-gradient);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 30px rgba(197,160,40,0.2);
  transition: transform 200ms ease-out; will-change: transform;
}
.oc-photo {
  width: 280px; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; display: block;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.4); will-change: transform;
}
.oc-info { text-align: center; }
.engrave { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; will-change: transform; }
.engrave-text {
  font-family: var(--font-accent); font-size: 40px; letter-spacing: 3px;
  fill: var(--gold-pale); fill-opacity: 0;
  stroke: var(--gold-deep); stroke-width: 0.8;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
}
.owner-card.in .engrave-text { animation: engrave-stroke 1.5s ease forwards, engrave-fill 0.8s ease 1.2s forwards; }
@keyframes engrave-stroke { to { stroke-dashoffset: 0; } }
@keyframes engrave-fill { to { fill-opacity: 1; } }
.oc-title-plate {
  margin-top: 8px; font-family: var(--font-ui); font-weight: 500; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(197,160,40,0.8);
}
.oc-sep { display: block; width: 60px; height: 1px; background: var(--gold-primary); margin: 16px auto; }
.oc-desc { font-family: var(--font-editorial); font-style: italic; font-size: 1.05rem; color: var(--pearl-soft); line-height: 1.7; max-width: 560px; margin-inline: auto; }
.oc-actions { display: flex; justify-content: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }

.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.brand-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.brand-card.featured {
  transform: scale(1.03); border: 2px solid var(--gold-primary);
  background: var(--obsidian-elev-1); box-shadow: 0 0 40px rgba(197,160,40,0.2), 0 24px 50px rgba(0,0,0,0.4);
}
.bc-badge {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-micro); letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold-primary); background: rgba(197,160,40,0.2); border-radius: 30px; padding: 6px 16px; margin-bottom: 20px;
}
.bc-here {
  position: absolute; top: 18px; right: 18px; margin: 0;
  color: var(--obsidian-base); background: var(--gold-primary); font-weight: 700;
  animation: here-pulse 2s ease-in-out infinite;
}
@keyframes here-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(197,160,40,0.55); } 50% { box-shadow: 0 0 0 10px rgba(197,160,40,0); } }
.bc-logo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-primary); margin-bottom: 16px; background: var(--obsidian-void); }
.bc-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 1.5px; color: var(--gold-light); }
.bc-key { font-family: var(--font-accent); font-size: var(--fs-micro); letter-spacing: 3px; text-transform: uppercase; color: var(--pearl-ghost); margin: 8px 0 16px; }
.bc-desc { font-family: var(--font-body); font-size: var(--fs-small); color: var(--pearl-muted); line-height: 1.75; margin-bottom: 24px; }
.bc-link { margin-top: auto; }

.contact-block { text-align: center; margin-top: 84px; }
.contact-block h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--gold-pale); margin-bottom: 14px; }
.contact-block p { font-family: var(--font-body); font-size: var(--fs-body); color: var(--pearl-muted); max-width: 520px; margin: 0 auto 30px; }
.social-row { display: flex; justify-content: center; gap: 24px; margin-top: 34px; }
.social-row a {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(197,160,40,0.4); color: var(--gold-primary); font-size: 20px;
  transition: transform 300ms ease, background 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.social-row a:hover { transform: translateY(-4px) scale(1.08); background: var(--gold-primary); color: var(--obsidian-base); box-shadow: 0 0 26px rgba(197,160,40,0.5); }

/* ═══════════ LOCK 22 · MEGA FOOTER ═══════════ */
#footer { position: relative; background: var(--obsidian-elev-1); border-top: 1px solid rgba(197,160,40,0.2); padding-top: 80px; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 48px; position: relative; z-index: 2; }
.f-brand-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.f-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-primary); }
.f-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--gold-primary); }
.f-tagline { font-family: var(--font-editorial); font-style: italic; font-size: 1.05rem; color: var(--gold-light); margin-bottom: 10px; }
.f-tagline i { font-size: 0.85em; }
.f-line { font-family: var(--font-body); font-size: var(--fs-small); color: var(--pearl-muted); }
.f-est { margin-top: 10px; font-family: var(--font-ui); font-size: var(--fs-micro); letter-spacing: 2px; color: var(--pearl-ghost); }
.f-head { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-micro); letter-spacing: 3px; color: var(--gold-primary); margin-bottom: 18px; }
.f-col nav, .f-col a.f-contact { display: block; }
.f-col a { display: block; font-family: var(--font-body); font-size: var(--fs-small); color: var(--pearl-muted); padding: 5px 0; transition: color 250ms ease, transform 250ms ease; }
.f-col a:hover { color: var(--gold-light); transform: translateX(4px); }
.f-contact { display: flex !important; align-items: center; gap: 10px; }
.f-contact i { color: var(--gold-primary); width: 16px; }
p.f-contact { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--pearl-muted); padding: 5px 0; }
.f-social { display: flex; gap: 14px; margin-bottom: 22px; }
.f-social a {
  width: 42px; height: 42px; border-radius: 50%; display: flex !important; align-items: center; justify-content: center;
  border: 1.5px solid rgba(197,160,40,0.35); color: var(--gold-primary) !important; font-size: 16px; padding: 0 !important;
  transition: transform 300ms ease, background 300ms ease, color 300ms ease;
}
.f-social a:hover { background: var(--gold-primary); color: var(--obsidian-base) !important; transform: translateY(-3px) !important; }
.f-divider { height: 1px; background: linear-gradient(90deg, var(--gold-primary), transparent); margin-bottom: 22px; }
.f-brand-link { display: flex !important; align-items: center; gap: 10px; }
.f-brand-link i { color: var(--gold-primary); }
.foot-divider { height: 1px; margin-top: 64px; background: linear-gradient(90deg, transparent, var(--gold-primary), transparent); position: relative; z-index: 2; }
.foot-marquee { overflow: hidden; white-space: nowrap; padding: 18px 0; position: relative; z-index: 2; }
.foot-marquee .mq-set { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-small); letter-spacing: 4px; text-transform: uppercase; color: rgba(197,160,40,0.55); }
.foot-credit {
  text-align: center; padding: 20px 16px 26px; position: relative; z-index: 2;
  font-family: var(--font-body); font-size: var(--fs-small); color: var(--pearl-muted);
}
.fc-brand { font-family: var(--font-display); font-weight: 600; color: var(--gold-primary); }
.fc-orn { color: var(--gold-primary); }
.fc-yx { font-family: var(--font-ui); font-weight: 700; color: var(--gold-primary); letter-spacing: 1px; }
.fc-yx:hover { color: var(--gold-whisper); }

/* ═══════════ LOCK 24 · FLOATS · PALETTE · TOAST · BARS ═══════════ */
#wa-float {
  position: fixed; bottom: 32px; right: 32px; z-index: 9500;
  width: 60px; height: 60px; border-radius: 50%; background: var(--whatsapp);
  display: flex; align-items: center; justify-content: center; color: var(--pearl); font-size: 26px;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4);
  animation: wa-pulse 2s ease-in-out infinite;
}
@keyframes wa-pulse { 0%,100% { box-shadow: 0 8px 24px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.45); } 50% { box-shadow: 0 8px 24px rgba(37,211,102,0.4), 0 0 0 20px rgba(37,211,102,0); } }
.wa-tip {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%) translateX(6px);
  background: var(--obsidian-elev-3); color: var(--pearl-soft); font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}
#wa-float:hover .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
#to-top {
  position: fixed; bottom: 96px; right: 38px; z-index: 9500;
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--gold-primary);
  background: var(--obsidian-glass); color: var(--gold-primary); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity 300ms ease, transform 300ms ease;
}
#to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
#to-top:hover { background: var(--gold-primary); color: var(--obsidian-base); }

#palette-overlay {
  position: fixed; inset: 0; z-index: 9499; background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 250ms ease;
}
#palette-overlay.is-open { opacity: 1; pointer-events: auto; }
#palette {
  position: fixed; top: 14vh; left: 50%; transform: translateX(-50%) translateY(-14px);
  width: min(500px, calc(100vw - 32px)); z-index: 9500;
  background: var(--obsidian-elev-2); border: 1px solid rgba(197,160,40,0.4); border-radius: 16px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 40px rgba(197,160,40,0.12);
  opacity: 0; pointer-events: none; transition: opacity 250ms ease, transform 250ms ease;
  overflow: hidden;
}
#palette.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.pal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(197,160,40,0.2); }
.pal-head i { color: var(--gold-primary); }
#pal-input {
  flex: 1; background: transparent; border: 0; outline: none;
  font-family: var(--font-ui); font-size: 15px; color: var(--pearl);
}
#pal-input::placeholder { color: var(--pearl-ghost); }
.pal-esc { font-family: var(--font-ui); font-size: 10px; font-weight: 700; color: var(--pearl-ghost); border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; padding: 3px 7px; }
.pal-recent { padding: 10px 18px 0; display: none; }
.pal-recent.has { display: block; }
.pal-cat { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pearl-ghost); padding: 8px 4px 6px; }
#pal-list { max-height: 320px; overflow-y: auto; padding: 6px 10px 12px; }
.pal-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 10px;
  font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--pearl-soft);
  transition: background 150ms ease;
}
.pal-item i { color: var(--gold-primary); width: 18px; text-align: center; }
.pal-item .pal-kbd { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--gold-primary); border: 1px solid rgba(197,160,40,0.4); border-radius: 5px; padding: 2px 8px; }
.pal-item.active, .pal-item:hover { background: rgba(197,160,40,0.1); }

#shortcut-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 7000;
  background: var(--obsidian-void); border-top: 1px solid rgba(197,160,40,0.14);
  font-family: var(--font-ui); font-size: 10px; color: var(--pearl-ghost); letter-spacing: 1px;
  padding: 6px 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  transition: opacity 400ms ease;
}
#shortcut-bar i { color: var(--gold-primary); margin-right: 4px; }
#shortcut-bar.faded { opacity: 0.25; }
.kbd-hint { color: var(--gold-light); display: inline-flex; align-items: center; gap: 8px; }
.kbd-hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-primary); animation: hint-pulse 1.6s ease-in-out infinite; }
.kbd-hint.gone { display: none; }
@keyframes hint-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
.kbd-hint b { color: var(--gold-primary); border: 1px solid rgba(197,160,40,0.5); border-radius: 4px; padding: 0 6px; }

#toast-box { position: fixed; top: 96px; right: 24px; z-index: 9500; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--obsidian-elev-2); border: 1px solid rgba(197,160,40,0.45); border-radius: 14px;
  padding: 14px 20px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--pearl-soft);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  transform: translateX(120%); transition: transform 450ms cubic-bezier(0.22,1,0.36,1);
  max-width: 320px;
}
.toast.in { transform: translateX(0); }
.toast i { color: var(--gold-primary); font-size: 18px; }
.toast-achieve { background: linear-gradient(135deg, var(--gold-deep), var(--gold-primary)); border-color: var(--gold-light); color: var(--obsidian-base); font-weight: 700; }
.toast-achieve i { color: var(--obsidian-base); }

#confetti-box { position: fixed; inset: 0; z-index: 9498; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: confetti-fall 2s ease-in forwards; }
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ═══════════ RESPONSIVE 4-DEVICE ═══════════ */
@media (max-width: 1439px) {
  .chapter { padding: 100px 0; }
}
@media (min-width: 481px) and (max-width: 1023px) {
  .chapter { padding: 80px 0; }
  .hero { min-height: 90vh; }
  .why-grid { grid-template-columns: 1fr; gap: 44px; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .brand-card.featured { transform: none; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  #drawer { width: 340px; }
  .nav-inner { padding: 12px 24px; }
  #light-orb { width: 150px; height: 150px; filter: blur(40px); opacity: 0.03; }
  .oc-grid { grid-template-columns: 1fr; justify-items: center; }
  .oc-photo { width: 240px; }
}
@media (max-width: 576px) {
  .trust-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .chapter { padding: 60px 0; }
  .hero { min-height: 85vh; }
  .nameplate { letter-spacing: 0.05em; }
  .nav-inner { padding: 10px 16px; }
  .nav-logo { width: 36px; height: 36px; }
  .nav-name { display: none; }
  #drawer { width: 85vw; }
  #light-orb { display: none; }
  #wa-float { right: 16px; bottom: 24px; width: 54px; height: 54px; }
  #to-top { right: 19px; bottom: 88px; }
  .pillars { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .foot-grid { grid-template-columns: 1fr; gap: 36px; }
  .bp-pad { padding: 22px 20px; }
  .bp-actions { justify-content: center; }
  .bp-photo img { aspect-ratio: 4/3; }
  .bp-barcode { margin-inline: 20px; }
  .tab-btn { padding: 14px 16px; }
  .letters-scroller { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .letter-card { flex: none; }
  .hero-desc { letter-spacing: 3px; gap: 10px; }
  .oc-photo { width: 200px; }
  .oc-actions .btn { width: 100%; }
  #shortcut-bar .sb-text { display: none; }
  .sc-text { letter-spacing: 2px; }
}

/* ═══════════ REDUCED MOTION · PRINT ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .np-letter { opacity: 1; transform: none; }
  .revealable { opacity: 1; transform: none; }
}
@media print {
  #navbar, #drawer, #drawer-backdrop, #cine-loader, #plane-cursor, .trail-dot, #light-orb,
  #wa-float, #to-top, #palette, #palette-overlay, #shortcut-bar, #toast-box, #confetti-box,
  .ch-bg, .hero-bg, .marquee-zone, .foot-marquee, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
  .chapter { padding: 24px 0; }
}