/* ==========================================================
   HelpLagbe — style.css (সব স্টাইল এক ফাইলে)
   ========================================================== */

/* ===== BRAND COLORS ===== */
:root {
  --primary:   #199E73;
  --dark-teal: #017A55;
  --soft-teal: #A5D6C2;
  --yellow:    #F4D35E;
  --neutral:   #222222;
  --bg:        #FFFFFF;
  --bg-soft:   #F5FBF8;
  --pale:      #E8F7F1;
  --border:    #D1EDE2;
  --text:      #222222;
  --text2:     #445545;
  --text3:     #7A9A8A;
  --text4:     #AAC0B5;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow:    0 4px 18px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
  --r:  14px;
  --r2: 10px;
  /* Theme-aware semantic variables */
  --card-bg:   #FFFFFF;
  --nav-bg:    rgba(255,255,255,0.97);
  --input-bg:  #FFFFFF;
  --modal-bg:  #FFFFFF;
  --mobile-menu-bg: #FFFFFF;
  --announce-bg: #f0c030;
  --announce-color: #222222;
  --hero-gradient: linear-gradient(155deg, #F5FBF8 0%, #FFFFFF 65%);
}

/* ===== DARK MODE — single class overrides ALL variables ===== */
html.dark-mode, body.dark-mode {
  --primary:   #1eb87f;
  --dark-teal: #17a06e;
  --soft-teal: #5ecfa4;
  --yellow:    #F4D35E;
  --neutral:   #f0f0f0;
  --bg:        #0f1a14;
  --bg-soft:   #141f19;
  --pale:      #1a2e22;
  --border:    #253d2e;
  --text:      #e8f0ec;
  --text2:     #a8c4b4;
  --text3:     #6a9a80;
  --text4:     #4a7060;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
  --shadow:    0 4px 18px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  --card-bg:   #141f19;
  --nav-bg:    rgba(15,26,20,0.98);
  --input-bg:  #1a2e22;
  --modal-bg:  #141f19;
  --mobile-menu-bg: #0f1a14;
  --announce-bg: #3a2e00;
  --announce-color: #f4d35e;
  --hero-gradient: linear-gradient(155deg, #0f1a14 0%, #0a1510 65%);
  background: var(--bg);
  color: var(--text);
}

img { max-width:100%; height:auto; }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Hind Siliguri',sans-serif; background:var(--bg); color:var(--text); line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* PAGE SYSTEM */
.page { display:none; }
.page.active { display:block; }

/* ===== ANNOUNCE BAR ===== */
.announce-bar {
  background:var(--announce-bg);
  color:var(--announce-color);
  text-align:center; padding:10px 16px;
  font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  letter-spacing:0.2px;
}

/* ===== NAVBAR ===== */
.navbar {
  position:sticky; top:0; z-index:200;
  background:var(--nav-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 5%;
  display:flex; align-items:center; gap:8px;
  height:66px; transition:box-shadow 0.3s, height 0.3s;
}
.navbar.scrolled { height:58px; }
.navbar .nav-desktop { flex:1; justify-content:flex-end; }
.navbar.scrolled { box-shadow:0 2px 20px rgba(0,0,0,0.08); }

.logo { display:flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none; }
.logo img { 
  height:42px; width:auto; 
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  transition:height 0.3s;
}
.navbar.scrolled .logo img { height:38px; }

.nav-desktop { display:flex; align-items:center; gap:4px; list-style:none; }
.nav-desktop a {
  text-decoration:none; color:var(--text2);
  font-size:13.5px; font-weight:500;
  padding:8px 11px; border-radius:8px; transition:all 0.2s; cursor:pointer; white-space:nowrap;
  letter-spacing:0.1px;
}
.nav-desktop a:hover { background:var(--pale); color:var(--dark-teal); }
.nav-order-btn {
  background:var(--primary) !important; color:white !important;
  padding:9px 20px !important; border-radius:8px !important;
  font-weight:700 !important;
  box-shadow:0 3px 12px rgba(25,158,115,0.35);
}
.nav-order-btn:hover { background:var(--dark-teal) !important; transform:translateY(-1px); }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.hamburger span { display:block; width:22px; height:2px; background:var(--neutral); border-radius:2px; transition:0.3s; }

/* MOBILE MENU */
.mobile-menu {
  display:none; position:fixed; top:64px; left:0; right:0;
  background:white; z-index:199; border-bottom:2px solid var(--border);
  padding:16px 5% 24px; flex-direction:column; gap:4px;
  box-shadow:var(--shadow-lg);
}
.mobile-menu.open { display:flex; }
.mobile-menu a { min-height:44px; }
.mobile-menu a {
  text-decoration:none; color:var(--text2); font-size:15px; font-weight:500;
  padding:12px 16px; border-radius:10px; transition:background 0.2s; cursor:pointer;
}
.mobile-menu a:hover { background:var(--pale); color:var(--dark-teal); }
.mobile-menu-order {
  background:var(--primary) !important; color:white !important;
  text-align:center; font-weight:700 !important; margin-top:8px;
}

/* ===== HERO ===== */
.hero {
  padding:52px 5% 44px;
  background:var(--hero-gradient);
  position:relative; overflow:hidden;
}
.hero::after {
  content:'';
  position:absolute; top:-80px; right:-80px;
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(25,158,115,0.08), transparent 70%);
  pointer-events:none;
}
.hero-inner {
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:48px;
  position:relative; z-index:2;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pale); border:1px solid var(--soft-teal);
  border-radius:20px; padding:6px 14px;
  font-size:12.5px; color:var(--dark-teal); font-weight:600;
  margin-bottom:20px; letter-spacing:0.2px;
}
.hero-badge::before { content:'●'; font-size:7px; color:var(--primary); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.hero h1 {
  font-family:'Noto Serif Bengali',serif;
  font-size:clamp(28px, 4vw, 46px);
  font-weight:900; line-height:1.25;
  color:var(--neutral); margin-bottom:16px;
}
.hero h1 .accent {
  color:var(--primary); position:relative;
}
.hero h1 .accent::after {
  content:''; position:absolute; left:0; bottom:-3px;
  width:100%; height:3px; background:var(--soft-teal); border-radius:2px;
}

.hero-sub { font-size:16px; color:var(--text2); margin-bottom:28px; line-height:1.8; }

.hero-pills {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;
}
.pill {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:20px; padding:6px 12px;
  font-size:12.5px; color:var(--text2); font-weight:500;
  box-shadow:var(--shadow-sm);
}

.hero-btns { display:flex; flex-wrap:wrap; gap:12px; }

/* BUTTONS */
.btn-primary {
  background:var(--primary); color:white;
  border:none; padding:13px 28px; border-radius:var(--r2);
  font-size:15px; font-weight:700; font-family:'Hind Siliguri',sans-serif;
  cursor:pointer; box-shadow:0 4px 16px rgba(25,158,115,0.38);
  transition:all 0.22s ease; display:inline-flex; align-items:center; gap:7px;
  letter-spacing:0.1px;
}
.btn-primary:hover { background:var(--dark-teal); transform:translateY(-2px); box-shadow:0 8px 24px rgba(1,122,85,0.42); }
.btn-primary:active { transform:translateY(0); }

.btn-secondary {
  background:var(--card-bg); color:var(--dark-teal);
  border:2px solid var(--primary); padding:11px 24px; border-radius:var(--r2);
  font-size:15px; font-weight:600; font-family:'Hind Siliguri',sans-serif;
  cursor:pointer; transition:all 0.25s; display:inline-flex; align-items:center; gap:7px;
}
.btn-secondary:hover { background:var(--pale); transform:translateY(-2px); }

/* TRUST CARD */
.trust-card {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:20px; padding:26px 28px; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.trust-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--primary), var(--soft-teal));
}
.trust-card-title {
  font-family:'Noto Serif Bengali',serif;
  font-size:17px; font-weight:700; margin-bottom:18px; color:var(--neutral);
}
.trust-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--border);
}
.trust-item:last-child { border-bottom:none; }
.t-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
}
.ti-g { background:var(--pale); }
.ti-y { background:#FFFBEB; }
.ti-b { background:#EFF6FF; }
.trust-info h4 { font-size:13.5px; font-weight:700; color:var(--neutral); margin-bottom:2px; }
.trust-info p { font-size:12.5px; color:var(--text3); }

/* ===== SECTIONS ===== */
.section { padding:68px 5%; }
.section-alt { background:var(--bg-soft); }
.section + .section { border-top:1px solid var(--border); }

.section-header { text-align:center; margin-bottom:44px; }
.section-tag {
  display:inline-block; background:var(--pale); color:var(--dark-teal);
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 12px; border-radius:20px; margin-bottom:12px;
}
.section-title {
  font-family:'Noto Serif Bengali',serif;
  font-size:clamp(22px,3.5vw,36px); font-weight:800;
  color:var(--neutral); margin-bottom:10px; line-height:1.3;
}
.section-sub { font-size:15px; color:var(--text3); max-width:500px; margin:0 auto; }

/* ===== HOW IT WORKS ===== */
.steps-wrap { position:relative; }
.steps-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  position:relative;
}
.steps-connector {
  position:absolute; top:36px;
  left:calc(16.67% + 24px); right:calc(16.67% + 24px);
  height:2px;
  background:repeating-linear-gradient(90deg,var(--soft-teal) 0,var(--soft-teal) 7px,transparent 7px,transparent 14px);
}
.step-card { text-align:center; padding:28px 18px; }
.step-num {
  width:52px; height:52px;
  background:linear-gradient(135deg,var(--primary),var(--soft-teal));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; margin:0 auto 18px;
  box-shadow:0 4px 16px rgba(25,158,115,0.35);
  position:relative; z-index:2;
}
.step-card h3 { font-family:'Noto Serif Bengali',serif; font-size:18px; font-weight:700; color:var(--neutral); margin-bottom:8px; }
.step-card p { font-size:14px; color:var(--text2); line-height:1.7; }

/* ===== WHY ===== */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px) and (min-width:641px){
  .why-grid { grid-template-columns:repeat(2,1fr); }
}
.why-card {
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r);
  padding:28px 22px; transition:all 0.3s; position:relative; overflow:hidden;
}
.why-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--primary),var(--soft-teal));
  transform:scaleX(0); transition:0.3s;
}
.why-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.why-card:hover::after { transform:scaleX(1); }
.why-icon { font-size:36px; margin-bottom:14px; display:block; }
.why-card h3 { font-family:'Noto Serif Bengali',serif; font-size:17px; font-weight:700; color:var(--neutral); margin-bottom:8px; }
.why-card p { font-size:14px; color:var(--text2); line-height:1.75; }

