/* ============================================================================
   ডিজিটাল আইটি সলিউশন — প্রফেশনাল রিডিজাইন (v2)
   আগের সব ক্লাস ঠিক রাখা হয়েছে — এই ফাইলটা সরাসরি বদলে দিলেই হবে।
   রঙ/ছন্দ বদলাতে শুধু নিচের :root ভেরিয়েবলগুলো বদলান।
   ============================================================================ */

:root{
  --brand:#1e40c9;
  --brand-dk:#0a2563;
  --brand-soft:#e9f0fe;
  --ink:#0c1a38;
  --accent:#00a896;
  --accent-soft:#dcf5f1;
  --gold:#f59e0b;
  --muted:#5b6b87;
  --bg:#e0e5ec;
  --card:#e0e5ec;
  --line:#c6d0df;
  --ok:#0f9d58;
  --err:#d93025;
  --shadow:var(--neu-out);
  --shadow-lg:var(--neu-out-lg);
  --shadow-brand:0 10px 26px rgba(30,64,201,.32);
  /* নিউমরফিজম (Soft UI) — শুধু লাইট থিমে ব্যবহৃত হয় */
  --neu-bg:#e0e5ec;
  --neu-out:8px 8px 16px rgba(163,177,198,.5),-8px -8px 16px rgba(255,255,255,.9);
  --neu-out-sm:5px 5px 10px rgba(163,177,198,.45),-5px -5px 10px rgba(255,255,255,.85);
  --neu-out-lg:12px 12px 26px rgba(163,177,198,.55),-12px -12px 26px rgba(255,255,255,.9);
  --neu-in:inset 5px 5px 10px rgba(163,177,198,.5),inset -5px -5px 10px rgba(255,255,255,.85);
  --neu-in-sm:inset 3px 3px 7px rgba(163,177,198,.45),inset -3px -3px 7px rgba(255,255,255,.8);
  --radius:18px;
  --radius-sm:10px;
  --radius-lg:22px;
  --wrap:1160px;
  --font:'Hind Siliguri','Noto Sans Bengali','SolaimanLipi',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.85;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--brand);color:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none;transition:color .16s}
a:hover{color:var(--brand-dk)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{line-height:1.4;margin:0 0 .6em;font-weight:600;letter-spacing:-.4px}
h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:700;line-height:1.32}
h2{font-size:clamp(1.5rem,3.1vw,2.15rem)}
h3{font-size:1.16rem}
p{margin:0 0 1rem}
ul{margin:0 0 1rem;padding-left:1.15rem}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--shadow)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- হেডার ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.topbar.scrolled{box-shadow:0 8px 28px rgba(12,26,56,.1)}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);flex:0 0 auto}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:#0a1322;border:2px solid #fff;outline:1px solid var(--line);
  box-shadow:var(--shadow-brand);
}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
/* ফুটার গাঢ় — লোগো স্পষ্ট দেখাতে সাদা ব্যাজ */
.brand-foot .brand-mark{background:#fff;padding:4px;outline:none}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text strong{font-size:1.12rem;font-weight:700;letter-spacing:-.3px}
.brand-text em{font-style:normal;font-size:.76rem;color:var(--muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mainnav{margin-left:auto}
.mainnav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.mainnav a{
  display:block;padding:9px 13px;border-radius:9px;color:#31435f;
  font-size:.94rem;font-weight:500;transition:.16s var(--ease);
}
.mainnav a:hover{background:var(--brand-soft);color:var(--brand)}
.mainnav a.on{color:var(--brand);background:var(--brand-soft);font-weight:600}
.topact{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.m-tools{display:none}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:11px;cursor:pointer;padding:0;margin-left:auto}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px;transition:.2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- বোতাম ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:12px;border:1px solid transparent;
  font-family:inherit;font-size:.98rem;font-weight:600;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  text-align:center;line-height:1.5;
}
.btn:active{transform:translateY(0) scale(.98)}
.btn-sm{padding:9px 16px;font-size:.88rem;border-radius:9px}
.btn-primary{background:linear-gradient(140deg,#2b54d8,var(--brand-dk));color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 32px rgba(30,64,201,.4)}
.btn-accent{background:linear-gradient(140deg,#0bbfa3,#009683);color:#fff;box-shadow:0 8px 22px rgba(0,168,150,.3)}
.btn-accent:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,168,150,.38)}
.btn-ghost{background:#fff;border-color:var(--line);color:#31435f}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn-line{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;transform:translateY(-2px)}
.btn-block{width:100%}
.ic{flex:0 0 auto;vertical-align:-2px}
.ic-wrap{display:inline-flex;align-items:center}

/* ---------- হিরো ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(640px 420px at 88% -12%,rgba(0,168,150,.28),transparent 62%),
    radial-gradient(520px 400px at -12% 112%,rgba(245,158,11,.16),transparent 62%),
    linear-gradient(135deg,#081a42 0%,#0e2a6b 48%,#1e40c9 100%);
  background-size:46px 46px,46px 46px,auto,auto,auto;
  padding:clamp(60px,8vw,104px) 0 clamp(70px,9vw,112px);
}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px)}
.hero::before{width:520px;height:520px;top:-190px;right:-140px;background:radial-gradient(circle,rgba(0,168,150,.3),transparent 68%)}
.hero::after{width:400px;height:400px;bottom:-190px;left:-120px;background:radial-gradient(circle,rgba(245,158,11,.16),transparent 68%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.hero-copy{max-width:760px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  padding:8px 16px;border-radius:99px;font-size:.84rem;font-weight:500;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.eyebrow::before{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(0,168,150,.28);
}
.hero h1{color:#fff;margin-bottom:16px;text-wrap:balance}
.hero p.lead{font-size:1.08rem;color:#d4e2fb;max-width:56ch;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px;max-width:580px}
.hstat{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  border-radius:14px;padding:15px 16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .2s var(--ease),background .2s;
}
.hstat:hover{transform:translateY(-3px);background:rgba(255,255,255,.13)}
.hstat b{display:block;font-size:1.55rem;font-weight:700;line-height:1.2;letter-spacing:-.5px}
.hstat span{font-size:.8rem;color:#bcd2f7}

/* হিরোর পাশের কার্ড */
.hero-side{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);padding:26px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 60px rgba(4,12,34,.35);
}
.hero-side h3{color:#fff;font-size:1rem;margin-bottom:14px}
.hero-side ul{list-style:none;padding:0;margin:0}
.hero-side li{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.94rem;color:#e5eeff}
.hero-side li:last-child{border-bottom:0}
.hero-side li .ic-wrap{color:var(--accent)}

/* হিরোতে ঢোকার অ্যানিমেশন */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:rise .7s .05s both}
.hero h1{animation:rise .7s .15s both}
.hero p.lead{animation:rise .7s .25s both}
.hero-cta{animation:rise .7s .35s both}
.hero-stats{animation:rise .7s .45s both}
.hero-side{animation:rise .8s .3s both}

/* স্ক্রলে ভেসে ওঠা (JS .js-rv যোগ করলে) */
.js-rv .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s var(--ease)}
.js-rv .rv.in{opacity:1;transform:none}

/* ---------- সাধারণ অংশ ---------- */
.section{padding:clamp(56px,7vw,90px) 0}
.section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:740px;margin:0 auto clamp(34px,4vw,52px);text-align:center}
.section-head .kick{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);
  padding:7px 16px;border-radius:99px;margin-bottom:16px;
  border:1px solid #d5e2fb;
}
.section-head .kick::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand)}
.section-head h2{margin-bottom:12px;text-wrap:balance}
.section-head p{color:var(--muted);margin:0;font-size:1.02rem}
.section-head.left{margin-left:0;text-align:left}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#c6d8f6}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:0}

