/* ==========================================================================
   DigiSecura — design system
   1. Tokens          6. Trust bar        11. Security ops   16. FAQ
   2. Base            7. Pillars          12. Pricing        17. CTA
   3. Primitives      8. Capabilities     13. Proof          18. Contact
   4. Nav             9. Platform tabs    14. Testimonials   19. Footer
   5. Hero           10. Process          15. Stack          20. Legal / motion / responsive
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* brand */
  --navy-950: #040b18;
  --navy-900: #08152b;
  --navy-850: #0a1e3c;
  --navy-800: #102a4c;
  --navy-700: #1b3a63;
  --blue-200: #b9dcff;
  --blue-300: #7cc0ff;
  --blue-400: #4da6ff;
  --blue-500: #1a8cff;
  --blue-600: #0b6fe0;
  --blue-700: #0757b4;
  --cyan: #22d3ee;
  --emerald: #10b981;
  --amber: #f5a524;

  /* neutrals */
  --ink: #0f1b2d;
  --body: #4a5c75;
  --muted: #5f7189; /* 5.0:1 on white — WCAG AA at every size we use it */
  --line: #e3eaf4;
  --line-strong: #cfdcee;
  --surface: #f5f8fd;
  --surface-2: #edf3fb;
  --white: #fff;

  /* on-dark neutrals */
  --d-text: #e8f0fb;
  --d-body: #9db0cc;
  --d-muted: #7b8fae;
  --d-line: rgba(255, 255, 255, 0.1);
  --d-line-2: rgba(255, 255, 255, 0.16);
  --d-fill: rgba(255, 255, 255, 0.04);

  /* type */
  --f-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --sh-1: 0 1px 2px rgba(16, 32, 56, 0.06), 0 4px 14px rgba(16, 32, 56, 0.05);
  --sh-2: 0 2px 6px rgba(16, 32, 56, 0.05), 0 16px 34px rgba(16, 32, 56, 0.09);
  --sh-3: 0 30px 70px rgba(8, 24, 52, 0.18);
  --sh-blue: 0 10px 26px rgba(26, 140, 255, 0.3);

  --nav-h: 74px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 2. BASE ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.14;
  margin: 0;
  font-weight: 800;
  /* German compounds ("Unternehmensinfrastruktur") are wider than a heading
     track. Hyphenate at proper syllable points, and break as a last resort,
     so a single word can never dictate the layout. */
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.container-narrow { width: min(900px, calc(100% - 48px)); margin-inline: auto; }

section { padding: clamp(68px, 8.5vw, 116px) 0; position: relative; }

.bg-soft { background: var(--surface); }
.bg-line { border-top: 1px solid var(--line); }

/* Hidden by clipping, not by a huge negative offset: `left: -9999px` sits in
   scrollable territory under `dir="rtl"` and adds ~10,000px of horizontal
   scroll to the Arabic pages. */
.skip-link {
  position: absolute; top: 8px; z-index: 999;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  background: var(--navy-850); color: #fff; border-radius: var(--r-xs);
}
.skip-link:focus {
  width: auto; height: auto; margin: 0; padding: 10px 16px; overflow: visible;
  clip: auto; clip-path: none;
  inset-inline-start: 16px;
}

/* ── 3. PRIMITIVES ─────────────────────────────────────────────────────── */