/* ===== MISSION ===== */
.mission-section {
  padding:88px 5%;
  background:linear-gradient(150deg, #0A1E16 0%, #013D2A 50%, #0A1E16 100%);
  position:relative; overflow:hidden;
}
.mission-section::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(25,158,115,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(165,214,194,0.08) 0%, transparent 45%);
  pointer-events:none;
}
.mission-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  position:relative; z-index:2;
}
.mission-eyebrow {
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--soft-teal) !important; font-weight:700; margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.mission-eyebrow::before { content:''; width:28px; height:2px; background:var(--soft-teal); }
.mission-headline {
  font-family:'Noto Serif Bengali',serif;
  font-size:clamp(26px,3.5vw,40px); font-weight:900;
  color:white !important; line-height:1.3; margin-bottom:24px;
}
.mission-headline em { color:var(--soft-teal); font-style:normal; }
.mission-body { font-size:15.5px; color:rgba(255,255,255,0.75) !important; line-height:1.95; margin-bottom:32px; }
.mission-stats { display:flex; gap:32px; }
.ms-num { font-family:'Noto Serif Bengali',serif; font-size:32px; font-weight:900; color:var(--soft-teal) !important; line-height:1; }
.ms-label { font-size:12px; color:rgba(255,255,255,0.55) !important; margin-top:3px; }

.mission-cards { display:flex; flex-direction:column; gap:14px; }
.mc {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:20px; display:flex; gap:14px; align-items:flex-start;
  transition:all 0.3s; backdrop-filter:blur(8px);
}
.mc:hover { background:rgba(25,158,115,0.15); border-color:rgba(25,158,115,0.35); transform:translateX(5px); }
.mc-icon {
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.mc-g { background:rgba(25,158,115,0.2); }
.mc-y { background:rgba(244,211,94,0.15); }
.mc-b { background:rgba(165,214,194,0.15); }
.mc-p { background:rgba(244,211,94,0.1); }
.mc-title { font-size:14px; font-weight:700; color:white !important; margin-bottom:3px; }
.mc-desc { font-size:13px; color:rgba(255,255,255,0.65) !important; line-height:1.6; }

/* ===== SERVICE PREVIEW ===== */
.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:640px; margin:0 auto; }
.svc-card {
  background:var(--card-bg); border:1.5px solid var(--border); border-radius:var(--r);
  padding:22px 20px; display:flex; align-items:center; gap:14px;
  cursor:pointer; transition:all 0.3s; box-shadow:var(--shadow-sm);
}
.svc-card:hover { border-color:var(--primary); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.svc-em { font-size:32px; flex-shrink:0; }
.svc-name { font-size:15px; font-weight:700; color:var(--neutral); margin-bottom:3px; }
.svc-from { font-size:13px; color:var(--primary); font-weight:600; }
.svc-arrow { margin-left:auto; font-size:16px; color:var(--text4); transition:all 0.2s; }
.svc-card:hover .svc-arrow { color:var(--primary); transform:translateX(3px); }
.price-link { text-align:center; margin-top:24px; font-size:14px; color:var(--text3); }
.price-link a { color:var(--primary); font-weight:700; cursor:pointer; }

/* ===== TESTIMONIALS ===== */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:900px) and (min-width:641px){
  .testi-grid { grid-template-columns:repeat(2,1fr); }
}
.testi-card {
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r);
  padding:22px 24px; box-shadow:var(--shadow-sm); transition:all 0.3s;
}
.testi-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.stars { color:var(--yellow); font-size:14px; margin-bottom:12px; letter-spacing:1.5px; }
.testi-text { font-size:14.5px; color:var(--text2); line-height:1.85; margin-bottom:16px; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:10px; }
.ta-av {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--soft-teal));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:white; font-size:15px; flex-shrink:0;
}
.ta-name { font-size:13px; font-weight:700; color:var(--neutral); }
.ta-area { font-size:12px; color:var(--text4); }

/* ===== CTA ===== */
.cta-sec {
  background:linear-gradient(135deg, var(--dark-teal) 0%, var(--primary) 100%);
  padding:72px 5%; text-align:center; position:relative; overflow:hidden;
}
.cta-sec::before { content:''; position:absolute; top:-60px; right:-60px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,0.04); }
.cta-sec h2 { font-family:'Noto Serif Bengali',serif; font-size:clamp(22px,3.5vw,36px); font-weight:800; color:white; margin-bottom:12px; }
.cta-sec p { font-size:16px; color:rgba(255,255,255,0.82); margin-bottom:32px; max-width:480px; margin-left:auto; margin-right:auto; }
.cta-btns { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.btn-white { background:white; color:var(--dark-teal); border:none; padding:13px 28px; border-radius:var(--r2); font-size:15px; font-weight:700; font-family:'Hind Siliguri',sans-serif; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,0.15); transition:all 0.25s; }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.2); }
.btn-outline-w { background:transparent; color:white; border:2px solid rgba(255,255,255,0.55); padding:11px 24px; border-radius:var(--r2); font-size:15px; font-weight:600; font-family:'Hind Siliguri',sans-serif; cursor:pointer; transition:all 0.25s; }
.btn-outline-w:hover { background:rgba(255,255,255,0.12); border-color:white; }

/* ===== FOOTER ===== */
footer { background:#1A1A1A; color:rgba(255,255,255,0.8); padding:52px 5% 28px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand p { font-size:13.5px; color:rgba(255,255,255,0.55); margin:14px 0; line-height:1.8; }
.footer-contact a { display:flex; align-items:center; gap:7px; color:rgba(255,255,255,0.65); text-decoration:none; font-size:13.5px; margin-bottom:9px; transition:color 0.2s; }
.footer-contact a:hover { color:var(--soft-teal); }
.footer-col h4 { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:14px; }
.footer-col a { display:block; font-size:13.5px; color:rgba(255,255,255,0.65); text-decoration:none; margin-bottom:8px; transition:color 0.2s; cursor:pointer; }
.footer-col a:hover { color:var(--soft-teal); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:rgba(255,255,255,0.35); }

/* ===== PRICE PAGE ===== */
.price-hero {
  background:linear-gradient(140deg, var(--dark-teal) 0%, var(--primary) 100%);
  padding:48px 5% 44px; color:white; position:relative; overflow:hidden;
}
.price-hero::after { content:'💰'; position:absolute; right:5%; top:50%; transform:translateY(-50%); font-size:100px; opacity:0.06; }
.back-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25);
  color:white; padding:7px 14px; border-radius:8px; font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:'Hind Siliguri',sans-serif; margin-bottom:24px; transition:background 0.2s;
}
.back-btn:hover { background:rgba(255,255,255,0.25); }
.price-hero h1 { font-family:'Noto Serif Bengali',serif; font-size:clamp(24px,4vw,34px); font-weight:900; margin-bottom:8px; }
.price-hero p { font-size:15px; opacity:0.82; }

.price-body { padding:48px 5%; max-width:860px; margin:0 auto; }
.price-cat { margin-bottom:52px; }
.pc-head { display:flex; align-items:center; gap:14px; margin-bottom:24px; padding-bottom:16px; border-bottom:2px solid var(--border); flex-wrap:wrap; }
.pc-em { font-size:32px; }
.pc-title-txt h3 { font-family:'Noto Serif Bengali',serif; font-size:24px; font-weight:800; color:var(--neutral); }
.pc-title-txt p { font-size:13px; color:var(--text3); margin-top:2px; }

.pcg-label {
  font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--text4); margin:20px 0 8px; padding:0 4px;
  display:flex; align-items:center; gap:8px;
}
.pcg-label::after { content:''; flex:1; height:1px; background:var(--border); }

