/* ============================================================
   360agency — Sistemi di marketing a 360°
   Palette: Paper #F5F2EC · Ink #191712 · Rosso Segnale #E4321F · Fumo #6E6558
   Font: Instrument Serif · Space Grotesk · Space Mono
   ============================================================ */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{ margin:0; }
img{ max-width:100%; display:block; }

a{ color:#E4321F; text-decoration:none; }
a:hover{ color:#191712; }
::selection{ background:#E4321F; color:#F5F2EC; }

/* ---- Accessibility: focus visible ---- */
a:focus-visible,
button:focus-visible{
  outline:2px solid #E4321F;
  outline-offset:3px;
  border-radius:4px;
}

/* ---- Hover states (replacing DC runtime style-hover) ---- */
.nav-brand:hover{ color:#F5F2EC; }

.nav-link{ color:#A39B8C; transition:color .18s ease; }
.nav-link:hover{ color:#F5F2EC; }

.btn-primary{ transition:transform .18s ease, background .18s ease; }
.btn-primary:hover{ transform:translateY(-1px); background:#f0432b; color:#191712; }
.btn-primary--lg:hover{ transform:translateY(-2px); }

.link-underline{ transition:color .18s ease, border-color .18s ease; }
.link-underline:hover{ color:#E4321F; border-color:#E4321F; }

.footer-link{ color:#A39B8C; transition:color .18s ease; }
.footer-link:hover{ color:#E4321F; }

.index-card{ transition:background .2s ease; }

/* ---- Orbit visual ---- */
.orbit{ position:relative; width:100%; aspect-ratio:1; max-width:520px; margin:0 auto; }
.orbit__ring{ position:absolute; border:1px solid rgba(255,255,255,0.1); border-radius:50%; }
.orbit__ring--1{ inset:2%; }
.orbit__ring--2{ inset:20%; border-color:rgba(255,255,255,0.14); }
.orbit__core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34%; height:34%; background:#E4321F; border-radius:50%;
  box-shadow:0 0 90px rgba(228,50,31,0.4);
  display:flex; align-items:center; justify-content:center;
}
.orbit__core span{
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(20px,3.4vw,34px); color:#191712; letter-spacing:-0.03em;
}
.orbit__pill{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:8px;
  background:#211e18; border:1px solid rgba(255,255,255,0.14);
  border-radius:100px; padding:8px 14px; white-space:nowrap;
}
.orbit__pill i{ width:7px; height:7px; background:#E4321F; border-radius:50%; flex:none; }
.orbit__pill span{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.04em; color:#F5F2EC; }
.orbit__pill--top{ left:50%; top:3%; }
.orbit__pill--tr { left:95%; top:35%; }
.orbit__pill--br { left:78%; top:90%; }
.orbit__pill--bl { left:22%; top:90%; }
.orbit__pill--tl { left:5%;  top:35%; }

/* Su schermi stretti: orbita più piccola e pill rientrate per non uscire dal bordo */
@media (max-width:560px){
  .orbit{ max-width:min(300px,80vw); }
  .orbit__pill{ padding:6px 11px; gap:6px; }
  .orbit__pill span{ font-size:11px; }
  .orbit__pill--tr { left:84%; }
  .orbit__pill--tl { left:16%; }
  .orbit__pill--br { left:76%; }
  .orbit__pill--bl { left:24%; }
}

/* ---- Mobile nav ---- */
.nav-toggle{ display:none; }

@media (max-width:720px){
  .nav-links{
    position:fixed;
    top:0; left:0; right:0;
    z-index:40;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    background:#191712;
    border-bottom:1px solid rgba(255,255,255,0.1);
    box-shadow:0 24px 40px -20px rgba(0,0,0,0.6);
    padding:78px 0 16px;
    transform:translateY(-100%);
    transition:transform .3s ease;
    pointer-events:none;
  }
  .nav-links.open{ transform:translateY(0); pointer-events:auto; }
  .nav-menu{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
  }
  .nav-menu a{ padding:14px clamp(20px,5vw,56px); }
  .nav-cta-wrap{ padding:12px clamp(20px,5vw,56px) 4px; }
  .nav-cta-wrap .btn-primary{ justify-content:center; }
  /* Logo e hamburger devono restare sopra il pannello del menu (z-index:40) */
  .nav-brand{ position:relative; z-index:60; }
  .nav-toggle{
    position:relative;
    z-index:60;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px; height:42px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:6px;
    cursor:pointer;
    color:#F5F2EC;
  }
  .nav-toggle span{
    position:relative;
    width:18px; height:2px; background:#F5F2EC;
    transition:background .2s ease;
  }
  .nav-toggle span::before,
  .nav-toggle span::after{
    content:""; position:absolute; left:0;
    width:18px; height:2px; background:#F5F2EC;
    transition:transform .25s ease;
  }
  .nav-toggle span::before{ top:-6px; }
  .nav-toggle span::after{ top:6px; }
  .nav-toggle[aria-expanded="true"] span{ background:transparent; }
  .nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }
}

/* ---- Cookie banner ---- */
.cookie-banner{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%) translateY(160%);
  width:min(680px, calc(100vw - 32px));
  background:#191712;
  color:#F5F2EC;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  padding:22px 24px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 22px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);
  z-index:100;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.cookie-banner.show{ transform:translateX(-50%) translateY(0); }
.cookie-banner p{
  margin:0; flex:1 1 300px;
  font-family:'Space Grotesk',sans-serif;
  font-size:14px; line-height:1.6; color:#A39B8C;
}
.cookie-banner a{ color:#E4321F; border-bottom:1px solid rgba(228,50,31,0.4); }
.cookie-banner a:hover{ color:#f0432b; }
.cookie-actions{ display:flex; gap:10px; flex:none; }
.cookie-btn{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:6px;
  cursor:pointer; border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.cookie-btn--accept{ background:#E4321F; color:#191712; }
.cookie-btn--accept:hover{ background:#f0432b; transform:translateY(-1px); }
.cookie-btn--reject{ background:transparent; color:#A39B8C; border-color:rgba(255,255,255,0.2); }
.cookie-btn--reject:hover{ color:#F5F2EC; border-color:#F5F2EC; }

@media (max-width:520px){
  .cookie-banner{ bottom:0; border-radius:12px 12px 0 0; }
  .cookie-actions{ flex:1 1 100%; }
  .cookie-btn{ flex:1; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}