/* ==========================================================================
   Smart Flow Services — 3D brand site
   Dark industrial-tech system: near-black blue-grey hall, one electric-cyan
   accent. Heebo (Hebrew display+body) / JetBrains Mono (spec labels).
   ========================================================================== */

:root {
  --bg:       oklch(14% 0.02 250);
  --surface:  oklch(19% 0.025 250);
  --fg:       oklch(95% 0.01 250);
  --muted:    oklch(68% 0.02 250);
  --border:   oklch(30% 0.03 250);
  --accent:   oklch(80% 0.12 200);
  --accent-dim: oklch(80% 0.12 200 / 0.14);
  --danger:   oklch(65% 0.2 25);

  --font-display: 'Heebo', system-ui, sans-serif;
  --font-body:    'Heebo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Direction sign: flips slide/hover directions when the language
     toggle switches the document between LTR (en) and RTL (he). */
  --dir-sign: 1;
}
html[dir="rtl"] { --dir-sign: -1; }

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--font-mono); }

/* --- 3D canvas + static fallback ----------------------------------------- */

#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scene-fallback {
  position: fixed;
  inset: 0;
  display: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 110%, var(--accent-dim), transparent 65%),
    linear-gradient(180deg, oklch(10% 0.02 250), oklch(17% 0.025 250));
}
body.no-webgl #scene-canvas { display: none; }
body.no-webgl .scene-fallback { display: block; }

/* Subtle scanline/vignette over everything — sells the screen feel. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 60%, rgb(0 0 0 / 0.35));
  z-index: 5;
}

/* --- HUD chrome ------------------------------------------------------------ */

.hud-top {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-block-end: 1px solid var(--border);
  background: oklch(14% 0.02 250 / 0.6);
  backdrop-filter: blur(8px);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.wordmark-logo {
  height: 32px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px var(--accent-dim));
}

.lang-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }

.led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 22px var(--accent-dim);
  animation: led-pulse 2.4s ease-in-out infinite;
}

@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hud-status {
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.hud-status #hud-section-label { color: var(--accent); }
.hud-dot { margin: 0 8px; }

.hud-bottom {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 20;
  /* Tall bar that hosts the 56px chat + WhatsApp FABs inside it, so they
     never float over (or "step on") the menu, hero or panels. */
  height: 88px;
  padding: 16px 28px;
  border-block-start: 1px solid var(--border);
  background: oklch(14% 0.02 250 / 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hud-hint { font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }

/* --- Game menu -------------------------------------------------------------- */

/* HUD frame: hairline cyan border + dark glass backplate, so the 3D hall
   never swallows the text. Corner brackets sell the targeting-HUD feel. */
.menu, .hero {
  padding: 20px 26px;
  background: rgb(4 10 18 / 0.58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
}
.menu::before, .menu::after,
.hero::before, .hero::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.menu::before, .hero::before {
  inset-block-start: -1px;
  inset-inline-start: -1px;
  border-block-start: 2px solid var(--accent);
  border-inline-start: 2px solid var(--accent);
}
.menu::after, .hero::after {
  inset-block-end: -1px;
  inset-inline-end: -1px;
  border-block-end: 2px solid var(--accent);
  border-inline-end: 2px solid var(--accent);
}

.menu {
  position: fixed;
  inset-inline-start: 28px;
  /* Clear the taller .hud-bottom bar (88px) that now hosts the FABs. */
  inset-block-end: 96px;
  z-index: 15;
}

.menu-kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-block-end: 14px;
}

.menu ul { list-style: none; }

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  text-align: start;
  cursor: pointer;
  transition: color 0.18s, transform 0.18s;
}

.menu-arrow {
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--accent);
  opacity: 0;
  display: inline-block;
  transform: translateX(calc(6px * var(--dir-sign))) scaleX(var(--dir-sign));
  transition: opacity 0.18s, transform 0.18s;
}

.menu-item:hover,
.menu-item:focus-visible,
.menu-item.selected {
  color: var(--accent);
  transform: translateX(calc(6px * var(--dir-sign)));
  outline: none;
}
.menu-item:hover .menu-arrow,
.menu-item:focus-visible .menu-arrow,
.menu-item.selected .menu-arrow {
  opacity: 1;
  transform: translateX(0) scaleX(var(--dir-sign));
}

body.section-open .menu,
body.section-open .hero { opacity: 0; pointer-events: none; }
.menu, .hero { transition: opacity 0.35s; }

/* --- Hero -------------------------------------------------------------------- */

.hero {
  position: fixed;
  inset-inline-end: 28px;
  /* Clear the taller .hud-bottom bar (88px) that now hosts the FABs. */
  inset-block-end: 96px;
  z-index: 15;
  max-width: min(560px, 44vw);
  text-align: start;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  margin-block-end: 18px;
}

.hero-sub {
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--muted);
}

