/* ==========================================================================
   Kodiak Defense — palette system
   Two palettes: KD Light (default, also the :root fallback) and Cobalt.
   ========================================================================== */

:root {
  --c-bg:                  255 255 255;
  --c-surface:             239 244 249;
  --c-surface-elevated:    229 235 242;
  --c-surface-deep:        245 248 251;
  --c-line:                220 228 237;
  --c-line-soft:           229 235 242;
  --c-primary:             16 44 77;
  --c-accent:              22 144 194;
  --c-accent-soft:         59 178 224;
  --c-accent-glow:         22 144 194;
  --c-text:                12 30 51;
  --c-text-strong:         8 19 33;
  --c-muted:               92 107 126;
  --c-muted-soft:          126 141 159;
  --c-success:             21 128 61;
  --c-warning:             161 98 7;
  --c-danger:              185 28 28;
}

/* Cobalt — saturated royal blue */
html[data-palette="cobalt"] {
  --c-bg:                  5 11 26;
  --c-surface:             12 24 52;
  --c-surface-elevated:    19 34 70;
  --c-surface-deep:        3 7 18;
  --c-line:                19 34 70;
  --c-line-soft:           12 24 52;
  --c-primary:             29 78 216;
  --c-accent:              59 130 246;
  --c-accent-soft:         96 165 250;
  --c-accent-glow:         59 130 246;
  --c-text:                241 245 249;
  --c-text-strong:         255 255 255;
  --c-muted:               148 163 184;
  --c-muted-soft:          203 213 225;
  --c-success:             34 197 94;
  --c-warning:             251 191 36;
  --c-danger:              239 68 68;
}

/* KD Light — manager's light theme */
html[data-palette="kd-light"] {
  --c-bg:                  255 255 255;
  --c-surface:             239 244 249;
  --c-surface-elevated:    229 235 242;
  --c-surface-deep:        245 248 251;
  --c-line:                220 228 237;
  --c-line-soft:           229 235 242;
  --c-primary:             16 44 77;
  --c-accent:              22 144 194;
  --c-accent-soft:         59 178 224;
  --c-accent-glow:         22 144 194;
  --c-text:                12 30 51;
  --c-text-strong:         8 19 33;
  --c-muted:               92 107 126;
  --c-muted-soft:          126 141 159;
  --c-success:             21 128 61;
  --c-warning:             161 98 7;
  --c-danger:              185 28 28;
}

/* Scoped transitions for smooth palette swap */
body, header, footer, nav, section, main, aside, article, div, span, a, p,
h1, h2, h3, h4, h5, h6, button, input, textarea, select, label, img, svg, li {
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease,
              box-shadow 220ms ease, fill 220ms ease, stroke 220ms ease;
}

/* ==========================================================================
   Base + utility styles
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
  background-color: rgb(var(--c-bg) / 1);
  color: rgb(var(--c-text) / 1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgb(var(--c-accent) / 0.28);
  color: rgb(var(--c-text-strong) / 1);
}

/* Hero gradient mesh */
.mesh-hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 18% 28%, rgb(var(--c-accent) / 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 82% 72%, rgb(var(--c-primary) / 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgb(var(--c-accent-glow) / 0.10) 0%, transparent 70%);
  filter: blur(2px);
  animation: mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50%  { transform: translate3d(2%, -1%, 0) scale(1.04); opacity: 0.92; }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); opacity: 1; }
}

.dots-grid {
  background-image: radial-gradient(rgb(var(--c-accent) / 0.10) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Hide material-symbol spans until the icon font has loaded,
   so users never see "arrow_forward" as raw text on a hard refresh. */
.material-symbols-outlined { visibility: hidden; }
html.fonts-loaded .material-symbols-outlined { visibility: visible; }

.glass {
  background: rgb(var(--c-surface) / 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgb(var(--c-line) / 1);
}
.glass-strong {
  background: rgb(var(--c-surface) / 0.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgb(var(--c-line) / 1);
}

.lift {
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1.0),
              border-color 280ms ease, box-shadow 280ms ease, background-color 280ms ease;
}
.lift:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--c-accent) / 0.5);
  box-shadow: 0 24px 48px -24px rgb(var(--c-accent-glow) / 0.25);
}

.gradient-border {
  position: relative;
  isolation: isolate;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(var(--c-accent) / 0.55), rgb(var(--c-line) / 0.8) 30%,
    rgb(var(--c-line) / 0.4) 70%, rgb(var(--c-accent) / 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.ops-card {
  background: linear-gradient(180deg, rgb(var(--c-surface) / 0.92) 0%, rgb(var(--c-surface-deep) / 0.92) 100%);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 1px 0 0 rgb(var(--c-accent) / 0.16) inset,
              0 24px 64px -24px rgb(var(--c-accent-glow) / 0.30),
              0 0 0 1px rgb(var(--c-line) / 1);
}
.ops-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgb(var(--c-accent) / 0.32), transparent 60%);
  z-index: -1;
  filter: blur(20px);
  opacity: 0.6;
}

