:root{--accent:#1a6997;--muted:#566984;--dark:#0b1220}
    *{box-sizing:border-box}
    html,body{height:100%}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; margin:0;background:linear-gradient(180deg,#f5f9ff 0%, #eef6ff 50%, #f8fbff 100%);color:var(--dark);-webkit-font-smoothing:antialiased}
    .container{max-width:1100px;margin:0 auto;padding:40px 20px}

    header{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;gap:14px;align-items:center}
    .logo-svg{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#2fb0ff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;box-shadow:0 6px 30px rgba(3,102,255,0.12);}
    nav a{margin-left:18px;color:var(--dark);text-decoration:none;font-weight:600;opacity:0.9}

    .hero{display:grid;grid-template-columns:1fr 460px;gap:36px;align-items:center;margin-top:28px}
    .eyebrow{display:inline-block;background:rgba(0,102,255,0.08);color:var(--accent);padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px}
    h1{font-size:35px;line-height:1.05;margin:14px 0 10px}
    p.lead{color:var(--muted);margin:0 0 20px;font-size:16px}
    .cta-row{display:flex;gap:12px}
    .btn{background:var(--accent);color:#fff;padding:12px 16px;border-radius:12px;border:0;cursor:pointer;font-weight:700;box-shadow:0 8px 30px rgba(3,102,255,0.12);transform:translateY(0);transition:transform .18s,box-shadow .18s}
    .btn:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(3,102,255,0.18)}
    .btn.ghost{background:transparent;color:var(--accent);border:1.5px solid rgba(3,102,255,0.12);box-shadow:none}

    .mock{position:relative;background:linear-gradient(180deg,#fff,#f7fbff);border-radius:14px;padding:18px;box-shadow:0 18px 50px rgba(11,23,56,0.06);overflow:hidden}
    .mock img{width:100%;height:320px;object-fit:cover;border-radius:10px}
    .decor-blob{position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:radial-gradient(circle at 30% 30%, rgba(0,102,255,0.14), transparent 40%);filter:blur(28px);transform:rotate(12deg)}

    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
    .card{background:linear-gradient(180deg,#fff,#fcfeff);padding:18px;border-radius:14px;box-shadow:0 10px 30px rgba(15,23,42,0.04);border:1px solid rgba(11,23,56,0.02);transform:translateY(0);transition:transform .24s,box-shadow .24s;display:flex;gap:12px;align-items:flex-start}
    .card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(11,23,56,0.06)}
    .card h3{margin:0 0 6px}
    .card p{margin:0;color:var(--muted);font-size:14px}

    /* icon styling */
    .icon{width:44px;height:44px;flex:0 0 44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,102,255,0.12),rgba(47,176,255,0.06));color:var(--accent)}
    .icon svg{width:22px;height:22px;stroke-width:1.6}

    .stats{display:flex;gap:12px;margin:22px 0}
    .stat{flex:1;background:linear-gradient(180deg,#fff,#fbfdff);padding:16px;border-radius:14px;text-align:center;border:1px solid rgba(11,23,56,0.02)}
    .stat strong{display:block;font-size:22px}
    .muted{color:var(--muted)}

    .carousel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:18px 0}
    .screenshot{background:#fff;padding:8px;border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(11,23,56,0.04)}
    .screenshot img{width:100%;height:180px;object-fit:contain}

    .cta-strip{display:flex;justify-content:space-between;align-items:center;padding:18px;border-radius:14px;background:linear-gradient(90deg,#fff,#f2fbff);box-shadow:0 10px 30px rgba(11,23,56,0.04);margin:28px 0}

    footer{padding:20px 0;color:var(--muted);display:flex;justify-content:space-between;align-items:center}

    @media (max-width:1000px){.hero{grid-template-columns:1fr;}.features{grid-template-columns:1fr 1fr}.carousel{grid-template-columns:repeat(2,1fr)} .cta-strip{display:block;} .muted{font-size:13px;}}
    @media (max-width:600px){#theflags{width:auto!important;} #theflags div{ display:block!important;}.features{grid-template-columns:1fr}.carousel{grid-template-columns:1fr}.hero h1{font-size:26px}.mock img{height:220px}.cta-strip{display:block;}.muted{font-size:13px;}}

    .reveal{opacity:0;transform:translateY(12px);transition:opacity .62s ease, transform .62s cubic-bezier(.2,.9,.3,1)}
    .reveal.show{opacity:1;transform:translateY(0)}

    .counter{font-weight:800;font-size:20px}

    .modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(3,6,23,0.48);visibility:hidden;opacity:0;transition:opacity .18s,visibility .18s}
    .modal.open{visibility:visible;opacity:1}
    .sheet{background:#fff;padding:20px;border-radius:12px;max-width:520px;width:100%;box-shadow:0 30px 80px rgba(6,12,34,0.24)}
    .field{display:flex;flex-direction:column;margin-bottom:10px}
    .field input, .field textarea{padding:10px;border-radius:8px;border:1px solid rgba(11,23,56,0.06)}

    a.inline{color:var(--accent);text-decoration:none;border-bottom:2px solid rgba(0,102,255,0.08);padding-bottom:2px}
    
    /* Styling for the #readit section */
#readit {       /* limit width for better readability */
  margin: 60px auto;       /* center section with vertical spacing */
  padding: 40px 30px;      /* inner spacing */
  background-color: #f9f9f9; /* light neutral background */
  border-radius: 16px;     /* rounded corners */
  box-shadow: 0 8px 30px rgba(0,0,0,0.08); /* subtle shadow for depth */
  line-height: 1.8;        /* improve readability */
  font-size: 18px;          /* comfortable reading size */
  font-family: 'Inter', sans-serif;
  color: #333;              /* dark gray text */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#readit p {
  margin-bottom: 18px;      /* space between paragraphs */
}

#readit ul {
  margin: 20px 0;
  padding-left: 20px;       /* indent list */
}

#readit li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 12px;
  list-style: none;
}

#readit li::before {
  content: "•";            /* custom bullet */
  position: absolute;
  left: 0;
  color: #0066ff;          /* accent color for bullets */
  font-weight: bold;
}

#readit strong {
  color: var(--accent);           /* highlight important words */
}

#readit:hover {
  transform: translateY(-3px); /* subtle lift on hover */
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

@media (max-width: 768px) {
  #readit {
    padding: 30px 20px;
    font-size: 16px;
  }
}