/* Nordman Algorithms — Redesign 2026 (Stage 1).
   Extracted from NEW DESIGN HTML+CSS/home.htm (mockup), lines 16-2984.
   Loaded globally; overrides legacy css/style.css on redesigned templates. */
/* Nordman Algorithms — Homepage (template aesthetic) */

:root {
  --bg: #06090F;
  --bg-soft: #0B1120;
  --surface: #152034;
  --surface-2: #1A253A;
  --surface-3: #20294A;
  --border: rgba(255, 255, 255, 0.15);
  --border-strong: rgba(255, 255, 255, 0.30);
  --text: #FAFCFF;
  --text-2: #DCE4F2;
  --text-dim: #9AAAC8;
  --text-mute: #4A5269;

  --blue: #3B82F6;
  --blue-bright: #60A5FA;
  --blue-deep: #1E40AF;
  --blue-glow: rgba(79, 142, 247, 0.32);

  --green: #50EDBB;
  --green-dim: #14C98A;
  --red: #F87171;
  --amber: #FBBF24;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --font-sans: 'Nunito Sans', -apple-system, sans-serif;
  --font-mono: 'Nunito Sans', -apple-system, sans-serif;

  --container: 1200px;
  --pad-x: clamp(20px, 4vw, 56px);
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(79, 142, 247, 0.26), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(79, 142, 247, 0.08), transparent 60%),
    var(--bg);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }

/* ─── Typography ─── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-bright);
  font-weight: 500;
}
.mono { font-family: var(--font-mono); }

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.025em; }
h3 { font-size: clamp(18px, 1.4vw, 22px); letter-spacing: -0.01em; }
p { color: var(--text-2); text-wrap: pretty; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.14) inset,
    0 0 0 1px rgba(79, 142, 247, 0.30),
    0 8px 20px -6px rgba(79, 142, 247, 0.30);
}
.btn-primary:hover {
  background: var(--blue-bright);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(79, 142, 247, 0.38),
    0 10px 24px -6px rgba(79, 142, 247, 0.38);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.22); }
.btn-white {
  background: #fff;
  color: #0B1120;
  font-weight: 600;
}
.btn-white:hover { background: #EAF1FF; transform: translateY(-1px); }
.btn-lg { padding: 16px 26px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--blue-bright);
  transition: gap 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.link-arrow:hover { color: var(--text); gap: 10px; }

/* ─── Icon box ─── */
.icon-box {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(79, 142, 247, 0.24), rgba(79, 142, 247, 0.07));
  border: 1px solid rgba(79, 142, 247, 0.36);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.icon-box svg { width: 20px; height: 20px; stroke: var(--blue-bright); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-box.sm { width: 36px; height: 36px; border-radius: 9px; }
.icon-box.sm svg { width: 17px; height: 17px; }
.icon-box.lg { width: 48px; height: 48px; border-radius: 12px; }
.icon-box.lg svg { width: 23px; height: 23px; }
.icon-box.green {
  background: linear-gradient(180deg, rgba(52,211,153,0.15), rgba(52,211,153,0.04));
  border-color: rgba(52,211,153,0.25);
}
.icon-box.green svg { stroke: var(--green); }

/* ─── Top bar ─── */
.topbar {
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  background: rgba(6,9,15,0.6);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 38px;
}
.topbar-soc { display: flex; gap: 6px; }
.topbar-soc a {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--text-dim);
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.topbar-soc a svg { width: 14px; height: 14px; }
.topbar-soc a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.topbar-right {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim);
}
.topbar-right a { transition: color 0.15s ease; }
.topbar-right a:hover { color: var(--blue-bright); }
.topbar-chat { display: flex; align-items: center; gap: 8px; }
.topbar-chat a { display: grid; place-items: center; color: var(--text-dim); }
.topbar-chat a:hover { color: var(--green); }
.topbar-chat svg { width: 15px; height: 15px; }
.topbar-lang a.active { color: var(--text); }
@media (max-width: 760px) { .topbar-soc { display: none; } }

/* ─── Header / Nav ─── */
.header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(6, 9, 15, 0.78);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 66px;
}
.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark { background-image: url("https://www.nordman-algorithms.com/wp-content/uploads/2026/06/logo-192.png");
  width: 32px; height: 32px;
  border-radius: 8px;
  background-size: cover; background-position: center;
  box-shadow: none;
  flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-name { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.logo-sub { font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-item > a {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 13px;
  font-size: 14px; color: var(--text-2); font-weight: 500;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.nav-item > a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.caret { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2.4; opacity: 0.55; }

.mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 20px;
  min-width: 380px;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.mega.wide { min-width: 540px; }
.mega::before {
  content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
.nav-item:hover .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-inner { display: flex; gap: 28px; }
.mega-col { flex: 1; }
.mega-col h5 {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.mega-col-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim);
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.mega-col h5 + h5 { margin-top: 14px; }
.mega-col a {
  display: block; padding: 6px 8px; margin: 0 -8px;
  font-size: 13.5px; color: var(--text-2); border-radius: 7px;
  white-space: nowrap; transition: color 0.12s ease, background 0.12s ease;
}
.mega-col a:hover { color: var(--text); background: rgba(255,255,255,0.04); }

.nav-toggle { display: none; }
@media (max-width: 1040px) {
  .nav, .header-cta { display: none; }
  .nav-toggle {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--border-strong); color: var(--text);
  }
  .nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
  .nav.nav-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: fixed; inset: 104px 0 0; z-index: 49;
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 20px var(--pad-x); overflow-y: auto;
  }
  .nav.nav-open .nav-item { width: 100%; }
  .nav.nav-open .nav-item > a {
    font-size: 17px; padding: 14px 12px;
    border-bottom: 1px solid var(--border); border-radius: 0; justify-content: space-between;
  }
  .nav.nav-open .mega {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; min-width: 0; width: 100%; box-shadow: none;
    border: none; padding: 4px 0 12px 12px; background: transparent;
  }
  .nav.nav-open .mega-inner { flex-direction: column; gap: 12px; }
  .nav.nav-open .caret { display: none; }
}

/* ─── Hero ─── */
.hero { padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); position: relative; }
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 430px; gap: 56px; align-items: start;
}
.hero-grid > * { min-width: 0; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(79, 142, 247, 0.16);
  border: 1px solid rgba(79, 142, 247, 0.40);
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue-bright); font-weight: 500;
  margin-bottom: 22px;
}
.hero-badge .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.hero h1 { margin-bottom: 20px; }
.hero h1 .accent {
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: clamp(15px, 1.15vw, 17px); color: var(--text-2); max-width: 540px; line-height: 1.6; margin-bottom: 24px; }

.hero-platforms { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.hero-platforms a {
  padding: 6px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  transition: all 0.15s ease;
}
.hero-platforms a:hover { border-color: rgba(79, 142, 247, 0.64); color: var(--text); background: rgba(79, 142, 247, 0.09); }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

.hero-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; max-width: 540px; }
.htrust { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.htrust svg { width: 15px; height: 15px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Hero quote form card */
.quote-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 80px -28px var(--blue-glow);
  position: relative; overflow: hidden;
}
.quote-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: var(--r-xl); padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(79, 142, 247, 0.56), transparent 35%, transparent 65%, rgba(79, 142, 247, 0.34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.quote-head { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 5px; }
.quote-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); margin-bottom: 20px; }

.fg { margin-bottom: 11px; }
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 11px 13px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  font-family: var(--font-sans); font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none;
}
.fg input::placeholder, .fg textarea::placeholder { color: var(--text-dim); }
.fg select { color: var(--text-dim); }
.fg select option { background: var(--surface); color: var(--text); }
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: rgba(79, 142, 247, 0.80); box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.20);
}
.fg textarea { resize: vertical; min-height: 76px; }
.quote-attach {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 8px 13px; margin-bottom: 12px; transition: all 0.15s ease;
}
.quote-attach svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.quote-attach:hover { border-color: var(--border-strong); color: var(--text-2); }
.quote-submit { width: 100%; justify-content: center; }
.quote-consent {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px; font-size: 11px; color: var(--text-dim); line-height: 1.55; cursor: pointer;
}
.quote-consent input { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; accent-color: var(--blue); }
.quote-consent a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Section + heads ─── */
.section { padding: clamp(56px, 7vw, 104px) 0; position: relative; }
.section.tint { background: rgba(0,0,0,0.18); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 60px); }
.section-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: clamp(14px, 1.1vw, 16px); max-width: 580px; margin: 0 auto; line-height: 1.6; }

.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 44px);
}
.section-head-row .sh-left { max-width: 620px; }
.section-head-row .eyebrow { display: inline-block; margin-bottom: 12px; }
.section-head-row h2 { margin-bottom: 12px; }
.section-head-row p { font-size: 15px; line-height: 1.6; }

/* ─── Card base ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* ─── Services ───
   Grid and card styles moved OUT of this file on 05.08.2026: block 3 is now driven
   by one ACF field (`nd_services_code`) that carries the markup together with its
   own <style>, so the client can change both without touching the theme.
   Nothing here may style `.services-grid` / `.srv-*` — it would fight that field.
   The section shell (.section, .container, .section-head, .section-foot) stays here. */
.section-foot { text-align: center; margin-top: 32px; }

/* ─── Platforms band ─── */
.platforms-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.plat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px 14px; text-align: center; display: block;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.plat-card:hover { border-color: rgba(79, 142, 247, 0.48); transform: translateY(-2px); }
/* Platform logos */
.plat-card svg { display:none; }
.platform-logo {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
  opacity: .95;
  transition: opacity .2s ease, transform .2s ease;
}
.plat-card:hover .platform-logo {
  opacity: 1;
  transform: scale(1.03);
}
.plat-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px !important; }
.plat-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.platforms-menu-inner > .mega-col {
	width: 100%;
	max-width: none;
}

.platforms-links-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(6, auto);
	grid-auto-flow: column;
	column-gap: 35px;
}

.platforms-links-grid a {
	width: 100%;
}

@media (max-width: 768px) {
	.platforms-links-grid {
		display: block;
	}

	.platforms-links-grid a {
		display: block;
	}
}
/* ─── How we work (flow) ─── */
.flow-wrap {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 30px; position: relative; overflow: hidden;
  box-shadow: 0 30px 80px -28px rgba(0,0,0,0.6), 0 0 80px -32px var(--blue-glow);
}
.flow-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 45% 70% at 85% 50%, rgba(79, 142, 247, 0.13), transparent 70%);
}
.flow-label {
  position: relative; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 22px; display: flex; align-items: center; gap: 8px;
}
.flow-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.flow-row { position: relative; display: flex; align-items: stretch; gap: 6px; }
.flow-node {
  flex: 1; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 14px;
}
.flow-node.active { border-color: rgba(79, 142, 247, 0.64); background: linear-gradient(180deg, rgba(79, 142, 247, 0.11), var(--surface-2)); }
.flow-node.success { border-color: rgba(52,211,153,0.4); background: linear-gradient(180deg, rgba(52,211,153,0.07), var(--surface-2)); }
.flow-step { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--blue-bright); margin-bottom: 8px; }
.flow-node.success .flow-step { color: var(--green); }
.flow-node-name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.25; margin-bottom: 5px; }
.flow-node-sub { font-size: 12px; color: var(--text-dim); }
.flow-arr { display: flex; align-items: center; color: var(--blue-bright); flex-shrink: 0; }
.flow-arr svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* ─── Why ─── */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; transition: border-color 0.2s ease, transform 0.2s ease; }
.why-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.why-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 16px 0 10px !important; }
.why-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.65; }

/* ─── Markets ─── */
.markets-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.market-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px 16px; text-align: center; display: block;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.market-card:hover { border-color: rgba(79, 142, 247, 0.48); transform: translateY(-2px); }
.market-card svg { width: 26px; height: 26px; stroke: var(--blue-bright); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 14px; }
.market-name { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px !important; }
.market-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

/* ─── Clients ─── */
.clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.client-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; transition: border-color 0.2s ease, transform 0.2s ease; }
.client-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.client-name { font-size: 14.5px; font-weight: 600; margin: 14px 0 7px !important; }
.client-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }

/* ─── Reviews ─── */
.reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.reviews-head h2 { margin: 0; }
.reviews-head .eyebrow { display: block; margin-bottom: 12px; }
.tp-badge {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; background: rgba(0,182,122,0.08);
  border: 1px solid rgba(0,182,122,0.22); border-radius: var(--r-md);
}
.tp-stars { color: #00B67A; font-size: 15px; letter-spacing: 2px; }
.tp-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.tp-score { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; transition: border-color 0.2s ease; }
.review-card:hover { border-color: var(--border-strong); }
.review-stars { color: #00B67A; font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
.review-text { font-size: 14px; color: var(--text-2); line-height: 1.65; margin-bottom: 18px; }
.review-author { display: flex; align-items: center; gap: 11px; }
.review-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(79, 142, 247, 0.32), rgba(79, 142, 247, 0.09));
  border: 1px solid rgba(79, 142, 247, 0.40);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--blue-bright);
}
.review-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.review-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ─── Products ─── */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prod-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: block; transition: border-color 0.2s ease, transform 0.2s ease; }
.prod-card:hover { border-color: rgba(79, 142, 247, 0.48); transform: translateY(-3px); }
.prod-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--surface-2); }
.prod-body { padding: 14px 16px 16px; }
.prod-plat { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue-bright); margin-bottom: 6px; }
.prod-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.prod-card.libr { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.prod-card.libr .icon-box { margin-bottom: 14px; }
.prod-card.libr .prod-name { margin-bottom: 6px; }
.prod-card.libr .prod-note { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

/* ─── Blog ─── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; display: block; transition: border-color 0.2s ease, transform 0.2s ease; }
.blog-card:hover { border-color: rgba(79, 142, 247, 0.48); transform: translateY(-3px); }
.blog-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue-bright); margin-bottom: 12px; }
.blog-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin-bottom: 10px; }
.blog-excerpt { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; }
.blog-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

/* ─── CTA band ─── */
.cta-band {
  text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(79, 142, 247, 0.32), transparent 70%),
    var(--surface);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: clamp(56px, 8vw, 96px) 32px;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(79, 142, 247, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 142, 247, 0.09) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000, transparent 70%);
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { font-size: 16px; max-width: 560px; margin: 0 auto 30px; line-height: 1.6; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.cta-trust { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.cta-trust-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.cta-trust-item svg { width: 14px; height: 14px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Footer ─── */
.footer { border-top: 1px solid var(--border); padding: 56px 0 32px; background: rgba(0,0,0,0.2); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 0.85fr 0.85fr 0.9fr; gap: 32px; margin-bottom: 36px; }
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand p { font-size: 13px; color: var(--text-dim); line-height: 1.65; max-width: 290px; margin-bottom: 18px; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 9px; color: var(--text-2);
  background: var(--surface); transition: all 0.18s ease;
}
.footer-socials a svg { width: 17px; height: 17px; }
.footer-socials a:hover { color: #fff; border-color: rgba(79, 142, 247, 0.64); background: rgba(79, 142, 247, 0.20); transform: translateY(-2px); }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; font-weight: 500; }
.footer-col ul { display: flex; flex-direction: column; gap: 13.5px; }
.footer-col a { font-size: 13.5px; color: var(--text-2); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--text); }
.footer-col a.dim { color: var(--text-dim); }

.footer-meta { border-top: 1px solid var(--border); padding-top: 24px; margin-bottom: 8px; }
.footer-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 36px; }
.footer-meta-grid .fm-info p { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); line-height: 1.7; }
.footer-meta-grid .fm-info a { color: var(--text-dim); transition: color 0.15s ease; }
.footer-meta-grid .fm-info a:hover { color: var(--blue-bright); }
.footer-legal-links { font-family: var(--font-mono); font-size: 11.5px; line-height: 2; color: var(--text-dim); }
.footer-legal-links a { color: var(--text-dim); transition: color 0.15s ease; }
.footer-legal-links a:hover { color: var(--blue-bright); }

.footer-disclosure { border-top: 1px solid var(--border); padding-top: 28px; margin-top: 24px; }
.footer-disclosure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-disclosure h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; font-weight: 500; }
.footer-disclosure p { font-size: 11.5px; color: var(--text-mute); line-height: 1.7; margin-bottom: 10px; }
.footer-disclosure p:last-child { margin-bottom: 0; }
.footer-disclosure a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.footer-disclosure a:hover { color: var(--blue-bright); }

/* selection + scrollbar */
::selection { background: rgba(79, 142, 247, 0.64); color: #fff; }

/* ─── Micro-animations ─── */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

.btn svg { transition: transform 0.18s ease; }
.btn:hover svg { transform: translateX(3px); }
.cta-band .btn:hover svg { transform: translateX(0); }

/* flow: marching arrow + travelling glow */
.flow-arr svg path { stroke-dasharray: 5 5; animation: dashFlow 0.9s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -20; } }
.flow-node { transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; }
.flow-node.glow { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(79, 142, 247, 0.72), 0 14px 34px -14px rgba(79, 142, 247, 0.89); }
.flow-node.success.glow { box-shadow: 0 0 0 1px rgba(52,211,153,0.5), 0 14px 34px -14px rgba(52,211,153,0.55); }
.flow-node.glow .flow-node-name { color: var(--blue-bright); }
.flow-node.success.glow .flow-node-name { color: var(--green); }

/* card lift easing already set per-card; add review avatar + tp pulse */
.tp-stars { animation: none; }
.review-avatar { transition: transform 0.2s ease; }
.review-card:hover .review-avatar { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .flow-arr svg path { animation: none; }
  .flow-node.glow { transform: none; }
  .hero-badge .pulse, .flow-label .dot { animation: none; }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ─── Responsive ─── */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .quote-card { max-width: 480px; }
  .platforms-list { grid-template-columns: repeat(4, 1fr); }
  .flow-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .flow-arr { display: none; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .markets-grid { grid-template-columns: repeat(3, 1fr); }
  .clients-grid { grid-template-columns: 1fr 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-meta-grid, .footer-disclosure-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .platforms-list { grid-template-columns: repeat(2, 1fr); }
  .flow-row { grid-template-columns: 1fr 1fr; }
  .why-grid, .clients-grid, .products-grid { grid-template-columns: 1fr; }
  .markets-grid { grid-template-columns: 1fr 1fr; }
  .hero-trust { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}


/* ── SPOTLIGHT SLIDER ────────────────────────────────── */
.spot{background:rgba(0,53,156,.08);border-bottom:1px solid var(--border);overflow:hidden}
.spot-track-wrap{overflow:hidden}
.spot-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.spot-slide{min-width:100%;display:grid;grid-template-columns:1fr 380px;min-height:240px}
.spot-left{padding:36px 44px;display:flex;flex-direction:column;justify-content:center;gap:12px;border-right:1px solid rgba(255,255,255,.06)}
.spot-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7ab4f8;width:fit-content}
.spot-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:#34d399;flex-shrink:0;animation:pulseRing 1.8s ease-out infinite}
.spot-title{font-size:18px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-.015em}
.spot-desc{font-size:13px;color:var(--text);line-height:1.65;max-width:480px}
.spot-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.spot-list li{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:rgba(255,255,255,.65);line-height:1.4}
.spot-list li svg{flex-shrink:0;margin-top:2px;stroke:var(--green);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.spot-actions{display:flex;align-items:center;gap:10px;margin-top:4px}
.spot-right{display:flex;align-items:center;justify-content:center;padding:24px 28px;background:rgba(0,0,0,.15);position:relative}
.spot-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 44px;border-top:1px solid rgba(255,255,255,.05)}
.spot-counter{font-size:10px;font-weight:700;color:rgba(255,255,255,.22);letter-spacing:.06em}
.spot-dots{display:flex;gap:5px;align-items:center}
.spot-dot{width:20px;height:2px;background:rgba(255,255,255,.15);border:none;cursor:pointer;padding:0;transition:all .25s;border-radius:1px}
.spot-dot.on{background:var(--accent2);width:28px}
.spot-arrows{display:flex;gap:5px}
.spot-arr{width:28px;height:28px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text2);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .18s;line-height:1}
.spot-arr:hover{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.25)}



/* ─────────────────────────────────────────────
   Nordman Algorithms — Refined Dark Theme Patch v1.0
   Slightly lighter institutional fintech palette
   Inserted after original styles to preserve layout
───────────────────────────────────────────── */

:root {
  /* Base background — lighter, but still deep dark */
  --bg: #0A1020;
  --bg-soft: #10192D;

  /* Cards / surfaces */
  --surface: #18263F;
  --surface-2: #22304A;
  --surface-3: #2A3A58;

  /* Softer borders */
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* Better readability */
  --text: #FFFFFF;
  --text-2: #E5ECF8;
  --text-dim: #AEBBD2;
  --text-mute: #6F7B94;

  /* Accent */
  --blue: #3B82F6;
  --blue-bright: #70B4FF;
  --blue-deep: #1D4ED8;
  --blue-glow: rgba(96, 165, 250, 0.30);
}

body {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(96, 165, 250, 0.20), transparent 62%),
    radial-gradient(ellipse 55% 38% at 85% 28%, rgba(96, 165, 250, 0.08), transparent 65%),
    var(--bg);
}

