  <style>
    :root{
      /* Light theme palette */
      --bg:#ffffff; 
      --ink:#1a1f2b; 
      --muted:#5b6474;
      --line:#e7ecf3;
      --surface:#f7f9fc;
      --card:#ffffff;

      --accent:#1e90ff;     /* primary */
      --accent-2:#18c3a3;   /* secondary accent */
      --ok:#10b981; 
      --bad:#ef4444;

      --maxw:1120px; 
      --radius:16px; 
      --shadow:0 8px 24px rgba(17,24,39,.06);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
      color:var(--ink);
      background:var(--bg);
      line-height:1.5;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    a{color:var(--accent); text-decoration:none}
    a:focus{outline:2px solid var(--accent-2); outline-offset:2px}

    .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
    .badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#ebf5ff; color:#0f69d5; font-size:.85rem}
    .nav a{color:var(--muted); font-size:.98rem; margin-left:16px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 18px; border-radius:12px; border:1px solid var(--line);
      background:#fff; color:var(--ink); text-decoration:none; font-weight:700;
      transition:.2s transform,.2s background,.2s box-shadow
    }
    .btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,23,42,.08)}
    .btn.primary{background:linear-gradient(135deg,var(--accent),#58b6ff); color:#fff; border:none}
    .btn.ghost{background:#f8fafc}

    /* HERO */
    .hero{
      display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;
      padding:42px 0 30px
    }
    .kicker{font-size:.9rem; color:#0f69d5; text-transform:uppercase; letter-spacing:.16em}
    .h1{font-size: clamp(2rem, 2.4rem + 1vw, 3.2rem); line-height:1.08; margin:.3rem 0 .8rem; font-weight:900}
    .sub{font-size:1.125rem; color:var(--muted); max-width:60ch}
    .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
    .micro{font-size:.92rem; color:var(--muted); margin-top:10px}

    .panel{
      background:var(--card); border:1px solid var(--line); border-radius:var(--radius); 
      box-shadow:var(--shadow); padding:18px
    }
    .sim{
      width:100%; aspect-ratio:16/11; background:var(--surface); border-radius:12px; 
      position:relative; overflow:hidden; border:1px solid var(--line)
    }
    /* Demo elements (light variant) */
    .phone{
      position:absolute; width:140px; height:260px; right:24px; bottom:16px; border-radius:24px;
      background:#ffffff; border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)
    }
    .screen{position:absolute; inset:10px; border-radius:18px; background:linear-gradient(180deg,#f0f4fb,#ffffff)}
    .card{
      position:absolute; width:170px; height:110px; left:16px; top:20px; border-radius:12px;
      background:linear-gradient(135deg,#ecf4ff,#dff2ff); border:1px solid var(--line)
    }
    .card::after{content:"NFC"; position:absolute; right:10px; top:10px; font-size:.8rem; color:#4b6b95; letter-spacing:.14em}
    .pulse{
      position:absolute; left:108px; top:66px; width:10px; height:10px; border-radius:50%;
      background:var(--accent); box-shadow:0 0 0 0 rgba(30,144,255,.5); animation:pulse 2.2s infinite ease-out
    }
    @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(30,144,255,.5)} 70%{box-shadow:0 0 0 16px rgba(30,144,255,0)} 100%{box-shadow:0 0 0 0 rgba(30,144,255,0)} }
    .flow{position:absolute; width:2px; background:linear-gradient(180deg,transparent, var(--accent), transparent); top:140px; left:200px; height:0; animation:flow 4.5s infinite 1.1s}
    @keyframes flow { 0%{height:0} 30%{height:80px} 70%{height:0} 100%{height:0} }
    .crm{
      position:absolute; right:16px; top:16px; width:48%; height:48%; border-radius:10px;
      background:#ffffff; border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)
    }
    .crm::before{content:"CRM • Jane @ Booth 4"; position:absolute; left:10px; top:8px; font-size:.8rem; color:#5b6474}
    .bar{position:absolute; left:10px; right:10px; height:9px; border-radius:6px; background:#edf2f8; overflow:hidden}
    .bar.a{top:42px} .bar.b{top:60px} .bar.c{top:78px}
    .bar.fill{background:linear-gradient(90deg, var(--accent), var(--accent-2))}
    .toast{
      position:absolute; left:16px; bottom:20px; background:#0c5132; color:#eafff6;
      border:1px solid #8fdac1; padding:10px 12px; border-radius:10px; font-size:.9rem; 
      opacity:0; transform:translateY(10px); animation:toast 4.5s infinite
    }
    @keyframes toast { 0%{opacity:0; transform:translateY(10px)} 20%{opacity:1; transform:translateY(0)} 60%{opacity:1} 80%{opacity:0; transform:translateY(10px)} 100%{opacity:0} }

    /* Sections */
    section{padding:48px 0}
    h2{font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem); margin:0 0 6px}
    .lead{color:var(--muted); max-width:70ch}
    .grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:18px}
    .cardy{
      background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; 
      box-shadow:var(--shadow)
    }
    .cardy h3{margin:.2rem 0 .45rem}
    .icon{display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; background:#eef5ff; color:#0f69d5; margin-bottom:8px}

    .table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid var(--line)}
    .table th,.table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line)}
    .table tr:last-child td{border-bottom:0}
    .table th{background:#f3f7ff; color:#30415f; font-weight:800}

    .trust{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px; opacity:.9}
    .logo{height:26px; width:110px; border-radius:6px; background:#eef2f8; border:1px solid var(--line)}

    .cta-block{
      display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
      background:linear-gradient(135deg,#e8f2ff,#f2fffb); border:1px solid var(--line); border-radius:16px; padding:18px
    }
    .footer{color:var(--muted); font-size:.95rem; padding:28px 0 40px; border-top:1px solid var(--line); background:#fafbfe}

    @media (max-width: 900px){
      .hero{grid-template-columns:1fr; padding-top:8px}
      .nav .hide-mobile{display:none}
      .grid-3{grid-template-columns:1fr}
      .cta-block{flex-direction:column; align-items:flex-start}
    }

    @media (prefers-reduced-motion: reduce){
      .pulse,.flow,.toast{animation:none}
    }
  </style>
