:root{
  --accent: var(--brand);
  --accent-grad: var(--brand-grad);
  --accent-contrast: #fff; /* fallback, sovrascritto da index.php */
  --bg:#0D1117; --layer:#161B22; --card:#141821; --text:#ffffff; --muted:#8B949E;
  --brand:#E60012; /* default, può essere sovrascritto dal theme.css */
  --brand-grad:linear-gradient(135deg,#E60012 0%,#FF6B35 100%);
  --cyan:#00D9FF; --success:#22C55E;
  --card-border:rgba(255,255,255,.12);
  --card-shadow:0 12px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:linear-gradient(135deg,var(--bg) 0%,var(--layer) 50%,var(--bg) 100%);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  overflow-x:hidden;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* Banner */
.demo-banner{
  background:var(--brand-grad); color:#fff; padding:12px 0; text-align:center;
  font-weight:600; font-size:.95rem; letter-spacing:.3px
}
.demo-banner .for-sale{
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px; margin-left:10px;
  font-size:.8rem; text-transform:uppercase
}

/* Header */
header{padding:40px 0 20px; text-align:center}
.logo-wrap{display:flex; gap:12px; align-items:center; justify-content:center; margin-bottom:8px}
.logo-wrap img,.logo-wrap svg{height:56px; width:auto; display:block}
.logo-text{
  font-size:2rem; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  background:linear-gradient(135deg,#ffffff 0%,var(--cyan) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent
}
.tagline{color:var(--muted); font-size:1.05rem; letter-spacing:.5px}

/* Hero */
main{padding:20px 0 60px}
.hero{text-align:center; margin-bottom:60px}
.hero h1{
  font-size:clamp(2.2rem,6vw,3.5rem); font-weight:800; margin-bottom:18px;
  background:linear-gradient(135deg,#ffffff 0%,#8B949E 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent
}
.hero .subtitle{font-size:1.15rem; color:var(--muted); margin:0 auto 26px; max-width:740px; line-height:1.5}
.availability{
  display:inline-flex; align-items:center; gap:10px; background:rgba(230,0,18,.10);
  border:1px solid rgba(230,0,18,.30); padding:12px 24px; border-radius:30px; font-weight:600
}
.dot{width:8px; height:8px; background:var(--brand); border-radius:50%;
     animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}

/* Cards grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; margin:60px 0}
.card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--card-border);
  border-radius:16px; padding:26px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:var(--card-shadow);
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(230,0,18,.30);
  box-shadow:0 16px 40px rgba(230,0,18,.15)
}
.icon{font-size:2rem; margin-bottom:12px; display:block}
.card h3{color:var(--brand); margin-bottom:10px; font-size:1.2rem}
.card p{color:var(--muted); line-height:1.6}

/* Sections */
.section{
  background:rgba(255,255,255,.03); border:1px solid var(--card-border);
  border-radius:20px; padding:44px 36px; margin:60px 0; text-align:center
}
.section h2{font-size:2rem; margin-bottom:14px}
.section .lead{color:var(--muted); margin-bottom:26px}

/* Companies */
.companies{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; margin-top:22px}
.company{background:rgba(255,255,255,.05); border:1px solid var(--card-border); border-radius:12px; padding:18px; text-align:center; transition:transform .15s ease}
.company:hover{transform:translateY(-2px); background:rgba(230,0,18,.08)}
.company .logo{font-weight:800; color:var(--brand); margin-bottom:6px}
.company .desc{color:var(--muted); font-size:.95rem}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px; margin:24px 0 8px}
.stat .num{font-size:2.2rem; font-weight:800; color:var(--cyan); margin-bottom:6px}
.stat .lbl{color:var(--muted); font-size:.95rem}

/* Use cases */
.usecases{margin:60px 0}
.usecases h2{text-align:center; font-size:2rem; color:var(--brand); margin-bottom:22px}
.usegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.use{
  background:rgba(255,255,255,.05); border:1px solid var(--card-border); border-radius:12px;
  padding:20px; display:flex; align-items:center; gap:12px
}
.use:hover{border-color:rgba(230,0,18,.30); background:rgba(230,0,18,.05)}
.check{color:#22C55E; font-size:1.3rem}
.usetxt{color:#C9D1D9; font-weight:600}

/* CTA */
:root{
  /* puoi sovrascriverlo per dominio in /assets/<dominio>/theme.css se vuoi */
  --btn-bg: #0D1117;   /* sfondo scuro fisso */
  --btn-text: #FFFFFF; /* testo chiaro (contrasto > 12:1 su #0D1117) */
  --btn-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.cta-wrap{text-align:center; margin-top:16px}

.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:12px;
  text-decoration:none;
  background:var(--btn-bg);
  color:var(--btn-text);
  font-weight:800;
  letter-spacing:.5px;
  border:1px solid color-mix(in srgb, #000 35%, transparent);
  box-shadow:var(--btn-shadow);
  transition:transform .06s ease, box-shadow .2s ease, filter .1s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  filter:brightness(1.03);
}
.btn:active{
  transform:translateY(0);
  filter:brightness(.98);
}
.btn:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:3px;
}

/* Variante opzionale se mai ti servisse il bottone "a tema brand":
.btn--brand{ background:var(--brand-grad); color:#fff; border-color:transparent; }
*/

/* Footer band: stesso stile del banner in alto, a tutta larghezza */
footer{
  position: relative;
  z-index: 0;
  text-align:center;
  padding:44px 0;
  font-size:.95rem;
  margin-top:60px;
  /* niente background qui: lo mette il ::before full-bleed */
  color:var(--accent-contrast);
  border-top:none;
}

footer::before{
  content:"";
  position:absolute;
  z-index:-1;                 /* sotto al contenuto del footer, sopra allo sfondo pagina */
  inset:0 calc(50% - 50vw);   /* trucco: estende a tutta viewport width mantenendo il centro */
  background:var(--brand-grad);
  box-shadow:0 -8px 24px color-mix(in srgb, var(--brand) 20%, rgba(0,0,0,0));
}

footer a{
  color:var(--accent-contrast);
  text-decoration: underline;
  text-underline-offset: 2px;
}
footer a:hover{ text-decoration: none }
.footnote{
  opacity:.92;
  font-size:.86rem;
  max-width:800px;
  margin:12px auto 0;
  color:var(--accent-contrast);
}

footer::after{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:100%; width:100vw; height:1px;
  background:color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Responsive */
@media (max-width:768px){
  .logo-wrap img,.logo-wrap svg{height:48px}
}
@media (prefers-reduced-motion: reduce){ .dot{animation:none} }


/* Gradient background and animated grid overlay */
.bg-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg) 0%, var(--layer) 50%, var(--bg) 100%);
    z-index: -2;
}

.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
      linear-gradient(color-mix(in srgb, var(--brand) 3%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--brand) 3%, transparent) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
    from { background-position: 0 0; }
    to   { background-position: 50px 50px; }
}