/* ==========================================================================
   Ciphertronix - Corporate Design System
   Restrained palette: deep navy + corporate blue + white. Minimal gradients,
   used only as accents on key headlines. Built for clarity & accessibility.
   ========================================================================== */

/* ----------------------------------------------------------------- Tokens */
:root {
  /* Brand */
  --ink: #0b1f3a;          /* deep navy - headings, dark sections */
  --ink-2: #11294d;
  --blue: #1d5fe0;         /* primary corporate blue */
  --blue-dark: #1748b0;
  --blue-light: #6aa9ff;   /* used in gradient accents */
  --blue-soft: #eaf1fd;    /* tints / chips */

  /* Neutrals */
  --bg: #ffffff;
  --bg-muted: #f5f8fc;     /* light blue-grey section bg */
  --bg-muted-2: #eef3fa;
  --border: #e2e8f0;
  --border-strong: #cdd9ea;

  /* Text */
  --text: #334155;
  --text-strong: #0b1f3a;
  --text-muted: #5f6d80;
  --text-on-dark: #e6eefb;
  --text-on-dark-muted: #a9bcdc;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, .06), 0 1px 3px rgba(11, 31, 58, .08);
  --shadow-md: 0 4px 12px rgba(11, 31, 58, .08), 0 2px 6px rgba(11, 31, 58, .05);
  --shadow-lg: 0 18px 40px rgba(11, 31, 58, .12);
  --shadow-blue: 0 10px 24px rgba(29, 95, 224, .28);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 48px);

  --t-fast: .16s ease;
  --t: .25s cubic-bezier(.4, 0, .2, 1);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Arabic: Inter carries no Arabic glyphs, so the Arabic face is listed first on
     [dir=rtl]. Latin runs inside Arabic text (eSentinel, STOS, ISO 20022) still
     fall through to Inter because IBM Plex Sans Arabic has no Latin coverage
     conflict for those codepoints. */
  --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-padding-top: 88px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--blue-dark); }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; }

/* ------------------------------------------------------------ Typography */
h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.18; font-weight: 750; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.015em; }
p  { color: var(--text); }
strong { color: var(--text-strong); font-weight: 650; }

.gradient-text {
  background: linear-gradient(92deg, var(--blue) 0%, var(--blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* On dark backgrounds: blue → white gradient (the clean cut look) */
.gradient-text--light {
  background: linear-gradient(92deg, #9cc4ff 0%, #ffffff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------------------- Accessibility */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 600; transition: top var(--t);
}
.skip-link:focus { top: 16px; color: #fff; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--muted { background: var(--bg-muted); }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.section-head p { margin-top: 14px; font-size: 1.075rem; color: var(--text-muted); }

.lead { font-size: 1.12rem; color: var(--text-muted); }

/* -------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: var(--radius-sm); font-weight: 650; font-size: .98rem;
  border: 1.5px solid transparent; transition: all var(--t); cursor: pointer; white-space: nowrap;
  line-height: 1;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--blue-dark); color: #fff; transform: translateY(-2px); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; transform: translateY(-2px); }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none !important; }
.btn-arrow { gap: 7px; }
.btn-arrow svg { transition: transform var(--t); }
.btn-arrow:hover svg { transform: translateX(4px); }

/* link with arrow */
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t); }
.link-arrow:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------- Header */
/* Reserve the header height. #site-header is empty in the HTML and filled by
   main.js; without a reserved height the whole page shifts ~73px when the
   script runs. */
#site-header { min-height: 73px; }
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; color: var(--ink); font-size: 1.18rem; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand b { color: var(--blue); font-weight: 800; }
.brand-logo { height: 40px; width: auto; display: block; flex: none; }
/* never squeezed: as a flex item it was the first thing the header row shrank (146x40 at 1350px) */
.site-header .brand { flex: none; }
@media (max-width: 1180px){ .brand-logo { height: 34px; } }
/* logo is dark artwork - render it white on the dark footer */
.site-footer .brand-logo { height: 38px; filter: brightness(0) invert(1); }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-link, .nav > a {
  color: var(--text-strong); font-weight: 550; font-size: .97rem; padding: 9px 13px;
  border-radius: var(--radius-sm); position: relative; transition: all var(--t-fast);
  display: inline-flex; align-items: center; gap: 5px;
  /* Arabic labels are wider than their English counterparts and were breaking
     across two lines, which pushed the header out of alignment. */
  white-space: nowrap;
}
.nav-link:hover, .nav > a:hover { color: var(--blue); background: var(--blue-soft); }
.nav-link[aria-current="page"], .nav > a[aria-current="page"], .nav-item.current > .nav-link { color: var(--blue); }
.nav-link[aria-current="page"]::after, .nav > a[aria-current="page"]::after, .nav-item.current > .nav-link::after {
  content: ""; position: absolute; inset-inline: 13px; bottom: 2px; height: 2px;
  background: var(--blue); border-radius: 2px;
}
.nav > .btn { display: none; } /* in-nav CTA only shows inside the mobile menu */
.header-cta { display: flex; align-items: center; gap: 10px; }

/* dropdown */
.nav-item { position: relative; display: inline-flex; align-items: center; }
/* Desktop rule was missing: .nav-item-head only had one inside the mobile
   breakpoint, so it fell back to display:block and the caret wrapped onto a
   second line once the label was wide enough (visible first in Arabic). */
.nav-item-head { display: inline-flex; align-items: center; flex-wrap: nowrap; }
.nav-caret { background: none; border: none; padding: 6px; color: inherit; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; border-radius: 6px; }
.nav-caret svg { width: 13px; height: 13px; transition: transform var(--t-fast); }
.nav-submenu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 224px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 8px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); z-index: 50;
}
.nav-submenu a { display: block; padding: 11px 13px; border-radius: var(--radius-sm); color: var(--text-strong); font-size: .94rem; font-weight: 550; }
.nav-submenu a small { display: block; color: var(--text-muted); font-weight: 400; font-size: .8rem; margin-top: 2px; }
.nav-submenu a:hover { background: var(--blue-soft); color: var(--blue); }
.nav-item:hover .nav-submenu, .nav-item:focus-within .nav-submenu, .nav-submenu.open { opacity: 1; visibility: visible; transform: none; }
.nav-item:hover .nav-caret svg, .nav-item:focus-within .nav-caret svg, .nav-caret[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--border-strong); background: #fff;
  border-radius: var(--radius-sm); align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: var(--t);
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1.5px) translateX(1px); }

