/* ═══════════════════════════════════════════════════════════════════════════
   HOOKOOM GLOBAL STYLES
   Shared across all pages: index, creators, hotels, etc.
   Each page links this file then adds its own <style> block for page-
   specific rules only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  --mid:               #0D0D0B;
  --warm:              #F2F1EE;
  --ember:             #BF5835;
  --brass:             #D4A853;
  --linen:             #FAFAF8;
  --stone:             #EDE4DF;
  --pebble:            #D4D1CB;
  --ink:               #0D0D1A;
  --ink2:              #6B6965;
  --ink3:              #A8A59F;
  --r8:                8px;
  --r12:               12px;
  --r16:               16px;
  --r24:               24px;
  --r32:               32px;
  --r48:               48px;
  --ease:              cubic-bezier(.22, 1, .36, 1);
  --ease-m3-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --ease-m3-standard:  cubic-bezier(0.2, 0.0, 0, 1.0);
  --spring:            cubic-bezier(.34, 1.56, .64, 1)
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden
}

body {
  min-width: 320px;
  background: var(--warm);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

a {
  text-decoration: none;
  color: inherit
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  outline: none
}

input,
textarea {
  font: inherit
}

img {
  max-width: 100%;
  display: block;
  transition: transform 0.4s ease
}

img:hover {
  transform: scale(1.03)
}

::selection {
  background: rgba(255, 77, 0, .15)
}

/* ─── PROGRESS BAR ───────────────────────────────────────────────────────── */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ember);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 1001;
  pointer-events: none
}

/* ─── NAVIGATION ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition:
    background .4s,
    padding .4s,
    border-color .4s,
    transform .35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity .35s cubic-bezier(0.4, 0, 0.2, 1)
}

/* Hide nav when user scrolls to very bottom (index.html behaviour) */
.nav.nav-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none
}

.nav.s {
  background: rgba(245, 240, 232, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 14px 48px;
  border-bottom: 1px solid var(--pebble)
}

.nav-logo {
  display: flex;
  align-items: center
}

.nav-logo img {
  height: 34px;
  width: auto;
  transition: filter .4s;
  filter: brightness(0) invert(1)
}

.nav.s .nav-logo img,
body:has(.mob.on) .nav-logo img {
  filter: none
}

.nav-mid {
  display: flex;
  gap: 2px;
  background: rgba(250, 250, 248, .1);
  border: 1px solid rgba(250, 250, 248, .18);
  border-radius: var(--r32);
  padding: 4px;
  transition: all .4s
}

.nav.s .nav-mid {
  background: var(--stone);
  border-color: var(--pebble)
}

.nav-mid a {
  font-size: 14px;
  font-weight: 400;
  color: rgba(250, 250, 248, .75);
  padding: 8px 18px;
  border-radius: 28px;
  transition: all .18s
}

.nav.s .nav-mid a {
  color: var(--ink2)
}

.nav-mid a:hover {
  background: rgba(250, 250, 248, .15);
  color: var(--linen)
}

.nav.s .nav-mid a:hover {
  background: var(--ink);
  color: var(--linen)
}

.nav-mid a.active {
  background: var(--ember);
  color: var(--linen);
  font-weight: 500
}

.nav.s .nav-mid a.active {
  background: var(--ember);
  color: var(--linen)
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  background: var(--ember);
  color: var(--linen);
  padding: 11px 28px;
  border-radius: var(--r32);
  letter-spacing: -.01em;
  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    background .22s var(--ease)
}

.nav-cta:hover {
  background: #cf613b;
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(191, 88, 53, .3)
}

.nav-burg {
  display: none;
  padding: 10px;
  background: transparent
}

.nav-burg span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--linen);
  border-radius: 2px;
  margin-bottom: 5px;
  transition: background .3s
}

.nav-burg span:last-child {
  margin: 0
}

.nav.s .nav-burg span {
  background: var(--ink)
}

