/* ============================================================
   Foundations. A light, soft surface system in the grammar of
   modern Apple software: wide radii, translucent layers, gentle
   depth, one accent. Montserrat carries every language except
   CJK, which falls back to the system stack.
   Contrast is measured, not guessed: the quietest text sits at
   4.6:1 on its own surface, above the 4.5:1 that WCAG AA asks.
   ============================================================ */
:root{
  /* surfaces */
  --bg:#FFFFFF; --bg2:#F5F5F7; --bg3:#FFFFFF; --bg4:#EFEFF3;
  --glass:rgba(255,255,255,.72); --glass-line:rgba(0,0,0,.07);
  /* text: 16.8:1, 6.2:1 and 4.7:1 on --bg2 */
  --ink:#1D1D1F; --ink2:#5B5B60; --ink3:#6E6E73;
  --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.14);
  /* one accent, 5.6:1 both as text on white and as a button ground */
  --accent:#1D5FE0; --accent-hi:#0F4CC4; --accent-soft:rgba(29,95,224,.08);
  --on-accent:#FFFFFF;

  /* iOS keeps corners generous and buttons capsular */
  --rad-xl:28px; --rad:20px; --rad-s:14px; --rad-xs:10px; --pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.045);
  --sh-2:0 2px 6px rgba(0,0,0,.05),0 18px 44px rgba(0,0,0,.08);
  --sh-3:0 3px 10px rgba(0,0,0,.06),0 28px 64px rgba(0,0,0,.11);

  --u:8px; --wrap:1180px; --gut:22px; --tap:44px; --nav-h:56px;
  --ease:cubic-bezier(.32,.72,0,1); --fast:200ms; --mid:300ms;

  --f-sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',
    'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,
    'PingFang SC','Noto Sans Mono CJK SC',monospace;
}
@media (min-width:768px){ :root{ --gut:40px; --nav-h:60px } }

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-sans); font-size:16px; line-height:1.65; font-weight:400;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
/* img{display:block} wins over the hidden attribute, so pin it down */
[hidden]{display:none!important}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0;overflow-wrap:break-word}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* long German compounds otherwise blow out a minmax column */
:lang(de) p,:lang(de) li,:lang(de) dd,:lang(de) h1,:lang(de) h2,:lang(de) h3{hyphens:auto}
:lang(zh) p,:lang(zh) li{line-height:1.85;letter-spacing:0}
:lang(zh) .h1,:lang(zh) .h2,:lang(zh) .h3{letter-spacing:0;line-height:1.35}

