/* ============================================================
   main.css — electrONIK Lab
   Allineata alla bozza. Cubo competenze ricostruito da zero.
   Palette dark + verde #2CE8A5 · Orbitron / Rajdhani / Share Tech Mono
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#060f0a; --bg2:#081210; --bg3:#0a1a12;
  --green:#2CE8A5; --green2:#1FBF8A; --green-soft:#7ff5cf;
  --green-glow:rgba(44,232,165,.15);
  --blue:#5B6B9E; --blue2:#4A5A8A;
  --text:#eaf4ef; --text2:#9bb0a4; --text3:#5a7066;
  --border:rgba(44,232,165,.16); --border2:rgba(44,232,165,.08);
  --card:rgba(8,18,13,.72); --card2:#0a1a12;
  --radius:8px; --radius-lg:16px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 24px 70px rgba(0,0,0,.55);
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Rajdhani',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none;transition:color .3s}
a:hover{color:var(--green-soft)}
::selection{background:rgba(44,232,165,.25);color:#fff}

/* ---- Background layers ---- */
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(44,232,165,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(44,232,165,.022) 1px,transparent 1px);background-size:62px 62px}
.grid-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,rgba(44,232,165,.07) 0%,transparent 55%)}
.scanline{position:fixed;inset:0;z-index:9999;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.02) 2px,rgba(0,0,0,.02) 4px)}
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:10000;background:linear-gradient(90deg,var(--green),var(--green-soft));box-shadow:0 0 12px var(--green-glow);transition:width .1s linear}

/* ---- Intro Hero overlay (solo homepage, una volta per sessione) ---- */
html.intro-active, html.intro-active body{overflow:hidden}
html.hero-seen #introOverlay{display:none}
#introOverlay{position:fixed;inset:0;z-index:100000;background:#000;opacity:1;transition:opacity .6s ease}
#introOverlay.hide{opacity:0;pointer-events:none}
#introOverlay iframe{width:100%;height:100%;border:0;display:block}
#introSkip{position:fixed;bottom:26px;right:26px;z-index:100001;font-family:'Share Tech Mono',monospace;font-size:.74rem;letter-spacing:2px;text-transform:uppercase;color:var(--green);background:rgba(6,15,10,.55);border:1px solid var(--border);border-radius:30px;padding:10px 18px;cursor:pointer;backdrop-filter:blur(8px);transition:background .3s,border-color .3s}
#introSkip:hover{background:rgba(44,232,165,.12);border-color:var(--green)}

