/* Axiom Labs — stylesheet condiviso pagine secondarie (chi-siamo, servizi, faq) */
:root{
  --bg:#020508;--green:#0D9B76;--aqua:#00E5A0;
  --white:rgba(255,255,255,0.92);--dim:rgba(255,255,255,0.4);
  --border:rgba(255,255,255,0.06);
  --heading:'Space Grotesk',sans-serif;--body:'DM Sans',sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:#020508;color:var(--white);font-family:var(--body);overflow-x:hidden;line-height:1.6}
/* Cielo stellato: canvas #bg-stars iniettato via JS (z-index:-2).
   Sotto/sopra: base cosmica scura + bagliore smeraldo + vignettatura per profondità e leggibilità. */
#bg-stars{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;display:block}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 70% at 50% -8%, rgba(13,155,118,0.12), transparent 55%),
    radial-gradient(ellipse 130% 95% at 50% 50%, transparent 42%, rgba(2,5,8,0.6) 100%)}
body::after{content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:128px 128px}
a{color:inherit}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:24px 52px;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(2,5,8,0.85),transparent);backdrop-filter:blur(6px)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo img{height:26px;width:auto;border-radius:4px}
.nav-logo span{font-family:var(--heading);font-weight:300;font-size:15px;letter-spacing:4px;text-transform:uppercase}
.nav-links{display:flex;gap:30px;list-style:none;align-items:center}
.nav-links a{font-weight:300;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.35);text-decoration:none;transition:color .4s}
.nav-links a:hover,.nav-links a.current{color:rgba(255,255,255,0.9)}
.lang-switch{display:flex;gap:6px;font-weight:300;font-size:10px;letter-spacing:2px}
.lang-switch span{cursor:pointer;color:rgba(255,255,255,0.3);transition:color .4s;text-transform:uppercase}
.lang-switch span.active{color:rgba(255,255,255,0.7)}
.lang-switch .sep{color:rgba(255,255,255,0.12);cursor:default}
@media(max-width:768px){.nav{padding:20px 24px}.nav-links li:not(.lang-li){display:none}}

/* Layout */
.wrap{max-width:860px;margin:0 auto;padding:0 32px}
main{padding-top:160px;padding-bottom:120px}
.eyebrow{font-weight:300;font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--aqua);margin-bottom:22px}
h1{font-family:var(--heading);font-weight:300;font-size:clamp(38px,6vw,64px);line-height:1.08;letter-spacing:-1px;margin-bottom:28px}
h1 .hl{color:var(--aqua)}
.lead{font-weight:200;font-size:clamp(17px,2.2vw,21px);color:rgba(255,255,255,0.7);max-width:640px;line-height:1.7}

/* Answer-first card (GEO) */
.answer{margin:56px 0;padding:28px 30px;border:0.5px solid var(--border);border-left:2px solid var(--green);
  background:rgba(255,255,255,0.02);border-radius:2px}
.answer .k{font-weight:400;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--aqua);margin-bottom:12px}
.answer p{font-weight:200;font-size:16px;color:rgba(255,255,255,0.8)}
.answer strong{color:var(--white);font-weight:400}

section.block{margin-top:72px}
h2{font-family:var(--heading);font-weight:300;font-size:clamp(26px,3.4vw,38px);letter-spacing:-0.5px;margin-bottom:24px;line-height:1.2}
.block p{font-weight:200;font-size:16px;color:rgba(255,255,255,0.68);margin-bottom:18px;max-width:660px}
.block p strong{color:var(--white);font-weight:400}
.block ul{list-style:none;margin:8px 0 8px;max-width:660px}
.block ul li{font-weight:200;font-size:15.5px;color:rgba(255,255,255,0.68);padding-left:22px;position:relative;margin-bottom:12px}
.block ul li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--aqua)}
.block ul li strong{color:var(--white);font-weight:400}

/* Grid card (servizi hub, feature grid) */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.card{padding:26px;border:0.5px solid var(--border);border-radius:2px;background:rgba(255,255,255,0.015);transition:border-color .4s,transform .4s;text-decoration:none;display:block}
.card:hover{border-color:rgba(0,229,160,0.35);transform:translateY(-2px)}
.card .dot{width:6px;height:6px;border-radius:50%;background:var(--aqua);margin-bottom:14px}
.card h3{font-family:var(--heading);font-weight:400;font-size:18px;margin-bottom:8px;letter-spacing:0.3px}
.card p{font-weight:200;font-size:13.5px;color:var(--dim);margin:0}
.card .go{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--aqua);opacity:0;transform:translateX(-4px);transition:opacity .4s,transform .4s}
.card:hover .go{opacity:1;transform:none}

