<style>
    :root{
      --bg:#ffffff;
      --text:#0b1220;
      --muted:#4b5563;
      --line:#e5e7eb;
      --brand:#0f5fff;
      --brand2:#0b3aa4;
      --good:#0f766e;
      --shadow: 0 10px 30px rgba(2, 8, 23, .10);
      --radius: 18px;
      --max: 1120px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.55;
    }
    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 18px;}

    /* ===== Header (UPDATED) ===== */
    header{
      position:sticky; top:0; z-index:50;
      background:rgba(255,255,255,.88);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    .topRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 0 8px;
    }
    .brandBlock{
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      min-width: 0;
    }
    .mark{
      width:34px; height:34px; border-radius:10px;
      background:linear-gradient(135deg, var(--brand), var(--brand2));
      box-shadow: var(--shadow);
      flex:0 0 auto;
    }
    .brandText{
      display:flex;
      flex-direction:column;
      min-width:0;
    }
    .siteName{
      font-family:Poppins, Inter, sans-serif;
      font-weight:900;
      letter-spacing:.2px;
      line-height:1.05;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .tagline{
      font-weight:700;
      color:rgba(11,18,32,.68);
      font-size:12.5px;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .headerCtas{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }

    /* Nav links now horizontal UNDER the logo row */
    .navRow{
      padding:8px 0 12px;
    }
    nav.navlinks{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    nav.navlinks a{
      text-decoration:none;
      font-weight:800;
      color:rgba(11,18,32,.75);
      padding:8px 10px;
      border-radius:12px;
    }
    nav.navlinks a:hover{background:#f1f5f9; color:var(--text);}

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      text-decoration:none;
      border-radius:14px;
      padding:12px 16px;
      font-weight:900;
      border:1px solid transparent;
      transition:.15s ease;
      white-space:nowrap;
    }
    .btn.primary{
      color:#fff;
      background:linear-gradient(135deg, var(--brand), var(--brand2));
      box-shadow: var(--shadow);
      background-color:#336699;
    }
    .btn.primary:hover{transform: translateY(-1px);}
    .btn.ghost{
      border-color:var(--line);
      background:#fff;
    }
    .btn.ghost:hover{background:#f8fafc;}

    /* ===== Page styles (same as prior) ===== */
    .hero{
      padding:20px 0 26px;
      border-bottom:1px solid var(--line);
      position:relative;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute; inset:-80px -120px auto -120px;
      height:420px;
      background:
        radial-gradient(closest-side, rgba(15,95,255,.14), transparent 65%),
        radial-gradient(closest-side, rgba(11,58,164,.12), transparent 60%);
      pointer-events:none;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:22px;
      align-items:stretch;
      position:relative;
      z-index:2;
    }
    .kicker{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:5px 8px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      font-weight:800;
      color:rgba(11,18,32,.78);
      width:max-content;
      font-size:10px;
    }
    .dot{
      width:10px; height:10px; border-radius:999px;
      background: #0f766e;
      box-shadow:0 0 0 4px rgba(15,118,110,.12);
    }
    h1,h2,h3,h4{font-family:Poppins, Inter, sans-serif; margin:0 0 10px; color: #336699;text-align:center;}
    h1{font-size: clamp(30px, 4vw, 46px); line-height:1.05;}
    p {font-size: 1.2rem;}
    .sub{color:var(--muted); font-size: clamp(16px, 2vw, 18px); max-width:60ch;}
    .proofRow{
      display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
      color:rgba(11,18,32,.78); font-weight:800;
    }
    .pill{
      padding:9px 12px;
      border-radius:999px;
      background:yellow;
      border:1px solid var(--line);
    }
    .heroCard{
      background:#0b1220;
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow);
      position:relative;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height: 330px;
    }
    .heroImg{
      position:absolute; inset:0;
      background-image:
        linear-gradient(180deg, rgba(11,18,32,.25), rgba(11,18,32,.82)),
        url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&q=70&w=1400");
      background-size:cover;
      background-position:center;
      filter:saturate(1.05);
    }
    .heroCardInner{
      position:relative;
      padding:18px;
      display:flex;
      flex-direction:column;
      height:100%;
      gap:12px;
    }
    .heroMini{color:#e5e7eb; font-weight:900; font-size:1.5rem;text-align:center;}
    .heroMini strong{color:#fff;}
    .heroList{margin:0; padding:0 0 0 18px; color:#e5e7eb; font-weight:650;}
    .heroCtas{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap;}

    .section{padding:36px 0; border-bottom:1px solid var(--line);}
    .sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;}
    .sectionHead p{margin:0; color:var(--muted); max-width:70ch;}

    .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px;}
    .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:18px;
      box-shadow: 0 8px 22px rgba(2,8,23,.06);
    }
    .cardh{
      background:beige;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:18px;
      box-shadow: 0 8px 22px rgba(2,8,23,.06);
    }
    .card h3{margin-bottom:6px; font-size:18px;}
    .card p{margin:0; color:var(--muted);}

    .icon{
      width:44px; height:44px; border-radius:14px;
      background:linear-gradient(135deg, rgba(15,95,255,.18), rgba(11,58,164,.12));
      display:grid; place-items:center;
      margin-bottom:10px;
      border:1px solid rgba(15,95,255,.18);
      font-weight:900;
    }
   table{
      width:100%;
      border-collapse:collapse;
      min-width: 720px;
      background:#fff;
    }
    th, td{
      padding:12px 12px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
    }
    .pricing{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-top:18px;
    }
    .priceCard{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      padding:18px;
      box-shadow: 0 8px 24px rgba(2,8,23,.06);
      display:flex;
      flex-direction:column;
      min-height: 340px;
    }
    .priceTop{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
    .tag{
      font-weight:900;
      font-size:12px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      color:rgba(11,18,32,.75);
      background:#f8fafc;
    }
    .price{
      font-family:Poppins, Inter, sans-serif;
      font-weight:900;
      font-size:32px;
      margin:10px 0 0;
    }
    .per{color:var(--muted); font-weight:800; font-size:13px;}
    .ul{
      margin:12px 0 16px;
      padding:0 0 0 18px;
      color:rgba(11,18,32,.86);
      font-weight:650;
    }
    .ul li{margin:7px 0;
      font-size:1rem;}
    .note{
      margin-top:auto;
      color:rgba(11,18,32,.74);
      font-weight:800;
      font-size:13px;
    }
    .featured{border:1px solid rgba(15,95,255,.35); position:relative;}
    .featured::after{
      content:"Most popular";
      position:absolute; top:-12px; right:16px;
      background:linear-gradient(135deg, var(--brand), var(--brand2));
      color:#fff;
      font-weight:900;
      font-size:12px;
      padding:7px 10px;
      border-radius:999px;
      box-shadow: var(--shadow);
    }

    .split{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:18px; align-items:stretch;}
    details{border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:#fff;}
    details + details{margin-top:10px;}
    summary{cursor:pointer; font-weight:900; font-family:Poppins, Inter, sans-serif;}

    footer{padding:28px 0; color:rgba(11,18,32,.75);}
    .footGrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:12px; align-items:start;}

    /* Responsive */
    @media (max-width: 980px){
      .heroGrid{grid-template-columns:1fr;}
      .pricing{grid-template-columns:1fr 1fr;}
      .grid3{grid-template-columns:1fr;}
      .split{grid-template-columns:1fr;}
      .footGrid{grid-template-columns:1fr;}
      .tagline{white-space:normal;}
      h1 {font-size:300%;}
    }
    @media (max-width: 720px){
      .hero {padding-top:10px}
      .pricing{grid-template-columns:1fr;}
      nav.navlinks{gap:6px;}
      nav.navlinks a{padding:8px 9px;}
      .siteName {display:none}
      h1 {font-size:200%;}
      .proofRow {display:none;}
    }
    @media (max-width: 520px){
      .hero {padding-top:10px}
      .pricing{grid-template-columns:1fr;}
      nav.navlinks{gap:6px;}
      nav.navlinks a{padding:8px 9px;}
      h1 {font-size:150%;}
    }
    @media (max-width: 470px){
      .hero {padding-top:10px}
      .pricing{grid-template-columns:1fr;}
      nav.navlinks{gap:6px;}
      nav.navlinks a{padding:8px 9px;}
      nav.navlinks {display:none;}
      span.mark {display:none;}
      h1 {font-size:125%;}
      h2 {font-size:125%;}
    }
@media (max-width: 375px){
      .hero {padding-top:0px}
      .pricing{grid-template-columns:1fr;}
      nav.navlinks{gap:0px;}
      nav.navlinks a{padding:0px 0px;}
      nav.navlinks {display:none;}
      span.mark {display:none;}
      h1 {font-size:125%;}
      h2 {font-size:125%;}
    } 
  </style>

 