/* ─── MOBILE MENU ────────────────────────────────────────────────────────── */
.mob {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(245, 240, 232, .97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 800;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px
}

.mob.on {
  display: flex
}

.mob a {
  font-size: 22px;
  font-weight: 200;
  color: var(--ink);
  letter-spacing: -.02em;
  transition: color .16s
}

.mob a:hover {
  color: var(--ember)
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: var(--r32);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    background .22s var(--ease),
    border-color .22s var(--ease)
}

.btn-primary {
  background: var(--ember);
  color: var(--linen);
  box-shadow: 0 14px 32px rgba(191, 88, 53, .22)
}

.btn-primary:hover {
  transform: translateY(-1px);
  background: #cf613b;
  box-shadow: 0 18px 38px rgba(191, 88, 53, .3)
}

.btn-ghost {
  color: var(--linen);
  border: 1px solid rgba(250, 250, 248, .28);
  background: rgba(13, 13, 26, .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px)
}

.btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(250, 250, 248, .5);
  background: rgba(250, 250, 248, .1)
}

/* ─── SECTION LAYOUT ─────────────────────────────────────────────────────── */
/* Used by creators/hotels pages */
.section {
  position: relative;
  padding: 100px 0
}

.section-dark  { background: var(--mid); color: var(--linen) }
.section-light { background: #FAFAF8; color: var(--ink) }
.section-warm  { background: #ECEAE6; color: var(--ink) }

/* ── Inner container: matches index.html's .prob-inner / .how-inner pattern ─ */
/* max-width 1280px, centred, horizontal padding INSIDE the constrained box   */
/* → content width = 1280 - 96 = 1184px, same as index.html inner containers */
.inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px
}

/* .wide: slightly wider variant for image-heavy sections (testimony) */
.wide {
  max-width: 1440px
}

/* Wrapper layout used by index.html sections (same box model as .inner) */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px
}

.sec    { padding: 100px 0 }
.sec-sm { padding: 72px 0 }

/* ─── SHARED TYPOGRAPHY ──────────────────────────────────────────────────── */
.eyebrow,
.mono {
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .16em
}

.eyebrow {
  color: var(--ember);
  font-size: 10px;
  font-weight: 400
}

.section-head {
  max-width: 720px;
  margin: 0 auto 62px;
  text-align: center
}

.section-head.left {
  margin-left: 0;
  text-align: left
}

.display {
  margin-top: 18px;
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 200;
  letter-spacing: -.028em;
  line-height: 1.08
}

.display em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--ember)
}

.section-copy {
  margin-top: 24px;
  color: rgba(250, 250, 248, .44);
  font-size: 16px;
  line-height: 1.8
}

.section-light .section-copy,
.section-warm .section-copy {
  color: var(--ink2)
}

/* Label / mono badge used across sections */
.lbl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink3)
}

.lbl-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ember);
  flex-shrink: 0
}

.lbl.wt {
  color: rgba(250, 250, 248, .3)
}

/* ─── SCROLL REVEAL ──────────────────────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .72s var(--ease-m3-emphasized),
    transform .72s var(--ease-m3-emphasized)
}

/* creators uses .rv.on · index uses .rv.vis — both supported */
.rv.on,
.rv.vis {
  opacity: 1;
  transform: none
}

/* Section-level data-sr reveal */
[data-sr] {
  transform: translateY(56px);
  transition: transform 0.9s var(--ease)
}

[data-sr].sr-in {
  transform: none
}

/* ─── SHARED KEYFRAMES ───────────────────────────────────────────────────── */
@keyframes pdot {
  0%,  100% { opacity: 1;   transform: scale(1) }
  50%        { opacity: .35; transform: scale(.65) }
}

/* ─── HERO BASE ──────────────────────────────────────────────────────────── */
/* Each page extends this with its own height / background / layout */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--mid);
  color: var(--linen)
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.footer {
  background: var(--mid);
  border-top: 1px solid rgba(250, 250, 248, .05);
  padding: 48px 48px 32px
}

.ft-inner {
  max-width: 1280px;
  margin: 0 auto
}

.ft-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px
}