.pr-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:10px; transition:background 0.2s;
  border:1px solid transparent; gap:12px;
}
.pr-row:hover { background:var(--pale); border-color:var(--border); }
.pr-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.pr-dot { width:7px; height:7px; border-radius:50%; background:var(--soft-teal); flex-shrink:0; }
.pr-name { font-size:14.5px; font-weight:600; color:var(--neutral); }
.pr-note { font-size:12px; color:var(--text4); }
.pr-right { text-align:right; flex-shrink:0; }
.pr-price { font-family:'Noto Serif Bengali',serif; font-size:18px; font-weight:800; color:var(--dark-teal); }
.pr-fixed { font-size:11px; background:var(--pale); color:var(--primary); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-weight:700; display:inline-block; margin-top:1px; }

.parts-note {
  background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px;
  padding:14px 16px; display:flex; gap:10px; align-items:flex-start;
  margin-top:16px; font-size:13px; color:#78350F; line-height:1.65;
}

.price-order-box {
  background:linear-gradient(135deg,var(--dark-teal),var(--primary));
  border-radius:20px; padding:32px; text-align:center; color:white;
}
.price-order-box h3 { font-family:'Noto Serif Bengali',serif; font-size:22px; font-weight:800; margin-bottom:8px; }
.price-order-box p { font-size:14px; opacity:0.82; margin-bottom:20px; }