.header {
  background: rgba(10, 16, 32, 0.84);
  border-bottom-color: rgba(255,255,255,0.10);
}

.topbar {
  background: rgba(10, 16, 32, 0.66);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* `.srv-card` deliberately absent — see the Services note above. */
.card,
.plat-card,
.why-card,
.market-card,
.client-card,
.review-card,
.prod-card,
.blog-card,
.quote-card,
.flow-wrap,
.mega,
.flow-node {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)), var(--surface);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 16px 36px rgba(0,0,0,0.22);
}

.plat-card:hover,
.why-card:hover,
.market-card:hover,
.client-card:hover,
.review-card:hover,
.prod-card:hover,
.blog-card:hover {
  border-color: rgba(112, 180, 255, 0.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 46px rgba(0,0,0,0.28),
    0 0 0 1px rgba(112, 180, 255, 0.10);
}

.section.tint {
  background: rgba(255,255,255,0.025);
  border-top-color: rgba(255,255,255,0.08);
  border-bottom-color: rgba(255,255,255,0.08);
}

.btn-primary {
  background: linear-gradient(180deg, #4F9BFF, #2F75E8);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(112, 180, 255, 0.32),
    0 12px 28px -10px rgba(59, 130, 246, 0.55);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #70B4FF, #3B82F6);
}

.btn-ghost {
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.025);
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(112, 180, 255, 0.35);
}

.hero-platforms a {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.11);
}

.hero-platforms a:hover {
  border-color: rgba(112, 180, 255, 0.58);
  background: rgba(112, 180, 255, 0.11);
}

.fg input,
.fg select,
.fg textarea {
  background: #0D1528;
  border-color: rgba(255,255,255,0.13);
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: rgba(112, 180, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.20);
}

.icon-box {
  background: linear-gradient(180deg, rgba(112, 180, 255, 0.26), rgba(112, 180, 255, 0.08));
  border-color: rgba(112, 180, 255, 0.36);
}

.footer {
  background: rgba(4, 9, 20, 0.28);
  border-top-color: rgba(255,255,255,0.10);
}

/* Optional light island.
   Add class="section light-island" to Case Studies, Reviews, or another selected section. */
.section.light-island {
  background: #F4F7FB;
  color: #0B1120;
}

.section.light-island h2,
.section.light-island h3,
.section.light-island .client-name,
.section.light-island .review-name {
  color: #0B1120;
}

.section.light-island p,
.section.light-island .client-desc,
.section.light-island .review-text {
  color: #334155;
}

.section.light-island .eyebrow {
  color: #2563EB;
}

.section.light-island .card,
.section.light-island .client-card,
.section.light-island .review-card {
  background: #FFFFFF;
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.70) inset,
    0 18px 40px rgba(15,23,42,0.08);
}



/* ─── Homepage v1.1 implementation patch ─── */
.hero-solution-pills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 18px}
.hero-solution-pills span{display:inline-flex;align-items:center;min-height:30px;padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.035);color:var(--text-2);font-size:12px;font-weight:600;line-height:1;}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tech-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;transition:border-color .2s ease,transform .2s ease;}
.tech-card:hover{border-color:rgba(79,142,247,.48);transform:translateY(-2px)}
.tech-title{font-size:16px;font-weight:600;margin-bottom:12px !important;color:var(--text)}
.tech-list{font-family:var(--font-mono);font-size:12px;line-height:1.8;color:var(--blue-bright);margin-bottom:12px}
.tech-desc{font-size:13px;color:var(--text-2);line-height:1.6}
.products-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.product-tab{border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:999px;padding:9px 13px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s ease}
.product-tab.active,.product-tab:hover{color:var(--text);border-color:rgba(79,142,247,.55);background:rgba(79,142,247,.13)}
.products-carousel{position:relative}
.products-grid.carousel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.products-nav{display:flex;justify-content:center;gap:10px;margin-top:22px}
.carousel-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:all .2s ease}
.carousel-btn:hover{border-color:rgba(79,142,247,.55);background:rgba(79,142,247,.13)}
.products-cta{text-align:center;margin-top:24px}
.products-cta .btn{min-width:190px}
@media(max-width:1040px){.tech-grid{grid-template-columns:1fr}.products-grid.carousel-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.products-grid.carousel-grid{grid-template-columns:1fr}.hero-solution-pills span{font-size:11px}.tech-card{padding:22px}}


/* ─── Homepage v1.2 correction patch ─── */
.nav-product > a{color:var(--text);border:1px solid rgba(112,180,255,.35);background:rgba(79,142,247,.10);border-radius:999px;padding:8px 12px}
.header-cta{text-transform:none!important}
.hero-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#announceTabs{min-height:390px}
#announceTabs .announce-slide > .container{height:330px;min-height:330px!important}
.tech-card{position:relative;overflow:hidden}
.tech-card::after{content:"";position:absolute;inset:auto 18px 0 18px;height:1px;background:linear-gradient(90deg,transparent,rgba(112,180,255,.45),transparent)}
.tech-links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.tech-links a{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.035);color:var(--blue-bright);font-family:var(--font-mono);font-size:11px;line-height:1;transition:all .18s ease}
.tech-links a:hover{border-color:rgba(112,180,255,.55);background:rgba(79,142,247,.12);color:#fff}
.reviews-centered .tp-badge{margin:18px auto 0}
.blog-section{border-top:1px solid var(--border);}
@media(max-width:1040px){#announceTabs .announce-slide > .container{height:auto;min-height:330px!important}}



/* ─── Homepage v1.3 refinement patch ─── */
.nav-product > a{
  color:var(--blue-bright)!important;
  border:0!important;
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
  font-weight:800;
}
.nav-product > a:hover{color:#fff!important}
.nav .mega.wide .mega-inner{align-items:flex-start}
.nav .mega.wide .mega-col{min-width:190px}
#announceTabs{min-height:360px}
#announceTabs .announce-slide > .container{height:320px;min-height:320px!important;align-items:center}
.products-tabs{justify-content:center}
.products-carousel{max-width:1120px;margin:0 auto}
#productsGrid{min-height:250px}
.section.tint + .section.tint{border-top:1px solid rgba(255,255,255,.11)}
section.section:not(.tint) + section.section:not(.tint){border-top:1px solid rgba(255,255,255,.09)}
#why-nordman{}
.reviews-centered{max-width:620px!important}
.reviews-centered .tp-badge{
  width:max-content;
  max-width:100%;
  margin:18px auto 0!important;
  padding:10px 16px;
}
.blog-section{border-top:1px solid rgba(255,255,255,.14);}
.blog-title{color:var(--blue-bright);}
.blog-card:hover .blog-title{color:#fff}
.final-cta{margin-top:0}
@media(max-width:1040px){#announceTabs .announce-slide > .container{height:auto;min-height:320px!important}}


/* ─── Homepage v1.5 correction patch ─── */
.markets-menu-inner{display:grid!important;grid-template-columns:repeat(2,minmax(150px,1fr));gap:30px!important}
#announceTabs{min-height:382px!important}
#announceTabs .announce-slide > .container{height:342px!important;min-height:342px!important}
#announceTabs .announce-slide > .container > div:first-child{padding:34px 48px 54px!important}
#announceTabs .announce-slide > .container > div:first-child > div:last-child{margin-top:4px!important;margin-bottom:14px!important}
#announceTabs .announce-slide > .container + *{}
@media(max-width:1040px){#announceTabs .announce-slide > .container{height:auto!important;min-height:342px!important}#announceTabs .announce-slide > .container > div:first-child{padding:30px 24px 42px!important}}



/* ─── v1.6 mobile fixes ─── */
@media (max-width: 760px) {
  .topbar-inner { justify-content: flex-end; }
  .topbar-right { gap: 10px; font-size: 10.5px; }
  .topbar-right > a { max-width: 185px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-chat { gap: 7px; }
  .topbar-lang { white-space: nowrap; }
}
.mobile-menu-socials { display: none; }
@media (max-width: 1040px) {
  .nav.nav-open { inset: 104px 0 0; }
  .nav.nav-open .mobile-menu-socials {
    display: flex; align-items: center; gap: 10px; padding: 18px 4px 6px;
  }
  .nav.nav-open .mobile-menu-socials a {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  }
  .nav.nav-open .mobile-menu-socials a:hover { color: var(--text); border-color: var(--border-strong); }
  .nav.nav-open .mobile-menu-socials svg { width: 17px; height: 17px; }
}
@media (max-width: 760px) {
  #announceTabs .announce-slide > .container {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #announceTabs .announce-slide > .container > div:first-child {
    order: 1;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
    padding: 30px var(--pad-x) 34px !important;
  }
  #announceTabs .announce-slide > .container > div:nth-child(2) {
    order: 2;
    min-height: 220px;
    padding: 24px var(--pad-x) !important;
  }
  #announceTabs { min-height: 0 !important; }
}
.quote-actions { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.quote-actions .quote-attach { margin-bottom:0; }
.quote-chat {
  width:39px; height:39px; border:1px solid var(--border); border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--text-dim); transition:all .15s ease;
}
.quote-chat:hover { color:var(--text); border-color:var(--border-strong); background:rgba(255,255,255,.04); }
.quote-chat svg { width:16px; height:16px; }
.footer-contact-icons { display:flex; gap:8px; margin-top:8px; }
.footer-contact-icons a {
  width:30px; height:30px; border:1px solid var(--border); border-radius:8px;
  display:grid; place-items:center; color:var(--text-dim); background:rgba(255,255,255,.02);
}
.footer-contact-icons a:hover { color:var(--text); border-color:var(--border-strong); }
.footer-contact-icons svg { width:15px; height:15px; }



/* ─── v1.7 mobile corrections ─── */
.quote-actions{display:flex!important;align-items:center!important;width:100%!important;gap:8px!important;flex-wrap:nowrap!important;}
.quote-actions .quote-attach{flex:0 0 auto!important;}
.quote-actions .quote-chat:first-of-type{margin-left:auto!important;}
.quote-actions .quote-chat{flex:0 0 39px!important;}
@media (max-width:1040px){
  .header-inner{position:relative;}
  .nav-toggle{display:grid!important;place-items:center!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:90!important;flex:0 0 42px!important;}
  .header-cta{display:none!important;}
  .nav{display:none!important;}
  .nav.nav-open{display:flex!important;position:fixed!important;left:0!important;right:0!important;top:104px!important;bottom:0!important;z-index:80!important;background:var(--bg)!important;border-top:1px solid var(--border)!important;padding:20px var(--pad-x) 36px!important;overflow-y:auto!important;}
  .nav.nav-open .mega{display:block!important;}
}
@media (max-width:760px){
  .topbar-inner{height:38px!important;}
  .topbar-right{margin-left:auto!important;}
  .logo-name{font-size:12px!important;letter-spacing:.06em!important;}
  .logo-sub{font-size:7px!important;}
}
.prod-body{padding:15px 16px 17px!important;}
.prod-name{color:var(--text)!important;font-size:15px!important;font-weight:700!important;}
.footer-contact-row{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important;}
.footer-contact-row .footer-contact-icons{display:inline-flex!important;margin:0!important;gap:8px!important;vertical-align:middle!important;}
.footer-contact-row .footer-contact-icons a{width:28px!important;height:28px!important;}



/* ─── v1.8 explicit mobile/menu/form/product/footer fixes ─── */
@media (max-width:1040px){
  .header .nav-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    margin-left:auto!important;
    border:1px solid rgba(255,255,255,.28)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.045)!important;
    color:#FAFCFF!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:9999!important;
  }
  .header .nav-toggle svg{width:22px!important;height:22px!important;stroke:#FAFCFF!important;display:block!important;}
  .header .nav{display:none!important;}
  .header .nav.nav-open{display:flex!important;}
}
@media (min-width:1041px){
  .header .nav-toggle{display:none!important;}
}
.quote-actions{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}
.quote-actions .quote-attach{flex:0 0 auto!important;}
.quote-actions .quote-attach + .quote-chat{margin-left:auto!important;}
.quote-actions .quote-chat{flex:0 0 39px!important;width:39px!important;height:39px!important;}
.prod-card{display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;}
.prod-img{aspect-ratio:16/8.3!important;object-fit:cover!important;}
.prod-body{padding:10px 13px 12px!important;min-height:0!important;flex:0 0 auto!important;}
.prod-name{font-size:14px!important;line-height:1.25!important;margin:0!important;}
.footer-contact-row{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;margin-top:2px!important;}
.footer-contact-row > a{line-height:28px!important;}
.footer-contact-row .footer-contact-icons{display:inline-flex!important;align-items:center!important;gap:7px!important;margin:0 0 0 2px!important;}
.footer-contact-row .footer-contact-icons a{width:28px!important;height:28px!important;}



/* ─── v1.9 final corrections ─── */
.footer-meta-grid .fm-info p,
.footer-meta-grid .fm-info a,
.footer-legal-links,
.footer-legal-links a{
  font-size:12.5px!important;
}
.footer-contact-row{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.footer-contact-row > a{
  font-size:12.5px!important;
  line-height:30px!important;
}
.footer-contact-row .footer-contact-icons{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0 0 0 4px!important;
}
.footer-contact-row .footer-contact-icons a{
  width:30px!important;
  height:30px!important;
}

/* Product cards: restore image height and remove empty bottom space */
#productsGrid{min-height:0!important;align-items:start!important;}
.prod-card{
  display:flex!important;
  flex-direction:column!important;
  height:auto!important;
  min-height:0!important;
}
.prod-img{
  aspect-ratio:16/10!important;
  object-fit:cover!important;
  object-position:center top!important;
}
.prod-body{
  padding:9px 13px 10px!important;
  min-height:0!important;
  flex:0 0 auto!important;
}
.prod-name{
  font-size:14px!important;
  line-height:1.22!important;
  margin:0!important;
}

/* Quote form: attach button left, Telegram/WhatsApp fixed to the right edge */
.quote-actions{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}
.quote-actions .quote-attach{flex:0 0 auto!important;margin-right:auto!important;}
.quote-actions .quote-chat{flex:0 0 39px!important;width:39px!important;height:39px!important;}
.quote-actions .quote-attach + .quote-chat{margin-left:auto!important;}
.quote-actions .quote-chat + .quote-chat{margin-left:0!important;}

/* Mobile header: force burger visibility and working menu panel */
@media (max-width:1040px){
  .header-inner{position:relative!important;justify-content:flex-start!important;padding-right:68px!important;}
  .header .logo{min-width:0!important;}
  .header .nav-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:absolute!important;
    right:var(--pad-x)!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border:1px solid rgba(255,255,255,.32)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.065)!important;
    color:#FAFCFF!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:99999!important;
    pointer-events:auto!important;
  }
  .header .nav-toggle svg,
  .header .nav-toggle svg line{
    display:block!important;
    width:22px!important;
    height:22px!important;
    stroke:#FAFCFF!important;
    stroke-width:2.2!important;
    stroke-linecap:round!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .header .nav{display:none!important;}
  .header .nav.nav-open{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:104px!important;
    bottom:0!important;
    z-index:9999!important;
    background:#06090F!important;
    border-top:1px solid var(--border)!important;
    padding:20px var(--pad-x) 36px!important;
    overflow-y:auto!important;
  }
  .header .nav.nav-open .nav-item{width:100%!important;}
  .header .nav.nav-open .nav-item>a{font-size:17px!important;padding:14px 12px!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;justify-content:space-between!important;}
  .header .nav.nav-open .mega{display:block!important;position:static!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;min-width:0!important;width:100%!important;box-shadow:none!important;border:none!important;padding:4px 0 12px 12px!important;background:transparent!important;}
  .header .nav.nav-open .mega-inner{flex-direction:column!important;gap:12px!important;}
  .header .nav.nav-open .caret{display:none!important;}
  .header .nav.nav-open .mobile-menu-socials{display:flex!important;}
}
@media (min-width:1041px){
  .header .nav-toggle{display:none!important;}
}



/* ─── v1.9.1 fix: Markets dropdown 2 columns + refined product arrows ─── */
.markets-mega{min-width:420px!important;}
.markets-menu-inner{display:block!important;}
.markets-links-grid{display:grid!important;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px 24px!important;}
.products-nav .carousel-btn{
  width:36px!important;
  height:36px!important;
  border-radius:10px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.045)!important;
  color:#fff!important;
  font-size:22px!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset!important;
}
.products-nav .carousel-btn:hover{
  border-color:rgba(112,180,255,.50)!important;
  background:rgba(79,142,247,.14)!important;
  transform:translateY(-1px);
}
.products-nav .carousel-btn:active{
  transform:translateY(0);
}
@media(max-width:1040px){
  .markets-mega{min-width:0!important;}
  .markets-links-grid{grid-template-columns:1fr!important;}
}



/* ─── Homepage v2.0 Mobile Drawer Menu ─── */
.mobile-menu-cta { display: none; }
.mobile-nav-backdrop { display: none; }
@media (max-width:1040px) {
  body.mobile-menu-open { overflow: hidden !important; }
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 78;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s ease, visibility .24s ease;
  }
  body.mobile-menu-open .mobile-nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .header .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(390px, 88vw) !important;
    height: 100dvh !important;
    z-index: 80 !important;
    padding: 84px 20px 28px !important;
    overflow-y: auto !important;
    background:
      radial-gradient(ellipse 80% 45% at 50% 0%, rgba(112,180,255,.16), transparent 65%),
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
      var(--bg-soft) !important;
    border-left: 1px solid rgba(255,255,255,.14) !important;
    border-top: 0 !important;
    box-shadow: -30px 0 80px rgba(0,0,0,.55) !important;
    transform: translateX(104%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.7,.2,1) !important;
  }
  .header .nav.nav-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  .header .nav::before {
    content: "Menu";
    position: absolute;
    top: 26px;
    left: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-bright);
  }
  .header .nav .nav-item { width: 100% !important; border-bottom: 1px solid rgba(255,255,255,.09); }
  .header .nav .nav-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 15px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
  }
  .header .nav .caret { display: none !important; }
  .header .nav .mega,
  .header .nav .mega.wide,
  .header .nav .markets-mega {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 15px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .header .nav .mega-inner,
  .header .nav .markets-menu-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
  }
  .header .nav .mega-col { min-width: 0 !important; }
  .header .nav .mega-col h5 {
    margin: 0 0 7px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 10px !important;
    color: var(--text-dim) !important;
  }
  .header .nav .mega-col a,
  .header .nav .markets-links-grid a {
    display: block !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    white-space: normal !important;
    color: var(--text-2) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .header .nav .mega-col a:hover,
  .header .nav .markets-links-grid a:hover { color: var(--blue-bright) !important; background: transparent !important; }
  .header .nav .mobile-menu-cta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 22px 0 14px !important;
  }
  .header .nav .mobile-menu-cta .btn { width: 100% !important; justify-content: center !important; }
  .header .nav .mobile-menu-socials {
    display: flex !important;
    gap: 10px !important;
    padding: 12px 0 0 !important;
  }
  .header .nav .mobile-menu-socials a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: var(--text-dim) !important;
  }
  .header .nav-toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 49px !important;
    right: 18px !important;
    z-index: 90 !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.22) !important;
  }
  .header .nav-toggle[aria-expanded="true"] svg line:nth-child(1){ transform: translate(4px, -1px) rotate(45deg); transform-origin: 6px 6px; }
  .header .nav-toggle[aria-expanded="true"] svg line:nth-child(2){ opacity: 0; }
  .header .nav-toggle[aria-expanded="true"] svg line:nth-child(3){ transform: translate(-8px, 5px) rotate(-45deg); transform-origin: 18px 18px; }
  .header .nav-toggle svg line { transition: transform .2s ease, opacity .2s ease; }
}
@media (max-width:600px) {
  .header .nav { width: min(350px, 90vw) !important; padding-left: 18px !important; padding-right: 18px !important; }
  .header .nav .mega-inner,
  .header .nav .markets-menu-inner { grid-template-columns: 1fr !important; gap: 10px !important; }
}



