/* ═══════════════════════════════════════════════
   DIREZIONE13 — Desktop
   Cursor, layout, sizing, responsive, animazioni
   ═══════════════════════════════════════════════ */

/* ─── CURSOR ─── */
* { cursor: none; }

#cursor-ring {
  position: fixed;
  width: 38px; height: 38px;
  border: 1px solid var(--red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ease), height .35s var(--ease), background .35s;
  will-change: left, top;
}
#cursor-dot {
  position: fixed;
  width: 5px; height: 5px;
  background: var(--red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
}
#cursor-ring.big {
  width: 64px; height: 64px;
  background: var(--red-07);
}

/* ─── BASE ─── */
html, body {
  height: 100%;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
}
body { overflow-x: hidden; }

#noise { opacity: 0.045; }

/* ─── GHOST ─── */
.ghost {
  font-size: 82vw;
  -webkit-text-stroke-width: 1.5px;
}

/* ─── VLINE ─── */
.vline {
  animation: vlineGrow 1.2s 0.2s var(--ease) forwards;
}
@keyframes vlineGrow { to { height: 100vh; } }

/* ─── PAGE ─── */
.page {
  min-height: 100vh;
  z-index: 1;
}

/* ─── HEADER ─── */
header {
  padding: 44px 72px 0;
  animation: fadeUp .7s 0.8s var(--ease) forwards;
}
.logo-direzione,
.logo-num {
  font-family: var(--font);
  font-size: 15px;
}
.logo-arrow {
  width: 9px; height: 9px;
  margin-left: 6px;
  margin-bottom: 0.5px;
}
.logo-payoff {
  font-family: var(--font);
  font-size: 7.5px;
  margin-top: 4px;
}
.header-right {
  font-family: var(--font);
  font-weight: 300;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--white-45);
  padding-top: 3px;
}

/* ─── HLINE ─── */
.hline {
  position: absolute;
  left: 72px; top: 50%;
  animation: hlineGrow 1s 1.1s var(--ease) forwards;
}
@keyframes hlineGrow { to { width: clamp(180px, 18vw, 300px); } }

/* ─── HERO ─── */
.hero {
  padding: 0 72px 72px;
  overflow: hidden;
}

.side-label {
  position: absolute;
  right: 72px; bottom: 72px;
  writing-mode: vertical-rl;
  font-family: var(--font);
  font-weight: 300;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.13);
  opacity: 0;
  animation: fadeUp .6s 3.5s var(--ease) forwards;
}

.overline {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.35em;
  margin-bottom: 28px;
  animation: fadeUp .7s 1.5s var(--ease) forwards;
}

.headline {
  font-family: var(--font);
  font-size: clamp(44px, 6.5vw, 88px);
  margin-bottom: 32px;
}
.hl-1 { animation: fadeUp .8s 1.9s var(--ease) forwards; }
.hl-2 { animation: fadeUp .8s 2.1s var(--ease) forwards; }
.hl-3 { animation: fadeUp .8s 2.3s var(--ease) forwards; }

.subline {
  font-family: var(--font);
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: 32px;
  animation: fadeUp .7s 2.6s var(--ease) forwards;
}

/* ─── PROCESS LINE ─── */
.process-line {
  gap: 10px 14px;
  margin-bottom: 48px;
  animation: fadeUp .7s 2.75s var(--ease) forwards;
}
.process-step {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.32em;
}
.process-arrow {
  border-top-width: 3.5px;
  border-bottom-width: 3.5px;
}

/* ─── CTA ─── */
.cta {
  gap: 18px;
  padding: 0;
  font-family: var(--font);
  font-size: 10px;
  opacity: 0;
  animation: fadeUp .7s 2.9s var(--ease) forwards;
  transition: color .3s;
}
.cta::before {
  width: 44px;
  transition: width .4s var(--ease);
}
.cta:hover { color: var(--red); }
.cta:hover::before { width: 80px; }

/* ─── FOOTER ─── */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 72px;
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.25em;
  animation: fadeUp .6s 3.2s var(--ease) forwards;
}

.footer-privacy {
  color: var(--white-38);
  text-decoration: none;
  font-weight: 300;
  transition: color 0.2s;
}
.footer-privacy:hover { color: var(--red); }