/* ===== ORDER MODAL ===== */
.overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(6px);
  z-index:1000; align-items:flex-end; justify-content:center;
}
.overlay.open { display:flex; }
.modal {
  background:white; width:100%; max-width:640px; max-height:92vh;
  border-radius:22px 22px 0 0; overflow-y:auto;
  animation:slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-drag { width:36px; height:4px; background:var(--border); border-radius:2px; margin:12px auto 0; }
.modal-head { padding:16px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-family:'Noto Serif Bengali',serif; font-size:19px; font-weight:800; color:var(--neutral); }
.modal-x { width:34px; height:34px; background:var(--bg-soft); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; color:var(--text3); transition:all 0.2s; }
.modal-x:hover { background:#FEE2E2; color:#DC2626; border-color:#FCA5A5; }
.modal-steps-bar { display:flex; align-items:center; padding:18px 24px 0; }
.ms-wrap { display:flex; flex-direction:column; align-items:center; }
.ms-dot { width:26px; height:26px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--text3); flex-shrink:0; transition:all 0.3s; }
.ms-dot.active { background:var(--primary); color:white; box-shadow:0 0 0 4px rgba(25,158,115,0.2); }
.ms-dot.done { background:var(--primary); color:white; }
.ms-lbl { font-size:10px; color:var(--text4); margin-top:3px; white-space:nowrap; }
.ms-line { flex:1; height:2px; background:var(--border); transition:background 0.3s; }
.ms-line.done { background:var(--soft-teal); }
.modal-body { padding:20px 24px 28px; }
.svc-sel-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.svc-opt {
  border:2px solid var(--border); border-radius:12px; padding:16px;
  cursor:pointer; transition:all 0.25s; position:relative;
}
.svc-opt:hover { border-color:var(--soft-teal); background:var(--pale); }
.svc-opt.sel { border-color:var(--primary); background:var(--pale); }
.svc-opt.sel::after {
  content:'✓'; position:absolute; top:8px; right:10px;
  width:20px; height:20px; background:var(--primary); color:white;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.svc-em2 { font-size:26px; margin-bottom:7px; display:block; }
.svc-nm { font-size:13.5px; font-weight:700; color:var(--neutral); margin-bottom:2px; }
.svc-fr { font-size:12.5px; color:var(--primary); font-weight:600; }
.sub-list { display:flex; flex-direction:column; gap:5px; }
.sub-row {
  display:flex; flex-direction:column;
  padding:14px; border:2px solid var(--border); border-radius:10px;
  cursor:pointer; transition:all 0.2s; gap:10px;
}
.sub-row:hover { border-color:var(--soft-teal); background:var(--pale); }
.sub-row.sel { border-color:var(--primary); background:var(--pale); }
.sub-row-top {
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.sub-left { display:flex; align-items:flex-start; gap:9px; flex:1; min-width:0; }
.sub-ic { font-size:20px; flex-shrink:0; margin-top:1px; }
.sub-nm { font-size:14px; font-weight:700; color:var(--neutral); }
.sub-dc { font-size:12px; color:var(--text4); margin-top:2px; }
.sub-pr { font-family:'Noto Serif Bengali',serif; font-size:17px; font-weight:800; color:var(--dark-teal); flex-shrink:0; white-space:nowrap; }
.sub-tasks {
  background:rgba(25,158,115,0.06);
  border-radius:8px; padding:8px 10px;
  border-left:3px solid var(--soft-teal);
}
.sub-nots {
  background:rgba(255,180,0,0.06);
  border-left-color:#f59e0b;
}
.sub-tasks-label {
  font-size:11px; font-weight:700; color:var(--dark-teal);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;
}
.sub-task-item {
  font-size:12.5px; color:var(--text2); line-height:1.6; padding:1px 0;
}
.sub-when {
  font-size:12px; color:var(--text3);
  background:var(--bg-soft); border-radius:6px;
  padding:5px 8px; line-height:1.5;
}
.fg { margin-bottom:16px; }
.fl { display:block; font-size:12.5px; font-weight:700; color:var(--neutral); margin-bottom:5px; }
.fl span { color:#DC2626; }
.fi,.fs,.ft { width:100%; border:1.5px solid var(--border); border-radius:9px; padding:11px 13px; font-size:14.5px; font-family:'Hind Siliguri',sans-serif; color:var(--neutral); background:white; outline:none; transition:border-color 0.2s,box-shadow 0.2s; }
.fi:focus,.fs:focus,.ft:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(25,158,115,0.1); }
.fr2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.order-sum { background:var(--pale); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:18px; }
.osr { display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:5px; color:var(--text2); }
.osr:last-child { margin:0; padding-top:7px; border-top:1px solid var(--border); font-weight:700; color:var(--neutral); font-size:14.5px; }
.confirm-wrap { text-align:center; padding:16px 0; }
.confirm-ic { width:72px; height:72px; background:linear-gradient(135deg,var(--primary),var(--soft-teal)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 18px; box-shadow:0 6px 24px rgba(25,158,115,0.4); animation:bIn 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes bIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.confirm-wrap h3 { font-family:'Noto Serif Bengali',serif; font-size:22px; font-weight:800; color:var(--neutral); margin-bottom:8px; }
.confirm-wrap p { font-size:14.5px; color:var(--text2); margin-bottom:20px; line-height:1.75; }
.confirm-call { background:var(--pale); border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:16px; }
.cc-num { font-size:24px; font-weight:800; color:var(--dark-teal); font-family:'Noto Serif Bengali',serif; }
.cc-lbl { font-size:12px; color:var(--text3); margin-top:3px; }
.modal-foot { padding:14px 24px 24px; display:flex; gap:10px; }
.modal-foot .btn-primary,.modal-foot .btn-secondary { flex:1; justify-content:center; }

/* HELPER MODAL */
.h-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(6px); z-index:1000; align-items:flex-end; justify-content:center; }
.h-overlay.open { display:flex; }
.h-modal { background:white; width:100%; max-width:480px; max-height:90vh; border-radius:22px 22px 0 0; overflow-y:auto; animation:slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.h-head { background:linear-gradient(135deg,var(--dark-teal),var(--primary)); padding:28px; text-align:center; color:white; position:relative; }
.h-head h3 { font-family:'Noto Serif Bengali',serif; font-size:20px; font-weight:800; margin-bottom:5px; }
.h-head p { font-size:13.5px; opacity:0.83; }
.h-close { position:absolute; top:14px; right:14px; width:30px; height:30px; background:rgba(255,255,255,0.18); border:none; border-radius:50%; color:white; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; }
.h-body { padding:24px; }
.b-item { display:flex; align-items:flex-start; gap:11px; margin-bottom:13px; }
.b-ic { width:30px; height:30px; background:var(--pale); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.b-txt { font-size:13.5px; color:var(--text2); }
.b-txt strong { color:var(--neutral); font-weight:700; }
.gform-btn { display:block; width:100%; background:var(--primary); color:white; border:none; padding:15px; border-radius:11px; font-size:15px; font-weight:700; font-family:'Hind Siliguri',sans-serif; cursor:pointer; box-shadow:0 4px 16px rgba(25,158,115,0.4); transition:all 0.25s; text-align:center; text-decoration:none; margin-top:20px; }
.gform-btn:hover { background:var(--dark-teal); transform:translateY(-2px); }

/* WA FLOAT */
.wa-float { position:fixed; bottom:24px; right:24px; z-index:900; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.wa-tip { background:var(--neutral); color:white; font-size:12.5px; padding:7px 12px; border-radius:7px; white-space:nowrap; opacity:0; transform:translateX(6px); transition:all 0.3s; pointer-events:none; }
.wa-btn { width:54px; height:54px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 4px 18px rgba(37,211,102,0.45); text-decoration:none; transition:transform 0.3s; animation:waPulse 3s infinite; }
@keyframes waPulse { 0%,100%{box-shadow:0 4px 18px rgba(37,211,102,0.45)} 50%{box-shadow:0 4px 26px rgba(37,211,102,0.7),0 0 0 7px rgba(37,211,102,0.1)} }
.wa-float:hover .wa-tip { opacity:1; transform:translateX(0); }
.wa-float:hover .wa-btn { transform:scale(1.08); }

/* ===========================
   RESPONSIVE — MOBILE FIRST
=========================== */
@media (max-width:768px) {
  /* Navbar */
  .nav-desktop { display:none; }
  .hamburger { display:flex; }

  /* Hero */
  .hero { padding:36px 5% 40px; }
  .hero-inner { grid-template-columns:1fr; gap:0; }
  .hero-visual { display:none; }
  .hero h1 { font-size:28px; }
  .hero-sub { font-size:15px; }
  .hero-badge { font-size:12px; }
  .hero-btns { flex-direction:column; }
  .hero-btns .btn-primary, .hero-btns .btn-secondary { width:100%; justify-content:center; }

  /* Sections */
  .section { padding:48px 5%; }
  .section-title { font-size:22px; }

  /* Steps */
  .steps-grid { grid-template-columns:1fr; gap:0; }
  .steps-connector { display:none; }
  .step-card { padding:20px 12px; display:flex; align-items:flex-start; gap:16px; text-align:left; border-bottom:1px solid var(--border); }
  .step-card:last-child { border-bottom:none; }
  .step-num { margin:0; flex-shrink:0; width:44px; height:44px; font-size:18px; }
  .step-card h3 { font-size:16px; margin-bottom:5px; }
  .step-card p { font-size:13.5px; }

  /* Why */
  .why-grid { grid-template-columns:1fr; gap:14px; }
  .why-card { padding:22px 18px; }

  /* Mission */
  .mission-section { padding:56px 5%; }
  .mission-grid { grid-template-columns:1fr; gap:36px; }
  .mission-headline { font-size:26px; }
  .mission-stats { gap:24px; }
  .ms-num { font-size:28px; }

  /* Services */
  .svc-grid { grid-template-columns:1fr; }

  /* Testimonials */
  .testi-grid { grid-template-columns:1fr; gap:14px; }

  /* CTA */
  .cta-sec { padding:52px 5%; }
  .cta-btns { flex-direction:column; align-items:center; }
  .btn-white, .btn-outline-w { width:100%; max-width:320px; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:28px; }

  /* Price page */
  .price-body { padding:32px 5%; }
  .pr-name { font-size:13.5px; }
  .pr-price { font-size:16px; }

  /* Modals */
  .modal, .h-modal { border-radius:18px 18px 0 0; max-height:94vh; }
  .svc-sel-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .fr2 { grid-template-columns:1fr; gap:0; }
  .modal-body { padding:16px 18px 24px; }
  .modal-head, .modal-foot { padding:14px 18px; }
  .modal-steps-bar { padding:14px 18px 0; }

  /* WA */
  .wa-float { bottom:16px; right:16px; }
  .wa-btn { width:52px; height:52px; font-size:23px; box-shadow:0 4px 16px rgba(37,211,102,0.45); }
}

@media (max-width:400px) {
  .hero h1 { font-size:23px; }
  .hero-pills { gap:5px; }
  .pill { font-size:11px; padding:5px 9px; }
  .svc-sel-grid { grid-template-columns:1fr; }
  .hero-btns { flex-direction:column; }
  .btn-primary, .btn-secondary { flex:1; justify-content:center; font-size:13.5px; padding:12px 14px; }
}


/* ===== PRICING PAGE DETAILED STYLES ===== */
:root {
    --green: #199E73;
    --green-dark: #017A55;
    --green-deep: #014d36;
    --yellow: #F4D35E;
    --yellow-dark: #e0b800;
    --white: #ffffff;
    --off-white: #f8faf9;
    --gray-light: #eef2f0;
    --gray: #a0b0a8;
    --text: #1a2e25;
    --text-light: #4a6358;
    --red: #e05252;
    --blue: #3a7bd5;
    --shadow: 0 4px 24px rgba(1,122,85,0.10);
    --shadow-lg: 0 8px 40px rgba(1,122,85,0.15);
    --radius: 16px;
    --radius-sm: 10px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* body reset removed - handled by website */
  .price-pg-body { 'Hind Siliguri', sans-serif;
    background: var(--off-white);
    color: var(--text);
    line-height: 1.6;
  }

  /* PRICING HERO - not used in embedded version */
  .p-hero {
    background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-dark) 50%, var(--green) 100%);
    padding: 48px 24px 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .p-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 240px; height: 240px;
    background: rgba(244,211,94,0.12);
    border-radius: 50%;
  }
  .p-hero::after {
    content: '';
    position: absolute;
    bottom: -40px; left: -40px;
    width: 180px; height: 180px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
  }
  .p-hero-badge {
    display: inline-block;
    background: var(--yellow);
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
  }
  .p-hero h1 {
    font-family: 'Tiro Bangla', serif;
    font-size: clamp(26px, 5vw, 42px);
    color: var(--white);
    margin-bottom: 10px;
    line-height: 1.3;
  }
  .p-hero-sub {
    color: rgba(255,255,255,0.80);
    font-size: 16px;
    margin-bottom: 28px;
  }
  .p-hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .p-hbadge {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
  }
  .p-hbadge span { margin-right: 5px; }

  /* STICKY NAV */
  .sticky-nav {
    position: sticky;
    top: 68px;
    z-index: 100;
    background: var(--white);
    border-bottom: 2px solid var(--gray-light);
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  }
  .nav-inner {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 960px;
    margin: 0 auto;
  }
  .nav-inner::-webkit-scrollbar { display: none; }
  .nav-btn {
    flex-shrink: 0;
    padding: 14px 22px;
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .nav-btn:hover { color: var(--green); }
  .nav-btn.active {
    color: var(--green-dark);
    border-bottom-color: var(--green-dark);
  }

  /* MAIN CONTENT */
  .price-detail-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 16px 60px;
  }

  /* IMPORTANT NOTICE */
  .pd-notice-box {
    background: #fffbe6;
    border: 1.5px solid var(--yellow-dark);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 32px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .pd-notice-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
  .pd-notice-text { font-size: 14px; color: #5a4400; line-height: 1.6; }
  .pd-notice-text strong { color: #3a2c00; }

  /* SECTION */
  .pd-section { margin-bottom: 48px; }
  .pd-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--gray-light);
  }
  .pd-section-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(1,122,85,0.25);
  }
  .pd-section-title-area h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--green-deep);
  }
  .pd-section-title-area p {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 2px;
  }

  /* SUB SECTION */
  .subsection { margin-bottom: 28px; }
  .subsection-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    background: var(--gray-light);
    padding: 8px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 4px solid var(--green);
  }

  /* SERVICE CARD */
  .service-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1.5px solid var(--gray-light);
    transition: box-shadow 0.2s, transform 0.2s;
  }
  .service-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    gap: 12px;
  }
  .card-header-left { display: flex; align-items: center; gap: 12px; flex: 1; }
  .card-emoji { font-size: 24px; flex-shrink: 0; }
  .card-title-area { flex: 1; }
  .card-title { font-size: 16px; font-weight: 700; color: var(--text); }
  .card-subtitle { font-size: 12px; color: var(--text-light); margin-top: 2px; }

  .card-price-badge {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .card-price-badge.yellow {
    background: linear-gradient(135deg, var(--yellow-dark), #c99400);
    color: var(--green-deep);
  }
  .card-price-badge.blue {
    background: linear-gradient(135deg, #3a7bd5, #1a55a0);
  }

  /* EXPAND CHEVRON */
  .chevron {
    font-size: 12px;
    color: var(--gray);
    transition: transform 0.3s;
    flex-shrink: 0;
  }
  .service-card.open .chevron { transform: rotate(180deg); }

  /* CARD BODY */
  .card-body {
    display: none;
    padding: 0 20px 20px;
    border-top: 1.5px solid var(--gray-light);
    animation: fadeIn 0.25s ease;
  }
  .service-card.open .card-body { display: block; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* WHAT IS THIS explanation */
  .explanation {
    background: linear-gradient(135deg, #f0faf6, #e8f5f0);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0;
    border-left: 4px solid var(--green);
  }
  .explanation h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .explanation p { font-size: 13px; color: var(--text-light); line-height: 1.7; }

  /* CHECKLIST */
  .checklist { list-style: none; margin: 10px 0; }
  .checklist li {
    font-size: 13px;
    color: var(--text-light);
    padding: 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .checklist li::before {
    content: '✓';
    color: var(--green);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .checklist.cross li::before {
    content: '✗';
    color: var(--red);
  }

  /* PRICE TABLE */
  .price-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 13px;
  }
  .price-table th {
    background: var(--green-deep);
    color: white;
    padding: 9px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
  }
  .price-table th:first-child { border-radius: 8px 0 0 0; }
  .price-table th:last-child { border-radius: 0 8px 0 0; }
  .price-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--gray-light);
    color: var(--text);
  }
  .price-table tr:last-child td { border-bottom: none; }
  .price-table tr:nth-child(even) td { background: var(--gray-light); }
  .price-amount {
    font-weight: 700;
    color: var(--green-dark);
    font-size: 14px;
  }
  .price-note {
    font-size: 11px;
    color: var(--gray);
    margin-top: 2px;
  }

  /* WHEN NEEDED */
  .when-tag {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    margin: 8px 0 4px;
    font-weight: 600;
  }
  .time-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #e8f5f0;
    color: var(--green-dark);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    margin-left: 6px;
    font-weight: 600;
  }

  /* PARTS POLICY */
  .parts-policy {
    background: #fff8e1;
    border: 1.5px solid #ffca28;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 12px;
    font-size: 13px;
    color: #4a3800;
  }
  .parts-policy strong { color: #2a2000; }

  /* GRID FOR SMALL CARDS */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
  }
  .mini-card {
    background: var(--white);
    border: 1.5px solid var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    transition: box-shadow 0.2s;
  }
  .mini-card:hover { box-shadow: var(--shadow); }
  .mini-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
  }
  .mini-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
  .mini-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--green-dark);
    white-space: nowrap;
  }
  .mini-desc { font-size: 12px; color: var(--text-light); line-height: 1.5; }
  .mini-time { font-size: 11px; color: var(--gray); margin-top: 5px; }

  /* PACKAGE SECTION */
  .package-card {
    background: linear-gradient(135deg, var(--green-deep), var(--green-dark));
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 14px;
    color: white;
    position: relative;
    overflow: hidden;
  }
  .package-card::after {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 100px; height: 100px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
  }
  .package-name { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
  .package-includes { font-size: 13px; opacity: 0.85; margin-bottom: 12px; }
  .package-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .package-saving {
    background: var(--yellow);
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
  }
  .package-price-area { text-align: right; }
  .package-old { font-size: 13px; opacity: 0.6; text-decoration: line-through; }
  .package-new { font-size: 22px; font-weight: 700; }

  /* COMPARISON TABLE */
  .compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
  }
  .compare-table th {
    padding: 12px 14px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
  }
  .compare-table th:first-child { text-align: left; background: var(--gray-light); }
  .compare-table th.col-local { background: #fce8e8; color: #c00; }
  .compare-table th.col-brand { background: #e8eeff; color: #1a55a0; }
  .compare-table th.col-hl { background: var(--green-dark); color: white; }
  .compare-table td {
    padding: 10px 14px;
    border-top: 1px solid var(--gray-light);
    text-align: center;
  }
  .compare-table td:first-child { text-align: left; font-weight: 600; }
  .compare-table tr:hover td { background: #f8fdf9; }
  .price-range { font-size: 12px; }
  .hl-price { font-weight: 700; color: var(--green-dark); }
  .check { color: var(--green); font-weight: 700; font-size: 16px; }
  .cross-mark { color: var(--red); font-size: 16px; }
  .partial { color: var(--yellow-dark); font-size: 16px; }

  /* FOOTER */
  .p-footer {
    background: var(--green-deep);
    color: rgba(255,255,255,0.8);
    text-align: center;
    padding: 32px 16px;
    margin-top: 20px;
  }
  .p-footer h3 { color: white; font-size: 20px; margin-bottom: 8px; }
  .p-footer-contact {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0;
  }
  .p-footer-btn {
    background: var(--yellow);
    color: var(--green-deep);
    font-family: 'Hind Siliguri', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s;
  }
  .p-footer-btn:hover { transform: scale(1.04); }
  .p-footer-note { font-size: 12px; opacity: 0.6; margin-top: 10px; }

  /* TAB CONTENT */
  .pd-tab-content { display: none; }
  .pd-tab-content.active { display: block; }

  /* RESPONSIVE */
  @media (max-width: 600px) {
    .card-header { padding: 14px 16px; }
    .card-body { padding: 0 16px 16px; }
    .price-table { font-size: 13px; }
    .price-table td, .price-table th { padding: 9px 10px; }
    .card-grid { grid-template-columns: 1fr; }
    .pd-section-title-area h2 { font-size: 17px; }
  }

/* ===== বিশেষজ্ঞ পরামর্শ SECTION ===== */
.expert-section { padding:72px 5%; background:var(--bg); }
.expert-tabs-wrap {
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px;
}
.expert-tab-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:white; border:1.5px solid var(--border);
  border-radius:24px; padding:9px 18px;
  font-size:13.5px; font-weight:600; color:var(--text2);
  cursor:pointer; transition:all 0.25s; font-family:'Hind Siliguri',sans-serif;
}
.expert-tab-btn:hover { border-color:var(--primary); color:var(--dark-teal); background:var(--pale); }
.expert-tab-btn.active { 
  background:var(--primary); color:white; border-color:var(--primary);
  box-shadow:0 4px 14px rgba(25,158,115,0.3);
}
.expert-content { display:none; }
.expert-content.active { display:block; }
.expert-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  max-width:900px; margin:0 auto;
}
.expert-card {
  background:white; border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; transition:all 0.3s; cursor:pointer;
}
.expert-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--soft-teal); }
.expert-card-header {
  display:flex; align-items:center; gap:12px;
  padding:18px 20px; background:var(--bg-soft);
  border-bottom:1px solid var(--border);
}
.expert-card-icon {
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--dark-teal));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.expert-card-title { font-size:15px; font-weight:700; color:var(--neutral); line-height:1.3; }
.expert-card-tag { font-size:11.5px; color:var(--text3); margin-top:2px; font-weight:500; }
.expert-card-body { padding:16px 20px; }
.expert-card-body p { font-size:14px; color:var(--text2); line-height:1.85; }
.expert-tip {
  display:flex; align-items:flex-start; gap:10px; margin-top:12px;
  padding:10px 12px; background:var(--pale); border-radius:8px;
  border-left:3px solid var(--primary);
}
.expert-tip-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.expert-tip-text { font-size:13px; color:var(--text2); line-height:1.7; font-weight:500; }
.expert-warning {
  display:flex; align-items:flex-start; gap:10px; margin-top:12px;
  padding:10px 12px; background:#fff8e1; border-radius:8px;
  border-left:3px solid #f0b800;
}
.expert-warning-text { font-size:13px; color:#5a3e00; line-height:1.7; font-weight:500; }
.expert-cta-box {
  max-width:600px; margin:40px auto 0;
  background:linear-gradient(135deg, var(--dark-teal), var(--primary));
  border-radius:20px; padding:32px; text-align:center;
  position:relative; overflow:hidden;
}
.expert-cta-box::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:160px; height:160px; border-radius:50%;
  background:rgba(255,255,255,0.05); pointer-events:none;
}
.expert-cta-box h3 {
  font-family:'Noto Serif Bengali',serif;
  font-size:20px; font-weight:800; color:white; margin-bottom:8px;
}
.expert-cta-box p { font-size:14px; color:rgba(255,255,255,0.8); margin-bottom:20px; line-height:1.7; }
@media(max-width:768px){
  .expert-grid { grid-template-columns:1fr; }
}
@media(max-width:640px){
  .expert-grid { grid-template-columns:1fr; gap:12px; }
  .expert-tabs-wrap { gap:7px; }
  .expert-tab-btn { font-size:12.5px; padding:8px 13px; }
  .expert-cta-box { padding:24px 18px; }
  .expert-card-header { padding:14px 16px; }
  .expert-card-body { padding:14px 16px; }
  .expert-section { padding:52px 5%; }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}