/* ============================================================
   NAVBAR
   ============================================================ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,15,10,.6);backdrop-filter:blur(20px);border-bottom:1px solid transparent;padding:0 clamp(20px,4vw,48px);height:74px;display:flex;align-items:center;justify-content:space-between;transition:height .4s var(--ease),background .4s,border-color .4s}
#navbar.scrolled{height:58px;background:rgba(6,15,10,.92);border-bottom-color:var(--border)}
.nav-logo svg{height:40px;width:auto;display:block;transition:height .4s var(--ease)}
#navbar.scrolled .nav-logo svg{height:32px}
.nav-links{display:flex;gap:34px;align-items:center;flex-wrap:nowrap}
.nav-links a{font-weight:600;font-size:.92rem;color:var(--text2);letter-spacing:1.6px;text-transform:uppercase;position:relative;padding:6px 0;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--green);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--green)}
.nav-links a:hover::after{width:100%}
.nav-cta{font-weight:700!important;color:var(--green)!important;border:1px solid var(--border);padding:8px 18px!important;border-radius:var(--radius);transition:all .3s}
.nav-cta::after{display:none}
.nav-cta:hover{background:rgba(44,232,165,.1);border-color:var(--green)}
.lang-switch{font-family:'Share Tech Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:2px;color:var(--text3);border:1px solid var(--border);padding:5px 10px;border-radius:4px;transition:all .3s;text-transform:uppercase;margin-left:6px}
.lang-switch:hover{color:var(--green);border-color:var(--green);background:rgba(44,232,165,.06)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:200;padding:6px}
.hamburger span{width:28px;height:2px;background:var(--green);transition:all .35s var(--ease);transform-origin:center}
#navbar.menu-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#navbar.menu-open .hamburger span:nth-child(2){opacity:0}
#navbar.menu-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- WhatsApp float ---- */
.whatsapp-float{position:fixed;bottom:28px;right:28px;z-index:997;width:56px;height:56px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,.45);transition:transform .3s var(--ease)}
.whatsapp-float::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:waPulse 2.6s infinite}
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float svg{width:30px;height:30px;fill:#fff}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:130px 24px 90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.floating-cube{position:absolute;border:1px solid var(--border);animation:floatCube 22s infinite ease-in-out;opacity:.35;will-change:transform}
.floating-cube:nth-child(1){width:80px;height:80px;top:15%;left:9%;transform:perspective(500px) rotateX(45deg) rotateY(45deg)}
.floating-cube:nth-child(2){width:52px;height:52px;top:62%;right:14%;animation-delay:-5s;border-color:var(--blue);opacity:.22}
.floating-cube:nth-child(3){width:120px;height:120px;bottom:16%;left:18%;animation-delay:-10s}
.floating-cube:nth-child(4){width:42px;height:42px;top:28%;right:24%;animation-delay:-15s}
.circuit-line{position:absolute;background:var(--green);opacity:.06}
.circuit-line.h{height:1px;animation:circuitH 9s infinite linear}
.circuit-line.v{width:1px;animation:circuitV 9s infinite linear}
.circuit-line:nth-child(5){top:24%;left:0;width:220px}
.circuit-line:nth-child(6){top:52%;right:0;width:300px;animation-delay:-2s}
.circuit-line:nth-child(7){left:32%;top:0;height:220px;animation-delay:-4s}
.circuit-line:nth-child(8){right:20%;bottom:0;height:250px;animation-delay:-6s}
.particles{position:absolute;inset:0;overflow:hidden;z-index:0}
.particle{position:absolute;width:2px;height:2px;background:var(--green);border-radius:50%;opacity:0;animation:particleFade 4s infinite}

.hero-content{text-align:center;position:relative;z-index:2;max-width:900px}
.hero-logo{margin-bottom:36px}
.hero-logo svg{width:min(500px,82vw);height:auto;filter:drop-shadow(0 0 42px rgba(44,232,165,.16))}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;font-size:.72rem;color:var(--green);border:1px solid var(--border);padding:7px 18px;border-radius:30px;letter-spacing:3px;margin-bottom:28px;background:rgba(44,232,165,.05)}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2s infinite}
.hero h1{font-family:'Orbitron',sans-serif;font-size:clamp(2.1rem,5.6vw,4rem);font-weight:900;line-height:1.12;margin-bottom:24px;letter-spacing:-.5px}
.hero h1 .highlight{background:linear-gradient(135deg,var(--green),var(--green2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--text2);max-width:660px;margin:0 auto 36px}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;padding:15px 36px;border-radius:var(--radius);cursor:pointer;letter-spacing:1.2px;text-transform:uppercase;transition:all .3s var(--ease);border:none;display:inline-flex;align-items:center;gap:10px}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--green2));color:#04130d;box-shadow:0 0 30px rgba(44,232,165,.22)}
.btn-primary:hover{box-shadow:0 0 52px rgba(44,232,165,.4);transform:translateY(-2px);color:#04130d}
.btn-outline{background:transparent;color:var(--green);border:1px solid var(--green)}
.btn-outline:hover{background:rgba(44,232,165,.09);transform:translateY(-2px);color:var(--green)}
.hero-scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--text3);font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:3px;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll-hint .mouse{width:22px;height:36px;border:1.5px solid var(--text3);border-radius:12px;position:relative}
.hero-scroll-hint .mouse::after{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);width:3px;height:6px;border-radius:2px;background:var(--green);animation:scrollWheel 1.8s infinite}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{position:relative;z-index:2;padding:clamp(72px,9vw,120px) clamp(20px,4vw,48px);scroll-margin-top:84px}
.wrap{max-width:var(--maxw);margin:0 auto}
.section-header{text-align:center;margin-bottom:60px;max-width:760px;margin-left:auto;margin-right:auto}
.section-label{font-family:'Share Tech Mono',monospace;font-size:.74rem;color:var(--green);letter-spacing:4px;text-transform:uppercase;margin-bottom:14px;display:block}
.section-title{font-family:'Orbitron',sans-serif;font-size:clamp(1.8rem,4vw,2.9rem);font-weight:700;margin-bottom:18px;letter-spacing:-.5px;line-height:1.15}
.section-intro{color:var(--text2);font-size:1.08rem}
.section-line{width:64px;height:3px;background:linear-gradient(90deg,var(--green),transparent);margin:20px auto 0}

/* ============================================================
   INTRO — // Che cosa facciamo
   ============================================================ */
