/* ===================== TOKENS ===================== */
:root{
  --wine: #6B1E20;
  --wine-bright: #8a262a;
  --cream: #F5EDE0;
  --cream-dim: #cfc4b2;
  --gold: #C9974A;
  --gold-light: #e3c07e;
  --bg: #0b0506;
  --bg-2: #150809;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--gold); color:var(--bg); }

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

img{ max-width:100%; display:block; }

/* ===================== BACKGROUND FX ===================== */
#scene{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
}

.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(6,3,3,.55) 100%),
    linear-gradient(to bottom, rgba(6,3,3,.35) 0%, transparent 12%, transparent 88%, rgba(6,3,3,.65) 100%);
}

body.intro-lock{ overflow:hidden; height:100%; }

/* ===================== INTRO ===================== */
.intro{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 42%, #1a0c0d 0%, var(--bg) 72%);
  cursor:pointer;
  transition: opacity .9s var(--ease), visibility .9s var(--ease);
}
.intro.intro-out{ opacity:0; visibility:hidden; pointer-events:none; }
.intro[hidden]{ display:none; }

.intro-svg{
  width:min(30vw, 168px);
  overflow:visible;
  filter: drop-shadow(0 0 22px rgba(201,151,74,.25));
}

.intro-arc{
  stroke-linejoin:round;
  filter: drop-shadow(0 0 6px rgba(245,237,224,.25));
}

.intro-dot{
  fill:var(--gold-light);
  opacity:0;
  filter: drop-shadow(0 0 14px rgba(201,151,74,.85));
  transform-box: fill-box;
  transform-origin: center;
}

.intro-ring{
  fill:none;
  stroke:var(--gold-light);
  stroke-width:2;
  opacity:0;
  transform-box: fill-box;
  transform-origin: center;
}

.intro-word{
  position:absolute;
  bottom:34%;
  left:50%;
  transform: translate(-50%, 12px);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  letter-spacing:.08em;
  color:var(--cream-dim);
  opacity:0;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  white-space:nowrap;
}
.intro-word.in{ opacity:1; transform:translate(-50%, 0); }

@media (max-width:640px){
  .intro-svg{ width:34vw; }
}

/* ===================== REVEAL ===================== */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
[data-reveal].in{
  opacity:1;
  transform: translateY(0);
}

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 28px clamp(20px, 5vw, 64px);
  transition: padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  padding-top:16px; padding-bottom:16px;
  background: rgba(11,5,6,.65);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(201,151,74,.18);
}

.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-mark{ width:30px; height:30px; }
.nav-word{
  font-family:var(--serif); font-style:italic; font-size:1.25rem;
  letter-spacing:.04em; color:var(--cream);
}

.nav-links{ display:flex; align-items:center; gap:36px; font-size:.85rem; letter-spacing:.06em; }
.nav-links a:not(.nav-cta){ opacity:.85; position:relative; padding-bottom:4px; }
.nav-links a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .35s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after{ right:0; }
.nav-links a:not(.nav-cta):hover{ opacity:1; }

.nav-cta{
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  border:1px solid rgba(201,151,74,.6);
  background:rgba(201,151,74,.08);
  padding:11px 22px; border-radius:2px;
  color:var(--gold-light); font-weight:500;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav-cta:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold); }

.nav-burger{
  display:none; flex-direction:column; gap:6px;
  background:none; border:none; cursor:pointer; padding:8px;
  z-index:60;
}
.nav-burger span{ width:24px; height:1px; background:var(--cream); display:block; transition:.3s var(--ease); }
.nav-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:45;
  background: #0c0607;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
  font-family:var(--serif); font-size:1.8rem; font-style:italic;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ color:var(--cream); }
.mobile-cta{ color:var(--gold-light); border:1px solid var(--gold); padding:10px 26px; border-radius:2px; font-size:1.1rem; }

/* ===================== LAYOUT SHELL ===================== */
main, .footer{ position:relative; z-index:10; }

section{ padding: clamp(90px, 14vw, 170px) clamp(20px, 6vw, 90px); position:relative; }

.section-kicker, .manifesto-kicker{
  font-size:.75rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-light); margin:0 0 18px; text-align:center;
}
.section-title{
  font-family:var(--serif); font-weight:400; font-size:clamp(2rem, 4.2vw, 3.2rem);
  text-align:center; margin:0 auto 70px; max-width:16ch; line-height:1.15;
}

