/* ============================================================
   FONT — Figtree variable servita in locale.
   assets/fonts/figtree-variable.woff2 (asse wght 300–900)
   ============================================================ */
@font-face{
  font-family:'Figtree Local';
  src:url('assets/fonts/figtree-variable.woff2') format('woff2-variations');
  font-weight:300 900;
  font-style:normal;
  font-display:block;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --font-sans:'Figtree Local','Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* type scale */
  --fs-display : clamp(31px, 6.4vw, 55.7px);
  --fs-h2      : clamp(26px, 4.6vw, 40px);
  --fs-title   : clamp(18px, 2.2vw, 20px);
  --fs-heading : 17px;
  --fs-body    : clamp(15px, 1.2vw, 16.1px);
  --fs-eyebrow : 15.8px;
  --fs-ui      : 15px;
  --fs-nav     : clamp(10.5px, 3.05vw, 15px);
  --fs-meta    : 14.3px;
  --fs-item    : 12.9px;
  --fs-caption : 12.2px;
  --fs-tab     : 12.1px;
  --fs-sup     : 11.4px;
  --fs-wordmark: clamp(19px, 5.2vw, 27px);

  /* weights */
  --fw-light:388; --fw-regular:470; --fw-medium:500;
  --fw-semibold:511; --fw-bold:577; --fw-black:783;

  /* tracking */
  --tr-display:-.0572em; --tr-title:-.0570em; --tr-heading:-.0200em;
  --tr-body:-.0475em;    --tr-eyebrow:-.0293em; --tr-ui:-.0080em;
  --tr-cta:-.0200em;     --tr-meta:-.0447em;    --tr-item:-.0287em;
  --tr-caption:-.0295em; --tr-tab:-.0398em;     --tr-wordmark:-.0075em;

  /* leading */
  --lh-display:1.08; --lh-body:1.45; --lh-flat:1;

  /* ink / surfaces */
  --c-ink:#000000;
  --c-ink-soft:#2e2e2e;
  --c-muted:#b8b8b8;
  --c-muted-text:#6f6f6f;
  --c-on-dark:#ffffff;
  --c-on-light:#000000;
  --c-surface-nav:#000000;
  --c-surface-card:#f2f2f2;
  --c-surface-panel:#ffffff;
  --c-border-row:#ededed;
  --c-accent:#38c6ec;
  --c-band:#0db5ed;

  /* card mockup — ogni misura interna è multiplo di --dp */
  --u : min(548px, calc(100vw - 32px));
  --dp: calc(var(--u) / 548);

  --page-margin: clamp(16px, 4.2vw, 34px);
  --shell: 1180px;

  --ease-reveal: cubic-bezier(.22,1,.36,1);
  --ease-settle: cubic-bezier(.16,1,.30,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h,150px)}
