/* Theme (independent) */
:root {
  --fg-brand: #0f172a; /* primary */
  --fg-accent: #1e293b;
  --fg-muted: #64748b;
  --fg-bg-soft: #f1f5f9;
  --fg-header-h: 64px; /* sticky header height */
}
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Inter, Arial, 'Noto Sans', sans-serif; }
.container { max-width: 1100px; }

/* Header */
.fg-header { transition: background-color .2s ease, border-color .2s ease; }
.fg-header.is-solid { backdrop-filter: blur(6px); background: rgba(255,255,255,.95); border-bottom: 1px solid #e2e8f0; }
.fg-header:not(.is-solid) { background: transparent; border-bottom-color: transparent; }
.fg-header.is-solid .fg-menu a { color: #334155; }
.fg-header:not(.is-solid) .fg-menu a { color: #e2e8f0; }
.fg-header.is-solid .fg-menu a:hover, .fg-header.is-solid .fg-menu a.active { color: var(--fg-brand); }
.fg-header:not(.is-solid) .hamburger .bar,
.fg-header:not(.is-solid) .hamburger .bar::before,
.fg-header:not(.is-solid) .hamburger .bar::after { background: #e2e8f0; }
.fg-header.is-solid .hamburger .bar,
.fg-header.is-solid .hamburger .bar::before,
.fg-header.is-solid .hamburger .bar::after { background: #334155; }
.fg-header:not(.is-solid) .btn-primary { background: #ffffff; color: var(--fg-brand); }
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; padding: .625rem 1rem; font-weight: 500; }
.btn-primary { background: var(--fg-brand); color: #fff; }
.btn-primary:hover { background: #0b1220; }

/* Cards */
.card { border: 1px solid #e2e8f0; border-radius: .75rem; padding: 1.25rem; background: #fff; }
.shadow-soft { box-shadow: 0 8px 24px rgba(15,23,42,.08); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hamburger */
.hamburger { position: relative; width: 36px; height: 36px; border: 1px solid #e2e8f0; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; }
.hamburger .bar, .hamburger .bar::before, .hamburger .bar::after { content: ""; display: block; width: 18px; height: 2px; background: #334155; position: relative; transition: transform .2s ease, opacity .2s ease, background .2s; }
.hamburger .bar::before { position: absolute; top: -6px; left: 0; }
.hamburger .bar::after { position: absolute; top: 6px; left: 0; }
.hamburger.open .bar { background: transparent; }
.hamburger.open .bar::before { transform: translateY(6px) rotate(45deg); }
.hamburger.open .bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* Carousel */
.carousel { position: relative; overflow: hidden; }
.carousel-track { display: flex; will-change: transform; transition: transform .4s ease; }
.carousel-slide { flex: 0 0 auto; padding: .5rem; }
.carousel-nav { position: absolute; inset: 0; pointer-events: none; }
.carousel-nav button { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 9999px; background: rgba(15,23,42,.8); color: #fff; border: 0; display: grid; place-items: center; }
.carousel-nav .prev { left: .5rem; }
.carousel-nav .next { right: .5rem; }
.carousel-dots { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; }
.carousel-dots button { width: 8px; height: 8px; border-radius: 9999px; background: #cbd5e1; border: 0; }
.carousel-dots button.is-active { background: var(--fg-brand); }

/* Hero full viewport with overlay */
.hero { position: relative; min-height: calc(100svh - var(--fg-header-h)); display: grid; place-items: center; background: center/cover no-repeat var(--fg-bg-soft); }
.hero .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.55)); }
.hero .content { position: relative; z-index: 1; text-align: center; padding: 4rem 1rem; }
.hero .content h1 { color: #fff; }
.hero .content p { color: #e2e8f0; }