/* ==========================================================================
   SeloraCloud — "Selora" theme for WHMCS 9 (twenty-one base)
   Deep Ocean dark redesign via custom.css (official override point).
   Every Bootstrap-4 token the base theme uses is remapped to the
   SeloraCloud brand palette. No template files modified.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts (self-hosted in theme fonts/)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal; font-weight: 300 700; font-display: swap;
    src: url('../fonts/SpaceGroteskVar.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal; font-weight: 300 700; font-display: swap;
    src: url('../fonts/JetBrainsMonoVar.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   1. Token remap — drive the whole base theme dark
   -------------------------------------------------------------------------- */
:root {
    --white: #0c131c;

    /* neutral ramp -> deep ocean navy */
    --neutral-50:  #e8f1f4;
    --neutral-100: #cfe0e8;
    --neutral-200: #93a8b8;
    --neutral-300: #5f7688;
    --neutral-400: #47606f;
    --neutral-500: #2a4258;
    --neutral-600: #1a2836;
    --neutral-700: #131e2b;
    --neutral-800: #0c131c;
    --neutral-900: #070c12;
    --neutral-950: #04070b;

    /* primary ramp -> teal */
    --primary-50:  #effefb;
    --primary-100: #c8fff4;
    --primary-200: #93fde9;
    --primary-300: #5eead4;
    --primary-400: #2dd4bf;
    --primary-500: #14c9b8;
    --primary-600: #0fb5a6;
    --primary-700: #0d9488;
    --primary-800: #0f766e;
    --primary-900: #115e59;
    --primary-950: #042f2e;

    --primary: var(--primary-600);
    --primary-lifted: var(--primary-500);
    --primary-accented: var(--primary-700);

    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-400);
    --secondary-accented: var(--neutral-600);

    /* info -> sky */
    --info: #38bdf8;
    --info-lifted: #0ea5e9;
    --info-accented: #0284c7;

    /* success stays green, warning amber, error red — tuned for dark bg */
    --success: #34d399;
    --success-lifted: #10b981;
    --success-accented: #059669;
    --notice: #a78bfa;
    --notice-lifted: #8b5cf6;
    --notice-accented: #7c3aed;
    --warning: #fbbf24;
    --warning-lifted: #f59e0b;
    --warning-accented: #d97706;
    --error: #f87171;
    --error-lifted: #ef4444;
    --error-accented: #dc2626;

    --grayscale: var(--neutral-700);
    --grayscale-lifted: var(--neutral-600);
    --grayscale-accented: var(--neutral-500);

    /* base theme surface/body tokens */
    --body-bg: #060a10;
    --body-color: #93a8b8;
    --surface: #0c131c;
    --surface-hover: rgba(125, 211, 252, 0.05);
    --border-hair: #1a2836;

    /* typography */
    --font-display: 'Space Grotesk', var(--font-family-sans-serif);
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* aliases used by landing components (Deep Ocean names) */
    --text: #e8f1f4;
    --text-muted: #93a8b8;
    --text-faint: #5f7688;
    --border: #1a2836;
    --border-strong: #2a4258;
    --border-faint: rgba(125, 211, 252, 0.10);
    --surface: #0c131c;
    --surface-2: #101a25;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(125, 211, 252, 0.10);
    --font-display: 'Space Grotesk', 'Montserrat', sans-serif;
}


/* --------------------------------------------------------------------------
   2. Body & texture
   -------------------------------------------------------------------------- */
