/* Hero con mockup telefono — layout condiviso index / per-docenti / per-studenti */
.hero-outer{background:var(--grad);position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;display:flex;align-items:center}
.hero-outer::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 30% 50%,rgba(20,184,166,.15) 0%,transparent 70%);pointer-events:none}
.hero-outer::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:100px;background:var(--warm);clip-path:ellipse(60% 100% at 50% 100%)}
.hero-wrap{max-width:1320px;margin:0 auto;padding:110px 1.5% 110px 2.5%;display:grid;grid-template-columns:1.22fr 0.78fr;gap:28px;align-items:center;position:relative;z-index:1;width:100%}
.hero-copy{min-width:0}
.hero-logo{font-family:'Lora',serif;font-size:clamp(3rem,6vw,5.2rem);font-weight:700;color:white;line-height:1;margin-bottom:8px;letter-spacing:-.02em}
.hero-headline,.hero-title{font-family:'Lora',serif;font-size:clamp(2.3rem,3.6vw,3.65rem);font-weight:700;color:white;line-height:1.14;margin-bottom:20px;letter-spacing:-.03em}
.hero-headline .hero-line,.hero-title .hero-line{display:block}
@media(min-width:769px){
  .hero-headline .hero-line,.hero-title .hero-line{white-space:nowrap}
}
.hero-headline em,.hero-title em{font-style:normal;color:#a7f3d0}
.hero-headline .accent-warm,.hero-title .accent-warm{font-style:italic;color:#fde68a}
.hero-sub{font-size:1rem;color:rgba(255,255,255,.72);line-height:1.65;font-weight:300;max-width:480px;margin-bottom:28px}
.hero-appname{font-family:'Lora',serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;color:white;line-height:1;margin-bottom:16px;letter-spacing:-.02em}

/* Phone 3D carousel */
.hero-visual{display:flex;justify-content:flex-end;align-items:center;position:relative;padding-left:8px;min-height:527px}
.phone-3d-wrapper{display:flex;flex-direction:row;align-items:center;gap:28px;width:auto;max-width:none}
.phone-3d-stage{position:relative;display:flex;flex-direction:column;align-items:center;perspective:1200px;flex-shrink:0}
.phone-3d-hint{font-family:'DM Sans',sans-serif;font-size:.72rem;color:rgba(255,255,255,.55);text-align:center;margin-bottom:10px;letter-spacing:.03em;max-width:320px;line-height:1.45}
.phone-3d-carousel{position:relative;width:264px;height:527px;transform:rotateY(-12deg) rotateX(4deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;cursor:pointer;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;outline:none}
.phone-3d-carousel:hover{transform:rotateY(-4deg) rotateX(2deg)}
.phone-3d-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 30px 60px rgba(0,0,0,.4));pointer-events:none;transform:scale(.96) translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:opacity,transform}
.phone-3d-img.active{opacity:1;transform:scale(1) translateZ(0)}
.phone-3d-dots{display:flex;gap:6px;margin-top:16px}
.phone-3d-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s;border:1px solid rgba(255,255,255,.2);-webkit-tap-highlight-color:transparent}
.phone-3d-dots span.active{background:white;width:22px;border-radius:4px;box-shadow:0 0 8px rgba(255,255,255,.4)}
.phone-3d-info{width:247px;min-width:221px;max-width:255px;flex-shrink:0;align-self:center;background:rgba(15,25,35,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:22px 26px;box-shadow:0 12px 40px rgba(0,0,0,.25);color:white}
.phone-3d-info-nav{margin-bottom:16px}
.phone-3d-info-nav-track{position:relative;height:4px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.phone-3d-info-nav-bar{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--teal-mid),#a7f3d0);border-radius:4px;transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform}
.phone-3d-info-title{font-family:'Lora',serif;font-size:1.2rem;font-weight:700;margin-bottom:10px;line-height:1.3}
.phone-3d-info-desc{font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.7;font-weight:300;text-wrap:pretty}

@media(max-width:1100px) and (min-width:769px){
  .hero-wrap{grid-template-columns:1.15fr 0.85fr;gap:20px;padding:100px 2% 100px 2.5%}
  .hero-visual{min-height:442px}
  .phone-3d-carousel{width:221px;height:442px}
  .phone-3d-wrapper{gap:18px}
  .phone-3d-info{width:213px;min-width:196px;max-width:213px;padding:18px 22px}
  .phone-3d-info-title{font-size:1.1rem}
  .phone-3d-info-desc{font-size:.86rem}
}
@media(max-width:768px){
  .hero-wrap{grid-template-columns:1fr;gap:28px;padding:88px 5% 72px}
  .hero-visual{order:-1;margin-bottom:-8px;justify-content:center;padding-left:0;min-height:auto}
  .phone-3d-wrapper{flex-direction:column;gap:18px;align-items:center}
  .phone-3d-carousel{width:250px;height:500px;transform:rotateY(-6deg) rotateX(2deg)}
  .phone-3d-info{width:100%;min-width:0;max-width:360px;text-align:center}
}
@media(max-width:480px){
  .phone-3d-carousel{width:210px;height:420px}
  .hero-wrap{padding:80px 4% 56px}
}

/* Schermi larghi ma bassi (laptop 1366×768 e simili): il mockup telefono a
   piena grandezza (620px) non ci sta, anche se in larghezza avanza spazio. */
@media(max-height:820px) and (min-width:769px){
  .hero-wrap{padding-top:96px;padding-bottom:64px}
  .hero-visual{min-height:408px}
  .phone-3d-carousel{width:204px;height:408px}
  .phone-3d-wrapper{gap:18px}
  .phone-3d-info{width:213px;min-width:196px;max-width:213px;padding:16px 20px}
  .phone-3d-info-title{font-size:1.05rem;margin-bottom:6px}
  .phone-3d-info-desc{font-size:.82rem;line-height:1.55}
  .hero-logo{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:4px}
  .hero-appname{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:8px}
  .hero-headline,.hero-title{font-size:clamp(1.7rem,3vw,2.6rem);margin-bottom:12px}
  .hero-sub{margin-bottom:16px;font-size:.92rem}
  .hero-preview{margin-bottom:16px;font-size:.78rem;line-height:1.5}
  .role-btns{gap:8px}
  .role-btn{padding:11px 18px;font-size:.86rem}
  .badge-row{gap:8px}
  .badge{padding:4px 12px;font-size:.74rem}
}
@media(max-height:700px) and (min-width:769px){
  .hero-visual{min-height:323px}
  .phone-3d-carousel{width:162px;height:323px}
}