/* kicker — mono label with signal dot */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: 16px;
}
.kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-500); box-shadow: 0 0 0 4px rgba(26, 140, 255, 0.16);
}
.kicker--light { color: var(--blue-300); }
.kicker--light::before { background: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-head h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 16px; }
.section-head p { font-size: clamp(16px, 1.25vw, 18px); color: var(--muted); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head--light h2 { color: #fff; }
.section-head--light p { color: var(--d-body); }

.lead { font-size: clamp(17px, 1.35vw, 19px); color: var(--muted); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; border-radius: 11px;
  padding: 13px 22px; font-family: var(--f-body);
  font-weight: 650; font-size: 14.5px; letter-spacing: -0.005em;
  cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: #fff; box-shadow: var(--sh-blue);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(26, 140, 255, 0.4); }

.btn-dark { background: var(--navy-850); color: #fff; box-shadow: var(--sh-1); }
.btn-dark:hover { transform: translateY(-2px); background: var(--navy-800); box-shadow: var(--sh-2); }

.btn-outline { background: #fff; color: var(--navy-850); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--blue-400); color: var(--blue-600); transform: translateY(-2px); }

.btn-ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: var(--d-line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.34); transform: translateY(-2px); }

.btn-lg { padding: 16px 28px; font-size: 15.5px; border-radius: 13px; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 650; font-size: 14.5px; color: var(--blue-600);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* chips + badges */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--body);
  background: var(--white); border: 1px solid var(--line);
}
.chip--dark { background: var(--d-fill); border-color: var(--d-line); color: var(--d-body); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(26, 140, 255, 0.1); color: var(--blue-600);
}
.tag--emerald { background: rgba(16, 185, 129, 0.12); color: #047857; }
.tag--amber { background: rgba(245, 165, 36, 0.14); color: #b45309; }

/* check list */
.checks { display: grid; gap: 11px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--body); }
.checks svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: var(--blue-500); }
.checks--light li { color: var(--d-body); }
.checks--light svg { color: var(--cyan); }

/* ── 4. NAV ────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--navy-950); color: var(--d-muted);
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; height: 38px;
}
.topbar-left { display: inline-flex; align-items: center; gap: 9px; }
.topbar .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--emerald);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); animation: pulse 2.4s infinite;
}
.topbar-right { display: inline-flex; align-items: center; gap: 22px; }
.topbar a:hover { color: var(--blue-300); }
.topbar .sep { color: rgba(255, 255, 255, 0.18); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
/* no width here — this element is also .container, and a `width: 100%` would
   override the container's max-width and push the nav flush to the viewport */
.nav-inner { display: flex; align-items: center; gap: 24px; }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.brand .brand-on-light { display: none; }
.nav.scrolled .brand .brand-on-dark, .nav--solid .brand .brand-on-dark { display: none; }
.nav.scrolled .brand .brand-on-light, .nav--solid .brand .brand-on-light { display: block; }

.nav-links {
  display: flex; align-items: center; gap: 26px;
  margin-left: auto;
  font-size: 14.5px; font-weight: 550; color: rgba(255, 255, 255, 0.78);
}
.nav-links a { position: relative; padding: 6px 0; transition: color 0.2s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  border-radius: 2px; background: var(--blue-400);
  transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
/* Hidden by default and only shown on genuinely wide screens: with six nav
   links, the language switcher and a CTA, translated labels (French, German,
   Spanish all run longer than English) overflow the row otherwise. The number
   is still one tap away in the top bar. */
.nav-phone {
  display: none; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 13px; font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
@media (min-width: 1250px) { .nav-phone { display: inline-flex; } }
.nav-phone svg { width: 15px; height: 15px; opacity: 0.7; }
.nav-phone:hover { color: #fff; }

/* solid state (scrolled, or light pages) */
.nav.scrolled, .nav--solid {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 26px rgba(10, 30, 60, 0.06);
}
.nav.scrolled .nav-links, .nav--solid .nav-links { color: #46586f; }
.nav.scrolled .nav-links a:hover, .nav.scrolled .nav-links a.active,
.nav--solid .nav-links a:hover, .nav--solid .nav-links a.active { color: var(--blue-600); }
.nav.scrolled .nav-phone, .nav--solid .nav-phone { color: var(--navy-850); }
.nav.scrolled .btn-ghost, .nav--solid .btn-ghost {
  background: #fff; color: var(--navy-850); border-color: var(--line-strong);
}
.nav.scrolled .btn-ghost:hover, .nav--solid .btn-ghost:hover { border-color: var(--blue-400); color: var(--blue-600); }

.menu-btn {
  display: none; width: 42px; height: 42px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--d-line-2);
  cursor: pointer; padding: 0; place-items: center;
}
.menu-btn span { display: block; width: 17px; height: 1.8px; background: #fff; border-radius: 2px; position: relative; }
.menu-btn span::before, .menu-btn span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.8px;
  background: #fff; border-radius: 2px; transition: transform 0.3s var(--ease);
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.nav.scrolled .menu-btn, .nav--solid .menu-btn { background: var(--surface); border-color: var(--line); }
.nav.scrolled .menu-btn span, .nav.scrolled .menu-btn span::before, .nav.scrolled .menu-btn span::after,
.nav--solid .menu-btn span, .nav--solid .menu-btn span::before, .nav--solid .menu-btn span::after { background: var(--navy-850); }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ── 5. HERO ───────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + 84px) 0 clamp(72px, 8vw, 110px);
  background:
    radial-gradient(900px 520px at 78% 4%, rgba(26, 140, 255, 0.22), transparent 62%),
    radial-gradient(700px 460px at 8% 88%, rgba(34, 211, 238, 0.1), transparent 60%),
    linear-gradient(168deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: var(--d-text);
}
/* engineering grid */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 74%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.04));
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 2; }

.hero-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(36px, 5vw, 68px); align-items: center;
}
/* Grid items default to `min-width: auto`, so their longest unbreakable word
   becomes the track's minimum. Without this, a long German headline widens the
   copy column and squeezes the console beside it. */
.hero-grid > *,
.panel-grid > *,
.secops-grid > *,
.contact-grid > *,
.faq-grid > * { min-width: 0; }
.hero h1 {
  font-size: clamp(38px, 4.9vw, 62px); color: #fff;
  letter-spacing: -0.035em; margin-bottom: 22px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue-300), var(--cyan) 55%, var(--blue-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { font-size: clamp(16.5px, 1.35vw, 19px); color: var(--d-body); max-width: 560px; margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero-assure {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  padding-top: 26px; border-top: 1px solid var(--d-line);
  font-size: 13px; color: var(--d-muted);
}
.hero-assure span { display: inline-flex; align-items: center; gap: 8px; }
.hero-assure svg { width: 15px; height: 15px; color: var(--emerald); }

.hero-visual { position: relative; }

/* console mock */
.console {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--d-line-2); border-radius: var(--r-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.console-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--d-line);
  background: rgba(255, 255, 255, 0.035);
}
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.dots i:first-child { background: rgba(245, 165, 36, 0.6); }
.dots i:nth-child(2) { background: rgba(255, 255, 255, 0.2); }
.console-title {
  font-family: var(--f-mono); font-size: 11.5px; color: var(--d-muted); letter-spacing: 0.04em;
}
.live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  color: #6ee7b7; padding: 4px 9px; border-radius: 6px;
  background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.24);
}
.live i { width: 5px; height: 5px; border-radius: 50%; background: var(--emerald); animation: pulse 2.4s infinite; }

.console-body { padding: 20px 18px 6px; display: grid; gap: 15px; }
.cr {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline;
}
.cr-label {
  font-size: 12.5px; color: var(--d-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.cr-label b { color: var(--d-text); font-weight: 600; font-size: 13.5px; }
.cr-val {
  font-family: var(--f-mono); font-size: 21px; font-weight: 600; color: #fff;
  letter-spacing: -0.02em; text-align: right;
}
.cr-val small { font-size: 12px; color: var(--d-muted); margin-left: 2px; }
.cr-val.up { color: #6ee7b7; }
.cr-bar {
  grid-column: 1 / -1; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.cr-bar span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--cyan));
  width: 0; transition: width 1.4s var(--ease) 0.3s;
}
.console.in-view .cr-bar span { width: var(--w, 70%); }

.console-chart { padding: 4px 18px 0; }
.console-chart svg { width: 100%; height: 62px; display: block; }

.console-feed {
  margin: 4px 0 0; padding: 14px 18px 16px;
  border-top: 1px solid var(--d-line); display: grid; gap: 9px;
}
.feed-line {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--d-muted);
}
.feed-line i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--emerald); }
.feed-line i.warn { background: var(--amber); }
.feed-line i.info { background: var(--blue-400); }
.feed-line b { color: var(--d-body); font-weight: 500; }
.feed-line span { color: rgba(255, 255, 255, 0.42); margin-left: auto; }