.ft-desc {
  font-size: 13px;
  font-weight: 300;
  color: rgba(250, 250, 248, .28);
  line-height: 1.75;
  max-width: 220px;
  margin-top: 12px
}

.ft-col-h {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, .2);
  margin-bottom: 14px
}

.ft-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ft-links a,
.ft-contact-email {
  font-size: 13px;
  font-weight: 300;
  color: rgba(250, 250, 248, .34);
  transition: color .16s
}

.ft-contact-email {
  display: inline-block;
  font-size: 12px;
  margin-top: 10px
}

.ft-links a:hover,
.ft-contact-email:hover {
  color: rgba(250, 250, 248, .7)
}

.ft-social {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 2px
}

.ft-social a {
  color: rgba(250, 250, 248, .34);
  display: flex;
  align-items: center;
  transition: color .16s
}

.ft-social a:hover {
  color: rgba(250, 250, 248, .8)
}

.ft-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid rgba(250, 250, 248, .05);
  flex-wrap: wrap;
  gap: 12px
}

.ft-copy {
  font-size: 11px;
  color: rgba(250, 250, 248, .18);
  font-family: 'DM Mono', monospace;
  letter-spacing: .06em
}

.ft-legal {
  display: flex;
  gap: 18px
}

.ft-legal a {
  font-size: 11px;
  color: rgba(250, 250, 248, .18);
  font-family: 'DM Mono', monospace;
  letter-spacing: .06em;
  transition: color .16s
}

.ft-legal a:hover {
  color: rgba(250, 250, 248, .45)
}

/* ─── INDEX.HTML SECTION INNER CONTAINERS ───────────────────────────────── */
/* Same box model as .wrap but with vertical padding baked in.               */
/* Shared here so index.html doesn't repeat the identical rule 4×.          */
.prob-inner,
.how-inner,
.stakes-inner,
.about-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 48px
}

/* ─── COOKIE CONSENT ─────────────────────────────────────────────────────── */
#cookieConsent {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  background: var(--linen);
  border: 1px solid var(--pebble);
  border-radius: var(--r16);
  padding: 20px 24px;
  z-index: 99998;
  box-shadow: 0 8px 48px rgba(13, 13, 26, .13);
  display: none;
  opacity: 0
}

.cookie-inner {
  display: flex;
  align-items: center;
  gap: 20px
}

.cookie-text { flex: 1 }

.cookie-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -.01em
}

.cookie-text p {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink2);
  line-height: 1.65;
  margin: 0
}

.cookie-text a {
  color: var(--ember);
  text-decoration: underline
}

.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0
}

.cookie-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--r32);
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap
}

.cookie-decline {
  background: transparent;
  border: 1px solid var(--pebble);
  color: var(--ink2)
}

.cookie-decline:hover {
  background: var(--stone);
  color: var(--ink)
}

.cookie-accept {
  background: var(--ember);
  border: 1px solid transparent;
  color: var(--linen)
}

.cookie-accept:hover { background: #e64400 }

/* ─── EMAIL WAITLIST POPUP ───────────────────────────────────────────────── */
.ep-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 26, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 24px
}

.ep-overlay.open { display: flex }

.ep-card {
  background: rgba(250, 250, 248, .09);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(250, 250, 248, .18);
  border-radius: var(--r16);
  padding: 44px 40px 36px;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4)
}

.ep-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(250, 250, 248, .35);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  transition: color .2s
}

.ep-close:hover { color: var(--linen) }

.ep-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px
}

.ep-dot {
  width: 6px;
  height: 6px;
  background: var(--ember);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pdot 2.2s ease-in-out infinite
}

.ep-h {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 3.5vw, 30px);
  letter-spacing: -.022em;
  color: var(--linen);
  line-height: 1.18;
  margin-bottom: 12px
}

.ep-p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(250, 250, 248, .45);
  line-height: 1.75;
  margin-bottom: 26px
}