/* Founder */
.founder{display:flex;gap:30px;align-items:flex-start;margin-top:28px;flex-wrap:wrap}
.founder .badge{flex-shrink:0;width:76px;height:76px;border-radius:50%;border:0.5px solid var(--green);
  display:flex;align-items:center;justify-content:center;font-family:var(--heading);font-size:24px;color:var(--aqua);letter-spacing:1px}
.founder .who{flex:1;min-width:240px}
.founder .who .name{font-family:var(--heading);font-weight:400;font-size:20px;margin-bottom:4px}
.founder .who .role{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--aqua);margin-bottom:14px}

/* Case study — statistiche + meta + link sito */
.stats{display:flex;gap:40px;flex-wrap:wrap;margin:44px 0 8px}
.stat{display:flex;flex-direction:column}
.stat .v{font-family:var(--heading);font-weight:300;font-size:clamp(34px,5vw,52px);line-height:1;color:var(--aqua)}
.stat .l{font-weight:200;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-top:10px}
.cs-tech{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.cs-tech span{font-weight:300;font-size:11px;letter-spacing:1px;color:rgba(255,255,255,0.5);border:0.5px solid var(--border);border-radius:2px;padding:6px 12px;background:rgba(255,255,255,0.02)}
.cs-visit{display:inline-block;margin-top:8px;font-weight:300;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--aqua);text-decoration:none;border-bottom:0.5px solid rgba(0,229,160,0.4);padding-bottom:3px;transition:letter-spacing .4s}
.cs-visit:hover{letter-spacing:3.5px}

/* FAQ accordion */
.faq{margin-top:24px}
.faq details{border:0.5px solid var(--border);border-radius:2px;margin-bottom:12px;background:rgba(255,255,255,0.015);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--heading);font-weight:400;font-size:16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-weight:300;font-size:22px;color:var(--aqua);transition:transform .3s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--aqua)}
.faq .a{padding:0 24px 22px;font-weight:200;font-size:15px;color:rgba(255,255,255,0.66);line-height:1.7}
.faq .a strong{color:var(--white);font-weight:400}

/* CTA */
.cta{margin-top:80px;padding:44px 34px;text-align:center;border:0.5px solid var(--border);border-radius:3px;
  background:radial-gradient(ellipse 80% 120% at 50% 0%, rgba(13,155,118,0.12), transparent 70%)}
.cta h2{margin-bottom:14px}
.cta p{margin:0 auto 26px;color:rgba(255,255,255,0.6)}
.cta a{display:inline-block;text-decoration:none;border:0.5px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.85);
  font-weight:300;font-size:11px;letter-spacing:4px;text-transform:uppercase;padding:16px 40px;border-radius:2px;transition:all .5s cubic-bezier(0.16,1,0.3,1)}
.cta a:hover{border-color:var(--green);color:var(--aqua);letter-spacing:6px}

/* Breadcrumb */
.crumb{font-size:11px;letter-spacing:1px;color:var(--dim);margin-bottom:30px}
.crumb a{color:var(--dim);text-decoration:none}.crumb a:hover{color:var(--aqua)}

/* Footer */
.footer{padding:32px 52px;border-top:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-logo{display:flex;align-items:center;gap:10px}
.footer-logo img{height:20px;border-radius:3px}
.footer-logo span{font-family:var(--heading);font-weight:300;font-size:10px;letter-spacing:3px;color:rgba(255,255,255,0.25);text-transform:uppercase}
.footer-copy{font-weight:200;font-size:9px;color:rgba(255,255,255,0.2)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(0.16,1,0.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── Coerenza con la home ── */

/* Aloni di leggibilità sui testi (come la home, sopra lo sfondo cinematografico) */
h1,h2,.lead,.eyebrow,.answer p,.card h3,.founder .who .name,.faq summary{
  text-shadow:0 1px 3px rgba(0,0,0,0.5), 0 6px 30px rgba(2,5,8,0.7);
}
/* Card leggermente più opache per staccarle dal fondo */
.card,.answer,.faq details{background:rgba(8,14,20,0.42);backdrop-filter:blur(3px)}
.cta{background:radial-gradient(ellipse 80% 120% at 50% 0%, rgba(13,155,118,0.16), rgba(4,9,14,0.55) 72%);backdrop-filter:blur(3px)}

/* Entrata dell'hero — eco del reveal parola-per-parola della home */
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
main .eyebrow{animation:heroUp .8s .05s both cubic-bezier(0.16,1,0.3,1)}
main>h1{animation:heroUp .85s .16s both cubic-bezier(0.16,1,0.3,1)}
main>.lead{animation:heroUp .85s .28s both cubic-bezier(0.16,1,0.3,1)}
@media(prefers-reduced-motion:reduce){main .eyebrow,main>h1,main>.lead{animation:none}}