.hero-content { animation:fadeInUp 0.6s ease both; }
.trust-card { animation:fadeInUp 0.7s ease 0.15s both; }

/* ===== IMPROVED SCROLLBAR ===== */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-soft); }
::-webkit-scrollbar-thumb { background:var(--soft-teal); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* ===== ACCESSIBILITY ===== */
button:focus-visible, a:focus-visible { 
  outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;
}

/* Helper outline button */
.btn-helper-outline {
  background:transparent; color:var(--text2);
  border:1.5px solid var(--border); padding:9px 22px; border-radius:var(--r2);
  font-size:14px; font-weight:600; font-family:'Hind Siliguri',sans-serif;
  cursor:pointer; transition:all 0.25s; display:inline-flex; align-items:center; gap:7px;
}
.btn-helper-outline:hover { border-color:var(--primary); color:var(--dark-teal); background:var(--pale); }

/* ===== DARK / LIGHT MODE ===== */
body.dark-mode {
  --primary:   #1eb87f;
  --dark-teal: #17a06e;
  --soft-teal: #5ecfa4;
  --yellow:    #F4D35E;
  --neutral:   #f0f0f0;
  --bg:        #0f1a14;
  --bg-soft:   #141f19;
  --pale:      #1a2e22;
  --border:    #253d2e;
  --text:      #e8f0ec;
  --text2:     #a8c4b4;
  --text3:     #6a9a80;
  --text4:     #4a7060;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
  --shadow:    0 4px 18px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
}
body.dark-mode {
  background: var(--bg) !important;
  color: var(--text) !important;
}
/* THEME TOGGLE BUTTON */
.theme-toggle {
  width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all 0.25s;
  flex-shrink: 0; margin-left: auto;
}
.theme-toggle:hover { 
  background: var(--pale); 
  border-color: var(--primary);
  transform: rotate(20deg);
}

/* ===== FAQ SECTION ===== */
.faq-section { padding:68px 5%; background:var(--bg-soft); }
.faq-wrap { max-width:760px; margin:0 auto; }
.faq-item {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--r); margin-bottom:10px;
  overflow:hidden; transition:box-shadow 0.3s;
}
.faq-item:hover { box-shadow:var(--shadow); }
.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; cursor:pointer; gap:12px;
  user-select:none;
}
.faq-q-text {
  font-size:15px; font-weight:700; color:var(--neutral);
  line-height:1.45; flex:1;
}
.faq-icon {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--pale); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--primary); font-weight:700;
  transition:all 0.3s;
}
.faq-item.open .faq-icon {
  background:var(--primary); color:white; border-color:var(--primary);
  transform:rotate(45deg);
}
.faq-answer {
  display:none; padding:0 22px 18px;
  font-size:14.5px; color:var(--text2); line-height:1.9;
  border-top:1px solid var(--border);
}
.faq-answer.open { display:block; }
.faq-answer strong { color:var(--dark-teal); }
.faq-item.open .faq-question { color:var(--dark-teal); }
.faq-item.open .faq-q-text { color:var(--dark-teal); }