.hero-cta {
  margin-block-start: 26px;
}
.hero-cta .btn-cta {
  font-size: 17px;
}

/* --- Panels: big side card + floating callout popups -------------------------
   Each section keeps its full-width info in a slide-in side card (.panel-inner,
   restored — the main content home). On top of that, .callout popups float over
   the 3D in the middle of the page and connect to the server with straight
   connector lines, each starting from a DIFFERENT point on the rack face. */
.panel {
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow: hidden;
}
.panel.open { opacity: 1; }

/* Cards inside a CLOSED panel must not swallow clicks — they sit over the menu
   and hero. Only the open panel's cards are interactive. */
.panel .panel-inner,
.panel .callout { pointer-events: none; }
.panel.open .panel-inner,
.panel.open .callout { pointer-events: auto; }

/* The big side card — restored as the main content column. */
.panel-inner {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: min(760px, 100%);
  background: oklch(14% 0.02 250 / 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-inline-end: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 104px 52px 90px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.panel-inner::-webkit-scrollbar { width: 6px; }
.panel-inner::-webkit-scrollbar-thumb { background: var(--accent); }

/* Floating callout popups over the middle of the 3D. */
.callout {
  position: fixed;
  z-index: 2;
  max-width: min(560px, 52vw);
  max-height: min(76vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: oklch(14% 0.02 250 / 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  padding: 28px 34px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.callout::-webkit-scrollbar { width: 6px; }
.callout::-webkit-scrollbar-thumb { background: var(--accent); }

/* Single popup per section, positioned to start just AFTER the side card's
   right edge (the card is min(760px, 100%) at the left) and stop 24px from
   the viewport edge — so the two can never overlap no matter how the window
   is resized. The panel clips overflow as a last resort. */
.callout-pop-a { inset-inline-start: calc(min(760px, 100%) + 24px); inset-inline-end: 24px; inset-block-start: 6%; }
.callout-pop-b { inset-inline-start: calc(min(760px, 100%) + 24px); inset-inline-end: 24px; inset-block-end: 6%; }

/* Wide variant — used by the About tech-stack popup: sized to its content
   (grows taller as more cards are added), never forced full-screen, no scroll. */
.callout-wide {
  max-width: min(660px, 60vw);
  max-height: none;
  inset-block-start: 48px;
  inset-block-end: auto;
}

.panel-kicker {
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-block-end: 16px;
}

.panel-inner h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3vw, 42px);
  margin-block-end: 28px;
}

.callout h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 36px);
  margin-block-end: 20px;
}

/* Connector lines — dashed data-bus strokes drawn by main.js from the rack's
   projected anchor point to each callout popup. Straight by default. */
.connectors {
  position: fixed;
  inset: 0;
  z-index: 17;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.connectors path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  animation: conn-flow 1.2s linear infinite;
  opacity: 0.55;
}
.connectors circle.conn-dot {
  fill: var(--accent);
  animation: conn-pulse 1.4s ease-in-out infinite;
}
@keyframes conn-flow { to { stroke-dashoffset: -12; } }
@keyframes conn-pulse {
  0%, 100% { opacity: 0.35; r: 2; }
  50% { opacity: 1; r: 4; }
}
/* Services modules — spec-sheet cards, compact enough to sit inside a callout */
.module-list {
  display: grid;
  gap: 10px;
}

.module {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px 20px;
  transition: border-color 0.2s;
}
.module:hover { border-color: var(--accent); }

.module h3 {
  font-size: 20px;
  font-weight: 800;
  margin-block-end: 6px;
}

.module-spec {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-block-end: 8px;
}

.module-spec a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.12em;
}
.module-spec a:hover { color: var(--fg); }

