/* ============================================
   PrivateCyberServices.com — 2a redesign
   Dark · shield hero + industry insights
   Zero CDN, Zero Tracking, self-hosted fonts
   ============================================ */

/* ---- Self-hosted fonts (OFL) — same-origin per CSP font-src 'self' ---- */
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/spectral-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/spectral-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/spectral-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/spectral-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/spectral-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Surfaces (2a — dark) */
  --bg-base: #0a0c12;
  --bg-elevated: #0c0e15;
  --bg-card: #151a27;
  --bg-card-hover: #1b2130;
  /* Gold accent */
  --gold: #E0A53B;
  --gold-light: #F0CB84;
  --gold-dim: #947535;
  --gold-glow: rgba(224, 165, 59, 0.12);
  --gold-cta-1: #EEB956;
  --gold-cta-2: #D2912E;
  /* Category signals */
  --green: #6FD7AD;
  --green-bg: rgba(95, 208, 160, 0.10);
  --green-border: rgba(95, 208, 160, 0.32);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.08);
  --red-border: rgba(248, 113, 113, 0.3);
  --blue: #8FB6FF;
  --blue-bg: rgba(110, 168, 255, 0.12);
  --blue-border: rgba(110, 168, 255, 0.30);
  /* Text */
  --text-bright: #F3EFE6;
  --text-primary: #d9d5cc;
  --text-secondary: #8b92a8;
  --text-muted: #5b6070;
  /* Borders */
  --border: rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-gold: rgba(224, 165, 59, 0.28);
  /* Type */
  --font-display: 'Spectral', Georgia, "Times New Roman", serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, "Cascadia Code", Consolas, monospace;
  --max-w: 780px;
  --max-w-wide: 1200px;
  --radius: 12px;
  --radius-sm: 8px;
}

html { font-size: 16.5px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.75;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Atmospheric background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(212, 168, 82, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(96, 165, 250, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 90% 40% at 50% 50%, rgba(212, 168, 82, 0.02) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}

.page-wrapper {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem 7rem;
  position: relative;
  z-index: 1;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes orbitSweep {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}

a { color: var(--blue); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--gold-light); }

/* ============================================
   HOMEPAGE — 2a: shield hero + industry insights
   ============================================ */

.pcs-page {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
  position: relative;
  z-index: 1;
}

/* ---- HERO ---- */
.pcs-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin-top: 2.5rem;
  padding: 3.25rem 3.5rem 2.75rem;
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 520px at 22% 30%, rgba(224, 165, 59, .10), transparent 60%),
    radial-gradient(700px 480px at 85% 10%, rgba(110, 140, 255, .06), transparent 60%),
    var(--bg-base);
}
.pcs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(700px 460px at 30% 40%, #000, transparent 75%);
          mask-image: radial-gradient(700px 460px at 30% 40%, #000, transparent 75%);
  pointer-events: none;
}
.pcs-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.75rem;
  flex-wrap: wrap;
}
.pcs-badge {
  flex: none;
  line-height: 0;
  animation: fadeUp .8s both;
}
.pcs-badge svg { width: 212px; height: auto; }
.pcs-orbit-a { animation: orbitSweep 4.4s linear infinite; }
.pcs-orbit-b { animation: orbitSweep 6s linear infinite reverse; }

.pcs-hero-copy {
  flex: 1;
  min-width: 340px;
  animation: fadeUp .8s .12s both;
}
.pcs-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(233, 231, 224, .34);
  margin-bottom: 1.1rem;
}
.pcs-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--text-bright);
  text-wrap: balance;
  -webkit-user-select: none;
  user-select: none;
}
.pcs-h1 em {
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
}
.pcs-lead {
  margin: 1.1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(233, 231, 224, .62);
  max-width: 34rem;
}
.pcs-cta-row { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.9rem; flex-wrap: wrap; }
.pcs-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--gold-cta-1), var(--gold-cta-2));
  color: #1a1206;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(224, 165, 59, .28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pcs-cta:hover { transform: translateY(-1px); color: #1a1206; box-shadow: 0 10px 30px rgba(224, 165, 59, .36); }
.pcs-cta span { transition: transform .25s ease; display: inline-block; }
.pcs-cta:hover span { transform: translateX(3px); }

