/* Real IT Solution - Main Stylesheet v2 */
/* Pure CSS - No Node.js Required */
@import url('variables.css');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased}
ul,ol{list-style:none}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
table{border-collapse:collapse}
h1,.h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-bottom:var(--spacing-6)}
h2,.h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:var(--font-weight-semibold);line-height:1.25;margin-bottom:var(--spacing-4)}
h3,.h3{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:var(--font-weight-semibold);line-height:1.3;margin-bottom:var(--spacing-3)}
p{margin-bottom:var(--spacing-4);line-height:var(--line-height-relaxed)}
p:last-child{margin-bottom:0}
.container{width:100%;max-width:var(--container-max-width);margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}
.row{display:flex;flex-wrap:wrap;margin-left:calc(var(--bs-gutter-x)*-0.5);margin-right:calc(var(--bs-gutter-x)*-0.5)}
.col{flex:1 0 0%}
.section{padding-top:var(--spacing-section);padding-bottom:var(--spacing-section)}
.section--gray{background-color:var(--color-gray-50)}
.section--dark{background-color:var(--color-secondary);color:var(--color-white)}

/* ===========================================
 HEADER
 =========================================== */

.site-header {
 position: relative;
 z-index: 1000;
 background: #fff;
}

/* Utility Bar */
.utility-bar {
 display: none;
 background: var(--color-secondary);
 color: var(--color-gray-300);
 font-size: var(--font-size-sm);
 padding: 0.5rem 0;
}
@media (min-width: 768px) {
 .utility-bar { display: block; }
}
.utility-bar__content {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 0.5rem;
}
.utility-bar__left,
.utility-bar__right {
 display: flex;
 align-items: center;
 gap: 1.5rem;
 flex-wrap: wrap;
}
@media (max-width: 639px) {
 .utility-bar__left, .utility-bar__right { gap: 0.75rem; font-size: 0.7rem; }
}
.utility-bar__item {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 color: var(--color-gray-300);
 white-space: nowrap;
 transition: color var(--transition-fast);
}
.utility-bar__item svg { width: 14px; height: 14px; flex-shrink: 0; }
.utility-bar__item:hover { color: #fff; }
.utility-bar__item--highlight {
 color: var(--color-accent);
 font-weight: var(--font-weight-semibold);
 animation: pulse-offer 2s infinite;
}
@keyframes pulse-offer {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.7; }
}
.utility-bar__item--client {
 padding: 0.375rem 0.75rem;
 background: var(--color-primary);
 color: #fff !important;
 border-radius: var(--border-radius-md);
 transition: all var(--transition-fast);
}
.utility-bar__item--client:hover {
 background: var(--color-primary-dark);
 transform: translateY(-1px);
}

