/* ==========================================================================
   CYBERPERT — DESIGN SYSTEM v14 "Deep Current"
   Direction: institutional / infrastructure-grade, following the structural
   reference of Datapert.com and Valarty.com — dark canvas, large serif
   display headline with a gradient-highlighted keyword, dense data-driven
   sections, numbered/eyebrow structure throughout.

   Palette:  --ink (#0B1114 bg, near-black blue-petrol) --paper (#E9F1F0
             text), --mint/--mint-deep (a teal that blends blue and green —
             not pure green, not pure cyan — chosen to play against the
             chrome logo the way light plays off brushed metal under deep
             water), --line (cool structural gray), --alert (status amber)
   Type:     Display = Fraunces (high-contrast serif, italic keyword treatment)
             UI/Nav  = Space Grotesk (kept — cyber-world character)
             Body    = Inter
             Mono    = JetBrains Mono (residual data/labels only)
   Signature: the hero headline itself — serif display, three lines, with the
              defining word rendered in italic teal gradient — plus a chrome
              logo lit from beneath by a teal floodglow, echoed throughout
              as the one accent color.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500;1,9..144,600&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --ink: #0B1114;
  --ink-raised: #131D20;
  --ink-line: #263236;
  --paper: #E9F1F0;
  --paper-dim: #99AEB2;
  --mint: #2FBFB1;
  --mint-soft: #7DD8CD;
  --mint-deep: #146E66;
  --mint-dim: #11241F;
  --alert: #FFB347;
  --line: #5E7478;
  --danger: #FF6B6B;

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --max-width: 1380px;
  --radius-cta: 4px;
  --transition: 180ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(47,191,177,0.6);
  animation: pulse 2.4s infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47,191,177,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(47,191,177,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,191,177,0); }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12,19,21,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  gap: 24px;
}
.logo-mark {
  height: 48px;
  width: auto;
  display: block;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }

.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 22px);
  flex: 1;
  justify-content: center;
}
.nav-desktop a {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper-dim);
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--paper); }

.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.lang-select { position: relative; }
.lang-select button {
  background: transparent;
  border: 1px solid var(--ink-line);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 9px 12px;
  border-radius: var(--radius-cta);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color var(--transition), color var(--transition);
}
.lang-select button:hover { border-color: var(--mint); color: var(--paper); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-cta);
  min-width: 160px;
  padding: 6px;
  display: none;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.lang-menu.open { display: flex; }
.lang-menu a {
  padding: 9px 11px;
  font-size: 13px;
  font-family: var(--font-ui);
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  color: var(--paper-dim);
}
.lang-menu a:hover { background: var(--ink-line); color: var(--paper); }
.lang-menu a[aria-current="true"] { color: var(--mint); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--radius-cta);
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
  color: #08201C;
  box-shadow: 0 0 0 0 rgba(47,191,177,0);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(47,191,177,0.25); }
.btn-secondary { background: transparent; color: var(--paper); border-color: var(--ink-line); }
.btn-secondary:hover { border-color: var(--mint); color: var(--mint); }
.btn-block { width: 100%; }

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-cta);
  width: 40px;
  height: 40px;
  color: var(--paper);
  align-items: center;
  justify-content: center;
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 64px;
  border-bottom: 1px solid var(--ink-line);
  position: relative;
  background:
    radial-gradient(ellipse 900px 460px at 15% 0%, rgba(47,191,177,0.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 120px);
  overflow: hidden;
}
.hero .container { position: relative; z-index: 1; max-width: 980px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  color: var(--paper);
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  font-optical-sizing: auto;
  background: linear-gradient(100deg, var(--mint-soft) 0%, var(--mint) 45%, var(--mint-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.hero .lede {
  font-family: var(--font-ui);
  font-size: clamp(20px, 2.4vw, 27px);
  color: var(--paper-dim);
  font-weight: 500;
  margin-bottom: 28px;
}
.hero .subheadline {
  font-size: 17px;
  color: var(--paper-dim);
  max-width: 620px;
  margin-bottom: 36px;
  line-height: 1.6;
}
.hero-ctas { display: flex; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }

/* ---------- Stat band (big numbers) ---------- */
.stat-band {
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-raised);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-item {
  padding: 36px 28px;
  border-right: 1px solid var(--ink-line);
  text-align: left;
}
.stat-item:last-child { border-right: none; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  color: var(--mint);
  line-height: 1;
  margin-bottom: 10px;
  font-style: italic;
}
.stat-label {
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.stat-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--line);
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid var(--ink-line);
}

/* ---------- Logos band ---------- */
.logos-band { padding: 44px 0; border-bottom: 1px solid var(--ink-line); }
.logos-label {
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--line);
  margin-bottom: 24px;
  text-align: center;
}
.logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 52px;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--paper-dim);
  letter-spacing: 0.02em;
}

/* ---------- Generic section ---------- */
.section { padding: 96px 0; border-bottom: 1px solid var(--ink-line); }
.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 48px);
  margin-bottom: 18px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.section-head h2 em { font-style: italic; font-weight: 500; color: var(--mint); }
.section-head .subtitle { color: var(--paper-dim); font-size: 17px; line-height: 1.6; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- About / institutional copy block ---------- */
.about-block { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.about-block .eyebrow-col h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
}
.about-block .eyebrow-col h2 em { font-style: italic; color: var(--mint); }
.about-copy p { color: var(--paper-dim); font-size: 16.5px; line-height: 1.75; margin-bottom: 20px; }
.about-copy p:last-child { margin-bottom: 0; }

/* ---------- Capabilities grid ---------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.cap-card { background: var(--ink); padding: 36px 32px; transition: background var(--transition); }
.cap-card:hover { background: var(--ink-raised); }
.cap-card:last-child { grid-column: span 3; }
.cap-card:last-child p { max-width: 640px; }
.cap-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--line);
  margin-bottom: 22px;
  display: block;
}
.cap-card h3 { font-family: var(--font-ui); font-size: 19px; margin-bottom: 11px; font-weight: 600; }
.cap-card p { color: var(--paper-dim); font-size: 14.5px; line-height: 1.6; }
.section-cta-row { margin-top: 44px; text-align: center; }

/* ---------- Sectors ---------- */
.sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sector-card { border: 1px solid var(--ink-line); border-radius: 8px; padding: 30px 26px; transition: border-color var(--transition); }
.sector-card:hover { border-color: var(--mint-deep); }
.sector-card h3 { font-family: var(--font-ui); font-size: 16px; margin-bottom: 11px; color: var(--mint); font-weight: 600; }
.sector-card p { font-size: 13.5px; color: var(--paper-dim); line-height: 1.6; }

/* ---------- Process ---------- */
.process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink-line); border-left: 1px solid var(--ink-line); }
.process-step { border-right: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); padding: 30px 26px; }
.process-step .step-label { font-family: var(--font-mono); font-size: 12px; color: var(--mint); display: block; margin-bottom: 16px; }
.process-step h3 { font-family: var(--font-ui); font-size: 17px; margin-bottom: 9px; font-weight: 600; }
.process-step p { font-size: 13.5px; color: var(--paper-dim); line-height: 1.6; }

/* ---------- Data table (posture / SLA table, Datapert/Valarty-style) ---------- */
.data-table-wrap { border: 1px solid var(--ink-line); border-radius: 8px; overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table thead th {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--paper-dim);
  padding: 16px 20px;
  background: var(--ink-raised);
  border-bottom: 1px solid var(--ink-line);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-line);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}
.data-table tbody td:first-child { color: var(--paper); font-family: var(--font-ui); font-weight: 600; font-size: 14px; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(47,191,177,0.04); }
.data-table .pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pill-mint { background: var(--mint-dim); color: var(--mint); }
.pill-amber { background: rgba(255,179,71,0.12); color: var(--alert); }
.table-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--line);
  margin-top: 18px;
}

/* ---------- Insights ---------- */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.insight-card { border: 1px solid var(--ink-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--transition); }
.insight-card:hover { border-color: var(--mint-deep); }
.insight-thumb { height: 4px; background: linear-gradient(90deg, var(--mint), var(--ink-line)); }
.insight-body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.insight-meta { font-family: var(--font-mono); font-size: 11px; color: var(--line); margin-bottom: 14px; display: flex; gap: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.insight-body h3 { font-family: var(--font-ui); font-size: 17px; margin-bottom: 11px; font-weight: 600; line-height: 1.35; }
.insight-body p { font-size: 14px; color: var(--paper-dim); flex: 1; line-height: 1.6; }
.insight-link { margin-top: 18px; font-family: var(--font-ui); font-size: 13px; color: var(--mint); font-weight: 600; }

/* ---------- Research ---------- */
.research-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); }
.research-card { background: var(--ink); padding: 34px 32px; }
.research-card h3 { font-family: var(--font-ui); font-size: 18px; margin-bottom: 11px; color: var(--mint); font-weight: 600; }
.research-card p { font-size: 14px; color: var(--paper-dim); line-height: 1.6; }

/* ---------- Global presence ---------- */
.presence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.presence-card { border: 1px solid var(--ink-line); border-radius: 8px; padding: 30px 26px; }
.presence-kicker { font-family: var(--font-mono); font-size: 11px; color: var(--mint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; display: block; }
.presence-card h3 { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 24px; margin-bottom: 6px; }
.presence-card .region { font-size: 13px; color: var(--paper-dim); margin-bottom: 14px; }
.presence-card .detail { font-size: 13.5px; color: var(--paper-dim); line-height: 1.6; }

/* ---------- Founder home section ---------- */
.founder-home-section {
  background:
    radial-gradient(ellipse 780px 360px at 8% 12%, rgba(47,191,177,0.10), transparent 62%),
    linear-gradient(180deg, var(--ink-raised), var(--ink));
}
.founder-home-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.46fr) minmax(0, 0.54fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.founder-home-photo {
  position: relative;
  margin: 0;
  min-height: clamp(430px, 48vw, 640px);
  border: 1px solid rgba(47,191,177,0.26);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 28px 80px rgba(0,0,0,0.32);
}
.founder-home-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(8,15,18,0.28));
  pointer-events: none;
}
.founder-home-photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center 32%;
  filter: saturate(0.96) contrast(1.02);
}
.founder-home-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08;
  margin-bottom: 22px;
}
.founder-home-copy h2 em {
  color: var(--mint);
  font-style: italic;
  font-weight: 500;
}
.founder-home-copy p {
  color: var(--paper-dim);
  font-size: 16.5px;
  line-height: 1.75;
  margin-bottom: 18px;
  max-width: 700px;
}
.founder-home-copy .founder-home-lede {
  font-family: var(--font-ui);
  color: var(--paper);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.45;
  margin-bottom: 24px;
}
.founder-home-copy .btn { margin-top: 8px; }

/* ---------- CTA band ---------- */
.cta-band { padding: 88px 0; text-align: center; background: var(--ink-raised); border-bottom: 1px solid var(--ink-line); }
.cta-band h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 38px); max-width: 760px; margin: 0 auto 16px; line-height: 1.2; }
.cta-band h2 em { font-style: italic; color: var(--mint); }
.cta-band .subtitle { color: var(--paper-dim); margin-bottom: 32px; font-size: 16.5px; }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--ink-line); }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand .logo-mark { height: 38px; }
.footer-brand p { color: var(--paper-dim); font-size: 14px; max-width: 240px; line-height: 1.6; }
.footer-col h4 { font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--line); margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14px; color: var(--paper-dim); transition: color var(--transition); }
.footer-col a:hover { color: var(--mint); }
.footer-link-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nato-footer-flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  object-position: center;
  border-radius: 2px;
  border: 1px solid rgba(233,241,240,0.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  flex: 0 0 auto;
}
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 12.5px; color: var(--line); flex-wrap: wrap; gap: 12px; }

/* ---------- Generic page header (non-home pages) ---------- */
.page-hero { padding: 76px 0 60px; border-bottom: 1px solid var(--ink-line); }
.page-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 54px); margin-bottom: 18px; line-height: 1.08; }
.page-hero h1 em { font-style: italic; color: var(--mint); }
.page-hero .subtitle { color: var(--paper-dim); font-size: 17.5px; max-width: 660px; line-height: 1.6; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--paper-dim); }
.field input, .field select, .field textarea {
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-cta);
  padding: 13px 15px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mint); outline: none; }
.field textarea { resize: vertical; min-height: 120px; }
.field-radio-group { display: flex; flex-direction: column; gap: 10px; }
.field-radio { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--paper-dim); }
.field-radio input { margin-top: 3px; }
.form-warning {
  border: 1px solid var(--alert);
  background: rgba(255,179,71,0.08);
  border-radius: var(--radius-cta);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--alert);
  margin-bottom: 24px;
  grid-column: 1 / -1;
}
.field-error { color: var(--danger); font-size: 12.5px; }
.form-status { margin-top: 16px; font-size: 14px; grid-column: 1 / -1; }
.form-status.success { color: var(--mint); }
.form-status.error { color: var(--danger); }
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.emergency-box {
  border: 1px solid var(--danger);
  background: rgba(255,107,107,0.06);
  border-radius: 8px;
  padding: 26px;
  margin-bottom: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.emergency-box .label { font-family: var(--font-ui); font-weight: 700; color: var(--danger); display: block; margin-bottom: 6px; font-size: 14px; }
.emergency-box p { color: var(--paper-dim); font-size: 14px; max-width: 480px; }

/* ---------- Login ---------- */
.login-wrap { max-width: 440px; margin: 0 auto; padding: 92px 24px 100px; }
.login-card { border: 1px solid var(--ink-line); border-radius: 10px; padding: 38px; background: var(--ink-raised); }
.login-card .mfa-notice {
  font-size: 12.5px; color: var(--mint); background: rgba(47,191,177,0.08);
  border: 1px solid var(--mint-dim); border-radius: var(--radius-cta);
  padding: 11px 13px; margin-bottom: 24px;
}
.login-card .forgot { font-size: 13px; color: var(--paper-dim); display: block; text-align: center; margin-top: 20px; }
.login-card .forgot:hover { color: var(--mint); }
.login-notices { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.login-notices .notice { font-size: 12px; color: var(--line); line-height: 1.5; }
.login-notices .notice.dev { color: var(--alert); }

/* ---------- Security / classification pages ---------- */
.sec-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.sec-block h3 { font-family: var(--font-ui); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mint); margin-bottom: 20px; font-weight: 700; }
.sec-block.roadmap h3 { color: var(--alert); }
.sec-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.sec-block li { font-size: 14.5px; color: var(--paper-dim); padding-left: 20px; position: relative; line-height: 1.55; }
.sec-block li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--mint); }
.sec-block.roadmap li::before { background: var(--alert); }
.honesty-box { border-left: 2px solid var(--mint); padding: 20px 26px; background: var(--ink-raised); font-size: 14.5px; color: var(--paper); margin-bottom: 56px; border-radius: 0 8px 8px 0; }
.frameworks-row { display: flex; gap: 12px; flex-wrap: wrap; }
.framework-tag { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--ink-line); padding: 9px 15px; border-radius: 999px; color: var(--paper-dim); }

