/* ============================================================
   Fluxcore — macro solder / electronics-bench close-up
   dark workbench · glossy solder · copper · flux sheen · tungsten
   ============================================================ */

:root{
  /* dark workbench palette */
  --bench:      #14100b;   /* deep workbench shadow */
  --bench-2:    #1d1812;   /* panel */
  --bench-3:    #271f16;   /* raised plate */
  --board:      #0e2018;   /* fr-4 / soldermask green-black */
  --ink:        #f1e7d4;   /* warm bench paper / labels */
  --ink-dim:    #b9a98c;   /* dimmed tungsten text */
  --ink-faint:  #7c6e57;

  /* the metals & flux */
  --solder:     #d9d3c4;   /* glossy solder grey-silver */
  --solder-hot: #fff7e6;   /* glint highlight */
  --copper:     #c8772f;   /* copper trace / pad */
  --copper-lo:  #7a4a1d;
  --flux:       #ffb347;   /* warm flux-residue amber / status LED */
  --lead:       #9a8f7c;   /* component lead steel */
  --ok:         #79c24a;   /* go / verified green */
  --amber:      #e8932b;

  /* resistor color-band motif */
  --band-brn:   #6b3d1c;
  --band-red:   #b23522;
  --band-gold:  #c8a13a;

  --tungsten:   #ffd9a0;   /* warm light tint */

  --disp: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --rad: 7px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 30% -10%, rgba(255,180,80,.10), transparent 55%),
    radial-gradient(90% 70% at 85% 110%, rgba(200,119,47,.08), transparent 60%),
    var(--bench);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* warm tungsten glare sweeping the bench */
.bench-glare{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(40% 30% at 25% 18%, rgba(255,217,160,.12), transparent 70%);
  mix-blend-mode:screen;
}
/* subtle solder-mask scuff texture */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.4;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 60px);
}
main, .topbar, .site-foot{ position:relative; z-index:1; }

a{ color:inherit; text-decoration:none; }

