/* Alpha POC site — POC Stars-inspired modern corporate.
   Palette: deep navy #081a43 base + cyan accents.  Lots of whitespace,
   subtle motion, geometric grid.  RTL-first (he/ar), LTR for en/ru. */

/* ── tokens ────────────────────────────────────────────────── */
:root {
  --c-bg:        #ffffff;
  --c-surface:   #f6f7f9;
  --c-text:      #15233d;
  --c-text-soft: #4a5878;
  --c-line:      #e3e8f1;

  --c-navy:      #081a43;   /* primary dark */
  --c-blue:      #0e4b9b;   /* primary mid  */
  --c-cyan:      #43c7f3;
  --c-cyan-2:    #27d7e0;
  --c-accent:    #1356d9;

  --r-card:  14px;
  --r-pill:  999px;
  --shadow:  0 6px 24px rgba(8,26,67,.10);
  --shadow-l: 0 14px 44px rgba(8,26,67,.18);

  --max:     1280px;
  --gap:     24px;

  --t-hero:  clamp(34px, 5vw, 64px);
  --t-h2:    clamp(28px, 3.4vw, 44px);
  --t-h3:    clamp(18px, 1.6vw, 22px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Heebo", "Inter", "Noto Sans", system-ui, sans-serif;
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="ar"] body { font-family: "Noto Sans Arabic","Heebo","Inter",sans-serif; }
html[lang="en"] body, html[lang="ru"] body { font-family: "Inter","Noto Sans",system-ui,sans-serif; }

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

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

/* ── topbar ────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.topbar .wrap {
  display: flex; align-items: center; gap: 24px;
  padding-top: 14px; padding-bottom: 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Rubik", "Heebo", "Inter", system-ui, sans-serif;
  font-weight: 900; letter-spacing: .015em; color: var(--c-navy);
}
.brand-name { font-size: 18px; }
.brand-name .thin { font-weight: 300; opacity: .7; }
.brand.brand-light { color: #fff; }
.brand-mark {
  display: inline-flex; align-items: end; gap: 3px;
  height: 22px;
}
.brand-mark span {
  display: inline-block; width: 4px;
  background: linear-gradient(180deg, var(--c-cyan), var(--c-blue));
  border-radius: 2px;
}
.brand-mark span:nth-child(1) { height: 10px; }
.brand-mark span:nth-child(2) { height: 16px; }
.brand-mark span:nth-child(3) { height: 22px; }

.nav {
  display: flex; gap: 28px; margin-inline-start: 16px; flex: 1;
  font-size: 15px; font-weight: 500;
}
.nav a {
  color: var(--c-text-soft);
  position: relative; padding: 6px 0;
  transition: color .2s;
}
.nav a:hover { color: var(--c-navy); }
.nav a::after {
  content: ""; position: absolute;
  inset-inline: 0; bottom: -3px;
  height: 2px; background: var(--c-blue);
  transform: scaleX(0); transform-origin: center;
  transition: transform .25s;
}
.nav a:hover::after { transform: scaleX(1); }

.topbar-end { display: flex; align-items: center; gap: 16px; }

.lang { display: inline-flex; gap: 0; border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 3px; }
.lang button {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 6px 10px; border-radius: var(--r-pill);
  color: var(--c-text-soft); transition: all .15s;
}
.lang button.active { background: var(--c-navy); color: #fff; }
.lang button:hover:not(.active) { color: var(--c-navy); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 11px 22px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  transition: all .2s;
  white-space: nowrap;
}
.cta-primary {
  background: linear-gradient(135deg, var(--c-blue), var(--c-accent));
  color: #fff;
  box-shadow: 0 8px 24px rgba(19,86,217,.32);
}
.cta-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(19,86,217,.42); }
.cta-ghost {
  background: transparent; color: var(--c-navy);
  border: 1.5px solid rgba(8,26,67,.18);
}
.cta-ghost:hover { background: rgba(8,26,67,.04); border-color: var(--c-navy); }
.cta-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.cta-ghost-light:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.cta-danger {
  background: linear-gradient(135deg, #ef4444, #c0241f);
  color: #fff;
  box-shadow: 0 8px 24px rgba(239,68,68,.32);
  border: 0;
  cursor: pointer;
  font: inherit;
}
.cta-danger:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(239,68,68,.45); filter: brightness(1.05); }
.cta-danger:active { transform: translateY(0); }

/* Free-trial CTA — same gradient family as cta-primary but warm
   (green→yellow) so it visually pops next to the existing blue
   primary button without competing with it. */
.cta-trial {
  background: linear-gradient(135deg, #8cc441, #f0b800);
  color: #0a1020;
  box-shadow: 0 8px 24px rgba(140,196,65,.42);
  font-weight: 800;
}
.cta-trial:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(140,196,65,.55);
  filter: brightness(1.04);
}

/* Inline nav-level "free trial" pill — sits inside .nav as the last
   link, styled distinctly so visitors notice it among the plain text
   nav items. */
.nav-trial {
  background: linear-gradient(135deg, #8cc441, #f0b800);
  color: #0a1020 !important;
  padding: 6px 14px !important;
  border-radius: 999px;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(140,196,65,.32);
  transition: transform .2s, box-shadow .2s;
}
.nav-trial:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(140,196,65,.46);
}

/* Promo ribbon — thin strip above the topbar with the free-trial pitch.
   Auto-hides if the user clicks the close X (sessionStorage flag).
   Stays on top: position:sticky so it scrolls with the page on mobile
   instead of fighting the topbar's own sticky position. */
.trial-ribbon {
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 10px 16px;
  background: linear-gradient(90deg, #8cc441 0%, #f0b800 100%);
  color: #0a1020; font-size: 13px; line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.trial-ribbon.is-hidden { display: none; }
.trial-ribbon-link {
  color: #0a1020; text-decoration: none;
  flex: 1; text-align: center;
  max-width: 1200px;
}
.trial-ribbon-link strong { font-weight: 800; }
.trial-ribbon-link:hover { text-decoration: underline; }
.trial-ribbon-cta {
  background: rgba(10,16,32,.18);
  padding: 3px 10px; border-radius: 999px;
  font-weight: 700;
  margin-inline-start: 4px;
}
.trial-ribbon-close {
  background: transparent; border: 0; color: #0a1020;
  font-size: 16px; font-weight: 700; cursor: pointer;
  padding: 4px 8px; line-height: 1; opacity: .65;
}
.trial-ribbon-close:hover { opacity: 1; }

/* On small phones drop the inner CTA pill so the line still fits. */
@media (max-width: 600px) {
  .trial-ribbon { font-size: 12px; padding: 8px 12px; gap: 8px; }
  .trial-ribbon-cta { display: none; }
}

/* ─────────────────────────────────────────────────────────── */
/* ── Accessibility widget (ת״י 5568 + WCAG 2.1 AA) ──────── */
/* ─────────────────────────────────────────────────────────── */

/* Apply user-chosen text scale to the entire document. CSS var defaults to 1. */
html { --a11y-scale: 1; }
body { font-size: calc(16px * var(--a11y-scale)); }

/* Skip-to-main link (visible only on keyboard focus) */
#a11y-skip {
  position: fixed; top: -60px; inset-inline-start: 16px;
  z-index: 100000;
  background: var(--c-navy); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  font-weight: 700; text-decoration: none;
  transition: top .2s;
}
#a11y-skip:focus { top: 0; outline: 2px solid var(--c-cyan); }

/* Back-to-top floating button (bottom-right, opposite the chat widget) */
#back-to-top {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 9998;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(8,26,67,.92), rgba(19,86,217,.92));
  color: #fff; border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(8,26,67,.5);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
#back-to-top:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 32px rgba(19,86,217,.55);
}
#back-to-top:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#back-to-top[hidden] { display: none; }

/* Floating trigger button */
#a11y-trigger {
  position: fixed; bottom: 20px; inset-inline-end: 96px;
  z-index: 9999;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-blue), var(--c-accent));
  color: #fff; border: 0;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(19,86,217,.42);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
