/* ============================================================
   KnurlPad — precision-instrument landing page
   graphite + machined brass · three rail accents
   ============================================================ */

:root {
  --bg0: #101116;
  --bg1: #16171c;
  --panel: #1c1e24;
  --panel-hi: #24272f;
  --line: rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.14);

  --ink: #ECEDEF;
  --ink2: #9A9CA3;
  --ink3: #6A6C73;

  --brass: #E8A33D;
  --brass-bright: #F7C96E;
  --brass-deep: #BE7C24;

  --volume: #56C4B6;
  --seek: #E8A33D;
  --scroll: #E36F52;

  --radius: 16px;
  --maxw: 1080px;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --disp: "Archivo", var(--sans);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* faint machined-panel engraving */
  background-image:
    radial-gradient(1200px 600px at 78% -10%, rgba(232, 163, 61, 0.09), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(86, 196, 182, 0.05), transparent 55%),
    linear-gradient(var(--bg0), var(--bg0));
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

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

::selection { background: rgba(232, 163, 61, 0.28); color: #fff; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--disp); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; }
.mono { font-family: var(--mono); }

.tag-mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--mono); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.35rem; border-radius: 11px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn .sub { opacity: 0.72; font-weight: 500; }
.btn-primary {
  color: #1a1205;
  background: linear-gradient(180deg, var(--brass-bright), var(--brass) 55%, var(--brass-deep));
  box-shadow: 0 8px 22px -8px rgba(232, 163, 61, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
  position: relative;
}
/* knurled top edge on the primary button */
.btn-primary::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%;
  border-radius: 11px 11px 0 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 4px);
  opacity: 0.5; pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(232, 163, 61, 0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-ghost {
  color: var(--ink); background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-2);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--brass); color: var(--brass-bright); }
.btn-sm { padding: 0.5rem 0.95rem; font-size: 0.82rem; border-radius: 9px; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(16, 17, 22, 0.72);
  border-bottom: 1px solid var(--line);
}
.topbar .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0.7rem 24px;
  display: flex; align-items: center; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--disp); font-weight: 800; letter-spacing: 0.02em; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand .v { font-family: var(--mono); font-weight: 500; font-size: 0.68rem; color: var(--ink3); letter-spacing: 0.06em; }
.topbar .price { margin-left: auto; font-family: var(--mono); font-size: 0.8rem; color: var(--ink2); }
@media (max-width: 620px) { .topbar .price { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0.32rem 0.8rem;
  margin-bottom: 1.4rem;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 8px var(--brass); }

.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4rem); font-weight: 900; }
.hero h1 .a { color: var(--volume); }
.hero h1 .b { color: var(--seek); }
.hero h1 .c { color: var(--scroll); }

.lede { color: var(--ink2); font-size: clamp(1.05rem, 1.5vw, 1.2rem); margin-top: 1.3rem; max-width: 34ch; }
.lede b { color: var(--ink); font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem; }

.proof { display: flex; flex-wrap: wrap; gap: 1.1rem 1.4rem; margin-top: 1.7rem; }
.proof span { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.78rem; color: var(--ink2); }
.proof .ok { color: var(--volume); font-weight: 700; }

.byline { margin-top: 1.5rem; font-size: 0.86rem; color: var(--ink3); }
.byline a { color: var(--ink2); border-bottom: 1px solid var(--line-2); }
.byline a:hover { color: var(--brass); border-color: var(--brass); }