/* ---------------- TOPBAR ---------------- */
.topbar{
  display:flex; align-items:center; gap:1.6rem;
  padding:.95rem clamp(1rem,4vw,3rem);
  border-bottom:1px solid #3a2e1e;
  background:linear-gradient(180deg, rgba(20,16,11,.92), rgba(20,16,11,.72));
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:30;
}
.wordmark{
  font-family:var(--disp); font-weight:700; font-size:1.32rem;
  letter-spacing:.5px; display:flex; align-items:center; gap:.55rem;
}
.wordmark .mark{ display:inline-flex; filter:drop-shadow(0 0 6px rgba(255,179,71,.35)); }
.wordmark.small{ font-size:1.15rem; }
.nav{ display:flex; gap:1.4rem; margin-left:auto; font-family:var(--mono); font-size:.82rem; }
.nav a{ color:var(--ink-dim); transition:color .2s; }
.nav a:hover{ color:var(--flux); }
.cta{
  font-family:var(--mono); font-size:.8rem; padding:.45rem .9rem;
  border:1px solid var(--copper); border-radius:var(--rad);
  color:var(--flux); background:rgba(200,119,47,.08);
  transition:all .2s;
}
.cta:hover{ background:var(--copper); color:#1a120a; box-shadow:0 0 16px rgba(255,179,71,.35); }

/* ---------------- HERO ---------------- */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,3rem) 3rem;
  max-width:1240px; margin:0 auto;
}
.eyebrow{
  font-family:var(--mono); font-size:.78rem; letter-spacing:1px;
  color:var(--ink-dim); text-transform:uppercase; display:flex; align-items:center; gap:.55rem;
}
.led{
  width:11px; height:11px; border-radius:50%;
  background:var(--flux); display:inline-block;
  box-shadow:0 0 10px 2px var(--flux); transition:opacity .25s, box-shadow .25s;
}
.led-sm{ width:9px; height:9px; }
h1{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(2.3rem,5.5vw,4rem); line-height:1.02; margin:.6rem 0 1rem;
  letter-spacing:-.5px;
}
h1 .hl{
  color:var(--flux);
  text-shadow:0 0 24px rgba(255,179,71,.4);
}
.lede{ font-size:1.08rem; color:var(--ink-dim); max-width:42ch; }
.lede strong{ color:var(--ink); font-weight:600; }
.hero-actions{ display:flex; gap:.8rem; margin:1.6rem 0 1.8rem; flex-wrap:wrap; }
.btn-solid,.btn-ghost{
  font-family:var(--mono); font-size:.86rem; padding:.7rem 1.2rem;
  border-radius:var(--rad); cursor:pointer; border:1px solid transparent; transition:all .2s;
}
.btn-solid{
  background:linear-gradient(180deg,var(--flux),var(--amber));
  color:#1a120a; font-weight:700; border-color:#b06a1c;
  box-shadow:0 6px 18px rgba(232,147,43,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-solid:hover{ box-shadow:0 0 22px rgba(255,179,71,.5); transform:translateY(-1px); }
.btn-ghost{ background:transparent; border-color:#4a3a26; color:var(--ink-dim); }
.btn-ghost:hover{ border-color:var(--copper); color:var(--flux); }

.stat-strip{
  list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:.4rem;
  border-top:1px solid #3a2e1e; padding-top:1.2rem;
}
.stat-strip li{ display:flex; flex-direction:column; }
.stat-strip b{ font-family:var(--disp); font-size:1.35rem; color:var(--flux); }
.stat-strip span{ font-family:var(--mono); font-size:.66rem; color:var(--ink-faint); line-height:1.3; }

/* -------- signature move: macro solder loupe -------- */
.macro{ margin:0; position:relative; }
.macro-loupe{
  position:relative; border-radius:50%; overflow:hidden;
  aspect-ratio:1/1; max-width:440px; margin:0 auto;
  border:10px solid #2a2118;
  box-shadow:
    0 0 0 2px #4a3a24,
    0 24px 60px rgba(0,0,0,.65),
    inset 0 0 60px rgba(0,0,0,.5);
}
.solder-svg{ display:block; width:100%; height:100%; }
/* glass curvature of the loupe */
.loupe-glass{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(60% 50% at 32% 26%, rgba(255,245,220,.22), transparent 55%),
    radial-gradient(120% 120% at 70% 85%, rgba(0,0,0,.45), transparent 60%);
  mix-blend-mode:screen;
}
.glint{ animation:gleam 3.2s ease-in-out infinite; transform-origin:center; }
@keyframes gleam{
  0%,100%{ opacity:.55; r:4; }
  45%{ opacity:1; r:6; }
}
.flux-sheen{ animation:sheen 6s ease-in-out infinite; }
@keyframes sheen{ 0%,100%{ opacity:.4; } 50%{ opacity:.7; } }

.macro figcaption{
  font-family:var(--mono); font-size:.72rem; color:var(--ink-dim);
  text-align:center; margin-top:1rem; display:flex; gap:.5rem; justify-content:center;
  flex-wrap:wrap; align-items:center;
}
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-brn{ background:var(--band-brn); box-shadow:0 0 0 2px var(--band-gold) inset; }
.reading{ color:var(--ok); }

/* ---------------- BANDS ---------------- */
.band{
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,3rem);
  max-width:1240px; margin:0 auto;
}
.band-alt{
  max-width:none;
  background:linear-gradient(180deg, var(--bench-2), rgba(29,24,18,.4));
  border-block:1px solid #2e2417;
}
.band-alt > *{ max-width:1240px; margin-inline:auto; }
.band-head{ max-width:62ch; margin-bottom:2.4rem; }
.kicker{
  font-family:var(--mono); font-size:.78rem; color:var(--copper);
  letter-spacing:1px;
}
.band-head h2{
  font-family:var(--disp); font-weight:700; font-size:clamp(1.7rem,3.6vw,2.5rem);
  margin:.4rem 0 .7rem; letter-spacing:-.4px;
}
.band-head p{ color:var(--ink-dim); margin:0; }
code{ font-family:var(--mono); color:var(--flux); font-size:.92em; }

/* -------- runtime / terminal -------- */
.runtime-grid{ display:grid; grid-template-columns:1.2fr .9fr; gap:1.6rem; align-items:start; }
.term{
  border:1px solid #3a2e1e; border-radius:var(--rad); overflow:hidden;
  background:#0c0907; box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.term-bar{
  display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem;
  background:#1b150e; border-bottom:1px solid #322618;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-faint);
}
.term-bar i{ width:10px; height:10px; border-radius:50%; background:#3a2e1e; }
.term-bar i:nth-child(1){ background:var(--band-red); }
.term-bar i:nth-child(2){ background:var(--amber); }
.term-bar i:nth-child(3){ background:var(--ok); }
.term-bar span{ margin-left:auto; }
.term-body{
  margin:0; padding:1rem 1.1rem; font-family:var(--mono); font-size:.78rem;
  line-height:1.65; color:var(--ink-dim); overflow-x:auto;
}
.term-body .c{ color:var(--flux); }
.term-body .g{ color:var(--copper); }
.term-body .ok{ color:var(--ok); }
.term-body .hl2{ color:var(--tungsten); }

.runtime-cards{ display:flex; flex-direction:column; gap:1rem; }
.rc{
  background:var(--bench-3); border:1px solid #3a2e1e; border-left:3px solid var(--copper);
  border-radius:var(--rad); padding:1rem 1.1rem;
}
.rc h3{ font-family:var(--disp); margin:0 0 .35rem; font-size:1.02rem; }
.rc p{ margin:0; color:var(--ink-dim); font-size:.9rem; }

/* -------- mcu table -------- */
.mcu-table{ overflow-x:auto; margin-bottom:2.4rem; }
.mcu-table table{ width:100%; border-collapse:collapse; min-width:560px; }
.mcu-table th, .mcu-table td{
  text-align:left; padding:.7rem .85rem; font-size:.86rem;
  border-bottom:1px solid #2e2417;
}
.mcu-table th{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.6px; color:var(--copper); border-bottom:1px solid var(--copper-lo);
}
.mcu-table td{ font-family:var(--mono); color:var(--ink-dim); }
.mcu-table td:first-child{ color:var(--ink); font-weight:600; }
.mcu-table tr:hover td{ background:rgba(255,179,71,.05); }
.hot-row td{ background:rgba(255,179,71,.07); }
.hot-row td:first-child{ color:var(--flux); }

.model-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.mc{
  background:var(--bench-3); border:1px solid #3a2e1e; border-radius:var(--rad);
  padding:1rem; position:relative; overflow:hidden;
}
/* resistor color-band motif as a top stripe */
.mc::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,
    var(--band-brn) 0 20%, #111 20% 33%, var(--band-red) 33% 50%,
    transparent 50% 78%, var(--band-gold) 78% 100%);
}
.mc .tag{
  font-family:var(--mono); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.8px; color:var(--copper);
}
.mc h3{ font-family:var(--disp); font-size:1rem; margin:.3rem 0 .6rem; }
.mc ul{ list-style:none; padding:0; margin:0; font-family:var(--mono); font-size:.78rem; }
.mc li{ display:flex; justify-content:space-between; color:var(--ink-dim); padding:.12rem 0; }
.mc li b{ color:var(--ink-faint); font-weight:500; }

/* -------- dev board -------- */
.board-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.8rem; align-items:start; }
.board-specs dl{ margin:0; }
.board-specs dl > div{
  display:grid; grid-template-columns:90px 1fr; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid #2e2417;
}
.board-specs dt{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; color:var(--copper); letter-spacing:.5px; }
.board-specs dd{ margin:0; color:var(--ink-dim); font-size:.9rem; }

