/* kgenovz homepage */

:root{
  --bg:#0a0a0c;
  --bg-2:#101015;
  --ink:#ECECEE;
  --ink-2:#A5A5AE;
  --ink-3:#6F6F78;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.025);
  --card-2:rgba(255,255,255,.045);
  --accent:#7B61FF;
  --accent-soft:rgba(123,97,255,.14);
  --accent-glow:rgba(123,97,255,.35);

  --pad-x:clamp(20px, 4vw, 64px);
  --gap:24px;
  --radius:14px;
}

:root[data-density="compact"]{ --section-pad:48px; --gap:18px; --hero-pad:64px 0 36px; }
:root[data-density="comfy"]   { --section-pad:80px; --gap:24px; --hero-pad:96px 0 56px; }
:root[data-density="roomy"]   { --section-pad:120px; --gap:32px; --hero-pad:128px 0 80px; }

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

/* ── Background ─────────────────────────────────────────────────────────── */
.bg-layer{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg-glow{position:absolute;inset:0;opacity:.9}
.bg-grain{position:absolute;inset:-20%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
  background-size:160px 160px;mix-blend-mode:overlay;opacity:.18}

:root[data-bg="flat"] .bg-glow{display:none}
:root[data-bg="flat"] .bg-grain{display:none}
:root[data-bg="gradient"] .bg-grain{display:none}
:root[data-bg="gradient"] .bg-glow{opacity:1}
:root[data-bg="grain"] .bg-glow{opacity:.55}

/* ── Page shell ─────────────────────────────────────────────────────────── */
.page{
  max-width:1180px;
  margin:0 auto;
  padding:24px var(--pad-x) 80px;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:12px; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:rgba(10,10,12,.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);
  border-radius:999px;
  margin-bottom:32px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.005em}
.brand-mark{
  width:14px;height:14px;border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 4px 14px var(--accent-glow);
}
.brand-name{font-size:14px}
.topnav{display:flex;align-items:center;gap:18px;font-size:13px;color:var(--ink-2)}
.topnav a{padding:6px 2px;position:relative;transition:color .15s}
.topnav a:hover{color:var(--ink)}
.topnav a.on{color:var(--ink)}
.topnav a.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--accent);
}
.topnav-sep{width:1px;height:14px;background:var(--line-2)}
.topnav-ext{color:var(--ink-2)}
@media (max-width:520px){
  .topbar{padding:8px 12px}
  .topnav{gap:14px;font-size:12px}
  .topnav-sep,.topnav-ext{display:none}
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{ padding:var(--hero-pad); max-width:920px }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2);
  padding:6px 12px;
  border:1px solid var(--line-2);
  border-radius:999px;
  margin-bottom:24px;
}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;box-shadow:0 0 12px var(--accent-glow)}
.hero-title{
  font-family:"Fraunces","Source Serif Pro",ui-serif,Georgia,serif;
  font-weight:400;
  font-size:clamp(40px, 6.4vw, 88px);
  line-height:.98;
  letter-spacing:-.02em;
  margin:0 0 20px;
  text-wrap:balance;
  font-variation-settings:"opsz" 144, "SOFT" 50;
}
.hero-sub{
  font-size:clamp(15px, 1.4vw, 18px);
  line-height:1.55;
  color:var(--ink-2);
  max-width:580px;
  margin:0 0 32px;
  text-wrap:pretty;
}

/* Marquee */
.marquee{
  position:relative;
  margin-top:8px;
  border-block:1px solid var(--line);
  padding:14px 0;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:inline-flex; gap:48px; white-space:nowrap;
  animation:marquee 40s linear infinite;
  padding-left:48px;
}
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee-item{
  display:inline-flex; align-items:center; gap:12px;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2);
}
.marquee-dot{ width:5px;height:5px;border-radius:50% }
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ── Jump cards ─────────────────────────────────────────────────────────── */
.jumps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
  margin:8px 0 var(--section-pad);
}
@media (max-width:780px){ .jumps{grid-template-columns:1fr} }

.jump{
  --accent:#7B61FF;
  appearance:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:18px;
  text-align:left; padding:22px 24px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:inherit;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s;
  position:relative; overflow:hidden;
}
.jump::before{
  content:""; position:absolute; inset:auto -1px -1px -1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity .25s;
}
.jump:hover{
  transform:translateY(-2px);
  background:var(--card-2);
  border-color:var(--line-2);
}
.jump:hover::before, .jump--active::before{ opacity:1 }
.jump--active{ border-color:rgba(255,255,255,.18); background:var(--card-2) }
.jump-num{
  font-family:"Fraunces",serif;
  font-size:42px; line-height:1;
  color:var(--accent);
  width:46px; flex-shrink:0;
}
.jump-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.jump-label{font-weight:600;font-size:15px}
.jump-sub{font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.jump-arrow{
  font-size:18px; color:var(--ink-3);
  transform:translateX(0);
  transition:transform .25s, color .25s;
}
.jump:hover .jump-arrow{ transform:translateX(4px); color:var(--ink) }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section{ padding-top:var(--section-pad); scroll-margin-top:100px }
.section-hd{
  display:flex; align-items:center; gap:18px; margin-bottom:32px;
}
.section-num{
  font-family:"Fraunces",serif;
  font-size:14px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line-2);
  color:var(--ink-2);
}
.section-kicker{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:2px;
}
.section-title{
  font-family:"Fraunces",serif;
  font-weight:400;
  font-size:clamp(28px,3.2vw,40px);
  letter-spacing:-.015em;
  margin:0; line-height:1;
}
.section-rule{ flex:1; height:1px; background:var(--line) }
.section-count{
  font-variant-numeric:tabular-nums;
  font-size:12px; letter-spacing:.06em;
  color:var(--ink-3);
}

