/* ============================================================
   IGNARIS GROUP — Website Stylesheet
   css/style.css

   Table of contents:
   1.  Variables & Reset
   2.  Base & Utilities
   3.  Keyframe Animations
   4.  Sweep Line Overlay
   5.  Boot Sequence Overlay
   6.  Navigation
   7.  HUD Bars
   8.  Corner Brackets
   9.  Hero Section
   10. Why Us — Manifesto Lines
   11. Why Us — Stats Row & Differential Cards
   12. Contact Section
   13. Download Buttons
   14. Contact Form
   15. Footer
   16. Section Base Styles (shared)
   17. Scroll Reveal
   18. Responsive
   (component styles added later live at the end of the file)
============================================================ */


/* ============================================================
   1. VARIABLES & RESET
============================================================ */

:root {
  /* Lifted from near-black to a lighter graphite for readability */
  --bg:          #191b1f;
  --surface:     #20232a;
  --surface-2:   #282c34;
  --border:      #353a43;
  --border-l:    #474d58;

  --text:        #e6e8ec;
  --text-dim:    #a0a7b1;
  --text-muted:  #6e7580;

  /* Accent red — restrained, used only for codes & highlights */
  --accent:      #7e2222;
  --accent-text: #c25555;

  --font:        'Space Mono', 'Courier New', monospace;

  --nav-h:       50px;
  --pad-x:       64px;
  --pad-y:       72px;
  --inner:       860px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font-family: var(--font); }


/* ============================================================
   2. BASE & UTILITIES
============================================================ */

.text-dim    { color: var(--text-dim); }
.text-accent { color: var(--accent-text); }

.accent-dot {
  color: var(--accent-text);
  font-size: 7px;
  vertical-align: middle;
  margin-right: 3px;
}


/* ============================================================
   3. KEYFRAME ANIMATIONS
============================================================ */

/* Sweep line drifts top → bottom */
@keyframes sweep {
  0%   { top: -2px;   opacity: 0;   }
  5%   { opacity: 1;               }
  95%  { opacity: 0.6;             }
  100% { top: 100vh;  opacity: 0;   }
}

/* Status dot pulse */
@keyframes blink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.1; }
}

/* Cursor blink */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Corner brackets draw in */
@keyframes cornerGrow {
  from { width: 0;    height: 0;    opacity: 0; }
  to   { width: 26px; height: 26px; opacity: 1; }
}

/* Hero title: letters compress in from spread-out state */
@keyframes titleSlam {
  0%   {
    opacity: 0;
    transform: translateY(30px) scaleY(0.75);
    letter-spacing: 0.6em;
    filter: blur(6px);
  }
  55%  {
    opacity: 1;
    filter: blur(0);
    letter-spacing: 0.05em;
    transform: translateY(-4px) scaleY(1.04);
  }
  75%  { transform: translateY(1px) scaleY(0.99); }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    letter-spacing: -0.01em;
  }
}

