/* ===================================================================
   Connectus BD Limited — shared design system
   Deliberate single (dark) theme — a fixed brand identity, not a
   light/dark switch. Colors are painted explicitly throughout.
=================================================================== */

:root{
  --navy-950:#060c22;
  --navy-900:#0a122c96;
  --navy-900-solid:#0a1230;
  --navy-850:#0d1740;
  --navy-800:#101c4a;
  --navy-750:#132152;
  --navy-700:#182a63;
  --line:#26346f;
  --line-soft:#1a2350;
  --text:#f1f5fd;
  --text-dim:#aab7dc;
  --text-faint:#7784ad;
  --teal:#22d3ee;
  --teal-bright:#7fe9fb;
  --teal-deep:#0891b2;
  --sky:#3b82f6;
  --gold:#e3b673;
  --gold-bright:#f0cf9a;
  --danger:#f87171;
  --success:#34d399;
  --r-s:10px;
  --r-m:16px;
  --r-l:26px;
  --maxw:1180px;
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -28px rgba(0,0,0,.65);
  --shadow-pop:0 20px 60px -20px rgba(0,0,0,.7);
}

[hidden]{ display:none !important; }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 620px at 82% -8%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 15%, rgba(59,130,246,.10), transparent 55%),
    var(--navy-950);
  color:var(--text);
  font-family:"Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.6;
  padding:0 20px;
}
@media (min-width:640px){ body{ padding:0 32px; } }

.wrap{ max-width:var(--maxw); margin-inline:auto; }

h1,h2,h3,h4{
  font-family:"Manrope", ui-sans-serif, system-ui, sans-serif;
  color:var(--text);
  margin:0;
  text-wrap:balance;
  letter-spacing:-0.01em;
}
h1{ font-weight:800; font-size:clamp(2.1rem, 1.55rem + 2.6vw, 3.6rem); line-height:1.06; }
h2{ font-weight:800; font-size:clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); line-height:1.12; }
h3{ font-weight:700; font-size:1.28rem; line-height:1.3; }
p{ margin:0; color:var(--text-dim); max-width:65ch; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-bright);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width:1.2em; height:1px;
  background:var(--teal);
}
.eyebrow.gold{ color:var(--gold-bright); }
.eyebrow.gold::before{ background:var(--gold); }

.section{ padding-block:clamp(56px, 6vw, 96px); }
.section-alt{ background:linear-gradient(180deg, transparent, rgba(56,189,248,.03) 30%, transparent); border-block:1px solid var(--line-soft); }
.section-head{ display:flex; flex-direction:column; gap:14px; max-width:720px; margin-bottom:clamp(32px,4vw,52px); }
.section-head.center{ margin-inline:auto; text-align:center; align-items:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:700; font-size:.96rem;
  padding:.85em 1.5em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:linear-gradient(135deg, var(--teal) 0%, var(--sky) 130%);
  color:#04160f;
  box-shadow:0 12px 30px -10px rgba(45,212,191,.55);
}
.btn-primary:hover{ box-shadow:0 16px 36px -8px rgba(45,212,191,.7); }
.btn-ghost{
  background:rgba(255,255,255,.02);
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-bright); }
.btn-gold{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 130%);
  color:#2b1c05;
  box-shadow:0 12px 30px -10px rgba(227,182,115,.45);
}
.btn-sm{ padding:.6em 1.1em; font-size:.86rem; }
.btn svg{ width:1.05em; height:1.05em; flex:none; }

