/* style.css */
:root{
  --brand:#6d71ff;          /* primary purple */
  --brand-2:#8b8dff;
  --bg:#f7f7ff;
  --mint:#bff3ea;
  --lav:#cfd4ff;
  --peach:#f7d7cc;
  --rose:#fde6ef;
  --ink:#1f2937;
  --muted:#6b7280;
}

html,body{height:100%;}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:#fff;
}

a{color:var(--brand);}
a:hover{color:#5054ff;}

.brand-mark{
  width:34px;height:34px;
  background:rgba(109,113,255,.12);
  color:var(--brand);
}

.navbar{
  background:#fff;
  border-bottom:1px solid rgba(31,41,55,.06);
}
.navbar .btn-primary{
  background:var(--brand);
  border-color:var(--brand);
  border-radius:999px;
  padding:.45rem .9rem;
}
.navbar .btn-primary:hover{background:#585cff;border-color:#585cff;}
.nav-link{color:#374151;}
.nav-link:hover{color:var(--brand);}

.hero{
  position:relative;
  background:linear-gradient(180deg, var(--brand-2) 0%, #7d80ff 100%);
  color:#fff;
  overflow:hidden;
}
.hero .kicker{opacity:.9; font-size:.85rem; letter-spacing:.02em;}
.hero h1{font-weight:800; letter-spacing:-.02em;}
.hero .cta{
  border-radius:999px;
  padding:.7rem 1.25rem;
  border:0;
  background:#fff;
  color:var(--brand);
  font-weight:700;
}
.hero .cta:hover{background:rgba(255,255,255,.92);}

.hero-minh{min-height:520px;}
.hero-lead{max-width:42rem;opacity:.92;}

.hero .bubble{
  position:absolute;
  border-radius:9999px;
  background:rgba(255,255,255,.18);
}
.hero .bubble.b1{width:240px;height:240px;left:-70px;top:70px;}
.hero .bubble.b2{width:180px;height:180px;right:-60px;top:110px;}
.hero .bubble.b3{width:120px;height:120px;left:35%;bottom:-40px;}

.hero .avatar{
  position:absolute;
  width:58px;height:58px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.75);
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.hero .avatar img{width:100%;height:100%;object-fit:cover;}
.hero .avatar.a1{left:30px;top:110px;}
.hero .avatar.a2{right:38px;top:120px;}
.hero .avatar.a3{left:36px;bottom:70px;}
.hero .avatar.a4{right:70px;bottom:75px;}

.section{padding:4.5rem 0;}
.section-title{font-weight:800;letter-spacing:-.02em;}
.section-subtitle{color:var(--muted);max-width:46rem;}

.about-card{
  border:0;
  border-radius:24px;
  box-shadow:0 18px 50px rgba(31,41,55,.07);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:999px;
  padding:.45rem .8rem;
  background:#fff;
  border:1px solid rgba(31,41,55,.08);
  box-shadow:0 10px 30px rgba(31,41,55,.06);
  font-size:.9rem;
  color:#374151;
}
.pill svg{color:var(--brand);}
.dot{
  display:inline-block;
  width:8px;height:8px;border-radius:999px;
  background:var(--brand);
}

.feature-card{
  border:0;
  border-radius:22px;
  padding:1.6rem;
  min-height:190px;
  box-shadow:0 16px 40px rgba(31,41,55,.06);
  overflow:hidden;
  position:relative;
}
.feature-card .title{font-weight:800;}
.feature-card .link{font-weight:700;font-size:.9rem;}
.feature-card .icon{
  position:absolute;
  right:1.2rem;
  bottom:1.2rem;
  opacity:.35;
  font-size:3.5rem;
}

.bg-mint{background:var(--mint);}
.bg-lav{background:var(--lav);}
.bg-peach{background:var(--peach);}
.bg-rose{background:var(--rose);}

.footer{
  background:#fff;
  border-top:1px solid rgba(31,41,55,.06);
  padding:2.25rem 0;
}
.footer small{color:var(--muted);}

/* Legal pages */
.legal{background:var(--bg);}
.legal-top{
  background:linear-gradient(180deg, rgba(109,113,255,.16) 0%, rgba(109,113,255,0) 100%);
}
.legal-h1{font-weight:900;letter-spacing:-.02em;}
.legal .paper{
  background:#fff;
  border-radius:24px;
  box-shadow:0 18px 50px rgba(31,41,55,.07);
  padding:2.25rem;
}
.legal h2{font-weight:900; letter-spacing:-.02em;}
.legal h3{margin-top:1.75rem;font-weight:800;}
.legal h4{margin-top:1.25rem;font-weight:800;}
.legal p, .legal li{color:#374151;line-height:1.65;}
.legal .meta{color:var(--muted);}

.badge-soft{
  background:rgba(109,113,255,.12);
  color:var(--brand);
  border:1px solid rgba(109,113,255,.2);
  font-weight:700;
}

/* slightly bigger hero padding on large screens */
@media (min-width: 992px){
  .py-lg-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important;}
}