/* ─── Homepage v2.1 Mobile Drawer z-index FIX ───
   Fix: backdrop was above the header stacking context, so the page dimmed
   but the mobile drawer stayed hidden underneath the overlay.
*/
@media (max-width:1040px) {
  .header {
    z-index: 1000 !important;
  }
  .mobile-nav-backdrop {
    z-index: 990 !important;
  }
  .header .nav {
    z-index: 1010 !important;
  }
  .header .nav.nav-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  .header .nav-toggle {
    z-index: 1020 !important;
  }
  .header .nav-toggle[aria-expanded="true"] {
    z-index: 1020 !important;
  }
}



/* ─── Homepage v2.2 Mobile Fullscreen Accordion Menu ───
   Mobile-only correction:
   - fullscreen menu instead of side drawer
   - no "Menu" label
   - accordion top-level sections
   - Product remains a direct link
   - no duplicated CTA buttons inside menu
*/
@media (max-width:1040px) {
  .mobile-nav-backdrop {
    display: none !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
  }

  .header .nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    z-index: 1010 !important;
    padding: 86px var(--pad-x) 30px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background:
      radial-gradient(ellipse 80% 42% at 50% 0%, rgba(112,180,255,.16), transparent 66%),
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
      var(--bg) !important;
    border-left: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    transform: translateX(100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.7,.2,1) !important;
  }

  .header .nav.nav-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .header .nav::before {
    content: none !important;
    display: none !important;
  }

  .header .nav .nav-item {
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }

  .header .nav .nav-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
  }

  .header .nav .nav-item > a:hover {
    color: var(--blue-bright) !important;
    background: transparent !important;
  }

  .header .nav .caret {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    opacity: .7 !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }

  .header .nav .nav-item.mobile-expanded > a .caret {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
  }

  .header .nav .nav-product .caret,
  .header .nav .nav-item:not(:has(.mega)) .caret {
    display: none !important;
  }

  .header .nav .mega,
  .header .nav .mega.wide,
  .header .nav .markets-mega {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: max-height .26s ease, padding .26s ease !important;
  }

  .header .nav .nav-item.mobile-expanded .mega,
  .header .nav .nav-item.mobile-expanded .mega.wide,
  .header .nav .nav-item.mobile-expanded .markets-mega {
    max-height: 900px !important;
    padding: 0 0 16px !important;
  }

  .header .nav .nav-product .mega,
  .header .nav .nav-product.mobile-expanded .mega {
    display: none !important;
    max-height: 0 !important;
    padding: 0 !important;
  }

  .header .nav .mega-inner,
  .header .nav .markets-menu-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  .header .nav .mega-col {
    min-width: 0 !important;
  }

  .header .nav .mega-col h5 {
    display: none !important;
  }

  .header .nav .nav-item.mobile-tech .mega-col h5 {
    display: block !important;
    margin: 14px 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--blue-bright) !important;
    font-size: 10px !important;
    letter-spacing: .13em !important;
  }

  .header .nav .mega-col a,
  .header .nav .markets-links-grid a {
    display: block !important;
    padding: 9px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    white-space: normal !important;
    color: var(--text-2) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  .header .nav .mega-col a:hover,
  .header .nav .markets-links-grid a:hover {
    color: var(--blue-bright) !important;
    background: transparent !important;
  }

  .header .nav .mobile-menu-cta {
    display: none !important;
  }

  .header .nav .mobile-menu-socials {
    display: flex !important;
    gap: 10px !important;
    padding: 22px 0 0 !important;
    margin-top: 2px !important;
  }

  .header .nav-toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 50px !important;
    right: var(--pad-x) !important;
    z-index: 1020 !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.22) !important;
  }
}