/* Hero content (everything except title) fades + rises */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Code cards slide up into place */
@keyframes codesSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Outer crosshair ring rotates slowly */
@keyframes spinSlow {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Manifesto lines flicker on — like fluorescent lights igniting */
@keyframes flickerOn {
  0%   { opacity: 0;    }
  10%  { opacity: 0.8;  }
  18%  { opacity: 0.05; }
  30%  { opacity: 0.95; }
  38%  { opacity: 0.2;  }
  50%  { opacity: 1;    }
  100% { opacity: 1;    }
}

/* Subtle glitch — fires every ~10s on the hero title */
@keyframes glitch {
  0%,  88% { text-shadow: none;                          transform: translate(0); }
  89%       { text-shadow: -2px 0 var(--accent);         transform: translate(2px,  0); }
  90%       { text-shadow:  2px 0 rgba(20,20,70,0.9);   transform: translate(-2px, 0); }
  91%       { text-shadow: none;                          transform: translate(0); }
  94%       { text-shadow: -1px 0 var(--accent);         transform: translate(1px, 0); }
  95%       { text-shadow: none;                          transform: translate(0); }
}

/* Loop diagram nodes pulse border on hover */
@keyframes nodePulse {
  0%   { box-shadow: 0 0 0 0   rgba(148, 50, 50, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(148, 50, 50, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(148, 50, 50, 0);   }
}

/* Scan flash — brief horizontal light sweep used on section reveals */
@keyframes scanFlash {
  0%   { opacity: 0; top: 0;    }
  20%  { opacity: 0.6;          }
  80%  { opacity: 0.6;          }
  100% { opacity: 0; top: 100%; }
}

/* Boot progress bar fill */
@keyframes progressFill {
  from { width: 0%; }
  to   { width: 100%; }
}


/* ============================================================
   4. SWEEP LINE OVERLAY
   A dim horizontal line that drifts slowly down the page.
============================================================ */

.sweep-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(210,210,210,0.04) 25%,
    rgba(210,210,210,0.11) 50%,
    rgba(210,210,210,0.04) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 9000;
  animation: sweep 12s linear infinite;
  animation-delay: 4s; /* starts after boot completes */
}


/* ============================================================
   5. BOOT SEQUENCE OVERLAY
   Covers the hero while terminal lines are typed in.
   JS fades this out once the sequence is done.
============================================================ */

.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: opacity 0.5s ease;
}

.boot-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.boot-overlay__frame {
  width: 100%;
  max-width: 680px;
  padding: 64px var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.boot-overlay__header {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin-bottom: 32px;
}

/* Each boot line starts invisible; JS adds .visible */
.boot-line {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  line-height: 2.2;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.boot-line.visible {
  opacity: 1;
}

.boot-line.highlight {
  color: var(--text);
}

/* The progress bar under the boot lines */
.boot-progress {
  margin-top: 24px;
  height: 1px;
  background: var(--border);
  width: 100%;
  overflow: hidden;
}

.boot-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--text-dim);
  /* JS triggers the animation by adding .filling */
}

.boot-progress__bar.filling {
  animation: progressFill 1.8s ease-in-out forwards;
}

.boot-overlay__footer {
  margin-top: 16px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}


/* ============================================================
   6. NAVIGATION
============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-h);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  background: rgba(25, 27, 31, 0.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.nav__logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  flex-shrink: 0;
}

.nav__logo-slash { color: var(--text-dim); }

.nav__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-right: auto;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-text);
  flex-shrink: 0;
  animation: blink 2.5s ease-in-out infinite;
}

.nav__links {
  display: flex;
  gap: 28px;
}

.nav__links a {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  transition: color 0.2s;
}

.nav__links a:hover,
.nav__links a.active { color: var(--text); }

.nav__menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav__menu-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text-dim);
  transition: all 0.25s;
}

.nav__mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 20px 32px;
  flex-direction: column;
  gap: 18px;
  z-index: 490;
}

.nav__mobile-menu.open { display: flex; }

.nav__mobile-menu a {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  transition: color 0.2s;
}

.nav__mobile-menu a:hover { color: var(--text); }


/* ============================================================
   7. HUD BARS
============================================================ */

.hud-bar {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

.hud-bar--top    { top: 0;    border-bottom: 1px solid var(--border); }
.hud-bar--bottom { bottom: 0; border-top:    1px solid var(--border); }


/* ============================================================
   8. CORNER BRACKETS
   Start at 0×0 and grow to 26×26 after boot. The .armed class
   is added by JS once the boot sequence ends.
============================================================ */

.corner {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.corner.armed {
  animation: cornerGrow 0.4s ease forwards;
}

.corner--tl { top: 42px;    left: 18px;  border-top:    1px solid var(--border-l); border-left:   1px solid var(--border-l); animation-delay: 0s;   }
.corner--tr { top: 42px;    right: 18px; border-top:    1px solid var(--border-l); border-right:  1px solid var(--border-l); animation-delay: 0.08s; }
.corner--bl { bottom: 42px; left: 18px;  border-bottom: 1px solid var(--border-l); border-left:   1px solid var(--border-l); animation-delay: 0.16s; }
.corner--br { bottom: 42px; right: 18px; border-bottom: 1px solid var(--border-l); border-right:  1px solid var(--border-l); animation-delay: 0.24s; }


/* ============================================================
   9. HERO SECTION
============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Bottom padding = HUD bar (40px) + codes strip (~90px) + comfortable buffer */
  padding: var(--nav-h) var(--pad-x) 190px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* Dot-grid background */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}

/* Hero content starts hidden; JS applies .revealed */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 580px;
  opacity: 0;
}

.hero__content.revealed {
  opacity: 1; /* individual children animate independently */
}

.hero__pre-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-bottom: 24px;
  line-height: 1.9;
  opacity: 0;
}

.hero__pre-label.show {
  animation: heroFadeUp 0.5s ease forwards;
}