/* dark mode */
@media(max-width:640px){
  .faq-question { padding:15px 16px; }
  .faq-q-text { font-size:14px; }
  .faq-answer { padding:0 16px 16px; font-size:14px; }
  .faq-section { padding:52px 5%; }
}

/* ===== NAVBAR DROPDOWN ===== */
.nav-more {
  position: relative;
}
.nav-more-btn {
  text-decoration: none; color: var(--text2);
  font-size: 13.5px; font-weight: 500;
  padding: 8px 11px; border-radius: 8px;
  transition: all 0.2s; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  background: none; border: none;
  font-family: 'Hind Siliguri', sans-serif;
  letter-spacing: 0.1px;
}
.nav-more-btn:hover { background: var(--pale); color: var(--dark-teal); }
.nav-more-btn::after {
  content: '▾'; font-size: 10px; opacity: 0.6;
  transition: transform 0.2s;
}
.nav-more:hover .nav-more-btn::after { transform: rotate(180deg); }
.nav-dropdown {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px;
  box-shadow: var(--shadow-lg); min-width: 180px;
  z-index: 300;
}
.nav-more:hover .nav-dropdown { display: block; }
.nav-dropdown a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--text2);
  text-decoration: none; cursor: pointer; transition: background 0.15s;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--pale); color: var(--dark-teal); }

/* ===== REVIEW CAROUSEL ===== */
.review-carousel-wrap {
  position: relative; overflow: hidden; margin: 0 -5%;
  padding: 0 5% 20px;
}
.review-track {
  display: flex; gap: 20px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.review-track .testi-card {
  flex: 0 0 calc(33.333% - 14px);
  min-width: calc(33.333% - 14px);
}
/* Carousel controls */
.carousel-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 28px;
}
.carousel-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--border); background: white;
  cursor: pointer; font-size: 16px; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.carousel-btn:hover {
  background: var(--primary); border-color: var(--primary);
  color: white; transform: scale(1.08);
}
.carousel-dots {
  display: flex; gap: 7px; align-items: center;
}
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); cursor: pointer;
  transition: all 0.3s; border: none; padding: 0;
}
.carousel-dot.active {
  background: var(--primary); width: 22px; border-radius: 4px;
}

/* Mobile: 1 card, Tablet: 2 cards */
@media(max-width: 900px) {
  .review-track .testi-card {
    flex: 0 0 calc(50% - 10px);
    min-width: calc(50% - 10px);
  }
}
@media(max-width: 600px) {
  .review-track .testi-card {
    flex: 0 0 calc(100% - 0px);
    min-width: calc(100% - 0px);
  }
  .review-carousel-wrap { margin: 0 -5%; padding: 0 5% 16px; }
}

/* Dark mode logo fix — ensure logo visible on dark navbar */
/* Light mode — no filter needed */
body:not(.dark-mode) .logo img {
  filter: none;
}