#a11y-trigger:hover { transform: scale(1.06); box-shadow: 0 12px 32px rgba(19,86,217,.55); }
#a11y-trigger:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Panel */
#a11y-panel {
  position: fixed; bottom: 86px; inset-inline-end: 96px;
  z-index: 9999;
  width: 320px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: #fff; color: #15233d;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(8,26,67,.35);
  font-family: "Heebo", "Inter", system-ui, sans-serif;
  font-size: 14px;
}
#a11y-panel[hidden] { display: none; }
.a11y-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #e3e8f1;
}
.a11y-header h2 { margin: 0; font-size: 16px; font-weight: 800; }
.a11y-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: #f1f5f9; color: #15233d;
  font-size: 22px; cursor: pointer;
}
.a11y-close:hover { background: #e3e8f1; }
.a11y-section {
  padding: 12px 16px;
  border-bottom: 1px solid #e3e8f1;
  display: flex; flex-direction: column; gap: 8px;
}
.a11y-section:last-child { border-bottom: 0; }
.a11y-row {
  display: flex; align-items: center; justify-content: space-between;
}
.a11y-stepper { display: flex; align-items: center; gap: 8px; }
.a11y-stepper button {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #e3e8f1; background: #f1f5f9;
  font-size: 18px; font-weight: 800; cursor: pointer;
  color: #15233d;
}
.a11y-stepper button:hover { background: #e3e8f1; }
.a11y-scale-out { min-width: 48px; text-align: center; font-weight: 700; }

.a11y-toggle {
  width: 100%; text-align: right;
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid #e3e8f1; background: #fff;
  font: inherit; cursor: pointer; color: #15233d;
  display: flex; align-items: center; gap: 8px;
}
.a11y-toggle::before {
  content: ""; width: 18px; height: 18px;
  border-radius: 4px; border: 2px solid #cbd5e1;
  flex-shrink: 0;
}
.a11y-toggle.on::before {
  background: var(--c-blue); border-color: var(--c-blue);
  box-shadow: inset 0 0 0 3px #fff;
}
.a11y-toggle:hover { background: #f7fafc; }
.a11y-toggle:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

.a11y-reset {
  width: 100%; padding: 10px 14px;
  background: #fee; color: #c0241f;
  border: 1px solid #fcd; border-radius: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.a11y-reset:hover { background: #fdd; }
.a11y-link {
  display: block; text-align: center;
  color: var(--c-blue); font-size: 13px; padding: 8px 0;
  text-decoration: underline;
}

/* ── User preference effects ─────────────────────────────── */
html.a11y-contrast {
  filter: contrast(1.4);
}
html.a11y-grayscale {
  filter: grayscale(1);
}
html.a11y-contrast.a11y-grayscale {
  filter: contrast(1.4) grayscale(1);
}
html.a11y-dark {
  background: #0a0a14;
}
html.a11y-dark body {
  background: #0a0a14 !important;
  color: #f1f5f9 !important;
}
html.a11y-dark .band { background: #0a0a14 !important; color: #f1f5f9 !important; }
html.a11y-dark .topbar { background: rgba(20, 20, 30, 0.95) !important; }
html.a11y-dark .topbar .nav a,
html.a11y-dark .brand { color: #f1f5f9 !important; }

html.a11y-links a,
html.a11y-links button:not(.a11y-toggle):not(.a11y-close):not(.a11y-stepper button):not(.a11y-reset):not(#a11y-trigger) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 1px dashed currentColor !important;
  outline-offset: 2px !important;
}

html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.a11y-readable body,
html.a11y-readable * {
  font-family: "Arial", "Heebo", sans-serif !important;
  letter-spacing: 0 !important;
  word-spacing: .15em !important;
  line-height: 1.7 !important;
}

html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><polygon points='2,2 2,32 12,24 18,36 26,32 18,22 30,22' fill='black' stroke='white' stroke-width='2'/></svg>") 0 0, auto !important;
}

/* Make sure the focus ring is always visible (WCAG 2.4.7) */
*:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

.hamburger {
  display: none; flex-direction: column; gap: 4px;
  padding: 8px; margin-inline-start: auto;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--c-navy); border-radius: 2px; }

/* ── hero ─────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--c-navy) 0%, #0d2660 60%, var(--c-blue) 100%);
  color: #fff; min-height: min(78vh, 760px);
  display: grid; place-items: center;
  padding: 120px 0 96px;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 80% 10%,  rgba(67,199,243,0.30), transparent 70%),
    radial-gradient(50% 50% at 10% 90%,  rgba(39,215,224,0.18), transparent 70%);
}
.hero-globe {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  display: grid; align-items: start; justify-items: center;
  overflow: hidden;
  opacity: .85;
}
.hero-globe img {
  width: 110%; height: 110%;
  object-fit: cover;
  object-position: center 18%;
  max-width: none; max-height: none;
  margin-top: -8%;
  animation: globeBreathe 18s ease-in-out infinite;
  filter: drop-shadow(0 0 60px rgba(67,199,243,.15));
}
@keyframes globeBreathe {
  0%, 100% { transform: scale(1) translate3d(0,0,0); }
  50%      { transform: scale(1.04) translate3d(-1%, 1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-globe img, .hero-grid, .hero-glow { animation: none !important; }
}
.hero-slides {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--max); padding: 0 24px;
  /* Stack all slides on the same grid cell so the container always
     reserves the height of the TALLEST slide. Without this, switching
     slides on mobile snapped the section between heights and produced
     the "jumpy" effect the operator reported. */
  display: grid;
  grid-template: 1fr / 1fr;
}
.hero-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  /* Hidden slides stay in the layout (so they keep the height) but are
     invisible and untargetable. Fade in/out instead of display:none. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.hero-slide.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: fadeUp .7s ease both;
}
.hero-text { max-width: 620px; }

/* Hero media (right-of-text in LTR, left-of-text in RTL) */
.hero-media {
  position: relative;
  display: grid; place-items: center;
  min-height: 380px;
  perspective: 1400px;
}
.hero-media img {
  position: relative; z-index: 2;
  max-width: 100%;
  max-height: clamp(360px, 56vh, 640px);
  width: auto; height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 36px 60px rgba(0,0,0,.55))
    drop-shadow(0 8px 24px rgba(67,199,243,.28));
  transform-origin: center;
}
.hero-media-glow {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(55% 55% at 50% 50%, rgba(67,199,243,.32), transparent 65%),
    radial-gradient(70% 70% at 50% 60%, rgba(39,215,224,.18), transparent 70%);
  filter: blur(8px);
  animation: heroMediaGlow 8s ease-in-out infinite;
}
@keyframes heroMediaGlow {
  0%,100% { transform: scale(1) translate3d(0,0,0); opacity: .85; }
  50%     { transform: scale(1.08) translate3d(-1.5%, -2%, 0); opacity: 1; }
}

/* Float + scale-in entrance */
.hero-slide.active .hero-media img {
  animation:
    heroMediaIn 1.2s cubic-bezier(.16,1,.3,1) .25s both,
    heroMediaFloat 7s ease-in-out 1.4s infinite;
}
@keyframes heroMediaIn {
  from { opacity: 0; transform: translateY(40px) scale(.85) rotateY(-8deg); filter: blur(20px) drop-shadow(0 0 0 transparent); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroMediaFloat {
  0%,100% { transform: translateY(0) rotateZ(0deg); }
  50%     { transform: translateY(-10px) rotateZ(.6deg); }
}

@media (max-width: 980px) {
  .hero-slide,
  .hero-slide.active { grid-template-columns: 1fr; gap: 32px; }
  .hero-media { min-height: 320px; }
  .hero-media img { max-height: 380px; }
  .hero-text { max-width: 100%; }
}
.hero-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.10);
  color: var(--c-cyan);
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid rgba(67,199,243,0.30);
}
.hero-text h1 {
  margin: 18px 0 18px;
  font-family: "Rubik", "Heebo", "Inter", system-ui, sans-serif;
  font-size: var(--t-hero); font-weight: 900; line-height: 1.04;
  letter-spacing: -0.035em;
}
.hero-text p {
  font-size: clamp(15px, 1.3vw, 19px);
  color: rgba(255,255,255,0.78);
  max-width: 620px; line-height: 1.6;
  margin: 0 0 28px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-pager {
  position: absolute; z-index: 3; bottom: 32px; inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
}
html[dir="rtl"] .hero-pager { transform: translateX(50%); }
.hero-pager button {
  width: 32px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.25);
  transition: background .25s, width .25s;
}
.hero-pager button.active { background: var(--c-cyan); width: 56px; }

/* ── bands ────────────────────────────────────────────────── */
.band { padding: 96px 0; }
.band-dark {
  background: linear-gradient(180deg, var(--c-navy), #0d2660);
  color: #fff;
}
.band-about {
  background:
    linear-gradient(180deg, var(--c-navy), #0d2660),
    radial-gradient(ellipse at 20% 0%, rgba(67,199,243,0.20), transparent 60%);
  background-blend-mode: normal;
}

/* ── Moked 360 flagship section ───────────────────────────── */
.band-moked {
  background:
    linear-gradient(180deg, #0e2814 0%, #0d2614 60%, #14361f 100%),
    radial-gradient(ellipse at 80% 0%, rgba(140,196,65,.15), transparent 60%);
  color: #fff;
  position: relative;
}
.band-moked::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: 200px; pointer-events: none;
  background:
    radial-gradient(60% 100% at 80% 0%, rgba(140,196,65,.18), transparent 60%);
}
.band-moked .section-title { color: #fff; line-height: 1.05; }

/* ── Military-style "חמ״ל 360" wordmark ─────────────────── */
.moked-brand {
  display: inline-block;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: .04em;
  text-shadow:
    0 0 30px rgba(140,196,65,.45),
    0 4px 0 rgba(0,0,0,.25);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.35));
}
.moked-brand-he {
  font-family: "Suez One", "Heebo", system-ui, sans-serif;
  font-weight: 400;       /* Suez One is single-weight, very heavy already */
  color: #c8e88a;
  /* Stencil-like cuts using inset shadow */
  text-shadow:
    0 0 22px rgba(140,196,65,.50),
    0 3px 0 rgba(0,0,0,.30);
}
.moked-brand-num {
  font-family: "Black Ops One", "Russo One", monospace;
  font-weight: 400;
  color: #8cc441;
  letter-spacing: .08em;
  margin-inline-start: .15em;
  text-shadow:
    0 0 18px rgba(140,196,65,.65),
    0 0 4px #5e8a25,
    0 3px 0 rgba(0,0,0,.30);
  /* Stencil break: gold edges with green core */
  -webkit-text-stroke: .5px rgba(91,138,42,.6);
}
.band-moked .hero-eyebrow {
  background: rgba(140,196,65,.15);
  color: #8cc441;
  border: 1px solid rgba(140,196,65,.4);
}
.moked-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 80px;
}
.moked-text { max-width: 560px; }
.moked-lead {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  margin: 18px 0 28px;
}
.moked-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.moked-mockup {
  position: relative;
}
.moked-mockup::before {
  content: ""; position: absolute; inset: -10% -5% -10% -5%;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(140,196,65,.25), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
.moked-mockup .moked-dashboard {
  position: relative; z-index: 1;
  width: 100%; height: auto;
  border-radius: 12px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    0 0 0 1px rgba(140,196,65,.2);
}
/* Phones float on top of the dashboard, over the MAP side (left in RTL),
   so the events sidebar (right) stays visible. */
.moked-mockup .moked-phones {
  position: absolute;
  z-index: 2;
  width: 42%;
  bottom: -8%;
  inset-inline-end: -4%;
  filter:
    drop-shadow(0 26px 50px rgba(0,0,0,.55))
    drop-shadow(0 8px 18px rgba(140,196,65,.30));
  animation: mokedPhonesFloat 7s ease-in-out infinite;
}
@keyframes mokedPhonesFloat {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50%      { transform: translateY(-8px) rotateZ(-.5deg); }
}
@media (max-width: 980px) {
  .moked-mockup .moked-phones {
    width: 50%;
    bottom: -4%;
    inset-inline-end: 0;
  }
}
.moked-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.moked-feature {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(140,196,65,.15);
  border-radius: var(--r-card);
  padding: 24px 22px;
  transition: transform .25s, border-color .25s, background .25s;
}
.moked-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(140,196,65,.45);
  background: rgba(140,196,65,.06);
}
.moked-feature-icon {
  font-size: 28px;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 8px rgba(140,196,65,.3));
}
.moked-feature h3 {
  font-family: "Rubik", "Heebo", "Inter", system-ui, sans-serif;
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 8px;
}
.moked-feature p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: 0;
}