/* Currency Dropdown */
.utility-bar__currency-wrapper {
 position: relative;
}
.utility-bar__currency-btn {
 display: flex;
 align-items: center;
 gap: 0.175rem;
 padding: 0.175rem 0.75rem;
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: var(--border-radius-md);
 color: var(--color-gray-300);
 font-size: var(--font-size-sm);
 font-weight: 600;
 cursor: pointer;
 transition: all var(--transition-fast);
}
.utility-bar__currency-btn:hover {
 background: rgba(255, 255, 255, 0.15);
 border-color: rgba(255, 255, 255, 0.3);
 color: #fff;
}
.utility-bar__currency-btn svg {
 flex-shrink: 0;
}
.currency-arrow {
 transition: transform 0.2s ease;
}
.utility-bar__currency-wrapper.is-open .currency-arrow {
 transform: rotate(180deg);
}
.currency-current {
 min-width: 32px;
 text-align: center;
}
.utility-bar__currency-dropdown {
 position: absolute;
 top: 100%;
 right: 0;
 margin-top: 0.5rem;
 background: #fff;
 border-radius: var(--border-radius-lg);
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
 overflow: hidden;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-8px);
 transition: all 0.2s ease;
 z-index: 1002;
 min-width: 120px;
}
.utility-bar__currency-wrapper.is-open .utility-bar__currency-dropdown {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.currency-option {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 width: 100%;
 padding: 0.75rem 1rem;
 background: transparent;
 border: none;
 color: var(--color-gray-700);
 font-size: var(--font-size-sm);
 font-weight: 500;
 cursor: pointer;
 transition: background-color 0.15s ease;
 text-align: left;
}
.currency-option:hover {
 background: var(--color-gray-50);
 color: var(--color-primary);
}
.currency-option.is-active {
 background: var(--color-primary-10);
 color: var(--color-primary);
 font-weight: 600;
}
.currency-flag {
 position: relative;
 display: inline-block;
 width: 18px;
 height: 18px;
 flex: 0 0 18px;
 overflow: hidden;
 border-radius: 50%;
 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
 vertical-align: -4px;
}
.currency-flag--us {
 background:
 linear-gradient(#3c3b6e 0 0) 0 0 / 9px 9px no-repeat,
 repeating-linear-gradient(
  to bottom,
  #b22234 0,
  #b22234 1.4px,
  #fff 1.4px,
  #fff 2.8px
 );
}
.currency-flag--bd {
 background: #006a4e;
}
.currency-flag--bd::after {
 content: "";
 position: absolute;
 width: 9px;
 height: 9px;
 left: 5px;
 top: 4.5px;
 border-radius: 50%;
 background: #f42a41;
}

/* Main Nav Client Area Button */
.main-nav__client-btn {
 display: none;
 white-space: nowrap;
 margin-left: 1rem;
 padding: 0.4rem 1rem;
 font-size: 0.8125rem;
 height: 36px;
 align-self: center;
 line-height: 1;
}
@media (min-width: 1024px) {
 .main-nav__client-btn { display: inline-flex; }
}

/* Main Header */
.main-header {
 position: relative;
 background: #fff;
 border-bottom: 1px solid var(--color-gray-100);
 transition: box-shadow 0.3s ease;
}
/* Sticky Header */
.site-header.is-sticky .main-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1001;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 animation: slideDown 0.3s ease;
}
@keyframes slideDown {
 from {
 transform: translateY(-100%);
 }
 to {
 transform: translateY(0);
 }
}
/* Adjust utility bar when sticky */
.site-header.is-sticky .utility-bar {
 display: none;
}
.main-header__content {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0.6rem 0;
}
.main-header__logo {
 display: block;
 flex-shrink: 0;
}
.main-header__logo img {
 height: 40px;
 width: auto;
 max-width: 220px;
 object-fit: contain;
}
@media (min-width: 1024px) {
 .main-header__logo img { height: 48px; }
}

/* Header Logo Image */
.site-header__logo-img {
 display: block;
 width: auto;
 height: auto;
 max-height: 54px;
 max-width: 220px;
 object-fit: contain;
}

@media (max-width: 640px) {
 .site-header__logo-img {
 max-height: 42px;
 max-width: 180px;
 }
}

/* Footer Logo */
.site-footer__logo-img {
 display: block;
 width: auto;
 height: auto;
 max-height: 58px;
 max-width: 230px;
 object-fit: contain;
}

/* ===========================================
 DESKTOP NAVIGATION
 =========================================== */

.main-nav {
 display: none;
 flex: 1;
 justify-content: flex-end;
}
@media (min-width: 1024px) {
 .main-nav { display: flex; }
}
.main-nav__list {
 display: flex;
 align-items: center;
 gap: 0;
}
.main-nav__item {
 position: static;
}
.main-nav__link {
 display: flex;
 align-items: center;
 gap: 0.25rem;
 padding: 1.25rem 1rem;
 font-size: 0.9375rem;
 font-weight: 600;
 color: #1f2937;
 transition: color var(--transition-fast);
 white-space: nowrap;
}
.main-nav__link:hover { color: var(--color-primary); }
.main-nav__arrow {
 width: 12px;
 height: 12px;
 transition: transform 0.2s ease;
 color: #6b7280;
}
.main-nav__item:hover .main-nav__arrow {
 transform: rotate(180deg);
 color: var(--color-primary);
}

/* Dropdown - Full width from .main-header */
.main-nav__dropdown {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 width: 100%;
 opacity: 0;
 visibility: hidden;
 transform: translateY(8px);
 transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
 z-index: 1000;
}
.main-nav__item:hover .main-nav__dropdown {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.main-nav__dropdown-inner {
 display: flex;
 gap: 2rem;
 padding: 2rem 3rem;
 max-width: var(--container-max-width);
 margin: 0 auto;
 background: #fff;
 border-top: 3px solid var(--color-primary);
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
}
.main-nav__column {
 flex: 1;
 min-width: 180px;
}
.main-nav__dropdown-item {
 display: flex;
 align-items: flex-start;
 gap: 0.75rem;
 padding: 0.75rem 1rem;
 border-radius: 10px;
 transition: all 0.15s ease;
}
.main-nav__dropdown-item:hover {
 background: var(--color-gray-50);
}
.main-nav__dropdown-item:hover .main-nav__dropdown-icon {
 background: var(--color-primary);
 color: #fff;
}
.main-nav__dropdown-item:hover .main-nav__dropdown-title {
 color: var(--color-primary);
}
.main-nav__dropdown-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 min-width: 40px;
 background: var(--color-gray-100);
 border-radius: 10px;
 color: var(--color-gray-700);
 transition: all 0.15s ease;
}
.main-nav__dropdown-icon svg {
 width: 20px;
 height: 20px;
}
.main-nav__dropdown-content {
 display: flex;
 flex-direction: column;
 gap: 0.125rem;
}
.main-nav__dropdown-title {
 font-size: 0.875rem;
 font-weight: 600;
 color: #1f2937;
 transition: color 0.15s ease;
}
.main-nav__dropdown-desc {
 font-size: 0.75rem;
 color: #6b7280;
}

/* Promo Box */
.main-nav__promo {
 flex: 0 0 300px;
 max-width: 300px;
 padding-left: 2rem;
 border-left: 1px solid var(--color-gray-200);
}
.main-nav__promo-box {
 display: flex;
 flex-direction: column;
 gap: 0.625rem;
 padding: 1.5rem;
 background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
 border-radius: 14px;
 color: #fff;
 position: relative;
 min-height: 200px;
 justify-content: flex-end;
 overflow: hidden;
}
.main-nav__promo-badge {
 position: absolute;
 top: 0;
 right: 0;
 background: var(--color-accent);
 color: #fff;
 font-size: 0.625rem;
 font-weight: 800;
 text-transform: uppercase;
 padding: 0.25rem 0.75rem;
 border-radius: 0 12px 0 10px;
}
.main-nav__promo-title {
 font-size: 1.125rem;
 font-weight: 700;
 margin: 0;
 color: #fff;
}
.main-nav__promo-price {
 display: flex;
 align-items: baseline;
 gap: 0.25rem;
}
.main-nav__promo-amount {
 font-size: 1.75rem;
 font-weight: 800;
 color: var(--color-primary);
}
.main-nav__promo-period {
 font-size: 0.875rem;
 opacity: 0.7;
}
.main-nav__promo-valid {
 font-size: 0.7rem;
 opacity: 0.7;
 margin: 0;
}

/* Email Dropdown - same mega menu style */
.main-nav__dropdown--simple {
 left: 0;
 right: 0;
 width: 100%;
}
.main-nav__dropdown--simple .main-nav__dropdown-inner {
 display: flex;
 flex-direction: row;
 padding: 2rem 3rem;
 gap: 2rem;
 max-width: var(--container-max-width);
}
.main-nav__dropdown--simple .main-nav__column {
 flex: 1;
}

/* Mobile Toggle */
.main-nav__toggle {
 display: flex;
 flex-direction: column;
 gap: 5px;
 width: 40px;
 height: 40px;
 justify-content: center;
 align-items: center;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 0.5rem;
}
@media (min-width: 1024px) {
 .main-nav__toggle { display: none; }
}
.main-nav__toggle span {
 display: block;
 width: 24px;
 height: 2px;
 background: #1f2937;
 border-radius: 2px;
 transition: all 0.2s ease;
}
.main-nav__toggle.is-active span:nth-child(1) {
 transform: rotate(45deg) translate(5px, 5px);
}
.main-nav__toggle.is-active span:nth-child(2) {
 opacity: 0;
}
.main-nav__toggle.is-active span:nth-child(3) {
 transform: rotate(-45deg) translate(5px, -5px);
}

/* ===========================================
 MOBILE MENU
 =========================================== */

.mobile-menu {
 position: fixed;
 top: 0;
 left: -100%;
 width: 100%;
 max-width: 400px;
 height: 100vh;
 background: #fff;
 z-index: 1001;
 overflow-y: auto;
 transition: left 0.3s ease;
 box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}
.mobile-menu.is-open {
 left: 0;
}
.mobile-menu__overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 1000;
 opacity: 0;
 visibility: hidden;
 transition: all 0.3s ease;
}
.mobile-menu__overlay.is-open {
 opacity: 1;
 visibility: visible;
}
.mobile-menu__header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 1rem 1.25rem;
 border-bottom: 1px solid var(--color-gray-100);
}
.mobile-menu__logo img {
 height: 36px;
 width: auto;
}
.mobile-menu__close {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 color: #6b7280;
 background: transparent;
 border: none;
 cursor: pointer;
}
.mobile-menu__close:hover {
 background: var(--color-gray-100);
 color: #1f2937;
}
.mobile-menu__nav {
 padding: 0.5rem 0;
}
.mobile-menu__section {
 border-bottom: 1px solid var(--color-gray-100);
}
.mobile-menu__trigger {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 padding: 1rem 1.25rem;
 font-size: 1rem;
 font-weight: 600;
 color: #1f2937;
 background: transparent;
 border: none;
 cursor: pointer;
 text-align: left;
}
.mobile-menu__trigger svg {
 width: 20px;
 height: 20px;
 transition: transform 0.2s ease;
 color: #6b7280;
}
.mobile-menu__trigger.is-open svg {
 transform: rotate(180deg);
}
.mobile-menu__submenu {
 max-height: 0;
 overflow: hidden;
 background: var(--color-gray-50);
 transition: max-height 0.3s ease;
}
.mobile-menu__submenu.is-open {
 max-height: 400px;
}
.mobile-menu__submenu a {
 display: block;
 padding: 0.75rem 2rem;
 font-size: 0.875rem;
 color: #4b5563;
}
.mobile-menu__submenu a:hover {
 color: var(--color-primary);
}
.mobile-menu__link {
 display: block;
 padding: 1rem 1.25rem;
 font-size: 1rem;
 font-weight: 600;
 color: #1f2937;
}
.mobile-menu__footer {
 padding: 1.25rem;
 border-top: 1px solid var(--color-gray-100);
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}

