:root{
  --bg: #0b0f12;
  --panel: #0f1417;
  --muted: #98a0a6;
  --text: #e6eef6;
  --accent: #FFA517;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Global reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ui);
  background:linear-gradient(180deg,var(--bg) 0%, #071018 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

.container{max-width:1100px;margin:0 auto;padding:28px}

/* Header */
.site-header{backdrop-filter:blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-bottom:1px solid rgba(255,255,255,0.02)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--text);text-decoration:none;font-size:1.25rem}
.brand .accent{color:var(--accent);margin-left:6px}
.nav{display:flex;gap:18px}
.nav a{color:var(--muted);text-decoration:none;padding:10px;border-radius:8px}
.nav a:hover{color:var(--text);background:var(--glass)}

/* Hero */
.hero{padding:64px 0 48px}
.hero .container{display:flex;flex-direction:column;gap:18px}
.hero h1{font-size:2.4rem;margin:0}
.tagline{color:var(--muted);max-width:70ch}
.ctas{display:flex;gap:12px;margin-top:6px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent), #ffb24a);color:#081016;box-shadow:0 6px 18px rgba(255,165,23,0.12)}
.btn.ghost{border:1px solid rgba(255,255,255,0.04);color:var(--text);background:transparent}

/* Features */
.features h2{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.02)}
.card h3{margin:0 0 8px}
.card p{color:var(--muted);margin:0}

/* Install / code blocks */
.install .code-block, .usage .code-block{background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255,255,255,0.02));padding:14px;border-radius:10px;overflow:auto;border:1px solid rgba(255,255,255,0.03)}
.code-block code{display:block;color:#dbe9ff;background:transparent;font-family:var(--mono);font-size:0.95rem}
.code-block code .kw{color:#ffb86b}

/* Usage & snippet styling */
.usage h2{margin-top:0}
.lang-py{white-space:pre;}

/* Contrib cards */
.contrib-grid{display:flex;gap:12px;flex-wrap:wrap}
.contrib-card{flex:1 1 220px;padding:14px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);border:1px solid rgba(255,255,255,0.02)}

/* Footer */
.site-footer{margin-top:48px;padding:18px 0;border-top:1px solid rgba(255,255,255,0.02)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.small{color:var(--muted);font-size:0.9rem}
.accent{color:var(--accent);font-weight:700}

/* Responsive tweaks */
@media (max-width:720px){
  .header-inner{flex-direction:row}
  .nav{display:none}
  .hero h1{font-size:1.8rem}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

/* Accessibility focus states */
a:focus{outline:3px solid rgba(255,165,23,0.12);outline-offset:4px}

/* Small UI niceties */
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:8px}

/* Notes: il file ha estensione .cc per richiesta; se il server non serve correttamente la MIME type
   potrebbe essere necessario rinominare in .css o configurare il server per text/css */