@media (max-width:600px) {
  .header .nav {
    width: 100vw !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .header .nav .nav-item > a {
    font-size: 18px !important;
  }
}



/* ─── Homepage v2.3 Mobile Menu Visual Refinement ─── */
@media (max-width:1040px) {
  .header .nav {
    padding: 92px clamp(18px,4vw,34px) 34px !important;
    background:
      radial-gradient(ellipse 70% 36% at 28% 0%, rgba(59,130,246,.20), transparent 64%),
      radial-gradient(ellipse 55% 38% at 94% 18%, rgba(59,130,246,.12), transparent 68%),
      linear-gradient(135deg, #070B14 0%, #0B1324 48%, #05080F 100%) !important;
  }
  .header .nav .nav-item {
    border-bottom: 1px solid rgba(255,255,255,.105) !important;
  }
  .header .nav .nav-item > a {
    min-height: 70px !important;
    padding: 15px 0 !important;
    font-size: 20px !important;
    text-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
  }
  .header .nav .nav-item > a::before {
    content: "";
    width: 42px;
    height: 42px;
    margin-right: 16px;
    flex: 0 0 42px;
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
  }
  .header .nav .nav-item:nth-of-type(1) > a::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 8.6 20a1.65 1.65 0 0 0-1.82-.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4 8.6a1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 6.44 3.9l.06.06A1.65 1.65 0 0 0 8.6 4.6 1.65 1.65 0 0 0 10 4h.09A2 2 0 0 1 14 4h.09a1.65 1.65 0 0 0 1 .6 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 8.6a1.65 1.65 0 0 0 .6 1h.09a2 2 0 0 1 0 4H20a1.65 1.65 0 0 0-.6 1Z"/></svg>'); }
  .header .nav .nav-item:nth-of-type(2) > a::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5"/><path d="m3 16 9 5 9-5"/></svg>'); }
  .header .nav .nav-item:nth-of-type(3) > a::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>'); }
  .header .nav .nav-item:nth-of-type(4) > a::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/><path d="m14 4-4 16"/></svg>'); }
  .header .nav .nav-item:nth-of-type(5) > a::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 16-9 5-9-5V8l9-5 9 5v8Z"/><path d="m3.3 7.4 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>'); }
  .header .nav .nav-item:nth-of-type(6) > a::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2h9l5 5v15H6z"/><path d="M14 2v6h6"/><path d="M9 13h6M9 17h6"/></svg>'); }
  .header .nav .nav-item > a span { min-width: 0; }
  .header .nav .nav-item > a .caret { display: none !important; }
  .header .nav .nav-item:has(.mega):not(.nav-product) > a::after {
    content: "›";
    margin-left: auto;
    color: var(--blue-bright);
    font-size: 34px;
    line-height: 1;
    font-weight: 300;
    transition: transform .2s ease;
  }
  .header .nav .nav-item.mobile-expanded > a::after { transform: rotate(90deg); }
  .header .nav .mega-col a,
  .header .nav .markets-links-grid a {
    padding: 10px 0 10px 58px !important;
    color: rgba(229,236,248,.82) !important;
  }
  .header .nav .nav-item.mobile-expanded .mega,
  .header .nav .nav-item.mobile-expanded .mega.wide,
  .header .nav .nav-item.mobile-expanded .markets-mega {
    padding: 0 0 18px !important;
  }
  .header .nav-toggle[aria-expanded="true"] {
    top: 22px !important;
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
  }
  .header .nav-toggle[aria-expanded="true"] svg { display: none !important; }
  .header .nav-toggle[aria-expanded="true"]::before,
  .header .nav-toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    width: 23px;
    height: 2px;
    border-radius: 999px;
    background: #EAF1FF;
  }
  .header .nav-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
  .header .nav-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }
  .mobile-contact-panel {
    display: block !important;
    padding: 28px 0 8px;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 4px;
  }
  .mobile-contact-title,
  .mobile-follow-title {
    font-family: var(--font-mono);
    color: var(--blue-bright);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 14px;
  }
  .mobile-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .mobile-contact-card,
  .mobile-email-card {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    border-radius: 16px;
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.18);
  }
  .mobile-contact-card strong,
  .mobile-email-card strong {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
  }
  .mobile-contact-card em,
  .mobile-email-card em {
    display: block;
    margin-top: 3px;
    color: var(--text-dim);
    font-style: normal;
    font-size: 13px;
    line-height: 1.25;
    word-break: break-word;
  }
  .mobile-contact-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
  }
  .mobile-contact-icon svg { width: 23px; height: 23px; fill: currentColor; stroke: none; }
  .mobile-contact-icon.telegram { background: linear-gradient(180deg,#35B9FF,#178BDA); }
  .mobile-contact-icon.whatsapp { background: linear-gradient(180deg,#45D764,#18A83A); }
  .mobile-contact-icon.email {
    border-radius: 12px;
    background: rgba(59,130,246,.13);
    color: var(--blue-bright);
  }
  .mobile-contact-icon.email svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-email-card {
    padding: 14px;
    margin-bottom: 18px;
  }
  .mobile-email-card > span:nth-child(2) { min-width: 0; flex: 1 1 auto; }
  .mobile-copy-email {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid rgba(59,130,246,.28);
    background: rgba(59,130,246,.12);
    color: var(--blue-bright);
    font-weight: 800;
    font-size: 13px;
  }
  .header .nav .mobile-menu-socials {
    border-top: 1px solid rgba(255,255,255,.10);
    padding: 18px 0 0 !important;
    margin-top: 4px !important;
  }
  .header .nav .mobile-menu-socials::before {
    content: "Follow us";
    display: block;
    width: 100%;
    font-family: var(--font-mono);
    color: var(--blue-bright);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
  }
  .header .nav .mobile-menu-socials { flex-wrap: wrap !important; }
  .header .nav .mobile-menu-socials a {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #C7D3EA !important;
  }
}
.mobile-contact-panel { display: none; }
@media (max-width:600px) {
  .header .nav { padding-top: 82px !important; }
  .header .nav .nav-item > a { min-height: 54px !important; font-size: 14px !important; }
  .header .nav .nav-item > a::before { width: 34px; height: 34px; flex-basis: 34px; margin-right: 12px; border-radius: 10px; background-size: 18px 18px; }
  .header .nav .nav-item:has(.mega):not(.nav-product) > a::after { font-size: 26px; }
  .mobile-contact-grid { grid-template-columns: 1fr; }
  .mobile-contact-card, .mobile-email-card { border-radius: 13px; padding: 11px; }
  .mobile-email-card { align-items: flex-start; flex-wrap: wrap; }
  .mobile-copy-email { width: 100%; margin-left: 55px; }
}



/* ─── Homepage v2.4 Mobile Menu Layout Polish ─── */
@media (max-width:1040px){
  .header .nav{
    padding:86px clamp(18px,4vw,36px) 34px!important;
    gap:0!important;
    background:
      radial-gradient(ellipse 72% 34% at 26% -6%, rgba(59,130,246,.22), transparent 65%),
      radial-gradient(ellipse 60% 38% at 100% 18%, rgba(59,130,246,.11), transparent 70%),
      linear-gradient(135deg,#070B14 0%,#0B1324 48%,#05080F 100%)!important;
  }

  .header .nav .nav-item{
    border-bottom:1px solid rgba(255,255,255,.105)!important;
  }

  .header .nav .nav-item > a{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 22px!important;
    column-gap:14px!important;
    align-items:center!important;
    justify-content:initial!important;
    min-height:64px!important;
    padding:10px 0!important;
    width:100%!important;
    color:#fff!important;
    font-size:18px!important;
    font-weight:800!important;
    line-height:1.1!important;
    text-align:left!important;
  }

  .header .nav .nav-product > a,
  .header .nav .nav-item:not(:has(.mega)) > a{
    grid-template-columns:42px minmax(0,1fr) 22px!important;
    padding:10px 0!important;
    color:#fff!important;
    font-size:18px!important;
    font-weight:800!important;
    text-align:left!important;
  }

  .header .nav .nav-item > a::before{
    grid-column:1!important;
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    margin:0!important;
    border-radius:13px!important;
  }

  .header .nav .nav-item > a::after{
    grid-column:3!important;
    justify-self:end!important;
  }

  .header .nav .nav-product > a::after,
  .header .nav .nav-item:not(:has(.mega)) > a::after{
    content:'›'!important;
    color:var(--blue-bright)!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:300!important;
  }

  .header .nav .nav-item:has(.mega):not(.nav-product) > a::after{
    content:'›'!important;
    color:var(--blue-bright)!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:300!important;
    transform:none!important;
  }

  .header .nav .nav-item.mobile-expanded > a::after{
    transform:rotate(90deg)!important;
  }

  .header .nav .mega-inner,
  .header .nav .markets-menu-inner{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 18px!important;
    padding-left:56px!important;
  }

  .header .nav .markets-links-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 18px!important;
  }

  .header .nav .markets-menu-inner{
    padding-left:56px!important;
  }

  .header .nav .markets-menu-inner .mega-col{
    grid-column:1 / -1!important;
  }

  .header .nav .mega-col a,
  .header .nav .markets-links-grid a{
    padding:9px 0!important;
    font-size:13.5px!important;
    line-height:1.35!important;
    color:rgba(229,236,248,.84)!important;
  }

  .header .nav .mobile-tech .mega-inner{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .header .nav .mobile-tech .mega-col{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 18px!important;
  }

  .header .nav .mobile-tech .mega-col h5{
    grid-column:1 / -1!important;
  }

  .mobile-contact-panel{
    padding:24px 0 10px!important;
    margin-top:8px!important;
  }

  .mobile-contact-title,
  .mobile-follow-title,
  .header .nav .mobile-menu-socials::before{
    font-size:11px!important;
    letter-spacing:.16em!important;
    margin-bottom:12px!important;
  }

  .mobile-contact-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin-bottom:10px!important;
  }

  .mobile-contact-card,
  .mobile-email-card{
    border-radius:14px!important;
    padding:12px!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .mobile-contact-card{
    min-height:70px!important;
  }

  .mobile-contact-icon{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }

  .mobile-contact-icon svg{width:21px!important;height:21px!important;}

  .mobile-contact-card strong,
  .mobile-email-card strong{font-size:13.5px!important;}
  .mobile-contact-card em,
  .mobile-email-card em{font-size:12px!important;}

  .mobile-email-card{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:12px!important;
    margin-bottom:18px!important;
  }

  .mobile-email-card > span:nth-child(2){min-width:0!important;}
  .mobile-email-card em{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

  .mobile-copy-email{
    width:auto!important;
    margin:0!important;
    min-width:112px!important;
    max-width:140px!important;
    min-height:36px!important;
    padding:0 12px!important;
    white-space:nowrap!important;
  }

  .header .nav .mobile-menu-socials{
    display:flex!important;
    gap:10px!important;
    padding-top:18px!important;
  }

  .header .nav .mobile-menu-socials a{
    width:42px!important;
    height:42px!important;
  }
}

@media (max-width:600px){
  .header .nav{padding:78px 18px 30px!important;}
  .header .nav .nav-item > a,
  .header .nav .nav-product > a,
  .header .nav .nav-item:not(:has(.mega)) > a{
    grid-template-columns:36px minmax(0,1fr) 20px!important;
    column-gap:12px!important;
    min-height:58px!important;
    font-size:15px!important;
  }
  .header .nav .nav-item > a::before{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
    background-size:18px 18px!important;
  }
  .header .nav .nav-item:has(.mega):not(.nav-product) > a::after,
  .header .nav .nav-product > a::after,
  .header .nav .nav-item:not(:has(.mega)) > a::after{
    font-size:24px!important;
  }
  .header .nav .mega-inner,
  .header .nav .markets-menu-inner,
  .header .nav .mobile-tech .mega-inner{
    padding-left:48px!important;
  }
  .header .nav .mega-inner,
  .header .nav .markets-links-grid,
  .header .nav .mobile-tech .mega-col{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 12px!important;
  }
  .header .nav .mega-col a,
  .header .nav .markets-links-grid a{
    font-size:12.5px!important;
    padding:8px 0!important;
  }
  .mobile-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .mobile-contact-card{gap:9px!important;padding:10px!important;}
  .mobile-contact-icon{width:34px!important;height:34px!important;flex-basis:34px!important;}
  .mobile-contact-icon svg{width:19px!important;height:19px!important;}
  .mobile-email-card{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:10px!important;
  }
  .mobile-copy-email{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:none!important;
    margin:2px 0 0!important;
  }
}

@media (max-width:380px){
  .mobile-contact-grid{grid-template-columns:1fr!important;}
  .header .nav .mega-inner,
  .header .nav .markets-links-grid,
  .header .nav .mobile-tech .mega-col{
    grid-template-columns:1fr!important;
  }
}



/* ─── Homepage v2.5 Mobile Menu Layout Polish / Only Mobile ─── */
@media (max-width:1040px){
  /* The Telegram/WhatsApp icons in the very top bar are desktop utility links.
     Hide them on mobile so the menu has its own clean contact/social area. */
  .topbar .topbar-chat,
  .topbar .topbar-soc{display:none!important;}
  .topbar-inner{justify-content:flex-end!important;}

  body.mobile-menu-open{overflow:hidden!important;}
  .header .nav.nav-open{
    top:78px!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    padding:20px clamp(17px,4vw,34px) 30px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    background:
      radial-gradient(ellipse 80% 38% at 20% -8%, rgba(59,130,246,.20), transparent 66%),
      radial-gradient(ellipse 60% 38% at 100% 12%, rgba(59,130,246,.12), transparent 68%),
      linear-gradient(145deg,#060A12 0%,#0A1324 52%,#05080F 100%)!important;
  }

  .header .nav .nav-item{
    margin:0!important;
    border-bottom:1px solid rgba(255,255,255,.11)!important;
  }

  .header .nav .nav-item > a,
  .header .nav .nav-product > a,
  .header .nav .nav-item:not(:has(.mega)) > a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:13px!important;
    min-height:58px!important;
    padding:10px 0!important;
    width:100%!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.15!important;
    text-align:left!important;
    border:0!important;
    background:transparent!important;
  }

  .header .nav .nav-item > a::before{
    content:""!important;
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    margin:0!important;
    border-radius:11px!important;
    background-color:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px rgba(0,0,0,.22)!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:18px 18px!important;
  }

  .header .nav .nav-item > a::after,
  .header .nav .nav-product > a::after,
  .header .nav .nav-item:not(:has(.mega)) > a::after,
  .header .nav .nav-item:has(.mega):not(.nav-product) > a::after{
    content:'›'!important;
    display:block!important;
    margin-left:auto!important;
    color:var(--blue-bright)!important;
    font-size:25px!important;
    line-height:1!important;
    font-weight:300!important;
    transform:none!important;
  }

  .header .nav .nav-item.mobile-expanded > a::after{transform:rotate(90deg)!important;}
  .header .nav .nav-item > a .caret{display:none!important;}

  /* Hide desktop mega-menu headings on mobile, except in Technologies where headings are meaningful. */
  .header .nav .mega-col h5{display:none!important;}
  .header .nav .mobile-tech .mega-col h5{
    display:block!important;
    grid-column:1 / -1!important;
    margin:10px 0 6px!important;
    padding:0!important;
    border:0!important;
    color:rgba(112,180,255,.92)!important;
    font-size:10px!important;
    letter-spacing:.13em!important;
  }

  .header .nav .nav-item .mega,
  .header .nav .nav-item .mega.wide,
  .header .nav .nav-item .markets-mega{
    display:none!important;
    position:static!important;
    transform:none!important;
    min-width:0!important;
    width:100%!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0 0 14px 49px!important;
  }

  .header .nav .nav-item.mobile-expanded .mega,
  .header .nav .nav-item.mobile-expanded .mega.wide,
  .header .nav .nav-item.mobile-expanded .markets-mega{display:block!important;}

  .header .nav .mega-inner,
  .header .nav .markets-menu-inner,
  .header .nav .markets-links-grid,
  .header .nav .mobile-tech .mega-col{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 14px!important;
    padding:0!important;
  }

  .header .nav .mega-col{min-width:0!important;}
  .header .nav .markets-menu-inner .mega-col{grid-column:1 / -1!important;}
  .header .nav .mega-col a,
  .header .nav .markets-links-grid a{
    display:block!important;
    margin:0!important;
    padding:7px 0!important;
    border:0!important;
    color:rgba(229,236,248,.84)!important;
    font-size:12.5px!important;
    line-height:1.35!important;
    white-space:normal!important;
  }

  .mobile-menu-cta{display:none!important;}

  .mobile-contact-panel{
    display:block!important;
    margin-top:12px!important;
    padding:20px 0 8px!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
  }
  .mobile-contact-title,
  .header .nav .mobile-menu-socials::before{
    display:block!important;
    width:100%!important;
    color:var(--blue-bright)!important;
    font-family:var(--font-mono)!important;
    text-transform:uppercase!important;
    letter-spacing:.16em!important;
    font-size:11px!important;
    font-weight:800!important;
    margin:0 0 12px!important;
  }
  .mobile-contact-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin:0 0 10px!important;
  }
  .mobile-contact-card,
  .mobile-email-card{
    border:1px solid rgba(255,255,255,.11)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018))!important;
    border-radius:13px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 12px 24px rgba(0,0,0,.18)!important;
  }
  .mobile-contact-card{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:62px!important;
    padding:10px!important;
  }
  .mobile-contact-icon{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
  }
  .mobile-contact-icon svg{width:19px!important;height:19px!important;}
  .mobile-contact-card strong,
  .mobile-email-card strong{font-size:12.5px!important;line-height:1.15!important;}
  .mobile-contact-card em,
  .mobile-email-card em{font-size:11px!important;line-height:1.25!important;color:#AEBBD2!important;}

  .mobile-email-card{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) minmax(92px,112px)!important;
    align-items:center!important;
    gap:10px!important;
    padding:10px!important;
    margin:0 0 18px!important;
    overflow:hidden!important;
  }
  .mobile-email-card em{
    display:block!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .mobile-copy-email{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    min-height:34px!important;
    padding:0 10px!important;
    border-radius:10px!important;
    font-size:11.5px!important;
    white-space:nowrap!important;
  }

  .header .nav .mobile-menu-socials{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    margin:0!important;
    padding:18px 0 0!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
  }
  .header .nav .mobile-menu-socials a{
    width:42px!important;
    height:42px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    color:#C7D3EA!important;
  }
  .header .nav .mobile-menu-socials svg{width:18px!important;height:18px!important;}
}

@media (max-width:430px){
  .topbar-right > a{max-width:210px!important;}
  .header .nav.nav-open{top:78px!important;padding-left:16px!important;padding-right:16px!important;}
  .header .nav .nav-item > a,
  .header .nav .nav-product > a,
  .header .nav .nav-item:not(:has(.mega)) > a{font-size:14px!important;min-height:54px!important;}
  .header .nav .mega-inner,
  .header .nav .markets-menu-inner,
  .header .nav .markets-links-grid,
  .header .nav .mobile-tech .mega-col{gap:0 12px!important;}
  .mobile-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .mobile-email-card{grid-template-columns:34px minmax(0,1fr)!important;}
  .mobile-copy-email{grid-column:1 / -1!important;margin-top:2px!important;}
}

@media (max-width:360px){
  .header .nav .mega-inner,
  .header .nav .markets-links-grid,
  .header .nav .mobile-tech .mega-col,
  .mobile-contact-grid{grid-template-columns:1fr!important;}
}


/* ─── v2.6 FINAL mobile menu corrections ─── */
@media (max-width:1040px){
  /* Remove Telegram/WhatsApp utility icons from the top bar on mobile. */
  .topbar-soc,
  .topbar-chat,
  .topbar .topbar-chat,
  .topbar-right .topbar-chat{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    width:0!important;
    height:0!important;
    overflow:hidden!important;
  }
  .topbar-right{gap:10px!important;margin-left:auto!important;}
  .topbar-right > a{max-width:260px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}

  .header .nav.nav-open{
    top:78px!important;
    padding:20px 18px 34px!important;
    background:
      radial-gradient(ellipse 75% 38% at 0% 0%,rgba(59,130,246,.18),transparent 64%),
      radial-gradient(ellipse 62% 38% at 100% 8%,rgba(112,180,255,.10),transparent 68%),
      linear-gradient(145deg,#050910 0%,#0A1220 52%,#05080F 100%)!important;
  }

  .header .nav .nav-item{
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    margin:0!important;
  }

  /* One shared row system for Services / Platforms / Markets / Technologies / Products / Blog. */
  .header .nav > .nav-item > a,
  .header .nav > .nav-item.nav-product > a,
  .header .nav > .nav-item.nav-blog > a,
  .header .nav > .nav-item.nav-direct > a{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 24px!important;
    align-items:center!important;
    column-gap:12px!important;
    width:100%!important;
    min-height:60px!important;
    padding:10px 0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.1!important;
    text-align:left!important;
    justify-content:initial!important;
    letter-spacing:-.01em!important;
  }

  .header .nav > .nav-item > a::before,
  .header .nav > .nav-item.nav-product > a::before,
  .header .nav > .nav-item.nav-blog > a::before,
  .header .nav > .nav-item.nav-direct > a::before{
    content:""!important;
    grid-column:1!important;
    width:38px!important;
    height:38px!important;
    flex:none!important;
    border-radius:11px!important;
    background-color:rgba(255,255,255,.05)!important;
    border:1px solid rgba(112,180,255,.20)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 22px rgba(0,0,0,.22)!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:18px 18px!important;
  }

  .header .nav > .nav-item > a::after,
  .header .nav > .nav-item.nav-product > a::after,
  .header .nav > .nav-item.nav-blog > a::after,
  .header .nav > .nav-item.nav-direct > a::after{
    content:'›'!important;
    grid-column:3!important;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
    color:var(--blue-bright)!important;
    font-size:27px!important;
    font-weight:300!important;
    line-height:1!important;
    transform:none!important;
  }
  .header .nav > .nav-item.mobile-expanded > a::after{transform:rotate(90deg)!important;}
  .header .nav > .nav-item > a .caret{display:none!important;}

  /* Products and Blog are direct links in mobile menu. */
  .header .nav > .nav-product > .mega{display:none!important;}
  .header .nav > .nav-product.mobile-expanded > .mega{display:none!important;}

  /* Icons for direct rows. */
  .header .nav > .nav-product > a::before,
  .header .nav > .nav-direct.nav-product > a::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2370B4FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z'/%3E%3Cpath d='M12 12 4 7.5m8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E")!important;
  }
  .header .nav > .nav-blog > a::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2370B4FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7V3Z'/%3E%3Cpath d='M14 3v6h5M10 13h6M10 17h6'/%3E%3C/svg%3E")!important;
  }

  /* Expanded submenu layout: compact 2 columns. */
  .header .nav .nav-item .mega,
  .header .nav .nav-item .mega.wide,
  .header .nav .nav-item .markets-mega{
    padding:0 0 16px 52px!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .header .nav .mega-inner,
  .header .nav .markets-menu-inner,
  .header .nav .markets-links-grid,
  .header .nav .mobile-tech .mega-col{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:2px 14px!important;
  }
  .header .nav .mega-col,
  .header .nav .markets-menu-inner .mega-col{
    display:contents!important;
    min-width:0!important;
  }
  .header .nav .mega-col h5{display:none!important;}
  .header .nav .mobile-tech .mega-col h5{
    display:block!important;
    grid-column:1 / -1!important;
    margin:9px 0 5px!important;
    color:rgba(112,180,255,.95)!important;
    font-size:10px!important;
    letter-spacing:.13em!important;
  }
  .header .nav .mega-col a,
  .header .nav .markets-links-grid a{
    display:block!important;
    padding:7px 0!important;
    margin:0!important;
    color:rgba(229,236,248,.86)!important;
    font-size:12.5px!important;
    line-height:1.35!important;
    white-space:normal!important;
    border:0!important;
    background:transparent!important;
  }

  /* Contact block. */
  .mobile-contact-panel{
    display:block!important;
    margin-top:10px!important;
    padding:20px 0 0!important;
    border-top:1px solid rgba(255,255,255,.13)!important;
  }
  .mobile-contact-title,
  .mobile-follow-title{
    display:block!important;
    width:100%!important;
    margin:0 0 12px!important;
    color:var(--blue-bright)!important;
    font-family:var(--font-mono)!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.16em!important;
    line-height:1!important;
    text-transform:uppercase!important;
  }
  .mobile-contact-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin:0 0 10px!important;
  }
  .mobile-contact-card,
  .mobile-email-card{
    border:1px solid rgba(255,255,255,.12)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
    border-radius:13px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 24px rgba(0,0,0,.18)!important;
  }
  .mobile-contact-card{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:62px!important;
    padding:10px!important;
  }
  .mobile-contact-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:11px!important;}
  .mobile-contact-icon svg{width:19px!important;height:19px!important;}
  .mobile-contact-card strong,
  .mobile-email-card strong{display:block!important;font-size:12.5px!important;line-height:1.15!important;color:#fff!important;}
  .mobile-contact-card em,
  .mobile-email-card em{display:block!important;font-size:11px!important;line-height:1.25!important;color:#AEBBD2!important;font-style:normal!important;}
  .mobile-email-card{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 104px!important;
    align-items:center!important;
    gap:10px!important;
    padding:10px!important;
    margin:0 0 20px!important;
  }
  .mobile-email-card em{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .mobile-copy-email{
    width:100%!important;
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:10px!important;
    font-size:11.5px!important;
  }

  /* Follow us under Email. */
  .header .nav .mobile-menu-socials{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    margin:0!important;
    padding:18px 0 0!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
  }
  .header .nav .mobile-menu-socials::before{display:none!important;content:none!important;}
  .header .nav .mobile-menu-socials .mobile-follow-title{flex:0 0 100%!important;margin-bottom:2px!important;}
  .header .nav .mobile-menu-socials a{
    width:42px!important;
    height:42px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.05)!important;
    border:1px solid rgba(255,255,255,.13)!important;
    color:#C7D3EA!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px rgba(0,0,0,.16)!important;
  }
  .header .nav .mobile-menu-socials svg{width:18px!important;height:18px!important;}
}

@media (max-width:430px){
  .header .nav.nav-open{padding-left:17px!important;padding-right:17px!important;}
  .header .nav .mega-inner,
  .header .nav .markets-menu-inner,
  .header .nav .markets-links-grid,
  .header .nav .mobile-tech .mega-col{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px 12px!important;}
  .mobile-email-card{grid-template-columns:34px minmax(0,1fr)!important;}
  .mobile-copy-email{grid-column:1 / -1!important;margin-top:2px!important;}
}

@media (max-width:340px){
  .header .nav .mega-inner,
  .header .nav .markets-menu-inner,
  .header .nav .markets-links-grid,
  .header .nav .mobile-tech .mega-col,
  .mobile-contact-grid{grid-template-columns:1fr!important;}
}



/* ─── v2.7 HARD FIX: mobile topbar, menu row alignment, social icons ─── */
@media (max-width:1040px){
  /* Remove Telegram / WhatsApp / social utility icons from the TOP bar only. */
  body .topbar .topbar-soc,
  body .topbar .topbar-chat,
  body .topbar .topbar-chat a,
  body .topbar a[aria-label="Telegram"],
  body .topbar a[aria-label="WhatsApp"]{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    width:0!important;
    height:0!important;
    min-width:0!important;
    max-width:0!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  body .topbar .topbar-inner{justify-content:flex-end!important;}
  body .topbar .topbar-right{width:100%!important;display:flex!important;justify-content:flex-end!important;gap:12px!important;}
  body .topbar .topbar-right > a{margin-right:auto!important;max-width:240px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}

  /* Unified fullscreen mobile menu canvas. */
  body .header .nav.nav-open{
    top:78px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:none!important;
    padding:20px 18px 32px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  /* Exact same row layout for Services / Platforms / Markets / Technologies / Products / Blog. */
  body .header .nav.nav-open > .nav-item{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
  }
  body .header .nav.nav-open > .nav-item > a,
  body .header .nav.nav-open > .nav-item.nav-product > a,
  body .header .nav.nav-open > .nav-item.nav-blog > a,
  body .header .nav.nav-open > .nav-item.nav-direct > a{
    display:grid!important;
    grid-template-columns:42px 1fr 24px!important;
    align-items:center!important;
    gap:12px!important;
    width:100%!important;
    min-height:58px!important;
    padding:9px 0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    text-align:left!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:-.01em!important;
    justify-content:stretch!important;
  }
  body .header .nav.nav-open > .nav-item > a .mobile-nav-label,
  body .header .nav.nav-open > .nav-item.nav-product > a .mobile-nav-label,
  body .header .nav.nav-open > .nav-item.nav-blog > a .mobile-nav-label,
  body .header .nav.nav-open > .nav-item.nav-direct > a .mobile-nav-label{
    grid-column:2!important;
    display:block!important;
    min-width:0!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1!important;
    text-align:left!important;
    justify-self:start!important;
  }
  body .header .nav.nav-open > .nav-item > a::before{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    width:38px!important;
    height:38px!important;
  }
  body .header .nav.nav-open > .nav-item > a::after{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    width:24px!important;
    text-align:right!important;
    color:var(--blue-bright)!important;
    font-size:25px!important;
    font-weight:400!important;
    line-height:1!important;
  }
  body .header .nav.nav-open > .nav-item > a .caret{display:none!important;}

  /* Compact two-column submenu links. */
  body .header .nav.nav-open .nav-item .mega,
  body .header .nav.nav-open .nav-item .mega.wide,
  body .header .nav.nav-open .nav-item .markets-mega{
    padding:0 0 14px 54px!important;
  }
  body .header .nav.nav-open .mega-inner,
  body .header .nav.nav-open .markets-menu-inner,
  body .header .nav.nav-open .markets-links-grid,
  body .header .nav.nav-open .mobile-tech .mega-col{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:14px!important;
    row-gap:0!important;
  }
  body .header .nav.nav-open .mega-col a,
  body .header .nav.nav-open .markets-links-grid a{
    font-size:12.5px!important;
    line-height:1.3!important;
    padding:7px 0!important;
  }

  /* Contact block: compact and clean. */
  body .header .nav.nav-open .mobile-contact-panel{
    display:block!important;
    margin:18px 0 0!important;
    padding:18px 0 0!important;
    border-top:1px solid rgba(255,255,255,.14)!important;
  }
  body .header .nav.nav-open .mobile-contact-title,
  body .header .nav.nav-open .mobile-follow-title{
    display:block!important;
    color:var(--blue-bright)!important;
    font-family:var(--font-mono)!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.16em!important;
    text-transform:uppercase!important;
    margin:0 0 12px!important;
    flex:0 0 100%!important;
  }
  body .header .nav.nav-open .mobile-contact-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin:0 0 10px!important;
  }
  body .header .nav.nav-open .mobile-contact-card{
    min-height:54px!important;
    padding:9px 10px!important;
    gap:9px!important;
  }
  body .header .nav.nav-open .mobile-email-card{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 94px!important;
    gap:9px!important;
    align-items:center!important;
    padding:10px!important;
    margin:0 0 16px!important;
  }
  body .header .nav.nav-open .mobile-copy-email{
    grid-column:auto!important;
    height:32px!important;
    min-height:32px!important;
    padding:0 9px!important;
    white-space:nowrap!important;
  }

  /* FOLLOW US must be visible directly under Email. */
  body .header .nav.nav-open .mobile-menu-socials{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    margin:0!important;
    padding:16px 0 0!important;
    border-top:1px solid rgba(255,255,255,.14)!important;
  }
  body .header .nav.nav-open .mobile-menu-socials .mobile-follow-title{
    display:block!important;
    width:100%!important;
    margin:0 0 2px!important;
  }
  body .header .nav.nav-open .mobile-menu-socials a{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:12px!important;
    color:#D4DEF2!important;
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px rgba(0,0,0,.18)!important;
  }
  body .header .nav.nav-open .mobile-menu-socials svg{
    width:18px!important;
    height:18px!important;
  }
}
@media (max-width:430px){
  body .header .nav.nav-open{padding-left:17px!important;padding-right:17px!important;}
  body .header .nav.nav-open .mobile-email-card{grid-template-columns:34px minmax(0,1fr)!important;}
  body .header .nav.nav-open .mobile-copy-email{grid-column:1 / -1!important;margin-top:2px!important;}
}


/* ─── v1.10.2 requested fixes: exact topbar + mobile submenu corrections ─── */
@media (min-width:1041px){
  .topbar .topbar-chat{display:flex!important;visibility:visible!important;opacity:1!important;width:auto!important;height:auto!important;overflow:visible!important;}
  .topbar .topbar-chat a{display:grid!important;visibility:visible!important;opacity:1!important;width:24px!important;height:24px!important;min-width:24px!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important;pointer-events:auto!important;}
}

@media (max-width:1040px){
  /* Keep Telegram/WhatsApp near email. Hide only the left social group on mobile. */
  body .topbar .topbar-soc{display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;overflow:hidden!important;}
  body .topbar .topbar-chat{display:flex!important;visibility:visible!important;opacity:1!important;width:auto!important;height:auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important;pointer-events:auto!important;gap:8px!important;}
  body .topbar .topbar-chat a,
  body .topbar .topbar-chat a[aria-label="Telegram"],
  body .topbar .topbar-chat a[aria-label="WhatsApp"]{display:grid!important;place-items:center!important;visibility:visible!important;opacity:1!important;width:24px!important;height:24px!important;min-width:24px!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important;pointer-events:auto!important;color:var(--text-dim)!important;}
  body .topbar .topbar-chat svg{display:block!important;width:15px!important;height:15px!important;}
  body .topbar .topbar-inner{justify-content:space-between!important;}
  body .topbar .topbar-right{width:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;margin-left:auto!important;}
  body .topbar .topbar-right > a{margin-right:0!important;max-width:230px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}

  /* Markets submenu: one clean two-column grid without nested offset glitches. */
  body .header .nav.nav-open .markets-mega{padding:0 0 14px 54px!important;margin:0!important;}
  body .header .nav.nav-open .markets-menu-inner{display:block!important;grid-template-columns:none!important;gap:0!important;padding:0!important;margin:0!important;}
  body .header .nav.nav-open .markets-menu-inner .mega-col{display:block!important;grid-column:auto!important;padding:0!important;margin:0!important;}
  body .header .nav.nav-open .markets-links-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px 14px!important;padding:0!important;margin:0!important;}
  body .header .nav.nav-open .markets-links-grid a{display:block!important;padding:7px 0!important;margin:0!important;text-align:left!important;}

  /* Technologies submenu: same left alignment as other submenu groups. */
  body .header .nav.nav-open .mobile-tech .mega{padding:0 0 14px 54px!important;margin:0!important;}
  body .header .nav.nav-open .mobile-tech .mega-inner{display:block!important;grid-template-columns:none!important;gap:0!important;padding:0!important;margin:0!important;}
  body .header .nav.nav-open .mobile-tech .mega-col{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px 14px!important;padding:0!important;margin:0 0 6px!important;}
  body .header .nav.nav-open .mobile-tech .mega-col h5{grid-column:1 / -1!important;margin:8px 0 4px!important;padding:0!important;}
  body .header .nav.nav-open .mobile-tech .mega-col a{display:block!important;padding:7px 0!important;margin:0!important;text-align:left!important;}
}

@media (max-width:430px){
  body .topbar .topbar-right > a{max-width:190px!important;}
  body .header .nav.nav-open .markets-links-grid,
  body .header .nav.nav-open .mobile-tech .mega-col{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px 12px!important;}
}

@media (max-width:340px){
  body .header .nav.nav-open .markets-links-grid,
  body .header .nav.nav-open .mobile-tech .mega-col{grid-template-columns:1fr!important;}
}


/* ══════════════════════════════════════════════════════════════════
   Stage 1 additions — not part of the mockup file.
   ══════════════════════════════════════════════════════════════════ */

/* Cards built from a "ready-made code" field are made clickable through a
   data-href attribute (see new-design.js): the pasted code may already contain
   its own links, so it must not be wrapped in an <a>. */
[data-href] { cursor: pointer; }

/* ─── Contact Form 7 "MAKE A REQUEST" in the new design ───
   The form template is edited in the CF7 admin; these rules restyle its real
   output (.as-form_* wrappers) to match the mockup's .quote-card / .fg fields.
   Applies to the hero form and to the same form inside the header modal. */
.nd-form .wpcf7 { margin: 0; }
/* style.css:6129 adds margin-top:20px to each as-form_ field on desktop; the
   mockup uses a single 11px bottom gap, so clear the top margin too. */
.nd-form .as-form-makereq > div { margin-top: 0; margin-bottom: 11px; }

.nd-form input[type="text"],
.nd-form input[type="email"],
.nd-form input[type="tel"],
.nd-form select,
.nd-form textarea {
  width: 100%; padding: 11px 13px;
  background: #0D1528;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--r-sm); color: var(--text);
  font-family: var(--font-sans); font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none;
}
.nd-form input::placeholder,
.nd-form textarea::placeholder { color: var(--text-dim); }
.nd-form select { color: var(--text-dim); }
.nd-form select option { background: var(--surface); color: var(--text); }
.nd-form input:focus,
.nd-form select:focus,
.nd-form textarea:focus {
  border-color: rgba(79, 142, 247, 0.80);
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.20);
}
/* CF7 renders the textarea with rows="10", making it tall; the mockup is compact,
   so pin the height (still user-resizable) instead of relying on min-height alone. */
.nd-form textarea { resize: vertical; min-height: 76px; height: 76px; margin-bottom: 18px; }

/* The consent checkbox carries class:uk-checkbox, which the legacy CSS repaints
   as a custom #00359c control. Restore a native checkbox with the mockup's blue. */
.nd-form input[type="checkbox"] {
  -webkit-appearance: checkbox !important; appearance: auto !important; 
  accent-color: var(--blue) !important;
  width: 14px !important; height: 14px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important; background-image: none !important;
  border: none !important; overflow: visible !important;
  vertical-align: middle;
}

.nd-form input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border: 1px solid #8fa4c6 !important;
    border-radius: 2px;
    background: transparent;
}

.nd-form input[type="checkbox"]:checked {
    background: var(--blue, #3b82f6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3 3 7-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/10px 8px no-repeat !important;
    border-color: var(--blue, #3b82f6) !important;
}


/* Budget label — the mockup shows this as the select's own dim caption */
.nd-form .as-form_select label {
  display: block;
  color: var(--text-dim) !important;
  font-family: var(--font-mono);
  font-size: 11.5px !important;
  padding-left: 0 !important;
  margin-bottom: 5px;
}

/* File attach: the pill is drawn on the plugin's own browse link further below —
   .as-form_attach is only its container. */

/* Consent / subscribe checkbox — mockup .quote-consent */
.nd-form .as-form_privacy,
.nd-form .form-privacy {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px; font-size: 11px; color: var(--text-dim); line-height: 1.55;
}
.nd-form .as-form_privacy input[type="checkbox"] {
  width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; accent-color: var(--blue);
}
.nd-form .as-form_privacy a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 2px; }
.nd-form .as-form_privacy .wpcf7-list-item { margin: 0; }

/* Submit — mockup .btn.btn-primary.quote-submit */
.nd-form input[type="submit"],
.nd-form .request-form__btn {
  width: 100%; justify-content: center; text-align: center;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border: none; border-radius: 10px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #4F9BFF, #2F75E8);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(112, 180, 255, 0.32),
    0 12px 28px -10px rgba(59, 130, 246, 0.55);
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.nd-form input[type="submit"]:hover,
.nd-form .request-form__btn:hover {
  background: linear-gradient(180deg, #70B4FF, #3B82F6);
  transform: translateY(-1px);
}

/* CF7 validation / response messages */
.nd-form .wpcf7-not-valid-tip { color: var(--red); font-size: 11.5px; margin-top: 4px; }
.nd-form .wpcf7-response-output {
  margin: 12px 0 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12px; color: var(--text-2);
}
.nd-form .wpcf7-spinner { margin: 8px auto 0; display: block; }

/* The request form in the header modal reuses the quote card look.
   style.css gives .request-form__header a purple background and .request-form__body
   a white one; the two-class selectors below outrank those and clear them. */
.modal__request-form {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: visible;
  padding: 26px;
  max-width: 460px;
  color: var(--text);
}
.modal__request-form .request-form__header {
  background: transparent; text-align: left; padding: 0 0 4px;
}
.modal__request-form .request-form__title {
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em; text-align: left;
  padding: 0; margin-bottom: 4px; color: var(--text); text-transform: none;
}
.modal__request-form .request-form__body {
  background: transparent; padding: 0;
}

/* Product tabs/carousel toggle panels and cards with the hidden attribute,
   which must win over the grid/flex display rules above. */
.products-grid[hidden],
.prod-card[hidden] { display: none !important; }

/* ─── Legacy .btn cleanup ───
   css/style.css:4945 also defines .btn — green glow, green border, green
   background and UPPERCASE. The mockup's .btn never declares those properties,
   so they leaked into the redesigned pages (green halo on every button).
   Reset them here, then re-assert each modifier with .btn.btn-* so the result
   does not depend on stylesheet order (a caching plugin may reorder files). */
.btn {
  background: none;
  border: none;
  box-shadow: none;
  text-transform: none;
  color: var(--text);
}
.btn:hover { box-shadow: none; }

.btn.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #4F9BFF, #2F75E8);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(112, 180, 255, 0.32),
    0 12px 28px -10px rgba(59, 130, 246, 0.55);
}
.btn.btn-primary:hover {
  background: linear-gradient(180deg, #70B4FF, #3B82F6);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(112, 180, 255, 0.38),
    0 14px 32px -10px rgba(59, 130, 246, 0.6);
}

.btn.btn-ghost {
  color: var(--text);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: none;
}
.btn.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(112, 180, 255, 0.35);
  box-shadow: none;
}

.btn.btn-white {
  background: #fff;
  color: #0B1120;
  font-weight: 600;
  border: none;
  box-shadow: none;
}
.btn.btn-white:hover { background: #EAF1FF; transform: translateY(-1px); }

/* The CF7 submit carries the legacy .btn class too (class:btn in the form template) */
.nd-form input[type="submit"].btn,
.nd-form .request-form__btn { text-transform: none; border: none; }

/* ─── Legacy paragraph spacing cleanup ───
   css/style.css:4538 sets `p { margin-bottom: 20px }`. Everywhere the mockup
   styles paragraphs by class (.hero-sub, .section-head p, .cta-band p, footer…)
   that already wins on specificity, so the only place the legacy margin actually
   leaks is inside the CF7 form, which wraps every control in its own <p>.
   Keep the reset scoped to the form — a wider reset broke the centred layouts.
   .fm-info p is the one footer paragraph the mockup leaves marginless (it relies
   on the global reset), so the legacy 20px leaks there too — reset it as well. */
.nd-form p,
.footer-meta-grid .fm-info p { margin: 0; }

/* style.css .footer sets font-weight:600 and a fixed line-height:17px; the mockup
   footer inherits body's 400 / 1.5, so its text is lighter and tighter. Both leak
   into every footer child (bold, stretched columns) — reset them at .footer. */
.footer { font-weight: 400; line-height: 1.5; }
/* style.css:4565 .footer p { padding-top:15px } spaces out the meta lines. */
.footer p { padding-top: 0; }

/* Blocks built from pasted mockup code (spotlight slides, card-code grids) assume
   `* { margin:0 }`, but legacy `p { margin-bottom:20px }` (a type selector) beats
   it and inflates their height. Reset margins here — these blocks are left-aligned
   and use no auto-centering, so unlike .cta-band / .section-head this is safe. */
/* `.services-grid` is not in this list: block 3 ships its own reset inside the
   ACF field (see the Services note above). */
.announce-slide :is(p, ul, ol, li, h1, h2, h3, h4, h5),
.tech-grid :is(p, ul, ol, li, h3, h4),
.platforms-list :is(p, ul, ol, li, h3, h4),
.markets-grid :is(p, ul, ol, li, h3, h4),
.why-grid :is(p, ul, ol, li, h3, h4),
.clients-grid :is(p, ul, ol, li, h3, h4),
.reviews-grid :is(p, ul, ol, li, h3, h4) { margin: 0; }

/* ─── Attach files (Drag & Drop Upload plugin) ───
   The plugin hides the real <input type="file"> and builds its own dropzone:
   .codedropz-upload-handler > .codedropz-upload-container > .codedropz-upload-inner
   > h3 + .codedropz-btn-wrap > a.cd-upload-btn.
   The mockup has no drop area — just a compact "Attach files" pill, so the dashed
   box and the drag-and-drop caption are collapsed and the browse link becomes the pill. */
.nd-form .codedropz-upload-handler {
  border: none;
  border-radius: 0;
  margin: 0;
}
.nd-form .codedropz-upload-container { padding: 0; }
.nd-form .codedropz-upload-inner { text-align: left; }
.nd-form .codedropz-upload-inner h3,
.nd-form .codedropz-upload-inner > span { display: none; } /* "Drag & Drop Files Here" / "or" */
.nd-form .codedropz-btn-wrap { display: inline-block; }

/* style.css:6402 styles .cd-upload-btn as a 150px blue-bordered block with
   !important on every line, so this pill needs !important too (and higher
   specificity) to win — otherwise the old blue button shows through. */
.nd-form a.cd-upload-btn {
  display: inline-flex !important; align-items: center; gap: 7px;
  width: auto !important;
  font-family: var(--font-mono); font-size: 12px !important; font-weight: 400 !important;
  color: var(--text-dim) !important; text-align: left !important;
  background: transparent !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important;
  line-height: 1.4 !important; padding: 8px 13px !important;
  transition: all 0.15s ease; cursor: pointer;
}
.nd-form a.cd-upload-btn:hover { border-color: var(--border-strong) !important; color: var(--text-2) !important; }
.nd-form a.cd-upload-btn::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--nd-clip) center / contain no-repeat;
          mask: var(--nd-clip) center / contain no-repeat;
}
:root {
  --nd-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
}

/* Uploaded file rows sit under the pill */
.nd-form .dnd-upload-status { color: var(--text-dim); font-size: 12px; }
.nd-form .dnd-upload-status .dnd-upload-details .name { color: var(--text-2); }
.nd-form .dnd-upload-status .dnd-upload-details .name em { color: var(--text-dim); }

/* .quote-actions and .quote-chat are already styled by the mockup CSS above.
   CF7's autop wraps the two chat links in a <p> and puts a <br> between them,
   which broke the single-row layout. display:contents lifts the links out of
   that <p> so they become direct flex items again; the <br> is hidden; the
   attach pill is pushed left, so both icons sit to the right on one line. */
.nd-form .quote-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.nd-form .quote-actions br { display: none; }
.nd-form .quote-actions p { margin: 0; display: contents; }
.nd-form .quote-actions .as-form_attach { flex: 0 0 auto; margin-right: auto;     margin-top: 0px;}
.nd-form .quote-actions .quote-chat { flex: 0 0 auto; }

/* Consent line under the submit button */
.nd-form .quote-consent { margin-top: -17px !important;     margin-bottom: 0px ! IMPORTANT;}
.nd-form .quote-consent .wpcf7-list-item { margin: 0; }
.nd-form .quote-consent label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.nd-form .quote-consent .wpcf7-list-item-label,
.nd-form .quote-consent { font-size: 11px; color: var(--text-dim); line-height: 1.55; }
.nd-form .quote-consent a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 2px; }
.nd-form .quote-consent .wpcf7-list-item-label {    margin-top: -3px;}

/* ─── Request-a-quote modal overlay (vanilla, see new-design.js) ─── */
.nd-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
  background: rgba(3, 6, 12, 0.72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.nd-modal-overlay.open { display: flex; }
.nd-modal-overlay .modal__request-form { margin: auto; width: 100%; max-width: 460px; }
.nd-modal-close {
  position: fixed; top: 18px; right: 22px;
  width: 40px; height: 40px; font-size: 26px; line-height: 1;
  color: var(--text-dim); background: transparent; border: none; cursor: pointer;
  transition: color 0.15s ease;
}
.nd-modal-close:hover { color: var(--text); }

/* ─── Uploaded-file rows (Drag & Drop Upload plugin), not in the mockup ───
   The plugin draws the file icon and the remove cross as SVGs with a hardcoded
   colour (#5C5B5B / black), so they are recoloured via mask + background-color. */

/* File icon — 1.5× smaller, blue */
.nd-form .dnd-upload-status .dnd-upload-image {
  width: 27px !important; height: 27px !important;
  border-color: var(--blue) !important;
}
.nd-form .dnd-upload-status .dnd-upload-image span.file {
  width: 11px;
  background: var(--blue) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='23' viewBox='0 0 18 23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.569 0.659576H0.5V23H18V6.09053L12.569 0.659576ZM12.7872 1.93075L16.7288 5.87234H12.7872V1.93075ZM1.24468 22.2553V1.40426H12.0426V6.61702H17.2553V22.2553H1.24468Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg width='18' height='23' viewBox='0 0 18 23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.569 0.659576H0.5V23H18V6.09053L12.569 0.659576ZM12.7872 1.93075L16.7288 5.87234H12.7872V1.93075ZM1.24468 22.2553V1.40426H12.0426V6.61702H17.2553V22.2553H1.24468Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ─── Uploaded files must not push the Telegram/WhatsApp icons down ───
   The plugin inserts every .dnd-upload-status row INSIDE .codedropz-upload-wrapper,
   right after .codedropz-upload-handler — i.e. inside .as-form_attach, which is a
   flex item of .quote-actions. So each added file makes that item taller, and with
   the row's align-items:center the two chat icons drifted down to the middle.

   Fix: align the row to the top and give the pill's handler the same 39px height as
   the icons, so with no files the row looks exactly as before. The attach item also
   grows to the free width, so long file names stay in their own column and never
   reach the icons. align-items must win over `align-items:center!important`
   declared for .quote-actions earlier in this file (v1.7 / v1.8 blocks). */
.nd-form .quote-actions { align-items: flex-start !important; }
.nd-form .quote-actions .as-form_attach {
  flex: 1 1 auto !important;
  min-width: 0 !important;      /* long file names shrink instead of pushing the row */
  margin-right: 0 !important;   /* the item itself now fills the gap */
}
.nd-form .quote-actions .codedropz-upload-handler {
  display: flex;
  align-items: center;
  min-height: 39px;             /* = .quote-chat height, keeps the pill on the icons' line */
}
/* style.css leaks padding:6px 0 into every CF7 field wrapper. It was invisible
   while the row was centred; with top alignment it would drop the pill below the
   icons, so it is cleared here (only inside this row). */
.nd-form .quote-actions .wpcf7-form-control-wrap {
  display: block;
  padding: 0 !important;
}
.nd-form .quote-actions .codedropz-upload-handler + .dnd-upload-status { margin-top: 6px; }

/* Progress bar — fill in the design green */
.nd-form .dnd-upload-status .dnd-upload-details .dnd-progress-bar { background: rgba(255,255,255,0.10); height: 8px; }
.nd-form .dnd-upload-status .dnd-upload-details .dnd-progress-bar span { background: var(--green) !important; color: #0d1528;     font-size: 9px;     line-height: 9px;     font-weight: 600;     padding: 0px 5px;}

/* Remove cross — visible (text-dim) instead of black */
.nd-form .dnd-upload-status .dnd-upload-details .remove-file span:after {
  background-image: none !important;
  background-color: var(--text-dim) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 0C7.83499 0 0 7.83499 0 17.5C0 27.165 7.83499 35 17.5 35C27.165 35 35 27.165 35 17.5C34.9888 7.83965 27.1604 0.0112198 17.5 0ZM17.5 33.871C8.45857 33.871 1.12903 26.5414 1.12903 17.5C1.12903 8.45857 8.45857 1.12903 17.5 1.12903C26.5414 1.12903 33.871 8.45857 33.871 17.5C33.861 26.5373 26.5373 33.861 17.5 33.871Z'/%3E%3Cpath d='M25.4834 9.51661C25.2629 9.29624 24.9056 9.29624 24.6852 9.51661L17.5 16.7018L10.3148 9.51661C10.0983 9.29236 9.74087 9.28615 9.51661 9.50271C9.29236 9.71927 9.28615 10.0767 9.50271 10.3009L16.7018 17.5L9.51661 24.6852C9.29236 24.9018 9.28615 25.2591 9.50278 25.4834C9.71941 25.7076 10.0768 25.7139 10.301 25.4972L17.5 18.2982L24.6852 25.4834C24.9094 25.7 25.2668 25.6938 25.4834 25.4696C25.6947 25.2508 25.6947 24.9039 25.4834 24.6852L18.2982 17.5L25.4834 10.3148C25.7038 10.0944 25.7038 9.73705 25.4834 9.51661Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 0C7.83499 0 0 7.83499 0 17.5C0 27.165 7.83499 35 17.5 35C27.165 35 35 27.165 35 17.5C34.9888 7.83965 27.1604 0.0112198 17.5 0ZM17.5 33.871C8.45857 33.871 1.12903 26.5414 1.12903 17.5C1.12903 8.45857 8.45857 1.12903 17.5 1.12903C26.5414 1.12903 33.871 8.45857 33.871 17.5C33.861 26.5373 26.5373 33.861 17.5 33.871Z'/%3E%3Cpath d='M25.4834 9.51661C25.2629 9.29624 24.9056 9.29624 24.6852 9.51661L17.5 16.7018L10.3148 9.51661C10.0983 9.29236 9.74087 9.28615 9.51661 9.50271C9.29236 9.71927 9.28615 10.0767 9.50271 10.3009L16.7018 17.5L9.51661 24.6852C9.29236 24.9018 9.28615 25.2591 9.50278 25.4834C9.71941 25.7076 10.0768 25.7139 10.301 25.4972L17.5 18.2982L24.6852 25.4834C24.9094 25.7 25.2668 25.6938 25.4834 25.4696C25.6947 25.2508 25.6947 24.9039 25.4834 24.6852L18.2982 17.5L25.4834 10.3148C25.7038 10.0944 25.7038 9.73705 25.4834 9.51661Z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ─── v1.11 mobile menu: flush under the header + real scrolling on iOS ───
   Two problems, both from the panel's geometry:

   1) Gap under the header. Every earlier block pinned the panel to a magic
      `top:78px` (see the v1.7 / v1.8 / v2.x blocks above). The real edge is not
      fixed: .topbar is a separate element OUTSIDE <header>, and .header is
      sticky — its bottom is 104px at the top of the page and 66px once the
      topbar has scrolled away. new-design.js now measures it into
      --nd-header-bottom, and the panel is pinned to that.

   2) The panel could not be scrolled — dragging only rubber-banded and snapped
      back. `bottom:0` on iOS resolves against the LARGE viewport, so the last
      rows ("Follow us") sat under the browser toolbar and the panel itself never
      became a scroll container. A fixed height in dvh tracks the shrinking
      toolbar, so the panel gets a real overflow and scrolls.
      The children also need flex:0 0 auto — inside a height-constrained column
      flexbox would otherwise squeeze them to fit instead of overflowing. */
@media (max-width:1040px){
  /* .header carries backdrop-filter; where a browser supports it that makes the
     header a containing block for its position:fixed children, and the panel
     would be laid out against the 66px header instead of the viewport.
     Switched off only while the menu is open. */
  body.mobile-menu-open .header{
    -webkit-backdrop-filter:none!important;
            backdrop-filter:none!important;
  }

  body .header .nav.nav-open{
    top:var(--nd-header-bottom,104px)!important;
    bottom:auto!important;
    height:calc(100vh - var(--nd-header-bottom,104px))!important;
    height:calc(100dvh - var(--nd-header-bottom,104px))!important;
    max-height:none!important;
    padding-top:6px!important;                                  /* было 20px — это и был отступ */
    padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  body .header .nav.nav-open > *{ flex:0 0 auto!important; }

  /* The close button is position:fixed while the menu is open (see the
     .nav-toggle[aria-expanded="true"] blocks above, top:22px). That 22px used to
     be measured from .header, because backdrop-filter made the header a
     containing block — switching the filter off above re-based it on the
     viewport and the button climbed onto the topbar. Re-center it in the header
     row using the measured geometry: 44px button inside a --nd-header-h band
     whose bottom edge is --nd-header-bottom. */
  body.mobile-menu-open .header .nav-toggle[aria-expanded="true"]{
    top:calc(var(--nd-header-bottom,104px) - (var(--nd-header-h,66px) + 0px) / 2)!important;
  }
}
.spotlight-title { font-size: clamp(18px, 1.4vw, 22px);
    letter-spacing: -0.01em;     font-weight: 800;
    line-height: 1.1;
    text-wrap: balance;}

/* ══════════════════════════════════════════════════════════════════════════
   Этап 5 (26.09.2026): блок ниже дописан из макета 10-contact.html.
   Весь заскоплен на .contact-page. При следующем обновлении файла из макетов
   сливать, а не перезаписывать, иначе блок потеряется.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE  —  /contact/
   ══════════════════════════════════════════════════════════════════════════
   The general enquiry page: people arrive about an existing product, an order,
   a partnership or a new project alike, so it carries no sales sections, no
   process steps and no FAQ — one screen, one purpose.

   Layout: the left column is given to reaching the company (heading, then the
   chat links); the form sits on the right. Company registration details follow
   underneath the whole composition — useful for trust, but not the reason
   someone opens this page.

   Scoped to .contact-page on <main>.
   ══════════════════════════════════════════════════════════════════════════ */

.contact-page .contact-section{padding:clamp(28px,5vw,56px) 0 clamp(40px,5vw,68px)}
.contact-page .breadcrumb{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:13px;color:#8d97ad;margin-bottom:clamp(20px,3vw,32px)}
.contact-page .breadcrumb a{color:#8d97ad;text-decoration:none}
.contact-page .breadcrumb a:hover{color:var(--blue-bright)}

/* Two columns on desktop: intro and chats stack on the left, the form spans
   both rows on the right. */
/* Left column carries intro, chat links and registered details, stacked in three
   rows; the form occupies the right column across all of them and stretches, so
   its bottom edge lines up with the end of the details rather than floating. */
.contact-page .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-rows:auto auto 1fr;gap:clamp(22px,2.6vw,36px) clamp(24px,3vw,44px);align-items:start}
.contact-page .contact-intro{grid-column:1;grid-row:1}
.contact-page .contact-chats{grid-column:1;grid-row:2}
.contact-page .contact-office{grid-column:1;grid-row:3}
.contact-page .contact-form-col{grid-column:2;grid-row:1 / span 3;align-self:stretch;display:flex}

.contact-page .contact-intro h1{font-size:clamp(32px,4.6vw,46px);line-height:1.05;letter-spacing:-.025em;margin-bottom:16px}
.contact-page .contact-lead{font-size:16.5px;line-height:1.75;color:var(--text-2);max-width:520px}

/* ── Chat links ── */
.contact-page .contact-chats{display:grid;gap:10px;max-width:400px;align-content:start}
.contact-page .contact-chats-label{font-size:13px;color:#8d97ad;margin-bottom:2px}
.contact-page .contact-chat{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface);text-decoration:none;transition:border-color .2s ease,background .2s ease}
.contact-page .contact-chat-icon{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;padding:9px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.contact-page .contact-chat-icon svg{width:100%;height:100%;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-page .contact-chat-body{display:grid;gap:2px}
.contact-page .contact-chat-body strong{font-size:14.5px;color:var(--text)}
.contact-page .contact-chat-body span{font-size:13px;color:#8d97ad}
.contact-page .contact-chat-tg .contact-chat-icon{border-color:rgba(41,171,226,.32);background:rgba(41,171,226,.1)}
.contact-page .contact-chat-tg .contact-chat-icon svg{stroke:#29abe2}
.contact-page .contact-chat-tg:hover{border-color:rgba(41,171,226,.5);background:linear-gradient(180deg,rgba(41,171,226,.08),rgba(255,255,255,.01)),var(--surface)}
.contact-page .contact-chat-wa .contact-chat-icon{border-color:rgba(37,211,102,.32);background:rgba(37,211,102,.1)}
.contact-page .contact-chat-wa .contact-chat-icon svg{stroke:#25d366}
.contact-page .contact-chat-wa:hover{border-color:rgba(37,211,102,.5);background:linear-gradient(180deg,rgba(37,211,102,.08),rgba(255,255,255,.01)),var(--surface)}

/* ── Form ── */
.contact-page .contact-form-head{margin-bottom:16px}
/* The reply time used to be buried at the end of the intro paragraph; next to
   the form heading it answers the question people actually have before writing. */
.contact-page .contact-reply{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:5px 10px;border:1px solid rgba(80,237,187,.26);border-radius:999px;background:rgba(80,237,187,.08);font-size:12.5px;color:#8fe3c4}
.contact-page .contact-reply svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-page .qf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-page .qf-field{display:block;margin-bottom:14px}
/* Field labels: sentence case at a readable size, not 10px uppercase tracking. */
.contact-page .qf-field>span{display:block;font-size:13px;font-weight:600;color:#aab4c8;margin-bottom:7px}
.contact-page .qf-field input,.contact-page .qf-field textarea{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.03);color:var(--text);font-family:inherit;font-size:14.5px;transition:border-color .18s ease,background .18s ease}
.contact-page .qf-field input::placeholder,.contact-page .qf-field textarea::placeholder{color:#7b8499}
.contact-page .qf-field input:focus,.contact-page .qf-field textarea:focus{outline:none;border-color:rgba(112,180,255,.55);background:rgba(112,180,255,.05)}
/* Floor kept low so the card never forces the grid taller than the left column;
   the textarea then flexes up to whatever height that column sets. */
.contact-page .qf-field textarea{resize:vertical;min-height:96px;line-height:1.6}
/* Stretch the card and let the message box absorb the spare height so the form
   ends level with the company details beside it. */
.contact-page .contact-form-card{display:flex;flex-direction:column;width:100%}
.contact-page .quote-form{display:flex;flex-direction:column;flex:1}
.contact-page .qf-field-grow{flex:1;display:flex;flex-direction:column}
.contact-page .qf-field-grow textarea{flex:1}
.contact-page .qf-attach{margin-bottom:15px}
.contact-page .qf-attach-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px dashed rgba(112,180,255,.4);border-radius:10px;background:rgba(112,180,255,.05);font-size:13px;font-weight:600;color:var(--blue-bright);cursor:pointer;transition:border-color .18s ease,background .18s ease}
.contact-page .qf-attach-btn:hover{border-color:rgba(112,180,255,.7);background:rgba(112,180,255,.1)}
.contact-page .qf-attach-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-page .qf-attach-btn input{display:none}
.contact-page .qf-consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:17px;font-size:12.5px;line-height:1.62;color:#98a2b6}
.contact-page .qf-consent input{margin-top:2px;flex:0 0 auto;width:15px;height:15px;accent-color:var(--blue-bright)}
.contact-page .qf-consent a{color:var(--blue-bright);text-decoration:none}
.contact-page .qf-consent a:hover{text-decoration:underline}
.contact-page .qf-submit{width:100%;justify-content:center}

/* ── Company details: as originally laid out — name, address, then the numbers
   as label/value rows. Kept in the left column under the chat links. ── */
/* Stretches to fill its grid row so the block ends level with the form card
   beside it; the text itself naturally sits a few pixels above that edge. */
.contact-page .contact-office{align-self:stretch;max-width:440px;padding-top:22px;border-top:1px solid var(--border)}
.contact-page .contact-office-key{display:block;font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:7px}
.contact-page .contact-office address{font-style:normal;font-size:13.5px;line-height:1.7;color:var(--text-2);margin-bottom:18px}
.contact-page .contact-office-meta{display:grid;gap:10px}
.contact-page .contact-office-meta>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.contact-page .contact-office-meta span{font-size:12.5px;color:#8d97ad;flex:0 0 auto}
.contact-page .contact-office-meta b{font-size:13.5px;font-weight:600;color:var(--text-2);text-align:right}
.contact-page .contact-office-meta a{color:var(--blue-bright);text-decoration:none}
.contact-page .contact-office-meta a:hover{text-decoration:underline}

/* ── Narrow screens ──
   Order is heading → form → chats → company details, so the message box is
   reachable without scrolling past everything else. */
@media(max-width:980px){
  .contact-page .contact-grid{display:flex;flex-direction:column;gap:26px}
  .contact-page .contact-intro{order:1}
  .contact-page .contact-form-col{order:2}
  .contact-page .contact-chats{order:3;max-width:none}
  .contact-page .contact-office{order:4;max-width:none}
}
@media(max-width:560px){
  .contact-page .qf-row{grid-template-columns:1fr}
  .contact-page .contact-office-meta>div{flex-direction:column;gap:3px}
  .contact-page .contact-office-meta b{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .contact-page .contact-chat,.contact-page .qf-field input,
  .contact-page .qf-field textarea,.contact-page .qf-attach-btn{transition:none}
}


/* ── Этап 5: переходник CF7 (форма 6659) под разметку макета контактов ──
   CF7 оборачивает каждое поле в span.wpcf7-form-control-wrap, а autop — строки
   в <p> с <br>. Без этого блока: подпись-стиль .qf-field>span ложится и на обёртку
   поля, два поля ряда .qf-row попадают в один <p> и сетка разваливается,
   а легаси p{margin-bottom:20px} из style.css раздувает отступы. */
.contact-page .contact-form-card .wpcf7{display:flex;flex-direction:column;flex:1}
.contact-page .quote-form p{margin:0}
.contact-page .quote-form>p,.contact-page .quote-form .qf-row p{display:contents}
.contact-page .quote-form br{display:none}
.contact-page .qf-field>.wpcf7-form-control-wrap{display:block;margin:0;font-size:inherit;font-weight:inherit;color:inherit}
.contact-page .qf-field-grow>.wpcf7-form-control-wrap{flex:1;display:flex;flex-direction:column}
/* Галка согласия: CF7 кладёт чекбокс и текст в свой label внутри wpcf7-list-item */
.contact-page .qf-consent .wpcf7-list-item{margin:0}
.contact-page .qf-consent label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
/* Кнопка — <input type=submit>; легаси .btn из style.css даёт капс и рамку */
.contact-page .quote-form input[type="submit"].qf-submit{width:100%;text-transform:none;border:none;cursor:pointer}
.contact-page .quote-form .wpcf7-spinner{margin:8px auto 0;display:block}
.contact-page .quote-form .wpcf7-not-valid-tip{color:var(--red);font-size:11.5px;margin-top:4px}
.contact-page .quote-form .wpcf7-response-output{margin:12px 0 0;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:12px;color:var(--text-2)}
/* Attach files (Drag & Drop Upload): плагин прячет <input type=file> и строит
   свою зону сброса. В макете зоны нет — только кнопка .qf-attach-btn, поэтому
   рамку и подпись «Drag & Drop Files Here» гасим, а ссылку выбора файла
   делаем кнопкой. !important — потому что style.css:6402 ставит его на каждую
   строку .cd-upload-btn (тот же приём, что у .nd-form выше). */
.contact-page .qf-attach .codedropz-upload-handler{border:none;border-radius:0;margin:0}
.contact-page .qf-attach .codedropz-upload-container{padding:0}
.contact-page .qf-attach .codedropz-upload-inner{text-align:left}
.contact-page .qf-attach .codedropz-upload-inner h3,
.contact-page .qf-attach .codedropz-upload-inner>span{display:none}
.contact-page .qf-attach .codedropz-btn-wrap{display:inline-block}
.contact-page .qf-attach a.cd-upload-btn{
  display:inline-flex !important;align-items:center;gap:8px;width:auto !important;
  padding:9px 14px !important;border:1px dashed rgba(112,180,255,.4) !important;border-radius:10px !important;
  background:rgba(112,180,255,.05) !important;font-family:inherit;font-size:13px !important;font-weight:600 !important;
  line-height:1.4 !important;color:var(--blue-bright) !important;text-align:left !important;text-decoration:none;
  cursor:pointer;transition:border-color .18s ease,background .18s ease
}
.contact-page .qf-attach a.cd-upload-btn:hover{border-color:rgba(112,180,255,.7) !important;background:rgba(112,180,255,.1) !important}
.contact-page .qf-attach a.cd-upload-btn::before{
  content:"";width:15px;height:15px;flex-shrink:0;background-color:currentColor;
  -webkit-mask:var(--nd-file) center / contain no-repeat;mask:var(--nd-file) center / contain no-repeat
}
.contact-page{
  --nd-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E")
}
.contact-page .qf-attach .dnd-upload-status{color:var(--text-dim);font-size:12px}
.contact-page .qf-attach .dnd-upload-status .dnd-upload-details .name{color:var(--text-2)}
@media(prefers-reduced-motion:reduce){
  .contact-page .qf-attach a.cd-upload-btn{transition:none}
}

/* Blocks to append to the END of new-design.css, after the CONTACT PAGE block:
   COMPANY PAGES, TEAM PAGE, ABOUT PAGE, BLOG PAGE, REVIEWS PAGE, PAYMENT PAGE,
   MESSAGE SENT PAGE. Used by /about/, /about/team/, /blog/, /reviews/,
   /subscription-payment-successful/ and /your-message-is-sent/. */
/* ══════════════════════════════════════════════════════════════════════════
   COMPANY PAGES  —  /about/, /about/team/, /blog/, /reviews/, payment and message-sent pages
   ══════════════════════════════════════════════════════════════════════════
   Shared by the about, team, blog and reviews pages: the hero (breadcrumb,
   heading, lead, then tag rows on the team page or figures on the about
   page) and the pagination of the blog and reviews lists. Scoped
   to .about-page, .team-page, .blog-page and .reviews-page on <main>.
   ══════════════════════════════════════════════════════════════════════════ */
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-hero{position:relative;padding:clamp(28px,5vw,56px) 0 clamp(48px,6vw,84px);background:radial-gradient(ellipse 60% 70% at 85% 10%,rgba(79,142,247,.16),transparent 70%)}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-hero .breadcrumb{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:13px;color:#8d97ad;margin-bottom:clamp(22px,3vw,34px)}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-hero .breadcrumb a{color:#8d97ad;text-decoration:none}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-hero .breadcrumb a:hover{color:var(--blue-bright)}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-hero h1{max-width:820px;margin:14px 0 18px;font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.025em}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-lead{max-width:720px;font-size:17px;line-height:1.75;color:var(--text-2)}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-pills{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start;margin-top:26px;max-width:960px}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-pills-tech{margin-top:14px}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-pl{padding-top:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-pills div{display:flex;flex-wrap:wrap;gap:8px}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-pills div span{padding:7px 14px;border-radius:999px;border:1px solid rgba(112,180,255,.35);background:rgba(112,180,255,.08);font-size:13px;font-weight:600;color:var(--text)}
:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-pills-tech div span{border-color:var(--border-strong);background:rgba(255,255,255,.03);font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-2)}
@media(max-width:640px){:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-pills{grid-template-columns:1fr;gap:8px}:is(.team-page,.about-page,.blog-page,.reviews-page,.payment-page,.sent-page) .co-pl{padding-top:0}}
/* ── Pagination (blog: links; reviews: buttons, paged in the browser) ── */
:is(.blog-page,.reviews-page) .co-pages{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:36px}
:is(.blog-page,.reviews-page) .co-pages :is(a,span,button){display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--border);background:none;font:inherit;font-size:14px;font-weight:700;color:var(--text-2);text-decoration:none}
:is(.blog-page,.reviews-page) .co-pages button{cursor:pointer}
:is(.blog-page,.reviews-page) .co-pages :is(a,button):hover{border-color:rgba(112,180,255,.6);color:var(--blue-bright)}
:is(.blog-page,.reviews-page) .co-pages :is(a,button):focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
:is(.blog-page,.reviews-page) .co-pages [aria-current]{border-color:rgba(112,180,255,.6);background:rgba(112,180,255,.12);color:var(--text)}
:is(.blog-page,.reviews-page) .co-pages .co-dots{border:0;min-width:auto;padding:0 4px;color:var(--text-mute)}
/* ══════════════════════════════════════════════════════════════════════════
   TEAM PAGE  —  /about/team/
   ══════════════════════════════════════════════════════════════════════════
   Who builds the software. The hero (in COMPANY PAGES above) follows the
   homepage: what the team builds, then the languages and APIs it works with. Below it, four equal
   cards in a 2 x 2 grid — each with platforms and technologies, every tag
   linking to its page; the founder's card has a soft blue tint. Names sit
   at the top of the photo, so they line up across a row whatever the
   length of the title.

   Section backgrounds, .section-head, .eyebrow and the closing .cta-band are
   the sitewide components above.

   Scoped to .team-page on <main>.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Team cards: 2 x 2 ── */
.team-page .tm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.team-page .tm-card{display:flex;flex-direction:column;gap:16px;padding:26px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface)}
/* The founder's card: the same size and layout, a soft blue tint and border. */
.team-page .tm-founder{border-color:rgba(79,142,247,.45);background:linear-gradient(160deg,rgba(79,142,247,.13),rgba(79,142,247,.03) 55%),var(--surface)}
.team-page .tm-founder .tm-photo{border-color:rgba(112,180,255,.5)}
.team-page .tm-top{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-areas:"photo head" "photo li";grid-template-rows:auto 1fr;gap:14px 22px}
.team-page .tm-photo{grid-area:photo;position:relative;display:grid;place-items:center;width:240px;aspect-ratio:1;border-radius:22px;overflow:hidden;border:1px solid rgba(112,180,255,.28);background:rgba(112,180,255,.1)}
.team-page .tm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team-page .tm-noimg img{display:none}
.team-page .tm-noimg::after{content:attr(data-initials);font-weight:800;font-size:64px;letter-spacing:.02em;color:var(--blue-bright)}
.team-page .tm-head{grid-area:head;align-self:start;padding-top:6px}
.team-page .tm-head h3{margin:0;font-size:24px;line-height:1.2}
.team-page .tm-role{margin:5px 0 0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright)}
.team-page .tm-since{margin:4px 0 0;font-size:12.5px;color:var(--text-mute)}
.team-page .tm-li{grid-area:li;align-self:start;justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px solid rgba(112,180,255,.35);background:rgba(112,180,255,.08);font-size:12.5px;font-weight:700;line-height:1;color:var(--blue-bright);text-decoration:none;white-space:nowrap}
.team-page .tm-li svg{display:block;flex:0 0 14px;width:14px;height:14px}
.team-page .tm-li span{display:block}
.team-page .tm-li:hover{border-color:rgba(112,180,255,.75)}
.team-page .tm-bio{margin:0;font-size:14.5px;line-height:1.75;color:var(--text-2)}
.team-page .tm-bio a{color:var(--blue-bright);font-weight:600;text-decoration:none}
.team-page .tm-bio a:hover{text-decoration:underline}
.team-page .tm-focus{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.team-page .tm-focus li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.team-page .tm-focus li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--blue-bright)}
.team-page .tm-g{display:grid;gap:7px}
.team-page .tm-gl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.team-page .tm-chips{display:flex;flex-wrap:wrap;gap:6px}
.team-page .tm-chips a,.team-page .tm-chips span{padding:4px 10px;border-radius:999px;border:1px solid var(--border-strong);font-size:12px;color:var(--text-2);text-decoration:none}
.team-page .tm-chips a:hover{border-color:rgba(112,180,255,.6);color:var(--blue-bright)}

@media(max-width:900px){.team-page .tm-grid{grid-template-columns:1fr}}
@media(max-width:640px){.team-page .tm-top{grid-template-columns:1fr;grid-template-areas:"photo" "head" "li";grid-template-rows:auto}.team-page .tm-photo{width:100%;max-width:320px}.team-page .tm-head{align-self:start}}
/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE  —  /about/
   ══════════════════════════════════════════════════════════════════════════
   The company page: figures in the hero, the story with a timeline, the two
   sides of the business, our principles, who we work with, the team, reviews
   and company details. The hero carries a founding-year badge. The hero is in COMPANY PAGES above; section
   backgrounds, .section-head, .eyebrow and the closing .cta-band are the
   sitewide components.

   Scoped to .about-page on <main>.
   ══════════════════════════════════════════════════════════════════════════ */

.about-page a{text-decoration:none}
.about-page .section-head p a,.about-page .ab-note a,.about-page .ab-tl a,.about-page .ab-co dd a{color:var(--blue-bright);font-weight:600}
.about-page .section-head p a:hover,.about-page .ab-note a:hover,.about-page .ab-tl a:hover,.about-page .ab-co dd a:hover{text-decoration:underline}

/* ── Hero: badge and figures ── */
.about-page .ab-badge{display:inline-flex;padding:6px 14px;border-radius:999px;border:1px solid rgba(112,180,255,.4);background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright)}
.about-page .ab-stats{display:grid;grid-template-columns:repeat(4,minmax(0,200px));grid-auto-rows:1fr;gap:14px;margin-top:30px}
.about-page .ab-stats div{display:grid;gap:4px;padding:18px 20px;border-radius:16px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.07)}
.about-page .ab-stats-note{margin:12px 0 0;font-size:13px;color:var(--text-dim)}
.about-page .ab-stats b{font-size:32px;font-weight:800;line-height:1;color:var(--text)}
.about-page .ab-stats span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}

/* ── Story: text and timeline ── */
.about-page .ab-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:start}
.about-page .ab-story-text p{margin:0 0 16px;font-size:16px;line-height:1.8;color:var(--text-2)}
.about-page .ab-story-text p:first-child{font-size:17px;color:var(--text)}
.about-page .ab-tl{position:relative;display:grid;gap:18px;margin:0;padding:0 0 0 26px;list-style:none}
.about-page .ab-tl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(rgba(112,180,255,.6),rgba(112,180,255,.15))}
.about-page .ab-tl li{position:relative;display:grid;gap:3px}
.about-page .ab-tl li::before{content:'';position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:50%;border:2px solid var(--blue-bright);background:var(--bg)}
.about-page .ab-tl li:last-child::before{background:var(--blue-bright)}
.about-page .ab-tl b{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright)}
.about-page .ab-tl span{font-size:15px;line-height:1.6;color:var(--text-2)}

/* ── What we do ── */
.about-page .ab-do{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.about-page .ab-do-c{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--r-lg);border:1px solid rgba(79,142,247,.35);background:linear-gradient(160deg,rgba(79,142,247,.1),rgba(255,255,255,.01) 55%),var(--surface);transition:border-color .2s,transform .2s}
.about-page .ab-do-c:hover{border-color:rgba(112,180,255,.75);transform:translateY(-3px)}
.about-page .ab-do-c h3{margin:0;font-size:22px;color:var(--text)}
.about-page .ab-do-c p{margin:0;font-size:15px;line-height:1.75;color:var(--text-2)}
.about-page .ab-do-c span{margin-top:auto;padding-top:6px;font-size:14px;font-weight:700;color:var(--blue-bright)}
.about-page .ab-where{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:22px}
.about-page .ab-where span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.about-page .ab-where a{padding:8px 16px;border-radius:999px;border:1px solid var(--border-strong);font-size:14px;font-weight:600;color:var(--text-2)}
.about-page .ab-where a:hover{border-color:rgba(112,180,255,.6);color:var(--blue-bright)}

/* ── What we stand by: six principles, three across ── */
.about-page .ab-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.about-page .ab-how article{padding:24px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface)}
.about-page .ab-n{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--blue-bright)}
.about-page .ab-how h3{margin:8px 0 8px;font-size:18px}
.about-page .ab-how p{margin:0;font-size:14.5px;line-height:1.75;color:var(--text-2)}

/* ── Who we work with: four client types, then one line on scope ── */
.about-page .ab-who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.about-page .ab-who div{display:grid;align-content:start;gap:6px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface)}
.about-page .ab-who b{font-size:18px;color:var(--text)}
.about-page .ab-who span{font-size:14.5px;line-height:1.65;color:var(--text-2)}
.about-page .ab-note{margin:16px 0 0;font-size:13.5px;color:var(--text-dim)}
.about-page .ab-scope{margin-top:20px;text-align:center;font-size:14px}