.hero__pre-label strong {
  display: block;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* The big title — JS adds .slam class to trigger the keyframe */
.hero__title {
  font-size: clamp(58px, 9vw, 112px);
  font-weight: 700;
  line-height: 0.9;
  margin-bottom: 26px;
  opacity: 0;
}

.hero__title.slam {
  animation: titleSlam 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             glitch 10s ease-in-out 4s infinite;
}

.hero__title--white { display: block; color: #ffffff; }
.hero__title--gray  { display: block; color: #5c636e; }

/* Tick divider */
.tick-divider { margin-bottom: 18px; opacity: 0; }
.tick-divider.show { animation: heroFadeUp 0.5s ease forwards; }

.tick-divider__line {
  position: relative;
  display: flex;
  align-items: center;
  width: 440px;
  max-width: 100%;
}

.tick-divider__line::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--border-l);
}

.tick {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 1px;
  height: 9px;
  background: var(--border-l);
  flex-shrink: 0;
}

.tick + .tick { margin-left: 84px; }

/* Tagline: "// SECURE · DEFEND · CERTIFY · BUILD" */
.hero__tagline {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  margin-bottom: 16px;
  min-height: 18px;
  opacity: 0;
}

.hero__tagline.show { animation: heroFadeUp 0.5s ease forwards; }

.cursor {
  color: var(--accent-text);
  animation: cursorBlink 1s step-end infinite;
}



/* CTA button */
.hero__cta {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text);
  border: 1px solid var(--border-l);
  padding: 12px 22px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  opacity: 0;
}

.hero__cta.show { animation: heroFadeUp 0.5s ease forwards; }
.hero__cta:hover { border-color: var(--text-dim); background: var(--surface-2); color: #fff; }

/* Crosshair — top right of hero */
.crosshair {
  position: absolute;
  color: var(--border-l);
  z-index: 1;
}

.crosshair svg { width: 100%; height: 100%; }

.crosshair--hero {
  top: 50%;
  right: 7%;
  width: 180px;
  height: 180px;
  transform: translateY(-55%);
  opacity: 0.55;
}

.crosshair--contact {
  top: 56px;
  right: 0;
  width: 110px;
  height: 110px;
  opacity: 0.3;
}

.crosshair__ring-outer {
  transform-origin: 60px 60px;
  animation: spinSlow 45s linear infinite;
}

/* Data stream: scrolling hex column, far right of hero */
.data-stream {
  position: absolute;
  right: calc(7% + 200px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  line-height: 1.9;
  white-space: pre;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.6s ease;
}

.data-stream.show { opacity: 1; }

/* Service code strip at bottom */
.hero__codes {
  background: var(--surface);
  position: absolute;
  bottom: 40px;          /* sits above the bottom HUD bar (~40px tall) */
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  flex-wrap: wrap;       /* wraps to 2 columns on small screens */
  border-top: 1px solid var(--border);
  transform: translateY(calc(100% + 40px));
  opacity: 0;
}

.hero__codes.show {
  animation: codesSlideUp 0.5s ease forwards;
}

/* "OUR SERVICES" header bar above the four cards */
.hero__codes-header {
  width: 100%;
  padding: 12px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--accent-text);
}

.code-card {
  flex: 1;
  padding: 18px 20px;
  border-right: 1px solid var(--border);
  border-top: 2px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s;
}

.code-card:last-child { border-right: none; }
.code-card:hover      { background: var(--surface); border-top-color: var(--accent); }

.code-card__id {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

.code-card__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  line-height: 1.55;
}


/* ============================================================
   10. DOCTRINE / MANIFESTO SECTION
============================================================ */

.doctrine {
  border-bottom: 1px solid var(--border);
}

.doctrine__inner {
  max-width: var(--inner);
  margin: 0 auto;
  padding-bottom: 56px;
}

/* Manifesto lines */
.manifesto {
  margin-top: 32px;
}

.manifesto__line {
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 0;
  /* Flicker animation applied when .visible is added */
}

.manifesto__line--break {
  height: 24px;
  display: block;
}

/* Large variant for PROBE / WATCH / PROVE / BUILD */
.manifesto__line--large {
  font-size: clamp(38px, 7vw, 80px);
  letter-spacing: 0.04em;
  line-height: 1.0;
  color: #ffffff;
}

/* Sub line below the large words */
.manifesto__line--sub {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  font-weight: 400;
  margin-top: 20px;
}

/* Override default reveal for manifesto lines — use flicker instead */
.manifesto .reveal.visible {
  animation: flickerOn 0.5s ease forwards;
}

/* Keep invisible until .visible is added (override the base reveal) */
.manifesto .reveal {
  opacity: 0;
  transform: none; /* no translateY for manifesto lines */
  transition: none;
}


/* ============================================================
   12. SERVICES SECTION
============================================================ */

/* (uses .section base + .section__inner below) */


/* ============================================================
   13. SERVICE CARDS — COMPACT
   Name + one-liner + tags only. No paragraphs.
============================================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 28px;
  margin-bottom: 24px;
}

.svc-card {
  background: var(--surface);
  display: flex;
  gap: 0;
  border-top: 3px solid transparent;
  transition: background 0.2s, border-color 0.2s;
  cursor: default;
}

.svc-card:hover {
  background: var(--surface-2);
  border-top-color: var(--accent);
}

/* Large service number on the left */
.svc-card__num {
  font-size: 46px;
  font-weight: 700;
  color: var(--border-l);
  padding: 24px 16px;
  flex-shrink: 0;
  line-height: 1;
  width: 76px;
  display: flex;
  align-items: flex-start;
  padding-top: 26px;
  border-right: 1px solid var(--border);
  transition: color 0.2s;
}

.svc-card:hover .svc-card__num { color: var(--accent-text); }

.svc-card__body {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svc-card__code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-text);
}

