/* ===========================
   Momentum Theme CSS
   - Color palette, layout, hero, motion aesthetics
   - Extends base.css
   =========================== */

/* Override variables with the Momentum palette */
:root{
  --teal:#00B4D8;      /* Electric Teal */
  --charcoal:#2B2D42;  /* Charcoal Black */
  --neon:#9EF01A;      /* Neon Green */
  --white:#FFFFFF;     /* White */
  --ink:#0F141B;       /* Body text */
  --muted:#cfd2d8;     /* Light borders */
}

/* Header */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 3px solid var(--charcoal);
}
header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
}
.brand { display:flex; align-items:center; gap:12px; }
.brand svg { width: 38px; height: 38px; }
nav[aria-label="Primary"] a { color: var(--charcoal); font-weight: 800; margin-left: 18px; }
nav[aria-label="Primary"] a:hover { color: var(--teal); }

/* Hero: dynamic overlays, angled slab, subtle streaks */
.hero {
  position: relative; color: var(--white);
  min-height: 64vh; display: flex; align-items: center;
  background:
    linear-gradient(180deg, rgba(43,45,66,.82), rgba(43,45,66,.82)),
    url('https://images.unsplash.com/photo-1521417531039-47a0e77b0e37?q=80&w=1600&auto=format&fit=crop')
    center/cover no-repeat;
  overflow: hidden;
}
.hero::before {
  content:""; position:absolute; inset:-20% -10% auto -10%; height:58%;
  transform: skewY(-6deg);
  background: linear-gradient(90deg, rgba(0,180,216,.85), rgba(0,180,216,.1));
  filter: blur(.2px);
}
.hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.10) 0 1px, transparent 1px 28px);
  opacity:.35; mix-blend-mode: screen;
}
.hero .inner { position: relative; z-index: 1; padding: 72px 0; }
.kicker { color: var(--neon); text-transform: uppercase; letter-spacing: .18em; font-weight: 800; }
h1.hl { font-size: clamp(36px, 6vw, 72px); }

/* Angled section headings */
h2.hl {
  position: relative;
  font-size: clamp(26px, 3.5vw, 40px);
}
h2.hl::after {
  content:""; position:absolute; left:0; bottom:-10px; width:120px; height:8px;
  background: linear-gradient(90deg, var(--teal), var(--neon));
  transform: skewX(-12deg);
  border-radius: 6px;
}

/* Highlight band */
.band {
  background: var(--charcoal);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.band::before {
  content:""; position:absolute; inset:auto -10% 0 -10%; height:10px;
  background: var(--neon);
  transform: skewX(-12deg);
}
.items { display:flex; flex-wrap:wrap; gap:18px; }
.stat {
  flex:1 1 260px;
  background: rgba(255,255,255,.06);
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Buttons — Momentum glow & motion */
.btn-primary {
  background: var(--teal); color: var(--white);
  box-shadow: 0 10px 24px rgba(0,180,216,.25);
}
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(circle at 50% 50%,
    rgba(158,240,26,0.55) 0%,
    rgba(158,240,26,0) 70%);
  opacity: 0; transition: opacity .3s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(158,240,26,.4), 0 10px 24px rgba(0,180,216,.25);
}
.btn-primary:hover::after { opacity: .8; }

/* Utility to keep a constant glow when desired */
.btn--glow { animation: pulseGlow 2.2s infinite alternate; }

/* Forms */
input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 12px;
  margin: 8px 0 14px;
  border: 2px solid var(--muted);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,180,216,.15);
}

/* Footer */
footer {
  background: #171a24;
  color: #dfe5ee;
  padding: 28px 0;
  font-size: .95rem;
}
footer a { color: #cfe8ff; }

/* Logo hover accent (teal tile glow for fun/brand consistency) */
.brand svg:hover rect {
  filter: drop-shadow(0 0 10px rgba(0,180,216,.55));
}