/* ===== THEME-AWARE SECTION BACKGROUNDS ===== */
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); }
.navbar { background: var(--nav-bg) !important; }
.mobile-menu { background: var(--mobile-menu-bg) !important; }
.why-card, .testi-card, .svc-card, .trust-card, 
.faq-item, .ept-card, .service-card, .mini-card,
.step-card, .s-pill-card, .sub-row { 
  background: var(--card-bg); 
}
/* .mc stays dark always — mission section is always dark bg */
.mc {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.modal, .h-modal { background: var(--modal-bg) !important; }
input, select, textarea { 
  background: var(--input-bg) !important; 
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.price-table th { background: var(--pale); color: var(--text); }
.price-table td { color: var(--text2); }
.price-table tr:nth-child(even) { background: var(--bg-soft); }
.price-table { border-color: var(--border); }
.sticky-nav, .ept-tabs { 
  background: var(--bg) !important; 
  border-bottom-color: var(--border) !important;
}
.nav-btn { color: var(--text2); }
.card-header { background: var(--bg-soft); border-bottom-color: var(--border); }
.ept-card-header { background: var(--pale); }
.ept-tip { background: var(--pale); }
.pd-notice-box { background: var(--pale); border-color: var(--border); }
.theme-toggle { 
  background: var(--bg-soft); 
  border-color: var(--border); 
  color: var(--text);
}
.btn-secondary { 
  background: var(--card-bg); 
  color: var(--dark-teal); 
  border-color: var(--primary);
}
.btn-helper-outline {
  background: transparent;
  color: var(--text2);
  border-color: var(--border);
}
.nav-dropdown { background: var(--card-bg); border-color: var(--border); }
.nav-dropdown a { color: var(--text2); }
.hero { background: var(--hero-gradient) !important; }
.section-alt { background: var(--bg-soft) !important; }
footer { background: #1A1A1A; } /* footer always dark — intentional */

/* ===== HELPER MODAL FORM ===== */
.h-modal {
  background: var(--modal-bg);
  border-radius: 20px 20px 0 0;
  max-height: 92vh;
  overflow-y: auto;
  width: 100%;
}
.b-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.b-item:last-child { border-bottom: none; }
.b-ic { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.b-txt { font-size: 14px; color: var(--text2); line-height: 1.6; }
.b-txt strong { color: var(--neutral); font-size: 14.5px; display: block; margin-bottom: 2px; }

/* ===== EXPERT PAGE STYLES ===== */

.expert-pg-hero {
  background: linear-gradient(150deg, #0A1E16 0%, #013D2A 55%, #0A1E16 100%);
  padding: 72px 5% 64px; text-align: center; position: relative; overflow: hidden;
}
.expert-pg-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(25,158,115,0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(165,214,194,0.1) 0%, transparent 45%);
  pointer-events: none;
}
.expert-pg-hero h1 {
  font-family: 'Noto Serif Bengali', serif;
  font-size: clamp(28px, 5vw, 48px); font-weight: 900; color: white;
  line-height: 1.25; position: relative; z-index: 2; margin-bottom: 12px;
}
.expert-pg-hero h1 span { color: var(--soft-teal); }
.expert-pg-tagline { font-size: 15.5px; color: rgba(255,255,255,0.6); font-style: italic; position: relative; z-index: 2; max-width: 560px; margin: 0 auto; line-height: 1.7; }

.expert-pg-body {
  max-width: 960px; margin: 0 auto; padding: 52px 5% 80px;
}

/* TABS */
.ept-tabs {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 40px; padding: 0 5%;
  position: sticky; top: 68px; z-index: 50;
  background: var(--bg-soft); padding-top: 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.ept-tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: white; border: 1.5px solid var(--border);
  border-radius: 24px; padding: 9px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all 0.22s; font-family: 'Hind Siliguri', sans-serif;
  box-shadow: var(--shadow-sm);
}
.ept-tab-btn:hover { border-color: var(--primary); color: var(--dark-teal); background: var(--pale); }
.ept-tab-btn.active {
  background: var(--primary); color: white; border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(25,158,115,0.3);
}
.ept-content { display: none; }
.ept-content.active { display: block; }

/* EXPERT CARDS GRID */
.ept-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.ept-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; transition: all 0.3s;
}
.ept-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--soft-teal); }
.ept-card-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.ept-card-icon {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--dark-teal));
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.ept-card-title { font-size: 15px; font-weight: 700; color: var(--neutral); line-height: 1.35; }
.ept-card-tag {
  display: inline-block; font-size: 11px; color: var(--dark-teal); font-weight: 600;
  background: var(--pale); border-radius: 10px; padding: 2px 8px; margin-top: 4px;
}
.ept-card-body { padding: 18px 22px; }
.ept-card-body p { font-size: 14.5px; color: var(--text2); line-height: 1.9; }
.ept-tip {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 11px 13px;
  background: var(--pale); border-radius: 9px;
  border-left: 3px solid var(--primary);
}
.ept-tip-ico { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.ept-tip-txt { font-size: 13.5px; color: var(--text2); line-height: 1.75; font-weight: 500; }
.ept-warn {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 11px 13px;
  background: #fff8e1; border-radius: 9px;
  border-left: 3px solid #f0b800;
}
.ept-warn-txt { font-size: 13.5px; color: #5a3e00; line-height: 1.75; font-weight: 500; }

/* CTA BOX */
.ept-cta {
  margin-top: 48px; padding: 36px;
  background: linear-gradient(135deg, var(--dark-teal), var(--primary));
  border-radius: 20px; text-align: center; position: relative; overflow: hidden;
}
.ept-cta::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.ept-cta h3 {
  font-family: 'Noto Serif Bengali', serif;
  font-size: 22px; font-weight: 800; color: white; margin-bottom: 10px;
}
.ept-cta p { font-size: 14.5px; color: rgba(255,255,255,0.8); margin-bottom: 22px; line-height: 1.7; }
.ept-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media(max-width: 768px) { .ept-grid { grid-template-columns: 1fr; } }
@media(max-width: 640px) {
  .expert-pg-hero { padding: 48px 5% 44px; }
  .expert-pg-hero h1 { font-size: 26px; }
  .ept-tabs { gap: 7px; top: 62px; }
  .ept-tab-btn { font-size: 12.5px; padding: 8px 13px; }
  .ept-card-header { padding: 14px 16px; }
  .ept-card-body { padding: 14px 16px; }
  .ept-cta { padding: 24px 18px; }
  .ept-cta-btns { flex-direction: column; align-items: center; }
}

/* ===== ORDER FLOW MODAL STYLES ===== */

  #hlFlowOrder, #hlFlowHelper { font-family:'Hind Siliguri',sans-serif; }
  #hlFlowOrder.open { align-items:center; }
  .hl-flow-modal {
    width:min(720px, calc(100% - 32px));
    max-width:720px;
    max-height:calc(100dvh - 24px);
    border-radius:24px;
    background:var(--modal-bg,#fff);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  @supports not (height: 100dvh) {
    .hl-flow-modal { max-height:calc(100vh - 24px); }
  }
  .hl-flow-head { padding:18px 22px; border-bottom:1px solid var(--border,#D1EDE2); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; }
  .hl-flow-title { font-family:'Noto Serif Bengali',serif; font-size:20px; font-weight:800; color:var(--neutral,#222); }
  .hl-flow-sub { font-size:12.5px; color:var(--text3,#7A9A8A); margin-top:2px; }
  .hl-flow-body {
    padding:18px 22px 18px;
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .hl-progress { display:flex; align-items:center; gap:8px; margin-bottom:18px; }
  .hl-dot { width:30px; height:30px; border-radius:50%; background:var(--border,#D1EDE2); color:var(--text3,#7A9A8A); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
  .hl-dot.active { background:var(--primary,#199E73); color:white; box-shadow:0 0 0 4px rgba(25,158,115,.14); }
  .hl-dot.done { background:var(--dark-teal,#017A55); color:white; }
  .hl-line { flex:1; height:2px; background:var(--border,#D1EDE2); border-radius:2px; }
  .hl-line.done { background:var(--soft-teal,#A5D6C2); }
  .hl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .hl-card { border:2px solid var(--border,#D1EDE2); background:var(--card-bg,#fff); border-radius:16px; padding:16px 14px; cursor:pointer; transition:.2s; position:relative; min-height:118px; }
  .hl-card:hover { transform:translateY(-2px); border-color:var(--soft-teal,#A5D6C2); box-shadow:var(--shadow,0 4px 18px rgba(0,0,0,.08)); }
  .hl-card.sel { border-color:var(--primary,#199E73); background:var(--pale,#E8F7F1); }
  .hl-card.sel:after { content:'✓'; position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--primary,#199E73); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
  .hl-emoji { font-size:30px; margin-bottom:8px; display:block; }
  .hl-card-title { font-size:14.5px; font-weight:800; color:var(--neutral,#222); line-height:1.35; }
  .hl-card-desc { font-size:12px; color:var(--text3,#7A9A8A); margin-top:4px; line-height:1.45; }
  .hl-variation-list { display:flex; flex-direction:column; gap:10px; }
  .hl-var { border:2px solid var(--border,#D1EDE2); background:var(--card-bg,#fff); border-radius:15px; padding:14px; cursor:pointer; transition:.2s; }
  .hl-var:hover { border-color:var(--soft-teal,#A5D6C2); background:var(--bg-soft,#F5FBF8); }
  .hl-var.sel { border-color:var(--primary,#199E73); background:var(--pale,#E8F7F1); }
  .hl-var-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .hl-var-left { display:flex; align-items:flex-start; gap:10px; min-width:0; }
  .hl-var-icon { font-size:22px; flex-shrink:0; }
  .hl-var-name { font-size:14.5px; font-weight:800; color:var(--neutral,#222); }
  .hl-var-desc { font-size:12.5px; color:var(--text3,#7A9A8A); margin-top:2px; line-height:1.5; }
  .hl-var-price { font-family:'Noto Serif Bengali',serif; font-size:17px; color:var(--dark-teal,#017A55); font-weight:900; white-space:nowrap; }
  .hl-help { margin-top:10px; background:rgba(25,158,115,.06); border-left:3px solid var(--soft-teal,#A5D6C2); border-radius:8px; padding:8px 10px; font-size:12.5px; color:var(--text2,#445545); line-height:1.65; }
  .hl-summary { background:var(--pale,#E8F7F1); border:1px solid var(--border,#D1EDE2); border-radius:14px; padding:14px; margin-bottom:14px; }
  .hl-row { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--text2,#445545); margin:4px 0; }
  .hl-row strong { color:var(--neutral,#222); }
  .hl-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .hl-field { margin-bottom:12px; }
  .hl-label { display:block; font-size:12.5px; font-weight:800; color:var(--neutral,#222); margin-bottom:5px; }
  .hl-label span { color:#dc2626; }
  .hl-input, .hl-select, .hl-textarea { width:100%; border:1.5px solid var(--border,#D1EDE2); border-radius:10px; padding:11px 12px; font-size:14px; font-family:'Hind Siliguri',sans-serif; outline:none; background:var(--input-bg,#fff); color:var(--text,#222); }
  .hl-input:focus, .hl-select:focus, .hl-textarea:focus { border-color:var(--primary,#199E73); box-shadow:0 0 0 3px rgba(25,158,115,.1); }
  .hl-actions {
    display:flex;
    gap:10px;
    padding:14px 22px calc(16px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border,#D1EDE2);
    background:var(--modal-bg,#fff);
    flex-shrink:0;
    position:sticky;
    bottom:0;
    z-index:5;
    box-shadow:0 -8px 20px rgba(0,0,0,0.06);
  }
  .hl-actions button { flex:1; justify-content:center; min-height:46px; }
  .hl-mini-link { margin-top:10px; font-size:12.5px; color:var(--text3,#7A9A8A); text-align:center; }
  .hl-chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .hl-chip { font-size:12px; padding:5px 9px; border-radius:999px; background:var(--pale,#E8F7F1); color:var(--dark-teal,#017A55); border:1px solid var(--border,#D1EDE2); }
  @media(max-width:700px){
    #hlFlowOrder.open { align-items:flex-end; }
    .hl-flow-modal {
      width:100%;
      max-height:calc(100dvh - 8px);
      border-radius:18px 18px 0 0;
    }
    .hl-grid{grid-template-columns:1fr;}
    .hl-form-grid{grid-template-columns:1fr; gap:0;}
    .hl-flow-body{padding:14px 16px 16px; max-height:none;}
    .hl-actions{padding:12px 16px calc(14px + env(safe-area-inset-bottom)); gap:8px;}
    .hl-actions button{min-height:48px; font-size:13px; padding:11px 10px;}
    .hl-flow-head{padding:14px 16px;}
    .hl-card{min-height:auto;}
    .hl-textarea{min-height:84px;}
  }

/* ===== CALL FLOAT BUTTON (WhatsApp-এর পাশে) ===== */
.call-btn { background:var(--primary); box-shadow:0 4px 18px rgba(25,158,115,0.45); animation:none; }
.call-btn:hover { transform:scale(1.08); }



/* ============================================================
   ✨ UPGRADES: Animations, WhatsApp, Sticky Bar, Footer Logo
   ============================================================ */

/* ---- Footer logo (white version, proper size) ---- */
.footer-logo-img { height:46px; width:auto; object-fit:contain; }

/* ---- Scroll reveal animation ---- */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
  will-change:opacity, transform;
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
}
/* stagger children */
.reveal-stagger > * {
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.reveal-stagger.visible > * { opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *:nth-child(1){ transition-delay:0.05s; }
.reveal-stagger.visible > *:nth-child(2){ transition-delay:0.15s; }
.reveal-stagger.visible > *:nth-child(3){ transition-delay:0.25s; }
.reveal-stagger.visible > *:nth-child(4){ transition-delay:0.35s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- Card hover polish ---- */
.svc-card, .why-card, .step-card, .mc, .testi-card {
  transition:transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease;
}
.svc-card:hover, .why-card:hover, .step-card:hover, .mc:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
}

/* ---- WhatsApp float — bigger + label ---- */
.wa-float { gap:12px; }
.wa-btn { width:60px; height:60px; font-size:27px; }
@media (max-width:768px){ .wa-btn { width:56px; height:56px; font-size:25px; } }

/* ---- Hero WhatsApp button ---- */
.btn-whatsapp {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#25D366; color:#fff; border:none; cursor:pointer;
  font-family:'Hind Siliguri',sans-serif; font-weight:700; font-size:15px;
  padding:13px 22px; border-radius:12px;
  box-shadow:0 4px 16px rgba(37,211,102,0.35);
  transition:transform 0.2s, box-shadow 0.2s;
  text-decoration:none; width:100%;
}
.btn-whatsapp:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(37,211,102,0.5); }
.hero-wa-row { margin-top:10px; }

/* ---- Service card WhatsApp quick button ---- */
.svc-wa {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(37,211,102,0.12); color:#128C4B;
  font-family:'Hind Siliguri',sans-serif; font-weight:700; font-size:12.5px;
  padding:7px 13px; border-radius:9px; border:none; cursor:pointer;
  transition:background 0.2s, transform 0.2s; text-decoration:none;
  margin-top:10px;
}
.svc-wa:hover { background:rgba(37,211,102,0.22); transform:translateY(-1px); }
body.dark-mode .svc-wa { background:rgba(37,211,102,0.18); color:#4ade80; }
.svc-card { flex-wrap:wrap; }
.svc-card-actions { width:100%; display:flex; gap:8px; }

/* ---- Sticky bottom action bar (mobile) ---- */
.sticky-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:850;
  display:none;
  background:var(--card-bg);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(0,0,0,0.1);
  padding:10px 14px; gap:10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.sticky-bar button, .sticky-bar a {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Hind Siliguri',sans-serif; font-weight:700; font-size:14.5px;
  padding:13px 8px; border-radius:11px; border:none; cursor:pointer;
  text-decoration:none; transition:transform 0.15s;
}
.sticky-bar button:active, .sticky-bar a:active { transform:scale(0.97); }
.sticky-bar .sb-order { background:var(--primary); color:#fff; }
.sticky-bar .sb-wa { background:#25D366; color:#fff; }
@media (max-width:768px){
  .sticky-bar { display:flex; }
  .wa-float { bottom:78px; }   /* lift float above sticky bar */
  body { padding-bottom:66px; } /* room so footer isn't hidden */
}

/* ---- Count-up number pop ---- */
.ms-num, .stat-num { transition:transform 0.3s; }

/* ---- Confetti canvas ---- */
#confetti-canvas {
  position:fixed; inset:0; pointer-events:none; z-index:3000; display:none;
}

/* ---- Why-cards: compact horizontal layout on mobile (fixes oversized cards) ---- */
@media (max-width:768px){
  .why-card {
    padding:18px 18px;
    display:flex; align-items:flex-start; gap:14px; text-align:left;
  }
  .why-icon { font-size:30px; margin-bottom:0; flex-shrink:0; margin-top:2px; }
  .why-card h3 { font-size:16px; margin-bottom:5px; }
  .why-card p { font-size:13.5px; line-height:1.6; }
}

/* ============================================================
   💎 PREMIUM PASS: depth, gradients, refined components
   ============================================================ */

/* ---- Richer layered shadows with brand tint ---- */
:root {
  --shadow-sm: 0 1px 2px rgba(1,122,85,0.05), 0 2px 6px rgba(0,0,0,0.05);
  --shadow:    0 2px 6px rgba(1,122,85,0.06), 0 10px 28px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(1,122,85,0.08), 0 24px 56px rgba(0,0,0,0.14);
}
body.dark-mode {
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.35);
  --shadow:    0 4px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
}

/* ---- Hero: layered gradient + soft brand blobs ---- */
.hero {
  background:
    radial-gradient(600px 400px at 88% -10%, rgba(25,158,115,0.13), transparent 65%),
    radial-gradient(500px 380px at -10% 108%, rgba(244,211,94,0.16), transparent 60%),
    linear-gradient(160deg, #F2FAF6 0%, #FFFFFF 58%, #F7FCF9 100%);
}
body.dark-mode .hero {
  background:
    radial-gradient(600px 400px at 88% -10%, rgba(30,184,127,0.14), transparent 65%),
    radial-gradient(500px 380px at -10% 108%, rgba(244,211,94,0.07), transparent 60%),
    linear-gradient(160deg, #0f1a14 0%, #121e17 100%);
}
.hero h1 { letter-spacing:-0.5px; }

/* ---- Hero entrance animation (page load) ---- */
@keyframes heroUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.hero-content > * { animation:heroUp 0.65s cubic-bezier(0.22,1,0.36,1) both; }
.hero-content > *:nth-child(1){ animation-delay:0.05s; }
.hero-content > *:nth-child(2){ animation-delay:0.14s; }
.hero-content > *:nth-child(3){ animation-delay:0.23s; }
.hero-content > *:nth-child(4){ animation-delay:0.32s; }
.hero-content > *:nth-child(5){ animation-delay:0.41s; }
.hero-content > *:nth-child(6){ animation-delay:0.50s; }
.hero-content > *:nth-child(7){ animation-delay:0.58s; }
.hero-content > *:nth-child(8){ animation-delay:0.66s; }
.hero-visual { animation:heroUp 0.8s 0.35s cubic-bezier(0.22,1,0.36,1) both; }
@media (prefers-reduced-motion: reduce){
  .hero-content > *, .hero-visual { animation:none !important; }
}

/* ---- Hero buttons v2: order + compact WhatsApp ---- */
.hero-btns-v2 { display:flex; gap:10px; flex-wrap:nowrap; align-items:stretch; }
.hero-btns-v2 .btn-primary { flex:1; justify-content:center; }
.btn-wa-compact {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:#25D366; color:#fff;
  font-family:'Hind Siliguri',sans-serif; font-weight:700; font-size:14.5px;
  padding:0 20px; border-radius:12px; border:none; cursor:pointer;
  text-decoration:none; flex-shrink:0;
  box-shadow:0 3px 12px rgba(37,211,102,0.35);
  transition:transform 0.18s, box-shadow 0.18s;
}
.btn-wa-compact:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(37,211,102,0.5); }
.btn-wa-compact:active { transform:scale(0.97); }
.btn-wa-compact svg { flex-shrink:0; }
@media (max-width:420px){
  .btn-wa-compact span { display:none; }   /* icon-only on tiny screens */
  .btn-wa-compact { padding:0 16px; }
}

/* ---- Hero trust strip ---- */
.hero-trust-strip {
  display:inline-flex; align-items:center; gap:16px;
  margin-top:18px; padding:11px 20px;
  background:var(--card-bg);
  border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.hts-item { display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.hts-item strong {
  font-family:'Noto Serif Bengali',serif; font-size:19px; font-weight:800;
  color:var(--dark-teal);
}
.hts-item span { font-size:11px; color:var(--text3); font-weight:600; }
.hts-div { width:1px; height:30px; background:var(--border); }
@media (max-width:420px){ .hero-trust-strip { gap:12px; padding:10px 14px; } }

/* ---- Pills: tidy 2x2 grid on mobile (no lonely pill) ---- */
@media (max-width:768px){
  .hero-pills { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .hero-pills .pill { justify-content:center; text-align:center; font-size:12.5px; }
}

/* ---- Buttons: gradient + press feedback ---- */
.btn-primary {
  background:linear-gradient(135deg, #1FAE80 0%, #017A55 100%);
  box-shadow:0 3px 12px rgba(25,158,115,0.32);
  transition:transform 0.18s, box-shadow 0.18s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(25,158,115,0.45); }
.btn-primary:active { transform:scale(0.97); }
.btn-secondary:active { transform:scale(0.97); }

/* ---- Focus visibility (keyboard) ---- */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline:3px solid rgba(25,158,115,0.4); outline-offset:2px;
}

/* ---- Announce bar: subtle gradient ---- */
.announce-bar {
  background:linear-gradient(90deg, #f2bc26, #f6d566, #f2bc26);
}

/* ---- Section rhythm: alternate section gets soft top edge ---- */
.section-alt { position:relative; }

/* ---- FAQ search ---- */
.faq-search-wrap { max-width:680px; margin:0 auto 22px; padding:0 4px; }
.faq-search {
  width:100%; padding:14px 18px;
  font-family:'Hind Siliguri',sans-serif; font-size:14.5px;
  color:var(--text); background:var(--input-bg);
  border:1.5px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-sm);
  transition:border-color 0.2s, box-shadow 0.2s;
}
.faq-search:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(25,158,115,0.12); }
.faq-search::placeholder { color:var(--text3); }
.faq-no-result {
  text-align:center; color:var(--text3); font-size:14px;
  padding:22px; display:none;
}

/* ---- Sticky bar: floating pill upgrade ---- */
.sticky-bar {
  left:10px; right:10px; bottom:10px;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 -2px 8px rgba(0,0,0,0.06), 0 10px 34px rgba(0,0,0,0.18);
  padding-bottom:10px;
}
@media (max-width:768px){
  .wa-float { bottom:86px; }
  body { padding-bottom:76px; }
}

/* ---- Review cards: subtle quote depth ---- */
.testi-card { border-radius:16px; }
.testi-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* ---- CTA section: richer gradient ---- */
.cta-sec {
  background:
    radial-gradient(500px 300px at 85% 0%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(135deg, #1FAE80 0%, #017A55 100%);
}

/* ---- Fix: hero v2 buttons stay on ONE row even on mobile ---- */
.hero-btns.hero-btns-v2 { flex-direction:row; flex-wrap:nowrap; }
.hero-btns.hero-btns-v2 .btn-primary { width:auto; flex:1; }
.btn-wa-compact { min-height:46px; }
@media (max-width:768px){
  .hero-btns.hero-btns-v2 { flex-direction:row; }
  .hero-btns.hero-btns-v2 .btn-primary { width:auto; }
}