/* ==========================================================================
   Reciptica · proposta finale multi-pagina
   Base: variante A "Editoriale chiaro" + bento (B), banda manifesto (B),
   clienti e footer verde (E).
   ========================================================================== */

@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight:500 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  --paper:#0f1318;
  --paper-2:#171b21;
  --ink:#e8eaec;
  --muted:#9aa3ad;
  --accent:#6ab894;
  --accent-hover:#84c7a8;
  --line:#232830;
  --line-ink:rgba(255,255,255,.22);
  --card-line:#232830;
  --dash:#3a4150;
  --dark:#0b0e13;
  --green-deep:#0b0e13;
  --on-dark-muted:rgba(255,255,255,.76);

  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --wrap:1200px;
  --wrap-wide:1360px;
  --pad:clamp(20px,4.4vw,56px);
  --ease:cubic-bezier(.22,.7,.16,1);
  --r-btn:9px;
  --r-img:8px;
  --r-tile:12px;
  --r-card:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:rgba(46,107,79,.15)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;background:#1b2027;color:var(--ink);
  padding:12px 18px;border:1px solid var(--line);border-radius:0 0 8px 0;text-decoration:none;
}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- tipografia ---------- */
.eyebrow{
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.25;color:var(--accent);
}
.eyebrow--muted{color:var(--muted)}
.eyebrow--light{color:rgba(255,255,255,.82)}
.h1{font-family:var(--display);font-weight:800;font-size:clamp(2.25rem,5.1vw,4rem);line-height:1.03;letter-spacing:-.032em}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(1.85rem,3.3vw,2.85rem);line-height:1.08;letter-spacing:-.026em}
.h3{font-family:var(--display);font-weight:700;font-size:clamp(1.28rem,1.85vw,1.65rem);line-height:1.2;letter-spacing:-.018em}
.h4{font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em}
.lead{font-size:clamp(1.04rem,1.2vw,1.2rem);line-height:1.62;color:var(--muted)}
.note{font-size:.96rem;line-height:1.62;color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-size:15.5px;font-weight:700;line-height:1;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r-btn);padding:16px 26px;
}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#0f1318}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--outline{background:transparent;border-color:var(--line-ink);color:var(--ink)}
.btn--outline:hover{background:var(--accent);border-color:var(--accent);color:#0f1318}
.btn--sm{font-size:14.5px;padding:12px 18px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-inner{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);height:72px;
  width:100%;max-width:var(--wrap-wide);margin-inline:auto;padding-inline:var(--pad);
}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{height:48px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);margin-left:auto}
.nav-links a{
  position:relative;display:inline-block;padding:6px 0;text-decoration:none;
  font-family:var(--display);font-size:15px;font-weight:600;color:var(--muted);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);border-radius:2px;
}
.nav-cta{flex:0 0 auto}
.nav-menu{display:none;position:relative;flex:0 0 auto}
.nav-menu>summary{
  list-style:none;cursor:pointer;display:grid;place-items:center;gap:4px;
  width:44px;height:44px;border:1px solid var(--line-ink);border-radius:var(--r-btn);
}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary span{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px}
.nav-menu[open]>summary{background:var(--ink)}
.nav-menu[open]>summary span{background:var(--paper)}
.nav-panel{
  position:absolute;right:0;top:calc(100% + 10px);z-index:50;min-width:236px;
  background:#1b2027;border:1px solid var(--card-line);border-radius:var(--r-tile);
  padding:8px;display:grid;gap:2px;
}
.nav-panel a{
  display:block;padding:13px 14px;border-radius:8px;text-decoration:none;
  font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);
}
.nav-panel a:hover{background:var(--paper-2)}
.nav-panel a[aria-current="page"]{color:var(--accent)}

/* ---------- sezioni ---------- */
.section{padding-block:clamp(64px,7.6vw,116px)}
.section--tight{padding-block:clamp(48px,5.6vw,84px)}
.rule-top{border-top:1px solid var(--line);padding-top:clamp(28px,3.4vw,48px)}