.console-foot {
  padding: 12px 18px; border-top: 1px solid var(--d-line);
  background: rgba(0, 0, 0, 0.18);
  font-family: var(--f-mono); font-size: 11px; color: var(--d-muted);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.console-foot b { color: #6ee7b7; font-weight: 500; }

.float-card {
  position: absolute; z-index: 3;
  background: rgba(9, 20, 38, 0.86); border: 1px solid var(--d-line-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 14px; padding: 12px 15px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; gap: 11px;
}
.float-card svg { width: 20px; height: 20px; color: var(--cyan); flex-shrink: 0; }
.float-card strong { display: block; font-size: 13px; color: #fff; font-weight: 650; line-height: 1.3; }
.float-card span { font-size: 11.5px; color: var(--d-muted); }
/* cards are ~69px tall — these offsets leave them clear of the console bar and
   footer, overlapping only the rounded edge so they still read as floating */
.float-card--tl { top: -63px; left: -18px; }
.float-card--br { bottom: -63px; right: -18px; }

/* ── 6. TRUST BAR ──────────────────────────────────────────────────────── */
.trust {
  padding: 34px 0; background: var(--navy-950);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.trust-inner { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center; }
.trust-label {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--d-muted); max-width: 190px; line-height: 1.7;
}
.trust-marks { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.trust-mark {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 13px; font-weight: 600; color: #c6d5e9;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
}
.trust-mark:hover { border-color: rgba(77, 166, 255, 0.4); background: rgba(26, 140, 255, 0.08); transform: translateY(-2px); }
.trust-mark svg { width: 16px; height: 16px; color: var(--blue-400); }

/* ── 7. PILLARS ────────────────────────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 30px 30px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
}
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--cyan));
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: #d5e4f8; }
.pillar:hover::before { transform: scaleX(1); }
.pillar-num {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  color: var(--blue-500); margin-bottom: 22px; display: block;
}
.pillar-icon {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(26, 140, 255, 0.12), rgba(34, 211, 238, 0.1));
  border: 1px solid rgba(26, 140, 255, 0.18); color: var(--blue-600);
  margin-bottom: 20px;
}
.pillar-icon svg { width: 25px; height: 25px; }
.pillar h3 { font-size: 21px; margin-bottom: 10px; }
.pillar > p { font-size: 14.8px; color: var(--muted); margin-bottom: 20px; }
.pillar .checks { padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 20px; }
.pillar .checks li { font-size: 13.8px; }

/* ── 8. CAPABILITIES ───────────────────────────────────────────────────── */
.cap-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--line);
  gap: 1px;
}
.cap {
  background: #fff; padding: 30px 28px;
  transition: background 0.3s, transform 0.3s var(--ease);
}
.cap:hover { background: linear-gradient(170deg, #fff, #f3f8ff); }
.cap-top { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.cap-top svg { width: 21px; height: 21px; color: var(--blue-500); flex-shrink: 0; }
.cap h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.cap p { font-size: 14px; color: var(--muted); }

/* ── 9. PLATFORM TABS ──────────────────────────────────────────────────── */
.tabs {
  display: inline-flex; gap: 4px; padding: 5px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px;
  margin-bottom: 36px;
}
.tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 20px; border-radius: 9px;
  font-size: 14px; font-weight: 650; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.tab svg { width: 16px; height: 16px; }
.tab:hover { color: var(--navy-850); }
.tab[aria-selected="true"] { background: #fff; color: var(--navy-850); box-shadow: var(--sh-1); }

.panel { display: none; }
.panel.active { display: block; animation: fade-up 0.5s var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 60px); align-items: center; }
.panel-copy h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 14px; }
.panel-copy > p { color: var(--muted); margin-bottom: 24px; }
.panel-copy .checks { margin-bottom: 26px; }

.panel-media { position: relative; }
.panel-media img {
  width: 100%; height: 100%; min-height: 340px; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.panel-stat {
  position: absolute; left: -18px; bottom: 22px;
  background: #fff; border-radius: var(--r); padding: 16px 20px;
  box-shadow: var(--sh-2); border: 1px solid var(--line);
}
.panel-stat strong {
  display: block; font-family: var(--f-display); font-size: 27px;
  color: var(--navy-850); letter-spacing: -0.03em; line-height: 1.1;
}
.panel-stat span { font-size: 12.5px; color: var(--muted); }

/* ── 10. PROCESS ───────────────────────────────────────────────────────── */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.process::before {
  content: ""; position: absolute; top: 27px; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, var(--blue-400), var(--line-strong));
  opacity: 0.45;
}
.step { position: relative; }
.step-node {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; position: relative; z-index: 2;
  background: #fff; border: 1px solid var(--line-strong);
  font-family: var(--f-mono); font-weight: 600; font-size: 14px; color: var(--blue-600);
  box-shadow: var(--sh-1); margin-bottom: 22px;
  transition: transform 0.35s var(--ease), border-color 0.3s, background 0.3s, color 0.3s;
}
.step:hover .step-node {
  transform: translateY(-4px);
  background: linear-gradient(140deg, var(--blue-500), var(--blue-700));
  border-color: transparent; color: #fff; box-shadow: var(--sh-blue);
}
.step-when {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue-500); margin-bottom: 8px; display: block;
}
.step h3 { font-size: 18.5px; margin-bottom: 9px; }
.step p { font-size: 14.2px; color: var(--muted); }

.process-note {
  margin-top: 40px; padding: 22px 26px;
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--blue-500);
  border-radius: var(--r); display: flex; gap: 16px; align-items: center;
  box-shadow: var(--sh-1);
}
.process-note svg { width: 22px; height: 22px; color: var(--blue-500); flex-shrink: 0; }
.process-note p { font-size: 14.5px; color: var(--body); }
.process-note strong { color: var(--ink); }

/* ── 11. SECURITY OPS ──────────────────────────────────────────────────── */
.secops {
  background:
    radial-gradient(760px 460px at 88% 6%, rgba(34, 211, 238, 0.13), transparent 60%),
    radial-gradient(700px 500px at 4% 92%, rgba(26, 140, 255, 0.14), transparent 62%),
    linear-gradient(170deg, var(--navy-900), var(--navy-950));
  color: var(--d-body); position: relative; overflow: hidden;
}
.secops::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
  mask-image: linear-gradient(180deg, #000, transparent 78%);
  pointer-events: none;
}
.secops > .container { position: relative; z-index: 2; }
.secops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }

.watchlist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 32px; }
.watch {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 11px;
  background: var(--d-fill); border: 1px solid var(--d-line);
  font-size: 13.4px; color: var(--d-body);
  transition: border-color 0.25s, background 0.25s;
}
.watch:hover { border-color: rgba(34, 211, 238, 0.32); background: rgba(34, 211, 238, 0.06); }
.watch i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}

