/* ===========================================================
   KeyforAgents Books — cyberpunk storefront, polished static
   =========================================================== */
:root{
  --ink:#05070b;
  --carbon:#0b0f17;
  --slate:#11161f;
  --line:#1b2230;
  --fog:#8a93a6;
  --text:#e6ebf2;
  --green:#37ff8a;
  --teal:#39e0d6;
  --violet:#a78bff;
  --amber:#ff9a55;
  --rose:#ff5267;
  --gold:#ffd400;
  --accent:var(--green);
  --shadow: 0 30px 80px -30px rgba(55,255,138,.15);
  --r-sm:8px; --r-md:14px; --r-lg:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(55,255,138,.06), transparent 60%),
    radial-gradient(1000px 500px at -10% 30%, rgba(167,139,255,.05), transparent 60%),
    var(--ink);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--accent); text-decoration:none}
a:hover{filter:brightness(1.2)}
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif; font-weight:600; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(2rem, 5vw, 3.75rem); line-height:1.05}
h2{font-size:clamp(1.5rem, 3vw, 2.25rem); line-height:1.15}
.muted{color:var(--fog)}
.eyebrow{color:var(--accent); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin:0 0 1rem}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px, 5vw, 64px);
  backdrop-filter: blur(14px);
  background: rgba(5,7,11,.6);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:600}
.brand-mark{color:var(--green); font-size:1.4rem; text-shadow:0 0 12px rgba(55,255,138,.6)}
.brand-name em{color:var(--fog); font-style:normal; font-weight:400}
.nav-links{display:flex; gap:24px}
.nav-links a{color:var(--fog)}
.nav-links a:hover{color:var(--text)}
.cart-btn{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--line);
  color:var(--text); padding:8px 14px; border-radius:999px; cursor:pointer; font:inherit;
}
.cart-btn:hover{border-color:var(--accent); color:var(--accent)}
.cart-count{
  background:var(--accent); color:#000; font-weight:700; font-size:.75rem;
  padding:2px 8px; border-radius:999px; min-width:22px; text-align:center;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(64px,12vw,140px) clamp(20px,5vw,64px) clamp(60px,10vw,100px);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(55,255,138,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55,255,138,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}
.hero-content{position:relative; max-width:780px}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--fog); margin:1.2rem 0 2rem; max-width:60ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px; border-radius:999px;
  font-weight:600; font:inherit; cursor:pointer; text-decoration:none;
  border:1px solid transparent; transition:.15s;
}
.btn-primary{ background:var(--accent); color:#000; box-shadow:var(--shadow) }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.08) }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent) }

/* ---------- Sections ---------- */
section{padding:clamp(48px,8vw,96px) clamp(20px,5vw,64px)}
.section-head{max-width:780px; margin:0 0 36px}
.section-head p{color:var(--fog); margin-top:.5rem}

/* ---------- Filters ---------- */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px}
.filter{
  background:transparent; color:var(--fog); border:1px solid var(--line);
  padding:8px 16px; border-radius:999px; cursor:pointer; font:inherit; font-size:.9rem;
  transition:.15s;
}
.filter:hover{ color:var(--text); border-color:var(--text) }
.filter.active{ background:var(--accent); color:#000; border-color:var(--accent) }

/* ---------- Catalog ---------- */
.book-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:24px;
}
.book-card{
  background:linear-gradient(160deg, var(--carbon), var(--ink));
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:.2s;
}
.book-card:hover{
  transform:translateY(-3px);
  border-color:var(--card-accent, var(--line));
  box-shadow: 0 25px 60px -30px var(--card-accent, rgba(0,0,0,.5));
}
.book-cover{
  aspect-ratio: 3/4; position:relative; overflow:hidden;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
.book-cover svg{display:block; width:100%; height:100%}
.book-body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1}
.book-series{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--card-accent, var(--accent));
}
.book-title{font-family:'Space Grotesk',sans-serif; font-size:1.15rem; font-weight:600; margin:0}
.book-sub{color:var(--fog); font-size:.9rem; margin:0 0 12px; min-height:2.7em}
.tier-row{display:flex; gap:6px; margin-top:auto}
.tier-btn{
  flex:1; background:transparent; color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 8px; cursor:pointer; font:inherit; font-size:.85rem;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:.15s;
}
.tier-btn:hover{ border-color:var(--card-accent, var(--accent)); color:var(--card-accent, var(--accent)) }
.tier-btn .price{font-weight:700; font-size:.95rem}
.tier-btn .tier{font-size:.7rem; color:var(--fog); letter-spacing:.1em; text-transform:uppercase}

