:root{
  --brand:#7c3aed;
  --brand-2:#22d3ee;
  --ring: rgba(124,58,237,.5);
}
*{font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
.bg-grid{
  position: fixed; inset: 0; z-index: -9;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(124,58,237,.12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 120px);
  mask-image: radial-gradient(1000px 700px at 50% 10%, black 40%, transparent 100%);
}
.gradient-vignette{
  position: fixed; inset: 0; z-index: -8;
  background: radial-gradient(900px 600px at 50% 10%, rgba(34,211,238,.08), transparent 60%),
             radial-gradient(1200px 800px at 80% 80%, rgba(124,58,237,.10), transparent 60%);
  pointer-events:none;
}

/* buttons */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px; font-weight:700;
  color:#0b0b12; background:linear-gradient(135deg,var(--brand),#0ea5e9);
  box-shadow:0 10px 30px rgba(124,58,237,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow:0 18px 40px rgba(124,58,237,.45);}
.btn-primary.btn-lg{ padding:14px 22px; font-size:1.05rem; }
.btn-ghost{
  padding:10px 16px; border-radius:12px; font-weight:600;
  color:#e5e7eb; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.08); }

/* hero capsule */
.capsule{
  position:relative; max-width: 900px; margin-inline:auto;
  border-radius: 20px; padding: 2px; background: linear-gradient(135deg, rgba(124,58,237,.6), rgba(34,211,238,.3));
  box-shadow: 0 0 80px rgba(124,58,237,.2);
}
.capsule-inner{
  border-radius:18px; background: rgba(10,12,22,.6); backdrop-filter: blur(10px);
  padding: 16px; position:relative; overflow:hidden;
}
.capsule-glow{
  position:absolute; inset:-2px; border-radius:22px;
  background: radial-gradient(600px 120px at 50% 0%, rgba(124,58,237,.25), transparent 70%);
  z-index:-1;
}
.capsule-top{
  min-height: 56px; display:flex; align-items:center; gap:10px;
  position:relative;
}
.tag{
  display:inline-flex; align-items:center; height:26px; padding:0 10px;
  border-radius:999px; font-size:12px; font-weight:700;
  color:#dbeafe; background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.35);
}
.caret{
  width: 10px; height: 22px; background: #e5e7eb; border-radius: 3px;
  animation: blink 1s steps(1, end) infinite; margin-left: 2px;
}
@keyframes blink{ 50%{ opacity:0; } }
.typed{ font-size: 1.05rem; color: white; font-weight: 600; }

.thinking{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background:
    radial-gradient(250px 100px at 50% 0%, rgba(124,58,237,.12), transparent 70%),
    conic-gradient(from 0deg, rgba(124,58,237,.0), rgba(124,58,237,.2), rgba(14,165,233,.2), rgba(255,255,255,.0));
  mix-blend-mode: screen; filter: blur(12px);
  mask-image: linear-gradient(180deg, black, rgba(0,0,0,.4));
}
.thinking.on{ animation: sweep 1s linear forwards; }
@keyframes sweep{
  0%{ opacity:0; transform: translateX(-40%); }
  20%{ opacity:.85; }
  100%{ opacity:0; transform: translateX(40%); }
}

.answer-card{
  margin-top:10px; border-radius:14px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 30px rgba(124,58,237,.18);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.answer-text{ padding:14px 14px 6px 14px; color:#e5e7eb; font-weight:600; }
.sources{
  display:flex; gap:8px; flex-wrap:wrap; padding:0 12px 12px 12px;
}
.sources .chip{
  background: rgba(124,58,237,.12); color:#c4b5fd;
  border:1px solid rgba(124,58,237,.35); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
}

/* sections */
.section-title{ font-size:1.6rem; font-weight:800; }
.card-step{
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  border-radius:16px; padding:16px; position:relative; overflow:hidden;
}
.step-badge{
  position:absolute; top:12px; right:12px; height:28px; width:28px; border-radius:999px;
  display:grid; place-items:center; font-weight:800; font-size:.85rem;
  background: rgba(124,58,237,.18); border:1px solid rgba(124,58,237,.35); color:#e9d5ff;
}
.step-title{ font-weight:800; margin-top:6px; }
.step-text{ color:#cbd5e1; margin-top:6px; }

/* BENEFITS — bigger cards */
.value-card{
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-radius:16px; padding:18px;
}
.value-card--xl{
  padding:28px;
  min-height: 150px;
}
.value-card h3{ font-weight:800; margin-bottom:8px; font-size:1.15rem; }
.value-card p{ color:#cbd5e1; font-size:1rem; }

/* chips */
.chip{
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:.9rem;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.chip:hover{ background: rgba(255,255,255,.1); }

/* CTA */
.cta-card{
  border:1px solid rgba(255,255,255,.12);
  background: radial-gradient(800px 200px at 50% 0%, rgba(124,58,237,.2), transparent 70%),
              rgba(255,255,255,.03);
  border-radius:20px; padding:28px; text-align:center;
}

/* utilities */
.shadow-brand{ box-shadow: 0 10px 30px rgba(124,58,237,.35); }

/* Hero big logo (right side) */
.hero-logo{
  position:absolute;
  right: 1.5rem;
  top: 2rem;
  width: clamp(180px, 26vw, 360px);
  height: auto;
  filter: drop-shadow(0 25px 45px rgba(124,58,237,.35));
  opacity: 0.95;
}
@media (max-width: 768px){
  .hero-logo{ display:none; }
}