.sla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sla-card {
  padding: 22px; border-radius: var(--r);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--d-line-2);
}
.sla-card strong {
  display: block; font-family: var(--f-display); font-size: 30px; color: #fff;
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 6px;
}
.sla-card span { font-size: 13px; color: var(--d-muted); }

/* ── 12. PRICING ───────────────────────────────────────────────────────── */
.billing-toggle {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 44px;
  padding: 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.billing-toggle button {
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; color: var(--muted);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.billing-toggle button[aria-pressed="true"] { background: #fff; color: var(--navy-850); box-shadow: var(--sh-1); }
.billing-toggle .save {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: #047857; background: rgba(16, 185, 129, 0.12);
  padding: 3px 8px; border-radius: 5px; margin-left: 6px;
}

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 28px; position: relative;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.plan--featured {
  border-color: transparent; color: var(--d-body);
  background:
    radial-gradient(520px 320px at 84% 0%, rgba(34, 211, 238, 0.16), transparent 60%),
    linear-gradient(165deg, var(--navy-850), var(--navy-950));
  box-shadow: var(--sh-3); padding: 44px 30px 36px;
}
.plan-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, var(--blue-500), var(--cyan)); color: #04203c;
  box-shadow: 0 8px 20px rgba(26, 140, 255, 0.35);
}
.plan-name { font-size: 19px; margin-bottom: 6px; }
.plan--featured .plan-name { color: #fff; }
.plan-for { font-size: 13.5px; color: var(--muted); min-height: 40px; }
.plan--featured .plan-for { color: var(--d-muted); }

.plan-price { margin: 22px 0 6px; display: flex; align-items: baseline; gap: 5px; }
.plan-price .cur { font-size: 20px; font-weight: 700; color: var(--navy-850); }
.plan-price .amt {
  font-family: var(--f-display); font-size: 44px; font-weight: 800;
  color: var(--navy-850); letter-spacing: -0.04em; line-height: 1;
}
.plan-price .per { font-size: 14px; color: var(--muted); }
.plan--featured .plan-price .cur, .plan--featured .plan-price .amt { color: #fff; }
.plan--featured .plan-price .per { color: var(--d-muted); }
.plan-note { font-size: 12.5px; color: var(--muted); margin-bottom: 24px; }
.plan--featured .plan-note { color: var(--d-muted); }

.plan .btn { margin-bottom: 26px; }
.plan-features { display: grid; gap: 11px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan--featured .plan-features { border-top-color: var(--d-line-2); }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.8px; color: var(--body); }
.plan--featured .plan-features li { color: var(--d-body); }
.plan-features svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--blue-500); }
.plan--featured .plan-features svg { color: var(--cyan); }
.plan-features .head {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2px;
}
.plan--featured .plan-features .head { color: var(--d-muted); }

.plans-foot {
  margin-top: 30px; text-align: center; font-size: 14px; color: var(--muted);
}
.plans-foot strong { color: var(--ink); }

/* ── 13. PROOF / METRICS ───────────────────────────────────────────────── */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(140deg, var(--navy-850), var(--navy-950));
  box-shadow: var(--sh-3);
}
.metric { padding: 32px 28px; border-right: 1px solid var(--d-line); }
.metric:last-child { border-right: 0; }
.metric strong {
  display: block; font-family: var(--f-display); font-size: clamp(30px, 3.2vw, 40px);
  color: #fff; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 6px;
}
.metric span { font-size: 13.4px; color: var(--d-muted); }

