/* Light Blue Theme Override for Magnus */
:root {
  --bg: #f0f7fc;
  --panel: #e8f2f9;
  --card: #ecf4fa;
  --border: #b8d4e8;
  --ink: #1a3a4a;
  --muted: #4a5f73;
  --primary: #f9a826;
  --primary-dark: #d9880b;
  --accent: #0288d1;
  --shadow: 0 24px 50px rgba(26, 58, 74, 0.08);
}

body {
  background: radial-gradient(circle at 12% 18%, rgba(2, 136, 209, 0.08), transparent 26%),
    radial-gradient(circle at 72% 8%, rgba(249, 168, 38, 0.06), transparent 32%),
    linear-gradient(160deg, #f0f7fc, #e3effa 48%, #ecf5fb);
  color: var(--ink);
}

.topbar {
  background: #f0f7fceb;
  border-bottom: 1px solid var(--border);
}

.hero {
  background: linear-gradient(135deg, #d6e9f7 0%, #c2ddf2 50%, #dde9f5 100%);
  box-shadow: 0 30px 80px rgba(26, 58, 74, 0.1);
}

.hero:before {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.15));
}

.hero:after {
  background: radial-gradient(circle, rgba(249, 168, 38, 0.08), transparent 58%);
}

.hero video.hero-video {
  filter: brightness(0.85);
}

.hero-copy h1 {
  color: #0d2137;
}

.hero-copy .lead {
  color: #2c4a5f;
}

.hero-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(2, 136, 209, 0.25);
  color: #1a3a4a;
  box-shadow: 0 24px 55px rgba(26, 58, 74, 0.08);
}

.hero-card.hero-card-inline {
  background: #f8fbfd;
  border-color: #0288d133;
}

.pill-list li {
  background: rgba(2, 136, 209, 0.08);
  border: 1px solid rgba(2, 136, 209, 0.15);
  color: var(--muted);
}

.content-card {
  background: radial-gradient(circle at 18% 12%, rgba(2, 136, 209, 0.08), #f0f7fcf0);
  border: 1px solid rgba(2, 136, 209, 0.18);
  box-shadow: 0 18px 42px rgba(26, 58, 74, 0.06);
}

.content-card h2 {
  color: #0d2137;
}

.content-card.soft {
  background: linear-gradient(180deg, #f0f7fce6, #f0f7fcbf);
}

.btn.outline {
  border-color: #0288d173;
  color: #1a3a4a;
  background: rgba(2, 136, 209, 0.1);
}

.btn.ghost {
  border-color: var(--border);
  color: var(--ink);
}

.btn.ghost:hover,
.btn.outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.gallery-card {
  background: #f8fbfd;
  border: 1px solid rgba(2, 136, 209, 0.15);
  box-shadow: 0 16px 36px rgba(26, 58, 74, 0.08);
}

.gallery-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(13, 33, 55, 0.8));
}

.gallery-overlay span {
  color: #0d2137;
}

.gallery-overlay p {
  color: #2c4a5f;
}

.lightbox {
  background: rgba(225, 240, 250, 0.9);
}

.lightbox-inner {
  background: #f8fbfd;
  border: 1px solid rgba(2, 136, 209, 0.2);
  box-shadow: 0 18px 42px rgba(26, 58, 74, 0.1);
}

.lightbox-caption {
  color: #0d2137;
}

.nav-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(2, 136, 209, 0.3);
  color: #1a3a4a;
}

.contact-card {
  background: #f5fafz;
  border: 1px solid rgba(2, 136, 209, 0.15);
  box-shadow: 0 14px 32px rgba(26, 58, 74, 0.08);
}

.contact-card h4 {
  color: var(--ink);
}

.cta-band {
  background: linear-gradient(115deg, rgba(2, 136, 209, 0.15), rgba(249, 168, 38, 0.1));
  border: 1px solid rgba(2, 136, 209, 0.2);
}

.cta-band h3 {
  color: #0d2137;
}

.cta-band p {
  color: #2c4a5f;
}

.experience-strip {
  background: linear-gradient(100deg, #f0f7fce6, #f0f7fccc);
  border: 1px solid rgba(2, 136, 209, 0.2);
}

.showcase {
  background: linear-gradient(120deg, rgba(2, 136, 209, 0.1), rgba(13, 33, 55, 0.05));
  border: 1px solid var(--border);
}

.showcase-meta {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(2, 136, 209, 0.2);
  color: #0d2137;
}

.showcase-meta h4 {
  color: #0d2137;
}

.showcase .nav-btn {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(2, 136, 209, 0.4);
}

.dot {
  border: 1px solid rgba(13, 33, 55, 0.2);
  background: rgba(2, 136, 209, 0.5);
}

.dot.active {
  background: var(--primary);
  border-color: var(--primary);
}

.map-card {
  background: linear-gradient(120deg, rgba(2, 136, 209, 0.1), #f0f7fceb);
  border: 1px solid rgba(2, 136, 209, 0.2);
}

.map-frame {
  background: #f8fbfd;
  border: 1px solid rgba(2, 136, 209, 0.2);
}

.image-frame {
  background: #e3effa;
  border: 1px solid var(--border);
}

.footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
}

@media (max-width: 900px) {
  .topbar {
    background: #f0f7fceb;
  }

  .hero {
    background: linear-gradient(135deg, #d6e9f7 0%, #c2ddf2 50%, #dde9f5 100%);
  }
}