/* ============================================================
   Shelby — Flashlight in the Dark
   The page is almost black. Only the screens glow. A light
   follows your cursor and reveals everything else.
   ============================================================ */
:root{
  --black:#040605; --ink:#e8efe2; --soft:#9fb098; --faint:#5f7158;
  --gold:#e8c14a; --green:#8fd14f; --line:rgba(143,209,79,.16);
  --pcb:#15803c; --pcb-d:#0c4f26; --pcb-l:#1fa451; --silk:#ecc657;
  --display:"Fraunces",Georgia,serif; --serif:"Newsreader",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --gutter:clamp(20px,5vw,70px); --maxw:1180px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--black); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; cursor:crosshair;
}
::selection{ background:var(--green); color:#0a1305; }
a{ color:inherit; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* the darkness: a fixed layer that hides everything except a pool of
   light at the cursor. Glowing screens live ABOVE it (z higher). */
.dark{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  background:radial-gradient(circle 220px at var(--mx,50%) var(--my,38%),
    rgba(4,6,5,0) 0%, rgba(4,6,5,0) 26%, rgba(4,6,5,.82) 60%,
    rgba(3,4,3,.96) 82%, rgba(2,3,2,.995) 100%);
  transition:background .05s linear;
}
/* a soft ring so the light feels like a torch */
.torch{
  position:fixed; z-index:41; pointer-events:none; left:0; top:0;
  width:440px; height:440px; margin:-220px 0 0 -220px;
  transform:translate(var(--mx,50vw),var(--my,38vh));
  background:radial-gradient(circle, rgba(143,209,79,.05) 0%, transparent 62%);
  mix-blend-mode:screen;
}
@media (pointer:coarse){
  /* no real cursor: light most of the page, keep a vignette */
  .dark{ background:radial-gradient(circle 70vmax at 50% 40%,
    rgba(4,6,5,0), rgba(4,6,5,.55) 88%); }
  .torch{ display:none; }
  body{ cursor:auto; }
}

/* anything that glows on its own sits above the darkness */
.glow{ position:relative; z-index:45; }

/* topbar stays lit so you can navigate */
.topbar{ position:fixed; top:0; left:0; right:0; height:62px; z-index:60; display:flex; align-items:center; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand .mark{ font-family:var(--display); font-weight:600; font-size:22px; color:var(--ink);
  text-shadow:0 0 18px rgba(143,209,79,.45); font-variation-settings:"SOFT" 40,"WONK" 1; }
.brand .by{ font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:.14em; text-transform:uppercase; }
.topbar nav{ display:flex; gap:24px; }
.topbar nav a{ font-family:var(--mono); font-size:12px; color:var(--soft); text-decoration:none; letter-spacing:.04em; }
.topbar nav a:hover{ color:var(--green); }
@media(max-width:760px){ .topbar nav{ display:none; } }

/* sections */
section{ position:relative; }
.hero{ min-height:100vh; display:grid; place-items:center; text-align:center; padding:90px 0 40px; }
.hero .device-wrap{ position:relative; z-index:45; width:min(820px,92vw); aspect-ratio:16/10; margin:0 auto 30px; }
#sprig3d{ width:100%; height:100%; display:block; cursor:grab; touch-action:none;
  filter:drop-shadow(0 0 60px rgba(143,209,79,.22)); }
.kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; }
.hero h1{ font-family:var(--display); font-weight:330; font-size:clamp(38px,6vw,72px); line-height:1.0;
  letter-spacing:-.02em; margin:0 auto 18px; max-width:16ch; font-variation-settings:"SOFT" 30,"opsz" 144; }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero p.lede{ color:var(--soft); max-width:52ch; margin:0 auto; font-size:19px; }
.hero p.lede b{ color:var(--ink); }
.hints{ margin-top:30px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--faint); }
.hints .pill{ border:1px solid var(--line); border-radius:30px; padding:6px 13px; }

