/* ============================================================
   LUMIX BAR — Design System v2
   "Soft Structuralism" × Apple product page
   Strict monochrome. Black PCB. Light is the only color.
   ============================================================ */

/* ---------- fonts (self-hosted, no CDN at runtime) ---------- */
@font-face { font-family:"Space Grotesk"; src:url("../vendor/fonts/space-grotesk-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../vendor/fonts/space-grotesk-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../vendor/fonts/space-grotesk-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../vendor/fonts/space-grotesk-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Jakarta"; src:url("../vendor/fonts/jakarta-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Jakarta"; src:url("../vendor/fonts/jakarta-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Jakarta"; src:url("../vendor/fonts/jakarta-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Jakarta"; src:url("../vendor/fonts/jakarta-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Jakarta"; src:url("../vendor/fonts/jakarta-800.woff2") format("woff2"); font-weight:800; font-display:swap; }

/* ---------- global tokens ---------- */
:root {
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:"Jakarta","Segoe UI",system-ui,sans-serif;
  --font-mono:"Cascadia Code","JetBrains Mono",Consolas,monospace;

  --text-hero:clamp(3rem,1rem + 9vw,8rem);
  --text-display:clamp(2.4rem,1rem + 5.5vw,5rem);
  --text-title:clamp(1.8rem,1rem + 3vw,3.4rem);
  --text-lead:clamp(1.05rem,0.95rem + 0.7vw,1.5rem);
  --text-base:clamp(0.98rem,0.94rem + 0.2vw,1.08rem);

  --space-section:clamp(5rem,3.5rem + 7vw,11rem);
  --radius-shell:2rem;
  --radius-core:1.4rem;
  --maxw:1240px;

  --ease:cubic-bezier(0.32,0.72,0,1);
  --ease-soft:cubic-bezier(0.16,1,0.3,1);
  --dur:0.7s;

  /* the ONLY colors in the whole system — the product's own light */
  --led-r:#ff4d5e; --led-g:#3ddc84; --led-b:#4cc9f0;
  --led-ww:#ffb765; --led-cw:#eaf1ff; --led-uv:#8b5cf6;
}

/* ---------- section palettes (components read these) ---------- */
.sec-light {
  --bg:#FAFAFA; --bg-2:#F5F5F7;
  --fg:#0A0A0A; --fg-2:rgba(10,10,10,0.62); --fg-3:rgba(10,10,10,0.40);
  --line:rgba(10,10,10,0.10); --line-2:rgba(10,10,10,0.16);
  --shell:rgba(10,10,10,0.035); --core:#FFFFFF;
  --core-hi:rgba(255,255,255,0.9); --inset:rgba(10,10,10,0.05);
  --btn:#0A0A0A; --btn-fg:#FAFAFA;
  --nav:rgba(250,250,250,0.72);
}
.sec-dark {
  --bg:#050505; --bg-2:#0B0B0B;
  --fg:#FFFFFF; --fg-2:rgba(255,255,255,0.64); --fg-3:rgba(255,255,255,0.40);
  --line:rgba(255,255,255,0.11); --line-2:rgba(255,255,255,0.20);
  --shell:rgba(255,255,255,0.05); --core:#0E0E0E;
  --core-hi:rgba(255,255,255,0.06); --inset:rgba(255,255,255,0.05);
  --btn:#FFFFFF; --btn-fg:#0A0A0A;
  --nav:rgba(8,8,8,0.6);
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body {
  margin:0; font-family:var(--font-body); font-size:var(--text-base);
  line-height:1.6; color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; line-height:1.02;
  letter-spacing:-0.03em; margin:0; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img,svg,canvas { display:block; max-width:100%; }
button { font-family:inherit; }
::selection { background:var(--fg); color:var(--bg); }

/* ---------- layout ---------- */
.wrap { width:min(100% - 2.5rem,var(--maxw)); margin-inline:auto; }
@media (max-width:768px){ .wrap{ width:calc(100% - 2rem); } }
.section { position:relative; padding-block:var(--space-section);
  background:var(--bg); color:var(--fg); }
.section--tight { padding-block:clamp(3rem,2rem + 4vw,6rem); }

/* subtle grain for atmosphere */
.grain::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:0.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.section > .wrap { position:relative; z-index:1; }

/* ---------- typography helpers ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:0.5rem;
  border:1px solid var(--line-2); border-radius:999px;
  padding:0.32rem 0.8rem; font-family:var(--font-body); font-weight:600;
  font-size:0.62rem; text-transform:uppercase; letter-spacing:0.2em;
  color:var(--fg-2); background:var(--shell);
}
.eyebrow .dot { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.6; }
.hero-type { font-size:var(--text-hero); letter-spacing:-0.045em; font-weight:700; }
.display-type { font-size:var(--text-display); letter-spacing:-0.04em; }
.title-type { font-size:var(--text-title); }
.lead { font-size:var(--text-lead); color:var(--fg-2); line-height:1.45; font-weight:400; }
.muted { color:var(--fg-2); }
.faint { color:var(--fg-3); }
.mono { font-family:var(--font-mono); letter-spacing:-0.01em; }

/* ---------- double-bezel card ---------- */
.bezel {
  background:var(--shell); border:1px solid var(--line);
  border-radius:var(--radius-shell); padding:0.4rem;
}
.bezel > .core {
  background:var(--core); border-radius:var(--radius-core);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--core-hi);
  padding:clamp(1.4rem,1rem + 2vw,2.2rem); height:100%;
}
.core--pad-lg { padding:clamp(1.8rem,1rem + 3vw,3rem); }

/* ---------- pill button (with button-in-button) ---------- */
.btn {
  position:relative; display:inline-flex; align-items:center; gap:0.9rem;
  padding:0.7rem 0.7rem 0.7rem 1.5rem; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn-solid { background:var(--btn); color:var(--btn-fg); }
.btn-ghost { background:transparent; color:var(--fg); border-color:var(--line-2); }
.btn-ghost .btn-ico { background:var(--fg); color:var(--bg); }
.btn:active { transform:scale(0.97); }
.btn-ico {
  width:2rem; height:2rem; border-radius:999px; flex:none;
  display:grid; place-items:center; background:var(--btn-fg); color:var(--btn);
  transition:transform 0.4s var(--ease);
}
.btn:hover .btn-ico { transform:translate(3px,-3px); }
.btn-ico svg { width:14px; height:14px; }
.btn-sm { padding:0.5rem 0.5rem 0.5rem 1.1rem; font-size:0.85rem; gap:0.6rem; }
.btn-sm .btn-ico { width:1.7rem; height:1.7rem; }

/* thin-line icon defaults */
.ico { stroke:currentColor; stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- floating glass nav ---------- */
.nav {
  position:fixed; top:clamp(0.8rem,2vw,1.5rem); left:50%; transform:translateX(-50%);
  z-index:100; width:max-content; max-width:calc(100% - 2rem);
}
.nav-pill {
  display:flex; align-items:center; gap:0.4rem;
  padding:0.45rem 0.5rem 0.45rem 1.2rem; border-radius:999px;
  background:var(--nav); border:1px solid var(--line-2);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 8px 30px rgba(0,0,0,0.10);
}
.nav-brand { font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:-0.02em; margin-right:0.6rem; display:flex; align-items:center; gap:0.5rem; }
.nav-brand .spark { width:7px; height:7px; border-radius:2px;
  background:currentColor; box-shadow:0 0 0 3px var(--shell); }
.nav-links { display:flex; align-items:center; gap:0.1rem; }
.nav-links a {
  padding:0.42rem 0.9rem; border-radius:999px; font-weight:500; font-size:0.9rem;
  color:var(--fg-2); transition:color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-links a:hover { color:var(--fg); background:var(--shell); }
.nav-links a[aria-current="page"] { color:var(--fg); background:var(--shell); }
.nav-cta { margin-left:0.3rem; }
.nav-burger { display:none; }

@media (max-width:820px){
  .nav-pill { padding:0.5rem 0.6rem 0.5rem 1.1rem; }
  .nav-cta { display:none; }
  .nav-burger {
    display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:999px;
    background:var(--shell); border:1px solid var(--line); cursor:pointer; color:var(--fg);
    position:relative;
  }
  .nav-burger svg { width:18px; height:18px; position:absolute; transition:opacity 0.3s var(--ease); }
  .nav-burger .x { opacity:0; }
  .nav-links {
    position:absolute; top:calc(100% + 0.6rem); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0.2rem; padding:0.6rem;
    background:var(--nav); border:1px solid var(--line-2); border-radius:1.4rem;
    backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
    box-shadow:0 12px 40px rgba(0,0,0,0.16);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  }
  .nav-links a { padding:0.7rem 1rem; opacity:0; transform:translateY(-6px);
    transition:opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s; }
  .nav.open .nav-links { opacity:1; visibility:visible; transform:translateY(0); }
  .nav.open .nav-links a { opacity:1; transform:translateY(0); }
  .nav.open .nav-links a:nth-child(1){ transition-delay:0.04s; }
  .nav.open .nav-links a:nth-child(2){ transition-delay:0.09s; }
  .nav.open .nav-links a:nth-child(3){ transition-delay:0.14s; }
  .nav.open .nav-links a:nth-child(4){ transition-delay:0.19s; }
  .nav.open .nav-links a:nth-child(5){ transition-delay:0.24s; }
  .nav.open .nav-burger .menu { opacity:0; }
  .nav.open .nav-burger .x { opacity:1; }
}

/* ---------- reveals ---------- */
.reveal { opacity:0; transform:translateY(3.5rem); filter:blur(10px);
  transition:opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.reveal.in { opacity:1; transform:none; filter:none; }
html:not(.js) .reveal { opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){
  .reveal { opacity:1 !important; transform:none !important; filter:none !important; }
}

/* ---------- footer ---------- */
.foot { padding-block:clamp(3rem,2rem + 3vw,5rem); background:var(--bg); color:var(--fg); }
.foot-grid { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem;
  align-items:flex-end; border-top:1px solid var(--line); padding-top:2.4rem; }
.foot-brand { font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem,1rem + 3vw,3rem); letter-spacing:-0.03em; }
.foot-links { display:flex; gap:1.6rem; flex-wrap:wrap; }
.foot-links a { color:var(--fg-2); font-size:0.9rem; transition:color 0.3s var(--ease); }
.foot-links a:hover { color:var(--fg); }
.foot-meta { color:var(--fg-3); font-size:0.8rem; margin-top:1.8rem; font-family:var(--font-mono); }

/* ---------- utility ---------- */
.stack { display:flex; flex-direction:column; }
.g-sm { gap:0.6rem; } .g-md { gap:1rem; } .g-lg { gap:1.6rem; } .g-xl { gap:2.4rem; }
.row { display:flex; align-items:center; }
.wrap-flex { flex-wrap:wrap; }
.center { text-align:center; align-items:center; }
.spread { justify-content:space-between; }
.chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.3rem 0.7rem;
  border-radius:999px; border:1px solid var(--line); background:var(--shell);
  font-size:0.75rem; font-weight:500; color:var(--fg-2); font-family:var(--font-mono);
  letter-spacing:-0.01em; }
.hr { height:1px; background:var(--line); border:0; margin:0; }

.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* LED legend dots */
.led-dot { width:0.7rem; height:0.7rem; border-radius:50%; flex:none;
  box-shadow:0 0 10px currentColor; }