.severity-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.severity-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: severity-pulse 2.2s ease-out infinite;
}
.severity-dot.s-info    { color: rgb(var(--c-accent) / 1); background: currentColor; }
.severity-dot.s-success { color: rgb(var(--c-success) / 1); background: currentColor; }
.severity-dot.s-warn    { color: rgb(var(--c-warning) / 1); background: currentColor; }
.severity-dot.s-danger  { color: rgb(var(--c-danger) / 1); background: currentColor; }
@keyframes severity-pulse {
  0%   { transform: scale(0.6); opacity: 0.45; }
  100% { transform: scale(2.2); opacity: 0; }
}

.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgb(var(--c-success) / 1);
  box-shadow: 0 0 0 0 rgb(var(--c-success) / 0.5);
  animation: live-blink 1.6s ease-in-out infinite;
}
@keyframes live-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--c-success) / 0.5); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--c-success) / 0); }
}

/* hidden only when JavaScript is there to reveal it again */
html.kd-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1.0),
              transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1.0);
}
html.kd-js .reveal.is-visible { opacity: 1; transform: translateY(0); }

.stat-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
/* The commitment bands hold words ("Nationwide", "24/7/365"), which are wider
   than the numbers this band was drawn for. On phones (two columns) and on
   small laptops (four columns) scale them to the column so nothing runs off
   the screen. Tablets and screens 1440px and wider keep the original size. */
@media (max-width: 639px) {
  html .stat-num { font-size: min(3rem, 6.6vw); line-height: 1.1; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  html .stat-num { font-size: 3.6vw; }
}

.u-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.u-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1.0);
}
.u-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* CTA buttons — works across all palettes including KD Light */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  background: rgb(var(--c-accent) / 1);
  color: rgb(var(--c-bg) / 1);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid rgb(var(--c-accent) / 1);
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 8px 24px -8px rgb(var(--c-accent) / 0.5);
}
.btn-primary:hover {
  background: rgb(var(--c-accent-soft) / 1);
  border-color: rgb(var(--c-accent-soft) / 1);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -10px rgb(var(--c-accent) / 0.6);
}

/* In KD Light, accent is a deep cyan -- text on it should be white */
html[data-palette="kd-light"] .btn-primary { color: #FFFFFF; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  background: transparent;
  color: rgb(var(--c-text) / 1);
  border: 1px solid rgb(var(--c-line) / 1);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.btn-ghost:hover {
  background: rgb(var(--c-surface) / 0.7);
  border-color: rgb(var(--c-accent) / 0.5);
  color: rgb(var(--c-text-strong) / 1);
}

.site-header {
  background: rgb(var(--c-bg) / 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgb(var(--c-line) / 1);
}

/* In KD Light, convert white logo to dark */
html[data-palette="kd-light"] img[src*="kd-logo-white"] {
  filter: brightness(0) saturate(100%) invert(11%) sepia(48%) saturate(2360%)
          hue-rotate(196deg) brightness(0.55) contrast(1.05);
}

/* ==========================================================================
   Dark / light button in the header (shown only when JavaScript runs)
   ========================================================================== */
.kd-mode-toggle { display: none; }
html.kd-js .kd-mode-toggle { display: inline-flex; }
/* the icon font may arrive late: until it does the ligature is plain text, so keep it inside the button */
.kd-mode-toggle { overflow: hidden; flex-shrink: 0; }
.kd-mode-toggle .material-symbols-outlined { width: 20px; overflow: hidden; }
.kd-mode-toggle .kd-mode-sun { display: none; }
html[data-palette="cobalt"] .kd-mode-toggle .kd-mode-sun { display: block; }
html[data-palette="cobalt"] .kd-mode-toggle .kd-mode-moon { display: none; }
.kd-mode-toggle:focus-visible { outline: 2px solid rgb(var(--c-accent) / 1); outline-offset: 2px; }

/* ==========================================================================
   Form feedback
   ========================================================================== */
.kd-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kd-form-note { margin-top: 16px; font-size: 14px; line-height: 1.5; color: rgb(var(--c-success) / 1); }
.kd-form-note.is-error { color: rgb(var(--c-danger) / 1); }
.kd-form-flag { display: none; margin: 0 0 20px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.kd-form-flag:target { display: block; }
.kd-form-flag--ok { color: rgb(var(--c-success) / 1); background: rgb(var(--c-success) / 0.08); border: 1px solid rgb(var(--c-success) / 0.3); }
.kd-form-flag--error { color: rgb(var(--c-danger) / 1); background: rgb(var(--c-danger) / 0.08); border: 1px solid rgb(var(--c-danger) / 0.3); }
button[disabled].btn-primary { opacity: 0.75; cursor: default; }