/* =========================================
   WHMCS DARK SAAS + FULL CENTERED APP
========================================= */

/* =========================
   BASE
========================= */

body {
    background: #0b0f17 !important;
    color: #ffffff !important;
    font-family: Inter, system-ui, sans-serif !important;
}

/* FULL SCREEN BACKGROUND LAYER */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 10%, rgba(124,58,237,0.20), transparent 45%),
        radial-gradient(circle at 90% 20%, rgba(37,99,235,0.18), transparent 50%),
        #05060a;
    z-index: -1;
}

/* =========================
   TRUE CENTERED APP WRAP (WHMCS SAFE)
========================= */

#page-container,
#content-container,
#main-body,
#content,
.wrapper,
.container,
.container-fluid {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* FORCE MAIN APP INTO A CARD */
#page-container,
#content-container,
#main-body {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

/* =========================
   HEADER + FOOTER ALIGN
========================= */

#header,
#footer {
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================
   LINKS
========================= */

a {
    color: #a5b4fc !important;
    text-decoration: none !important;
}

a:hover {
    opacity: 0.85;
}

/* =========================
   NAVBAR
========================= */

.navbar,
.navbar-default {
    background: rgba(10, 12, 20, 0.8) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(10px);
}

/* =========================
   PANELS / CARDS
========================= */

.panel,
div.panel,
.card,
div.card,
.tiles .tile {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.panel-heading,
.card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    color: white !important;
}

/* =========================
   TABLES
========================= */

table,
.table {
    background: transparent !important;
    color: white !important;
}

.table th {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.table td {
    border-color: rgba(255,255,255,0.06) !important;
}

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

.btn,
.btn-default {
    background: rgba(255,255,255,0.06) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
}

.btn:hover {
    background: rgba(99,102,241,0.2) !important;
    border-color: rgba(99,102,241,0.4) !important;
}

.btn-primary {
    background: white !important;
    color: black !important;
    border: none !important;
}

/* =========================
   FORMS
========================= */

input,
select,
textarea {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: white !important;
    border-radius: 10px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgba(99,102,241,0.5) !important;
    outline: none !important;
}

/* =========================
   SIDEBAR
========================= */

#sidebar,
.sidebar {
    background: transparent !important;
}

/* =========================
   LISTS / DASHBOARD
========================= */

.list-group-item {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: white !important;
}

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

.badge {
    background: rgba(99,102,241,0.3) !important;
    color: white !important;
}

/* =========================
   ALERTS
========================= */

.alert {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: white !important;
}

/* =========================
   REMOVE SHADOWS
========================= */

* {
    box-shadow: none !important;
}

/* =========================
   MOBILE FIX
========================= */

@media (max-width: 1250px) {
    #page-container,
    #content-container,
    #main-body,
    #content {
        margin: 0 12px !important;
    }
}

<div class="custom-homepage">

<section class="hero">
    <div class="hero-bg"></div>

    <div class="container hero-inner">

        <div class="hero-kicker">Premium Web Design & Hosting</div>

        <h1 class="hero-title">
            Buildssssss. Host. Scale.<br>
            Without Limits.
        </h1>

        <p class="hero-subtitle">
            High-performance hosting, custom websites, domains, and expert support.
            Everything you need to launch and grow online.
        </p>

        <div class="hero-actions">
            <a href="cart.php" class="btn-primary">Get Started</a>
            <a href="/index.php?rp=/route-not-defined" class="btn-secondary">Contact Us</a>
        </div>

    </div>
</section>


<section class="section">

    <div class="container">

        <div class="section-head">
            <h2>Services</h2>
            <p>Everything you need to build a strong online presence</p>
        </div>

        <div class="service-grid">

                        <div class="service-card">
                <h3>Website Design</h3>
                <p>Website Design</p>
                <a href="/index.php?rp=/store/website-design">Explore →</a>
            </div>
            
                        <div class="service-card">
                <h3>Domains</h3>
                <p>Secure your brand identity</p>
                <a href="/cart.php?a=add&domain=register">Search →</a>
            </div>
            
                        <div class="service-card">
                <h3>Transfers</h3>
                <p>Move your domain safely</p>
                <a href="/cart.php?a=add&domain=transfer">Transfer →</a>
            </div>
            
        </div>

    </div>

</section>


<section class="section soft">

    <div class="container">

        <div class="section-head">
            <h2>Support Centre</h2>
            <p>Everything you need to get help, stay updated, and manage your services</p>
        </div>

        <div class="support-grid">

            <a class="support-card" href="/index.php?rp=/announcements">
                <div class="support-icon">📢</div>
                <div class="support-content">
                    <h3>Announcements</h3>
                    <p>Latest updates, maintenance, and news</p>
                </div>
            </a>

            <a class="support-card" href="serverstatus.php">
                <div class="support-icon">📡</div>
                <div class="support-content">
                    <h3>Status Page</h3>
                    <p>Live uptime & incident tracking</p>
                </div>
            </a>

            <a class="support-card" href="/index.php?rp=/knowledgebase">
                <div class="support-icon">📚</div>
                <div class="support-content">
                    <h3>Knowledgebase</h3>
                    <p>Guides, tutorials, documentation</p>
                </div>
            </a>

            <a class="support-card" href="/index.php?rp=/download">
                <div class="support-icon">⬇️</div>
                <div class="support-content">
                    <h3>Downloads</h3>
                    <p>Software & client resources</p>
                </div>
            </a>

            <a class="support-card highlight" href="submitticket.php">
                <div class="support-icon">🎧</div>
                <div class="support-content">
                    <h3>Open Ticket</h3>
                    <p>Talk to our support team</p>
                </div>
            </a>

        </div>

    </div>

</section>

<section class="section">

    <div class="container">

        <div class="section-head">
            <h2>Your Account</h2>
            <p>Manage everything in one place</p>
        </div>

        <div class="account-grid">

            <a class="account-card" href="clientarea.php">
                <h3>Dashboard</h3>
                <p>Overview of your account</p>
            </a>

            <a class="account-card" href="clientarea.php?action=services">
                <h3>Services</h3>
                <p>Manage hosting & products</p>
            </a>

                        <a class="account-card" href="clientarea.php?action=domains">
                <h3>Domains</h3>
                <p>Control your domains</p>
            </a>
            
            <a class="account-card" href="supporttickets.php">
                <h3>Support</h3>
                <p>View your tickets</p>
            </a>

        </div>

    </div>

</section>

</div>

<style>
body {
    background: #0b0f17;
    margin: 0;
    display: flex;
    justify-content: center;
    color: white;
    font-family: Inter, system-ui, sans-serif;
}

.custom-homepage {
    width: 100%;
    max-width: 1200px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    overflow: hidden;
}

.hero {
    padding: 90px 0 110px;
    text-align: center;
    position: relative;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(99,102,241,0.18), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(34,211,238,0.12), transparent 55%);
    filter: blur(70px);
}