@media (max-width: 980px) {
  .moked-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 48px;
  }
}

/* ── Downloads section (mirrors live alpha-poc.co.il footer style) ── */
.downloads-block {
  background: #000;
  padding: 32px;
  margin: 28px auto 0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  text-align: center;
}
.apk-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  letter-spacing: .02em;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.apk-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.apk-btn:active { transform: translateY(0); }
.apk-operational { background: #556b2f; }   /* olive — operational */
.apk-civilian    { background: #6c4ab6; }   /* purple — civilian */
.apk-note {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

/* ── Products page ────────────────────────────────────────── */
.page-header { padding: 64px 0 48px; }
.page-header .section-title {
  margin-bottom: 16px;
  text-align: center;
}
.page-header .section-sub {
  text-align: center;
  margin: 0 auto 0;
  max-width: 720px;
}

.nav a.active {
  color: var(--c-blue);
  font-weight: 700;
}
.nav a.active::after {
  transform: scaleX(1);
}

.products-detail { padding-top: 32px; }
.products-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.product-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(67,199,243,.5);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.product-card-img {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(67,199,243,.10), transparent 70%),
    rgba(255,255,255,.02);
  display: grid; place-items: center;
  padding: 24px;
}
.product-card-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 40px rgba(0,0,0,.55))
    drop-shadow(0 4px 12px rgba(67,199,243,.18));
  transition: transform .35s ease;
}
.product-card:hover .product-card-img img {
  transform: scale(1.05) translateY(-2px);
}
.product-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: right;
}
.product-card-body h3 {
  font-family: "Rubik", "Heebo", "Inter", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 8px;
}
.product-card-tagline {
  color: var(--c-cyan);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 16px;
}
.product-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.7;
}
.product-specs li {
  position: relative;
  padding-inline-end: 18px;
}
.product-specs li::before {
  content: "✓";
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  color: var(--c-cyan);
  font-weight: 800;
}
.product-card-body .cta {
  align-self: flex-start;
  margin-top: auto;
}

