/* ==========================================================================
   360 Security Solution — Design System
   Palette: deep-guard olive/forest, brass accent, warm paper background
   Type: Fraunces (display) + Work Sans (body) + JetBrains Mono (data/console)
   Signature: "perimeter scan" motif echoing the shield-eye mark, wax-seal
   badges for trust claims, dossier-style hairline structure.
   ========================================================================== */

:root{
  --ink:        #16201a;   /* near-black green-charcoal, primary text */
  --forest:     #2f3d22;   /* deep olive-green, brand primary */
  --forest-2:   #23301a;   /* darker forest for gradients/hover */
  --olive:      #6b7a3a;   /* mid olive, from the mark */
  --brass:      #b5872a;   /* brass/gold accent, CTAs + seals */
  --brass-2:    #d9a83f;   /* lighter brass for hover/glow */
  --paper:      #f6f4ec;   /* warm paper background */
  --paper-2:    #eee9d8;   /* slightly deeper paper for panels */
  --line:       #d8d2bd;   /* hairline rule color on paper */
  --line-dark:  rgba(246,244,236,.16); /* hairline on dark */
  --alert:      #a13a2b;   /* emergency / urgent accent, used sparingly */
  --white:      #ffffff;
  --muted:      #5b6152;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --radius: 4px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(22,32,26,.06), 0 8px 24px -12px rgba(22,32,26,.18);
  --shadow-lift: 0 20px 40px -20px rgba(22,32,26,.35);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--forest);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.12;
}
h1{ font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 620; }
h2{ font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h3{ font-size: clamp(1.15rem, 1.6vw, 1.4rem); }

a{ color: var(--forest); text-decoration: none; }
a:hover{ color: var(--brass); }

p{ margin-bottom: 1rem; color: var(--ink); }
.lead{ font-size: 1.15rem; color: var(--muted); }

::selection{ background: var(--brass-2); color: var(--ink); }

:focus-visible{
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

.container-nrw{ max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- Eyebrow / mono labels (dossier system) ---------- */
.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .9rem;
  font-weight: 600;
}
.eyebrow::before{
  content: "";
  width: 22px; height: 1px;
  background: var(--brass);
  display: inline-block;
}
.eyebrow.on-dark{ color: var(--brass-2); }

.hairline{ border: none; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius);
  padding: .8rem 1.5rem;
  font-size: .95rem;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-brass{
  background: var(--brass);
  color: var(--ink);
  box-shadow: 0 6px 18px -8px rgba(181,135,42,.55);
}
.btn-brass:hover{ background: var(--brass-2); color: var(--ink); box-shadow: 0 10px 22px -8px rgba(181,135,42,.65); }

.btn-outline-light{
  background: transparent;
  border-color: var(--line-dark);
  color: var(--paper);
}
.btn-outline-light:hover{ background: rgba(246,244,236,.1); color: var(--paper); }

.btn-line{
  background: transparent;
  border-color: var(--forest);
  color: var(--forest);
}
.btn-line:hover{ background: var(--forest); color: var(--paper); }

.btn-block-sm{ padding: .6rem 1.1rem; font-size: .85rem; }

/* ---------- Top utility bar ---------- */
.topbar{
  background: var(--ink);
  color: var(--paper-2);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
}
.topbar .container-nrw{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: .45rem; padding-bottom: .45rem; flex-wrap: wrap; gap: .35rem;
}
.topbar a{ color: var(--paper-2); }
.topbar a:hover{ color: var(--brass-2); }
.topbar .dot{ color: var(--olive); margin: 0 .5rem; }

/* ---------- Navbar ---------- */
.site-nav{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1000;
}
.site-nav .navbar{ padding: .7rem 0; }
.brand-logo{ height: 42px; width: auto; display: block; }
.site-nav .nav-link{
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  padding: .55rem 1rem !important;
  font-size: .95rem;
}
.site-nav .nav-link.active,
.site-nav .nav-link:hover{ color: var(--forest); }
.nav-cta{ display:flex; align-items:center; gap:.6rem; }
.nav-call-btn{
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--forest);
  color: var(--paper) !important;
  border-radius: var(--radius);
  padding: .6rem 1rem;
  font-size: .85rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.nav-call-btn:hover{ background: var(--forest-2); color: var(--paper) !important; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  background: radial-gradient(1100px 520px at 82% -10%, #3c4d29 0%, var(--forest) 46%, var(--forest-2) 100%);
  color: var(--paper);
  overflow: hidden;
  padding: 5.2rem 0 4.6rem;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(700px 420px at 78% 20%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero .row{ position: relative; z-index: 2; }
.hero h1{ color: var(--paper); }
.hero .lead{ color: rgba(246,244,236,.82); max-width: 46ch; }
.hero-badges{ display:flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.hero-badge{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: .38rem .85rem;
  color: rgba(246,244,236,.9);
}
.hero-cta{ display:flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.1rem; }

/* Signature: perimeter-scan eye graphic in the hero */
.scan-wrap{
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1/1;
}
.scan-ring{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
}
.scan-ring.r2{ inset: 12%; }
.scan-ring.r3{ inset: 24%; }
.scan-sweep{
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(217,168,63,.55), transparent 26%);
  animation: sweep 5.5s linear infinite;
  -webkit-mask-image: radial-gradient(circle, transparent 44%, #000 45%, #000 100%);
          mask-image: radial-gradient(circle, transparent 44%, #000 45%, #000 100%);
}
@keyframes sweep{ to{ transform: rotate(360deg); } }
.scan-core{
  position:absolute; inset: 36%;
  background: var(--paper);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 8px rgba(22,32,26,.18);
}
.scan-core img{ width: 62%; height: auto; }
.scan-blip{
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brass-2);
  box-shadow: 0 0 0 4px rgba(217,168,63,.25);
}

/* ---------- Section rhythm ---------- */
.section{ padding: 4.4rem 0; }
.section-tight{ padding: 3rem 0; }
.section-alt{ background: var(--paper-2); }
.section-dark{ background: var(--forest); color: var(--paper); }
.section-dark h2, .section-dark h3{ color: var(--paper); }
.section-dark p{ color: rgba(246,244,236,.82); }
.section-head{ max-width: 62ch; margin-bottom: 2.6rem; }

/* ---------- Service / spec cards (ID-card styling) ---------- */
.spec-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex; flex-direction: column;
}
.spec-card:hover{ box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.spec-card__media{ aspect-ratio: 16/10; overflow:hidden; background: var(--paper-2); }
.spec-card__media img{ width:100%; height:100%; object-fit: cover; }
.spec-card__body{ padding: 1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.spec-card__price{
  font-family: var(--font-mono);
  color: var(--brass);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .3rem;
}
.spec-card__price small{ color: var(--muted); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.spec-card ul{ list-style:none; padding:0; margin: .8rem 0 1rem; font-size: .92rem; }
.spec-card ul li{ padding-left: 1.3rem; position: relative; margin-bottom: .4rem; color: var(--ink); }
.spec-card ul li::before{
  content: "";
  position:absolute; left:0; top:.5em;
  width: 7px; height: 7px;
  background: var(--olive);
  border-radius: 1px;
  transform: rotate(45deg);
}
.spec-card__note{ font-size: .82rem; color: var(--muted); margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--line); }

/* ---------- Wax-seal trust badge ---------- */
.seal{
  width: 128px; height: 128px;
  border-radius: 50%;
  border: 2px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  flex-direction: column;
  text-align:center;
  font-family: var(--font-mono);
  color: var(--paper);
  background: var(--forest-2);
  transform: rotate(-6deg);
  box-shadow: var(--shadow-card);
  position: relative;
}
.seal::before{
  content:"";
  position:absolute; inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(246,244,236,.35);
}
.seal strong{ font-family: var(--font-display); font-size: 1.6rem; display:block; color: var(--brass-2); }
.seal span{ font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden;
}
.stat-cell{ background: var(--white); padding: 1.6rem 1.2rem; text-align:center; }
.stat-cell .num{ font-family: var(--font-display); font-size: 2.1rem; color: var(--forest); font-weight: 650; }
.stat-cell .lbl{ font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 767px){ .stat-strip{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Numbered "why us" list ---------- */
.why-item{ display:flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.why-item:last-child{ border-bottom:none; }
.why-num{
  font-family: var(--font-mono);
  color: var(--brass);
  font-weight: 700;
  font-size: .8rem;
  min-width: 2.2rem;
  padding-top: .2rem;
}
.why-body h3{ font-size: 1.05rem; margin-bottom: .25rem; }
.why-body p{ margin: 0; color: var(--muted); font-size: .93rem; }

/* ---------- Testimonials ---------- */
.quote-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  height: 100%;
}
.quote-card p{ font-style: italic; color: var(--ink); }
.quote-card .who{ font-family: var(--font-mono); font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Area chips ---------- */
.area-chips{ display:flex; flex-wrap:wrap; gap: .55rem; }
.area-chip{
  font-family: var(--font-mono);
  font-size: .78rem;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: .4rem .9rem;
  color: var(--ink);
}

/* ---------- Tables (price grids) ---------- */
.dossier-table{ width:100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-card); }
.dossier-table thead th{
  background: var(--forest); color: var(--paper);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem;
  padding: .9rem 1rem; text-align:left; font-weight:600;
}
.dossier-table tbody td{ padding: .9rem 1rem; border-bottom: 1px solid var(--line); font-size: .92rem; vertical-align: top; }
.dossier-table tbody tr:last-child td{ border-bottom:none; }
.dossier-table tbody tr:nth-child(odd){ background: rgba(238,233,216,.4); }
.price-tag{ font-family: var(--font-mono); font-weight:700; color: var(--brass); white-space:nowrap; }

/* ---------- FAQ (accordion) ---------- */
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none;
  font-family: var(--font-body); font-weight:600; color: var(--forest);
  padding: 1.1rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-size: 1rem;
}
.faq-q .ic{ font-family: var(--font-mono); color: var(--brass); transition: transform .2s ease; }
.faq-q[aria-expanded="true"] .ic{ transform: rotate(45deg); }
.faq-a{ display:none; padding-bottom: 1.1rem; color: var(--muted); max-width: 68ch; }
.faq-a.open{ display:block; }

/* ---------- Breadcrumb ---------- */
.crumbs{
  font-family: var(--font-mono); font-size: .74rem; color: var(--muted);
  padding: .9rem 0; letter-spacing: .02em;
}
.crumbs a{ color: var(--muted); }
.crumbs a:hover{ color: var(--brass); }
.crumbs .sep{ margin: 0 .5rem; color: var(--line); }

/* ---------- Map ---------- */
.map-frame{ border-radius: var(--radius-lg); overflow:hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.map-frame iframe{ width:100%; height: 380px; border:0; display:block; }

/* ---------- CTA band ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--forest-2), var(--forest));
  color: var(--paper); border-radius: var(--radius-lg);
  padding: 2.6rem; position: relative; overflow:hidden;
}
.cta-band h2{ color: var(--paper); margin-bottom:.6rem; }
.cta-band p{ color: rgba(246,244,236,.85); margin-bottom: 0; }

/* ---------- Forms ---------- */
.form-control, .form-select{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  font-family: var(--font-body);
}
.form-control:focus, .form-select:focus{
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(107,122,58,.18);
}
label.form-label{ font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(246,244,236,.78); padding: 3.6rem 0 0; }
.site-footer h6{
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--brass-2); font-size: .75rem; margin-bottom: 1rem;
}
.site-footer a{ color: rgba(246,244,236,.78); }
.site-footer a:hover{ color: var(--brass-2); }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom: .55rem; font-size: .92rem; }
.footer-bottom{
  border-top: 1px solid var(--line-dark);
  margin-top: 2.6rem;
  padding: 1.2rem 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: rgba(246,244,236,.55);
  display:flex; justify-content: space-between; flex-wrap:wrap; gap:.5rem;
}
.footer-logo{ height: 34px; margin-bottom: 1rem; }

/* ---------- Sticky mobile action bar & floating buttons ---------- */
.float-actions{
  position: fixed; right: 18px; bottom: 18px; z-index: 1050;
  display: flex; flex-direction: column; gap: .7rem;
}
.float-btn{
  width: 54px; height: 54px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--paper); box-shadow: 0 10px 24px -8px rgba(22,32,26,.5);
  font-size: 1.3rem; transition: transform .15s ease;
}
.float-btn:hover{ transform: scale(1.07); color: var(--paper); }
.float-btn.wa{ background: #3f7d3a; }
.float-btn.call{ background: var(--brass); color: var(--ink); }
.float-btn.call:hover{ color: var(--ink); }

.mobile-actionbar{
  position: fixed; left:0; right:0; bottom:0; z-index: 1040;
  display: none;
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
}
.mobile-actionbar .row{ margin:0; }
.mobile-actionbar a{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .85rem .5rem; color: var(--paper); font-weight:700; font-size:.85rem;
  font-family: var(--font-mono);
}
.mobile-actionbar a.wa{ background:#3f7d3a; }
.mobile-actionbar a.call{ background: var(--brass); color: var(--ink); }
@media (max-width: 767px){
  .mobile-actionbar{ display:block; }
  body{ padding-bottom: 54px; }
  .float-actions{ bottom: 66px; }
}

/* utility */
.text-brass{ color: var(--brass) !important; }
.bg-paper2{ background: var(--paper-2); }
.rounded-lg{ border-radius: var(--radius-lg) !important; }
.mono{ font-family: var(--font-mono); }