/*
Theme Name: Vigiscope
Theme URI: https://vigiscope.com
Author: Vigiscope
Author URI: https://vigiscope.com
Description: Custom theme for Vigiscope (VGS) — emergency reporting and command & control platform. Built around fast app registration, a clear how-it-works flow, FAQ, download/install guide, and contact.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vigiscope
*/
/* ==========================================================================
   VIGISCOPE (VGS) — Design System
   Brand: Red / Black / White — emergency response & command control
   ========================================================================== */

:root {
  /* Brand colors */
  --vgs-red: #d7182a;
  --vgs-red-dark: #a4101f;
  --vgs-red-darker: #7a0c17;
  --vgs-black: #0b0c0e;
  --vgs-black-soft: #16181c;
  --vgs-white: #ffffff;

  /* Neutrals */
  --gray-50: #f7f7f8;
  --gray-100: #eeeef0;
  --gray-200: #dfe0e3;
  --gray-300: #c3c5ca;
  --gray-500: #7b7f87;
  --gray-600: #585c63;
  --gray-700: #3a3d42;

  /* Semantic */
  --bg: var(--vgs-white);
  --bg-alt: var(--gray-50);
  --bg-dark: var(--vgs-black);
  --bg-dark-soft: var(--vgs-black-soft);
  --text: var(--vgs-black);
  --text-muted: var(--gray-600);
  --text-on-dark: #f2f2f3;
  --text-on-dark-muted: #a8abb2;
  --border: var(--gray-200);
  --border-on-dark: #2a2d33;

  /* Type */
  --font-head: "Oswald", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1320px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(11, 12, 14, 0.06), 0 1px 1px rgba(11, 12, 14, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 12, 14, 0.10);
  --shadow-lg: 0 20px 48px rgba(11, 12, 14, 0.16);
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--text);
}

h1 { font-size: clamp(2.1rem, 4vw + 1rem, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.4rem); }
h3 { font-size: 1.25rem; }

p { color: var(--text-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vgs-red);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--vgs-red);
  border-radius: 50%;
  flex-shrink: 0;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--vgs-red);
  outline-offset: 2px;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.section { padding: 88px 0; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark {
  background: var(--vgs-black);
  color: var(--text-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--vgs-white); }
.section--dark p { color: var(--text-on-dark-muted); }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 14px; font-size: 1.05rem; }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--vgs-red); color: var(--vgs-white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--vgs-red-dark); box-shadow: var(--shadow-md); }

.btn--dark { background: var(--vgs-black); color: var(--vgs-white); }
.btn--dark:hover { background: var(--vgs-black-soft); }

.btn--outline { background: transparent; border-color: var(--gray-300); color: var(--text); }
.btn--outline:hover { border-color: var(--vgs-black); }

.btn--outline-light { background: transparent; border-color: rgba(255,255,255,0.35); color: var(--vgs-white); }
.btn--outline-light:hover { border-color: var(--vgs-white); background: rgba(255,255,255,0.06); }

.btn--sm { padding: 10px 18px; font-size: 0.86rem; }
.btn--block { width: 100%; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-on-dark);
}
/* The frosted-glass background lives on a pseudo-element rather than
   directly on .site-header. backdrop-filter (like filter/transform)
   makes the element it's on the containing block for any position:fixed
   descendant — since the mobile nav-primary dropdown is a fixed child of
   the header, that collapsed its "full viewport" sizing down to the
   header's own ~76px box, rendering as a thin black sliver instead of a
   full-screen menu. Moving the effect to ::before keeps .nav-primary
   sized against the real viewport again. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 12, 14, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
}
/* WP's admin toolbar is fixed at top:0 with z-index 99999 down to 783px
   wide; without this offset it sits on top of the sticky header (and the
   nav-toggle button inside it) once the page is scrolled, swallowing taps
   meant for the header. Below 782px WP switches the toolbar to
   position:absolute itself, so no offset is needed there. */