.section-title {
  margin: 0 0 12px;
  font-family: "Rubik", "Heebo", "Inter", system-ui, sans-serif;
  font-size: var(--t-h2); font-weight: 900; line-height: 1.08;
  letter-spacing: -0.028em;
}
.band-dark .section-title { color: #fff; }
.section-sub {
  margin: 0 0 56px;
  color: var(--c-text-soft); font-size: 17px;
  max-width: 720px; line-height: 1.6;
}
.band-dark .section-sub { color: rgba(255,255,255,0.72); }

/* ── cards ────────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
}
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 32px 28px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: block;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 110% 0%, rgba(67,199,243,.15), transparent 60%);
  opacity: 0; transition: opacity .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: rgba(14,75,155,.4); }
.card:hover::before { opacity: 1; }
.card-num {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: var(--c-blue); margin-bottom: 12px;
}
.card h3 {
  margin: 0 0 12px;
  font-family: "Rubik", "Heebo", "Inter", system-ui, sans-serif;
  font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.015em;
}
.card p {
  margin: 0 0 16px; color: var(--c-text-soft);
  font-size: 15px; line-height: 1.6;
}
.card-link {
  display: inline-block;
  font-weight: 700; font-size: 14px;
  color: var(--c-blue);
}

/* ── products row ─────────────────────────────────────────── */
.products-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.product {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-card);
  padding: 24px 18px;
  text-align: center;
  transition: transform .25s, border-color .25s, background .25s;
}
.product:hover { transform: translateY(-4px); border-color: rgba(67,199,243,0.5); background: rgba(67,199,243,0.05); cursor: pointer; }
.product[role="button"] { cursor: pointer; }
.product:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 4px; }

