:root {
  --hero-dark: #0b0d10;
  --panel-bg: color-mix(in srgb, #1a1f26 65%, transparent);
  --panel-border: rgba(255,255,255,0.06);
  --panel-shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius-2xl: 20px;
  --sidebar-width: 260px;
  --sidebar-overlap-fix: 2px;
}

/* ---------------- Hero Background ---------------- */
/* ---------------- Hero Background ---------------- */
.hero {
  position: fixed;
  top: 0;
  left: 0;           /* was: calc(var(--sidebar-width) - var(--sidebar-overlap-fix)) */
  width: 100vw;      /* was: calc(100vw - var(--sidebar-width) + var(--sidebar-overlap-fix)) */
  height: 100vh;
  background-color: var(--hero-dark);
  background-image: var(--hero-bg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  animation: heroFade 700ms ease-out forwards;
}


/* Fit mode for extra-tall or wide images (JS toggles this) */
.hero.fit-mode {
  background-size: contain;
  background-position: center center;
  background-color: #000;
}

/* Subtle fade on image swap (no filters -> no black flash) */
.bg-swap { animation: swapFade 220ms ease-out; }
@keyframes swapFade { from { opacity:.92; } to { opacity:1; } }

/* Warm vignette */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 60% 30%, rgba(255,190,120,.18), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65));
  pointer-events: none;
}

/* Fine film grain */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  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='120' height='120' filter='url(%23n)' opacity='0.035'/></svg>");
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ---------------- Arrow Control (fixed to viewport top-right) ---------------- */
.bg-arrow {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #f5f5f5;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px) saturate(110%);
  cursor: pointer;
  z-index: 9999;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bg-arrow:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 190, 120, .35);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.bg-arrow:active { transform: translateY(0); }
.bg-arrow:focus-visible {
  outline: 2px solid rgba(255, 190, 120, .6);
  outline-offset: 2px;
}

/* ---------------- Glass Panel ---------------- */
/* Glass panel */
.intro-card {
  position: relative;
  z-index: 1;
  width: min(980px, 92vw);
  margin-top: clamp(24px, 7vh, 72px);
  margin-left: calc(var(--sidebar-width, 260px) + clamp(16px, 3vw, 36px)); /* <— updated */
  margin-right: auto;
  padding: clamp(18px, 2vw, 28px);
  background: var(--panel-bg);
  backdrop-filter: blur(8px) saturate(110%);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--panel-shadow);
  color: #e9e9e9;
  opacity: 0;
  animation: heroFade 700ms 120ms ease-out forwards;
}


.intro-head h1 {
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 0 0 .35em 0;
}
.intro-head p {
  margin: 0 0 1.2em 0;
  color: #d8d8d8;
  line-height: 1.6;
}

/* ---------------- Explore Grid ---------------- */
.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .features { grid-template-columns: 1fr; } }

.feature-card {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px 14px;
  text-decoration: none;
  color: #ececec;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 190, 120, .35);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.feature-emoji { font-size: 22px; opacity: .9; }
.feature-card h3 { margin: 0; font-size: 16px; }
.feature-card p  { margin: 0; color: #cfcfcf; font-size: 14px; }

/* ---------------- Subtle Mist ---------------- */
.mist {
  position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 70%, rgba(255,255,255,.08), transparent 60%);
  animation: drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

/* ---------------- Animations ---------------- */
@keyframes drift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1.02); }
  to   { transform: translate3d( 1.5%, 0, 0) scale(1.02); }
}
@keyframes heroFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  /* Let the page scroll on mobile: hero joins normal flow */
  .hero {
    position: relative;
    left: 0;
    width: 100vw;
    height: auto;
    min-height: 100vh;
    background-position: center center;
  }

  .bg-arrow {
    top: 10px;
    right: 10px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .intro-card {
    margin-left: max(12px, 2vw);
    margin-right: max(12px, 2vw);
    padding: 16px;
  }

  .features { gap: 12px; }
}