@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+Bengali:wght@400;500;600;700;800&display=swap');
:root{--bg:#f7faff;--surface:#fff;--text:#0b1b3b;--muted:#63738d;--line:#dfe8f5;--blue:#1261ff;--dark:#061b3b;--green:#19b96b;--purple:#7653ed;--orange:#ff8b2f;--teal:#18a7bb;--pink:#ed4b9a;--shadow:0 12px 34px rgba(31,65,110,.08)}
[data-theme=dark]{--bg:#071323;--surface:#0d1c31;--text:#f6f8ff;--muted:#aab8cc;--line:#223450;--dark:#020b18;--shadow:0 16px 50px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 Inter,"Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}html[lang=bn] body{font-family:"Noto Sans Bengali",Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.icon{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
.topbar{height:36px;background:#061a3a;color:#edf4ff;font-size:11px}.topbar-inner{max-width:1280px;height:100%;margin:auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.topbar-inner>span,.contact span{display:inline-flex;align-items:center;gap:6px}.tb-icon{width:13px;height:13px}.tb-flag{width:16px;height:12px}.tb-chev{width:9px;height:9px}.contact{display:flex;gap:30px}.topbar-right{display:flex;align-items:center;gap:12px}.top-btn{border:0;background:transparent;color:#edf4ff;cursor:pointer;font-size:11px;display:inline-flex;align-items:center;gap:5px}.lang-switch{position:relative}.lang-menu{display:none;position:absolute;right:0;top:100%;margin-top:6px;background:#0b2145;border:1px solid #1c3f72;border-radius:8px;padding:6px;min-width:130px;z-index:50;box-shadow:0 12px 30px rgba(0,0,0,.35)}.lang-switch:hover .lang-menu,.lang-switch:focus-within .lang-menu{display:block}.lang-menu a{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:6px;font-size:11px;color:#edf4ff;white-space:nowrap}.lang-menu a:hover{background:#123163}.currency-switch{padding-left:8px;border-left:1px solid rgba(255,255,255,.14)}
.header{height:72px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 max(22px,calc((100% - 1280px)/2));gap:28px;position:sticky;top:0;z-index:40}.logo{width:112px;display:flex;flex-direction:column;line-height:1;color:var(--blue)}.logo span{font-size:30px;font-weight:950;letter-spacing:-2px}.logo small{font-size:10px;font-weight:700;color:var(--text);margin-top:2px}.logo em{font-style:normal;font-size:7px;font-weight:800;letter-spacing:1px;margin-top:3px}nav{display:flex;align-items:center;gap:21px;flex:1}nav a{font-weight:750;font-size:12px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}nav a:hover{color:var(--blue)}.nav-chev{width:9px;height:9px;opacity:.6}.header-actions{display:flex;align-items:center;gap:9px}.cart{position:relative;padding:4px;display:inline-flex;align-items:center}.cart .icon{width:21px;height:21px}.cart b{position:absolute;right:-4px;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--blue);color:#fff;font-size:9px;display:grid;place-items:center}.login{border:1px solid #aebed4;padding:8px 16px;border-radius:8px;font-weight:800}.portal{background:var(--blue);color:#fff;padding:9px 16px;border-radius:8px;font-weight:800}.mobile-menu{display:none;border:0;background:transparent;color:var(--text)}.mobile-menu .icon{width:24px;height:24px}
.hero{position:relative;overflow:hidden;min-height:455px;background:#061a39;color:#fff}.hero-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(59, 50, 171, 0.94) 0%,rgba(50, 7, 169, 0.86) 30%,rgba(24, 10, 119, 0.5) 55%,rgba(3,20,46,.14) 82%),url('../images/hero-bg.svg');background-size:cover;background-position:center right;transform:scale(1.03)}.hero-inner{position:relative;z-index:1;max-width:1280px;margin:auto;padding:55px 22px 68px;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}.hero-copy{max-width:640px}.eyebrow{display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;letter-spacing:.5px}.hero-eyebrow{background:#0f62bd;border:1px solid rgba(255,255,255,.12);color:#fff;padding:5px 10px;border-radius:999px}.hero h1{font-size:48px;line-height:1.06;letter-spacing:-2px;margin:17px 0 13px}.hero-gradient{background:none;-webkit-background-clip:unset;background-clip:unset;color:#fff}.hero-white{color:#fff}.hero-copy>p{font-size:15px;color:#edf4ff;margin:0;line-height:1.55}.actions{display:flex;gap:14px;margin:21px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:8px;padding:11px 18px;font-weight:850;transition:transform .18s,box-shadow .18s}.btn:hover{transform:translateY(-1px)}.btn .icon{width:16px;height:16px}.primary{background:var(--blue);color:#fff!important;box-shadow:0 8px 22px rgba(18,97,255,.2)}.hero-primary{background:#18b969}.secondary{background:transparent;border:1px solid #dbe7f8;color:var(--text)}.hero-secondary{color:#fff;border-color:#fff}.trust{display:flex;gap:22px;flex-wrap:wrap;font-size:10px;color:#fff}.trust span{display:flex;align-items:center;gap:8px}.trust-icon{width:40px;height:40px;border:2px solid #24d779;border-radius:10px;display:grid;place-items:center;font-style:normal;color:#29dd7b}.trust-icon.circle{border-radius:50%}.trust-icon.headset{border-radius:50%}.trust-icon .icon{width:20px;height:20px}.trust b{font-weight:700;line-height:1.25}.hero-visual{min-height:350px;display:flex;align-items:center;justify-content:flex-end}.hero-card{width:min(335px,100%);background:rgba(255,255,255,.98);color:#0d1e40;border-radius:18px;padding:24px 26px;box-shadow:0 20px 55px rgba(0,0,0,.28)}.quote{color:var(--blue)}.quote .icon{width:34px;height:34px}.hero-card h2{font-size:20px;line-height:1.25;margin:12px 0 7px}.hero-card p{font-size:11px;color:#63738d;margin:0 0 11px}.hero-card ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.hero-card li{font-size:11px;display:flex;align-items:center}.hero-card li:before{content:'';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b9f5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,12.5 9,17.5 20,6'/%3E%3C/svg%3E");background-size:9px 9px;background-repeat:no-repeat;background-position:center;display:inline-grid;width:16px;height:16px;border-radius:50%;background-color:#dff8eb;margin-right:8px;flex:none}.slider{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.slider button{border:0;background:transparent;font-size:20px;color:#132744}.slider div{display:flex;gap:6px}.slider i,.slider b{width:8px;height:8px;border-radius:50%;background:#b9c8dc}.slider b{background:var(--blue)}
.domain-search{max-width:1220px;margin:-31px auto 0;position:relative;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 40px rgba(23,48,90,.12);padding:18px 24px}.domain-head{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:center}.domain-title{display:flex;align-items:center;gap:12px}.domain-title>strong{width:43px;height:43px;flex-shrink:0;border-radius:50%;background:#e8f1ff;color:var(--blue);display:grid;place-items:center}.domain-title>strong .icon{width:22px;height:22px}.domain-title h2{font-size:15px;margin:0}.domain-title p{font-size:9px;color:var(--muted);margin:3px 0}.domain-head form{
    display:flex;align-items:center;gap:6px;
    border:2px solid #e3ecf9;border-radius:999px;padding:5px 5px 5px 18px;background:var(--surface);
    transition:border-color .15s ease
}
.domain-head form:focus-within{border-color:#8bb1ff;box-shadow:0 0 0 3px rgba(18,97,255,.10)}
.domain-head input{
    flex:1;min-width:0;height:38px;border:0;background:transparent;color:var(--text);padding:0;outline:none;font-size:13px
}
.domain-head input:focus{border:0!important;box-shadow:none!important;background:transparent!important}
.domain-head button{border:0;border-radius:999px;height:44px;padding:0 22px;flex:0 0 auto}.domain-prices{display:flex;align-items:center;gap:10px;margin-top:13px}.tld{flex:1;display:flex;align-items:center;gap:9px;min-width:0;border:1px solid #e8edf5;border-radius:11px;padding:7px 9px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,251,255,.96))}.tld b{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;box-shadow:inset 0 1px 5px rgba(255,255,255,.5)}.tld span{font-size:11px;font-weight:800;color:#52627a;white-space:nowrap}.tld span small{font-size:8px;font-weight:700;color:#8492a8}.tld.blue b{background:linear-gradient(135deg,#1775ff,#51a1ff)}.tld.green b{background:linear-gradient(135deg,#18a957,#68d88c)}.tld.orange b{background:linear-gradient(135deg,#ff7d21,#ffb25f)}.tld.purple b{background:linear-gradient(135deg,#7752e9,#b18cff)}.tld.teal b{background:linear-gradient(135deg,#0d9eaf,#63d8df)}.tld.pink b{background:linear-gradient(135deg,#e84091,#ff8ec2)}.pricing{color:var(--blue);font-size:10px;font-weight:850;white-space:nowrap;text-align:center}
.section{max-width:1280px;margin:auto;padding:73px 22px 54px}.section-head{text-align:center;max-width:760px;margin:0 auto 28px}.section-head .eyebrow{padding:4px 10px;border-radius:999px}.section-head .mint{background:#ddfae9;color:#18a45d}.section-head .cyan{background:#dff8f8;color:#1aa3a6}.section-head h2{font-size:28px;line-height:1.18;letter-spacing:-.8px;margin:9px 0 7px}.section-head h2 span{color:var(--blue)}.section-head p{font-size:11px;color:var(--muted);margin:0}.features{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.feature,.service{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px}.feature{padding:17px 15px;min-height:174px}.ficon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px}.ficon .icon{width:22px;height:22px}.ficon.red{background:#ffe9ee;color:#e94163}.ficon.green{background:#e4f8ec;color:#16a963}.ficon.purple{background:#eee8ff;color:#7653e8}.ficon.orange{background:#fff0e1;color:#ee7a24}.ficon.blue{background:#e6efff;color:var(--blue)}.feature h3,.service h3{font-size:13px;line-height:1.28;margin:0 0 6px}.feature p,.service p{font-size:10px;color:var(--muted);margin:0 0 10px}.feature a,.service a{font-size:10px;color:var(--blue);font-weight:850}.services{padding-top:55px}.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}.service{padding:14px;display:flex;gap:11px;min-height:127px}.sicon{width:42px;height:42px;flex:0 0 42px;border-radius:11px;display:grid;place-items:center}.sicon .icon{width:20px;height:20px}.sicon.blue{background:#e7efff;color:var(--blue)}.sicon.green{background:#e4f8ec;color:#18a964}.sicon.purple{background:#eee8ff;color:#7653e8}.sicon.teal{background:#e1f7f8;color:#119bab}.sicon.orange{background:#fff0e1;color:#ee7a24}.sicon.pink{background:#ffe6f2;color:#e34291}
.stats{max-width:1224px;margin:8px auto 0;padding:22px 18px;background:linear-gradient(110deg,#6409af,#4516c7);color:#fff;border-radius:13px;display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 16px 38px rgba(3,27,66,.16)}.stats>div{display:flex;align-items:center;gap:13px;justify-content:center;border-right:1px solid rgba(255,255,255,.18)}.stats>div:last-child{border:0}.stat-icon{width:26px;height:26px;flex:none;color:#8fc2ff}.stat-icon .icon{width:26px;height:26px}.stats b{font-size:24px;display:block}.stats span{font-size:10px;color:#d9e6fa;line-height:1.25}
.final-cta{max-width:1224px;margin:26px auto 70px;padding:18px 28px;display:grid;grid-template-columns:175px 1fr auto;gap:20px;align-items:center;background:#edf5ff;border:1px solid #dce8f8;border-radius:13px}.illustration{height:105px;position:relative;background:url('../images/cta-illustration.png') left center/auto 100% no-repeat}.final-cta h2{font-size:24px;margin:5px 0}.final-cta p{margin:0;color:#5b6b82;font-size:11px}.cta-buttons{display:flex;gap:9px;white-space:nowrap}.cta-buttons .secondary{color:var(--text);border-color:#9eb1cc}
.footer{background:#270661;color:#d9e5f4;padding:45px max(22px,calc((100% - 1280px)/2)) 18px}.footer-grid{display:grid;grid-template-columns:1.3fr repeat(4,.85fr) 1.15fr;gap:26px}.footer a{display:block;color:#c7d4e6;margin:7px 0;font-size:11px}.footer a:hover{color:#fff}.footer h4{color:#fff;margin:0 0 11px;font-size:12px}.brand>a{font-size:31px!important;font-weight:900;color:#fff!important;letter-spacing:-2px}.brand strong{font-size:11px}.brand small{font-size:7px;color:#7f95b3}.brand p{font-size:10px;color:#aabbd0;max-width:230px}.social{display:flex;gap:7px}.social i{width:26px;height:26px;border-radius:50%;background:#102d55;display:grid;place-items:center;font-size:10px;font-style:normal}.payments div{display:flex;gap:7px;margin:8px 0}.payments span{background:#fff;border-radius:6px;min-width:68px;height:34px;padding:0 7px;display:grid;place-items:center;font-size:9px;font-weight:900}.pay-badge.bkash{color:#e2136e}.pay-badge.nagad{color:#f7941e}.pay-badge.rocket{color:#8b2f8b}.pay-badge.upay{color:#7a1fa2}.pay-badge.bank{color:#0f62bd;font-size:8px}.pay-badge.taptap{color:#0aa06e}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;color:#a9b9ce;flex-wrap:wrap}.footer-bottom span{display:inline-flex;align-items:center;gap:5px}.fb-icon{width:12px;height:12px}.fb-selectors{display:flex;gap:8px}.pill-link{display:inline-flex!important;align-items:center;gap:5px;background:#0d2a50;color:#e4edf8!important;border:1px solid #254467;border-radius:6px;padding:6px 10px!important;font-size:10px;font-weight:700;margin:0!important}.pill-link .icon{width:9px;height:9px}
[data-theme=dark] .domain-search,[data-theme=dark] .feature,[data-theme=dark] .service,[data-theme=dark] .tld{background:var(--surface)}[data-theme=dark] .final-cta{background:#0d2444;border-color:#203d63}[data-theme=dark] .domain-title>strong{background:#102b54}
@media(max-width:1100px){nav{gap:12px}.header{gap:16px}.features{grid-template-columns:repeat(3,1fr)}.service-grid{grid-template-columns:repeat(2,1fr)}.domain-head{grid-template-columns:1fr}.hero h1{font-size:43px}.stats b{font-size:21px}.hero-card{width:310px}}
@media(max-width:900px){.contact{display:none}.mobile-menu{display:block;order:1}.logo{order:0}.header-actions{margin-left:auto;order:2}.header nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--surface);padding:18px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}.header nav.open{display:flex}.hero-inner{grid-template-columns:1fr;padding-top:48px}.hero-bg{background-position:center right;opacity:.9}.hero-visual{justify-content:flex-start;min-height:auto}.section{padding:60px 22px 42px}.stats{grid-template-columns:1fr 1fr;margin:0 22px}.stats>div{padding:12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.15)}.stats>div:last-child{grid-column:1/-1}.final-cta{grid-template-columns:110px 1fr;margin:26px 22px 60px}.cta-buttons{grid-column:1/-1}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.payments{grid-column:1/-1}}
@media(max-width:620px){.topbar{height:auto}.topbar-inner{padding:7px 14px;font-size:9px}.topbar-inner>div:last-child{display:none}.header{padding:0 14px;height:66px}.logo{width:90px}.logo span{font-size:27px}.logo small{font-size:9px}.login{display:none}.portal{padding:8px 11px;font-size:11px}.hero{min-height:600px}.hero-bg{opacity:.5;background-position:58% center}.hero-inner{padding:42px 18px 70px}.hero h1{font-size:36px}.hero-copy>p{font-size:14px}.actions{flex-direction:column}.hero-primary,.hero-secondary{width:100%}.trust{gap:11px}.trust span{font-size:9px}.domain-search{margin:-25px 12px 0;padding:16px}.domain-head form{grid-template-columns:1fr}.domain-head select{display:none}.domain-prices{overflow:auto;padding-bottom:4px}.tld{min-width:135px}.pricing{min-width:95px}.section{padding:55px 18px 36px}.section-head h2{font-size:27px}.features,.service-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr;margin:0 12px}.stats>div{grid-column:auto!important;border-bottom:1px solid rgba(255,255,255,.15)}.stats>div:last-child{border:0}.final-cta{margin:25px 12px 55px;padding:20px 18px;grid-template-columns:1fr;text-align:center}.illustration{width:150px;margin:auto}.cta-buttons{flex-direction:column}.footer{padding:38px 18px 18px}.footer-grid{grid-template-columns:1fr 1fr;gap:24px}.brand,.payments{grid-column:1/-1}.footer-bottom{justify-content:flex-start}}
/* Milestone 06 — client/service management */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0}.detail-line{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(80,110,150,.15);word-break:break-word}.detail-line:last-child{border-bottom:0}.success{color:#159b6d}.muted{color:#64748b}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.plan-card .actions{margin-top:18px}.admin-row{gap:14px}.admin-row small{color:#64748b}.portal-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:22px 0}.portal-links a{padding:16px;border:1px solid rgba(80,110,150,.15);border-radius:14px;background:#fff;text-decoration:none;font-weight:600}.cart-card,.dash-card,.plan-card{overflow:hidden}@media(max-width:800px){.form-grid,.details-grid{grid-template-columns:1fr}.portal-links{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-line{display:block}.detail-line>*{display:block;margin-top:5px}}@media(max-width:520px){.portal-links{grid-template-columns:1fr}}

/* V4 security + responsive hardening */
.hp-field{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
img,svg,video,canvas{max-width:100%;height:auto}.auth-card input,.auth-card select,.auth-card textarea,.cart-card input,.cart-card select,.cart-card textarea,.admin-page input,.admin-page select,.admin-page textarea{max-width:100%;width:100%}.auth-card .btn,.cart-card .btn,.admin-page .btn{max-width:100%}.admin-row{overflow-wrap:anywhere}.admin-row .actions{min-width:0}.admin-row form{margin:0}.notification-item,.ticket-message,.cart-card,.summary-card,.filter-card,.results-card{min-width:0}.domain-result{min-width:0}.domain-info{min-width:0}.domain-info strong,.domain-info small{overflow-wrap:anywhere}
@media(max-width:900px){.admin-page,.portal-page,.simple-page,.catalog-page{width:100%;max-width:100%;overflow-x:hidden}.admin-row{grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:14px 10px}.admin-row>*{min-width:0}.admin-row .actions{grid-column:1/-1;justify-content:flex-start}.report-filter{align-items:stretch}.report-filter label{flex:1 1 180px}.report-filter .btn{flex:0 0 auto}}
@media(max-width:620px){.header nav{top:66px;max-height:calc(100vh - 66px);overflow:auto}.header-actions{gap:7px}.cart{min-width:32px}.hero-card{margin:auto}.catalog-layout{grid-template-columns:1fr!important}.results-card,.filter-card,.side-card{width:100%}.domain-result{grid-template-columns:48px minmax(0,1fr);gap:12px}.domain-result .domain-price{grid-column:2;justify-self:start}.domain-result>div:last-child{grid-column:2;justify-self:start}.result-tabs{overflow-x:auto;flex-wrap:nowrap}.result-tabs span{white-space:nowrap}.search-row{width:100%}.search-row input{min-width:0}.admin-row{grid-template-columns:1fr;align-items:stretch}.admin-row .actions{display:flex}.admin-row .btn{width:100%}.settings-grid{grid-template-columns:1fr!important}.footer-bottom{gap:12px}.footer-bottom .fb-selectors{width:100%;flex-wrap:wrap}.payment-option{line-height:1.35}.secret-field{flex-wrap:wrap}.secret-field input{min-width:0}.secret-field button{width:auto}.notification-item{padding:16px}.notification-item .actions{display:grid;grid-template-columns:1fr}.ticket-message-head{overflow-wrap:anywhere}.payment-extra{grid-template-columns:1fr}.actions{width:100%}.actions .btn{max-width:100%}}
@media(max-width:420px){.portal{font-size:10px;padding:7px 9px}.logo span{font-size:24px}.logo small{font-size:8px}.header-actions{gap:5px}.header{gap:10px}.hero h1{font-size:31px;letter-spacing:-1.2px}.section-head h2{font-size:24px}.footer-grid{grid-template-columns:1fr}.brand,.payments{grid-column:1}.topbar-inner{gap:8px}.topbar-inner>span{max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* Hosting navigation dropdown */
nav .nav-dropdown{position:relative;display:flex;align-items:center}
nav .nav-dropdown-menu{display:none;position:absolute;left:-14px;top:calc(100% + 14px);min-width:210px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(24,51,89,.14);z-index:80}
nav .nav-dropdown-menu a{display:block;padding:9px 10px;border-radius:8px;font-size:11px}
nav .nav-dropdown-menu a:hover{background:#eef5ff;color:var(--blue)}
nav .nav-dropdown:hover .nav-dropdown-menu,nav .nav-dropdown:focus-within .nav-dropdown-menu{display:block}
@media(max-width:620px){nav .nav-dropdown{display:block}nav .nav-dropdown-menu{position:static;display:block;margin:4px 0 8px;padding:6px 0 6px 12px;border:0;box-shadow:none;background:transparent}nav .nav-dropdown-menu a{padding:8px 0}}

/* =========================================================
   WDH UI RESTORATION / GLOBAL DESIGN SYSTEM — V7
   Purpose: restore the locked WDH visual language across all routes.
   ========================================================= */

:root{
  --container:1280px; --content:1224px; --radius:16px; --radius-sm:12px;
  --blue:#1261ff; --blue-2:#0b56e9; --navy:#061a3a; --navy-2:#0b2e67;
  --green:#16ad68; --mint:#dff8ea; --page:#f5f9ff; --white:#fff;
  --muted:#66778f; --line:#dce7f4; --soft:#edf5ff; --shadow:0 14px 38px rgba(19,53,95,.08);
}
html{font-size:16px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--page);font-family:Inter,"Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",sans-serif;color:#0b1b3b;overflow-x:hidden}
html[lang="bn"] body{font-family:"Noto Sans Bengali",Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
::selection{background:#d7e6ff;color:#082252}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit}
main{min-height:220px}

/* Header */
.header{height:76px;padding:0 max(24px,calc((100% - var(--container))/2));gap:20px;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);border-bottom:1px solid #e5edf7;box-shadow:0 4px 18px rgba(10,36,72,.03);}
.logo{width:125px;min-width:125px;color:var(--blue);justify-content:center}
.logo span{font-size:31px;line-height:.92;font-weight:900;letter-spacing:-2px}
.logo small{font-size:10px;line-height:1.2;color:#334a6b;letter-spacing:-.1px}
.logo em{font-size:7px;line-height:1;color:var(--blue);letter-spacing:.9px}
.header nav{gap:19px;justify-content:center;min-width:0;overflow:visible}
.header nav>a,.header nav>.nav-dropdown>a{font-size:12px;font-weight:750;letter-spacing:-.1px;color:#102347;padding:12px 1px}
.nav-dropdown{z-index:100}
.nav-dropdown-menu{top:calc(100% + 9px)!important;left:50%!important;transform:translateX(-50%);width:230px;min-width:230px!important;padding:8px!important;border-radius:14px!important;background:#fff!important}
.nav-dropdown-menu:before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.nav-dropdown-menu a{display:block!important;width:100%;padding:10px 12px!important;font-size:12px!important;font-weight:700!important;line-height:1.3;border-radius:8px;color:#13274a!important;white-space:nowrap}
.nav-dropdown-menu a:hover{background:#edf4ff!important;color:var(--blue)!important}
.header-actions{flex:0 0 auto;gap:10px}
.cart{width:35px;height:38px;justify-content:center}
.cart .icon{width:24px;height:24px}
.cart b{right:-1px;top:0;width:17px;height:17px;font-size:9px}
.login,.portal{min-height:42px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.login{padding:0 17px;border-color:#b9c7da;background:#fff;color:#0b2043}
.portal{padding:0 17px;background:var(--blue);box-shadow:0 8px 22px rgba(18,97,255,.20)}
.mobile-menu{margin-left:auto}

/* Buttons / forms */
.btn{min-height:42px;padding:0 18px;border-radius:9px;font-size:15px;font-weight:600;line-height:1;cursor:pointer;border:1px solid transparent}
.btn.small{min-height:34px;padding:0 13px;font-size:11px;border-radius:8px}
.btn.primary{background:#5e28ef;border-color:#5e28ef;box-shadow:none}
.btn.primary:hover{background:var(--blue-2)}
.btn.secondary{background:#fff;border-color:#b8c8dc;color:#12284c}
.btn.secondary:hover{border-color:#7da4ef;background:#f7faff}
label{color:#13284c}
input,select,textarea{outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:#7eabf7!important;box-shadow:0 0 0 3px rgba(18,97,255,.09)}

/* Generic page shell */
.simple-page,.portal-page,.admin-page,.catalog-page,.product-page{max-width:var(--content);margin:0 auto;padding:34px 22px 60px}
.breadcrumbs{font-size:13px;color:#56708f;margin:0 0 16px;letter-spacing:.1px}
.breadcrumbs a{color:var(--blue);font-weight:700}
.portal-welcome{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#fff,#f7fbff);box-shadow:var(--shadow)}
.portal-welcome h1{margin:7px 0 4px;font-size:32px;line-height:1.15;letter-spacing:-1px}
.portal-welcome p{margin:0;color:var(--muted);font-size:13px}
.eyebrow{min-height:22px;padding:4px 9px;border-radius:999px;background:#eaf2ff;color:var(--blue);font-size:9px;font-weight:900;letter-spacing:.45px;text-transform:uppercase}
.eyebrow.mint{background:#def8e9;color:#138d54}
.eyebrow.cyan{background:#def7fa;color:#0d9da8}

/* Catalog */
.catalog-page{max-width:var(--container)}
.catalog-hero{display:grid;grid-template-columns:1fr 420px;align-items:center;gap:35px;padding:16px 20px 10px}
.catalog-hero h1{font-size:36px;line-height:1.1;letter-spacing:-1.1px;margin:8px 0 8px}
.catalog-hero h1 span{color:var(--blue)}
.catalog-hero p{margin:0;color:var(--muted);font-size:13px}
.catalog-hero-art{height:150px;border-radius:22px;background:linear-gradient(135deg,#e7f0ff,#f8fbff);border:1px solid #d7e5f8;display:flex;align-items:center;justify-content:center;color:#87aef1;font-size:34px;font-weight:800;box-shadow:var(--shadow)}
.catalog-hero-art strong{color:var(--blue);font-size:58px;margin-left:10px}
.search-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 170px;gap:9px;padding:0 20px 18px}
.search-row input,.search-row select{min-height:48px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 14px;color:#142b4d;font-size:12px}
.catalog-layout{display:grid;grid-template-columns:215px minmax(0,1fr) 250px;gap:15px;align-items:start}
.filter-card,.results-card,.side-card,.summary-card,.cart-card{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.filter-card{padding:18px}
.filter-card h3,.side-card h3{font-size:14px;margin:0 0 13px}
.filter-card h4{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#72849d;margin:17px 0 8px}
.filter-card label{display:flex;align-items:center;gap:7px;font-size:11px;margin:8px 0;color:#314761}
.filter-card input{accent-color:var(--blue)}
.clear-btn{width:100%;margin-top:13px;min-height:36px;border:1px solid #bfcde0;border-radius:8px;background:#fff;color:#12305b;font-size:11px;font-weight:700}
.result-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:14px;border-bottom:1px solid var(--line)}
.result-tabs span{padding:8px 11px;border:1px solid #dbe5f1;background:#f8fbff;border-radius:999px;font-size:10px;font-weight:800;color:#405674;white-space:nowrap}
.result-tabs span.active{color:var(--blue);border-color:#9fc0ff;background:#edf4ff}
.domain-result{display:grid;grid-template-columns:48px minmax(0,1fr) 115px 125px;gap:13px;align-items:center;padding:13px 15px;border-bottom:1px solid #eaf0f7}
.domain-result:last-child{border-bottom:0}
.domain-result:hover{background:#fbfdff}
.tld-badge{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#1776ff,#62acff);font-size:9px;font-weight:900;box-shadow:inset 0 1px 4px rgba(255,255,255,.35)}
.domain-info{display:flex;flex-direction:column;gap:2px}
.domain-info strong{font-size:13px;color:#0b2245}
.domain-info small{font-size:10px;color:#75879e}
.domain-price{font-size:13px;font-weight:900;color:#13995c;white-space:nowrap}
.domain-price small{font-size:9px;font-weight:700;color:#708199}
.domain-result>div:last-child form{margin:0}
.domain-result .btn{width:100%}
.taken{display:inline-flex;justify-content:center;align-items:center;min-height:34px;padding:0 10px;border:1px solid #ccd8e8;border-radius:8px;color:#667892;font-size:10px;font-weight:800;background:#f8fafc}
.side-card{padding:18px}
.side-card>strong{display:block;font-size:20px;color:var(--green);margin:7px 0 12px}
.side-card .btn{width:100%}
.side-card hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.side-card ul{padding:0;margin:8px 0 0;list-style:none;display:grid;gap:8px}
.side-card li{font-size:11px;color:#314761}.side-card li:before{content:"✓";color:var(--green);font-weight:900;margin-right:7px}

/* Product pages */
.product-page{max-width:var(--container);padding-top:25px}
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:8px 20px 28px}
.product-hero h1{font-size:42px;line-height:1.06;letter-spacing:-1.5px;margin:12px 0}
.product-hero h1 span{color:var(--blue)}
.product-hero p{font-size:14px;line-height:1.65;color:var(--muted);max-width:650px;margin:0}
.hero-points{display:flex;flex-wrap:wrap;gap:17px;margin-top:18px;color:#204065;font-size:10px;font-weight:800}
.server-art{height:330px;border-radius:24px;background:linear-gradient(145deg,#eef5ff,#dceaff);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid #d3e2f6;box-shadow:var(--shadow)}
.rack,.host-rack{position:relative;width:270px;height:195px;padding:15px;display:grid;gap:8px;border-radius:20px;background:linear-gradient(150deg,#12315e,#061a3a);box-shadow:0 28px 65px rgba(16,55,105,.22);transform:rotate(-3deg)}
.rack:before,.host-rack:before{content:"";position:absolute;inset:-18px;background:radial-gradient(circle at 50% 45%,rgba(30,123,255,.28),transparent 58%);z-index:-1}
.rack span,.host-rack span{height:29px;border-radius:7px;background:linear-gradient(90deg,#173d71,#0c7bff 55%,#14305c);border:1px solid rgba(255,255,255,.08)}
.floating-note{position:absolute;right:27px;bottom:27px;width:245px;padding:19px 21px;border-radius:17px;background:#fff;border:1px solid #e0e9f6;box-shadow:0 18px 45px rgba(11,37,73,.16);font-size:12px;color:#153159}
.floating-note strong{display:block;font-size:16px;line-height:1.2;margin:3px 0 6px}.floating-note small{display:block;color:var(--muted);line-height:1.45}
.domain-inline{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:center;gap:17px;margin:0 20px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.domain-inline>strong{font-size:14px}.domain-inline form{display:grid;grid-template-columns:minmax(0,1fr) 110px 150px;gap:8px}.domain-inline input,.domain-inline select{height:43px;border:1px solid var(--line);border-radius:9px;padding:0 12px;background:#fff;color:var(--text);font-size:11px}
.plans{padding:58px 20px 5px}.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.plan-card{position:relative;padding:22px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.plan-card h3{font-size:17px;margin:0 0 6px}.plan-card>p{font-size:10px;line-height:1.45;color:var(--muted);min-height:31px;margin:0}.plan-price{font-size:25px;font-weight:900;color:var(--blue);margin-top:16px}.plan-price small{font-size:10px;color:#6d7d92;font-weight:700}.billed{font-size:10px;color:#78899f;margin-top:2px}.plan-card ul{list-style:none;padding:0;margin:14px 0 17px;display:grid;gap:7px}.plan-card li{font-size:10px;color:#2b415e}.popular-badge{position:absolute;top:13px;right:13px;padding:4px 7px;border-radius:999px;background:#e5f0ff;color:var(--blue);font-size:8px;font-weight:900}.plan-card.popular{border-color:#7eabff;box-shadow:0 12px 35px rgba(18,97,255,.13)}
.why-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:50px 20px 24px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.why-strip>div{padding:19px 17px;border-right:1px solid var(--line);display:grid;gap:5px}.why-strip>div:last-child{border-right:0}.why-strip strong{font-size:11px}.why-strip small{font-size:9px;color:var(--muted)}

/* Authentication */
.auth-page{min-height:520px;max-width:var(--content);margin:0 auto;padding:65px 22px 80px;display:grid;place-items:center}
.auth-card{width:min(520px,100%);padding:34px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 18px 48px rgba(18,46,88,.10)}
.auth-card h1{font-size:31px;line-height:1.1;letter-spacing:-.8px;margin:0 0 8px}.auth-card>p{font-size:12px;color:var(--muted);margin:0 0 18px}
.auth-card label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:800;margin:13px 0}.auth-card input{height:46px;border:1px solid var(--line);border-radius:10px;padding:0 13px;background:#fbfdff}.auth-card .btn{width:100%;margin-top:8px}.auth-card a{color:var(--blue);font-weight:800}

/* Portals / admin */
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.dash-card{padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.dash-card span{display:block;font-size:10px;color:var(--muted);font-weight:700}.dash-card strong{display:block;font-size:24px;margin:7px 0;color:#0c2145}.dash-card a{font-size:10px;color:var(--blue);font-weight:800}
.portal-links{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:20px 0}.portal-links a{display:flex;align-items:center;gap:8px;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:11px;font-weight:800;box-shadow:0 5px 18px rgba(19,52,94,.04)}.portal-links a:hover{border-color:#b4cdf9;color:var(--blue);transform:translateY(-1px)}
.admin-section{margin-top:28px}.admin-section .section-head{text-align:left;margin:0 0 15px}.admin-section .section-head h2{font-size:21px;margin:5px 0}.admin-table{width:100%;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.admin-row{display:grid;grid-template-columns:minmax(160px,1.2fr) repeat(3,minmax(110px,1fr)) auto;gap:10px;align-items:end;padding:13px 15px;border-bottom:1px solid #edf2f8;background:#fff}.admin-row:last-child{border-bottom:0}.admin-row>div{min-width:0}.admin-row strong{display:block;font-size:11px;line-height:1.35}.admin-row small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.admin-row label{font-size:9px;font-weight:800}.admin-row input,.admin-row select,.admin-row textarea{width:100%;margin-top:5px;min-height:34px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#fbfdff;color:#18304f;font-size:10px}.admin-row textarea{resize:vertical}.admin-row .btn{white-space:nowrap}.admin-row-product{grid-template-columns:1.1fr repeat(2,minmax(140px,1fr)) repeat(3,minmax(110px,1fr)) auto}.admin-row-wide{grid-template-columns:150px repeat(5,minmax(110px,1fr)) auto}.settings-grid{padding:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.settings-grid label{display:flex;flex-direction:column;gap:7px;font-size:10px;font-weight:800}.settings-grid input{height:42px;padding:0 11px;border:1px solid var(--line);border-radius:9px}
.report-filter{box-shadow:var(--shadow)!important;background:#fff!important}.notification-list{gap:12px}.notification-item{box-shadow:0 8px 24px rgba(19,53,95,.05)}

/* Cart / checkout */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}.cart-row{display:grid;grid-template-columns:1fr 120px 100px;gap:10px;align-items:center;padding:16px 18px;border-bottom:1px solid #edf2f8}.cart-row:last-child{border-bottom:0}.cart-row strong{font-size:12px}.cart-row small{font-size:9px;color:var(--muted)}.summary-card{padding:20px}.summary-card h2{font-size:16px;margin:0 0 15px}.summary-card .total,.total{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-top:1px solid var(--line);margin-top:14px;font-size:12px}.summary-card .btn{width:100%}.payment-option{background:#fff!important;border-color:var(--line)!important}.payment-option:hover{border-color:#9ebeff!important;background:#f8fbff!important}

/* Domain search / hosting responsive */
@media(max-width:1180px){
  .header{gap:13px}.header nav{gap:14px}.header nav>a,.header nav>.nav-dropdown>a{font-size:11px}
  .catalog-layout{grid-template-columns:195px minmax(0,1fr) 225px}.product-hero{grid-template-columns:1.05fr .95fr}.plan-grid{grid-template-columns:repeat(3,1fr)}
  .portal-links{grid-template-columns:repeat(4,1fr)}.footer-grid{gap:18px}
}
@media(max-width:1000px){
  .header{height:72px}.header nav{display:none}.mobile-menu{display:inline-flex;order:1}.logo{order:0}.header-actions{order:2;margin-left:auto}
  .catalog-hero{grid-template-columns:1fr}.catalog-hero-art{height:120px}.catalog-layout{grid-template-columns:210px minmax(0,1fr)}.catalog-layout .side-card{grid-column:1/-1}
  .domain-inline{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:repeat(2,1fr)}.plan-grid{grid-template-columns:repeat(2,1fr)}.why-strip{grid-template-columns:repeat(3,1fr)}.why-strip>div:nth-child(3){border-right:0}
  .portal-links{grid-template-columns:repeat(3,1fr)}.admin-row,.admin-row-wide,.admin-row-product{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-row>div:first-child{grid-column:1/-1}.admin-row .btn{justify-self:start}.footer-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .topbar{height:auto}.topbar-inner{min-height:38px;padding:7px 14px}.contact{display:none}.topbar-right{gap:7px}.top-btn{font-size:10px}
  .header{height:66px;padding:0 14px}.logo{width:94px;min-width:94px}.logo span{font-size:27px}.logo small{font-size:9px}.login{display:none}.portal{font-size:10px;padding:0 11px;min-height:38px}.cart{width:31px}.cart .icon{width:21px;height:21px}
  .header nav.open{display:flex;top:66px;padding:16px;gap:0}.header nav.open>a,.header nav.open>.nav-dropdown{width:100%}.header nav.open>a,.header nav.open>.nav-dropdown>a{padding:12px 4px;border-bottom:1px solid var(--line);font-size:12px}.header nav.open .nav-dropdown-menu{position:static!important;transform:none!important;width:100%!important;min-width:0!important;margin:0!important;padding:4px 0 4px 14px!important;background:transparent!important;box-shadow:none!important;border:0!important}.nav-dropdown-menu:before{display:none}
  .simple-page,.portal-page,.admin-page,.catalog-page,.product-page{padding:24px 14px 45px}.portal-welcome{display:block;padding:19px}.portal-welcome h1{font-size:27px}.portal-welcome .actions{margin-top:14px}
  .catalog-hero{padding:4px 3px 14px}.catalog-hero h1{font-size:30px}.catalog-hero-art{display:none}.search-row{grid-template-columns:1fr;padding:0 3px 15px}.search-row select{height:44px}.catalog-layout{grid-template-columns:1fr}.filter-card{order:2}.results-card{order:1}.catalog-layout .side-card{order:3;grid-column:auto}.domain-result{grid-template-columns:45px 1fr;gap:9px}.domain-result .domain-price,.domain-result>div:last-child{grid-column:2}.domain-result>div:last-child{justify-self:start;width:min(180px,100%)}
  .product-hero{grid-template-columns:1fr;padding:4px 3px 20px}.product-hero h1{font-size:32px}.server-art{height:260px}.floating-note{width:210px;right:14px;bottom:14px;padding:14px}.floating-note strong{font-size:14px}.domain-inline{margin:0 3px}.domain-inline form{grid-template-columns:1fr}.plans{padding:45px 3px 5px}.plan-grid{grid-template-columns:1fr}.plan-card{padding:20px}.why-strip{grid-template-columns:1fr 1fr;margin-left:3px;margin-right:3px}.why-strip>div{border-right:0;border-bottom:1px solid var(--line)}.why-strip>div:last-child{border-bottom:0}
  .dashboard-grid{grid-template-columns:1fr}.portal-links{grid-template-columns:1fr 1fr}.form-grid,.details-grid{grid-template-columns:1fr}.cart-layout{grid-template-columns:1fr}.custom-request-grid{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.footer{padding:38px 18px 18px}.footer-grid{grid-template-columns:1fr 1fr}.brand,.payments{grid-column:1/-1}
  .admin-table{overflow:visible;border:0;background:transparent;box-shadow:none}.admin-row,.admin-row-wide,.admin-row-product{display:grid;grid-template-columns:1fr;padding:16px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;box-shadow:var(--shadow)}.admin-row>div:first-child{grid-column:auto}.admin-row .btn{width:100%}
}
@media(max-width:430px){
  .topbar-inner>span{max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-right .currency-switch{display:none}.topbar-right{margin-left:auto}.portal{padding:0 9px}
  .auth-page{padding:35px 14px 50px}.auth-card{padding:24px 18px}.auth-card h1{font-size:27px}.portal-links{grid-template-columns:1fr}.why-strip{grid-template-columns:1fr}.final-cta{margin-left:0;margin-right:0}.section-head h2{font-size:25px}
}


/* ==========================================================================
   WDH STEP 01 — FINAL GLOBAL UI FOUNDATION
   ========================================================================== */
.topbar{height:38px}.topbar-inner{max-width:1380px;padding:0 28px;gap:18px}.topbar-trust,.contact a{display:inline-flex;align-items:center;gap:7px;color:#edf4ff;font-size:11px}.topbar-trust{white-space:nowrap}.contact{display:flex;align-items:center;gap:26px;margin-left:auto}.contact a{color:#edf4ff}.contact a:hover{color:#fff}.topbar-right{gap:8px}.top-control,.currency-control{height:27px;padding:0 8px;border:0;background:transparent;color:#edf4ff;display:inline-flex;align-items:center;gap:5px;font-size:10px;cursor:pointer}.lang-switch{position:relative}.lang-menu{display:none}.lang-menu.open{display:block}.theme-switch{display:flex;align-items:center;padding:2px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.035)}.theme-option{border:0;background:transparent;color:#b8c7dc;border-radius:999px;padding:4px 9px;display:inline-flex;align-items:center;gap:4px;font-size:9px;cursor:pointer}.theme-option.active{background:#102a51;color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.15)}.theme-icon{width:12px;height:12px}.currency-switch{padding-left:7px;border-left:1px solid rgba(255,255,255,.14)}.currency-control{font-weight:700}
.header{height:70px;position:relative;top:auto;max-width:none;padding:0 max(28px,calc((100% - 1380px)/2));gap:30px;background:#fff}.logo{width:118px;min-width:118px}.logo span{font-size:31px;color:#1161ed}.logo small{font-size:9px}.header nav{gap:20px}.header nav>a,.header nav>.nav-dropdown>a{font-size:12px;font-weight:750;color:#102347;padding:10px 1px}.header-actions{gap:10px}.header-actions .login,.header-actions .portal{min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;font-size:11px}.header-actions .login{border-color:#d2ddeb}.header-actions .portal{box-shadow:0 6px 18px rgba(18,97,255,.16)}.cart{width:31px;justify-content:center}.cart .icon{width:22px;height:22px}.cart b{right:-1px;top:-4px}.nav-dropdown-menu{z-index:100}.nav-dropdown-menu a{font-size:11px!important}
.footer{padding:48px max(28px,calc((100% - 1380px)/2)) 18px}.footer-grid{max-width:1380px;margin:0 auto;grid-template-columns:1.35fr repeat(4,.88fr) 1.2fr;gap:28px}.footer h4{font-size:12px}.footer a{font-size:10.5px}.brand>a{font-size:32px!important;color:#1470ff!important}.brand strong{display:block;color:#fff;font-size:10px}.brand p{font-size:10px;line-height:1.55}.social a{width:27px;height:27px;border-radius:50%;background:#102d55;display:grid;place-items:center;color:#fff!important;font-size:10px;font-weight:700;margin:0}.footer-bottom{max-width:1380px;margin:30px auto 0;padding-top:15px}.footer-bottom a{margin:0;color:#a9b9ce}.footer-bottom a:hover{color:#fff}.pill-link{font-size:9px!important}
[data-theme=dark] .header{background:var(--surface)}[data-theme=dark] .header nav a{color:#edf4ff}[data-theme=dark] .nav-dropdown-menu{background:#0d1c31!important}[data-theme=dark] .nav-dropdown-menu:before{background:#0d1c31}[data-theme=dark] .nav-dropdown-menu a{color:#edf4ff!important}[data-theme=dark] .nav-dropdown-menu a:hover{background:#132b4e!important}
@media(max-width:1180px){.topbar-inner{padding:0 20px}.header{padding:0 20px;gap:18px}.header nav{gap:14px}.header nav>a,.header nav>.nav-dropdown>a{font-size:11px}.footer-grid{gap:20px}}
@media(max-width:900px){.contact{display:none}.header{height:70px}.header nav{top:70px}.mobile-menu{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:auto;order:1}.logo{order:0}.header-actions{order:2;margin-left:0}.header-actions .login{display:none}.header nav.open{display:flex}.header nav.open .nav-dropdown{width:100%}.header nav.open .nav-dropdown-menu{display:none;position:static;transform:none!important;width:100%!important;min-width:0!important;margin:0!important;padding:4px 0 6px 14px!important;background:transparent!important;border:0;box-shadow:none}.header nav.open .nav-dropdown.open .nav-dropdown-menu{display:block}.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.topbar{height:auto}.topbar-inner{min-height:38px;padding:6px 14px}.topbar-trust{font-size:9px;max-width:48%;overflow:hidden;text-overflow:ellipsis}.topbar-right{margin-left:auto}.theme-switch{display:none}.currency-switch{display:none}.top-control{padding:0 4px}.header{height:66px;padding:0 14px}.header nav{top:66px}.header-actions .portal{min-height:36px;padding:0 10px;font-size:10px}.header-actions{gap:5px}.logo{width:94px;min-width:94px}.logo span{font-size:27px}.logo small{font-size:8px}.footer{padding:40px 18px 18px}.footer-grid{grid-template-columns:1fr 1fr;gap:24px}.brand,.payments{grid-column:1/-1}.footer-bottom{justify-content:flex-start;gap:11px}.footer-bottom span,.footer-bottom a{font-size:9px}}
@media(max-width:420px){.topbar-trust{max-width:70%}.topbar-right .lang-switch{display:none}.header-actions .portal{font-size:9px;padding:0 8px}.footer-grid{grid-template-columns:1fr}.brand,.payments{grid-column:1}}

/* ==========================================================================
   WDH STEP 01 — NAVIGATION HOVER + DARK MODE REFINEMENT
   ========================================================================== */
/* Keep desktop dropdowns open while the pointer travels from the nav item
   into the dropdown. The small invisible bridge removes the hover gap. */
@media (min-width: 901px){
  nav .nav-dropdown{position:relative;}
  nav .nav-dropdown::after{
    content:"";
    position:absolute;
    left:-12px;
    right:-12px;
    top:100%;
    height:14px;
    background:transparent;
    z-index:99;
  }
  nav .nav-dropdown-menu{top:calc(100% + 9px)!important;}
}

/* Dark mode: use quiet, low-contrast separators instead of sharp lines. */
html[data-theme="dark"]{
  --line:rgba(178,198,222,.14);
}
html[data-theme="dark"] *{
  border-color:rgba(178,198,222,.14);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .footer{border-color:transparent;}
html[data-theme="dark"] .portal,
html[data-theme="dark"] .primary,
html[data-theme="dark"] .hero-primary,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn[style*="background"]{
  border-color:transparent;
}
html[data-theme="dark"] .nav-dropdown-menu{
  border-color:rgba(178,198,222,.16)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.32)!important;
}
html[data-theme="dark"] .nav-dropdown-menu::before{
  border-left-color:rgba(178,198,222,.16)!important;
  border-top-color:rgba(178,198,222,.16)!important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .feature,
html[data-theme="dark"] .service,
html[data-theme="dark"] .tld,
html[data-theme="dark"] .domain-search,
html[data-theme="dark"] .results-card,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .settings-grid,
html[data-theme="dark"] .admin-table{
  border-color:rgba(178,198,222,.13)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  border-color:rgba(178,198,222,.16)!important;
}
html[data-theme="dark"] .cart-row,
html[data-theme="dark"] .admin-row,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .total{
  border-color:rgba(178,198,222,.11)!important;
}

@media (max-width:900px){
  nav .nav-dropdown::after{display:none;}
}



/* ==========================================================================
   WDH STEP 01 — REVISION 2: ROBUST DESKTOP DROPDOWNS + SUBTLE BORDERS
   ========================================================================== */

/* Desktop dropdown: JS keeps .open during pointer travel; CSS hover/focus
   remains available as a no-JS fallback. */
@media (min-width: 901px){
  .header,
  .header nav,
  nav .nav-dropdown{
    overflow: visible !important;
  }

  nav .nav-dropdown{
    position: relative !important;
  }

  /* A generous invisible hover bridge covers the travel path to the menu. */
  nav .nav-dropdown::after{
    content: "" !important;
    position: absolute !important;
    left: -18px !important;
    right: -18px !important;
    top: 100% !important;
    height: 28px !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 999 !important;
  }

  nav .nav-dropdown-menu{
    top: calc(100% + 9px) !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
  }

  nav .nav-dropdown.open .nav-dropdown-menu{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Very light separators in BOTH themes. Do not use bright white borders. */
:root{
  --line-soft: rgba(72, 96, 130, .10);
}

html[data-theme="dark"]{
  --line: rgba(180, 198, 220, .07) !important;
  --line-soft: rgba(180, 198, 220, .055) !important;
}

html[data-theme="dark"] *{
  border-color: var(--line-soft) !important;
}

/* Preserve intentionally borderless/transparent controls. */
html[data-theme="dark"] .portal,
html[data-theme="dark"] .primary,
html[data-theme="dark"] .hero-primary,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .nav-dropdown-menu::after{
  border-color: transparent !important;
}

/* Light mode: make the existing separators much softer too. */
html[data-theme="light"] *{
  border-color: var(--line-soft);
}

/* Do not make strong UI borders disappear. Keep them soft instead. */
html[data-theme="light"] .btn.primary,
html[data-theme="dark"] .btn.primary,
html[data-theme="light"] .portal,
html[data-theme="dark"] .portal{
  border-color: transparent !important;
}

/* Cart icon must remain visible in dark mode. */
.cart,
.cart .icon{
  color: var(--text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.cart .icon{
  stroke: currentColor !important;
}
html[data-theme="dark"] .cart,
html[data-theme="dark"] .cart .icon{
  color: #f6f8ff !important;
}
html[data-theme="dark"] .cart b{
  color: #fff !important;
  background: var(--blue) !important;
  border-color: transparent !important;
}

/* Dropdown surface should remain clearly separated without a bright border. */
html[data-theme="dark"] .nav-dropdown-menu{
  background: #0d1c31 !important;
  border-color: rgba(180,198,220,.07) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.38) !important;
}
html[data-theme="dark"] .nav-dropdown-menu::before{
  background: #0d1c31 !important;
  border-color: rgba(180,198,220,.07) !important;
}

/* ==========================================================================
   WDH STEP 01 — REVISION 3: THEME SURFACE + HEADER CONTROLS
   ========================================================================== */

/* 1) True dark page surface. Several original components used hard-coded
   white backgrounds, so the dark theme needs explicit surface overrides. */
html[data-theme="dark"],
html[data-theme="dark"] body{
  background:#071323 !important;
  color:#f6f8ff;
}

html[data-theme="dark"] .section,
html[data-theme="dark"] .simple-page,
html[data-theme="dark"] .portal-page,
html[data-theme="dark"] .admin-page,
html[data-theme="dark"] .catalog-page,
html[data-theme="dark"] .product-page,
html[data-theme="dark"] .auth-page{
  background:transparent !important;
}

/* Content cards / panels that were hard-coded white in the master CSS. */
html[data-theme="dark"] .feature,
html[data-theme="dark"] .service,
html[data-theme="dark"] .portal-welcome,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .results-card,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .cart-card,
html[data-theme="dark"] .domain-inline,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .why-strip,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .portal-links a,
html[data-theme="dark"] .admin-table,
html[data-theme="dark"] .settings-grid,
html[data-theme="dark"] .report-filter{
  background:var(--surface) !important;
  color:var(--text);
}

html[data-theme="dark"] .search-row input,
html[data-theme="dark"] .search-row select,
html[data-theme="dark"] .domain-inline input,
html[data-theme="dark"] .domain-inline select,
html[data-theme="dark"] .auth-card input,
html[data-theme="dark"] .admin-row input,
html[data-theme="dark"] .admin-row select,
html[data-theme="dark"] .admin-row textarea{
  background:#09192d !important;
  color:#f6f8ff !important;
}

html[data-theme="dark"] .result-tabs span,
html[data-theme="dark"] .result-tabs span.active{
  background:#102544 !important;
  color:#dce9fb !important;
  border-color:rgba(150,180,220,.09) !important;
}
html[data-theme="dark"] .domain-result:hover{background:#10233b !important;}
html[data-theme="dark"] .domain-info strong,
html[data-theme="dark"] .dash-card strong,
html[data-theme="dark"] label,
html[data-theme="dark"] .filter-card label,
html[data-theme="dark"] .plan-card li{
  color:#edf4ff !important;
}

/* Keep intentionally white visual elements white. */
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .floating-note,
html[data-theme="dark"] .payment-option{
  background:#fff !important;
  color:#0d1e40;
}

/* 2) Make Light/Dark selection unmistakable. */
.theme-switch{
  border-color:rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.025) !important;
}
.theme-option.active{
  background:#2b78ff !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(43,120,255,.28) !important;
}

/* 3) Dropdowns get a distinct deep-blue surface in BOTH themes. */
nav .nav-dropdown-menu,
.lang-menu,
.currency-menu{
  background:#0b2145 !important;
  color:#edf4ff !important;
  border:1px solid rgba(148,184,230,.08) !important;
  box-shadow:0 18px 42px rgba(4,18,40,.28) !important;
}
nav .nav-dropdown-menu::before{
  background:#0b2145 !important;
  border-left-color:rgba(148,184,230,.08) !important;
  border-top-color:rgba(148,184,230,.08) !important;
}
nav .nav-dropdown-menu a,
.lang-menu a,
.currency-menu button{
  color:#edf4ff !important;
}
nav .nav-dropdown-menu a:hover,
.lang-menu a:hover,
.currency-menu button:hover{
  background:#16396a !important;
  color:#fff !important;
}

/* 4) Language dropdown: remove the hover gap and keep it open while the
   pointer travels from the selector into the menu. */
@media (min-width:901px){
  .lang-switch,
  .currency-switch{position:relative;}
  .lang-switch::after,
  .currency-switch::after{
    content:"";
    position:absolute;
    left:-10px;
    right:-10px;
    top:100%;
    height:16px;
    background:transparent;
    z-index:90;
  }
  .lang-menu,
  .currency-menu{
    top:calc(100% + 2px) !important;
    margin-top:0 !important;
    z-index:200 !important;
  }
}

/* 5) Currency selector dropdown. */
.currency-menu{
  display:none;
  position:absolute;
  right:0;
  min-width:110px;
  padding:6px;
  border-radius:8px;
  z-index:200;
}
.currency-menu.open{display:block !important;}
.currency-menu button{
  width:100%;
  border:0 !important;
  background:transparent !important;
  border-radius:6px;
  padding:8px 10px;
  text-align:left;
  font-size:11px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.currency-menu button.active::after{
  content:"✓";
  color:#45df86;
  font-weight:900;
}

/* 6) Cart icon remains visible in dark mode. */
html[data-theme="dark"] .cart,
html[data-theme="dark"] .cart .icon,
html[data-theme="dark"] .cart svg{
  color:#f6f8ff !important;
  stroke:currentColor !important;
  fill:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
html[data-theme="dark"] .cart b{
  background:#2b78ff !important;
  color:#fff !important;
}

/* ==========================================================================
   WDH HOMEPAGE — TYPOGRAPHY / SPACING REFINEMENT
   User-approved homepage sizing. Applied after the existing theme rules so
   the homepage typography remains consistent in Bengali and English.
   ========================================================================== */
.header nav > .nav-dropdown > a{font-size:14px;}
.nav-dropdown-menu a{font-size:13px !important;}
.topbar-trust,.contact a{font-size:14px;}
.top-control,.currency-control{font-size:13px;}
.theme-option{font-size:12px;}
.header-actions .login{font-size:13px;}
.hero-copy > p{font-size:19px;}
.hero .actions .btn{font-size:16px;}
.trust{font-size:16px;}
.hero-inner{padding:55px 22px 79px;}
.actions{margin:32px 0;}
.domain-title h2{font-size:18px;}
.domain-title p{font-size:14px;}
.tld span{font-size:17px;}
.eyebrow{min-height:22px;}
.pricing{font-size:13px;}
.section-head h2{font-size:34px;}
.ficon .icon{width:54px;height:33px;}
.sicon .icon{width:30px;height:30px;}
.feature h3{font-size:16px;}
.feature p{font-size:14px;}
.feature a{font-size:14px;}
.section-head p{font-size:16px;}
.stats span{font-size:14px;}
.final-cta p{font-size:15px;}
.footer h4{font-size:16px;}
.footer a{font-size:14.5px;}
.brand p{font-size:16px;}
.footer-bottom{font-size:14px;}
.pill-link{font-size:13px !important;}

/* ==========================================================================
   WDH HOMEPAGE — RESPONSIVE TYPOGRAPHY SAFETY
   Desktop values above remain unchanged. These overrides protect tablet and
   mobile layouts while keeping Bengali and English readable.
   ========================================================================== */
@media (max-width: 1100px){
  .hero-copy > p{font-size:18px;}
  .trust{font-size:15px;}
  .section-head h2{font-size:32px;}
  .section-head p{font-size:15px;}
  .feature h3{font-size:15.5px;}
  .feature p,.feature a{font-size:13.5px;}
  .brand p{font-size:15px;}
  .footer h4{font-size:15.5px;}
  .footer a{font-size:14px;}
}

@media (max-width: 900px){
  .header nav > .nav-dropdown > a{font-size:14px;}
  .nav-dropdown-menu a{font-size:13px !important;}
  .hero-inner{padding:48px 22px 68px;}
  .hero-copy > p{font-size:17px;}
  .hero .actions .btn{font-size:15px;}
  .trust{font-size:14px;}
  .domain-title h2{font-size:18px;}
  .domain-title p{font-size:14px;}
  .section-head h2{font-size:30px;}
  .section-head p{font-size:15px;}
  .feature h3{font-size:16px;}
  .feature p,.feature a{font-size:14px;}
  .stats span{font-size:14px;}
  .final-cta p{font-size:15px;}
  .brand p{font-size:15px;}
  .footer h4{font-size:16px;}
  .footer a{font-size:14px;}
  .footer-bottom{font-size:13px;}
}

@media (max-width: 620px){
  .hero-inner{padding:42px 18px 64px;}
  .hero-copy > p{font-size:15px;line-height:1.65;}
  .hero .actions .btn{font-size:15px;}
  .actions{margin:26px 0;}
  .trust{font-size:13px;}
  .trust span{font-size:11px;}
  .domain-title h2{font-size:17px;}
  .domain-title p{font-size:13px;}
  .tld span{font-size:16px;}
  .pricing{font-size:12px;}
  .section-head h2{font-size:27px;line-height:1.2;}
  .section-head p{font-size:14px;line-height:1.6;}
  .feature h3{font-size:16px;}
  .feature p{font-size:14px;line-height:1.55;}
  .feature a{font-size:13px;}
  .stats span{font-size:13px;}
  .final-cta p{font-size:14px;line-height:1.55;}
  .footer h4{font-size:15px;}
  .footer a{font-size:13px;}
  .brand p{font-size:14px;line-height:1.55;}
  .footer-bottom{font-size:12px;}
  .pill-link{font-size:12px !important;}
}

@media (max-width: 420px){
  .hero-inner{padding:38px 16px 58px;}
  .hero-copy > p{font-size:14px;}
  .hero .actions .btn{font-size:14px;}
  .trust{font-size:12px;}
  .trust span{font-size:10px;}
  .domain-title h2{font-size:16px;}
  .domain-title p{font-size:12px;}
  .tld span{font-size:15px;}
  .pricing{font-size:11px;}
  .section-head h2{font-size:24px;}
  .section-head p{font-size:13px;}
  .feature h3{font-size:15px;}
  .feature p{font-size:13px;}
  .feature a{font-size:12px;}
  .stats span{font-size:12px;}
  .final-cta p{font-size:13px;}
  .footer h4{font-size:14px;}
  .footer a{font-size:12.5px;}
  .brand p{font-size:13px;}
  .footer-bottom{font-size:11px;}
}
@keyframes wdh-spin{to{transform:rotate(360deg)}}
.btn.is-loading{color:transparent!important;position:relative;pointer-events:none}
.btn.is-loading::after{
    content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
    border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
    animation:wdh-spin .7s linear infinite
}
.btn.secondary.is-loading::after,
.btn.is-loading.is-in-cart::after{border-color:rgba(23,105,255,.25);border-top-color:#1769ff}
.bundle-promo{max-width:1220px;margin:20px auto 0;padding:0 24px}
.bundle-promo-inner{
    display:flex;align-items:center;gap:16px;background:#ffffff;border:1px solid #bfeecf;
    border-radius:14px;padding:16px 20px
}
.bundle-promo-icon{
    width:42px;height:42px;border-radius:50%;background:#11a86b;color:#fff;
    display:flex;align-items:center;justify-content:center;flex:0 0 auto
}
.bundle-promo-icon .icon{width:20px;height:20px}
.bundle-promo-text{flex:1;min-width:0}
.bundle-promo-text h3{margin:0 0 3px;font-size:15px;color:#0d7a4c}
.bundle-promo-text p{margin:0;font-size:12px;color:#3f7a5f}
.bundle-promo .btn{white-space:nowrap;flex:0 0 auto}
html.dark .bundle-promo-inner,
body.dark .bundle-promo-inner{background:rgba(23,169,107,.12);border-color:rgba(23,169,107,.3)}
html.dark .bundle-promo-text h3,
body.dark .bundle-promo-text h3{color:#5be6a8}
html.dark .bundle-promo-text p,
body.dark .bundle-promo-text p{color:#8ec9ac}
@media(max-width:620px){.bundle-promo-inner{flex-wrap:wrap;text-align:center;justify-content:center}.bundle-promo-text{flex:1 1 100%}}

/* ============================================================
   2026 Header Redesign — unified dark navy top bar + main nav,
   new logo, account icon menu (Login/Client Portal merged),
   Light/Dark toggle removed (site is light-only).
   These rules intentionally come last so they win over the
   older scattered header/topbar declarations above.
   ============================================================ */
.topbar, .header{
    background:#0a1128 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
}
.topbar{border-bottom:0 !important}
.topbar-trust,
.contact a,
.contact span,
.top-control,
.currency-control{color:#c7d4e8 !important}
.contact a:hover,
.top-control:hover,
.currency-control:hover{color:#fff !important}
.currency-switch{border-left-color:rgba(255,255,255,.14) !important}

.logo{width:auto !important;min-width:0 !important;display:flex;align-items:center}
@media(min-width:901px){.logo{margin-top:-18px}}
.logo img{display:block;height:40px;width:auto}

@media(min-width:901px){
    .header nav > a,
    .header nav > .nav-dropdown > a{color:#e7edf7 !important}
    .header nav > a:hover,
    .header nav > .nav-dropdown > a:hover{color:#8fb2ff !important}
}
@media(max-width:900px){
    .header nav.open > a,
    .header nav.open > .nav-dropdown > a{color:#102347 !important}
}
.nav-chev{opacity:.85}

.mobile-menu{color:#e7edf7 !important}

.header-icon-img{width:20px;height:20px;object-fit:contain;display:block}
.account-control .header-icon-img{width:18px;height:18px}
.header-actions{gap:14px !important}
.cart{width:auto !important;height:auto !important;padding:0 !important;margin-top:0 !important}
.cart b{width:16px !important;height:16px !important;font-size:9px !important;right:-6px !important;top:-6px !important}
.cart{color:#fff !important}
.cart b{background:#5e28ef !important;color:#fff !important}
.account-switch{position:relative}
.account-control{
    width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.06);color:#fff;display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;padding:0
}
.account-control .icon{width:18px;height:18px}
.account-control:hover{background:rgba(255,255,255,.14)}
.account-menu{
    display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:170px;
    background:#fff;border:1px solid #e3ecf9;border-radius:10px;padding:6px;
    box-shadow:0 16px 34px rgba(10,17,40,.18);z-index:60
}
.account-menu.open{display:block}
.account-switch:hover .account-menu,
.account-switch:focus-within .account-menu{display:block}
.account-menu a{
    display:block;padding:9px 12px;border-radius:7px;font-size:13px;font-weight:600;color:#16365f;white-space:nowrap
}
.account-menu a:hover{background:#f3f7ff;color:#5e28ef}

@media(max-width:900px){
    .account-control{width:32px;height:32px}
}

/* Homepage domain-price chip overrides (given exact values) */
.tld{
    flex:1;display:flex;align-items:center;gap:7px;min-width:0;
    border:none !important;border-radius:11px;padding:7px 9px;background:none !important
}
.tld b{
    width:58px;height:30px;border-radius:8px !important;display:grid;place-items:center;
    color:#fff;font-size:17px;box-shadow:none !important
}
.domain-head input{font-size:16px}
.tld span small{font-size:11px;font-weight:600}

/* Header nav spacing / sizing overrides (given exact values) — desktop only,
   so they don't interfere with the mobile hamburger dropdown's own layout */
@media(min-width:901px){
    .header nav{
        gap:31px !important;
        justify-content:right !important;
        min-width:0 !important;
        overflow:visible !important;
        padding-right:80px !important;
    }
    .header nav > .nav-dropdown > a{
        font-size:16px !important;
        font-weight:600 !important;
    }
    .header-icon-img{
        width:26px !important;
        height:26px !important;
    }
    .account-control .header-icon-img{
        width:26px !important;
        height:26px !important;
    }
    .header-actions{
        gap:24px !important;
    }
    .nav-chev{
        width:17px !important;
        height:17px !important;
    }
}
/* Sensible, smaller mobile sizing for the same elements */
@media(max-width:900px){
    .header-icon-img{width:22px !important;height:22px !important}
    .account-control .header-icon-img{width:20px !important;height:20px !important}
    .header-actions{gap:12px !important}
}

/* Sticky header: top bar + main nav stay stacked and visible while scrolling */
.topbar{position:sticky !important;top:0 !important;z-index:46 !important}
.header{position:sticky !important;top:38px !important;z-index:45 !important}
@media(max-width:900px){
    .header{top:38px !important}
}

/* Fix: on mobile, .tld{flex:1;min-width:0} squeezes each price chip until
   its badge+text overlap, instead of letting the row scroll horizontally.
   Give chips a fixed content-based width on small screens so the row's
   existing overflow:auto scrolls instead. */
@media(max-width:600px){
    .domain-prices{flex-wrap:nowrap;max-width:100%}
    .tld{flex:0 0 auto !important;min-width:150px !important}
}

/* Mobile typography adjustments (given exact values) */
@media (max-width: 420px) {
    .trust span { font-size: 14px; }
}
@media (max-width: 420px) {
    .hero h1 { font-size: 34px; letter-spacing: -1.2px; }
}
@media (max-width: 420px) {
    .logo img { display: block; height: auto; }
}
@media (max-width: 620px) {
    .domain-title p { font-size: 13px; width: 270px; }
}
@media (max-width: 420px) {
    .section-head h2 { font-size: 28px; }
}
@media (max-width: 420px) {
    .feature h3 { font-size: 20px; }
}
@media (max-width: 420px) {
    .feature p { font-size: 14px; }
}
@media (max-width: 420px) {
    .feature a { font-size: 15px; font-weight: 600; }
}
.feature h3, .service h3 {
    font-size: 18px;
    line-height: 1.28;
    margin: 0 0 6px;
}
.feature p, .service p {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 10px;
}
.feature a, .service a {
    font-size: 14px;
    color: var(--blue);
    font-weight: 600;
}

/* On small screens, the domain search button just says "Search" */
.btn-text-short{display:none}
@media(max-width:480px){
    .btn-text-full{display:none}
    .btn-text-short{display:inline}
}
/* On very narrow screens even "Search" overflows the card — icon only */
@media(max-width:400px){
    .domain-head .btn-text-short{display:none}
    .domain-head button.btn.primary{padding:0 14px;min-width:44px}
}

/* Footer: keep 2 columns even on very small screens (was collapsing to 1) */
@media(max-width:420px){
    .footer-grid{grid-template-columns:1fr 1fr !important;gap:20px !important}
    .brand,.payments{grid-column:1/-1 !important}
}
.footer-logo-img{display:block;height:32px;width:auto;margin-bottom:10px}

/* Footer payment badges: bigger, more readable text */
.payments span{
    min-width:88px !important;height:42px !important;padding:0 12px !important;
    font-size:13px !important;font-weight:800 !important;border-radius:8px !important
}
.pay-badge.bank{font-size:11px !important}
@media(max-width:480px){
    .payments span{min-width:76px !important;height:38px !important;font-size:11px !important}
    .pay-badge.bank{font-size:9.5px !important}
}

/* Mobile: stats rows — fill the row width instead of a centered narrow
   cluster with dead space on both sides */
@media(max-width:620px){
    .stats>div{justify-content:flex-start !important;padding:4px 6px}
    .stats>div>div:last-child{flex:1}
}

/* Mobile: center-align the "Why Choose WDH" feature cards (icon + heading
   + text), which default to left-aligned block flow */
@media(max-width:620px){
    .feature{text-align:center;display:flex;flex-direction:column;align-items:center}
    .ficon{margin-left:auto;margin-right:auto}
}

/* ============================================================
   Colorful service cards ("Everything Your Business Needs")
   — full gradient card backgrounds with white icon/text, matching
   the approved colorful-card reference design.
   (Reversible: revert to the pre-2026-06 build to restore the plain
   white icon-left/text-right layout if this new version causes issues.)
   ============================================================ */
.service{
    position:relative;background:#fff;box-shadow:none !important;
    display:flex;flex-direction:column;align-items:flex-start;text-align:left;
    border-radius:16px;padding:20px;min-height:146px;width:100%;
    transition:box-shadow .25s ease
}
.service:hover{box-shadow:0 12px 26px rgba(20,30,60,.14) !important}
.service-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.service h3{color:#16365f !important;font-size:16px;line-height:1.25;margin:0}
.service p{color:#63738d !important;line-height:1.45;margin:0 0 10px;font-size:12px;width:100%}
.service-cta{
    color:var(--blue) !important;font-weight:800;text-decoration:none;
    font-size:12px;display:inline-block;width:100%
}
.service-cta:hover{text-decoration:underline}
.service .sicon{background:none !important;box-shadow:none !important;position:relative;z-index:1}
.service .sicon .icon{width:29px;height:29px}


html.dark .service h3,body.dark .service h3{color:#fff !important}
html.dark .service p,body.dark .service p{color:rgba(255,255,255,.85) !important}