/* ── Product spec dialog ──────────────────────────────────── */
.product-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 90vw;
  max-height: 90vh;
}
.product-dialog::backdrop {
  background: rgba(8, 26, 67, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.product-dialog[open] {
  display: grid;
  place-items: center;
  inset: 0;
  margin: auto;
}
.product-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 32px;
  background: linear-gradient(180deg, #0d2660 0%, var(--c-navy) 100%);
  border: 1px solid rgba(67,199,243,0.3);
  border-radius: 18px;
  padding: 36px 40px;
  width: min(900px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(67,199,243,0.15);
  color: #fff;
  position: relative;
}
.product-dialog-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.product-dialog-close:hover { background: rgba(255,84,84,0.20); color: #fff; }
.product-dialog-img {
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(67,199,243,0.20), transparent 70%),
    rgba(255,255,255,0.02);
  border-radius: 14px;
  display: grid; place-items: center;
  padding: 28px;
  min-height: 260px;
}
.product-dialog-img img {
  max-width: 100%;
  max-height: 320px;
  width: auto; height: auto;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.55))
          drop-shadow(0 6px 16px rgba(67,199,243,0.25));
}
.product-dialog-body { text-align: right; }
.product-dialog-body h3 {
  font-family: "Rubik", "Heebo", "Inter", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 6px;
}
.product-dialog-body #pd-tagline {
  color: var(--c-cyan);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 18px;
}
.product-dialog-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
@media (max-width: 760px) {
  .product-dialog-grid { grid-template-columns: 1fr; padding: 24px; gap: 18px; }
  .product-dialog-body h3 { font-size: 26px; }
}