/* ---------- Bundles ---------- */
.bundle-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
}
.bundle-card{
  position:relative;
  background:linear-gradient(160deg, var(--carbon), var(--ink));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; display:flex; flex-direction:column; gap:12px;
}
.bundle-card.featured{
  border-color:var(--green);
  box-shadow: 0 0 0 1px rgba(55,255,138,.3), 0 30px 80px -30px rgba(55,255,138,.25);
}
.bundle-card.featured::before{
  content:"Best value";
  position:absolute; top:-12px; left:24px;
  background:var(--green); color:#000; font-size:.7rem; font-weight:700;
  padding:4px 10px; border-radius:999px; letter-spacing:.1em; text-transform:uppercase;
}
.bundle-title{font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:600}
.bundle-price{font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:600; color:var(--green)}
.bundle-card .btn{margin-top:auto}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px}
.faq-list details{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 22px; margin-bottom:10px;
  background:var(--carbon);
}
.faq-list details[open]{ border-color:var(--accent) }
.faq-list summary{
  cursor:pointer; font-weight:500; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-list summary::after{ content:"+"; color:var(--accent); font-size:1.3rem }
.faq-list details[open] summary::after{ content:"−" }
.faq-list details p{margin:.8rem 0 0; color:var(--fog)}

/* ---------- Cart Drawer ---------- */
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(420px, 100vw);
  background:var(--carbon);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s;
  z-index:50;
}
.cart-drawer.open{ transform:translateX(0) }
.cart-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--line);
}
.cart-head button{
  background:transparent; border:0; color:var(--text); font-size:1.6rem; cursor:pointer;
}
.cart-items{flex:1; overflow-y:auto; padding:12px 24px}
.cart-empty{color:var(--fog); padding:32px 0; text-align:center}
.cart-item{
  display:flex; gap:12px; padding:14px 0;
  border-bottom:1px solid var(--line);
}
.cart-item-info{flex:1}
.cart-item-title{font-size:.95rem; font-weight:500}
.cart-item-tier{color:var(--fog); font-size:.8rem}
.cart-item-price{font-weight:600; color:var(--accent)}
.cart-item-remove{
  background:transparent; border:0; color:var(--fog); cursor:pointer; font-size:1.2rem;
}
.cart-item-remove:hover{color:var(--rose)}
.cart-foot{padding:20px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px}
.cart-total{display:flex; justify-content:space-between; font-size:1.1rem}
.cart-total strong{color:var(--green); font-size:1.25rem}
.cart-foot input{
  background:var(--ink); color:var(--text); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; font:inherit;
}
.cart-foot input:focus{border-color:var(--accent); outline:none}
.cart-note{color:var(--fog); font-size:.8rem; text-align:center; margin:0}
.cart-scrim{
  position:fixed; inset:0;
  background:rgba(5,7,11,.6); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s;
  z-index:40;
}
.cart-scrim.open{opacity:1; pointer-events:auto}

/* ---------- Library / Success ---------- */
.library{max-width:560px; margin:0 auto; padding:80px 24px; text-align:center}
.license-form{display:flex; gap:8px; margin:32px 0}
.license-form input{
  flex:1; background:var(--carbon); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 18px; color:var(--text); font:inherit; font-family:ui-monospace,monospace;
  letter-spacing:.05em; text-transform:uppercase;
}
.library-result{margin-top:24px; text-align:left}
.library-result .file{
  background:var(--carbon); border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 20px; margin-bottom:10px;
  display:flex; justify-content:space-between; align-items:center;
}
.success{min-height:80vh; display:grid; place-items:center; padding:60px 24px}
.success-card{
  background:var(--carbon); border:1px solid var(--green); border-radius:var(--r-lg);
  padding:48px 36px; max-width:480px; text-align:center;
  box-shadow:0 30px 80px -30px rgba(55,255,138,.3);
}
.success-mark{
  width:64px; height:64px; border-radius:50%;
  background:var(--green); color:#000;
  display:grid; place-items:center; font-size:2rem; font-weight:700;
  margin:0 auto 20px;
}

/* ---------- Footer ---------- */
.foot{
  border-top:1px solid var(--line);
  padding:32px clamp(20px,5vw,64px);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  color:var(--fog); font-size:.9rem;
}
.foot a{color:var(--fog)}
.foot a:hover{color:var(--text)}

@media (max-width:640px){
  .nav-links{display:none}
  .hero{padding-top:64px}
}