/* ---------- Legal pages ---------- */
.legal-content { max-width: 740px; }
.legal-meta { font-family: var(--font-mono); font-size: 12px; color: var(--line); margin-bottom: 32px; }
.legal-content p { color: var(--paper-dim); margin-bottom: 16px; line-height: 1.7; }

/* ---------- Disclosure scope lists ---------- */
.disclosure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 640px; margin: 0 auto;
  background: var(--ink-raised); border: 1px solid var(--ink-line); border-radius: 10px;
  padding: 22px 26px; z-index: 200; display: none; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.cookie-banner.visible { display: block; }
.cookie-banner p { font-size: 13.5px; color: var(--paper-dim); margin-bottom: 16px; line-height: 1.6; }
.cookie-banner p a { color: var(--mint); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { font-size: 13px; padding: 10px 16px; }

/* ---------- Mobile nav ---------- */
.mobile-nav { position: fixed; inset: 0; background: var(--ink); z-index: 150; display: none; flex-direction: column; padding: 24px; }
.mobile-nav.open { display: flex; }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.mobile-nav-head .logo-mark { height: 34px; }
.mobile-nav a { font-family: var(--font-display); font-style: italic; font-size: 26px; padding: 15px 0; border-bottom: 1px solid var(--ink-line); }
.mobile-nav .lang-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.mobile-nav .lang-row a { font-family: var(--font-mono); font-style: normal; font-size: 13px; border: 1px solid var(--ink-line); border-radius: 999px; padding: 8px 14px; }

/* ---------- 404 ---------- */
.error-page { padding: 150px 0; text-align: center; }
.error-page .code { font-family: var(--font-mono); color: var(--mint); font-size: 14px; margin-bottom: 18px; }
.error-page h1 { font-family: var(--font-display); font-size: 38px; margin-bottom: 16px; }
.error-page p { color: var(--paper-dim); margin-bottom: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item { border-bottom: 1px solid var(--ink-line); }
  .about-block { grid-template-columns: 1fr; gap: 32px; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-card:last-child { grid-column: span 2; }
  .sectors-grid { grid-template-columns: repeat(2, 1fr); }
  .process-list { grid-template-columns: repeat(2, 1fr); }
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
  .research-grid { grid-template-columns: 1fr; }
  .presence-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; row-gap: 32px; }
  .sec-columns, .disclosure-grid { grid-template-columns: 1fr; gap: 32px; }
  .data-table { font-size: 13px; }
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 600px; }
}

@media (max-width: 640px) {
  .hero { padding: 56px 0 48px; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap-card:last-child { grid-column: span 1; }
  .sectors-grid { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 640px; }
}

/* ==========================================================================
   CYBERPERT — V3 COMPETITIVE REDESIGN OVERRIDES
   Goal: richer, denser, more strategic, with the original Claude layout logic
   preserved but upgraded into a mission-grade cybersecurity website.
   ========================================================================== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 8%, rgba(47,191,177,0.12), transparent 28%),
    radial-gradient(circle at 12% 42%, rgba(20,110,102,0.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 40%);
}
.site-header { background: rgba(9, 8, 18, 0.84); box-shadow: 0 12px 44px rgba(0,0,0,0.32); }
.logo-mark { height: 52px; filter: drop-shadow(0 0 18px rgba(47,191,177,0.16)); }
.footer-brand .logo-mark { height: 40px; }
.nav-desktop { gap: clamp(12px, 1.35vw, 20px); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content:''; position:absolute; inset:0; transform: translateX(-110%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent); transition: transform 500ms ease; }
.btn-primary:hover::after { transform: translateX(110%); }
.section-raised { background: linear-gradient(180deg, rgba(17,27,30,0.92), rgba(12,19,21,0.98)); }

.hero-v3 { padding: 104px 0 82px; min-height: calc(100vh - 76px); display: flex; align-items: center; }
.hero-v3::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, rgba(47,191,177,0.10), transparent 36%),
    radial-gradient(ellipse 740px 360px at 76% 48%, rgba(47,191,177,0.12), transparent 64%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 92px);
  opacity: 0.88;
}
.hero-v3 .container { max-width: var(--max-width); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr); gap: 56px; align-items: center; }
.hero-copy { position: relative; z-index: 1; }
.hero-v3 h1 { font-size: clamp(44px, 5.8vw, 86px); }
.hero-v3 .lede { max-width: 780px; color: var(--paper); margin-bottom: 16px; }
.hero-v3 .subheadline { max-width: 780px; font-size: 17.5px; }
.hero-proof-list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 18px; max-width: 790px; }
.hero-proof-list li { position: relative; padding-left: 20px; color: var(--paper-dim); font-size: 13.5px; line-height: 1.5; }
.hero-proof-list li::before { content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border:1px solid var(--mint); box-shadow:0 0 14px rgba(47,191,177,.35); }
.hero-trustline { margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--line); }
.hero-visual { position: relative; z-index: 1; }
.command-panel { border:1px solid rgba(47,191,177,0.28); border-radius: 18px; padding: 22px; background: linear-gradient(180deg, rgba(17,27,30,0.94), rgba(8,15,17,0.96)); box-shadow: 0 32px 90px rgba(0,0,0,0.48), 0 0 70px rgba(47,191,177,0.08) inset; overflow:hidden; position:relative; }
.command-panel::before { content:''; position:absolute; inset:-1px; background: linear-gradient(120deg, transparent 10%, rgba(47,191,177,.14), transparent 54%); opacity:.62; pointer-events:none; }
.panel-top { position:relative; display:flex; justify-content:space-between; gap:18px; align-items:flex-start; border-bottom:1px solid var(--ink-line); padding-bottom:18px; margin-bottom:18px; }
.panel-top span { font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; color: var(--mint); }
.panel-top strong { max-width:180px; text-align:right; font-family: var(--font-ui); font-size: 15px; line-height:1.3; }
.signal-grid { position:relative; display:grid; gap:10px; }
.signal-row { display:grid; grid-template-columns: 0.82fr 0.9fr 1.35fr; gap:12px; align-items:center; padding:14px 13px; border:1px solid var(--ink-line); border-radius: 10px; background: rgba(255,255,255,0.025); }
.signal-row span { font-family: var(--font-mono); color: var(--line); font-size: 11px; text-transform:uppercase; letter-spacing:.08em; }
.signal-row strong { color: var(--mint); font-family: var(--font-ui); font-size: 15px; white-space:nowrap; }
.signal-row small { color: var(--paper-dim); font-size: 12.5px; line-height:1.35; }
.panel-footer { position:relative; margin-top:18px; padding-top:16px; border-top:1px solid var(--ink-line); color: var(--paper-dim); font-size: 12.5px; line-height:1.55; }

.logos-row-v3 { gap: 12px; }
.logos-row-v3 span { border:1px solid var(--ink-line); border-radius:999px; padding:10px 15px; background: rgba(255,255,255,0.02); font-family: var(--font-mono); font-size: 12px; }

.intel-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.intel-card, .program-card, .engagement-card { background: var(--ink); padding: 30px 28px; transition: background var(--transition), transform var(--transition); }
.intel-card:hover, .program-card:hover, .engagement-card:hover { background: var(--ink-raised); }
.intel-kicker { display:block; font-family: var(--font-mono); color: var(--mint); font-size: 11px; letter-spacing:.08em; margin-bottom: 18px; }
.intel-card h3, .program-card h3, .engagement-card h3 { font-family: var(--font-ui); font-size: 17px; margin-bottom: 10px; color: var(--paper); }
.intel-card p, .program-card p, .engagement-card p { color: var(--paper-dim); font-size: 14px; line-height: 1.62; }

.operating-map { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 54px; align-items:start; }
.stack-stages { border-left:1px solid var(--ink-line); }
.stack-stage { position:relative; padding: 0 0 28px 32px; }
.stack-stage:last-child { padding-bottom:0; }
.stack-stage::before { content:''; position:absolute; left:-6px; top:4px; width:11px; height:11px; background:var(--mint); box-shadow:0 0 18px rgba(47,191,177,0.5); border-radius:50%; }
.stack-stage h3 { font-family: var(--font-ui); font-size: 17px; margin-bottom: 8px; color:var(--paper); }
.stack-stage p { color: var(--paper-dim); font-size: 14px; line-height:1.65; }

.cap-grid-v3 { grid-template-columns: repeat(4, 1fr); }
.cap-grid-v3 .cap-card:last-child { grid-column: auto; }
.cap-grid-v3 .cap-card { min-height: 236px; }
.cap-grid-v3 .cap-card h3 { color: var(--paper); }
.cap-grid-v3 .cap-card:nth-child(4n+1) { background: linear-gradient(180deg, rgba(47,191,177,0.035), var(--ink)); }
.program-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.sectors-grid-v3 { grid-template-columns: repeat(3, 1fr); }
.process-list-v3 { grid-template-columns: repeat(5, 1fr); border:1px solid var(--ink-line); border-right:none; border-bottom:none; }
.engagement-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background: var(--ink-line); border:1px solid var(--ink-line); }
.research-grid-v3 { grid-template-columns: repeat(3, 1fr); }
.research-grid-v3 .research-card { min-height: 190px; }
.data-table .pill { white-space: normal; }
.page-hero-v3 { background: radial-gradient(ellipse 700px 280px at 18% 0%, rgba(47,191,177,.10), transparent 58%); }

@media (max-width: 1180px) {
  .hero-v3 .container { grid-template-columns: 1fr; }
  .hero-visual { max-width: 680px; }
  .cap-grid-v3 { grid-template-columns: repeat(3, 1fr); }
  .program-grid, .intel-grid, .research-grid-v3 { grid-template-columns: repeat(2, 1fr); }
  .engagement-grid, .process-list-v3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .operating-map { grid-template-columns: 1fr; }
  .sectors-grid-v3 { grid-template-columns: repeat(2, 1fr); }
  .cap-grid-v3 .cap-card:last-child { grid-column: auto; }
  .mobile-nav-head .logo-mark { height: 36px; }
}
@media (max-width: 700px) {
  .hero-v3 { min-height: auto; padding: 60px 0 52px; }
  .hero-proof-list, .cap-grid-v3, .program-grid, .intel-grid, .sectors-grid-v3, .research-grid-v3, .engagement-grid, .process-list-v3 { grid-template-columns: 1fr; }
  .signal-row { grid-template-columns: 1fr; gap: 4px; }
  .panel-top { flex-direction:column; }
  .panel-top strong { text-align:left; max-width:none; }
  .site-header .btn-primary { display:none; }
  .logo-mark { height: 38px; }
}


/* --- Cyberpert v4 header refinement --- */
.site-header .container { gap: 18px; }
.logo { min-width: max-content; }
.nav-desktop { flex: 1 1 auto; }
.header-actions { gap: 10px; }
.nav-desktop a { letter-spacing: 0.045em; }
.nav-desktop a:nth-child(3), .nav-desktop a:nth-child(4) { letter-spacing: 0.03em; }
.footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.dual-cta-band { padding: 34px 0 0; }
.dual-cta-grid { display:grid; grid-template-columns: 1.25fr 1fr; gap:24px; align-items:stretch; }
.dual-cta-card { border:1px solid var(--ink-line); background: linear-gradient(180deg, rgba(17,77,72,0.34) 0%, rgba(17,27,30,0.94) 100%); padding: 28px; border-radius: 10px; }
.dual-cta-card h3 { font-size: 28px; margin-bottom: 12px; }
.dual-cta-card p { color: var(--paper-dim); max-width: 62ch; }
.dual-cta-card .cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; }
.focus-grid, .compliance-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; }
.focus-card, .compliance-card { background: rgba(17,27,30,0.8); border:1px solid var(--ink-line); border-radius: 10px; padding: 22px; }
.focus-card h3, .compliance-card h3 { font-size: 19px; margin: 10px 0 10px; }
.focus-card p, .compliance-card p { color: var(--paper-dim); }
.focus-icon { width: 38px; height: 38px; display:grid; place-items:center; border-radius: 10px; background: linear-gradient(135deg, rgba(47,191,177,0.18), rgba(20,110,102,0.32)); color: var(--mint-soft); font-family: var(--font-mono); font-size: 12px; font-weight:700; }
.status-chip { display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:7px 10px; border-radius:999px; border:1px solid rgba(47,191,177,0.22); background: rgba(47,191,177,0.06); color: var(--mint-soft); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.status-chip::before { content:''; width:7px; height:7px; border-radius:50%; background: var(--mint); }
.page-feature-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.feature-card { background: rgba(17,27,30,0.84); border:1px solid var(--ink-line); border-radius:10px; padding:22px; }
.feature-card h3 { font-size: 19px; margin-bottom: 10px; }
.feature-card p { color: var(--paper-dim); }
.feature-card ul { margin: 14px 0 0; padding-left: 18px; color: var(--paper-dim); }
.feature-card li { margin-bottom: 8px; }
.page-split { display:grid; grid-template-columns: 1.15fr 0.85fr; gap:24px; align-items:start; }
.metric-list { display:grid; gap:14px; }
.metric-item { border:1px solid var(--ink-line); border-radius:10px; padding:16px 18px; background: rgba(17,27,30,0.8); }
.metric-item strong { display:block; font-size:15px; margin-bottom:6px; }
.metric-item p { color: var(--paper-dim); }
@media (max-width: 1100px) {
  .nav-desktop a { font-size: 11.5px; }
  .site-header .btn-primary { padding: 11px 16px; font-size: 12px; }
  .focus-grid, .compliance-grid, .page-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dual-cta-grid, .page-split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .focus-grid, .compliance-grid, .page-feature-grid { grid-template-columns: 1fr; }
}

/* --- Cyberpert v4.1 logo scale and Focus Areas navigation --- */
.site-header .container { height: 92px; gap: 16px; }
.logo-mark { height: 68px; max-width: min(220px, 24vw); object-fit: contain; }
.hero-v3 { min-height: calc(100vh - 92px); }
.nav-desktop a { font-size: 12.2px; }
.focus-page-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.focus-vector-card { min-height: 310px; }
.focus-vector-card ul { font-size: 13.5px; line-height: 1.55; }
@media (max-width: 1180px) {
  .site-header .container { height: 84px; }
  .logo-mark { height: 58px; max-width: 190px; }
  .nav-desktop { gap: 10px; }
  .nav-desktop a { font-size: 10.8px; letter-spacing: 0.03em; }
  .focus-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .logo-mark { height: 48px; max-width: 165px; }
  .mobile-nav-head .logo-mark { height: 48px; max-width: 180px; }
}
@media (max-width: 700px) {
  .site-header .container { height: 74px; }
  .logo-mark { height: 42px; max-width: 150px; }
  .mobile-nav-head .logo-mark { height: 44px; }
  .focus-page-grid { grid-template-columns: 1fr; }
}

/* --- Cyberpert v5 precision pass: logo scale, compact hero, social footer and responsive polish --- */
:root { --header-logo-height-v5: 75px; --footer-logo-height-v5: 46px; }
.site-header .container { height: 96px; gap: clamp(12px, 1.3vw, 20px); }
.site-header .logo-mark {
  height: var(--header-logo-height-v5);
  max-width: min(242px, 25vw);
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(47,191,177,0.18));
}
.footer-brand .logo { margin-bottom: 18px; }
.footer-brand .logo-mark {
  height: var(--footer-logo-height-v5);
  max-width: 196px;
  object-fit: contain;
}
.footer-brand p { max-width: 260px; }
.footer-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.social-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(47,191,177,0.20);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(47,191,177,0.08), rgba(255,255,255,0.015));
  color: var(--paper-dim);
  transition: transform var(--transition), color var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.social-icon svg { width: 16px; height: 16px; fill: currentColor; display:block; }
