:root{
  --bg:#0b1020;
  --panel:rgba(18,26,42,.92);
  --line:rgba(160,180,210,.18);
  --text:#e9eefc;
  --muted:rgba(230,240,255,.72);
  --primary:#2f6bff;
  --primary2:#8f65ff;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}
a{ color:inherit; text-decoration:none; }


/* Header */
.top{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.logo{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, rgba(47,107,255,.95), rgba(143,101,255,.88));
  color:#fff;
  flex: 0 0 auto;
}
.brandText{
  min-width:0;
}
.brandName{
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.1;
}
.brandSub{
  font-size:12px;
  color:var(--muted);
  line-height:1.1;
  margin-top:2px;
}

/* Desktop nav */
.navDesktop{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.navLink{
  font-weight:800;
  font-size:13px;
  color:var(--muted);
  padding:8px 8px;
  border-radius:12px;
  white-space:nowrap;
}
.navLink:hover{
  background:rgba(255,255,255,.06);
  color:var(--text);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-weight:900;
  white-space:nowrap;
}
.btn.primary{
  border-color:rgba(47,107,255,.35);
  background: linear-gradient(135deg, rgba(47,107,255,.95), rgba(143,101,255,.88));
  color:#fff;
}
.btn.ghost{ background:rgba(255,255,255,.02); }
.btn.big{ padding:12px 16px; border-radius:16px; }
.btn.full{ width:100%; }
.btn.small{ padding:10px 12px; border-radius:14px; }

.btn.icon{
  width:44px;
  height:44px;
  padding:0;
  font-size:18px;
}

/* Mobile header */
.navMobile{ display:none; align-items:center; gap:8px; }
@media (max-width: 860px){
  .navDesktop{ display:none; }
  .navMobile{ display:flex; }
}

/* Mobile menu */
.mobileMenu{
  border-bottom:1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
}
.mobileMenu[data-open="1"]{ max-height: 420px; }
.mobileMenuIn{
  max-width:1100px;
  margin:0 auto;
  padding:10px 14px 14px;
  display:grid;
  gap:10px;
}
.mLink{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-weight:900;
}
.mDivider{
  height:1px;
  background: color-mix(in srgb, var(--line) 85%, transparent);
  margin:2px 0;
}

/* Page layout */
.wrap{ max-width:1100px; margin:0 auto; padding:18px 14px 26px; }

.hero{
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
  padding-top:12px;
}
@media (min-width: 940px){
  .hero{ grid-template-columns: 1.1fr 0.9fr; align-items:start; }
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}

.preHeadline{
  margin-top:10px;
  color: color-mix(in srgb, var(--muted) 85%, var(--text));
  font-weight:900;
  font-size:13px;
  letter-spacing:.2px;
}

.h1{
  font-size:34px;
  line-height:1.05;
  margin:12px 0 10px;
}
@media (min-width: 940px){ .h1{ font-size:44px; } }

.grad{
  background: linear-gradient(135deg, rgba(47,107,255,1), rgba(143,101,255,1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.sub{
  color:var(--muted);
  line-height:1.45;
  font-size:14px;
  max-width: 60ch;
}

.ctaRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.trust{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:14px;
}
@media (min-width: 520px){ .trust{ grid-template-columns:1fr 1fr 1fr; } }
.tItem{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}
.tItem b{ color:var(--text); }
.emoji{ font-size:18px; }

/* Mock UI */
.mock{
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}
.mockTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.dots{ display:flex; gap:6px; }
.dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.2); }
.dot.red{ background:#ff5b5b; }
.dot.y{ background:#ffd45b; }
.dot.g{ background:#5bff9a; }
.mockTitle{ color:var(--muted); font-weight:900; font-size:12px; }

.mockBody{ padding:12px; display:grid; gap:10px; }
.mockPdf{
  height:180px;
  border-radius:16px;
  border:1px dashed rgba(160,180,210,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.mockBar{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(160,180,210,.18);
  background:rgba(255,255,255,.03);
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}
.pill.danger{ border-color:rgba(255,80,80,.35); }

.mockChat{ display:grid; gap:8px; }
.chatBubble{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(160,180,210,.18);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:13px;
}
.chatBubble.ai{
  border-color: rgba(47,107,255,.30);
  color: var(--text);
}

.miniStats{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
.stat{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:10px;
}
.stat .k{ font-size:12px; color:var(--muted); font-weight:800; }
.stat .v{ font-weight:900; margin-top:6px; }

/* Sections */
.section{ margin-top:18px; }
.sectionHead h2{ margin:0; font-size:20px; }
.hint{ color:var(--muted); font-size:13px; line-height:1.35; margin:6px 0 0; }

.cards3{ display:grid; gap:12px; margin-top:12px; grid-template-columns: 1fr; }
@media (min-width: 780px){ .cards3{ grid-template-columns: 1fr 1fr 1fr; } }

.card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:14px;
}
.icon{
  width:34px; height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(47,107,255,.14);
  border:1px solid rgba(47,107,255,.25);
  font-weight:900;
}
.card h3{ margin:10px 0 6px; }
.card p{ margin:0; color:var(--muted); font-size:13px; line-height:1.4; }

.features{ display:grid; gap:12px; margin-top:12px; grid-template-columns: 1fr; }
@media (min-width: 780px){ .features{ grid-template-columns: 1fr 1fr; } }
.f{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:14px;
}
.fTitle{ font-weight:900; }
.fBody{ margin-top:6px; color:var(--muted); font-size:13px; line-height:1.4; }

.pricing{ display:grid; gap:12px; margin-top:12px; grid-template-columns: 1fr; }
@media (min-width: 980px){ .pricing{ grid-template-columns: 1fr 1fr 1fr; } }
.priceCard{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:14px;
}
.priceCard.hi{
  border-color: rgba(47,107,255,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.pTop{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.pName{ font-weight:900; font-size:14px; }
.pSub{ color:var(--muted); font-size:12px; margin-top:3px; }
.pPrice{ font-weight:900; font-size:22px; }
.pPrice span{ font-size:12px; color:var(--muted); }
.list{ margin:10px 0 0; padding-left:16px; color:var(--muted); font-size:13px; }
.list b{ color:var(--text); }
.fine{ color:var(--muted); font-size:12px; margin-top:10px; }

/* CTA + Footer */
.cta{
  margin-top:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:16px;
  text-align:center;
}
.cta h2{ margin:0; }
.foot{
  margin-top:18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.footRow{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footBrand{ display:flex; gap:10px; align-items:center; }
.small{ color:var(--muted); font-size:12px; }
.tiny{ color:var(--muted); font-size:12px; margin-top:10px; }

/* ================================
   Mobile overlap fix + non-grid fallback
   ================================ */

/* Improve readability on tiny screens */
body{ line-height: 1.45; }

/* Hero: force clean vertical stack on small screens */
@media (max-width: 520px){
  .hero{
    display: block !important;
  }
  .heroLeft, .heroRight{
    width: 100% !important;
  }

  .badge, .preHeadline{
    display: block !important;
  }

  .h1{
    font-size: 28px !important;
    line-height: 1.12 !important;
    margin: 10px 0 10px !important;
  }

  .sub{
    font-size: 13px !important;
    margin: 0 !important;
  }

  .ctaRow{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .trust{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .mockBody{
    gap: 12px !important;
  }

  /* Keep the mock sections from squeezing */
  .mockPdf{ height: 160px !important; }
  .mockBar{ flex-wrap: wrap !important; gap: 8px !important; }

  .miniStats{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* VERY IMPORTANT: fallback for browsers that don't support CSS grid well (e.g., Opera Mini) */
@supports not (display: grid){
  .hero, .trust, .miniStats, .cards3, .features, .pricing{
    display: block !important;
  }

  .tItem, .stat, .card, .f, .priceCard{
    margin-top: 12px !important;
  }

  .ctaRow{ display: block !important; }
  .ctaRow .btn{ display: block !important; width: 100% !important; margin-top: 10px !important; }
}

/* =========================
   Mobile header: no overlap
   ========================= */
@media (max-width: 860px){
  .top{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Brand never pushes into buttons */
  .brand{
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brandText{
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Keep brand name on one line */
  .brandName{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 48vw !important; /* prevents pushing buttons */
  }

  /* Hide subtitle on small screens (prevents wrapping) */
  .brandSub{
    display: none !important;
  }

  /* Ensure mobile actions stay compact */
  .navMobile{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .navMobile .btn.primary.small{
    padding: 10px 12px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  .navMobile .btn.icon{
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* Ultra small phones */
@media (max-width: 360px){
  .brandName{ max-width: 44vw !important; }
  .navMobile .btn.primary.small{ padding: 9px 10px !important; }
}