/* ---------- figure ---------- */
.fig{display:block}
.fig-frame{border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden;background:#141920}
.fig-frame img{width:100%;height:auto;object-fit:cover}
.fig-cap{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:56ch}
.fig-bleed{width:100%;padding-inline:clamp(14px,2.2vw,34px)}
.fig-bleed .fig-cap{max-width:70ch}
/* grade fotografico: tiene le immagini dentro la palette carta/inchiostro/verde */
.fig-frame img{filter:saturate(.94) contrast(1.02)}
.fig--wide .fig-frame img{filter:saturate(.24) contrast(1.07) brightness(.96)}

/* ---------- hero home ---------- */
.hero{padding-top:clamp(40px,5vw,96px);padding-bottom:clamp(52px,6.4vw,96px)}
.hero-grid{display:grid;gap:clamp(34px,5vw,72px);align-items:start}
.hero-copy{display:grid;gap:22px;align-content:start}
.hero-copy .h1{max-width:15ch}
.hero-sub{max-width:44ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;padding-top:6px}
.hero-fig .fig-frame img{aspect-ratio:4/3}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .hero-fig{padding-top:clamp(0px,2.4vw,46px)}
}
@media (min-width:1200px){
  .hero-fig{padding-left:clamp(0px,2vw,44px)}
}

/* ---------- lista editoriale (come funziona) ---------- */
.flow{border-top:1px solid var(--line)}
.flow li{
  display:grid;gap:10px 24px;padding:clamp(24px,3.2vw,38px) 0;
  border-bottom:1px solid var(--line);align-items:baseline;
}
.flow-num{
  font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.4vw,3.1rem);
  line-height:.92;color:var(--accent);letter-spacing:-.03em;
}
.flow-title{font-family:var(--display);font-weight:700;font-size:clamp(1.22rem,2vw,1.62rem);line-height:1.14;letter-spacing:-.02em}
.flow-desc{color:var(--muted);font-size:1rem}
@media (min-width:820px){
  .flow li{grid-template-columns:clamp(64px,7vw,104px) minmax(0,.92fr) minmax(0,1.08fr)}
  .flow-desc{padding-top:2px}
}