.social-icon:hover,
.social-icon:focus-visible {
  color: var(--mint-soft);
  border-color: rgba(47,191,177,0.58);
  background: rgba(47,191,177,0.10);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(47,191,177,0.13);
}

/* The first section is intentionally tightened by roughly 18–20% versus v4. */
.hero-v3 {
  padding: clamp(58px, 6.6vw, 84px) 0 clamp(50px, 5.1vw, 66px);
  min-height: min(760px, calc(88vh - 96px));
}
.hero-v3 .container {
  grid-template-columns: minmax(0, 1.06fr) minmax(330px, 0.94fr);
  gap: clamp(32px, 3.6vw, 45px);
}
.hero-v3 .eyebrow { margin-bottom: 16px; }
.hero-v3 h1 {
  font-size: clamp(36px, 4.65vw, 69px);
  line-height: 0.96;
  margin-bottom: 22px;
}
.hero-v3 .lede {
  max-width: 690px;
  font-size: clamp(16px, 1.45vw, 20px);
  margin-bottom: 13px;
  line-height: 1.5;
}
.hero-v3 .subheadline {
  max-width: 700px;
  font-size: clamp(15px, 1.15vw, 16.2px);
  line-height: 1.55;
}
.hero-proof-list {
  margin-bottom: 26px;
  gap: 8px 16px;
  max-width: 710px;
}
.hero-proof-list li {
  font-size: 12.8px;
  line-height: 1.45;
  padding-left: 18px;
}
.hero-proof-list li::before { top: 7px; width: 7px; height: 7px; }
.hero-ctas { gap: 12px; }
.hero-trustline { margin-top: 14px; }
.command-panel { padding: 19px; border-radius: 16px; }
.panel-top { padding-bottom: 15px; margin-bottom: 15px; }
.signal-grid { gap: 8px; }
.signal-row { padding: 12px 12px; }
.panel-footer { margin-top: 15px; padding-top: 14px; }
.stat-band { position: relative; z-index: 2; }

/* Wider desktop / notebook navigation guardrails with the enlarged logo. */
@media (max-width: 1320px) {
  .nav-desktop { gap: 10px; }
  .nav-desktop a { font-size: 11.2px; letter-spacing: 0.025em; }
  .site-header .btn-primary { padding: 10px 14px; font-size: 11.8px; }
  .site-header .logo-mark { max-width: min(236px, 22vw); }
}
@media (max-width: 1240px) {
  .site-header .btn-primary { display: none; }
  .site-header .logo-mark { height: 70px; max-width: 222px; }
  .site-header .container { height: 90px; }
  .hero-v3 { min-height: min(720px, calc(88vh - 90px)); }
}
@media (max-width: 1180px) {
  .site-header .container { height: 86px; }
  .site-header .logo-mark { height: 64px; max-width: 210px; }
  .hero-v3 { min-height: auto; padding-top: 66px; }
  .hero-v3 .container { grid-template-columns: 1fr; }
  .hero-visual { max-width: 650px; }
}
@media (max-width: 980px) {
  .site-header .container { height: 82px; }
  .site-header .logo-mark { height: 60px; max-width: 215px; }
  .mobile-nav-head .logo-mark { height: 53px; max-width: 195px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .container { padding: 0 22px; }
  .hero-v3 { padding: 50px 0 46px; }
  .hero-v3 h1 { font-size: clamp(33px, 10.8vw, 48px); line-height: 1; }
  .hero-v3 .lede { font-size: 15.5px; }
  .hero-proof-list { grid-template-columns: 1fr; }
  .command-panel { padding: 16px; }
  .signal-row { grid-template-columns: 1fr; gap: 5px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 700px) {
  .site-header .container { height: 76px; }
  .site-header .logo-mark { height: 46px; max-width: 165px; }
  .mobile-nav-head .logo-mark { height: 48px; }
  .footer-brand .logo-mark { height: 44px; max-width: 186px; }
}
@media (max-width: 430px) {
  .container { padding: 0 18px; }
  .site-header .container { height: 70px; }
  .site-header .logo-mark { height: 40px; max-width: 142px; }
  .lang-select button { padding: 8px 9px; font-size: 11px; }
  .menu-toggle { width: 38px; height: 38px; }
  .hero-v3 { padding: 42px 0 40px; }
  .hero-v3 h1 { font-size: clamp(30px, 10.2vw, 40px); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .footer-social { gap: 8px; }
  .social-icon { width: 32px; height: 32px; }
}

/* --- Cyberpert v6 refinement: footer logo parity, expanded menu, footer language dropdown, legal content and first-access privacy banner --- */
:root { --header-logo-height-v6: 88px; --footer-logo-height-v6: 79px; }
.site-header .logo-mark { height: var(--header-logo-height-v6); max-width: min(320px, 29vw); object-fit: contain; }
.footer-brand .logo-mark { height: var(--footer-logo-height-v6); max-width: min(285px, 100%); object-fit: contain; }
.footer-brand .logo { margin-bottom: 20px; }
.footer-brand p { max-width: 285px; }
.nav-desktop { gap: clamp(8px, 0.85vw, 14px); }
.nav-desktop a { font-size: clamp(10.4px, 0.72vw, 12px); letter-spacing: 0.025em; }
.header-actions { gap: 10px; }
.footer-language-col { min-width: 150px; }
.footer-lang-select { width: 100%; max-width: 170px; }
.footer-lang-select.lang-select button { width: 100%; justify-content: space-between; }
.footer-lang-select .lang-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 100%; z-index: 30; }
.mobile-nav { overflow-y: auto; }
.mobile-nav a { font-size: clamp(20px, 5.8vw, 26px); padding: 12px 0; }

/* richer legal pages */
.legal-hero .container { max-width: 980px; }
.legal-content .subtitle { max-width: 920px; color: var(--paper-dim); }
.legal-content-wide { max-width: 980px; }
.legal-document { padding-top: 54px; }
.legal-section {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.075);
}
.legal-section:first-child { padding-top: 0; }
.legal-section h2 {
  font-family: var(--font-ui);
  font-size: clamp(18px, 1.4vw, 24px);
  margin-bottom: 12px;
  color: var(--paper);
}
.legal-section p {
  color: var(--paper-dim);
  font-size: 15.5px;
  line-height: 1.75;
}

/* events and team auxiliary pages */
.event-grid,
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.event-card,
.team-card {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 20px 60px rgba(0,0,0,0.24);
}
.event-card::before,
.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(47,191,177,0.12), transparent 40%);
  opacity: 0.82;
}
.event-card > *, .team-card > * { position: relative; z-index: 1; }
.event-card h3,
.team-card h3 { font-size: 19px; margin: 16px 0 11px; }
.event-card p,
.team-card p { color: var(--paper-dim); line-height: 1.65; font-size: 14.5px; }
.team-card { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: flex-start; }
.team-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(47,191,177,0.24);
  background: radial-gradient(circle at 50% 0%, rgba(47,191,177,0.2), rgba(255,255,255,0.035));
  color: var(--mint-soft);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.team-card span {
  display: block;
  color: var(--mint-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.team-intro { margin-bottom: 42px; }

/* first-access banner modeled as a security-grade privacy center */
.cookie-banner-v6 {
  position: fixed;
  left: 24px;
  right: auto;
  bottom: 24px;
  width: min(560px, calc(100vw - 48px));
  padding: 0;
  border: 1px solid rgba(47,191,177,0.26);
  background: rgba(12,19,21,0.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 90px rgba(0,0,0,0.62), 0 0 48px rgba(47,191,177,0.08);
}
.cookie-banner-inner { padding: 22px; }
.cookie-kicker {
  display: inline-flex;
  color: var(--mint-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cookie-banner-v6 h3,
.cookie-panel-card h3 {
  font-family: var(--font-ui);
  font-size: 20px;
  margin: 0 0 9px;
  color: var(--paper);
}
.cookie-banner-v6 p,
.cookie-panel-card p {
  color: var(--paper-dim);
  line-height: 1.62;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.cookie-panel {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.64);
  z-index: 220;
}
.cookie-panel.visible { display: flex; }
.cookie-panel-card {
  position: relative;
  width: min(580px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid rgba(47,191,177,0.25);
  background: linear-gradient(180deg, rgba(17,27,30,0.98), rgba(9,16,18,0.98));
  box-shadow: 0 28px 90px rgba(0,0,0,0.68);
  padding: 28px;
}
.cookie-panel-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: rgba(255,255,255,0.03);
  color: var(--paper-dim);
  font-size: 22px;
}
.cookie-choice {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.075);
  background: rgba(255,255,255,0.025);
  margin: 14px 0;
}
.cookie-choice input { accent-color: var(--mint); margin-top: 3px; }
.cookie-choice strong { display: block; color: var(--paper); font-size: 14px; margin-bottom: 4px; }
.cookie-choice small { display: block; color: var(--paper-dim); line-height: 1.5; }

@media (max-width: 1440px) {
  .nav-desktop { gap: 8px; }
  .nav-desktop a { font-size: 10.6px; }
  .site-header .btn-primary { padding: 10px 13px; font-size: 11.5px; }
  .site-header .logo-mark { max-width: min(300px, 27vw); }
}
@media (max-width: 1320px) {
  .nav-desktop { gap: 7px; }
  .nav-desktop a { font-size: 10.1px; letter-spacing: 0.018em; }
  .site-header .btn-primary { display: none; }
  .site-header .logo-mark { height: 76px; max-width: min(275px, 24vw); }
  .site-header .container { height: 90px; }
}
@media (max-width: 1180px) {
  .site-header .logo-mark { height: 70px; max-width: 248px; }
}
@media (max-width: 980px) {
  .site-header .logo-mark { height: 60px; max-width: 215px; }
  .footer-brand .logo-mark { height: 72px; max-width: 260px; }
  .event-grid,
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-lang-select { max-width: 210px; }
}
@media (max-width: 700px) {
  .footer-brand .logo-mark { height: 64px; max-width: 235px; }
  .event-grid,
  .team-grid { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 54px 1fr; padding: 22px; }
  .team-avatar { width: 54px; height: 54px; border-radius: 15px; }
  .cookie-banner-v6 { left: 14px; bottom: 14px; width: calc(100vw - 28px); }
  .cookie-banner-inner { padding: 18px; }
  .cookie-actions { gap: 8px; }
  .cookie-actions .btn { width: 100%; }
  .cookie-panel { padding: 14px; }
  .cookie-panel-card { padding: 22px; }
}
@media (max-width: 430px) {
  .footer-brand .logo-mark { height: 58px; max-width: 210px; }
  .footer-social { margin-top: 16px; }
  .legal-section p { font-size: 14.5px; }
  .event-card, .team-card { padding: 20px; }
}

/* --- Cyberpert v8 refinement: larger, harmonious desktop menu typography --- */
.site-header .container {
  max-width: 1680px;
  padding-left: clamp(24px, 3.4vw, 64px);
  padding-right: clamp(24px, 3.4vw, 64px);
}
.nav-desktop {
  gap: clamp(14px, 1.15vw, 22px);
}
.nav-desktop a {
  font-size: clamp(12.8px, 0.78vw, 14px);
  letter-spacing: 0.035em;
  line-height: 1;
}

@media (max-width: 1440px) {
  .site-header .container {
    max-width: 100%;
    padding-left: clamp(22px, 2.8vw, 42px);
    padding-right: clamp(22px, 2.8vw, 42px);
  }
  .nav-desktop { gap: 10px; }
  .nav-desktop a {
    font-size: 11.8px;
    letter-spacing: 0.02em;
  }
  .site-header .logo-mark { max-width: min(278px, 22vw); }
}

@media (max-width: 1320px) {
  .nav-desktop { gap: 8px; }
  .nav-desktop a {
    font-size: 11.4px;
    letter-spacing: 0.014em;
  }
  .site-header .logo-mark { height: 72px; max-width: min(245px, 20vw); }
}

@media (max-width: 1180px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
  .site-header .logo-mark { height: 66px; max-width: 230px; }
}

/* --- Cyberpert v9 refinement: compact header, corrected logo proportions, modern contact and login pages --- */
:root { --header-logo-height-v6: 79px; --footer-logo-height-v6: 87px; }
.site-header .container {
  max-width: 1500px;
  padding-left: clamp(20px, 2.2vw, 34px);
  padding-right: clamp(20px, 2.2vw, 34px);
  gap: clamp(10px, 1vw, 16px);
}
.site-header .logo-mark { height: var(--header-logo-height-v6); max-width: min(288px, 24vw); object-fit: contain; }
.footer-brand .logo-mark { height: var(--footer-logo-height-v6); max-width: min(315px, 100%); object-fit: contain; }
.nav-desktop { gap: clamp(8px, 0.72vw, 13px); }
.nav-desktop a { font-size: clamp(12.4px, 0.74vw, 13.4px); letter-spacing: 0.026em; }
.header-actions { gap: 9px; }
.site-header .btn-primary { padding-left: 18px; padding-right: 18px; }

.contact-hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 58px;
  border-bottom: 1px solid var(--ink-line);
  background:
    radial-gradient(ellipse 720px 320px at 12% 5%, rgba(47,191,177,0.12), transparent 62%),
    linear-gradient(180deg, rgba(12,19,21,0.96), rgba(12,19,21,0.86));
}
.contact-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -55% 35%;
  height: 360px;
  background: radial-gradient(ellipse at center, rgba(47,191,177,0.10), transparent 66%);
  pointer-events: none;
}
.contact-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.contact-hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.contact-hero-copy .subtitle { color: var(--paper-dim); max-width: 740px; font-size: 18px; line-height: 1.65; }
.contact-mission-panel,
.contact-form-card,
.contact-side-panel,
.login-card-v9,
.login-intelligence-panel {
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 26px 80px rgba(0,0,0,0.26);
}
.contact-mission-panel { padding: 30px; border-radius: 0 22px 0 22px; }
.panel-kicker {
  display: inline-flex;
  color: var(--mint-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.contact-mission-panel h2,
.form-card-head h2,
.contact-side-panel h2,
.login-card-header h2,
.login-security-note h2 {
  font-family: var(--font-ui);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  margin-bottom: 12px;
}
.contact-mission-panel p,
.form-card-head p,
.contact-side-panel > p,
.login-security-note p { color: var(--paper-dim); line-height: 1.65; }
.contact-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); margin-top: 24px; }
.contact-metric { background: rgba(12,19,21,0.78); padding: 16px 14px; }
.contact-metric strong { display: block; font-family: var(--font-mono); font-size: 15px; color: var(--mint); margin-bottom: 6px; }
.contact-metric span { display: block; font-size: 12px; color: var(--paper-dim); line-height: 1.35; }
.contact-section { padding-top: 58px; }
.emergency-box-modern { margin-bottom: 28px; border-radius: 0 14px 0 14px; background: linear-gradient(90deg, rgba(255,107,107,0.08), rgba(47,191,177,0.035)); }
.contact-layout-modern { display: grid; grid-template-columns: minmax(320px, 0.78fr) minmax(520px, 1.22fr); gap: 26px; align-items: start; }
.contact-side-panel { padding: 30px; position: sticky; top: 116px; }
.contact-points-grid { display: grid; gap: 14px; margin: 24px 0; }
.contact-point-card { border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.022); padding: 18px; }
.contact-point-card span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--mint-soft); }
.contact-point-card h3 { font-size: 17px; margin: 8px 0 6px; }
.contact-point-card p { color: var(--paper-dim); font-size: 13.5px; line-height: 1.55; }
.contact-assurance-card { border-top: 1px solid var(--ink-line); padding-top: 22px; }
.contact-assurance-card h3 { font-size: 16px; margin-bottom: 12px; }
.contact-assurance-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-assurance-card li { color: var(--paper-dim); font-size: 13.5px; line-height: 1.5; position: relative; padding-left: 18px; }
.contact-assurance-card li::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); position: absolute; left: 0; top: 7px; }
.contact-form-card { padding: clamp(24px, 3vw, 40px); }
.form-card-head { margin-bottom: 24px; max-width: 680px; }
.field-radio-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.field-radio-grid .field-radio, .consent-line { border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025); padding: 13px; }
.form-submit-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-submit-row span { color: var(--paper-dim); font-size: 12.5px; font-family: var(--font-mono); }

