:root{
    --ink:#101214; --muted:#687382; --line:#d7dce2; --pale:#dff2f9;
    --blue:#3d86f7; --green:#18ae68; --red:#be4141; --bg:#fff; --soft:#f6f8fb;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:16.5px/1.6 "Segoe UI",Calibri,system-ui,-apple-system,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:650;letter-spacing:-.01em}
  h1{font-size:clamp(2rem,4.6vw,3.15rem)}
  h2{font-size:clamp(1.45rem,2.7vw,2rem)}
  h3{font-size:1.02rem;font-weight:660}
  p{margin:0 0 1em}
  a{color:var(--blue)}
  .muted{color:var(--muted)}
  .small{font-size:.87rem}
  .tiny{font-size:.78rem;color:var(--muted)}
  .blue{color:var(--blue)} .green{color:var(--green)} .red{color:var(--red)}

  header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:24px;height:64px}
  .logo{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.01em;margin-right:auto}
  .logo img{width:30px;height:30px;border-radius:8px}
  .powered{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
  .powered img{width:19px;height:19px}
  .nav a.lnk{color:var(--ink);text-decoration:none;font-size:.94rem}
  .nav a.lnk:hover{color:var(--blue)}
  .btn{display:inline-block;background:var(--blue);color:#fff !important;padding:11px 19px;border-radius:8px;
    text-decoration:none;font-weight:620;font-size:.95rem;border:0;cursor:pointer}
  .btn:hover{filter:brightness(.93)}
  .btn.line{background:#fff;color:var(--blue) !important;border:1px solid var(--blue)}
  .nav .btn{padding:9px 15px}
  @media(max-width:900px){.nav a.lnk,.powered{display:none}}

  section{padding:66px 0;border-top:1px solid var(--line)}
  section.soft{background:var(--soft)}
  section.first{border-top:0;padding-top:52px}
  .kicker{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:1em}
  .claim{font-size:1.12rem;font-weight:620;margin-top:1.4em}
  .lead{font-size:1.14rem;color:#3a444d;max-width:60ch}

  /* hero */
  .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  @media(max-width:900px){.hero{grid-template-columns:1fr;gap:34px}}
  .hero h1 span{display:block;color:var(--blue)}
  .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
  .iconwall{background:var(--pale);border-radius:18px;padding:24px;display:grid;
    grid-template-columns:repeat(4,1fr);gap:16px;justify-items:center}
  .iconwall img{width:68px;height:68px;border-radius:17px;box-shadow:0 6px 16px rgba(16,18,20,.12)}
  .iconwall .lab{font-size:.7rem;color:#4a5560;text-align:center;margin-top:6px;line-height:1.25}

  .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
  .cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:26px}
  .cols2{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
  @media(max-width:880px){.cols3,.cols4{grid-template-columns:1fr 1fr}.cols2{grid-template-columns:1fr;gap:26px}}
  @media(max-width:560px){.cols3,.cols4,.iconwall{grid-template-columns:1fr 1fr}}

  .step .n{font-size:.8rem;font-weight:700;color:var(--blue);letter-spacing:.08em}
  .step h3{margin:.35em 0 .3em}
  .step p{color:var(--muted);font-size:.95rem;margin:0}
  .rule{height:2px;background:var(--line);margin:22px 0 0}

  .apps{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-top:30px}
  @media(max-width:980px){.apps{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:620px){.apps{grid-template-columns:repeat(2,1fr)}}
  .app{text-align:center}
  .app img{width:62px;height:62px;border-radius:14px;box-shadow:0 5px 14px rgba(16,18,20,.13)}
  .app b{display:block;font-size:.92rem;margin-top:10px}
  .app span{display:block;font-size:.8rem;color:var(--muted)}

  .pair{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;margin-top:22px}
  .pair dt{color:var(--blue);font-weight:700}
  .pair dd{margin:0}
  .pair dt.g{color:var(--green)} .pair dt.r{color:var(--red)}

  .zero{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center}
  @media(max-width:760px){.zero{grid-template-columns:1fr;gap:18px}}
  .zero .num{font-size:clamp(5rem,14vw,9rem);font-weight:700;color:var(--green);line-height:.85;letter-spacing:-.04em}
  .zero .helm{width:96px;height:96px;opacity:.95}

  .ticks{list-style:none;padding:0;margin:20px 0 0}
  .ticks li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid var(--line)}
  .ticks li:before{content:"";position:absolute;left:2px;top:17px;width:11px;height:11px;border-radius:3px;background:var(--green)}
  .ticks li b{font-weight:660}

  form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;max-width:760px}
  form .full{grid-column:1/-1}
  label{display:block;font-size:.84rem;font-weight:620;margin-bottom:6px}
  input,textarea{width:100%;padding:11px 12px;border:1px solid #c8d0d9;border-radius:8px;font:inherit;background:#fff}
  textarea{min-height:104px;resize:vertical}
  @media(max-width:700px){form{grid-template-columns:1fr}}

  footer{background:#0f1720;color:#b9c4cf;padding:40px 0;font-size:.9rem}
  footer a{color:#8cb8ff}
  .fg{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
  @media(max-width:760px){.fg{grid-template-columns:1fr}}
  footer img.st{width:170px;background:#fff;border-radius:6px;padding:6px;margin-bottom:12px}
  .draft{background:#be4141;color:#fff;text-align:center;padding:7px 12px;font-size:.84rem}

  /* --- schede prodotto --- */
  a.logo{color:var(--ink);text-decoration:none}
  .heroicon{background:var(--pale);border-radius:18px;padding:34px;text-align:center}
  .heroicon img{width:132px;height:132px;border-radius:28px;box-shadow:0 10px 26px rgba(16,18,20,.18)}
  .heroicon span{display:block;margin-top:14px;color:#4a5560;font-size:.9rem}
  .ptable{margin-top:22px;border-top:1px solid var(--line)}
  .phead{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:14px 0 6px;
    font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--muted)}
  .prow{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:16px 0;border-top:1px solid var(--line)}
  .prow .oggi h3{color:var(--red)} .prow .con h3{color:var(--green)}
  .prow h3{margin-bottom:.25em} .prow p{margin:0;font-size:.95rem}
  @media(max-width:760px){.phead{display:none}.prow{grid-template-columns:1fr;gap:10px}
    .prow .oggi:before{content:"Oggi";display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
    .prow .con:before{content:"Con TRAMA 360";display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
  @media(max-width:880px){.cards{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.cards{grid-template-columns:1fr}}
  .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 18px 20px}
  .card h3{margin-bottom:.3em}.card p{margin:0;font-size:.94rem}
  section.soft .card{background:#fff}
  .badge b{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:4px 12px;
    font-size:.74rem;letter-spacing:.06em;margin-bottom:10px}
  .badge h3{margin-bottom:.25em}.badge p{margin:0;font-size:.94rem}
  .io ul{margin:14px 0 0;padding:0;list-style:none}
  .io .dots li{padding:9px 0 9px 22px;position:relative;border-bottom:1px solid var(--line);font-size:.96rem}
  .io .dots li:before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;background:#b7bdc5}
  .io .ticks li{font-size:.96rem}
  .up{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase}
  .cols2.gap{gap:26px 40px;align-items:start}
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
  .chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;
    padding:8px 14px 8px 8px;text-decoration:none;color:var(--ink);font-size:.92rem;background:#fff}
  .chip:hover{border-color:var(--blue);color:var(--blue)}
  .chip img{width:26px;height:26px;border-radius:7px}
  a.app{text-decoration:none;color:var(--ink);display:block;border-radius:12px;padding:8px 4px}
  a.app:hover{background:#fff;box-shadow:0 6px 18px rgba(16,18,20,.08)}
  .fonti{margin:14px 0 0;padding-left:18px;font-size:.9rem;color:var(--muted)}
  .fonti li{margin-bottom:6px}
  .ftit{color:#fff;font-weight:660;margin-bottom:8px}

  /* --- pagine di testo --- */
  .testo{max-width:70ch}
  .testo h1{margin-bottom:.4em}
  .testo h2{font-size:1.15rem;margin-top:1.6em}
  .check{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:.92rem}
  .check input{width:auto;margin-top:3px}
  #esito{margin-left:12px;color:var(--muted)}
  .cf-turnstile{min-height:0}