.hero-inner { position: relative; }

.hero-kicker {
    font-size: 12px;
    letter-spacing: 2px;
    opacity: 0.6;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.hero-title {
    font-size: 58px;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 18px;
}

.hero-subtitle {
    max-width: 700px;
    margin: 0 auto 35px;
    opacity: 0.65;
    font-size: 18px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.btn-primary {
    background: white;
    color: black;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}

.btn-secondary {
    border: 1px solid rgba(255,255,255,0.15);
    padding: 12px 22px;
    border-radius: 10px;
    color: white;
    text-decoration: none;
}

.section {
    padding: 85px 40px;
}

.section.soft {
    background: rgba(255,255,255,0.02);
}

.section-head {
    text-align: center;
    margin-bottom: 40px;
}

.section-head h2 {
    font-size: 34px;
    margin-bottom: 6px;
}

.section-head p {
    opacity: 0.6;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.service-card {
    padding: 22px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    transition: 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99,102,241,0.4);
}

.service-card p {
    opacity: 0.6;
    font-size: 14px;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.support-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    text-decoration: none;
    color: white;
    transition: 0.25s ease;
}

.support-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.04);
    border-color: rgba(99,102,241,0.5);
}

.support-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
}

.support-content h3 {
    margin: 0;
    font-size: 16px;
}