/* ===========================================
 BUTTONS
 =========================================== */

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--spacing-2);
 padding: var(--spacing-3) var(--spacing-6);
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-semibold);
 line-height: 1;
 border-radius: var(--border-radius-md);
 cursor: pointer;
 transition: all var(--transition-fast);
 text-decoration: none;
 border: 2px solid transparent;
}
.btn-primary {
 background: linear-gradient(135deg, #12b98f, #009877);
 color: #fff;
 border-color: var(--color-primary);
}
.btn-primary:hover {
 background: var(--color-primary-dark);
 border-color: var(--color-primary-dark);
 transform: translateY(-2px);
 color: #fff;
}
.btn-outline {
 background: transparent;
 color: var(--color-primary);
 border-color: var(--color-primary);
}
.btn-outline:hover {
 background: var(--color-primary);
 color: #fff;
}
.btn-sm {
 padding: 0.5rem 1rem;
 font-size: 0.8125rem;
}
.btn-block {
 width: 100%;
}

/* ===========================================
 HERO
 =========================================== */

.hero {
 position: relative;
 padding: clamp(4rem, 8vw, 8rem) 0;
 background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
 color: #fff;
 overflow: hidden;
}
.hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 pointer-events: none;
}
.hero__content {
 position: relative;
 z-index: 1;
 text-align: center;
 max-width: 800px;
 margin: 0 auto;
}
.hero__badge {
 display: inline-block;
 background: var(--color-accent);
 padding: var(--spacing-2) var(--spacing-4);
 border-radius: var(--border-radius-full);
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-semibold);
 margin-bottom: var(--spacing-6);
}
.hero__title {
 font-size: clamp(2.5rem, 6vw, 4rem);
 font-weight: var(--font-weight-bold);
 line-height: 1.1;
 margin-bottom: var(--spacing-6);
}
.hero__title span { color: var(--color-primary-light); }
.hero__subtitle {
 font-size: clamp(1.125rem, 2vw, 1.25rem);
 color: var(--color-gray-300);
 margin-bottom: var(--spacing-8);
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}
.hero__actions {
 display: flex;
 justify-content: center;
 gap: var(--spacing-4);
 flex-wrap: wrap;
}
.hero__stats {
 display: flex;
 justify-content: center;
 gap: var(--spacing-8);
 margin-top: var(--spacing-10);
 padding-top: var(--spacing-8);
 border-top: 1px solid rgba(255,255,255,0.1);
 flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat__value {
 font-size: clamp(1.5rem, 3vw, 2rem);
 font-weight: var(--font-weight-bold);
 color: var(--color-primary-light);
}
.hero-stat__label {
 font-size: var(--font-size-sm);
 color: var(--color-gray-400);
 margin-top: var(--spacing-1);
}

/* ===========================================
 DOMAIN SEARCH
 =========================================== */

.domain-search-section {
 background: #fff;
 padding: clamp(3rem, 6vw, 5rem) 0;
 margin-top: -3rem;
 position: relative;
 z-index: 2;
}
.domain-search-section .section-inner {
 background: #fff;
 border-radius: var(--border-radius-xl);
 box-shadow: var(--shadow-xl);
 padding: var(--spacing-8);
}
.domain-search { width: 100%; }
.domain-search__form { width: 100%; }
.domain-search__input-group {
 display: flex;
 gap: var(--spacing-3);
}
@media (max-width: 767px) {
 .domain-search__input-group { flex-direction: column; }
}
.domain-search__input {
 flex: 1;
 min-width: 200px;
 padding: var(--spacing-4) var(--spacing-5);
 border: 2px solid var(--color-gray-200);
 border-radius: var(--border-radius-md);
 font-size: var(--font-size-lg);
 transition: all var(--transition-fast);
}
.domain-search__input:focus {
 outline: none;
 border-color: var(--color-primary);
 box-shadow: 0 0 0 3px var(--color-primary-10);
}
.domain-search__input::placeholder { color: var(--color-gray-400); }
.domain-search__btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--spacing-2);
 padding: var(--spacing-4) var(--spacing-8);
 white-space: nowrap;
}
.domain-search__btn svg { width: 20px; height: 20px; }
.domain-search__pricing {
 display: flex;
 justify-content: center;
 gap: var(--spacing-4);
 flex-wrap: wrap;
 padding-top: var(--spacing-4);
 border-top: 1px solid var(--color-gray-100);
 margin-top: var(--spacing-4);
}
.domain-search__pricing-label {
 font-size: var(--font-size-sm);
 color: var(--color-gray-500);
 font-weight: var(--font-weight-medium);
}
.domain-search__tld {
 font-size: var(--font-size-sm);
 color: var(--color-gray-600);
 padding: var(--spacing-2) var(--spacing-3);
 border-radius: var(--border-radius-sm);
 background: var(--color-gray-50);
 transition: all var(--transition-fast);
 cursor: pointer;
}
.domain-search__tld:hover {
 background: var(--color-primary-10);
 color: var(--color-primary);
}