.svc-card .svc-ic{
  width:60px;height:60px;border-radius:17px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(145deg,#3b78ff 0%,#1e40c9 55%,#0a2a6b 100%);color:#fff;
  box-shadow:0 12px 24px -8px rgba(30,64,201,.55),inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.svc-card .svc-ic svg{width:29px;height:29px;stroke-width:1.9px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.svc-card:hover .svc-ic{transform:translateY(-3px) scale(1.06) rotate(-4deg);box-shadow:0 18px 32px -8px rgba(30,64,201,.7),inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.16)}
.svc-card .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.9rem;font-weight:600}
.svc-card .more .ic-wrap{transition:transform .2s var(--ease)}
.svc-card:hover .more .ic-wrap{transform:translateX(4px)}

/* ---------- পোর্টফোলিও ---------- */
.pf-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pf-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.pf-thumb{display:block;position:relative;aspect-ratio:16/10;background:linear-gradient(140deg,#eef3fd,#dde7fa);overflow:hidden;flex:none}
.pf-thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(12,26,56,.08);pointer-events:none}
.pf-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s var(--ease)}
.pf-card:hover .pf-thumb img{transform:scale(1.05)}
.pf-thumb .ph{width:100%;height:100%;display:grid;place-items:center;color:#9fb4dd;background:linear-gradient(140deg,#eef3fd,#dde7fa)}
.pf-view{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-brand);opacity:0;transform:translateY(8px);transition:.35s var(--ease);z-index:2}
.pf-card:hover .pf-view{opacity:1;transform:none}
.pf-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pf-body h3{font-size:1.08rem;margin-bottom:6px;line-height:1.35}
.pf-body h3 a{color:var(--ink)}
.pf-body h3 a:hover{color:var(--brand)}
.pf-body p{font-size:.92rem;color:var(--muted);margin-bottom:12px}
.pf-more{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;color:var(--brand)}
.pf-more .ic{transition:transform .3s var(--ease)}
.pf-card:hover .pf-more .ic{transform:translateX(3px)}
.pf-more:hover{color:var(--brand-dk)}
.chip{
  display:inline-block;font-size:.76rem;font-weight:600;padding:5px 12px;border-radius:99px;
  background:var(--brand-soft);color:var(--brand);margin-bottom:10px;border:1px solid #d5e2fb;
}
.meta{display:flex;flex-wrap:wrap;gap:14px;font-size:.84rem;color:var(--muted)}
.meta span{display:inline-flex;align-items:center;gap:6px}

/* ---------- ব্লগ ---------- */
.post-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.post-card .pf-thumb{aspect-ratio:16/9}
.post-card .pf-body{display:flex;flex-direction:column;flex:1}
.post-card .pf-body h3{font-size:1.05rem}
.post-meta{font-size:.82rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}

/* ---------- প্যাকেজ ---------- */
.pkg{display:flex;flex-direction:column;text-align:center;padding:32px 26px;position:relative}
.pkg.popular{
  border:2px solid var(--brand);box-shadow:var(--shadow-lg);
  background:linear-gradient(180deg,#fbfdff,#f2f6fe);
}
.pkg.popular:hover{box-shadow:0 8px 16px rgba(12,26,56,.08),0 30px 60px rgba(30,64,201,.18)}
.pkg .badge{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:linear-gradient(140deg,#2b54d8,var(--brand-dk));color:#fff;
  font-size:.75rem;font-weight:600;letter-spacing:.4px;
  padding:6px 18px;border-radius:0 0 12px 12px;
  box-shadow:0 6px 16px rgba(30,64,201,.35);
}
.pkg h3{font-size:1.2rem;margin-bottom:4px}
.pkg .price{font-size:1.9rem;font-weight:700;color:var(--brand);line-height:1.3;margin:12px 0 4px;letter-spacing:-.5px}
.pkg .price small{font-size:.82rem;font-weight:500;color:var(--muted);display:block;letter-spacing:0}
.pkg .note{font-size:.85rem;color:var(--muted);min-height:1.6em;margin-bottom:14px}
.pkg ul{list-style:none;padding:0;margin:0 0 24px;text-align:left}
.pkg li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:.93rem;border-bottom:1px dashed var(--line)}
.pkg li:last-child{border-bottom:0}
.pkg li .ic-wrap{color:var(--accent);margin-top:5px}
.pkg .btn{margin-top:auto}

/* ---------- কন্টাক্ট ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:start}
.info-list{list-style:none;padding:0;margin:0}
.info-list li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.info-list li:last-child{border-bottom:0}
.info-list .ic-wrap{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand-soft);color:var(--brand);box-shadow:inset 0 0 0 1px #d5e2fb;
}
.info-list b{display:block;font-size:.82rem;color:var(--muted);font-weight:500}
.info-list a,.info-list span.v{font-weight:600;color:var(--ink);word-break:break-word}

.field{margin-bottom:16px}
.field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:7px}
.field .hint{font-size:.8rem;color:var(--muted);font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:.97rem;color:var(--ink);background:#fff;transition:border-color .16s,box-shadow .16s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(30,64,201,.13)}
textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.req{color:var(--err)}
.card-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow)}

/* ---------- বার্তা ---------- */
.flash-wrap{padding-top:18px}
.flash{padding:13px 18px;border-radius:12px;font-size:.94rem;margin-bottom:10px;border:1px solid}
.flash.ok{background:#e9f8f0;border-color:#b7e7cd;color:#0b6b3f}
.flash.err{background:#fdeceb;border-color:#f7c7c3;color:#a52016}

/* ---------- টেবিল ---------- */
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
table.tbl{width:100%;border-collapse:collapse;font-size:.93rem}
table.tbl th,table.tbl td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl th{background:#f5f9ff;font-weight:600;font-size:.85rem;color:#41527a;white-space:nowrap}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr:hover td{background:#fafcff}

/* ---------- ফুটার ---------- */
.footer{
  background:linear-gradient(180deg,#0b2148 0%,#060f28 100%);
  color:#a9bcdd;padding:clamp(50px,6vw,72px) 0 0;margin-top:auto;
  border-top:1px solid rgba(255,255,255,.08);
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:36px;padding-bottom:40px}
.footer h4{color:#fff;font-size:1rem;margin-bottom:16px;letter-spacing:.2px}
.brand-foot .brand-text strong{color:#fff}
.foot-about{font-size:.92rem;line-height:1.85;max-width:44ch}
.foot-links,.foot-contact{list-style:none;padding:0;margin:0}
.foot-links li,.foot-contact li{margin-bottom:11px;font-size:.93rem}
.foot-links a{color:#a9bcdd}
.foot-links a:hover{color:#fff;padding-left:4px}
.foot-links a{transition:color .16s,padding-left .2s var(--ease)}
.foot-contact li{display:flex;gap:10px;align-items:flex-start}
.foot-contact .ic-wrap{color:var(--accent);margin-top:5px}
.foot-contact a{color:#cfe0ff}
.foot-contact a:hover{color:#fff}
.social{list-style:none;padding:0;margin:18px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.social a{
  display:inline-block;padding:8px 15px;border-radius:10px;font-size:.85rem;font-weight:500;
  background:rgba(255,255,255,.08);color:#dbe7ff;border:1px solid rgba(255,255,255,.13);
  transition:.18s var(--ease);
}
.social a:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-2px)}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:20px;padding-bottom:22px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.86rem;
}
.foot-bottom p{margin:0}
.foot-note{color:#8ba3cc}

/* ---------- ভাসমান বোতাম ---------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:9px;
  background:linear-gradient(140deg,#2be07a,#1eb85a);color:#fff;padding:13px 18px;border-radius:99px;font-weight:600;font-size:.92rem;
  box-shadow:0 10px 26px rgba(37,211,102,.42);transition:.2s var(--ease);
}
.wa-float:hover{color:#fff;transform:translateY(-2px) scale(1.03);box-shadow:0 14px 32px rgba(37,211,102,.5)}
.to-top{
  position:fixed;right:18px;bottom:82px;z-index:59;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.1rem;cursor:pointer;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.2s var(--ease);
}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-3px)}

/* ---------- খালি অবস্থা ---------- */
.empty{
  text-align:center;padding:56px 24px;background:#fff;border:1px dashed #c9d7ef;
  border-radius:var(--radius);color:var(--muted);
}
.empty .ic-wrap{color:#a9bfe4;margin-bottom:12px}
.empty b{display:block;color:var(--ink);font-size:1.06rem;margin-bottom:6px}

/* ---------- পাতার হিরো ---------- */
.page-hero{
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(135deg,#0a1f4d,#1e40c9);
  background-size:46px 46px,46px 46px,auto;
  color:#fff;padding:clamp(42px,5vw,64px) 0;
}
.page-hero h1{color:#fff;font-size:clamp(1.65rem,3.4vw,2.45rem);margin-bottom:8px}
.crumb{font-size:.87rem;color:#bcd2f7}
.crumb a{color:#dbe7ff}
.crumb a:hover{color:#fff}
.prose{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow)}
.prose h2{margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose img{border-radius:12px;margin:18px 0}
.prose blockquote{
  margin:20px 0;padding:14px 20px;border-left:4px solid var(--brand);
  background:#f5f9ff;border-radius:0 12px 12px 0;color:#3c4c6b;
}
.prose ul,.prose ol{padding-left:1.4rem}
.prose li{margin-bottom:.5rem}
.figure-sm img{border-radius:14px;box-shadow:var(--shadow)}

/* ---------- পেজিনেশন ---------- */
.pager{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.pager a,.pager span{
  min-width:42px;height:42px;display:grid;place-items:center;padding:0 12px;
  border:1px solid var(--line);border-radius:11px;background:#fff;color:#31435f;font-weight:600;font-size:.92rem;
  transition:.16s var(--ease);
}
.pager a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.pager .now{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(30,64,201,.3)}

/* ---------- সাইডবার ---------- */
.with-side{display:grid;grid-template-columns:1fr 320px;gap:30px;align-items:start}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}
.side-card h4{font-size:1rem;margin-bottom:14px}
.side-card ul{list-style:none;padding:0;margin:0}
.side-card li{padding:9px 0;border-bottom:1px dashed var(--line);font-size:.93rem}
.side-card li:last-child{border-bottom:0}

/* ---------- স্ক্রলবার ---------- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#eef2f9}
::-webkit-scrollbar-thumb{background:#b9c8e4;border-radius:99px;border:3px solid #eef2f9}
::-webkit-scrollbar-thumb:hover{background:var(--brand)}

/* ---------- সাড়া দেওয়া (responsive) ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .with-side{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
}
@media (max-width:820px){
  .menu-btn{display:block}
  .topact{display:none}
  .mainnav{
    position:fixed;inset:74px 0 auto;background:#fff;border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;box-shadow:0 16px 30px rgba(12,26,56,.1);
  }
  .mainnav.open{max-height:74vh;overflow-y:auto}
  .mainnav ul{flex-direction:column;align-items:stretch;padding:12px 16px 18px}
  .mainnav a{padding:13px 14px;font-size:1rem;border-radius:10px}
  .m-tools{display:flex;align-items:center;gap:12px;padding:4px 16px 18px;border-top:1px solid var(--line);margin-top:4px;padding-top:14px}
  .g3,.g2{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .brand-text em{display:none}
  .g4{grid-template-columns:1fr}
  .card{padding:22px}
  .wa-float .wa-label{display:none}
  .wa-float{padding:14px;border-radius:50%}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js-rv .rv{opacity:1;transform:none}
}

@media print{
  .topbar,.footer,.wa-float,.to-top,.pager{display:none}
  body{background:#fff}
}

/* ---------- হিরো ভিডিও ব্যাকগ্রাউন্ড ---------- */
.hero-video{position:relative;overflow:hidden;background:#0b1526}
.hero-video::before{display:none}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero-video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,rgba(11,21,38,.55) 10%,rgba(11,21,38,.18) 55%,rgba(11,21,38,.42))}
.hero-video .wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){video.hero-bg{display:none}}

/* ---------- হিরো ছবি ---------- */
.hero-photo{margin:0;position:relative;animation:rise .8s .3s both}
.hero-photo img{
  width:100%;height:auto;display:block;border-radius:20px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 30px 70px rgba(4,12,34,.45);
}
@media (max-width:1000px){.hero-photo{max-width:560px}}

/* ============================================================================
   থিম টগল + ভাষা সুইচার (টপবার)
   ============================================================================ */
.icon-btn{
  display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:11px;cursor:pointer;transition:.16s var(--ease);
}
.icon-btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.theme-toggle .ic-moon{display:none}
[data-theme="dark"] .theme-toggle .ic-moon{display:block}
[data-theme="dark"] .theme-toggle .ic-sun{display:none}
.lang-switch{
  display:flex;align-items:center;gap:2px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--card);border-radius:11px;padding:3px;
}
.lang-switch a{
  padding:6px 10px;border-radius:8px;font-size:.8rem;font-weight:600;color:var(--muted);line-height:1;
}
.lang-switch a:hover{color:var(--brand)}
.lang-switch a.on{background:var(--brand);color:#fff}

/* ============================================================================
   ডার্ক মোড
   ============================================================================ */
[data-theme="dark"]{
  --brand:#5b83f0;
  --brand-dk:#8aa5f5;
  --brand-soft:#152a5c;
  --ink:#e9effc;
  --accent:#2dd4bf;
  --accent-soft:#0c2b28;
  --gold:#fbbf24;
  --muted:#9db1d4;
  --bg:#0a1322;
  --card:#101d33;
  --line:#1d2c4d;
  --ok:#34d399;
  --err:#f87171;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.45);
  --shadow-lg:0 4px 10px rgba(0,0,0,.45),0 22px 48px rgba(0,0,0,.55);
  --shadow-brand:0 10px 26px rgba(91,131,240,.35);
}
[data-theme="dark"] .topbar{background:rgba(10,19,34,.92)}
[data-theme="dark"] .topbar.scrolled{box-shadow:0 8px 28px rgba(0,0,0,.5)}
[data-theme="dark"] .menu-btn,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .section.alt,
[data-theme="dark"] .card-form,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .to-top,
[data-theme="dark"] .empty,
[data-theme="dark"] .prose,
[data-theme="dark"] .side-card,
[data-theme="dark"] .pager a,[data-theme="dark"] .pager span,
[data-theme="dark"] .skip:focus{background:var(--card)}
[data-theme="dark"] .mainnav a{color:var(--ink)}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:var(--card);color:var(--ink);border-color:var(--line)}
[data-theme="dark"] table.tbl th{background:#0e1a30;color:#b9c8e6}
[data-theme="dark"] table.tbl tr:hover td{background:#0e1a30}
[data-theme="dark"] .prose blockquote{background:#0e1a30;color:#b9c8e6}
[data-theme="dark"] .chip{border-color:#27407c}
[data-theme="dark"] .flash.ok{background:#0c2b22;border-color:#14532d;color:#6ee7b7}
[data-theme="dark"] .flash.err{background:#2b1215;border-color:#7f1d1d;color:#fca5a5}
[data-theme="dark"] .empty{border-color:#27407c}
[data-theme="dark"] .hero-photo{background:linear-gradient(160deg,#16294f,#0a1322)}
@media (max-width:900px){
  [data-theme="dark"] .mainnav{background:var(--card)}
}

/* ============================================================================
   নিউমরফিজম (Soft UI / Embossed) — লাইট থিমের জন্য
   সব নিয়ম html:not([data-theme="dark"]) দিয়ে সীমাবদ্ধ — ডার্ক মোড আগের মতোই।
   গাঢ় ব্র্যান্ড সেকশন (হিরো, পেজ-হিরো, ফুটার) ইচ্ছাকৃতভাবে বদলানো হয়নি।
   রোলব্যাক: এই অংশ + :root-এর --bg/--card/--line/--shadow/--shadow-lg/--radius
   আগের মানে ফেরত দিলেই পুরোনো ডিজাইন ফিরে আসবে (ব্যাকআপ: ~/backups/)।
   ============================================================================ */
html:not([data-theme="dark"]) .section.alt{background:#e8ecf2;border-top:0;border-bottom:0}

/* হেডার — নরম উত্তল বার */
html:not([data-theme="dark"]) .topbar{
  background:rgba(224,229,236,.88);border-bottom:0;
  box-shadow:0 10px 24px rgba(163,177,198,.38);
}
html:not([data-theme="dark"]) .topbar.scrolled{box-shadow:0 14px 30px rgba(163,177,198,.55)}
html:not([data-theme="dark"]) .brand-mark{border-color:rgba(255,255,255,.65);outline:0}
html:not([data-theme="dark"]) .mainnav a:hover{background:transparent;color:var(--brand);box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .mainnav a.on{background:transparent;color:var(--brand);box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .menu-btn{background:var(--neu-bg);border:0;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .icon-btn{background:var(--neu-bg);border:0;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .icon-btn:hover{border:0;color:var(--brand);box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .lang-switch{background:var(--neu-bg);border:0;box-shadow:var(--neu-in-sm)}

/* বোতাম — উত্তল; hover-এ ব্র্যান্ড গ্লো; active-এ চাপা (inset) */
html:not([data-theme="dark"]) .btn{border-radius:14px}
html:not([data-theme="dark"]) .btn-primary{
  box-shadow:6px 6px 14px rgba(163,177,198,.45),-4px -4px 10px rgba(255,255,255,.45),0 10px 22px rgba(30,64,201,.35);
}
html:not([data-theme="dark"]) .btn-primary:hover{
  box-shadow:6px 6px 14px rgba(163,177,198,.45),-4px -4px 10px rgba(255,255,255,.45),0 14px 28px rgba(30,64,201,.42),0 0 0 4px rgba(30,64,201,.13);
}
html:not([data-theme="dark"]) .btn-primary:active{
  transform:none;
  box-shadow:inset 4px 4px 9px rgba(10,37,99,.5),inset -4px -4px 9px rgba(255,255,255,.25),0 0 0 3px rgba(30,64,201,.15);
}
html:not([data-theme="dark"]) .btn-accent{
  box-shadow:6px 6px 14px rgba(163,177,198,.45),-4px -4px 10px rgba(255,255,255,.45),0 10px 22px rgba(0,168,150,.32);
}
html:not([data-theme="dark"]) .btn-accent:hover{
  box-shadow:6px 6px 14px rgba(163,177,198,.45),-4px -4px 10px rgba(255,255,255,.45),0 14px 28px rgba(0,168,150,.4),0 0 0 4px rgba(0,168,150,.13);
}
html:not([data-theme="dark"]) .btn-accent:active{
  transform:none;
  box-shadow:inset 4px 4px 9px rgba(0,90,80,.5),inset -4px -4px 9px rgba(255,255,255,.25),0 0 0 3px rgba(0,168,150,.15);
}
html:not([data-theme="dark"]) .btn-ghost{background:var(--neu-bg);border:0;color:#31435f;box-shadow:var(--neu-out)}
html:not([data-theme="dark"]) .btn-ghost:hover{
  border:0;color:var(--brand);transform:translateY(-1px);
  box-shadow:var(--neu-in),0 0 0 3px rgba(30,64,201,.1);
}
html:not([data-theme="dark"]) .btn-ghost:active{transform:none;box-shadow:var(--neu-in)}

/* কার্ডসমূহ — দ্বৈত ছায়ায় উত্তল (embossed), কোনো হার্ড বর্ডার নয় */
html:not([data-theme="dark"]) .card{
  background:var(--neu-bg);border:0;border-radius:20px;box-shadow:var(--neu-out);
}
html:not([data-theme="dark"]) .card:hover{transform:translateY(-5px);box-shadow:var(--neu-out-lg);border:0}
html:not([data-theme="dark"]) .pf-card,html:not([data-theme="dark"]) .post-card{
  background:var(--neu-bg);border:0;box-shadow:var(--neu-out);
}
html:not([data-theme="dark"]) .pf-card:hover,html:not([data-theme="dark"]) .post-card:hover{box-shadow:var(--neu-out-lg)}
html:not([data-theme="dark"]) .pf-thumb{background:linear-gradient(140deg,#e9eef6,#d9e1ee)}
html:not([data-theme="dark"]) .pf-thumb .ph{background:linear-gradient(140deg,#e9eef6,#d9e1ee)}
html:not([data-theme="dark"]) .chip{background:#e8ecf2;border:0;box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .section-head .kick{background:#e8ecf2;border:0;box-shadow:var(--neu-in-sm)}

/* প্যাকেজ/প্রাইসিং */
html:not([data-theme="dark"]) .pkg{background:var(--neu-bg);border:0;box-shadow:var(--neu-out)}
html:not([data-theme="dark"]) .pkg.popular{
  border:0;background:linear-gradient(180deg,#edf1f8,#e0e5ec);
  box-shadow:var(--neu-out-lg),0 18px 36px rgba(30,64,201,.2);
}
html:not([data-theme="dark"]) .pkg.popular:hover{box-shadow:var(--neu-out-lg),0 24px 44px rgba(30,64,201,.26)}

/* ফর্ম — চাপা (inset/debossed) ইনপুট */
html:not([data-theme="dark"]) input[type=text],
html:not([data-theme="dark"]) input[type=email],
html:not([data-theme="dark"]) input[type=tel],
html:not([data-theme="dark"]) input[type=password],
html:not([data-theme="dark"]) input[type=search],
html:not([data-theme="dark"]) input[type=number],
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea{
  background:var(--neu-bg);border:0;border-radius:14px;color:var(--ink);
  box-shadow:var(--neu-in-sm);
  transition:box-shadow .18s var(--ease);
}
html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) select:focus,
html:not([data-theme="dark"]) textarea:focus{
  outline:0;border:0;
  box-shadow:var(--neu-in-sm),0 0 0 3px rgba(30,64,201,.18);
}
html:not([data-theme="dark"]) .card-form{
  background:var(--neu-bg);border:0;border-radius:22px;box-shadow:var(--neu-out-lg);
}
html:not([data-theme="dark"]) .info-list .ic-wrap{background:#e8ecf2;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .info-list li{border-bottom:1px solid #ccd5e2}
html:not([data-theme="dark"]) .flash{border:0;box-shadow:var(--neu-out-sm)}

/* টেক্সট/আর্টিকেল ও সাইডবার কার্ড */
html:not([data-theme="dark"]) .prose{background:var(--neu-bg);border:0;border-radius:20px;box-shadow:var(--neu-out)}
html:not([data-theme="dark"]) .prose blockquote{background:#e8ecf2}
html:not([data-theme="dark"]) .side-card{background:var(--neu-bg);border:0;border-radius:20px;box-shadow:var(--neu-out)}
html:not([data-theme="dark"]) .side-card li{border-bottom:1px dashed #c6d0df}
html:not([data-theme="dark"]) .figure-sm img{box-shadow:var(--neu-out)}

/* টেবিল — নরম সারি */
html:not([data-theme="dark"]) .table-wrap{background:var(--neu-bg);border:0;border-radius:20px;box-shadow:var(--neu-out)}
html:not([data-theme="dark"]) table.tbl th{background:#d9e0ec}
html:not([data-theme="dark"]) table.tbl th,html:not([data-theme="dark"]) table.tbl td{border-bottom:1px solid #ccd5e2}
html:not([data-theme="dark"]) table.tbl tr:hover td{background:rgba(255,255,255,.38)}

/* পেজিনেশন / খালি অবস্থা / ভাসমান বোতাম */
html:not([data-theme="dark"]) .pager a,html:not([data-theme="dark"]) .pager span{
  background:var(--neu-bg);border:0;box-shadow:var(--neu-out-sm);
}
html:not([data-theme="dark"]) .pager a:hover{border:0;color:var(--brand);transform:none;box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .pager .now{background:var(--brand);color:#fff;box-shadow:0 8px 18px rgba(30,64,201,.35)}
html:not([data-theme="dark"]) .empty{background:transparent;border:0;box-shadow:var(--neu-in)}
html:not([data-theme="dark"]) .to-top{background:var(--neu-bg);border:0;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .to-top:hover{background:var(--brand);border:0}
html:not([data-theme="dark"]) .skip:focus{background:var(--neu-bg);box-shadow:var(--neu-out)}

/* স্ক্রলবার */
html:not([data-theme="dark"]) ::-webkit-scrollbar-track{background:#e0e5ec}
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb{background:#a9b8ce;border-color:#e0e5ec}

/* ---------- শপ স্টোরফ্রন্ট (একই স্টাইলশিট ব্যবহার করে) ---------- */
html:not([data-theme="dark"]) .shop-mini{box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .hslider{border-radius:22px;box-shadow:var(--neu-out-lg)}
html:not([data-theme="dark"]) .feats .ft{background:var(--neu-bg);border:0;border-radius:16px;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .cats a{background:var(--neu-bg);border:0;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .cats a:hover{border:0;transform:translateY(-2px);box-shadow:var(--neu-out)}
html:not([data-theme="dark"]) .cats .ci{background:#e8ecf2;box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .shop-search input{
  background:var(--neu-bg);border:0;border-radius:14px;box-shadow:var(--neu-in-sm);
}
html:not([data-theme="dark"]) .shop-search input:focus{outline:0;box-shadow:var(--neu-in-sm),0 0 0 3px rgba(30,64,201,.18)}
html:not([data-theme="dark"]) .shop-chips a{background:var(--neu-bg);border:0;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .shop-chips a.on{background:var(--brand);color:#fff;box-shadow:0 8px 18px rgba(30,64,201,.35)}
html:not([data-theme="dark"]) .pcard{background:var(--neu-bg);border:0;border-radius:18px;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .pcard:hover{box-shadow:var(--neu-out);transform:translateY(-3px)}
html:not([data-theme="dark"]) .pcard .thumb{background:#fff}
/* অর্ডার করুন বোতাম — নিউমরফিক (সফট UI): সারফেস রঙের raised বোতাম, ব্র্যান্ড-নীল লেখা */
html:not([data-theme="dark"]) .pcard .acts .ord{
  background:var(--neu-bg);border:0;color:var(--brand);border-radius:15px;font-weight:800;
  box-shadow:6px 6px 12px rgba(163,177,198,.55),-6px -6px 12px rgba(255,255,255,.9);
  transition:box-shadow .25s ease,color .25s ease;
}
html:not([data-theme="dark"]) .pcard .acts .ord:hover{
  color:var(--brand-dk);
  box-shadow:7px 7px 14px rgba(163,177,198,.6),-7px -7px 14px rgba(255,255,255,.95),0 0 0 3px rgba(30,64,201,.14),0 10px 22px rgba(30,64,201,.22);
}
html:not([data-theme="dark"]) .pcard .acts .ord:active,html:not([data-theme="dark"]) .pcard .acts .ord:focus-visible{
  color:var(--brand-dk);
  box-shadow:inset 4px 4px 8px rgba(163,177,198,.55),inset -4px -4px 8px rgba(255,255,255,.9);
}
html:not([data-theme="dark"]) .pcard .acts .add{
  border:0;background:var(--neu-bg);color:var(--brand);box-shadow:var(--neu-out-sm);
}
html:not([data-theme="dark"]) .pcard .acts .add:active{box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .brands span{border:0;background:transparent;box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .cartbar{box-shadow:var(--neu-out-sm),0 14px 30px rgba(30,64,201,.35)}
html:not([data-theme="dark"]) .pgal .main{border:0;border-radius:18px;background:#fff;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .qtyrow input,html:not([data-theme="dark"]) .crow .qtyform input{
  background:var(--neu-bg);border:0;border-radius:12px;box-shadow:var(--neu-in-sm);
}
html:not([data-theme="dark"]) .btn-cart2{background:var(--neu-bg);border:0;color:var(--brand);box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .btn-cart2:active{box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .btn-buy2{border:0;box-shadow:0 10px 22px rgba(0,168,150,.32)}
html:not([data-theme="dark"]) .trustrow span{background:var(--neu-bg);border:0;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .crow{background:var(--neu-bg);border:0;border-radius:18px;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .crow img{background:#fff}
html:not([data-theme="dark"]) .csum,html:not([data-theme="dark"]) .co-sum{
  background:var(--neu-bg);border:0;border-radius:18px;box-shadow:var(--neu-out);
}
html:not([data-theme="dark"]) .csum .tot,html:not([data-theme="dark"]) .co-sum .tot{border-top:1px dashed #c6d0df}
html:not([data-theme="dark"]) .co-item{border-bottom:1px dashed #c6d0df}
html:not([data-theme="dark"]) .co-item img{background:#fff}
html:not([data-theme="dark"]) .co-form input,html:not([data-theme="dark"]) .co-form textarea,html:not([data-theme="dark"]) .co-form select{
  background:var(--neu-bg);border:0;border-radius:14px;box-shadow:var(--neu-in-sm);
}
html:not([data-theme="dark"]) .co-form input:focus,html:not([data-theme="dark"]) .co-form textarea:focus,html:not([data-theme="dark"]) .co-form select:focus{
  outline:0;box-shadow:var(--neu-in-sm),0 0 0 3px rgba(30,64,201,.18);
}
html:not([data-theme="dark"]) .zonerow label{background:var(--neu-bg);border:0;border-radius:14px;box-shadow:var(--neu-out-sm)}
html:not([data-theme="dark"]) .zonerow label:has(input:checked){
  background:#e8ecf2;box-shadow:var(--neu-in-sm),0 0 0 3px rgba(30,64,201,.22);
}
html:not([data-theme="dark"]) .codbox{border:0;box-shadow:var(--neu-in-sm)}
html:not([data-theme="dark"]) .co-err{border:0;box-shadow:var(--neu-out-sm)}

/* ছোট স্ক্রিনে ছায়া ছোট হয় */
@media (max-width:640px){
  :root{
    --neu-out:5px 5px 11px rgba(163,177,198,.5),-5px -5px 11px rgba(255,255,255,.85);
    --neu-out-sm:3px 3px 7px rgba(163,177,198,.45),-3px -3px 7px rgba(255,255,255,.8);
    --neu-out-lg:7px 7px 16px rgba(163,177,198,.5),-7px -7px 16px rgba(255,255,255,.85);
    --neu-in:inset 3px 3px 7px rgba(163,177,198,.5),inset -3px -3px 7px rgba(255,255,255,.8);
    --neu-in-sm:inset 2px 2px 5px rgba(163,177,198,.45),inset -2px -2px 5px rgba(255,255,255,.75);
  }
}
@media (max-width:820px){
  html:not([data-theme="dark"]) .mainnav{background:var(--neu-bg);border-bottom:0;box-shadow:0 18px 34px rgba(163,177,198,.45)}
  html:not([data-theme="dark"]) .m-tools{border-top:1px solid #ccd5e2}
}

/* ============================================================================
   নিউমরফিজম (Soft UI / Embossed) — ডার্ক থিমের জন্য (2026-10-23 যোগ)
   সব নিয়ম html[data-theme="dark"] দিয়ে সীমাবদ্ধ — লাইট লেয়ার ও মূল ডার্ক
   ভেরিয়েবল ব্লক হুবহু আগের মতোই আছে; এই অংশ শুধু তার পরে যোগ হয়েছে।
   ডার্ক প্যালেট (বিদ্যমান): --bg #0a1322, --card #101d33, --line #1d2c4d,
   --brand #5b83f0, --accent #2dd4bf, --ink #e9effc, --muted #9db1d4।
   ছায়া: গভীর কালো (নিচে-ডানে) + মৃদু সাদা আভা (উপরে-বামে)।
   রোলব্যাক: এই অংশ মুছলেই ডার্ক মোড আগের রূপে ফিরবে
   (ব্যাকআপ: /home/digitali/backups/style.css.pre-darkneu-20261023.bak)।
   ============================================================================ */
html[data-theme="dark"]{
  --dneu-out:8px 8px 16px rgba(0,0,0,.5),-8px -8px 16px rgba(255,255,255,.06);
  --dneu-out-sm:5px 5px 10px rgba(0,0,0,.45),-5px -5px 10px rgba(255,255,255,.05);
  --dneu-out-lg:12px 12px 26px rgba(0,0,0,.55),-12px -12px 26px rgba(255,255,255,.07);
  --dneu-in:inset 5px 5px 10px rgba(0,0,0,.55),inset -5px -5px 10px rgba(255,255,255,.05);
  --dneu-in-sm:inset 3px 3px 7px rgba(0,0,0,.5),inset -3px -3px 7px rgba(255,255,255,.05);
}

html[data-theme="dark"] .section.alt{background:#0d1930;border-top:0;border-bottom:0}

/* হেডার — নরম উত্তল গাঢ় বার */
html[data-theme="dark"] .topbar{
  background:rgba(10,19,34,.92);border-bottom:0;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
html[data-theme="dark"] .topbar.scrolled{box-shadow:0 14px 30px rgba(0,0,0,.6)}
html[data-theme="dark"] .brand-mark{border-color:rgba(255,255,255,.4);outline:0}
html[data-theme="dark"] .mainnav a:hover{background:transparent;color:var(--brand);box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .mainnav a.on{background:transparent;color:var(--brand);box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .menu-btn{background:var(--card);border:0;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .icon-btn{background:var(--card);border:0;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .icon-btn:hover{border:0;color:var(--brand);box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .lang-switch{background:var(--card);border:0;box-shadow:var(--dneu-in-sm)}

/* বোতাম — উত্তল; hover-এ ব্র্যান্ড গ্লো; active-এ চাপা (inset) */
html[data-theme="dark"] .btn{border-radius:14px}
html[data-theme="dark"] .btn-primary{
  box-shadow:6px 6px 14px rgba(0,0,0,.5),-4px -4px 10px rgba(255,255,255,.05),0 10px 22px rgba(91,131,240,.32);
}
html[data-theme="dark"] .btn-primary:hover{
  box-shadow:6px 6px 14px rgba(0,0,0,.5),-4px -4px 10px rgba(255,255,255,.05),0 14px 28px rgba(91,131,240,.4),0 0 0 4px rgba(91,131,240,.16);
}
html[data-theme="dark"] .btn-primary:active{
  transform:none;
  box-shadow:inset 4px 4px 9px rgba(2,8,23,.6),inset -4px -4px 9px rgba(255,255,255,.14),0 0 0 3px rgba(91,131,240,.18);
}
html[data-theme="dark"] .btn-accent{
  box-shadow:6px 6px 14px rgba(0,0,0,.5),-4px -4px 10px rgba(255,255,255,.05),0 10px 22px rgba(45,212,191,.3);
}
html[data-theme="dark"] .btn-accent:hover{
  box-shadow:6px 6px 14px rgba(0,0,0,.5),-4px -4px 10px rgba(255,255,255,.05),0 14px 28px rgba(45,212,191,.38),0 0 0 4px rgba(45,212,191,.14);
}
html[data-theme="dark"] .btn-accent:active{
  transform:none;
  box-shadow:inset 4px 4px 9px rgba(0,40,35,.55),inset -4px -4px 9px rgba(255,255,255,.14),0 0 0 3px rgba(45,212,191,.16);
}
html[data-theme="dark"] .btn-ghost{background:var(--card);border:0;color:var(--ink);box-shadow:var(--dneu-out)}
html[data-theme="dark"] .btn-ghost:hover{
  border:0;color:var(--brand);transform:translateY(-1px);
  box-shadow:var(--dneu-in),0 0 0 3px rgba(91,131,240,.12);
}
html[data-theme="dark"] .btn-ghost:active{transform:none;box-shadow:var(--dneu-in)}

/* কার্ডসমূহ — দ্বৈত ছায়ায় উত্তল (embossed), কোনো হার্ড বর্ডার নয় */
html[data-theme="dark"] .card{
  background:var(--card);border:0;border-radius:20px;box-shadow:var(--dneu-out);
}
html[data-theme="dark"] .card:hover{transform:translateY(-5px);box-shadow:var(--dneu-out-lg);border:0}
html[data-theme="dark"] .pf-card,html[data-theme="dark"] .post-card{
  background:var(--card);border:0;box-shadow:var(--dneu-out);
}
html[data-theme="dark"] .pf-card:hover,html[data-theme="dark"] .post-card:hover{box-shadow:var(--dneu-out-lg)}
html[data-theme="dark"] .pf-thumb{background:linear-gradient(140deg,#16294f,#0d1830)}
html[data-theme="dark"] .pf-thumb .ph{background:linear-gradient(140deg,#16294f,#0d1830)}
html[data-theme="dark"] .chip{background:var(--brand-soft);border:0;box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .section-head .kick{background:var(--brand-soft);border:0;box-shadow:var(--dneu-in-sm)}

/* প্যাকেজ/প্রাইসিং */
html[data-theme="dark"] .pkg{background:var(--card);border:0;box-shadow:var(--dneu-out)}
html[data-theme="dark"] .pkg.popular{
  border:0;background:linear-gradient(180deg,#16294f,#101d33);
  box-shadow:var(--dneu-out-lg),0 18px 36px rgba(91,131,240,.22);
}
html[data-theme="dark"] .pkg.popular:hover{box-shadow:var(--dneu-out-lg),0 24px 44px rgba(91,131,240,.28)}

/* ফর্ম — চাপা (inset/debossed) ইনপুট; কূপের রঙ কার্ডের চেয়ে এক ধাপ গাঢ় */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0b1626;border:0;border-radius:14px;color:var(--ink);
  box-shadow:var(--dneu-in-sm);
  transition:box-shadow .18s var(--ease);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  outline:0;border:0;
  box-shadow:var(--dneu-in-sm),0 0 0 3px rgba(91,131,240,.28);
}
/* মূল ডার্ক ব্লকের .field নিয়মের ওপরে নিশ্চিত জয় */
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{
  background:#0b1626;border:0;color:var(--ink);box-shadow:var(--dneu-in-sm);
}
html[data-theme="dark"] .card-form{
  background:var(--card);border:0;border-radius:22px;box-shadow:var(--dneu-out-lg);
}
html[data-theme="dark"] .info-list .ic-wrap{background:var(--brand-soft);box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .info-list li{border-bottom:1px solid var(--line)}
html[data-theme="dark"] .flash{border:0;box-shadow:var(--dneu-out-sm)}

/* টেক্সট/আর্টিকেল ও সাইডবার কার্ড */
html[data-theme="dark"] .prose{background:var(--card);border:0;border-radius:20px;box-shadow:var(--dneu-out)}
html[data-theme="dark"] .prose blockquote{background:#0e1a30}
html[data-theme="dark"] .side-card{background:var(--card);border:0;border-radius:20px;box-shadow:var(--dneu-out)}
html[data-theme="dark"] .side-card li{border-bottom:1px dashed var(--line)}
html[data-theme="dark"] .figure-sm img{box-shadow:var(--dneu-out)}

/* টেবিল — নরম সারি */
html[data-theme="dark"] .table-wrap{background:var(--card);border:0;border-radius:20px;box-shadow:var(--dneu-out)}
html[data-theme="dark"] table.tbl th{background:#0e1a30}
html[data-theme="dark"] table.tbl th,html[data-theme="dark"] table.tbl td{border-bottom:1px solid var(--line)}
html[data-theme="dark"] table.tbl tr:hover td{background:#0e1a30}

/* পেজিনেশন / খালি অবস্থা / ভাসমান বোতাম */
html[data-theme="dark"] .pager a,html[data-theme="dark"] .pager span{
  background:var(--card);border:0;box-shadow:var(--dneu-out-sm);
}
html[data-theme="dark"] .pager a:hover{border:0;color:var(--brand);transform:none;box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .pager .now{background:var(--brand);color:#fff;box-shadow:0 8px 18px rgba(91,131,240,.35)}
html[data-theme="dark"] .empty{background:transparent;border:0;box-shadow:var(--dneu-in)}
html[data-theme="dark"] .to-top{background:var(--card);border:0;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .to-top:hover{background:var(--brand);border:0}
html[data-theme="dark"] .skip:focus{background:var(--card);box-shadow:var(--dneu-out)}

/* স্ক্রলবার */
html[data-theme="dark"] ::-webkit-scrollbar-track{background:#0a1322}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#27407c;border-color:#0a1322}

/* ---------- শপ স্টোরফ্রন্ট (একই স্টাইলশিট ব্যবহার করে) ---------- */
html[data-theme="dark"] .shop-mini{box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .hslider{border-radius:22px;box-shadow:var(--dneu-out-lg)}
html[data-theme="dark"] .feats .ft{background:var(--card);border:0;border-radius:16px;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .cats a{background:var(--card);border:0;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .cats a:hover{border:0;transform:translateY(-2px);box-shadow:var(--dneu-out)}
html[data-theme="dark"] .cats .ci{background:var(--brand-soft);box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .shop-search input{
  background:#0b1626;border:0;border-radius:14px;box-shadow:var(--dneu-in-sm);
}
html[data-theme="dark"] .shop-search input:focus{outline:0;box-shadow:var(--dneu-in-sm),0 0 0 3px rgba(91,131,240,.28)}
html[data-theme="dark"] .shop-chips a{background:var(--card);border:0;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .shop-chips a.on{background:var(--brand);color:#fff;box-shadow:0 8px 18px rgba(91,131,240,.35)}
html[data-theme="dark"] .pcard{background:var(--card);border:0;border-radius:18px;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .pcard:hover{box-shadow:var(--dneu-out);transform:translateY(-3px)}
/* প্রোডাক্টের ছবি সাদা ক্যানভাসে — ডার্ক মোডেও কনটেইনার সাদাই থাকে */
html[data-theme="dark"] .pcard .thumb{background:#fff}
/* অর্ডার করুন বোতাম — ডার্ক নিউমরফিক (সফট UI) */
html[data-theme="dark"] .pcard .acts .ord{
  background:var(--card);border:0;color:#a9c0ff;border-radius:15px;font-weight:800;
  box-shadow:6px 6px 12px rgba(0,0,0,.5),-6px -6px 12px rgba(255,255,255,.06);
  transition:box-shadow .25s ease,color .25s ease;
}
html[data-theme="dark"] .pcard .acts .ord:hover{
  color:#c3d4ff;
  box-shadow:7px 7px 14px rgba(0,0,0,.55),-7px -7px 14px rgba(255,255,255,.07),0 0 0 3px rgba(91,131,240,.18),0 10px 22px rgba(91,131,240,.25);
}
html[data-theme="dark"] .pcard .acts .ord:active,html[data-theme="dark"] .pcard .acts .ord:focus-visible{
  color:#c3d4ff;
  box-shadow:inset 4px 4px 8px rgba(0,0,0,.55),inset -4px -4px 8px rgba(255,255,255,.05);
}
html[data-theme="dark"] .pcard .acts .add{
  border:0;background:var(--card);color:var(--brand);box-shadow:var(--dneu-out-sm);
}
html[data-theme="dark"] .pcard .acts .add:active{box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .brands span{border:0;background:transparent;box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .cartbar{box-shadow:var(--dneu-out-sm),0 14px 30px rgba(91,131,240,.3)}
html[data-theme="dark"] .pgal .main{border:0;border-radius:18px;background:#fff;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .qtyrow input,html[data-theme="dark"] .crow .qtyform input{
  background:#0b1626;border:0;border-radius:12px;box-shadow:var(--dneu-in-sm);
}
html[data-theme="dark"] .btn-cart2{background:var(--card);border:0;color:var(--brand);box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .btn-cart2:active{box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .btn-buy2{border:0;box-shadow:0 10px 22px rgba(45,212,191,.3)}
html[data-theme="dark"] .trustrow span{background:var(--card);border:0;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .crow{background:var(--card);border:0;border-radius:18px;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .crow img{background:#fff}
html[data-theme="dark"] .csum,html[data-theme="dark"] .co-sum{
  background:var(--card);border:0;border-radius:18px;box-shadow:var(--dneu-out);
}
html[data-theme="dark"] .csum .tot,html[data-theme="dark"] .co-sum .tot{border-top:1px dashed var(--line)}
html[data-theme="dark"] .co-item{border-bottom:1px dashed var(--line)}
html[data-theme="dark"] .co-item img{background:#fff}
html[data-theme="dark"] .co-form input,html[data-theme="dark"] .co-form textarea,html[data-theme="dark"] .co-form select{
  background:#0b1626;border:0;border-radius:14px;box-shadow:var(--dneu-in-sm);
}
html[data-theme="dark"] .co-form input:focus,html[data-theme="dark"] .co-form textarea:focus,html[data-theme="dark"] .co-form select:focus{
  outline:0;box-shadow:var(--dneu-in-sm),0 0 0 3px rgba(91,131,240,.28);
}
html[data-theme="dark"] .zonerow label{background:var(--card);border:0;border-radius:14px;box-shadow:var(--dneu-out-sm)}
html[data-theme="dark"] .zonerow label:has(input:checked){
  background:var(--brand-soft);box-shadow:var(--dneu-in-sm),0 0 0 3px rgba(91,131,240,.3);
}
html[data-theme="dark"] .codbox{border:0;box-shadow:var(--dneu-in-sm)}
html[data-theme="dark"] .co-err{border:0;box-shadow:var(--dneu-out-sm)}

/* ছোট স্ক্রিনে ছায়া ছোট হয় */
@media (max-width:640px){
  html[data-theme="dark"]{
    --dneu-out:5px 5px 11px rgba(0,0,0,.5),-5px -5px 11px rgba(255,255,255,.055);
    --dneu-out-sm:3px 3px 7px rgba(0,0,0,.45),-3px -3px 7px rgba(255,255,255,.045);
    --dneu-out-lg:7px 7px 16px rgba(0,0,0,.55),-7px -7px 16px rgba(255,255,255,.06);
    --dneu-in:inset 3px 3px 7px rgba(0,0,0,.55),inset -3px -3px 7px rgba(255,255,255,.05);
    --dneu-in-sm:inset 2px 2px 5px rgba(0,0,0,.5),inset -2px -2px 5px rgba(255,255,255,.045);
  }
}
@media (max-width:820px){
  html[data-theme="dark"] .mainnav{background:var(--card);border-bottom:0;box-shadow:0 18px 34px rgba(0,0,0,.55)}
  html[data-theme="dark"] .m-tools{border-top:1px solid var(--line)}
}

/* ---------- হোমপেজ হিরো স্লাইডার (2026-10-30) ---------- */
.hero-slider .hero-slide{opacity:0;transition:opacity .9s ease}
.hero-slider .hero-slide.is-active{opacity:1}
.hero-slide-copy{display:none}
.hero-slide-copy.is-active{display:block;animation:rise .7s both}
.hero-controls{position:absolute;right:clamp(16px,4vw,48px);bottom:20px;z-index:3;display:flex;align-items:center;gap:8px}
.hero-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,21,38,.45);color:#fff;font-size:26px;line-height:1;cursor:pointer;backdrop-filter:blur(6px)}
.hero-arrow:hover,.hero-arrow:focus-visible{background:rgba(0,168,150,.9);outline:2px solid #fff;outline-offset:2px}
.hero-dots{display:flex;align-items:center;gap:2px}
.hero-dot{width:32px;height:44px;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hero-dot span{display:block;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.45);transition:all .3s ease}
.hero-dot.is-active span{width:28px;border-radius:999px;background:#00a896}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.hero-slider .hero-slide{transition:none}}