.module-project { cursor: pointer; position: relative; }
.module-project:hover { border-color: var(--accent); }
.module-project:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.module-board {
  margin-block-start: 10px;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-align: end;
}
.module-project:hover .module-board { color: var(--accent); }

.module p:last-child {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

/* How I'll grow your business — the "HOW" block */
.grow {
  margin-block-start: 20px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--border);
}
.grow-heading {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  margin-block-end: 8px;
}
.grow-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  margin-block-end: 12px;
  max-width: 52ch;
}
.grow-list {
  list-style: none;
  display: grid;
  gap: 9px;
}
.grow-list li {
  position: relative;
  padding-inline-start: 24px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.grow-list li::before {
  content: '>';
  position: absolute;
  inset-inline-start: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  transform: scaleX(var(--dir-sign));
}

/* About */
.about-body p {
  font-size: 17px;
  line-height: 1.7;
  margin-block-end: 14px;
  max-width: 52ch;
}

.spec-list {
  list-style: none;
  margin-block-start: 20px;
  border-block-start: 1px solid var(--border);
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-block-end: 1px solid var(--border);
  font-size: 14px;
  letter-spacing: 0.12em;
}
.spec-list li span:first-child { color: var(--muted); }
.spec-list li span:last-child { color: var(--accent); }

/* Contact form */
.field { margin-block-end: 18px; }

.field label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-block-end: 8px;
}
.label-opt { color: var(--muted); font-weight: 400; }

.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  border-radius: 0;
  transition: border-color 0.2s;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger); }

.field-error {
  display: none;
  margin-block-start: 6px;
  font-size: 14px;
  color: var(--danger);
}
.field.has-error .field-error { display: block; }

.btn-submit {
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: oklch(14% 0.02 250);
  border: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.btn-submit:hover { filter: brightness(1.1); }
.btn-submit:active { transform: scale(0.99); }
.btn-submit[disabled] { opacity: 0.55; cursor: default; }

.form-success {
  display: none;
  margin-block-start: 14px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 16px;
}
.form-success.visible { display: block; }

.form-error {
  display: none;
  margin-block-start: 14px;
  padding: 12px 14px;
  border: 1px solid var(--danger);
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  color: var(--danger);
  font-size: 16px;
}
.form-error.visible { display: block; }

/* Contact CTA on every info panel — the site's lead source, so each panel
   funnels straight to the contact form. */
.panel-cta {
  margin-block-start: 24px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--border);
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  background: var(--accent);
  color: oklch(14% 0.02 250);
  border: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.btn-cta:hover { filter: brightness(1.1); }
.btn-cta:active { transform: scale(0.99); }
.cta-arrow { font-size: 20px; transform: scaleX(var(--dir-sign)); }
.cta-sub {
  margin-block-start: 12px;
  font-size: 16px;
  color: var(--muted);
}

/* Back button */
.btn-back {
  margin-block-start: 24px;
  padding: 12px 0;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.15s;
}
.btn-back:hover { color: var(--accent); }
.btn-back .chev { display: inline-block; transform: scaleX(var(--dir-sign)); }

/* --- Responsive ---------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero {
    inset-inline: 20px;
    inset-block-end: auto;
    inset-block-start: 96px;
    max-width: none;
  }
  .menu {
    inset-inline-start: 20px;
    inset-block-end: 64px;
  }
  .menu-item { min-height: 44px; }
  .panel-inner {
    inset-inline: 0;
    width: 100%;
    border-inline-end: 0;
    padding: 96px 22px 110px;
  }
  .callout {
    max-width: none;
    max-height: none;
    inset-inline: 14px;
    inset-block-start: 74px;
    inset-block-end: 60px;
  }
  .hud-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .menu, .hero, .menu-item, .menu-arrow { transition: none; }
  .led { animation: none; }
}