.svc-card__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  line-height: 1.35;
}

.svc-card__line {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  line-height: 1.7;
}

.svc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.svc-card__tags span {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 3px 8px;
}

/* ============================================================
   15. CONTACT SECTION
============================================================ */

.contact__body {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
  max-width: 560px;
  margin-bottom: 36px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 36px;
}

.contact-item {
  background: var(--surface);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-item__label {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

.contact-item__value {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text);
  line-height: 1.7;
}


/* ============================================================
   16. DOWNLOAD BUTTONS
============================================================ */

.downloads {
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  background: rgba(126, 34, 34, 0.08);
  padding: 28px;
}

.downloads__label {
  font-size: 13px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--accent-text);
  margin-bottom: 20px;
}

.downloads__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text);
  border: 1px solid var(--border-l);
  padding: 16px 28px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-download:hover {
  border-color: var(--accent-text);
  color: #ffffff;
  background: var(--surface-2);
}

/* First button (EN) reads as the primary action — filled accent */
.btn-download--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.btn-download--primary:hover {
  background: var(--accent-text);
  border-color: var(--accent-text);
}

.btn-download__arrow {
  font-size: 16px;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}

.btn-download:hover .btn-download__arrow {
  opacity: 1;
  transform: translateY(2px);
}


/* ============================================================
   17. FOOTER
============================================================ */

.footer {
  margin-top: 60px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__logo { font-size: 17px; font-weight: 700; letter-spacing: 0.12em; color: #ffffff; }
.footer__logo-slash { color: var(--text-dim); }
.footer__tagline { font-size: 9px; letter-spacing: 0.2em; color: var(--text-dim); }
.footer__meta   { font-size: 9px; letter-spacing: 0.1em; color: var(--text-muted); }


/* ============================================================
   18. SECTION BASE STYLES
============================================================ */

.section {
  position: relative;
  padding: var(--pad-y) var(--pad-x);
  border-bottom: 1px solid var(--border);
}

.section__hud-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 40px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.section__hud-label--bottom {
  border-bottom: none;
  border-top: 1px solid var(--border);
  margin-bottom: 0;
  margin-top: 40px;
}

.section__inner {
  max-width: var(--inner);
  margin: 0 auto;
}

.section__pre {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent-text);
  margin-bottom: 10px;
}

.section__title {
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.08;
  color: #ffffff;
  margin-bottom: 14px;
}

.section__sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-bottom: 32px;
}


/* ============================================================
   19. SCROLL REVEAL
   .reveal starts invisible. JS adds .visible when in viewport.
   Manifesto lines override this with the flicker animation.
============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   20. RESPONSIVE
============================================================ */