/* ── Team tiles ── */
.about-page .ab-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.about-page .ab-person{display:grid;align-content:start;gap:6px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);transition:border-color .2s,transform .2s}
.about-page .ab-person:hover{border-color:rgba(112,180,255,.6);transform:translateY(-3px)}
.about-page .ab-ph{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;margin-bottom:8px;border-radius:16px;overflow:hidden;border:1px solid rgba(112,180,255,.28);background:rgba(112,180,255,.1)}
.about-page .ab-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-page .ab-noimg img{display:none}
.about-page .ab-noimg::after{content:attr(data-initials);font-weight:800;font-size:48px;color:var(--blue-bright)}
.about-page .ab-person b{font-size:17px;color:var(--text)}
.about-page .ab-person span:not(.ab-ph){font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;line-height:1.5;color:var(--blue-bright)}
.about-page .ab-more{margin:22px 0 0;text-align:center}
.about-page .ab-more a{display:inline-block;padding:10px 20px;border-radius:999px;border:1px solid rgba(112,180,255,.4);background:rgba(112,180,255,.08);font-weight:700;color:var(--blue-bright)}
.about-page .ab-more a:hover{border-color:rgba(112,180,255,.8)}

/* ── Reviews (figures until the Trustpilot widget is installed) ── */
.about-page .ab-proof{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:center;padding:32px;border-radius:var(--r-lg);border:1px solid rgba(79,212,138,.3);background:linear-gradient(160deg,rgba(79,212,138,.08),rgba(255,255,255,.01) 60%),var(--surface)}
.about-page .ab-rate{display:grid;justify-items:center;gap:4px;text-align:center}
.about-page .ab-rate b{font-size:64px;font-weight:800;line-height:1;color:#9fe0b8}
.about-page .ab-rate span{font-size:14px;font-weight:700;color:var(--text)}
.about-page .ab-rate em{font-style:normal;font-size:13px;color:var(--text-dim)}
.about-page .ab-proof-t h2{margin:8px 0 10px;font-size:clamp(24px,3vw,32px)}
.about-page .ab-proof-t p{margin:0;font-size:15px;line-height:1.75;color:var(--text-2)}
.about-page .ab-proof-l{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.about-page .ab-proof-l a{padding:8px 15px;border-radius:999px;border:1px solid var(--border-strong);font-size:13.5px;font-weight:600;color:var(--text-2)}
.about-page .ab-proof-l a:hover{border-color:rgba(112,180,255,.6);color:var(--blue-bright)}

/* ── Company details ── */
.about-page .ab-co{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}
.about-page .ab-co div{padding:18px 20px;border-radius:14px;border:1px solid var(--border);background:var(--surface)}
.about-page .ab-co dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
.about-page .ab-co dd{margin:6px 0 0;font-size:15px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.about-page .ab-co-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;text-align:center}

@media(max-width:1100px){.about-page .ab-how,.about-page .ab-who{grid-template-columns:repeat(2,minmax(0,1fr))}.about-page .ab-team{grid-template-columns:repeat(2,minmax(0,1fr))}.about-page .ab-co{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.about-page .ab-story,.about-page .ab-do,.about-page .ab-how{grid-template-columns:1fr}.about-page .ab-proof{grid-template-columns:1fr;text-align:center}.about-page .ab-proof-l{justify-content:center}}
@media(max-width:900px){.about-page .ab-stats{grid-template-columns:repeat(2,minmax(0,200px))}}
@media(max-width:640px){.about-page .ab-co,.about-page .ab-who{grid-template-columns:1fr}.about-page .ab-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ══════════════════════════════════════════════════════════════════════════
   BLOG PAGE  —  /blog/   +   HOMEPAGE BLOG SECTION  —  #blog
   ══════════════════════════════════════════════════════════════════════════
   The blog archive in the site's design: the hero (COMPANY PAGES above),
   the latest article as a large card, the rest of the page in a
   three-column grid, and WordPress pagination (COMPANY PAGES above). Each card has an empty topic
   slot (.bl-topic) that stays hidden until topics are introduced.
 
   The same article cards are used in the blog section of the homepage
   (.blog-section): the three latest posts in one row, titles as <h3>.
 
   Scoped to .blog-page on <main> and to .blog-section on the homepage.
   ══════════════════════════════════════════════════════════════════════════ */
 
/* ── Article cards (blog page and homepage) ── */
:is(.blog-page,.blog-section) .bl-card a{display:flex;flex-direction:column;height:100%;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);overflow:hidden;text-decoration:none;transition:border-color .2s,transform .2s}
:is(.blog-page,.blog-section) .bl-card a:hover{border-color:rgba(112,180,255,.6);transform:translateY(-3px)}
:is(.blog-page,.blog-section) .bl-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,rgba(79,142,247,.28),rgba(80,237,187,.12)),var(--surface-2)}
:is(.blog-page,.blog-section) .bl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(.blog-page,.blog-section) .bl-noimg img{display:none}
:is(.blog-page,.blog-section) .bl-noimg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.04) 22px 23px)}
:is(.blog-page,.blog-section) .bl-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
:is(.blog-page,.blog-section) .bl-topic:empty{display:none}
:is(.blog-page,.blog-section) .bl-topic{align-self:flex-start;padding:3px 10px;border-radius:999px;border:1px solid rgba(112,180,255,.35);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-bright)}
:is(.blog-page,.blog-section) .bl-card :is(h2,h3){margin:0;font-size:18px;line-height:1.4;color:var(--text)}
:is(.blog-page,.blog-section) .bl-more{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:700;color:var(--blue-bright)}
 
