:root{
  --night:#050F1C;
  --deep:#08182A;
  --navy:#0E2B4A;
  --line:rgba(120,165,215,.16);
  --line-2:rgba(120,165,215,.28);
  --ink:#EAF1F9;
  --ink-2:#9FB5CC;
  --ink-3:#6C8299;
  --blue:#5B96FF;
  --blue-deep:#1B4FC4;
  --teal:#45D6C2;
  --amber:#F0B45E;
  --r:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--night);color:var(--ink);
  font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(91,150,255,.14), transparent 62%),
    radial-gradient(700px 460px at 5% 12%, rgba(69,214,194,.08), transparent 60%);
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:1}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
.serif{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.005em}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
.lab{
  font-family:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.lab.blue{color:var(--blue)}
.lab.teal{color:var(--teal)}

/* progress */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--teal),var(--blue));transition:width .1s linear}

/* nav */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(5,15,28,.72);border-bottom:1px solid transparent;transition:border-color .3s}
nav.on{border-bottom-color:var(--line)}
.navin{display:flex;align-items:center;gap:26px;height:66px}
.logo{font-family:"Instrument Serif",Georgia,serif;font-size:25px;letter-spacing:-.01em}
.logo b{font-weight:400}
.logo i{color:var(--blue);font-style:normal}
.navlinks{display:flex;gap:26px;margin-left:auto;align-items:center}
.navlinks a{font-size:14.5px;color:var(--ink-2);transition:color .2s}
.navlinks a:hover{color:var(--ink)}
.langs{display:flex;gap:2px;align-items:center;margin-left:6px;
  font-family:"Martian Mono",monospace;font-size:9.5px;letter-spacing:.1em}
.langs span,.langs a{padding:4px 6px;color:var(--ink-3);border-radius:3px;transition:color .2s,background .2s}
.langs a:hover{color:var(--ink);background:rgba(120,165,215,.14)}
.langs span.act,.langs .act{color:var(--night);background:var(--ink)}
.langs span.soon{opacity:.42;cursor:default}
.cta{
  display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  padding:11px 20px;border-radius:var(--r);background:var(--blue);color:#04101E;
  border:1px solid var(--blue);transition:transform .2s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 0 0 rgba(91,150,255,0)
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(91,150,255,.7)}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.cta.ghost:hover{border-color:var(--blue);color:var(--blue)}
.cta:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
#burger{display:none;margin-left:auto;background:none;border:0;color:var(--ink);font-size:22px;cursor:pointer;padding:6px}

/* hero */
header.hero{position:relative;padding:96px 0 0;overflow:hidden}
#wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:300px;z-index:0}
.hero .wrap{padding-bottom:150px}
h1{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(44px,8vw,100px);line-height:.99;
  letter-spacing:-.022em;max-width:16ch;margin:22px 0 0}
h1 .em{color:var(--blue);font-style:italic}
.hsub{font-size:clamp(17px,2.1vw,20.5px);color:var(--ink-2);max-width:52ch;margin-top:26px}
.hbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hnote{margin-top:20px;font-size:13.5px;color:var(--ink-3)}
.hnote b{color:var(--teal);font-weight:500}

.cue{position:absolute;right:26px;bottom:34px;display:flex;align-items:center;gap:12px;z-index:2}
.cue span{font-family:"Martian Mono",monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.cue i{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--line-2),transparent);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-46px;width:1px;height:46px;background:var(--teal);animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(0)}70%,100%{transform:translateY(92px)}}
@media (max-width:960px){.cue{display:none}}

/* strip numeri */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(14,43,74,.35)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:26px 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(30px,4.4vw,46px);
  line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:13px;color:var(--ink-3)}

/* sezioni */
section{padding:88px 0;position:relative}
.shead{max-width:62ch;margin-bottom:38px}
.shead h2{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(29px,4.2vw,44px);
  line-height:1.08;letter-spacing:-.015em;margin:14px 0 0}
.shead p{color:var(--ink-2);font-size:17px;margin-top:16px;max-width:58ch}

/* card + punti luce */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;background:linear-gradient(180deg,rgba(14,43,74,.5),rgba(8,24,42,.5));
  border:1px solid var(--line);border-radius:var(--r);padding:24px;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease)
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(91,150,255,.16),transparent 65%)
}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card h3{font-size:17.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px;line-height:1.3}
.card p{font-size:14.8px;color:var(--ink-2);margin:0}
.card .say{font-family:"Instrument Serif",Georgia,serif;font-size:21px;line-height:1.25;
  color:var(--ink);display:block;margin-bottom:11px}
.card .say::before{content:"“"}.card .say::after{content:"”"}
ul.cl{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
ul.cl li{position:relative;padding-left:19px;font-size:14.8px;color:var(--ink-2)}
ul.cl li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;background:var(--blue)}
ul.cl li b{color:var(--ink);font-weight:600}