@media (max-width: 960px) {
  :root { --pad-x: 40px; --pad-y: 56px; }

  /* Increase bottom padding — content is taller at this width and
     must not overlap the absolutely-positioned service cards */
  .hero { padding: var(--nav-h) var(--pad-x) 210px; }

  .data-stream { display: none; }
  .crosshair--hero { display: none; }

  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Intermediate breakpoint: narrow desktop / large tablet (landscape) */
@media (max-width: 820px) {
  .hero { padding-bottom: 230px; }
}

@media (max-width: 660px) {
  :root { --pad-x: 24px; --pad-y: 44px; }

  /* 2×2 code card grid is ~170px tall — adjust hero bottom padding */
  .hero { padding-bottom: 305px; }

  .nav__links     { display: none; }
  .nav__menu-toggle { display: flex; margin-left: auto; }

  .hero__title { font-size: clamp(44px, 14vw, 62px); }

  /* Keep codes absolutely positioned — just make cards wrap to 2×2 */
  .code-card { min-width: 50%; border-bottom: 1px solid var(--border); }

  .services-grid { grid-template-columns: 1fr; }

  .manifesto__line--large { font-size: clamp(30px, 10vw, 52px); }


  .contact-grid { grid-template-columns: 1fr 1fr; }

  .downloads__buttons { flex-direction: column; }
  .btn-download { width: 100%; justify-content: center; }

  .footer { flex-direction: column; align-items: flex-start; }

  .section__hud-label span:nth-child(2) { display: none; }
  .hud-bar span:nth-child(2) { display: none; }
}


/* ============================================================
   STATS ROW  (Why Us section — the four headline numbers)
============================================================ */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 40px;
}

.stat {
  padding: 26px 24px;
  border-left: 1px solid var(--border);
}

.stat:first-child { border-left: none; }

.stat__big {
  font-size: 34px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 10px;
}

.stat__unit {
  font-size: 18px;
  color: var(--accent-text);
  font-weight: 700;
}

.stat__label {
  font-size: 9px;
  letter-spacing: 0.14em;
  line-height: 1.8;
  color: var(--text-dim);
}


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

.contact-form-block {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 28px;
  margin-bottom: 28px;
}

.contact-form-block__label {
  color: var(--text);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent-text);
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-l);
  padding: 14px 16px;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-text);
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: flex-start;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffffff;
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 16px 34px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.btn-submit:hover {
  background: var(--accent-text);
  border-color: var(--accent-text);
}

.contact-form__note {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* Success banner — rendered by PHP when URL contains ?sent=1 */
.form-success {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--accent);
  background: rgba(126, 34, 34, 0.12);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 18px 22px;
  margin-bottom: 18px;
}

.form-success__icon { color: var(--accent-text); font-size: 9px; }

/* Error banner — rendered by PHP when URL contains ?error=... */
.form-error {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #7a5500;
  background: rgba(122, 85, 0, 0.12);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 18px 22px;
  margin-bottom: 18px;
}

.form-error__icon { color: #c49a00; font-size: 9px; }


/* ============================================================
   RESPONSIVE — new components
============================================================ */

@media (max-width: 960px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media (max-width: 660px) {
  .contact-form__row { grid-template-columns: 1fr; }
  .btn-submit { width: 100%; }
  .contact-form-block { padding: 20px; }
}


/* ============================================================
   LANGUAGE TOGGLE  (EN / ES buttons in the navigation)
============================================================ */

.nav__lang {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 20px;
}

.nav__lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  padding: 4px 2px;
  transition: color 0.2s;
}

.nav__lang-btn:hover     { color: var(--text); }
.nav__lang-btn.is-active { color: var(--accent-text); }

.nav__lang-sep { color: var(--text-muted); font-size: 10px; }

.nav__mobile-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

.nav__mobile-lang .nav__lang-btn { font-size: 13px; padding: 6px 4px; }

@media (max-width: 660px) {
  /* Small screens: drop the status text and tighten spacing so the
     logo, EN/ES toggle and hamburger all fit on one row */
  .nav { padding: 0 18px; gap: 12px; }
  .nav__status { display: none; }
  .nav__lang { margin-left: auto; margin-right: 2px; }
  .nav__menu-toggle { margin-left: 0; }
}


/* ============================================================
   HONEYPOT — visually hidden from humans, visible to bots.
   Do NOT use display:none or visibility:hidden — bots skip those.
   position:absolute + off-screen hides it from real users only.
============================================================ */

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}


/* ============================================================
   GOOGLE reCAPTCHA v2
============================================================ */

.contact-form__recaptcha {
  /* Slight top margin to separate from the textarea */
  margin-top: 4px;
}

/* Scale down on very narrow screens where 300px doesn't fit */
@media (max-width: 360px) {
  .g-recaptcha {
    transform: scale(0.85);
    transform-origin: left top;
  }
}