.support-content p {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.6;
}

.support-card.highlight {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.4);
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.account-card {
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    text-decoration: none;
    color: white;
    transition: 0.25s ease;
}

.account-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99,102,241,0.5);
    background: rgba(255,255,255,0.04);
}

.account-card h3 {
    margin: 0;
    font-size: 16px;
}

.account-card p {
    margin: 6px 0 0;
    font-size: 13px;
    opacity: 0.6;
}

@media (max-width: 300px) {
    .service-grid,
    .support-grid,
    .account-grid {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 38px;
    }
}
</style>
<p style="text-align:center;">Powered by <a href="https://www.whmcs.com/" target="_blank">WHMCompleteSolution</a></p>
    </section>

    <!-- =========================
         DARK SAAS FOOTER (FIXED)
    ========================== -->

    <footer id="footer" class="footer-dark">

        <div class="container">

            <div class="footer-grid-dark">

                <!-- BRAND -->
                <div class="footer-col">
                    <div class="footer-brand">
                        Company Name
                    </div>

                    <p class="footer-text">
                        Secure infrastructure, domains and hosting management platform built for performance and reliability.
                    </p>

                    <div class="footer-social">
                                            </div>
                </div>

                <!-- NAV -->
                <div class="footer-col">
                    <div class="footer-title">Navigation</div>

                    <a href="/clientarea.php" class="footer-link">Client Area</a>
                    <a href="/contact.php" class="footer-link">Contact Us</a>

                    
                    <a href="/serverstatus.php" class="footer-link">System Status</a>
                </div>

                <!-- SETTINGS -->
                <div class="footer-col">

                    <div class="footer-title">Settings</div>

                                            <button class="footer-pill-dark" data-toggle="modal" data-target="#modalChooseLanguage">
                            <i class="fas fa-globe"></i>
                            English · USD
                        </button>
                    
                    
                </div>

            </div>

            <div class="footer-bottom-dark">
                <p>
                    Copyright &copy; 2026 Company Name. All Rights Reserved.
                </p>
            </div>

        </div>

    </footer>

    <!-- OVERLAY -->
    <div id="fullpage-overlay" class="overlay-dark">
        <div class="overlay-inner">
            <img src="/assets/img/overlay-spinner.svg" alt="">
            <span class="msg"></span>
        </div>
    </div>

    <!-- MODAL -->
    <div class="modal system-modal fade" id="modalAjax" tabindex="-1">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content modal-dark">

                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    Loading...
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary modal-submit">
                        Submit
                    </button>
                </div>

            </div>

        </div>

    </div>

    <!-- LANGUAGE MODAL -->
    <form method="get" action="/index.php?">
        <div class="modal fade modal-dark" id="modalChooseLanguage" tabindex="-1">

            <div class="modal-dialog modal-lg modal-dialog-centered">

                <div class="modal-content modal-dark">

                    <div class="modal-header">
                        <h5 class="modal-title">Choose language</h5>
                        <button type="button" class="close text-white" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">

                                                    <div class="grid-dark">
                                <input type="hidden" name="language" value="english">

                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="arabic">
                                        العربية
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="azerbaijani">
                                        Azerbaijani
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="catalan">
                                        Català
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="chinese">
                                        中文
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="croatian">
                                        Hrvatski
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="czech">
                                        Čeština
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="danish">
                                        Dansk
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="dutch">
                                        Nederlands
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark active"
                                            data-value="english">
                                        English
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="estonian">
                                        Estonian
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="farsi">
                                        Persian
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="french">
                                        Français
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="german">
                                        Deutsch
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="hebrew">
                                        עברית
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="hungarian">
                                        Magyar
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="italian">
                                        Italiano
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="macedonian">
                                        Macedonian
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="norwegian">
                                        Norwegian
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="portuguese-br">
                                        Português
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="portuguese">
                                        Português
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="romanian">
                                        Română
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="russian">
                                        Русский
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="spanish">
                                        Español
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="swedish">
                                        Svenska
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="turkish">
                                        Türkçe
                                    </button>
                                                                    <button type="button"
                                            class="grid-item-dark "
                                            data-value="ukrainian">
                                        Українська
                                    </button>
                                                            </div>
                        
                        
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary w-100">Apply</button>
                    </div>

                </div>

            </div>

        </div>
    </form>

    <!-- ADMIN BUTTON -->
    
    <form action="#" id="frmGeneratePassword">
    <div class="modal fade" id="modalGeneratePassword">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h4 class="modal-title">
                        Generate Password
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger w-hidden" id="generatePwLengthError">
                        Please enter a number between 8 and 64 for the password length
                    </div>
                    <div class="form-group row">
                        <label for="generatePwLength" class="col-sm-4 col-form-label">Password Length</label>
                        <div class="col-sm-8">
                            <input type="number" min="8" max="64" value="12" step="1" class="form-control input-inline input-inline-100" id="inputGeneratePasswordLength">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="generatePwOutput" class="col-sm-4 col-form-label">Generated Password</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="inputGeneratePasswordOutput">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8 offset-sm-4">
                            <button type="submit" class="btn btn-default btn-sm">
                                <i class="fas fa-plus fa-fw"></i>
                                Generate new password
                            </button>
                            <button type="button" class="btn btn-default btn-sm copy-to-clipboard" data-clipboard-target="#inputGeneratePasswordOutput">
                                <img src="/assets/img/clippy.svg" alt="Copy to clipboard" width="15">
                                Copy
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary" id="btnGeneratePasswordInsert" data-clipboard-target="#inputGeneratePasswordOutput">
                        Copy to clipboard and Insert
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

    

    <!-- =========================
         DARK FOOTER CSS
    ========================== -->

    <style>
        .footer-dark {
            margin-top: 80px;
            padding: 70px 0 30px;
            background: #05060a;
            border-top: 1px solid rgba(255,255,255,0.06);
        }

        .footer-grid-dark {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 50px;
        }

        .footer-brand {
            font-size: 18px;
            font-weight: 800;
            color: #fff;
            margin-bottom: 10px;
        }

        .footer-text {
            color: rgba(255,255,255,0.55);
            font-size: 14px;
            max-width: 320px;
        }

        .footer-title {
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.35);
            margin-bottom: 12px;
        }

        .footer-link {
            display: block;
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            margin-bottom: 10px;
            transition: 0.2s;
        }

        .footer-link:hover {
            color: #00a6ff;
            transform: translateX(3px);
        }

        .footer-pill-dark {
            padding: 10px 14px;
            border-radius: 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            color: #fff;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .footer-bottom-dark {
            margin-top: 50px;
            text-align: center;
            color: rgba(255,255,255,0.35);
            font-size: 13px;
        }

        .modal-dark {
            background: #0a0c14;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            color: #fff;
        }

        .grid-dark {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .grid-item-dark {
            padding: 10px;
            border-radius: 10px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            color: #fff;
            cursor: pointer;
            text-align: center;
        }

        .grid-item-dark:hover,
        .grid-item-dark.active {
            background: rgba(0,166,255,0.15);
            border-color: rgba(0,166,255,0.35);
        }

        .admin-fab-dark {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: rgba(255,77,77,0.12);
            border: 1px solid rgba(255,77,77,0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        @media (max-width: 992px) {
            .footer-grid-dark {
                grid-template-columns: 1fr;
            }

            .grid-dark {
                grid-template-columns: 1fr;
            }
        }
    </style>