body.admin-bar .site-header { top: 32px; }
/* .nav-primary's top no longer needs an admin-bar-specific override —
   --dropdown-top (set in main.js from the header's real bottom edge)
   already accounts for the extra 32px whenever the admin bar shifts
   the header down. */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand .custom-logo-link { display: flex; align-items: center; }
.brand img.custom-logo { display: block; height: 38px; width: auto; max-width: 160px; }
.brand-mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vgs-white);
}
.brand-text span {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-300);
}

.nav-primary { display: flex; align-items: center; gap: 4px; }
.nav-primary a {
  padding: 10px 16px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-on-dark-muted);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-primary a:hover { color: var(--vgs-white); background: rgba(255,255,255,0.06); }
.nav-primary a.is-active { color: var(--vgs-white); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--vgs-white);
  border-radius: var(--radius-sm);
  touch-action: manipulation;
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); }

.btn-short { display: none; }

@media (max-width: 900px) {
  .nav-primary {
    position: fixed;
    /* --header-h alone is only correct once the sticky header is pinned
       at the very top of the viewport. Before that (e.g. on page load,
       with the ticker bar still pushing the header down), the header's
       real bottom edge sits lower — using --header-h here made the
       dropdown start too high, overlapping the header/CTA/toggle button.
       main.js keeps --dropdown-top in sync with the header's actual
       measured bottom edge in every scroll state; --header-h is just the
       fallback before that first measurement runs. */
    inset: var(--dropdown-top, var(--header-h)) 0 0 0;
    background: var(--vgs-black);
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 2px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow-y: auto;
  }
  .nav-primary a { padding: 16px; font-size: 1.05rem; border-bottom: 1px solid var(--border-on-dark); }
  body.nav-open .nav-primary { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn--primary .btn-full { display: none; }
  .header-actions .btn--primary .btn-short { display: inline; }
  .header-actions .btn--primary { padding: 10px 14px; }
}
@media (min-width: 901px) {
  .nav-toggle { display: none; }
}
@media (max-width: 480px) {
  .site-header .container { padding-inline: 16px; gap: 10px; }
  .brand-text span { display: none; }
  .header-actions { gap: 8px; }
}

body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--vgs-black);
  color: var(--vgs-white);
  overflow: hidden;
  padding: 100px 0 80px;
}
.hero h1, .hero h2, .hero h3 { color: var(--vgs-white); }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 420px at 82% 12%, rgba(215, 24, 42, 0.28), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 26px);
  pointer-events: none;
}
.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 48px;
  align-items: center;
}
.hero-copy p.lead { font-size: 1.12rem; margin-top: 18px; max-width: 520px; color: var(--text-on-dark-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-meta { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.hero-meta div { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-on-dark-muted); white-space: nowrap; }
.hero-meta svg { width: 20px; height: 20px; color: var(--vgs-red); flex-shrink: 0; }

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* Phone mockup (pure CSS, no external images) */
.phone {
  position: relative;
  width: 260px;
  height: 530px;
  margin-inline: auto;
  background: linear-gradient(155deg, #1c1e22, #0b0c0e);
  border-radius: 34px;
  padding: 12px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.06);
}
.phone::after {
  content: "";
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 6px;
  background: rgba(255,255,255,0.14);
  border-radius: 4px;
}
.phone-screen {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #17181b, #0d0e10);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-status { display: flex; justify-content: space-between; padding: 34px 18px 10px; font-size: 0.68rem; color: var(--gray-300); }
.phone-app-bar { padding: 6px 18px 16px; display: flex; align-items: center; gap: 8px; }
.phone-app-bar strong { color: var(--vgs-white); font-family: var(--font-head); font-size: 0.95rem; letter-spacing: 0.03em; }
.phone-sos {
  margin: 6px 18px 18px;
  aspect-ratio: 1;
  width: 150px;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--vgs-red), var(--vgs-red-darker));
  display: flex; align-items: center; justify-content: center;
  color: var(--vgs-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 10px rgba(215,24,42,0.12), 0 0 0 22px rgba(215,24,42,0.06);
}
.phone-cards { padding: 0 18px; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.phone-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.phone-card svg { width: 18px; height: 18px; color: var(--vgs-red); flex-shrink: 0; }
.phone-card div strong { display: block; font-size: 0.78rem; color: var(--vgs-white); }
.phone-card div span { font-size: 0.68rem; color: var(--gray-500); }

/* ---------- Trust strip ---------- */
.trust-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.trust-strip .grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-item {
  display: flex; align-items: center; gap: 14px;
  padding: 26px 24px;
  border-left: 1px solid var(--border);
}
.trust-item:first-child { border-left: 0; }
.trust-item svg { width: 26px; height: 26px; color: var(--vgs-red); flex-shrink: 0; }
.trust-item strong { display: block; font-family: var(--font-head); font-size: 0.95rem; }
.trust-item span { font-size: 0.82rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .trust-strip .grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(3) { border-left: 0; }
}
@media (max-width: 560px) {
  .trust-strip .grid { grid-template-columns: 1fr; }
  .trust-item { border-left: 0; border-top: 1px solid var(--border); }
  .trust-item:first-child { border-top: 0; }
}

/* ---------- Steps / flow ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: step;
  position: relative;
}
.step {
  position: relative;
  background: var(--vgs-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
}
.step-num {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--vgs-black);
  color: var(--vgs-white);
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 18px;
}
.step--accent .step-num { background: var(--vgs-red); }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 0.95rem; }

.steps--flow {
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.steps--flow .step {
  border-radius: 0;
  border-left: 0;
  padding: 26px 20px;
  text-align: center;
}
.steps--flow .step:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); border-left: 1px solid var(--border); }
.steps--flow .step:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.steps--flow .step-num { margin-inline: auto; }
.steps--flow .step-icon { width: 34px; height: 34px; color: var(--vgs-red); margin: 0 auto 14px; }

@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps--flow { grid-template-columns: 1fr 1fr; }
  .steps--flow .step { border-radius: var(--radius-lg) !important; border-left: 1px solid var(--border) !important; margin-bottom: 4px; }
}
@media (max-width: 640px) {
  .steps, .steps--flow { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--vgs-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(215, 24, 42, 0.08);
  color: var(--vgs-red);
  margin-bottom: 20px;
}
.card-icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.95rem; }
.card--dark { background: var(--vgs-black-soft); border-color: var(--border-on-dark); }
.card--dark h3 { color: var(--vgs-white); }
.card--dark p { color: var(--text-on-dark-muted); }
.card--dark .card-icon { background: rgba(215,24,42,0.16); }

.card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vgs-red);
  background: rgba(215,24,42,0.08);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(145deg, var(--vgs-black-soft), var(--vgs-red-darker));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-on-dark);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gallery-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .gallery-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: var(--vgs-white);
}
.gallery-item .gallery-icon svg { width: 28px; height: 28px; }
.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vgs-white);
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
@media (max-width: 880px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ---------- App role cards ---------- */
.role-card { display: flex; flex-direction: column; height: 100%; }
.role-card ul { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.role-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; color: var(--text-muted); }
.role-card li svg { width: 16px; height: 16px; color: var(--vgs-red); flex-shrink: 0; margin-top: 3px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--vgs-red-darker), var(--vgs-red) 60%, var(--vgs-red-dark));
  color: var(--vgs-white);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--vgs-white); margin-bottom: 6px; }
