/* ============================================================
   LINDOO — addetti.css · landing recruiting addetti (Roma)
   Riusa i token e i componenti di base.css. Self-contained.
   ============================================================ */

@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(12,182,206,.45)}70%{box-shadow:0 0 0 9px rgba(12,182,206,0)}}

/* ---------- HERO ---------- */
.lp-hero{padding:60px 0 76px; position:relative; overflow:hidden}
.lp-hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:120%; z-index:0;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(107,216,230,.30), transparent 60%),
    radial-gradient(50% 50% at 12% 88%, rgba(255,158,146,.20), transparent 60%);
  filter:blur(6px);
}
.lp-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; position:relative; z-index:1}
.lp-hero-copy>*{opacity:0; animation:riseIn .7s var(--ease-out) forwards}
.lp-hero-copy .kicker{animation-delay:.05s}
.lp-hero-copy .lp-display{animation-delay:.15s; margin-top:18px}
.lp-hero-copy .lp-lead{animation-delay:.28s; margin-top:20px; max-width:34ch}
.lp-hero-copy .lp-actions{animation-delay:.4s; margin-top:30px}
.lp-hero-copy .lp-microtrust{animation-delay:.52s; margin-top:16px}

.lp-display{font-size:clamp(2.4rem,5.4vw,4rem); font-weight:800; line-height:1.05; letter-spacing:-.03em}
.lp-display .accent{color:var(--cyan-500)}
.lp-lead{font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--n-600); line-height:1.55; font-weight:400}
.lp-lead strong{color:var(--ink); font-weight:700}
.lp-microtrust{font-size:.9rem; color:var(--muted); font-weight:600}

/* hero visual: notifica richiesta */
.lp-hero-visual{position:relative; opacity:0; animation:riseIn .8s var(--ease-out) .35s forwards}
.lp-notif{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); padding:22px 22px 18px; max-width:380px; margin:0 auto; position:relative;
}
.lp-notif-top{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted); font-weight:600}
.lp-notif-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan-500); animation:pulseDot 2.2s infinite}
.lp-notif-app{font-weight:700; color:var(--n-700)}
.lp-notif-time{margin-left:auto}
.lp-notif-title{margin-top:14px; font-size:1.18rem; font-weight:800; letter-spacing:-.02em; line-height:1.2}
.lp-notif-title span{color:var(--cyan-600)}
.lp-notif-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.lp-chip{font-size:.82rem; font-weight:700; padding:6px 12px; border-radius:var(--r-pill); background:var(--cyan-50); color:var(--cyan-700); border:1px solid var(--cyan-100)}
.lp-chip--soon{background:var(--coral-50); color:var(--coral-600); border-color:var(--coral-100)}
.lp-notif-cta{margin-top:18px; text-align:center; font-weight:800; color:#fff; background:var(--accent); border-radius:var(--r-pill); padding:12px; box-shadow:var(--sh-accent)}

.lp-float{
  position:absolute; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); padding:11px 15px; font-size:.84rem;
}
.lp-float b{display:block; color:var(--ink); font-weight:700; line-height:1.1}
.lp-float small{color:var(--muted); font-size:.74rem}
.lp-float-ic{width:34px;height:34px;border-radius:10px; display:grid; place-items:center; flex:none; font-weight:800; background:var(--cyan-50); color:var(--cyan-700)}
.lp-float-ic--coral{background:var(--coral-50); color:var(--coral-600)}
.lp-float--a{top:8px; left:-22px; animation:floaty 5s ease-in-out infinite}
.lp-float--b{bottom:18px; right:-26px; animation:floaty 5.6s ease-in-out infinite .5s}

/* ---------- PAIN (interesse) ---------- */
.lp-pain{padding:18px 0 6px}
.lp-pain-line{
  font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:800; letter-spacing:-.02em; line-height:1.2;
  max-width:22ch;
}
.lp-pain-line span{color:var(--muted); font-weight:700}

/* ---------- SEZIONI generiche ---------- */
.sec{padding:84px 0}
.sec--surface{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.lp-sec-head{max-width:620px; margin-bottom:36px}
.lp-sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.lp-h2{font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.025em; margin-top:12px}

/* ---------- BENEFICI ---------- */
.lp-benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.lp-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:26px 24px;
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s;
}
.lp-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--cyan-200)}
.lp-card-ic{width:48px;height:48px;border-radius:14px; display:grid; place-items:center; font-size:1.5rem; background:var(--cyan-50); margin-bottom:14px}
.lp-card h3{font-size:1.12rem; font-weight:800; letter-spacing:-.01em}
.lp-card p{margin-top:8px; color:var(--n-600); font-size:.96rem; line-height:1.55}

/* ---------- STEP ---------- */
.lp-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:s}
.lp-step{background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:30px 26px; position:relative}
.lp-step-n{
  display:grid; place-items:center; width:40px;height:40px; border-radius:50%;
  background:var(--cyan-500); color:#fff; font-weight:800; font-size:1.1rem; box-shadow:var(--sh-primary); margin-bottom:14px;
}
.lp-step h3{font-size:1.15rem; font-weight:800}
.lp-step p{margin-top:8px; color:var(--n-600); font-size:.96rem; line-height:1.55}

/* ---------- PROVA SOCIALE ---------- */
.lp-social{padding:56px 0; background:linear-gradient(180deg,var(--cyan-50),#fff)}
.lp-social-in{text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px}
.lp-social-in p{font-size:clamp(1.2rem,2.4vw,1.7rem); font-weight:600; color:var(--n-700); line-height:1.4}
.lp-social-in strong{color:var(--cyan-700); font-weight:800}

/* ---------- CTA FINALE ---------- */
.lp-final{padding:84px 0}
.lp-final-in{
  text-align:center; max-width:760px; margin:0 auto;
  background:linear-gradient(135deg,var(--cyan-900),var(--cyan-700));
  color:#fff; border-radius:var(--r-xl); padding:56px 32px; box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.lp-final-in .lp-h2{color:#fff}
.lp-final-in .lp-lead{color:var(--cyan-100); max-width:46ch}
.lp-final-in .btn{margin-top:8px}

/* ---------- FAQ ---------- */
.lp-faq-wrap{max-width:760px}
.lp-faq{display:flex; flex-direction:column; gap:12px}
.lp-faq details{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:0 20px; transition:border-color .2s, box-shadow .2s}
.lp-faq details[open]{border-color:var(--cyan-200); box-shadow:var(--sh-sm)}
.lp-faq summary{
  list-style:none; cursor:pointer; padding:18px 0; font-weight:700; font-size:1.02rem;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+"; font-size:1.4rem; font-weight:600; color:var(--cyan-500); transition:transform .2s; line-height:1}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.lp-faq details p{padding:0 0 18px; color:var(--n-600); line-height:1.6; max-width:60ch}
.lp-faq-cta{text-align:center; margin-top:30px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .lp-hero-grid{grid-template-columns:1fr; gap:48px}
  .lp-hero-visual{max-width:420px; margin:0 auto; order:2}
  .lp-benefits{grid-template-columns:1fr 1fr}
  .lp-steps{grid-template-columns:1fr}
  .lp-float--a{left:-10px}
  .lp-float--b{right:-12px}
}
@media(max-width:560px){
  .lp-hero{padding:40px 0 56px}
  .sec{padding:60px 0}
  .lp-benefits{grid-template-columns:1fr}
  .lp-final-in{padding:40px 22px}
  .lp-float{display:none}
}
