/*
Theme Name: Patentino Digitale Landing
Theme URI: https://www.patentinodigitale.it
Author: Giuseppe Lavenia
Description: Landing page vetrina per promuovere il Patentino Digitale e l'app Patentino Digitale.
Version: 1.0.0
Text Domain: patentino-digitale
*/
:root{
  --bg:#06111f;
  --blue:#1867ff;
  --cyan:#36d6ff;
  --green:#52e6a7;
  --white:#ffffff;
  --muted:#b8c6d9;
  --card:rgba(255,255,255,.08);
  --card2:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.16);
  --shadow:0 30px 80px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 10%, rgba(54,214,255,.28), transparent 30%),
    radial-gradient(circle at 85% 0%, rgba(82,230,167,.18), transparent 26%),
    linear-gradient(180deg,#07162a 0%,#06111f 48%,#040b15 100%);
  color:var(--white);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92vw);margin:auto}
.site-header{
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(18px);
  background:rgba(6,17,31,.72);
  border-bottom:1px solid var(--line);
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.03em;font-size: 24px;}
.logo-mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,var(--cyan),var(--blue) 55%,var(--green));
  display:grid;place-items:center;box-shadow:0 14px 40px rgba(24,103,255,.45);
}
.logo-mark svg{width:24px;height:24px}
.nav-links{display:flex;gap:26px;color:var(--muted);font-size:15px}
.nav-cta{padding:12px 18px;border-radius:999px;background:var(--white);color:#07162a;font-weight:800}
.hero{padding:48px 0 70px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.08);color:#dbe8ff;font-size:14px;font-weight:700
}
.pulse{width:9px;height:9px;border-radius:99px;background:var(--green);box-shadow:0 0 0 8px rgba(82,230,167,.12)}
h1{
  margin:22px 0 18px;
  font-size:clamp(44px,6vw,78px);
  line-height:.95;letter-spacing:-.065em;
}
.lead{font-size:clamp(19px,2.2vw,24px);color:#d5e2f5;max-width:650px;margin:0 0 30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 20px}
.store-btn{
  display:inline-flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;
  background:var(--white);color:#07162a;font-weight:800;box-shadow:var(--shadow);
}
.store-btn.secondary{background:rgba(255,255,255,.10);color:var(--white);border:1px solid var(--line);box-shadow:none}
.store-btn svg{width:28px;height:28px}
.micro{color:var(--muted);font-size:14px}
.phone-wrap{position:relative;display:grid;place-items:center}
.glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(24,103,255,.42),transparent 60%);filter:blur(8px)}
.phone{
  position:relative;width:310px;height:630px;border-radius:46px;
  background:#0b1728;border:12px solid #101b2a;box-shadow:0 40px 110px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.1);
  overflow:hidden;transform:rotate(4deg)
}
.phone-screen{height:100%;background:linear-gradient(180deg,#f6fbff,#eaf4ff);color:#06111f;padding:28px 22px}
.status{height:28px;display:flex;justify-content:space-between;font-size:12px;font-weight:800}
.app-head{margin-top:22px;padding:20px;border-radius:28px;background:linear-gradient(135deg,#1463ff,#30d1ff);color:white}
.app-head h3{font-size:25px;margin:0 0 6px;line-height:1}
.app-head p{margin:0;color:rgba(255,255,255,.86);font-size:13px}
.progress{margin:20px 0;background:#dceafb;border-radius:20px;padding:6px}
.progress span{display:block;width:72%;height:10px;border-radius:99px;background:linear-gradient(90deg,#1463ff,#52e6a7)}
.lesson{margin-top:14px;background:white;border-radius:22px;padding:16px;box-shadow:0 10px 25px rgba(26,78,130,.10)}
.lesson b{display:block;font-size:15px}.lesson small{color:#5b6b7d}
.checks{display:grid;gap:10px;margin-top:18px}
.check{display:flex;align-items:center;gap:10px;background:#f3f8ff;border-radius:16px;padding:12px;font-size:13px;font-weight:700}
.check i{width:20px;height:20px;border-radius:50%;background:#52e6a7;display:inline-grid;place-items:center;font-style:normal;color:#062116}
.floating-card{
  color: #145aaf;
  -webkit-backdrop-filter: blur(14px);
  position:absolute;right:0;bottom:48px;width:250px;padding:18px;border-radius:24px;
  background:rgba(255,255,255,.13);border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:var(--shadow)
}
.floating-card strong{font-size:28px}.floating-card p{margin:6px 0 0;font-size:18px}
.section{padding:78px 0}
.section-title{max-width:760px;margin:0 auto 42px;text-align:center}
.section-title h2{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.05em;margin:0 0 14px}
.section-title p{color:var(--muted);font-size:18px;margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:30px;padding:28px;min-height:250px}
.icon{width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,var(--cyan),var(--blue));display:grid;place-items:center;margin-bottom:20px}
.card h3{font-size:24px;margin:0 0 10px;letter-spacing:-.03em}.card p{color:#c7d5e8;margin:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid var(--line);border-radius:28px;padding:26px}
.step:before{counter-increment:step;content:"0" counter(step);display:inline-flex;width:42px;height:42px;border-radius:14px;align-items:center;justify-content:center;background:var(--white);color:#07162a;font-weight:900;margin-bottom:28px}
.step h3{margin:0 0 8px}.step p{color:var(--muted);margin:0}
.cta{
  margin:30px auto 85px;width:min(1120px,92vw);border-radius:42px;padding:58px;
  background:linear-gradient(135deg,#135fff,#25c7ff 58%,#52e6a7);color:white;overflow:hidden;position:relative
}
.cta:after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.22)}
.cta-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta h2{font-size:clamp(34px,4vw,54px);letter-spacing:-.055em;line-height:1;margin:0 0 12px}
.cta p{font-size:20px;margin:0;color:rgba(255,255,255,.88);max-width:650px}
.site-footer{border-top:1px solid var(--line);padding:32px 0;color:#4f4f4f;font-size:14px; background-color: #ffffff}
.address{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.container-address{
  display: flex;
  justify-content: space-between;
}


@media(max-width:900px){
  .nav{
    justify-content: center;
  }
  .container-address{
    flex-direction: column;
  }
  .container-address > div{
    margin-bottom: 10px;
  }
  .hero-grid,.cta-inner{grid-template-columns:1fr;display:grid}.nav-links{display:none}.cards,.steps{grid-template-columns:1fr}.phone{width:280px;height:570px}.floating-card{right:12px}.cta{padding:36px 24px}
}