:root{
    --ink:#0B2540;
    --blue:#185FA5;
    --blue-deep:#0F4676;
    --accent:#4C9FE0;
    --sky:#EEF4FA;
    --white:#FFFFFF;
    --text:#142A3D;
    --text-soft:#5B6E82;
    --line: rgba(20,42,61,0.12);
    --radius: 10px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--white);
    color:var(--text);
    font-family:'IBM Plex Sans', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Space Grotesk', sans-serif;
    color:var(--ink);
    line-height:1.15;
    letter-spacing:-0.01em;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
  section{padding:96px 0;}
  @media (max-width:720px){ section{padding:64px 0;} }

  :focus-visible{outline:2px solid var(--blue); outline-offset:3px;}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:20;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:18px; padding-bottom:18px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700; font-size:1.15rem; color:var(--ink);
  }
  .brand .logo-mark{width:40px;height:40px;border-radius:9px;}
  nav{display:flex; gap:32px; font-size:0.95rem;}
  nav a{color:var(--text-soft); transition:color .15s;}
  nav a:hover{color:var(--ink);}
  .nav-cta{
    display:inline-flex; align-items:center;
    background:var(--blue); color:var(--white);
    padding:9px 18px; border-radius:6px;
    font-size:0.9rem; font-weight:500;
    transition:background .15s;
  }
  .nav-cta:hover{background:var(--blue-deep);}

  /* ---------- hero ---------- */
  .hero{
    padding-top:90px; padding-bottom:70px;
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;
  }
  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr; gap:48px;}
    .hero{padding-top:56px;}
  }
  .eyebrow-tag{
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.85rem; color:var(--text-soft);
    margin-bottom:22px;
  }
  .eyebrow-tag .pip{width:6px;height:6px;border-radius:50%;background:var(--blue);}
  .hero h1{
    font-size:clamp(2.2rem, 4.6vw, 3.4rem);
    max-width:11ch;
    margin-bottom:22px;
  }
  .hero p.lead{
    font-size:1.15rem; color:var(--text-soft);
    max-width:38ch; margin-bottom:34px;
  }
  .hero-form{
    display:flex; gap:10px; max-width:440px; flex-wrap:wrap;
  }
  .hero-form input[type=text]{
    flex:1; min-width:200px;
    padding:14px 16px; border-radius:6px;
    border:1px solid var(--line); background:#fff;
    font-family:'IBM Plex Sans', sans-serif; font-size:0.95rem;
  }
  .hero-form input[type=text]:focus{border-color:var(--blue);}
  .btn-primary{
    padding:14px 22px; border-radius:6px; border:none;
    background:var(--blue); color:#fff;
    font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:0.95rem;
    cursor:pointer; transition:background .15s;
  }
  .btn-primary:hover{background:var(--blue-deep);}
  .hero-note{font-size:0.85rem; color:var(--text-soft); margin-top:12px;}

  /* ---------- QR visual ---------- */
  .qr-stage{
    position:relative; display:flex; justify-content:center;
  }
  .qr-card{
    background:var(--ink); border-radius:20px;
    padding:36px; width:min(320px, 100%);
    box-shadow:0 24px 60px -20px rgba(11,37,64,0.45);
  }
  .qr-grid{
    background:#fff; border-radius:10px; padding:18px;
    aspect-ratio:1/1;
  }
  .qr-caption{
    color:var(--white); font-family:'Space Grotesk', sans-serif;
    font-size:0.9rem; margin-top:18px; text-align:center; opacity:0.85;
  }
  @keyframes qrPulse{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.035); }
    100%{ transform:scale(1); }
  }
  .qr-grid{ animation:qrPulse 2.6s ease-in-out 1; }
  @media (prefers-reduced-motion:reduce){ .qr-grid{ animation:none; } }

  /* ---------- network strip ---------- */
  .networks{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:36px 0;
    background:var(--sky);
  }
  .networks .wrap{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:20px;
  }
  .networks-label{
    font-size:0.85rem; color:var(--text-soft); white-space:nowrap;
  }
  .network-list{
    display:flex; gap:34px; flex-wrap:wrap;
    font-family:'Space Grotesk', sans-serif; font-weight:600;
    color:var(--ink); font-size:1rem; opacity:0.85;
  }

  /* ---------- problem ---------- */
  .problem .wrap{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px;
  }
  @media (max-width:860px){ .problem .wrap{grid-template-columns:1fr; gap:32px;} }
  .problem h2{font-size:clamp(1.7rem,3vw,2.2rem); max-width:12ch;}
  .problem-points{display:flex; flex-direction:column; gap:26px;}
  .section-lead{color:var(--text-soft); font-size:1.02rem; max-width:52ch; margin-bottom:4px;}
  .problem-point{
    padding-left:20px; border-left:2px solid var(--blue);
  }
  .problem-point h3{font-size:1.05rem; margin-bottom:6px;}
  .problem-point p{color:var(--text-soft); font-size:0.98rem; max-width:46ch;}

  /* ---------- how it works ---------- */
  .how{background:var(--ink); color:var(--white);}
  .how h2{color:var(--white); font-size:clamp(1.7rem,3vw,2.2rem); max-width:14ch; margin-bottom:56px;}
  .how-steps{
    display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  }
  @media (max-width:860px){ .how-steps{grid-template-columns:1fr; gap:36px;} }
  .step-num{
    font-family:'Space Grotesk', sans-serif; font-size:0.9rem;
    color:var(--accent); margin-bottom:14px;
  }
  .how-steps h3{color:var(--white); font-size:1.15rem; margin-bottom:10px;}
  .how-steps p{color:rgba(255,255,255,0.72); font-size:0.97rem; max-width:32ch;}
  .step-divider{
    height:1px; background:rgba(255,255,255,0.18); margin-top:16px; margin-bottom:0;
    display:none;
  }

  /* ---------- lipa namba ---------- */
  .lipanamba{
    background:var(--blue); color:#fff;
  }
  .lipanamba-inner{ max-width:56ch; }
  .lipanamba-badge{
    display:inline-flex; align-items:center;
    font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.85rem;
    background:rgba(255,255,255,0.18); color:#fff;
    padding:6px 14px; border-radius:20px; margin-bottom:20px;
  }
  .lipanamba h2{
    color:#fff; font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:18px; max-width:14ch;
  }
  .lipanamba p{
    color:rgba(255,255,255,0.92); font-size:1.02rem; max-width:52ch;
  }

  /* ---------- waitlist ---------- */
  .waitlist{
    background:var(--sky); border:1px solid var(--line); border-radius:16px;
    padding:56px; margin:0 auto;
  }
  @media (max-width:720px){ .waitlist{padding:32px 22px;} }
  .waitlist-inner{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
  }
  @media (max-width:860px){ .waitlist-inner{grid-template-columns:1fr; gap:32px;} }
  .waitlist h2{font-size:clamp(1.6rem,3vw,2rem); max-width:14ch; margin-bottom:14px;}
  .waitlist p.sub{color:var(--text-soft); max-width:36ch;}
  .form-grid{display:flex; flex-direction:column; gap:14px;}
  .form-grid label{font-size:0.85rem; color:var(--text-soft); margin-bottom:2px; display:block;}
  .form-grid input, .form-grid select{
    width:100%; padding:13px 14px; border-radius:6px;
    border:1px solid var(--line); background:var(--white);
    font-family:'IBM Plex Sans', sans-serif; font-size:0.95rem;
  }
  .form-grid input:focus, .form-grid select:focus{border-color:var(--blue); background:#fff;}
  .form-row{display:flex; flex-direction:column; gap:6px;}
  .form-success{
    display:none; background:#E7F1FB; border:1px solid var(--blue);
    color:var(--blue-deep); padding:14px 16px; border-radius:6px; font-size:0.92rem;
    margin-top:6px;
  }
  .form-success.show{display:block;}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line); padding:44px 0;}
  footer .wrap{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:16px;
  }
  .foot-brand{font-family:'Space Grotesk', sans-serif; font-weight:600; color:var(--ink);}
  .foot-note{font-size:0.85rem; color:var(--text-soft);}