.intro{text-align:center}
.intro .wrap{max-width:820px}
.intro p{color:var(--text2);font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.7}
.intro p strong{color:var(--text)}
.intro .pillars{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
a.pillar{text-decoration:none;cursor:pointer}
a.pillar:hover{border-color:var(--green)!important;color:var(--green)!important}
.intro .pillar{font-family:'Share Tech Mono',monospace;font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--green-soft);border:1px solid var(--border);background:rgba(44,232,165,.04);padding:10px 18px;border-radius:30px}

/* ============================================================
   WHY — // Perché il laboratorio
   ============================================================ */
.why{background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center;max-width:var(--maxw);margin:0 auto}
.why-text h2{font-family:'Orbitron',sans-serif;font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700;margin-bottom:18px;letter-spacing:-.5px;line-height:1.18}
.why-text p{color:var(--text2);font-size:1.06rem;margin-bottom:16px}
.why-text p strong{color:var(--green-soft);font-weight:600}
.why-list{display:grid;gap:14px}
.why-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:22px 24px;transition:border-color .4s,transform .4s var(--ease)}
.why-item:hover{border-color:var(--border);transform:translateX(4px)}
.why-item .ic{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:rgba(44,232,165,.07);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.why-item .ic svg{width:24px;height:24px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why-item h4{font-family:'Orbitron',sans-serif;font-size:1rem;margin-bottom:4px}
.why-item p{color:var(--text2);font-size:.94rem;margin:0}

/* ============================================================
   COMPETENZE — Cubo 3D (RICOSTRUITO DA ZERO, auto-contenuto)
   ============================================================ */
.competenze{overflow:hidden}
.competenze-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;max-width:var(--maxw);margin:0 auto}
.competenze-text h2{font-family:'Orbitron',sans-serif;font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700;margin-bottom:18px;letter-spacing:-.5px}
.competenze-text p{color:var(--text2);font-size:1.06rem;margin-bottom:16px}
.competenze-text p strong{color:var(--green-soft);font-weight:600}

/* --- cube component (namespace .kube, nessuna dipendenza dal vecchio markup) --- */
.kube-stage{
  --oct:clamp(230px,30vw,340px);
  --r:calc(var(--oct) / 2);
  --fw:calc(var(--oct) * 0.414);
  width:var(--oct);height:var(--oct);
  margin:0 auto;
  perspective:1300px;
  cursor:grab;
  touch-action:none;
}
.kube-stage.grabbing{cursor:grabbing}
.kube{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transform:rotateX(-14deg) rotateY(-12deg);
  animation:kubeSpin 30s infinite linear;
  will-change:transform;
}
.kube-stage:hover .kube{animation-play-state:paused}
.kube__face{
  position:absolute;top:0;left:50%;
  width:var(--fw);height:100%;margin-left:calc(var(--fw) / -2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:14px 8px;
  border:1px solid var(--green);
  background:linear-gradient(160deg,rgba(44,232,165,.10),rgba(44,232,165,.03));
  box-shadow:inset 0 0 40px rgba(44,232,165,.08);
  backdrop-filter:blur(3px);
}
.kube__value{font-family:'Orbitron',sans-serif;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;color:var(--green);line-height:1;text-shadow:0 0 18px var(--green-glow)}
.kube__value .suffix{font-size:.5em;color:var(--green-soft)}
.kube__ic{font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1}
.kube__ic svg{width:clamp(34px,5vw,46px);height:auto;display:block;fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kube__label{font-family:'Share Tech Mono',monospace;font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--text2);max-width:90%}
.kube__face--p1{transform:rotateY(0deg)   translateZ(var(--r))}
.kube__face--p2{transform:rotateY(45deg)  translateZ(var(--r))}
.kube__face--p3{transform:rotateY(90deg)  translateZ(var(--r))}
.kube__face--p4{transform:rotateY(135deg) translateZ(var(--r))}
.kube__face--p5{transform:rotateY(180deg) translateZ(var(--r))}
.kube__face--p6{transform:rotateY(225deg) translateZ(var(--r))}
.kube__face--p7{transform:rotateY(270deg) translateZ(var(--r))}
.kube__face--p8{transform:rotateY(315deg) translateZ(var(--r))}
@keyframes kubeSpin{
  0%  {transform:rotateX(-14deg) rotateY(0)}
  100%{transform:rotateX(-14deg) rotateY(360deg)}
}

/* ============================================================
   SERVIZI — 3 card per audience
   ============================================================ */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:var(--maxw);margin:0 auto}
.service-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:38px 32px;position:relative;overflow:hidden;transition:transform .5s var(--ease),border-color .4s,box-shadow .4s;backdrop-filter:blur(10px);text-decoration:none;color:inherit;cursor:pointer}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--green2));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.service-card:hover::before{transform:scaleX(1)}
.service-card:hover{transform:translateY(-8px);border-color:var(--border);box-shadow:var(--shadow),0 0 40px var(--green-glow)}
.service-card .badge{align-self:flex-start;font-family:'Share Tech Mono',monospace;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--green);border:1px solid var(--border);background:rgba(44,232,165,.05);padding:5px 12px;border-radius:20px;margin-bottom:20px}
.service-card .icon{width:88px;height:88px;border-radius:20px;background:rgba(44,232,165,.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:24px;transition:transform .4s var(--ease),background .4s}
.service-card:hover .icon{background:rgba(44,232,165,.13);transform:scale(1.08) rotate(4deg)}
.service-card h3{font-family:'Orbitron',sans-serif;font-size:1.18rem;font-weight:700;margin-bottom:14px;color:var(--text)}
.service-card>p{color:var(--text2);font-size:.96rem;line-height:1.7;margin-bottom:20px}
.service-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:26px}
.service-list li{color:var(--text2);font-size:.9rem;padding-left:22px;position:relative}
.service-list li::before{content:'›';position:absolute;left:0;color:var(--green);font-weight:700;font-size:1.1rem;line-height:1.3}
.service-card .card-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:1px;text-transform:uppercase;color:var(--green);transition:gap .3s var(--ease)}
.service-card .card-cta:hover{gap:14px;color:var(--green-soft)}
/* card con banner animato in cima (al posto dell'icona) */
.service-card.has-anim{padding-top:0}
.card-anim{margin:0 -32px 24px;aspect-ratio:1/1;overflow:hidden;background:#050608;border-bottom:1px solid var(--border2);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.card-anim iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--bg2);border-top:1px solid var(--border2)}
.contact-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,60px)}
.contact-info{display:flex;flex-direction:column;gap:18px;justify-content:center}
.contact-info h3{font-family:'Orbitron',sans-serif;font-size:1.4rem;margin-bottom:2px}
.contact-info>p{color:var(--text2);line-height:1.75}
.contact-detail{display:flex;align-items:center;gap:13px;color:var(--text2);font-size:.96rem}
.contact-detail .cd-icon{width:42px;height:42px;border-radius:10px;background:rgba(44,232,165,.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.contact-detail .cd-icon svg{width:22px;height:22px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-detail a{color:var(--text2)}
.contact-detail a:hover{color:var(--green)}
.social-links{display:flex;gap:10px;flex-wrap:wrap}
.social-link{width:42px;height:42px;border-radius:10px;background:rgba(44,232,165,.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s;color:var(--text2)}
.social-link:hover{background:rgba(44,232,165,.14);border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.social-link svg{width:18px;height:18px;fill:currentColor}
.form-card{background:var(--card);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:clamp(28px,4vw,42px);backdrop-filter:blur(10px);scroll-margin-top:96px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-weight:600;font-size:.82rem;color:var(--text2);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius);padding:13px 16px;color:var(--text);font-family:'Rajdhani',sans-serif;font-size:1rem;transition:border-color .3s,box-shadow .3s;outline:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--green);box-shadow:0 0 20px rgba(44,232,165,.12)}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select option{background:var(--bg);color:var(--text)}
.form-submit{width:100%;justify-content:center;padding:15px;font-size:1rem;margin-top:4px}
.privacy-row{display:flex;align-items:flex-start;gap:10px}
.privacy-row input[type=checkbox]{width:auto;margin-top:4px;flex-shrink:0;accent-color:var(--green)}
.privacy-row label{text-transform:none!important;letter-spacing:0!important;font-size:.85rem!important;color:var(--text2)}
.form-note{margin-top:14px;font-size:.78rem;color:var(--text3);font-family:'Share Tech Mono',monospace;letter-spacing:.5px;text-align:center}
#formSuccess{text-align:center;padding:30px 10px}
#formSuccess .ok{width:72px;height:72px;border-radius:50%;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 18px;color:var(--green);box-shadow:0 0 30px var(--green-glow)}
#formSuccess h3{font-family:'Orbitron',sans-serif;margin-bottom:10px}
#formSuccess p{color:var(--text2)}
#formSuccess .ref{margin-top:14px;font-family:'Share Tech Mono',monospace;color:var(--green);letter-spacing:1px}


/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--bg);border-top:1px solid var(--border2);padding:54px clamp(20px,4vw,48px) 32px;text-align:center}
.footer-logo svg{height:36px;width:auto;margin:0 auto 16px;display:block;opacity:.7}
footer p{color:var(--text3);font-size:.85rem;margin-bottom:6px}
.footer-services{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin:22px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--border2)}
.footer-services a{color:var(--text2);font-size:.86rem}
.footer-social{display:flex;gap:12px;justify-content:center;margin:18px 0}
.footer-social a{width:38px;height:38px;border-radius:9px;background:rgba(44,232,165,.05);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;transition:all .3s;color:var(--text3)}
.footer-social a:hover{background:rgba(44,232,165,.12);border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.footer-social a svg{width:16px;height:16px;fill:currentColor}
.footer-legal{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--border2)}
.footer-legal a{color:var(--text3);font-size:.76rem;letter-spacing:1px;text-transform:uppercase;font-family:'Share Tech Mono',monospace}
.footer-legal a:hover{color:var(--green)}
.footer-lang{display:flex;gap:16px;justify-content:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--border2)}
.footer-lang a{font-family:'Share Tech Mono',monospace;font-size:.78rem;letter-spacing:1px;color:var(--text3)}
.footer-lang a.active-lang{color:var(--green);font-weight:700}

