/* Octocore Suite, sito aziendale.
   Colori e misure vengono solo da tokens.css (copia di ../brand/tokens.css). */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:400 1rem/1.6 Inter,system-ui,sans-serif;
  background:var(--ocs-bg);
  color:var(--ocs-text);
  color-scheme:dark;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Space Grotesk',Inter,system-ui,sans-serif;margin:0;text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
a{color:inherit}

.contenitore{width:100%;max-width:var(--ocs-content-max);margin-inline:auto;padding-inline:24px}
@media (min-width:1024px){.contenitore{padding-inline:40px}}

.skip{position:absolute;left:16px;top:-64px;background:var(--ocs-copper);color:var(--ocs-bg-deep);padding:10px 16px;border-radius:var(--ocs-radius-sm);font-weight:600;z-index:100;text-decoration:none}
.skip:focus{top:12px}

.etichetta{font:500 .78rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ocs-copper)}

/* Testata */
.testata{position:sticky;top:0;z-index:50;transition:background .24s var(--ocs-ease),border-color .24s var(--ocs-ease);border-bottom:1px solid transparent}
.testata.scesa{background:rgba(11,18,22,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--ocs-border)}
.testata-riga{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.marchio{display:inline-flex;flex-direction:column;gap:4px;text-decoration:none;line-height:1}
.marchio-nome{font:600 1.2rem/1 'Space Grotesk',sans-serif;letter-spacing:.24em;color:var(--ocs-text)}
.marchio-suite{font:500 .62rem/1 'Space Grotesk',sans-serif;letter-spacing:.62em;color:var(--ocs-copper)}
.menu{display:flex;align-items:center;gap:28px}
.menu a{text-decoration:none;font:500 .92rem/1 Inter,sans-serif;letter-spacing:.02em;color:var(--ocs-text-muted);padding:12px 0;transition:color .2s var(--ocs-ease)}
.menu a:hover{color:var(--ocs-text)}
.menu .menu-cta{color:var(--ocs-text);border:1px solid var(--ocs-copper-dark);border-radius:999px;padding:12px 20px;transition:border-color .2s var(--ocs-ease),background .2s var(--ocs-ease)}
.menu .menu-cta:hover{border-color:var(--ocs-copper);background:rgba(198,123,74,.12)}
.menu-bottone{display:none;align-items:center;gap:12px;min-height:44px;padding:0 4px 0 12px;background:none;border:1px solid var(--ocs-border);border-radius:999px;color:var(--ocs-text);font:500 .9rem/1 Inter,sans-serif;cursor:pointer}
.menu-bottone-linee{width:18px;height:10px;margin-right:12px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}
.menu-bottone-linee::after{content:"";position:absolute;left:0;right:0;top:50%;height:0;border-top:1.5px solid currentColor;transform:translateY(-50%)}
@media (max-width:767px){
  .menu-bottone{display:inline-flex}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;background:var(--ocs-bg-deep);border-bottom:1px solid var(--ocs-border)}
  .menu.aperto{display:flex}
  .menu a{padding:16px 0;border-bottom:1px solid var(--ocs-border);font-size:1rem}
  .menu .menu-cta{margin-top:16px;text-align:center;border-bottom:1px solid var(--ocs-copper-dark)}
}

:focus-visible{outline:2px solid var(--ocs-copper-light);outline-offset:3px;border-radius:4px}

/* Eroe */
.eroe{position:relative;isolation:isolate;overflow:hidden;margin-top:-72px;padding-block:calc(72px + clamp(72px,12vw,148px)) clamp(72px,10vw,132px);background:var(--ocs-gradient-dark)}
.eroe-arte{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pianeta{position:absolute;right:-14%;top:12%;width:min(78vw,780px);aspect-ratio:1;max-width:100%;border-radius:50%;
  background:radial-gradient(circle at 28% 22%,#1d2c34 0%,#111c22 42%,#0B1216 72%);
  box-shadow:inset 6px 8px 0 -4px rgba(216,161,100,.85),inset 26px 30px 70px -18px rgba(198,123,74,.55),0 0 140px -40px rgba(198,123,74,.4)}
.orbite{position:absolute;right:-19%;top:6%;width:min(92vw,900px);aspect-ratio:1;max-width:100%;color:rgba(216,161,100,.22)}
.eroe::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ocs-bg) 0%,rgba(20,30,37,.9) 34%,rgba(20,30,37,0) 68%)}
.eroe-testo{max-width:var(--ocs-content-max)}
.eroe h1{margin-top:20px;font-size:clamp(3rem,9vw,6.4rem);font-weight:600;line-height:.98;letter-spacing:-.025em;max-width:9em}
.eroe-guida{margin-top:28px;max-width:34ch;font:500 clamp(1.15rem,2.2vw,1.45rem)/1.4 'Space Grotesk',sans-serif;color:var(--ocs-text)}
.eroe-descrizione{margin-top:16px;max-width:46ch;color:var(--ocs-text-muted)}
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:36px}
@media (max-width:767px){
  .pianeta{right:-42%;top:auto;bottom:-16%;width:110vw;opacity:.7}
  .orbite{right:-55%;top:auto;bottom:-24%;width:135vw}
  .eroe::after{background:linear-gradient(180deg,rgba(20,30,37,.86) 0%,rgba(20,30,37,.55) 60%,rgba(20,30,37,.2) 100%)}
}

