/* security.css — EleFence Security Division sub-brand
   Industrial charcoal + hazard-amber accent layered on the core EleFence tokens. */
:root {
  --sec-ink:      #121417;
  --sec-steel:    #1C2026;
  --sec-steel-2:  #252A31;
  --sec-line:     rgba(255,255,255,0.10);
  --sec-text:     #ECEEF0;
  --sec-muted:    rgba(236,238,240,0.68);
  --sec-amber:    #F2A93B;
  --sec-amber-dk: #D98E1F;
}

.sec-band {
  background: var(--sec-ink);
  color: var(--sec-text);
  position: relative;
}
.sec-band .section-title { color: var(--sec-text); }
.sec-band .section-sub { color: var(--sec-muted); }
.sec-band .section-eyebrow,
.sec-eyebrow { color: var(--sec-amber); }

.sec-stripe {
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--sec-amber) 0 14px, var(--sec-ink) 14px 28px);
}

.btn--amber {
  background: var(--sec-amber);
  color: #15120C;
  border-color: var(--sec-amber);
  box-shadow: 0 4px 16px rgba(242,169,59,0.28);
}
.btn--amber:hover { background: var(--sec-amber-dk); border-color: var(--sec-amber-dk); }
.btn--outline-light {
  background: transparent;
  color: var(--sec-text);
  border-color: rgba(255,255,255,0.35);
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* ---------- HERO ---------- */
.sec-hero {
  background:
    radial-gradient(ellipse at 85% 20%, rgba(242,169,59,0.10), transparent 55%),
    linear-gradient(160deg, #0F1114 0%, #1A1E24 60%, #121417 100%);
  color: var(--sec-text);
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
  overflow: hidden;
  position: relative;
}
.sec-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='48' x='24' fill='%23ffffff07'/%3E%3Crect width='48' height='1' y='24' fill='%23ffffff07'/%3E%3C/svg%3E");
  pointer-events: none;
}
.sec-hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
.sec-brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.sec-brand img { width: 52px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.sec-brand-text strong {
  display: block;
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sec-text);
}
.sec-brand-text span {
  display: block;
  font-family: var(--font-display); font-style: italic;
  color: var(--sec-amber); font-size: var(--text-base);
}
.sec-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.2rem + 4vw, 4.4rem);
  line-height: 1.05;
  color: #F6F4F0;
  margin-bottom: var(--space-5);
  max-width: 15ch;
}
.sec-hero h1 em { color: var(--sec-amber); font-style: italic; }
.sec-hero-sub {
  font-size: var(--text-lg);
  color: var(--sec-muted);
  max-width: 48ch;
  margin-bottom: var(--space-8);
}
.sec-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sec-hero-actions .btn { justify-content: center; }
.sec-status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--text-sm); color: var(--sec-muted);
}
.sec-status .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sec-amber);
  box-shadow: 0 0 0 4px rgba(242,169,59,0.18);
}
.sec-hero-art {
  background: linear-gradient(180deg, #1F242B, #161A1F);
  border: 1px solid var(--sec-line);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
}
.sec-hero-art svg { width: 100%; height: auto; }
.sec-hero-art figcaption {
  font-size: var(--text-xs); color: rgba(236,238,240,0.45);
  text-align: center; margin: var(--space-3) auto 0;
}

@media (min-width: 900px) {
  .sec-hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}
@media (max-width: 480px) {
  .sec-hero-actions .btn { width: 100%; }
}

/* ---------- FEATURE GRID ---------- */
.sec-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .sec-features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sec-features { grid-template-columns: repeat(3, 1fr); } }
.sec-feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.sec-feature .ico {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--sec-ink); color: var(--sec-amber);
  margin-bottom: var(--space-4);
}
.sec-feature h3 { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-2); color: var(--color-text); }
.sec-feature p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; }
.sec-feature .tag {
  display: inline-block; margin-top: var(--space-3);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); border: 1px solid currentColor; border-radius: var(--radius-full);
  padding: 2px 10px;
}