.cta-band p { color: rgba(255,255,255,0.85); }
.cta-band .btn--primary { background: var(--vgs-white); color: var(--vgs-red-dark); }
.cta-band .btn--primary:hover { background: var(--gray-100); }

/* ---------- Store badges ---------- */
.store-row { display: flex; gap: 14px; flex-wrap: wrap; }
.store-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 16px;
  background: var(--vgs-black);
  color: var(--vgs-white);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
  position: relative;
}
.store-badge svg { width: 24px; height: 24px; flex-shrink: 0; }
.store-badge div { line-height: 1.2; text-align: left; }
.store-badge span { display: block; font-size: 0.66rem; color: var(--gray-300); }
.store-badge strong { display: block; font-family: var(--font-head); font-size: 0.98rem; letter-spacing: 0.02em; }
.store-badge.is-soon { opacity: 0.55; cursor: not-allowed; }
.store-badge .soon-flag {
  position: absolute; top: -9px; right: -9px;
  background: var(--vgs-red); color: var(--vgs-white);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: 999px; text-transform: uppercase;
}

/* ---------- Accordion (FAQ) ---------- */
.accordion-group + .accordion-group { margin-top: 40px; }
.accordion-group h3 { margin-bottom: 14px; color: var(--vgs-red); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; }
.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--vgs-white);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
}
.accordion-trigger svg {
  width: 20px; height: 20px;
  color: var(--vgs-red);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.accordion-item[data-open="true"] .accordion-trigger svg { transform: rotate(45deg); }
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.accordion-panel-inner { padding: 0 22px 20px; }
.accordion-panel-inner p { font-size: 0.95rem; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.85rem; font-weight: 600; }
.field input, .field textarea, .field select {
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--vgs-white);
  transition: border-color 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--vgs-red);
  outline: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 14px; }