/* 1180, not 980: the full menu needs ~1190px. Between 981 and 1180 it used to
   squeeze the logo, to zero width at 1024 (no logo on most laptops). */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .nav, .header-cta .btn-demo-desktop { display: none; }
  .nav {
    position: absolute; top: 72px; inset-inline: 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--border); padding: 14px var(--gutter) 22px; gap: 2px;
    box-shadow: var(--shadow-md);
  }
  .nav.open { display: flex; }
  .nav-link, .nav > a { padding: 13px 14px; font-size: 1.02rem; width: 100%; }
  .nav-link[aria-current="page"]::after, .nav > a[aria-current="page"]::after, .nav-item.current > .nav-link::after { display: none; }
  .nav-link[aria-current="page"], .nav > a[aria-current="page"], .nav-item.current > .nav-link { background: var(--blue-soft); }
  .nav > .btn { display: inline-flex; margin-top: 10px; }

  /* mobile dropdown: stacked, caret toggles */
  .nav-item { flex-direction: column; align-items: stretch; width: 100%; position: static; }
  .nav-item .nav-link { flex: 1; }
  .nav-item-head { display: flex; align-items: center; justify-content: space-between; }
  .nav-caret { padding: 13px; }
  .nav-submenu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none;
    background: var(--bg-muted); border-radius: var(--radius-sm); margin: 2px 0 6px; padding: 4px;
    display: none;
  }
  .nav-submenu.open { display: grid; }
  .nav-item:hover .nav-submenu, .nav-item:focus-within .nav-submenu { display: none; }
  .nav-item:hover .nav-submenu.open, .nav-item:focus-within .nav-submenu.open { display: grid; }
}

/* -------------------------------------------------------------- Hero */
.hero { position: relative; background: var(--ink); color: var(--text-on-dark); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(29,95,224,.30), transparent 60%),
    radial-gradient(50% 60% at 10% 100%, rgba(106,169,255,.14), transparent 60%);
  pointer-events: none;
}
.hero-grid-bg {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 70% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 40%, transparent 100%);
}
.hero-inner { position: relative; padding-block: clamp(64px, 11vw, 128px) clamp(56px, 9vw, 104px); }
.hero-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 940px){ .hero-layout { grid-template-columns: 1fr; } .hero-visual { display:none; } }

/* hero visual card */
.hero-visual { position: relative; }
.hv-card {
  position: relative; z-index: 2; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 26px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg); animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.hv-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.hv-title { display:flex; align-items:center; gap:10px; color:#fff; font-weight:650; font-size:.98rem; }
.hv-shield { width:34px; height:34px; border-radius:10px; background: rgba(106,169,255,.16); color: var(--blue-light); display:grid; place-items:center; }
.hv-shield svg { width:19px; height:19px; }
.hv-live { display:flex; align-items:center; gap:7px; font-size:.8rem; color:#7ee787; }
.hv-live .dot { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation: liveDot 1.8s ease-out infinite; }
@keyframes liveDot { 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55);} 100%{ box-shadow:0 0 0 9px rgba(74,222,128,0);} }
.hv-metric { margin-bottom:16px; }
.hv-metric-row { display:flex; justify-content:space-between; margin-bottom:8px; color: var(--text-on-dark-muted); font-size:.88rem; }
.hv-metric-row b { color:#fff; font-variant-numeric: tabular-nums; }
.hv-bar { height:8px; border-radius:6px; background: rgba(255,255,255,.1); overflow:hidden; }
.hv-bar i { display:block; height:100%; border-radius:6px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); width:0; animation: barFill 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
.hv-metric:nth-child(3) .hv-bar i { animation-delay:.2s; }
.hv-metric:nth-child(4) .hv-bar i { animation-delay:.4s; }
@keyframes barFill { from{ width:0; } }
.hv-foot { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }
.hv-chip { display:flex; align-items:center; gap:7px; font-size:.78rem; color: var(--text-on-dark); background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); padding:6px 12px; border-radius: var(--radius-pill); }
.hv-chip .dot { width:7px; height:7px; border-radius:50%; } .hv-chip .dot.green{background:#4ade80;} .hv-chip .dot.blue{background:var(--blue-light);}
.hv-badge {
  position:absolute; z-index:3; display:flex; align-items:center; gap:7px; background:#fff; color: var(--ink);
  font-weight:650; font-size:.82rem; padding:9px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
}
.hv-badge svg { width:16px; height:16px; color: var(--blue); }
.hv-badge-1 { top:-16px; inset-inline-end:18px; animation: floatY 5s ease-in-out infinite .5s; }
.hv-badge-2 { bottom:-14px; inset-inline-start:-10px; animation: floatY 5.5s ease-in-out infinite 1s; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; color: var(--text-on-dark); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); padding: 7px 15px; border-radius: var(--radius-pill); margin-bottom: 26px;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.22); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .tagline { color: var(--blue-light); font-weight: 650; letter-spacing: .01em; margin-bottom: 16px; font-size: 1.05rem; }
.hero-sub { color: var(--text-on-dark-muted); font-size: 1.12rem; max-width: 60ch; margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.hero-tags .tag {
  font-size: .82rem; color: var(--text-on-dark-muted); border: 1px solid rgba(255,255,255,.14);
  padding: 6px 13px; border-radius: var(--radius-pill); background: rgba(255,255,255,.03);
}

/* page hero (interior pages) */
.page-hero { background: var(--ink); color: var(--text-on-dark); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 90% at 80% 0%, rgba(29,95,224,.28), transparent 60%);
}
.page-hero-inner { position: relative; padding-block: clamp(58px, 9vw, 96px) clamp(48px, 7vw, 76px); max-width: 760px; }
/* wide hero (service detail pages): full container width, balanced split */
.svc-hero .page-hero-inner { max-width: var(--container); padding-bottom: clamp(48px, 7vw, 80px); }
.svc-hero .split { gap: clamp(28px, 5vw, 64px); }
.page-hero h1 { color: #fff; }
.page-hero p { color: var(--text-on-dark-muted); font-size: 1.14rem; margin-top: 18px; max-width: 62ch; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--text-on-dark-muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--blue-light); }
.breadcrumb span { opacity: .5; }