/* ── Industries: clickable buttons + solution dialog ─────── */
button.industry {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  text-align: inherit;
}
button.industry:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 4px; }

.industry-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 90vw;
  max-height: 90vh;
}
.industry-dialog::backdrop {
  background: rgba(8, 26, 67, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.industry-dialog[open] {
  display: grid;
  place-items: center;
  inset: 0;
  margin: auto;
}
.industry-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 32px;
  background: linear-gradient(180deg, #0d2660 0%, var(--c-navy) 100%);
  border: 1px solid rgba(67,199,243,0.3);
  border-radius: 18px;
  padding: 36px 40px;
  width: min(900px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(67,199,243,0.15);
  color: #fff;
  position: relative;
}
.industry-dialog-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.industry-dialog-close:hover { background: rgba(255,84,84,0.20); color: #fff; }
.industry-dialog-img {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  min-height: 240px;
  position: relative;
}
.industry-dialog-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,26,67,0.10), rgba(8,26,67,0.55));
}
.industry-dialog-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.15) contrast(1.08) brightness(.85) hue-rotate(-6deg);
}
.industry-dialog-body { text-align: right; }
.industry-dialog-eyebrow {
  display: inline-block;
  background: rgba(67,199,243,.15);
  color: var(--c-cyan);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em;
  border: 1px solid rgba(67,199,243,.4);
  margin-bottom: 12px;
}
.industry-dialog-body h3 {
  font-family: "Rubik", "Heebo", "Inter", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 10px;
}
.industry-dialog-body #ind-tagline {
  color: rgba(255,255,255,.8);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}
@media (max-width: 760px) {
  .industry-dialog-grid { grid-template-columns: 1fr; padding: 24px; gap: 18px; }
  .industry-dialog-body h3 { font-size: 24px; }
}
.product img {
  height: 140px; width: auto; object-fit: contain;
  margin: 0 auto 14px;
  filter:
    drop-shadow(0 22px 40px rgba(0,0,0,.55))
    drop-shadow(0 4px 12px rgba(67,199,243,.18));
  transition: filter .35s ease, transform .35s ease;
}
.product:hover img {
  transform: translateY(-2px) scale(1.04);
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,.7))
    drop-shadow(0 6px 18px rgba(67,199,243,.32));
}
.product h4 {
  margin: 0 0 6px;
  font-family: "Rubik", "Heebo", "Inter", system-ui, sans-serif;
  font-size: 18px; font-weight: 800; color: #fff;
  letter-spacing: -0.005em;
}
.product p {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
}
.products-cta { margin-top: 40px; text-align: center; }

/* ── industries ───────────────────────────────────────────── */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.industry {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden; isolation: isolate;
  transition: transform .25s;
}
.industry img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -1;
  filter: saturate(1.15) contrast(1.08) brightness(.85) hue-rotate(-6deg);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.industry::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(67,199,243,.18), transparent 55%),
    linear-gradient(180deg, rgba(8,26,67,.15) 0%, rgba(8,26,67,.55) 60%, rgba(8,26,67,.95) 100%);
  mix-blend-mode: normal;
}
.industry::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border: 1px solid rgba(67,199,243,.0);
  border-radius: inherit;
  transition: border-color .3s, box-shadow .3s;
}
.industry:hover::after {
  border-color: rgba(67,199,243,.35);
  box-shadow: inset 0 0 0 1px rgba(67,199,243,.25), 0 18px 50px rgba(8,26,67,.6);
}
.industry:hover img { transform: scale(1.08); filter: saturate(1.25) contrast(1.12) brightness(.95) hue-rotate(-6deg); }
.industry span {
  position: relative; z-index: 1;
  display: block; padding: 18px;
  position: absolute; bottom: 0; inset-inline-start: 0;
  font-weight: 700; font-size: 17px; color: #fff;
  letter-spacing: .02em;
}
.industry:hover { transform: translateY(-4px); }

/* ── about ────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.about-body {
  font-size: 17px; line-height: 1.7;
  color: rgba(255,255,255,0.78);
  margin: 16px 0 24px;
}
.bullets { list-style: none; padding: 0; margin: 0; }
.bullets li {
  position: relative; padding-inline-start: 28px;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.85); font-size: 15px;
}
.bullets li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; top: 8px;
  width: 14px; height: 8px;
  border-inline-start: 2.5px solid var(--c-cyan);
  border-bottom: 2.5px solid var(--c-cyan);
  transform: rotate(-45deg);
}
.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-card);
  padding: 28px 24px;
  backdrop-filter: blur(10px);
}
.stat-num {
  font-size: clamp(34px, 4vw, 52px); font-weight: 800;
  color: var(--c-cyan);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-lbl {
  margin-top: 8px;
  font-size: 13px; color: rgba(255,255,255,0.7);
}

/* ── Store coming-soon page ──────────────────────────────── */
.store-coming {
  text-align: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 44px 32px;
  margin-top: 8px;
}
.store-coming-icon {
  font-size: 56px;
  margin-bottom: 12px;
  filter: drop-shadow(0 8px 16px rgba(67,199,243,.35));
}
.store-coming h2 {
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 8px;
}
.store-coming > p {
  color: rgba(255,255,255,.72);
  font-size: 15px;
  margin: 0 0 22px;
}
.store-or {
  margin: 28px 0 14px !important;
  color: rgba(255,255,255,.6) !important;
  font-size: 13px !important;
}

