/* =====================================================================
   ChatBrain design system
   Palette:  #120B23 ink-violet (dark bg) · #6D28D9 violet · #2E5BFF azure
             · #25D366 whatsapp green · #F6F4FC mist (light bg) · #170F2B ink
   Type:     "Sora" for display / headings, "Manrope" for body & UI
   ===================================================================== */

:root{
  --ink-violet:#120B23;
  --ink-violet-2:#1B1235;
  --violet:#6D28D9;
  --violet-light:#8B5CF6;
  --azure:#2E5BFF;
  --wa-green:#25D366;
  --wa-green-dark:#128C4A;
  --mist:#F6F4FC;
  --mist-2:#EFEBFA;
  --ink:#170F2B;
  --muted:#6E6486;
  --muted-light:#A79FC2;
  --white:#FFFFFF;
  --border-soft: rgba(255,255,255,.14);
  --shadow-violet: 0 20px 60px -20px rgba(109,40,217,.45);
  --shadow-soft: 0 12px 32px -12px rgba(23,15,43,.16);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --gradient-ai: linear-gradient(135deg, var(--violet) 0%, var(--azure) 100%);
  --gradient-dark: linear-gradient(180deg, #120B23 0%, #1B1235 55%, #201545 100%);
}

*{box-sizing:border-box;}

body{
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-display{
  font-family:'Sora', 'Manrope', sans-serif;
  letter-spacing:-0.02em;
  color:var(--ink);
}

a{ text-decoration:none; }
::selection{ background:var(--violet-light); color:#fff; }

.container-xl{ max-width:1240px; margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Buttons ---------------------------------------------------- */
.btn{ border-radius:999px; font-weight:600; padding:14px 28px; font-size:.98rem; border:none; display:inline-flex; align-items:center; gap:10px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:focus-visible{ outline:3px solid var(--violet-light); outline-offset:2px; }

.btn-ai{ background:var(--gradient-ai); color:#fff; box-shadow:var(--shadow-violet); }
.btn-ai:hover{ transform:translateY(-2px); box-shadow:0 24px 60px -16px rgba(109,40,217,.55); color:#fff; }

.btn-whatsapp{ background:var(--wa-green); color:#0b3320; box-shadow:0 16px 40px -14px rgba(37,211,102,.55); }
.btn-whatsapp:hover{ transform:translateY(-2px); background:#22c15e; color:#0b3320; }

.btn-ghost-light{ background:rgba(255,255,255,.08); color:#fff; border:1px solid var(--border-soft); backdrop-filter:blur(6px); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.16); color:#fff; }

.btn-outline-ink{ background:transparent; color:var(--ink); border:1.5px solid rgba(23,15,43,.15); }
.btn-outline-ink:hover{ border-color:var(--violet); color:var(--violet); }

/* ---------- Nav --------------------------------------------------------- */
.cb-nav{ position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 0; transition:background .25s ease, padding .25s ease, box-shadow .25s ease; }
.cb-nav.scrolled{ background:rgba(18,11,35,.86); backdrop-filter:blur(14px); padding:12px 0; box-shadow:0 10px 30px -18px rgba(0,0,0,.5); }
.cb-nav .container-xl{ display:flex; align-items:center; justify-content:space-between; }
.cb-logo{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.35rem; color:#fff; display:flex; align-items:center; gap:10px; }
.cb-logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--wa-green); box-shadow:0 0 0 6px rgba(37,211,102,.18); }
.cb-nav-links{ display:flex; align-items:center; gap:32px; }
.cb-nav-links a{ color:rgba(255,255,255,.82); font-weight:600; font-size:.95rem; }
.cb-nav-links a:hover{ color:#fff; }
.cb-nav-cta{ display:flex; align-items:center; gap:14px; }

/* ---------- Hero --------------------------------------------------------- */
.hero{ position:relative; background:var(--gradient-dark); padding:170px 0 140px; overflow:hidden; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none; }
.hero-blob.b1{ width:480px; height:480px; background:var(--violet); top:-160px; left:-140px; animation:drift 16s ease-in-out infinite; }
.hero-blob.b2{ width:420px; height:420px; background:var(--azure); bottom:-180px; right:-120px; animation:drift 20s ease-in-out infinite reverse; }
@keyframes drift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(30px,-24px); } }

.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; position:relative; z-index:2; }

.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--wa-green); font-weight:700; font-size:.85rem; background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.35); padding:8px 16px; border-radius:999px; margin-bottom:22px; }
.hero-eyebrow svg{ width:14px; height:14px; }

.hero h1{ color:#fff; font-size:clamp(2.4rem, 4.2vw, 3.6rem); line-height:1.08; font-weight:700; margin-bottom:22px; }
.hero h1 .line-2{ display:block; font-weight:500; color:#D8CEFA; }

.hero p.lead{ color:#C6BEE0; font-size:1.15rem; line-height:1.7; max-width:520px; margin-bottom:34px; }

.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:46px; }

.hero-trust{ display:flex; gap:36px; flex-wrap:wrap; }
.hero-trust .stat b{ display:block; color:#fff; font-family:'Sora',sans-serif; font-size:1.5rem; }
.hero-trust .stat span{ color:var(--muted-light); font-size:.85rem; }

/* ---------- Hero visual stack (photo + phone) ------------------------- */
.hero-visual{ position:relative; max-width:400px; margin:0 auto; }
.hero-photo-card{ border-radius:28px; overflow:hidden; position:relative; z-index:1; box-shadow:0 50px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.hero-photo-card img{ width:100%; height:460px; object-fit:cover; display:block; }
.hero-photo-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(200deg, rgba(18,11,35,0) 40%, rgba(18,11,35,.55) 100%); }
.hero-phone-overlay{ position:absolute !important; right:-56px !important; bottom:-34px !important; left:auto !important; top:auto !important; width:220px !important; z-index:3 !important; margin:0 !important; }
.hero-phone-overlay .phone-body{ min-height:250px; padding:14px 10px; gap:8px; }
.hero-phone-overlay .bubble{ font-size:.72rem; padding:8px 11px; }
.hero-phone-overlay .phone-head{ padding:10px 14px; font-size:.78rem; }
.hero-visual .float-card.fc-1{ top:8%; left:-38px; }
.hero-visual .float-card.fc-2{ bottom:6%; left:-30px; }

.testimonial-avatar{ width:50px; height:50px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* ---------- Phone mockup ------------------------------------------------- */
.phone-stage{ position:relative; display:flex; justify-content:center; }
.phone{ width:300px; background:#0d0819; border-radius:44px; padding:14px; box-shadow:0 60px 100px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); position:relative; z-index:2; }
.phone-screen{ background:#E9E1FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%23E9E1FB'/%3E%3C/svg%3E"); border-radius:30px; overflow:hidden; }
.phone-head{ background:var(--wa-green-dark); color:#fff; padding:14px 18px; display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:600; font-size:.9rem; }
.phone-head .avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--azure)); }
.phone-body{ padding:18px 14px; min-height:360px; display:flex; flex-direction:column; gap:10px; justify-content:flex-end; }
.bubble{ max-width:78%; padding:10px 14px; border-radius:16px; font-size:.83rem; line-height:1.45; opacity:0; transform:translateY(10px); animation:bubbleIn .5s ease forwards; }
.bubble.in{ background:#fff; color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px; box-shadow:0 6px 16px -8px rgba(23,15,43,.25); }
.bubble.out{ background:linear-gradient(135deg,var(--violet),var(--azure)); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.bubble:nth-child(1){ animation-delay:.3s; }
.bubble:nth-child(2){ animation-delay:1s; }
.bubble:nth-child(3){ animation-delay:1.7s; }
.bubble:nth-child(4){ animation-delay:2.4s; }
@keyframes bubbleIn{ to{ opacity:1; transform:translateY(0); } }

.float-card{ position:absolute; background:rgba(255,255,255,.9); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.5); border-radius:16px; padding:12px 16px; box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:700; color:var(--ink); z-index:3; }
.float-card.fc-1{ top:14%; left:-58px; }
.float-card.fc-2{ bottom:10%; right:-46px; }
.float-card .pulse{ width:8px; height:8px; border-radius:50%; background:var(--wa-green); box-shadow:0 0 0 4px rgba(37,211,102,.22); }

/* ---------- Section shells ------------------------------------------------ */
.section{ padding:120px 0; }
.section-mist{ background:var(--mist); }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(1.9rem,3vw,2.6rem); font-weight:700; margin-bottom:16px; }
.section-head p{ color:var(--muted); font-size:1.08rem; line-height:1.7; }
.align-center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- How it works (real sequence -> numbered) ---------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.steps::before{ content:''; position:absolute; top:26px; left:6%; right:6%; height:2px; background:repeating-linear-gradient(90deg, rgba(109,40,217,.3) 0 8px, transparent 8px 16px); z-index:0; }
.step-item{ position:relative; z-index:1; padding:0 18px; }
.step-num{ width:52px; height:52px; border-radius:16px; background:var(--gradient-ai); color:#fff; font-family:'Sora',sans-serif; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:var(--shadow-violet); }
.step-item h3{ font-size:1.1rem; margin-bottom:8px; }
.step-item p{ color:var(--muted); font-size:.94rem; line-height:1.6; }

/* ---------- Bento feature grid --------------------------------------------- */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:20px; }
.bento-card{ border-radius:var(--radius-md); padding:26px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid rgba(23,15,43,.07); background:#fff; box-shadow:var(--shadow-soft); transition:transform .2s ease, box-shadow .2s ease; }
.bento-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -20px rgba(23,15,43,.22); }
.bento-card .icon-wrap{ width:44px; height:44px; border-radius:12px; background:var(--mist-2); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--violet); }
.bento-card h3{ font-size:1.02rem; margin-bottom:6px; }
.bento-card p{ color:var(--muted); font-size:.88rem; line-height:1.55; margin:0; }
.bento-card.span-2{ grid-column:span 2; }
.bento-card.span-row2{ grid-row:span 2; }
.bento-card.dark{ background:var(--gradient-dark); border:none; }
.bento-card.dark h3{ color:#fff; }
.bento-card.dark p{ color:var(--muted-light); }
.bento-card.dark .icon-wrap{ background:rgba(255,255,255,.1); color:#fff; }
.bento-card.wa{ background:linear-gradient(135deg,#0b3320,#128C4A); border:none; }
.bento-card.wa h3, .bento-card.wa p{ color:#fff; }
.bento-card.wa .icon-wrap{ background:rgba(255,255,255,.16); color:#fff; }

/* ---------- Glass cards (testimonial / social proof) ----------------------- */
.proof-section{ background:var(--gradient-dark); position:relative; overflow:hidden; }
.glass-card{ background:rgba(255,255,255,.06); border:1px solid var(--border-soft); backdrop-filter:blur(14px); border-radius:var(--radius-md); padding:32px; }
.glass-card p.quote{ color:#EDE8FB; font-size:1.05rem; line-height:1.7; margin-bottom:22px; }
.glass-card .person{ display:flex; align-items:center; gap:14px; }
.glass-card .person img{ width:50px; height:50px; border-radius:50%; object-fit:cover; }
.glass-card .person b{ color:#fff; display:block; font-size:.92rem; }
.glass-card .person span{ color:var(--muted-light); font-size:.8rem; }

/* ---------- Pricing ----------------------------------------------------- */
.pricing-card{ border-radius:var(--radius-md); border:1px solid rgba(23,15,43,.08); background:#fff; padding:36px 30px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; height:100%; transition:transform .2s ease, box-shadow .2s ease; }
.pricing-card:hover{ transform:translateY(-6px); }
.pricing-card.featured{ background:var(--gradient-dark); border:none; box-shadow:var(--shadow-violet); position:relative; }
.pricing-card.featured .plan-name, .pricing-card.featured .price{ color:#fff; }
.pricing-card.featured .price small{ color:var(--muted-light); }
.pricing-card.featured ul li{ color:#D8CEFA; }
.pricing-badge{ position:absolute; top:-14px; right:28px; background:var(--wa-green); color:#0b3320; font-size:.72rem; font-weight:800; padding:6px 14px; border-radius:999px; }
.plan-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.15rem; margin-bottom:6px; }
.price{ font-family:'Sora',sans-serif; font-weight:800; font-size:2.4rem; margin-bottom:4px; }
.price small{ font-size:.95rem; font-weight:500; color:var(--muted); }
.pricing-card ul{ list-style:none; padding:0; margin:24px 0 30px; flex:1; }
.pricing-card ul li{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--muted); margin-bottom:12px; }
.pricing-card ul li svg{ flex-shrink:0; margin-top:3px; color:var(--wa-green); }

/* ---------- FAQ accordion (custom, not default bootstrap chrome) ----------- */
.cb-faq-item{ border-bottom:1px solid rgba(23,15,43,.1); padding:22px 0; }
.cb-faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:700; font-size:1.02rem; }
.cb-faq-q .plus{ width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(23,15,43,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s ease; }
.cb-faq-item.open .plus{ transform:rotate(45deg); background:var(--violet); border-color:var(--violet); color:#fff; }
.cb-faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--muted); font-size:.95rem; line-height:1.7; }
.cb-faq-item.open .cb-faq-a{ max-height:240px; margin-top:14px; }

/* ---------- Final CTA ----------------------------------------------------- */
.cta-band{ background:var(--gradient-ai); border-radius:32px; padding:72px 60px; text-align:center; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:14px; }
.cta-band p{ color:#EDE4FF; margin-bottom:32px; }

/* ---------- Footer --------------------------------------------------------- */
.cb-footer{ background:var(--ink-violet); color:var(--muted-light); padding:70px 0 30px; }
.cb-footer h5{ color:#fff; font-family:'Sora',sans-serif; font-size:.95rem; margin-bottom:18px; }
.cb-footer a{ color:var(--muted-light); font-size:.9rem; display:block; margin-bottom:10px; }
.cb-footer a:hover{ color:#fff; }
.cb-footer-bottom{ border-top:1px solid var(--border-soft); margin-top:50px; padding-top:24px; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* ---------- Auth pages ------------------------------------------------------ */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-visual{ background:var(--gradient-dark); position:relative; display:flex; align-items:center; justify-content:center; padding:60px; overflow:hidden; }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-card{ width:100%; max-width:420px; }
.auth-card h1{ font-size:1.8rem; margin-bottom:10px; }
.auth-card p.sub{ color:var(--muted); margin-bottom:30px; }
.form-control{ border-radius:12px; padding:13px 16px; border:1.5px solid rgba(23,15,43,.12); font-size:.95rem; }
.form-control:focus{ border-color:var(--violet); box-shadow:0 0 0 4px rgba(109,40,217,.12); }
.form-label{ font-weight:700; font-size:.88rem; margin-bottom:6px; }
.alert-cb{ border-radius:14px; padding:14px 18px; font-size:.9rem; margin-bottom:20px; }
.alert-cb.error{ background:#FDECEC; color:#B42318; }
.alert-cb.success{ background:#E8F9EF; color:#0F7A3E; }

/* ---------- Dashboard shell (Phase 2/4 preview layout) --------------------- */
.dash-shell{ display:flex; min-height:100vh; background:var(--mist); }
.dash-sidebar{ width:264px; background:var(--ink-violet); color:#fff; flex-shrink:0; padding:26px 18px; }
.dash-sidebar a{ display:flex; align-items:center; gap:12px; color:var(--muted-light); font-size:.9rem; font-weight:600; padding:11px 14px; border-radius:12px; margin-bottom:4px; }
.dash-sidebar a.active, .dash-sidebar a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.dash-main{ flex:1; padding:36px; }
.dash-card{ background:#fff; border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-soft); }

/* ---------- Responsive ------------------------------------------------------ */
@media (max-width: 991px){
  .hero-grid{ grid-template-columns:1fr; }
  .phone-stage{ margin-top:40px; }
  .hero-visual{ max-width:340px; }
  .hero-phone-overlay{ right:-30px !important; bottom:-24px !important; width:190px !important; }
  .cb-nav-links{ display:none; }
  .steps, .bento{ grid-template-columns:repeat(2,1fr); }
  .bento-card.span-2{ grid-column:span 2; }
  .steps::before{ display:none; }
  .auth-shell{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }
  .dash-sidebar{ display:none; }
}
@media (max-width: 575px){
  .bento{ grid-template-columns:1fr; }
  .bento-card.span-2{ grid-column:span 1; }
  .steps{ grid-template-columns:1fr; }
  .hero{ padding:140px 0 90px; }
  .cta-band{ padding:50px 24px; }
  .hero-visual{ max-width:280px; }
  .hero-phone-overlay{ right:-10px !important; bottom:-18px !important; width:160px !important; }
  .hero-visual .phone-body{ min-height:190px; }
}

/* ===== v2: language switch, crypto, newsletter, admin helpers ===== */
.cb-nav-cta{ display:flex; align-items:center; gap:10px; }
.cb-lang{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); }
.cb-lang a{ font-size:.75rem; font-weight:800; padding:5px 10px; border-radius:999px; color:rgba(255,255,255,.75); text-decoration:none; line-height:1.1; }
.cb-lang a.active{ background:#fff; color:var(--violet); }
.cb-lang a:hover{ color:#fff; }
.cb-lang a.active:hover{ color:var(--violet); }
.dash-sidebar .cb-lang a{ padding:5px 10px !important; margin:0 !important; display:inline-block; }

.cb-crypto-box{ background:#F7F5FD; border:1px solid #ECE7F8; border-radius:16px; padding:20px; }
.cb-pill{ display:inline-block; font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:999px; background:#F3EEFF; color:var(--violet); }
.cb-pill-awaiting_review{ background:#FFF4DE; color:#9A5B00; }
.cb-pill-awaiting_payment{ background:#EEF0F4; color:#4A4460; }
.cb-pill-approved{ background:#E8F9EF; color:#0F7A3E; }
.cb-pill-rejected{ background:#FDECEC; color:#B42318; }
.cb-mono{ font-family:monospace; font-size:.85rem; }
.cb-help{ font-size:.82rem; color:var(--muted); }
.cb-help code{ font-size:.78rem; word-break:break-all; }
.cb-subcard{ border:1px solid #ECE7F8; border-radius:14px; padding:14px 16px; }
.cb-chip{ display:inline-flex; align-items:center; gap:6px; border:1.5px solid #ECE7F8; border-radius:999px; padding:6px 14px; font-size:.85rem; cursor:pointer; }
.cb-chip:has(input:checked){ border-color:var(--violet); background:#F3EEFF; }

.cb-newsletter{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; padding:24px 28px; margin-bottom:40px;
  border-radius:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.cb-newsletter .form-control{ border-radius:999px; }
@media (max-width: 991px){ .cb-nav-cta .btn-ghost-light{ display:none; } }