:root {
  --blue: #0033AA;
  --blue-mid: #0055FF;
  --blue-light: #EEF3FF;
  --red: #CC2200;
  --off: #F7F9FC;
  --grey: #64748B;
  --border: #E2E8F0;
  --dark: #0A1628;
  --gold: #C9A227;
  --green: #00875A;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'DM Sans',sans-serif;
  min-height:100vh;
  background:linear-gradient(160deg,#001A4D 0%,#0033AA 50%,#0055FF 100%);
  display:flex; align-items:center; justify-content:center;
  padding:16px; position:relative; overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,0.04) 0%,transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(204,34,0,0.1) 0%,transparent 50%);
  pointer-events:none;
}
/* Animated grid */
body::after {
  content:''; position:fixed; inset:0;
  background-image:linear-gradient(rgba(0,85,255,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,85,255,0.08) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}

.demo-tag { position:fixed; top:14px; right:14px; background:var(--red); color:white; font-size:9px; font-weight:800; letter-spacing:2px; padding:4px 10px; border-radius:3px; text-transform:uppercase; z-index:100; }

/* NAME SCREEN */
.name-screen { position:fixed; inset:0; background:rgba(0,0,0,0.65); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; backdrop-filter:blur(4px); }
.name-box { background:white; border-radius:20px; padding:28px 24px; width:100%; max-width:340px; box-shadow:0 30px 60px rgba(0,0,0,0.4); text-align:center; animation:rise 0.4s cubic-bezier(0.16,1,0.3,1); }
.name-box h2 { font-family:'Syne',sans-serif; font-size:20px; color:var(--dark); margin-bottom:6px; }
.name-box p { font-size:12.5px; color:var(--grey); line-height:1.5; margin-bottom:20px; }
.trial-note { background:#FFF8E8; border:1px solid #F0D080; border-radius:8px; padding:10px 12px; font-size:11px; color:#7A5800; line-height:1.5; margin-bottom:16px; text-align:left; }
.name-inp { width:100%; border:1.5px solid var(--border); border-radius:10px; padding:11px 14px; font-family:'DM Sans',sans-serif; font-size:14px; color:var(--dark); outline:none; transition:border-color .18s; margin-bottom:12px; }
.name-inp:focus { border-color:var(--blue-mid); }
.name-btn { width:100%; background:var(--blue); color:white; border:none; border-radius:10px; padding:12px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:background .18s; }
.name-btn:hover { background:var(--blue-mid); }

/* CARD */
.card { width:100%; max-width:460px; background:white; border-radius:22px; overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.08); position:relative; z-index:10; animation:rise 0.6s cubic-bezier(0.16,1,0.3,1); }
@keyframes rise { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* HEADER — Powertel dark navy + red stripe */
.hdr { background:linear-gradient(135deg,#001A4D,#0033AA); padding:20px 20px 18px; position:relative; overflow:hidden; }
.hdr-stripe { height:3px; background:linear-gradient(90deg,var(--blue),var(--red),var(--blue)); background-size:200% 100%; animation:stripe 3s linear infinite; }
@keyframes stripe { 0%{background-position:0%} 100%{background-position:200%} }
.hdr-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.hdr-icon { width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.hdr-brand h1 { font-family:'Syne',sans-serif; font-size:22px; color:white; line-height:1; font-weight:800; }
.hdr-brand h1 em { color:#FF6644; font-style:normal; }
.hdr-brand p { font-size:10px; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:1.5px; margin-top:2px; }
.hdr-stats { display:flex; gap:12px; margin-bottom:10px; }
.stat { text-align:left; }
.stat-num { font-family:'Syne',sans-serif; font-size:14px; font-weight:800; color:white; line-height:1; }
.stat-lbl { font-size:8.5px; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:.8px; margin-top:1px; }
.stat-div { width:1px; background:rgba(255,255,255,0.12); }
.hdr-langs { display:flex; gap:5px; margin-bottom:8px; }
.lang { background:rgba(255,255,255,0.13); border:1px solid rgba(255,255,255,0.22); color:rgba(255,255,255,0.85); font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; }
.hdr-notes { display:flex; gap:5px; flex-wrap:wrap; }
.note { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.13); color:rgba(255,255,255,0.6); font-size:9px; padding:2px 9px; border-radius:20px; }
.note.warn { background:rgba(255,180,0,0.15); border-color:rgba(255,180,0,0.3); color:#FFD166; }

/* LIVE DOT */
.live-dot { display:flex; align-items:center; gap:4px; background:rgba(0,200,100,0.15); border:1px solid rgba(0,200,100,0.3); padding:3px 9px; border-radius:20px; }
.live-dot::before { content:''; width:6px; height:6px; background:#00D485; border-radius:50%; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.live-dot span { font-size:9px; color:#00D485; font-weight:700; letter-spacing:.5px; }

/* TRIAL BANNER */
.trial-banner { background:#FFF3CD; border-bottom:1px solid #F0D080; padding:8px 16px; font-size:10.5px; color:#7A5800; line-height:1.5; text-align:center; }
.trial-banner strong { color:#5A3E00; }

/* PLAN / SERVICE SELECTOR */
.plan-bar { background:var(--off); border-bottom:1px solid var(--border); padding:14px 18px 12px; }
.bar-label { font-size:9.5px; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:8px; }
.plan-pills { display:flex; gap:6px; flex-wrap:wrap; }
.pill { padding:5px 13px; border-radius:20px; font-size:12px; font-weight:600; border:1.5px solid var(--border); background:white; color:var(--grey); cursor:pointer; transition:all .18s; font-family:'DM Sans',sans-serif; }
.pill:hover { border-color:var(--blue-mid); color:var(--blue-mid); }
.pill.on { background:var(--blue); border-color:var(--blue); color:white; }

/* QUICK */
.quick-bar { background:var(--off); border-bottom:1px solid var(--border); padding:12px 18px; }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.qbtn { background:white; border:1.5px solid var(--border); border-radius:10px; padding:9px 5px; text-align:center; cursor:pointer; transition:all .18s; display:flex; flex-direction:column; align-items:center; gap:3px; font-family:'DM Sans',sans-serif; }
.qbtn:hover { border-color:var(--blue-mid); background:var(--blue-light); transform:translateY(-1px); }
.qi { font-size:18px; }
.qn { font-size:10px; font-weight:600; color:var(--dark); }
.qs { font-size:8.5px; color:var(--grey); }

/* CHAT */
.chat { height:300px; overflow-y:auto; padding:14px 16px; background:var(--off); display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.chat::-webkit-scrollbar { width:3px; }
.chat::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.msg { display:flex; flex-direction:column; gap:3px; animation:msgIn .28s ease forwards; }
@keyframes msgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.msg.user { align-items:flex-end; }
.msg.bot { align-items:flex-start; }
.msg-meta { display:flex; align-items:center; gap:6px; padding:0 4px; }
.sender { font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--grey); }
.timestamp { font-size:9px; color:#AABBCC; }
.bubble { max-width:88%; padding:11px 14px; border-radius:15px; font-size:13.5px; line-height:1.6; }
.msg.user .bubble { background:var(--blue); color:white; border-bottom-right-radius:3px; }
.msg.bot .bubble { background:white; color:var(--dark); border:1.5px solid var(--border); border-bottom-left-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.bubble.explanation { background:#EEF5FF; border-color:#C0D8F8; font-size:13px; }

/* TYPING */
.typing-wrap { display:flex; align-items:center; gap:4px; padding:12px 14px; background:white; border:1.5px solid var(--border); border-radius:15px; border-bottom-left-radius:3px; width:fit-content; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.td { width:7px; height:7px; background:var(--blue-mid); border-radius:50%; animation:tb 1.2s ease-in-out infinite; }
.td:nth-child(2){animation-delay:.2s} .td:nth-child(3){animation-delay:.4s}
@keyframes tb { 0%,60%,100%{transform:translateY(0);opacity:.3} 30%{transform:translateY(-5px);opacity:1} }

/* RESULT CARD */
.result-card { max-width:92%; background:white; border:1.5px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.rc-header { padding:10px 14px; color:white; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px; }
.rc-body { padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
.rc-row { display:flex; gap:8px; align-items:flex-start; }
.rc-dot { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; margin-top:1px; }
.rc-label { font-size:9px; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:.7px; }
.rc-text { font-size:12.5px; color:var(--dark); margin-top:1px; line-height:1.45; }
.rc-footer { padding:8px 14px 10px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rc-footer-text { font-size:10px; color:var(--grey); flex:1; line-height:1.4; }
.share-btn { background:#25D366; color:white; border:none; border-radius:6px; padding:5px 11px; font-size:10px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:4px; white-space:nowrap; font-family:'DM Sans',sans-serif; transition:background .18s; flex-shrink:0; }
.share-btn:hover { background:#128C4E; }

/* INPUT */
.inp-area { padding:12px 14px; background:white; border-top:1px solid var(--border); display:flex; gap:8px; align-items:center; }
.inp-wrap { flex:1; background:var(--off); border:1.5px solid var(--border); border-radius:10px; display:flex; align-items:center; padding:0 14px; transition:border-color .18s; }
.inp-wrap:focus-within { border-color:var(--blue-mid); }
#inp { flex:1; border:none; background:transparent; padding:10px 0; font-family:'DM Sans',sans-serif; font-size:13.5px; color:var(--dark); outline:none; }
#inp::placeholder { color:var(--grey); }
.send { width:42px; height:42px; background:var(--blue); border:none; border-radius:10px; color:white; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .18s; flex-shrink:0; }
.send:hover { background:var(--blue-mid); }
.send:disabled { opacity:0.5; cursor:not-allowed; }

/* FOOTER */
.foot { padding:10px 16px; background:var(--off); border-top:1px solid var(--border); font-size:9px; color:var(--grey); text-align:center; line-height:1.6; }
.foot strong { color:var(--blue); }
.foot .disclaimer { color:#e06b00; font-weight:600; margin-top:2px; display:block; }