.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.case {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
}
.case:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: #d5e4f8; }
.case .tag { align-self: flex-start; }
.case-metric {
  font-family: var(--f-display); font-size: 34px; font-weight: 800;
  color: var(--blue-600); letter-spacing: -0.035em; line-height: 1;
}
.case h3 { font-size: 16.5px; }
.case p { font-size: 14.2px; color: var(--muted); }
.case-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}

/* ── 14. TESTIMONIALS ──────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px; display: flex; flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.quote-mark { font-family: var(--f-display); font-size: 46px; line-height: 0.8; color: var(--blue-200); margin-bottom: 14px; }
.quote blockquote { margin: 0 0 22px; font-size: 15.4px; color: var(--body); line-height: 1.7; }
.quote-by { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--navy-850), var(--blue-700)); color: #fff;
  font-family: var(--f-display); font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.quote-by strong { display: block; font-size: 14px; color: var(--ink); font-weight: 650; }
.quote-by span { font-size: 12.5px; color: var(--muted); }

/* ── 15. STACK MARQUEE ─────────────────────────────────────────────────── */
.stack-wrap {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stack-track { display: flex; gap: 12px; width: max-content; animation: marquee 42s linear infinite; }
.stack-wrap:hover .stack-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.stack-item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 11px; white-space: nowrap;
  background: #fff; border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--body);
}
.stack-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-400); }