/* ===================== HERO ===================== */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding-top:120px;
}
.hero-eyebrow{
  font-size:.78rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:26px;
}
.hero-title{
  font-family:var(--serif); font-weight:400; margin:0;
  font-size:clamp(3rem, 9vw, 6.4rem); line-height:1.02; letter-spacing:-.01em;
}
.hero-title .line{ display:block; }
.hero-title em{ font-style:italic; color:var(--gold-light); }

.hero-sub{
  max-width:44ch; margin:32px auto 0; font-size:clamp(1.02rem,1.6vw,1.2rem);
  line-height:1.7; color:var(--cream-dim); font-weight:300;
}

.hero-actions{ display:flex; gap:20px; margin-top:48px; flex-wrap:wrap; justify-content:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius:2px; transition: all .4s var(--ease); cursor:pointer; border:1px solid transparent;
  font-family:var(--sans);
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#241009; font-weight:500; box-shadow:0 8px 30px -10px rgba(201,151,74,.55);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -8px rgba(201,151,74,.7); }
.btn-ghost{ border-color:rgba(245,237,224,.35); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--cream); background:rgba(245,237,224,.06); }

.hero-scroll{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--cream-dim);
}
.scroll-line{
  width:1px; height:46px; background:linear-gradient(to bottom, var(--gold), transparent);
  position:relative; overflow:hidden;
}
.scroll-line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--gold-light);
  animation: scrollDrop 2.6s var(--ease) infinite;
}
@keyframes scrollDrop{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

/* ===================== MANIFESTO ===================== */
.manifesto{
  text-align:center; max-width:920px; margin:0 auto;
}
.manifesto-quote{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem, 5.4vw, 4rem);
  line-height:1.2; margin:0 0 40px;
}
.manifesto-quote em{ font-style:italic; color:var(--gold-light); }
.strike{ position:relative; color:var(--cream-dim); }
.strike::after{
  content:''; position:absolute; left:-4%; right:-4%; top:52%; height:1px;
  background:var(--wine-bright); transform:rotate(-2deg);
}
.manifesto-body{
  max-width:56ch; margin:0 auto; color:var(--cream-dim); line-height:1.85;
  font-size:1.05rem;
}

/* ===================== HOW IT WORKS ===================== */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,60px);
  max-width:1180px; margin:0 auto;
}
.step{
  border:1px solid rgba(245,237,224,.1);
  background: linear-gradient(160deg, rgba(107,30,32,.14), rgba(245,237,224,.02));
  padding:44px 34px; border-radius:4px; text-align:left;
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
  position:relative;
}
.step:hover{ border-color:rgba(201,151,74,.4); transform:translateY(-6px); }
.step-index{
  font-family:var(--serif); font-style:italic; color:var(--wine-bright);
  font-size:1rem; letter-spacing:.05em;
}
.step-icon{ width:52px; height:52px; margin:22px 0 26px; color:var(--gold); }
.step-icon svg{ width:100%; height:100%; }
.step h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:0 0 14px; }
.step p{ color:var(--cream-dim); line-height:1.75; font-size:.96rem; margin:0; }

/* ===================== MECHANIC ===================== */
.mechanic{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,100px);
  align-items:center; max-width:1180px; margin:0 auto;
}
.mechanic-copy .section-kicker{ text-align:left; margin-bottom:14px; }
.mechanic-copy .section-title{ text-align:left; margin:0 0 26px; }
.mechanic-copy p{ color:var(--cream-dim); line-height:1.85; font-size:1.02rem; margin:0 0 20px; }

.mechanic-graphic{ display:flex; align-items:center; justify-content:center; }
.ripple-svg{ width:100%; max-width:400px; }
.ripple-ring{
  fill:none; stroke:var(--gold); stroke-width:.6; opacity:.5;
  transform-origin:200px 200px;
  animation: rippleOut 4.5s var(--ease) infinite;
}
.ripple-ring:nth-child(2){ animation-delay:.5s; stroke:var(--wine-bright); }
.ripple-ring:nth-child(3){ animation-delay:1s; opacity:.3; }
@keyframes rippleOut{
  0%{ transform:scale(.85); opacity:.7; }
  70%{ opacity:.15; }
  100%{ transform:scale(1.12); opacity:0; }
}
.ripple-dot{ fill:var(--gold-light); }
.ripple-dot:first-of-type{ fill:var(--cream); }