/* ─── OVERLAY ─── */
.overlay {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 500;
  overflow-y: auto;
  padding: 56px 72px 64px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.overlay.open {
  opacity: 1;
  pointer-events: all;
}

.form-panel {
  max-width: 680px;
  width: 100%;
  transform: translateY(28px);
  transition: transform .7s var(--ease);
}
.overlay.open .form-panel { transform: translateY(0); }

.form-close {
  position: fixed;
  top: 44px; right: 72px;
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.4em;
  transition: color .3s;
  z-index: 501;
}
.form-close:hover { color: var(--red); }

.form-eyebrow {
  font-family: var(--font);
  font-size: 8px;
  margin-bottom: 14px;
}

.form-title {
  font-family: var(--font);
  font-size: clamp(30px, 3.5vw, 46px);
  margin-bottom: 48px;
}

/* ─── FORM SECTIONS ─── */
.form-section {
  margin-bottom: 36px;
  padding-bottom: 32px;
}
.form-section:last-of-type {
  margin-bottom: 8px;
}

.section-head {
  gap: 14px;
  margin-bottom: 24px;
}
.section-num {
  font-family: var(--font);
  font-size: 9px;
  min-width: 20px;
}
.section-title {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.35em;
}

/* ─── FIELD GRID ─── */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.field-grid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.field-grid.cols-1 {
  grid-template-columns: 1fr;
}

.field {
  margin-bottom: 24px;
}
.field.full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.3em;
  margin-bottom: 10px;
}

.field input,
.field textarea,
.field select {
  padding: 6px 0 11px;
  font-size: 14px;
}
.field select {
  padding-right: 20px;
  background-position: right 2px center;
}
.field textarea { height: 68px; }
.field select option { background: #0a0a0a; }

.field-note {
  font-family: var(--font);
  font-size: 8px;
  margin-top: 5px;
}

/* ─── SUBMIT ─── */
.form-submit {
  gap: 18px;
  font-family: var(--font);
  font-size: 10px;
  margin-top: 8px;
  transition: color .3s;
}
.form-submit::before {
  width: 44px;
  transition: width .4s var(--ease);
}
.form-submit:hover { color: var(--red); }
.form-submit:hover::before { width: 80px; }

.form-disclaimer {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.15em;
  margin-top: 20px;
}

/* ─── SUCCESS ─── */
.success { padding: 40px 0; }
.success-num {
  font-family: var(--font);
  font-size: clamp(80px, 14vw, 180px);
  opacity: 0.18;
  margin-bottom: 28px;
}
.success-msg {
  font-family: var(--font);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.5;
  margin-bottom: 44px;
  max-width: 440px;
}

/* ─── SEZIONI CONTENUTO ─── */
.s-systems,
.s-infra {
  padding: 56px 72px;
}
.s-systems-inner,
.s-infra-inner {
  max-width: 680px;
}
.s-systems-hl {
  font-family: var(--font);
  font-size: clamp(26px, 3.5vw, 48px);
  margin-bottom: 24px;
}
.s-systems-body {
  font-family: var(--font);
  font-size: clamp(13px, 1.2vw, 16px);
  max-width: 520px;
}
.s-infra-head {
  gap: 20px;
  margin-bottom: 28px;
}
.s-infra-label {
  font-family: var(--font);
  font-size: 9px;
}
.s-infra-body {
  font-family: var(--font);
  font-size: clamp(13px, 1.2vw, 16px);
  max-width: 520px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  header, footer { padding-left: 40px; padding-right: 40px; }
  .hero { padding: 0 40px 60px; }
  .overlay { padding: 48px 40px 60px; }
  .form-close { right: 40px; top: 40px; }
  .field-grid, .field-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .hline { left: 40px; }
  .side-label { display: none; }
  .s-systems, .s-infra { padding: 44px 40px; }
}
@media (max-width: 620px) {
  header, footer { padding-left: 28px; padding-right: 28px; }
  .hero { padding: 0 28px 50px; }
  .overlay { padding: 40px 28px 56px; }
  .form-close { top: 28px; right: 28px; }
  .hline { left: 28px; }
  .headline { font-size: 38px; }
  .field-grid, .field-grid.cols-3 { grid-template-columns: 1fr; }
  .s-systems, .s-infra { padding: 36px 28px; }
}