.form-success {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(215,24,42,0.06);
  border: 1px solid rgba(215,24,42,0.2);
  margin-top: 18px;
  font-size: 0.9rem;
}
.form-success svg { width: 22px; height: 22px; color: var(--vgs-red); flex-shrink: 0; }
.form-success.is-visible { display: flex; }

/* ---------- Contact info list ---------- */
.contact-list { display: flex; flex-direction: column; gap: 22px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list .icon-badge {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(215,24,42,0.08);
  color: var(--vgs-red);
}
.contact-list .icon-badge svg { width: 22px; height: 22px; }
.contact-list strong { display: block; margin-bottom: 3px; }
.contact-list span, .contact-list a { font-size: 0.92rem; color: var(--text-muted); }
.contact-list a:hover { color: var(--vgs-red); }

.emergency-note {
  display: flex; gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--vgs-black);
  color: var(--vgs-white);
  margin-bottom: 32px;
}
.emergency-note svg { width: 24px; height: 24px; color: var(--vgs-red); flex-shrink: 0; margin-top: 2px; }
.emergency-note strong { display: block; margin-bottom: 4px; }
.emergency-note p { color: var(--text-on-dark-muted); font-size: 0.9rem; margin: 0; }

/* ---------- Download install steps ---------- */
.install-steps { display: flex; flex-direction: column; gap: 0; }
.install-step {
  display: flex;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.install-step:last-child { border-bottom: 0; }
.install-step .step-num { background: var(--vgs-red); flex-shrink: 0; margin-bottom: 0; }
.install-step h3 { margin-bottom: 6px; }
.install-step p { font-size: 0.95rem; }

/* ---------- Requirements table ---------- */
.req-table { width: 100%; border-collapse: collapse; }
.req-table th, .req-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.req-table th { font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.req-table td:first-child, .req-table th:first-child { color: var(--text); font-weight: 600; width: 40%; }

/* ---------- Footer ---------- */
.site-footer { background: var(--vgs-black); color: var(--text-on-dark-muted); padding: 64px 0 0; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-on-dark);
}
.footer-brand p { margin-top: 14px; font-size: 0.9rem; max-width: 280px; }
.footer-col h4 {
  color: var(--vgs-white);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.92rem; }
.footer-col a:hover { color: var(--vgs-white); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
}
.footer-social a:hover { border-color: var(--vgs-red); color: var(--vgs-white); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.footer-bottom .legal-links { display: flex; gap: 20px; }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: var(--vgs-black);
  color: var(--vgs-white);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero h1, .page-hero h2, .page-hero h3 { color: var(--vgs-white); }
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 90% 0%, rgba(215,24,42,0.25), transparent 60%);
}
.page-hero .container { position: relative; }
.page-hero p { max-width: 560px; margin-top: 12px; font-size: 1.02rem; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 0.82rem; color: var(--gray-500); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--vgs-white); }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--vgs-red); color: var(--vgs-white);
  padding: 12px 18px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Honeypot spam-trap field: hidden from sighted users and screen readers,
   but still present in the DOM for bots that blindly fill every input. */