/* ---------- type ---------- */
.h1{font-size:clamp(2.125rem,5vw,3.625rem);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.h2{font-size:clamp(1.625rem,3.2vw,2.375rem);line-height:1.16;letter-spacing:-.025em;font-weight:700}
.h3{font-size:clamp(1.0625rem,1.7vw,1.3125rem);line-height:1.34;letter-spacing:-.015em;font-weight:600}
.lead{font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.7;color:var(--ink2);max-width:60ch;
  font-weight:400}
.eyebrow{
  display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
.accent{color:var(--accent)}
.nowrap{text-wrap:balance}
@media (min-width:900px){
  .nowrap{white-space:nowrap;font-size:clamp(1.5rem,2.5vw,2.125rem)}
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:1460px}
.section{padding:clamp(52px,5.6vw,88px) 0;position:relative}
.section--tight{padding:clamp(44px,4.6vw,68px) 0}
.section--top{padding-top:clamp(32px,3.4vw,48px)}
.section--alt{background:var(--bg2)}
/* Due sezioni sullo stesso fondo sommavano due spazi: ne condividono uno.
   Quando il fondo cambia entrambe tengono il proprio, perche' li' lo stacco
   serve a staccare davvero la fascia. */
.section:not(.section--alt) + .section:not(.section--alt),
.section--alt + .section--alt{padding-top:0}
.section__cta{margin-top:clamp(36px,5vw,56px);display:flex;justify-content:center}
.shead{max-width:62ch;margin-bottom:clamp(28px,3.4vw,44px);display:grid;gap:14px;justify-items:start}
.shead--center{margin-inline:auto;text-align:center;justify-items:center}
.shead--center .lead{margin-inline:auto}
.phead{padding:calc(var(--nav-h) + clamp(48px,5.6vw,80px)) 0 clamp(24px,3vw,36px);position:relative}

/* ---------- buttons: capsules ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:13px 26px;border-radius:var(--pill);
  font-size:.9375rem;font-weight:600;letter-spacing:-.004em;
  border:1px solid transparent;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease),transform var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease);
}
.btn--lg{padding:16px 32px;font-size:1rem}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-1)}
.btn--primary:hover{background:var(--accent-hi);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn--primary:active{transform:translateY(0) scale(.985)}
.btn--ghost{border-color:var(--line2);color:var(--ink);background:var(--bg)}
.btn--ghost:hover{background:var(--bg2);border-color:var(--line2);transform:translateY(-1px)}
.btn--ghost:active{transform:translateY(0) scale(.985)}
.btn svg{flex:none}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;padding:6px 11px;border-radius:8px;
  background:var(--bg4);font-size:.8125rem;font-weight:500;color:var(--ink2);
  white-space:nowrap;
}
.chip--more{color:var(--accent);background:var(--accent-soft);font-weight:600}
.chip--more::before{content:"+";margin-right:2px}

/* ---------- skip link ---------- */
.skip{
  position:fixed;top:12px;left:12px;z-index:200;display:inline-flex;align-items:center;
  min-height:var(--tap);padding:10px 22px;border-radius:var(--pill);
  background:var(--ink);color:#fff;font-size:.9375rem;font-weight:600;
  transform:translateY(-200%);transition:transform var(--fast) var(--ease);
}
.skip:focus{transform:none}

/* ---------- navigation ----------
   A fixed element must stay outside any ancestor that sets perspective,
   or it anchors to that ancestor instead of the viewport. */
.nav{
  position:fixed;top:12px;left:50%;z-index:100;
  width:max-content;max-width:calc(100% - 24px);height:var(--nav-h);
  display:flex;align-items:center;border-radius:var(--pill);
  transform:translateX(-50%);
  transition:border-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease),
             background var(--mid) var(--ease),transform 360ms var(--ease);
  background:var(--glass);border:1px solid transparent;
  backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px);
  transition:border-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease),
             background var(--mid) var(--ease);
}
@media (min-width:768px){ .nav{top:16px;max-width:calc(100% - 40px)} }
.nav.is-stuck{border-color:var(--glass-line);box-shadow:var(--sh-1);
  background:rgba(255,255,255,.82)}
.nav.is-away{transform:translateX(-50%) translateY(calc(-100% - 20px))}
@media (prefers-reduced-motion:reduce){ .nav{transition:none} .nav.is-away{transform:translateX(-50%)} }
.nav__in{display:flex;align-items:center;gap:20px;width:100%;padding-inline:clamp(16px,2vw,24px)}
.nav__logo{display:flex;align-items:center;min-height:var(--tap);margin-inline-end:clamp(8px,1.4vw,18px)}
.foot__mark{width:102px;height:102px;color:var(--ink);margin-top:-8px}
.nav__mark{
  width:38px;height:38px;flex:none;background:currentColor;
  -webkit-mask:url('/assets/img/mark.png') center/contain no-repeat;
  mask:url('/assets/img/mark.png') center/contain no-repeat;
}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__link{
  position:relative;display:inline-flex;align-items:center;min-height:40px;
  padding:7px 14px;border-radius:var(--pill);font-size:.9375rem;font-weight:500;
  color:var(--ink2);
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.nav__link:hover{color:var(--ink);background:rgba(0,0,0,.045)}
.nav__link.is-on{color:var(--ink);background:rgba(0,0,0,.06);font-weight:600}
.nav__act{display:flex;align-items:center;gap:8px}
.nav__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  padding:9px 19px;border-radius:var(--pill);background:var(--accent);color:#fff;
  font-size:.9375rem;font-weight:600;
  transition:background var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.nav__cta:hover{background:var(--accent-hi);transform:translateY(-1px)}

.langsel{position:relative}
.langsel__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:9px 14px;border-radius:var(--pill);
  background:rgba(0,0,0,.05);font-size:.875rem;font-weight:600;color:var(--ink2);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.langsel__btn:hover,.langsel__btn[aria-expanded="true"]{background:rgba(0,0,0,.09);color:var(--ink)}
.langmenu{
  position:absolute;top:calc(100% + 12px);inset-inline-end:0;z-index:120;min-width:204px;
  padding:8px;border-radius:var(--rad);border:1px solid var(--glass-line);
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px);
  box-shadow:var(--sh-3);display:grid;gap:2px;animation:pop var(--mid) var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.97)}}