.band{ padding:clamp(70px,10vw,120px) 0; }
.sec-head{ text-align:center; margin-bottom:60px; }
.sec-no{ font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.14em; }
.sec-head h2{ font-family:var(--display); font-weight:340; font-size:clamp(28px,4.4vw,48px);
  letter-spacing:-.02em; margin:8px 0 12px; }
.sec-head p{ color:var(--soft); max-width:50ch; margin:0 auto; font-size:17px; }

/* ---------------- the apps, scattered in the dark ---------------- */
.apps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(40px,6vw,90px) clamp(30px,4vw,60px); }
.app{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.app:nth-child(2){ transform:translateY(54px); }
.app:nth-child(3){ transform:translateY(20px); }
.app:nth-child(4){ transform:translateY(28px); }
.app:nth-child(6){ transform:translateY(44px); }
.app .meta{ margin-top:18px; }
.app .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.app h3{ font-family:var(--display); font-weight:480; font-size:21px; margin:4px 0 8px; }
.app p{ margin:0 auto; font-size:15.5px; color:var(--soft); max-width:30ch; }
@media(max-width:820px){ .apps{ grid-template-columns:repeat(2,1fr); } .app{ transform:none !important; } }
@media(max-width:520px){ .apps{ grid-template-columns:1fr; } }

/* the little LCD: a glowing screen module */
.lcd{ background:#cdd3c7; padding:8px; border-radius:7px; display:inline-block; position:relative; z-index:45;
  box-shadow:0 0 0 1px #aab0a3, 0 0 34px rgba(143,209,79,.28), 0 0 90px rgba(143,209,79,.12); }
.lcd canvas{ display:block; image-rendering:pixelated; border-radius:3px; }
.lcd.small canvas{ width:200px; height:160px; }

/* ---------------- the Sprig: a real green PCB ---------------- */
.sprig{
  position:relative; z-index:45; width:min(760px,90vw); aspect-ratio:760/348;
  border-radius:16px; padding:0; isolation:isolate;
  background:
    radial-gradient(120% 150% at 50% -10%, #1c994c 0%, var(--pcb) 42%, var(--pcb-d) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.05),
    inset 0 0 60px rgba(0,0,0,.45),
    0 0 0 1px #0a3d1e,
    0 0 70px rgba(143,209,79,.18),
    0 26px 60px -24px rgba(0,0,0,.9);
}
/* faint copper traces */
.sprig::before{
  content:""; position:absolute; inset:0; border-radius:16px; opacity:.5; z-index:-1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 20px),
    radial-gradient(circle at 30% 60%, rgba(212,175,55,.10) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 30%, rgba(212,175,55,.10) 0 3px, transparent 4px);
}
.sprig .silk{ position:absolute; font-family:var(--mono); color:var(--silk); pointer-events:none; }
.silk-brand{ top:7%; left:8%; font-size:clamp(16px,2.6vw,26px); font-weight:700; letter-spacing:.02em;
  text-shadow:0 0 10px rgba(236,198,87,.4); }
.silk-switch{ top:9%; right:8%; font-size:9px; letter-spacing:.12em; color:#bfe0c4; display:flex; align-items:center; gap:5px; }
.silk-switch i{ width:22px; height:11px; border-radius:6px; background:#0c3d1f; box-shadow:inset 0 0 0 1px #2a6e40; position:relative; display:inline-block; }
.silk-switch i::after{ content:""; position:absolute; top:1px; left:1px; width:9px; height:9px; border-radius:50%; background:#cdd3c7; }
.silk-hack{ bottom:7%; left:8%; font-size:clamp(8px,1.4vw,11px); font-weight:700; letter-spacing:.16em;
  color:#0a1a0e; background:var(--silk); padding:2px 8px; border-radius:3px; transform:rotate(-3deg); }

/* the screen, centered */
.sprig .lcd{ position:absolute; top:50%; left:50%; transform:translate(-50%,-46%); padding:9px; }
.sprig .lcd canvas{ width:clamp(220px,32vw,300px); height:auto; }

/* button pads */
.sprig .pad{ position:absolute; top:50%; transform:translateY(-46%);
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:clamp(5px,1vw,9px); width:clamp(96px,15vw,128px); aspect-ratio:1; }
.sprig .pad-l{ left:5.5%; }
.sprig .pad-r{ right:5.5%; }
.sprig .btn{ -webkit-appearance:none; appearance:none; border:none; cursor:pointer; padding:0;
  background:linear-gradient(160deg,#3a3f3a,#16191680); box-shadow:0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  position:relative; transition:transform .07s, box-shadow .12s; }
.sprig .btn:hover{ box-shadow:0 0 16px rgba(143,209,79,.4), 0 2px 4px rgba(0,0,0,.6); }
.sprig .btn:active, .sprig .btn.hit{ transform:translateY(2px); background:linear-gradient(160deg,#7fb13b,#3a5a1c); }
.sprig .btn-sq{ border-radius:5px; }
.sprig .btn-rd{ border-radius:50%; }
.sprig .btn::after{ content:attr(data-letter); position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:10px; color:#aebaa6; }
/* diamond / plus placement inside the 3x3 grid */
.k-up{ grid-area:1/2; } .k-left{ grid-area:2/1; } .k-right{ grid-area:2/3; } .k-down{ grid-area:3/2; }

/* corner screws */
.sprig .screw{ position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #e7ecdf, #79806f); box-shadow:0 0 3px rgba(0,0,0,.5); }
.sprig .screw.s1{ top:6%; left:3%; } .sprig .screw.s2{ top:6%; right:3%; }
.sprig .screw.s3{ bottom:6%; left:3%; } .sprig .screw.s4{ bottom:6%; right:3%; }

/* ---------------- specs ---------------- */
.specs{ max-width:760px; margin:0 auto; }
.spec{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line); }
.spec .k{ font-family:var(--serif); font-size:18px; }
.spec .k small{ display:block; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.05em; margin-top:2px; }
.spec .v{ font-family:var(--mono); font-size:14px; color:var(--green); text-align:right; white-space:nowrap; }

/* ---------------- install ---------------- */
.install{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,60px); align-items:start; max-width:980px; margin:0 auto; }
.steps{ counter-reset:step; list-style:none; padding:0; margin:0; }
.steps li{ position:relative; padding:0 0 22px 44px; }
.steps li::before{ counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; left:0; top:-1px;
  font-family:var(--mono); font-size:12px; color:#0a1305; background:var(--green); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; box-shadow:0 0 16px rgba(143,209,79,.4); }
.steps li::after{ content:""; position:absolute; left:14.5px; top:30px; bottom:2px; width:1px; background:var(--line); }
.steps li:last-child::after{ display:none; }
.steps h4{ margin:3px 0 4px; font-family:var(--display); font-weight:480; font-size:19px; }
.steps p{ margin:0; font-size:16px; color:var(--soft); }
.steps code{ font-family:var(--mono); font-size:.82em; color:var(--gold); }
.codeblock{ background:#06100a; border:1px solid var(--line); border-radius:8px; padding:22px; font-family:var(--mono);
  font-size:13px; line-height:1.9; color:#cfe0c2; overflow-x:auto; box-shadow:0 0 50px rgba(143,209,79,.08); }
.codeblock .c{ color:#5f8a52; } .codeblock .p{ color:var(--gold); } .codeblock .s{ color:#e3b06a; }
@media(max-width:760px){ .install{ grid-template-columns:1fr; } }

/* ---------------- footer ---------------- */
.foot{ padding:60px 0 80px; border-top:1px solid var(--line); }
.foot .wrap{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.foot .mark{ font-family:var(--display); font-size:28px; font-weight:500; text-shadow:0 0 18px rgba(143,209,79,.4); }
.foot p{ color:var(--faint); font-size:14px; max-width:34ch; margin:10px 0 0; }
.foot .cols{ display:flex; gap:50px; flex-wrap:wrap; }
.foot h5{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 12px; }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.foot a{ color:var(--soft); text-decoration:none; font-size:15px; }
.foot a:hover{ color:var(--green); }

@media(prefers-reduced-motion:reduce){ .dark{ transition:none; } }