/* due piani */
.piano{padding:30px 28px}
.piano .lab{display:block;margin-bottom:14px}
.piano h3{font-family:"Instrument Serif",Georgia,serif;font-size:30px;font-weight:400;letter-spacing:-.015em;margin-bottom:10px}
.piano > p{font-size:15.6px;color:var(--ink-2)}
.svc{display:grid;gap:1px;margin-top:20px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.svc a{display:flex;align-items:center;gap:12px;padding:13px 15px;background:rgba(5,15,28,.65);
  font-size:14.8px;color:var(--ink-2);transition:background .25s,color .25s,padding-left .25s}
.svc a:hover{background:rgba(14,43,74,.9);color:var(--ink);padding-left:20px}
.svc a .ar{margin-left:auto;color:var(--ink-3);transition:transform .25s,color .25s}
.svc a:hover .ar{transform:translateX(4px);color:var(--blue)}
.rule{font-family:"Instrument Serif",Georgia,serif;font-size:19px;line-height:1.35;color:var(--ink);
  border-left:2px solid var(--teal);padding-left:16px;margin-top:22px}

/* metodo */
.metodowrap{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:56px;align-items:start}
.metodowrap .shead{position:sticky;top:92px;margin-bottom:0}
.metodowrap .shead h2{font-size:clamp(27px,3vw,36px);line-height:1.1}
.metodowrap .shead p{font-size:15.6px}
.metodo{display:grid;grid-template-columns:14px 1fr;gap:0 26px}
.rail{position:relative}
.rail::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--line)}
.rail i{position:absolute;left:6px;top:6px;width:1px;height:0;
  background:linear-gradient(180deg,var(--teal),var(--blue));transition:height .5s var(--ease)}
.steps{display:grid;gap:0}
.step{position:relative;padding:26px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step::before{content:"";position:absolute;left:-33px;top:36px;width:13px;height:13px;border-radius:50%;
  background:var(--night);border:1px solid var(--line-2);transition:.4s var(--ease)}
.step.lit::before{border-color:var(--teal);box-shadow:0 0 0 4px rgba(69,214,194,.14);background:var(--teal)}
.step h3{font-family:"Instrument Serif",Georgia,serif;font-size:27px;margin:6px 0 8px;letter-spacing:-.01em}
.step p{color:var(--ink-2);font-size:15.4px;max-width:56ch;margin:0}
.stepmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pill{font-family:"Martian Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line);border-radius:20px;padding:5px 11px}
.pill.hi{color:var(--teal);border-color:rgba(69,214,194,.42)}

/* settori */
.sett{position:relative;display:block;padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end}
.sett .n{position:absolute;top:16px;right:18px;font-family:"Instrument Serif",Georgia,serif;
  font-size:44px;color:var(--line-2);line-height:1;transition:color .3s}
.sett:hover .n{color:var(--blue)}
.sett h3{font-size:18px;font-weight:600;margin-bottom:4px}
.sett p{font-size:13.8px;color:var(--ink-3)}

/* citazione */
.quote{text-align:center;padding:72px 0}
.quote blockquote{margin:0 auto;max-width:20ch;font-family:"Instrument Serif",Georgia,serif;
  font-size:clamp(30px,5.6vw,58px);line-height:1.06;letter-spacing:-.02em}
.quote blockquote em{color:var(--blue);font-style:italic}
.quote cite{display:block;margin-top:26px;font-style:normal;font-family:"Martian Mono",monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* livelli */
.liv{padding:28px 24px;display:flex;flex-direction:column}
.liv .tier{font-family:"Martian Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.liv h3{font-family:"Instrument Serif",Georgia,serif;font-size:32px;margin-bottom:6px}
.liv .who{font-size:14.4px;color:var(--ink-3);font-style:italic;margin-bottom:16px}
.liv ul.cl{margin-top:0;flex:1}
.liv .end{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13.6px;color:var(--ink-3)}
.liv.mid{border-color:rgba(91,150,255,.42);background:linear-gradient(180deg,rgba(27,79,196,.24),rgba(8,24,42,.6))}

/* diagnosi */
.diag{border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(14,43,74,.55),rgba(5,15,28,.75));padding:30px 28px}
.qs{display:grid;gap:0;margin:22px 0 0}
.q{display:flex;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.q span{font-size:15.6px;color:var(--ink-2);max-width:56ch}
.q button{
  margin-left:auto;flex:none;font-family:"Martian Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 15px;border:1px solid var(--line-2);border-radius:20px;
  background:transparent;color:var(--ink-3);cursor:pointer;transition:.2s var(--ease)
}
.q button[aria-pressed="true"]{color:var(--night);background:var(--teal);border-color:var(--teal)}
.gauge{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin:26px 0 18px}
.gauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--blue));
  transition:width .5s var(--ease)}
.res h3{font-family:"Instrument Serif",Georgia,serif;font-size:27px;margin-bottom:6px}
.res p{color:var(--ink-2);font-size:15.4px;max-width:60ch}
form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
input,select{
  font-family:inherit;font-size:15px;padding:13px 14px;border-radius:var(--r);
  background:rgba(5,15,28,.8);border:1px solid var(--line);color:var(--ink);width:100%
}
input::placeholder{color:var(--ink-3)}
input:focus,select:focus{outline:0;border-color:var(--blue)}
form .sub{grid-column:span 3;display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px}
.consent{grid-column:span 3;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-3);line-height:1.5}
.consent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--blue)}
.wa-alt{font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:.2s}
.wa-alt:hover{color:var(--teal);border-color:var(--teal)}
.fnote{font-size:12.6px;color:var(--ink-3);margin-top:12px}

