/* *****************************************************

    ** Custom Stylesheet **

    NamasteHost brand redesign — Himalayan navy / crimson / gold
    Built on top of the Nexus theme's CSS custom-property system,
    so it cascades to every page, not just the homepage.

***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --white: #fff;

    /* Neutral shades — cooled toward navy so grays read as part of the brand */
    --neutral-50: #f7f7f9;
    --neutral-100: #eef0f4;
    --neutral-200: #dfe2ea;
    --neutral-300: #c3c8d6;
    --neutral-400: #8b91a8;
    --neutral-500: #5b6180;
    --neutral-600: #3f4560;
    --neutral-700: #2b2f47;
    --neutral-800: #1c2038;
    --neutral-900: #141b34;
    --neutral-950: #0c0f22;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: #fdecec;
    --primary-100: #fad0d1;
    --primary-200: #f2a6a8;
    --primary-300: #e57a7d;
    --primary-400: #d3494e;
    --primary-500: #c1272d;
    --primary-600: #a31f24;
    --primary-700: #8f1a1f;
    --primary-800: #6f1417;
    --primary-900: #4d0e10;
    --primary-950: #300a0b;

    /* Primary colors — NamasteHost crimson */
    --primary: #c1272d;
    --primary-lifted: #a31f24;
    --primary-accented: #8f1a1f;

    /* Secondary colors — Himalayan navy */
    --secondary: var(--neutral-900);
    --secondary-lifted: var(--neutral-800);
    --secondary-accented: var(--neutral-700);

    /* Brand accent — used in custom homepage/nav treatments below */
    --gold: #d4a017;
    --gold-lifted: #b98b13;
    --navy: #141b34;
    --navy-2: #1f2a52;

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.375rem;
    --rounding-lg: 0.6rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* *****************************************************
    NamasteHost — typography
***************************************************** */

html {
    width: 100%;
    max-width: 100%;
}

body {
    font-family: 'Manrope', 'Open Sans', sans-serif;
    color: var(--text);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

h1, h2, h3, h4, .card-title, .pricing-card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

#main-body h2.text-center {
    position: relative;
    font-size: 1.9rem;
    margin-bottom: 0.75rem !important;
}

#main-body h2.text-center::before {
    content: attr(data-kicker);
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}

/* *****************************************************
    Navbar + header
***************************************************** */

.utility-topbar {
    background: var(--navy);
    color: rgba(255,255,255,0.65);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.utility-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
}

.utility-topbar a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    margin-left: 18px;
}

.utility-topbar a:hover { color: #fff; }

.utility-topbar .status-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    margin-right: 7px;
    box-shadow: 0 0 6px #4ADE80;
}

.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 0 rgba(20,27,52,0.04);
}

.header::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--gold) 100%);
}

.utility-topbar {
    background: var(--navy);
    color: rgba(255,255,255,0.65);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.utility-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
}

.utility-topbar a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    margin-left: 18px;
    transition: color .15s ease;
}

.utility-topbar a:hover { color: var(--gold); }

.utility-topbar .status-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    margin-right: 7px;
    box-shadow: 0 0 6px #4ADE80;
}

.header .navbar-light {
    background: #fff;
    border-bottom: 1px solid var(--border-muted);
    padding-top: 6px;
    padding-bottom: 6px;
}

.header .navbar-brand {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--navy);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    transition: opacity .15s ease;
}

.header .navbar-brand:hover { opacity: .85; }

.header .navbar-brand .logo-img {
    max-height: 42px;
}

.header form.form-inline .input-group.search {
    background: var(--bg-muted);
    border-radius: 100px;
    border: 1px solid var(--border-muted);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.header form.form-inline .input-group.search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(193,39,45,0.1);
}

.header form.form-inline .input-group.search .btn {
    background: transparent;
    border: none;
    color: var(--text-lifted);
    padding-left: 16px;
}

.header form.form-inline .input-group.search .form-control {
    background: transparent;
    border: none;
    box-shadow: none;
}

.header .toolbar .cart-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--navy);
    color: #fff;
    border-radius: 100px;
    padding: 9px 16px;
    font-weight: 600;
    transition: background .15s ease, transform .15s ease;
}

.header .toolbar .cart-btn:hover {
    background: var(--primary);
    transform: translateY(-1px);
}

.header .toolbar .cart-btn .badge {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
}

.header button[data-toggle="collapse"] {
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-sm);
    color: var(--navy);
}