.langmenu__item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--tap);padding:10px 14px;border-radius:var(--rad-xs);
  font-size:.9375rem;font-weight:500;color:var(--ink2);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.langmenu__item:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.langmenu__item.is-on{color:var(--accent);font-weight:600}
.langmenu__code{font-size:.6875rem;font-weight:600;color:var(--ink3);letter-spacing:.08em}

.burger{
  display:none;width:40px;height:40px;place-items:center;border-radius:var(--pill);
  background:rgba(0,0,0,.05);
}
.burger span,.burger span::before,.burger span::after{
  content:"";display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform var(--mid) var(--ease),opacity var(--fast) var(--ease);
}
.burger span::before{transform:translateY(-5.5px)}
.burger span::after{transform:translateY(3.5px)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-2px) rotate(-45deg)}

@media (max-width:920px){
  .burger{display:grid}
  .nav__cta{display:none}
  .nav__links{
    position:fixed;top:calc(var(--nav-h) + 20px);left:50%;transform:translateX(-50%) translateY(-10px) scale(.98);width:calc(100% - 24px);max-width:520px;flex-direction:column;
    align-items:stretch;gap:2px;padding:10px;border-radius:var(--rad);
    background:rgba(255,255,255,.92);border:1px solid var(--glass-line);box-shadow:var(--sh-3);
    backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px);
    opacity:0;pointer-events:none;
    transition:opacity var(--mid) var(--ease),transform var(--mid) var(--ease);
  }
  .nav__links.is-open{opacity:1;transform:translateX(-50%);pointer-events:auto}
  .nav__link{min-height:var(--tap);padding:13px 16px;border-radius:var(--rad-xs);font-size:1rem}
}

/* ---------- footer ---------- */
.foot{background:var(--bg2);padding:clamp(56px,7vw,80px) 0 32px}
.foot__top{display:grid;gap:44px}
@media (min-width:860px){ .foot__top{grid-template-columns:1.1fr 1.5fr;gap:64px} }
.foot__brand{display:grid;gap:14px;justify-items:start;align-content:start}
.foot__tag{color:var(--ink2);font-size:.9375rem;max-width:34ch}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:32px}
.foot__col{display:grid;gap:2px;align-content:start}
.foot__col h2{
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:10px;
}
.foot__col a{
  display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);
  color:var(--ink2);font-size:.9375rem;width:fit-content;
  transition:color var(--fast) var(--ease);
}
.foot__col a:hover{color:var(--accent)}
.ext{display:inline-flex;opacity:.4;transition:opacity var(--fast) var(--ease)}
.foot__col a:hover .ext{opacity:.9}
.foot__bar{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-size:.875rem;color:var(--ink3);
}
.foot__top-link{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  transition:color var(--fast) var(--ease);
}
.foot__top-link:hover{color:var(--accent)}