/* contatti */
.finale{border-top:1px solid var(--line);padding:92px 0 72px;text-align:center}
.finale h2{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(34px,6vw,64px);line-height:1.04;letter-spacing:-.02em}
.finale p{color:var(--ink-2);max-width:46ch;margin:20px auto 0}
.contatti{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:36px;
  font-family:"Martian Mono",monospace;font-size:11px;letter-spacing:.08em}
.contatti a{color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:.2s}
.contatti a:hover{color:var(--blue);border-color:var(--blue)}
footer{border-top:1px solid var(--line);padding:28px 0 96px;font-size:13px;color:var(--ink-3)}
footer .fin{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
footer .fin span{margin-left:auto}

/* barra mobile */
.mobbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:rgba(5,15,28,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px}
.mobbar a{flex:1;text-align:center;padding:12px;border-radius:var(--r);font-size:14.5px;font-weight:600}
.mobbar .wa{background:var(--teal);color:#04211D}
.mobbar .tel{border:1px solid var(--line-2);color:var(--ink)}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (max-width:960px){
  .metodowrap{grid-template-columns:1fr;gap:0}
  .metodowrap .shead{position:static;margin-bottom:34px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .navlinks{display:none}
  #burger{display:block}
  .navlinks.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--deep);border-bottom:1px solid var(--line);padding:8px 26px 18px}
  .navlinks.open a{padding:11px 0;width:100%;border-bottom:1px solid var(--line)}
  .navlinks.open .cta{margin-top:12px;border-bottom:0}
}
@media (max-width:720px){
  section{padding:62px 0}
  .g2{grid-template-columns:1fr}
  .strip .wrap{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:0;padding:20px 0;border-bottom:1px solid var(--line)}
  .stat:nth-child(odd){border-right:1px solid var(--line)}
  form{grid-template-columns:1fr}
  form .sub,.consent{grid-column:span 1}
  .mobbar{display:flex}
  footer{padding-bottom:104px}
  .metodo{grid-template-columns:1fr;gap:0}
  .rail{display:none}
  .step::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ---------- pagine interne ---------- */
.hero.sm{padding-top:64px}
.hero.sm .wrap{padding-bottom:110px}
.hero.sm #wave{height:220px}
.hero.sm h1{font-size:clamp(36px,5.6vw,68px);max-width:18ch}
.crumb{font-family:"Martian Mono",monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--blue)}

/* calcolatore */
.calc{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(14,43,74,.55),rgba(5,15,28,.75));padding:28px}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.calc-row label{display:block;font-size:14px;color:var(--ink-2);margin-bottom:7px}
.calc-out{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.calc-out .big{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(34px,6vw,58px);line-height:1;
  letter-spacing:-.02em;color:var(--teal);font-variant-numeric:tabular-nums}
.calc-out p{font-size:14.6px;color:var(--ink-2);margin:12px 0 0;max-width:56ch}
@media (max-width:720px){.calc-row{grid-template-columns:1fr}}

/* ---------- adattamenti per lingua ---------- */
/* il tedesco ha parole molto più lunghe: titoli più contenuti e sillabazione */
html[lang="de"] h1{font-size:clamp(34px,5.8vw,72px);max-width:19ch;hyphens:auto;-webkit-hyphens:auto}
html[lang="de"] .hero.sm h1{font-size:clamp(31px,4.6vw,56px);max-width:20ch}
html[lang="de"] .shead h2,html[lang="de"] .card h3,html[lang="de"] .piano h3{hyphens:auto;-webkit-hyphens:auto}
html[lang="de"] .stat span,html[lang="de"] .pill{hyphens:auto}
html[lang="fr"] h1{max-width:17ch}

/* l'onda non deve mai passare dentro ai bottoni o sotto al testo */
.hbtns,.hnote{position:relative;z-index:2}
.cta.ghost{background:rgba(6,20,35,.72);backdrop-filter:blur(3px)}
.hero.sm #wave{height:150px}
.hero.sm .wrap{padding-bottom:160px}