/* ============================================================
   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{ color:#F5F2EC; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn-primary span{ transition:transform .2s ease; }
.btn-primary:hover{ transform:translateY(-1px); background:#f0432b; color:#F5F2EC; box-shadow:0 12px 26px -12px rgba(228,50,31,0.7); }
.btn-primary:hover span{ transform:translateX(3px); }
.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(288px,78vw); }
  .orbit__pill{ padding:6px 10px; gap:6px; }
  .orbit__pill span{ font-size:11px; }
  .orbit__pill--tr { left:91%; }
  .orbit__pill--tl { left:9%; }
  .orbit__pill--br { left:78%; }
  .orbit__pill--bl { left:22%; }
}

/* Schermi molto stretti: etichette più compatte così "Advertising" non si taglia */
@media (max-width:359px){
  .orbit__pill{ padding:5px 9px; }
  .orbit__pill span{ font-size:10px; }
  .orbit__pill--tr { left:89%; }
  .orbit__pill--tl { left:11%; }
}

/* ---- 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:#F5F2EC; }
.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;
    animation-iteration-count:1 !important;
  }
  .anim-ready .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   Animazioni
   ============================================================ */
/* Scroll reveal — attivo solo quando il JS aggiunge .anim-ready sull'html.
   Senza JS (o con reduced-motion) il contenuto resta pienamente visibile. */
.anim-ready .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.anim-ready .reveal.in{ opacity:1; transform:none; }

/* Vita nell'orbita — solo se l'utente non ha chiesto meno movimento */
@media (prefers-reduced-motion:no-preference){
  .orbit__core{ animation:coreBreath 5s ease-in-out infinite; }
  .orbit__pill{ animation:pillFloat 6s ease-in-out infinite; }
  .orbit__pill--tr{ animation-delay:-1.2s; }
  .orbit__pill--br{ animation-delay:-2.4s; }
  .orbit__pill--bl{ animation-delay:-3.6s; }
  .orbit__pill--tl{ animation-delay:-4.8s; }
  .orbit__pill i{ animation:dotPulse 3.2s ease-in-out infinite; }
}
@keyframes coreBreath{
  0%,100%{ box-shadow:0 0 70px rgba(228,50,31,0.30); }
  50%{ box-shadow:0 0 120px rgba(228,50,31,0.55); }
}
@keyframes pillFloat{
  0%,100%{ transform:translate(-50%,-50%); }
  50%{ transform:translate(-50%,calc(-50% - 6px)); }
}
@keyframes dotPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.45; }
}

/* ============================================================
   Sezione Metodo — Ciclo 360 (A) + Candidatura (C), fondo chiaro
   ============================================================ */