/* PLAT-195 (FEAT-PcsHome-05): the closing call to action.
   BRULE-PcsLayout-01 — hidden above the mobile breakpoint and revealed inside it. On a
   desktop viewport the hero CTA and the three-across card grid occupy about a screen and a
   half, so a second button a short scroll below the first is repetition rather than a funnel.
   The section ships in the markup at every width; deleting this one declaration is all it
   takes to reveal it on desktop. */
.pcs-cta-foot { display: none; }
/* ---- WHAT WE DO — EMPHASIS ---- */
.pcs-emphasis { padding-top: 1.6rem; }
.pcs-emphasis-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  margin-bottom: 1.5rem;
}
.pcs-emphasis-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
}
.pcs-emphasis-sub { font-size: 0.84rem; color: rgba(233, 231, 224, .42); max-width: 20rem; text-align: right; }

/* PLAT-136 (FEAT-PcsHome-03): Blazor's FocusOnNavigate focuses the h1 on every
   navigation (tabindex=-1); with no authored rule the browser paints its
   user-agent focus-visible ring in the heading's text colour — the stray white
   box. The heading is not interactive, so the ring conveys nothing; real
   controls keep their rings. */
/* PLAT-137: outline-color transparent as belt-and-braces (user request) — if any
   engine paints an indicator despite `none`, it is invisible on any background. */
.pcs-h1:focus,
.pcs-h1:focus-visible { outline: none; outline-color: transparent; }

/* PLAT-136: three consolidated cards — one row at desktop (was 2-col for eight). */
.pcs-em-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; }
.pcs-em-card {
  position: relative;
  border: 1px solid rgba(224, 165, 59, .18);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(224, 165, 59, .045), rgba(255, 255, 255, .012));
  padding: 1.8rem 1.95rem 1.95rem;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.pcs-em-card:hover { transform: translateY(-3px); border-color: rgba(224, 165, 59, .42); }
