/* ===================================================================
   Rhogee Light Technology — design tokens
   Palette drawn from color temperature (Kelvin): a warm 2700K amber
   against a cool 6500K blue-white, set on a near-black "fixture-off"
   charcoal — the way a spec sheet shows a lamp's two extremes.
=================================================================== */
:root{
  --bg:        #13151b;
  --panel:     #1b1e27;
  --panel-2:   #21242f;
  --line:      #2a2e3a;
  --text:      #f4f2ec;
  --text-mute: #9aa0ae;
  --warm:      #f2a340;   /* 2700K */
  --cool:      #7fb8d9;   /* 6500K */
  --warm-dim:  #7a5a2e;
  --cool-dim:  #3d5566;

  --display: "Space Grotesk", "Arial Narrow", sans-serif;
  --body:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(19,21,27,0.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.brand{
  font-family:var(--display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.01em;
  text-decoration:none;
  display:flex; align-items:baseline; gap:8px;
}
.brand .dot{ color:var(--warm); }
nav.top-nav{ display:flex; gap:28px; }
nav.top-nav a{
  text-decoration:none;
  color:var(--text-mute);
  font-size:0.92rem;
  font-family:var(--mono);
  letter-spacing:0.02em;
  transition:color .15s ease;
}
nav.top-nav a:hover, nav.top-nav a:focus-visible{ color:var(--warm); }

/* ---------- hero ---------- */
.hero{
  padding:88px 0 72px;
  border-bottom:1px solid var(--line);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.eyebrow{
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--cool);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin:0 0 18px;
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
  line-height:1.08;
  margin:0 0 20px;
  font-weight:700;
  letter-spacing:-0.01em;
}
.hero h1 .accent{ color:var(--warm); }
.hero p.lede{
  color:var(--text-mute);
  font-size:1.08rem;
  max-width:46ch;
  margin:0 0 30px;
}
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.88rem;
  letter-spacing:0.02em;
  text-decoration:none;
  padding:13px 22px;
  border-radius:2px;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--warm); color:#181205; font-weight:600; }
.btn-primary:hover{ transform:translateY(-1px); background:#f7b45c; }
.btn-ghost{ border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--cool); color:var(--cool); }

/* photometric diagram */
.photometric{ position:relative; }
.photometric svg{ width:100%; height:auto; }
.photometric .ring{ fill:none; stroke:var(--line); stroke-width:1; }
.photometric .axis{ stroke:var(--line); stroke-width:1; }
.photometric .beam-warm{
  fill:none; stroke:var(--warm); stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(242,163,64,0.45));
}
.photometric .beam-cool{
  fill:none; stroke:var(--cool); stroke-width:2; stroke-dasharray:4 5;
  opacity:0.9;
}
.photometric .kelvin-tag{
  font-family:var(--mono);
  font-size:11px;
  fill:var(--text-mute);
}
.photometric .kelvin-warm{ fill:var(--warm); }
.photometric .kelvin-cool{ fill:var(--cool); }

@media (prefers-reduced-motion: no-preference){
  .beam-sweep{
    transform-origin:center;
    animation:sweep 7s ease-in-out infinite;
  }
}
@keyframes sweep{
  0%,100%{ opacity:0.55; }
  50%{ opacity:1; }
}

/* ---------- sections ---------- */
section{ padding:64px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{ margin-bottom:36px; max-width:60ch; }
.section-head .eyebrow{ margin-bottom:10px; }
.section-head h2{
  font-family:var(--display);
  font-size:1.7rem;
  margin:0 0 10px;
  font-weight:700;
}
.section-head p{ color:var(--text-mute); margin:0; }

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.spec-list{ list-style:none; margin:0; padding:0; }
.spec-list li{
  display:flex; justify-content:space-between;
  padding:12px 0;
  border-bottom:1px dashed var(--line);
  font-family:var(--mono);
  font-size:0.9rem;
}
.spec-list li span:first-child{ color:var(--text-mute); }
.spec-list li span:last-child{ color:var(--text); }

.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:3px;
  padding:26px 22px;
}
.card .tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  padding:3px 8px;
  border-radius:2px;
  margin-bottom:14px;
}
.tag-warm{ background:rgba(242,163,64,0.12); color:var(--warm); }
.tag-cool{ background:rgba(127,184,217,0.12); color:var(--cool); }
.card h3{
  font-family:var(--display);
  font-size:1.1rem;
  margin:0 0 10px;
}
.card p{ color:var(--text-mute); font-size:0.95rem; margin:0; }

.contact-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:3px;
  padding:36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}
.contact-panel .label{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--text-mute);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:0 0 6px;
}
.contact-panel .email{
  font-family:var(--display);
  font-size:1.4rem;
  color:var(--warm);
  text-decoration:none;
}

footer{
  padding:30px 0 50px;
}
footer .wrap{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  font-size:0.85rem;
  color:var(--text-mute);
}
footer a{ color:var(--text-mute); text-decoration:underline; text-underline-offset:3px; }
footer a:hover{ color:var(--warm); }

/* ---------- legal page ---------- */
.legal{ padding:64px 0 90px; }
.legal h1{
  font-family:var(--display);
  font-size:2rem;
  margin:0 0 8px;
}
.legal .updated{
  font-family:var(--mono);
  font-size:0.85rem;
  color:var(--text-mute);
  margin:0 0 40px;
}
.legal h2{
  font-family:var(--display);
  font-size:1.15rem;
  margin:36px 0 12px;
  color:var(--warm);
}
.legal p, .legal li{ color:var(--text-mute); font-size:0.97rem; }
.legal ul{ padding-left:20px; }
.legal a{ color:var(--cool); }
.back-link{
  display:inline-block;
  margin-bottom:30px;
  font-family:var(--mono);
  font-size:0.85rem;
  color:var(--text-mute);
  text-decoration:none;
}
.back-link:hover{ color:var(--warm); }

/* ---------- responsive ---------- */
@media (max-width: 820px){
  .hero .wrap{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  nav.top-nav{ gap:16px; }
}

/* keyboard focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--cool);
  outline-offset:3px;
}