@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;600;700&display=swap');

:root{
  --bg: #030712;
  --surface: #0b1220;
  --card: rgba(255,255,255,0.04);
  --elev: rgba(255,255,255,0.03);
  --text: #f5f7fb;
  --muted: #9fb2c8;
  --border: rgba(255,255,255,0.08);
  /* Accent is set in default.hbs from Ghost; fall back here if absent */
  --accent-main: var(--accent, #4de1c1);
  --accent-2: color-mix(in srgb, var(--accent-main) 70%, #ffffff 30%);
  --accent-3: color-mix(in srgb, var(--accent-main) 50%, #ffd166 50%);
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-1: 0 12px 32px rgba(0,0,0,.35);
  --shadow-2: 0 26px 60px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --card: #ffffff;
  --elev: #f9fbff;
  --text: #0c1624;
  --muted: #526175;
  --border: #dbe3ef;
  --accent-main: var(--accent, #1f9c85);
  --accent-2: color-mix(in srgb, var(--accent-main) 70%, #ffffff 30%);
  --accent-3: color-mix(in srgb, var(--accent-main) 50%, #e19b2d 50%);
  --shadow-1: 0 8px 24px rgba(12,22,36,.1);
  --shadow-2: 0 24px 60px rgba(12,22,36,.14);
}

body{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(124,243,255,.08), transparent 60%),
    radial-gradient(900px 520px at 90% 12%, rgba(77,225,193,.12), transparent 60%),
    linear-gradient(140deg, #050b15 0%, #080f1e 50%, #0c1427 100%);
  color: var(--text);
  font-family: 'Space Grotesk','Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  letter-spacing:-0.01em;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(600px 400px at 50% -5%, rgba(255,209,102,.08), transparent 50%);
  opacity:.6; mix-blend-mode:screen;
}

:root[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(63,199,178,.08), transparent 60%),
    radial-gradient(900px 520px at 90% 12%, rgba(31,156,133,.08), transparent 60%),
    linear-gradient(150deg, #f7f9fc 0%, #eef3f9 50%, #e7edf6 100%);
  color: var(--text);
}
:root[data-theme="light"] body::after{
  background: radial-gradient(520px 360px at 50% -5%, rgba(225,155,45,.08), transparent 55%);
  opacity:.5;
  mix-blend-mode:normal;
}

.page, .site-footer, .block{ position:relative; z-index:1; }
.site-header{ position:relative; z-index:2200; }
.container{ width:min(1200px, 93vw); }

.site-header{
  background: rgba(7,11,20,.8);
  border-bottom:1px solid color-mix(in srgb, var(--accent), var(--border) 70%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(12px) saturate(1.1);
}
:root[data-theme="light"] .site-header{
  background: rgba(255,255,255,.9);
  border-bottom:1px solid color-mix(in srgb, var(--accent), var(--border) 60%);
  box-shadow: 0 12px 28px rgba(12,22,36,.12);
}
.nav a{
  color: var(--text);
  background: transparent;
  border:1px solid transparent;
}
.nav a:not(.active){
  color: color-mix(in srgb, var(--text), var(--muted) 55%);
}
:root[data-theme="light"] .nav a:not(.active){
  color: #0c1624;
  opacity: .78;
}
.nav a:hover, .nav a.active{
  color: #041510;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent), transparent 60%);
}
.header-actions .hdr-btn, .search-btn, .burger, #themeToggle{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
:root[data-theme="light"] .header-actions .hdr-btn,
:root[data-theme="light"] .search-btn,
:root[data-theme="light"] .burger,
:root[data-theme="light"] #themeToggle{
  background: #ffffff;
  border-color: color-mix(in srgb, var(--accent), var(--border) 55%);
  box-shadow: 0 8px 18px rgba(12,22,36,.1);
  color: #0c1624;
}

.card{
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 65%);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px) saturate(1.05);
}
.card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent), var(--border) 35%);
  box-shadow: var(--shadow-2);
}
.badge{
  background: color-mix(in srgb, var(--accent), transparent 90%);
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
  color: var(--text);
}
.hero-chip{
  background: color-mix(in srgb, var(--accent), transparent 92%);
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
  color: var(--text);
}

/* Light mode refinements */
:root[data-theme="light"] .card{
  background: #ffffff;
  border-color: color-mix(in srgb, var(--accent), var(--border) 65%);
  box-shadow: 0 12px 28px rgba(12,22,36,.08);
}
:root[data-theme="light"] .card:hover{
  box-shadow: 0 18px 38px rgba(12,22,36,.12);
}
:root[data-theme="light"] .hero-panel,
:root[data-theme="light"] .home-band,
:root[data-theme="light"] .band-solutions,
:root[data-theme="light"] .band-offerings,
:root[data-theme="light"] .band-insights,
:root[data-theme="light"] .cta-band{
  background: #ffffff;
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
  box-shadow: 0 18px 40px rgba(12,22,36,.08);
}
:root[data-theme="light"] .hero-list li,
:root[data-theme="light"] .hero-stat,
:root[data-theme="light"] .metric-card{
  background: #f7fafc;
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
  box-shadow: none;
}
:root[data-theme="light"] .btn{
  background: #ffffff;
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
  box-shadow: 0 10px 24px rgba(12,22,36,.08);
}
:root[data-theme="light"] .btn.primary{
  background: linear-gradient(120deg, var(--accent-main), var(--accent-2));
  color:#041510;
  border:0;
  box-shadow: 0 16px 32px color-mix(in srgb, var(--accent-main), transparent 50%);
}

.btn{
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 55%);
  background: color-mix(in srgb, var(--card), var(--surface) 60%);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.btn.primary{
  background: linear-gradient(120deg, var(--accent-main), var(--accent-2));
  color:#041510;
  border:0;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--accent-main), transparent 45%);
}
.btn.ghost{
  background: transparent;
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
}