.flasher{
  margin-top:1.6rem; background:#0c0907; border:1px solid #3a2e1e;
  border-radius:var(--rad); padding:1.1rem;
}
.flash-head{ font-family:var(--mono); font-size:.78rem; color:var(--ink-dim); display:flex; align-items:center; gap:.5rem; margin-bottom:.7rem; }
.flash-track{ height:8px; background:#241c12; border-radius:99px; overflow:hidden; border:1px solid #3a2e1e; }
.flash-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--copper), var(--flux));
  box-shadow:0 0 10px var(--flux); transition:width .55s ease;
}
.flasher .btn-solid{ margin-top:.9rem; width:100%; }

.board-card{ text-align:center; }
.board-render{
  position:relative; aspect-ratio:4/3;
  background:
    radial-gradient(120% 100% at 50% 0%, #16382a, #0a1812);
  border:1px solid #1d3a2a; border-radius:10px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), 0 14px 36px rgba(0,0,0,.5);
  /* castellated copper edge via repeating gradient */
  background-image:
    radial-gradient(120% 100% at 50% 0%, #16382a, #0a1812);
}
.board-render::before,.board-render::after{
  content:""; position:absolute; left:0; right:0; height:10px;
  background:repeating-linear-gradient(90deg, var(--copper) 0 6px, transparent 6px 14px);
  opacity:.8;
}
.board-render::before{ top:0; } .board-render::after{ bottom:0; }
.chip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#14110c; color:var(--ink-dim); font-family:var(--mono); font-size:.7rem;
  padding:1.4rem 1.8rem; border-radius:3px; border:1px solid #2a2218;
  box-shadow:inset 0 0 0 1px #1a150e, 0 4px 10px rgba(0,0,0,.5);
  letter-spacing:1px;
}
.tp{
  position:absolute; font-family:var(--mono); font-size:.58rem; color:var(--copper);
  background:radial-gradient(circle, var(--copper) 38%, transparent 40%);
  width:30px; height:14px; text-align:center; line-height:14px; color:#1a120a; font-weight:700;
}
.tp1{ top:14px; left:14px; } .tp2{ top:14px; right:14px; }
.tp3{ bottom:14px; left:14px; } .tp4{ bottom:14px; right:14px; }
.cast{ display:none; }
.board-led{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%; background:var(--flux);
  box-shadow:0 0 12px 3px var(--flux); transition:opacity .25s;
}
.board-cap{ font-family:var(--mono); font-size:.74rem; color:var(--ink-faint); margin-top:.9rem; }

/* -------- changelog -------- */
.changelog{ list-style:none; padding:0; margin:0; max-width:760px; }
.changelog li{
  display:grid; grid-template-columns:80px 1fr; gap:1.2rem;
  padding:1rem 0; border-bottom:1px solid #2e2417;
}
.changelog time{ font-family:var(--mono); font-size:.78rem; color:var(--flux); }
.changelog p{ margin:0; color:var(--ink-dim); font-size:.92rem; }
.changelog b{ color:var(--ink); }

/* -------- quotes -------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.quotes blockquote{
  margin:0; background:var(--bench-3); border:1px solid #3a2e1e;
  border-top:3px solid var(--copper); border-radius:var(--rad); padding:1.3rem;
}
.quotes p{ margin:0 0 1rem; font-size:.95rem; }
.quotes footer{ font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); }
.quotes footer span{ color:var(--copper); }

/* ---------------- FOOTER ---------------- */
.site-foot{
  border-top:1px solid #3a2e1e; margin-top:2rem;
  background:linear-gradient(180deg, rgba(20,16,11,.4), var(--bench));
  padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,3rem) 1.5rem;
}
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; max-width:1240px; margin:0 auto 2rem; }
.foot-brand p{ color:var(--ink-dim); font-size:.9rem; max-width:30ch; }
.foot-brand .domain{ font-family:var(--mono); color:var(--flux); }
.site-foot nav h4{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.6px; color:var(--copper); margin:0 0 .7rem; }
.site-foot nav a{ display:block; color:var(--ink-dim); font-size:.88rem; padding:.2rem 0; transition:color .2s; }
.site-foot nav a:hover{ color:var(--flux); }
.foot-base{
  max-width:1240px; margin:0 auto; padding-top:1.2rem; border-top:1px solid #2e2417;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.74rem; color:var(--ink-faint);
}
.probe-foot b{ color:var(--ok); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:920px){
  .hero{ grid-template-columns:1fr; }
  .macro-loupe{ max-width:380px; }
  .runtime-grid, .board-wrap{ grid-template-columns:1fr; }
  .model-cards{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .nav{ display:none; }
}
@media (max-width:540px){
  .stat-strip{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .model-cards{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .cta{ display:none; }
  .changelog li{ grid-template-columns:1fr; gap:.3rem; }
}