/* ---- Cookie banner ---- */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9998;background:rgba(6,15,10,.97);border-top:1px solid var(--border);padding:20px clamp(20px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;backdrop-filter:blur(20px);transform:translateY(110%);transition:transform .5s var(--ease)}
#cookie-banner.show{transform:translateY(0)}
#cookie-banner p{color:var(--text2);font-size:.88rem;line-height:1.6;flex:1;min-width:250px}
#cookie-banner a{color:var(--green)}
.cookie-btns{display:flex;gap:12px;flex-shrink:0}
.cookie-accept{background:linear-gradient(135deg,var(--green),var(--green2));color:#04130d;border:none;padding:11px 24px;border-radius:var(--radius);cursor:pointer;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:1px}
.cookie-reject{background:transparent;color:var(--text3);border:1px solid var(--text3);padding:11px 24px;border-radius:var(--radius);cursor:pointer;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:1px}
.cookie-reject:hover{border-color:var(--text2);color:var(--text2)}

.status{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;color:var(--text3);margin-top:16px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(44,232,165,.5);animation:pulse 2s infinite}

/* ============================================================
   PAGINE SERVIZIO (consumer / b2b / smt)
   ============================================================ */
.breadcrumb{max-width:var(--maxw);margin:0 auto;padding:100px clamp(20px,4vw,48px) 0;font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:1px;color:var(--text3);text-transform:uppercase}
.breadcrumb a{color:var(--text2)} .breadcrumb a:hover{color:var(--green)} .breadcrumb .here{color:var(--green)}

.page-hero{position:relative;z-index:2;padding:34px clamp(20px,4vw,48px) 56px;text-align:center;overflow:hidden}
.page-hero .wrap{max-width:820px;margin:0 auto}
.page-hero .kicker{display:inline-flex;align-items:center;gap:8px;font-family:'Share Tech Mono',monospace;font-size:.72rem;color:var(--green);border:1px solid var(--border);padding:7px 18px;border-radius:30px;letter-spacing:3px;margin-bottom:22px;background:rgba(44,232,165,.05);text-transform:uppercase}
.page-hero h1{font-family:'Orbitron',sans-serif;font-size:clamp(1.9rem,4.6vw,3rem);font-weight:800;line-height:1.14;margin-bottom:20px;letter-spacing:-.5px}
.page-hero h1 .hl{background:linear-gradient(135deg,var(--green),var(--green2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-hero p{color:var(--text2);font-size:1.1rem;max-width:680px;margin:0 auto 30px}
.page-hero .hero-btns{justify-content:center}
/* sfondo hero animato (scena della card, attenuata e sfumata coi colori sito) */
.page-hero .wrap{position:relative;z-index:1}
.page-hero-bg{position:absolute;inset:0;z-index:0;opacity:.42;pointer-events:none}
.page-hero-bg iframe{width:100%;height:100%;border:0;display:block}
.page-hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%, transparent 0%, rgba(6,15,10,.5) 62%, var(--bg) 100%)}
/* icone vettoriali al posto delle emoji */
.offer .ic svg{width:30px;height:30px;display:block;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-card .icon svg{width:50px;height:50px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-wa{background:#25d366;color:#04130d;box-shadow:0 0 26px rgba(37,211,102,.25)}
.btn-wa:hover{color:#04130d;transform:translateY(-2px);box-shadow:0 0 40px rgba(37,211,102,.4)}

.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px;max-width:var(--maxw);margin:0 auto}
.offer{background:var(--card);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:30px 28px;transition:transform .5s var(--ease),border-color .4s,box-shadow .4s;backdrop-filter:blur(8px)}
.offer:hover{transform:translateY(-6px);border-color:var(--border);box-shadow:var(--shadow),0 0 36px var(--green-glow)}
.offer .ic{width:56px;height:56px;border-radius:14px;background:rgba(44,232,165,.06);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:18px}
.offer h3{font-family:'Orbitron',sans-serif;font-size:1.04rem;margin-bottom:10px}
.offer p{color:var(--text2);font-size:.94rem;line-height:1.65}

.chips-section{text-align:center}
.chips-wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.chip-item{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.92rem;color:var(--text);border:1px solid var(--border);background:rgba(44,232,165,.04);padding:10px 18px;border-radius:30px;transition:border-color .3s,color .3s}
.chip-item:hover{border-color:var(--green);color:var(--green)}

.minibio{background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.minibio-grid{max-width:920px;margin:0 auto;display:grid;grid-template-columns:160px 1fr;gap:36px;align-items:center}
.minibio-photo{width:160px;height:160px;border-radius:50%;overflow:hidden;border:1px solid var(--border);flex-shrink:0}
.minibio-photo img{width:100%;height:100%;object-fit:cover}
.minibio-text h3{font-family:'Orbitron',sans-serif;font-size:1.3rem;margin:8px 0 10px}
.minibio-text p{color:var(--text2);margin-bottom:14px}

.faq-section .wrap{max-width:820px}
.faq{border:1px solid var(--border2);border-radius:var(--radius);margin-bottom:12px;background:var(--card);overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-family:'Orbitron',sans-serif;font-size:.98rem;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--green);font-size:1.4rem;line-height:1;transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 22px 20px;color:var(--text2);line-height:1.7;font-size:.96rem}

.cta-band{text-align:center}
.cta-band .wrap{max-width:720px;margin:0 auto}
.cta-band h2{font-family:'Orbitron',sans-serif;font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:16px}
.cta-band p{color:var(--text2);margin-bottom:28px;font-size:1.05rem}
.cta-band .hero-btns{justify-content:center}

/* ---- Embed esperienza 3D SMT (iframe isolato) ---- */
.smt-embed{background:var(--bg2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2)}
.embed-frame{position:relative;max-width:var(--maxw);margin:0 auto;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.embed-frame iframe{display:block;width:100%;height:78vh;min-height:480px;border:0}
.embed-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--border2);background:rgba(6,15,10,.6)}
.embed-bar .hint{font-family:'Share Tech Mono',monospace;font-size:.74rem;letter-spacing:1px;color:var(--text2)}
@media(max-width:560px){.embed-frame iframe{height:72vh;min-height:420px}}

/* ============================================================
   PAGINA CHI SONO (about-me)
   ============================================================ */
.about-stats-sec{padding-top:0}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border2);border:1px solid var(--border2);border-radius:var(--radius-lg);overflow:hidden}
.astat{background:var(--bg);padding:32px 18px;text-align:center}
.astat .n{font-family:'Orbitron',sans-serif;font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;color:var(--green);line-height:1}
.astat .n span{font-size:.55em;color:var(--green-soft)}
.astat .k{margin-top:10px;font-size:.82rem;color:var(--text2);letter-spacing:1px;text-transform:uppercase;font-weight:600}

.about-id{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,64px);align-items:center}
.about-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);aspect-ratio:5/6;background:var(--bg3)}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.05)}
.about-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,15,10,.85));pointer-events:none}
.about-photo .tag{position:absolute;left:16px;bottom:16px;z-index:2;font-family:'Share Tech Mono',monospace;font-size:.7rem;color:var(--green);letter-spacing:2px;text-transform:uppercase;background:rgba(6,15,10,.7);border:1px solid var(--border);padding:6px 12px;border-radius:6px;backdrop-filter:blur(8px)}
.about-id-text h2{font-family:'Orbitron',sans-serif;font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700;margin-bottom:6px}
.about-id-text .role{font-family:'Share Tech Mono',monospace;font-size:.82rem;color:var(--green);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;display:block}
.about-id-text p{color:var(--text2);font-size:1.05rem;margin-bottom:14px}
.about-id-text p strong{color:var(--text)}