/* ===========================================
 TRUST BADGES
 =========================================== */

.trust-badges {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: var(--spacing-6);
}
.trust-badge {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--spacing-2);
 text-align: center;
}
.trust-badge__icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 48px;
 height: 48px;
 border-radius: 50%;
 background: var(--color-primary-10);
 color: var(--color-primary);
}
.trust-badge__icon svg { width: 24px; height: 24px; }
.trust-badge__text {
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-semibold);
 color: var(--color-gray-700);
}

/* ===========================================
 FEATURES
 =========================================== */

.feature-card {
 display: flex;
 flex-direction: column;
 padding: var(--spacing-6);
 background: #fff;
 border-radius: var(--border-radius-lg);
 box-shadow: var(--shadow-sm);
 transition: all var(--transition-base);
}
.feature-card:hover {
 box-shadow: var(--shadow-lg);
 transform: translateY(-4px);
}
.feature-card__icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 56px;
 height: 56px;
 border-radius: var(--border-radius-lg);
 background: linear-gradient(135deg, var(--color-primary-10), var(--color-primary-light));
 color: var(--color-primary);
 margin-bottom: var(--spacing-4);
}
.feature-card__title {
 font-size: var(--font-size-lg);
 font-weight: var(--font-weight-semibold);
 margin-bottom: var(--spacing-2);
}
.feature-card__description {
 font-size: var(--font-size-sm);
 color: var(--color-gray-600);
 line-height: var(--line-height-relaxed);
}

/* ===========================================
 PRICING
 =========================================== */

.pricing-card {
 position: relative;
 background: #fff;
 border-radius: var(--border-radius-xl);
 padding: var(--spacing-8);
 box-shadow: var(--shadow-md);
 border: 2px solid transparent;
 transition: all var(--transition-base);
 display: flex;
 flex-direction: column;
 height: 100%;
}
.pricing-card:hover {
 box-shadow: var(--shadow-xl);
 transform: translateY(-4px);
}
.pricing-card--featured {
 border-color: var(--color-primary);
 transform: scale(1.02);
}
@media (min-width: 1024px) {
 .pricing-card--featured { transform: scale(1.05); }
}
.pricing-card--featured:hover {
 transform: scale(1.05) translateY(-4px);
}
@media (min-width: 1024px) {
 .pricing-card--featured:hover { transform: scale(1.08) translateY(-4px); }
}
.pricing-card__badge {
 position: absolute;
 top: -12px;
 left: 50%;
 transform: translateX(-50%);
 background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
 color: #fff;
 padding: var(--spacing-1) var(--spacing-4);
 border-radius: var(--border-radius-full);
 font-size: var(--font-size-xs);
 font-weight: var(--font-weight-bold);
 text-transform: uppercase;
 white-space: nowrap;
}
.pricing-card__header {
 text-align: center;
 margin-bottom: var(--spacing-6);
 padding-bottom: var(--spacing-6);
 border-bottom: 1px solid var(--color-gray-100);
}
.pricing-card__name {
 font-size: var(--font-size-2xl);
 font-weight: var(--font-weight-bold);
 color: var(--color-gray-900);
 margin-bottom: var(--spacing-2);
}
.pricing-card__description {
 font-size: var(--font-size-sm);
 color: var(--color-gray-500);
}
.pricing-card__amount {
 font-size: clamp(2.5rem, 4vw, 3.5rem);
 font-weight: var(--font-weight-bold);
 color: var(--color-gray-900);
 line-height: 1;
}
.pricing-card__period {
 font-size: var(--font-size-base);
 color: var(--color-gray-500);
}
.pricing-card__features {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-3);
 margin-bottom: var(--spacing-6);
 flex-grow: 1;
}
.pricing-card__feature {
 display: flex;
 align-items: center;
 gap: var(--spacing-3);
 font-size: var(--font-size-sm);
 color: var(--color-gray-700);
}
.pricing-card__feature svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
.pricing-cards-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--spacing-6);
}
@media (min-width: 768px) {
 .pricing-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .pricing-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===========================================
 FAQ
 =========================================== */

/* ===========================================
 POPULAR HOSTING PLANS
 =========================================== */
.pricing-plans-section {
 padding: 28px 0 30px;
 background: #fff;
}

.pricing-plans-section__container {
 width: min(100% - 32px, 1180px);
 margin: 0 auto;
}

.pricing-plans-section__eyebrow {
 text-align: center;
 font-size: 12px;
 font-weight: 800;
 color: #2563eb;
 text-transform: uppercase;
 letter-spacing: .04em;
 margin-bottom: 6px;
}

.pricing-plans-section__title {
 text-align: center;
 font-size: clamp(28px, 3vw, 38px);
 line-height: 1.15;
 font-weight: 800;
 color: #07133d;
 margin: 0 0 10px;
}

.pricing-plans-section__subtitle {
 text-align: center;
 color: #526179;
 font-size: 14px;
 margin: 0 0 22px;
}

.pricing-plans-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 24px;
}

