/* FluxFront — hero · sliced verbatim from the original sections.css block (render-identical). See docs/marketing-site-architecture.md for the selector map. */
/* ===================== HERO ===================== */
.hero { padding-top: clamp(40px, 5vw, 72px); overflow: hidden; }
.hero-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 80% at 80% -10%, var(--teal-wash) 0%, transparent 46%),
    radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--surface) 70%, transparent) 0%, transparent 50%);
  opacity: 0.9;
}
.hero-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.hero-copy { max-width: 620px; }
.hero h1.display { font-size: clamp(2.9rem, 1.5rem + 4.4vw, 4.9rem); }
.ink-accent {
  position: relative; white-space: nowrap; padding-bottom: 0.04em; color: var(--ink);
  background-image: linear-gradient(90deg, var(--teal-700), var(--teal));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 0.09em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: inkDraw 0.7s var(--e-out) 0.45s forwards;
}
@keyframes inkDraw { to { background-size: 100% 0.09em; } }
@media (prefers-reduced-motion: reduce) { .ink-accent { background-size: 100% 0.09em; animation: none; } }
.hero .lead { margin-top: 22px; max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-seals {
  display: grid; grid-template-columns: repeat(3, auto); gap: 16px 28px;
  margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--hairline);
}
/* Single column below 1080. minmax(0,1fr) (not 1fr) lets the track shrink below
   the bay board's min-content width — otherwise the 4-bay board (~431px) blows the
   column out wider than a phone screen, clipping the headline + copy on the right. */
@media (max-width: 1080px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-visual { order: 2; } }
@media (max-width: 560px) { .hero-seals { grid-template-columns: 1fr; } }
/* Phones: trim the headline so it wraps comfortably within the screen. */
@media (max-width: 480px) { .hero h1.display { font-size: clamp(2.2rem, 8.5vw, 2.9rem); } }

/* ---- Bay scheduler board ---- */
.hero-visual { perspective: 1600px; }
.board {
  background: var(--cream); border: 1px solid var(--hairline-2); border-radius: var(--r-xl);
  box-shadow: var(--sh-xl); overflow: hidden;
  transform: rotateY(-2deg); transform-style: preserve-3d;
  transition: transform var(--d-4) var(--e-out);
}
.hero-visual:hover .board { transform: rotateY(0deg) rotateX(0deg); }
.board-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--hairline); background: var(--surface);
}
.board-bar-l { display: flex; align-items: center; gap: 10px; }
.board-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-wash); }
.board-title { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--ink); }
.board-date { font-size: 0.7rem; white-space: nowrap; }
.board-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--good); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--good); position: relative; }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--good); animation: pulse 1.8s var(--e-out) infinite; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
.board-hint { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3);
  padding: 8px 16px 0; transition: opacity var(--d-3); }
.board-hint.gone { opacity: 0; }
.board-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 14px 14px; }
/* Phones: 4 bays in a 2×2 grid — 4-across is too narrow to read on a phone and the
   board's overflow:hidden clips the 3rd/4th bay. MUST sit after the base rule above
   (same specificity → later source wins) or it never applies. */
@media (max-width: 700px) { .board-cols { grid-template-columns: repeat(2, 1fr); } }
.bay { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 9px 8px; min-height: 188px; transition: background var(--d-2), border-color var(--d-2), box-shadow var(--d-2); }
.bay.drop-ok { background: var(--teal-wash); border-color: var(--teal-600); box-shadow: inset 0 0 0 1px var(--teal-600); }
.bay-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; padding: 0 2px; }
.bay-h .nm { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2); }
.bay-h .ct { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-3);
  background: var(--cream); border: 1px solid var(--hairline); border-radius: 5px; padding: 1px 5px; }
.bay.queue { background: color-mix(in srgb, var(--surface-2) 60%, var(--cream)); }
.ro {
  background: var(--cream); border: 1px solid var(--hairline-2); border-radius: var(--r-sm);
  padding: 8px 9px 9px; margin-bottom: 7px; cursor: grab; box-shadow: var(--sh-xs);
  transition: box-shadow var(--d-2), transform var(--d-2), border-color var(--d-2);
  user-select: none; touch-action: none;
}
.ro:last-child { margin-bottom: 0; }
.ro:hover { box-shadow: var(--sh-md); border-color: var(--hairline-2); transform: translateY(-1px); }
.ro.dragging { opacity: 0.4; cursor: grabbing; }
.ro.ghost { position: fixed; z-index: 999; pointer-events: none; box-shadow: var(--sh-lg);
  transform: rotate(-2deg) scale(1.03); width: var(--gw); }
.ro-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.ro-ro { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-3); letter-spacing: 0.03em; }
.ro-st { width: 7px; height: 7px; border-radius: 50%; }
.ro-st.s-est { background: var(--ink-3); }
.ro-st.s-auth { background: var(--warn); }
.ro-st.s-prog { background: var(--teal-600); }
.ro-st.s-done { background: var(--good); }
.ro-cust { font-size: 0.78rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.ro-veh { font-size: 0.68rem; color: var(--ink-2); margin-top: 1px; line-height: 1.25; }
.ro-svc { display: flex; align-items: center; justify-content: space-between; margin-top: 7px;
  padding-top: 6px; border-top: 1px dashed var(--hairline); }
.ro-tag { font-size: 0.62rem; color: var(--ink-2); font-weight: 500; }
.ro-val { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; color: var(--ink); }
.board-foot { display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-top: 1px solid var(--hairline); background: var(--surface);
  font-size: var(--t-xs); color: var(--ink-2); }
.board-foot b { color: var(--ink); }
.board-caption { text-align: center; margin-top: 16px; font-size: 0.72rem; color: var(--ink-3); }