/* Proximity Security Systems Ltd — main stylesheet
   Light/dark editorial design: white + soft gray sections, near-black
   dark sections, neon-green accent. Mobile-first. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/poppins-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/poppins-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --neon: #00ff00;
  --neon-dim: rgba(0, 255, 0, 0.14);
  --neon-dark: #00d900;
  --green-ink: #009e4c;
  --green-ink-soft: #e6f7ec;
  --bg: #ffffff;
  --bg-soft: #f3f5f6;
  --ink: #0e1214;
  --body: #4c575f;
  --body-light: #a7b0b6;
  --dark: #060806;
  --dark-2: #0d0f0d;
  --line: #e2e8ea;
  --line-dark: #232723;
  --radius: 18px;
  --radius-lg: 24px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-ink); }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0 0 0.6em; letter-spacing: -0.02em; font-weight: 600; }
p { margin: 0 0 1em; }

.container { width: min(1180px, 92%); margin: 0 auto; }
.section { padding: 5rem 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--dark); color: #fff; }

/* Eyebrow / kicker */
.kicker {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--green-ink); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.kicker::before { content: ""; width: 2.1rem; height: 2px; background: currentColor; display: inline-block; }
.section-dark .kicker { color: var(--neon); }

.section-title { font-size: clamp(2rem, 4.6vw, 3.1rem); color: var(--ink); max-width: 22ch; }
.section-dark .section-title { color: #fff; }
.lead { font-size: 1.08rem; color: var(--body); max-width: 42rem; }
.section-dark .lead { color: var(--body-light); }

/* Dark-section component overrides — match the mockup: no white surfaces */
.section-dark .dealer-copy p { color: var(--body-light); }
.section-dark .checklist li { color: #fff; }
.section-dark .checklist svg { color: var(--neon); }
.section-dark .step h3 { color: #fff; }
.section-dark .step p { color: var(--body-light); }
.section-dark .step-num { background: #161a16; color: #fff; }
@media (min-width: 1080px) { .section-dark .step::after { border-color: #2a302a; } }
.section-dark .why-card { background: #0d100d; border-color: #1f251f; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.section-dark .why-body h2 { color: #fff; }
.section-dark .why-list h3 { color: #fff; }
.section-dark .why-list p { color: var(--body-light); }
.section-dark .why-check { background: rgba(0, 255, 0, 0.10); color: var(--neon); }
.section-dark .form-card { background: #101311; border-color: #222822; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.section-dark .field label { color: #fff; }
.section-dark .field input, .section-dark .field select, .section-dark .field textarea {
  background: #0a0c0a; border-color: #2a302a; color: #fff;
}
.section-dark .field input:focus, .section-dark .field select:focus, .section-dark .field textarea:focus {
  background: #0a0c0a; border-color: var(--neon-dark);
}
.section-dark .form-note { color: var(--body-light); }
.section-dark .quote-grid > div > p { color: var(--body-light); }
.section-dark .contact-line h3 { color: #fff; }
.section-dark .contact-line p, .section-dark .contact-line a { color: var(--body-light); }
.section-dark .contact-line .ico { background: rgba(0, 255, 0, 0.10); color: var(--neon); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6, 8, 6, 0.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
}
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.65rem 0;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img { height: 54px; width: auto; }

.main-nav { display: none; align-items: center; gap: 0.25rem; }
.main-nav a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 0.55rem 0.8rem; border-radius: 8px; white-space: nowrap;
}
.main-nav a:hover { color: var(--neon); }
.header-phone {
  display: none; color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem;
  white-space: nowrap;
}
.header-phone:hover { color: var(--neon); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.btn-quote {
  display: none; align-items: center; justify-content: center;
  background: var(--neon); color: #04140a; font-weight: 800; font-size: 0.95rem;
  padding: 0.75rem 1.5rem; border-radius: 10px; text-decoration: none; white-space: nowrap;
  transition: transform 0.15s ease, background 0.2s ease;
}
.btn-quote:hover { background: var(--neon-dark); transform: translateY(-1px); }

.sound-toggle {
  background: #141614; border: 1px solid var(--line-dark); color: var(--body-light);
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.sound-toggle svg { width: 20px; height: 20px; }
.sound-toggle[aria-pressed="true"] { color: var(--neon); border-color: #2f5a35; }
.nav-toggle {
  background: #141614; border: 1px solid var(--line-dark); color: #fff;
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer; font-size: 1.25rem; flex: none;
}
.mobile-nav {
  display: none; flex-direction: column; gap: 0.25rem;
  padding: 0.75rem 4% 1rem; border-top: 1px solid var(--line-dark); background: #0a0c0a;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  color: #fff; text-decoration: none; font-weight: 600;
  padding: 0.8rem 0.6rem; border-radius: 10px; font-size: 1.05rem;
}
.mobile-nav a:hover, .mobile-nav a.active { color: var(--neon); background: rgba(0,255,0,0.07); }
.mobile-nav .header-phone { display: block; }

@media (min-width: 960px) {
  .main-nav { display: flex; }
  .header-phone { display: inline; }
  .btn-quote { display: inline-flex; }
  .nav-toggle, .mobile-nav { display: none !important; }
  .brand img { height: 60px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: var(--neon); color: #04140a; font-weight: 800; font-size: 1rem;
  padding: 1rem 1.9rem; border-radius: 12px; border: none; cursor: pointer;
  text-decoration: none; min-height: 54px;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { background: var(--neon-dark); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-outline {
  background: rgba(10, 12, 10, 0.45); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn-outline:hover { background: rgba(10, 12, 10, 0.65); border-color: #fff; }

/* ---------- Hero (photo + matrix rain + frames) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--dark) url("/assets/hero-home.webp") center 50% / cover no-repeat;
  color: #fff;
}
.hero-photo-fallback { background-color: var(--dark); }
#matrix-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.hero-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(4,6,4,0.92) 0%, rgba(4,6,4,0.72) 34%, rgba(4,6,4,0.25) 62%, rgba(4,6,4,0.45) 100%),
    linear-gradient(to top, rgba(4,6,4,0.85) 0%, transparent 32%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}
.hero-frame {
  position: absolute; z-index: 3; pointer-events: none;
  border: 1px solid rgba(0, 255, 0, 0.28);
}
.hero-frame.f1 { top: 16%; right: 9%; width: 150px; height: 190px; border-radius: 28px; }
.hero-frame.f2 { bottom: 14%; right: 26%; width: 110px; height: 110px; border-radius: 50%; border-color: rgba(0,255,0,0.18); }
.hero-frame.f3 { bottom: 8%; left: 4%; width: 120px; height: 120px; transform: rotate(45deg); border-radius: 18px; border-color: rgba(0,255,0,0.14); }
@media (max-width: 700px) { .hero-frame { display: none; } }

.hero-inner { position: relative; z-index: 4; padding: 9.5rem 0 8.5rem; max-width: 1180px; text-align: left; }
.hero .kicker { color: var(--neon); }
.hero-inner .kicker::before { content: "—"; margin-right: 0.7em; }
.hero h1 {
  font-size: clamp(2.7rem, 7.2vw, 5rem); color: #eef1ef; font-weight: 600;
  margin: 0 0 1.4rem; max-width: 16ch;
}
.hero .sub {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: #dfe5e2;
  max-width: 38rem; margin: 0 0 2.2rem;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.2rem; justify-content: flex-start; }
.hero-warranty {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.7rem;
  color: #cfd6d2; font-size: 0.98rem;
}
.hero-warranty svg { width: 24px; height: 24px; color: var(--neon); flex: none; }
.hero-warranty strong { color: #fff; }

/* Glitch effect — 1:1 port of the WordPress mockup.
   Hero h1s triplicate their text into two absolutely-positioned
   duplicate layers (cyan left / magenta right) running pure CSS
   infinite slice cycles. Body headings use ::before/::after layers
   fed by data-glitch-text, fired once via JS (.glitch-once).
   Everything is gated on body.motion-enabled. */
.hero h1, .detail-hero h1 { position: relative; isolation: isolate; }
.glitch-copy { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.glitch-copy-a { color: #55ffe8; text-shadow: -3px 0 rgba(0,255,218,.72); }
.glitch-copy-b { color: #ff315d; text-shadow: 3px 0 rgba(255,30,83,.68); }
.ambient-glitch { position: relative; isolation: isolate; }
.ambient-glitch::before, .ambient-glitch::after {
  content: attr(data-glitch-text);
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; color: currentColor;
}
.ambient-glitch::before { color: #19f2d0; text-shadow: -3px 0 rgba(0,255,218,.72); }
.ambient-glitch::after { color: #ff315d; text-shadow: 3px 0 rgba(255,30,83,.65); }

/* Hero cycles */
.motion-enabled .hero h1 .glitch-copy-a { animation: glitchLeftCycle 6.4s steps(2,end) 1.6s infinite; }
.motion-enabled .hero h1 .glitch-copy-b { animation: glitchRightCycle 6.4s steps(2,end) 1.6s infinite; }
.motion-enabled .hero h1:hover .glitch-copy-a { animation: glitchLeftHover 2.2s steps(2,end) infinite; }
.motion-enabled .hero h1:hover .glitch-copy-b { animation: glitchRightHover 2.2s steps(2,end) infinite; }
.motion-enabled .detail-hero h1 .glitch-copy-a { animation: serviceGlitchLeftCycle 5.2s steps(2,end) .7s infinite; }
.motion-enabled .detail-hero h1 .glitch-copy-b { animation: serviceGlitchRightCycle 5.2s steps(2,end) .7s infinite; }
.motion-enabled .detail-hero h1:hover .glitch-copy-a { animation: glitchLeftHover 2.2s steps(2,end) infinite; }
.motion-enabled .detail-hero h1:hover .glitch-copy-b { animation: glitchRightHover 2.2s steps(2,end) infinite; }
/* Accent headings: one-shot burst on scroll into view */
.motion-enabled .ambient-glitch.glitch-once::before { animation: ambientGlitchA .86s steps(2,end) 1; }
.motion-enabled .ambient-glitch.glitch-once::after { animation: ambientGlitchB .86s steps(2,end) 1; }
/* Persistent heading loop */
.motion-enabled .ambient-glitch.persistent-glitch::before { animation: serviceGlitchLeftCycle 5.8s steps(2,end) 1.2s infinite; }
.motion-enabled .ambient-glitch.persistent-glitch::after { animation: serviceGlitchRightCycle 5.8s steps(2,end) 1.2s infinite; }

@keyframes glitchLeftCycle {
  0%,8%,16%,100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  9% { opacity: .78; transform: translate(-5px,0); clip-path: inset(12% 0 70% 0); }
  11% { opacity: .62; transform: translate(3px,0); clip-path: inset(48% 0 34% 0); }
  13% { opacity: .72; transform: translate(-3px,0); clip-path: inset(75% 0 9% 0); }
  15% { opacity: .42; transform: translate(2px,0); clip-path: inset(28% 0 56% 0); }
}
@keyframes glitchRightCycle {
  0%,8.5%,16.5%,100% { opacity: 0; transform: none; clip-path: inset(100% 0 0 0); }
  9.5% { opacity: .72; transform: translate(5px,0); clip-path: inset(24% 0 58% 0); }
  11.5% { opacity: .58; transform: translate(-3px,0); clip-path: inset(62% 0 20% 0); }
  13.5% { opacity: .68; transform: translate(4px,0); clip-path: inset(8% 0 77% 0); }
  15.5% { opacity: .38; transform: translate(-2px,0); clip-path: inset(70% 0 13% 0); }
}
@keyframes serviceGlitchLeftCycle {
  0%,7%,14%,47%,56%,100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  8% { opacity: .94; transform: translate(-7px,-1px); clip-path: inset(8% 0 73% 0); }
  10% { opacity: .76; transform: translate(4px,1px); clip-path: inset(42% 0 38% 0); }
  12% { opacity: .88; transform: translate(-5px,0); clip-path: inset(72% 0 8% 0); }
  48% { opacity: .82; transform: translate(-6px,0); clip-path: inset(24% 0 58% 0); }
  51% { opacity: .68; transform: translate(5px,-1px); clip-path: inset(57% 0 23% 0); }
  54% { opacity: .8; transform: translate(-4px,1px); clip-path: inset(80% 0 6% 0); }
}
@keyframes serviceGlitchRightCycle {
  0%,7.5%,14.5%,47.5%,56.5%,100% { opacity: 0; transform: none; clip-path: inset(100% 0 0 0); }
  8.5% { opacity: .9; transform: translate(7px,1px); clip-path: inset(20% 0 61% 0); }
  10.5% { opacity: .72; transform: translate(-4px,-1px); clip-path: inset(61% 0 19% 0); }
  12.5% { opacity: .84; transform: translate(5px,0); clip-path: inset(5% 0 78% 0); }
  48.5% { opacity: .78; transform: translate(6px,0); clip-path: inset(36% 0 45% 0); }
  51.5% { opacity: .64; transform: translate(-5px,1px); clip-path: inset(68% 0 15% 0); }
  54.5% { opacity: .76; transform: translate(4px,-1px); clip-path: inset(12% 0 70% 0); }
}
@keyframes glitchLeftHover {
  0%,16%,100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  18% { opacity: .8; transform: translate(-5px,0); clip-path: inset(14% 0 68% 0); }
  23% { opacity: .58; transform: translate(3px,0); clip-path: inset(58% 0 24% 0); }
  28% { opacity: .7; transform: translate(-3px,0); clip-path: inset(78% 0 8% 0); }
}
@keyframes glitchRightHover {
  0%,17%,100% { opacity: 0; transform: none; clip-path: inset(100% 0 0 0); }
  19% { opacity: .74; transform: translate(5px,0); clip-path: inset(30% 0 52% 0); }
  24% { opacity: .55; transform: translate(-3px,0); clip-path: inset(66% 0 18% 0); }
  29% { opacity: .66; transform: translate(4px,0); clip-path: inset(10% 0 74% 0); }
}
@keyframes ambientGlitchA {
  0%,10%,44%,100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  13% { opacity: .66; transform: translate(-4px,0); clip-path: inset(12% 0 70% 0); }
  21% { opacity: .48; transform: translate(3px,0); clip-path: inset(55% 0 27% 0); }
  30% { opacity: .6; transform: translate(-3px,0); clip-path: inset(76% 0 8% 0); }
  39% { opacity: .35; transform: translate(2px,0); clip-path: inset(31% 0 51% 0); }
}
@keyframes ambientGlitchB {
  0%,12%,46%,100% { opacity: 0; transform: none; clip-path: inset(100% 0 0 0); }
  15% { opacity: .6; transform: translate(4px,0); clip-path: inset(28% 0 54% 0); }
  23% { opacity: .44; transform: translate(-3px,0); clip-path: inset(65% 0 18% 0); }
  32% { opacity: .55; transform: translate(3px,0); clip-path: inset(8% 0 76% 0); }
  41% { opacity: .31; transform: translate(-2px,0); clip-path: inset(72% 0 12% 0); }
}

/* ---------- Trust bar ---------- */
.trustbar { background: #0a0c0a; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.trustbar-grid {
  display: grid; grid-template-columns: 1fr; 
}
.trust-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.6rem 1.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.trust-item:last-child { border-bottom: none; }
.trust-item svg { width: 30px; height: 30px; color: var(--neon); flex: none; }
.trust-item h3 { color: #fff; font-size: 1.02rem; margin: 0 0 0.15rem; letter-spacing: -0.01em; }
.trust-item p { color: var(--body-light); font-size: 0.9rem; margin: 0; }
@media (min-width: 860px) {
  .trustbar-grid { grid-template-columns: repeat(4, 1fr); }
  .trust-item { border-bottom: none; border-left: 1px solid var(--line-dark); }
  .trust-item:first-child { border-left: none; }
}

/* ---------- Dealer strip ---------- */
.dealer-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .dealer-grid { grid-template-columns: 1fr 1.4fr; } }
.dealer-copy p { color: var(--body); font-size: 1.05rem; margin: 0; }
.dealer-cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .dealer-cards { grid-template-columns: 1fr 1fr; } }
.dealer-card {
  border-radius: var(--radius); padding: 2.4rem 2rem;
  display: flex; align-items: center; justify-content: center; min-height: 172px;
  background: #0b0e0c; border: 1px solid #1d2320;
}
.dealer-card img { height: 62px; width: auto; max-width: 80%; object-fit: contain; }
.dealer-card img.alarmcom-logo { height: 58px; }

/* ---------- Service cards ---------- */
.services-grid {
  display: grid; gap: 1.25rem; margin-top: 2.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(4, 1fr); } }
.service-card {
  background: #0d100d; border: 1px solid #1f251f; border-radius: var(--radius);
  padding: 1.9rem 1.6rem; text-decoration: none; color: #e9ede9;
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px); border-color: #2f3a2f;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.service-icon {
  width: 56px; height: 56px; border-radius: 15px; flex: none;
  background: var(--green-ink-soft); color: var(--green-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.service-icon svg { width: 28px; height: 28px; }
.service-card h3 { color: #fff; font-size: 1.16rem; margin: 0; letter-spacing: -0.02em; }
.service-card p { margin: 0; font-size: 0.95rem; color: #a7b0a8; flex: 1; }
.service-card .card-link { color: var(--neon); font-weight: 800; font-size: 0.95rem; }
.section-dark .service-icon { background: rgba(0, 255, 0, 0.10); color: var(--neon); }

/* ---------- Dark split panels ---------- */
.split-dark { background: var(--dark); color: #fff; }
.split-row { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split-row { grid-template-columns: 1.05fr 1fr; } }
.split-photo { min-height: 320px; position: relative; overflow: hidden; }
.split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .split-photo { min-height: 520px; } }
.split-panel { padding: 3.5rem 8%; display: flex; flex-direction: column; justify-content: center; }
.split-panel .kicker { color: var(--neon); }
.split-panel h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.7rem); max-width: 18ch; }
.split-panel > p { color: var(--body-light); font-size: 1.05rem; max-width: 34rem; }
.checkline { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.checkline li { display: flex; gap: 0.8rem; align-items: flex-start; color: #e8ece9; font-size: 1.02rem; font-weight: 500; }
.checkline svg { width: 22px; height: 22px; color: var(--neon); flex: none; margin-top: 0.15rem; }

/* ---------- Monitoring plans ---------- */
.monitor-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .monitor-grid { grid-template-columns: 1fr 1.25fr; } }
.checklist { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.checklist li { display: flex; gap: 0.8rem; align-items: flex-start; font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.checklist svg { width: 22px; height: 22px; color: var(--green-ink); flex: none; margin-top: 0.15rem; }
.plans { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  border-radius: var(--radius-lg); padding: 2.1rem 1.9rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.plan.light { background: #fff; border: 1px solid var(--line); }
.plan.dark { background: #0b0d0b; color: #fff; border: 1px solid #222822; }
.plan .plan-tag {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green-ink); margin-bottom: 0.4rem;
}
.plan.dark .plan-tag { color: var(--neon); }
.plan .price { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.plan.dark .price { color: #fff; }
.plan .price sup { font-size: 1.3rem; vertical-align: super; font-weight: 700; }
.plan .price small { font-size: 1rem; font-weight: 600; color: var(--body); letter-spacing: 0; }
.plan.dark .price small { color: var(--body-light); }
.plan > p { font-size: 0.98rem; color: var(--body); margin: 0.4rem 0 1rem; }
.plan.dark > p { color: var(--body-light); }
.plan .plan-foot {
  border-top: 1px solid var(--line); margin-top: auto; padding-top: 1.1rem;
  font-weight: 700; color: var(--ink); font-size: 0.98rem;
}
.plan.dark .plan-foot { border-color: var(--line-dark); color: #fff; }

/* ---------- Process ---------- */
.steps { display: grid; gap: 2rem; margin-top: 3rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: 0.4rem; }
.step-num {
  width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; margin-bottom: 1.2rem; position: relative; z-index: 1;
}
.step h3 { font-size: 1.12rem; margin-bottom: 0.45rem; color: var(--ink); }
.step p { color: var(--body); font-size: 0.97rem; margin: 0; }
@media (min-width: 1080px) {
  .step::after {
    content: ""; position: absolute; top: 26px; left: 64px; right: -8px;
    border-top: 2px dashed #c9d2d6;
  }
  .step:last-child::after { display: none; }
}

/* ---------- Why card ---------- */
.why-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: grid; grid-template-columns: 1fr;
  box-shadow: 0 24px 60px rgba(10, 25, 16, 0.10);
}
@media (min-width: 900px) { .why-card { grid-template-columns: 1fr 1.15fr; } }
.why-photo { min-height: 300px; position: relative; }
.why-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .why-photo { min-height: 560px; } }
.why-body { padding: 3rem 7%; }
.why-body h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--ink); }
.why-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.7rem; }
.why-list li { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; }
.why-check {
  width: 46px; height: 46px; border-radius: 50%; background: var(--green-ink-soft);
  color: var(--green-ink); display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.why-check svg { width: 22px; height: 22px; }
.why-list h3 { font-size: 1.08rem; margin: 0 0 0.3rem; color: var(--ink); }
.why-list p { margin: 0; color: var(--body); font-size: 0.97rem; }

/* ---------- Service area ---------- */
.area-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .area-grid { grid-template-columns: 1fr 1.4fr; } }
.area-grid h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); }
.area-grid > div > p { color: var(--body-light); font-size: 1.05rem; max-width: 26rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chip {
  background: #121412; border: 1px solid #2c302c; color: #fff;
  padding: 0.65rem 1.25rem; border-radius: 10px; font-size: 0.95rem; font-weight: 600;
}

/* ---------- Quote section ---------- */
.quote-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .quote-grid { grid-template-columns: 1fr 1.35fr; } }
.quote-grid h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.quote-grid > div > p { color: var(--body); font-size: 1.05rem; }
.contact-lines { margin-top: 2.2rem; display: grid; gap: 1.4rem; }
.contact-line { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: start; }
.contact-line .ico {
  width: 52px; height: 52px; border-radius: 14px; background: var(--green-ink-soft);
  color: var(--green-ink); display: inline-flex; align-items: center; justify-content: center;
}
.contact-line .ico svg { width: 24px; height: 24px; }
.contact-line h3 { font-size: 0.95rem; margin: 0 0 0.15rem; color: var(--ink); }
.contact-line p, .contact-line a { margin: 0; color: var(--body); font-size: 0.98rem; text-decoration: none; }
.contact-line a:hover { color: var(--green-ink); }

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2.2rem; box-shadow: 0 24px 60px rgba(10, 25, 16, 0.10);
}
@media (min-width: 640px) { .form-card { padding: 2.8rem; } }
.field { margin-bottom: 1.2rem; }
.field label { display: block; color: var(--ink); font-weight: 700; margin-bottom: 0.45rem; font-size: 0.92rem; }
.field input, .field select, .field textarea {
  width: 100%; background: #f4f6f7; border: 1px solid #dfe5e7;
  color: var(--ink); border-radius: 12px; padding: 0.9rem 1rem; font-size: 1rem;
  font-family: inherit; min-height: 52px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(0, 158, 76, 0.15);
  background: #fff;
}
.field .error-msg { display: none; color: #c81e1e; font-size: 0.86rem; margin-top: 0.4rem; font-weight: 600; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #c81e1e; }
.field.invalid .error-msg { display: block; }
.form-status { margin-top: 1.1rem; font-weight: 700; display: none; font-size: 0.97rem; }
.form-status.success { display: block; color: var(--green-ink); }
.form-status.error { display: block; color: #c81e1e; }
.form-row { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-note { color: var(--body); font-size: 0.88rem; margin: 1rem 0 0; }

/* ---------- Service detail pages ---------- */
.detail-hero {
  position: relative; overflow: hidden;
  background: var(--dark) url("/assets/hero-home.webp") center 30% / cover no-repeat;
  color: #fff;
}
.detail-hero.hero-automation {
  background-image: url("/assets/automation-panel.jpg");
}
.detail-hero.hero-vacuum {
  background-image: url("/assets/central-vacuum.jpg");
}
.detail-hero.hero-cctv {
  background-image: url("/assets/security-camera.webp");
}
.detail-hero.hero-access {
  background-image: url("/assets/access-control.webp");
}
.detail-hero.hero-intercom {
  background-image: url("/assets/intercom.webp");
}
.detail-hero.hero-wiring {
  background-image: url("/assets/structured-wiring.webp");
}
.detail-hero.hero-sound {
  background-image: url("/assets/sound-system.webp");
}
.back-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem; margin-bottom: 2rem;
}
.back-link:hover { color: var(--neon); }
.back-link svg { width: 16px; height: 16px; }
.detail-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); color: #fff; max-width: 16ch; }
.detail-hero .sub { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: #dfe5e2; max-width: 38rem; margin-bottom: 2rem; }
.detail-hero .hero-cta { margin-bottom: 0; }

.included-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .included-grid { grid-template-columns: 1fr 1.3fr; } }
.included-list { display: grid; }
.included-item {
  display: grid; grid-template-columns: 52px 1fr; gap: 1.2rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--line); align-items: start;
}
.included-item:first-child { border-top: 1px solid var(--line); }
.included-num { color: var(--green-ink); font-weight: 800; font-size: 0.95rem; padding-top: 0.2rem; }
.included-item h3 { font-size: 1.1rem; margin: 0 0 0.35rem; color: var(--ink); }
.included-item p { margin: 0; color: var(--body); font-size: 0.98rem; }
.section-dark .included-item { border-color: var(--line-dark); }
.section-dark .included-item:first-child { border-top-color: var(--line-dark); }
.section-dark .included-item h3 { color: #fff; }
.section-dark .included-item p { color: var(--body-light); }
.section-dark .photo-card { background: #0d100d; border-color: #222822; box-shadow: none; }
.section-dark .photo-card-body h2 { color: #fff; }
.section-dark .photo-card-body > p { color: var(--body-light); }
.section-dark .dealer-note { color: var(--body-light); }

.hiw-grid { display: grid; gap: 2rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .hiw-grid { grid-template-columns: repeat(3, 1fr); } }
.hiw { border-left: 1px solid var(--line-dark); padding-left: 1.5rem; }
.hiw svg { width: 24px; height: 24px; color: var(--neon); margin-bottom: 0.9rem; }
.hiw h3 { color: #fff; font-size: 1.15rem; margin-bottom: 0.5rem; }
.hiw p { color: var(--body-light); font-size: 0.97rem; margin: 0; }

.photo-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: grid; grid-template-columns: 1fr;
  box-shadow: 0 24px 60px rgba(10, 25, 16, 0.10);
}
@media (min-width: 900px) { .photo-card { grid-template-columns: 1fr 1fr; } }
.photo-card .why-photo { min-height: 280px; }
@media (min-width: 900px) { .photo-card .why-photo { min-height: 480px; } }
.photo-card-body { padding: 3rem 7%; display: flex; flex-direction: column; justify-content: center; }
.photo-card-body h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); color: var(--ink); }
.photo-card-body > p { color: var(--body); font-size: 1.03rem; }
.dealer-note {
  display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1.4rem;
  color: var(--body); font-size: 0.97rem;
}
.dealer-note svg { width: 20px; height: 20px; color: var(--green-ink); flex: none; margin-top: 0.2rem; }

.cta-card {
  background: #0b0d0b; border: 1px solid #1d211d; border-radius: var(--radius-lg);
  padding: 3.5rem 8%; color: #fff; text-align: left;
  position: relative; overflow: hidden;
}
.cta-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 260px at 85% 20%, rgba(0,255,0,0.08), transparent 70%);
}
.cta-card .kicker { color: var(--neon); position: relative; }
.cta-card h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); position: relative; }
.cta-card p { color: var(--body-light); max-width: 36rem; position: relative; }
.cta-card .btn { position: relative; margin-top: 1rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin-top: 2rem; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 0.9rem; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 1.25rem 1.5rem; color: var(--ink); font-weight: 700; font-size: 1.03rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 56px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { color: var(--green-ink); font-size: 1.5rem; flex: none; font-weight: 400; }
.faq-item .faq-body { padding: 0 1.5rem 1.4rem; color: var(--body); }

/* ---------- About ---------- */
.stat-row { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem 1.25rem; text-align: center;
}
.stat .num { font-family: var(--font-display); color: var(--green-ink); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.stat .lbl { color: var(--body); font-size: 0.92rem; }
.about-prose p { color: var(--body); font-size: 1.06rem; max-width: 46rem; }
.section-dark .about-prose p { color: var(--body-light); }

/* ---------- Footer ---------- */
.site-footer { background: #050705; border-top: 1px solid var(--line-dark); padding: 3.5rem 0 0; color: #fff; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 2.5rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.3fr 0.8fr 1fr 1fr; } }
.footer-brand img { height: 58px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.95rem; color: var(--body-light); max-width: 22rem; margin: 0; }
.site-footer h4 { color: #fff; font-size: 0.95rem; margin: 0 0 1.1rem; letter-spacing: 0.01em; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.footer-links a { color: var(--body-light); text-decoration: none; font-size: 0.95rem; }
.footer-links a:hover { color: var(--neon); }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; color: var(--body-light); font-size: 0.95rem; }
.footer-contact a { color: var(--body-light); text-decoration: none; }
.footer-contact a:hover { color: var(--neon); }
.footer-bottom {
  border-top: 1px solid var(--line-dark); padding: 1.4rem 0;
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
  color: #7d877e; font-size: 0.86rem;
}
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; width: min(1180px, 92%); }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--neon); color: #04140a;
  padding: 0.75rem 1.25rem; font-weight: 800; z-index: 200; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* Reduced motion: kill the effects */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  #matrix-canvas { display: none; }
  .glitch-copy, .ambient-glitch::before, .ambient-glitch::after { display: none; }
}