/* ===== Safe scoped theme ===== */
#csd-about{
  --bg:#f6f8ff; --surface:#ffffff; --card:#f9fbff;
  --text:#0f172a; --muted:#5b6474; --accent:#2f6bff; --accent-2:#22c55e;
  --heading:#0b1b3a; --radius:16px; --shadow:0 10px 30px rgba(15,23,42,.08);
  --svc-min-height:136px;
}
#csd-about, #csd-about *{ box-sizing:border-box; }
#csd-about{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: linear-gradient(180deg, #eef3ff 0%, rgba(238,243,255,0) 34%) var(--bg);
  line-height:1.65; font-size:16px;
}
#csd-about .hd{ font-family: Manrope, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
#csd-about .container{ width:min(1120px,92vw); margin:0 auto; }
#csd-about section{ padding-block: clamp(36px,6vw,90px); }
#csd-about h1{ font: 800 clamp(28px,3.6vw,44px)/1.18 Manrope, Inter, sans-serif; color:var(--heading); margin:0 0 10px; }
#csd-about h2{ font: 800 clamp(24px,3.2vw,34px)/1.18 Manrope, Inter, sans-serif; color:var(--heading); margin:0 0 10px; }
#csd-about h3{ font: 800 clamp(18px,2.2vw,22px)/1.2 Manrope, Inter, sans-serif; color:var(--heading); margin:0 0 8px; }
#csd-about .sub{ color:var(--muted); font-size:0.98rem; }
#csd-about a{ color:var(--accent); text-decoration:none; }
#csd-about a:hover{ text-decoration:underline; }
#csd-about .btn{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid rgba(47,107,255,.25); background:var(--accent); color:#fff; font-weight:700; box-shadow:var(--shadow); }
#csd-about .btn.sec{ background:#fff; color:var(--heading); }
#csd-about .card{ background:#fff; border:1px solid #e8ecf7; border-radius:var(--radius); box-shadow:var(--shadow); }
#csd-about .soft{ background:var(--card); border:1px solid #e8ecf7; border-radius:var(--radius); }

/* ===== HERO ===== */
#csd-about .brand{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--heading); font-weight:800; margin-bottom:6px; }
#csd-about .brand svg{ color:var(--accent); width:18px; height:18px; }
#csd-about .badge{ display:inline-flex; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(47,107,255,.10); border:1px solid rgba(47,107,255,.20); font-weight:600; font-size:.85rem; }
#csd-about .hero{ text-align:center; padding-top: clamp(36px, 8vw, 96px); }
#csd-about .hero .accent{ color:var(--accent); }
#csd-about .hero p{ max-width:780px; margin:10px auto 0; }
#csd-about .hero .cta{ margin-top:18px; display:inline-flex; gap:10px; flex-wrap:wrap; }