/* ---------- Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px) saturate(140%);
  background:rgba(5,11,26,.72);
  border-bottom:1px solid var(--line-soft);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img{ width:38px; height:38px; object-fit:contain; }
.brand-word{ font-family:"Manrope"; font-weight:800; font-size:1.02rem; line-height:1.1; color:var(--text); letter-spacing:-.01em; }
.brand-word small{ display:block; font-family:"IBM Plex Mono"; font-weight:500; font-size:.6rem; letter-spacing:.16em; color:var(--text-faint); margin-top:1px; }
.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{
  padding:8px 14px; border-radius:999px; font-size:.92rem; font-weight:600; color:var(--text-dim);
  transition:background .15s, color .15s;
}
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav-links a.active{ color:var(--navy-950); background:var(--teal); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; }
@media (max-width:920px){
  .nav-links{
    position:absolute; left:20px; right:20px; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--navy-850); border:1px solid var(--line-soft); border-radius:var(--r-m);
    padding:10px; margin-top:8px;
    box-shadow:var(--shadow-pop);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 14px; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
    background:transparent; color:var(--text); cursor:pointer;
  }
  .nav-cta .btn-ghost{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(48px,7vw,88px) clamp(40px,5vw,64px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; }
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-copy{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.hero-copy p{ font-size:1.08rem; max-width:52ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.hero-art{
  position:relative; border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--navy-850);
  aspect-ratio:5/4;
}
.hero-art canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero-badge{
  position:absolute; left:20px; bottom:20px;
  display:flex; align-items:center; gap:12px;
  background:rgba(5,11,26,.82); border:1px solid var(--line);
  padding:12px 16px; border-radius:var(--r-m);
  backdrop-filter:blur(6px);
}
.hero-badge .ico{ width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--teal),var(--sky)); display:flex; align-items:center; justify-content:center; flex:none; }
.hero-badge .ico svg{ width:20px; height:20px; color:#04160f; }
.hero-badge strong{ display:block; font-family:"Manrope"; font-size:.95rem; }
.hero-badge span{ display:block; font-size:.78rem; color:var(--text-faint); }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:20px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:920px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--navy-800);
  border:1px solid var(--line-soft);
  border-radius:var(--r-m);
  padding:26px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--shadow-card);
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover{ border-color:var(--line); transform:translateY(-3px); }
.card .ico{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(45,212,191,.12); color:var(--teal-bright);
  flex:none;
}
.card.gold .ico{ background:rgba(227,182,115,.14); color:var(--gold-bright); }
.card .ico svg{ width:22px; height:22px; }
.card h3{ margin-top:2px; }
.card p{ font-size:.94rem; }
.card .tag{
  align-self:flex-start; font-family:"IBM Plex Mono"; font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint); border:1px solid var(--line); border-radius:999px; padding:3px 10px;
}
.card-link{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.88rem; color:var(--teal-bright); }
.card-link svg{ width:14px; height:14px; transition:transform .15s; }
.card:hover .card-link svg{ transform:translateX(3px); }

/* ---------- Stat / feature strip ---------- */
.strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-m); overflow:hidden;
}
@media (max-width:760px){ .strip{ grid-template-columns:repeat(2,1fr); } }
.strip > div{ background:var(--navy-800); padding:22px 20px; display:flex; flex-direction:column; gap:6px; }
.strip strong{ font-family:"IBM Plex Mono"; font-size:1.3rem; color:var(--teal-bright); }
.strip span{ font-size:.82rem; color:var(--text-faint); }

/* ---------- Why-us list ---------- */
.check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.check-list li{ display:flex; gap:10px; align-items:flex-start; color:var(--text-dim); font-size:.98rem; }
.check-list svg{ width:20px; height:20px; flex:none; color:var(--teal); margin-top:2px; }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--r-l);
  background:linear-gradient(135deg, #0c2440 0%, #0a1830 60%, #081226 100%);
  border:1px solid var(--line);
  padding:clamp(36px,5vw,60px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:-40% -10% auto -10%; height:220%;
  background:radial-gradient(closest-side, rgba(45,212,191,.16), transparent 70%);
  pointer-events:none;
}
.cta-band > *{ position:relative; }
.cta-band p{ max-width:52ch; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line-soft); padding-block:48px 28px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ font-size:.9rem; margin-top:10px; }
.footer-quote{ font-style:italic; color:var(--teal-bright); font-size:.88rem; margin-top:14px; }
.footer-col h4{ font-family:"IBM Plex Mono"; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-col a{ font-size:.9rem; color:var(--text-dim); }
.footer-col a:hover{ color:var(--teal-bright); }
.footer-contact li{ display:flex; gap:8px; align-items:flex-start; font-size:.88rem; color:var(--text-dim); }
.footer-contact svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--teal); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:36px; padding-top:20px; border-top:1px solid var(--line-soft); font-size:.82rem; color:var(--text-faint); }
.footer-bottom a{ color:var(--text-faint); }
.footer-bottom a:hover{ color:var(--text-dim); }