/* ---------- STEPS ---------- */
.sec-steps {
  list-style: none;
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  counter-reset: step;
}
@media (min-width: 760px) { .sec-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sec-steps { grid-template-columns: repeat(4, 1fr); } }
.sec-steps li {
  background: var(--sec-steel);
  border: 1px solid var(--sec-line);
  border-top: 3px solid var(--sec-amber);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  counter-increment: step;
  max-width: none;
}
.sec-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--sec-amber);
  margin-bottom: var(--space-2);
}
.sec-steps h3 { font-size: var(--text-base); font-weight: 700; color: var(--sec-text); margin-bottom: var(--space-2); }
.sec-steps p { font-size: var(--text-sm); color: var(--sec-muted); line-height: 1.65; }

/* ---------- AUDIENCE ---------- */
.sec-audience {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 760px) { .sec-audience { grid-template-columns: 1fr 1fr; } }
.sec-aud-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}
.sec-aud-card header {
  background: var(--sec-steel);
  color: var(--sec-text);
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; gap: var(--space-3);
}
.sec-aud-card header svg { color: var(--sec-amber); flex-shrink: 0; }
.sec-aud-card header h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.sec-aud-card .body { padding: var(--space-6); }
.sec-aud-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: 1.7; }
.sec-aud-card ul { list-style: none; display: grid; gap: var(--space-2); }
.sec-aud-card li {
  font-size: var(--text-sm); color: var(--color-text);
  padding-left: 1.4rem; position: relative;
}
.sec-aud-card li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; background: var(--sec-amber); transform: rotate(45deg);
}

/* ---------- PAIRING ---------- */
.sec-pair {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center;
}
@media (min-width: 900px) { .sec-pair { grid-template-columns: 1fr 1fr; } }
.sec-quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.15;
  color: var(--sec-text);
  border-left: 4px solid var(--sec-amber);
  padding-left: var(--space-6);
}
.sec-quote em { color: var(--sec-amber); }
.sec-pair-list { list-style: none; display: grid; gap: var(--space-4); }
.sec-pair-list li {
  background: var(--sec-steel-2); border: 1px solid var(--sec-line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  color: var(--sec-muted); font-size: var(--text-sm); line-height: 1.65; max-width: none;
}
.sec-pair-list strong { color: var(--sec-text); display: block; margin-bottom: 2px; font-size: var(--text-base); }

/* ---------- FAQ ---------- */
.sec-faq { display: flex; flex-direction: column; gap: var(--space-3); }
.sec-faq details {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.sec-faq summary {
  font-weight: 700; color: var(--color-text); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.sec-faq summary::-webkit-details-marker { display: none; }
.sec-faq summary svg { flex-shrink: 0; transition: transform var(--transition-interactive); }
.sec-faq details[open] summary svg { transform: rotate(180deg); }
.sec-faq p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); line-height: 1.7; }

/* ---------- FORM ---------- */
.sec-form-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
}
@media (min-width: 960px) { .sec-form-grid { grid-template-columns: 0.8fr 1.2fr; } }
.sec-form-aside h2 { color: var(--sec-text); }
.sec-form-aside ul { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.sec-form-aside li { color: var(--sec-muted); font-size: var(--text-sm); display: flex; gap: var(--space-3); }
.sec-form-aside li svg { color: var(--sec-amber); flex-shrink: 0; margin-top: 2px; }
.sec-form-aside a { color: var(--sec-amber); }
.sec-band .contact-form-wrap { border-color: transparent; box-shadow: var(--shadow-xl); }
.sec-form-wrap .form-group input[type="date"] { min-height: 3rem; }
.sec-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-left: 3px solid var(--sec-amber);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  line-height: 1.55;
  max-width: none;
}
.sec-band .sec-disclaimer--dark {
  background: rgba(255,255,255,0.04);
  color: var(--sec-muted);
}
.site-footer .sec-footer-disclaimer {
  font-size: var(--text-xs);
  opacity: 0.8;
  max-width: 80ch;
}

/* Inline links on dark bands (phone/email) - match amber accent, not browser blue */
.sec-band a:not(.btn),
.sec-band a:not(.btn):visited { color: var(--sec-amber); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.sec-band a:not(.btn):hover { color: #fff; }
.sec-form-wrap a:not(.btn), .sec-form-wrap a:not(.btn):visited { color: var(--sec-amber-dk); }