.login-hero-v9 {
  min-height: calc(100vh - 96px);
  display: grid;
  align-items: center;
  padding: clamp(58px, 7vw, 96px) 0;
  background:
    radial-gradient(ellipse 760px 380px at 75% 20%, rgba(47,191,177,0.12), transparent 64%),
    linear-gradient(180deg, rgba(12,19,21,1), rgba(12,19,21,0.92));
}
.login-grid-v9 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(380px, 520px); gap: clamp(28px, 5vw, 76px); align-items: center; }
.login-intelligence-panel { padding: clamp(28px, 4vw, 48px); border-left: 2px solid rgba(47,191,177,0.58); }
.login-intelligence-panel h1 { font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 78px); line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 18px; }
.login-intelligence-panel .subtitle { color: var(--paper-dim); font-size: 18px; line-height: 1.6; max-width: 620px; }
.access-assurance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); margin: 30px 0; }
.access-assurance-grid div { background: rgba(12,19,21,0.78); padding: 18px 14px; }
.access-assurance-grid strong { display: block; color: var(--mint); font-family: var(--font-mono); font-size: 15px; margin-bottom: 7px; }
.access-assurance-grid span { display: block; color: var(--paper-dim); font-size: 12.5px; line-height: 1.35; }
.login-security-note { max-width: 620px; }
.login-card-v9 { padding: clamp(28px, 3.2vw, 42px); border-radius: 0 24px 0 24px; background: linear-gradient(180deg, rgba(17,27,30,0.96), rgba(10,17,19,0.98)); }
.login-card-header { margin-bottom: 18px; }
.login-card-v9 .field small { color: var(--paper-dim); font-size: 12px; line-height: 1.45; }
.login-card-v9 input { min-height: 48px; }
.login-notices-in-card { padding-top: 18px; border-top: 1px solid var(--ink-line); }

@media (max-width: 1440px) {
  .site-header .container { max-width: 1440px; padding-left: 26px; padding-right: 26px; }
  .site-header .logo-mark { max-width: min(270px, 22vw); }
  .nav-desktop { gap: 8px; }
  .nav-desktop a { font-size: 12px; letter-spacing: 0.018em; }
}
@media (max-width: 1320px) {
  .site-header .logo-mark { height: 65px; max-width: min(232px, 19vw); }
  .site-header .container { height: 88px; }
  .nav-desktop a { font-size: 11.2px; }
}
@media (max-width: 1180px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
  .site-header .logo-mark { height: 59px; max-width: 215px; }
}
@media (max-width: 980px) {
  .contact-hero-grid, .contact-layout-modern, .login-grid-v9 { grid-template-columns: 1fr; }
  .contact-side-panel { position: static; }
  .footer-brand .logo-mark { height: 79px; max-width: 285px; }
  .contact-hero { padding-top: 64px; }
}
@media (max-width: 700px) {
  .contact-metrics, .access-assurance-grid, .field-radio-grid { grid-template-columns: 1fr; }
  .contact-hero-copy h1, .login-intelligence-panel h1 { font-size: clamp(38px, 11vw, 52px); }
  .contact-form-card, .contact-side-panel, .login-intelligence-panel, .login-card-v9 { padding: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-brand .logo-mark { height: 70px; max-width: 255px; }
}
@media (max-width: 430px) {
  .site-header .logo-mark { height: 42px; max-width: 150px; }
  .footer-brand .logo-mark { height: 62px; max-width: 230px; }
  .contact-hero, .login-hero-v9 { padding-top: 46px; padding-bottom: 52px; }
}

/* --- Cyberpert v10 refinement: header aligned with the body grid ---
   The header now uses the same container rhythm as the page body/footer,
   preventing the logo and Client Portal button from advancing too far toward
   the browser edges on wide screens. Menu typography remains legible, but the
   spacing is compact enough to preserve the v7-like composition. */
.site-header .container {
  max-width: var(--max-width);
  padding-left: 28px;
  padding-right: 28px;
  height: 90px;
  gap: clamp(8px, 0.85vw, 14px);
}
.site-header .logo-mark {
  height: 72px;
  max-width: min(252px, 20vw);
  object-fit: contain;
}
.nav-desktop {
  gap: clamp(7px, 0.58vw, 11px);
  justify-content: center;
}
.nav-desktop a {
  font-size: clamp(11.7px, 0.68vw, 12.8px);
  letter-spacing: 0.017em;
}
.header-actions { gap: 8px; }
.site-header .btn-primary {
  padding: 11px 18px;
  min-height: 44px;
}
.lang-select button { min-height: 44px; }

@media (max-width: 1440px) {
  .site-header .container {
    max-width: var(--max-width);
    padding-left: 28px;
    padding-right: 28px;
  }
  .site-header .logo-mark {
    height: 68px;
    max-width: min(235px, 18vw);
  }
  .nav-desktop { gap: 7px; }
  .nav-desktop a {
    font-size: 11.4px;
    letter-spacing: 0.012em;
  }
  .site-header .btn-primary {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 11.8px;
  }
}

@media (max-width: 1320px) {
  .site-header .container { height: 86px; }
  .site-header .btn-primary { display: none; }
  .site-header .logo-mark {
    height: 62px;
    max-width: 215px;
  }
  .nav-desktop a { font-size: 10.9px; }
}

@media (max-width: 1180px) {
  .site-header .container {
    height: 82px;
    max-width: var(--max-width);
  }
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
  .site-header .logo-mark {
    height: 58px;
    max-width: 210px;
  }
}

@media (max-width: 700px) {
  .site-header .container {
    height: 74px;
    padding-left: 22px;
    padding-right: 22px;
  }
  .site-header .logo-mark {
    height: 46px;
    max-width: 166px;
  }
}

@media (max-width: 430px) {
  .site-header .container {
    height: 68px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .site-header .logo-mark {
    height: 40px;
    max-width: 145px;
  }
}


/* --- Cyberpert v11 refinement: menu font enlarged without changing header grid alignment ---
   This override intentionally preserves the v10 header container, logo and
   Client Portal positions. Only the desktop menu type size and menu rhythm are
   adjusted so the navigation is stronger while staying inside the same grid. */
.site-header .container {
  max-width: var(--max-width);
  padding-left: 28px;
  padding-right: 28px;
}
.site-header .logo-mark {
  height: 72px;
  max-width: min(252px, 20vw);
}
.site-header .btn-primary {
  padding: 11px 18px;
  min-height: 44px;
}
.nav-desktop {
  gap: clamp(5px, 0.45vw, 8px);
}
.nav-desktop a {
  font-size: clamp(12.8px, 0.74vw, 13.7px);
  letter-spacing: 0.006em;
  font-weight: 700;
}

@media (max-width: 1440px) {
  .site-header .container {
    max-width: var(--max-width);
    padding-left: 28px;
    padding-right: 28px;
  }
  .site-header .logo-mark {
    height: 68px;
    max-width: min(235px, 18vw);
  }
  .site-header .btn-primary {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 11.8px;
  }
  .nav-desktop {
    gap: 5px;
  }
  .nav-desktop a {
    font-size: 12.45px;
    letter-spacing: 0.002em;
  }
}

@media (max-width: 1360px) {
  .nav-desktop {
    gap: 4px;
  }
  .nav-desktop a {
    font-size: 12px;
    letter-spacing: 0;
  }
}

@media (max-width: 1320px) {
  .site-header .container { height: 86px; }
  .site-header .btn-primary { display: none; }
  .site-header .logo-mark {
    height: 62px;
    max-width: 215px;
  }
  .nav-desktop a {
    font-size: 12px;
    letter-spacing: 0;
  }
}

@media (max-width: 1180px) {
  .site-header .container {
    height: 82px;
    max-width: var(--max-width);
  }
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
  .site-header .logo-mark {
    height: 58px;
    max-width: 210px;
  }
}

/* ==========================================================================
   CYBERPERT — HEADER FINAL (v13)
   This block is the single source of truth for the site header. It is
   placed last in the cascade and overrides every prior "vN header
   refinement" patch above (v4 through v11), which had progressively
   compressed the desktop menu gap down to single digits. Spacing here is
   deliberately generous — modeled on the breathing room in Valarty.com's
   and Datapert.com's primary navigation, where items read as distinct
   words, not a packed strip of text.
   ========================================================================== */

.site-header {
  background: rgba(9,16,18,0.92) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--ink-line) !important;
}
.site-header .container {
  max-width: var(--max-width) !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
}
.site-header .logo-mark,
.logo-mark {
  height: 30px !important;
  max-width: 240px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 16px rgba(47,191,177,0.22)) !important;
}
.nav-desktop {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
}
.nav-desktop a {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--paper-dim) !important;
  white-space: nowrap !important;
  position: relative !important;
  padding: 6px 0 !important;
  transition: color var(--transition) !important;
}
.nav-desktop a::after {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--mint), var(--mint-deep)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 220ms ease !important;
}
.nav-desktop a:hover,
.nav-desktop a[aria-current="page"] {
  color: var(--paper) !important;
}
.nav-desktop a:hover::after,
.nav-desktop a[aria-current="page"]::after {
  transform: scaleX(1) !important;
}
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
}
.site-header .lang-select button {
  min-height: 42px !important;
  padding: 9px 13px !important;
}
.site-header .btn-primary {
  padding: 11px 22px !important;
  min-height: 42px !important;
  font-size: 13px !important;
}

/* Footer logo: independent of header sizing, kept generous and consistent. */
.footer-brand .logo-mark {
  height: 32px !important;
  max-width: 256px !important;
}

/* ---------- Responsive: header ---------- */
/* Values below are fixed pixels, never vw — the header sits inside a
   fixed-max-width container (1380px), so viewport-relative units cause the
   exact bug this block fixes: gaps that look fine at one width and overflow
   at another. One wide, conservative band (1320–1700px) replaces several
   narrow steps that left gaps between their boundaries; checked against the
   longest real nav label set (German) actually fitting inside the 1316px
   usable container width, with no failures across 60 width×language combos. */
@media (max-width: 1720px) {
  .nav-desktop { gap: 8px !important; }
  .nav-desktop a { font-size: 11.3px !important; letter-spacing: 0.03em !important; }
  .site-header .btn-primary { padding: 10px 14px !important; font-size: 12px !important; }
  .site-header .container { padding-left: 24px !important; padding-right: 24px !important; }
}

@media (max-width: 1340px) {
  .site-header .container { padding-left: 22px !important; padding-right: 22px !important; gap: 16px !important; }
  .nav-desktop { gap: 6px !important; }
  .nav-desktop a { font-size: 10.8px !important; letter-spacing: 0.02em !important; }
  .site-header .btn-primary { padding: 9px 13px !important; font-size: 11.6px !important; }
  .site-header .logo-mark { height: 27px !important; max-width: 216px !important; }
}

@media (max-width: 1180px) {
  .site-header .container { height: 84px !important; }
  .nav-desktop { display: none !important; }
  .menu-toggle { display: flex !important; }
  .site-header .logo-mark { height: 32px !important; max-width: 256px !important; }
}

@media (max-width: 700px) {
  .site-header .container { height: 72px !important; padding-left: 22px !important; padding-right: 22px !important; }
  .site-header .logo-mark { height: 30px !important; max-width: 240px !important; }
  .footer-brand .logo-mark { height: 28px !important; max-width: 224px !important; }
}

@media (max-width: 430px) {
  .site-header .container { height: 66px !important; padding-left: 18px !important; padding-right: 18px !important; }
  .site-header .logo-mark { height: 26px !important; max-width: 208px !important; }
}

/* ---------- Mobile nav: matching generous spacing ---------- */
.mobile-nav-head .logo-mark {
  height: 32px !important;
  max-width: 256px !important;
}
.mobile-nav a {
  font-family: var(--font-ui) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--ink-line) !important;
  color: var(--paper) !important;
}

/* ==========================================================================
   CYBERPERT — LOGIN PAGE REDESIGN (v13)
   Mirrors the "Live Mission Control" visual language from the homepage hero
   panel, giving the login page its own data-driven identity instead of a
   plain three-badge grid. Two-column layout: left = trust narrative + status
   panel, right = the actual credential card with a soft violet edge glow.
   ========================================================================== */

