@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0B1220;
  --panel:#121B2E;
  --panel-2:#17233A;
  --orange:#FF5A1F;
  --orange-deep:#C7390A;
  --orange-light:#FF9B5C;
  --text:#F3EFE8;
  --muted:#8B93A7;
  --edge: rgba(255,154,92,0.22);
  --maxw: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:'Inter', sans-serif; line-height:1.55;
}
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:700; line-height:1.15; margin:0 0 14px 0; }
h1{ font-size: clamp(32px,5vw,58px); }
h2{ font-size: clamp(24px,3.4vw,38px); }
h3{ font-size: clamp(18px,2vw,22px); }
p{ margin:0 0 16px 0; }
a{ color:var(--orange-light); }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.muted{ color:var(--muted); }
.lead{ color:var(--muted); font-size: clamp(15px,1.6vw,18px); max-width:640px; }

/* ---------- header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,18,32,0.86); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,154,92,0.14);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--maxw); margin:0 auto; gap:16px;
}
.brand img{ height:26px; display:block; }
nav.main-nav{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
nav.main-nav a{
  color:var(--text); text-decoration:none; font-size:14px; font-weight:500;
  opacity:0.85; transition: opacity .2s ease, color .2s ease;
}
nav.main-nav a:hover, nav.main-nav a.active{ opacity:1; color:var(--orange-light); }
.btn-cta{
  background:var(--orange); color:#1a0e07 !important; font-weight:700;
  padding:10px 20px; border-radius:999px; font-size:13.5px;
  text-decoration:none; white-space:nowrap; border:none; cursor:pointer;
  font-family:'Space Grotesk', sans-serif;
  transition: background .2s ease, transform .2s ease;
}
.btn-cta:hover{ background:var(--orange-light); transform:translateY(-1px); }
.nav-toggle{ display:none; }

@media (max-width: 860px){
  nav.main-nav{ display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:16px 24px; border-bottom:1px solid rgba(255,154,92,0.14); gap:14px; }
  nav.main-nav.open{ display:flex; }
  .nav-toggle{
    display:flex; background:none; border:1px solid rgba(255,255,255,0.2);
    color:var(--text); width:38px; height:38px; border-radius:8px;
    align-items:center; justify-content:center; font-size:18px; cursor:pointer;
  }
  .header-inner{ position:relative; flex-wrap:wrap; }
  .header-cta{ order:3; }
}
@media (min-width: 861px){ .nav-toggle{ display:none; } }

/* ---------- hero con rete animata ---------- */
.hero{
  position:relative; overflow:hidden;
  padding: clamp(70px,12vw,120px) 24px clamp(60px,9vw,90px);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,90,31,0.12), transparent 60%), var(--ink);
  text-align:center;
}
.hero svg.network{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero .edge{ stroke:var(--edge); stroke-width:1; fill:none; }
.hero .node{ fill:var(--orange-light); opacity:0.45; animation: bob 6s ease-in-out infinite; }
.hero .node.big{ fill:var(--orange); opacity:0.75; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.hero-content{ position:relative; z-index:1; max-width:760px; margin:0 auto; }
.hero .eyebrow{ color:var(--orange-light); font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:14px; margin-bottom:10px; }
.hero p.lead{ margin:0 auto 26px; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-secondary{
  border:1px solid rgba(255,255,255,0.2); color:var(--text); text-decoration:none;
  padding:10px 20px; border-radius:999px; font-size:13.5px; font-family:'Space Grotesk',sans-serif; font-weight:600;
}

/* ---------- sezioni generiche + scroll reveal ---------- */
section.block{ padding: clamp(50px,7vw,90px) 24px; }
section.block.alt{ background:var(--panel); }
.reveal{ opacity:0; transform:translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.55s; }

/* ---------- stat grid ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(3, minmax(150px,1fr)); gap:16px; max-width:760px; margin:30px auto 0; }
.stat{ background:var(--panel); border:1px solid rgba(255,154,92,0.18); border-radius:14px; padding:18px 14px; text-align:center; }
.stat .num{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--orange); font-size: clamp(22px,3vw,32px); font-variant-numeric: tabular-nums; }
.stat .label{ color:var(--muted); font-size:12px; margin-top:6px; }

/* ---------- flow steps ---------- */
.flow{ display:flex; flex-direction:column; gap:12px; margin-top:18px; max-width:520px; }
.flow .step{ background:var(--panel); border:1px solid rgba(255,154,92,0.18); border-radius:10px; padding:14px 16px; font-size:14px; }
.flow .step b{ color:var(--orange-light); display:block; margin-bottom:4px; font-family:'Space Grotesk',sans-serif; }

/* ---------- split layout con screenshot ---------- */
.split{ display:flex; align-items:center; gap: clamp(24px,4vw,56px); flex-wrap:wrap; max-width:var(--maxw); margin:0 auto; }
.split.reverse{ flex-direction:row-reverse; }
.split .col{ flex:1; min-width:280px; }
.browser-frame{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.5); }
.browser-frame .bar{ height:22px; background:#ECECEC; display:flex; align-items:center; gap:6px; padding:0 10px; }
.browser-frame .bar span{ width:8px; height:8px; border-radius:50%; background:#D2D2D2; }
.browser-frame img{ display:block; width:100%; height:auto; }

/* ---------- card grid (3 aree, moduli) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; max-width:var(--maxw); margin:30px auto 0; }
.area-card{
  background:var(--panel); border:1px solid rgba(255,154,92,0.18); border-radius:16px;
  padding:26px 22px; text-decoration:none; color:var(--text); display:block;
  transition: transform .25s ease, border-color .25s ease;
}
.area-card:hover{ transform:translateY(-4px); border-color:var(--orange); }
.area-card .num{ color:var(--orange-light); font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600; margin-bottom:10px; display:block; }
.area-card h3{ margin-bottom:8px; }
.area-card p{ color:var(--muted); font-size:13.5px; margin:0; }

/* ---------- source cards (metodologia) ---------- */
.source-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; }
.source{ background:var(--panel-2); border:1px solid rgba(255,154,92,0.2); border-radius:14px; padding:16px; width:170px; }
.source .thumb{ width:100%; height:70px; border-radius:8px; overflow:hidden; margin-bottom:10px; }
.source .thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.source .tag{ color:var(--orange-light); font-size:13px; font-weight:600; font-family:'Space Grotesk',sans-serif; }
.source .desc{ color:var(--muted); font-size:12.5px; margin-top:6px; }

/* ---------- icon chips (produzione eventi/creativa) ---------- */
.icon-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.icon-chip{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--panel); border:1px solid rgba(255,154,92,0.18); border-radius:12px;
  padding:16px 20px; font-size:12.5px; color:var(--muted); width:100px; text-align:center;
}
.icon-chip svg{ width:28px; height:28px; color:var(--orange-light); }

/* ---------- team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:22px; max-width:var(--maxw); margin:30px auto 0; }
.team-card{ background:var(--panel); border:1px solid rgba(255,154,92,0.18); border-radius:16px; padding:22px; text-align:center; }
.team-card img{ width:84px; height:84px; border-radius:50%; object-fit:cover; margin-bottom:14px; }
.team-card .t-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; }
.team-card .t-role{ color:var(--orange-light); font-size:12.5px; margin-top:3px; }

/* ---------- phone frame (QLR) ---------- */
.phone-row{ display:flex; gap:20px; flex-wrap:wrap; }
.phone-frame{ background:#0d0d0f; border-radius:22px; padding:8px 7px; box-shadow:0 24px 60px rgba(0,0,0,0.55); width:150px; }
.phone-frame img{ border-radius:14px; display:block; width:100%; }
.qlr-points{ list-style:none; padding:0; margin:16px 0 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.qlr-points li{ background:var(--panel); border:1px solid rgba(255,154,92,0.18); border-radius:999px; padding:6px 14px; font-size:12.5px; color:var(--muted); }

/* ---------- case badge ---------- */
.shot-wrap{ position:relative; }
.case-badge{
  position:absolute; bottom:-14px; right:-14px; width:90px; border-radius:8px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,0.5); border:3px solid var(--ink); transform: rotate(6deg);
}
.case-badge img{ display:block; width:100%; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  border-top:1px solid rgba(255,154,92,0.2);
  padding: clamp(50px,7vw,80px) 24px; text-align:center;
}
.cta-banner h2{ margin-bottom:10px; }

/* ---------- legal card ---------- */
.legal-card{
  background:var(--panel);
  border:1px solid rgba(255,154,92,0.18);
  border-radius:16px;
  padding:22px;
}
.legal-card h2{ margin-top:18px; }
.legal-card a{ color:var(--orange-light); }
.legal-card a:hover{ color:var(--text); }

/* ---------- cookie banner ---------- */
.cookie-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:9999;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner .cookie-inner{
  max-width:var(--maxw);
  margin:0 auto;
  background:rgba(14,14,16,0.92);
  border:1px solid rgba(255,154,92,0.20);
  border-radius:16px;
  padding:16px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  backdrop-filter: blur(10px);
}
.cookie-banner .cookie-text{ color:var(--muted); font-size:13px; line-height:1.35; }
.cookie-banner .cookie-text a{ color:var(--orange-light); text-decoration:none; }
.cookie-banner .cookie-text a:hover{ text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-actions .btn-cookie{
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  border:1px solid rgba(255,154,92,0.35);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.cookie-actions .btn-cookie.primary{
  background:linear-gradient(180deg, var(--orange), var(--orange-2));
  border-color:transparent;
}

@media (max-width: 640px){
  .cookie-banner .cookie-inner{ flex-direction:column; align-items:stretch; }
  .cookie-actions{ width:100%; }
  .cookie-actions .btn-cookie{ flex:1; }
}

/* ---------- footer ---------- */
footer.site-footer{
  border-top:1px solid rgba(255,154,92,0.14);
  padding:34px 24px;
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap:26px;
  align-items:start;
}
.footer-brand img{ height:20px; opacity:0.85; margin-bottom:10px; }
.footer-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.01em; margin-bottom:10px; }
.footer-col a, .footer-social a{
  display:block;
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  margin:8px 0;
}
.footer-col a:hover, .footer-social a:hover{ color:var(--text); text-decoration:underline; }
.footer-social{ margin-top:14px; display:flex; flex-wrap:wrap; gap:12px; }
.footer-social a{ display:inline-block; margin:0; }
footer.site-footer .fine{ color:var(--muted); font-size:12px; margin-top:18px; text-align:center; }

@media (max-width: 860px){
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .footer-inner{ grid-template-columns: 1fr; }
}

/* ---------- form contatti ---------- */
.form-wrap{ max-width:560px; margin:0 auto; }
.field{ margin-bottom:16px; text-align:left; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; background:var(--panel); border:1px solid rgba(255,154,92,0.2); border-radius:10px;
  padding:11px 13px; color:var(--text); font-family:'Inter',sans-serif; font-size:14px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--orange); outline-offset:1px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.flash{ border-radius:10px; padding:12px 16px; margin-bottom:18px; font-size:14px; text-align:left; }
.flash.success{ background:rgba(90,200,120,0.12); border:1px solid rgba(90,200,120,0.35); color:#bdeecb; }
.flash.error{ background:rgba(255,90,90,0.12); border:1px solid rgba(255,90,90,0.35); color:#ffc7c7; }

/* ---------- divider header (per pagine area) ---------- */
.area-hero .eyebrow{ letter-spacing:0.02em; }
.area-hero h1{ color:var(--orange); }

@media (prefers-reduced-motion: reduce){
  .hero .node{ animation:none; }
  .reveal, .reveal-stagger > *{ transition:opacity .2s ease; }
}