/* ---------- consent ---------- */
.cc{position:fixed;inset:auto 0 0;z-index:140;padding:var(--gut);display:flex;justify-content:center}
@media (min-width:760px){ .cc{justify-content:flex-start} .cc__box{max-width:430px} }
.cc__box{
  width:100%;max-width:560px;padding:26px;border-radius:var(--rad-xl);
  border:1px solid var(--glass-line);background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px);
  box-shadow:var(--sh-3);display:grid;gap:16px;animation:ccup 360ms var(--ease);
}
@keyframes ccup{from{opacity:0;transform:translateY(20px) scale(.98)}}
.cc__title{font-size:1.0625rem;font-weight:700;letter-spacing:-.016em}
.cc__body{font-size:.9375rem;color:var(--ink2);line-height:1.6}
.cc__panel{display:grid;gap:12px;padding:16px;border-radius:var(--rad-s);background:var(--bg2)}
.cc__row{display:flex;gap:12px;align-items:flex-start;font-size:.875rem;color:var(--ink2);cursor:pointer}
.cc__row input{margin-top:3px;accent-color:var(--accent);width:17px;height:17px;flex:none}
.cc__row b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.cc__acts{display:flex;flex-wrap:wrap;gap:8px}
.cc__acts .btn{flex:1 1 auto;min-height:var(--tap);padding:12px 18px;font-size:.875rem}
.cc__more{
  display:inline-flex;align-items:center;min-height:var(--tap);font-size:.8125rem;
  color:var(--ink3);text-decoration:underline;text-underline-offset:3px;
}
.cc__more:hover{color:var(--accent)}

/* ---------- page transition ---------- */
.veil{
  position:fixed;inset:0;z-index:160;background:var(--bg);pointer-events:none;
  opacity:0;transition:opacity var(--mid) var(--ease);
}
.veil.is-on{opacity:1}


/* ============================================================
   Mobile pass. Below 640px the page tightens: less air between
   sections, a shorter type scale, and controls that stay at the
   44px minimum they need to be tappable.
   ============================================================ */
@media (max-width:640px){
  :root{ --gut:18px; --rad-xl:22px; --rad:16px; --rad-s:12px }
  body{font-size:15.5px}
  .section{padding:56px 0}
  .section--tight{padding:44px 0}
  .section--top{padding-top:28px}
  .shead{margin-bottom:28px;gap:12px}
  .phead{padding:calc(var(--nav-h) + 48px) 0 28px}
  .h1{font-size:clamp(1.875rem,8vw,2.375rem);line-height:1.12}
  .h2{font-size:clamp(1.4375rem,6.4vw,1.875rem);line-height:1.18}
  .lead{font-size:1rem;line-height:1.62}
  .btn{width:100%;padding:14px 22px}
  .btn--lg{width:auto}
  .foot{padding:44px 0 26px}
  .foot__top{gap:32px}
  .foot__cols{grid-template-columns:1fr 1fr;gap:20px}
  .foot__bar{margin-top:32px;font-size:.8125rem}
  .cc{padding:12px}
  .cc__box{padding:20px;gap:14px}
  .cc__acts .btn{width:auto}
  .foot__mark{width:72px;height:72px;margin-top:-4px}
  .nav__mark{width:32px;height:32px}
}
/* the safe area on a notched phone, so nothing hides under the home bar */
@supports (padding:max(0px)){
  @media (max-width:640px){
    .cc{padding-bottom:max(12px,env(safe-area-inset-bottom))}
    .wrap{padding-inline:max(var(--gut),env(safe-area-inset-left))}
  }
}


/* ============================================================
   Hit area. The bar is deliberately short, so its controls are
   40px tall. An invisible extension brings the tappable area to
   44px without changing a single pixel of what is drawn.
   ============================================================ */
.nav__link,.langsel__btn,.burger{position:relative}
.nav__link::before,.langsel__btn::after,.burger::after{
  content:"";position:absolute;inset:-3px -2px;border-radius:inherit;
}