.section-hero{
  background: linear-gradient(140deg, color-mix(in srgb, var(--surface), var(--bg) 40%), color-mix(in srgb, var(--card), var(--accent) 8%));
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 60%);
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.section-hero::after{
  background: radial-gradient(460px 320px at 20% 20%, color-mix(in srgb, var(--accent), transparent 55%), transparent 70%);
}
.hero-panel{
  background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
  box-shadow: var(--shadow-1);
}
.hero-list li, .hero-stat{
  background: color-mix(in srgb, var(--surface), transparent 10%);
  border-color: color-mix(in srgb, var(--accent), var(--border) 65%);
}
.hero-stat .num{ color: var(--accent-2); }

:root[data-theme="light"] .section-hero{
  background: #ffffff;
  border-color: color-mix(in srgb, var(--accent), var(--border) 60%);
  box-shadow: 0 24px 50px rgba(12,22,36,.12);
}
:root[data-theme="light"] .section-hero::after{
  background: radial-gradient(420px 280px at 18% 18%, color-mix(in srgb, var(--accent), transparent 70%), transparent 70%);
  opacity:.6;
}

/* Koenig card styling to match theme */
.kg-callout-card,
.kg-toggle-card,
.kg-button-card,
.kg-product-card,
.kg-gallery-card,
.kg-embed-card,
.kg-bookmark-card{
  margin: 1rem 0;
}
.kg-callout-card,
.kg-toggle-card,
.kg-embed-card,
.kg-bookmark-container,
.kg-product-card{
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 60%);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card), var(--surface) 50%);
  box-shadow: var(--shadow-1);
  padding: 1rem;
}
.kg-toggle-heading{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-weight:800;
}
.kg-toggle-card .kg-toggle-content{ margin-top:.5rem; color: var(--muted); }
.kg-bookmark-card{
  overflow:hidden; border-radius: var(--radius);
}
.kg-bookmark-container{ display:flex; gap:1rem; flex-wrap:wrap; }
.kg-bookmark-thumbnail img{ border-radius: var(--radius); height:100%; width:100%; object-fit:cover; }
.kg-bookmark-title{ font-weight:800; margin:0 0 .2rem; }
.kg-bookmark-description{ color: var(--muted); margin:0 0 .35rem; }
.kg-bookmark-metadata{ color: var(--muted); font-weight:600; display:flex; gap:.5rem; align-items:center; }
.kg-button-card a,
.kg-product-card .kg-product-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem 1.1rem; border-radius: 12px;
  background: linear-gradient(120deg, var(--accent-main), var(--accent-2));
  color:#041510; font-weight:800; border:0; box-shadow: 0 14px 32px color-mix(in srgb, var(--accent-main), transparent 50%);
}
.kg-button-card a:hover,
.kg-product-card .kg-product-cta:hover{ transform: translateY(-1px); }
.kg-gallery-card, .kg-image-card img{
  border-radius: var(--radius-lg);
}
.kg-product-card .kg-product-card-container{
  display:flex; flex-direction:column; gap:.5rem;
}
.kg-product-card .kg-product-card-description{ color: var(--muted); }

/* Full-bleed helpers for Ghost cards */
.gh-content .kg-width-wide{ width:min(1200px,93vw); margin:1rem auto; }
.gh-content .kg-width-full{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}

/* Normalize custom full-width sections to use theme colors */
.gh-content .kg-card.kg-width-full,
.gh-content .kg-header-card,
.gh-content .kg-card.kg-width-full [style*="background-color"],
.gh-content .kg-card.kg-width-full [style*="background:#"],
.gh-content .kg-header-card *[style*="background"]{
  background: linear-gradient(160deg, color-mix(in srgb, var(--card), var(--surface) 30%), var(--card)) !important;
  color: var(--text) !important;
}

/* Clean up inline-styled ai-card blocks */
.gh-content .ai-card{
  background: var(--card) !important;
  color: var(--text) !important;
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 60%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.gh-content .ai-card a,
.gh-content .kg-header-card-button,
.gh-content .kg-card.kg-width-full a.btn,
.gh-content .kg-button-card a{
  color: var(--text) !important;
}

.home-band, .band-solutions, .band-offerings, .band-insights, .cta-band{
  border-color: color-mix(in srgb, var(--accent), var(--border) 55%);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  background: linear-gradient(160deg, color-mix(in srgb, var(--card), var(--accent) 10%), var(--card));
}
.cta-band{
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent), transparent 70%), color-mix(in srgb, var(--card), var(--accent-2) 10%));
}
.metric-card{
  background: linear-gradient(150deg, color-mix(in srgb, var(--card), var(--accent) 14%), var(--card));
  border-color: color-mix(in srgb, var(--accent), var(--border) 55%);
}

.site-footer{
  border-top:1px solid color-mix(in srgb, var(--accent), var(--border) 60%);
  background: linear-gradient(180deg, rgba(4,7,16,.85), rgba(4,7,16,.95));
}
.footer-chip{
  background: color-mix(in srgb, var(--accent), transparent 86%);
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 60%);
}
.footer-cta-card{
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent), transparent 70%), color-mix(in srgb, var(--card), var(--accent) 8%));
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 55%);
}