/* ===================== EXCLUSIVITY ===================== */
.exclusivity{
  text-align:center;
  border-top:1px solid rgba(245,237,224,.08); border-bottom:1px solid rgba(245,237,224,.08);
}
.excl-row{
  display:flex; align-items:center; justify-content:center; gap:clamp(30px,7vw,110px);
  flex-wrap:wrap;
}
.excl-item{ display:flex; flex-direction:column; gap:10px; }
.excl-num{ font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--gold-light); font-style:italic; }
.excl-label{ font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-dim); }
.excl-divider{ width:1px; height:56px; background:rgba(245,237,224,.15); }
.excl-note{
  max-width:52ch; margin:40px auto 0; color:var(--cream-dim);
  line-height:1.8; font-size:.95rem;
}

/* ===================== CITIES ===================== */
.cities{ text-align:center; }
.cities .section-title{ margin-bottom:44px; }

.city-live{
  display:inline-flex; align-items:center; gap:14px;
  border:1px solid rgba(201,151,74,.4); border-radius:40px;
  padding:14px 26px 14px 20px;
  background:rgba(201,151,74,.06);
  margin-bottom:26px;
}
.city-live-dot{
  width:10px; height:10px; border-radius:50%; background:var(--gold-light);
  position:relative; display:inline-flex;
}
.city-live-dot span{
  position:absolute; inset:0; border-radius:50%; background:var(--gold-light);
  animation: livePulse 2.2s ease-out infinite;
}
@keyframes livePulse{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(2.8); opacity:0; }
}
.city-live-name{
  font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--cream);
}
.city-live-tag{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-light); border:1px solid rgba(201,151,74,.5);
  border-radius:20px; padding:5px 12px;
}

.cities-sub{
  max-width:48ch; margin:0 auto 56px; color:var(--cream-dim); line-height:1.8;
}

.city-grid{
  list-style:none; margin:0 auto; padding:0; max-width:760px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0;
}
.city-grid li{
  color:var(--cream-dim); font-size:.95rem; letter-spacing:.02em;
  padding:6px 16px; opacity:.55; position:relative;
}
.city-grid li:hover{ opacity:.95; color:var(--gold-light); }
.city-grid li:not(:last-child)::after{
  content:'·'; position:absolute; right:-2px; color:rgba(245,237,224,.25);
}

.city-note{
  margin-top:30px; font-family:var(--serif); font-style:italic;
  color:var(--gold-light); font-size:1.1rem; letter-spacing:.03em;
}

/* ===================== REQUEST ===================== */
.request{ text-align:center; max-width:640px; margin:0 auto; }
.request-title{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(2.4rem,5.6vw,3.6rem); margin:0 0 20px; color:var(--gold-light);
}
.request-sub{ color:var(--cream-dim); line-height:1.8; margin:0 0 46px; }

.request-cta{ display:flex; flex-direction:column; align-items:center; }
.field-note{ margin-top:18px; font-size:.8rem; color:var(--cream-dim); letter-spacing:.03em; }

/* ===================== FOOTER ===================== */
.footer{
  padding:70px clamp(20px,6vw,90px) 50px; text-align:center;
  border-top:1px solid rgba(245,237,224,.08);
}
.footer-mark{ width:34px; height:34px; margin:0 auto 16px; opacity:.9; }
.footer-tagline{ font-family:var(--serif); font-style:italic; color:var(--cream-dim); margin:0 0 26px; }

.footer-social{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid rgba(245,237,224,.16); border-radius:30px;
  padding:9px 18px 9px 14px; margin-bottom:26px;
  color:var(--cream-dim); font-size:.85rem; letter-spacing:.02em;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.footer-social svg{ width:17px; height:17px; }
.footer-social:hover{ border-color:rgba(201,151,74,.5); color:var(--gold-light); }

.footer-links{ font-size:.85rem; color:var(--cream-dim); margin-bottom:20px; }
.footer-sep{ margin:0 10px; opacity:.5; }
.footer-links a:hover{ color:var(--gold-light); }
.footer-copy{ font-size:.72rem; letter-spacing:.05em; color:rgba(245,237,224,.35); margin:0; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .mechanic{ grid-template-columns:1fr; }
  .mechanic-copy .section-title, .mechanic-copy .section-kicker{ text-align:center; }
  .mechanic-copy p{ text-align:center; }
}

@media (max-width:760px){
  .steps{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ transition:none; opacity:1; transform:none; }
  .scroll-line::after{ animation:none; }
  .ripple-ring{ animation:none; }
}