/* ---------- Page header (interior pages) ---------- */
.page-hero{ padding-block:clamp(40px,6vw,64px) clamp(28px,4vw,40px); }
.breadcrumb{ font-family:"IBM Plex Mono"; font-size:.75rem; color:var(--text-faint); display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.breadcrumb a:hover{ color:var(--teal-bright); }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.82rem; font-weight:600; color:var(--text-dim); }
.field input, .field textarea, .field select{
  background:var(--navy-900-solid); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-s); padding:.75em .9em; font-size:.94rem; font-family:inherit; resize:vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

/* ---------- Callout panel ---------- */
.panel{ background:var(--navy-800); border:1px solid var(--line-soft); border-radius:var(--r-m); padding:clamp(22px,3vw,34px); }

/* ================= CHAT WIDGET ================= */
.chat-launcher{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--sky));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
  box-shadow:0 14px 34px -8px rgba(45,212,191,.65);
}
.chat-launcher svg{ width:26px; height:26px; color:#04160f; }
.chat-launcher .dot{
  position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%;
  background:var(--danger); border:2px solid var(--navy-950); display:none;
}
.chat-launcher .dot.show{ display:block; }

.chat-panel{
  position:fixed; right:20px; bottom:92px; z-index:80;
  width:min(370px, calc(100vw - 40px)); height:min(520px, calc(100vh - 140px));
  background:var(--navy-850); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-pop); display:none; flex-direction:column; overflow:hidden;
}
.chat-panel.open{ display:flex; }
.chat-head{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line-soft); background:var(--navy-800); }
.chat-head img{ width:30px; height:30px; }
.chat-head strong{ font-family:"Manrope"; font-size:.92rem; }
.chat-head span{ display:block; font-size:.72rem; color:var(--success); }
.chat-head span::before{ content:"● "; }
.chat-close{ margin-left:auto; background:none; border:none; color:var(--text-faint); cursor:pointer; padding:6px; }
.chat-close svg{ width:18px; height:18px; }

