/* === Falcon Technology — site tokens ===================================== */
:root {
  /* Brand palette */
  --red: #EE3435;
  --red-soft: #F05455;
  --ink-deep: #1E122C;
  --ink-deeper: #1A1026;
  --ink-deep-2: #2D214A;
  --mute: #6C7289;
  --mute-soft: #E6E7E8;
  --blue: #4292CF;
  --blue-soft: #83C0E9;
  --amber: #F7AE1A;
  --amber-soft: #FDD254;

  /* Surfaces */
  --bg: #150C20;
  --bg-elev: #1E122C;
  --panel: #1E122C;
  --panel-2: #2D214A;
  --line: rgba(170, 165, 200, 0.10);
  --line-strong: rgba(170, 165, 200, 0.22);
  --ink: #E6E7E8;
  --ink-dim: #B9BCC7;
  --ink-faint: #6C7289;

  --max: 1440px;
  --pad: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv11";
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
/* Buttons don't inherit colour/font by default — iOS Safari paints their text system-blue,
   desktop Chrome paints it black. Inherit from the page everywhere. */
button { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
button, a { -webkit-tap-highlight-color: rgba(238, 52, 53, 0.18); }
a[href^="tel:"], a[href^="mailto:"] { color: inherit; }

.mono {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-feature-settings: "ss02", "zero";
  letter-spacing: 0.02em;
}

.label {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}

.eyebrow {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}

.h-display {
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(56px, 7.5vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.h-1 {
  font-weight: 600;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.h-2 {
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.h-3 {
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.divider { height: 1px; background: var(--line); width: 100%; }
.divider-strong { height: 1px; background: var(--line-strong); width: 100%; }

/* Cross marker — borrowed from technical drawing */
.cross {
  width: 10px; height: 10px;
  position: relative;
  flex: 0 0 auto;
}
.cross::before, .cross::after {
  content: ""; position: absolute; background: currentColor;
}
.cross::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-0.5px); }
.cross::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-0.5px); }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); display: inline-block;
}
.dot.live {
  position: relative;
}
.dot.live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--red); opacity: 0.4; animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3); }
.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: white;
}
.btn-primary:hover { background: var(--red-soft); border-color: var(--red-soft); }
.btn-arrow {
  width: 14px; height: 14px; display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 8h13M9 3l5 5-5 5' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='square'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 8h13M9 3l5 5-5 5' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='square'/></svg>") no-repeat center / contain;
  transition: transform 0.2s ease;
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Grid backdrop */
.grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}

/* Section base */
section { position: relative; }
.section-header {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--line);
  align-items: end;
}
.section-header .index {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Page transitions */
.fade-in {
  animation: fadein 0.4s ease both;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stripe placeholder */
.stripe {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.04) 0 1px,
    transparent 1px 14px
  );
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Staggered reveal in grids: each subsequent sibling gets +60ms delay */
.reveal:nth-child(2) { transition-delay: 60ms; }
.reveal:nth-child(3) { transition-delay: 120ms; }
.reveal:nth-child(4) { transition-delay: 180ms; }
.reveal:nth-child(5) { transition-delay: 240ms; }
.reveal:nth-child(6) { transition-delay: 300ms; }
.reveal:nth-child(7) { transition-delay: 360ms; }
.reveal:nth-child(8) { transition-delay: 420ms; }

/* Primary button — subtle red glow on hover */
.btn-primary {
  position: relative;
  box-shadow: 0 0 0 0 rgba(238, 52, 53, 0);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease, transform 0.15s ease;
}
.btn-primary:hover {
  box-shadow: 0 0 0 6px rgba(238, 52, 53, 0.18), 0 8px 24px -8px rgba(238, 52, 53, 0.4);
  transform: translateY(-1px);
}

/* Outline button — subtle lift */
.btn:not(.btn-primary):hover { transform: translateY(-1px); }

/* Brand mark in nav — subtle entry + idle pulse */
.nav-brand img { transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1); }
.nav-brand:hover img { transform: scale(1.08) rotate(-6deg); }