/* ---------- the trackpad instrument ---------- */
.pad-stage { perspective: 1400px; display: flex; justify-content: center; }
.pad {
  position: relative; width: min(100%, 460px); aspect-ratio: 1.42 / 1;
  border-radius: 26px; padding: 14px;
  transform: rotateX(9deg) rotateY(-8deg) rotateZ(0.5deg);
  transform-style: preserve-3d;
  background:
    radial-gradient(120% 130% at 30% 10%, #2a2d35, #17181d 60%),
    var(--panel);
  border: 1px solid var(--line-2);
  box-shadow:
    0 50px 90px -40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: padfloat 9s ease-in-out infinite;
}
@keyframes padfloat {
  0%, 100% { transform: rotateX(9deg) rotateY(-8deg) translateY(0); }
  50% { transform: rotateX(9deg) rotateY(-8deg) translateY(-6px); }
}
.pad-surface {
  position: absolute; inset: 14px; border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(90% 120% at 50% 0%, #202329, #14151a 70%);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.6);
}
/* rails — dim at rest; the JS lights one at a time via [data-active] */
.rail { position: absolute; opacity: 0.28; transition: opacity 0.55s ease; }
.rail .glow { position: absolute; inset: 0; }
.rail .label {
  position: absolute; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em;
  color: var(--ink2); opacity: 0.85;
}
.rail-left { left: 14px; top: 14px; bottom: 14px; width: 20%; }
.rail-left .glow { background: linear-gradient(90deg, rgba(86,196,182,0.34), transparent); border-left: 2px solid var(--volume); box-shadow: -1px 0 18px rgba(86,196,182,0.35); }
.rail-left .label { left: 8px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left center; color: var(--volume); }
.rail-top { left: 14px; right: 14px; top: 14px; height: 20%; }
.rail-top .glow { background: linear-gradient(180deg, rgba(232,163,61,0.32), transparent); border-top: 2px solid var(--seek); box-shadow: 0 -1px 18px rgba(232,163,61,0.32); }
.rail-top .label { top: 8px; left: 50%; transform: translateX(-50%); color: var(--seek); }
.rail-right { right: 14px; top: 14px; bottom: 14px; width: 20%; }
.rail-right .glow { background: linear-gradient(270deg, rgba(227,111,82,0.32), transparent); border-right: 2px solid var(--scroll); box-shadow: 1px 0 18px rgba(227,111,82,0.32); }
.rail-right .label { right: 8px; top: 50%; transform: rotate(90deg) translateX(-50%); transform-origin: right center; color: var(--scroll); }

.pad-surface[data-active="volume"] .rail-left,
.pad-surface[data-active="seek"]   .rail-top,
.pad-surface[data-active="scroll"] .rail-right { opacity: 1; }
/* static (reduced-motion) state lights all three */
.pad-surface[data-active="all"] .rail { opacity: 0.9; }

/* detent ticks on right rail — brighten while scroll is active */
.ticks { position: absolute; right: 15%; top: 16%; bottom: 16%; width: 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.ticks i { display: block; width: 9px; height: 1.5px; background: var(--scroll); opacity: 0.22; border-radius: 2px; transition: opacity 0.4s ease; }
.pad-surface[data-active="scroll"] .ticks i,
.pad-surface[data-active="all"] .ticks i { opacity: 0.7; }

/* fingers — TWO per rail (it's a two-finger gesture); hidden at rest, ride the
   active rail once per phase. Stacked on the vertical rails, side-by-side on top. */
.finger { position: absolute; width: 22px; height: 22px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass) 55%, var(--brass-deep));
  box-shadow: 0 0 15px rgba(232,163,61,0.7), inset 0 1px 0 rgba(255,255,255,0.5);
}
.f-vol, .f-vol2       { left: 6%; top: 38%; }
.f-vol2               { transform: translateY(25px); }
.f-seek, .f-seek2     { top: 5%; left: 42%; }
.f-seek2              { transform: translateX(26px); }
.f-scroll, .f-scroll2 { right: 6%; top: 42%; }
.f-scroll2            { transform: translateY(25px); }

.pad-surface[data-active="volume"] .f-vol,
.pad-surface[data-active="volume"] .f-vol2    { animation: rideVol 2.6s ease-in-out both; }
.pad-surface[data-active="seek"]   .f-seek,
.pad-surface[data-active="seek"]   .f-seek2   { animation: rideSeek 2.6s ease-in-out both; }
.pad-surface[data-active="scroll"] .f-scroll,
.pad-surface[data-active="scroll"] .f-scroll2 { animation: rideScroll 2.6s ease-in-out both; }
/* static state: rest two fingers on each rail */
.pad-surface[data-active="all"] .finger { opacity: 1; }

/* slide to the far end, then ease back 30% of the travel and release */
@keyframes rideVol   { 0% { opacity: 0; top: 66%; } 12% { opacity: 1; } 52% { top: 20%; } 74% { top: 34%; } 88% { opacity: 1; } 100% { opacity: 0; top: 34%; } }
@keyframes rideSeek  { 0% { opacity: 0; left: 20%; } 12% { opacity: 1; } 52% { left: 70%; } 74% { left: 55%; } 88% { opacity: 1; } 100% { opacity: 0; left: 55%; } }
@keyframes rideScroll{ 0% { opacity: 0; top: 20%; } 12% { opacity: 1; } 52% { top: 62%; } 74% { top: 49%; } 88% { opacity: 1; } 100% { opacity: 0; top: 49%; } }

/* center read-out */
.pad-readout {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.12em;
  color: var(--ink); text-align: center;
  padding: 0.55rem 0.9rem; border-radius: 9px;
  background: rgba(10, 11, 14, 0.66); border: 1px solid var(--line-2);
  min-width: 128px;
}
.pad-readout .rk { display: block; font-size: 0.58rem; letter-spacing: 0.24em; color: var(--ink3); margin-bottom: 2px; }
.pad-readout .rv { font-weight: 600; }
.pad-caption { text-align: center; font-family: var(--mono); font-size: 0.72rem; color: var(--ink3); margin-top: 1.2rem; letter-spacing: 0.04em; }

/* ============================================================
   SECTIONS / general
   ============================================================ */
section { padding: clamp(3rem, 6vw, 5rem) 0; }
.audience { text-align: center; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ink2); max-width: 40ch; margin: 0 auto; padding: 1rem 0 2.5rem; }
.audience b { color: var(--ink); }

