:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0e1726;
  --muted:#5b667a;
  --line:#e6ebf5;

  --blue:#2563eb;
  --blue2:#1d4ed8;

  --pill:#eaf0ff;
  --pill2:#f4efdf;
  --pillBorder:#c8d6ff;
  --pillBorder2:#d7caa7;

  --shadow: 0 18px 45px rgba(15, 23, 42, .10);
  --shadowSoft: 0 10px 24px rgba(15, 23, 42, .10);

  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1000px 700px at 20% -10%, rgba(37,99,235,.10), transparent 60%),
              radial-gradient(900px 650px at 80% 0%, rgba(255, 200, 50, .10), transparent 55%),
              var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.92}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}

/* HEADER */
.header{padding:18px 0 6px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}

.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand .dot{
  width:12px;height:12px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #7dd3fc, #2563eb);
  box-shadow: 0 6px 18px rgba(37,99,235,.25);
}
.brand-name{font-size:18px}

.nav{display:flex;gap:16px;align-items:center}
.nav a{color:var(--muted);font-weight:650;font-size:14px}
.nav a:hover{color:var(--text)}

.nav-desktop{display:flex}
.mobile-head{display:none}

/* HERO */
.hero{padding:22px 0 22px}
.hero-simple{text-align:center}

.hero-title{
  margin:14px auto 10px;
  max-width: 860px;
  text-wrap: balance;
}

.hero-sub{
  max-width: 760px;
}

.hero-sub strong{
  color:#0e1726;
  font-weight:800;
}

.kicker{
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  border-radius:999px;
  color:var(--muted);
  font-weight:650;
  font-size:14px;
}
h1{
  margin:14px auto 10px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.8px;
  max-width:860px;
}
.lead{
  margin:0 auto;
  max-width:760px;
  font-size:18px;
  color:var(--muted);
  line-height:1.55;
}
.claim{
  margin:10px auto 0;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--text);
  opacity:.92;
}

/* CTA */
.cta{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:999px;
  font-weight:800;
  border:1px solid transparent;
  box-shadow: var(--shadowSoft);
}
.btn.primary{
  background: linear-gradient(180deg, #2f6df7, #1d4ed8);
  color:#fff;
}
.btn.ghost{
  background: rgba(255,255,255,.70);
  border-color: var(--line);
  color: var(--text);
  box-shadow:none;
}

/* META PILL */
.meta{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.72);
  border:1px solid var(--line);
  color:var(--text);
  font-weight:750;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

/* SECTIONS */
.section{padding:26px 0}
.section h2{margin:0 0 10px;font-size:34px;letter-spacing:-.4px}
.muted{color:var(--muted)}
.small{font-size:13px}

.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.tile{
  background: rgba(255,255,255,.70);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px 16px 18px;
  box-shadow: 0 14px 32px rgba(15,23,42,.06);
}
.icon{font-size:22px;margin-bottom:10px}
.tile h3{margin:0 0 6px;font-size:18px}
.tile p{margin:0;color:var(--muted);line-height:1.55}

.steps{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.step{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.70);
}
.step-n{
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background: rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  flex: 0 0 auto;
}
.step h3{margin:0 0 4px;font-size:16px}
.step p{margin:0;color:var(--muted);line-height:1.45}
.step code{
  background: rgba(15,23,42,.06);
  padding:2px 8px;
  border-radius:999px;
}

/* PRO */
.pro .pro-box{
  border-radius: 22px;
  border: 1px solid rgba(37,99,235,.18);
  background: radial-gradient(900px 500px at 20% 0%, rgba(37,99,235,.12), transparent 65%),
              rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  padding:20px;
}
.list{margin:14px 0 0;padding-left:18px;color:var(--muted)}
.list li{margin:8px 0}

/* FOOTER */
.footer{
  padding:22px 0 34px;
  border-top: 1px solid var(--line);
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer-right{display:flex;gap:14px}

/* MOBILE HEADER */
@media (max-width: 820px){
  .nav-desktop{display:none}
  .mobile-head{display:block;margin-top:12px}
  .topbar{display:none} /* nasconde brand + pallino su mobile */

  .logo-sticker{
    width:118px;
    height:118px;
    margin: 10px auto 26px; /* più spazio tra logo e bottoni */
    border-radius: 26px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    box-shadow:
      0 26px 60px rgba(15,23,42,.18),
      0 0 0 10px rgba(255,255,255,.55),
      0 0 0 18px rgba(37,99,235,.05); /* glow soft */
    display:flex;
    align-items:center;
    justify-content:center;
    animation: floaty 5.2s ease-in-out infinite;
  }
  .logo-sticker img{
  width:100%;
  height:100%;
  object-fit:cover;          /* riempie il contenitore */
  border-radius: 22px;       /* segue lo sticker */
  transform: scale(1.02);    /* elimina micro-bordi */
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.14));
}
  @keyframes floaty{
    0%,100%{transform: translateY(0)}
    50%{transform: translateY(-3px)}
  }

  /* 4 pills in una riga */
  .nav-pills{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:10px;
    align-items:center;
    justify-items:stretch;
    margin: 6px auto 0;
    max-width: 520px;
  }
  .pillnav{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 8px;           /* più piccole */
    border-radius:999px;
    background: var(--pill);
    border: 1px solid var(--pillBorder);
    font-weight:900;
    color: var(--text);
    box-shadow: 0 10px 18px rgba(15,23,42,.07);
    font-size:13px;             /* più piccole */
    white-space:nowrap;
  }
  .pillnav-alt{
    background: var(--pill2);
    border-color: var(--pillBorder2);
  }

  /* HERO mobile più “respirato” e meno urlato */
  .hero-title{
  font-size:30px;
  line-height:1.10;
  max-width: 680px;
}
  .lead{font-size:16.5px}
  .claim{margin-top:8px}
  .btn{width:100%;max-width:380px}

  /* meta 4: resta ordinata */
  .meta.meta-4{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
  .pill{font-size:13px}

  .grid{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .header{padding-bottom: 14px}
}

/* EXTRA: se il telefono è davvero stretto */
@media (max-width: 380px){
  .pillnav{font-size:12px;padding:9px 6px}
}