:root { --ink:#102a43; --muted:#52697a; --paper:#f3f7fb; --card:#ffffff; --accent:#f27935; --line:#d9e3ed; --green:#16835d; --blue:#0969b8; --blue-dark:#063d70; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(180deg,#eef6fc 0,#f7f9fc 420px); font-family:Inter,"Noto Sans Devanagari",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(9,105,184,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(9,105,184,.09) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(to bottom,#000,transparent 55%); }
.topline { height:5px; background:linear-gradient(90deg,#f27935 0 33.3%,#fff 33.3% 66.6%,#16835d 66.6%); }
.service-header { height:78px; padding:0 max(24px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); position:relative; z-index:2; box-shadow:0 3px 16px rgba(27,71,107,.06); }
.service-brand { display:flex; align-items:center; gap:12px; }
.service-brand strong { display:block; font-size:1.3rem; color:var(--blue-dark); }
.service-brand small { display:block; color:var(--muted); margin-top:2px; }
.chakra-mark { width:42px; height:42px; border:2px solid var(--blue); border-radius:50%; display:grid; place-items:center; color:var(--blue); background:#edf7ff; box-shadow:inset 0 0 0 5px white; }
.header-meta { display:flex; align-items:center; gap:16px; color:var(--muted); font-size:.78rem; }
.demo-pill { background:#fff3e9; color:#b85016; border:1px solid #ffd4b9; border-radius:999px; padding:7px 11px; font-weight:800; }
.shell { width:min(1180px,calc(100% - 36px)); margin:0 auto; padding:54px 0 30px; position:relative; }
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:22px 70px; align-items:end; margin-bottom:42px; }
.eyebrow,.privacy { grid-column:1/-1; }
.eyebrow { letter-spacing:.08em; font-weight:800; font-size:.76rem; color:var(--green); }
.spark { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:9px; box-shadow:0 0 0 5px rgba(235,108,71,.14); }
h1 { margin:0; font-size:clamp(3rem,6vw,6rem); font-weight:800; letter-spacing:-.055em; line-height:.95; color:var(--blue-dark); }
h1 em { color:var(--accent); font-weight:750; font-style:normal; }
.intro-copy { align-self:end; }
.lede { font-size:1.16rem; line-height:1.6; color:var(--muted); max-width:520px; margin:0; }
.assurances { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.assurances span { padding:7px 10px; border:1px solid #bfdbef; border-radius:999px; color:var(--blue-dark); background:#f5fbff; font-size:.74rem; font-weight:700; }
.actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
button { font:inherit; cursor:pointer; }
.primary,.secondary { border-radius:10px; padding:14px 22px; font-weight:800; border:1px solid var(--blue-dark); }
.primary { color:white; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); box-shadow:0 5px 14px rgba(9,105,184,.25); }
.primary:hover { transform:translateY(-1px); }
.secondary { background:white; color:var(--blue-dark); }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.status { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; }
.status span { width:9px; height:9px; border-radius:50%; background:#a9aaa5; }
.status[data-state="connected"] span { background:#3a9d78; box-shadow:0 0 0 5px rgba(58,157,120,.13); }
.status[data-state="connecting"] span { background:#eaa13e; animation:pulse 1s infinite; }
.status[data-state="error"] span { background:#d75245; }
@keyframes pulse { 50% { opacity:.35; } }
.privacy { margin:0; font-size:.82rem; color:var(--muted); border:1px solid #cfe1ef; border-left:4px solid var(--blue); padding:13px 15px; background:rgba(255,255,255,.7); border-radius:6px; }
.workspace { display:grid; grid-template-columns:1.3fr .8fr; gap:22px; }
.card { min-height:520px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 38px rgba(27,71,107,.09); overflow:hidden; }
.card-heading { display:flex; justify-content:space-between; align-items:center; padding:24px 26px; border-bottom:1px solid var(--line); }
.kicker { letter-spacing:.08em; font-size:.68rem; font-weight:850; color:var(--blue); }
h2 { font-size:1.55rem; font-weight:800; margin:3px 0 0; }
.text-button { border:0; background:transparent; color:var(--muted); text-decoration:underline; }
.transcript { min-height:440px; height:auto; overflow:visible; padding:26px; display:flex; flex-direction:column; gap:15px; }
.empty-state { margin:auto; color:#929a96; text-align:center; }
.voice-orb { margin:0 auto 14px; width:66px; height:66px; display:flex; gap:4px; align-items:center; justify-content:center; border:1px solid #b8d8ee; border-radius:50%; background:#edf8ff; box-shadow:0 0 0 8px #f6fbff; }
.voice-orb i { display:block; width:4px; border-radius:4px; background:var(--blue); height:16px; }
.voice-orb i:nth-child(2),.voice-orb i:nth-child(4){height:28px}.voice-orb i:nth-child(3){height:38px}
.empty-state small { display:block; margin-top:5px; color:#a0adb7; }
.message { max-width:82%; padding:13px 16px; border-radius:16px; line-height:1.5; white-space:pre-wrap; }
.message[dir="rtl"] { text-align:right; font-family:"Noto Nastaliq Urdu","Noto Sans Arabic",Arial,sans-serif; }
.message[dir="ltr"] { text-align:left; }
.message.assistant { align-self:flex-start; background:#eaf5fc; border:1px solid #c9e2f2; border-bottom-left-radius:4px; }
.message.user { align-self:flex-end; background:var(--blue-dark); color:white; border-bottom-right-radius:4px; }
.message-label { display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; opacity:.62; font-weight:800; }
.badge { padding:7px 10px; border-radius:999px; background:#eeeae0; font-size:.75rem; font-weight:750; }
.badge.confirmed { background:#dceee5; color:#23604f; }
dl { margin:0; padding:8px 26px 0; }
dl > div { padding:15px 0; border-bottom:1px solid var(--line); }
dt { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:750; }
dd { margin:6px 0 0; line-height:1.45; unicode-bidi:plaintext; }
.feedback-row dd { max-height:105px; overflow:auto; }
.sf-title { display:flex; align-items:center; gap:12px; }.sf-cloud { width:38px; height:38px; display:grid; place-items:center; border-radius:6px; background:#0b96df; color:#fff; box-shadow:0 2px 5px rgba(11,150,223,.25); }
.salesforce-records { margin:20px 20px 0; border:1px solid #c9d5e1; border-radius:5px; overflow:hidden; background:#fff; box-shadow:0 2px 7px rgba(22,50,76,.08); }
.sf-progress { display:flex; align-items:center; gap:10px; padding:14px 16px; background:#f3f6f9; border-bottom:1px solid #d8e0e8; }.sf-progress strong,.sf-progress small { display:block; }.sf-progress small { color:var(--muted); margin-top:3px; }.sf-pulse { width:10px; height:10px; border-radius:50%; background:#2e844a; box-shadow:0 0 0 5px rgba(46,132,74,.13); }
.sf-record { padding:16px; border-bottom:1px solid #d8e0e8; }.sf-record:last-child { border-bottom:0; }.sf-record-head { display:grid; grid-template-columns:38px 1fr auto; gap:11px; align-items:center; }.sf-record-head strong { display:block; font-size:.95rem; }.sf-icon { width:38px; height:38px; display:grid; place-items:center; color:#fff; border-radius:4px; font-weight:800; }.sf-icon.contact{background:#7f8de1}.sf-icon.survey{background:#3ba755}.sf-icon.feedback{background:#e96b5a}.sf-object { display:block; color:#54698d; font-size:.65rem; letter-spacing:.025em; margin-bottom:3px; }.sf-record b { font-size:.65rem; padding:5px 8px; border-radius:999px; background:#eef1f4; color:#5f6b76; white-space:nowrap; }.sf-record b.ready { background:#d7f2e3; color:#1b7045; }.sf-fields { margin:12px 0 0 49px; padding:9px 11px; background:#f7f9fb; border-left:3px solid #d8e0e8; color:#41566b; font-size:.78rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.integration-note { display:flex; gap:7px; margin:14px 20px 22px; color:var(--muted); font-size:.73rem; line-height:1.45; }
.page-footer { display:flex; justify-content:space-between; gap:20px; padding:24px 2px 0; color:var(--muted); font-size:.74rem; }
.section-intro { display:flex; justify-content:space-between; align-items:end; gap:30px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.section-intro p { max-width:540px; margin:0; color:var(--muted); line-height:1.55; }
.wa-layout { display:grid; grid-template-columns:minmax(290px,360px) 1fr; gap:34px; align-items:start; padding-top:26px; }
.wa-phone { background:#efeae2; border:1px solid #cbd5d1; border-radius:26px; overflow:hidden; box-shadow:0 18px 45px rgba(24,57,49,.15); }
.wa-phone-top { height:24px; background:#f7f7f7; display:grid; place-items:center; color:#53635f; font-size:.7rem; }
.wa-chat-head { background:#075e54; color:#fff; display:flex; align-items:center; gap:9px; padding:10px 12px; }
.wa-back { font-size:1.5rem; }.wa-avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#075e54; font-weight:800; }
.wa-contact { flex:1; }.wa-contact strong,.wa-contact small { display:block; }.wa-contact small { opacity:.8; font-size:.7rem; margin-top:2px; }.wa-demo-tag { border:1px solid rgba(255,255,255,.55); border-radius:10px; padding:3px 6px; font-size:.65rem; }
.wa-messages { min-height:400px; padding:17px 12px; background-image:radial-gradient(rgba(74,109,98,.13) .8px,transparent .8px); background-size:18px 18px; }
.wa-day { text-align:center; margin-bottom:13px; }.wa-day span { background:#d9edf7; color:#475b63; padding:5px 8px; border-radius:7px; font-size:.65rem; }
.wa-bubble { max-width:83%; padding:9px 10px 6px; border-radius:9px; margin:7px 0; box-shadow:0 1px 1px rgba(0,0,0,.09); white-space:pre-wrap; font-size:.86rem; line-height:1.45; }
.wa-bot { background:#fff; color:#17241f; border-top-left-radius:2px; }.wa-user { background:#d9fdd3; color:#17241f; margin-left:auto; border-top-right-radius:2px; }.wa-time { display:block; text-align:right; opacity:.52; font-size:.58rem; margin-top:4px; }
.wa-options { display:grid; gap:7px; max-width:88%; margin-top:10px; }.wa-option { border:1px solid #82b9ae; background:#fff; color:#08796b; border-radius:8px; padding:9px; text-align:center; }
.wa-compose { display:flex; gap:8px; align-items:center; padding:9px 10px; }.wa-compose div { flex:1; background:#fff; color:#7a8783; border-radius:22px; padding:10px 14px; }.wa-compose button { border:0; width:38px; height:38px; border-radius:50%; background:#00a884; color:#fff; }
.wa-steps { display:grid; }.wa-step { display:grid; grid-template-columns:34px 1fr; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer; }.wa-step button { width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); }.wa-step.active button { background:var(--blue); color:#fff; border-color:var(--blue); }.wa-step strong,.wa-step small { display:block; }.wa-step small { color:var(--muted); margin-top:2px; }
.wa-live-action { padding:17px; margin-bottom:16px; border:1px solid #9ed5c4; border-left:4px solid #00a884; border-radius:10px; background:#f0fbf7; }.wa-live-action>span { color:#087b62; font-size:.68rem; font-weight:850; letter-spacing:.07em; }.wa-live-action h3 { margin:5px 0 6px; font-size:1.05rem; }.wa-live-action p { color:var(--muted); margin:0 0 13px; line-height:1.45; }.wa-live-action>label { display:block; font-weight:800; margin-bottom:6px; }.wa-live-action>label small { display:inline; font-weight:500; }.wa-live-action small { display:block; color:var(--muted); margin-top:7px; }.wa-live-action small.error { color:#b33b2e; }.wa-phone-entry { display:flex; align-items:center; border:1px solid #8fc8b6; background:#fff; border-radius:8px; overflow:hidden; }.wa-phone-entry span { padding-left:12px; color:#496a60; }.wa-phone-entry input { width:100%; border:0; outline:0; padding:11px 10px; background:transparent; color:var(--ink); font:inherit; }.wa-launch { border:0; border-radius:8px; padding:11px 15px; margin-top:13px; background:#00a884; color:#fff; font-weight:800; }.wa-launch:disabled { opacity:.55; }
.wa-nav { display:flex; gap:9px; margin-top:19px; }.wa-nav button { border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); padding:10px 15px; font-weight:750; }.wa-nav .wa-next { background:var(--blue); color:#fff; border-color:var(--blue); }.wa-crm-state { border-top:1px solid var(--line); padding-top:14px; color:var(--muted); font-size:.78rem; }
@media (max-width:820px) { .service-header{height:auto;padding:15px 18px}.header-meta>span:last-child{display:none}.shell{padding:36px 0}.hero,.workspace{grid-template-columns:1fr}.hero{gap:18px}.eyebrow,.privacy{grid-column:auto}.card{min-height:460px}.transcript{min-height:380px;height:auto}.page-footer{flex-direction:column;align-items:start} }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; scroll-behavior:auto!important; } }