.hosting-price-card {
 display: flex;
 flex-direction: column;
 min-height: 330px;
 padding: 28px;
 background: #fff;
 border: 1px solid #e5e7eb;
 border-radius: 16px;
 box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
 position: relative;
 overflow: hidden;
}

.hosting-price-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 4px;
 background: var(--plan-color);
}

.hosting-price-card--blue {
 --plan-color: #2563eb;
 --plan-soft: #eff6ff;
}

.hosting-price-card--purple {
 --plan-color: #7c3aed;
 --plan-soft: #f5f3ff;
}

.hosting-price-card--orange {
 --plan-color: #f97316;
 --plan-soft: #fff7ed;
}

.hosting-price-card__header {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-bottom: 12px;
}

.hosting-price-card__icon {
 width: 42px;
 height: 42px;
 border-radius: 10px;
 display: grid;
 place-items: center;
 background: var(--plan-soft);
}

.hosting-price-card__icon svg {
 width: 25px;
 height: 25px;
 stroke: var(--plan-color);
}

.hosting-price-card__title {
 font-size: 18px;
 font-weight: 800;
 color: #07133d;
 margin: 0;
}

.hosting-price-card__subtitle {
 color: #526179;
 font-size: 15px;
 margin: 0 0 22px;
}

.hosting-price-card__features {
 display: grid;
 gap: 13px;
 margin: 0 0 26px;
 padding: 0;
 list-style: none;
}

.hosting-price-card__feature {
 display: flex;
 align-items: center;
 gap: 10px;
 color: #07133d;
 font-size: 14px;
 font-weight: 600;
}

.hosting-price-card__check {
 width: 16px;
 height: 16px;
 flex: 0 0 auto;
}

.hosting-price-card__check svg {
 width: 100%;
 height: 100%;
 stroke: var(--plan-color);
}

.hosting-price-card__price-label {
 color: #526179;
 font-size: 14px;
 margin-top: auto;
 margin-bottom: 4px;
}

.hosting-price-card__price-row {
 display: flex;
 align-items: baseline;
 gap: 4px;
 margin-bottom: 18px;
}

.hosting-price-card__price {
 font-size: 34px;
 line-height: 1;
 font-weight: 900;
 color: var(--plan-color);
}

.hosting-price-card__cycle {
 color: #07133d;
 font-size: 15px;
 font-weight: 700;
}

.hosting-price-card__button {
 height: 42px;
 border-radius: 7px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 font-size: 14px;
 transition: all .2s ease;
 border: 2px solid var(--plan-color);
 color: var(--plan-color);
 background: #fff;
 cursor: pointer;
 text-decoration: none;
}

.hosting-price-card__button:hover {
 background: var(--plan-color);
 color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
 .pricing-plans-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 640px) {
 .pricing-plans-section {
 padding: 20px 0 40px;
 }

 .pricing-plans-grid {
 grid-template-columns: 1fr;
 gap: 20px;
 }

 .hosting-price-card {
 min-height: unset;
 padding: 24px;
 }

 .hosting-price-card__price {
 font-size: 28px;
 }

 .hosting-price-card__button {
 width: 100%;
 }
}

.faq-accordion {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-4);
}
.faq-accordion__item {
 border-radius: var(--border-radius-lg);
 overflow: hidden;
 background: #fff;
 border: 1px solid var(--color-gray-200);
 transition: all var(--transition-base);
}
.faq-accordion__item:hover {
 border-color: var(--color-primary-20);
}
.faq-accordion__item[data-expanded="true"] {
 border-color: var(--color-primary);
}
.faq-accordion__trigger {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 padding: var(--spacing-5) var(--spacing-6);
 text-align: left;
 background: transparent;
 transition: background-color var(--transition-fast);
}
.faq-accordion__trigger:hover {
 background: var(--color-gray-50);
}
.faq-accordion__question {
 font-size: var(--font-size-base);
 font-weight: var(--font-weight-semibold);
 color: var(--color-gray-900);
 padding-right: var(--spacing-4);
}
.faq-accordion__icon {
 width: 20px;
 height: 20px;
 color: var(--color-gray-500);
 flex-shrink: 0;
 transition: transform var(--transition-base);
}
.faq-accordion__item[data-expanded="true"] .faq-accordion__icon {
 transform: rotate(180deg);
}
.faq-accordion__content {
 max-height: 0;
 overflow: hidden;
 transition: max-height var(--transition-base);
}
.faq-accordion__content[data-expanded="true"] {
 max-height: 500px;
}
.faq-accordion__answer {
 padding: 0 var(--spacing-6) var(--spacing-6);
 font-size: var(--font-size-sm);
 color: var(--color-gray-600);
 line-height: var(--line-height-relaxed);
}

/* ===========================================
 CTA BAND
 =========================================== */

.cta-band {
 padding: var(--spacing-section) 0;
 text-align: center;
 background: var(--color-gray-50);
}
.cta-band--gradient {
 background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
 color: #fff;
}
.cta-band--dark {
 background: var(--color-secondary);
 color: #fff;
}
.cta-band__headline {
 font-size: clamp(1.5rem, 3vw, 2.25rem);
 font-weight: var(--font-weight-semibold);
 line-height: 1.25;
 margin-bottom: var(--spacing-4);
}
.cta-band--gradient .cta-band__headline,
.cta-band--dark .cta-band__headline {
 color: #fff;
}
.cta-band__subheadline {
 font-size: var(--font-size-lg);
 color: var(--color-gray-600);
 margin-bottom: var(--spacing-8);
}
.cta-band--gradient .cta-band__subheadline,
.cta-band--dark .cta-band__subheadline {
 color: rgba(255,255,255,0.9);
}
.cta-band__actions {
 display: flex;
 justify-content: center;
 gap: var(--spacing-4);
 flex-wrap: wrap;
 margin-bottom: var(--spacing-6);
}
.cta-band__guarantee {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: var(--spacing-2);
 font-size: var(--font-size-sm);
 color: var(--color-gray-500);
 margin-top: var(--spacing-4);
}