/* ── Sales reps cards above contact form ──────────────────── */
.reps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}
.rep-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.rep-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-blue);
  box-shadow: 0 12px 28px rgba(8,26,67,.12);
}
.rep-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--c-blue), var(--c-cyan));
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.rep-avatar-photo { background: transparent; padding: 0; }
.rep-avatar-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.rep-body { min-width: 0; }
.rep-name { font-weight: 800; font-size: 15px; color: var(--c-navy); }
.rep-role { font-size: 12px; color: var(--c-text-soft); margin: 2px 0 4px; }
.rep-mail {
  font-size: 12px;
  color: var(--c-blue);
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}

/* ── contact ──────────────────────────────────────────────── */
.band-contact { background: var(--c-surface); }
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 720px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  font: inherit; color: var(--c-text);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(14,75,155,0.15);
}
.contact-form textarea { grid-column: 1 / -1; resize: vertical; }
.contact-form button { grid-column: 1 / -1; justify-self: start; padding: 14px 36px; }
.contact-meta {
  display: flex; gap: 28px; flex-wrap: wrap; margin-top: 32px;
  color: var(--c-text-soft); font-size: 15px;
}
.contact-meta a { display: inline-flex; gap: 8px; align-items: center; }
.contact-meta a:hover { color: var(--c-blue); }

/* ── footer ───────────────────────────────────────────────── */
.footer {
  background: var(--c-navy);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 32px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer h4 { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 700; }
.footer a { display: block; padding: 4px 0; color: rgba(255,255,255,0.6); transition: color .2s; }
.footer a:hover { color: var(--c-cyan); }
.footer-blurb { margin: 16px 0 0; font-size: 14px; line-height: 1.6; }
.footer-bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; opacity: .7;
}
.social-links {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.social-links a {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .2s, background .2s, border-color .2s;
}
.social-links a:hover {
  transform: translateY(-2px);
  background: rgba(67,199,243,.18);
  border-color: rgba(67,199,243,.55);
}
.social-links img {
  filter: brightness(0) invert(1);
  opacity: .85;
}
.social-links a:hover img { opacity: 1; }

/* ── animations ───────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.fade-up {
  opacity: 0; transform: translateY(32px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.fade-up.in { opacity: 1; transform: none; }

/* ── richer reveals per element type ──────────────────────── */
/* Industries: clip-path reveal alternating sides + zoom */
.industry.fade-up {
  opacity: 0; transform: translateY(40px) scale(.92);
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 1s cubic-bezier(.16,1,.3,1),
    transform 1.1s cubic-bezier(.16,1,.3,1),
    clip-path 1.1s cubic-bezier(.16,1,.3,1);
}
.industry.fade-up:nth-child(even) { clip-path: inset(0 0 0 100%); }
.industry.fade-up.in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.industry.fade-up:nth-child(even).in { clip-path: inset(0 0 0 0); }

/* Industry image internal zoom-out reveal */
.industry img { transform-origin: center; }
.industry.fade-up img { transform: scale(1.25); transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter .4s; }
.industry.fade-up.in img { transform: scale(1); }
.industry.fade-up.in:hover img { transform: scale(1.08); }

/* Products: blur + scale-in */
.product.fade-up {
  opacity: 0; transform: translateY(24px) scale(.88);
  filter: blur(10px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1s cubic-bezier(.16,1,.3,1),
    filter .8s ease;
}
.product.fade-up.in { opacity: 1; transform: none; filter: blur(0); }

/* Cards: slide-up with subtle 3D tilt */
.card.fade-up {
  opacity: 0;
  transform: translateY(40px) rotateX(8deg);
  transform-origin: center bottom;
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.card.fade-up.in { opacity: 1; transform: none; }
.cards-grid { perspective: 1200px; }

/* Stats: pop-in scale (only inside a .fade-up wrapper that hasn't fired yet) */
.stats.fade-up .stat {
  opacity: 0; transform: translateY(20px) scale(.85);
  transition: opacity .8s cubic-bezier(.34,1.4,.64,1), transform .8s cubic-bezier(.34,1.4,.64,1);
}
.stats.fade-up.in .stat { opacity: 1; transform: none; }
.stats.fade-up.in .stat:nth-child(1) { transition-delay: .05s; }
.stats.fade-up.in .stat:nth-child(2) { transition-delay: .15s; }
.stats.fade-up.in .stat:nth-child(3) { transition-delay: .25s; }
.stats.fade-up.in .stat:nth-child(4) { transition-delay: .35s; }

/* Section titles + leads: slide-up clip reveal */
.section-title.fade-up,
.hero-eyebrow.fade-up,
.about-body.fade-up,
.section-sub.fade-up {
  clip-path: inset(0 0 100% 0);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1),
    clip-path 1s cubic-bezier(.16,1,.3,1);
}
.section-title.fade-up.in,
.hero-eyebrow.fade-up.in,
.about-body.fade-up.in,
.section-sub.fade-up.in { clip-path: inset(0 0 0 0); }

/* Hero ambient motion */
@keyframes heroGlow {
  0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .9; }
  50%      { transform: translate3d(2%, -1.5%, 0) scale(1.06); opacity: 1; }
}
.hero-glow { animation: heroGlow 14s ease-in-out infinite; }

@keyframes heroGridDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(60px, 60px, 0); }
}
.hero-grid { animation: heroGridDrift 28s linear infinite; }