.vgs-hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   VIGISCOPE THEME — Additional components (denser layout)
   ========================================================================== */

/* ---------- Ticker strip ---------- */
.ticker {
  background: var(--vgs-red-darker);
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 32s linear infinite;
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-item svg { width: 14px; height: 14px; flex-shrink: 0; color: rgba(255,255,255,0.7); }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---------- Response categories ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cat-item {
  background: var(--vgs-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 16px;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cat-item:hover { border-color: var(--vgs-red); transform: translateY(-2px); }
.cat-item svg { width: 28px; height: 28px; color: var(--vgs-red); margin: 0 auto 12px; }
.cat-item strong { display: block; font-size: 0.85rem; font-family: var(--font-head); letter-spacing: 0.01em; }
@media (max-width: 960px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Feature comparison strip ---------- */
.feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature-cell {
  padding: 28px 24px;
  border-left: 1px solid var(--border);
}
.feature-cell:first-child { border-left: 0; }
.feature-cell svg { width: 24px; height: 24px; color: var(--vgs-red); margin-bottom: 14px; }
.feature-cell strong { display: block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 6px; }
.feature-cell p { font-size: 0.88rem; margin: 0; }
@media (max-width: 900px) { .feature-row { grid-template-columns: repeat(2, 1fr); } .feature-cell:nth-child(3) { border-left: 0; } .feature-cell:nth-child(1), .feature-cell:nth-child(3) { border-top: 0; } .feature-cell:nth-child(3), .feature-cell:nth-child(4) { border-top: 1px solid var(--border); } }
@media (max-width: 560px) { .feature-row { grid-template-columns: 1fr; } .feature-cell { border-left: 0 !important; border-top: 1px solid var(--border); } .feature-cell:first-child { border-top: 0; } }

/* ---------- Blog / updates teaser ---------- */
.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--vgs-white);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card-media {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--vgs-black), var(--vgs-black-soft));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-media svg { width: 34px; height: 34px; color: rgba(255,255,255,0.28); }
.post-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card-date { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vgs-red); }
.post-card h3 { font-size: 1.08rem; line-height: 1.3; }
.post-card p { font-size: 0.9rem; flex: 1; }
.post-card-link { font-size: 0.85rem; font-weight: 600; color: var(--vgs-black); margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.post-card-link svg { width: 15px; height: 15px; }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}
.empty-state svg { width: 34px; height: 34px; color: var(--gray-300); margin: 0 auto 14px; }

/* ---------- Recruitment CTA (variant) ---------- */
.cta-band--dark {
  background: linear-gradient(120deg, var(--vgs-black), var(--vgs-black-soft) 70%);
  border: 1px solid var(--border-on-dark);
}
.cta-band--dark h2 { color: var(--vgs-white); }
.cta-band--dark p { color: var(--text-on-dark-muted); }
.cta-band--dark .btn--primary { background: var(--vgs-red); color: var(--vgs-white); }
.cta-band--dark .btn--primary:hover { background: var(--vgs-red-dark); }

/* ---------- Safety tips list ---------- */
.tip-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tip-item {
  display: flex; gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}
.tip-item .tip-num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--vgs-black);
  color: var(--vgs-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
}
.tip-item p { margin: 0; font-size: 0.92rem; }
@media (max-width: 640px) { .tip-list { grid-template-columns: 1fr; } }

