:root{
  --lav:#ede6fb;
  --lav-deep:#dcd0f6;
  --ink:#3b2e5a;
  --brand:#6e56cf;         /* button */
  --brand-ink:#fff;        /* button text */
  --card:#ffffff;
  --muted:#6c6a7a;
  --radius:18px;
  --shadow:0 10px 28px rgba(31,27,45,.10);
}

* { box-sizing:border-box }
html, body { margin:0; padding:0 }
body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:#f6f4fb;
  line-height:1.6;
  scroll-behavior:smooth;
}

.wrap{ width:min(1100px, 92%); margin-inline:auto }

a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }

/* Header */
.site-header{
  position:sticky; top:0; z-index:30;
  background:#fff; box-shadow:var(--shadow);
}
.header-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.brand img{ height:40px; width:auto }
.nav{ display:none; gap:20px; align-items:center; }
.nav a{ color:var(--ink); font-weight:600 }
.nav .btn{ color:#fff; text-decoration:none }
.hamburger{
  width:40px; height:40px; border:none; background:transparent; display:grid; place-items:center; border-radius:10px;
}
.hamburger span{ width:20px; height:2px; background:var(--ink); display:block; margin:3px 0 }

/* Mobile nav open */
.nav.open{ display:flex; position:absolute; right:14px; top:62px; background:#fff; padding:12px 14px; border-radius:12px; box-shadow:var(--shadow); flex-direction:column; }

/* Desktop nav */
@media (min-width:900px){
  .hamburger{ display:none }
  .nav{ display:flex }
}

/* Buttons */
.btn{
  background:var(--brand);
  color:var(--brand-ink)!important;
  padding:12px 20px;
  border-radius:14px;
  font-weight:700;
  box-shadow:var(--shadow);
  display:inline-block;
  border:2px solid transparent;
}
.btn.small{ padding:10px 16px; border-radius:12px }
.btn:hover{ filter:brightness(.95); text-decoration:none }
.ghost{
  border:2px solid var(--brand);
  color:var(--brand); padding:10px 16px; border-radius:12px; font-weight:700; display:inline-block;
}

/* Hero */
.hero{
  background:linear-gradient(180deg, var(--lav) 0%, #fff 100%);
  padding:60px 0 30px;
}
.hero-inner{
  display:grid; gap:28px; align-items:center;
}
.hero-copy .tag{
  color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin:0 0 8px
}
.hero h1{
  font-size:clamp(28px, 4.5vw, 52px);
  line-height:1.1; margin:0 0 10px;
}
.hero .sub{ max-width:56ch }
.cta{ display:flex; gap:12px; margin:18px 0 10px }
.badges{ display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:14px 0 0; list-style:none }
.badges li{ background:#fff; padding:8px 12px; border-radius:999px; border:1px solid var(--lav-deep) }

.hero-card{
  display:grid; place-items:center;
  background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)
}
.hero-card img{ max-width:380px; width:100%; height:auto }

@media (min-width:900px){
  .hero-inner{ grid-template-columns:1.1fr .9fr }
}

/* Sections */
.section{ padding:54px 0 }
.section.alt{ background:#fff }
.section h2{
  font-size:clamp(24px, 3.5vw, 38px);
  margin:0 0 12px;
}

/* Cards & grids */
.grid-3{ display:grid; gap:16px }
.grid-2{ display:grid; gap:12px }
@media (min-width:760px){ .grid-2{ grid-template-columns:1fr 1fr } }
@media (min-width:900px){ .grid-3{ grid-template-columns:repeat(3,1fr) } }

.card{
  background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); border:1px solid var(--lav-deep);
}
.card h3{ margin:0 0 6px }
.list{ padding-left:18px; margin:8px 0 0 }

/* Why pills */
.pill{
  background:#fff; border-radius:18px; padding:18px; box-shadow:var(--shadow); border:1px solid var(--lav-deep)
}
.pill h4{ margin:0 0 6px }

/* Pricing */
.price{
  background:#fff; border-radius:20px; padding:20px; text-align:center; box-shadow:var(--shadow); border:1px solid var(--lav-deep)
}
.price .amt{ font-size:32px; font-weight:800; margin:6px 0 }
.price .note{ color:var(--muted); margin:0 0 10px }
.price.featured{ border-color:var(--brand); box-shadow:0 14px 36px rgba(110,86,207,.25) }

.fine{ color:var(--muted); margin-top:8px }

/* Form */
.form{ background:#fff; border-radius:20px; padding:18px; box-shadow:var(--shadow); border:1px solid var(--lav-deep) }
label{ display:block; font-weight:600; margin:8px 0 6px }
input, textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--lav-deep); border-radius:12px; font:inherit; outline:none; background:#fbfaff;
}
input:focus, textarea:focus{ border-color:var(--brand) }
.form-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px }

/* Footer */
.footer{ padding:40px 0; background:#fff; border-top:1px solid var(--lav-deep); margin-top:30px }
.footer-inner{ text-align:center; display:grid; gap:8px }
.brand-mini img{ height:34px }

/* Mobile action bar */
.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:10px; justify-content:center; align-items:center;
  padding:10px; background:rgba(255,255,255,.9); backdrop-filter:saturate(130%) blur(8px);
  border-top:1px solid var(--lav-deep);
}
.action-bar .a-btn{
  background:var(--brand); color:#fff; font-weight:800; padding:10px 16px; border-radius:12px; text-decoration:none
}
.action-bar .a-link{
  font-weight:700; color:var(--ink); padding:8px 10px; border-radius:10px; background:#f4f1ff; text-decoration:none
}
@media (min-width:900px){ .action-bar{ display:none } }
.section { max-width: 900px; margin: 0 auto; padding: 48px 20px; }
.kicker { opacity:.8; margin-top:6px; }
.intro { margin:16px 0 12px; line-height:1.6; }
.divider { height:1px; background:rgba(0,0,0,.08); margin:24px 0; }
.grid.two { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
@media (max-width:700px){ .grid.two { grid-template-columns:1fr; } }
.grid.two h3 { margin:0 0 6px; }
.bullets { margin:10px 0 0 0; padding-left:18px; }
.bullets li { margin:6px 0; }
.bullets.compact li { margin:2px 0; }
.note { margin:10px 0; font-style:italic; }
.cta { margin-top:16px; }
.tagline { text-align:center; margin-top:28px; opacity:.9; }