/* =========================================================
   Fulcrum Precision — stylesheet condivisa (IT + EN)
   Design system v1.0 · Roberto D'Aleo / Fulcrum Consulenza
   ========================================================= */

:root{
  /* palette (verbatim dal design system) */
  --navy:#0D1F2D; --slate:#1A3347; --teal:#1E7B6E; --teal-hover:#185F54;
  --sand:#D4C5A9; --cream:#F0EBE1; --stone:#A8A09A;
  --white:#FFFFFF; --off-white:#F7F4F0; --dark-text:#1A1A1A; --muted-text:#6B6560;

  /* teal soft (highlight/badge) */
  --teal-soft:rgba(30,123,110,.12);
  --hairline:rgba(212,197,169,.16);      /* su scuro */
  --hairline-ink:rgba(26,26,26,.12);     /* su chiaro */

  /* type */
  --ff-serif:'Playfair Display',Georgia,serif;
  --ff-sans:'Inter',system-ui,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;

  /* fluid scale — ratio ~1.28, breathing su viewport ampi */
  --fs-display:clamp(2.7rem,1.6rem + 5vw,4.6rem);
  --fs-h2:clamp(1.7rem,1.2rem + 2.2vw,2.6rem);
  --fs-h3:clamp(1.1rem,1rem + .4vw,1.25rem);
  --fs-lead:clamp(1.05rem,.98rem + .5vw,1.3rem);
  --fs-body:1rem;
  --fs-small:.8125rem;
  --fs-label:.6875rem;

  /* spacing base 4px */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;

  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:14px;

  --maxw:1160px;
  --ease:cubic-bezier(.22,1,.36,1); /* ease-out-quint */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--navy);
  color:var(--cream);
  font-family:var(--ff-sans);
  font-size:var(--fs-body);
  line-height:1.75;               /* +breathing per testo chiaro su scuro */
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--teal);color:var(--cream)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:var(--slate);border-radius:9px}
a{color:inherit}
img,svg{display:block;max-width:100%}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.section{padding-block:clamp(72px,10vw,140px);position:relative}
.section--slate{background:var(--slate)}
.section--report{background:var(--off-white);color:var(--dark-text)}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--ff-serif);font-weight:700;font-size:var(--fs-display);
  line-height:1.02;letter-spacing:-.015em;max-width:16ch;
}
.display em{font-style:italic;color:var(--teal)}
h2,.h2{font-family:var(--ff-serif);font-weight:400;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.01em;max-width:20ch}
h3,.h3{font-family:var(--ff-sans);font-weight:600;font-size:var(--fs-h3);line-height:1.35;letter-spacing:-.005em}
.lead{font-size:var(--fs-lead);line-height:1.6;font-weight:300;max-width:46ch;color:var(--cream)}
.prose{max-width:60ch}
.prose p{margin-top:var(--s-4)}
.muted{color:var(--stone)}
.section--report .muted{color:var(--muted-text)}

/* indice "leverage": sistema di numerazione di sezione (deliberato, non scaffolding) */
.kicker{
  display:flex;align-items:center;gap:var(--s-3);
  font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--s-6);
}
.kicker::before{content:attr(data-n);color:var(--sand)}
.kicker span{width:28px;height:1px;background:var(--teal);opacity:.6}
.section--report .kicker{color:var(--teal)}
.section--report .kicker::before{color:var(--muted-text)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(20px,5vw,56px);
  background:transparent;transition:background .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(13,31,45,.82);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--hairline)}
/* Wordmark allineato al logo ufficiale (materiale comunicazione/loghi):
   FULCRUM maiuscolo, Playfair Display Bold, ben spaziato. */