.main-navbar-wrapper {
    background: #fff;
}

.main-navbar-wrapper .navbar-nav {
    gap: 6px;
}

.main-navbar-wrapper .nav-link {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-accented);
    position: relative;
    padding: 14px 12px !important;
    transition: color .15s ease;
}

.main-navbar-wrapper .nav-link::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .2s ease;
}

.main-navbar-wrapper .nav-link:hover {
    color: var(--primary);
}

.main-navbar-wrapper .nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.main-navbar-wrapper .nav-item.active > .nav-link {
    color: var(--primary);
}

.main-navbar-wrapper .nav-item.active > .nav-link::after {
    transform: scaleX(1);
}

/* *****************************************************
    Homepage — hero / domain search
***************************************************** */

.home-domain-search {
    background: var(--navy) !important;
    position: relative;
    overflow: hidden;
    padding-bottom: 56px;
}

.home-domain-search::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 30%, transparent 85%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 30%, transparent 85%);
    pointer-events: none;
}

.home-domain-search .container { position: relative; z-index: 2; }

.home-domain-search h2 {
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    max-width: 720px;
    margin: 0 auto 14px;
}

.home-domain-search::after {
    content: '';
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    background:
        linear-gradient(var(--navy), var(--navy)) top / 100% 30px no-repeat,
        var(--bg);
    clip-path: polygon(0% 100%, 0% 40%, 5% 65%, 10% 30%, 15% 55%, 20% 20%, 26% 50%, 31% 35%, 37% 58%, 42% 15%, 47% 45%, 52% 28%, 58% 55%, 63% 32%, 70% 60%, 76% 22%, 82% 48%, 88% 18%, 94% 42%, 100% 25%, 100% 100%);
}

.home-domain-search .p-5 {
    padding-top: 4.5rem !important;
    padding-bottom: 0.5rem !important;
}

.home-domain-search .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(212,160,23,0.4);
    padding: 6px 14px;
    border-radius: 100px;
    margin: 0 auto 22px;
}

.home-domain-search .lead-copy {
    color: rgba(255,255,255,0.7);
    max-width: 480px;
    margin: 0 auto 8px;
    font-size: 15.5px;
    line-height: 1.6;
    text-align: center;
}

.home-domain-search .input-group-wrapper {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 8px;
}

.home-domain-search .input-group-wrapper .form-control {
    background: transparent;
    color: #fff;
    font-size: 15px;
    padding: 10px 14px;
}

.home-domain-search .input-group-wrapper .form-control::placeholder {
    color: rgba(255,255,255,0.4);
}

.home-domain-search .tld-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 640px;
    margin: 18px auto 0 !important;
}

.home-domain-search .tld-logos li {
    float: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 5px 12px;
    border-radius: 100px;
    padding-right: 25px;
}

.home-domain-search .tld-logos img { width: 22px; }

.home-domain-search .btn-link.float-right {
    float: none !important;
    display: block;
    text-align: center;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
}

.home-domain-search .btn-link.float-right:hover { color: var(--gold); }

/* *****************************************************
    Homepage — trust strip
***************************************************** */

.trust-strip {
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border-muted);
    padding: 28px 0;
    margin: -1.5rem 0 2rem;
}

.trust-strip .row { text-align: center; }

.trust-strip .stat {
    padding: 6px 0;
    border-right: 1px solid var(--border-muted);
}

.trust-strip .col:last-child .stat,
.trust-strip .col-6:nth-child(2n) .stat { border-right: none; }

.trust-strip .stat .num {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--navy);
}

.trust-strip .stat .num em {
    font-style: normal;
    color: var(--primary);
}

.trust-strip .stat .label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-lifted);
    margin-top: 2px;
}

/* *****************************************************
    Homepage — product cards v2
***************************************************** */

.product-grid-stylish {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}

.product-card-v2 {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-lg);
    padding: 38px 30px 32px;
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.product-card-v2::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.product-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 50px -24px rgba(20,27,52,0.32);
    border-color: transparent;
}

.product-card-v2:hover::before { transform: scaleX(1); }

.product-card-v2.accent-crimson::before { background: var(--primary); }
.product-card-v2.accent-navy::before { background: var(--navy); }
.product-card-v2.accent-gold::before { background: var(--gold); }

.product-card-v2.is-popular {
    border-color: var(--navy);
    box-shadow: 0 20px 44px -26px rgba(20,27,52,0.3);
}