/* Bottoni */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid transparent;font:500 .98rem/1 Inter,sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s var(--ocs-ease),filter .2s var(--ocs-ease),border-color .2s var(--ocs-ease),color .2s var(--ocs-ease)}
.bottone-primario{background:var(--ocs-copper);color:var(--ocs-bg-deep);font-weight:600}
.bottone-primario:hover{filter:brightness(1.1);transform:translateY(-1px)}
.bottone-secondario{background:transparent;border-color:var(--ocs-border);color:var(--ocs-text)}
.bottone-secondario:hover{border-color:var(--ocs-copper)}
.bottone-testo{padding:0;color:var(--ocs-text)}
.bottone-testo:hover{color:var(--ocs-copper-light)}

/* Sezioni */
.sezione{padding-block:clamp(72px,9vw,120px)}
.sezione-scura{background:var(--ocs-bg-elevated);border-block:1px solid var(--ocs-border)}
.sezione-testa{display:grid;gap:16px;max-width:720px;margin-bottom:clamp(36px,5vw,64px)}
.sezione h2{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:600;line-height:1.08;letter-spacing:-.02em}
.sezione-intro{color:var(--ocs-text-muted);max-width:56ch;font-size:1.05rem}

/* Servizi */
.capacita{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1023px){.capacita{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.capacita{grid-template-columns:1fr}}
.scheda{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--ocs-bg-elevated);border:1px solid var(--ocs-border);border-radius:var(--ocs-radius-md);min-width:0;transition:border-color .24s var(--ocs-ease)}
.scheda:hover{border-color:var(--ocs-copper-dark)}
.scheda h3{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
.scheda p{color:var(--ocs-text-muted);font-size:.97rem}
.icona{width:28px;height:28px;margin-bottom:8px;fill:none;stroke:var(--ocs-copper);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Prodotti */
.prodotti{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1023px){.prodotti{grid-template-columns:1fr}}
.prodotto{display:flex;flex-direction:column;gap:14px;padding:32px;background:var(--ocs-bg);border:1px solid var(--ocs-border);border-radius:var(--ocs-radius-lg);min-width:0}
.prodotto-testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.prodotto h3{font-size:1.7rem;font-weight:600;letter-spacing:-.02em}
.prodotto-tipo{font:500 .78rem/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ocs-copper)}
.prodotto p:not(.prodotto-tipo){color:var(--ocs-text-muted)}
.prodotto .tecno{margin-top:auto;padding-top:10px}
.stato{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--ocs-border);border-radius:999px;font:500 .78rem/1 Inter,sans-serif;color:var(--ocs-text)}
.stato i{width:8px;height:8px;border-radius:50%;background:var(--ocs-success);box-shadow:0 0 0 3px rgba(46,111,115,.3)}

.tecno{display:flex;flex-wrap:wrap;gap:8px}
.tecno li{padding:7px 11px;border:1px solid var(--ocs-border);border-radius:var(--ocs-radius-sm);font:500 .8rem/1 Inter,sans-serif;color:var(--ocs-text);background:rgba(37,66,75,.28)}

/* Tecnologie */
.tecnologie{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
@media (max-width:1023px){.tecnologie{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.tecnologie{grid-template-columns:1fr}}
.tecnologia{display:flex;flex-direction:column;gap:12px;padding-block:28px;border-top:1px solid var(--ocs-border);min-width:0}
.tecnologia dt{font:600 1.2rem/1.2 'Space Grotesk',sans-serif;letter-spacing:-.01em}
.tecnologia dd{display:flex;flex-direction:column;gap:16px;flex:1}
.tecnologia p{color:var(--ocs-text-muted);font-size:.97rem}
.tecnologia .tecno{margin-top:auto}

/* Metodo */
.fasi{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:fase}
@media (max-width:1023px){.fasi{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.fasi{grid-template-columns:1fr}}
.fasi li{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--ocs-copper-dark);counter-increment:fase;min-width:0}
.fasi li::before{content:"Fase " counter(fase);font:500 .78rem/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ocs-copper)}
.fasi h3{font-size:1.35rem;font-weight:600;letter-spacing:-.01em}
.fasi p{color:var(--ocs-text-muted);font-size:.97rem}

/* Contatti */
.contatto{display:grid;grid-template-columns:1.1fr 1fr;gap:40px 64px;align-items:center;padding:clamp(28px,5vw,64px);background:var(--ocs-gradient-dark);border:1px solid var(--ocs-border);border-radius:var(--ocs-radius-lg)}
@media (max-width:860px){.contatto{grid-template-columns:1fr}}
.contatto > *{min-width:0}
.contatto .sezione-intro{margin-top:16px}
.contatto h2{margin-top:16px}
.contatto-mail{display:flex;flex-direction:column;gap:12px}
.contatto-etichetta{font:500 .78rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ocs-text-muted)}
.contatto-indirizzo{font:500 clamp(1.15rem,3.6vw,1.6rem)/1.3 'Space Grotesk',sans-serif;color:var(--ocs-copper-light);text-decoration:none;word-break:break-word}
.contatto-indirizzo:hover{text-decoration:underline;text-underline-offset:6px}
.contatto .azioni{margin-top:12px}
.copia-esito{min-height:1.4em;font-size:.88rem;color:var(--ocs-text-muted)}

/* Piede */
.piede{padding-block:40px;border-top:1px solid var(--ocs-border);background:var(--ocs-bg-deep)}
.piede-riga{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.marchio-piede .marchio-nome{font-size:1rem}
.piede-testo{color:var(--ocs-text-muted);font-size:.9rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}