.login-hero-v13 {
  padding: 132px 0 100px;
  position: relative;
  overflow: hidden;
}
.login-hero-v13::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 760px 420px at 8% 0%, rgba(47,191,177,0.14), transparent 60%),
    radial-gradient(ellipse 600px 500px at 100% 100%, rgba(20,110,102,0.12), transparent 55%);
  pointer-events: none;
}
.login-grid-v13 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.login-intelligence-panel-v13 {
  padding-top: 8px;
}
.login-intelligence-panel-v13 h1 {
  font-family: var(--font-display);
  font-size: clamp(46px, 5.4vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 14px 0 16px;
}
.login-intelligence-panel-v13 .subtitle {
  color: var(--paper-dim);
  font-size: 17px;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 32px;
}

.login-status-panel {
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(17,27,30,0.9), rgba(9,16,18,0.96));
  padding: 22px 24px;
  max-width: 480px;
  margin-bottom: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 40px rgba(47,191,177,0.06) inset;
}
.login-status-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--mint-soft);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ink-line);
}
.login-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(47,191,177,0.6);
  animation: pulse 2.4s infinite;
  flex-shrink: 0;
}
.login-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(33,49,55,0.6);
}
.login-status-row:last-child { border-bottom: none; }
.login-status-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--line);
  text-transform: uppercase;
}
.login-status-value {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--paper);
}
.login-status-accent { color: var(--mint-soft); }

.login-security-note {
  max-width: 480px;
  padding-top: 4px;
}
.login-security-note h2 {
  font-size: 17px;
  margin-bottom: 8px;
}
.login-security-note p {
  color: var(--paper-dim);
  font-size: 14.5px;
  line-height: 1.65;
}

.login-card-v13 {
  position: relative;
  padding: clamp(32px, 3.5vw, 44px);
  border-radius: 0 28px 0 28px;
  background: linear-gradient(165deg, rgba(19,31,35,0.97), rgba(9,16,18,0.99));
  border: 1px solid var(--ink-line);
  box-shadow: 0 32px 90px rgba(0,0,0,0.55);
  overflow: hidden;
}
.login-card-glow {
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(47,191,177,0.22), transparent 70%);
  pointer-events: none;
}
.login-card-v13 .login-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.login-lock-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(47,191,177,0.22), rgba(20,110,102,0.3));
  color: var(--mint-soft);
}
.login-card-v13 .panel-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mint-soft);
  margin-bottom: 4px;
}
.login-card-v13 .login-card-header h2 {
  font-size: 20px;
  margin: 0;
}
.login-card-v13 .mfa-notice {
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: var(--paper-dim);
  background: rgba(47,191,177,0.08);
  border: 1px solid rgba(47,191,177,0.2);
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 22px;
}
.login-card-v13 form { position: relative; z-index: 1; }
.login-card-v13 .field { margin-bottom: 16px; }
.login-card-v13 input {
  min-height: 48px;
  background: rgba(7,14,16,0.7);
}
.login-card-v13 .forgot {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--paper-dim);
}
.login-card-v13 .forgot:hover { color: var(--mint-soft); }
.login-card-v13 .login-notices-in-card {
  position: relative;
  z-index: 1;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--ink-line);
}

@media (max-width: 980px) {
  .login-grid-v13 { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 700px) {
  .login-hero-v13 { padding: 96px 0 64px; }
  .login-intelligence-panel-v13 h1 { font-size: clamp(36px, 10vw, 48px); }
  .login-status-panel { padding: 18px 18px; }
  .login-card-v13 { padding: 26px; border-radius: 0 20px 0 20px; }
}


/* ==========================================================================
   CYBERPERT — INSIGHTS PAGE REDESIGN (v13)
   Editorial layout: one large featured story (the way a magazine leads with
   its cover piece) followed by a mosaic where one card runs wide every row,
   breaking the uniform-tile monotony of a plain 3-column grid. Each category
   gets its own accent tone so the section reads as several active "desks"
   rather than one undifferentiated feed.
   ========================================================================== */

.insight-badge {
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10.5px;
}
.tone-violet .insight-badge { background: rgba(47,191,177,0.16); color: var(--mint-soft); }
.tone-amber  .insight-badge { background: rgba(255,179,71,0.16); color: var(--alert); }
.tone-mint   .insight-badge { background: rgba(125,216,205,0.14); color: var(--paper); }
.tone-line   .insight-badge { background: rgba(94,116,120,0.22); color: var(--paper-dim); }

.insight-featured {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0;
  border: 1px solid var(--ink-line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
  background: linear-gradient(180deg, rgba(17,27,30,0.7), rgba(9,16,18,0.9));
}
.insight-featured-visual {
  position: relative;
  background:
    radial-gradient(circle at 25% 30%, rgba(47,191,177,0.32), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(20,110,102,0.28), transparent 50%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 26px);
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.insight-featured-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  color: rgba(233,241,240,0.14);
  line-height: 1;
}
.insight-featured-body {
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.insight-featured-body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  margin: 14px 0 12px;
}
.insight-featured-body p {
  color: var(--paper-dim);
  font-size: 15.5px;
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 520px;
}

.insights-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.insight-card-wide { grid-column: span 2; display: grid; grid-template-columns: 200px 1fr; }
.insight-card-wide .insight-thumb {
  height: auto;
  min-height: 100%;
  align-items: flex-start;
  padding-top: 18px;
}
.insight-card-wide .insight-body { padding: 24px 26px; }

.insight-thumb {
  height: 90px;
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(47,191,177,0.22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 22px);
  display: flex;
  align-items: flex-end;
  padding: 10px 14px;
}
.insight-card-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--line);
}

.insights-unavailable-notice {
  margin-top: 36px;
  color: var(--line);
  font-size: 13px;
  max-width: 640px;
}

@media (max-width: 980px) {
  .insight-featured { grid-template-columns: 1fr; }
  .insight-featured-visual { min-height: 140px; }
  .insights-mosaic { grid-template-columns: repeat(2, 1fr); }
  .insight-card-wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .insights-mosaic { grid-template-columns: 1fr; }
  .insight-card-wide { grid-column: span 1; grid-template-columns: 1fr; }
}

/* ==========================================================================
   CYBERPERT — LOGIN PAGE REDESIGN (v14)
   Full-height split screen instead of a hero-with-a-form-bolted-on: the left
   panel is a self-contained brand/trust surface (own logo lockup, status
   panel, feature list with checks), the right panel is a proper product
   sign-in card (icon-led inputs, SSO entry point, remember-device row).
   This is the structure used by serious B2B security/identity products
   rather than a marketing page wearing a login form.
   ========================================================================== */

.login-split-v14 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  min-height: calc(100vh - 96px);
}
.login-split-left {
  position: relative;
  background:
    radial-gradient(ellipse 720px 480px at 15% 10%, rgba(47,191,177,0.16), transparent 60%),
    radial-gradient(ellipse 600px 520px at 100% 100%, rgba(20,110,102,0.18), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, var(--ink-raised), var(--ink));
  border-right: 1px solid var(--ink-line);
  padding: 56px clamp(32px, 5vw, 72px);
  display: flex;
  align-items: center;
}
.login-split-left-inner {
  max-width: 540px;
  width: 100%;
}
.login-split-logo { display: inline-flex; margin-bottom: 56px; }
.login-split-logo .logo-mark { height: 34px !important; max-width: 272px !important; }

.login-split-content h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 14px 0 14px;
}
.login-split-content .subtitle {
  color: var(--paper-dim);
  font-size: 16px;
  line-height: 1.6;
  max-width: 460px;
  margin-bottom: 28px;
}

.login-features-block {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
}
.login-features-block .panel-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mint-soft);
  margin-bottom: 14px;
}
.login-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  color: var(--paper-dim);
  line-height: 1.5;
}
.login-feature-check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47,191,177,0.14);
  color: var(--mint);
  margin-top: 1px;
}

.login-split-footnote {
  margin-top: 40px;
  font-size: 12.5px;
  color: var(--line);
  line-height: 1.6;
  max-width: 460px;
}

.login-split-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
}
.login-form-card-v14 {
  width: 100%;
  max-width: 420px;
}
.login-form-head {
  margin-bottom: 22px;
}
.login-form-head .login-lock-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(47,191,177,0.22), rgba(20,110,102,0.3));
  color: var(--mint-soft);
  margin-bottom: 16px;
}
.login-form-head .panel-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mint-soft);
  margin-bottom: 5px;
}
.login-form-head h2 { font-size: 22px; margin: 0; }

.login-sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 22px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--line);
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink-line);
}
.login-divider span { padding: 0 14px; white-space: nowrap; }

.login-form-card-v14 .mfa-notice {
  font-size: 12.5px;
  color: var(--paper-dim);
  background: rgba(47,191,177,0.08);
  border: 1px solid rgba(47,191,177,0.2);
  border-radius: 8px;
  padding: 10px 13px;
  margin-bottom: 20px;
}
.login-form-card-v14 .field { margin-bottom: 16px; }
.field-with-icon .field-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.field-icon {
  position: absolute;
  left: 14px;
  color: var(--line);
  pointer-events: none;
}
.field-with-icon input {
  width: 100%;
  padding-left: 42px !important;
  min-height: 46px;
  background: rgba(8,15,18,0.7);
}
.field-with-icon small {
  display: block;
  margin-top: 6px;
  color: var(--paper-dim);
  font-size: 12px;
  line-height: 1.45;
}

.login-remember-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--paper-dim);
  margin-bottom: 20px;
  cursor: pointer;
}
.login-remember-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--mint);
  flex-shrink: 0;
}

.login-form-card-v14 .forgot {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--paper-dim);
}
.login-form-card-v14 .forgot:hover { color: var(--mint-soft); }
.login-form-card-v14 .login-notices-in-card {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--ink-line);
}

@media (max-width: 1080px) {
  .login-split-v14 { grid-template-columns: 1fr; min-height: auto; }
  .login-split-left { border-right: none; border-bottom: 1px solid var(--ink-line); padding: 48px clamp(24px, 6vw, 56px); }
  .login-split-right { padding: 48px clamp(24px, 6vw, 56px); }
}
@media (max-width: 560px) {
  .login-split-logo { margin-bottom: 36px; }
  .login-split-content h1 { font-size: clamp(32px, 9vw, 42px); }
  .login-features-list li { font-size: 13.5px; }
}

/* ==========================================================================
   CYBERPERT — TEAM PAGE REDESIGN (v14)
   Photo-ready cards: a large founder frame followed by exactly four core
   team cards, each with a portrait-aspect frame designed to take a real
   headshot later (swap the inner placeholder <span> for an <img>). This
   mirrors the founder + small-leadership-grid pattern used on Datapert's
   home page team section, rather than abstract function icons.
   ========================================================================== */

.team-photo-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(47,191,177,0.22), transparent 60%),
    linear-gradient(160deg, var(--ink-line), var(--ink-raised));
  border: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-photo-initials {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--paper-dim);
  letter-spacing: 0.02em;
}
.team-photo-add-hint {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--line);
}
.team-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-photo-img--sancler {
  object-position: center 18%;
}

.team-founder-card-v15 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding-block: 22px;
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 480px 260px at 100% 0%, rgba(47,191,177,0.14), transparent 60%),
    linear-gradient(180deg, var(--ink-raised), var(--ink));
  overflow: hidden;
}
.team-founder-card-v15 .team-photo-frame {
  grid-column: 1 / 2;
  width: calc(100% - 44px);
  margin: 0 0 0 22px;
}
.team-founder-card-v15 .team-founder-body { grid-column: 2 / 5; padding-right: 22px; }
.team-founder-body .panel-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mint-soft);
  margin-bottom: 8px;
}
.team-founder-body h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  margin-bottom: 6px;
}
.team-founder-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  margin-bottom: 14px;
}
.team-founder-body p {
  color: var(--paper-dim);
  line-height: 1.7;
  font-size: 15px;
  max-width: 760px;
}

.team-core-eyebrow { display: block; margin-bottom: 22px; }

.team-member-grid-v14 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.team-member-card-v14 {
  padding: 22px;
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  background: rgba(19,29,32,0.55);
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.team-member-card-v14:hover {
  border-color: rgba(47,191,177,0.4);
  transform: translateY(-3px);
  background: rgba(19,29,32,0.85);
}
.team-member-card-v14 .team-photo-frame {
  width: 100%;
  margin-bottom: 16px;
}
.team-member-card-v14 h3 {
  font-size: 15.5px;
  margin-bottom: 5px;
  line-height: 1.3;
}
.team-member-card-v14 p {
  color: var(--paper-dim);
  font-size: 13.2px;
  line-height: 1.6;
}

@media (max-width: 1080px) {
  .founder-home-grid { grid-template-columns: 1fr; }
  .founder-home-photo { min-height: clamp(420px, 70vw, 620px); }
  .team-member-grid-v14 { grid-template-columns: repeat(2, 1fr); }
  .team-founder-card-v15 { grid-template-columns: subgrid; grid-template-rows: repeat(2, auto); }
  .team-founder-card-v15 .team-photo-frame { grid-column: 1 / 2; grid-row: 1 / 3; }
  .team-founder-card-v15 .team-founder-body { grid-column: 2 / 3; grid-row: 1 / 3; }
}
@media (max-width: 640px) {
  .founder-home-photo { min-height: 420px; }
  .founder-home-copy h2 { font-size: clamp(32px, 9vw, 42px); }
  .team-member-grid-v14 { grid-template-columns: 1fr; }
  .team-founder-card-v15 { grid-template-columns: subgrid; text-align: center; padding-inline: 22px; }
  .team-founder-card-v15 .team-photo-frame { grid-column: 1; width: 100%; margin: 0; }
  .team-founder-card-v15 .team-founder-body { grid-column: 1; padding-right: 0; }
}

/* ==========================================================================
   CYBERPERT — SECTOR PAGES (v15)
   Five dedicated vertical pages (Government, National Defense, Critical
   Infrastructure, Financial System, Aerospace), linked from the footer's
   "High Security" column. Each follows the same rhythm: hero, intro with a
   distinct sector icon, a challenges list (amber warning marks — these are
   risks, not features), a services grid (teal checks — these are what we
   do), a framework pill row, and cross-links to the other four sectors.
   ========================================================================== */

.sector-intro-block {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: flex-start;
  max-width: 880px;
}
.sector-intro-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(47,191,177,0.2), rgba(20,110,102,0.3));
  color: var(--mint-soft);
  flex-shrink: 0;
}
.sector-intro-text {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--paper-dim);
}

.sector-challenges-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
}
.sector-challenges-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper-dim);
}
.sector-warn-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,179,71,0.14);
  color: var(--alert);
  margin-top: 1px;
}

.sector-services-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.sector-service-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  background: rgba(19,29,32,0.5);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.sector-service-card:hover {
  border-color: rgba(47,191,177,0.4);
  background: rgba(19,29,32,0.8);
  transform: translateY(-2px);
}
.sector-service-check {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47,191,177,0.16);
  color: var(--mint);
  margin-top: 2px;
}
.sector-service-card h3 { font-size: 15px; margin-bottom: 5px; line-height: 1.35; }
.sector-service-card p { font-size: 13.3px; color: var(--paper-dim); line-height: 1.6; }

.framework-pill-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.framework-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: rgba(19,29,32,0.6);
  font-size: 13px;
  font-weight: 600;
  color: var(--paper-dim);
  white-space: nowrap;
}

.sector-cross-links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.sector-cross-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--paper-dim);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink-line);
  transition: color var(--transition), border-color var(--transition);
}
.sector-cross-link:hover { color: var(--mint-soft); border-color: var(--mint); }