.nav-logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-serif);font-weight:700;font-size:1.05rem;color:var(--cream);text-decoration:none;text-transform:uppercase;letter-spacing:.07em}
.nav-logo svg{width:16px;height:18px;overflow:visible}
.nav-links{display:flex;gap:clamp(16px,2.4vw,32px);list-style:none}
.nav-links a{font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--cream)}
.nav-right{display:flex;align-items:center;gap:var(--s-4)}
.lang{display:flex;gap:2px;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.04em}
.lang a{color:var(--stone);text-decoration:none;padding:2px 5px;border-radius:var(--r-sm);transition:color .2s}
.lang a.active{color:var(--navy);background:var(--sand)}
.lang a:not(.active):hover{color:var(--cream)}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--ff-sans);font-weight:500;font-size:.8125rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;padding:12px 22px;border-radius:var(--r-md);
  border:1px solid transparent;cursor:pointer;transition:background .22s var(--ease),color .22s,border-color .22s,transform .22s var(--ease);
}
.btn-primary{background:var(--teal);color:var(--cream)}
.btn-primary:hover{background:var(--teal-hover);transform:translateY(-2px)}
.btn-secondary{background:transparent;border-color:var(--hairline);color:var(--cream)}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.section--report .btn-secondary{border-color:var(--hairline-ink);color:var(--dark-text)}
.section--report .btn-secondary:hover{border-color:var(--teal);color:var(--teal)}
.btn .arrow{transition:transform .22s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--s-2);
  background:var(--teal-soft);color:var(--teal);
  font-size:var(--fs-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(30,123,110,.5);animation:pulse 2.4s var(--ease) infinite}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:96px;padding-bottom:clamp(48px,8vh,96px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,80px);align-items:center;width:100%}
.hero-figure{position:relative;aspect-ratio:1/1;width:100%}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-figure{max-width:380px;margin-top:var(--s-8)}
}
.hero .lead{margin-top:var(--s-8)}
.hero-cta{display:flex;gap:var(--s-3);margin-top:var(--s-12);flex-wrap:wrap}
.hero-tags{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-12)}
.tag{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.04em;color:var(--stone);padding:5px 11px;border:1px solid var(--hairline);border-radius:100px}

/* ---------- metodo: lista editoriale numerata (NO card) ---------- */
.steps{margin-top:clamp(40px,6vw,72px);display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);padding-block:clamp(28px,4vw,44px);border-top:1px solid var(--hairline);align-items:start}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step-n{font-family:var(--ff-serif);font-size:clamp(2rem,1.4rem + 2.5vw,3.4rem);line-height:1;color:var(--teal);font-weight:700}
.step h3{margin-bottom:var(--s-3)}
.step p{color:var(--stone);max-width:54ch}

/* ---------- servizi: righe con hairline a tutta larghezza (NO card) ---------- */
.rows{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--hairline)}
.row{
  display:grid;grid-template-columns:56px 1fr auto;gap:clamp(16px,3vw,40px);align-items:baseline;
  padding-block:clamp(24px,3.4vw,40px);border-bottom:1px solid var(--hairline);
  transition:padding-left .3s var(--ease);
}
.row:hover{padding-left:var(--s-3)}
.row-n{font-family:var(--ff-mono);font-size:.8rem;color:var(--sand);letter-spacing:.04em}
.row-b h3{margin-bottom:var(--s-2)}
.row-b p{color:var(--stone);max-width:52ch}
.row-tag{font-family:var(--ff-mono);font-size:.72rem;color:var(--stone);white-space:nowrap;letter-spacing:.03em}
@media(max-width:640px){.row{grid-template-columns:40px 1fr}.row-tag{display:none}}

/* ---------- chi sono ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:var(--s-12)}}
/* Inverte le due colonne sul desktop: serve quando due .split si susseguono
   (le due app in Soluzioni) e affiancarle identiche le farebbe sembrare un
   copia-incolla. L'inversione e' solo visiva: nel DOM il testo resta primo,
   e sotto gli 860px, dove la griglia torna a una colonna, non si applica --
   li' il testo deve comunque precedere l'immagine. */
@media(min-width:861px){
  .split--flip > :first-child{order:2}
  .split--flip > :last-child{order:1}
}
.figure-fulcrum{aspect-ratio:4/5;width:100%;max-width:420px;border:1px solid var(--hairline);border-radius:var(--r-lg);position:relative;overflow:hidden;background:linear-gradient(180deg,var(--slate),var(--navy))}

/* ritratto (foto reale) */
.portrait{position:relative;width:100%;max-width:430px;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hairline);background:linear-gradient(180deg,var(--slate),var(--navy))}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(.92) contrast(1.02)}
.portrait figcaption{position:absolute;inset:auto 0 0 0;padding:clamp(18px,3vw,26px);display:flex;flex-direction:column;gap:5px;background:linear-gradient(180deg,transparent,rgba(13,31,45,.82) 62%,rgba(13,31,45,.94))}
.portrait-name{font-family:var(--ff-serif);font-size:clamp(1.3rem,1rem + 1.2vw,1.7rem);color:var(--cream);line-height:1}
.portrait-role{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;color:var(--sand)}
.portrait .mark{position:absolute;top:clamp(16px,2.4vw,22px);left:clamp(16px,2.4vw,22px)}