/* ===========================================
 FOOTER
 =========================================== */

.site-footer {
 background: var(--color-secondary);
 color: var(--color-gray-400);
 padding-top: var(--spacing-12);
 padding-bottom: 0;
}
.site-footer__grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--spacing-8);
 padding-bottom: var(--spacing-10);
}
@media (min-width: 768px) {
 .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .site-footer__grid { grid-template-columns: 1.5fr repeat(4, 1fr); }
}
.site-footer__col {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-4);
}
.site-footer__logo img { height: 40px; width: auto; }
.site-footer__tagline {
 font-size: var(--font-size-sm);
 line-height: var(--line-height-relaxed);
 max-width: 280px;
}
.site-footer__heading {
 color: #fff;
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-semibold);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin-bottom: var(--spacing-2);
}
.site-footer__links {
 display: flex;
 flex-direction: column;
 gap: var(--spacing-2);
}
.site-footer__links a {
 font-size: var(--font-size-sm);
 transition: color var(--transition-fast);
}
.site-footer__links a:hover { color: #fff; }
.site-footer__social {
 display: flex;
 gap: var(--spacing-3);
}
.site-footer__social a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: var(--color-secondary-light);
 color: var(--color-gray-400);
 transition: all var(--transition-fast);
}
.site-footer__social a:hover {
 background: var(--color-primary);
 color: #fff;
}
.site-footer__bottom {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 32px;
 padding: 26px 0;
 border-top: 1px solid rgba(255,255,255,0.08);
}

.site-footer__copyright {
 flex: 1 1 auto;
 min-width: 0;
}

.site-footer__copyright p {
 margin: 0;
 color: rgba(255,255,255,0.62);
 font-size: 15px;
 line-height: 1.6;
}

.site-footer__payments {
 flex: 0 0 auto;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 14px;
 white-space: nowrap;
}

.site-footer__payments-title {
 color: rgba(255,255,255,0.72);
 font-size: 16px;
 font-weight: 600;
 line-height: 1;
}

.site-footer__payment-list {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: nowrap;
 list-style: none;
 margin: 0;
 padding: 0;
}

.site-footer__payment-item {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 auto;
 width: auto;
 height: auto;
 margin: 0;
 padding: 0;
 background: transparent;
 border: 0;
 overflow: visible;
}

.site-footer__payment-logo {
 display: block;
 width: auto;
 height: 28px;
 max-width: 76px;
 object-fit: contain;
 object-position: center;
 background: transparent;
 border: 0;
 border-radius: 0;
}

.site-footer__payment-logo--visa {
 height: 28px;
 max-width: 58px;
}

.site-footer__payment-logo--mastercard {
 height: 30px;
 max-width: 58px;
}

.site-footer__payment-logo--bkash {
 height: 30px;
 max-width: 72px;
}

/* Mobile - may wrap/stack */
@media (max-width: 767px) {
 .site-footer__bottom {
 flex-direction: column;
 align-items: flex-start;
 gap: 18px;
 }

 .site-footer__payments {
 flex-direction: column;
 align-items: flex-start;
 gap: 10px;
 white-space: normal;
 }

 .site-footer__payment-list {
 flex-wrap: wrap;
 }
}

/* ===========================================
 BREADCRUMB
 =========================================== */

.breadcrumb {
 padding: var(--spacing-4) 0;
}
.breadcrumb__list {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--spacing-2);
}
.breadcrumb__item {
 display: flex;
 align-items: center;
 gap: var(--spacing-2);
 font-size: var(--font-size-sm);
 color: var(--color-gray-500);
}
.breadcrumb__link {
 color: var(--color-gray-500);
 transition: color var(--transition-fast);
}
.breadcrumb__link:hover {
 color: var(--color-primary);
}
.breadcrumb__separator {
 color: var(--color-gray-400);
}

/* ===========================================
 HOSTING HERO SECTION
 =========================================== */

.hosting-hero {
 position: relative;
 background-color: #02134D;
 background-image: url('/assets/images/banner.webp');
 background-size: cover;
 min-height: 520px;
 overflow: hidden;
 padding-top: 2rem;
 padding-bottom: 8rem;
}

.hosting-hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background-image:
 radial-gradient(circle at 20% 80%, rgba(0, 179, 120, 0.08) 0%, transparent 50%),
 radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
 pointer-events: none;
}

.hosting-hero::after {
 content: '';
 position: absolute;
 inset: 0;
 background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
 background-size: 30px 30px;
 pointer-events: none;
}

.hosting-hero__container {
 position: relative;
 z-index: 1;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 var(--container-padding);
}

.hosting-hero__wrapper {
 display: grid;
 grid-template-columns: 1fr;
 gap: 3rem;
 align-items: center;
}
@media (min-width: 1024px) {
 .hosting-hero__wrapper {
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 }
}

.hosting-hero__content {
 text-align: center;
}
@media (min-width: 1024px) {
 .hosting-hero__content {
 text-align: left;
 }
}

.hosting-hero__badge {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 background: rgba(0, 179, 120, 0.15);
 color: var(--color-primary-light);
 padding: 0.5rem 1rem;
 border-radius: 9999px;
 font-size: 0.875rem;
 font-weight: 600;
 margin-bottom: 1.5rem;
 border: 1px solid rgba(0, 179, 120, 0.3);
}

.hosting-hero__title {
 font-size: clamp(2rem, 5vw, 3rem);
 font-weight: 800;
 color: #fff;
 line-height: 1.15;
 margin-bottom: 1.25rem;
}

.hosting-hero__accent {
 color: var(--color-primary);
}

.hosting-hero__subtitle {
 font-size: 1.0625rem;
 color: rgba(255, 255, 255, 0.8);
 line-height: 1.7;
 margin-bottom: 2rem;
 max-width: 540px;
}
@media (min-width: 1024px) {
 .hosting-hero__subtitle {
 margin-left: 0;
 margin-right: 0;
 }
}

.hosting-hero__features {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 1rem 1.5rem;
}
@media (min-width: 1024px) {
 .hosting-hero__features {
 justify-content: flex-start;
 }
}

.hosting-hero__feature {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 color: rgba(255, 255, 255, 0.9);
 font-size: 0.9375rem;
 font-weight: 500;
}