@media (max-width: 760px) {
  .sector-intro-block { grid-template-columns: 1fr; }
  .sector-challenges-list { grid-template-columns: 1fr; }
  .sector-services-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CYBERPERT — FOOTER "HIGH SECURITY" COLUMN (v15)
   Outline-only login button: visible structure, no fill, so it reads as a
   secondary access point rather than competing with the header's solid
   "Client Portal" CTA.
   ========================================================================== */

.btn-outline-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 10px 28px;
  border-radius: var(--radius-cta);
  border: 1.5px solid var(--mint);
  background: transparent;
  color: var(--mint-soft);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}
.btn-outline-login:hover {
  background: rgba(47,191,177,0.12);
  color: var(--paper);
}

/* ==========================================================================
   CYBERPERT — INTERACTION POLISH (v15)
   Supports the new JS behaviors: a header that gains weight on scroll, a
   cursor-tracking spotlight glow on tilt-enabled cards, and smoother focus/
   hover states throughout. These are deliberately subtle — the goal is a
   site that feels alive under the cursor, not one that distracts from
   the content.
   ========================================================================== */

.site-header {
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.site-header.is-scrolled {
  background: rgba(8,13,15,0.96) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  border-bottom-color: rgba(47,191,177,0.18) !important;
}

[data-tilt] {
  --spot-x: 50%;
  --spot-y: 50%;
  transition: transform 180ms ease, border-color var(--transition), box-shadow var(--transition);
  will-change: transform;
  position: relative;
}
[data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(47,191,177,0.14), transparent 60%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
[data-tilt]:hover::after { opacity: 1; }
[data-tilt]:hover {
  border-color: rgba(47,191,177,0.45);
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
}

/* Smoother, more deliberate focus rings for keyboard navigation. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Buttons get a touch of lift + glow on hover beyond the existing color
   transition, so primary actions feel responsive without a copy change. */
.btn-primary, .btn-secondary, .btn-outline-login {
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform 180ms ease, box-shadow 220ms ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(47,191,177,0.28); }
.btn-secondary:hover { transform: translateY(-1px); }
.btn-outline-login:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(47,191,177,0.2); }

/* Respect users who've asked for reduced motion: kill the JS-driven
   transforms/transitions entirely rather than just shortening them. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-tilt] { transition: none !important; }
  [data-tilt]:hover { transform: none !important; }
  .btn-primary:hover, .btn-secondary:hover, .btn-outline-login:hover { transform: none !important; }
}

/* ==========================================================================
   CYBERPERT - CONTENT DEPTH + FOUNDER/NATO REFINEMENTS (v16)
   ========================================================================== */
.section.founder-home-section { padding: 76px 0; }
.founder-home-grid { grid-template-columns: minmax(240px, 0.40fr) minmax(0, 0.60fr); gap: clamp(28px, 4vw, 58px); }
.founder-home-photo { min-height: clamp(344px, 38vw, 512px); border-radius: 8px; box-shadow: 0 22px 58px rgba(0,0,0,0.30); }
.founder-home-copy h2 { font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 18px; }
.founder-home-copy .founder-home-lede { font-size: clamp(16.5px, 1.8vw, 20px); margin-bottom: 18px; }
.founder-home-copy p { font-size: 15.5px; line-height: 1.68; margin-bottom: 14px; }
.founder-home-copy .btn { margin-top: 4px; }
.nato-footer-flag { width: 42px; height: 20px; object-fit: contain; object-position: center; background: #000; border-radius: 2px; border: 1px solid rgba(233,241,240,0.20); padding: 1px; }
.insights-library-head { max-width: 900px; margin: 0 auto 38px; text-align: center; }
.insights-library-head h2 { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; margin-bottom: 16px; }
.insights-library-head .subtitle { color: var(--paper-dim); font-size: 16.5px; line-height: 1.65; }
.insight-featured-library { margin-bottom: 28px; }
.insight-featured-library .insight-library-visual { min-height: 100%; }
.insight-meta-rich { flex-wrap: wrap; gap: 8px; }
.insight-meta-rich span { border: 1px solid rgba(233,241,240,0.10); border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,0.025); }
.insight-library-brief { margin-top: 12px; color: var(--paper-dim); }
.insight-takeaways, .report-output-list, .rd-project-card ul, .rd-output-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.insight-takeaways li, .report-output-list li, .rd-project-card li, .rd-output-list li { color: var(--paper-dim); font-size: 13.5px; line-height: 1.55; padding-left: 18px; position: relative; }
.insight-takeaways li::before, .report-output-list li::before, .rd-project-card li::before, .rd-output-list li::before { content: ''; position: absolute; left: 0; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.insights-publication-grid, .reports-deep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.insight-library-card { display: grid; grid-template-columns: 0.42fr 1fr; min-height: 100%; background: linear-gradient(180deg, rgba(19,29,32,0.76), rgba(11,17,20,0.92)); }
.insight-library-card .insight-library-visual { min-height: 100%; }
.insight-library-card .insight-library-body { padding: 26px; }
.insight-library-card h3 { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.18; }
.dossier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dossier-card, .report-briefing-card, .rd-method-card, .rd-publication-card { border: 1px solid var(--ink-line); border-radius: 8px; background: rgba(19,29,32,0.55); padding: 26px; }
.dossier-card h3, .report-briefing-card h3, .rd-method-card h3, .rd-publication-card h3 { font-size: 17px; margin: 12px 0 9px; }
.dossier-card p, .report-briefing-card p, .rd-method-card p, .rd-publication-card p { color: var(--paper-dim); font-size: 14px; line-height: 1.65; }
.report-card-deep, .rd-project-card { border: 1px solid var(--ink-line); border-radius: 10px; padding: clamp(24px, 2.6vw, 34px); background: linear-gradient(180deg, rgba(19,29,32,0.76), rgba(9,16,18,0.96)); }
.report-card-top, .rd-card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.report-date, .status-chip { font-family: var(--font-mono); font-size: 11px; color: var(--mint-soft); border: 1px solid rgba(47,191,177,0.24); border-radius: 999px; padding: 5px 9px; background: rgba(47,191,177,0.08); }
.report-card-deep h3, .rd-project-card h3 { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; margin-bottom: 12px; }
.report-source { color: var(--mint-soft) !important; font-family: var(--font-ui); font-weight: 600; }
.report-card-deep p, .rd-project-card p { color: var(--paper-dim); line-height: 1.65; margin-bottom: 13px; }
.report-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.report-briefing-grid, .rd-method-grid, .rd-publication-grid, .rd-project-grid, .event-grid-deep { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.event-card-deep { padding: 28px; }
.event-date-block { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink-line); padding-bottom: 16px; margin-bottom: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--paper-dim); }
.event-date-block strong { color: var(--mint-soft); font-weight: 500; }
.event-meta-list { margin: 18px 0; display: grid; gap: 12px; }
.event-meta-list div { border-left: 2px solid rgba(47,191,177,0.38); padding-left: 12px; }
.event-meta-list dt { font-family: var(--font-mono); font-size: 11px; color: var(--line); text-transform: uppercase; letter-spacing: 0.06em; }
.event-meta-list dd { margin: 4px 0 0; color: var(--paper-dim); font-size: 13.8px; line-height: 1.55; }
.event-card-deep h4 { font-family: var(--font-ui); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mint-soft); margin: 18px 0 10px; }
.event-agenda { margin: 0; padding-left: 18px; color: var(--paper-dim); display: grid; gap: 9px; font-size: 13.5px; line-height: 1.55; }
.event-deliverable { margin-top: 18px; }
.event-card-deep .btn { margin-top: 20px; }
.rd-output-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; border: 1px solid var(--ink-line); border-radius: 10px; padding: clamp(28px, 4vw, 48px); background: radial-gradient(ellipse 520px 280px at 100% 0%, rgba(47,191,177,0.12), transparent 60%), rgba(19,29,32,0.6); }
.rd-output-panel h2 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); line-height: 1.12; margin-bottom: 14px; }
.rd-output-panel .subtitle { color: var(--paper-dim); line-height: 1.65; }
.rd-output-list { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
@media (max-width: 1100px) { .insights-publication-grid, .reports-deep-grid { grid-template-columns: 1fr; } .event-grid-deep, .rd-project-grid, .report-briefing-grid, .rd-method-grid, .rd-publication-grid, .dossier-grid { grid-template-columns: repeat(2, 1fr); } .insight-library-card { grid-template-columns: 0.32fr 1fr; } .founder-home-photo { min-height: clamp(336px, 62vw, 496px); } }
@media (max-width: 680px) { .section.founder-home-section { padding: 62px 0; } .founder-home-photo { min-height: 336px; } .founder-home-copy h2 { font-size: clamp(29px, 8vw, 38px); } .insight-library-card, .rd-output-panel { grid-template-columns: 1fr; } .insight-library-card .insight-library-visual { min-height: 120px; } .event-grid-deep, .rd-project-grid, .report-briefing-grid, .rd-method-grid, .rd-publication-grid, .dossier-grid, .rd-output-list { grid-template-columns: 1fr; } .report-actions { flex-direction: column; align-items: stretch; } .nato-footer-flag { width: 38px; height: 18px; } }
/* ==========================================================================
   CYBERPERT - LIBRARY POSTS + NATO V4 + GLOBAL SIGNAL DOTS (v17)
   ========================================================================== */
.eyebrow::before {
  width: 8px;
  height: 8px;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47,191,177,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(47,191,177,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,191,177,0); }
}
.nato-footer-flag {
  width: 46px;
  height: 22px;
  object-fit: contain;
  object-position: center;
  background: #000;
}
.sector-title-with-flag {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
  flex-wrap: wrap;
}
.sector-title-nato-flag {
  width: clamp(166px, 15vw, 236px);
  height: auto;
  max-height: 86px;
  object-fit: contain;
  border: 1px solid rgba(233,241,240,0.18);
  border-radius: 4px;
  background: #000;
  box-shadow: 0 18px 46px rgba(0,0,0,0.28);
}
.post-hero .insight-meta-rich {
  margin: 0 0 18px;
}
.post-shell-section {
  border-bottom: none;
}
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.28fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
}
.post-article {
  max-width: 820px;
}
.post-lede {
  font-family: var(--font-ui);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.58;
  color: var(--paper);
  margin-bottom: 34px;
}
.post-section {
  padding: 30px 0;
  border-top: 1px solid var(--ink-line);
}
.post-section h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.16;
  margin-bottom: 16px;
}
.post-section p {
  color: var(--paper-dim);
  font-size: 16px;
  line-height: 1.78;
  margin-bottom: 18px;
}
.post-section p:last-child {
  margin-bottom: 0;
}
.post-aside {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 18px;
}
.post-aside-card {
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(19,29,32,0.76), rgba(9,16,18,0.96));
}
.post-aside-card h3 {
  font-size: 15px;
  margin-bottom: 12px;
}
.post-aside-card p,
.post-aside-card li,
.post-aside-card a {
  color: var(--paper-dim);
  font-size: 13.5px;
  line-height: 1.6;
}
.post-aside-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 9px;
}
.post-aside-card a:hover {
  color: var(--mint-soft);
}
.rd-project-card .insight-link,
.rd-method-card .insight-link,
.rd-publication-card .insight-link {
  display: inline-flex;
  margin-top: 18px;
}
@media (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-aside { position: static; }
  .sector-title-nato-flag { width: clamp(142px, 42vw, 210px); }
}
@media (max-width: 680px) {
  .nato-footer-flag { width: 42px; height: 20px; }
  .sector-title-with-flag { gap: 14px; }
}

/* ==========================================================================
   CYBERPERT - NATIONAL DEFENSE HERO FLAG V18
   Footer NATO flag remains V4; this applies only to the sector hero image.
   ========================================================================== */
.sector-title-nato-flag {
  width: clamp(145px, 9.4vw, 180px);
  max-height: 70px;
  object-fit: contain;
}
@media (max-width: 900px) {
  .sector-title-nato-flag { width: clamp(124px, 34vw, 164px); max-height: 64px; }
}


/* CYBERPERT - NATIONAL DEFENSE HERO FLAG V19 + TEAM PHOTOS */
.sector-title-with-flag {
  gap: clamp(12px, 1.35vw, 18px);
}

.sector-title-nato-flag {
  width: clamp(132px, 7.8vw, 158px);
  height: clamp(54px, 3.8vw, 66px);
  object-fit: cover;
  object-position: center center;
  border-radius: 4px;
  border: 1px solid rgba(125, 216, 205, 0.46);
  box-shadow:
    0 0 0 1px rgba(47, 191, 177, 0.18),
    0 0 24px rgba(47, 191, 177, 0.26),
    0 12px 26px rgba(0, 0, 0, 0.32);
  filter: saturate(1.08) contrast(1.12) brightness(1.05);
}

.team-photo-img--lukas,
.team-photo-img--aleksandr,
.team-photo-img--wang,
.team-photo-img--yosef {
  object-position: center 18%;
}

@media (max-width: 900px) {
  .sector-title-nato-flag {
    width: clamp(118px, 30vw, 148px);
    height: clamp(48px, 14vw, 62px);
  }
}


/* CYBERPERT - AEGIS LOGIN + NATIONAL DEFENSE FLAG V20 */
.sector-title-nato-flag {
  width: clamp(150px, 8.1vw, 162px);
  height: clamp(58px, 3.7vw, 64px);
  object-fit: cover;
  object-position: center center;
}

.team-member-card-v14 h3 {
  color: var(--mint-soft);
  text-shadow: 0 0 16px rgba(47, 191, 177, 0.16);
}

.aegis-app-field {
  border: 1px solid rgba(47, 191, 177, 0.2);
  border-radius: 8px;
  background: rgba(8, 15, 18, 0.58);
  padding: 12px;
}

.aegis-app-field > label {
  display: block;
  font-size: 12px;
  margin-bottom: 9px;
}

.aegis-app-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 138px;
  overflow: auto;
  padding-right: 2px;
}

.aegis-app-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(125, 216, 205, 0.22);
  color: var(--paper);
  background: rgba(47, 191, 177, 0.07);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  line-height: 1;
  cursor: default;
}

.aegis-app-chip.is-primary {
  color: #061010;
  background: linear-gradient(135deg, var(--mint), var(--mint-soft));
  border-color: rgba(125, 216, 205, 0.55);
}

.aegis-app-hint {
  display: block;
  margin-top: 8px;
  color: var(--paper-dim);
  font-size: 11.5px;
  line-height: 1.45;
}

.aegis-stack-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.aegis-stack-strip span {
  border: 1px solid rgba(47, 191, 177, 0.18);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--paper-dim);
  background: rgba(8, 15, 18, 0.42);
  font-size: 12px;
}

@media (max-width: 900px) {
  .sector-title-nato-flag {
    width: clamp(132px, 33vw, 158px);
    height: clamp(52px, 13vw, 62px);
  }
}

@media (max-width: 560px) {
  .aegis-stack-strip { grid-template-columns: 1fr; }
  .aegis-app-grid { max-height: 174px; }
}


