/* 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}
}

/* ===== fix-43: domain price row scrolls by itself when it does not fit; stats bar keeps the page gutter ===== */
html body .domain-prices{overflow:visible}
html body .domain-prices .tld-marquee{flex:1 1 auto;min-width:0;overflow:hidden}
html body .domain-prices .tld-track{display:flex;align-items:center;gap:10px}
html body .domain-prices .tld-track .tld{flex:1 0 auto!important;min-width:0!important}
html body .domain-prices .tld-marquee.is-scrolling{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
html body .domain-prices .tld-marquee.is-scrolling .tld-track{width:max-content;animation:wdh-tld-scroll var(--tm-dur,24s) linear infinite}
html body .domain-prices .tld-marquee.is-scrolling .tld-track .tld{flex:0 0 auto!important}
html body .domain-prices .tld-marquee.is-scrolling:hover .tld-track,html body .domain-prices .tld-marquee.is-scrolling:focus-within .tld-track,html body .domain-prices .tld-marquee.is-paused .tld-track{animation-play-state:paused}
html body .domain-prices>.pricing{flex:none;white-space:nowrap}
@keyframes wdh-tld-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--tm-shift,600px)))}}
@media (prefers-reduced-motion:reduce){html body .domain-prices .tld-marquee .tld-track{animation:none!important}}
@media (max-width:600px){html body .domain-prices .tld-track .tld{min-width:0!important}}
@media (min-width:621px) and (max-width:1240px){
  html body .stats{margin-left:22px;margin-right:22px;width:auto;box-sizing:border-box;border-radius:16px}
}
/* fix-44: help banner keeps the page gutter on medium screens */
@media (min-width:621px) and (max-width:1240px){html body .final-cta{margin-left:22px;margin-right:22px;box-sizing:border-box}}