/* Animated dotted progress under each section-header on hover */
.section-header {
  position: relative;
  overflow: hidden;
}
.section-header::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px;
  width: 0; background: var(--red);
  transition: width 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal.in .section-header::after,
.section-header.in::after { width: 100%; }

/* Marquee scroll-line at very top of page (subtle) */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; background: var(--red);
  z-index: 100;
  width: 0;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* Hide scrollbar on body for cleanliness, keep functionality */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--bg); }
body::-webkit-scrollbar-thumb { background: #2D214A; }
body::-webkit-scrollbar-thumb:hover { background: #3A2B5E; }

/* Selection */
::selection { background: var(--red); color: white; }

/* Hero: use small-viewport height so mobile browser chrome doesn't overflow it */
.hero-section { min-height: 100svh; }
@media (max-width: 720px) {
  .hero-section { min-height: auto !important; padding-bottom: 56px; }
}

/* === Responsive ========================================================== */

/* Laptop / small desktop */
@media (max-width: 1200px) {
  .met-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .prin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cap-grid { gap: 48px !important; }
  .rf-top { gap: 44px !important; }
}

/* Tablet landscape */
@media (max-width: 1000px) {
  .pillar-grid,
  .product-grid,
  .mod-grid,
  .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cs-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cap-grid,
  .disc-grid,
  .contact-grid,
  .rf-top { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 40px 32px !important; }
  .pd-cta { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; padding: 44px 28px !important; }
  .footer-mark-row { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .footer-mark-row > div:last-child { align-items: flex-start !important; }
}

/* Tablet portrait */
@media (max-width: 900px) {
  .section-header { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 0 16px; }
  .pd-hero { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .pd-hero > div:last-child { max-width: 480px; }
  .stat-strip,
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Mobile */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .btn { padding: 12px 18px; font-size: 13px; min-height: 44px; }
  .section-header .index { font-size: 10px !important; }
  .container { padding: 0 20px; }

  .pillar-grid,
  .product-grid,
  .mod-grid,
  .rf-grid,
  .prin-grid,
  .met-grid,
  .spec-grid,
  .form-row { grid-template-columns: minmax(0, 1fr) !important; }

  .rf-kg { grid-template-columns: minmax(0, 1fr) !important; }
  .rf-kg > div:first-child { border-right: none !important; border-bottom: 1px solid var(--line) !important; }

  .met-grid > div,
  .stat-strip > div,
  .about-stats > div { border-right: none !important; }

  .h-1 { font-size: clamp(34px, 9vw, 52px) !important; }
  .h-2 { font-size: clamp(26px, 7vw, 38px) !important; }
  .h-3 { font-size: 19px !important; }
}

/* Small mobile */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  :root { --pad: 16px; }
  .h-display { font-size: clamp(38px, 12vw, 60px) !important; }
  .stat-strip,
  .about-stats,
  .footer-cols { grid-template-columns: minmax(0, 1fr) !important; }
  .mod-grid > div,
  .pillar-grid > div,
  .rf-grid > div { min-height: 0 !important; padding: 22px 20px !important; }
  .contact-grid > div:first-child { padding: 24px !important; }
}

/* Ensure inputs don't zoom on iOS Safari */
@media (max-width: 720px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Coarse pointers: no hover-only affordances left hanging */
@media (hover: none) {
  .product-card:hover, .prod-row:hover { background: transparent !important; }
}

/* Prevent horizontal scroll from any absolutely-positioned overflow */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Responsive media defaults */
img, video { max-width: 100%; }

/* Product-detail figure grid */
@media (max-width: 900px) {
  .fig-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* === Retrofit page, video band, product rows ============================= */
@media (max-width: 1000px) {
  .rf-case-top { grid-template-columns: 300px minmax(0, 1fr) !important; gap: 28px !important; }
  .rf-case-res { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .vid-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 720px) {
  .rf-case-top { grid-template-columns: minmax(0, 1fr) !important; }
  .rf-case-top > div:first-child { max-width: 360px !important; margin: 0 auto !important; }
}
@media (max-width: 1000px) {
  .rf-ba { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
}
@media (max-width: 640px) {
  .rf-case-stats { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 720px) {
  .rf-case-row { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 6px 16px !important; }
  .rf-case-row p { grid-column: 2 !important; }
  .prod-row { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; text-align: left; }
  .prod-thumb { width: 100% !important; max-width: 220px; }
  .row-arrow { display: none !important; }
}
@media (max-width: 480px) {
  .rf-case-row { grid-template-columns: minmax(0, 1fr) !important; }
  .rf-case-row p { grid-column: 1 !important; }
}

/* === Very large displays — keep the grid from stretching thin ============= */
@media (min-width: 1800px) {
  :root { --max: 1600px; }
}

/* Spec rows: label beside value, stacking once the pair no longer fits — a
   German label such as "HAUPTMODUL-GRUNDFLÄCHE" needs the full width alone. */
.spec-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 560px) {
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: 6px !important; }
}

/* Capability rows. 120px + 40px of fixed columns leave ~80px for the copy on a
   phone, and a German compound like "15-Achs-Servosystem" cannot wrap below its
   own length — so the row pushed past the screen. Label and index share a line,
   the copy takes the next one. */
.cap-row { grid-template-columns: 120px minmax(0, 1fr) 40px; }
@media (max-width: 720px) {
  .cap-row { grid-template-columns: minmax(0, 1fr) auto !important; gap: 6px 12px !important; }
  .cap-row > *:nth-child(1) { grid-column: 1; grid-row: 1; }
  .cap-row > *:nth-child(3) { grid-column: 2; grid-row: 1; padding-top: 0 !important; }
  .cap-row > *:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* Long compounds (German especially, and some Croatian) are single words wider
   than a phone. minmax(0,…) lets the track shrink; this lets the word break
   inside it instead of spilling over the edge. */
body { overflow-wrap: break-word; }

/* Contact info rows: a fixed 160px label column leaves too little for the value
   on a narrow phone, so the pair stacks. */
.info-row { grid-template-columns: 160px minmax(0, 1fr); }
@media (max-width: 560px) {
  .info-row { grid-template-columns: minmax(0, 1fr); gap: 6px !important; }
}

/* Breadcrumb "back" link. --mute at 11px lands around 3.6:1 on the page
   background — under the 4.5:1 AA floor for text this small, and easy to miss
   on a phone. Lifted to --ink-dim, and given a visible hit area on touch. */
.back-link { color: var(--ink-dim); }
.back-link:hover { color: var(--ink); }
@media (max-width: 720px) {
  .back-link {
    color: var(--ink);
    padding: 8px 12px 8px 10px;
    margin-left: -10px;
    border: 1px solid var(--line-strong);
  }
}

/* Page top spacing — clears the 68px fixed header.
   The roomy desktop value leaves ~112px of empty band on a phone, twice the
   hero's, so it scales down with the viewport. Lives here rather than inline
   on each page root so one rule governs all of them. */
.page-top { padding-top: 140px; }
@media (max-width: 900px) { .page-top { padding-top: 112px; } }
@media (max-width: 720px) { .page-top { padding-top: 76px; } }

/* Nav CTA — never wraps; drops the arrow, then the button itself, as space runs out */
.nav-cta { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1180px) and (min-width: 601px) { .nav-cta .btn-arrow { display: none; } .nav-cta { padding-left: 16px !important; padding-right: 16px !important; } }

/* Touch targets — every link/button at least 44px tall on phones (WCAG 2.5.5 / Apple HIG) */
@media (max-width: 768px) {
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .back-link, a.mono, button.mono, .yt-open, .topic-chip, .nav-brand { display: inline-flex; align-items: center; min-height: 44px; }
  /* smallest labels stay legible on phones (inline sizes below 11px are lifted) */
  [style*="font-size: 9px"], [style*="font-size: 9.5px"], [style*="font-size: 10px"], [style*="font-size: 10.5px"] { font-size: 11px !important; }
  .sr-spot { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .btn { min-height: 48px; }
  select, input, textarea { min-height: 44px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
}