/* Hero text staggered entrance */
.hero-slide.active .hero-eyebrow { animation: heroIn .9s cubic-bezier(.16,1,.3,1) .05s both; }
.hero-slide.active h1             { animation: heroIn 1.05s cubic-bezier(.16,1,.3,1) .15s both; }
.hero-slide.active .hero-text p   { animation: heroIn .95s cubic-bezier(.16,1,.3,1) .3s both; }
.hero-slide.active .hero-cta      { animation: heroIn .9s cubic-bezier(.16,1,.3,1) .45s both; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* CTA pulse glow */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(67,199,243,.0); }
  50%      { box-shadow: 0 0 0 10px rgba(67,199,243,.0), 0 6px 22px rgba(67,199,243,.35); }
}
.cta-primary { animation: ctaPulse 3.6s ease-in-out infinite; }
.cta-primary:hover { animation: none; }
/* stagger inside grids */
.cards-grid .fade-up.in:nth-child(1)  { transition-delay: .00s; }
.cards-grid .fade-up.in:nth-child(2)  { transition-delay: .08s; }
.cards-grid .fade-up.in:nth-child(3)  { transition-delay: .16s; }
.cards-grid .fade-up.in:nth-child(4)  { transition-delay: .24s; }
.cards-grid .fade-up.in:nth-child(5)  { transition-delay: .32s; }
.cards-grid .fade-up.in:nth-child(6)  { transition-delay: .40s; }
.products-row .fade-up.in:nth-child(1) { transition-delay: .00s; }
.products-row .fade-up.in:nth-child(2) { transition-delay: .07s; }
.products-row .fade-up.in:nth-child(3) { transition-delay: .14s; }
.products-row .fade-up.in:nth-child(4) { transition-delay: .21s; }
.products-row .fade-up.in:nth-child(5) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .fade-up { transition: none; opacity: 1; transform: none; }
}

/* ── smooth band transitions ──────────────────────────────── */
.band { position: relative; overflow: hidden; }
.band-dark, .band-about { background-color: var(--c-navy); }
/* fade between dark band → next dark band (continuity glow) */
.band-dark::before,
.band-about::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: 120px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,26,67,0) 0%, rgba(67,199,243,.04) 50%, rgba(8,26,67,0) 100%);
}
/* dark → light (band-contact) seam: soft fade-out at bottom of dark */
.band-about::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: 160px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,26,67,0) 0%, rgba(8,26,67,.6) 60%, var(--c-navy) 100%);
  opacity: 0;
}
/* light band intro (band-contact): top glow */
.band-contact { position: relative; }
.band-contact::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: 200px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,26,67,.04) 0%, rgba(8,26,67,0) 100%);
}
/* hero → first band (solutions) seam: dark fade-in */
.hero { position: relative; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: 120px; pointer-events: none; z-index: 4;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.08) 100%);
}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav { display: none; }
  .hamburger { display: inline-flex; }
  .topbar-end .cta { display: none; }
  /* Hamburger toggle — JS flips `.open` on click. Without this rule
     the nav would stay `display:none` even when the class is set,
     making the corner button on mobile a no-op. The open menu drops
     out of the topbar as a full-width sheet so all the links are
     thumb-reachable on small screens. */
  .nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; inset-inline: 0;
    background: #fff;
    padding: 12px 18px 16px;
    border-block-start: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 12px 24px rgba(0,0,0,.10);
    gap: 4px;
    z-index: 50;
  }
  .nav.open a {
    padding: 12px 4px;
    border-block-end: 1px solid rgba(0,0,0,.06);
    font-size: 16px;
  }
  .nav.open a:last-child { border-block-end: 0; }
  .hamburger.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .hamburger span { transition: transform .18s ease, opacity .18s ease; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .band { padding: 64px 0; }
  /* Mobile keeps a min-height so the section doesn't collapse below
     the tallest slide's content. Stacked-grid handles the rest. */
  .hero { padding: 80px 0 64px; min-height: 640px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* topbar click-to-call (gil 2026-07-16) */
.nav-call{white-space:nowrap;font-variant-numeric:tabular-nums;direction:ltr;display:inline-flex;align-items:center;gap:6px;color:#081a43;background:transparent;border:1.5px solid rgba(8,26,67,.22);font-weight:700;}
.nav-call:hover{background:rgba(8,26,67,.06);border-color:rgba(8,26,67,.45);color:#081a43;}
@media(max-width:1200px){.nav-call{display:none;}}