:root{
    --bg:#f1f4ff;
    --ink:#1b1f31;
    --muted:#5b6480;
    --soft:#8a93ad;
    --line:#e4e9fb;
    --card:#ffffff;
    --radius:22px;
    --shadow:0 14px 44px rgba(56,66,128,.12);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Segoe UI","Helvetica Neue","Helvetica",Arial,sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

  .eyebrow{
    font-size:12px;font-weight:600;letter-spacing:.3em;
    text-transform:uppercase;color:var(--muted);
  }
  h1{
    font-size:clamp(40px,7vw,76px);
    line-height:1.04;font-weight:300;letter-spacing:-.02em;
    margin:18px 0 20px;
  }
  h2{
    font-size:clamp(24px,4vw,40px);
    line-height:1.15;font-weight:400;letter-spacing:-.01em;
    margin:12px 0 14px;
  }
  .lede,.lead{color:var(--muted);font-size:clamp(16px,2vw,19px);max-width:640px}
  .lead{color:var(--soft);font-size:15px}

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  .d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.28s}.d4{animation-delay:.38s}

  header{padding:clamp(56px,10vw,110px) 0 28px}
  header .lede{margin-top:0}

  main .wrap section{padding:clamp(56px,8vw,96px) 0 0}

  .stage{margin:10px 0 0}
  .stage img,.full img{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:var(--shadow)}

  .section-head{max-width:680px;margin-bottom:34px}

  .grid{display:grid;gap:22px}
  .grid.two{grid-template-columns:1fr 1fr}
  .grid img{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:var(--shadow)}

  /* feature cards */
  .features{display:grid;gap:18px;margin-top:26px}
  .features .card{
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);padding:26px 28px;
  }
  .features .card h3{font-size:18px;font-weight:600;margin-bottom:6px}
  .features .card p{color:var(--muted);font-size:15px}

  /* FAQ */
  .faq{margin-top:26px}
  .faq .item{
    background:var(--card);border:1px solid var(--line);
    border-radius:16px;padding:22px 26px;margin-bottom:14px;
  }
  .faq .q{font-weight:600;font-size:17px;margin-bottom:8px}
  .faq .a{color:var(--muted);font-size:15px}

  .closing-line{text-align:center;padding:30px 0 10px;color:var(--muted);font-size:15px}

  footer{
    margin-top:clamp(64px,9vw,110px);
    border-top:1px solid var(--line);
    padding:34px 0 48px;
    text-align:center;
    color:var(--soft);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  }

  @media (max-width:720px){
    .grid.two{grid-template-columns:1fr}
    header{padding-top:60px}
  }