:root{
  --bg:#0B1011; --panel:#12181A; --ink:#E8F1F2; --muted:#B5C2C4; --line:rgba(255,255,255,.10);
  --brand:#2563EB; --accent:#22C55E; --chip:#1B2427;

  /* === Chat theming (distinct from site brand) === */
  --chat-brand:#8B5CF6;           /* indigo for strong differentiation */
  --chat-brand-2:#22D3EE;         /* cyan for subtle gradient pop */
  --chat-ink:#0A1021;             /* dark text on user bubbles/buttons */
  --chat-panel:#0D1217;           /* slightly different panel to stand out */
  --chat-line:rgba(137, 100, 255, .28); /* violet-tinted borders */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#0B1011 0%,#0B1011 40%,#0E1416 100%);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
h1,h2,h3{font-family:Manrope,Inter,sans-serif}
.container-narrow{max-width:1080px}
.border-soft{border:1px solid var(--line)}
.text-muted{color:var(--muted)!important}
a{color:var(--brand)}
.btn-brand{background:var(--brand);border-color:var(--brand);font-weight:800}
.btn-brand:hover{filter:brightness(.94)}
.btn-admin-primary{
  background:var(--brand);
  border:1px solid var(--brand);
  color:#fff;
  font-weight:800;
  transition:all .2s ease;
}
.btn-admin-primary:hover,
.btn-admin-primary:focus{
  background:var(--accent);
  border-color:var(--accent);
  color:#06121a;
  box-shadow:0 6px 20px rgba(34,197,94,.25);
}
.btn-admin-primary:disabled,
.btn-admin-primary.disabled{
  background:rgba(255,255,255,.08);
  border-color:var(--line);
  color:var(--muted);
  opacity:1!important;
  cursor:not-allowed;
  box-shadow:none;
}
.admin-content .btn-brand,
.admin-content .btn-outline-light,
.admin-content .btn-admin-primary{
  background:var(--brand);
  border:1px solid var(--brand);
  color:#fff;
  font-weight:800;
  transition:all .2s ease;
}
.admin-content .btn-brand:hover,
.admin-content .btn-outline-light:hover,
.admin-content .btn-admin-primary:hover,
.admin-content .btn-brand:focus,
.admin-content .btn-outline-light:focus,
.admin-content .btn-admin-primary:focus{
  background:var(--accent);
  border-color:var(--accent);
  color:#06121a;
  box-shadow:0 6px 20px rgba(126,196,107,.35);
}
.btn-ghost{border:1px solid var(--accent);color:var(--accent);background:transparent}
.chip{display:inline-flex;gap:.5rem;align-items:center;padding:.5rem .75rem;border-radius:999px;border:1px solid var(--line);background:var(--chip);color:var(--ink);font-weight:600}
.section{padding:72px 0}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(9,12,13,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navbar-brand{font-weight:800;letter-spacing:.3px}
.brand-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .55rem;border-radius:10px;background:#0F1618;border:1px solid var(--line)}
.brand-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#6ec8ff);box-shadow:0 0 10px rgba(33,166,255,.6)}
.brand-text{font-weight:800}

/* Hero */
.hero{padding:96px 0 56px;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;
  background:
    radial-gradient(700px 380px at 15% 0%, rgba(33,166,255,.12), transparent 60%),
    radial-gradient(520px 320px at 90% 15%, rgba(126,196,107,.12), transparent 60%);
  z-index:-1;pointer-events:none}
.hero h1{font-size:46px;line-height:1.1}
.hero-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}

/* Cards & lists */
.cardx{background:var(--panel);border:1px solid var(--line);border-radius:16px}
.list-check{list-style:none;padding:0;margin:0}
.list-check li{padding-left:1.6rem;position:relative;margin:.55rem 0}
.list-check li::before{content:'✓';position:absolute;left:.35rem;color:var(--accent);font-weight:900}

/* Key/Value grid */
.kv{display:grid;grid-template-columns:160px 1fr;gap:.4rem .8rem}
.kv div:first-child{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* Footer */
footer{border-top:1px solid var(--line);background:#0A0E0F}

/* === CHAT (differentiated visual system) === */
.chat-btn{
  position:fixed;right:20px;bottom:24px;width:62px;height:48px;border:0;border-radius:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 16px 36px rgba(139,92,246,.35);
  background:linear-gradient(135deg,var(--chat-brand),var(--chat-brand-2));z-index:9999;cursor:pointer
}
.chat-btn svg{width:26px;height:26px;fill:#06121a}
.chat-badge{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:#FF5A5A;color:#fff;font-weight:800;font-size:12px;line-height:20px;text-align:center;
  border:2px solid #06121a;box-shadow:0 6px 14px rgba(255,90,90,.5);display:none
}

.chat-panel{
  position:fixed;right:20px;bottom:120px;width:420px;max-width:min(460px, calc(100vw - 40px));height:70vh;border-radius:16px;
  background:var(--chat-panel);color:var(--ink);border:1px solid var(--chat-line);box-shadow:0 20px 60px rgba(0,0,0,.55);
  display:none;overflow:hidden;z-index:9999;resize:both;min-width:320px;min-height:420px;max-height:90vh
}
.chat-panel.open{display:flex;flex-direction:column}
.chat-panel.expanded{
  width:min(720px, calc(100vw - 40px));
  height:min(80vh, calc(100vh - 140px));
  max-width:900px;
}

.chat-header{
  display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;
  background:linear-gradient(135deg, rgba(139,92,246,.28), rgba(34,211,238,.28));border-bottom:1px solid var(--chat-line)
}
.chat-header .toolbar{display:flex;align-items:center;gap:.4rem}
.chat-header .toolbar button{
  border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:.25rem .55rem;font-size:12px;cursor:pointer;
  transition:background .15s ease
}
.chat-header .toolbar button:hover{background:rgba(255,255,255,.18)}
.chat-body{flex:1 1 auto;min-height:0;overflow:auto;padding:.8rem;display:flex;flex-direction:column;gap:.5rem}
.msg{
  padding:.6rem .75rem;
  border-radius:12px;
  max-width:82%;
  display:flex;
  gap:.55rem;
  align-items:flex-start;
  line-height:1.45
}
.msg-text{flex:1;min-width:0}
.bot{background:rgba(255,255,255,.06);border:1px solid var(--chat-line)}
.bot::before{
  content:'🤖';
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(139,92,246,.18);
  border:1px solid rgba(139,92,246,.45);
  color:#e6e4ff;
  box-shadow:0 6px 18px rgba(0,0,0,.28)
}
.user{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--chat-brand),var(--chat-brand-2));
  color:var(--chat-ink);
  flex-direction:row-reverse
}
.user::before{
  content:'👤';
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);
  color:#0b0f1a;
  box-shadow:0 6px 18px rgba(0,0,0,.28)
}
.chat-input{order:2;position:static;display:flex;align-items:center;gap:.5rem;padding:10px 12px;border-top:1px solid var(--chat-line);
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.14))}
.chat-input .attach-btn{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .15s ease
}
.chat-input .attach-btn svg{width:18px;height:18px}
.chat-input .attach-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.chat-input textarea{
  flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.6rem .75rem;color:var(--ink);
  min-height:48px;max-height:120px;resize:vertical}
