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

:root {
  --black:    #080a0e;
  --dark:     #0d1017;
  --panel:    #12161e;
  --border:   rgba(255,255,255,0.07);
  --white:    #f0ece3;
  --cream:    #e8e0cf;
  --gold:     #c9a84c;
  --gold-lt:  #e8c96e;
  --red:      #c0392b;
  --blue:     #1a3a5c;
  --text-dim: rgba(240,236,227,0.45);
  --font-display: 'Bebas Neue', sans-serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── BACKGROUND ── */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45vh;
  background:
    /* Simplified CSS skyline silhouette */
    linear-gradient(to top, #0d1017 0%, transparent 100%);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400'%3E%3Cpath fill='black' d='M0,400 L0,280 L40,280 L40,220 L60,220 L60,200 L80,200 L80,180 L100,180 L100,220 L130,220 L130,260 L160,260 L160,200 L180,200 L180,160 L200,160 L200,140 L220,140 L220,160 L240,160 L240,260 L280,260 L280,220 L300,220 L300,180 L320,180 L320,200 L360,200 L360,240 L380,240 L380,160 L400,160 L400,120 L420,120 L420,100 L440,100 L440,120 L460,120 L460,160 L480,160 L480,200 L520,200 L520,240 L540,240 L540,180 L560,180 L560,140 L580,140 L580,160 L620,160 L620,200 L640,200 L640,260 L680,260 L680,220 L700,220 L700,200 L720,200 L720,180 L740,180 L740,200 L760,200 L760,240 L800,240 L800,200 L820,200 L820,160 L840,160 L840,100 L860,100 L860,80 L880,80 L880,100 L900,100 L900,160 L940,160 L940,200 L960,200 L960,240 L1000,240 L1000,200 L1020,200 L1020,180 L1040,180 L1040,200 L1060,200 L1060,240 L1100,240 L1100,180 L1120,180 L1120,140 L1140,140 L1140,120 L1160,120 L1160,140 L1200,140 L1200,200 L1220,200 L1220,240 L1260,240 L1260,260 L1300,260 L1300,220 L1320,220 L1320,200 L1360,200 L1360,240 L1400,240 L1400,280 L1440,280 L1440,400 Z'/%3E%3C/svg%3E");
  mask-size: cover;
  mask-position: bottom;
  opacity: 0.6;
}

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
}
.glow-1 { width: 600px; height: 600px; background: var(--gold); top: -100px; left: -150px; animation: driftA 18s ease-in-out infinite; }
.glow-2 { width: 500px; height: 500px; background: #c0392b; top: 40%; right: -100px; animation: driftB 22s ease-in-out infinite; }
.glow-3 { width: 400px; height: 400px; background: #1a3a5c; bottom: 10%; left: 30%; animation: driftA 26s ease-in-out infinite reverse; }

@keyframes driftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(60px, 40px) scale(1.08); }
  66%       { transform: translate(-40px, 80px) scale(0.95); }
}
@keyframes driftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-80px, -50px) scale(1.1); }
}

.noise-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 3rem;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.nav.scrolled {
  background: rgba(8,10,14,0.85);
  backdrop-filter: blur(16px);
  border-color: var(--border);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}
.logo-det   { color: var(--gold); }
.logo-nights{ color: var(--white); }

.nav-links { display: flex; gap: 2rem; }
.nav-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--white); }

/* ── HERO ── */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 3rem;
  padding-top: 6rem;
}

.hero-content { max-width: 700px; }

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out-expo) 0.2s forwards;
}

.hero-title {
  display: flex;
  flex-direction: column;
  line-height: 0.88;
  margin-bottom: 1.8rem;
}
.title-line {
  display: block;
  opacity: 0;
}
.line-1 {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 11rem);
  letter-spacing: 0.04em;
  color: var(--white);
  animation: fadeUp 0.9s var(--ease-out-expo) 0.35s forwards;
}
.line-2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-left: 0.5rem;
  animation: fadeUp 0.9s var(--ease-out-expo) 0.5s forwards;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-dim);
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out-expo) 0.65s forwards;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 2rem;
  background: var(--gold);
  color: var(--black);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background 0.2s, transform 0.2s;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out-expo) 0.8s forwards;
}
.cta-btn:hover { background: var(--gold-lt); transform: translateY(-2px); }
.btn-arrow { font-size: 1.1rem; transition: transform 0.2s; }
.cta-btn:hover .btn-arrow { transform: translateX(4px); }

/* Hero badge */
.hero-badge {
  position: absolute;
  right: 6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeIn 1.2s ease 1s forwards;
}
.badge-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0.4;
  animation: spinSlow 20s linear infinite;
}
.badge-ring::after {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border-radius: 50%;
  border: 1px dashed var(--gold);
  opacity: 0.3;
}
.badge-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-inner span {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}

@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ── SELECTOR SECTION ── */
.selector {
  position: relative;
  z-index: 1;
  padding: 6rem 3rem 8rem;
  background: linear-gradient(to bottom, transparent, rgba(13,16,23,0.95) 15%, rgba(13,16,23,0.95) 85%, transparent);
}

.selector-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.selector-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: 0.7rem;
}
.selector-sub {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* ── VIBE CARDS ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.vibe-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 2.2rem 2rem;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--ease-out-expo);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  outline: none;
}
.vibe-card:hover, .vibe-card:focus {
  border-color: var(--gold);
  transform: translateY(-6px);
}
.vibe-card:hover .card-bg { opacity: 1; }
.vibe-card:hover .card-arrow { opacity: 1; transform: translateX(0); }

.card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}

.card-icon {
  width: 44px;
  height: 44px;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.card-icon svg { width: 100%; height: 100%; }

.card-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.card-desc {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.card-tag {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
}
.card-arrow {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  font-size: 1.2rem;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out-expo);
}

/* ── RESULTS SECTION ── */
.results {
  position: relative;
  z-index: 1;
  padding: 5rem 3rem 8rem;
  display: none;
}
.results.active { display: block; }

.results-inner { max-width: 1200px; margin: 0 auto; }

.back-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  margin-bottom: 2.5rem;
  transition: color 0.2s, border-color 0.2s;
}
.back-btn:hover { color: var(--white); border-color: var(--white); }

.results-header { margin-bottom: 3rem; }
.results-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.results-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.04em;
}

.recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Recommendation card */
.rec-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1.8rem;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s var(--ease-out-expo) forwards;
}
.rec-category {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.rec-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.rec-neighborhood {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.8rem;
  letter-spacing: 0.04em;
}
.rec-desc {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(240,236,227,0.6);
}
.rec-tip {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--gold);
  font-style: italic;
}

/* ── FOOTER ── */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 2rem 3rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.footer-copy {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }

/* ── UTILITIES / ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .nav { padding: 1.2rem 1.5rem; }
  .nav-links { display: none; }
  .hero { padding: 0 1.5rem; padding-top: 5rem; }
  .hero-badge { display: none; }
  .selector { padding: 4rem 1.5rem 6rem; }
  .results { padding: 4rem 1.5rem 6rem; }
  .footer { padding: 1.5rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}