/* ===== fix-46: domain price row scrolls by hand (like before) + blinking arrow on the right; no auto-scroll, no fade ===== */
html body .domain-prices .tld-scrollbox{position:relative;flex:1 1 auto;min-width:0;display:flex}
html body .domain-prices .tld-marquee{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
html body .domain-prices .tld-marquee::-webkit-scrollbar{display:none}
html body .domain-prices .tld-track{animation:none!important;transform:none!important;width:auto}
html body .domain-prices .tld-track .tld{flex:1 0 auto!important}
html body .domain-prices .tld-scrollbox.has-more .tld-track{padding-right:34px}
html body .domain-prices .tld-more{position:absolute;right:0;top:50%;margin-top:-14px;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid #cdbcff;background:#fff;color:#5b2fe8;display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:0 4px 12px rgba(91,47,232,.18);animation:wdh-tld-more 1.8s ease-in-out infinite}
html body .domain-prices .tld-more[hidden]{display:none}
@keyframes wdh-tld-more{0%,100%{box-shadow:0 0 0 0 rgba(91,47,232,.45);opacity:1}50%{box-shadow:0 0 0 7px rgba(91,47,232,0);opacity:.7}}
@media (prefers-reduced-motion:reduce){html body .domain-prices .tld-more{animation:none}}

/* ===== fix-47: "view all" link is the last item of the scrolling row; arrow leaves no blue tap/focus shade ===== */
html body .domain-prices .tld-track .pricing{flex:0 0 auto!important;margin-left:auto;padding:0 4px 0 6px;white-space:nowrap}
html body .domain-prices .tld-more{-webkit-tap-highlight-color:transparent;outline:none;-webkit-appearance:none;appearance:none;user-select:none;-webkit-user-select:none}
html body .domain-prices .tld-more:focus,html body .domain-prices .tld-more:active{outline:none;background:#fff;border-color:#cdbcff}
html body .domain-prices .tld-more:focus-visible{outline:2px solid #5b2fe8;outline-offset:2px}
html body .domain-prices .tld-marquee,html body .domain-prices .tld-marquee a{-webkit-tap-highlight-color:transparent}

/* ===== fix-48: arrow sits NEXT TO the scrolling row (not on top of it); globe a bit bigger; less space around the offer button ===== */
html body .domain-prices .tld-scrollbox{align-items:center;gap:6px}
html body .domain-prices .tld-scrollbox.has-more .tld-track{padding-right:0}
html body .domain-prices .tld-more{position:static;flex:0 0 28px;margin:0}
@media (max-width:620px){
  html body .domain-search .domain-title>strong .icon,html body .domain-search .domain-title>strong svg{width:24px;height:24px}
  html body .bundle-promo-inner{row-gap:10px;padding-top:14px;padding-bottom:12px}
  html body .bundle-promo-inner .btn{min-height:42px}
}

/* ===== fix-49: phones — the search button shows its text ("সার্চ করুন" / "Search") like the results page,
   so it can't be confused with the round "domain ideas" icon. Search form/logic unchanged. ===== */
@media (max-width:620px){
  html body .domain-search .domain-head button.btn.primary{width:auto!important;min-width:0!important;height:40px!important;max-height:40px;padding:0 14px!important;border-radius:999px;flex:0 0 auto;gap:0}
  html body .domain-search .domain-head button.btn.primary .icon{display:none}
  html body .domain-search .domain-head button.btn.primary .btn-text-full{display:none}
  html body .domain-search .domain-head button.btn.primary .btn-text-short{display:inline!important;font-size:14px;font-weight:700;white-space:nowrap;line-height:1}
  html body .domain-search .domain-head .wdh-ideas-btn{width:34px!important;min-width:34px!important;height:34px!important}
}

/* ===== fix-50: home domain search button in the brand purple (desktop + mobile), same as the results page ===== */
html body .domain-search button.btn.primary,html body .domain-search .domain-head button.btn.primary{background:#5b2fe8;border-color:#5b2fe8;color:#fff;box-shadow:0 10px 22px rgba(91,47,232,.32)}
html body .domain-search button.btn.primary:hover,html body .domain-search .domain-head button.btn.primary:hover{background:#4b1ed1;border-color:#4b1ed1}
html body .domain-search button.btn.primary:focus-visible{outline:2px solid #5b2fe8;outline-offset:2px}

/* ===== fix-51: when the domain box stacks (≤1100px), leave room above the search field so the bouncing
   "domain ideas" label never covers the subtitle line ===== */
@media (max-width:1100px){html body .domain-search .domain-head form{margin-top:18px}}

/* ===== fix-53: phones — each stat label on one line ("বছরের অভিজ্ঞতা (২০০৪ সাল থেকে)"), wraps only if it must ===== */
@media (max-width:620px){html body .stats .stat-text span br{display:none}}

/* fix-85 (owner, 17 Oct): service cards smaller and cleaner — thin line icon with no round shade,
   icon + title on one row, text and link use the full card width below */
html body .services .service{grid-template-columns:38px minmax(0,1fr);column-gap:12px;row-gap:0;padding:16px 16px 14px}
html body .services .sicon,html body .services .service .sicon.blue,html body .services .service .sicon.green,html body .services .service .sicon.purple,html body .services .service .sicon.teal,html body .services .service .sicon.orange,html body .services .service .sicon.pink{grid-row:auto;grid-column:1;width:38px;height:38px;border-radius:0;background:none !important;box-shadow:none !important}
html body .services .sicon .icon{width:38px;height:38px;stroke-width:1.5}
html body .services .service h3{grid-column:2;align-self:center;margin:0 !important}
html body .services .service p{grid-column:1 / -1;margin:10px 0 8px}
html body .services .service-cta{grid-column:1 / -1;justify-self:start}

/* fix-85b: 12 cards, 4 per row; whole card clickable; hover shows the card's own colour */
html body .services .service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
html body .services a.service{text-decoration:none;color:inherit;position:relative;overflow:hidden;--svc:#1261ff}
html body .services a.service.green{--svc:#16a34a}html body .services a.service.purple{--svc:#6d3ff0}html body .services a.service.teal{--svc:#0e9fb3}html body .services a.service.orange{--svc:#ea6c0a}html body .services a.service.pink{--svc:#e0367f}
html body .services a.service::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--svc);opacity:0;transition:opacity .15s}
html body .services a.service:hover,html body .services a.service:focus-visible{border-color:color-mix(in srgb,var(--svc) 35%,#e6ecf5);outline:none}
html body .services a.service:hover::before,html body .services a.service:focus-visible::before{opacity:1}
html body .services a.service .sicon .icon{transition:transform .2s}
html body .services a.service:hover .sicon .icon{transform:translateY(-2px)}
html body .services a.service .service-cta i{font-style:normal;display:inline-block;transition:transform .15s}
html body .services a.service:hover .service-cta i{transform:translateX(4px)}
html body .services a.service:hover .service-cta{text-decoration:none}
html body .services .svc-new{font-style:normal;display:inline-block;vertical-align:2px;margin-left:6px;padding:1px 7px;border-radius:999px;background:#ecfdf3;border:1px solid #bbf0cf;color:#15803d;font-size:11px;font-weight:800;letter-spacing:.02em}
@media(max-width:1100px){html body .services .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){html body .services .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){html body .services .service-grid{grid-template-columns:minmax(0,1fr)}}