/* ---------- testata di sezione ---------- */
.sec-head{display:grid;gap:clamp(16px,2.2vw,26px);margin-bottom:clamp(30px,4vw,54px)}
.sec-head-row{display:grid;gap:clamp(14px,2.2vw,40px);align-items:end}
.sec-head-note{font-size:.99rem;line-height:1.6;color:var(--muted);max-width:62ch}
@media (min-width:1080px){
  .sec-head-row{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
  .sec-head-row .sec-head-note{max-width:40ch;justify-self:end;text-align:left}
}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.bento-col{grid-column:span 12;display:grid;gap:clamp(14px,1.5vw,20px)}
.tile{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  border:1px solid var(--line-ink);border-radius:var(--r-tile);background:#0e1116;
}
.tile--lg{grid-column:span 12;min-height:430px}
.tile-media{position:absolute;inset:0;z-index:0}
.tile-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.001)}
.tile-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(6,8,11,.94) 0%, rgba(6,8,11,.9) 40%, rgba(6,8,11,.8) 62%,
    rgba(6,8,11,.66) 80%, rgba(6,8,11,.58) 100%);
}
@media (min-width:768px){
  /* il tile grande ha piu' respiro: velo uniforme in alto, scrim pieno in basso */
  .tile--lg .tile-media::after{
    background:
      linear-gradient(to top,
        rgba(6,8,11,.9) 0%, rgba(6,8,11,.8) 26%, rgba(6,8,11,.5) 48%,
        rgba(6,8,11,.16) 70%, rgba(6,8,11,0) 88%),
      linear-gradient(rgba(6,8,11,.42), rgba(6,8,11,.42));
  }
}
.tile-body{
  position:relative;z-index:1;height:100%;min-height:inherit;
  display:flex;flex-direction:column;justify-content:flex-end;gap:11px;
  padding:clamp(20px,2.3vw,34px);color:#fff;
}
.tile-title{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.12;letter-spacing:-.024em;color:#fff}
.tile--sm .tile-title{font-size:clamp(1.14rem,1.5vw,1.4rem)}
.tile-copy{font-size:.98rem;line-height:1.58;color:rgba(255,255,255,.88);max-width:46ch}
.tile--sm .tile-copy{font-size:.94rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.chip{
  display:inline-block;padding:7px 13px;border-radius:999px;line-height:1;
  font-family:var(--display);font-size:12.5px;font-weight:600;
  color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.35);
}
@media (min-width:768px){
  .bento-col{grid-column:span 5;grid-template-rows:1fr 1fr}
  .tile--lg{grid-column:span 7;min-height:560px}
}

/* ---------- banda manifesto ---------- */
.manifesto{
  border-block:1px solid rgba(255,255,255,.07);
  position:relative;overflow:hidden;background:var(--green-deep);color:#fff;
  padding-block:clamp(64px,7.6vw,116px);
}
.manifesto::before{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.manifesto-inner{position:relative;display:grid;gap:clamp(22px,2.8vw,34px)}
.manifesto-quote{
  border-left:3px solid #6ab894;padding-left:clamp(20px,2.8vw,42px);
  font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(1.6rem,3.5vw,2.9rem);line-height:1.14;letter-spacing:-.028em;
  max-width:26ch;
}
.manifesto-label{
  font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
  padding-left:clamp(23px,2.8vw,45px);
}

/* ---------- clienti ---------- */
.clients-card{
  background:var(--paper-2);border:1px solid var(--card-line);border-radius:var(--r-card);
  padding:clamp(24px,3.6vw,60px);display:grid;gap:clamp(22px,3vw,38px);justify-items:center;
}
.slots{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.6vw,22px);width:100%}
.slot{
  border:1px dashed #454f61;border-radius:var(--r-tile);
  aspect-ratio:5/2;display:grid;place-items:center;
  color:#a09a93;font-family:var(--display);font-size:1.5rem;font-weight:500;line-height:1;
}
@media (min-width:720px){
  .slots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slot{aspect-ratio:16/7}
}
.slots-note{font-size:.99rem;line-height:1.6;color:var(--muted);text-align:center;max-width:56ch}

/* ---------- testata pagina interna ---------- */
.page-head{padding-top:clamp(38px,4.6vw,78px);padding-bottom:clamp(28px,3.4vw,46px)}
.page-head-inner{display:grid;gap:18px}
.page-head .h1{max-width:19ch}
.page-head .lead{max-width:58ch}
.fig--wide .fig-frame img{aspect-ratio:16/9}
.fig--wide .fig-cap{max-width:64ch}

/* ---------- blocchi feature (cosa facciamo) ---------- */
.feat{display:grid;gap:clamp(18px,2.4vw,30px);border-top:1px solid var(--line);padding-block:clamp(28px,3.6vw,50px)}
.feat-grid{display:grid;gap:clamp(22px,3.4vw,56px);align-items:start}
.feat-copy{display:grid;gap:12px;max-width:52ch;align-content:start}
.feat-list{border-bottom:1px solid var(--line)}
.feat-split{display:grid}
@media (min-width:900px){
  .feat-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  .feat-split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat-split>*:first-child{padding-right:clamp(30px,3.6vw,58px)}
  .feat-split>*+*{border-left:1px solid var(--line);padding-left:clamp(30px,3.6vw,58px)}
}
.split-2{display:grid}
.split-2>div{display:grid;gap:14px;align-content:start;max-width:54ch}
@media (min-width:900px){
  .split-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-2>*:first-child{padding-right:clamp(30px,3.6vw,58px)}
  .split-2>*+*{border-left:1px solid var(--line);padding-left:clamp(30px,3.6vw,58px)}
}

/* ---------- checklist ---------- */
.check{border-top:1px solid var(--line)}
.check li{
  display:grid;grid-template-columns:14px minmax(0,1fr);gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:.97rem;line-height:1.5;
}
.check li::before{
  content:"";width:10px;height:6px;margin-top:7px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* ---------- CTA strip ---------- */
.cta-strip{
  border-top:1px solid var(--line);padding-top:clamp(26px,3.2vw,44px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.cta-strip p{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.015em}

/* ---------- due colonne di testo (chi siamo) ---------- */
.prose-2{display:grid;gap:clamp(26px,3.6vw,64px)}
.prose-2>div{display:grid;gap:20px}
.prose-2 p{max-width:65ch;font-size:1.03rem;line-height:1.72}
@media (min-width:900px){.prose-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pull{
  border-left:3px solid var(--accent);padding:4px 0 4px clamp(18px,2.2vw,30px);
  font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.55rem);
  line-height:1.24;letter-spacing:-.02em;max-width:34ch;
}

/* ---------- people ---------- */
.people{border-top:1px solid var(--line)}
.people li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);
}
.people-name{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-.026em}
.people a{
  font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;
  text-underline-offset:4px;
}
.people a:hover{color:var(--accent)}

/* ---------- footer ---------- */
.footer{
  background:var(--green-deep);color:#fff;
  border-radius:20px 20px 0 0;margin-top:clamp(20px,3.2vw,52px);
}
.footer-inner{max-width:var(--wrap);margin-inline:auto;padding:clamp(46px,5.6vw,84px) var(--pad) clamp(22px,2.6vw,32px)}
.footer-grid{display:grid;gap:clamp(32px,4.6vw,72px)}
.footer-left{display:grid;gap:clamp(16px,2vw,24px);justify-items:start}
.footer-title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.02;letter-spacing:-.032em;color:#fff}
.mail-pill{
  display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--green-deep);
  border-radius:999px;padding:14px 24px;text-decoration:none;
  font-family:var(--display);font-size:15.5px;font-weight:700;line-height:1;
}
.mail-pill:hover{background:#eef3f0}
.footer-social{display:flex;gap:22px}
.footer-social a{
  color:var(--on-dark-muted);font-size:15px;font-weight:600;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;
}
.footer-social a:hover{color:#fff}
.footer-right{display:grid;gap:16px;align-content:start}
.footer-right img{height:52px;width:auto}
.footer-right p{color:var(--on-dark-muted);font-size:.98rem;line-height:1.6;max-width:42ch}
.footer-bottom{
  margin-top:clamp(34px,4.4vw,60px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-size:14px;color:var(--on-dark-muted);
}
.footer-bottom a{color:var(--on-dark-muted);text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:#fff}
.footer-dot{color:rgba(255,255,255,.45)}
@media (min-width:900px){
  .footer-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .footer-right{justify-items:end;text-align:right}
}

/* ---------- menu mobile ---------- */
@media (max-width:899px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .nav-menu{display:block}
}
@media (max-width:899px){
  .brand img{height:42px}
}
@media (max-width:420px){
  .brand img{height:38px}
  .nav-inner{gap:12px}
  .nav-cta{padding:11px 15px;font-size:14px}
  .nav-menu>summary{width:40px;height:40px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  html.js [data-reveal]{
    opacity:0;transform:translateY(20px);
    transition:opacity .72s var(--ease) var(--d,0ms),transform .72s var(--ease) var(--d,0ms);
  }
  html.js [data-reveal].is-in{opacity:1;transform:none}

  html.js .rise{overflow:hidden}
  html.js .rise .rise-in{
    display:block;opacity:0;transform:translateY(112%);
    transition:transform .95s var(--ease) var(--d,0ms),opacity .7s var(--ease) var(--d,0ms);
  }
  html.js .rise.is-in .rise-in{opacity:1;transform:translateY(0)}

  html.js .stagger[data-reveal]{opacity:1;transform:none;transition:none}
  html.js .stagger>*{
    opacity:0;transform:translateY(16px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);
  }
  html.js .stagger.is-in>*{opacity:1;transform:none}
  html.js .stagger.is-in>*:nth-child(1){transition-delay:0ms}
  html.js .stagger.is-in>*:nth-child(2){transition-delay:70ms}
  html.js .stagger.is-in>*:nth-child(3){transition-delay:140ms}
  html.js .stagger.is-in>*:nth-child(4){transition-delay:210ms}
  html.js .stagger.is-in>*:nth-child(5){transition-delay:280ms}
  html.js .stagger.is-in>*:nth-child(6){transition-delay:350ms}

  .tile{transition:translate .3s var(--ease),border-color .3s var(--ease)}
  .tile:hover{translate:0 -2px}
  .tile-media img{transition:transform .8s var(--ease)}
  .tile:hover .tile-media img{transform:scale(1.02)}
  .btn{transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
  .mail-pill{transition:background-color .25s var(--ease)}
  .fig-frame img{transition:transform .8s var(--ease)}
  .fig:hover .fig-frame img{transform:scale(1.012)}
  .people li,.check li{transition:padding-left .3s var(--ease)}
  .people li:hover{padding-left:8px}
}

/* ---------- brand plate (sostituisce le foto astratte delle pagine interne) ---------- */
.plate{background:#1b2027;border:1px solid var(--line);border-radius:26px;padding:clamp(8px,1vw,12px)}
.plate-core{border-radius:calc(26px - 10px);background:#141920;box-shadow:inset 0 1px 0 rgba(255,255,255,.75);display:grid;place-items:center;padding:clamp(44px,6vw,88px) clamp(20px,4vw,60px)}
.plate-art{display:block;width:min(380px,74%);height:auto}

/* ---------- CTA: icona trailing nel proprio cerchio (button-in-button) ---------- */
.btn{display:inline-flex;align-items:center;gap:12px}
.btn-ico{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:rgba(15,19,24,.16);transition:transform .3s var(--ease),background-color .3s var(--ease)}
.btn-ico svg{width:13px;height:13px}
.btn--primary:hover .btn-ico{transform:translate(2px,-1px);background:rgba(15,19,24,.24)}
.btn--outline .btn-ico{background:rgba(232,234,236,.08)}
.btn--outline:hover .btn-ico{background:rgba(15,19,24,.2);transform:translate(2px,-1px)}
.btn:active{transform:translateY(1px)}

/* ---------- polish: tipografia e target (ui-ux-pro-max / impeccable) ---------- */
.h1,.h2,.h3{text-wrap:balance}
.lead,.flow-desc,.tile-copy,.fig-cap{text-wrap:pretty}
.nav-links a{padding:10px 2px}

/* ---------- hero home: doppia ghiera come la brand plate ---------- */
.hero-fig .fig-frame{border:1px solid var(--line);border-radius:26px;background:#1b2027;padding:clamp(8px,1vw,12px)}
.hero-fig .fig-frame img{border-radius:calc(26px - 10px);display:block}

/* ---------- flow: tile SVG per passo ---------- */
.flow-tile{width:64px;height:64px;border-radius:16px;background:#1b2027;border:1px solid #262c36;display:grid;place-items:center;flex:none}
.flow-tile svg{width:34px;height:34px;display:block}
.flow-head{display:grid;gap:3px;align-content:center}
.flow-idx{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--accent)}
@media (min-width:760px){
  .flow li{grid-template-columns:auto 1fr minmax(200px,.9fr);align-items:center}
}
@media (max-width:759px){
  .flow li{grid-template-columns:auto 1fr}
  .flow li .flow-desc{grid-column:2}
}

/* ---------- atmosfera & ritmo ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 480px at 88% -10%, rgba(106,184,148,.09), transparent 62%),
    radial-gradient(560px 420px at -12% 108%, rgba(41,171,226,.07), transparent 60%);
}
.hero .wrap{position:relative}
.hero-fig{transform:rotate(-1.2deg)}
@media (max-width:760px){.hero-fig{transform:none}}

/* sezione 01: banda tinta indaco */
#come-funziona{background:#151a20;border-block:1px solid #232830}
#come-funziona .flow{border-top-color:#262c36}
#come-funziona .flow li{border-bottom-color:#262c36}

/* strappo scontrino tra sezioni */
.tear{display:block;width:100%;height:14px;color:var(--paper)}


/* spark del logo accanto agli indici */
.sec-head .eyebrow{display:inline-flex;align-items:center;gap:10px}
.sec-head .eyebrow::before{
  content:"";width:12px;height:12px;flex:none;background:#29abe2;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}

/* footer: wordmark gigante outline */
.footer{position:relative;overflow:hidden}
.footer::after{
  content:"RECIPTICA";position:absolute;right:-24px;bottom:-88px;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:clamp(120px,18vw,280px);line-height:.8;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.08);
}
.footer-inner{position:relative;z-index:1}
@media (max-width:760px){.footer::after{display:none}}

/* ---------- diagrammi SVG animati (cosa facciamo) ---------- */
.feat--panel{grid-template-columns:1fr}
.feat--panel .feat-body{display:grid;gap:clamp(18px,2.4vw,30px)}
@media (min-width:900px){
  .feat--panel{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
  .feat--panel.feat--flip .feat-panel{order:2}
}
.feat-panel{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;
  background:#141920;
  background-size:20px 20px;display:grid;place-items:center;
  min-height:clamp(220px,26vw,320px);
}
.feat-panel svg{width:min(340px,76%);height:auto;display:block}
.dg-green{stroke:#6ab894}.dg-cyan{stroke:#29abe2}.dg-line{stroke:#3a4150}
.fg-green{fill:#6ab894}.fg-cyan{fill:#29abe2}

@media (prefers-reduced-motion: no-preference){
  /* upload: freccia che sale nel documento */
  .dg-upload-arrow{animation:dg-up 2.6s var(--ease) infinite}
  @keyframes dg-up{0%{transform:translateY(10px);opacity:0}22%{opacity:1}62%{transform:translateY(-4px);opacity:1}88%,100%{transform:translateY(-8px);opacity:0}}
  .dg-upload-dash{stroke-dasharray:4 5;animation:dg-dash 2.6s linear infinite}
  @keyframes dg-dash{to{stroke-dashoffset:-18}}
  /* find: barra che scorre sulle righe */
  .dg-scan{animation:dg-scan 3.2s var(--ease) infinite}
  @keyframes dg-scan{0%{transform:translateY(0)}55%{transform:translateY(62px)}90%,100%{transform:translateY(0)}}
  /* sync: punti che viaggiano lungo il percorso */
  .dg-dot{opacity:0;animation:dg-travel 2.8s linear infinite}
  .dg-dot:nth-of-type(2){animation-delay:.9s}
  .dg-dot:nth-of-type(3){animation-delay:1.8s}
  @keyframes dg-travel{0%{transform:translateX(0);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translateX(116px);opacity:0}}
  .dg-sync-path{stroke-dasharray:5 6;animation:dg-dash 3.4s linear infinite}
  /* lock: anello che si chiude una volta, poi pulsa */
  .dg-lock-ring{transform-origin:center;transform-box:fill-box;animation:dg-pulse 3s ease-out infinite}
  @keyframes dg-pulse{0%{transform:scale(.82);opacity:.8}60%{transform:scale(1.06);opacity:.15}100%{transform:scale(1.06);opacity:0}}
  /* domain: tre nodi convergono */
  .dg-node{animation:dg-node 3.6s var(--ease) infinite}
  .dg-node:nth-of-type(2){animation-delay:.35s}
  .dg-node:nth-of-type(3){animation-delay:.7s}
  @keyframes dg-node{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .dg-link{stroke-dasharray:60;stroke-dashoffset:60;animation:dg-draw 3.6s var(--ease) infinite}
  .dg-link:nth-of-type(2){animation-delay:.3s}
  @keyframes dg-draw{30%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
}
@media (min-width:900px){
  .feat--panel.feat--stack{grid-template-columns:1fr}
  .feat--panel.feat--stack .feat-panel{min-height:clamp(200px,22vw,280px)}
  .feat--panel.feat--stack .feat-panel svg{width:min(420px,80%)}
  .feat--panel.feat--stack .feat-body{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:start;gap:clamp(22px,3.4vw,56px)}
}

/* ---------- hero: composizione SVG (sostituisce il dot grid) ---------- */
.hero-art{position:absolute;top:clamp(30px,5vw,80px);right:max(-70px,-4vw);width:min(540px,44vw);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
@media (max-width:900px){.hero-art{display:none}}
@media (prefers-reduced-motion: no-preference){
  .hero-art .ha-float{animation:dg-float 7s ease-in-out infinite}
  .hero-art .ha-spark{transform-origin:center;transform-box:fill-box;animation:dg-spark 4.4s var(--ease) infinite}
  .hero-art .ha-spark.s2{animation-delay:2.1s}
  @keyframes dg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @keyframes dg-spark{0%,72%,100%{transform:scale(1);opacity:.85}82%{transform:scale(1.35);opacity:1}}
}

/* ---------- chi siamo ---------- */
.orig-grid{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:900px){.orig-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}
.orig-grid .prose-2{display:grid;gap:clamp(20px,2.6vw,32px)}
.manifesto-sec{position:relative;overflow:hidden}
.manifesto-sec .quote-mark{position:absolute;top:8px;left:-14px;width:clamp(150px,18vw,260px);pointer-events:none;opacity:.1}
@media (prefers-reduced-motion: no-preference){
  .pull{border-left-color:#6ab894;border-left-width:3px;transform-origin:left;animation:dg-quote .9s var(--ease) both}
  @keyframes dg-quote{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.people li{display:flex;align-items:center;gap:18px}
.mono{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:#1b2027;border:1px solid #262c36;color:#6ab894;
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.02em}
.people .people-name{flex:1}

/* ---------- chi siamo: tipografia origine ---------- */
.orig-grid .prose-1{display:grid;gap:20px;align-content:center}
.privacy-content{padding-top:clamp(24px,3vw,44px);padding-bottom:clamp(60px,7vw,110px);max-width:960px}
.privacy-content h2{margin:2.2rem 0 .65rem;font-size:clamp(1.25rem,2vw,1.6rem)}
.privacy-content p{max-width:78ch;line-height:1.75;color:var(--muted)}
.privacy-content a{color:var(--accent)}
.privacy-content .alert{padding:1rem 1.2rem;border:1px solid #d69a76;border-radius:12px;background:#fff3e9;color:#57311c;line-height:1.5}
.orig-grid .prose-1 p{max-width:62ch;font-size:1.03rem;line-height:1.72;color:var(--muted)}
.pull--wide{margin-top:clamp(34px,4.6vw,64px);padding-top:clamp(26px,3.4vw,44px);border-left:0;border-top:1px solid var(--line);
  max-width:34ch;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.22}
.manifesto-sec .quote-mark{top:clamp(20px,3vw,44px);left:auto;right:max(-20px,-1vw);opacity:.08}
@media (prefers-reduced-motion: no-preference){
  .pull--wide{animation:none}
}