/* ---------- prova (report band, chiaro) ---------- */
.ledger{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--hairline-ink)}
.ledger-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:baseline;padding-block:clamp(24px,3vw,36px);border-bottom:1px solid var(--hairline-ink)}
.ledger-k{font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.ledger-b h3{margin-bottom:var(--s-2);color:var(--dark-text)}
.ledger-b p{color:var(--muted-text);max-width:56ch}
.ledger-b a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--teal);padding-bottom:1px}
.ledger-b a:hover{color:var(--teal-hover)}
.ledger-meta{font-family:var(--ff-mono);font-size:.72rem;color:var(--muted-text);white-space:nowrap}
@media(max-width:640px){.ledger-row{grid-template-columns:1fr}.ledger-meta{display:none}}

/* ---------- contatti ---------- */
.contact-h{font-family:var(--ff-serif);font-weight:400;font-size:var(--fs-h2)}
.contact-links{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-8)}

/* ---------- footer ---------- */
.footer{background:var(--navy);border-top:1px solid var(--hairline);padding-block:clamp(48px,7vw,80px)}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-8);flex-wrap:wrap}
.footer-mark{font-family:var(--ff-serif);font-weight:700;font-size:1.2rem;color:var(--cream);display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.06em}
.footer-mark svg{width:18px;height:20px;overflow:visible}
.footer p{color:var(--stone);font-size:var(--fs-small);max-width:52ch;margin-top:var(--s-3)}
.footer a{color:var(--sand);text-decoration:none}
.footer a:hover{color:var(--cream)}

/* ---------- lever mark (SVG signature) ---------- */
.lever .beam,.lever .fulcrum,.lever .load,.lever .effort{transition:transform .6s var(--ease)}
.lever .arc{stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}

/* ---------- reveal / stagger ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.reveal.visible{opacity:1;transform:none}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,123,110,.45)}70%{box-shadow:0 0 0 8px rgba(30,123,110,0)}100%{box-shadow:0 0 0 0 rgba(30,123,110,0)}}

/* ---------- responsive nav ---------- */
/* Icona a tre righe: nascosta di default, appare solo sotto i 760px
   (vedi media query sotto). Niente ombre o gradienti: solo le tre
   barre, coerenti col principio "no decorativismo". */
.nav-toggle{
  display:none;flex-direction:column;justify-content:space-between;
  width:26px;height:18px;background:none;border:none;padding:0;cursor:pointer;
}
.nav-toggle-bar{display:block;width:100%;height:2px;background:var(--cream);
  transition:transform .25s var(--ease),opacity .2s var(--ease);}
.nav.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
.nav.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:760px){
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(13,31,45,.97);backdrop-filter:blur(14px) saturate(1.2);
    border-bottom:1px solid var(--hairline);
    padding:var(--s-2) clamp(20px,5vw,56px) var(--s-8);
  }
  .nav-links a{display:block;padding-block:var(--s-3);font-size:.85rem}
  .nav.nav-open .nav-links{display:flex}
}

/* ---------- telefoni piccoli (safety: no overflow, testo che respira) ---------- */
@media(max-width:560px){
  .display{font-size:clamp(2.15rem,1.4rem + 3.4vw,3rem);max-width:100%}
  h2,.h2,.contact-h{max-width:100%}
  .lead,.prose,.sec-desc{max-width:100%}
  .hero{padding-top:92px;min-height:auto}
  .hero-cta{margin-top:var(--s-8)}
  .hero-tags{margin-top:var(--s-8)}
  .step{gap:20px}
  .step-n{font-size:2.2rem}
  .portrait{max-width:100%;margin-inline:auto}
  .footer-grid{flex-direction:column;align-items:flex-start}
  .footer-grid>div[style]{text-align:left!important}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
  .badge .dot{animation:none}
  *{scroll-behavior:auto}
}

/* ---------- screenshot di un'app (cornice) ---------- */
.shot{width:100%;border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;background:var(--slate)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:12px 16px;border-top:1px solid var(--hairline);font-family:var(--ff-mono);font-size:.7rem;line-height:1.5;color:var(--stone)}