* { box-sizing: border-box; }
html, body { height: 100%; }
body.app {
  margin: 0;
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}

/* 3D map layer behind everything */
.map3d-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: .45;
  filter: saturate(0.9) contrast(1.05);
}

/* Navbar glass */
.nav-glass {
  z-index: 50;
  backdrop-filter: blur(14px);
  background: var(--glass);
  border-bottom: 1px solid var(--glass-border);
}
.navbar-brand.brand {
  font-weight: 800;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--fg);
}
.brand-dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: hsl(var(--accent));
  box-shadow: 0 0 18px rgba(255,255,255,.12);
}

.nav-center .nav-link {
  position: relative;
  color: var(--muted);
  font-weight: 700;
  padding: .6rem .9rem;
  border-radius: 999px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.nav-center .nav-link:hover {
  color: var(--fg);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.nav-center .nav-link.active {
  color: var(--fg);
  background: rgba(255,255,255,.10);
  border: 1px solid var(--glass-border);
}

/* Buttons */
.btn-theme {
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--fg);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-theme:hover { transform: translateY(-1px); }

.btn-cta {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(var(--accent2)) 100%);
  color: #061018;
  font-weight: 900;
  box-shadow: var(--shadow-lite);
}
.btn-cta:hover { transform: translateY(-1px); }

.btn-outline-lite {
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  background: transparent;
  color: var(--fg);
  font-weight: 800;
}
.btn-outline-lite:hover {
  background: rgba(255,255,255,.08);
}

/* Hero */
.hero {
  position: relative;
  z-index: 5;
  padding-top: 78px; /* room for fixed navbar */
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* The "band/strap" animation */
.hero-strap {
  width: min(1180px, calc(100% - 1.2rem));
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--glass-border);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  animation: strapIn .85s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: .12s;
  background: rgba(255,255,255,.02);
}

@keyframes strapIn {
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.strap-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.1);
}

.strap-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 500px at 20% 40%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
}

/* Content sits above video */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 2.2rem 1.3rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  font-weight: 800;
  letter-spacing: .2px;
}

.hero-title {
  margin-top: .9rem;
  font-weight: 900;
  font-size: clamp(2rem, 4.3vw, 3.2rem);
  line-height: 1.05;
}

.hero-subtitle {
  margin-top: .8rem;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  color: rgba(255,255,255,.84);
}

.accent { color: hsl(var(--accent)); }
.accent-soft { color: rgba(255,255,255,.96); font-weight: 800; }

.hero-actions {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

/* Portrait fade up */
.portrait {
  width: min(340px, 72vw);
  height: auto;
  opacity: 0;
  transform: translateY(14px);
  animation: portraitUp .8s ease forwards;
  animation-delay: .55s;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}
@keyframes portraitUp {
  to { opacity: 1; transform: translateY(0); }
}
.portrait-glow {
  position: absolute;
  inset: auto 10% 6% 10%;
  height: 45%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 60%);
  filter: blur(18px);
  z-index: -1;
}

/* Scroll Down arrow */
.scroll-down {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  color: var(--fg);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lite);
}
.scroll-down .arrow {
  font-size: 1.4rem;
  transform: translateY(-2px);
  animation: bob 1.25s ease-in-out infinite;
}
@keyframes bob {
  50% { transform: translateY(3px); }
}

/* Sections */
.section-pad {
  position: relative;
  z-index: 5;
  padding: 72px 0;
}

.coming-soon-card {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-lite);
}
.coming-soon-card h2 {
  font-weight: 900;
  margin-bottom: .5rem;
}
.coming-soon-card p {
  color: var(--muted);
  margin: 0;
}

.muted-section .placeholder-block {
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.16);
}
.placeholder-block h3 { font-weight: 900; margin: 0 0 .4rem 0; }
.placeholder-block p { color: var(--muted); margin: 0; }

/* Asset toast */
.asset-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 9999;
  padding: .7rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10, 12, 18, .55);
  backdrop-filter: blur(12px);
  font-weight: 900;
  letter-spacing: .2px;

  opacity: 0;
  transition: opacity .35s ease;
}

/* 404 */
.error-wrap {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 5;
}
.error-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.error-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 600px at 30% 30%, rgba(0,0,0,.35), rgba(0,0,0,.78));
}
.error-card {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-soft);
  padding: 1.6rem;
}
.portrait-frame {
  border-radius: 999px;
  padding: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display: inline-block;
}
.portrait-404 {
  width: min(240px, 60vw);
  height: auto;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.35));
}
.error-title { font-weight: 1000; font-size: clamp(2.4rem, 5vw, 3.2rem); }
.error-subtitle { color: var(--muted); font-weight: 700; font-size: 1.08rem; }
.tiny-muted { color: var(--muted); font-weight: 700; }

/* Make Bootstrap toggler icon visible in dark */
.navbar .navbar-toggler {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}
.navbar .navbar-toggler-icon {
  filter: invert(1);
}
html[data-theme="light"] .navbar .navbar-toggler-icon {
  filter: invert(0);
}