.pcs-em-num {
  position: absolute;
  top: 1.3rem;
  right: 1.55rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(224, 165, 59, .38);
}
.pcs-em-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(224, 165, 59, .9);
  margin-bottom: 1.05rem;
}
.pcs-em-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: #F1EDE4; }
.pcs-em-body { margin: 0.7rem 0 0; font-size: 0.88rem; line-height: 1.6; color: rgba(233, 231, 224, .56); max-width: 30rem; }
.pcs-em-devices { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.pcs-em-devices span {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: rgba(224, 165, 59, .05);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ecdfca;
}

/* footer strip */
.pcs-foot {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.pcs-foot-brand { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.16em; color: rgba(233, 231, 224, .3); }
.pcs-foot-note { font-size: 0.75rem; color: rgba(233, 231, 224, .32); }

/* homepage responsive */
@media (max-width: 900px) {
  .pcs-em-grid { grid-template-columns: 1fr; }
}
/* PLAT-137 (FEAT-PcsHome-04): HD/4K width tiers — the 1200px cap read as
   letterboxing on modern screens. Home page container only; .page-wrapper
   (all other pages) keeps its measure. Lead line-length loosened in step. */
@media (min-width: 1500px) {
  .pcs-page { max-width: 1500px; }
  .pcs-lead { max-width: 42rem; }
  .pcs-em-body { max-width: none; }
}
@media (min-width: 2200px) {
  .pcs-page { max-width: 1720px; }
}
@media (max-width: 640px) {
  .pcs-hero { padding: 2.25rem 1.5rem 2rem; margin-top: 1.5rem; }
  .pcs-hero-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .pcs-badge svg { width: 140px; }
  /* PLAT-195 (FEAT-PcsHome-05, BRULE-PcsLayout-01): switching the hero to a column
     re-points the cross axis from vertical to horizontal, so the `align-items: flex-start`
     above — which top-aligned the crest beside the copy — now means LEFT. `align-self` names
     the one item that should move, leaving the copy block (and its left-aligned heading and
     lead) exactly where it was. `width: 100%` is what makes the CTA row centre on the hero
     rather than on a shrink-to-fit paragraph box. */
  .pcs-hero-copy { min-width: 0; width: 100%; }
  .pcs-badge { align-self: center; }
  .pcs-cta-row { justify-content: center; }
  .pcs-cta-foot {
    display: flex;
    justify-content: center;
    margin-top: 2.2rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--border);
  }
  /* PLAT-196 (FEAT-PcsContact-01, BRULE-PcsLayout-04): the "privatecyberservices.com" line the
     operator asked to hide on mobile. Hidden here and only here — the base rule at the top of
     the file is untouched, so it reads exactly as it does now on a wide screen. It is also the
     one unbreakable string on the site wide enough to matter: 24 characters at 0.32em tracking
     measure roughly 232px, most of the content column on a 320px phone. */
  .pcs-eyebrow { display: none; }
  .pcs-emphasis-head { flex-direction: column; gap: 0.4rem; }
  .pcs-emphasis-sub { text-align: left; }
  .pcs-em-card { padding: 1.4rem 1.4rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pcs-badge, .pcs-hero-copy { animation: none; }
  .pcs-orbit-a, .pcs-orbit-b { animation: none; }
}

/* ===== ARTICLE PAGES ===== */
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3rem;
  margin-bottom: 2.5rem;
  transition: all 0.25s;
  text-decoration: none;
}
.article-back:hover { color: var(--gold); transform: translateX(-3px); }
.article-header {
  margin-bottom: 2.8rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  animation: fadeUp 0.6s ease-out both;
}
.article-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--text-bright);
  line-height: 1.3;
  margin-bottom: 0.65rem;
}
.article-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
}
/* ===== FORM BUTTON (shared style, formerly cookie-banner vocabulary) ===== */
.btn-cookie {
  padding: 0.6em 2em;
  font-size: 0.78rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid;
}
.btn-decline { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.btn-decline:hover { background: rgba(52, 211, 153, 0.18); border-color: var(--green); box-shadow: 0 0 20px rgba(52, 211, 153, 0.1); }

/* ===== FOOTER ===== */
.site-footer {
  text-align: center;
  padding: 2.5rem 0 1rem;
  margin-top: 3rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  animation: fadeIn 0.6s ease-out 0.4s both;
}
/* ===== RESPONSIVE (shared: article-styled pages) ===== */
@media (max-width: 640px) {
  html { font-size: 15px; }
  .article-title { font-size: 1.45rem; }
  .btn-cookie { width: 80%; text-align: center; }

  /* PLAT-196 (FEAT-PcsContact-01).
     BRULE-PcsLayout-03 — a mobile browser zooms the page when a text field under 16 CSS pixels
     takes focus. The fields were 0.9rem against the 15px root declared at the top of this
     block: 13.5px. The zoom put
     the visual viewport inside the layout viewport, which is what made the field look too wide
     AND what let the page be pushed sideways — `overflow-x: hidden` on `body` could not help,
     because a zoom is not layout overflow and there is nothing there to clip.

     16 is a fixed count of CSS pixels the browser chooses, not a step on this site's type scale,
     so it is written in `px`. A rem value would happen to hit 16 against today's root and drop
     silently back under the threshold the next time that root is tuned. The base rule keeps
     0.9rem, so desktop is untouched. */
  .form-input,
  .form-textarea { font-size: 16px; }
}

@media print {
  body::before, body::after { display: none; }
  .pcs-hero::before, .pcs-badge svg { display: none; }
}

/* ============================================
   CONTACT FORM
   ============================================ */

.contact-form-area {
  max-width: 520px;
  animation: fadeUp 0.6s ease-out 0.15s both;
}

.form-group {
  margin-bottom: 1.4rem;
}

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* PLAT-196 (FEAT-PcsContact-01): `max-width` is a floor under the width, not a change to it —
   `width: 100%` and `max-width: 100%` both resolve to the 520px column, so nothing moves at any
   viewport. It is here rather than in a breakpoint because a floor under a field's width belongs
   with the field. Belt-and-braces; the fix for the reported symptoms is the 16px font size in
   the 640px block above, and design.md says why no second `overflow-x` guard was added. */
.form-input,
.form-textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  line-height: 1.6;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 3px rgba(212, 168, 82, 0.08);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-error {
  display: block;
  font-size: 0.75rem;
  color: var(--red);
  margin-top: 0.4rem;
}

.form-error-banner {
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  font-size: 0.82rem;
  color: var(--red);
  margin-bottom: 1rem;
}

/* Honeypot — invisible to humans */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* Success state */
.contact-success {
  text-align: center;
  padding: 2rem 0;
  animation: fadeUp 0.5s ease-out both;
}

.contact-success-icon {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 0.8rem;
}

.contact-success-heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-bright);
  margin-bottom: 0.6rem;
}

.contact-success-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}