*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#070812;color:#e8e9f3;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;line-height:1.7}
a{color:#7c5cff}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}
header{border-bottom:1px solid #1d2138;padding:22px 0}
header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#e8e9f3;font-weight:700;font-size:19px}
.mark{display:inline-flex;width:34px;height:34px;border-radius:9px;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c5cff,#4dd6ff);color:#fff;font-weight:700}
.top-link{color:#9aa0b5;text-decoration:none;font-size:14px}
.top-link:hover{color:#e8e9f3}
.hero{padding:64px 0 40px}
.hero h1{font-size:clamp(30px,6vw,44px);line-height:1.15;font-weight:700}
.hero h1 span{background:linear-gradient(135deg,#7c5cff,#4dd6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#9aa0b5;margin-top:14px;font-size:16.5px;max-width:560px}
.cards{display:grid;gap:18px;padding-bottom:72px}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr 1fr}}
.card{background:#0d0f1e;border:1px solid #1d2138;border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px);border-color:#7c5cff}
.meta{color:#7c5cff;font-size:12.5px;font-weight:600;letter-spacing:.4px}
.card h2{color:#e8e9f3;font-size:19px;line-height:1.35;font-weight:700}
.card p{color:#9aa0b5;font-size:14.5px;flex:1}
.readmore{color:#4dd6ff;font-size:14px;font-weight:600}
article .hero{padding:56px 0 28px}
article h1{font-size:clamp(26px,5vw,38px);line-height:1.2;font-weight:700}
.artmeta{color:#9aa0b5;font-size:14px;margin-top:12px}
.artmeta b{color:#7c5cff;font-weight:600}
.body{padding:12px 0 8px;font-size:16.5px}
.body h2{font-size:23px;margin:38px 0 12px;line-height:1.3}
.body p{margin:14px 0;color:#c7cadb}
.body ul{margin:14px 0 14px 22px;color:#c7cadb}
.body li{margin:8px 0}
.body strong{color:#e8e9f3}
.cta{margin:44px 0 8px;padding:28px;border-radius:16px;border:1px solid #7c5cff;background:linear-gradient(180deg,rgba(124,92,255,.12),rgba(124,92,255,.04))}
.cta h3{font-size:20px;margin-bottom:8px}
.cta p{color:#9aa0b5;font-size:15px;margin-bottom:18px}
.btn{display:inline-block;padding:13px 26px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px}
.btn.primary{background:linear-gradient(135deg,#7c5cff,#6849ee);color:#fff}
.btn.ghost{border:1px solid #2e3350;color:#e8e9f3;margin-left:8px}
.more{margin:40px 0 20px}
.more h3{font-size:17px;color:#9aa0b5;margin-bottom:14px}
.more a{display:block;padding:14px 18px;border:1px solid #1d2138;border-radius:12px;margin-bottom:10px;text-decoration:none;color:#e8e9f3;font-size:15.5px}
.more a:hover{border-color:#7c5cff}
footer{border-top:1px solid #1d2138;padding:30px 0;margin-top:40px}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer p,footer a{color:#9aa0b5;font-size:14px;text-decoration:none}
footer a:hover{color:#e8e9f3}

/* ═══ blog ═══ */

/* ═══ NEUMORPHISM EXTRAS (patch80-neu-x) — blog / posts / offer / 404 ═══
   ডার্ক-অনলি পেজগুলোর জন্য (bg #070812)। রঙ-গ্রেডিং অপরিবর্তিত। */

:root {
  --neu-surface: #070812;
  --neu-lo: rgba(0, 0, 0, 0.65);
  --neu-hi: rgba(255, 255, 255, 0.06);
  --neu-lo-soft: rgba(0, 0, 0, 0.5);
  --neu-hi-soft: rgba(255, 255, 255, 0.04);
}

/* ── কার্ড: সফট-রেইজড ── */
.card {
  background: var(--neu-surface) !important;
  border-color: transparent !important;
  border-radius: 20px;
  box-shadow:
    9px 9px 20px var(--neu-lo),
    -9px -9px 20px var(--neu-hi) !important;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
  border-color: transparent !important;
  box-shadow:
    13px 13px 26px var(--neu-lo),
    -13px -13px 26px var(--neu-hi) !important;
}

/* ── বাটন ── */
.btn { border-radius: 999px; }
.btn.primary {
  box-shadow:
    6px 6px 14px var(--neu-lo-soft),
    -6px -6px 14px var(--neu-hi-soft),
    0 14px 32px rgba(124, 92, 255, 0.35);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.primary:hover {
  box-shadow:
    9px 9px 20px var(--neu-lo-soft),
    -9px -9px 20px var(--neu-hi-soft),
    0 18px 40px rgba(124, 92, 255, 0.42);
}
.btn.primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 3px 3px 8px rgba(0, 0, 0, 0.3),
    0 8px 20px rgba(124, 92, 255, 0.3);
}
.btn.ghost, .ghost {
  background: var(--neu-surface);
  border-color: transparent !important;
  box-shadow:
    5px 5px 11px var(--neu-lo-soft),
    -5px -5px 11px var(--neu-hi-soft);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.ghost:hover, .ghost:hover {
  border-color: transparent !important;
  box-shadow:
    8px 8px 16px var(--neu-lo-soft),
    -8px -8px 16px var(--neu-hi-soft);
}
.btn.ghost:active, .ghost:active {
  box-shadow:
    inset 4px 4px 9px var(--neu-lo-soft),
    inset -4px -4px 9px var(--neu-hi-soft);
  transform: translateY(1px) scale(0.985);
}

/* ── পোস্ট-CTA বক্স: টিন্ট অক্ষত + সফট-ডেপথ ── */
.cta {
  border-radius: 20px;
  border-color: rgba(124, 92, 255, 0.35) !important;
  box-shadow:
    8px 8px 18px var(--neu-lo),
    -8px -8px 18px var(--neu-hi);
}

/* ── লোগো-মার্ক: গ্রেডিয়েন্ট অক্ষত + নিউ-ডেপথ ── */
.mark {
  box-shadow:
    4px 4px 9px var(--neu-lo-soft),
    -4px -4px 9px var(--neu-hi-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ── অফার-স্ট্রিপ (.standard): ইনসেট-গ্রুভ ব্যান্ড ── */
.standard {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow:
    inset 0 6px 12px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 var(--neu-hi-soft),
    0 1px 0 var(--neu-lo-soft);
  border-radius: 18px;
}

/* ── হেডিং-এমবস ── */
h1, h2 {
  text-shadow:
    0 1px 1px var(--neu-lo-soft),
    0 -1px 0 var(--neu-hi-soft);
}

/* ── ফোকাস-রিং ── */
.btn:focus-visible, .card:focus-visible, .top-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(124, 92, 255, 0.38),
    4px 4px 9px var(--neu-lo-soft);
}

/* ── স্ক্রলবার ── */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--neu-surface);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 2px 2px 5px var(--neu-lo-soft),
    inset -2px -2px 5px var(--neu-hi-soft);
}

/* ── মোবাইল: হালকা ছায়া ── */
@media (max-width: 640px) {
  .card {
    box-shadow:
      6px 6px 14px var(--neu-lo),
      -6px -6px 14px var(--neu-hi) !important;
  }
}

/* ── 404-পেজ বাটন ── */
.home {
  border-radius: 999px;
  box-shadow:
    6px 6px 14px var(--neu-lo-soft),
    -6px -6px 14px var(--neu-hi-soft),
    0 10px 24px rgba(124, 92, 255, 0.32);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.home:hover {
  box-shadow:
    9px 9px 20px var(--neu-lo-soft),
    -9px -9px 20px var(--neu-hi-soft),
    0 14px 32px rgba(124, 92, 255, 0.4);
}
.home:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.3);
}
.wa {
  border-color: transparent !important;
  background: var(--neu-surface);
  border-radius: 999px;
  box-shadow:
    5px 5px 11px var(--neu-lo-soft),
    -5px -5px 11px var(--neu-hi-soft);
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wa:hover { box-shadow: 8px 8px 16px var(--neu-lo-soft), -8px -8px 16px var(--neu-hi-soft); }
.wa:active { box-shadow: inset 4px 4px 9px var(--neu-lo-soft), inset -4px -4px 9px var(--neu-hi-soft); transform: translateY(1px) scale(0.985); }