/* The latest article: image left, text right. Blog page only. */
.blog-page .bl-feat{margin-bottom:22px}
.blog-page .bl-feat a{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border-color:rgba(79,142,247,.4)}
.blog-page .bl-feat .bl-img{aspect-ratio:auto;min-height:300px}
.blog-page .bl-feat .bl-body{justify-content:center;gap:14px;padding:32px 36px}
.blog-page .bl-latest{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright)}
.blog-page .bl-feat h2{font-size:clamp(22px,2.4vw,30px);line-height:1.25}
.blog-page .bl-feat .bl-more{margin-top:6px;font-size:14.5px}
 
.blog-page .bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
 
/* Homepage: always three cards, so three columns, then one — never a lone card in a two-column row. */
.blog-section .bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
 
@media(max-width:1000px){.blog-page .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-page .bl-feat a{grid-template-columns:1fr}.blog-page .bl-feat .bl-img{aspect-ratio:16/9;min-height:0}}
@media(max-width:860px){.blog-section .bl-grid{grid-template-columns:1fr}}
@media(max-width:640px){.blog-page .bl-grid{grid-template-columns:1fr}.blog-page .bl-feat .bl-body{padding:22px}}

/* ══════════════════════════════════════════════════════════════════════════
   REVIEWS PAGE  —  /reviews/
   ══════════════════════════════════════════════════════════════════════════
   The reviews list in the site's design: the Trustpilot rating (figures until
   the TrustBox widget is installed) and the testimonials disclaimer in the
   hero, a year filter and page numbers that work in the browser (like the
   indicator filter in the catalogue), then the reviews as a three-column
   masonry — cards keep their own height, so long and short reviews sit
   together without gaps.
   Each card: name, flag, stars, text, tags (service or product, platform,
   technology — each a link), year and source. When a review has a source URL,
   a stretched link makes the whole card clickable while the tags stay their
   own links. The hero and pagination are in COMPANY PAGES above.

   Scoped to .reviews-page on <main>.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: rating and disclaimer ── */