.ep-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ep-inp {
  background: rgba(250, 250, 248, .05);
  border: 1px solid rgba(250, 250, 248, .12);
  border-radius: 10px;
  color: var(--linen);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
  transition: border-color .2s;
  width: 100%;
  box-sizing: border-box
}

.ep-inp:focus { border-color: rgba(250, 250, 248, .32) }
.ep-inp::placeholder { color: rgba(250, 250, 248, .22) }

.ep-btn {
  background: var(--ember);
  color: var(--linen);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  border: none;
  border-radius: 10px;
  padding: 14px 20px;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  opacity: .45;
  width: 100%
}

.ep-btn.ready { opacity: 1 }
.ep-btn.ready:hover { transform: translateY(-1px) }

.ep-ok { text-align: center; padding: 20px 0 }

.ep-ok-ic {
  font-size: 36px;
  color: #4caf50;
  margin-bottom: 10px
}

.ep-ok-txt {
  font-size: 15px;
  font-weight: 300;
  color: rgba(250, 250, 248, .7);
  line-height: 1.6
}

.ep-sub {
  font-size: 11px;
  color: rgba(250, 250, 248, .2);
  margin-top: 16px;
  text-align: center;
  letter-spacing: .03em
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav    { padding: 14px 20px }
  .nav.s  { padding: 12px 20px }

  .nav-mid,
  .nav-cta { display: none }

  .nav-burg { display: block }

  /* Section padding (creators / hotels pages) — no horizontal, .inner handles it */
  .section  { padding: 78px 0 }

  /* Inner container mobile horizontal padding */
  .inner    { padding-left: 20px; padding-right: 20px }

  /* Wrapper + index inner containers horizontal padding on mobile */
  .wrap,
  .prob-inner,
  .how-inner,
  .stakes-inner,
  .about-inner,
  .cta-inner            { padding-left: 20px; padding-right: 20px }
  .sec, .sec-sm         { padding-top: 72px; padding-bottom: 72px }

  /* Shared typography */
  .display      { font-size: clamp(28px, 8vw, 36px) }
  .section-copy { font-size: 15px }

  /* Footer */
  .ft-grid  { grid-template-columns: 1fr; gap: 24px }
  .footer   { padding: 40px 20px 24px }
}

@media (max-width: 600px) {
  /* Full-width buttons on small phones */
  .btn { width: 100% }

  #cookieConsent { bottom: 16px; padding: 16px 18px }
  .cookie-inner { flex-direction: column; align-items: flex-start; gap: 14px }
  .cookie-actions { width: 100% }
  .cookie-btn { flex: 1; text-align: center }
}

@media (max-width: 480px) {
  .ep-card { padding: 36px 24px 28px }
}

/* ─── CUSTOM CURSOR ──────────────────────────────────────────────────── */
.custom-cursor-enabled,
.custom-cursor-enabled * {
  cursor: none !important;
}

#hookoomCursor {
  position: fixed;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(191, 88, 53, .65);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100001;
  transform: translate(-50%, -50%);
  display: none;
  transition:
    width .2s cubic-bezier(0.22, 1, 0.36, 1),
    height .2s cubic-bezier(0.22, 1, 0.36, 1),
    border-color .2s ease,
    background .2s ease,
    transform .12s ease,
    opacity .2s ease
}

#hookoomCursor::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: var(--ember);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease, opacity .2s ease
}

#hookoomCursor.cur-hover {
  width: 56px;
  height: 56px;
  border-color: var(--ember);
  background: rgba(191, 88, 53, .07)
}

#hookoomCursor.cur-hover::after {
  width: 4px;
  height: 4px;
  opacity: .55
}

#hookoomCursor.clicked {
  transform: translate(-50%, -50%) scale(0.78);
  background: rgba(191, 88, 53, .12)
}

#hookoomCursor.cur-light {
  border-color: rgba(255, 255, 255, .7)
}
#hookoomCursor.cur-light::after {
  background: #fff
}
#hookoomCursor.cur-light.cur-hover {
  border-color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .1)
}
#hookoomCursor.cur-light.clicked {
  background: rgba(255, 255, 255, .15)
}