.chat-body{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.chat-form{ display:flex; flex-direction:column; gap:12px; }
.chat-form p{ font-size:.86rem; }
.chat-form .btn{ margin-top:4px; }

.msg{ max-width:82%; padding:10px 13px; border-radius:14px; font-size:.9rem; line-height:1.45; }
.msg-visitor{ align-self:flex-end; background:linear-gradient(135deg, var(--teal), var(--teal-deep)); color:#04160f; border-bottom-right-radius:4px; }
.msg-admin{ align-self:flex-start; background:var(--navy-750); border:1px solid var(--line-soft); color:var(--text); border-bottom-left-radius:4px; }
.msg-meta{ font-size:.68rem; color:var(--text-faint); margin-top:2px; }
.msg-system{ align-self:center; font-size:.76rem; color:var(--text-faint); }

.chat-input-row{ display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--line-soft); background:var(--navy-800); }
.chat-input-row input{ flex:1; background:var(--navy-900-solid); border:1px solid var(--line); border-radius:999px; padding:.7em 1em; color:var(--text); font-size:.9rem; }
.chat-input-row button{ width:40px; height:40px; border-radius:50%; border:none; background:var(--teal); color:#04160f; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.chat-input-row button svg{ width:17px; height:17px; }

.chat-empty{ margin:auto; text-align:center; color:var(--text-faint); font-size:.85rem; padding:20px; }

@media (max-width:480px){
  .chat-panel{ right:12px; left:12px; width:auto; bottom:88px; }
  .chat-launcher{ right:16px; bottom:16px; }
}

/* ---------- Logo lockup ---------- */
.brand img.logo-full{ height:36px; width:auto; object-fit:contain; }
.footer-brand img.logo-full{ height:34px; width:auto; }

/* ---------- Location pill ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.35);
  color:var(--teal-bright); font-family:"IBM Plex Mono"; font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:7px 16px; border-radius:999px;
}

/* ---------- Stats band (full-bleed) ---------- */
.stats-band{
  background:linear-gradient(120deg, #14245e 0%, #0d1a44 55%, #0a1230 100%);
  border-block:1px solid var(--line-soft);
}
.stats-band .grid{ grid-template-columns:repeat(4,1fr); gap:1px; }
@media (max-width:760px){ .stats-band .grid{ grid-template-columns:repeat(2,1fr); } }
.stat-item{ padding:32px 20px; text-align:center; }
.stat-item strong{ display:block; font-family:"Manrope"; font-weight:800; font-size:2rem; color:var(--teal-bright); }
.stat-item span{ display:block; margin-top:4px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); font-family:"IBM Plex Mono"; }

/* ---------- Timeline ---------- */
.timeline{ position:relative; display:flex; flex-direction:column; gap:0; max-width:760px; margin-inline:auto; }
.timeline-item{ position:relative; padding-left:56px; padding-bottom:36px; }
.timeline-item::before{
  content:""; position:absolute; left:15px; top:34px; bottom:0; width:1px;
  background:linear-gradient(var(--teal), var(--line-soft));
}
.timeline-item:last-child::before{ display:none; }
.timeline-dot{
  position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
  background:var(--navy-800); border:2px solid var(--teal); color:var(--teal-bright);
  display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono"; font-size:.62rem; font-weight:700; text-align:center;
}
.timeline-item h4{ font-family:"Manrope"; font-weight:700; font-size:1.05rem; color:var(--text); margin-bottom:6px; }
.timeline-item p{ font-size:.92rem; }

/* ---------- Alternating service block ---------- */
.service-block{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,56px); align-items:center; padding-block:clamp(40px,5vw,64px); border-bottom:1px solid var(--line-soft); }
.service-block:last-child{ border-bottom:none; }
.service-block.reverse .service-copy{ order:2; }
.service-block.reverse .service-visual{ order:1; }
@media (max-width:860px){
  .service-block{ grid-template-columns:1fr; }
  .service-block.reverse .service-copy, .service-block.reverse .service-visual{ order:initial; }
}
.service-visual{
  background:var(--navy-800); border:1px solid var(--line-soft); border-radius:var(--r-l);
  padding:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center;
  min-height:220px;
}
.service-visual .ico{ width:64px; height:64px; border-radius:16px; background:rgba(34,211,238,.14); color:var(--teal-bright); display:flex; align-items:center; justify-content:center; }
.service-visual .ico svg{ width:30px; height:30px; }
.service-visual strong{ font-family:"Manrope"; font-size:1.1rem; }
.service-visual span{ font-size:.84rem; color:var(--text-faint); }

/* ---------- Contact info list & offices ---------- */
.info-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.info-list li{ display:flex; gap:14px; align-items:flex-start; }
.info-list .ico{ width:38px; height:38px; border-radius:10px; background:var(--navy-800); border:1px solid var(--line-soft); color:var(--teal); display:flex; align-items:center; justify-content:center; flex:none; }
.info-list .ico svg{ width:18px; height:18px; }
.info-list .label{ font-size:.74rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; font-family:"IBM Plex Mono"; }
.info-list strong{ display:block; font-size:.95rem; font-weight:700; margin-top:2px; }

.office-card{
  display:flex; gap:12px; align-items:flex-start; background:var(--navy-800); border:1px solid var(--line-soft);
  border-radius:var(--r-m); padding:16px 18px; margin-top:12px;
}
.office-card .ico{ width:34px; height:34px; border-radius:9px; background:rgba(34,211,238,.14); color:var(--teal-bright); display:flex; align-items:center; justify-content:center; flex:none; }
.office-card .ico svg{ width:16px; height:16px; }
.office-card strong{ display:block; font-size:.9rem; }
.office-card span{ display:block; font-size:.78rem; color:var(--text-faint); margin-top:2px; }

/* ---------- World/handshake hero art ---------- */
.hero-art.world-art{ background:linear-gradient(135deg, #0d2a63 0%, #0a1a44 55%, #081230 100%); }
.hero-watermark{
  position:absolute; inset:0; margin:auto; width:52%; max-width:260px; height:fit-content;
  opacity:.16; mix-blend-mode:screen; pointer-events:none;
}