/* ── 16. FAQ ───────────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.faq details[open] { border-color: #cfe1fa; box-shadow: var(--sh-1); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-display); font-size: 16px; font-weight: 700; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; flex-shrink: 0;
  width: 11px; height: 11px; border-right: 2px solid var(--blue-500); border-bottom: 2px solid var(--blue-500);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .answer { padding: 0 22px 22px; font-size: 14.6px; color: var(--muted); }

.faq-aside {
  background: linear-gradient(160deg, var(--navy-850), var(--navy-950));
  border-radius: var(--r-lg); padding: 32px; color: var(--d-body);
  box-shadow: var(--sh-3); position: sticky; top: calc(var(--nav-h) + 24px);
}
.faq-aside h3 { color: #fff; font-size: 21px; margin-bottom: 12px; }
.faq-aside p { font-size: 14.4px; margin-bottom: 22px; }
.faq-aside .checks { margin-bottom: 26px; }

/* ── 17. CTA BAND ──────────────────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: clamp(38px, 5vw, 62px);
  background:
    radial-gradient(680px 400px at 88% 10%, rgba(34, 211, 238, 0.2), transparent 62%),
    linear-gradient(140deg, var(--navy-850) 0%, var(--navy-950) 70%);
  color: var(--d-body); box-shadow: var(--sh-3);
  display: grid; grid-template-columns: 1.35fr auto; gap: 32px; align-items: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 20% 50%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 20% 50%, #000, transparent 72%);
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.cta-band p { max-width: 560px; font-size: 16px; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.cta-actions small {
  font-family: var(--f-mono); font-size: 11px; color: var(--d-muted);
  text-align: center; letter-spacing: 0.04em;
}

/* ── 18. CONTACT ───────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 4.5vw, 56px); align-items: start; }

.next-steps { display: grid; gap: 18px; margin: 28px 0 32px; }
.next-step { display: flex; gap: 15px; align-items: flex-start; }
.next-step .n {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--blue-600);
}
.next-step strong { display: block; font-size: 14.6px; color: var(--ink); font-weight: 650; }
.next-step span { font-size: 13.6px; color: var(--muted); }

.contact-cards { display: grid; gap: 12px; }
.contact-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border-radius: var(--r); background: #fff;
  border: 1px solid var(--line); transition: border-color 0.25s, box-shadow 0.25s;
}
.contact-card:hover { border-color: #cfe1fa; box-shadow: var(--sh-1); }
.contact-card svg { width: 20px; height: 20px; color: var(--blue-500); flex-shrink: 0; margin-top: 2px; }
.contact-card .k {
  display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.contact-card .v { font-size: 14.6px; color: var(--ink); font-weight: 600; line-height: 1.55; }
.contact-card .v a:hover { color: var(--blue-600); }

.form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px); box-shadow: var(--sh-1);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block; font-size: 12.5px; font-weight: 650; color: var(--ink);
  margin-bottom: 7px; letter-spacing: -0.005em;
}
.field > span i { color: var(--blue-500); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--surface); padding: 13px 15px; font-size: 14.5px;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: #9aabc0; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue-400); background: #fff;
  box-shadow: 0 0 0 4px rgba(26, 140, 255, 0.11);
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c94' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 40px;
}
.form-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 20px; font-size: 12.8px; color: var(--muted); }
.form-consent input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--blue-600); }
.form-consent a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
.form-status {
  margin-top: 14px; font-size: 13.5px; padding: 12px 14px; border-radius: 10px;
  display: none;
}
.form-status.show { display: block; }
.form-status.ok { background: rgba(16, 185, 129, 0.1); color: #047857; border: 1px solid rgba(16, 185, 129, 0.24); }

/* ── 19. FOOTER ────────────────────────────────────────────────────────── */
.footer { background: var(--navy-950); color: var(--d-muted); padding: 64px 0 26px; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.2fr;
  gap: 36px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer .brand img { height: 32px; }
.footer-about { font-size: 14px; margin: 18px 0 20px; max-width: 300px; line-height: 1.7; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-badges span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); color: #93a8c4;
}
.footer h4 {
  color: #fff; font-size: 12px; font-family: var(--f-mono); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 18px;
}
.footer-col ul { display: grid; gap: 11px; font-size: 14px; }
.footer-col a { transition: color 0.2s, padding-left 0.25s var(--ease); }
.footer-col a:hover { color: #fff; padding-left: 4px; }
.footer-contact { display: grid; gap: 14px; font-size: 14px; }
.footer-contact .row { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; color: var(--blue-400); flex-shrink: 0; margin-top: 3px; }
.footer-contact a:hover { color: #fff; }
.footer-contact address { font-style: normal; line-height: 1.65; }

.footer-bottom {
  padding-top: 22px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.4px;
}
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a:hover { color: #fff; }
/* ── 20. LEGAL PAGES ───────────────────────────────────────────────────── */
.page-hero {
  padding: calc(var(--nav-h) + 56px) 0 56px;
  background: linear-gradient(180deg, var(--surface) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
  margin-top: calc(var(--nav-h) * -1);
}
.page-hero h1 { font-size: clamp(32px, 4.2vw, 50px); margin-bottom: 14px; }
.page-hero p { color: var(--muted); max-width: 660px; font-size: 16.5px; }

.legal { padding: 56px 0 90px; }
.legal-inner { max-width: 800px; }
.legal h2 { font-size: 21px; margin: 38px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--body); font-size: 15.4px; }
.legal p { margin-bottom: 12px; }
.legal ul { padding-left: 4px; display: grid; gap: 9px; margin: 12px 0 18px; }
.legal ul li { display: flex; gap: 10px; }
.legal ul li::before { content: "—"; color: var(--blue-400); flex-shrink: 0; }
.legal a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }

/* ── 21. LANGUAGE SWITCHER ─────────────────────────────────────────────── */

/* Hide the page until a non-English dictionary has been applied, so visitors
   never see English flash past. i18n.js clears this, and so does a 4s timeout. */
.i18n-loading body { visibility: hidden; }

.lang { position: relative; flex-shrink: 0; }

.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--d-line-2);
  font-size: 13px; font-weight: 650; color: #fff;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lang-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.34); }
.nav.scrolled .lang-btn, .nav--solid .lang-btn {
  background: #fff; border-color: var(--line-strong); color: var(--navy-850);
}
.nav.scrolled .lang-btn:hover, .nav--solid .lang-btn:hover { border-color: var(--blue-400); color: var(--blue-600); }

.flag {
  width: 20px; height: 14px; border-radius: 2.5px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); display: block;
}
.lang-caret { width: 13px; height: 13px; opacity: 0.6; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  min-width: 190px; padding: 6px; margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 46px rgba(10, 30, 60, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.lang-menu.open { opacity: 1; visibility: visible; transform: none; }

.lang-menu button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; text-align: left;
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: background 0.18s, color 0.18s;
}
.lang-menu button:hover { background: var(--surface-2); }
.lang-menu button[aria-checked="true"] { background: rgba(26, 140, 255, 0.1); color: var(--blue-600); }
.lang-native { flex: 1; }
.lang-code {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600;
}
.lang-menu button[aria-checked="true"] .lang-code { color: var(--blue-600); }

/* ── 22. RIGHT-TO-LEFT (Arabic) ────────────────────────────────────────── */

/* Inter and Plus Jakarta Sans have no Arabic glyphs — without this the browser
   falls back to whatever the OS offers, which looks nothing like the brand. */
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
/* keep the mono voice for technical labels, which stay Latin */
[dir="rtl"] .console-title, [dir="rtl"] .console-foot, [dir="rtl"] .feed-line,
[dir="rtl"] .lang-code, [dir="rtl"] .nav-phone, [dir="rtl"] .topbar {
  font-family: var(--f-mono);
}

[dir="rtl"] body { text-align: right; }

/* Latin-designed micro-typography that hurts Arabic */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; }
[dir="rtl"] .kicker,
[dir="rtl"] .step-when,
[dir="rtl"] .contact-card .k,
[dir="rtl"] .plan-features .head,
[dir="rtl"] .case-foot,
[dir="rtl"] .footer h4,
[dir="rtl"] .trust-label,
[dir="rtl"] .footer-badges span { letter-spacing: 0.02em; }

