:root{
  /* Base neutrals */
  --bg: #FAFAFC;
  --card: rgba(255,255,255,.88);
  --text: #0E1020;
  --muted: #5C5F78;
  --muted2: #7A7DA0;
  --border: rgba(14,16,32,.08);

  /* Shadows */
  --shadow: 0 18px 48px rgba(16,18,40,.08);
  --shadowSoft: 0 10px 26px rgba(16,18,40,.07);

  --r-xl: 22px;
  --r-lg: 16px;

  /* Purple brand accents */
  --brandA: #8B7CF6;   /* soft lavender */
  --brandB: #6D5EF5;   /* main purple */
  --brandC: #B6AEFF;   /* light highlight */
}

* { box-sizing: border-box; }

body{
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(139,124,246,.14), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(182,174,255,.14), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.container{ max-width: 1120px; }

/* NAV */
.nav-shell{
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(12,18,32,.06);
  border-radius: 999px;
}

.brand-logo{ width: 34px; height: 34px; }
.brand-name{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text);
}

.nav-linkx{
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}
.nav-linkx:hover{ color: var(--text); }

/* BUTTONS */
.btn-cta{
  background: linear-gradient(135deg, var(--brandA) 0%, var(--brandB) 100%);
  border: none;
  box-shadow: 0 14px 28px rgba(109,94,245,.20);
  border-radius: 999px;
  font-weight: 800;
  padding: .78rem 1.15rem;
  color: #fff;
}
.btn-cta:hover{
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 18px 40px rgba(109,94,245,.22);
}

.btn-soft{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  font-weight: 800;
  padding: .78rem 1.15rem;
  color: var(--text);
}
.btn-soft:hover{
  background: rgba(255,255,255,.95);
  transform: translateY(-1px);
}

/* HERO */
.hero{
  padding-top: 4.25rem;
  padding-bottom: 2.25rem;
}

.kicker{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: var(--muted);
  font-weight: 800;
  font-size: .9rem;
}
.kicker-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

.hero h1{
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  margin-top: .9rem;
  margin-bottom: .9rem;
}

.hero-lead{
  color: var(--muted);
  max-width: 54ch;
  font-size: 1.15rem;
  line-height: 1.65;
}

.micro{
  color: var(--muted2);
  font-size: .92rem;
}

/* CHIPS */
.chip{
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  padding: .45rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: var(--text);
  font-weight: 800;
  font-size: .92rem;
  margin: .3rem .35rem 0 0;
}

/* DIVIDER */
.divider{
  height: 1px;
  background: rgba(12,18,32,.07);
  margin: 0;
  border: none;
}

/* SECTIONS */
section{ padding: 3.5rem 0; }

.section-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  margin-bottom: .65rem;
}
.section-subtitle{
  color: var(--muted);
  max-width: 70ch;
  line-height: 1.75;
}

/* CARDS */
.cardx{
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadowSoft);
}

.iconx{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(14,16,32,.08);
  background: rgba(248,250,252,.9);
  box-shadow: 0 10px 20px rgba(14,16,32,.06);
  font-weight: 950;
  color: rgba(109,94,245,.95);
}

.callout{
  border-radius: var(--r-xl);
  border: 1px solid rgba(109,94,245,.16);
  background: linear-gradient(
    135deg,
    rgba(139,124,246,.12),
    rgba(182,174,255,.10)
  );
  box-shadow: var(--shadowSoft);
}

/* FAQ */
.faq-item{
  border: 1px solid var(--border);
  border-radius: 16px !important;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadowSoft);
}
.faq-btn{
  font-weight: 850;
  color: var(--text);
  background: rgba(255,255,255,.82);
}
.faq-btn:not(.collapsed){
  background: rgba(248,250,252,.9);
  box-shadow: none;
}

/* FOOTER */
footer{
  padding: 2rem 0 3rem;
  color: var(--muted2);
}
.foot-link{
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
}
.foot-link:hover{ color: var(--text); }

/* -----------------------------
   HERO MOCK (simplified / effortless)
-------------------------------- */

.hero-frame{
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-frame-top{
  height: 52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 14px;
  border-bottom: 1px solid rgba(14,16,32,.08);
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.90));
}

.window-dots{ display:flex; gap:7px; }
.window-dots span{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(14,16,32,.12);
}

.topbar-chip{
  display:flex;
  align-items:center;
  gap: 8px;
  border: 1px solid rgba(14,16,32,.08);
  background: rgba(255,255,255,.78);
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .85rem;
  color: var(--muted);
}

.topbar-chip-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(109,94,245,.55);
  box-shadow: 0 0 0 4px rgba(109,94,245,.12);
}

.topbar-actions{ display:flex; gap:8px; }
.action-dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  background: rgba(109,94,245,.25);
  border: 1px solid rgba(109,94,245,.25);
}

/* SIMPLE HERO MOCK BODY */
.simple-mock{
  padding: 18px;
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(139,124,246,.12), transparent 60%),
    radial-gradient(520px 260px at 90% 10%, rgba(182,174,255,.12), transparent 60%),
    rgba(255,255,255,.78);
  min-height: 420px;
}

.simple-mock-head{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}

.simple-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(14,16,32,.08);
  background: rgba(255,255,255,.75);
  font-weight:900;
  color: var(--text);
  font-size:.9rem;
}
.simple-chip.subtle{
  color: var(--muted);
  font-weight:800;
  background: rgba(248,250,252,.85);
}

.simple-panel{
  border: 1px solid rgba(14,16,32,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 45px rgba(14,16,32,.08);
  padding: 18px;
  max-width: 560px;
}

.simple-label{
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: 950;
  margin-bottom: 10px;
}

.simple-input{
  border: 1px solid rgba(139,124,246,.22);
  background: rgba(139,124,246,.10);
  border-radius: 16px;
  padding: 14px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--text);
}

.simple-divider{
  height: 1px;
  background: rgba(14,16,32,.08);
  margin: 16px 0;
}

.simple-answer{
  font-weight: 800;
  color: var(--text);
  line-height: 1.55;
  font-size: 1.02rem;
}

.simple-footer{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 16px;
}

.simple-pill{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(14,16,32,.08);
  background: rgba(255,255,255,.75);
  font-weight: 900;
  color: rgba(109,94,245,.95);
  font-size: .9rem;
}
.simple-pill.subtle{
  color: var(--muted);
  background: rgba(248,250,252,.85);
}

@media (max-width: 991px){
  .simple-panel{ max-width: 100%; }
}