.reviews-page .rv-rate{display:inline-flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:28px;padding:16px 22px;border-radius:var(--r-lg);border:1px solid rgba(79,212,138,.35);background:rgba(79,212,138,.07)}
.reviews-page .rv-rate b{font-size:44px;font-weight:800;line-height:1;color:#9fe0b8}
.reviews-page .rv-rate span{display:grid;gap:2px}
.reviews-page .rv-rate strong{font-size:15px;color:var(--text)}
.reviews-page .rv-rate em{font-style:normal;font-size:13px;color:var(--text-dim)}
.reviews-page .rv-rate a{margin-left:6px;padding:8px 15px;border-radius:999px;border:1px solid var(--border-strong);font-size:13.5px;font-weight:700;color:var(--text-2);text-decoration:none}
.reviews-page .rv-rate a:hover{border-color:rgba(112,180,255,.6);color:var(--blue-bright)}
.reviews-page .rv-note{display:flex;align-items:flex-start;gap:10px;max-width:760px;margin:20px 0 0;padding:12px 16px;border-radius:12px;border:1px solid rgba(245,196,81,.32);background:rgba(245,196,81,.06);font-size:13.5px;line-height:1.6;color:var(--text-2)}
.reviews-page .rv-note svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:#f5c451}

/* ── Year filter (buttons, filtered in the browser) ── */
.reviews-page .rv-years{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px}
.reviews-page .rv-years-l{margin-right:4px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.reviews-page .rv-years button{padding:7px 14px;border-radius:999px;border:1px solid var(--border-strong);background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.reviews-page .rv-years button:hover{border-color:rgba(112,180,255,.6);color:var(--blue-bright)}
.reviews-page .rv-years button[aria-pressed="true"]{border-color:rgba(112,180,255,.6);background:rgba(112,180,255,.14);color:var(--text)}
.reviews-page .rv-years button:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}

/* ── Review cards: masonry in three columns ── */
.reviews-page .rv-grid{column-count:3;column-gap:18px}
.reviews-page .rv-card{position:relative;display:grid;gap:14px;margin:0 0 18px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);break-inside:avoid;transition:background-color .25s ease,border-color .25s ease,transform .25s ease}
.reviews-page .rv-card:hover{background:linear-gradient(160deg,rgba(79,142,247,.1),rgba(79,142,247,.03) 60%),var(--surface);border-color:rgba(112,180,255,.45)}
.reviews-page .rv-has-link:hover{transform:translateY(-2px)}
.reviews-page .rv-card[hidden],.reviews-page .rv-pages[hidden]{display:none}
.reviews-page .rv-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.reviews-page .rv-link:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px}
.reviews-page .rv-card header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.reviews-page .rv-who{display:inline-flex;align-items:center;gap:9px}
.reviews-page .rv-who img{width:20px;height:15px;border-radius:2px;object-fit:cover}
.reviews-page .rv-who b{font-size:15.5px;color:var(--text)}
.reviews-page .rv-stars{display:inline-flex;gap:2px;color:#f5c451}
.reviews-page .rv-stars svg{width:15px;height:15px;fill:currentColor}
.reviews-page .rv-card p{margin:0;font-size:14.5px;line-height:1.75;color:var(--text-2)}
.reviews-page .rv-tags{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px}
.reviews-page .rv-tag{padding:4px 10px;border-radius:999px;border:1px solid var(--border-strong);font-size:12px;color:var(--text-2);text-decoration:none}
.reviews-page .rv-tag-svc{border-color:rgba(112,180,255,.35);background:rgba(112,180,255,.07);color:var(--blue-bright)}
.reviews-page .rv-tag:hover{border-color:rgba(112,180,255,.65);color:var(--blue-bright)}
.reviews-page .rv-card footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute)}
.reviews-page .rv-src{display:inline-flex;align-items:center;gap:6px}
.reviews-page .rv-src svg{width:12px;height:12px}
.reviews-page .rv-has-link:hover .rv-src{color:var(--blue-bright)}

