/* ============================================================================
   Factory lighting — public site
   ----------------------------------------------------------------------------
   Palette is correlated colour temperature, the subject's own measurement:
   2700K filament amber against 5000K daylight blue. The page is built as light
   falling on a surface — an unlit hero the beam enters, then a lit body.

   Type: Archivo for display (wide industrial grotesque, signage vernacular),
   IBM Plex Sans for reading, IBM Plex Mono for technical values. Wattages, IP
   ratings and colour temperatures appear in mono because that is how they
   appear on a datasheet, not for decoration.

   Hand-authored rather than a framework: one 8KB file, no build step, no
   render-blocking CDN. Core Web Vitals is the stated priority and this is the
   cheapest way to protect it.
   ========================================================================== */

:root {
  /* Unlit */
  --void: #12161c;
  --void-deep: #0c0f14;

  /* Lit surface */
  --paper: #f5f6f8;
  --surface: #ffffff;
  --line: #e2e6ec;

  /* Ink */
  --ink: #14181e;
  --ink-soft: #454f5c;
  --ink-muted: #6b7684;
  --ink-inverse: #eef1f5;

  /* 2700K filament — action and emphasis, rationed */
  --filament: #c87f16;
  --filament-bright: #f2b14c;

  /* 5000K daylight — technical values, quiet */
  --daylight: #2c6db5;
  --daylight-soft: #8fc4f0;

  --whatsapp: #25d366;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Font loading: system stack renders immediately, webfont swaps in. Avoids the
   invisible-text flash that shows up as a poor LCP. */
@font-face { font-family: "Archivo"; font-display: swap; src: local("Archivo"); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--daylight); text-underline-offset: 3px; }
a:hover { color: var(--filament); }

:focus-visible {
  outline: 3px solid var(--filament-bright);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--filament); color: #fff; padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type scale ---------- */

.display {
  font-family: "Archivo", "Arial Black", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  margin: 0;
}

h2 {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin: 2.75rem 0 0.85rem;
}

h3 {
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.5rem;
}

/* Wide-tracked micro-label. The one recurring type gesture. */
.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.eyebrow--lit { color: var(--filament-bright); }

.lead { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--ink-soft); max-width: var(--measure); }

p { max-width: var(--measure); margin: 0 0 1.1rem; }

/* Technical values in mono — datasheet convention, not ornament */
.mono, .spec-value {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- Hero: the beam ---------- */

.beam {
  position: relative;
  background: var(--void);
  color: var(--ink-inverse);
  overflow: hidden;
  isolation: isolate;
}

/* The light cone. A luminaire's beam spread, rendered at page scale — the
   subject's own diagram doing the work a stock photo usually does. */
.beam::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  z-index: 0;
  background:
    conic-gradient(from 158deg at 50% -18%,
      transparent 0deg,
      rgba(242, 177, 76, 0.16) 14deg,
      rgba(242, 177, 76, 0.30) 22deg,
      rgba(242, 177, 76, 0.16) 30deg,
      transparent 44deg);
  pointer-events: none;
}

/* The source itself, and its spill */
.beam::after {
  content: "";
  position: absolute;
  top: -180px; left: 50%; transform: translateX(-50%);
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,177,76,0.28) 0%, rgba(242,177,76,0) 68%);
  z-index: 0;
  pointer-events: none;
}

.beam__inner { position: relative; z-index: 1; padding: clamp(4rem, 12vh, 8rem) 0 clamp(3rem, 8vh, 5rem); }

.beam .lead { color: #b9c2ce; }

/* Kelvin rule: 2700K to 5000K, the seam between unlit and lit */
.kelvin-rule {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--filament-bright) 0%, #d9d3c4 46%, var(--daylight-soft) 100%);
}

/* ---------- Spec strip ---------- */

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.spec {
  background: var(--surface);
  padding: 1.15rem 1.25rem;
}

.spec dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}

.spec dd {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--ink);
}

/* ---------- Body ---------- */

.prose { padding-block: clamp(2.5rem, 6vh, 4rem); }
.prose > *:first-child { margin-top: 0; }
.prose h2:first-of-type { margin-top: 0; }

.prose ul { max-width: var(--measure); padding-left: 1.15rem; }
.prose li { margin-bottom: 0.5rem; }

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding-block: 1rem 3rem;
  list-style: none;
  margin: 0; padding-inline: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem;
  transition: border-color 140ms ease, transform 140ms ease;
}
.card:hover { border-color: var(--filament); transform: translateY(-2px); }

.card a { color: var(--ink); text-decoration: none; font-weight: 600; }
.card a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card p { font-size: 0.95rem; color: var(--ink-muted); margin: 0.45rem 0 0; }

/* ---------- Call to action ---------- */

.cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--filament); color: #fff;
  font-weight: 600; font-size: 1rem;
  padding: 0.9rem 1.6rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 140ms ease;
}
.cta:hover { background: #a96a0f; color: #fff; }

.cta--ghost {
  background: transparent; color: var(--ink-inverse);
  border: 1px solid rgba(255,255,255,0.28);
}
.cta--ghost:hover { background: rgba(255,255,255,0.08); color: var(--ink-inverse); }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); padding-block: 2.5rem; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: "IBM Plex Mono", monospace;
  color: var(--filament);
  font-size: 1.3rem; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 0.75rem; color: var(--ink-soft); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--void-deep);
  color: #97a1ae;
  padding-block: 3rem 4.5rem;
  font-size: 0.9rem;
}
.site-footer a { color: #c6cfdb; }
.site-footer h2 { color: var(--ink-inverse); font-size: 1.1rem; margin-top: 0; }

/* ---------- Floating WhatsApp ---------- */

.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--whatsapp);
  color: #06301a;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  color: #06301a;
}
.wa-float svg { width: 24px; height: 24px; flex: none; }

/* On narrow screens the label would crowd the content, so it collapses to the
   mark alone rather than shrinking type past legibility. */
@media (max-width: 600px) {
  .wa-float { padding: 0.9rem; gap: 0; }
  .wa-float__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float:hover, .card:hover { transform: none; }
}

/* ---------- Print ---------- */

@media print {
  .wa-float, .site-footer { display: none; }
  .beam { background: #fff; color: #000; }
  .beam::before, .beam::after { display: none; }
}