body{
  margin:0;
  background:#fff;
  color:var(--c-ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  letter-spacing:var(--tr-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--c-accent); outline-offset:3px; border-radius:4px}

/* ============================================================
   TIPOGRAFIA — classi utility
   ============================================================ */
.t-display{font-size:var(--fs-display);font-weight:var(--fw-regular);letter-spacing:var(--tr-display);line-height:var(--lh-display);color:var(--c-ink);margin:0}
.t-h2{font-size:var(--fs-h2);font-weight:var(--fw-regular);letter-spacing:var(--tr-display);line-height:1.1;margin:0}
.t-body{font-size:var(--fs-body);font-weight:var(--fw-regular);letter-spacing:var(--tr-body);line-height:var(--lh-body);margin:0}
.t-title{font-size:var(--fs-title);font-weight:var(--fw-light);letter-spacing:var(--tr-title);line-height:var(--lh-flat);margin:0}
.t-heading{font-size:var(--fs-heading);font-weight:var(--fw-semibold);letter-spacing:var(--tr-heading);line-height:var(--lh-flat);margin:0}
.t-eyebrow{font-size:var(--fs-eyebrow);font-weight:var(--fw-light);letter-spacing:var(--tr-eyebrow);line-height:var(--lh-flat);margin:0}
.t-meta{font-size:var(--fs-meta);font-weight:var(--fw-light);letter-spacing:var(--tr-meta);line-height:var(--lh-flat);color:var(--c-muted)}
.t-item{font-size:var(--fs-item);font-weight:var(--fw-medium);letter-spacing:var(--tr-item);line-height:var(--lh-flat)}
.t-caption{font-size:var(--fs-caption);font-weight:var(--fw-light);letter-spacing:var(--tr-caption);line-height:var(--lh-flat);color:var(--c-muted)}

/* ============================================================
   HEADER — logo SOPRA la nav, nav su due righe
   ============================================================ */
/* fascia azzurra dietro la barra di stato: su iPhone con la barra
   indirizzi in basso si fonde con la status bar. Altrove l'inset
   vale 0px e la fascia semplicemente non esiste. */
.safe-top{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:env(safe-area-inset-top, 0px);
  background:var(--c-band);
  pointer-events:none;
}

.site-header{
  position:sticky; top:0; z-index:60;
  background:#fff;
  padding:calc(14px + env(safe-area-inset-top, 0px)) var(--page-margin) 12px;
  transition:box-shadow .25s ease, padding .25s ease;
}
.site-header.is-stuck{box-shadow:0 1px 0 rgba(0,0,0,.07)}

.brand{
  display:flex; align-items:center; justify-content:center; gap:9px;
  text-decoration:none; margin:0 auto 12px; width:max-content;
  transition:margin .25s ease;
}
.brand__mark{width:auto;height:clamp(30px,7.4vw,42px);flex:none}
.wordmark{
  font-size:var(--fs-wordmark); font-weight:var(--fw-black);
  letter-spacing:var(--tr-wordmark); line-height:var(--lh-flat);
  color:var(--c-ink); white-space:nowrap;
}
.wordmark sup{font-size:var(--fs-sup);font-weight:var(--fw-black);position:relative;top:-5px;left:1px}

.nav{
  max-width:var(--shell); margin:0 auto;
  background:var(--c-surface-nav);
  border-radius:24px;
  padding:5px;
  display:flex; flex-direction:column; gap:3px;
}
.nav__row{display:flex; gap:3px}
.nav__link{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 7px;
  font-size:var(--fs-nav); font-weight:var(--fw-medium);
  letter-spacing:var(--tr-ui); line-height:var(--lh-flat);
  color:var(--c-on-dark); text-decoration:none; text-align:center;
  white-space:nowrap;
  border-radius:19px;
  background:transparent;
  transition:background-color .22s ease, color .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.nav__link:hover{background:rgba(255,255,255,.12)}
.nav__link.is-active{background:var(--c-ink-soft)}
/* voce evidenziata: Richiamami subito */
.nav__link--accent{background:var(--c-accent); color:var(--c-on-light); font-weight:var(--fw-bold)}
.nav__link--accent:hover{background:#2fb6da}
.nav__link--accent.is-active{background:#1f9dc0; color:#fff}

/* ============================================================
   SEZIONI
   ============================================================ */
.section{padding:clamp(56px,10vw,104px) var(--page-margin)}
.section__inner{max-width:var(--shell); margin:0 auto}
.section__head{max-width:34ch; margin-bottom:clamp(28px,4.6vw,48px)}
.section__head .t-body{margin-top:14px; color:var(--c-muted-text); max-width:56ch}
.section--tint{background:#fafafa}

/* ---------- BOTTONI ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 22px;
  border:0; border-radius:22px;
  font-family:inherit; font-size:var(--fs-ui);
  letter-spacing:var(--tr-cta); line-height:var(--lh-flat);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .18s var(--ease-settle), background-color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--dark{background:var(--c-ink); color:#fff; font-weight:var(--fw-medium)}
.btn--dark:hover{background:var(--c-ink-soft)}
.btn--accent{background:var(--c-accent); color:var(--c-on-light); font-weight:var(--fw-bold)}
.btn--accent:hover{background:#2fb6da}
.btn--ghost{background:#fff; color:var(--c-ink); font-weight:var(--fw-bold); box-shadow:inset 0 0 0 1px var(--c-border-row)}

/* ============================================================
   1 — HOME / HERO
   ============================================================ */
.hero{padding:clamp(34px,7vw,64px) var(--page-margin) 0; text-align:center}
.hero__inner{max-width:900px;margin:0 auto}
.hero-h1{max-width:16ch; margin:0 auto; text-wrap:balance}
.hero-sub{
  margin:clamp(18px,2.6vw,26px) auto 0;
  max-width:50ch; color:var(--c-ink);
  text-wrap:balance;
}
.hero__actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:clamp(22px,3.2vw,32px)}

/* banda video full-bleed */
.band{
  position:relative; margin-top:clamp(38px,6vw,64px);
  min-height:clamp(230px,42vh,360px);
  background-color:var(--c-band);
  overflow:hidden;
  padding:clamp(28px,5.4vh,64px) var(--page-margin) 0;
}
.band__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; z-index:0;
}
.band__inner{position:relative; z-index:1; display:flex; justify-content:center}

/* ---------- CARD MOCKUP (geometria fissa, scala con --dp) ---------- */
.card{
  position:relative;
  width:var(--u); height:calc(var(--dp)*340);
  background:var(--c-surface-card);
  border-radius:calc(var(--dp)*16);
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.6),
    0 0 calc(var(--dp)*9) calc(var(--dp)*3) rgba(255,255,255,.5),
    0 calc(var(--dp)*22) calc(var(--dp)*64) rgba(2,72,105,.16);
  font-size:calc(var(--dp)*16);
}
.card .eyebrow{position:absolute;left:calc(var(--dp)*19);top:calc(var(--dp)*21);white-space:nowrap;font-size:calc(var(--dp)*15.8)}
.card .cardtitle{position:absolute;left:calc(var(--dp)*18);top:calc(var(--dp)*47);white-space:nowrap;font-size:calc(var(--dp)*20)}
.card .meta{position:absolute;left:calc(var(--dp)*15);top:calc(var(--dp)*81);height:calc(var(--dp)*28)}
.avatars{position:absolute;left:0;top:0;height:calc(var(--dp)*28)}
.av{position:absolute;top:0;width:calc(var(--dp)*28);height:calc(var(--dp)*28);border-radius:50%;
    border:max(1px,calc(var(--dp)*2)) solid #fff;background-size:cover;background-position:center}
.av1{left:0}.av2{left:calc(var(--dp)*11)}.av3{left:calc(var(--dp)*22)}
.clockicon{position:absolute;left:calc(var(--dp)*66);top:calc(var(--dp)*5);width:calc(var(--dp)*14);height:calc(var(--dp)*14)}
.metatext{position:absolute;left:calc(var(--dp)*89);top:calc(var(--dp)*-2);height:calc(var(--dp)*28);
          display:flex;align-items:center;white-space:nowrap;font-size:calc(var(--dp)*14.3)}
.metatext .sep{padding:0 calc(var(--dp)*10)}

.tabs{position:absolute;left:0;right:0;top:calc(var(--dp)*129);height:calc(var(--dp)*30);
      display:flex;align-items:flex-end;padding-left:calc(var(--dp)*19);gap:calc(var(--dp)*4)}
.tab{position:relative;height:calc(var(--dp)*30);display:flex;align-items:center;
     padding:0 calc(var(--dp)*14);
     font-family:inherit;font-size:calc(var(--dp)*12.1);font-weight:var(--fw-light);
     letter-spacing:var(--tr-tab);line-height:var(--lh-flat);color:var(--c-muted);
     border:0;background:none;white-space:nowrap;cursor:pointer;
     border-radius:calc(var(--dp)*8) calc(var(--dp)*8) 0 0;
     -webkit-tap-highlight-color:transparent;
     transition:color .18s ease, background-color .18s ease}
.tab:hover{color:var(--c-ink-soft)}
.tab.is-active{font-weight:var(--fw-medium);color:var(--c-ink-soft);background:#fff}
.tab.is-active::after{content:"";position:absolute;bottom:0;left:calc(var(--dp)*12);right:calc(var(--dp)*13);
     height:max(1px,calc(var(--dp)*2));background:var(--c-accent)}

.panel{position:absolute;left:calc(var(--dp)*19);top:calc(var(--dp)*160);
       width:calc(var(--dp)*511);height:calc(var(--dp)*169);
       background:var(--c-surface-panel);border-radius:0 calc(var(--dp)*8) calc(var(--dp)*8) calc(var(--dp)*8)}
.panelset{position:absolute;inset:0;display:none}
.panelset.is-active{display:block}
.panel__heading{position:absolute;left:calc(var(--dp)*12);top:calc(var(--dp)*10);white-space:nowrap;font-size:calc(var(--dp)*17)}
.row{position:absolute;left:calc(var(--dp)*13);width:calc(var(--dp)*485);height:calc(var(--dp)*46);
     background:#fff;border:1px solid var(--c-border-row);border-radius:calc(var(--dp)*8);
     box-shadow:0 1px calc(var(--dp)*2) rgba(0,0,0,.03);
     display:block;text-decoration:none;color:inherit;
     transition:border-color .18s ease, box-shadow .18s ease, transform .18s var(--ease-settle)}
.row:hover{border-color:#d3d3d3;box-shadow:0 calc(var(--dp)*3) calc(var(--dp)*10) rgba(0,0,0,.08)}
.row:active{transform:translateY(1px)}
.rowgo{position:absolute;right:calc(var(--dp)*12);top:calc(var(--dp)*17);
       width:calc(var(--dp)*12);height:calc(var(--dp)*12);color:var(--c-muted)}
.row:hover .rowgo{color:var(--c-ink-soft)}
.row1{top:calc(var(--dp)*36)}.row2{top:calc(var(--dp)*87)}
.dot{position:absolute;left:calc(var(--dp)*7);top:calc(var(--dp)*7);width:calc(var(--dp)*15);height:calc(var(--dp)*15)}
.rowtitle{position:absolute;left:calc(var(--dp)*33);top:calc(var(--dp)*10);white-space:nowrap;font-size:calc(var(--dp)*12.9)}
.rowowner{position:absolute;left:calc(var(--dp)*33);top:calc(var(--dp)*27);white-space:nowrap;font-size:calc(var(--dp)*12.2)}

/* ============================================================
   2 — OFFERTA FORMATIVA
   ============================================================ */
.offer{display:grid;gap:12px;grid-template-columns:1fr}
.offer__item{
  background:var(--c-surface-card);
  border-radius:16px;
  padding:22px 20px 24px;
  display:flex; flex-direction:column; gap:10px;
}
.offer__item .t-title{font-weight:var(--fw-regular)}
.offer__item p{margin:0;color:var(--c-muted-text);font-size:15px}
.offer__tag{
  align-self:flex-start; margin-top:auto; padding-top:14px;
  font-size:var(--fs-caption); font-weight:var(--fw-medium);
  letter-spacing:var(--tr-caption); color:var(--c-ink-soft);
}
.offer__tag::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--c-accent);margin-right:7px;vertical-align:1px}

/* ============================================================
   3 — PERCHÉ EUROSTUD
   ============================================================ */
.why{display:grid;gap:26px 32px;grid-template-columns:1fr}
.why__item{border-top:1px solid var(--c-border-row);padding-top:16px}
.why__item h3{margin:0 0 8px;font-size:var(--fs-title);font-weight:var(--fw-regular);letter-spacing:var(--tr-title)}
.why__item p{margin:0;color:var(--c-muted-text);font-size:15px}

/* ============================================================
   4 — DICONO DI NOI (3 card grigie)
   ============================================================ */
.reviews{display:grid;gap:14px;grid-template-columns:1fr}
.review{
  background:var(--c-surface-card);
  border-radius:16px;
  padding:20px 18px;
  display:flex; flex-direction:column; gap:14px;
}
.review__stars{display:flex;gap:3px}
.review__stars svg{width:15px;height:15px}
.review__panel{
  background:var(--c-surface-panel);
  border:1px solid var(--c-border-row);
  border-radius:10px;
  padding:16px 15px;
  font-size:15px; line-height:1.5;
}
.review__panel p{margin:0}
.review__who{display:flex;align-items:center;gap:10px}
.review__av{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background-size:cover;flex:none}
.review__name{font-size:var(--fs-item);font-weight:var(--fw-semibold);letter-spacing:var(--tr-item);line-height:1.25}
.review__role{font-size:var(--fs-caption);font-weight:var(--fw-light);letter-spacing:var(--tr-caption);color:var(--c-muted-text);line-height:1.3}

/* ============================================================
   5/6 — FORM
   ============================================================ */
.formwrap{
  background:var(--c-surface-card);
  border-radius:20px;
  padding:clamp(22px,4vw,34px);
  max-width:640px;
}
.formwrap--wide{max-width:100%}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:var(--fs-caption);font-weight:var(--fw-medium);letter-spacing:var(--tr-caption);color:var(--c-ink-soft)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:15px;letter-spacing:var(--tr-body);color:var(--c-ink);
  background:#fff;border:1px solid var(--c-border-row);border-radius:10px;
  padding:12px 13px;min-height:46px;width:100%;
}
.field textarea{min-height:104px;resize:vertical;line-height:1.45}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--c-accent);outline-offset:0;border-color:transparent}
.grid2{display:grid;gap:0 14px;grid-template-columns:1fr}
.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px}
.consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--c-accent)}
.consent span{font-size:var(--fs-caption);line-height:1.45;color:var(--c-muted-text);letter-spacing:0}
.consent a{color:var(--c-ink-soft)}
.hp{position:absolute!important;left:-9999px}
.formnote{margin:14px 0 0;font-size:var(--fs-caption);color:var(--c-muted-text);line-height:1.5;letter-spacing:0}