@media(max-width:1000px){.reviews-page .rv-grid{column-count:2}}
@media(max-width:640px){.reviews-page .rv-grid{column-count:1}.reviews-page .rv-rate a{margin-left:0}}
@media(prefers-reduced-motion:reduce){.reviews-page .rv-card,.reviews-page .rv-years button{transition:none}.reviews-page .rv-has-link:hover{transform:none}}

/* ══════════════════════════════════════════════════════════════════════════
   PAYMENT PAGE  —  /subscription-payment-successful/
   ══════════════════════════════════════════════════════════════════════════
   The page buyers land on after paying: the hero (COMPANY PAGES above),
   centred, with a green "Payment confirmed" badge and "Successful!" in blue, where downloads are (text and an
   animated walkthrough of a product page), the steps — one block for
   subscriptions and lifetime licences, one for the Nordman Connector, each
   ending with installation — and help (hours, messengers), free-trial and
   feedback cards. noindex.

   Scoped to .payment-page on <main>.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: centred, green "Payment confirmed" badge, accent on "Successful!" ── */
.payment-page .pm-hero .container{text-align:center}
.payment-page .pm-hero h1,.payment-page .pm-hero .co-lead{margin-left:auto;margin-right:auto}
.payment-page .pm-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 15px;border-radius:999px;border:1px solid rgba(80,237,187,.45);background:rgba(80,237,187,.13);font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.payment-page .pm-badge svg{width:16px;height:16px}
.payment-page .pm-hero h1 .accent{background:linear-gradient(180deg,var(--blue-bright),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Member Access button, as on the product pages */
.payment-page .pm-ma{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:7px;background:var(--blue);color:#fff;font-size:.86em;font-weight:800;white-space:nowrap;vertical-align:middle;line-height:1.6}
.payment-page .pm-ma svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ── Where to download: text and animated walkthrough ── */
.payment-page .pm-where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:center}
.payment-page .pm-where .section-head{margin:0;text-align:left}
.payment-page .pm-where .section-head p{margin-left:0}
.payment-page .pm-mock{padding:22px;border-radius:var(--r-lg);border:1px solid rgba(96,165,250,.35);background:var(--surface);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.payment-page .pm-mock-bar{display:flex;gap:6px;margin-bottom:16px}
.payment-page .pm-mock-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.payment-page .pm-mock-title{height:12px;width:62%;border-radius:6px;background:rgba(255,255,255,.22)}
.payment-page .pm-mock-line{height:8px;width:100%;margin-top:10px;border-radius:5px;background:rgba(255,255,255,.1)}
.payment-page .pm-mock-line.s{width:78%}
.payment-page .pm-mock-row{display:flex;align-items:center;gap:12px;margin-top:18px}
.payment-page .pm-n{flex:0 0 26px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--amber);color:#2a1c00;font-size:13px;font-weight:800}
.payment-page .pm-mock .pm-ma{font-size:14px;padding:7px 14px;animation:pm-pulse 2.2s ease-out infinite}
.payment-page .pm-field{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px 9px 14px;border-radius:10px;border:1px solid var(--border-strong);background:rgba(0,0,0,.2);font-size:13.5px;color:var(--text-dim)}
.payment-page .pm-field span{padding:5px 12px;border-radius:7px;background:rgba(255,255,255,.12);color:var(--text);font-weight:800;font-size:12.5px}
.payment-page .pm-dl{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9px;background:var(--green);color:#06231a;font-size:14px;font-weight:800}
.payment-page .pm-dl svg{width:16px;height:16px}
.payment-page .pm-cap{margin:14px 0 0;font-size:12.5px;color:var(--text-dim)}

/* ── Cards ── */
.payment-page .pm-card{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);transition:border-color .2s,transform .2s}
.payment-page .pm-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.payment-page .pm-card h3{display:flex;align-items:center;gap:9px;margin:0;font-size:18px;line-height:1.35;color:var(--text)}
.payment-page .pm-card h3 svg{width:20px;height:20px;color:var(--blue-bright)}
.payment-page .pm-card p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-2)}
.payment-page .pm-card b{color:var(--text)}

/* ── Steps: two blocks ── */
.payment-page .pm-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.payment-page .pm-card-top{display:flex;align-items:center;gap:12px}
.payment-page .pm-ic{flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:rgba(79,142,247,.14);color:var(--blue-bright)}
.payment-page .pm-ic svg{width:22px;height:22px}
.payment-page .pm-kicker{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright)}
.payment-page .pm-steps{margin:6px 0 0;padding:0;list-style:none;counter-reset:pm-step}
.payment-page .pm-steps li{position:relative;margin:0;padding:0 0 18px 42px;font-size:15px;line-height:1.6;color:var(--text-2);counter-increment:pm-step}
.payment-page .pm-steps li:last-child{padding-bottom:0}
.payment-page .pm-steps li::before{content:counter(pm-step);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:800}
.payment-page .pm-steps li:not(:last-child)::after{content:'';position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:linear-gradient(rgba(59,130,246,.6),rgba(59,130,246,.15))}
.payment-page .pm-steps b{color:var(--text)}
.payment-page .pm-steps a{color:var(--blue-bright)}

.payment-page .pm-note{margin-top:6px;padding:11px 14px;border-radius:10px;border:1px dashed rgba(96,165,250,.4);font-size:13.5px;line-height:1.6;color:var(--text-2)}
.payment-page .pm-note a{color:var(--blue-bright);font-weight:700}

/* ── Help, trial, feedback ── */
.payment-page .pm-hours{font-size:14px;line-height:1.6}
.payment-page .pm-chat{display:flex;flex-wrap:wrap;gap:8px}
.payment-page .pm-chat a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid var(--border-strong);font-size:13.5px;font-weight:700;color:var(--text-2);text-decoration:none;transition:border-color .2s,color .2s}
.payment-page .pm-chat a:hover{border-color:rgba(96,165,250,.6);color:var(--text)}
.payment-page .pm-chat svg{width:17px;height:17px}
.payment-page .pm-chat a:first-child svg{color:#2AABEE}
.payment-page .pm-chat a:last-child svg{color:#25D366}
.payment-page .pm-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.payment-page .pm-trial{border-color:rgba(251,191,36,.45);background:linear-gradient(160deg,rgba(251,191,36,.08),transparent 60%),var(--surface)}
.payment-page .pm-trial h3 svg{color:var(--amber)}
.payment-page .pm-btns{display:flex;flex-wrap:wrap;gap:10px;padding-top:4px}
.payment-page .pm-pulse{animation:pm-pulse 2s ease-out infinite}
@keyframes pm-pulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.6)}70%{box-shadow:0 0 0 12px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}}

@media(max-width:980px){.payment-page .pm-where{grid-template-columns:minmax(0,1fr);gap:28px}.payment-page .pm-cols,.payment-page .pm-more{grid-template-columns:1fr}}
@media(max-width:600px){.payment-page .pm-mock-row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.payment-page .pm-mock .pm-ma,.payment-page .pm-pulse{animation:none}.payment-page .pm-card,.payment-page .pm-chat a{transition:none}.payment-page .pm-card:hover{transform:none}}

/* ══════════════════════════════════════════════════════════════════════════
   MESSAGE SENT PAGE  —  /your-message-is-sent/
   ══════════════════════════════════════════════════════════════════════════
   The page shown after the contact form is sent: the hero (COMPANY PAGES
   above) with a green "Message received" badge and a reply-time card beside
   it, then what to do if no reply arrives — spam folder, trusted sender,
   messengers — and a way back home. noindex.

   Scoped to .sent-page on <main>.
   ══════════════════════════════════════════════════════════════════════════ */
.sent-page .ms-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 15px;border-radius:999px;border:1px solid rgba(80,237,187,.45);background:rgba(80,237,187,.13);font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.sent-page .ms-badge svg{width:16px;height:16px}
.sent-page .ms-hero h1 .accent{background:linear-gradient(180deg,var(--blue-bright),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sent-page .ms-card{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface)}
.sent-page .ms-card h3{display:flex;align-items:center;gap:10px;margin:0;font-size:19px;line-height:1.3;color:var(--text)}
.sent-page .ms-card h3 svg{flex:0 0 22px;width:22px;height:22px;color:var(--blue-bright)}
.sent-page .ms-card p{margin:0;font-size:15px;line-height:1.7;color:var(--text-2)}
.sent-page .ms-card b{color:var(--text)}
.sent-page .ms-list{display:grid;gap:12px;margin:4px 0 0;padding:0;list-style:none;counter-reset:msl}
.sent-page .ms-list li{position:relative;padding-left:40px;font-size:15px;line-height:1.6;color:var(--text-2);counter-increment:msl}
.sent-page .ms-list li::before{content:counter(msl);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:800}
.sent-page .ms-chat{display:flex;flex-wrap:wrap;gap:10px}
.sent-page .ms-chat a{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px;font-size:15px;font-weight:800;color:#fff;text-decoration:none;transition:filter .2s,transform .2s}
.sent-page .ms-chat a:hover{filter:brightness(1.1);transform:translateY(-1px)}
.sent-page .ms-chat svg{width:20px;height:20px}
.sent-page .ms-tg{background:#229ED9}
.sent-page .ms-wa{background:#1DA851}
.sent-page .ms-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
@media(prefers-reduced-motion:reduce){.sent-page .ms-chat a{transition:none}.sent-page .ms-chat a:hover{transform:none}}
.sent-page .ms-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:44px;align-items:center;text-align:left}
.sent-page .ms-hero .container{text-align:left}
.sent-page .ms-hero h1,.sent-page .ms-hero .co-lead{margin-left:0;margin-right:0}
.sent-page .ms-reply{padding:26px;border-radius:var(--r-lg);border:1px solid rgba(96,165,250,.35);background:var(--surface);box-shadow:0 24px 50px rgba(0,0,0,.3)}
.sent-page .ms-reply-l{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.sent-page .ms-reply-big{display:flex;align-items:center;gap:12px;margin:12px 0 6px;font-size:22px;font-weight:800;line-height:1.25;color:var(--text)}
.sent-page .ms-reply-big svg{flex:0 0 28px;width:28px;height:28px;color:var(--blue-bright)}
.sent-page .ms-reply p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-2)}
.sent-page .ms-reply hr{margin:16px 0;border:0;border-top:1px solid var(--border)}
.sent-page .ms-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sent-page .ms-spam{border-color:rgba(251,191,36,.42)}
.sent-page .ms-spam h3 svg{color:var(--amber)}
.sent-page .ms-foot{margin-top:30px}
@media(max-width:980px){.sent-page .ms-top,.sent-page .ms-cols{grid-template-columns:1fr}}