/* Extras & HD page — inherits from style.css */

.nav-links a.active{color:var(--gold-bright)}
.nav-links a.active::after{width:100%}

/* Hero */
.ex-hero{
  position:relative;text-align:center;
  padding:9rem 1.4rem 3.5rem;
  display:flex;justify-content:center;
}
.ex-hero-content{max-width:760px;position:relative;animation:riseIn .8s ease both}
.ex-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.05;margin-bottom:1rem;
  background:linear-gradient(180deg,#fff 0%,#dfe8ff 40%,var(--gold-bright) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 30px rgba(93,184,255,.25);
}
.ex-sub{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--ink-soft);margin-bottom:1.6rem}
.ex-hero-tags{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;color:var(--frost-bright);font-size:.9rem;font-weight:600}

/* Download grid */
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ex-card{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;
  padding:1.9rem 1.6rem;position:relative;backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.ex-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ex-card.featured{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(35,29,12,.6), var(--panel));
  box-shadow:0 20px 50px -24px rgba(232,200,119,.45);
}
.ex-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:#1a1305;background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  padding:.3em .9em;border-radius:999px;box-shadow:0 6px 16px -6px rgba(232,200,119,.7);white-space:nowrap;
}
.ex-icon{font-size:2.1rem;margin-bottom:.7rem}
.ex-card h3{font-family:var(--font-serif);font-size:1.3rem;margin-bottom:.5rem}
.ex-card p{color:var(--ink-soft);font-size:.94rem;margin-bottom:1.2rem;flex:1}
.ex-card p code, .ex-meta code{
  font-family:'JetBrains Mono','Consolas',monospace;font-size:.86em;color:var(--gold-bright);
  background:rgba(232,200,119,.08);padding:.08em .4em;border-radius:5px;
}
.ex-meta{display:block;text-align:center;margin-top:.8rem;font-size:.79rem;color:var(--ink-dim)}

/* HD walkthrough */
.hd-steps{display:flex;flex-direction:column;gap:1.1rem;max-width:860px;margin:0 auto}
.hd-step{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;
  padding:1.6rem 1.7rem;backdrop-filter:blur(10px);
  transition:border-color .3s;
}
.hd-step:hover{border-color:var(--line)}
.hd-step-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.7rem;flex-wrap:wrap}
.hd-num{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:#1a1305;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  box-shadow:0 6px 16px -6px rgba(232,200,119,.6);
}
.hd-step-head h3{font-family:var(--font-serif);font-size:1.25rem;margin:0}
.hd-tag{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:.28em .7em;border-radius:999px;margin-left:auto;
}
.hd-tag.big{background:rgba(232,200,119,.14);color:var(--gold-bright);border:1px solid rgba(232,200,119,.35)}
.hd-tag.safe{background:rgba(84,224,138,.12);color:#a8f0c4;border:1px solid rgba(84,224,138,.3)}
.hd-step p{color:var(--ink-soft);font-size:.96rem;margin-bottom:.7rem}
.hd-step p code, .hd-step p strong{color:var(--ink)}
.hd-step p code{
  font-family:'JetBrains Mono','Consolas',monospace;font-size:.86em;color:var(--gold-bright);
  background:rgba(232,200,119,.08);padding:.08em .4em;border-radius:5px;
}
kbd{
  font-family:'JetBrains Mono','Consolas',monospace;font-size:.8em;
  background:rgba(255,255,255,.08);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:.1em .5em;color:var(--ink);
}
.hd-link{font-family:var(--font-display);font-size:.88rem;color:var(--frost-bright);font-weight:600}
.hd-link.gold{color:var(--gold-bright)}
.hd-link:hover{text-decoration:underline}

/* Code block */
.code-block{position:relative;margin-top:.4rem}
.code-block pre{
  background:rgba(6,10,18,.85);border:1px solid var(--line-soft);border-radius:10px;
  padding:1rem 1.1rem;overflow-x:auto;
  font-family:'JetBrains Mono','Consolas',monospace;font-size:.86rem;color:var(--gold-bright);
  line-height:1.7;
}
.code-copy{
  position:absolute;top:.6rem;right:.6rem;cursor:pointer;
  font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#1a1305;background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  border:0;border-radius:7px;padding:.35em .7em;
}

/* Community packs */
.pack-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:960px;margin:0 auto}
.pack-col-title{
  font-family:var(--font-serif);font-size:1.15rem;margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem;
}
.pack-col-title small{font-family:var(--font-body);font-size:.78rem;color:var(--ink-dim);font-weight:400}
.pack-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.pack-dot.safe{background:#54e08a;box-shadow:0 0 10px rgba(84,224,138,.6)}
.pack-dot.warn{background:#e0b054;box-shadow:0 0 10px rgba(224,176,84,.6)}
.pack{
  display:block;background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;
  padding:1.1rem 1.2rem;margin-bottom:.9rem;backdrop-filter:blur(8px);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.pack:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.pack-name{display:block;font-family:var(--font-serif);font-size:1.05rem;color:var(--ink);margin-bottom:.2rem}
.pack-name em{color:var(--ink-dim);font-size:.82em}
.pack-desc{display:block;color:var(--ink-soft);font-size:.9rem;margin-bottom:.5rem;line-height:1.5}
.pack-src{font-family:var(--font-display);font-size:.76rem;letter-spacing:.06em;color:var(--frost-bright);font-weight:600}
.pack-note{
  background:rgba(224,176,84,.08);border:1px dashed rgba(224,176,84,.4);border-radius:12px;
  padding:1rem 1.1rem;color:var(--ink-soft);font-size:.88rem;line-height:1.55;
}
.pack-note code{font-family:'JetBrains Mono','Consolas',monospace;font-size:.85em;color:var(--gold-bright)}

/* CTA */
.ex-cta-sec{padding-top:2rem}
.ex-cta{
  max-width:760px;margin:0 auto;text-align:center;
  background:radial-gradient(circle at 50% 0%, rgba(93,184,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(17,24,42,.85), rgba(9,14,26,.9));
  border:1px solid var(--line);border-radius:22px;padding:2.8rem 2rem;box-shadow:var(--shadow);
}
.ex-cta-logo{width:min(200px,55%);margin:0 auto 1.1rem}
.ex-cta h2{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:.6rem;
  background:linear-gradient(180deg,#fff,var(--gold-bright));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.ex-cta p{color:var(--ink-soft);max-width:480px;margin:0 auto 1.6rem}
.ex-cta-btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

@media (max-width:900px){
  .ex-grid{grid-template-columns:1fr 1fr}
  .pack-cols{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ex-grid{grid-template-columns:1fr}
  .hd-tag{margin-left:0}
  .nav-cta{display:none}
}