/* Homepage refresh (Oct 2026): green "talk to an expert" button, tighter sections,
   icon-left cards, dark stats bar, cleaner help box. Loaded only on index.php. */

/* 1) Hero: "বিশেষজ্ঞের সাথে কথা বলুন" — green with white text */
html body .hero .hero-secondary,html body main .btn.secondary{background:#16a34a;border:1.5px solid #16a34a;color:#fff !important;box-shadow:0 10px 22px rgba(22,163,74,.30)}
html body .hero .hero-secondary:hover,html body .hero .hero-secondary:focus-visible,html body main .btn.secondary:hover{background:#15803d;border-color:#15803d;color:#fff !important}
html body .hero .hero-secondary .icon{color:#fff}

/* 2) Sections: less empty space between blocks */
html body .why-section{padding:46px 22px 8px}
html body .services{padding:40px 22px 14px}
html body .section-head{margin-bottom:24px}
html body .section-head h2{font-size:30px;line-height:1.25;margin:10px 0 6px}
html body .section-head p{margin:0;color:#5b6b82;font-size:15px}
html body .section-head .eyebrow{font-size:12px;font-weight:700;padding:5px 12px}

/* "কেন আমাদের বেছে নেবেন" cards — icon on the left of the title */
html body .features{gap:14px}
html body .why-section .feature{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:12px;align-content:start;padding:18px 16px;min-height:0;border-radius:14px;border:1px solid #e3e9f3;box-shadow:0 6px 18px rgba(15,42,77,.05);transition:transform .15s,box-shadow .15s,border-color .15s}
html body .why-section .feature:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,42,77,.10);border-color:#c9d8f2}
html body .why-section .ficon{grid-row:1 / span 3;margin:0;width:46px;height:46px}
html body .why-section .feature h3{font-size:15.5px;line-height:1.3;margin:2px 0 6px;color:#0f2a4d}
html body .why-section .feature p{font-size:13.5px;line-height:1.5;color:#5b6b82;margin:0 0 10px}
html body .why-section .feature a{font-size:13.5px;font-weight:800;color:#1261ff}
html body .why-section .feature a:hover{text-decoration:underline}

/* "শক্তিশালী সমাধান" cards — like the reference: big colour icon in a soft round badge on the left */
html body .service-grid{gap:16px}
html body .services .service{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:14px;align-content:start;padding:18px 16px;min-height:0;border-radius:14px;background:#fff;border:1px solid #e6ecf5;box-shadow:0 8px 22px rgba(15,42,77,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
html body .services .service:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,42,77,.12);border-color:#c9d8f2}
html body .services .service-top{display:contents}
html body .services .sicon{grid-row:1 / span 3;align-self:start;width:56px;height:56px;border-radius:50%;display:grid;place-items:center}
html body .services .sicon .icon{width:30px;height:30px;stroke-width:2.1}
html body .services .service .sicon.blue{background:#e8f0ff !important;color:#1261ff}
html body .services .service .sicon.green{background:#e3f7ec !important;color:#16a34a}
html body .services .service .sicon.purple{background:#efe9ff !important;color:#6d3ff0}
html body .services .service .sicon.teal{background:#e1f6f8 !important;color:#0e9fb3}
html body .services .service .sicon.orange{background:#fff0e3 !important;color:#ea6c0a}
html body .services .service .sicon.pink{background:#fde8f3 !important;color:#e0367f}
html body .services .service h3{font-size:16px !important;font-weight:800;line-height:1.3;margin:4px 0 6px;color:#0f2a4d !important}
html body .services .service p{font-size:13.5px;line-height:1.55;color:#5b6b82;margin:0 0 10px}
html body .services .service-cta{font-size:13.5px;font-weight:800;color:#1261ff;align-self:end;display:inline-flex;align-items:center;gap:4px}
html body .services .service-cta:hover{text-decoration:underline}

/* One button style for the whole homepage: same height, same round shape as the domain search button */
html body main .btn{min-height:50px;height:auto;padding:0 24px;border-radius:999px;font-size:15.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;transition:background .15s,box-shadow .15s,transform .15s}
html body main .btn:hover{transform:translateY(-1px)}
html body main .btn.primary{background:#5b2fe8;border:1.5px solid #5b2fe8;color:#fff;box-shadow:0 10px 22px rgba(91,47,232,.28)}
html body main .btn.primary:hover{background:#4a22d6;border-color:#4a22d6}
/* Domain search button: green */
html body .domain-search button.btn.primary{background:#16a34a;border-color:#16a34a;box-shadow:0 10px 22px rgba(22,163,74,.30)}
html body .domain-search button.btn.primary:hover{background:#15803d;border-color:#15803d}

/* Stats — dark navy bar with line icons, like the reference */
html body .stats{background:linear-gradient(110deg,#0b1b3b,#132c57);border-radius:16px;padding:24px 20px;margin:22px auto 0;box-shadow:0 18px 40px rgba(6,27,59,.22)}
html body .stats>div{border-right:1px solid rgba(255,255,255,.14);gap:14px}
html body .stats>div:last-child{border-right:0}
html body .stats .stat-icon{width:46px;height:46px;flex:none;border-radius:12px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;font-style:normal}
html body .stats .stat-icon .icon{width:24px;height:24px;color:#fff}
html body .stats b{font-size:24px;letter-spacing:-.01em}
html body .stats span{font-size:13px;color:rgba(255,255,255,.78);line-height:1.4}

/* Help box — light, clear buttons */
html body .final-cta{margin:24px auto 64px;padding:20px 28px;background:linear-gradient(110deg,#eef5ff,#f5f1ff);border:1px solid #dbe6f7;border-radius:16px}
html body .final-cta h2{font-size:24px;color:#0f2a4d}
html body .final-cta p{font-size:14.5px;line-height:1.55;color:#5b6b82}
html body .final-cta .cta-buttons{display:flex;flex-wrap:wrap;gap:12px}
html body .final-cta .btn.secondary{background:#16a34a;border:1.5px solid #16a34a;color:#fff}
html body .final-cta .btn.secondary:hover{background:#15803d;border-color:#15803d;color:#fff}

@media (max-width:1100px){
  html body .why-section .feature,html body .services .service{padding:15px 14px}
}
@media (max-width:900px){
  html body .stats>div{border-right:0;justify-content:flex-start;padding:8px 6px}
  html body .final-cta{grid-template-columns:1fr;text-align:center}
  html body .final-cta .cta-buttons{justify-content:center}
}
@media (max-width:620px){
  html body .why-section{padding:36px 16px 4px}
  html body .services{padding:30px 16px 8px}
  html body .section-head h2{font-size:23px}
  html body .stats{margin:18px 16px 0}
  html body .final-cta{margin:20px 16px 48px;padding:18px}
  html body .final-cta .btn{width:100%;justify-content:center}
}

/* Bigger text and icons on the three main buttons (button size unchanged) */
html body .hero .actions .btn.hero-primary,html body .hero .actions .btn.hero-secondary,html body .domain-search button.btn.primary{font-size:18px;font-weight:600;gap:10px}
html body .hero .hero-primary .icon,html body .hero .hero-secondary .icon,html body .domain-search button.btn.primary .icon{width:21px;height:21px;flex:none}
html body .domain-search button.btn.primary .btn-text-full{font-size:18px}
@media (max-width:620px){
  html body .hero .actions .btn.hero-primary,html body .hero .actions .btn.hero-secondary,html body .domain-search button.btn.primary{font-size:17px}
}

/* ===== Final tweaks (Oct 8) ===== */
/* English version */
html[lang=en] body .hero h1{font-size:45px;font-family:'Poppins','Inter',sans-serif}
html[lang=en] body .hero .actions .btn.hero-primary{font-size:17px;font-weight:600}
html[lang=en] body .eyebrow{font-size:13px}
html[lang=en] body .domain-search button.btn.primary .btn-text-full{font-size:17px}
/* Domain price badges (.domain-prices) */
html body .domain-prices .tld.blue b{background:#6f6af0}
html body .domain-prices .tld.green b{background:#3b9aff}
html body .domain-prices .tld.orange b{background:#ffb43e}
html body .domain-prices .tld.purple b{background:#c08686}
html body .domain-prices .tld.teal b{background:#4abc91}
html body .domain-prices .tld.pink b{background:#d66a9c}
html body .domain-prices .tld b{border-radius:26px !important}
@media (max-width:620px){html[lang=en] body .hero h1{font-size:32px}}

/* ===== Hero card slider (fix-12) ===== */
html body .hero-card .hc-track{display:grid}
html body .hero-card .hc-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
html body .hero-card .hc-slide.is-on{opacity:1;visibility:visible}
html body .hero-card .slider div{gap:7px;align-items:center}
html body .hero-card .slider .hc-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#b9c8dc;cursor:pointer;transition:width .25s,background .25s}
html body .hero-card .slider .hc-dot.is-on{width:20px;border-radius:5px;background:var(--blue)}
html body .hero-card .slider [data-hc-prev],html body .hero-card .slider [data-hc-next]{cursor:pointer;padding:4px 8px}
html body .hero-card p{font-size:13px}
html body .hero-card li{font-size:13px}
html body .hero-card ul{gap:8px}

/* ===== Mobile fixes (fix-12) ===== */
@media (max-width:620px){
  /* hero card: full width, larger text */
  html body .hero-card{width:100%;max-width:440px;padding:24px 22px}
  html body .hero-card h2{font-size:22px;line-height:1.3}
  html body .hero-card p{font-size:15px;margin-bottom:14px}
  html body .hero-card li{font-size:15.5px}
  html body .hero-card ul{gap:10px}
  /* domain box: nothing may push past the card edge */
  html body .domain-search .domain-head{grid-template-columns:minmax(0,1fr)}
  html body .domain-search .domain-head>*{min-width:0}
  html body .domain-search .domain-title{gap:10px;align-items:flex-start}
  html body .domain-search .domain-title>div{min-width:0;flex:1}
  html body .domain-search .domain-title>strong{width:34px;height:34px;min-width:34px;flex:0 0 34px}
  html body .domain-search .domain-title>strong .icon,html body .domain-search .domain-title>strong svg{width:20px;height:20px}
  html body .domain-search .domain-title h2{font-size:15px;line-height:1.3;margin:0 0 2px}
  html body .domain-search .domain-title p{font-size:12.5px;line-height:1.45;width:auto}
  html body .domain-search .domain-head form{padding:4px 5px 4px 14px;gap:5px;min-height:0}
  html body .domain-search .domain-head input{min-width:0;flex:1 1 auto}
  html body .domain-search .domain-head input::placeholder{font-size:13.5px}
  html body .domain-search .domain-head .wdh-ideas-btn{width:32px!important;min-width:32px!important;height:32px!important;margin:0}
  html body .domain-search .domain-head button.btn.primary{width:36px!important;min-width:36px!important;height:36px!important;min-height:0!important;max-height:36px;align-self:center;padding:0!important;justify-content:center}
  html body .domain-search .domain-head button.btn.primary .icon{width:21px;height:21px;stroke-width:2.4}
  /* domain price chips: smaller so two fit, the row scrolls for the rest */
  html body .domain-prices .tld{min-width:0!important;gap:6px}
  html body .domain-prices .tld b{font-size:15px;padding:4px 10px}
  html body .domain-prices .tld span{font-size:12.5px;white-space:nowrap}
  /* bundle promo: small icon circle, one-line heading */
  html body .bundle-promo-icon{width:34px;height:34px;min-width:34px}
  html body .bundle-promo-icon .icon{width:18px;height:18px}
  html body .bundle-promo-text h3{font-size:15px;line-height:1.35}
  html body .bundle-promo-text p{font-size:13px;line-height:1.5}
}