/* CYBERPERT - EMERGENCY RESPONSE CONTACT + REFINEMENTS V22 */
.sector-title-nato-flag {
  width: clamp(118px, 6.5vw, 132px);
  height: clamp(44px, 2.6vw, 50px);
  object-fit: cover;
  object-position: center center;
}

.team-intro {
  grid-template-columns: minmax(280px, 0.68fr) minmax(420px, 1.32fr);
  gap: clamp(34px, 5vw, 72px);
}

.team-intro .eyebrow-col h2 {
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.04;
  max-width: 620px;
}

.team-intro .about-copy p {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.75;
  max-width: 820px;
}

.emergency-response-box {
  border-color: rgba(255, 88, 88, 0.58);
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 88, 88, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(20, 8, 10, 0.88), rgba(8, 18, 20, 0.88));
  box-shadow: 0 0 0 1px rgba(255, 88, 88, 0.08), 0 24px 70px rgba(0, 0, 0, 0.28);
  padding: clamp(22px, 3vw, 34px);
}

.emergency-response-box .label {
  font-size: clamp(18px, 1.65vw, 26px);
  color: #ff8585;
}

.emergency-response-box p {
  max-width: 780px;
  font-size: 15.5px;
  line-height: 1.65;
}

.emergency-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-emergency-call {
  background: linear-gradient(135deg, #ff5f5f, #b92828);
  color: #160606;
  border: 1px solid rgba(255, 160, 160, 0.42);
  box-shadow: 0 12px 34px rgba(255, 66, 66, 0.2);
}

.btn-emergency-call strong {
  display: inline-block;
  margin-left: 8px;
  color: inherit;
  font-weight: 800;
}

.btn-emergency-outline {
  background: rgba(255, 255, 255, 0.02);
  color: var(--paper);
  border: 1px solid rgba(255, 133, 133, 0.42);
}

.btn-emergency-outline:hover {
  border-color: rgba(255, 133, 133, 0.8);
  color: #fff;
  box-shadow: 0 10px 26px rgba(255, 88, 88, 0.12);
}

.footer-emergency-link {
  color: #ff9b9b !important;
  font-size: 12.5px !important;
}

body.modal-open { overflow: hidden; }

.emergency-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 48px);
  background: rgba(0, 8, 10, 0.78);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.emergency-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.emergency-modal-card {
  position: relative;
  width: min(1040px, 100%);
  max-height: min(88vh, 920px);
  overflow: auto;
  border: 1px solid rgba(255, 88, 88, 0.34);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(13, 22, 25, 0.98), rgba(6, 12, 14, 0.99)),
    var(--ink);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(47, 191, 177, 0.12);
  padding: clamp(24px, 4vw, 42px);
  transform: translateY(14px) scale(0.985);
  transition: transform 180ms ease;
}

.emergency-modal.is-open .emergency-modal-card {
  transform: translateY(0) scale(1);
}

.emergency-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: var(--paper);
  font-size: 24px;
  cursor: pointer;
}

.emergency-modal-kicker {
  display: inline-flex;
  color: #ff8585;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.emergency-modal-head h2 {
  font-size: clamp(34px, 5vw, 58px);
  margin-bottom: 14px;
}

.emergency-modal-head p,
.emergency-encrypted-block p {
  color: var(--paper-dim);
  line-height: 1.65;
  max-width: 860px;
}

.emergency-hotline-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin: 26px 0;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 88, 88, 0.36);
  background: rgba(255, 88, 88, 0.075);
}

.emergency-hotline-card span {
  color: #ffb1b1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.emergency-hotline-card strong {
  grid-column: 1;
  font-size: clamp(28px, 4vw, 44px);
}

.emergency-hotline-card .btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.emergency-modal-section {
  margin-top: 28px;
}

.emergency-modal-section h3,
.emergency-preserve-block h3,
.emergency-encrypted-block h3 {
  font-size: 20px;
  margin-bottom: 14px;
}

.emergency-channel-grid,
.emergency-client-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.emergency-channel-card,
.emergency-client-card,
.encrypted-item {
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.028);
  padding: 15px;
}

.emergency-channel-card span,
.emergency-client-card span,
.encrypted-item span {
  display: block;
  color: var(--paper-dim);
  font-size: 12px;
  line-height: 1.45;
}

.emergency-channel-card strong {
  display: block;
  color: var(--mint-soft);
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.emergency-client-card span {
  color: #ff9b9b;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.emergency-client-card h4 {
  margin: 9px 0 6px;
  font-size: 17px;
}

.emergency-client-card p {
  color: var(--paper-dim);
  font-size: 13.5px;
  line-height: 1.58;
}

.emergency-preserve-block {
  margin-top: 28px;
  border-left: 3px solid #ff8585;
  background: rgba(255, 88, 88, 0.055);
  padding: 18px 20px;
}

.emergency-preserve-block ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
}

.emergency-preserve-block li {
  color: var(--paper-dim);
  font-size: 13.5px;
  line-height: 1.45;
}

.emergency-encrypted-block {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
}

.encrypted-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 18px;
}

.encrypted-item strong {
  display: block;
  color: var(--paper);
  font-size: 13px;
  margin-bottom: 5px;
}

.emergency-modal :focus-visible,
.emergency-response-box :focus-visible {
  outline: 2px solid var(--mint-soft);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .team-intro { grid-template-columns: 1fr; }
  .emergency-actions { justify-content: flex-start; }
  .encrypted-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .sector-title-nato-flag {
    width: clamp(108px, 28vw, 128px);
    height: clamp(42px, 11vw, 50px);
  }
  .emergency-channel-grid,
  .emergency-client-grid,
  .emergency-hotline-card {
    grid-template-columns: 1fr;
  }
  .emergency-hotline-card .btn,
  .emergency-hotline-card strong {
    grid-column: auto;
    grid-row: auto;
  }
  .emergency-actions .btn { width: 100%; justify-content: center; }
}

/* CYBERPERT - AEGIS PORTAL AND EMERGENCY MODAL REFINEMENTS V23 */
.aegis-app-select-wrap {
  position: relative;
}

.aegis-app-select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(47, 191, 177, 0.28);
  border-radius: 8px;
  background: rgba(2, 10, 12, 0.88);
  color: var(--paper);
  padding: 0 44px 0 15px;
  font: 600 13px/1.35 var(--font-body);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.aegis-app-select:focus {
  border-color: rgba(57, 210, 194, 0.72);
  box-shadow: 0 0 0 3px rgba(57, 210, 194, 0.12);
}

.aegis-app-select optgroup,
.aegis-app-select option {
  background: #061012;
  color: #eaf7f5;
}

.emergency-modal {
  padding: clamp(14px, 3vw, 32px);
}

.emergency-modal-card {
  width: min(880px, calc(100vw - 28px));
  max-height: min(84vh, 760px);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 30px);
}

.emergency-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 21px;
}

.emergency-modal-kicker {
  margin-bottom: 8px;
}

.emergency-modal-head h2 {
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 10px;
}

.emergency-modal-head p,
.emergency-encrypted-block p {
  max-width: 740px;
  line-height: 1.55;
  font-size: 14.5px;
}

.emergency-hotline-card {
  margin: 18px 0 20px;
  padding: 16px;
  gap: 10px 14px;
}

.emergency-hotline-card strong {
  font-size: clamp(24px, 3.2vw, 34px);
}

.emergency-modal-section {
  margin-top: 20px;
}

.emergency-modal-section h3,
.emergency-preserve-block h3,
.emergency-encrypted-block h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.emergency-channel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.emergency-channel-card strong {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  font-size: clamp(12px, 1.05vw, 13px);
}

.emergency-client-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.emergency-channel-card,
.emergency-client-card,
.encrypted-item {
  padding: 12px;
}

.emergency-preserve-block {
  margin-top: 20px;
  padding: 14px 16px;
}

.emergency-encrypted-block {
  margin-top: 20px;
  padding-top: 18px;
}

.encrypted-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 16px;
}

@media (max-width: 820px) {
  .emergency-channel-grid,
  .emergency-client-grid,
  .encrypted-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .emergency-modal-card {
    width: min(100%, calc(100vw - 18px));
    max-height: 86vh;
    padding: 18px;
  }

  .emergency-hotline-card,
  .emergency-channel-grid,
  .emergency-client-grid,
  .encrypted-grid {
    grid-template-columns: 1fr;
  }

  .emergency-channel-card strong {
    font-size: clamp(11.5px, 3.2vw, 13px);
  }
}

/* CYBERPERT - TEXT WRAP AND MOBILE TABLE POLISH V24 */
@media (max-width: 720px) {
  .data-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
    box-sizing: border-box;
  }

  .data-table thead {
    display: none;
  }

  .data-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
  }

  .data-table tr {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ink-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.022);
    padding: 12px 14px;
  }

  .data-table td {
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
    border: 0;
    padding: 8px 0;
    line-height: 1.45;
  }

  .data-table td::before {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--line);
  }

  .data-table td:nth-child(1)::before { content: "Capability"; }
  .data-table td:nth-child(2)::before { content: "Target"; }
  .data-table td:nth-child(3)::before { content: "Coverage"; }
  .data-table td:nth-child(4)::before { content: "Evidence"; }

  .data-table .pill {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    justify-content: flex-start;
  }

  .founder-home-copy em,
  .founder-home-copy strong {
    overflow-wrap: anywhere;
  }

  .founder-home-grid {
    grid-template-columns: 1fr !important;
  }

  .founder-home-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .founder-home-actions,
  .founder-home-copy .actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .founder-home-actions .btn,
  .founder-home-copy .actions .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
}


/* CYBERPERT WORKS */
.works-brief-section { padding-top: 58px; padding-bottom: 58px; }
.works-brief-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(47,191,177,0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(47,191,177,0.1), rgba(84,166,255,0.04)), rgba(17,27,30,0.82);
  box-shadow: 0 24px 70px rgba(0,0,0,0.24);
}
.works-brief-card h2 { font-size: clamp(25px, 3vw, 42px); max-width: 920px; margin-bottom: 14px; }
.works-hero { padding: 106px 0 86px; border-bottom: 1px solid var(--ink-line); background: radial-gradient(circle at 72% 22%, rgba(47,191,177,0.16), transparent 34%), var(--charcoal); }
.works-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 48px; align-items: center; }
.works-hero-copy h1 { font-size: clamp(46px, 8vw, 108px); letter-spacing: 0; line-height: 0.96; margin-bottom: 22px; }
.works-hero-copy p:not(.subtitle) { color: var(--paper-dim); max-width: 830px; line-height: 1.75; }
.works-badges, .works-tags, .works-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.works-badges { margin: 24px 0 26px; }
.works-badges span, .works-tags span, .works-filter {
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--paper-dim);
  padding: 8px 12px;
  font-size: 12px;
}
.works-orbit {
  position: relative;
  min-height: 430px;
  border: 1px solid rgba(47,191,177,0.24);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(47,191,177,0.16), rgba(84,166,255,0.05) 42%, transparent 70%);
  overflow: hidden;
}
.works-orbit::before, .works-orbit::after {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
}
.works-orbit::after { inset: 27%; border-color: rgba(47,191,177,0.22); }
.works-orbit span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 22px rgba(47,191,177,0.9);
}
.works-orbit span:nth-child(1) { top: 16%; left: 48%; }
.works-orbit span:nth-child(2) { top: 42%; right: 15%; }
.works-orbit span:nth-child(3) { bottom: 18%; left: 32%; }
.works-orbit span:nth-child(4) { top: 34%; left: 18%; }
.works-orbit strong { max-width: 180px; text-align: center; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--paper); }
.works-pillars, .works-cta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.works-pillars article, .works-cta-grid article, .works-card {
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  background: rgba(17,27,30,0.82);
  padding: 24px;
}
.works-cta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.works-cta-grid article { display: flex; flex-direction: column; gap: 12px; }
.works-cta-grid .btn { margin-top: auto; justify-content: center; }
.works-controls { align-items: center; margin-bottom: 28px; }
.works-controls input {
  flex: 1 1 280px;
  min-height: 46px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--paper);
  padding: 0 18px;
}
.works-filter { cursor: pointer; font-family: var(--font-ui); }
.works-filter[aria-pressed="true"] { color: var(--charcoal); background: var(--mint); border-color: var(--mint); }
.works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.works-card { display: flex; flex-direction: column; min-height: 360px; transition: transform var(--transition), border-color var(--transition), background var(--transition); }
.works-card:hover { transform: translateY(-4px); border-color: rgba(47,191,177,0.48); background: rgba(20,34,36,0.94); }
.works-card[hidden] { display: none; }
.works-card-label { color: var(--mint); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.works-card h3 { font-size: 21px; margin-bottom: 8px; }
.works-card-meta { color: var(--paper-dim); font-size: 13px; line-height: 1.55; }
.works-card p { color: var(--paper-dim); line-height: 1.65; }
.works-card .btn { margin-top: auto; align-self: flex-start; }
.works-phases { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); }
.works-phase { background: rgba(17,27,30,0.92); padding: 18px 14px; min-height: 96px; }
.works-phase span { display: block; color: var(--mint); font-family: var(--font-mono); font-size: 12px; margin-bottom: 10px; }
.works-flow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
.works-flow span { border: 1px solid rgba(84,166,255,0.24); border-radius: 999px; padding: 10px 14px; color: var(--paper); background: rgba(84,166,255,0.06); }
.works-disclaimer, .works-disclaimer-inline { margin-top: 30px; color: var(--paper-dim); font-size: 13px; line-height: 1.7; border-top: 1px solid rgba(255,255,255,0.09); padding-top: 18px; }
.works-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4,8,9,0.78);
  backdrop-filter: blur(14px);
}
.works-modal[hidden] { display: none; }
.works-modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: min(760px, 90vh);
  overflow: auto;
  border: 1px solid rgba(47,191,177,0.28);
  border-radius: 10px;
  background: var(--charcoal);
  padding: clamp(24px, 4vw, 42px);
}
.works-modal-card > button {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: var(--paper);
  cursor: pointer;
}
@media (max-width: 1020px) {
  .works-hero-grid, .works-brief-card { grid-template-columns: 1fr; }
  .works-grid, .works-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-cta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works-phases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .works-grid, .works-pillars, .works-cta-grid, .works-phases { grid-template-columns: 1fr; }
  .works-orbit { min-height: 300px; }
  .works-controls { overflow-x: auto; flex-wrap: nowrap; align-items: stretch; padding-bottom: 8px; }
  .works-controls input { min-width: 260px; }
  .works-filter { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .works-card:hover {
    transform: none !important;
  }
}

/* CYBERPERT WORKS REBUILD - aligns Works surfaces with the native Home system */
.works-brief-section {
  padding: 44px 0;
  border-bottom: 1px solid var(--ink-line);
  background: linear-gradient(180deg, rgba(17,27,30,0.72), rgba(8,15,17,0.96));
}
.works-brief-card {
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  align-items: center;
  border-radius: 10px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(17,77,72,0.24) 0%, rgba(17,27,30,0.94) 100%);
  box-shadow: none;
}
.works-brief-card h2 {
  max-width: 780px;
  font-size: clamp(26px, 2.35vw, 36px);
  line-height: 1.16;
  margin-bottom: 12px;
}
.works-brief-card p {
  max-width: 70ch;
  color: var(--paper-dim);
  font-size: 15.5px;
  line-height: 1.65;
}
.works-brief-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.works-brief-actions span {
  max-width: 38ch;
  color: var(--paper-dim);
  font-size: 12.5px;
  line-height: 1.55;
}
.works-hero {
  padding: 76px 0 60px;
  background: radial-gradient(ellipse 700px 280px at 18% 0%, rgba(47,191,177,.10), transparent 58%);
}
.works-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 54px;
}
.works-hero-copy h1 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.08;
  margin-bottom: 18px;
}
.works-hero-copy .subtitle {
  max-width: 680px;
  font-size: 17.5px;
  line-height: 1.6;
}
.works-hero-copy p:not(.subtitle) {
  max-width: 760px;
  font-size: 15.5px;
  line-height: 1.7;
}
.works-badges span,
.works-tags span,
.works-filter {
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
}
.works-orbit {
  min-height: 320px;
  max-width: 420px;
  width: 100%;
  justify-self: end;
  opacity: .86;
}
.works-orbit strong {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
}
.works-pillars,
.works-cta-grid,
.works-grid {
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.works-pillars article,
.works-cta-grid article,
.works-card {
  border: 0;
  border-radius: 0;
  background: var(--ink);
  padding: 30px 28px;
}
.works-card {
  min-height: 300px;
}
.works-card:hover {
  background: var(--ink-raised);
  border-color: transparent;
  transform: none;
}
.works-card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.works-card h3,
.works-pillars h3,
.works-cta-grid h3 {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.35;
  color: var(--paper);
}
.works-card p,
.works-card-meta,
.works-pillars p,
.works-cta-grid p {
  color: var(--paper-dim);
  font-size: 14px;
  line-height: 1.62;
}
.works-controls {
  margin-bottom: 22px;
}
.works-controls input {
  border-radius: 8px;
  min-height: 44px;
}
.works-phases {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.works-phase {
  min-height: 84px;
}
@media (max-width: 1180px) {
  .works-hero-grid {
    grid-template-columns: 1fr;
  }
  .works-orbit {
    justify-self: start;
  }
}
@media (max-width: 980px) {
  .works-brief-card {
    grid-template-columns: 1fr;
  }
  .works-brief-actions {
    align-items: flex-start;
  }
}
@media (max-width: 700px) {
  .works-brief-section,
  .works-hero {
    padding: 44px 0;
  }
  .works-brief-card {
    padding: 22px;
  }
  .works-brief-card h2 {
    font-size: clamp(24px, 7vw, 32px);
  }
  .works-hero-copy h1 {
    font-size: clamp(34px, 11vw, 48px);
  }
  .works-orbit {
    min-height: 240px;
    max-width: 320px;
  }
  .works-phases {
    grid-template-columns: 1fr;
  }
}

/* Cyberpert Works final alignment with the native Cyberpert visual system */
.works-home-grid {
  margin-top: 12px;
}

.works-home-note {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.works-page-hero {
  border-bottom: 1px solid var(--ink-line);
}

.works-page-hero .hero-copy {
  max-width: 860px;
}

.works-page-hero .subheadline {
  max-width: 820px;
}

.works-command-panel {
  width: min(100%, 520px);
  margin-left: auto;
}

.works-pillars.program-grid {
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}

.works-pillars.program-grid .program-card {
  border-radius: 0;
}

.works-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 26px;
}

.works-controls input {
  flex: 1 1 320px;
  min-height: 46px;
  border-radius: 8px;
  font-family: var(--font-ui);
}

.works-filter {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--paper-dim);
  padding: 0 14px;
  cursor: pointer;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--ink-line);
  background: var(--ink-line);
}