.chat-input textarea::placeholder{color:rgba(232,241,242,.65)}
.chat-input textarea:focus{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.chat-input .btn{
  border-radius:12px;
  font-weight:800;
  color:var(--chat-ink);
  background:linear-gradient(135deg,var(--chat-brand),var(--chat-brand-2));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 16px rgba(139,92,246,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.6rem .9rem;
  gap:.35rem
}
.chat-input .btn svg{width:18px;height:18px;display:block}
.chat-input .btn:hover{transform:translateY(-1px)}
.chat-file-pill{
  order:4;display:none;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);padding:8px 12px;font-size:13px;color:#dbe7f2
}
.chat-file-pill.show{display:flex}
.chat-file-pill .pill-name{flex:1}
.chat-file-pill button{
  border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:999px;width:22px;height:22px;cursor:pointer
}

/* Regulatory disclaimer under input */
.chat-disclaimer{
  order:5;padding:8px 12px;border-top:1px dashed var(--chat-line);background:rgba(255,255,255,.03);
  font-size:12px;line-height:1.45;color:#A8B7C3
}
.chat-disclaimer a{color:#A8D4FF;text-decoration:underline}

/* Typing indicator */
.typing{display:inline-flex;gap:6px;align-items:center}
.typing-dot{width:6px;height:6px;border-radius:50%;background:#cfe9ff;opacity:.6;animation:td 1s infinite}
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.3s}
@keyframes td{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}

/* Avoid footer overlap when chat is open */
body.chat-open{padding-bottom:600px}

@media (max-width: 992px){.hero h1{font-size:36px}}
@media (max-width: 480px){
  .chat-panel{left:10px;right:10px;width:auto;height:75vh;bottom:110px;max-height:88vh}
  body.chat-open{padding-bottom:480px}
}
@media (max-width:420px){ .chat-btn{width:56px;height:44px} }

/* === readability tune-ups (as you had) === */
:root{ --ink:#DDE7EA; --muted:#9FB0B7; --line:rgba(255,255,255,.12) }
body{ color:var(--ink); line-height:1.72; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
h1,h2,h3{ color:#E6F3F7; letter-spacing:.2px }
a{ color:#6EC8FF } a:hover{ filter:brightness(1.08); text-decoration:none }
.cardx,.hero-card{
  background:rgba(18,24,26,.92); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.35)
}
.kv div:first-child{ color:#8EA2AA } .kv{ row-gap:.55rem }
.section{ padding:78px 0 } footer{ border-top:1px solid var(--line) }
.site-header{ background:rgba(9,12,13,.72); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(33,166,255,.35) }
.chip{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#D7E3E8 }

/* Pricing UI */
.pricing-toggle .btn-toggle{
  border:1px solid var(--line);
  color:var(--ink);
  background:transparent;
  font-weight:700;
  padding:.35rem .7rem;
  border-radius:10px;
}
.pricing-toggle .btn-toggle.active{
  background:var(--brand);
  border-color:var(--brand);
  color:#06121a;
}

.pricing-card .price-wrap{
  display:flex;
  align-items:baseline;
  gap:.35rem;
}
.pricing-card .price{
  font-size:2rem;
  font-weight:800;
  letter-spacing:.2px;
}
.pricing-card.popular{
  border:1px solid rgba(33,166,255,.6);
  box-shadow:0 0 0 2px rgba(33,166,255,.12), 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(-2px);
}

/* AURA maximize button */
.aura-max-btn {
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  border-radius: 8px;
  transition: 0.2s;
}
.aura-max-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #21A6FF;
  border-color: rgba(255,255,255,0.35);
}