/* ── Addon cards ────────────────────────────────────────────────────────── */
.addons-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:980px){ .addons-grid{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .addons-grid{grid-template-columns:1fr} }

.addon{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  display:flex; flex-direction:column; gap:14px;
  transition:border-color .25s, background .25s, transform .25s;
  position:relative; overflow:hidden;
}
.addon::after{
  content:""; position:absolute; left:0; right:0; top:0;
  height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition:opacity .25s;
}
.addon:hover{ border-color:var(--line-2); background:var(--card-2) }
.addon:hover::after{ opacity:.7 }

.addon-hd{display:flex;align-items:flex-start;gap:14px}
.addon-num{
  font-family:"Fraunces",serif;
  font-size:32px; line-height:.9;
  letter-spacing:-.02em;
}
.addon-meta{flex:1;min-width:0}
.addon-tag{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:4px;
}
.addon-name{
  font-family:"Fraunces",serif; font-weight:400;
  font-size:24px; letter-spacing:-.01em; margin:0; line-height:1.05;
}
.addon-status{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--ink-3); letter-spacing:.06em;
  text-transform:uppercase;
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
}
.status-ok{
  background:#37D399;
  box-shadow:0 0 0 3px rgba(55,211,153,.15);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(55,211,153,.15)}
  50%   {box-shadow:0 0 0 6px rgba(55,211,153,.04)}
}

.addon-blurb{
  margin:0; font-size:14px; line-height:1.55; color:var(--ink-2);
}
.addon-bullets{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; color:var(--ink-2);
}
.addon-bullets li{display:flex;align-items:center;gap:10px}
.addon-bullets svg{flex-shrink:0}

.addon-actions{
  display:flex; gap:8px; margin-top:6px;
  padding-top:14px; border-top:1px dashed var(--line);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:10px;
  font-size:13px; font-weight:500; letter-spacing:.005em;
  border:1px solid transparent;
  transition:transform .15s, background .2s, border-color .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:var(--accent); color:#0a0a0c; font-weight:600 }
.btn-primary:hover{ filter:brightness(1.08) }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line-2);
}
.btn-ghost:hover{ border-color:rgba(255,255,255,.28); background:var(--card-2) }
.btn-arrow{transition:transform .2s}
.btn:hover .btn-arrow{transform:translate(2px,-2px)}

/* ── Changelog ──────────────────────────────────────────────────────────── */
.log{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
.log-item{
  display:grid; grid-template-columns:160px 1fr;
  gap:24px; padding:20px 4px;
  border-bottom:1px solid var(--line);
  transition:background .2s;
}
.log-item:hover{ background:rgba(255,255,255,.015) }
.log-date{
  font-size:12px; letter-spacing:.04em; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.log-meta{display:flex;flex-direction:column;gap:8px;min-width:0}
.log-tag{
  align-self:flex-start;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  padding:3px 8px; border-radius:999px;
}
.log-body{ margin:0; font-size:15px; line-height:1.5; color:var(--ink); text-wrap:pretty }
@media (max-width:680px){
  .log-item{grid-template-columns:1fr}
  .log-date{padding-top:0}
}

/* ── Status ─────────────────────────────────────────────────────────────── */
.status-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:980px){ .status-grid{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .status-grid{grid-template-columns:1fr} }

.status-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.status-row{display:flex;align-items:center;gap:10px;font-size:14px}
.status-name{font-weight:600;flex:1}
.status-ver{font-size:11px;color:var(--ink-3);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.status-bars{
  display:flex; gap:2px; height:28px; align-items:flex-end;
}
.bar{
  flex:1; height:100%; border-radius:1.5px;
  transition:transform .15s, opacity .15s;
}
.bar:hover{transform:scaleY(1.1);opacity:1 !important}
.status-foot{
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--ink-3); letter-spacing:.06em;
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.muted{color:var(--ink-3);font-size:13px}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot{
  margin-top:var(--section-pad);
  padding-top:32px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;margin-bottom:6px}
.foot-tag{font-size:12px;color:var(--ink-3);max-width:380px;line-height:1.5}
.foot-r{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);text-align:right}
.foot-r a{transition:color .15s}
.foot-r a:hover{color:var(--ink)}
@media (max-width:680px){
  .foot-r{text-align:left}
}