/* ---------- Roles comparison table ---------- */
.roles-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.roles-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.roles-table th, .roles-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.roles-table thead th { background: var(--vgs-black); color: var(--vgs-white); font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; }
.roles-table tbody tr:last-child td { border-bottom: 0; }
.roles-table td:first-child { font-weight: 600; }
.roles-table .yes { color: var(--vgs-red); font-weight: 700; }

/* ---------- Departments grid ---------- */
.dept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dept-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.dept-card strong { display: block; font-family: var(--font-head); margin-bottom: 4px; }
.dept-card a { font-size: 0.9rem; color: var(--vgs-red); font-weight: 600; }
.dept-card span { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; }
@media (max-width: 640px) { .dept-grid { grid-template-columns: 1fr; } }

/* ---------- Newsletter (footer) ---------- */
.newsletter { margin-top: 22px; }
.newsletter-row { display: flex; gap: 8px; margin-top: 10px; }
.newsletter-row input[type="email"] {
  flex: 1;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-on-dark);
  background: rgba(255,255,255,0.04);
  color: var(--vgs-white);
  font-size: 0.88rem;
}
.newsletter-row input[type="email"]::placeholder { color: var(--gray-500); }
.newsletter-note { font-size: 0.76rem; margin-top: 8px; color: var(--gray-500); }
.newsletter-success { font-size: 0.85rem; color: var(--vgs-red); margin-top: 10px; font-weight: 600; }

/* ---------- Inline notice banners (WP form feedback) ---------- */
.notice-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 28px;
  font-size: 0.92rem;
  font-weight: 500;
}
.notice-banner svg { width: 20px; height: 20px; flex-shrink: 0; }
.notice-banner--success { background: rgba(215,24,42,0.07); border: 1px solid rgba(215,24,42,0.22); color: var(--vgs-black); }
.notice-banner--error { background: #fff4f4; border: 1px solid #f3b8bd; color: var(--vgs-red-dark); }

/* ---------- Coverage strip ---------- */
.coverage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.coverage-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
}
.coverage-chip svg { width: 15px; height: 15px; color: var(--vgs-red); }

/* ---------- App showcase (phone + feature callouts) ---------- */
.app-showcase {
  background: var(--vgs-black);
  color: var(--text-on-dark-muted);
  position: relative;
  overflow: hidden;
}
.app-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 380px at 12% 8%, rgba(215, 24, 42, 0.18), transparent 60%),
    radial-gradient(680px 380px at 88% 92%, rgba(215, 24, 42, 0.14), transparent 60%);
  pointer-events: none;
}
.app-showcase .section-head p { color: var(--text-on-dark-muted); }
.app-showcase .section-head h2 { color: var(--vgs-white); }

.showcase-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
}
.showcase-col { position: relative; display: flex; flex-direction: column; gap: 34px; padding: 4px 0; }
.showcase-col::before {
  content: "";
  position: absolute;
  top: 27px;
  bottom: 27px;
  left: 27px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 10px);
}
.showcase-feature { display: flex; align-items: flex-start; gap: 16px; }
.showcase-feature-icon {
  position: relative;
  z-index: 1;
  width: 54px; height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(215, 24, 42, 0.14);
  border: 1.5px solid rgba(215, 24, 42, 0.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--vgs-red);
}
.showcase-feature-icon svg { width: 24px; height: 24px; }
.showcase-feature-text h3 { color: var(--vgs-white); font-size: 1.02rem; margin-bottom: 6px; }
.showcase-feature-text p { font-size: 0.87rem; margin: 0; color: var(--text-on-dark-muted); }

.showcase-phone-wrap { display: flex; flex-direction: column; align-items: center; }
.phone--showcase .phone-screen { position: relative; }
.showcase-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.showcase-slide.is-active { opacity: 1; pointer-events: auto; }
.showcase-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.showcase-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.showcase-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 0; padding: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.showcase-dot:hover { background: rgba(255, 255, 255, 0.5); }
.showcase-dot.is-active { background: var(--vgs-red); transform: scale(1.35); }