.product-card-v2 .pc-ribbon {
    position: absolute;
    top: 18px;
    right: -34px;
    background: var(--navy);
    color: var(--gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 40px;
    transform: rotate(40deg);
}

.product-card-v2 .pc-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 22px;
}

.product-card-v2.accent-crimson .pc-icon { color: var(--primary); background: var(--primary-50); }
.product-card-v2.accent-navy .pc-icon { color: #fff; background: var(--navy); }
.product-card-v2.accent-gold .pc-icon { color: var(--gold-lifted); background: #fbf3df; }

.product-card-v2 .pc-title {
    font-size: 1.35rem;
    margin-bottom: 8px;
}

.product-card-v2 .pc-tagline {
    color: var(--text-lifted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 44px;
}

.product-card-v2 .pc-features {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    flex-grow: 1;
}

.product-card-v2 .pc-features li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--text-accented);
    padding: 6px 0;
    border-top: 1px dashed var(--border-muted);
}

.product-card-v2 .pc-features li:first-child { border-top: none; }

.product-card-v2 .pc-features i {
    color: var(--primary);
    font-size: 12px;
}

.product-card-v2.accent-navy .pc-features i,
.product-card-v2.is-popular .pc-features i { color: var(--navy); }

.product-card-v2.accent-gold .pc-features i { color: var(--gold-lifted); }

.product-card-v2 .pc-btn {
    display: block;
    text-align: center;
    padding: 12px 20px;
    border-radius: var(--rounding-md);
    font-weight: 700;
    font-size: 14px;
    background: var(--navy);
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}

.product-card-v2 .pc-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-1px);
}

.product-card-v2.accent-gold .pc-btn:hover { background: var(--gold-lifted); }

@media (max-width: 991px) {
    .product-grid-stylish { grid-template-columns: 1fr; }
}

/* *****************************************************
    Homepage — action icon buttons ("how can we help" / "your account")
***************************************************** */

.action-icon-btns a {
    background: var(--bg-muted);
    border: 1px solid var(--border-muted);
    font-weight: 600;
    color: var(--text-accented);
}

.action-icon-btns a:hover {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.action-icon-btns a:hover .ico-container i {
    color: var(--gold);
}

.action-icon-btns .ico-container i {
    color: var(--primary);
    transition: all 0.3s ease;
}

/* *****************************************************
    Footer
***************************************************** */

.footer {
    background: var(--navy);
    color: rgba(255,255,255,0.6);
    padding: 40px 0 30px;
}

.footer .nav-link {
    color: rgba(255,255,255,0.65);
}

.footer .nav-link:hover { color: var(--gold); }

.footer .copyright {
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    margin-top: 10px !important;
}

/* *****************************************************
    Buttons — global
***************************************************** */

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--primary-lifted) !important;
    border-color: var(--primary-lifted) !important;
}

/* *****************************************************
    Homepage — why us + CTA banner
***************************************************** */

.why-us-section {
    background: var(--navy);
    color: #fff;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 3rem;
    padding: 4rem 0;
}

.why-us-section h2 {
    color: #fff;
}

.why-us-section h2::before {
    color: var(--gold);
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--rounding-md);
    overflow: hidden;
}

.why-us-grid .feature {
    background: var(--navy-2);
    padding: 28px 24px;
}

.why-us-grid .feature .fnum {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
    margin-bottom: 12px;
}

.why-us-grid .feature h4 {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
}

.why-us-grid .feature p {
    font-size: 13.5px;
    color: rgba(255,255,255,0.62);
    line-height: 1.6;
    margin: 0;
}

.cta-banner {
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-accented) 100%);
    color: #fff;
    border-radius: var(--rounding-lg);
    padding: 44px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin: 3.5rem 0 1rem;
}

.cta-banner h3 {
    color: #fff;
    font-size: 1.5rem;
    margin: 0 0 6px;
}

.cta-banner p {
    color: rgba(255,255,255,0.85);
    margin: 0;
    font-size: 14.5px;
}

.cta-banner .btn {
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    white-space: nowrap;
    border: none;
}

.cta-banner .btn:hover { filter: brightness(1.08); color: var(--navy); }

@media (max-width: 767px) {
    .trust-strip .stat { border-right: none; margin-bottom: 14px; }
    .home-domain-search .p-5 { padding-top: 3rem !important; }
}