/* --- Ciclo 360 (A) --- */
.ciclo__lead{ margin:0 auto clamp(44px,6vw,72px); color:#6E6558; font-size:clamp(16px,1.5vw,20px); line-height:1.6; max-width:56ch; text-align:center; }
.ciclo__orbit{ position:relative; width:100%; max-width:420px; aspect-ratio:1; margin:0 auto clamp(40px,6vw,60px); }
.ciclo__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform-origin:50% 50%; }
.ciclo__hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30%; height:30%; background:#E4321F; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 24px 60px -22px rgba(228,50,31,0.6); }
.ciclo__hub b{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(22px,3.2vw,32px); color:#191712; letter-spacing:-0.03em; }
.ciclo__hub span{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(25,23,18,0.7); }
.ciclo__pill{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:9px; background:#F5F2EC; border:1px solid rgba(25,23,18,0.18); border-radius:100px; padding:9px 16px; white-space:nowrap; transition:border-color .3s ease, box-shadow .3s ease; }
.ciclo__pill i{ font-family:'Space Mono',monospace; font-style:normal; font-size:11px; color:#E4321F; }
.ciclo__pill span{ font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:500; color:#191712; }
.ciclo__pill--top{ left:50%; top:0; }
.ciclo__pill--right{ left:100%; top:50%; }
.ciclo__pill--bot{ left:50%; top:100%; }
.ciclo__pill--left{ left:0; top:50%; }
.ciclo__phases{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(25,23,18,0.14); border:1px solid rgba(25,23,18,0.14); border-radius:12px; overflow:hidden; text-align:left; }
.ciclo__phase{ background:#F5F2EC; padding:24px 22px; display:flex; flex-direction:column; gap:10px; }
.ciclo__phase .n{ font-family:'Space Mono',monospace; font-size:12px; color:#E4321F; }
.ciclo__phase .t{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; letter-spacing:-0.01em; color:#191712; }
.ciclo__phase .d{ color:#6E6558; font-size:13.5px; line-height:1.5; }
.ciclo__phase .chip{ margin-top:2px; align-self:flex-start; font-family:'Space Mono',monospace; font-size:11px; padding:5px 10px; border-radius:6px; background:rgba(228,50,31,0.12); color:#E4321F; }
@media (max-width:820px){ .ciclo__phases{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .ciclo__orbit{ max-width:min(235px,66vw); }
  .ciclo__pill{ padding:6px 11px; }
  .ciclo__pill span{ font-size:11px; }
  .ciclo__pill i{ font-size:10px; }
}
@media (max-width:520px){ .ciclo__phases{ grid-template-columns:1fr; } }

/* animazioni ciclo — solo senza reduced-motion */
@media (prefers-reduced-motion:no-preference){
  .ciclo__svg{ animation:cicloSpin 30s linear infinite; }
  .ciclo__pill{ animation:cicloSeq 8s infinite; }
  .ciclo__pill--top{ animation-delay:0s; }
  .ciclo__pill--right{ animation-delay:2s; }
  .ciclo__pill--bot{ animation-delay:4s; }
  .ciclo__pill--left{ animation-delay:6s; }
}
@keyframes cicloSpin{ to{ transform:rotate(360deg); } }
@keyframes cicloSeq{
  0%{ border-color:rgba(25,23,18,0.18); box-shadow:none; }
  7%{ border-color:#E4321F; box-shadow:0 0 0 3px rgba(228,50,31,0.14); }
  22%{ border-color:#E4321F; box-shadow:0 0 0 3px rgba(228,50,31,0.14); }
  30%{ border-color:rgba(25,23,18,0.18); box-shadow:none; }
  100%{ border-color:rgba(25,23,18,0.18); box-shadow:none; }
}

/* --- Candidatura (C) --- */
.cand__lead{ margin:0 0 clamp(44px,6vw,72px); color:#6E6558; font-size:clamp(16px,1.5vw,20px); line-height:1.6; max-width:60ch; }
.cand__funnel{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.cand__bar{ border-radius:8px; padding:20px clamp(20px,3vw,32px); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.cand__bar .t{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(16px,1.8vw,21px); letter-spacing:-0.01em; }
.cand__bar .d{ font-family:'Space Grotesk',sans-serif; font-size:13.5px; line-height:1.4; }
.cand__bar .n{ font-family:'Space Mono',monospace; font-size:12px; flex:none; }
.cand__bar--1{ width:100%; background:#EDE9E0; border:1px solid rgba(25,23,18,0.12); color:#191712; }
.cand__bar--1 .d,.cand__bar--1 .n{ color:#6E6558; }
.cand__bar--2{ width:82%; background:#E3DCCE; border:1px solid rgba(25,23,18,0.12); color:#191712; }
.cand__bar--2 .d,.cand__bar--2 .n{ color:#6E6558; }
.cand__bar--3{ width:64%; background:#C24A34; color:#F5F2EC; }
.cand__bar--3 .d,.cand__bar--3 .n{ color:rgba(245,242,236,0.82); }
.cand__bar--4{ width:48%; background:#E4321F; color:#F5F2EC; }
.cand__bar--4 .d,.cand__bar--4 .n{ color:rgba(245,242,236,0.85); }
.cand__note{ margin:clamp(30px,4vw,44px) auto 0; text-align:center; font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(25px,3.2vw,38px); line-height:1.18; letter-spacing:-0.01em; color:#191712; max-width:28ch; }
@media (max-width:560px){ .cand__note{ font-size:24px; max-width:none; text-wrap:balance; } }
@media (max-width:560px){ .cand__bar{ width:100% !important; flex-direction:column; align-items:flex-start; gap:8px; } }

/* ============================================================
   Modale form di contatto / candidatura
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(15,14,10,0.72); backdrop-filter:blur(4px); }
.modal.open{ display:flex; }
.modal__card{ position:relative; background:#F5F2EC; color:#191712; border-radius:14px; width:min(560px,100%); max-height:calc(100vh - 40px); overflow-y:auto; padding:clamp(26px,4vw,44px); box-shadow:0 40px 90px -30px rgba(0,0,0,0.6); }
.modal__close{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:8px; border:1px solid rgba(25,23,18,0.16); background:transparent; color:#191712; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s ease; }
.modal__close:hover{ background:rgba(25,23,18,0.06); }
.modal__title{ margin:0 0 6px; font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:clamp(22px,3vw,30px); letter-spacing:-0.02em; }
.modal__sub{ margin:0 0 24px; color:#6E6558; font-size:14.5px; line-height:1.5; max-width:42ch; }
.modal__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#6E6558; }
.field input, .field select{ font-family:'Space Grotesk',sans-serif; font-size:15px; color:#191712; background:#FBFAF6; border:1px solid rgba(25,23,18,0.18); border-radius:8px; padding:11px 13px; width:100%; }
.field input::placeholder{ color:#A39B8C; }
.field input:focus, .field select:focus{ outline:none; border-color:#E4321F; box-shadow:0 0 0 3px rgba(228,50,31,0.12); }
.consent{ display:flex; align-items:flex-start; gap:11px; margin:20px 0 4px; }
.consent input{ margin-top:2px; width:17px; height:17px; flex:none; accent-color:#E4321F; }
.consent label{ font-size:13px; color:#6E6558; line-height:1.5; }
.consent a{ color:#E4321F; border-bottom:1px solid rgba(228,50,31,0.4); }
.modal__submit{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:18px; background:#E4321F; color:#F5F2EC; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; padding:15px 22px; border:none; border-radius:6px; cursor:pointer; }
.modal__ok{ display:none; text-align:center; padding:12px 0 4px; }
.modal__ok p{ margin:0 0 6px; font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:20px; }
.modal__ok span{ color:#6E6558; font-size:14px; }
@media (max-width:520px){ .modal__grid{ grid-template-columns:1fr; } }