/* Default placeholder screens (used until real screenshots are uploaded) */
.showcase-map {
  position: relative;
  flex: 1;
  margin: 8px 18px 18px;
  border-radius: 12px;
  min-height: 140px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.showcase-pin { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgba(215, 24, 42, 0.5); }
.showcase-pin--1 { top: 28%; left: 22%; }
.showcase-pin--2 { top: 62%; left: 68%; }
.showcase-pin--active {
  top: 45%; left: 45%;
  width: 14px; height: 14px;
  background: var(--vgs-red);
  box-shadow: 0 0 0 6px rgba(215, 24, 42, 0.22);
}
.showcase-route { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px 18px 18px; }
.showcase-route svg { width: 100%; height: auto; }
.showcase-timeline { padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.showcase-tl-item { display: flex; gap: 12px; align-items: flex-start; }
.showcase-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); margin-top: 4px; flex-shrink: 0; }
.showcase-tl-item.is-done .showcase-tl-dot,
.showcase-tl-item.is-active .showcase-tl-dot { background: var(--vgs-red); }
.showcase-tl-item.is-active .showcase-tl-dot { box-shadow: 0 0 0 4px rgba(215, 24, 42, 0.25); }
.showcase-tl-item strong { display: block; color: var(--vgs-white); font-size: 0.82rem; }
.showcase-tl-item span { font-size: 0.7rem; color: var(--gray-500); }

@media (max-width: 980px) {
  .showcase-grid { grid-template-columns: 1fr; justify-items: center; }
  .showcase-phone-wrap { order: -1; margin-bottom: 8px; }
  .showcase-col { align-items: flex-start; width: 100%; max-width: 420px; }
}

/* ---------- About / trust (photo + checklist + stat card) ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.about-copy p.body { font-size: 1.05rem; margin-top: 16px; max-width: 520px; }
.about-checklist { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.about-checklist-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: var(--text-muted); }
.about-checklist-item svg { width: 20px; height: 20px; color: var(--vgs-red); flex-shrink: 0; margin-top: 1px; }
.about-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.about-phone { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.about-phone svg { width: 20px; height: 20px; color: var(--vgs-red); flex-shrink: 0; }
.about-phone a:hover { color: var(--vgs-red); }

.about-media-wrap { position: relative; }
.about-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4.5;
  box-shadow: var(--shadow-lg);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-graphic {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(155deg, var(--vgs-black), var(--vgs-black-soft));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.about-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.about-graphic-icon { position: relative; z-index: 1; width: 140px; height: 140px; opacity: 0.9; }
.about-lock {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(215, 24, 42, 0.12);
  border: 1px solid rgba(215, 24, 42, 0.3);
  display: flex; align-items: center; justify-content: center;
}
.about-lock svg { width: 20px; height: 20px; }
.about-lock--1 { top: 16%; right: 14%; }
.about-lock--2 { bottom: 18%; left: 12%; }

.about-stat-card {
  position: absolute;
  left: -32px;
  bottom: -32px;
  width: 240px;
  background: var(--vgs-black);
  color: var(--vgs-white);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-on-dark);
}
.about-stat-card .about-stat-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(215, 24, 42, 0.16);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.about-stat-card .about-stat-icon svg { width: 20px; height: 20px; color: var(--vgs-red); }
.about-stat-number { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--vgs-white); line-height: 1; }
.about-stat-card p { font-size: 0.86rem; color: var(--text-on-dark-muted); margin-top: 10px; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 80px; }
  .about-media-wrap { order: -1; }
  .about-stat-card { left: 16px; bottom: -28px; }
}
@media (max-width: 480px) {
  .about-stat-card { position: static; width: 100%; margin-top: 20px; }
}

/* ---------- Pricing ---------- */
.pricing-section {
  background: var(--vgs-black);
  color: var(--text-on-dark-muted);
  position: relative;
  overflow: hidden;
}
.pricing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 400px at 50% 0%, rgba(215, 24, 42, 0.16), transparent 60%);
  pointer-events: none;
}
.pricing-section .section-head h2 { color: var(--vgs-white); }
.pricing-section .section-head p { color: var(--text-on-dark-muted); }