.founder-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{font-family:'Share Tech Mono',monospace;font-size:.74rem;letter-spacing:1px;color:var(--text2);border:1px solid var(--border);background:rgba(44,232,165,.04);padding:7px 14px;border-radius:30px}
.chip b{color:var(--green-soft);font-weight:400}

.story{max-width:820px}
.story p{color:var(--text2);font-size:1.08rem;line-height:1.8;margin-bottom:18px}
.story p strong{color:var(--text)}
.story-quote{border-left:2px solid var(--green);padding-left:20px;font-size:1.15rem;color:var(--text)}
.story-quote strong{color:var(--green-soft)}

.offer .forwho{font-size:.88rem;color:var(--text3);margin-top:14px;border-top:1px solid var(--border2);padding-top:12px}
.offer .forwho b{color:var(--green-soft)}
.offer.step{padding-top:30px}
.step-n{font-family:'Orbitron',sans-serif;font-size:1.6rem;font-weight:800;color:var(--green);opacity:.55;margin-bottom:12px}

.about-close .cta-band{max-width:780px}
.about-close .section-label{display:block;margin-bottom:12px}
.about-contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 22px}
.acard{display:flex;align-items:center;gap:14px;text-align:left;color:var(--text2);background:var(--card);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:18px 20px;transition:border-color .3s,transform .3s var(--ease)}
.acard:hover{border-color:var(--green);transform:translateY(-3px);color:var(--text2)}
.acard .ai{font-size:1.5rem;flex-shrink:0}
.acard>span:last-child{display:flex;flex-direction:column;font-size:.92rem}
.acard b{font-family:'Orbitron',sans-serif;font-size:.78rem;color:var(--green-soft);margin-bottom:3px}
.about-close-note{color:var(--text3);font-size:.95rem;max-width:640px;margin:0 auto}