body, .primary-bg-color {
    background:
        radial-gradient(1100px 480px at 85% -10%, rgba(45, 212, 191, 0.06), transparent 60%),
        radial-gradient(900px 400px at -10% 20%, rgba(125, 211, 252, 0.04), transparent 55%),
        #060a10 !important;
    color: #93a8b8;
    font-family: 'Montserrat', var(--font-family-sans-serif);
}
body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(125,211,252,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125,211,252,.022) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, #000 25%, transparent 100%);
            mask-image: radial-gradient(70% 55% at 50% 0%, #000 25%, transparent 100%);
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .45;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app, header.header, main, footer, .main-content { position: relative; z-index: 1; }
::selection { background: rgba(45, 212, 191, 0.30); color: #e8f1f4; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
    font-family: var(--font-display);
    color: #e8f1f4;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.display-4 { font-family: var(--font-display); }

/* mono for numbers & ids */
.price, .amount, .recurring, .total, .subtotal, .credit, .balance,
#currency, .invoiceid, .orderno, .domain, .badge, .label {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   4. Cards & surfaces
   -------------------------------------------------------------------------- */
.card, .panel, .well, .modal-content, .dropdown-menu,
.alert, .client-alerts, .list-group-item {
    background-color: #0c131c;
    border-color: var(--border-hair);
    color: #93a8b8;
}
.card { border-radius: 14px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
.card-header, .panel-heading {
    background-color: rgba(16, 26, 37, 0.6);
    border-bottom: 1px solid var(--border-hair);
    color: #e8f1f4;
    font-family: var(--font-display);
    border-radius: 14px 14px 0 0 !important;
}
.card-footer, .panel-footer { background: transparent; border-top: 1px solid var(--border-hair); }
.list-group-item { border-color: rgba(26, 40, 54, 0.6); }
.list-group-item:hover { background: var(--surface-hover); }
a, .card-link { color: #2dd4bf; }
a:hover, .card-link:hover { color: #5eead4; }
.close { color: #93a8b8; text-shadow: none; opacity: .8; }
.close:hover { color: #e8f1f4; }

/* --------------------------------------------------------------------------
   5. Header/nav
   -------------------------------------------------------------------------- */
header.header .topbar, .topbar {
    background: rgba(9, 15, 23, 0.9) !important;
    border-bottom: 1px solid var(--border-hair) !important;
}
header.header .main-navbar-wrapper, .navbar.main-navbar-wrapper {
    background: rgba(7, 12, 18, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-hair);
}
.topbar a { color: #93a8b8; }
.topbar a:hover { color: #e8f1f4; }
.main-navbar-wrapper .navbar-nav .nav-link { color: #93a8b8; }
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .active .nav-link { color: #e8f1f4; }
.main-navbar-wrapper .navbar-brand img { height: 36px; }
.navbar-toggler { border-color: var(--border-hair); }
.navbar-toggler-icon { filter: invert(1) brightness(1.4); }


/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn { border-radius: 8px; font-weight: 600; transition: all .15s ease; }
.btn-primary, .btn-success {
    background-color: #0fb5a6;
    border-color: #0fb5a6;
    color: #04211d;
    box-shadow: 0 8px 22px -10px rgba(45, 212, 191, 0.35);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover, .btn-success:focus {
    background-color: #14c9b8;
    border-color: #14c9b8;
    color: #04211d;
    box-shadow: 0 12px 30px -10px rgba(45, 212, 191, 0.45);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) scale(.99); }
.btn-default, .btn-outline-primary, .btn-secondary {
    background: transparent;
    border: 1px solid #2a4258;
    color: #e8f1f4;
}
.btn-default:hover, .btn-outline-primary:hover, .btn-secondary:hover {
    background: var(--surface-hover);
    border-color: #0fb5a6;
    color: #5eead4;
}
.btn-link { color: #2dd4bf; }
.btn-link:hover { color: #5eead4; }
.btn:focus-visible, a:focus-visible {
    outline: 2px solid rgba(45, 212, 191, 0.5);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-control, input.form-control, select.form-control, textarea.form-control {
    background-color: #090f17;
    border: 1px solid #1a2836;
    color: #e8f1f4;
    border-radius: 8px;
    height: 44px;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
    background-color: #0c131c;
    border-color: #0fb5a6;
    box-shadow: 0 0 0 3px rgba(15, 181, 166, 0.16);
    color: #e8f1f4;
}
.form-control::placeholder { color: #47606f; }
label, .form-label { color: #93a8b8; font-weight: 500; }
.form-control::-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #090f17 inset;
    -webkit-text-fill-color: #e8f1f4;
}
.input-group-text {
    background: #0c131c; border-color: #1a2836; color: #5f7688;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #0fb5a6; border-color: #0fb5a6;
}

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
.table, .table td, .table th { border-color: rgba(26, 40, 54, 0.7); color: #93a8b8; }
.table thead th {
    border-bottom: 1px solid #1a2836;
    color: #5f7688;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
}
.table-hover tbody tr:hover td { background: var(--surface-hover); color: #e8f1f4; }

/* --------------------------------------------------------------------------
   9. Badges/alerts
   -------------------------------------------------------------------------- */
.badge, .label { border-radius: 6px; font-size: .7rem; padding: .35em .6em; }
.badge-success, .label-success { background: rgba(52,211,153,.13); color: #34d399; }
.badge-warning, .label-warning { background: rgba(251,191,36,.13); color: #fbbf24; }
.badge-danger, .label-danger { background: rgba(248,113,113,.13); color: #f87171; }
.badge-info, .label-info { background: rgba(56,189,248,.13); color: #38bdf8; }
.badge-default, .label-default, .badge-secondary { background: rgba(125,211,252,.09); color: #93a8b8; }
.badge-primary { background: rgba(45,212,191,.13); color: #2dd4bf; }

.alert { border-radius: 12px; border: 1px solid var(--border-hair); border-left-width: 3px; }
.alert-success { border-left-color: #34d399; }
.alert-info { border-left-color: #38bdf8; }
.alert-warning { border-left-color: #fbbf24; }
.alert-danger { border-left-color: #f87171; }
.alert strong, .alert-heading { color: #e8f1f4; }

/* --------------------------------------------------------------------------
   10. Login page
   -------------------------------------------------------------------------- */
.login-form .card {
    background: linear-gradient(180deg, rgba(16,26,37,.75), rgba(12,19,28,.95));
    border: 1px solid #1a2836;
    border-radius: 20px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
    position: relative;
    overflow: hidden;
}
.login-form .card::before {
    content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45,212,191,.4), transparent);
}
h3.login-title, .card-body h3 { letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   11. Store/cart specifics
   -------------------------------------------------------------------------- */
.product .product-price, .pricing-onetime, .pricing-recurring { font-family: var(--font-mono); }
.store-cards .card { transition: border-color .18s, transform .18s, box-shadow .18s; }
.store-cards .card:hover { border-color: #2a4258; transform: translateY(-3px); }

/* domain search */
.domain-checker-container input, .domain-checker-pane input {
    background: #090f17 !important;
    border-color: #1a2836 !important;
    color: #e8f1f4 !important;
}
.domain-checker-available { color: #34d399 !important; }
.domain-checker-unavailable { color: #f87171 !important; }

/* --------------------------------------------------------------------------
   12. Footer, modals, misc
   -------------------------------------------------------------------------- */
footer.footer, .footer {
    background: #070c12;
    border-top: 1px solid var(--border-hair);
    color: #5f7688;
}
footer a { color: #93a8b8; }
footer a:hover { color: #5eead4; }

.modal-backdrop { background: rgba(3, 6, 10, 0.75); }
.modal-content { border-radius: 16px; }
.modal-header, .modal-footer { border-color: var(--border-hair); }
.modal-header .modal-title { color: #e8f1f4; }

.dropdown-menu { box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); border-radius: 10px; }
.dropdown-item { color: #93a8b8; }
.dropdown-item:hover { background: var(--surface-hover); color: #e8f1f4; }

.breadcrumb { background: transparent; }
.breadcrumb-item a { color: #5f7688; }
.breadcrumb-item.active { color: #93a8b8; }

.pagination .page-link {
    background: transparent; border-color: #1a2836; color: #93a8b8;
}
.pagination .page-item.active .page-link {
    background: #0fb5a6; border-color: #0fb5a6; color: #04211d;
}
.pagination .page-link:hover { background: var(--surface-hover); color: #5eead4; }

/* KB articles */
.kb-categories, .kb-article { color: #93a8b8; }
blockquote {
    border-left: 3px solid #0fb5a6;
    background: rgba(45, 212, 191, 0.04);
    padding: 12px 18px;
    border-radius: 0 8px 8px 0;
    color: #93a8b8;
}
pre, code {
    background: #090f17; color: #5eead4;
    border: 1px solid #1a2836; border-radius: 8px;
    font-family: var(--font-mono);
}

/* progress/spinners */
.progress { background: #0c131c; border-radius: 8px; }
.progress-bar { background: #0fb5a6; }

/* nav pills/tabs */
.nav-tabs .nav-link { color: #93a8b8; border-color: transparent; }
.nav-tabs .nav-link.active {
    color: #5eead4;
    background: transparent;
    border-bottom: 2px solid #0fb5a6;
}
.nav-pills .nav-link { color: #93a8b8; border-radius: 8px; }
.nav-pills .nav-link.active { background: rgba(45,212,191,.12); color: #5eead4; }

/* client area sidebar */
#main-body .sidebar .list-group-item {
    background: transparent;
    border-color: rgba(26, 40, 54, 0.5);
    color: #93a8b8;
}
#main-body .sidebar .list-group-item.active {
    background: linear-gradient(90deg, rgba(45,212,191,.12), transparent 80%);
    border-left: 2px solid #0fb5a6;
    color: #5eead4;
}

/* step wizard (cart) */
.step-wizard .nav-item .nav-link { color: #5f7688; }
.step-wizard .nav-item.active .nav-link { color: #5eead4; }

/* mobile */
@media (max-width: 767px) {
    .card { border-radius: 12px; }
    header.header .logo img { height: 28px; }
}

/* print (invoices) stays light */
@media print {
    body, .primary-bg-color { background: #fff !important; color: #111 !important; }
    body::before, body::after, header, footer { display: none !important; }
    .card, .panel { border: none !important; box-shadow: none !important; }
}

/* --------------------------------------------------------------------------
   13. Hosting landing page components (hosting.php)
   -------------------------------------------------------------------------- */
/* ==========================================================================
   v3 landing components (custom hosting page — matches marketing site)
   ========================================================================== */
.sc-landing { --sc-accent: #2dd4bf; --sc-accent-2: #7dd3fc; }
.sc-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding: 56px 0 40px; }
@media (max-width: 900px) { .sc-hero { grid-template-columns: 1fr; } }
.sc-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--text); margin: 10px 0 16px; }
.sc-hero h1 .grad { background: linear-gradient(92deg, #99f6e4, #2dd4bf 45%, #7dd3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 0; }
.sc-eyebrow::before { content: "// "; color: var(--sc-accent); }
.sc-sub { color: var(--text-muted); font-size: 1.02rem; max-width: 52ch; margin-bottom: 24px; }

.sc-stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 30px; }
.sc-stat b { display: block; font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; color: var(--text); }
.sc-stat span { font-size: .78rem; color: var(--text-faint); }

/* terminal card */
.sc-term { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; font-family: var(--font-mono); font-size: .78rem; box-shadow: 0 24px 80px -24px rgba(0,0,0,.8), 0 0 90px -30px rgba(45,212,191,.25); }
.sc-term-head { display: flex; gap: 6px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.sc-term-head i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.sc-term-head i:nth-child(1) { background: #f87171; }
.sc-term-head i:nth-child(2) { background: #fbbf24; }
.sc-term-head i:nth-child(3) { background: #4ade80; }
.sc-term-head span { margin-left: 8px; color: var(--text-faint); font-size: .7rem; }
.sc-term-body { padding: 18px 16px 20px; line-height: 1.8; color: var(--text-muted); }
.sc-term-body .p { color: #5eead4; }
.sc-term-body .ok { color: #34d399; }
.sc-term-body .cm { color: var(--text-faint); }
.sc-caret { display: inline-block; width: 8px; height: 14px; background: #5eead4; vertical-align: -2px; animation: sc-blink 1.1s steps(1) infinite; }
@keyframes sc-blink { 50% { opacity: 0; } }

/* feature grid */
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .sc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sc-grid { grid-template-columns: 1fr; } }
.sc-card { background: linear-gradient(180deg, rgba(16,26,37,.5), rgba(12,19,28,.92)); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; transition: border-color .18s, transform .18s; }
.sc-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.sc-tile { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(45,212,191,.12); color: #5eead4; border: 1px solid rgba(45,212,191,.25); margin-bottom: 12px; font-size: 14px; }
.sc-card h3 { font-family: var(--font-display); font-size: 1.02rem; color: var(--text); margin: 0 0 6px; }
.sc-card p { color: var(--text-muted); font-size: .88rem; margin: 0; }

/* plans */
.sc-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.sc-plan { background: linear-gradient(180deg, rgba(16,26,37,.5), rgba(12,19,28,.92)); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color .18s, transform .18s, box-shadow .18s; }
.sc-plan:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.sc-plan .sc-plan-name { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 1.06rem; }
.sc-plan .sc-plan-desc { color: var(--text-muted); font-size: .86rem; flex: 1; }
.sc-plan .sc-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); font-size: 1.45rem; font-weight: 600; }
.sc-plan .sc-price small { color: var(--text-faint); font-size: .74rem; font-weight: 400; }

/* section header */
.sc-sec { padding: 44px 0; }
.sc-sec-head { margin-bottom: 26px; }
.sc-sec-head h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 700; color: var(--text); margin: 6px 0 8px; letter-spacing: -.015em; }
.sc-sec-head p { color: var(--text-muted); margin: 0; max-width: 60ch; }

/* CTA band */
.sc-cta { margin: 40px 0 12px; padding: 34px 30px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(120deg, rgba(45,212,191,.08), rgba(125,211,252,.05)); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.sc-cta h3 { font-family: var(--font-display); color: var(--text); margin: 0 0 6px; }
.sc-cta p { color: var(--text-muted); margin: 0; }

/* landing page: ensure no horizontal scroll */
.sc-landing { overflow-x: clip; max-width: 100%; }
.xn-body-main { overflow-x: clip; }


/* --------------------------------------------------------------------------
   14. Footer — ported from seloracloud.com marketing site (same markup)
   -------------------------------------------------------------------------- */
footer.sc-footer {
    margin-top: 72px;
    background: #090f17;
    border-top: 1px solid var(--border-hair);
    padding: 0;
}
.sc-footer .footer-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sc-footer .footer-in.newsletter {
    display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
    padding-top: 44px; padding-bottom: 44px;
    border-bottom: 1px solid var(--border-hair);
}
.sc-footer .footer-in.newsletter h3 { margin: 0; font-size: 1.4rem; color: #e8f1f4; font-family: var(--font-display); }
.sc-footer .footer-in.content {
    display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px;
    padding-top: 48px; padding-bottom: 48px;
}
@media (max-width: 860px) { .sc-footer .footer-in.content { grid-template-columns: 1fr; } }
.sc-footer .footer-content .site-logo img { height: 34px; }
.sc-footer .footer-content > p { color: #5f7688; font-size: .9rem; margin-top: 14px; max-width: 34ch; }
.sc-footer .footer-in-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 640px) { .sc-footer .footer-in-r { grid-template-columns: 1fr 1fr; } }
.sc-footer .footer-links { display: flex; flex-direction: column; gap: 9px; }
.sc-footer .footer-links h4 {
    font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
    color: #5f7688; margin: 0 0 6px; font-weight: 500;
}
.sc-footer .footer-link { color: #93a8b8; font-size: .9rem; }
.sc-footer .footer-link:hover { color: #5eead4; text-decoration: none; }
.sc-footer .footer-in.credits {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-top: 22px; padding-bottom: 26px;
    border-top: 1px solid var(--border-hair);
}
.sc-footer .footer-in.credits p { margin: 0; font-size: .82rem; color: #5f7688; }
.sc-footer .inp-icon { position: relative; }
.sc-footer .inp-icon input {
    padding-left: 40px; min-width: 260px;
    background: #0c131c; border: 1px solid var(--border-hair); color: #e8f1f4; border-radius: 8px; height: 44px;
}
.sc-footer .inp-icon i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #5f7688; font-size: .85rem; pointer-events: none; }
.sc-footer .flex-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   FIX: spinner overlay never hides (#fullpage-overlay ID beats .w-hidden class)
   -------------------------------------------------------------------------- */
#fullpage-overlay.w-hidden, #fullpage-overlay.hidden { display: none !important; }