/* ============================================================
   Panther Defense — shared styles
   Loaded by all pages via <link rel="stylesheet" href="/apps/common.css">
   ============================================================ */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* THEME VARIABLES */
:root {
  --bg:           #080e1c;
  --surface:      #060b18;
  --panel:        #0d1628;
  --input:        #111e35;
  --text:         #dce8f8;
  --text-dim:     #7a96bb;
  --text-muted:   #3d5470;
  --nav-bg:       rgba(6,11,24,0.96);
  --heading-color: #ffffff;
  --callout-text:  #dce8f8;
}
html.light {
  --bg:            #f0f4fc;
  --surface:       #e6edf9;
  --panel:         #dce8f6;
  --input:         #eaf1fc;
  --text:          #0f1c35;
  --text-dim:      #3a5580;
  --text-muted:    #8aa3c8;
  --nav-bg:        rgba(240,244,252,0.97);
  --heading-color: #0a1828;
  --callout-text:  #0f1c35;
}
html.light strong { color: #0a1828; }

/* Permanently dark containers keep white headings, body text, and callout text regardless of theme */
.content-dark, .section-dark, .section.dark, .platform-band,
.pillar, .leader, .leader-card, .cap-section.dark {
  --heading-color: #ffffff;
  --callout-text:  #dce8f8;
  --text:          #dce8f8;
}

/* THEME TOGGLE */
.theme-toggle {
  background: transparent; border: 1px solid rgba(61,143,255,0.2);
  border-radius: 40px; padding: 5px 12px 5px 8px;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; flex-shrink: 0;
  font-family: 'Montserrat', sans-serif; user-select: none; transition: background 0.2s;
}
.theme-toggle:hover { background: var(--panel); }
.theme-toggle-icon { width: 20px; height: 20px; position: relative; flex-shrink: 0; }
.icon-sun, .icon-moon { position: absolute; inset: 0; transition: opacity 0.3s, transform 0.3s; }
.icon-sun  { opacity: 1; transform: scale(1); }
.icon-moon { opacity: 0; transform: scale(0.8) rotate(-30deg); }
html.light .icon-sun  { opacity: 0; transform: scale(0.8) rotate(30deg); }
html.light .icon-moon { opacity: 1; transform: scale(1); }
.theme-toggle-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); line-height: 1; }

/* BASE */
body { background: var(--bg); color: var(--text); font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; }

/* NAV */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,11,24,0.96); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(61,143,255,0.15);
  padding: 0 48px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo img { height: 36px; width: auto; object-fit: contain; display: block; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { color: #7a96bb; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: #dce8f8; font-weight:bold; }
.nav-cta { border: 1px solid #3d8fff; color: #3d8fff; padding: 8px 20px; font-size: 10px; font-family: 'Montserrat', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; text-decoration: none; transition: background 0.2s, color 0.2s; }
.nav-cta:hover { background: #3d8fff !important; color: #fff !important; }

/* PAGE HERO (inner pages) */
.page-hero {
  min-height: 40vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 80px 48px 60px;
  border-bottom: 1px solid rgba(61,143,255,0.12); position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(61,143,255,0.07) 0%, transparent 70%);
}
.hero-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #3d8fff; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; z-index: 1; }
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; display: block; width: 28px; height: 1px; background: #3d8fff; }
.page-hero-title { font-size: clamp(28px,5vw,54px); font-weight: 800; color: var(--heading-color); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 16px; position: relative; z-index: 1; }
.page-hero-sub { font-size: 16px; color: #7a96bb; max-width: 620px; line-height: 1.65; position: relative; z-index: 1; }

/* CTA BAND */
.cta-band { padding: 96px 48px; text-align: center; border-top: 1px solid rgba(61,143,255,0.12); }
.cta-title { font-size: clamp(26px,4vw,44px); font-weight: 800; color: var(--heading-color); letter-spacing: -0.02em; margin-bottom: 16px; }
.cta-sub { font-size: 16px; color: #7a96bb; margin-bottom: 40px; }
.btn-primary { background: #3d8fff; color: #fff; padding: 14px 32px; font-size: 11px; font-family: 'Montserrat', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.2s; }
.btn-primary:hover { background: #66aaff; }

/* FOOTER */
footer { background: #060b18; border-top: 1px solid rgba(61,143,255,0.12); padding: 36px 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-logo img { height: 28px; width: auto; display: block; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: #7a96bb; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: #dce8f8; }
.footer-copy { color: #7a96bb; font-size: 11px; }

/* SCROLL REVEAL */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* RESPONSIVE */
@media (max-width: 768px) {
  nav { padding: 0 20px; }
  footer { flex-direction: column; align-items: flex-start; padding: 32px 20px; }
  .cta-band { padding: 64px 20px; }
  .page-hero { padding: 60px 20px 48px; }
}