:root {
  --purple: #a95be8;
  --purple-dark: #6e20c4;
  --purple-deep: #420b78;
  --pink: #f134b6;
  --orange: #ffb13b;
  --gold: #ffe16b;
  --ink: #151019;
  --muted: #676070;
  --line: #ead8fb;
  --soft: #faf6ff;
  --shadow: 0 16px 34px rgba(91, 22, 152, .14);
  font-family: "Noto Sans Bengali", "Hind Siliguri", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-family: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.top { background: #fff; padding: 16px 0 12px; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 950; font-size: 42px; line-height: 1; color: #8f32d9; text-shadow: 0 3px 0 rgba(69,18,117,.18); letter-spacing: 0; }
.brand-badge { min-width: 52px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 18px; font-weight: 950; background: linear-gradient(135deg, #ffec6a, #d92ed0 44%, #5f18c6); box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), 0 6px 14px rgba(96, 22, 166, .24); }
.cta-row { display: flex; gap: 16px; }
.btn { min-height: 48px; padding: 0 26px; border-radius: 11px; border: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; font-weight: 950; font-size: 16px; }
.btn.hot { color: #fff; background: linear-gradient(180deg, #ffb74d, #f127a8); border-color: #ffba35; box-shadow: 0 12px 24px rgba(214, 42, 166, .22); }
.btn.light { color: var(--purple-dark); background: #fff; border-color: var(--purple); }
.btn.ghost { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.1); }
.navband { background: linear-gradient(90deg, #9144dc, #b762ee); }
.nav { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; color: #120819; font-weight: 950; font-size: 16px; }
.nav a { padding: 20px 0 16px; border-top: 3px solid transparent; }
.nav a.active, .nav a:hover { border-top-color: #38135a; color: #fff; }
.hero { padding: 38px 0 24px; background: #fff; }
.hero-frame { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); position: relative; background: #6311a2; }
.hero-frame img { width: 100%; aspect-ratio: 16/5; object-fit: cover; object-position: center; }
.headline-card { margin-top: 26px; background: linear-gradient(90deg, #9d4ee6, #b866ef); color: #fff; border-radius: 8px; padding: 12px 26px; text-align: center; font-size: clamp(20px, 2.7vw, 30px); font-weight: 950; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.intro { margin: 24px auto 0; max-width: 1040px; border-left: 3px solid #5784d9; padding: 2px 0 2px 32px; color: #21172b; font-style: italic; font-size: 20px; line-height: 1.8; }
.section { padding: 30px 0; }
.section-title { background: linear-gradient(90deg, #9650df, #b965ef); color: #fff; border-radius: 8px; padding: 12px 18px; font-size: clamp(22px, 3vw, 32px); line-height: 1.25; font-weight: 950; margin: 0 0 18px; }
.section p { color: #201a27; font-size: 17px; line-height: 1.85; margin: 0 0 18px; }
.grid { display: grid; gap: 22px; }
.cards { grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.card { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(105, 31, 174, .08); overflow: hidden; }
.card-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.card-body { padding: 20px; }
.card h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 950; color: var(--purple-deep); }
.card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.read { color: #d8189b; font-weight: 950; display: inline-block; margin-top: 14px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.feature-img { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--purple-dark); }
.feature-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.steps { display: grid; gap: 15px; }
.step { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: var(--soft); }
.num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 950; color: #fff; background: linear-gradient(180deg, var(--orange), var(--pink)); }
.step h3 { margin: 0 0 4px; color: var(--purple-deep); font-size: 18px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }
.note { background: #fbf3ff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.note p { margin: 0; line-height: 1.8; font-size: 17px; }
.note strong { color: #d8179b; }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 16px 18px; }
.faq summary { cursor: pointer; font-weight: 950; color: var(--purple-deep); }
.faq p { margin: 12px 0 0; color: var(--muted); }
.footer { margin-top: 34px; background: linear-gradient(180deg, #aa5bed, #8e45dd); color: #180925; position: relative; overflow: hidden; }
.footer:before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 2px); background-size: 62px 62px; opacity: .45; }
.footer-inner { position: relative; padding: 34px 0 12px; text-align: center; }
.footer-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; font-weight: 850; }
.footer-links a + a:before { content: "|"; margin-right: 12px; color: rgba(0,0,0,.45); }
.copy { margin-top: 24px; background: #16071f; color: rgba(255,255,255,.72); padding: 14px; font-size: 13px; }
.page-hero { background: linear-gradient(135deg, #6c1bbd, #b960ec); color: #fff; padding: 56px 0; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 34px; align-items: center; }
.page-hero h1 { margin: 0; font-size: clamp(38px, 5vw, 68px); line-height: 1.08; font-weight: 950; }
.page-hero p { font-size: 19px; line-height: 1.75; color: rgba(255,255,255,.9); margin: 16px 0 0; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.content { font-size: 18px; line-height: 1.85; color: #21172b; }
.content h2 { background: linear-gradient(90deg, #9650df, #b965ef); color: #fff; border-radius: 8px; padding: 10px 16px; font-size: 28px; line-height: 1.25; margin: 30px 0 14px; }
.content h3 { color: var(--purple-deep); font-size: 23px; margin: 24px 0 10px; }
.content p { margin: 0 0 18px; }
.content ul, .content ol { padding-left: 26px; }
.content li { margin: 8px 0; }
.info-table { width: 100%; border-collapse: collapse; margin: 22px 0; border: 1px solid var(--line); }
.info-table th, .info-table td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
.info-table th { background: #f2e4ff; color: var(--purple-deep); }
.side { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 20px; box-shadow: 0 8px 22px rgba(105, 31, 174, .08); position: sticky; top: 20px; }
.side h3 { margin: 0 0 12px; color: var(--purple-deep); }
.side a { display: block; padding: 10px 0; border-top: 1px solid var(--line); color: #d8179b; font-weight: 850; }
.dede-list { display: grid; gap: 16px; }
.pager { margin-top: 24px; }

@media (max-width: 980px) {
  .top-row { flex-direction: column; align-items: stretch; }
  .brand { font-size: 34px; justify-content: center; }
  .cta-row { width: 100%; }
  .cta-row .btn { flex: 1; }
  .nav { justify-content: flex-start; gap: 22px; }
  .hero-frame img { aspect-ratio: 16/8.5; }
  .intro { padding-left: 18px; font-size: 17px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .split, .page-hero-grid, .content-grid { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 28px, 1180px); }
  .brand { font-size: 30px; }
  .nav { font-size: 14px; gap: 16px; min-height: 56px; }
  .hero { padding-top: 24px; }
  .headline-card { font-size: 20px; padding: 11px 14px; }
  .cards { grid-template-columns: 1fr; }
  .footer-links { display: block; line-height: 2; }
  .footer-links a + a:before { content: ""; margin: 0; }
}