.floor-head { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 2.5rem; }
.floor-head .num { font-family: var(--mono); font-size: 0.9rem; color: var(--brass); border: 1px solid var(--line-2); border-radius: 8px; padding: 0.3rem 0.55rem; margin-top: 0.35rem; }
.floor-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0.35rem 0 0.6rem; }
.floor-head p { color: var(--ink2); max-width: 52ch; }

/* ---------- rails cards ---------- */
.rails-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .rails-grid { grid-template-columns: 1fr; } }
.rail-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem 1.4rem 1.6rem; overflow: hidden;
}
.rail-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.rail-card.v::before { background: var(--volume); box-shadow: 0 0 16px var(--volume); }
.rail-card.s::before { background: var(--seek); box-shadow: 0 0 16px var(--seek); }
.rail-card.c::before { background: var(--scroll); box-shadow: 0 0 16px var(--scroll); }
.rail-card .edge { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; }
.rail-card.v .edge { color: var(--volume); }
.rail-card.s .edge { color: var(--seek); }
.rail-card.c .edge { color: var(--scroll); }
.rail-card h3 { font-size: 1.4rem; margin: 0.5rem 0 0.5rem; }
.rail-card p { color: var(--ink2); font-size: 0.95rem; }
.rail-card .gesture { margin-top: 1.1rem; font-family: var(--mono); font-size: 0.78rem; color: var(--ink3); display: flex; align-items: center; gap: 0.5rem; }

/* ---------- screenshots ---------- */
.shot-band { margin-top: 2.5rem; display: grid; place-items: center; }
.shot {
  max-width: 340px; width: 100%; border-radius: 18px;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}
.shot-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; margin-top: 2.5rem; }
@media (max-width: 720px) { .shot-duo { grid-template-columns: 1fr; } }
.shot-duo figure { display: grid; gap: 0.7rem; justify-items: center; }
.shot-duo img { width: 100%; max-width: 320px; border-radius: 16px; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5)); }
figcaption { font-family: var(--mono); font-size: 0.74rem; color: var(--ink3); text-align: center; letter-spacing: 0.04em; }

/* ---------- feature grid ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
@media (max-width: 820px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; transition: transform 0.18s ease, border-color 0.2s ease; }
.feat:hover { transform: translateY(-3px); border-color: var(--line-2); }
.feat .ico { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--brass); margin-bottom: 0.7rem; }
.feat h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.feat p { color: var(--ink2); font-size: 0.9rem; }

/* ---------- setup steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; position: relative; }
.step h3 { font-size: 1.15rem; margin-bottom: 0.45rem; }
.step p { color: var(--ink2); font-size: 0.92rem; }
.step code { font-family: var(--mono); font-size: 0.85em; background: rgba(232,163,61,0.12); color: var(--brass-bright); padding: 0.1em 0.4em; border-radius: 5px; }

/* ---------- trust ---------- */
.trust { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
.trust ul { list-style: none; display: grid; gap: 1.1rem; }
.trust li { display: flex; gap: 0.9rem; }
.trust .mk { font-family: var(--mono); font-size: 0.72rem; color: var(--brass); flex: 0 0 52px; padding-top: 0.15rem; }
.trust .t { color: var(--ink2); font-size: 0.95rem; }
.trust .t b { color: var(--ink); }
.trust a { color: var(--brass); border-bottom: 1px solid rgba(232,163,61,0.4); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 0.6rem; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0 1.2rem; overflow: hidden; }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--brass); font-size: 1.2rem; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink2); padding-bottom: 1.1rem; font-size: 0.93rem; }
.faq details p strong { color: var(--ink); }
.faq a { color: var(--brass); }

/* ---------- buy / penthouse ---------- */
.penthouse {
  text-align: center; border-radius: 24px; padding: clamp(2.5rem, 6vw, 4rem) 2rem;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(232,163,61,0.16), transparent 62%),
    var(--panel);
  border: 1px solid var(--line-2);
}
.penthouse h2 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; margin: 0.7rem 0 1rem; }
.penthouse p { color: var(--ink2); max-width: 44ch; margin: 0 auto 1.8rem; }
.penthouse .cta-row { justify-content: center; }
.penthouse .micro { font-family: var(--mono); font-size: 0.74rem; color: var(--ink3); margin-top: 1.6rem; }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line); padding: 2.5rem 24px; text-align: center; }
footer .socials { display: flex; justify-content: center; gap: 1.4rem; font-size: 1.2rem; margin-bottom: 1.2rem; }
footer .socials a { color: var(--ink3); transition: color 0.2s; }
footer .socials a:hover { color: var(--brass); }
footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem; font-family: var(--mono); font-size: 0.8rem; }
footer .links a { color: var(--ink2); }
footer .links a:hover { color: var(--brass); }
footer .copy { margin-top: 1.2rem; font-size: 0.78rem; color: var(--ink3); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}