/* -------------------------------------------------------------- Stats bar */
.stats-bar { background: var(--ink-2); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.08); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--ink-2); padding: 30px 22px; text-align: center; }
.stat .num { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; color: #fff; letter-spacing: -.03em; }
.stat .num .gradient-text--light { font-weight: 800; }
.stat .label { color: var(--text-on-dark-muted); font-size: .92rem; margin-top: 6px; }
@media (max-width: 760px){ .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- Cards / grids */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px){ .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card .icon {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px;
  background: var(--blue-soft); color: var(--blue);
}
.card .icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: .98rem; }
.card .card-link { margin-top: 18px; }

.feature-card { display: flex; flex-direction: column; }

/* icon list */
.check-list { display: grid; gap: 13px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); }
.check-list li svg { width: 22px; height: 22px; flex: none; color: var(--blue); margin-top: 1px; }

/* -------------------------------------------------------------- Split feature */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.split.reverse .split-media { order: 2; }
@media (max-width: 900px){ .split { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } }
.split-media {
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); border-radius: var(--radius-lg);
  padding: 34px; color: var(--text-on-dark); box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.split-media::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 80% 0%, rgba(29,95,224,.3), transparent 60%); }

/* product mock panel */
.mock-panel { position: relative; }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; margin-bottom: 10px; }
.mock-row .l { display: flex; align-items: center; gap: 11px; }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; }
.mock-dot.green { background:#4ade80; } .mock-dot.amber { background:#fbbf24; } .mock-dot.red { background:#f87171; }
.mock-row .t { color: var(--text-on-dark); font-size: .9rem; font-weight: 550; }
.mock-row .v { color: var(--text-on-dark-muted); font-size: .82rem; }
.mock-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.mock-bar i { display:block; height:100%; background: linear-gradient(90deg, var(--blue), var(--blue-light)); border-radius:6px; }

/* -------------------------------------------------------------- Timeline */
.timeline { position: relative; display: grid; gap: 4px; padding-inline-start: 8px; }
.timeline::before { content:""; position:absolute; inset-inline-start: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--border-strong); }
.tl-item { position: relative; padding: 0 0 30px 56px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; inset-inline-start: 8px; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue); display: grid; place-items: center;
}
.tl-dot::after { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.tl-year { font-weight: 800; color: var(--blue); font-size: 1.05rem; }
.tl-item h3 { font-size: 1.1rem; margin: 2px 0 4px; }
.tl-item p { color: var(--text-muted); font-size: .96rem; }

/* -------------------------------------------------------------- Testimonials */
.quote-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px;
  display: flex; flex-direction: column; height: 100%;
}
.quote-card .mark { font-size: 2.6rem; line-height: 1; color: var(--blue); opacity: .35; font-family: Georgia, serif; }
.quote-card p { color: var(--text); font-size: 1.02rem; margin: 6px 0 22px; }
.quote-card .who { margin-top: auto; display: flex; align-items: center; gap: 13px; }
.quote-card .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-weight: 750; flex: none; }
.quote-card .who b { display: block; color: var(--text-strong); font-size: .96rem; }
.quote-card .who span { color: var(--text-muted); font-size: .85rem; }