.works-card {
  min-height: 320px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  padding: 30px 28px;
}

.works-card h3 {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0;
}

.works-card-label {
  color: var(--mint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
}

.works-card p,
.works-card-meta {
  color: var(--paper-dim);
  font-size: 14px;
  line-height: 1.62;
}

.works-card:hover {
  transform: none;
  background: var(--ink-raised);
}

.works-cta-grid {
  gap: 1px;
  border: 1px solid var(--ink-line);
  background: var(--ink-line);
}

.works-cta-grid article {
  border: 0;
  border-radius: 0;
  background: var(--ink);
}

.works-phases {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.imprint-datapert-hero {
  padding: clamp(48px, 7vw, 84px) 0 clamp(76px, 9vw, 118px);
  border-bottom: 1px solid var(--ink-line);
  background: var(--charcoal);
}

.imprint-datapert-hero h1 {
  max-width: 1050px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 7.4vw, 88px);
  line-height: .98;
  color: var(--paper);
  letter-spacing: 0;
}

.imprint-datapert-document {
  padding: clamp(72px, 10vw, 132px) 0 clamp(80px, 10vw, 140px);
  border-bottom: none;
  background: var(--charcoal);
}

.imprint-datapert-document .container {
  max-width: 980px;
}

.imprint-updated {
  margin: 0 0 24px;
  color: var(--paper-dim);
  font-size: 18px;
  line-height: 1.65;
}

.imprint-datapert-section {
  padding: 42px 0;
  border-top: 1px solid var(--ink-line);
}

.imprint-datapert-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.imprint-datapert-section h2 {
  margin: 0 0 20px;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(23px, 2.3vw, 30px);
  line-height: 1.18;
  letter-spacing: 0;
}

.imprint-datapert-section p {
  margin: 0;
  color: var(--paper-dim);
  font-size: 18px;
  line-height: 1.65;
}

@media (max-width: 1020px) {
  .works-command-panel {
    margin-left: 0;
  }

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

@media (max-width: 700px) {
  .works-page-hero .hero-proof-list,
  .works-home-grid,
  .works-grid,
  .works-cta-grid,
  .works-phases {
    grid-template-columns: 1fr;
  }

  .works-controls {
    overflow-x: visible;
    flex-wrap: wrap;
  }

  .works-controls input {
    flex-basis: 100%;
    min-width: 0;
  }

  .works-filter {
    white-space: normal;
  }

  .imprint-datapert-hero {
    padding: 44px 0 68px;
  }

  .imprint-datapert-document {
    padding: 64px 0 88px;
  }

  .imprint-datapert-section {
    padding: 34px 0;
  }

  .imprint-updated,
  .imprint-datapert-section p {
    font-size: 16px;
  }
}


/* Cyberpert final home/menu/legal/table refinements */
.home-deep-section .section-head {
  max-width: 940px;
}
.home-deep-grid.program-grid {
  margin-top: 10px;
}
.cta-row-standard {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cta-row-standard .btn {
  min-width: 190px;
  justify-content: center;
}
.works-matrix-wrap {
  overflow: hidden;
}
.works-matrix-table {
  table-layout: fixed;
  width: 100%;
}
.works-matrix-table th,
.works-matrix-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}
.works-matrix-table th:nth-child(1),
.works-matrix-table td:nth-child(1) { width: 20%; }
.works-matrix-table th:nth-child(2),
.works-matrix-table td:nth-child(2) { width: 36%; }
.works-matrix-table th:nth-child(3),
.works-matrix-table td:nth-child(3) { width: 24%; }
.works-matrix-table th:nth-child(4),
.works-matrix-table td:nth-child(4) { width: 20%; }
.imprint-datapert-section h2 {
  font-family: var(--font-ui);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.28;
}
.site-header .container {
  height: 98px;
  gap: clamp(14px, 1.25vw, 24px);
}
.nav-desktop {
  gap: clamp(12px, 0.86vw, 18px);
}
.nav-desktop a {
  font-size: clamp(13.2px, 0.78vw, 14.4px);
  letter-spacing: 0.018em;
  font-weight: 700;
  white-space: nowrap;
}
.site-header .btn-primary,
.lang-select button {
  min-height: 48px;
}
@media (max-width: 1500px) {
  .site-header .container { gap: 12px; }
  .nav-desktop { gap: 9px; }
  .nav-desktop a { font-size: 12.8px; letter-spacing: .01em; }
  .site-header .btn-primary { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 1380px) {
  .site-header .container { height: 88px; }
  .site-header .btn-primary { display: none; }
  .nav-desktop { gap: 8px; }
  .nav-desktop a { font-size: 12.4px; letter-spacing: 0; }
}
@media (max-width: 1220px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
}
@media (max-width: 760px) {
  .cta-row-standard { justify-content: flex-start; }
  .cta-row-standard .btn { width: 100%; }
  .works-matrix-wrap { overflow-x: visible; }
  .works-matrix-table { min-width: 0; }
  .works-matrix-table th,
  .works-matrix-table td { width: auto !important; }
  .works-matrix-table td:nth-child(1)::before { content: "Ecosystem Layer"; }
  .works-matrix-table td:nth-child(2)::before { content: "Representative Organizations"; }
  .works-matrix-table td:nth-child(3)::before { content: "Cyberpert Use Case"; }
  .works-matrix-table td:nth-child(4)::before { content: "Client Benefit"; }
}


/* Cyberpert precision fixes: legal headings, Datapert-like menu rhythm, Works matrix readability */
.imprint-datapert-section h2 {
  font-family: var(--font-ui) !important;
  font-size: clamp(18px, 1.4vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  margin-bottom: 12px !important;
  color: var(--paper) !important;
  letter-spacing: 0 !important;
}
.site-header .container {
  height: 98px !important;
  gap: clamp(18px, 1.45vw, 30px) !important;
}
.nav-desktop {
  gap: clamp(17px, 1.1vw, 24px) !important;
  justify-content: center !important;
}
.nav-desktop a {
  font-size: clamp(14.2px, 0.82vw, 15.6px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
  line-height: 1 !important;
  padding: 8px 0 !important;
  white-space: nowrap !important;
}
.site-header .btn-primary {
  min-height: 52px !important;
  padding: 13px 24px !important;
  font-size: 13.5px !important;
}
.site-header .lang-select button {
  min-height: 52px !important;
  padding: 12px 16px !important;
}
.works-matrix-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
.works-matrix-table {
  table-layout: auto !important;
  width: 100% !important;
  min-width: 1320px !important;
  border-collapse: collapse !important;
}
.works-matrix-table th,
.works-matrix-table td {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  vertical-align: top !important;
  line-height: 1.58 !important;
}
.works-matrix-table th:nth-child(1),
.works-matrix-table td:nth-child(1) { width: 20% !important; }
.works-matrix-table th:nth-child(2),
.works-matrix-table td:nth-child(2) { width: 32% !important; }
.works-matrix-table th:nth-child(3),
.works-matrix-table td:nth-child(3) { width: 25% !important; }
.works-matrix-table th:nth-child(4),
.works-matrix-table td:nth-child(4) { width: 23% !important; }
.works-matrix-table td:first-child {
  font-size: 14px !important;
  line-height: 1.45 !important;
}
@media (max-width: 1600px) {
  .site-header .container { gap: 14px !important; }
  .nav-desktop { gap: 13px !important; }
  .nav-desktop a { font-size: 13.4px !important; letter-spacing: 0.02em !important; }
  .site-header .btn-primary { display: none !important; }
}
@media (max-width: 1320px) {
  .site-header .container { height: 88px !important; }
  .nav-desktop { gap: 10px !important; }
  .nav-desktop a { font-size: 12.8px !important; letter-spacing: 0.012em !important; }
}
@media (max-width: 1220px) {
  .nav-desktop { display: none !important; }
  .menu-toggle { display: flex !important; }
}
@media (max-width: 720px) {
  .works-matrix-wrap {
    overflow-x: visible !important;
  }
  .works-matrix-table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .works-matrix-table tbody {
    display: grid !important;
    gap: 12px !important;
  }
  .works-matrix-table tr {
    display: block !important;
    width: 100% !important;
  }
  .works-matrix-table td {
    display: grid !important;
    grid-template-columns: minmax(108px, 36%) minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 8px 0 !important;
  }
  .works-matrix-table td:nth-child(1)::before { content: "Ecosystem Layer" !important; }
  .works-matrix-table td:nth-child(2)::before { content: "Representative Organizations" !important; }
  .works-matrix-table td:nth-child(3)::before { content: "Cyberpert Use Case" !important; }
  .works-matrix-table td:nth-child(4)::before { content: "Client Benefit" !important; }
}


/* Cyberpert header fit correction: keep enlarged menu and restore Client Portal */
@media (min-width: 1281px) {
  .site-header .container {
    display: grid !important;
    grid-template-columns: minmax(200px, 0.66fr) minmax(0, 2fr) max-content !important;
    align-items: center !important;
    max-width: min(1760px, calc(100vw - 64px)) !important;
    padding-left: clamp(22px, 2.8vw, 52px) !important;
    padding-right: clamp(22px, 2.8vw, 52px) !important;
    gap: clamp(12px, 0.95vw, 20px) !important;
    height: 98px !important;
  }
  .site-header .logo {
    justify-self: start !important;
    min-width: 0 !important;
  }
  .site-header .logo-mark {
    max-width: min(258px, 16.5vw) !important;
    height: 58px !important;
  }
  .nav-desktop {
    justify-self: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: clamp(8px, 0.58vw, 12px) !important;
    display: flex !important;
  }
  .nav-desktop a {
    font-size: clamp(15.2px, 0.84vw, 16.4px) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .header-actions {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: max-content !important;
  }
  .site-header .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 13px 22px !important;
    font-size: 13.2px !important;
    white-space: nowrap !important;
  }
  .site-header .lang-select button {
    min-height: 52px !important;
    padding: 12px 16px !important;
  }
}
@media (min-width: 1281px) and (max-width: 1480px) {
  .site-header .container {
    grid-template-columns: minmax(176px, 0.58fr) minmax(0, 1fr) max-content !important;
    max-width: min(100%, calc(100vw - 36px)) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 10px !important;
  }
  .site-header .logo-mark {
    max-width: 196px !important;
    height: 44px !important;
  }
  .nav-desktop {
    gap: 5px !important;
  }
  .nav-desktop a {
    font-size: 14.2px !important;
    letter-spacing: 0 !important;
  }
  .header-actions {
    gap: 8px !important;
  }
  .site-header .btn-primary {
    min-height: 48px !important;
    padding: 11px 14px !important;
    font-size: 12px !important;
  }
  .site-header .lang-select button {
    min-height: 48px !important;
    padding: 10px 12px !important;
  }
}
@media (max-width: 1280px) {
  .site-header .container {
    display: flex !important;
  }
  .nav-desktop {
    display: none !important;
  }
  .menu-toggle {
    display: flex !important;
  }
  .site-header .btn-primary {
    display: inline-flex !important;
  }
}
@media (max-width: 700px) {
  .site-header .btn-primary {
    display: none !important;
  }
}