@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root { --navy:#10233f; --ink:#12233d; --muted:#718096; --line:#dce4ec; --cream:#f6f8f5; --mint:#35c48a; --mint-soft:#e7f7ee; --white:#fff; --shadow:0 24px 70px rgba(16,35,63,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fbfcfa; font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-size:16px; line-height:1.7; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.site-shell { overflow:hidden; }
.topbar { width:min(1180px,calc(100% - 48px)); margin:auto; min-height:80px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; line-height:1.2; }
.brand img { width:38px; height:38px; }
.brand strong { display:block; font-size:18px; letter-spacing:-.03em; }
.brand small { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.nav-links { display:flex; gap:30px; color:#637185; font-size:14px; }
.nav-links a:hover,.text-link:hover,.footer a:hover { color:var(--mint); }
.top-cta { color:var(--navy); font-size:14px; font-weight:600; }
.top-cta span,.primary-button span { display:inline-block; margin-right:8px; font-size:19px; transition:transform .2s; }
.top-cta:hover span,.primary-button:hover span { transform:translateX(-4px); }
.hero { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:94px 0 92px; display:grid; grid-template-columns:1.03fr .97fr; gap:90px; align-items:center; }
.eyebrow,.section-kicker { color:var(--mint); font-size:12px; font-weight:700; letter-spacing:.08em; }
.eyebrow { display:flex; align-items:center; gap:8px; }
.status-dot { width:8px; height:8px; background:var(--mint); border-radius:50%; box-shadow:0 0 0 5px rgba(53,196,138,.13); }
h1,h2,p { margin:0; }
h1 { margin-top:20px; color:var(--navy); font-size:clamp(42px,5.5vw,72px); line-height:1.16; letter-spacing:-.06em; font-weight:700; }
h1 em { color:var(--mint); font-style:normal; }
.hero-lead { max-width:500px; margin-top:25px; color:#66758a; font-size:18px; line-height:2; }
.hero-actions { display:flex; align-items:center; gap:25px; margin-top:34px; }
.primary-button { display:inline-flex; align-items:center; background:var(--navy); color:white; border-radius:8px; padding:12px 19px; font-weight:600; box-shadow:0 10px 23px rgba(16,35,63,.16); }
.text-link { color:var(--navy); font-size:14px; font-weight:600; }
.text-link span { color:var(--mint); margin-right:7px; }
.hero-note { margin-top:30px; color:#91a0b1; font-size:12px; }
.hero-note span { color:var(--mint); font-size:18px; margin-left:7px; }
.chat-preview { position:relative; min-height:445px; background:var(--navy); border-radius:18px; padding:22px 22px 20px; box-shadow:var(--shadow); transform:rotate(1.2deg); }
.chat-preview:before { content:''; position:absolute; inset:14px -14px -14px 14px; border:1px solid #d9eee4; border-radius:18px; z-index:-1; }
.preview-topline { display:flex; align-items:center; justify-content:space-between; color:white; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.13); font-size:14px; font-weight:600; }
.live-label { color:#a6ddc0; font-size:11px; font-weight:400; display:flex; align-items:center; gap:6px; }.live-label i,.chat-card-header span i { width:6px; height:6px; background:var(--mint); border-radius:50%; display:inline-block; }
.preview-thread { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:26px 4px; }
.message { max-width:82%; padding:11px 14px; border-radius:14px; font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.assistant-message { background:var(--mint-soft); color:#214b3b; border-top-right-radius:4px; align-self:flex-start; }
.user-message { background:#e6edf5; color:#31445d; border-top-left-radius:4px; align-self:flex-end; }
.preview-thread .assistant-message.short { max-width:92%; }
.preview-input { height:48px; border-top:1px solid rgba(255,255,255,.13); color:#8395aa; display:flex; align-items:center; justify-content:space-between; padding-top:14px; font-size:13px; }
.preview-input button { border:0; width:31px; height:31px; background:var(--mint); color:var(--navy); border-radius:7px; font-weight:700; }
.preview-ruler { position:absolute; left:-31px; top:94px; bottom:90px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }.preview-ruler:before { content:''; position:absolute; width:1px; background:#cde8dc; top:3px; bottom:3px; }.preview-ruler span { display:block; width:5px; height:5px; background:var(--mint); border-radius:50%; z-index:1; }
.trust-strip { width:min(1180px,calc(100% - 48px)); margin:auto; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; color:#6f7e91; font-size:13px; }.trust-strip b { color:var(--mint); font-size:11px; margin-left:10px; }
.chat-section,.capabilities { width:min(850px,calc(100% - 48px)); margin:0 auto; padding:110px 0 80px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-top:13px; }.section-heading h2 { color:var(--navy); font-size:clamp(30px,4vw,46px); line-height:1.3; letter-spacing:-.05em; }.section-heading p { color:var(--muted); margin-top:9px; font-size:15px; }.section-index { color:#a0adba; font-size:11px; direction:ltr; }
.chat-card { margin-top:35px; background:white; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px; }.chat-card-header { display:flex; align-items:center; gap:11px; padding:0 3px 18px; border-bottom:1px solid #edf1f3; }.assistant-avatar { width:39px; height:39px; padding:6px; background:var(--mint-soft); border-radius:11px; }.assistant-avatar img { width:100%; height:100%; }.chat-card-header strong,.chat-card-header span { display:block; }.chat-card-header strong { color:var(--navy); font-size:14px; }.chat-card-header span { color:#99a5b3; font-size:11px; }.chat-card-header span i { margin-left:5px; }.shield-mark { margin-right:auto; color:var(--mint); font-size:21px; }.conversation { min-height:185px; max-height:300px; overflow:auto; padding:22px 5px 8px; display:flex; flex-direction:column; gap:12px; }.conversation .message { font-size:14px; }.quick-questions { display:flex; gap:8px; flex-wrap:wrap; padding:5px 0 16px; }.quick-questions button { border:1px solid #cfe7da; background:#fbfffc; color:#428167; cursor:pointer; border-radius:999px; padding:6px 10px; font-size:12px; }.quick-questions button:hover { border-color:var(--mint); background:var(--mint-soft); }.chat-form { display:flex; gap:10px; border-top:1px solid #edf1f3; padding-top:15px; }.chat-form input { min-width:0; flex:1; border:1px solid #d5dfe7; border-radius:9px; padding:11px 13px; color:var(--navy); outline:none; }.chat-form input:focus { border-color:var(--mint); box-shadow:0 0 0 3px rgba(53,196,138,.12); }.chat-form button { border:0; border-radius:9px; background:var(--navy); color:white; padding:0 17px; cursor:pointer; }.chat-form button:hover { background:#19355e; }.chat-form button span { color:var(--mint); margin-right:6px; }.form-footnote { color:#a2adba; font-size:11px; margin-top:11px; }.loading { opacity:.6; }
.capability-line { display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:38px; }.capability-line span { flex:1 1 25%; padding:17px 14px; border-left:1px solid var(--line); color:#50637a; font-size:14px; }.capability-line span:nth-child(4n+1) { border-left:0; }.capability-line span:before { content:'↗'; color:var(--mint); margin-left:8px; font-size:12px; }
.safety { width:min(1180px,calc(100% - 48px)); margin:20px auto 85px; padding:31px 38px; display:flex; gap:23px; align-items:flex-start; background:#edf8f1; border:1px solid #d5ecdf; border-radius:13px; }.safety-symbol { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:white; font-weight:700; }.safety h2 { color:var(--navy); font-size:23px; margin-top:5px; }.safety p { color:#5e7e70; max-width:760px; margin-top:6px; font-size:14px; }
.footer { width:min(1180px,calc(100% - 48px)); margin:auto; padding:23px 0 32px; border-top:1px solid var(--line); color:#9ba7b5; font-size:12px; display:flex; gap:25px; }.footer span:nth-child(2) { margin-right:auto; }.footer a { color:var(--navy); font-weight:600; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:800px) { .topbar,.hero,.trust-strip,.safety,.footer { width:min(100% - 32px,620px); }.topbar { min-height:70px; }.nav-links { display:none; }.hero { padding:61px 0 70px; display:block; }.hero-copy { margin-bottom:62px; }.chat-preview { margin:0 14px; }.trust-strip { display:block; padding:10px 0; }.trust-strip span { display:block; padding:9px 0; }.chat-section,.capabilities { width:min(100% - 32px,620px); padding:76px 0 55px; }.section-heading { align-items:flex-start; }.section-index { display:none; }.capability-line span { flex-basis:50%; }.capability-line span:nth-child(4n+1) { border-left:1px solid var(--line); }.capability-line span:nth-child(2n+1) { border-left:0; }.safety { margin-bottom:62px; padding:25px 20px; }.footer { flex-wrap:wrap; }.footer span:nth-child(2) { margin-right:0; order:3; flex-basis:100%; } }
@media (max-width:450px) { h1 { font-size:42px; }.hero-lead { font-size:16px; }.hero-actions { gap:17px; }.chat-preview { min-height:420px; padding:17px; }.preview-ruler { left:-19px; }.chat-card { padding:14px; }.quick-questions { gap:6px; }.quick-questions button { font-size:11px; }.chat-form { gap:6px; }.chat-form button { padding:0 12px; } }