/* Turag Fiber Net — public site. Same design language as the Retro Online site, in the logo's green. */
:root {
  --brand-50: #f1fae8;
  --brand-100: #e0f4cf;
  --brand-200: #c3e8a2;
  --brand-300: #a6e36f;
  --brand-400: #7ed83a;
  --brand-500: #3e9f06;
  --brand-600: #2e8500;
  --brand-700: #236600;
  --ink-950: #070b16;
  --ink-900: #0b1120;
  --ink-800: #141b2e;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --display: "Plus Jakarta Sans", "Hind Siliguri", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-700);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-600); }
h1, h2, h3 { margin: 0; color: var(--ink-900); letter-spacing: -.025em; line-height: 1.25; }
p { margin: 0; }
svg { width: 16px; height: 16px; flex: none; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.center { text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; background: var(--brand-500); color: #fff; box-shadow: 0 10px 15px -3px rgba(62, 159, 6, .3), 0 4px 6px -4px rgba(62, 159, 6, .3); }
.btn-primary:hover { background: var(--brand-600); }
/* a flash of light crosses the button on hover */
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-outline { border-color: var(--slate-200); background: #fff; color: var(--ink-900); }
.btn-outline:hover { border-color: var(--brand-400); color: var(--brand-600); }
.btn-white { background: #fff; color: var(--brand-700); }
.btn-white:hover { background: var(--brand-50); }
.btn-line { border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn-line:hover { background: rgba(255, 255, 255, .1); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Notice bar (set from the admin panel) */
.notice { padding: 8px 0; background: var(--brand-500); color: #fff; font-size: .9rem; font-weight: 600; text-align: center; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; transition: background-color .2s ease, border-color .2s ease; border-bottom: 1px solid transparent; }
.site-header.scrolled, .site-header.open { border-bottom-color: rgba(226, 232, 240, .7); background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; font-style: italic; letter-spacing: -.02em; color: #3f9a04; text-decoration: none; white-space: nowrap; }
.brand img { width: auto; height: 46px; }
.brand b { color: #6a6a6a; font-weight: 800; }
.brand.dark { color: var(--brand-400); }
.brand.dark img { padding: 4px; border-radius: 12px; background: #fff; }
.brand.dark b { color: var(--slate-300); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { padding: 8px 10px; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--slate-600); text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.nav a:hover { color: var(--ink-900); }
.nav a[aria-current="page"] { background: var(--brand-50); color: var(--brand-700); }
.actions { display: flex; align-items: center; gap: 8px; }
.lang { padding: 9px 14px; border: 1px solid var(--slate-200); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink-900); text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.lang:hover { border-color: var(--brand-400); color: var(--brand-600); }
.actions .apply, .actions .self { padding: 10px 16px; }
.menu-btn { display: none; place-items: center; align-content: center; gap: 4px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--slate-200); border-radius: 999px; background: none; cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink-900); transition: transform .2s ease, opacity .2s ease; }
.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); }
.mobile-menu { height: calc(100dvh - 64px); overflow-y: auto; border-top: 1px solid var(--slate-100); background: #fff; }
.mobile-menu nav { display: flex; flex-direction: column; padding-top: 16px; padding-bottom: 16px; }
.mobile-menu a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--slate-100); font-weight: 500; color: var(--ink-900); text-decoration: none; }
.mobile-menu a[aria-current="page"] { color: var(--brand-600); }
.mobile-menu .btn { margin-top: 24px; }
.mobile-menu .btn + .btn { margin-top: 12px; }

/* Shared pieces of the dark sections */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.blob { position: absolute; border-radius: 50%; filter: blur(64px); animation: blob 16s ease-in-out infinite; pointer-events: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(126, 216, 58, .3); border-radius: 999px; background: rgba(62, 159, 6, .12); font-size: .75rem; font-weight: 600; color: var(--brand-300); }
.pill i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-400); }
.pill i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brand-400); animation: ping 1.4s cubic-bezier(0, 0, .2, 1) infinite; }
.rise { animation: fade-up .9s var(--ease) both; }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--ink-900); color: #fff; }
.hero .fiber { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .b1 { left: -160px; top: 40px; width: 384px; height: 384px; background: rgba(62, 159, 6, .28); }
.hero .b2 { right: -80px; bottom: 0; width: 320px; height: 320px; background: rgba(126, 216, 58, .14); animation-delay: -6s; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 56px; padding-top: 96px; padding-bottom: 96px; }
.hero h1 { margin-top: 24px; font-size: clamp(2.1rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.15; color: #fff; }
.shine { background-image: linear-gradient(90deg, #a6e36f, #7ed83a, #4fb80a, #a6e36f, #7ed83a); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 4s linear infinite; }
.hero .lead { max-width: 36rem; margin-top: 24px; font-size: 1.125rem; line-height: 2rem; color: var(--slate-300); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-btns .btn { padding: 14px 24px; }
.hero-info { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 40px; font-size: .875rem; color: var(--slate-400); }
.hero-info a, .hero-info span { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.hero-info a:hover { color: #fff; }
.hero-info svg { color: var(--brand-400); }
.hero-card { position: relative; width: 100%; max-width: 28rem; margin: 0 auto; }
.waves span { position: absolute; inset: 0; border: 1px solid rgba(126, 216, 58, .4); border-radius: 2.5rem; animation: wave 2.8s var(--ease) infinite; }
.waves span + span { border-color: rgba(126, 216, 58, .3); animation-delay: 1.4s; }

/* Marquee band under the hero */
.marquee { position: relative; overflow: hidden; padding: 16px 0; border-block: 1px solid rgba(255, 255, 255, .1); background: var(--brand-500); }
.marquee div { display: flex; gap: 40px; width: max-content; font-size: 1.125rem; font-weight: 700; color: #fff; white-space: nowrap; animation: marquee 30s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 40px; }
.marquee svg { fill: rgba(255, 255, 255, .7); color: rgba(255, 255, 255, .7); }

/* Package meter in the hero: cycles through the packages (assets/site.js) */
.meter { position: relative; padding: 32px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 2rem; background: rgba(20, 27, 46, .78); color: #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); animation: float 6s ease-in-out infinite; }
.m-top { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; color: var(--slate-400); }
.m-top b { display: inline-block; color: var(--brand-300); font-weight: 600; }
.m-live { display: inline-flex; align-items: center; gap: 6px; color: #34d399; white-space: nowrap; }
.m-live i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: blink 2s ease-in-out infinite; }
.m-dial { position: relative; width: 240px; max-width: 100%; aspect-ratio: 1; margin: 24px auto 0; }
.m-dial::before { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: var(--brand-600); opacity: .4; filter: blur(44px); }
.m-dial svg { position: relative; width: 100%; height: 100%; transform: rotate(135deg); }
.m-dial circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.m-track { stroke: rgba(255, 255, 255, .08); }
.m-arc { stroke: url(#m-g); transition: stroke-dasharray 1.2s var(--ease); animation: gauge 2.4s var(--ease); }
.m-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.m-speed { font-size: 3.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.m-unit { font-size: .875rem; color: var(--slate-400); }
.m-price { margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .875rem; color: var(--slate-400); }
.m-price b { display: inline-block; color: #fff; font-weight: 700; }
.m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; text-align: center; }
.m-tiles div { padding: 12px 4px; border-radius: 16px; background: rgba(255, 255, 255, .05); transition: background-color .2s ease; }
.m-tiles div:hover { background: rgba(255, 255, 255, .1); }
.m-tiles b { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.m-tiles span { display: block; font-size: .7rem; color: var(--slate-400); }
.m-tabs { display: grid; gap: 8px; margin-top: 20px; }
.m-tabs button { position: relative; overflow: hidden; padding: 8px 2px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .05); color: var(--slate-400); font: inherit; text-align: center; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.m-tabs button:hover { background: rgba(255, 255, 255, .1); }
.m-tabs button[aria-pressed="true"] { background: rgba(255, 255, 255, .15); color: #fff; }
.m-tabs b { display: block; font-size: .875rem; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.m-tabs small { display: block; overflow: hidden; font-size: .625rem; color: var(--slate-400); text-overflow: ellipsis; white-space: nowrap; }
.m-tabs i { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--brand-400); }
.m-tabs button[aria-pressed="true"] i { width: 100%; }
.m-tabs button.run i { animation: m-progress var(--m-time, 3800ms) linear forwards; }
.m-cta { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: .875rem; font-weight: 600; color: var(--slate-300); text-decoration: none; transition: color .2s ease; }
.m-cta:hover { color: #fff; }
.m-cta span { display: inline-block; }
.m-cta svg { transition: transform .2s ease; }
.m-cta:hover svg { transform: translateX(4px); }
.m-swap { animation: fade-in .5s ease-out both; }

/* Sections */
.section { padding: 112px 0; }
.section.alt { background: var(--slate-50); }
.section.dark { position: relative; overflow: hidden; background: var(--ink-900); color: #fff; }
.section.dark .b3 { right: -128px; top: 33%; width: 320px; height: 320px; background: rgba(62, 159, 6, .16); }
.heading { max-width: 42rem; margin: 0 auto; text-align: center; }
.heading.left { margin: 0; text-align: left; }
.heading h2 { margin-top: 16px; font-size: clamp(1.75rem, 3.6vw, 2.25rem); font-weight: 800; }
.heading p { margin-top: 16px; line-height: 2rem; color: var(--slate-500); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--brand-200); border-radius: 999px; background: var(--brand-50); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-700); }
.note { margin-top: 32px; font-size: .875rem; color: var(--slate-500); }

/* Cards */
.card { position: relative; isolation: isolate; padding: 24px; border: 1px solid rgba(226, 232, 240, .8); border-radius: 1.5rem; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.card:hover { translate: 0 -4px; box-shadow: 0 20px 25px -5px rgba(226, 232, 240, .6), 0 8px 10px -6px rgba(226, 232, 240, .6); }
/* a soft light follows the mouse across the card (site.js sets --mx / --my) */
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -40%), rgba(62, 159, 6, .1), transparent 60%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.card:hover::after { opacity: 1; }
.icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; background: var(--brand-50); color: var(--brand-600); transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.icon svg { width: 24px; height: 24px; }
.card:hover .icon { background: var(--brand-500); color: #fff; transform: rotate(6deg) scale(1.1); }

/* Package cards */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.page-hero + .section .pkg-grid { margin-top: 0; }
.pkg { --c1: #38bdf8; --c2: #0ea5e9; --c3: #2563eb; --c: #0284c7; --soft: #f0f9ff; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.5rem; background: #fff; box-shadow: 0 0 0 1px var(--slate-200), 0 1px 2px rgba(0, 0, 0, .05); }
.pkg.violet { --c1: #a78bfa; --c2: #8b5cf6; --c3: #7e22ce; --c: #7c3aed; --soft: #f5f3ff; }
.pkg.orange { --c1: #fbbf24; --c2: #f97316; --c3: #ea580c; --c: #ea580c; --soft: #fff7ed; }
.pkg.emerald { --c1: #34d399; --c2: #10b981; --c3: #0d9488; --c: #059669; --soft: #ecfdf5; }
.pkg.rose { --c1: #fb7185; --c2: #f43f5e; --c3: #db2777; --c: #e11d48; --soft: #fff1f2; }
.pkg.indigo { --c1: #818cf8; --c2: #6366f1; --c3: #4338ca; --c: #4f46e5; --soft: #eef2ff; }
.pkg:hover { translate: 0 -8px; box-shadow: 0 0 0 1px var(--slate-200), 0 25px 50px -12px color-mix(in srgb, var(--c2) 30%, transparent); }
.pkg-head { position: relative; overflow: hidden; container-type: inline-size; padding: 24px 28px 28px; background: linear-gradient(to bottom right, var(--c1), var(--c2), var(--c3)); color: #fff; }
.pkg-head::before { content: ""; position: absolute; right: -32px; top: -40px; width: 128px; height: 128px; border-radius: 50%; background: rgba(255, 255, 255, .15); transition: transform .5s ease; }
.pkg:hover .pkg-head::before { transform: scale(1.25); }
/* the head's colours drift slowly */
.pkg-head { background-size: 220% 220%; animation: pkg-flow 9s ease-in-out infinite alternate; }
/* signal rings spreading out from the Wi-Fi mark */
.pkg-rings { position: absolute; right: 48px; bottom: 30px; width: 0; height: 0; pointer-events: none; }
.pkg-rings span { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%; opacity: 0; animation: pkg-ring var(--d, 3s) ease-out infinite; }
.pkg:hover .pkg-rings span { animation-duration: calc(var(--d, 3s) * .55); }
.pkg-wifi { position: absolute; right: 24px; bottom: 20px; width: 48px; height: 48px; stroke-width: 2.5; color: rgba(255, 255, 255, .45); }
.pkg:hover .pkg-wifi { color: rgba(255, 255, 255, .8); }
.pkg-head h3 { position: relative; font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.pkg-speed { position: relative; display: flex; align-items: flex-end; gap: 6px; margin-top: 12px; }
.pkg-speed b { font-size: 3.75rem; font-weight: 800; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.pkg-speed span { margin-bottom: 4px; font-size: 1.125rem; font-weight: 600; color: rgba(255, 255, 255, .8); }
/* signal blocks: they light up one after another when the card arrives */
.pkg-segs { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 16px; margin-right: 64px; }
.pkg-segs i { height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.pkg-segs i.on { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .7); transition: opacity .35s ease, transform .35s var(--pop); transition-delay: calc(var(--reveal-delay, 0ms) + 450ms + var(--k) * 70ms); }
html.js .pkg:not(.in) .pkg-segs i.on { opacity: 0; transform: scaleY(.2); }
/* the speed pops in */
.pkg-speed b { display: inline-block; transform-origin: left bottom; transition: opacity .5s ease, transform .7s var(--pop); transition-delay: calc(var(--reveal-delay, 0ms) + 250ms); }
html.js .pkg:not(.in) .pkg-speed b { opacity: 0; transform: scale(.4); }
.pkg-body { display: flex; flex: 1; flex-direction: column; padding: 28px; }
.pkg-price { display: flex; align-items: baseline; gap: 6px; }
.pkg-price b { font-size: 1.875rem; font-weight: 800; color: var(--ink-900); }
.pkg-price span { font-size: .875rem; color: var(--slate-500); }
.pkg-body ul { display: grid; gap: 12px; flex: 1; align-content: start; margin: 20px 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--slate-600); }
.pkg-perk { display: flex; align-items: flex-start; gap: 10px; }
.pkg-perk i { display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 2px; border-radius: 50%; background: var(--soft); color: var(--c); transition: transform .3s ease; }
.pkg-perk i svg { width: 12px; height: 12px; stroke-width: 3; }
.pkg:hover .pkg-perk i { transform: scale(1.1); }
html.js .pkg .pkg-perk { transition: opacity .5s ease, transform .5s var(--ease); transition-delay: calc(var(--reveal-delay, 0ms) + 350ms + var(--i) * 90ms); }
html.js .pkg:not(.in) .pkg-perk { opacity: 0; transform: translateY(12px); }
html.js .pkg .pkg-perk i { transition: transform .5s var(--pop); transition-delay: inherit; }
html.js .pkg:not(.in) .pkg-perk i { transform: scale(0); }
.pkg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 32px; padding: 12px 24px; border-radius: 999px; background: var(--c); color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--c2) 30%, transparent); transition: filter .2s ease, transform .2s ease; }
.pkg-btn:hover { filter: brightness(.92); }
.pkg-btn:active { transform: scale(.98); }
.pkg-btn svg { transition: transform .2s ease; }
.pkg-btn:hover svg { transform: translateX(4px); }

/* "Why us" on dark */
.why { position: relative; display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; gap: 56px; }
.why h2 { margin-top: 16px; font-size: clamp(1.75rem, 3.6vw, 2.25rem); font-weight: 800; color: #fff; }
.why h2 em { font-style: normal; color: var(--brand-400); }
.why p { margin-top: 16px; line-height: 2rem; color: var(--slate-300); }
.why .btn { margin-top: 32px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { padding: 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.5rem; background: rgba(255, 255, 255, .03); }
.tile:hover { translate: 0 -4px; border-color: rgba(126, 216, 58, .4); background: rgba(255, 255, 255, .06); }
.tile svg { width: 28px; height: 28px; color: var(--brand-400); transition: transform .3s ease; }
.tile:hover svg { transform: scale(1.1); }
.tile h3 { margin-top: 16px; font-size: 1rem; font-weight: 700; color: #fff; }
.tile p { margin-top: 4px; font-size: .75rem; line-height: 1.5rem; color: var(--slate-400); }

/* Coverage */
.chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 40px; }
.chips a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--brand-50); font-size: .875rem; font-weight: 600; color: var(--brand-700); text-decoration: none; transition: background-color .2s ease; }
.chips a:hover { background: var(--brand-100); }
.chips a.more { background: none; color: var(--brand-600); }
.chips a.more:hover { text-decoration: underline; }
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
a.area { display: flex; align-items: center; gap: 16px; padding: 20px; color: inherit; text-decoration: none; }
a.area .icon { background: var(--brand-500); color: #fff; }
.area-text { flex: 1; min-width: 0; }
.area-text b { display: block; font-weight: 700; color: var(--ink-900); }
.area-text small { font-size: .875rem; color: var(--slate-500); }
a.area .go { width: 20px; height: 20px; color: var(--brand-500); transition: transform .2s ease; }
a.area:hover .go { transform: translateX(4px); }

/* Offers and media servers */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.offer h2, .media h2 { margin-top: 20px; font-size: 1.125rem; font-weight: 700; }
.offer p, .media p { margin-top: 8px; font-size: .875rem; line-height: 1.75rem; color: var(--slate-500); }
.offer .num { position: absolute; right: 24px; top: 16px; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--slate-100); transition: color .3s ease; }
.offer:hover .num { color: var(--brand-100); }
.icon.solid { background: var(--brand-500); color: #fff; }
.icon.dark { width: 56px; height: 56px; background: var(--ink-900); color: var(--brand-400); }
.icon.dark svg { width: 28px; height: 28px; }
a.media { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.media h2 { font-size: 1.25rem; }
a.media p { flex: 1; }
a.media .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-size: .875rem; font-weight: 600; color: var(--brand-600); }
.callbox { margin-top: 40px; padding: 28px; border-radius: 1.5rem; background: var(--slate-50); text-align: center; }
.callbox:first-child { margin-top: 0; }
.callbox p { color: var(--slate-600); }
.callbox .btn { margin-top: 16px; }

/* Speed test (assets/speedtest.js) */
.st { position: relative; overflow: hidden; padding: 56px 32px; border-radius: 1.5rem; background: #141526; color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.st::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(126, 216, 58, .14), transparent 60%); pointer-events: none; }
.st > * { position: relative; }
.st [hidden] { display: none !important; }
.st-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.st-stat { padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); text-align: center; transition: background-color .2s ease, box-shadow .2s ease; }
.st-stat.on { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.st-stat span { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9193a8; }
.st-stat[data-k="ping"] svg, .st-stat[data-k="jitter"] svg { color: #fcd34d; }
.st-stat[data-k="down"] svg { color: #7ed83a; }
.st-stat[data-k="up"] svg { color: #38bdf8; }
.st-stat b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-stat small { font-size: .75rem; font-weight: 500; color: #9193a8; }
.st-dial { display: grid; place-items: center; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 32px auto 0; }
.st-gauge { width: 100%; height: auto; }
.st-needle { transform-origin: 150px 150px; transition: transform .15s linear; }
.st-go { position: relative; display: grid; place-items: center; width: 224px; height: 224px; max-width: 70vw; max-height: 70vw; padding: 0; border: 3px solid transparent; border-radius: 50%; background: linear-gradient(#141526, #141526) padding-box, linear-gradient(135deg, #7ed83a, #38bdf8) border-box; color: #fff; font: inherit; cursor: pointer; transition: transform .5s ease; }
.st-go:hover { transform: scale(1.05); }
.st-go span { font-size: 3.75rem; font-weight: 800; letter-spacing: .05em; }
.st-go i { position: absolute; inset: -3px; border: 2px solid rgba(126, 216, 58, .6); border-radius: 50%; animation: wave 2.8s var(--ease) infinite; }
.st-go i + i { border-color: rgba(56, 189, 248, .5); animation-delay: 1s; }
.st-progress { height: 6px; max-width: 20rem; margin: 8px auto 0; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.st-progress i { display: block; height: 100%; border-radius: 999px; transition: width .15s linear; }
.st-msg { margin-top: 24px; text-align: center; }
.st-note { font-size: .875rem; color: #9193a8; }
.st-note.bad { color: #fca5a5; }
.st-again { margin-top: 20px; padding: 10px 20px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.st-again:hover { background: rgba(255, 255, 255, .2); }
.st-stop { border: 0; background: none; color: #9193a8; font: inherit; font-size: .875rem; cursor: pointer; }
.st-stop:hover { color: #fff; text-decoration: underline; }
.st-server { max-width: 36rem; margin: 32px auto 0; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.st-server-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.st-server-head > svg { width: 20px; height: 20px; color: #7ed83a; }
.st-server-head div { flex: 1; min-width: 0; }
.st-server-head small { display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9193a8; }
.st-server-head b { display: block; overflow: hidden; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.st-change { padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.st-change:hover { background: rgba(255, 255, 255, .2); }
.st-change:disabled { opacity: .5; cursor: not-allowed; }
.st-picker { padding: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.st-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #9193a8; }
.st-search input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; color: #fff; font: inherit; font-size: .875rem; outline: none; }
.st-search input::placeholder { color: #9193a8; }
.st-spin { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.st-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-quick button { padding: 4px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); color: #fff; font: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; }
.st-quick button:hover { background: rgba(255, 255, 255, .15); }
.st-quick button.on { background: #7ed83a; box-shadow: none; color: #141526; }
.st-list { display: grid; gap: 4px; max-height: 16rem; margin: 12px 0 0; padding: 0 4px 0 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.st-list button { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 12px; background: none; color: #fff; font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
.st-list button:hover, .st-list button.on { background: rgba(255, 255, 255, .1); }
.st-list strong { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.st-list small { display: block; font-size: .75rem; color: #9193a8; }
.st-err { margin-top: 8px; font-size: .75rem; color: #fca5a5; }
.st-err:empty { display: none; }
.st-far { margin-top: 8px; font-size: .75rem; color: #9193a8; text-align: center; }
.tips { max-width: 48rem; margin: 40px auto 0; padding: 28px; border-radius: 1.5rem; background: var(--brand-50); }
.tips h2 { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 700; }
.tips h2 svg { width: 20px; height: 20px; color: var(--brand-500); }
.tips ul { display: grid; gap: 8px; margin: 16px 0 0; padding-left: 20px; font-size: .875rem; line-height: 1.75rem; color: var(--slate-700); }

/* Google Play button and the app band */
.play-btn { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; border-radius: 16px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.play-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 15px -3px rgba(0, 0, 0, .3); }
.play-ico { width: 28px; height: 28px; }
.play-btn span { line-height: 1.2; text-align: left; }
.play-btn small { display: block; font-size: .625rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.play-btn b { display: block; font-size: 1.125rem; font-weight: 600; }
.foot-app { margin-top: 24px; }
.app-band { padding-top: 80px; }
.app-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 40px; border-radius: 1.5rem; background: var(--ink-900); color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.app-box h2 { margin-top: 12px; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 800; color: #fff; }
.app-box p { margin-top: 12px; line-height: 1.75rem; color: var(--slate-300); }

/* Bill payment page */
.bill-top { padding-top: 56px; }
.bill-row { padding-top: 24px; }
.bill-top > *, .bill-row > * { max-width: 56rem; margin-left: auto; margin-right: auto; }
:is(.bill-top, .bill-row) + .section.alt { margin-top: 64px; }
.bill-or { margin-top: 24px; font-size: .875rem; font-weight: 500; color: var(--slate-500); text-align: center; }
.pay-online { overflow: hidden; border-radius: 1.5rem; background: var(--ink-900); color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.pay-online-main { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 32px; padding: 36px; }
.pay-online h2 { margin-top: 12px; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 800; color: #fff; }
.pay-online p { margin-top: 8px; line-height: 1.75rem; color: var(--slate-300); }
.pay-online p b { color: #fff; }
.pay-online .btn { margin-top: 24px; padding: 14px 28px; }
.pay-online ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.pay-online li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.pay-online li i { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--brand-500); font-size: .75rem; font-style: normal; font-weight: 700; }
.pay-online .pay-online-foot { margin: 0; padding: 12px 36px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .75rem; color: var(--slate-400); }
.bkash-box { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 36px; border-radius: 1.5rem; background: linear-gradient(to bottom right, #e2136e, #9d0d4c); color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }
.bkash-box .blob { right: -48px; top: -48px; width: 192px; height: 192px; background: rgba(255, 255, 255, .1); filter: none; }
.bkash-num { position: relative; display: flex; align-items: center; gap: 16px; }
.bkash-mark { display: grid; place-items: center; height: 56px; padding: 0 14px; border-radius: 16px; background: #fff; color: #e2136e; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.bkash-num small { display: block; font-size: .875rem; color: rgba(255, 255, 255, .8); }
.bkash-num b { display: block; font-size: clamp(1.75rem, 5vw, 2.25rem); font-weight: 800; letter-spacing: .025em; }
.copy-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 999px; background: #fff; color: #b10f57; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: transform .2s ease; }
.copy-btn:hover { transform: translateY(-2px); }
.app-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 36px; border: 1px solid var(--slate-200); border-radius: 1.5rem; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.app-row-text { display: flex; align-items: center; gap: 16px; }
.app-row .icon { width: 56px; height: 56px; }
.app-row h2 { font-size: 1.125rem; font-weight: 700; }
.app-row p { margin-top: 4px; font-size: .875rem; line-height: 1.5rem; color: var(--slate-600); }
.bill-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bill-cards h2, .office h3 { margin-top: 16px; font-size: 1.125rem; font-weight: 700; }
.bill-cards p, .office p { margin-top: 8px; font-size: .875rem; line-height: 1.75rem; color: var(--slate-600); }
.bill-cards .btn-row { margin-top: 16px; }
.bill-cards .btn { padding: 8px 16px; font-size: .75rem; }
a.office { display: block; color: inherit; text-decoration: none; }
.office .small { font-size: .75rem; color: var(--slate-500); }
.office .go { display: inline-block; margin-top: 12px; font-size: .75rem; font-weight: 600; color: var(--brand-600); }

/* bKash guide: tabs, steps and the phone */
.pg { margin-top: 40px; }
.pg [hidden] { display: none !important; }
.pg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pg-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--slate-200); color: var(--slate-600); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; transition: box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.pg-tabs button:hover { box-shadow: 0 0 0 1px rgba(226, 19, 110, .4); }
.pg-tabs button[aria-selected="true"] { background: #e2136e; box-shadow: 0 10px 15px -3px rgba(226, 19, 110, .3); color: #fff; }
.pg-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; margin-top: 40px; }
.pg-panel[data-tab="office"] { display: block; max-width: 24rem; margin-left: auto; margin-right: auto; }
.pg-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-steps button { display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 16px; border: 1px solid transparent; border-radius: 16px; background: none; font: inherit; text-align: left; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pg-steps button:hover { background: var(--slate-50); }
.pg-steps button[aria-current] { border-color: rgba(226, 19, 110, .4); background: rgba(226, 19, 110, .05); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); }
.pg-steps i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--slate-100); color: var(--slate-500); font-size: .875rem; font-style: normal; font-weight: 700; transition: background-color .2s ease, color .2s ease; }
.pg-steps button.done i { background: #10b981; color: #fff; }
.pg-steps button[aria-current] i { background: #e2136e; color: #fff; }
.pg-steps b { display: block; font-weight: 700; color: var(--ink-900); }
.pg-steps button[aria-current] b { color: #b10f57; }
.pg-steps small { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.5rem; color: var(--slate-500); }
.pg-phone { position: sticky; top: 112px; }
.pg-phone > p { margin-top: 16px; max-width: 260px; font-size: .75rem; color: var(--slate-400); text-align: center; }
.phone { position: relative; width: 260px; margin: 0 auto; border: 10px solid var(--ink-900); border-radius: 2.6rem; background: var(--ink-900); box-shadow: 0 25px 50px -12px rgba(11, 17, 32, .3); }
.phone::before { content: ""; position: absolute; left: 50%; top: 8px; z-index: 1; width: 96px; height: 20px; margin-left: -48px; border-radius: 999px; background: var(--ink-900); }
.phone-screen { position: relative; height: 480px; overflow: hidden; border-radius: 2rem; background: #1b1f2a; color: var(--ink-900); font-size: 12px; line-height: 1.4; }
.phone.pink .phone-screen { background: var(--slate-50); }
.ph { display: flex; flex-direction: column; height: 100%; animation: fade-up .5s var(--ease) both; }
.ph small { display: block; font-size: 11px; color: var(--slate-500); }
.ph-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: #e2136e; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
.ph-head { display: flex; align-items: center; gap: 8px; padding: 36px 16px 16px; background: #e2136e; color: #fff; font-size: 14px; font-weight: 600; }
.ph-top { padding: 36px 16px 24px; background: #e2136e; color: #fff; }
.ph-top small { color: rgba(255, 255, 255, .8); }
.ph-top span { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: #fff; color: #e2136e; font-size: 11px; font-weight: 600; }
.ph-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 4px; margin-top: -12px; padding: 20px 8px 16px; border-radius: 16px 16px 0 0; background: #fff; }
.ph-apps div { position: relative; padding: 6px 2px; border-radius: 12px; text-align: center; }
.ph-apps i { display: block; width: 32px; height: 32px; margin: 0 auto; border-radius: 50%; background: var(--slate-200); }
.ph-apps span { display: block; margin-top: 4px; font-size: 9px; line-height: 11px; color: var(--slate-500); }
.ph-apps .hot { background: rgba(226, 19, 110, .1); box-shadow: 0 0 0 2px #e2136e; }
.ph-apps .hot::after { content: ""; position: absolute; inset: 0; border: 2px solid #e2136e; border-radius: 12px; animation: wave 2.8s var(--ease) infinite; }
.ph-apps .hot i { background: #e2136e; }
.ph-apps .hot span { font-weight: 700; color: #e2136e; }
.ph-pad { padding: 16px; }
.ph-field { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 2px solid #e2136e; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; }
.ph-field svg { color: var(--slate-400); }
.ph-to { margin-top: 48px; font-size: 12px; color: var(--slate-500); text-align: center; }
.ph-to b { font-size: 14px; color: var(--ink-900); }
.ph-btn { position: relative; width: fit-content; margin: 16px auto 0; padding: 10px 20px; border-radius: 8px; background: #e2136e; color: #fff; font-size: 12px; font-weight: 600; }
.ph-btn.pulse::after { content: ""; position: absolute; inset: 0; border: 2px solid #e2136e; border-radius: 8px; animation: wave 2.8s var(--ease) infinite; }
.ph-merchant { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; }
.ph-merchant i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--brand-100); color: var(--brand-600); }
.ph-merchant b { display: block; font-size: 12px; text-transform: uppercase; }
.ph-block { padding: 16px; border-top: 4px solid var(--slate-100); background: #fff; }
.ph-amount { margin-top: 8px; font-size: 30px; font-weight: 700; text-align: center; }
.ph-block em { display: block; margin-top: 4px; font-size: 10px; font-style: normal; color: var(--slate-400); text-align: center; }
.ph-source { display: flex; gap: 8px; margin-top: 8px; font-size: 11px; }
.ph-source span { padding: 6px 10px; border: 1px solid var(--slate-200); border-radius: 8px; color: var(--slate-400); }
.ph-source .on { border: 2px solid #e2136e; color: var(--ink-900); font-weight: 600; }
.ph-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 14px 16px; background: #e2136e; color: #fff; font-size: 14px; font-weight: 600; }
.ph-foot.off { background: var(--slate-400); }
.ph-foot.glow { animation: blink 1.6s ease-in-out infinite; }
.ph-totals { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 16px; border-top: 4px solid var(--slate-100); background: #fff; font-size: 10px; color: var(--slate-500); }
.ph-totals div:nth-child(2) { text-align: center; }
.ph-totals div:nth-child(3) { text-align: right; }
.ph-totals b, .ph-totals span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-900); }
.ph-totals span { color: var(--slate-400); }
.ph-ref { padding: 12px 16px; border-top: 1px solid var(--slate-100); background: #fff; }
.ph-ref b { display: block; margin-top: 4px; font-size: 14px; }
.ph-ref em { display: block; margin-top: 4px; font-size: 10px; font-style: normal; color: #e2136e; }
.ph-pin { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-top: 4px solid var(--slate-100); background: #fff; }
.ph-pin svg { color: #e2136e; }
.ph-pin span { flex: 1; font-size: 14px; color: var(--slate-400); text-align: center; }
.ph-pin.focus span { font-weight: 700; letter-spacing: .4em; color: var(--ink-900); }
.ph-ref.focus, .ph-pin.focus { box-shadow: inset 0 0 0 2px #e2136e; }
.ph-confirm { padding: 40px 16px 0; background: #fff; font-size: 16px; color: #e2136e; }
.ph-two { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--slate-100); background: #fff; font-size: 10px; color: var(--slate-500); }
.ph-two div { padding: 12px 16px; }
.ph-two div:first-child { border-right: 1px solid var(--slate-100); }
.ph-two b { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-900); }
.ph-two span { color: var(--slate-400); }
.ph-hold { flex: 1; display: flex; align-items: flex-end; overflow: hidden; background: #fff; }
.ph-hold div { display: flex; flex-direction: column; align-items: center; width: 130%; height: 144px; flex: none; margin: 0 -15% -24px; padding-top: 24px; border-radius: 100% 100% 0 0; background: #e2136e; color: #fff; }
.ph-hold i { position: relative; display: grid; place-items: center; width: 36px; height: 36px; }
.ph-hold i::after { content: ""; position: absolute; inset: 0; border: 2px solid #fff; border-radius: 50%; animation: wave 2.8s var(--ease) infinite; }
.ph-hold svg { width: 24px; height: 24px; }
.ph-hold span { margin-top: 8px; font-size: 12px; font-weight: 500; }
.ph-success { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.ph-success i { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: #10b981; color: #fff; }
.ph-success svg { width: 44px; height: 44px; }
.ph-success b { margin-top: 16px; font-size: 18px; }
.ph-success small { margin-top: 4px; font-size: 12px; }
.ph-success code { margin-top: 16px; padding: 8px 12px; border-radius: 8px; background: #fff; font-size: 12px; color: var(--slate-600); }
.ph-ussd { flex: 1; display: flex; align-items: center; padding: 20px; }
.ph-ussd > div { width: 100%; padding: 16px; border-radius: 16px; background: #2a3040; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3); color: var(--slate-100); font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.ph-ussd p.hot { padding: 0 4px; border-radius: 4px; background: rgba(62, 159, 6, .35); color: var(--brand-200); font-weight: 700; }
.ph-input { display: flex; align-items: center; min-height: 28px; margin-top: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--slate-400); font-size: 16px; }
.ph-input .ph-caret { background: var(--slate-200); }
.ph-keys { display: flex; justify-content: flex-end; gap: 20px; margin-top: 16px; font-size: 12px; font-weight: 700; color: #7dd3fc; }

/* CTA band */
.cta { padding-top: 80px; padding-bottom: 80px; }
.cta-box { position: relative; overflow: hidden; padding: 56px 24px; border-radius: 2rem; background: linear-gradient(to bottom right, var(--brand-500), var(--brand-700)); color: #fff; text-align: center; }
.cta-box .blob { filter: none; background: rgba(255, 255, 255, .1); width: 256px; height: 256px; }
.cta-box .b1 { right: -80px; top: -80px; }
.cta-box .b2 { left: -64px; bottom: -96px; animation-delay: -8s; }
.cta-box h2 { position: relative; font-size: clamp(1.75rem, 3.6vw, 2.25rem); font-weight: 800; color: #fff; }
.cta-box p { position: relative; max-width: 36rem; margin: 16px auto 0; color: var(--brand-50); }
.cta-btns { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* Inner page head */
.page-hero { position: relative; overflow: hidden; padding: 80px 0; background: var(--ink-900); color: #fff; text-align: center; }
.page-hero .b1 { left: 50%; top: -128px; width: 42rem; max-width: 100%; height: 288px; margin-left: -21rem; background: rgba(62, 159, 6, .28); }
.page-hero .wrap { position: relative; }
.page-hero .pill { letter-spacing: .05em; text-transform: uppercase; animation: fade-up .9s var(--ease) both; }
.page-hero .pill i { width: 6px; height: 6px; }
.page-hero h1 { max-width: 48rem; margin: 16px auto 0; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; color: #fff; }
.page-hero h1 span { display: inline-block; animation: word .8s var(--ease) both; }
.page-hero .rule { display: block; width: 64px; height: 4px; margin: 20px auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand-300), var(--brand-600)); animation: grow .9s var(--ease) both; }
.page-hero p { max-width: 42rem; margin: 20px auto 0; line-height: 2rem; color: var(--slate-300); animation: fade-up .9s var(--ease) both; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1.6fr 1fr; align-items: start; gap: 24px; }
.form { display: grid; gap: 18px; padding: 32px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .875rem; font-weight: 600; color: var(--ink-900); }
.field input, .field select, .field textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; font: inherit; font-size: .9375rem; color: var(--ink-900); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-400); box-shadow: 0 0 0 4px var(--brand-100); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #f87171; }
.field .error { font-size: .8125rem; color: #dc2626; }
.form .btn { justify-self: start; padding: 14px 28px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 12px 16px; border-radius: 12px; background: #fef2f2; font-size: .875rem; color: #b91c1c; }
.side { display: grid; justify-items: start; gap: 12px; }
.side h3 { font-size: 1.125rem; font-weight: 700; }
.side p { font-size: .875rem; line-height: 1.75rem; color: var(--slate-500); }
.sent { display: grid; justify-items: start; gap: 14px; padding: 32px; }
.sent .icon { background: #d1fae5; color: #047857; }
.sent h2 { font-size: 1.5rem; font-weight: 800; }
.sent p { line-height: 1.9rem; color: var(--slate-600); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; align-items: stretch; gap: 24px; }
.contact-grid h2 { font-size: 1.5rem; font-weight: 800; }
.info { display: grid; gap: 18px; margin: 24px 0; padding: 0; list-style: none; }
.info li { display: flex; align-items: center; gap: 14px; }
.info small { display: block; font-size: .75rem; color: var(--slate-500); }
.info a, .info b { font-weight: 700; color: var(--ink-900); text-decoration: none; overflow-wrap: anywhere; }
.info a:hover { color: var(--brand-600); }
.map { min-height: 380px; overflow: hidden; border: 1px solid var(--slate-200); border-radius: 1.5rem; }
.map iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }

/* Footer */
.site-footer { background: var(--ink-950); color: var(--slate-400); font-size: .875rem; }
.site-footer a { color: inherit; text-decoration: none; }
.foot-main { display: grid; grid-template-columns: 1.3fr 2fr; gap: 48px; padding-top: 64px; padding-bottom: 64px; }
.foot-about { max-width: 24rem; margin-top: 20px; line-height: 1.75rem; }
.foot-phone { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.foot-phone .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(62, 159, 6, .18); color: var(--brand-400); }
.foot-phone .ico svg { width: 20px; height: 20px; }
.foot-phone small { display: block; font-size: .75rem; }
.foot-phone b { font-size: 1.125rem; color: #fff; }
.foot-social { display: flex; gap: 12px; margin-top: 24px; }
.foot-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .05); transition: background-color .2s ease, color .2s ease; }
.foot-social a:hover { background: var(--brand-500); color: #fff; }
.foot-social svg { width: 20px; height: 20px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.foot-cols h3 { font-size: .875rem; font-weight: 600; letter-spacing: 0; color: #fff; }
.foot-cols ul { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.foot-cols a:hover { color: var(--brand-400); }
.foot-line { border-top: 1px solid rgba(255, 255, 255, .05); }
.foot-office { display: flex; gap: 12px; padding-top: 28px; padding-bottom: 28px; }
.foot-office svg { margin-top: 3px; color: var(--brand-400); }
.foot-credit { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 24px; padding-bottom: 24px; font-size: .75rem; }
.foot-credit a { font-weight: 500; color: var(--slate-200); }
.foot-credit a:hover { color: var(--brand-400); }

/* Bottom bar on phones */
.mobile-bar { display: none; }

/* Scroll reveal: with the script running, these start out of view and site.js adds "in" when they reach the screen.
   Each kind of block arrives in its own way. */
html.js :is(.reveal, .card) {
  transition: opacity .7s ease, transform .8s var(--ease), filter .7s ease, clip-path .9s var(--ease), translate .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms, 0ms;
}
/* default: comes into focus while growing to size */
html.js :is(.reveal, .card):not(.in) { opacity: 0; transform: scale(.92); filter: blur(10px); }
/* package cards tip up into place */
html.js .pkg.reveal { transform-origin: 50% 0; }
html.js .pkg.reveal:not(.in) { opacity: 0; transform: perspective(1000px) rotateX(22deg) translateY(48px); filter: none; }
/* "why us" tiles slide in from the side */
html.js .tile.reveal:not(.in) { opacity: 0; transform: translateX(48px); filter: none; }
/* section headings: the pill pops, the title is wiped in from the left, the text follows */
html.js .heading.reveal:not(.in) { opacity: 1; transform: none; filter: none; }
html.js .heading .eyebrow { transition: opacity .5s ease, transform .6s var(--pop); }
html.js .heading h2 { transition: clip-path 1s var(--ease) .12s; clip-path: inset(0 0 -20% 0); }
html.js .heading p { transition: opacity .7s ease .4s, transform .7s var(--ease) .4s; }
html.js .heading:not(.in) .eyebrow { opacity: 0; transform: scale(.5); }
html.js .heading:not(.in) h2 { clip-path: inset(0 100% -20% 0); }
html.js .heading:not(.in) p { opacity: 0; transform: translateY(14px); }
/* area chips pop in one after another */
html.js .chips.reveal:not(.in) { opacity: 1; transform: none; filter: none; }
html.js .chips a { transition: opacity .4s ease, transform .5s var(--pop), background-color .2s ease; transition-delay: calc(var(--n, 0) * 45ms), calc(var(--n, 0) * 45ms), 0ms; }
html.js .chips:not(.in) a { opacity: 0; transform: scale(.5); }

@keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes word { from { opacity: 0; transform: scale(1.5); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-30px, 25px) scale(.92); } }
@keyframes shine { to { background-position: 200% center; } }
@keyframes wave { from { transform: scale(.85); opacity: .55; } to { transform: scale(1.35); opacity: 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes gauge { from { stroke-dasharray: 0 1000; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes m-progress { from { width: 0; } to { width: 100%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pkg-flow { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes pkg-ring { from { transform: scale(.15); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }

@media (min-width: 640px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .cta-box { padding: 56px 48px; }
}
@media (min-width: 1024px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1360px) {
  .mobile-menu { display: none; }
}
@media (max-width: 1359px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
}
@media (max-width: 1023px) {
  .hero-grid, .why, .foot-main, .form-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 48px; }
  .pkg-grid, .area-grid, .offer-grid, .bill-cards { grid-template-columns: repeat(2, 1fr); }
  .pg-panel { grid-template-columns: 1fr; }
  .pg-phone { position: static; }
  .pay-online-main { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .bar { height: 64px; }
  .brand { font-size: 1.05rem; }
  .brand img { height: 38px; }
  .actions .apply, .actions .self { display: none; }
  .section { padding: 80px 0; }
  .hero-grid { padding-top: 64px; padding-bottom: 64px; }
  .page-hero { padding: 64px 0; }
  .meter { padding: 24px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .foot-credit { flex-direction: column; align-items: flex-start; padding-bottom: 96px; }
  .form, .sent { padding: 24px; }
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--slate-200); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .mobile-bar a { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; font-size: .6875rem; font-weight: 500; color: var(--slate-600); text-decoration: none; }
  .mobile-bar svg { width: 20px; height: 20px; color: var(--brand-500); }
  .mobile-bar a.go { background: var(--brand-500); color: #fff; }
  .mobile-bar a.go svg { color: #fff; }
}
@media (max-width: 639px) {
  .pkg-grid, .area-grid, .offer-grid, .bill-cards { grid-template-columns: 1fr; }
  .pay-online-main, .bkash-box, .app-row, .app-box { padding: 28px 20px; }
  .pay-online .pay-online-foot { padding: 12px 20px; }
  .st { padding: 40px 16px; }
  .st-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-btns .btn { width: 100%; }
  .foot-cols { gap: 32px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js :is(.reveal, .card, .reveal *):not(.in) { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  html { scroll-behavior: auto; }
}