/* Arabic has no capitals — uppercasing produces nothing useful */
[dir="rtl"] .kicker,
[dir="rtl"] .step-when,
[dir="rtl"] .contact-card .k,
[dir="rtl"] .plan-features .head,
[dir="rtl"] .case-foot,
[dir="rtl"] .footer h4,
[dir="rtl"] .trust-label,
[dir="rtl"] .tag,
[dir="rtl"] .footer-badges span,
[dir="rtl"] .plan-flag { text-transform: none; }

/* mirror the directional bits */
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-links a::after { transform-origin: right; }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .process-note { border-left: 1px solid var(--line); border-right: 3px solid var(--blue-500); }
[dir="rtl"] .secops .process-note { border-left-color: var(--d-line-2); border-right-color: var(--cyan); }
[dir="rtl"] .panel-stat { left: auto; right: -18px; }
[dir="rtl"] .float-card--tl { left: auto; right: -18px; }
[dir="rtl"] .float-card--br { right: auto; left: -18px; }
[dir="rtl"] .feed-line span { margin-left: 0; margin-right: auto; }
[dir="rtl"] .live { margin-left: 0; margin-right: auto; }
[dir="rtl"] .cr-val { text-align: left; }
[dir="rtl"] .metric { border-right: 0; border-left: 1px solid var(--d-line); }
[dir="rtl"] .metric:last-child { border-left: 0; }
[dir="rtl"] .lang-menu button { text-align: right; }
[dir="rtl"] .legal ul { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .field select {
  background-position: left 14px center;
  padding-right: 15px; padding-left: 40px;
}
[dir="rtl"] .faq summary::after { margin-left: 0; margin-right: auto; }

/* arrows point the other way when the text runs right-to-left */
[dir="rtl"] .btn svg,
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .lang-caret, [dir="rtl"] .faq summary::after { transform: none; }
[dir="rtl"] .lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

/* numerals and identifiers stay left-to-right inside RTL text */
[dir="rtl"] .cr-val,
[dir="rtl"] .metric strong,
[dir="rtl"] .sla-card strong,
[dir="rtl"] .case-metric,
[dir="rtl"] .plan-price,
[dir="rtl"] .error-code,
[dir="rtl"] .console-title,
[dir="rtl"] .console-foot,
[dir="rtl"] .topbar-right,
[dir="rtl"] .nav-phone,
[dir="rtl"] .error-url { direction: ltr; }
[dir="rtl"] .plan-price, [dir="rtl"] .contact-card .v { text-align: right; }
[dir="rtl"] .plan-price { justify-content: flex-end; flex-direction: row-reverse; }

/* ── 23. ERROR PAGE ────────────────────────────────────────────────────── */
.error-page {
  position: relative; overflow: hidden; text-align: center;
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + 82px) 0 clamp(68px, 8vw, 108px);
  background:
    radial-gradient(880px 520px at 50% 0%, rgba(26, 140, 255, 0.22), transparent 62%),
    radial-gradient(700px 460px at 12% 92%, rgba(34, 211, 238, 0.1), transparent 60%),
    linear-gradient(168deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: var(--d-body);
}
.error-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(circle at 50% 34%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 34%, #000 0%, transparent 72%);
}
.error-page > .container { position: relative; z-index: 2; }
.error-inner { max-width: 640px; margin-inline: auto; }
.error-inner .kicker { justify-content: center; }

.error-code {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(96px, 17vw, 190px); line-height: 0.86;
  letter-spacing: -0.06em; margin-bottom: 22px;
  background: linear-gradient(150deg, #fff 8%, var(--blue-300) 48%, var(--cyan) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-page h1 { color: #fff; font-size: clamp(26px, 3.3vw, 38px); margin-bottom: 16px; }
.error-page .error-lead { font-size: clamp(16px, 1.3vw, 18px); color: var(--d-body); margin-bottom: 26px; }

.error-url {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 9px 15px; margin-bottom: 30px; border-radius: 10px;
  background: var(--d-fill); border: 1px solid var(--d-line);
  font-family: var(--f-mono); font-size: 12.5px; color: var(--d-muted);
}
.error-url code {
  color: var(--blue-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.error-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 26px; }

.error-suggest {
  display: none; align-items: center; gap: 11px; justify-content: center;
  margin: 0 auto 26px; padding: 14px 20px; max-width: 520px;
  border-radius: var(--r); text-align: left;
  background: rgba(26, 140, 255, 0.1); border: 1px solid rgba(77, 166, 255, 0.28);
  font-size: 14px; color: var(--d-text);
}
.error-suggest.show { display: flex; }
.error-suggest svg { width: 19px; height: 19px; color: var(--blue-300); flex-shrink: 0; }
.error-suggest a { color: var(--blue-300); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

.error-redirect {
  font-family: var(--f-mono); font-size: 12px; color: var(--d-muted);
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; justify-content: center;
}
.error-redirect strong { color: var(--blue-300); font-weight: 600; }
.error-redirect button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--d-body);
  text-decoration: underline; text-underline-offset: 3px;
}
.error-redirect button:hover { color: #fff; }
.error-redirect.stopped strong { color: var(--d-muted); }

.error-links {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 900px; margin: clamp(44px, 5vw, 64px) auto 0;
  text-align: left;
}
.error-link {
  padding: 20px; border-radius: var(--r);
  background: var(--d-fill); border: 1px solid var(--d-line);
  transition: border-color 0.25s, background 0.25s, transform 0.3s var(--ease);
}
.error-link:hover {
  border-color: rgba(77, 166, 255, 0.4); background: rgba(26, 140, 255, 0.08);
  transform: translateY(-3px);
}
.error-link svg { width: 20px; height: 20px; color: var(--blue-400); margin-bottom: 12px; }
.error-link strong { display: block; font-size: 14.6px; color: #fff; font-weight: 650; margin-bottom: 4px; }
.error-link span { font-size: 12.8px; color: var(--d-muted); line-height: 1.55; }

@media (max-width: 940px) { .error-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .error-links { grid-template-columns: 1fr; }
  .error-actions .btn { width: 100%; }
}

/* ── MOTION ────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .console.in-view .cr-bar span { width: var(--w, 70%); }
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .pillars, .cap-grid, .plans, .cases, .quotes, .process { grid-template-columns: repeat(2, 1fr); }
  .process::before { display: none; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n + 2) { border-bottom: 1px solid var(--d-line); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-contact-col { grid-column: span 3; }
  .plan--featured { padding: 44px 28px 32px; }
}

/* The nav collapses to the burger earlier than the page layout does, because
   translated link labels need more room than the English ones. */
@media (max-width: 1040px) {
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 12px 24px 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 44px rgba(10, 30, 60, 0.12);
    color: var(--ink);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a::after { display: none; }
  .menu-btn { display: grid; }
}

@media (max-width: 940px) {
  .hero-grid, .panel-grid, .secops-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 60px; }
  .float-card--tl { top: -60px; left: 0; }
  .float-card--br { bottom: -60px; right: 0; }
  .cta-band { grid-template-columns: 1fr; }
  .trust-inner { grid-template-columns: 1fr; gap: 18px; }
  .trust-label { max-width: none; }
  .faq-aside { position: static; }
  .panel-media img { min-height: 280px; }
}

@media (max-width: 720px) {
  .container, .container-narrow { width: min(100% - 32px, 1200px); }
  .hide-sm { display: none; }
  .pillars, .cap-grid, .plans, .cases, .quotes, .process, .watchlist, .sla, .form-row, .metrics {
    grid-template-columns: 1fr;
  }
  .metric { border-right: 0; border-bottom: 1px solid var(--d-line); }
  .metric:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-about-col, .footer-contact-col { grid-column: span 2; }
  .tabs { width: 100%; overflow-x: auto; }
  .plan--featured { padding: 40px 24px 30px; }
  .float-card { display: none; }
  .cta-actions { min-width: 0; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}

@media (max-width: 640px) {
  /* Logo + language + burger is all that fits once the switcher is in the row.
     The same call to action leads the hero and sits inside the open menu. */
  .nav-cta > .btn { display: none; }
  .lang-menu { min-width: 172px; }
}

@media (max-width: 460px) {
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .plan-price .amt { font-size: 38px; }
}

/* ── PRINT ─────────────────────────────────────────────────────────────── */
@media print {
  .topbar, .nav, .cta-band, .form, .hero-actions { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}