/* about-me originale: icone vettoriali + dettagli */
.highlight{color:var(--green)}
.am-service-icon svg{width:36px;height:36px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.am-forwho{font-size:.86rem;color:var(--text3);margin-top:14px;border-top:1px solid var(--border2);padding-top:12px}
.am-forwho b{color:var(--green-soft)}
.am-contact-icon svg{width:30px;height:30px;display:block;margin:0 auto;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:860px){
  .about-id{grid-template-columns:1fr}
  .about-photo{max-width:340px;margin:0 auto;aspect-ratio:4/5}
  .about-contacts{grid-template-columns:1fr}
  .about-stats{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(42px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.18s}
.reveal-delay-3{transition-delay:.28s}
.reveal-delay-4{transition-delay:.38s}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes floatCube{0%,100%{transform:perspective(500px) rotateX(45deg) rotateY(45deg) translateY(0)}50%{transform:perspective(500px) rotateX(65deg) rotateY(25deg) translateY(-30px)}}
@keyframes circuitH{0%{opacity:.05;transform:translateX(-100%)}50%{opacity:.12}100%{opacity:.05;transform:translateX(200%)}}
@keyframes circuitV{0%{opacity:.05;transform:translateY(-100%)}50%{opacity:.12}100%{opacity:.05;transform:translateY(200%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes particleFade{0%{opacity:0;transform:translateY(0)}50%{opacity:.5}100%{opacity:0;transform:translateY(-100px)}}
@keyframes scrollWheel{0%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,10px)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* hero entrance staggers */
.hero-logo,.hero-badge,.hero h1,.hero p.lead,.hero-btns,.hero .status{animation:fadeInUp .9s var(--ease) both}
.hero-badge{animation-delay:.12s}
.hero h1{animation-delay:.24s}
.hero p.lead{animation-delay:.36s}
.hero-btns{animation-delay:.48s}
.hero .status{animation-delay:.58s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- Tablet ---- */
@media(max-width:1024px){
  .services-grid{grid-template-columns:1fr 1fr;gap:22px}
  .services-grid .service-card:last-child{grid-column:1 / -1}
}

@media(max-width:900px){
  .why-grid{grid-template-columns:1fr}
  .competenze-grid{grid-template-columns:1fr;text-align:center}
  .competenze-text{order:2}
  .kube-stage{order:1}
  .services-grid{grid-template-columns:1fr}
  .services-grid .service-card:last-child{grid-column:auto}
  /* Contatti: form SOPRA, scheda info SOTTO (mobile/tablet) */
  .contact-grid{grid-template-columns:1fr}
  .form-card{order:1}
  .contact-info{order:2}
}

/* ---- Smartphone ---- */
@media(max-width:560px){
  body{font-size:16px}
  .hero{padding:118px 18px 80px}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{justify-content:center}
  .section-header{margin-bottom:42px}
  .contact-detail{font-size:.92rem}
  .footer-services{gap:14px}
  .footer-legal{gap:12px}
  .whatsapp-float{bottom:20px;right:18px;width:52px;height:52px}
  .minibio-grid{grid-template-columns:1fr;text-align:center;justify-items:center;gap:20px}
  .breadcrumb{padding-top:96px}
}

@media(max-width:960px){
  body.menu-is-open{overflow:hidden}
  .nav-links{display:none}
  .hamburger{display:flex}
  #navbar.menu-open{height:100vh;height:100dvh;background:rgba(6,15,10,.99);z-index:9999}
  #navbar.menu-open .nav-links{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100dvh;gap:0;overflow-y:auto}
  #navbar.menu-open .nav-links a{font-size:1.4rem;font-weight:700;letter-spacing:3px;padding:20px 0;color:var(--text);border-bottom:1px solid var(--border2);width:80%;text-align:center}
  #navbar.menu-open .nav-links a:last-child{border-bottom:none}
  #navbar.menu-open .nav-links a::after{display:none}
  #navbar.menu-open .nav-cta{border:1px solid var(--green)!important}
  #navbar.menu-open .nav-logo{position:absolute;top:37px;left:clamp(20px,4vw,48px);transform:translateY(-50%);margin:0;z-index:2}
  #navbar.menu-open .hamburger{position:absolute;top:37px;right:clamp(20px,4vw,48px);transform:translateY(-50%);z-index:2}
  .lang-switch{position:absolute;top:50%;right:74px;transform:translateY(-50%);z-index:201}
  #navbar.menu-open .lang-switch{top:37px;transform:translateY(-50%);z-index:3}
}

/* ============================================================
   ACCESSIBILITÀ — riduzione movimento
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .particle,.floating-cube,.circuit-line{display:none}
  .kube{animation:none;transform:rotateX(-24deg) rotateY(-34deg)}
  .hero-scroll-hint .mouse::after{animation:none}
}

/* ---- Globo 3D (Three.js) competenze ---- */
.globe-stage{--oct:clamp(260px,36vw,420px);overflow:visible}
.globe-stage{position:relative;overflow:visible}
.globe-stage canvas{width:100%;height:100%;display:block}
.globe-cap{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:1px;color:var(--green-soft)}
.comp-chips{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 4px}
.comp-chips span{font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:1px;color:var(--green-soft);border:1px solid var(--border);background:rgba(44,232,165,.04);padding:6px 12px;border-radius:30px}

/* voce di menu attiva = pagina corrente */
.nav-links a.active{color:var(--green)}
.nav-links a.active::after{width:100%}

/* barra avanzamento scroll nascosta (richiesta utente) */
.scroll-progress{display:none!important}






/* sotto-menu Servizi (accordion) — solo nel menu mobile */
.nav-sub{display:none}
.nav-parent .chev{display:none}
@media(max-width:960px){
  #navbar.menu-open .nav-parent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
  #navbar.menu-open .nav-parent .chev{display:inline-block;width:11px;height:11px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .35s cubic-bezier(.22,1,.36,1)}
  #navbar.menu-open .nav-parent.open{color:var(--green)}
  #navbar.menu-open .nav-parent.open .chev{transform:rotate(-135deg)}
  #navbar.menu-open .nav-sub{display:flex;flex-direction:column;width:84%;max-height:0;opacity:0;overflow:hidden;margin:0 auto;border-radius:16px;background:linear-gradient(180deg,rgba(44,232,165,.08),rgba(8,18,14,.35));border:1px solid rgba(44,232,165,.20);box-shadow:0 18px 40px -22px rgba(0,0,0,.75);transition:max-height .45s cubic-bezier(.22,1,.36,1),opacity .35s ease,margin .35s ease}
  #navbar.menu-open .nav-parent.open ~ .nav-sub{max-height:300px;opacity:1;margin:6px auto 16px}
  #navbar.menu-open .nav-sub a{display:block;width:100%;text-align:center;padding:17px 12px;font-size:1rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .4s cubic-bezier(.22,1,.36,1),color .25s,background .25s}
  #navbar.menu-open .nav-sub a + a{border-top:1px solid rgba(44,232,165,.12)}
  #navbar.menu-open .nav-sub a:hover,#navbar.menu-open .nav-sub a:active{color:var(--green);background:rgba(44,232,165,.08)}
  #navbar.menu-open .nav-parent.open ~ .nav-sub a{opacity:1;transform:none}
  #navbar.menu-open .nav-parent.open ~ .nav-sub a:nth-child(1){transition-delay:.10s}
  #navbar.menu-open .nav-parent.open ~ .nav-sub a:nth-child(2){transition-delay:.16s}
  #navbar.menu-open .nav-parent.open ~ .nav-sub a:nth-child(3){transition-delay:.22s}
}