/* Global Brand Variables */
:root {
    --hashnet-dark: #0a1128;
    --hashnet-blue: #1a6fd4; 
    --hashnet-orange: #f26522; 
    --hashnet-card-bg: #ffffff;
    --hashnet-text-dark: #1f2937;
    --hashnet-light-bg: #f8f9fa;
}

/* 1. Hero Section */
.hashnet-hero-modern {
    background-color: var(--hashnet-dark);
    padding: 100px 0 120px; /* Extra bottom padding to push domain search up */
    color: #ffffff;
    border-radius: 0 0 40px 40px;
    margin-bottom: -60px; /* Pulls the domain search box up into the hero */
}

.badge-future {
    background: rgba(26, 111, 212, 0.2);
    color: #4a90e2;
    border: 1px solid rgba(26, 111, 212, 0.4);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 20px;
}

.hero-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 20px; color: #ffffff; }
.text-blue { color: var(--hashnet-blue); }
.text-orange { color: var(--hashnet-orange); }

.hero-subtitle { font-size: 1.1rem; max-width: 800px; margin: 0 auto 40px; color: #a0aec0; line-height: 1.6; }

.btn-solid-white { background-color: #ffffff; color: var(--hashnet-dark); padding: 12px 30px; border-radius: 30px; font-weight: 600; margin: 0 10px; transition: 0.3s; }
.btn-solid-white:hover { background-color: #f1f5f9; color: var(--hashnet-dark); text-decoration: none;}

.btn-outline-white { border: 1px solid rgba(255,255,255,0.3); color: #ffffff; padding: 12px 30px; border-radius: 30px; font-weight: 600; margin: 0 10px; transition: 0.3s; }
.btn-outline-white:hover { background-color: rgba(255,255,255,0.1); color: #ffffff; text-decoration: none;}

/* 2. Domain Search Container (Standalone) */
.domain-search-container {
    position: relative;
    z-index: 10;
}
.domain-search-standalone {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #e1e1e1;
}
.domain-search-standalone .form-control {
    border-radius: 30px 0 0 30px;
    padding: 25px 20px;
    border: 2px solid #e1e1e1;
    border-right: none;
    font-size: 1.1rem;
}
.domain-search-standalone .btn-orange {
    background-color: var(--hashnet-orange);
    color: white;
    border-radius: 0 30px 30px 0;
    font-weight: 700;
    border: 2px solid var(--hashnet-orange);
    transition: 0.3s;
}
.domain-search-standalone .btn-orange:hover { background-color: #d9551a; color: white;}

/* 3. Why Choose Us Section */
.section-title { font-size: 2.2rem; font-weight: 800; color: var(--hashnet-text-dark); margin-bottom: 10px; }
.feature-box {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    transition: 0.3s;
}
.feature-box:hover { background: var(--hashnet-light-bg); border-radius: 15px; }
.feature-icon {
    font-size: 2.5rem;
    color: var(--hashnet-blue);
    margin-right: 25px;
    min-width: 50px;
    text-align: center;
}
.feature-text h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; }
.feature-text p { color: #6b7280; font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* 4. Expertise Section */
.expertise-section { padding: 60px 30px; }
.section-subtitle { color: #6b7280; font-size: 1.1rem; }
.expertise-card-light {
    background: var(--hashnet-card-bg);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 35px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}
.expertise-card-light:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}
.corner-accent {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
    background-color: rgba(242, 101, 34, 0.1); 
    transform: rotate(45deg);
    transition: 0.3s;
}
.expertise-card-light:hover .corner-accent { background-color: var(--hashnet-orange); }
.icon-box {
    background: rgba(242, 101, 34, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.icon-box i { color: var(--hashnet-orange); font-size: 22px; }
.expertise-card-light h3 { font-size: 1.25rem; font-weight: 700; color: var(--hashnet-text-dark); margin-bottom: 10px; }
.expertise-card-light p { color: #6b7280; font-size: 0.95rem; margin: 0; }

/* 5. Hosting Pricing Tables */
.hosting-price-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: 0.3s;
    height: 100%;
    position: relative;
}
.hosting-price-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.featured-plan { border: 2px solid var(--hashnet-blue); }
.popular-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hashnet-blue);
    color: white;
    padding: 5px 20px;
    border-radius: 0 0 15px 15px;
    font-size: 0.85rem;
    font-weight: 700;
}
.plan-name { font-size: 1.5rem; font-weight: 700; color: var(--hashnet-dark); margin-bottom: 15px; }
.plan-price { font-size: 2.5rem; font-weight: 800; color: var(--hashnet-blue); margin-bottom: 25px; }
.plan-price span { font-size: 1rem; color: #6b7280; font-weight: 400; }
.plan-features { list-style: none; padding: 0; margin: 0 0 30px; text-align: left; }
.plan-features li { margin-bottom: 15px; font-size: 0.95rem; color: #4b5563; }
.plan-features li i { color: #10b981; margin-right: 10px; } /* Green checkmarks */

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .hero-buttons .btn { display: block; margin: 10px auto; width: 100%; }
    .domain-search-standalone { padding: 20px; }
    .feature-box { flex-direction: column; text-align: center; align-items: center; }
    .feature-icon { margin-right: 0; margin-bottom: 15px; }
}
/* Hide WHMCS Breadcrumb Navigation */
ol.breadcrumb, 
nav[aria-label="breadcrumb"], 
.nav-breadcrumb {
    display: none !important;
}