/* ============================================================
   RenderAI — CSS condiviso pagine marketing (BOZZE)
   Brand: dark #0d0b09 · gold #c9a84c · Bebas Neue / Inter / JetBrains Mono
   (stesso stack font del sito: index/home/advanced/crediti)
   ============================================================ */
:root{
  --bg:#0d0b09;
  --bg-soft:#151210;
  --bg-card:#1a1613;
  --line:#2a251f;
  --gold:#c9a84c;
  --gold-dim:#9a8039;
  --text:#ece7dd;
  --muted:#a89f8f;
  --ok:#6fbf7d;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,sans-serif;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

/* Wordmark */
.wordmark{font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:1px; color:var(--text);}
.wordmark .ai{color:var(--gold);}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 5vw; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(13,11,9,.92); backdrop-filter:blur(8px); z-index:50;
}
.topbar nav{display:flex; gap:26px; align-items:center;}
.topbar nav a{color:var(--muted); font-size:14px; font-weight:500;}
.topbar nav a:hover{color:var(--text); text-decoration:none;}
/* i .btn nella nav devono tenere il proprio colore, non quello dei link */
.topbar nav a.btn-gold, .topbar nav a.btn-gold:hover{color:#171307;}
.topbar nav a.btn-ghost{color:var(--text);}
.topbar nav a.btn-ghost:hover{color:var(--gold);}

/* Buttons */
.btn{
  display:inline-block; padding:13px 30px; border-radius:10px;
  font-weight:700; font-size:15px; cursor:pointer; border:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none;}
.btn-gold{background:var(--gold); color:#171307;}
.btn-gold:hover{box-shadow:0 6px 24px rgba(201,168,76,.35);}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

/* Tags / labels */
.tag{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold); font-weight:600;
}

/* Sections & typography */
.section{padding:72px 5vw; max-width:1180px; margin:0 auto;}
h1,h2{font-family:'Bebas Neue',sans-serif; letter-spacing:.5px; font-weight:400; line-height:1.05;}
h1{font-size:clamp(44px,6.5vw,84px);}
h2{font-size:clamp(32px,4vw,52px); margin-bottom:14px;}
h3{font-size:19px; font-weight:700; margin-bottom:8px;}
.lead{font-size:19px; color:var(--muted); max-width:680px;}

/* Cards */
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(440px,1fr));}
@media (max-width:520px){.grid-2{grid-template-columns:1fr;}}
.card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
  padding:26px;
}
.card h3{color:var(--gold);}
.card p{color:var(--muted); font-size:14.5px;}

/* Placeholder immagini (da sostituire con render reali dell'app) */
.ph{
  border:1px dashed var(--gold-dim); border-radius:12px;
  background:linear-gradient(135deg,#171310 0%,#221c14 100%);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:12px;
  padding:18px; min-height:220px; line-height:1.6;
}
.ph b{color:var(--gold); display:block; margin-bottom:6px; letter-spacing:1px;}

/* Before/after */
.ba{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch;}
.ba .lbl{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}

/* Pricing */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:32px;}
.plan{
  background:var(--bg-card); border:1px solid var(--line); border-radius:16px;
  padding:30px 26px; display:flex; flex-direction:column; gap:6px; position:relative;
}
.plan.hot{border-color:var(--gold); box-shadow:0 0 34px rgba(201,168,76,.12);}
.plan .badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#171307; font-size:11px; font-weight:800;
  padding:3px 14px; border-radius:12px; letter-spacing:1px;
}
.plan .p-name{font-family:'JetBrains Mono',monospace; letter-spacing:2px; text-transform:uppercase; font-size:12px; color:var(--muted);}
.plan .p-price{font-family:'Bebas Neue',sans-serif; font-size:44px; color:var(--gold); line-height:1;}
.plan .p-sub{font-size:12px; color:var(--muted);}
.plan .p-renders{font-size:15px; font-weight:700; margin:10px 0 4px;}
.plan ul{list-style:none; margin:8px 0 18px;}
.plan li{font-size:13.5px; color:var(--muted); padding:4px 0 4px 22px; position:relative;}
.plan li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700;}
.plan .btn{margin-top:auto; text-align:center;}

/* Tables */
table{width:100%; border-collapse:collapse; margin:22px 0; font-size:14px;}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);}
tr.hl td{background:rgba(201,168,76,.07); font-weight:600;}
td .y{color:var(--ok); font-weight:700;}
td .n{color:#c46a5a;}

/* FAQ */
details{border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:var(--bg-card);}
summary{padding:18px 22px; cursor:pointer; font-weight:600; font-size:15.5px; list-style:none; position:relative; padding-right:44px;}
summary::after{content:"+"; position:absolute; right:22px; top:14px; color:var(--gold); font-size:22px;}
details[open] summary::after{content:"–";}
details .a{padding:0 22px 18px; color:var(--muted); font-size:14.5px;}

/* Article layout (blog) */
.article{max-width:760px; margin:0 auto; padding:56px 5vw;}
.article h1{font-size:clamp(36px,5vw,58px); margin-bottom:10px;}
.article .meta{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); margin-bottom:34px; letter-spacing:1px;}
.article h2{font-size:clamp(26px,3vw,36px); margin:44px 0 12px;}
.article h3{margin-top:28px; color:var(--gold);}
.article p{margin-bottom:16px; color:#d8d2c6;}
.article ul,.article ol{margin:0 0 18px 24px; color:#d8d2c6;}
.article li{margin-bottom:8px;}
.article .ph{margin:24px 0;}
.article blockquote{
  border-left:3px solid var(--gold); padding:10px 20px; margin:22px 0;
  color:var(--muted); font-style:italic; background:var(--bg-card); border-radius:0 10px 10px 0;
}
.cta-box{
  background:linear-gradient(135deg,#1c1710,#241d12); border:1px solid var(--gold-dim);
  border-radius:16px; padding:34px; text-align:center; margin:48px 0 12px;
}
.cta-box h2{margin-bottom:8px;}
.cta-box p{color:var(--muted); margin-bottom:20px;}

/* Footer */
footer{
  border-top:1px solid var(--line); padding:36px 5vw; margin-top:60px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  color:var(--muted); font-size:13px;
}
footer a{color:var(--muted);}

/* Draft banner (solo bozza — rimuovere alla pubblicazione) */
.draft{
  background:#3a2c10; color:#e8c876; text-align:center; padding:8px 16px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:1.5px;
}

@media (max-width:720px){
  .ba{grid-template-columns:1fr;}
  .topbar nav{display:none;}
}

/* ── Immagini articolo (pubblicato) ── */
.article figure{margin:24px 0;}
.article figure img{width:100%; border-radius:12px; display:block; border:1px solid var(--line);}
.article figcaption{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.5px;
  color:var(--muted); margin-top:8px; text-align:center;
}
/* ── Blog hub (index) ── */
.hub{max-width:900px; margin:0 auto; padding:56px 5vw;}
.hub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:32px;}
.hub-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s ease, transform .15s ease;
}
.hub-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.hub-card img{width:100%; height:180px; object-fit:cover; display:block;}
.hub-card .body{padding:22px;}
.hub-card h3{color:var(--gold); font-size:18px; margin-bottom:8px;}
.hub-card p{color:var(--muted); font-size:14px; margin-bottom:14px;}
.hub-card a.readmore{font-weight:700; font-size:14px;}