/* -------------------------------------------------------------- Logo wall */
.logo-wall { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.logo-chip {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 11px 22px; color: var(--text-muted); font-weight: 650; font-size: .95rem; letter-spacing: .01em;
  transition: var(--t);
}
.logo-chip:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

/* -------------------------------------------------------------- CTA band */
.cta-band { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 120% at 50% 0%, rgba(29,95,224,.32), transparent 65%); }
.cta-inner { position: relative; text-align: center; max-width: 720px; margin-inline: auto; }
.cta-inner h2 { color: #fff; }
.cta-inner p { color: var(--text-on-dark-muted); margin-top: 14px; font-size: 1.1rem; }
.cta-inner .hero-actions { justify-content: center; }

/* -------------------------------------------------------------- Accordion (FAQ) */
.accordion { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.acc-item { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.acc-trigger {
  width: 100%; text-align: start; background: none; border: none; padding: 20px 22px; font-size: 1.05rem;
  font-weight: 650; color: var(--text-strong); display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.acc-trigger .ico { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; transition: var(--t); font-size: 1.2rem; }
.acc-trigger[aria-expanded="true"] .ico { background: var(--blue); color: #fff; transform: rotate(45deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height var(--t); }
.acc-panel p { padding: 0 22px 20px; color: var(--text-muted); }
.acc-panel .acc-body { padding: 2px 22px 20px; color: var(--text-muted); }
.acc-panel .acc-body p { padding: 0; margin: 0 0 10px; }
.acc-panel .acc-body p:last-child { margin-bottom: 0; }
.acc-panel .acc-body ul { list-style: disc; padding-inline-start: 20px; margin: 6px 0 12px; display: grid; gap: 6px; }
.acc-panel .acc-body ul:last-child { margin-bottom: 0; }
.acc-panel .acc-body strong { color: var(--text-strong); }

/* -------------------------------------------------------------- Forms */
.form-grid { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: .92rem; color: var(--text-strong); }
.field .req { color: var(--blue); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; color: var(--text-strong); background: #fff; transition: var(--t-fast);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.field .hint { font-size: .82rem; color: var(--text-muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .85rem; color: var(--text-muted); margin-top: 4px; }
.form-success {
  display: none; align-items: center; gap: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
  padding: 14px 16px; border-radius: var(--radius-sm); font-weight: 600;
}
.form-success.show { display: flex; }

/* contact info card */
.info-card { background: var(--ink); color: var(--text-on-dark); border-radius: var(--radius-lg); padding: 34px; position: relative; overflow: hidden; }
.info-card::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 90% 0%, rgba(29,95,224,.3), transparent 60%); }
.info-card h3 { color: #fff; position: relative; }
.info-list { position: relative; display: grid; gap: 22px; margin-top: 24px; }
.info-list .row { display: flex; gap: 14px; align-items: flex-start; }
.info-list .ico { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; color: var(--blue-light); flex: none; }
.info-list .ico svg { width: 20px; height: 20px; }
.info-list .k { color: var(--text-on-dark-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.info-list .vv { color: #fff; font-weight: 550; }
.info-list a { color: #fff; }
.info-list a:hover { color: var(--blue-light); }

/* -------------------------------------------------------------- Tools */
.tool-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.tool-card .icon { width: 50px; height: 50px; border-radius: 13px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; margin-bottom: 18px; }
.tool-form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.tool-form input { flex: 1 1 200px; padding: 12px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .96rem; font-family: inherit; }
.tool-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.tool-result { margin-top: 16px; font-size: .92rem; display: none; }
.tool-result.show { display: block; }
.tool-result .note { background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; color: var(--text-muted); }
.tool-result .note code { background:#fff; border:1px solid var(--border); padding: 2px 6px; border-radius: 5px; color: var(--ink); font-size: .85rem; }

/* -------------------------------------------------------------- Pills row */
.pill { background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; font-size: .85rem; padding: 7px 14px; border-radius: var(--radius-pill); }

/* prose */
.prose p { margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Footer */
.site-footer { background: var(--ink); color: var(--text-on-dark-muted); padding: clamp(48px, 7vw, 76px) 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr .9fr 1fr 1fr 1.25fr; gap: 32px; }
@media (max-width: 1040px){ .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } }
@media (max-width: 900px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px){ .footer-top { grid-template-columns: 1fr; } }
.footer-brand .brand { color: #fff; }
.footer-brand .brand b { color: var(--blue-light); }
.footer-tagline { margin-top: 8px; font-size: .94rem; max-width: 34ch; color: var(--text-on-dark-muted); }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; color: var(--text-on-dark); transition: var(--t); }
.footer-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h2 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; font-weight: 700; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: var(--text-on-dark-muted); font-size: .94rem; }
.footer-col a:hover { color: #fff; }
.footer-contact div { margin-bottom: 12px; font-size: .92rem; line-height: 1.55; }
/* each address is its own 24px-tall target (WCAG 2.5.8); stacked with <br> they were ~22px */
.footer-contact a { display: inline-block; min-height: 24px; line-height: 24px; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: .87rem; color: var(--text-on-dark-muted);
}
.footer-bottom a { color: var(--text-on-dark-muted); }
.footer-bottom a:hover { color: #fff; }

/* -------------------------------------------------------------- Reveal anim */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- Code window */
.code-window {
  background: #0a182e; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; font-family: "SFMono-Regular", ui-monospace, "Cascadia Code", Consolas, monospace;
}
.code-window .cw-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.code-window .cw-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.code-window .cw-bar .dot.r { background: #ff5f56; } .code-window .cw-bar .dot.y { background: #ffbd2e; } .code-window .cw-bar .dot.g { background: #27c93f; }
.code-window .cw-bar .cw-name { color: var(--text-on-dark-muted); font-size: .8rem; margin-inline-start: 8px; }
.code-window pre { margin: 0; padding: 22px; font-size: .9rem; line-height: 1.85; color: #cdd9ea; overflow-x: auto; }
.tok-key { color: #ff7b9c; } .tok-var { color: #6aa9ff; } .tok-prop { color: #9cdcfe; }
.tok-str { color: #7ee787; } .tok-punc { color: #8aa0bd; } .tok-com { color: #5b7290; }

/* -------------------------------------------------------------- Service hero */
.svc-hero .split { align-items: center; }
.svc-hero .tag-eyebrow { display:inline-block; color: var(--blue-light); font-weight: 650; letter-spacing:.02em; margin-bottom: 14px; }
.svc-hero h1 { color:#fff; }
.svc-hero p.lead-dark { color: var(--text-on-dark-muted); font-size: 1.12rem; margin-top: 16px; max-width: 52ch; }

/* service feature cards (with bullet check-list) */
.svc-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 28px; height:100%; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.svc-card .icon { width:50px; height:50px; border-radius:13px; background: var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:18px; }
.svc-card .icon svg { width:25px; height:25px; }
.svc-card h3 { margin-bottom:8px; }
.svc-card > p { color: var(--text-muted); font-size:.96rem; }
.svc-card .mini-list { display:grid; gap:9px; margin-top:16px; }
.svc-card .mini-list li { display:flex; gap:9px; align-items:flex-start; font-size:.92rem; color: var(--text); }
.svc-card .mini-list svg { width:18px; height:18px; flex:none; color: var(--blue); margin-top:2px; }

/* -------------------------------------------------------------- Tech grid */
.tech-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 760px){ .tech-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px){ .tech-grid { grid-template-columns: repeat(2, 1fr); } }
.tech-badge {
  background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 20px 12px; text-align:center;
  font-weight: 650; color: var(--text-strong); font-size:.92rem; transition: var(--t);
}
.tech-badge:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.tech-badge .tb-ico { width:40px; height:40px; margin:0 auto 10px; border-radius:11px; background: var(--blue-soft); color:var(--blue); display:grid; place-items:center; font-weight:800; font-size:1rem; }
.tech-badge .tb-logo { width:42px; height:42px; margin:0 auto 12px; object-fit:contain; transition: transform var(--t); }
.tech-badge:hover .tb-logo { transform: scale(1.08); }

/* -------------------------------------------------------------- Process steps */
.process-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 820px){ .process-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .process-grid { grid-template-columns: 1fr;} }
.proc-step { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 26px; position: relative; }
.proc-step .pn { width:44px; height:44px; border-radius:12px; background: var(--ink); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.05rem; margin-bottom:16px; }
.proc-step h3 { font-size:1.12rem; margin-bottom:6px; }
.proc-step p { color: var(--text-muted); font-size:.94rem; }

/* -------------------------------------------------------------- Threat bars */
.threat-list { display:grid; gap:16px; }
.threat-row .tr-head { display:flex; justify-content:space-between; margin-bottom:7px; }
.threat-row .tr-head .lab { color: var(--text-on-dark); font-weight:600; }
.threat-row .tr-head .pct { color: var(--blue-light); font-weight:750; }
.threat-track { height:10px; border-radius:6px; background: rgba(255,255,255,.1); overflow:hidden; }
.threat-track i { display:block; height:100%; border-radius:6px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); }

/* -------------------------------------------------------------- Defense matrix (radar scanner) */
.defense-stage {
  position:relative; overflow:hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: radial-gradient(120% 100% at 50% 38%, #122a4d 0%, #0a182e 62%, #07101f 100%);
  border:1px solid rgba(106,169,255,.16); padding: clamp(28px, 5vw, 60px);
}
.ds-bg { position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(106,169,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(106,169,255,.07) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(75% 75% at 50% 50%, #000 35%, transparent 100%);
}
.ds-scan { position:absolute; left:0; right:0; height:18%; top:-20%; pointer-events:none; z-index:1;
  background: linear-gradient(to bottom, transparent, rgba(106,169,255,.16) 45%, rgba(106,169,255,.28) 50%, rgba(106,169,255,.16) 55%, transparent);
  animation: dsScan 4.5s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes dsScan { 0%{ top:-20%; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{ top:118%; opacity:0;} }

.ds-cols { position:relative; z-index:2; display:grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 4vw, 52px); align-items:center; }
@media (max-width: 780px){ .ds-cols { grid-template-columns:1fr; gap:26px; } .ds-core { order:-1; } }
.ds-col h3 { text-align:center; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; font-weight:700; }
.ds-col.attack h3 { color:#fda4af; }
.ds-col.assets h3 { color:#86efac; }

.ds-node { position:relative; display:flex; align-items:center; gap:11px; justify-content:center; padding:14px 16px; border-radius:11px; font-weight:600; font-size:.95rem; margin-bottom:13px; }
.ds-node:last-child { margin-bottom:0; }
.ds-node .nd-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.ds-col.attack .ds-node { background: rgba(220,38,38,.13); border:1px solid rgba(248,113,113,.42); color:#fecaca; animation: ndThreat 2.4s ease-in-out infinite; }
.ds-col.assets .ds-node { background: rgba(16,185,129,.12); border:1px solid rgba(52,211,153,.4); color:#bbf7d0; animation: ndSafe 3.2s ease-in-out infinite; }
.ds-col.attack .ds-node:nth-child(3){ animation-delay:.5s } .ds-col.attack .ds-node:nth-child(4){ animation-delay:1s } .ds-col.attack .ds-node:nth-child(5){ animation-delay:1.5s }
.ds-col.assets .ds-node:nth-child(3){ animation-delay:.6s } .ds-col.assets .ds-node:nth-child(4){ animation-delay:1.2s } .ds-col.assets .ds-node:nth-child(5){ animation-delay:1.8s }
.attack .nd-dot { background:#f87171; box-shadow:0 0 9px #f87171; }
.assets .nd-dot { background:#34d399; box-shadow:0 0 9px #34d399; }
@keyframes ndThreat { 0%,100%{ box-shadow:0 0 0 0 rgba(248,113,113,0);} 50%{ box-shadow:0 0 18px -2px rgba(248,113,113,.5);} }
@keyframes ndSafe   { 0%,100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} 50%{ box-shadow:0 0 14px -2px rgba(52,211,153,.4);} }
/* threat tracer flying toward the core */
.ds-col.attack .ds-node .tracer { position:absolute; right:-4px; top:50%; width:9px; height:9px; border-radius:50%; background:#fecaca; box-shadow:0 0 12px 2px #f87171; animation: tracerFly 2.2s ease-in infinite; }
.ds-col.attack .ds-node:nth-child(3) .tracer{ animation-delay:.55s } .ds-col.attack .ds-node:nth-child(4) .tracer{ animation-delay:1.1s } .ds-col.attack .ds-node:nth-child(5) .tracer{ animation-delay:1.65s }
@keyframes tracerFly { 0%{ transform:translate(0,-50%) scale(.5); opacity:0;} 15%{opacity:1;} 100%{ transform:translate(72px,-50%) scale(.2); opacity:0;} }

.ds-core { display:flex; flex-direction:column; align-items:center; gap:18px; }
.radar { position:relative; width: clamp(168px, 30vw, 232px); aspect-ratio:1; display:grid; place-items:center; }
.radar-ring { position:absolute; border-radius:50%; border:1px solid rgba(106,169,255,.22); inset:0; }
.radar-ring.r2 { inset:17%; } .radar-ring.r3 { inset:34%; }
.radar::before { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(106,169,255,.55); animation: radarPing 2.8s ease-out infinite; }
.radar::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(106,169,255,.45); animation: radarPing 2.8s ease-out infinite 1.4s; }
@keyframes radarPing { 0%{ transform:scale(.45); opacity:.85;} 100%{ transform:scale(1.04); opacity:0;} }
.radar-sweep { position:absolute; inset:0; border-radius:50%; mix-blend-mode:screen;
  background: conic-gradient(from 0deg, rgba(106,169,255,.55), rgba(106,169,255,.08) 45deg, transparent 90deg, transparent 360deg);
  animation: radarSpin 3s linear infinite; }
.radar-crosshair { position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background: linear-gradient(rgba(106,169,255,.18), rgba(106,169,255,.18)) center/100% 1px no-repeat,
              linear-gradient(rgba(106,169,255,.18), rgba(106,169,255,.18)) center/1px 100% no-repeat; }
@keyframes radarSpin { to { transform: rotate(360deg); } }
.radar-shield { position:relative; z-index:3; width:40%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; color:#fff;
  background: radial-gradient(circle at 50% 38%, #2a6ff0, #0b1f3a 78%); box-shadow:0 0 34px rgba(29,95,224,.65), inset 0 0 14px rgba(255,255,255,.12);
  animation: shieldBeat 2.4s ease-in-out infinite; }
.radar-shield svg { width:48%; height:48%; }
@keyframes shieldBeat { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.07);} }
.ds-core-label { display:inline-flex; align-items:center; gap:9px; color: var(--blue-light); font-size:.86rem; font-weight:600; letter-spacing:.01em; }
.ds-core-label .blip { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation: liveDot 1.6s ease-out infinite; }

/* -------------------------------------------------------------- OWASP list */
.owasp-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (max-width: 640px){ .owasp-grid { grid-template-columns:1fr; } }
.owasp-item {
  display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px; position:relative; overflow:hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.owasp-item::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background: linear-gradient(180deg, var(--blue), var(--blue-light)); transform: scaleY(0); transform-origin:top; transition: transform var(--t); }
.owasp-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.owasp-item:hover::before { transform: scaleY(1); }
.owasp-item .on {
  width:42px; height:42px; flex:none; border-radius:12px; color:#fff; display:grid; place-items:center;
  font-weight:800; font-size:1rem; background: linear-gradient(135deg, var(--ink), var(--blue)); box-shadow: var(--shadow-sm);
}
.owasp-item .ow-txt { display:flex; flex-direction:column; }
.owasp-item .ow-txt b { font-weight:650; color: var(--text-strong); font-size:1rem; line-height:1.3; }
.owasp-item .ow-txt small { color: var(--text-muted); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }

/* -------------------------------------------------------------- Secure form bits */
.secure-note { display:flex; align-items:flex-start; gap:9px; font-size:.85rem; color: var(--text-muted); background: var(--bg-muted); border:1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; line-height:1.55; }
.secure-note svg { width:18px; height:18px; color: var(--blue); flex:none; }
.consent { display:flex; gap:11px; align-items:flex-start; }
.consent input { width:18px; height:18px; margin-top:3px; flex:none; accent-color: var(--blue); }
.consent label { font-size:.9rem; color: var(--text-muted); font-weight:400; }
/* Honeypot. Must stay in the DOM and remain fillable so bots take the bait,
   so display:none is not an option.
   It used to hide with left:-9999px. That is invisible in LTR but in RTL the
   scroll origin is the other edge, so the element extended the document to
   ~10,500px wide and every Arabic page with a form scrolled sideways.
   Clipping takes it out of layout in BOTH directions instead. */
.hp { position:absolute !important; width:1px; height:1px; margin:-1px;
      padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0);
      clip-path:inset(50%); white-space:nowrap; opacity:0; }

/* -------------------------------------------------------------- Legal page */
.legal { max-width: 860px; margin-inline:auto; }
.legal .updated { color: var(--text-muted); font-size:.92rem; margin-bottom: 8px; }
.legal h2 { margin: 44px 0 8px; padding-top: 28px; border-top:1px solid var(--border); }
.legal h2:first-of-type { border-top:0; padding-top:0; margin-top: 28px; }
.legal h3 { font-size:1.15rem; margin: 28px 0 10px; }
.legal p { margin-bottom: 14px; color: var(--text); }
.legal ul.bullets { list-style: disc; padding-inline-start: 22px; margin: 0 0 16px; display:grid; gap:8px; }
.legal ul.bullets li { color: var(--text); }
.legal .callout { background: #fff7ed; border:1px solid #fed7aa; border-radius: var(--radius-sm); padding: 14px 18px; color:#9a3412; margin: 16px 0; }
.legal .callout.danger { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }

/* -------------------------------------------------------------- Tabs */
.tablist { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom: 32px; }
.tab-btn {
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-pill); padding: 11px 20px;
  font-weight:600; font-size:.94rem; color: var(--text-strong); transition: var(--t); display:inline-flex; align-items:center; gap:8px;
}
.tab-btn:hover { border-color: var(--blue); color: var(--blue); }
.tab-btn[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color:#fff; box-shadow: var(--shadow-blue); }
.tab-btn .tb-emoji { display:inline-flex; }
.tab-btn .tb-emoji svg { width:18px; height:18px; }
.tab-panel[hidden] { display:none; }
.tab-panel { animation: fadeUp .4s ease; }
@keyframes fadeUp { from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none;} }

.module-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(26px,4vw,40px); box-shadow: var(--shadow-sm); }
.module-split { display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px,4vw,48px); }
@media (max-width:820px){ .module-split { grid-template-columns:1fr; } }
.module-card h3 { font-size: clamp(1.3rem,2.4vw,1.7rem); margin-bottom:18px; }
.benefit-box { background: var(--bg-muted); border:1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.benefit-box h3 { font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color: var(--blue); margin-bottom:14px; }

/* -------------------------------------------------------------- Advantage grid */
.adv-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: var(--t); height:100%; }
.adv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.adv-card .icon { width:46px; height:46px; border-radius:12px; background: var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:16px; }
.adv-card .icon svg { width:23px; height:23px; }
.adv-card h3 { font-size:1.08rem; margin-bottom:6px; }
.adv-card p { color: var(--text-muted); font-size:.92rem; }

/* -------------------------------------------------------------- Client tiles */
.client-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width:720px){ .client-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width:440px){ .client-grid { grid-template-columns:1fr;} }
.client-tile { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; transition: var(--t); }
.client-tile:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.client-tile .ct-name { font-weight:650; color: var(--text-strong); font-size:.98rem; }
.client-tile .ct-tag { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius: var(--radius-pill); }
.client-tile .ct-tag.local { background: var(--blue-soft); color: var(--blue-dark); }
.client-tile .ct-tag.global { background:#ecfdf5; color:#047857; }

/* -------------------------------------------------------------- Dashboard gallery (eSentinel) */
.dash-gallery { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
@media (max-width:620px){ .dash-gallery { grid-template-columns:1fr; } }
.dash-shot { background: linear-gradient(160deg, var(--ink), var(--ink-2)); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:20px; color: var(--text-on-dark); min-height:150px; position:relative; overflow:hidden; }
.dash-shot::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 80% 0%, rgba(29,95,224,.28), transparent 60%); }
.dash-shot .ds-label { position:relative; font-size:.82rem; color: var(--text-on-dark-muted); margin-bottom:14px; display:flex; justify-content:space-between; }

/* integrations marquee row */
.integ-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.integ-chip { background:#fff; border:1px solid var(--border); border-radius: var(--radius-sm); padding:12px 22px; font-weight:650; color: var(--text-strong); font-size:.94rem; transition: var(--t); }
.integ-chip:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

/* -------------------------------------------------------------- Tool runner pages */
.tool-runner { max-width: 760px; margin-inline: auto; }
.tool-runner-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); }
.tool-runner-card .icon { width:54px; height:54px; border-radius:14px; background: var(--blue-soft); color: var(--blue); display:grid; place-items:center; margin-bottom:18px; }
.tool-runner-card .icon svg { width:27px; height:27px; }
.tool-page-form { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.tool-page-form .ipt { flex:1 1 260px; display:flex; align-items:center; gap:10px; border:1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding:0 14px; transition: var(--t-fast); }
.tool-page-form .ipt:focus-within { border-color: var(--blue); box-shadow:0 0 0 4px var(--blue-soft); }
.tool-page-form .ipt svg { width:18px; height:18px; color: var(--text-muted); flex:none; }
.tool-page-form input { flex:1; border:none; outline:none; padding:14px 0; font-size:1rem; font-family:inherit; background:none; color: var(--text-strong); }
.tool-page-form .btn { flex:none; }
.tool-hint { font-size:.85rem; color: var(--text-muted); margin-top:12px; }

.tool-result-panel { margin-top:24px; display:none; }
.tool-result-panel.show { display:block; animation: fadeUp .35s ease; }
.trp-status { display:flex; align-items:center; gap:12px; font-weight:700; margin-bottom:16px; font-size:1.1rem; color: var(--text-strong); }
.trp-badge { padding:5px 12px; border-radius: var(--radius-pill); font-size:.78rem; font-weight:700; letter-spacing:.02em; }
.trp-badge.ok { background:#ecfdf5; color:#047857; } .trp-badge.bad { background:#fef2f2; color:#b91c1c; } .trp-badge.warn { background:#fff7ed; color:#9a3412; }
.trp-rows { display:grid; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.trp-row { display:flex; justify-content:space-between; gap:16px; padding:13px 16px; border-bottom:1px solid var(--border); font-size:.94rem; }
.trp-row:last-child { border-bottom:0; }
.trp-row .rk { color: var(--text-muted); } .trp-row .rv { color: var(--text-strong); font-weight:600; text-align:end; word-break:break-all; }
.trp-pre { margin-top:16px; background:#0a182e; color:#cdd9ea; border-radius: var(--radius); padding:18px; font-family: ui-monospace, Consolas, monospace; font-size:.85rem; line-height:1.6; max-height:360px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.trp-sub { font-size:.82rem; color: var(--text-muted); margin-top:14px; }
.trp-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.btn-sm { padding:9px 16px; font-size:.88rem; }
.trp-loading { display:flex; align-items:center; gap:11px; color: var(--text-muted); font-weight:550; }
.spinner { width:20px; height:20px; border:2.5px solid var(--border-strong); border-top-color: var(--blue); border-radius:50%; animation: spin .7s linear infinite; flex:none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- AI accents */
.ai-chip {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  background: linear-gradient(90deg, rgba(41,171,226,.20), rgba(127,194,65,.20));
  border:1px solid rgba(106,169,255,.45); color:#dbeafe; padding:7px 15px; border-radius: var(--radius-pill);
  font-weight:650; font-size:.8rem; letter-spacing:.04em;
}
.ai-chip svg { width:15px; height:15px; color:#8be04e; }

.ai-band { background: var(--ink); color: var(--text-on-dark); position:relative; overflow:hidden; }
.ai-band::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 90% at 80% 10%, rgba(29,95,224,.28), transparent 60%), radial-gradient(40% 60% at 5% 100%, rgba(127,194,65,.12), transparent 60%); }
.ai-band .split { position:relative; }
.ai-band h2 { color:#fff; }
.ai-band .lead { color: var(--text-on-dark-muted); }
.ai-points { display:grid; gap:16px; margin-top:24px; }
.ai-points li { display:flex; gap:13px; align-items:flex-start; }
.ai-points .ai-ico { width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; background: rgba(106,169,255,.14); color: var(--blue-light); }
.ai-points .ai-ico svg { width:20px; height:20px; }
.ai-points b { color:#fff; display:block; font-size:1rem; }
.ai-points span { color: var(--text-on-dark-muted); font-size:.94rem; }

.ai-net { position:relative; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-lg); }
.ai-net .nn-cap { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; color: var(--text-on-dark-muted); font-size:.82rem; }
.ai-net .nn-cap .live { color:#7ee787; display:inline-flex; align-items:center; gap:6px; }
.ai-net .nn-cap .live i { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation: liveDot 1.6s ease-out infinite; }
.nn-svg { width:100%; height:auto; display:block; overflow:visible; }
.nn-line { stroke: rgba(106,169,255,.22); stroke-width:1; animation: nnFlow 3s ease-in-out infinite; }
@keyframes nnFlow { 0%,100%{ stroke-opacity:.08; } 50%{ stroke-opacity:.45; } }
.nn-node { animation: nnPulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nn-node.l0 { fill:#6aa9ff; } .nn-node.l1 { fill:#8be04e; } .nn-node.l2 { fill:#29abe2; }
@keyframes nnPulse { 0%,100%{ opacity:.65; transform: scale(.8); } 50%{ opacity:1; transform: scale(1.25); } }

/* -------------------------------------------------------------- Page transitions */
/* Cross-document view transitions (Chrome/Edge) - graceful no-op elsewhere */
@view-transition { navigation: auto; }

/* top loading bar shown on navigation */
#ctx-progress {
  position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0; z-index: 9999;
  border-start-end-radius: 3px; border-end-end-radius: 3px;
  background: linear-gradient(90deg, var(--blue), #7fc241 55%, var(--blue-light));
  box-shadow: 0 0 10px rgba(29,95,224,.6); opacity: 0;
  transition: width .25s ease, opacity .3s ease;
}

/* gentle entrance fade for each page load (fallback for non-VT browsers) */
@media (prefers-reduced-motion: no-preference) {
  .page-fade-in { animation: pageFade .4s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes pageFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- Product logos */
.product-logo { max-height: 56px; max-width: 100%; width: auto; min-width: 0; display: block; object-fit: contain; }
.product-logo-chip { display: flex; width: fit-content; max-width: 100%; align-items: center; background: #fff; border-radius: 12px; padding: 12px 18px; box-shadow: var(--shadow-md); margin-bottom: 20px; }
.product-logo-chip img { max-height: 46px; max-width: 100%; width: auto; min-width: 0; display: block; object-fit: contain; }
.product-logo-chip.square img { max-height: 60px; }
.card .product-logo { max-height: 40px; max-width: 100%; width: auto; min-width: 0; margin-bottom: 16px; align-self: flex-start; flex: none; }

/* -------------------------------------------------------------- News */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 920px){ .news-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .news-grid { grid-template-columns: 1fr;} }
.news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t); height: 100%; }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.news-thumb { aspect-ratio: 16/9; background: linear-gradient(160deg, var(--ink), var(--ink-2)); display: grid; place-items: center; overflow: hidden; }
.news-thumb img { width: 78%; height: auto; object-fit: contain; }

/* Post cover figure. This lived only in news-esentinel-bprd-circular-4's
   inline <style>, so any other post using .post-figure got no rule at all and
   the browser used the img's width/height ATTRIBUTES literally: a 1600x900
   cover rendered 820x900, squashed to 0.91 against its true 1.78. Shared here
   so every post picks it up. */
.post-figure { margin: 4px 0 30px; }
.post-figure img { width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--border); }
.post-figure figcaption { font-size: .84rem; color: var(--text-muted);
  margin-top: 10px; text-align: center; }
.news-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.news-meta { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--text-muted); margin-bottom: 10px; flex-wrap: wrap; }
.news-tag { background: var(--blue-soft); color: var(--blue-dark); font-weight: 650; padding: 3px 10px; border-radius: var(--radius-pill); font-size: .74rem; }
.news-card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.news-card p { color: var(--text-muted); font-size: .95rem; flex: 1; }
.news-card .link-arrow { margin-top: 16px; }

/* post */
.post-hero { background: var(--ink); color: var(--text-on-dark); }
.post-hero-inner { max-width: 820px; margin-inline: auto; padding-block: clamp(48px,7vw,84px) clamp(32px,4vw,48px); }
.post-hero h1 { color: #fff; margin-top: 14px; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.post-meta { display: flex; align-items: center; gap: 12px; color: var(--text-on-dark-muted); font-size: .9rem; flex-wrap: wrap; }
.post-meta .news-tag { background: rgba(106,169,255,.16); color: var(--blue-light); }
.post-body { max-width: 820px; margin-inline: auto; }
.post-body p { margin-bottom: 18px; font-size: 1.06rem; color: var(--text); }
.post-body h2 { margin: 34px 0 12px; }
.logo-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin: 30px 0; }
@media (max-width: 620px){ .logo-compare { grid-template-columns: 1fr; } .logo-compare .lc-arrow { transform: rotate(90deg); justify-self: center; } }
.lc-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; text-align: center; background: #fff; }
.lc-box.old { background: var(--bg-muted); }
.lc-box img { max-width: 100%; max-height: 90px; width: auto; margin: 0 auto 12px; object-fit: contain; }
.lc-box .lc-label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.lc-box.new .lc-label { color: var(--blue); }
.lc-arrow { color: var(--blue); display: grid; place-items: center; }
.lc-arrow svg { width: 34px; height: 34px; }

/* -------------------------------------------------------------- Form status */
.form-status { display: none; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--radius-sm); font-weight: 600; margin-top: 4px; }
.form-status.show { display: flex; }
.form-status svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.form-status.ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.form-status.err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.form-status.sending { background: var(--bg-muted); border: 1px solid var(--border); color: var(--text-muted); }
.form-status .spin { animation: spin .7s linear infinite; }

/* utilities */
.mt-0{margin-top:0}.center{text-align:center}
.text-muted{color:var(--text-muted)}
.mb-24{margin-bottom:24px}.mb-40{margin-bottom:40px}
.flex-actions{display:flex;flex-wrap:wrap;gap:14px}
.divider{height:1px;background:var(--border);border:0;margin:0}

/* -------------------------------------------------------------- Dark-section text
   Container `color` only reaches text by inheritance, and the element rules
   `h1..h4 { color: var(--text-strong) }`, `p { color: var(--text) }` and
   `strong { color: var(--text-strong) }` beat inheritance. Without these
   overrides any heading or paragraph added to a dark block renders dark-on-dark.
   This caused three separate live contrast failures before it was centralised. */
.page-hero h2, .page-hero h3, .page-hero h4,
.split-media h2, .split-media h3, .split-media h4,
.info-card h2, .info-card h4,
.dash-shot h3, .defense-stage h3 { color: #fff; }

.split-media p, .info-card p, .dash-shot p, .defense-stage p { color: var(--text-on-dark-muted); }

.page-hero strong, .cta-band strong, .split-media strong,
.info-card strong, .ai-band strong, .dash-shot strong { color: #fff; }

/* .btn sets white-space:nowrap, which is right for short labels but makes a
   long one (e.g. "See how eSentinel compares to other EFRMS platforms") run
   past the viewport on a phone: measured 495px wide inside 390px. Below the
   phone breakpoint a button wraps instead of overflowing. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; }
}

/* ==========================================================================
   RTL / Arabic
   The layout itself needs no mirrored stylesheet: the rules above use logical
   properties (inset-inline-*, padding-inline-*, text-align:start|end), so the
   browser flips them from `dir="rtl"` alone. Only three classes of thing
   cannot be expressed logically and are handled here.
   ========================================================================== */

/* 1. Font. Inter has no Arabic glyphs. Listing the Arabic face first lets
      Latin brand and standards names (eSentinel, STOS, ISO 20022, PCI DSS)
      still render in Inter, because the Arabic face does not claim those
      codepoints. */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select { font-family: var(--font-ar); }

/* Arabic script sits lower and needs more line box than Latin at the same
   size, otherwise diacritics and descenders collide. */
[dir="rtl"] body { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.4; }

/* 2. Directional glyphs. The arrow icons are drawn pointing right in the
      markup; in RTL "forward" is left. Mirroring the glyph is correct, but it
      must NOT cascade to logos, social icons or the caret, which are not
      directional. */
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .btn-arrow svg,
[dir="rtl"] .breadcrumb svg { transform: scaleX(-1); }
[dir="rtl"] .btn-arrow:hover svg,
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }

/* 3. Numerals and inline Latin. Gulf banking correspondence uses Western
      digits, and phone numbers, versions and codes must not be reordered by
      the bidi algorithm. */
[dir="rtl"] { font-variant-numeric: lining-nums; }
[dir="rtl"] time,
[dir="rtl"] .num,
[dir="rtl"] code,
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }
/* `display:inline-block` was on the rule above. It stopped a long email address
   from wrapping, which pushed /ar/legal 35px past the viewport on a phone.
   `unicode-bidi: isolate` does the bidi isolation on its own. */
[dir="rtl"] .ltr { overflow-wrap: anywhere; }

/* Long email addresses and URLs in body copy must be breakable in BOTH
   languages: the English /legal page overflowed the same way. */
.legal a, .prose a, .post-body a { overflow-wrap: anywhere; }

/* The brand lockup and the footer logo stay left-to-right objects. */
[dir="rtl"] .brand { direction: ltr; }

/* Language switcher in the header */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong); background: #fff;
  color: var(--text-strong); font-weight: 650; font-size: .84rem;
  text-decoration: none; transition: var(--t-fast); white-space: nowrap;
}
.lang-switch:hover { border-color: var(--blue); color: var(--blue); }
.lang-switch svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 1100px) { .lang-switch { display: none; } }
.nav .lang-switch { display: none; }
@media (max-width: 1100px) { .nav .lang-switch { display: inline-flex; align-self: flex-start; margin-top: 4px; } }