/* 3 intro cards */
#csd-about .intro-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
@media(max-width:900px){ #csd-about .intro-grid{ grid-template-columns:1fr; } }
#csd-about .intro-card{ overflow:hidden; position:relative; border-radius:16px; box-shadow:var(--shadow); }
#csd-about .intro-card img{ width:100%; height:210px; object-fit:cover; display:block; }
#csd-about .intro-card .caption{ position:absolute; left:10px; right:10px; bottom:10px; background:rgba(14,18,28,.6); color:#fff; padding:8px 10px; border-radius:12px; font-weight:600; font-size:.95rem; }

/* ===== PREAMBLE ===== */
#csd-about .split{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px,4vw,40px); align-items:center; }
@media(max-width:900px){ #csd-about .split{ grid-template-columns:1fr; } }
#csd-about .media{ overflow:hidden; border-radius:18px; box-shadow:var(--shadow); background:#eaf0ff; }
#csd-about .media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Preamble feature cards */
#csd-about .features-grid{ display:grid; grid-template-columns:repeat(3, minmax(240px, 1fr)); gap:18px; max-width:1000px; margin:18px auto 0; padding-inline:8px; }
@media(max-width:900px){ #csd-about .features-grid{ grid-template-columns:1fr; } }
#csd-about .feat-card{ background:#fff; border:1px solid #e8ecf7; border-radius:16px; box-shadow:0 10px 24px rgba(15,23,42,.06); padding:18px; text-align:center; transition:transform .25s ease, box-shadow .25s ease; }
#csd-about .feat-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(15,23,42,.12); }
#csd-about .feat-ico{ width:52px; height:52px; margin:0 auto 10px; border-radius:14px; display:grid; place-items:center; background:rgba(47,107,255,.10); color:var(--accent); }
#csd-about .feat-ico svg{ width:26px; height:26px; }
#csd-about .feat-card h4{ margin:6px 0 6px; }
#csd-about .feat-card p{ margin:0; }

/* ===== BACKGROUND ===== */
#csd-about .section-center{text-align:center;}
#csd-about .split-iso{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(20px,4vw,40px); align-items:center; }
@media(max-width:900px){ #csd-about .split-iso{ grid-template-columns:1fr; } }
#csd-about .kbox{ padding:14px 16px; border-radius:14px; background:#fff; border:1px solid #e8ecf7; margin-top:12px; }
#csd-about .kbox h4{ margin:0 0 8px; font:700 16px/1.2 Manrope, Inter, sans-serif; }
#csd-about .kpi{ display:grid; gap:8px; margin:0; padding:0; }
#csd-about .kpi li{ list-style:none; display:flex; gap:10px; align-items:flex-start; color:var(--heading); }
#csd-about .kpi .ok{ color:var(--accent-2); }

/* ===== APPROACH ===== */
#csd-about .two-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:900px){ #csd-about .two-cards{ grid-template-columns:1fr; } }
#csd-about .two-cards .card{ padding:16px 18px; }
#csd-about .a-block{ margin:10px 0; }
#csd-about .a-block b{ display:block; margin-bottom:4px; }

/* ===== SERVICES (XL) ===== */
#csd-about #services-xl .grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
@media(max-width:1100px){ #csd-about #services-xl .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px){ #csd-about #services-xl .grid{ grid-template-columns:1fr; } }
#csd-about #services-xl .svc{ padding:18px; display:grid; grid-template-columns:52px 1fr; gap:14px; align-items:center; border:1px solid #e8ecf7; background:#fff; border-radius:18px; box-shadow:var(--shadow); min-height:var(--svc-min-height); transition:transform .24s ease, box-shadow .24s ease; }
#csd-about #services-xl .svc:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(15,23,42,.10); }
#csd-about #services-xl .icon{ width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background:rgba(47,107,255,.10); color:var(--accent); }
#csd-about #services-xl .icon svg{ width:24px; height:24px; }

/* ===== SPECIALIZED ===== */
#csd-about .blue-band{ background:var(--accent); color:#fff; border-radius:18px; padding:16px; box-shadow:var(--shadow); }
#csd-about .spec-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px 22px; margin-top:6px; font-weight:700; }
@media(max-width:1100px){ #csd-about .spec-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px){ #csd-about .spec-grid{ grid-template-columns:1fr; } }
#csd-about .spec-grid .dot::before{ content:"• "; }

/* ===== CLIENTS (small icon, many cards) ===== */
#csd-about .clients-sm{
  display:grid;
  grid-template-columns: repeat(5, minmax(180px,1fr));
  gap:12px;
  margin-top:16px;
}
@media(max-width:1200px){ #csd-about .clients-sm{ grid-template-columns:repeat(4,minmax(180px,1fr)); } }
@media(max-width:900px){ #csd-about .clients-sm{ grid-template-columns:repeat(2,minmax(200px,1fr)); } }
@media(max-width:540px){ #csd-about .clients-sm{ grid-template-columns:1fr; } }
#csd-about .client-sm{
  background:#fff; border:1px solid #e8ecf7; border-radius:12px;
  padding:12px 10px; text-align:center; display:grid; justify-items:center; gap:8px;
  box-shadow:0 4px 10px rgba(15,23,42,.04);
  transition:transform .2s ease, box-shadow .2s ease;
}
#csd-about .client-sm:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(15,23,42,.08); }
#csd-about .client-sm .ico{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:rgba(47,107,255,.09); color:var(--accent);
}
#csd-about .client-sm .ico svg{ width:20px; height:20px; }
#csd-about .client-sm .name{ font-size:.95rem; font-weight:600; line-height:1.35; }

/* reduce gaps around clients → stats → contact */
#csd-about [data-section="10-clients"]{ padding-bottom: 10px; }
#csd-about [data-section="11-stats"]{ padding-top: 10px; padding-bottom: 10px; }
#csd-about [data-section="11-stats"] .card{ margin:0; }
#csd-about [data-section="12-contact"]{ padding-top: 12px; }

/* ===== CONTACT ===== */
#csd-about .contact{ background:linear-gradient(180deg, #2f6bff 0%, #2b5de0 100%); color:#fff; border-radius:18px; box-shadow:0 24px 60px rgba(47,107,255,.28); padding:clamp(24px,5vw,40px); }
#csd-about .contact .cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px; }
@media(max-width:900px){ #csd-about .contact .cols{ grid-template-columns:1fr; } }
#csd-about .contact .col{ background:rgba(255,255,255,.08); border-radius:12px; padding:14px; transition:transform .2s ease, background .2s ease; }
#csd-about .contact .col:hover{ transform:translateY(-2px); background:rgba(255,255,255,.12); }
#csd-about .contact .col .top{ display:flex; align-items:center; gap:8px; font:800 16px/1.2 Manrope, Inter, sans-serif; margin-bottom:6px; }
#csd-about hr.hr{ border:0; height:1px; background:rgba(255,255,255,.2); margin:14px 0; }

/* contact footer center + actions + form */
#csd-about .contact-foot{ margin-top:12px; text-align:center; display:grid; gap:8px; justify-items:center; }
#csd-about .contact-actions{ display:grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap:10px; margin-top:10px; width:100%; max-width:680px; }
@media(max-width:700px){ #csd-about .contact-actions{ grid-template-columns:1fr; } }
#csd-about .contact-form{ margin-top:12px; background:#fff; color:var(--text); border:1px solid #e8ecf7; border-radius:12px; padding:12px; width:100%; max-width:780px; }
#csd-about .contact-form input, #csd-about .contact-form textarea{ width:100%; border:1px solid #e1e6f5; border-radius:10px; padding:10px 12px; font:inherit; }
#csd-about .contact-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:700px){ #csd-about .contact-form .row2{ grid-template-columns:1fr; } }

/* ===== Editable + Edit UI ===== */
#csd-about [contenteditable="true"]:focus{ outline:none; box-shadow:0 0 0 3px rgba(47,107,255,.25); }
#csd-about .img-editable{ position:relative; cursor:pointer; }
#csd-about .img-editable:hover::after{ content:"Change image"; position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.62); color:#fff; font-size:12px; padding:4px 6px; border-radius:8px; }

/* Gear + Panel */
#csd-about .gear{ position:fixed; right:12px; bottom:12px; z-index:9998; width:42px; height:42px; border-radius:50%; display:none; place-items:center; background:#1f4fe0; color:#fff; box-shadow:var(--shadow); cursor:pointer; }
#csd-about .gear svg{ width:20px; height:20px; }
#csd-about .edit-panel{ position:fixed; right:12px; bottom:60px; z-index:9999; width:min(300px,calc(100vw - 24px)); background:#fff; border:1px solid #e8ecf7; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; display:none; }
#csd-about .edit-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid #eef1fb; background:var(--card); font-weight:700; }
#csd-about .edit-body{ padding:10px; }
#csd-about .edit-body .row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
#csd-about .edit-body label{ display:grid; gap:4px; font-size:13px; }
#csd-about .edit-body input[type="color"]{ width:100%; height:32px; border:1px solid #e8ecf7; border-radius:8px; background:#fff; }
#csd-about .edit-body .bar{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
#csd-about .edit-body button{ padding:7px 10px; border-radius:8px; background:var(--card); border:1px solid #e8ecf7; cursor:pointer; font-weight:700; font-size:13px; }
#csd-about .switch.on{ background:rgba(47,107,255,.12); border-color:rgba(47,107,255,.28); color:var(--heading); }

/* ===== Reveal ===== */
#csd-about .reveal{ opacity:0; transform: translateY(18px) scale(.98); transition: opacity .6s ease, transform .6s ease; }
#csd-about .reveal.in{ opacity:1; transform:none; }
#csd-about .d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.24s }

/* Inline editor: selected element highlight */
#csd-about [data-selected="1"] { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 8px; }
#csd-about .edit-body .grp { border-top: 1px solid #eef1fb; margin-top: 10px; padding-top: 10px; }
#csd-about .edit-body .row3 { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end; }
#csd-about .edit-body .hint { font-size:12px; color:#64748b; margin-top:6px; }

/* Show gear for logged-in users (fallback) */
body.logged-in #csd-about .gear { display: grid !important; }
/* Clients grid – অটো-ফিট + dense flow (hole এড়াতে) */
#csd-about .clients-sm{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-flow: row dense;
  gap:12px;
}

/* Client name দীর্ঘ হলে ভেঙে যাবে */
#csd-about .client-sm .name{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Contact address: নতুন লাইনে টেক্সট দেখাও (Enter দিলে) */
#csd-about .contact .col [data-key$="-addr"]{
  white-space: pre-line;  /* \n → line break */
}