.hosting-hero__feature svg {
 width: 18px;
 height: 18px;
 color: var(--color-primary);
 flex-shrink: 0;
}

/* Hero Visual / Server Section */
.hosting-hero__visual {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: flex-end;
}

.hosting-hero__server {
 position: relative;
 width: 100%;
 max-width: 400px;
}

/* Server Cabinet */
.server-cabinet {
 position: relative;
 background: linear-gradient(180deg, #1e2a4a 0%, #141d33 100%);
 border-radius: 16px;
 padding: 1.5rem;
 border: 1px solid rgba(59, 130, 246, 0.2);
 box-shadow:
 0 20px 60px rgba(0, 0, 0, 0.4),
 inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.server-rack {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.server-unit {
 display: flex;
 align-items: center;
 gap: 12px;
 background: linear-gradient(180deg, #0d1526 0%, #0a1020 100%);
 border-radius: 8px;
 padding: 10px 14px;
 border: 1px solid rgba(59, 130, 246, 0.15);
}

.server-leds {
 display: flex;
 gap: 4px;
}

.server-led {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #1a3a5c;
}

.server-led--blue {
 background: #3b82f6;
 box-shadow: 0 0 8px #3b82f6;
 animation: led-pulse 2s infinite;
}

.server-led--green {
 background: #10b981;
 box-shadow: 0 0 8px #10b981;
 animation: led-pulse 1.5s infinite;
}

.server-led--yellow {
 background: #eab308;
 box-shadow: 0 0 8px #eab308;
 animation: led-pulse 3s infinite;
}

@keyframes led-pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
}

.server-info {
 flex: 1;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.server-label {
 font-size: 0.6875rem;
 color: rgba(255, 255, 255, 0.5);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.server-status {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 0.6875rem;
 color: #10b981;
 font-weight: 600;
}

.server-status::before {
 content: '';
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: #10b981;
 animation: status-blink 1s infinite;
}

@keyframes status-blink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.3; }
}

/* Cloud Effect */
.cloud-effect {
 position: absolute;
 bottom: -20px;
 left: 50%;
 transform: translateX(-50%);
 width: 120%;
 height: 80px;
 background: radial-gradient(ellipse at center bottom, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
 pointer-events: none;
}

/* Stats Card */
.hosting-hero__stats-card {
 position: absolute;
 bottom: 20px;
 right: -10px;
 background: #fff;
 border-radius: 14px;
 padding: 1.25rem;
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 min-width: 200px;
 z-index: 10;
}
@media (max-width: 1023px) {
 .hosting-hero__stats-card {
 position: relative;
 right: auto;
 bottom: auto;
 margin-top: 1.5rem;
 }
}

.stats-card__row {
 display: flex;
 gap: 1rem;
 padding-bottom: 0.75rem;
 margin-bottom: 0.75rem;
 border-bottom: 1px solid var(--color-gray-100);
}
.stats-card__row:last-child {
 border-bottom: none;
 padding-bottom: 0;
 margin-bottom: 0;
}

.stats-card__item {
 flex: 1;
}

.stats-card__label {
 font-size: 0.6875rem;
 font-weight: 700;
 color: var(--color-gray-500);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 margin-bottom: 0.25rem;
}

.stats-card__value {
 font-size: 1rem;
 font-weight: 800;
 color: var(--color-gray-900);
}

.stats-card__value--green { color: #10b981; }
.stats-card__value--blue { color: #3b82f6; }
.stats-card__value--purple { color: #8b5cf6; }

.stats-card__chart {
 display: flex;
 align-items: flex-end;
 gap: 2px;
 height: 16px;
 margin-top: 0.25rem;
}

.stats-card__bar {
 width: 4px;
 background: var(--color-gray-200);
 border-radius: 2px;
}

.stats-card__bar--green { background: #10b981; }
.stats-card__bar--blue { background: #3b82f6; }
.stats-card__bar--purple { background: #8b5cf6; }

/* ===========================================
 DOMAIN SEARCH WRAP
 =========================================== */

.domain-search-wrap {
 position: relative;
 z-index: 20;
 margin-top: -5rem;
 padding: 0 var(--container-padding);
}

.domain-search-card {
 background: #fff;
 border-radius: 16px;
 padding: 2rem;
 box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
 max-width: 1100px;
 margin: 0 auto;
}

.domain-search-card__header {
 text-align: center;
 margin-bottom: 1.5rem;
}

.domain-search-card__title {
 font-size: 1.25rem;
 font-weight: 700;
 color: var(--color-gray-900);
 margin-bottom: 0.25rem;
}

.domain-search-card__subtitle {
 font-size: 0.875rem;
 color: var(--color-gray-500);
}

.domain-search-card__form {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 align-items: center;
 justify-content: center;
 margin-bottom: 1.5rem;
}

.domain-search-card__input-wrap {
 display: flex;
 flex: 1;
 min-width: 250px;
 max-width: 400px;
 border: 2px solid var(--color-gray-200);
 border-radius: var(--border-radius-md);
 overflow: hidden;
 transition: border-color var(--transition-fast);
}

.domain-search-card__input-wrap:focus-within {
 border-color: var(--color-primary);
}

.domain-search-card__input {
 flex: 1;
 padding: 0.875rem 1rem;
 border: none;
 background: transparent;
 font-size: 1rem;
 min-width: 0;
}

.domain-search-card__input:focus {
 outline: none;
}

.domain-search-card__select {
 padding: 0.875rem 0.75rem;
 border: none;
 border-left: 1px solid var(--color-gray-200);
 background: var(--color-gray-50);
 font-size: 0.9375rem;
 font-weight: 600;
 cursor: pointer;
 min-width: 80px;
}

.domain-search-card__select:focus {
 outline: none;
}

.domain-search-card__button {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.875rem 1.5rem;
 background: #06163d;
 color: #fff;
 font-size: 0.9375rem;
 font-weight: 600;
 border-radius: var(--border-radius-md);
 border: none;
 cursor: pointer;
 transition: all var(--transition-fast);
 white-space: nowrap;
}

.domain-search-card__button:hover {
 background: #0a1f4d;
 transform: translateY(-1px);
}

.domain-search-card__button svg {
 width: 18px;
 height: 18px;
}

/* TLD Prices */
.domain-search-card__prices {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.75rem;
}

.domain-price-box {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 0.75rem 1.25rem;
 background: var(--color-gray-50);
 border: 1px solid var(--color-gray-200);
 border-radius: var(--border-radius-md);
 min-width: 90px;
 transition: all var(--transition-fast);
}

.domain-price-box:hover {
 background: #fff;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 transform: translateY(-2px);
}

.domain-price-box__tld {
 font-size: 0.9375rem;
 font-weight: 700;
 margin-bottom: 0.25rem;
}

.domain-price-box__tld--com { color: #3b82f6; }
.domain-price-box__tld--net { color: #1f2937; }
.domain-price-box__tld--org { color: #6b7280; }
.domain-price-box__tld--bd { color: #10b981; }
.domain-price-box__tld--xyz { color: #8b5cf6; }

.domain-price-box__price {
 font-size: 0.8125rem;
 font-weight: 600;
 color: var(--color-gray-700);
}.domain-search-wrap {
 position: relative;
 z-index: 5;
 margin-top: -60px;
}

.domain-search-card {
 max-width: 1180px;
 margin: 0 auto;
 background: #fff;
 border-radius: 12px;
 box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
 padding: 18px 22px;
}

.domain-search-card__inner {
 display: flex;
 align-items: center;
 gap: 24px;
}

.domain-search-card__search {
 flex: 1 1 58%;
 min-width: 0;
}

.domain-search-card__label {
 display: block;
 font-weight: 700;
 font-size: 14px;
 color: #07133d;
 margin-bottom: 10px;
}

.domain-search-card__form {
 display: flex;
 align-items: center;
 gap: 0;
 height: 44px;
}

/* Input + select grouped together */
.domain-search-card__input-row {
 display: flex;
 flex: 1;
 height: 44px;
}

.domain-search-card__input {
 flex: 1;
 min-width: 0;
 padding: 0 1rem;
 border: 1px solid #cfd6e4;
 border-right: none;
 border-radius: 6px 0 0 6px;
 height: 44px;
 font-size: 0.9375rem;
 background: #fff;
}

.domain-search-card__input:focus {
 outline: none;
 border-color: #061947;
}

.domain-search-card__select {
 padding: 0 0.625rem;
 border: 1px solid #cfd6e4;
 border-left: none;
 border-right: none;
 border-radius: 0;
 height: 44px;
 background: #f9fafb;
 font-size: 0.9375rem;
 font-weight: 600;
 min-width: 82px;
 cursor: pointer;
}

.domain-search-card__select:focus {
 outline: none;
}

.domain-search-card__button {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 height: 44px;
 padding: 0 1.5rem;
 background: #061947;
 color: #fff;
 font-size: 0.9375rem;
 font-weight: 600;
 border-radius: 0 6px 6px 0;
 border: none;
 cursor: pointer;
 white-space: nowrap;
 transition: background 0.15s ease;
 flex-shrink: 0;
}

.domain-search-card__button:hover {
 background: #0a2460;
}

.domain-search-card__divider {
 width: 1px;
 height: 56px;
 background: #cfd6e4;
 flex: 0 0 auto;
}

.domain-search-card__prices {
 display: flex;
 gap: 12px;
 flex: 0 0 auto;
}

.domain-price-box {
 width: 78px;
 height: 68px;
 border: 1px solid #e5e7eb;
 border-radius: 10px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 background: #fff;
 box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.domain-price-box__tld {
 font-weight: 600;
 margin-bottom: 2px;
}

.domain-price-box__tld--com {
 color: #3b82f6;
}

.domain-price-box__tld--net {
 color: #f97316;
}

.domain-price-box__tld--org {
 color: #f97316;
}

.domain-price-box__tld--bd {
 color: #22c55e;
}

.domain-price-box__tld--xyz {
 color: #a855f7;
}

.domain-price-box__price {
 font-size: 0.875rem;
 font-weight: 600;
 color: #061947;
}

.trust-strip {
 background: #f8f9fa;
 padding: 1.25rem 0;
 height: 76px;
 display: flex;
 align-items: center;
 margin-top: 20px;
}

.trust-strip__inner {
 max-width: 1180px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

.trust-strip__items {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 2.5rem;
}

.trust-strip__item {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.770rem;
 font-weight: 500;
 color: var(--color-gray-700);
}

.trust-strip__item svg {
 width: 18px;
 height: 18px;
 color: #061947;
 flex-shrink: 0;
}

.trust-strip__divider {
 width: 1px;
 height: 18px;
 background: #d1d5db;
}

.popular-hosting-label {
 display: block;
 text-align: center;
 margin: 1.5rem 0;
 font-size: 0.875rem;
 color: #22c55e;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
@media (max-width: 767px) {
 .trust-strip__divider {
 display: none;
 }
}

/* Responsive */
@media (max-width: 767px) {
 .hosting-hero {
 padding-bottom: 6rem;
 }

 .domain-search-card {
 padding: 1.25rem;
 }

 .domain-search-card__inner {
 flex-direction: column;
 align-items: stretch;
 gap: 16px;
 }

 .domain-search-card__divider {
 width: 100%;
 height: 1px;
 }

 .domain-search-card__form {
 flex-direction: column;
 height: auto;
 gap: 8px;
 }

 .domain-search-card__input-row {
 width: 100%;
 height: 44px;
 }

 .domain-search-card__input {
 border-radius: 6px 0 0 6px !important;
 border-right: none !important;
 }

 .domain-search-card__select {
 border-radius: 0 6px 6px 0 !important;
 border-left: none !important;
 border-right: 1px solid #cfd6e4 !important;
 }

 .domain-search-card__button {
 width: 100%;
 border-radius: 6px !important;
 justify-content: center;
 }

 .domain-search-card__prices {
 flex-wrap: wrap;
 gap: 8px;
 justify-content: center;
 }

 .domain-price-box {
 width: 70px;
 height: 60px;
 }

 .trust-strip__items {
 flex-wrap: wrap;
 gap: 0.75rem 1.25rem;
 justify-content: center;
 }
}