.pricing-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.price-card {
  background: var(--vgs-black-soft);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
}
.price-card--featured {
  background: linear-gradient(165deg, #1c0507, var(--vgs-black-soft));
  border-color: rgba(215, 24, 42, 0.5);
  box-shadow: 0 0 0 1px rgba(215, 24, 42, 0.18), var(--shadow-lg);
  position: relative;
}
.price-badge {
  position: absolute;
  top: -13px; left: 32px;
  background: var(--vgs-red);
  color: var(--vgs-white);
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.price-card h3 { color: var(--vgs-white); font-size: 1.3rem; }
.price-card-desc { font-size: 0.9rem; margin-top: 8px; min-height: 42px; }
.price-amount { display: flex; align-items: baseline; gap: 4px; margin: 22px 0 26px; }
.price-amount .num { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; color: var(--vgs-white); }
.price-amount .period { font-size: 0.92rem; color: var(--gray-500); }
.price-card .btn { width: 100%; }
.price-card .btn--outline-light:hover { background: rgba(255,255,255,0.06); }

.price-features { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.price-feature { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; }
.price-feature-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.price-feature-icon svg { width: 12px; height: 12px; }
.price-feature--yes { color: var(--text-on-dark-muted); }
.price-feature--yes .price-feature-icon { background: rgba(215, 24, 42, 0.18); color: var(--vgs-red); }
.price-feature--no { color: var(--gray-600); }
.price-feature--no .price-feature-icon { background: rgba(255, 255, 255, 0.06); color: var(--gray-600); }

@media (max-width: 960px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* ---------- Rapid response (photo + copy) ---------- */
.response-section {
  background: var(--vgs-black);
  color: var(--text-on-dark-muted);
  position: relative;
  overflow: hidden;
}
.response-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(620px 360px at 8% 100%, rgba(215, 24, 42, 0.16), transparent 60%);
  pointer-events: none;
}
.response-section h2 { color: var(--vgs-white); }
.response-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.response-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}
.response-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.response-graphic {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(155deg, var(--vgs-black-soft), #1c0507);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.response-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.response-badge {
  position: relative; z-index: 2;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--vgs-red), var(--vgs-red-darker));
  display: flex; align-items: center; justify-content: center;
}
.response-badge svg { width: 44px; height: 44px; }
.response-ring { position: absolute; border: 1px solid rgba(215, 24, 42, 0.3); border-radius: 50%; }
.response-ring--1 { width: 180px; height: 180px; }
.response-ring--2 { width: 260px; height: 260px; border-color: rgba(215, 24, 42, 0.16); }

.response-copy p.body { font-size: 1.05rem; margin-top: 16px; color: var(--text-on-dark-muted); max-width: 520px; }
.response-points { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.response-point { display: flex; gap: 12px; align-items: flex-start; font-size: 0.94rem; color: var(--text-on-dark-muted); }
.response-point svg { width: 18px; height: 18px; color: var(--vgs-red); flex-shrink: 0; margin-top: 3px; }

@media (max-width: 900px) {
  .response-grid { grid-template-columns: 1fr; }
  .response-media { order: -1; }
}

/* Blog page (archive/news) */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.single-article { max-width: 760px; margin-inline: auto; }
.single-article .post-meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 18px; }
.single-article .post-content { font-size: 1.02rem; color: var(--text); }
.single-article .post-content p { margin-bottom: 18px; color: var(--text-muted); }
.single-article .post-content h2 { margin: 32px 0 14px; font-size: 1.4rem; }
.single-article .post-content img { border-radius: var(--radius-md); margin: 20px 0; }
.single-article .post-content ul, .single-article .post-content ol { list-style: disc; padding-left: 22px; margin-bottom: 18px; color: var(--text-muted); }
.single-article .post-content li { margin-bottom: 6px; }