.callback{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:1fr;align-items:start}
.callback__pitch .t-body{color:var(--c-muted-text);margin-top:14px;max-width:44ch}
.callback__direct{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--c-ink);color:#fff;padding:clamp(40px,6vw,64px) var(--page-margin) 34px}
.site-footer__inner{max-width:var(--shell);margin:0 auto;display:grid;gap:26px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer__links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px}
.footer__legal{font-size:var(--fs-caption);color:#8f8f8f;letter-spacing:0;line-height:1.6}
.footer__wordmark{font-size:24px;font-weight:var(--fw-black);letter-spacing:var(--tr-wordmark);color:#fff}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width:940px){
  :root{--fs-nav:15px}
  .site-header{padding:calc(18px + env(safe-area-inset-top, 0px)) var(--page-margin) 14px}
  .brand{margin-bottom:14px}
  .nav{flex-direction:row; border-radius:26px; padding:5px; gap:3px}
  .nav__row{flex:1 1 auto; gap:3px}
  .nav__link{min-height:42px; padding:0 16px}
  .offer{grid-template-columns:repeat(3,1fr); gap:14px}
  .why{grid-template-columns:repeat(3,1fr)}
  .reviews{grid-template-columns:repeat(3,1fr); gap:16px}
  .grid2{grid-template-columns:1fr 1fr}
  .callback{grid-template-columns:1fr 1fr}
  .band{min-height:clamp(300px,46vh,420px)}
}

/* ============================================================
   MOTION
   ============================================================ */
[data-enter="pending"] .hero-h1{clip-path:inset(0 0 100% 0)}
[data-enter="pending"] .hero-sub,
[data-enter="pending"] .hero__actions{opacity:0;translate:0 14px}
[data-enter="pending"] .band__inner{opacity:0;translate:0 22px}
[data-enter="pending"] .site-header{opacity:0;translate:0 -10px}

@keyframes enter-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0% 0)}}
@keyframes enter-drop{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@keyframes enter-rise14{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes enter-rise22{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

[data-enter="run"] .site-header{animation:enter-drop .62s var(--ease-settle) .05s both}
[data-enter="run"] .hero-h1{animation:enter-wipe .92s var(--ease-reveal) .26s both}
[data-enter="run"] .hero-sub{animation:enter-rise14 .62s var(--ease-settle) .58s both}
[data-enter="run"] .hero__actions{animation:enter-rise14 .58s var(--ease-settle) .72s both}
[data-enter="run"] .band__inner{animation:enter-rise22 .94s var(--ease-settle) .84s both}

.reveal{opacity:0;translate:0 18px;transition:opacity .7s var(--ease-settle),translate .7s var(--ease-settle)}
.reveal.is-in{opacity:1;translate:0 0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;translate:0 0}
}