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

    Mirage Theme Overrides

    This file customizes the WHMCS Six-based template to
    visually match the Sunlight Mirage brand.

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

/* Sunlight Mirage brand palette */
:root {
    --mirage-canvas-1: #060a14; /* darkest bg */
    --mirage-canvas-2: #0a1020; /* dark bg */
    --mirage-canvas-3: #4a1246; /* violet blend */
    --mirage-text:     #eaeaea; /* primary text on dark */
    --mirage-muted:    #b6b8d6; /* secondary text */
    --mirage-cyan:     #00e7ff; /* primary accent */
    --mirage-magenta:  #ff00c8; /* secondary accent */
    --mirage-violet:   #9b5fff; /* tertiary accent */
    --mirage-hl-1:     #43ffd8; /* highlight */
    --mirage-hl-2:     #ff6ef0; /* highlight */
    --mirage-warm:     #ffd166; /* warm accent */

    --shadow-1:        0 6px 22px rgba(0,0,0,.35);
    --glow-cyan-1:     0 0 24px rgba(0,231,255,.35);
    --glow-magenta-1:  0 0 36px rgba(255,0,200,.30), 0 0 72px rgba(255,0,200,.15);

    /* convenience */
    --brand-primary:   var(--mirage-cyan);
    --brand-secondary: var(--mirage-magenta);
}

/* Global background to match parent site */
html, body {
    /* Exact base gradient from spice mirage.css */
    background: linear-gradient(180deg,
        var(--mirage-canvas-1) 0%,
        var(--mirage-canvas-2) 55%,
        var(--mirage-canvas-3) 100%) fixed !important;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
    background-size: cover;
}
body{
    padding-top:18px;
}

/* Header + Navbar */
#header .top-nav a { color: #eaeaea !important; }
#header .top-nav a:hover,
#header .top-nav a:focus { color: #ffffff !important; }
#header .top-nav .label,
#header .top-nav .badge { color:#0f1030; }

/* Top bar buttons (Login/Register/View Cart) */
#header .top-nav .btn {
    background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:999px;
    padding:.35rem .8rem;
}
#header .top-nav .btn:hover { filter: brightness(1.06); box-shadow: var(--glow-cyan-1); }
#header .top-nav .btn.btn-logged-in-admin { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; }

/* Final overrides to ensure seamless canvas and remove Six teal/strips */
section#header, #header, #main-menu, #main-menu .navbar-main, .navbar-main {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

section#header{
    padding-top:20px;
}
section#home-banner { background: transparent !important; }
.mirage-hero { background: transparent !important; }
.mirage-hero { padding: 12px 0 38px !important; color: #fff; }
.mirage-hero:before, .mirage-hero:after { content: none !important; background: transparent !important; border:0 !important; }
.home-shortcuts { background: transparent !important; }
.mirage-shortcuts { background: transparent !important; }

/* Landing hero (imported from UserSpice marketing site) */
.mirage-intro-hero{
    padding:48px 0 6px;
    color:#fff;
}
.mirage-intro-hero .intro-title{
    font-size:clamp(2.25rem, 4vw, 3.5rem);
    font-weight:700;
    margin:0 0 12px;
    color:#fff;
    text-shadow:0 8px 30px rgba(0,0,0,.45);
}
.mirage-intro-hero .intro-title .hero-accent{
    background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
}
.mirage-intro-hero .intro-subtitle{
    max-width:720px;
    margin:0 auto 24px;
    color: var(--mirage-muted);
    font-size:1.08rem;
    text-align:center;
}
.mirage-intro-hero .intro-divider{
    width:525px;
    height:2px;
    margin:24px auto 8px;
    border-radius:999px;
    background: linear-gradient(90deg, rgba(0,231,255,.4), rgba(255,0,200,.4));
    box-shadow:0 0 18px rgba(0,231,255,.25);
}
.mirage-intro-hero .divider-secondary{
    margin:32px auto 0;
}
.mirage-hero .intro-divider,
.mirage-hero .divider-secondary{
    width:525px;
    height:2px;
    margin:20px auto 6px;
    border-radius:999px;
    background: linear-gradient(90deg, rgba(0,231,255,.35), rgba(255,0,200,.35));
    box-shadow:0 0 18px rgba(0,231,255,.18);
}
.mirage-hero-ctas{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}
.mirage-hero-btn{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.58rem 1.35rem;
    border-radius:999px;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.06em;
    font-size:.95rem;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    border:1px solid transparent;
    text-decoration:none !important;
}
.mirage-hero-btn .btn-label{
    display:inline-block;
    min-width:0;
    position:relative;
    color:currentColor;
    transition:color .18s ease;
    line-height:1;
}
.mirage-hero-btn .btn-label::after{
    content: attr(data-label);
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    opacity:0;
    transition:opacity .18s ease;
    pointer-events:none;
}
.mirage-hero-btn.primary .btn-label{
    color:#a7e8ff !important;
}
.mirage-hero-btn.primary{
    background: linear-gradient(120deg, rgba(0,231,255,.18), rgba(255,0,200,.24));
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 14px 32px rgba(0,0,0,.48), 0 0 26px rgba(0,231,255,.12);
}
.mirage-hero-btn.primary:hover{
    background: linear-gradient(115deg, rgba(0,231,255,.32), rgba(255,0,200,.38));
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.22);
}
.mirage-hero-btn.primary:hover .btn-label{
    color:#dff9ff !important;
}
.mirage-hero-btn.outline{
    border-color: rgba(0,231,255,.32);
    color:#bfe9ff !important;
    background: rgba(6,10,20,.8);
    box-shadow:0 14px 32px rgba(0,0,0,.48), inset 0 0 20px rgba(0,231,255,.08);
    text-decoration:none !important;
}
.mirage-hero-btn.outline .btn-label{
    color:#bfe9ff !important;
}
.mirage-hero-btn.outline:hover{
    border-color:rgba(255,255,255,.45);
    transform:translateY(-1px);
    box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 0 26px rgba(0,231,255,.12);
}
.mirage-hero-btn.outline:hover .btn-label{
    color:transparent !important;
}
.mirage-hero-btn.outline:hover .btn-label::after{
    opacity:1;
}
.mirage-hero-btn i{
    font-size:1rem;
}
@media (max-width: 767px){
    .mirage-intro-hero{
        padding:48px 0 24px;
    }
}
/* Ensure no hidden gradient/image overlays remain on these bands */
section#home-banner, section#home-banner:before, section#home-banner:after,
.home-shortcuts, .home-shortcuts:before, .home-shortcuts:after,
section#main-body, section#main-body:before, section#main-body:after {
    background-image: none !important;
    background-color: transparent !important;
}
/* Remove borders that can appear as seams */
#main-menu, .navbar-main, section#home-banner, .home-shortcuts, section#main-body { border: 0 !important; }
/* Remove any borders/shadows around these bands */
.home-shortcuts, .mirage-shortcuts { border:0 !important; box-shadow:none !important; }
.home-shortcuts:before, .home-shortcuts:after,
.mirage-shortcuts:before, .mirage-shortcuts:after { content:"" !important; display:none !important; }
.navbar-main { background: transparent !important; }
.navbar-main li.account { background: transparent !important; }
.home-shortcuts li { border-right: 1px solid rgba(255,255,255,.12) !important; }
.home-shortcuts li:first-child { border-left: 1px solid rgba(255,255,255,.12) !important; }
@media (max-width:767px){ .home-shortcuts li { border-bottom: 1px solid rgba(255,255,255,.12) !important; } }
#header,
section#header,
#main-menu,
#main-menu .navbar-main,
.navbar-main {
    background: transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    padding:0;
    margin-top:0;
}
section#main-menu{
    margin-top:12px;
}

.navbar-main .navbar-nav > li > a,
.navbar-main .navbar-brand,
.navbar-main .navbar-toggle { color: #fff !important; }
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus {
    background-color: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}

/* Allow navbar container to use full width so chips can breathe */
#main-menu .container,
#nav .container{
    width:100%;
    max-width:1350px;
    padding-left:clamp(12px,3vw,32px);
    padding-right:clamp(12px,3vw,32px);
}

/* Mirage nav chips (mirror UserSpice neon menu) */
.navbar-main .navbar-nav{
    flex:0 1 auto;
    min-width:0;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    float:none !important;
    margin:0 auto;
    width:100%;
    max-width:100%;
}
.navbar-main .navbar-nav > li {
    margin: 0 3px;
    flex:0 0 auto;
    position:relative;
    float:none !important;
    white-space:nowrap;
}
.navbar-main .navbar-nav > li.dropdown:hover > .dropdown-menu,
.nav-auth > li.dropdown:hover > .dropdown-menu{
    display:block;
}
.navbar-main .navbar-nav > li > a,
.nav-auth > li:not(.nav-cta-pill) > a,
.mirage-utility li a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .54rem 1.05rem !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
    background: rgba(8,12,24,.78) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #80eaff !important;
    font-weight: 600;
    letter-spacing: .03em;
    font-size: clamp(.92rem, 1.15vw, 1.05rem);
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(0,0,0,.50) !important;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.navbar-main .navbar-nav > li > a .nav-label,
.nav-auth > li > a .nav-label,
.mirage-utility li a .nav-label{
    color:#80eaff !important;
    text-transform:uppercase;
    letter-spacing:.08em;
    transition: color .18s ease, filter .18s ease;
}
.navbar-main .navbar-nav > li > a:hover .nav-label,
.navbar-main .navbar-nav > .open > a .nav-label,
.nav-auth > li > a:hover .nav-label,
.nav-auth > li > a:focus .nav-label,
.mirage-utility li a:hover .nav-label{
    color:transparent !important;
    background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter: drop-shadow(0 0 6px rgba(0,231,255,.45));
}
@supports not (-webkit-background-clip:text){
    .navbar-main .navbar-nav > li > a:hover .nav-label,
    .navbar-main .navbar-nav > .open > a .nav-label,
    .nav-auth > li > a:hover .nav-label,
    .nav-auth > li > a:focus .nav-label{
        color: #02d4ff !important;
        background-image:none;
        -webkit-text-fill-color: initial;
    }
}
.navbar-main .navbar-nav > li > a i{
    margin-right: .48rem;
    color: var(--mirage-cyan);
    text-shadow: 0 0 10px rgba(0,231,255,.45);
}
.navbar-main .navbar-nav > li > a .caret{
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}
#main-menu .navbar-main .navbar-nav > li > a:hover,
#main-menu .navbar-main .navbar-nav > .open > a,
.nav-auth > li > a:hover,
.nav-auth > li > a:focus {
    background: rgba(8,12,24,.90) !important;
    border-color: rgba(255,255,255,.22) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 8px rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.45), 0 0 24px rgba(0,231,255,.12) !important;
}
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.nav-auth > .active > a,
.nav-auth > .active > a:hover,
.nav-auth > .active > a:focus,
.navbar-main .navbar-nav > li > a.is-active,
.nav-auth > li > a.is-active,
.navbar-main .navbar-nav > .current > a,
.navbar-main .navbar-nav > .current > a:hover,
.navbar-main .navbar-nav > .current > a:focus {
    color: #9fe8ff !important;
    background:
        radial-gradient(circle at 30% 30%, rgba(0,231,255,.35), transparent 55%),
        rgba(6,10,22,.95) !important;
    border-color: rgba(0,231,255,.55) !important;
    box-shadow:
        0 0 16px rgba(0,231,255,.32),
        0 0 32px rgba(255,0,200,.20),
        inset 0 0 26px rgba(0,231,255,.14) !important;
}
.navbar-main .navbar-nav > .active > a .nav-label,
.nav-auth > .active > a .nav-label,
.navbar-main .navbar-nav > li > a.is-active .nav-label,
.nav-auth > li > a.is-active .nav-label{
    color:transparent !important;
    background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.navbar-main .navbar-nav > .active > a::after { content: none !important; }
.navbar-main .navbar-nav > li > a:focus-visible{
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(0,231,255,.30);
}
@media (max-width: 991px){
    .navbar-main .navbar-nav > li{ width:100%; margin: 0 0 12px; }
    .navbar-main .navbar-nav > li > a{
        display:flex;
        width:100%;
        justify-content:flex-start;
    }
}
@media (max-width: 1199px){
    .navbar-main .navbar-nav{
        font-size:.78rem;
        white-space:normal;
        flex-wrap:wrap;
        overflow:visible;
    }
}

/* Login/Register pills */
.nav-auth{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:6px;
}
.nav-auth > li{ margin:0 3px; }
.cta-pill{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.52rem 1rem !important;
    background: rgba(8,12,24,.82) !important;
    border: 0px solid rgba(255,255,255,.20) !important;
    color:#9ae8ff !important;
    text-transform: uppercase;
    letter-spacing:.12em;
    font-size:clamp(.9rem, 1.05vw, 1.05rem);
    font-weight:700;
    border-radius:999px !important;
    box-shadow:0 16px 38px rgba(0,0,0,.60), 0 10px 30px rgba(2,212,255,.55), 0 10px 30px rgba(255,56,212,.40);
    transition: filter .18s ease, box-shadow .18s ease;
}
.cta-pill .nav-label{
    color:#1b0885 !important;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.nav-auth > li.nav-cta-pill > a.cta-pill .nav-label{
    color:#049ab4 !important;
}
.cta-pill:hover{
    filter:brightness(1.18);
    box-shadow:0 20px 44px rgba(0,0,0,.65), 0 12px 38px rgba(2,212,255,.60), 0 12px 38px rgba(255,56,212,.46);
}
@media (max-width: 991px){
    .nav-auth > li[menuItemName="Login"] > a,
    .nav-auth > li[menuItemName="Register"] > a{
        width:100%;
        justify-content:center;
        margin-bottom:10px;
    }
}

/* CTA inside Mirage nav */
.mirage-nav-cta{
    flex:0 0 auto;
    margin-left:0;
    display:flex;
    align-self:flex-start;
    align-items:center;
    justify-content:flex-end;
    gap:.5rem;
}
.mirage-nav-cta .btn-mirage-cta{ white-space:nowrap; }
.navbar-main .mirage-nav-cta .btn-mirage-cta{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.48rem 1.25rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.28);
    background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
    color:#fff !important;
    font-weight:600;
    letter-spacing:.04em;
    box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 24px rgba(0,231,255,.35);
    text-transform:uppercase;
}
.navbar-main .mirage-nav-cta .btn-mirage-cta:hover,
.navbar-main .mirage-nav-cta .btn-mirage-cta:focus{
    filter:brightness(1.08);
    color:#fff !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.48), 0 0 32px rgba(0,231,255,.42), 0 0 36px rgba(255,0,200,.28);
}
.navbar-main .mirage-nav-cta .fa{
    font-size:.95rem;
}
@media (max-width: 991px){
    .navbar-main .mirage-nav-cta{
        float:none;
        width:100%;
        justify-content:flex-start;
        margin:15px 0 0;
        margin-left:0;
    }
}

/* CTA chip stronger glass + gradient */
.navbar-main .navbar-nav > li > a.nav-cta{
    background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)) !important;
    color:#fff !important;
    border-color: rgba(255,255,255,.22) !important;
    padding: .46rem 1rem !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 28px rgba(0,231,255,.22) !important;
}
.navbar-main .navbar-nav > li > a.nav-cta:hover{
    filter: brightness(1.06);
    box-shadow: 0 12px 32px rgba(0,0,0,.40), 0 0 34px rgba(0,231,255,.28), 0 0 38px rgba(255,0,200,.20) !important;
}

/* Mirage dropdown panel + items */
.navbar-main .dropdown-menu,
.nav-auth .dropdown-menu,
.mirage-utility .dropdown-menu {
    background:
        linear-gradient(180deg, rgba(6,10,22,.92), rgba(6,10,22,.78));
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.55), 0 0 32px rgba(0,231,255,.20) !important;
    padding: 16px !important;
    min-width: 240px !important;
    backdrop-filter: blur(12px);
}
.navbar-main .dropdown-menu > li.divider,
.nav-auth .dropdown-menu > li.divider,
.mirage-utility .dropdown-menu > li.divider{
    height:1px;
    margin:10px 0;
    padding:0;
    border:0;
    background: linear-gradient(90deg, rgba(0,231,255,.35), rgba(255,0,200,.35));
    opacity:.6;
}
.navbar-main .dropdown-menu > li,
.nav-auth .dropdown-menu > li,
.mirage-utility .dropdown-menu > li {
    margin:4px 0;
    background: transparent !important;
    border:0 !important;
}
.navbar-main .dropdown-menu > li > a,
.nav-auth .dropdown-menu > li > a,
.mirage-utility .dropdown-menu > li > a {
    color: #9fe8ff !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 999px !important;
    padding:.46rem 1.05rem !important;
    width:100%;
    transition: background .18s ease, box-shadow .18s ease, color .18s ease;
    display:flex !important;
    align-items:center; gap:.5rem;
    font-weight:600;
    letter-spacing:.02em;
    font-size:.92rem;
}
.navbar-main .dropdown-menu > li > a .nav-label,
.nav-auth .dropdown-menu > li > a .nav-label,
.mirage-utility .dropdown-menu > li > a .nav-label{
    display:inline-flex;
    align-items:center;
    color:#9fe8ff !important;
    letter-spacing:.04em;
    text-transform:uppercase;
    transition: color .18s ease, filter .18s ease;
}
.navbar-main .dropdown-menu > li > a:hover,
.nav-auth .dropdown-menu > li > a:hover,
.mirage-utility .dropdown-menu > li > a:hover {
    background: linear-gradient(90deg, rgba(0,231,255,.12), rgba(255,0,200,.12)) !important;
    border-color: transparent !important;
    box-shadow: 0 0 18px rgba(0,231,255,.25) !important;
    color: #1106a5a2 !important;
}
.navbar-main .dropdown-menu > li > a:hover .nav-label,
.nav-auth .dropdown-menu > li > a:hover .nav-label,
.mirage-utility .dropdown-menu > li > a:hover .nav-label{
    color: transparent !important;
    background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.navbar-main .dropdown-menu > li > a i,
.nav-auth .dropdown-menu > li > a i,
.mirage-utility .dropdown-menu > li > a i{
    color: var(--mirage-cyan) !important;
    text-shadow:0 0 10px rgba(0,231,255,.45);
}
.navbar-main .dropdown-menu > li[menuItemName="Logout"] > a,
.nav-auth .dropdown-menu > li[menuItemName="Logout"] > a,
.mirage-utility .dropdown-menu > li[menuItemName="Logout"] > a{
    background: linear-gradient(90deg, #106677, #86106dea) !important;
    border-color: transparent !important;
    color:#fff !important;
    letter-spacing:.08em;
}
.navbar-main .dropdown-menu > li[menuItemName="Logout"] > a:hover,
.nav-auth .dropdown-menu > li[menuItemName="Logout"] > a:hover,
.mirage-utility .dropdown-menu > li[menuItemName="Logout"] > a:hover{
    filter:brightness(1.08);
    box-shadow:0 0 22px rgba(0,231,255,.28) !important;
}

/* Primary buttons/links */
.btn-primary,
.panel-primary > .panel-heading,
.label-info,
.badge {
    background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)) !important;
    border-color: rgba(255,255,255,.22) !important;
}
.btn-primary:hover{
    filter: brightness(1.06);
    box-shadow: 0 0 14px rgba(0,231,255,.28), 0 0 24px rgba(255,0,200,.18);
}

a, .text-primary { color: var(--brand-primary); }
a:hover, a:focus { color: var(--mirage-hl-1); }

/* Form focus */
input:focus, select:focus, textarea:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,231,255,.20) !important;
}

/* Headlines */
h1, h2, h3, h4 { color: #0f1030; }

/* Home banner tweaks */
#home-banner {
    background: linear-gradient(135deg, var(--mirage-canvas-2), var(--mirage-canvas-3));
    color: #fff;
    box-shadow: inset 0 -60px 120px rgba(0,0,0,.25);
}
#home-banner h2 { color: #fff; }
.mirage-hero h1,
.mirage-hero h2{
    color:#9fd7ff !important;
    text-shadow:0 8px 24px rgba(0,0,0,.45);
}

/* Footer */
#footer {
    background-color: var(--mirage-canvas-1);
    color: var(--mirage-muted);
}
#footer a { color: var(--brand-primary); }
#footer a:hover { color: var(--mirage-hl-1); }

/* ================= Color Overrides (no layout changes) ================= */
/* Ensure base text and links use Mirage palette */
body { color: var(--mirage-text); }
a { color: var(--mirage-cyan); }
a:hover, a:focus { color: #7af0ff; }

/* Override Six defaults that force white backgrounds */
section#main-body { background: transparent !important; color: var(--mirage-text) !important; }
.primary-bg-color { background-color: transparent !important; }
section#footer { background: transparent !important; color: var(--mirage-muted) !important; border-top: 0 !important; }

/* Headings & dividers */
div.header-lined h1 { color: var(--mirage-text) !important; border-bottom-color: rgba(255,255,255,.12) !important; }
div.header-lined .breadcrumb li a { color: var(--mirage-muted) !important; }

/* Navbar colors (override Six teal) */
.navbar-default,
.navbar-main { border-color: transparent !important; }
.navbar-default .navbar-nav > li > a,
.navbar-main .navbar-nav > li > a { color: #eaeaea !important; }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > li > a:hover { color: #ffffff !important; }

/* Primary buttons use brand gradient */
.btn-primary { background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)) !important; border-color: rgba(255,255,255,.22) !important; }

/* WHMCS homepage bands (remove teal) */
#home-banner,
.home-banner { color:#fff; }
#home-shortcuts,
.home-shortcuts { background: transparent !important; }
.panel-home .panel-heading { background: transparent !important; color: var(--mirage-text) !important; }
.home-shortcuts .item { background: rgba(255,255,255,.02) !important; border-color: rgba(255,255,255,.10) !important; color: var(--mirage-text) !important; }
.home-shortcuts .item a { color: var(--mirage-text) !important; }

/* Domain search inputs within banner */
#home-banner .form-control,
.home-banner .form-control { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.18) !important; color:#eaf0ff !important; }
#home-banner ::placeholder,
.home-banner ::placeholder { color:#cfd8ff; opacity:.85; }

/* Secondary buttons next to primary */
.btn-default,
.btn-secondary { background: rgba(255,255,255,.03) !important; color:#e8edff !important; border:1px solid rgba(255,255,255,.18) !important; }
.btn-default:hover,
.btn-secondary:hover { background: rgba(10,10,31,.22) !important; }

/* Brand logo text gradient if text logo is used */
#header .logo.logo-text { background-image: linear-gradient(90deg, var(--mirage-cyan) 0%, #7af0ff 40%, var(--mirage-magenta) 85%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color: transparent; }

/* Gradient heading utility to match legacy site */
.heading-brand{
    background-image: linear-gradient(90deg, var(--mirage-cyan) 0%, #7af0ff 40%, var(--mirage-magenta) 85%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color: transparent;
}
.heading-brand.soft{ background-image: linear-gradient(90deg, #9be8ff 0%, #d19bff 85%); }

/* Neon button styles (opt-in) */
.btn-neon{
    --b1: var(--mirage-cyan);
    --b2: var(--mirage-magenta);
    background: linear-gradient(90deg, var(--b1), var(--b2));
    color:#fff !important; border:1px solid rgba(255,255,255,.22);
    box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 22px rgba(0,231,255,.28), 0 0 34px rgba(255,0,200,.18);
}
.btn-neon:hover{ transform: translateY(-1px); filter: brightness(1.08); }
.btn-neon--cyan{ --b1:var(--mirage-cyan); --b2:#43ffd8; }
.btn-neon--magenta{ --b1:var(--mirage-magenta); --b2:#ff6ef0; }
.btn-outline-neon{
    background: rgba(255,255,255,.02); color:#e8edff !important;
    border:2px solid rgba(255,255,255,.28);
    box-shadow: 0 6px 16px rgba(0,0,0,.30);
}
.btn-outline-neon:hover{ background: rgba(10,10,31,.22); }

/* Navbar CTA styling */
.navbar-main .navbar-nav > li.nav-cta > a,
.navbar-main .nav-cta > a.btn{
    background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)) !important;
    color:#fff !important; border:1px solid rgba(255,255,255,.22) !important;
    border-radius:999px; padding:.4rem .9rem; font-weight:700;
}

/* --- WHMCS Six homepage blocks (teal areas) --------------------------- */
#home-banner,
.home-banner,
#home-banner .banner-overlay{ background: transparent !important; color:#fff; }

#home-shortcuts,
.home-shortcuts,
.panel-home .panel-heading,
.home-shortcuts .item{
    background: transparent !important;
    border-color: rgba(255,255,255,.10) !important;
    color: var(--mirage-text) !important;
}

.home-shortcuts .item a,
.home-shortcuts .item .title{ color: var(--mirage-text) !important; }

.home-shortcuts .item:hover{
    box-shadow: 0 6px 16px rgba(0,0,0,.30), 0 0 18px rgba(0,231,255,.18) !important;
}

/* Domain search buttons in banner */
#home-banner .btn,
.home-banner .btn{
    border-radius:999px;
}
#home-banner .btn-primary,
.home-banner .btn-primary{
    background: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta)) !important;
    border-color: rgba(255,255,255,.22) !important;
}

/* === Mirage cards for homepage hero + shortcuts ======================== */
/* Hero container stays transparent; only the search group has the glass look */
section#home-banner > .container,
#home-banner > .container,
.home-banner > .container { background: transparent !important; box-shadow:none !important; }

/* Input group inside hero: transparent with glow (no panel tint) */
section#home-banner .input-group.input-group-lg,
.home-banner .input-group.input-group-lg {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: .9rem !important;
    padding: .35rem !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}
section#home-banner .input-group.input-group-lg .form-control,
section#home-banner .input-group.input-group-lg .btn,
.home-banner .input-group.input-group-lg .form-control,
.home-banner .input-group.input-group-lg .btn { border-radius: .6rem !important; }

/* Shortcuts: convert each item into a Mirage card */
/* Compact shortcuts (match reference size) */
/* Base link style for shortcuts (non-card) */
.home-shortcuts li a:not(.card-neon),
.mirage-shortcuts li a:not(.card-neon) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: .45rem 0 !important;
    color: var(--mirage-text) !important;
    box-shadow: none !important;
    display: block;
    font-size: .88rem;
    transition: box-shadow .18s ease, filter .18s ease, color .18s ease;
}
.home-shortcuts li a:not(.card-neon):hover,
.mirage-shortcuts li a:not(.card-neon):hover {
    text-decoration: none;
    filter: brightness(1.06);
    /* Mirage glow hover inspired by spice/mirage.css */
    box-shadow: 0 0 14px rgba(0,231,255,.28), 0 0 24px rgba(255,0,200,.18);
}

/* Navbar layout */
#nav .navbar-collapse{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    text-align:center;
}
#nav .navbar-collapse > .nav.navbar-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:0 auto;
    width:100%;
    float:none;
    gap:6px;
}
#nav .navbar-collapse > .nav.navbar-nav > li{ float:none; }
@media (max-width: 991px){
    #nav .navbar-collapse{
        display:block;
    }
    #nav .navbar-collapse > .nav.navbar-nav{
        display:block;
        white-space:normal;
        flex-wrap:wrap;
        width:100%;
        text-align:left;
    }
}

/* Header action bar (Login/Register/CTA) */
.mirage-header-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}
.mirage-header-bar .mirage-brand{
    flex:1 1 auto;
}
.mirage-header-bar .mirage-brand .logo img{
    max-height:80px;
    border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,.45), 0 0 20px rgba(0,231,255,.25);
    transition:transform .15s ease;
}
.mirage-header-bar .mirage-brand .logo img:hover{
    transform:translateY(-1px);
}
section#header .logo img{
    max-height:80px !important;
    border-radius:10px;
    width:auto;
}
.mirage-nav-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex:0 0 auto;
    margin-left:auto;
}
.mirage-utility{
    display:flex;
    align-items:stretch;
    gap:6px;
    margin-right:12px;
    font-size:.85rem;
}
.mirage-utility-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:6px;
}
.mirage-utility li{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}
.mirage-utility li a{
    text-decoration:none !important;
}
.mirage-utility li.dropdown{
    position:relative;
}
.mirage-utility li.dropdown:hover > .dropdown-menu{
    display:block;
}
.mirage-utility .dropdown-menu{
    right:0;
    left:auto;
    min-width:260px;
    margin-top:10px;
    padding:16px !important;
}
.mirage-utility li.dropdown > a .caret{
    margin-left:.35rem;
}
.mirage-nav-actions .nav-auth{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    float:none !important;
}
.mirage-nav-actions .nav-auth > li{ float:none; }
@media (max-width: 767px){
    .mirage-header-bar{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .mirage-nav-actions{
        width:100%;
        justify-content:flex-start;
    }
    .nav-auth{
        flex-wrap:wrap;
    }
}

/* Mirage shortcuts layout */
.mirage-shortcuts { padding: 0 0 8px; margin-top:6px; }
.mirage-shortcuts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.mirage-shortcuts li { flex: 0 0 auto; min-width: 0; text-align: center; }
.mirage-shortcuts li + li { border-left: 0; }
.mirage-shortcuts li i { display:block; font-size: 18px; margin: 0 0 4px; color: var(--mirage-cyan) !important; }
.mirage-shortcuts li p { margin: 0; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; font-size: .82rem; }
/* clear any previous borders from Six */
.home-shortcuts li { border: 0 !important; }

/* Neon card style (from spice mirage.css semantics) */
.card-neon{
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px; /* pill */
    background: transparent;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
    padding: .35rem .9rem !important; /* smaller */
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none !important;
}
.card-neon:hover{
    border-color: rgba(0,231,255,.25);
    box-shadow: 0 0 16px rgba(0,231,255,.25), 0 0 26px rgba(255,0,200,.18), inset 0 0 24px rgba(0,231,255,.08);
}
.card-neon i{ color: var(--mirage-cyan) !important; text-shadow:0 0 10px rgba(0,231,255,.45); }
.home-shortcuts li i { color: var(--mirage-cyan) !important; }

/* USP overrides */
.mirage-usp{
    padding:60px 0;
}
.mirage-usp .usp-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
    gap:26px;
}
@media(min-width:992px){
    .mirage-usp .usp-grid{
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
}
.mirage-usp .card-neon{
    width:100%;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.06);
    background: rgba(8,12,24,.88);
    box-shadow: 0 16px 36px rgba(0,0,0,.45);
    backdrop-filter: blur(8px);
    padding:32px 24px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
    max-width:260px;
    margin:0 auto;
}
.mirage-usp .card-neon:hover{
    border-color: rgba(0,231,255,.55);
    box-shadow: 0 22px 48px rgba(0,0,0,.55), 0 0 28px rgba(0,231,255,.25);
    transform: translateY(-4px);
}
.mirage-usp .card-neon .icon-neon{
    font-size:2.6rem;
    color:#43ffd8;
    text-shadow:0 0 22px rgba(0,231,255,.65);
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
}
.mirage-usp .card-neon .icon-neon img{
    width:42px;
    height:42px;
    filter: drop-shadow(0 0 18px rgba(0,231,255,.55));
}
.mirage-usp .card-neon h3,
.mirage-usp .card-neon .h5{
    color:#fdfcff;
    font-weight:700;
    letter-spacing:.02em;
    position:relative;
    display:inline-block;
    margin:0 auto;
}
.mirage-usp .card-neon h3::after,
.mirage-usp .card-neon .h5::after{
    content:"";
    display:block;
    width:80px;
    height:2px;
    margin:8px auto 0;
    background: linear-gradient(90deg, rgba(0,231,255,.85), rgba(255,0,200,.85));
    box-shadow:0 0 12px rgba(0,231,255,.4);
}
.mirage-usp .card-neon p{
    color:#cfd3ff;
    margin-bottom:0;
}
#main-menu .navbar-main .navbar-nav > li > a:hover .labelText,
.nav-auth > li > a:hover span,
.nav-auth > li > a:hover strong,
.nav-auth > li > a:hover {
    color: transparent !important;
    background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#main-menu .navbar-main .navbar-nav > li > a:hover .labelText,
.nav-auth > li > a:hover span,
.nav-auth > li > a:hover strong,
.nav-auth > li > a:hover {
    color: transparent !important;
    background-image: linear-gradient(90deg, var(--mirage-cyan), var(--mirage-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn.search,
.btn.transfer{
    background: linear-gradient(120deg, rgba(0,231,255,.18), rgba(255,0,200,.24)) !important;
    color:#a7e8ff !important;
    border:1px solid rgba(255,255,255,.18) !important;
    font-weight:600;
    letter-spacing:.01em;
    padding:.58rem 1.45rem !important;
    text-transform:none;
    box-shadow:0 12px 26px rgba(0,0,0,.42);
    transition:background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn.search{
    border-radius:0 !important;
    border-right:0 !important;
}
.btn.transfer{
    border-radius:0 8px 8px 0 !important;
    margin-left:0;
}
.btn.search:hover,
.btn.transfer:hover{
    background: linear-gradient(115deg, rgba(0,231,255,.32), rgba(255,0,200,.38)) !important;
    color:#dff9ff !important;
    box-shadow:0 16px 32px rgba(0,0,0,.48);
}


/* Mirage feature sections */
.mirage-feature{
    color:#dfe3ff;
}
.mirage-feature + .mirage-feature{
    margin-top:clamp(2.5rem, 4vw, 4.5rem);
}
.mirage-feature h2{
    color:#fdfcff;
    font-weight:700;
    margin-bottom:14px;
}
.mirage-feature .lead{
    color:#cfd9ff;
    max-width:520px;
}
.feature-shell{
    position:relative;
    display:grid;
    gap:clamp(1.25rem, 2.5vw, 2.5rem);
    padding:0;
    border-radius:0;
    overflow:visible;
    isolation:auto;
    max-width:1140px;
    margin:0 auto;
}
.feature-shell::before,
.feature-shell::after{
    content:none;
}
.feature-shell--design{
    background:transparent;
}
.feature-shell--hosting{
    background:transparent;
}
@media (min-width:992px){
    .feature-shell{
        grid-template-columns:repeat(2, minmax(0,1fr));
        align-items:stretch;
    }
    .feature-shell--reverse .feature-card{
        order:2;
    }
    .feature-shell--reverse .feature-visual{
        order:1;
    }
}
.feature-card{
    position:relative;
    z-index:1;
    padding:clamp(1.2rem, 1.9vw, 2.4rem);
    border-radius:30px;
    background:rgba(6,8,26,.9);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 30px 55px rgba(0,0,0,.55);
    isolation:isolate;
}
.feature-shell--hosting .feature-card{
    background:rgba(9,7,26,.92);
}
.feature-card::before,
.feature-card::after{
    content:"";
    position:absolute;
    border-radius:inherit;
    pointer-events:none;
}
.feature-card::before{
    inset:0;
    border:1px solid rgba(255,255,255,.04);
    opacity:.6;
}
.feature-card::after{
    inset:auto 18% -32px 18%;
    height:95px;
    background:radial-gradient(circle, rgba(0,231,255,.18), transparent 60%);
    filter:blur(18px);
    opacity:.8;
}
.feature-eyebrow{
    font-size:.85rem;
    letter-spacing:.3em;
    color:rgba(255,255,255,.7);
}
.feature-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:.7rem;
    color:#cfd3ff;
}
.feature-list li{
    position:relative;
    padding-left:1.85rem;
    line-height:1.5;
}
.feature-list li::before{
    content:"";
    position:absolute;
    top:.3rem;
    left:0;
    width:1rem;
    height:1rem;
    border-radius:999px;
    background:linear-gradient(120deg, rgba(0,231,255,.95), rgba(255,0,200,.85));
    box-shadow:0 0 16px rgba(0,231,255,.5);
}
.feature-link{
    font-weight:600;
    color:#9fe3ff;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    transition:color .2s ease;
}
.feature-link i{
    transition:transform .2s ease;
}
.feature-link:hover{
    color:#fff;
}
.feature-link:hover i{
    transform:translateX(4px);
}
.feature-cta{
    margin-top:1rem;
    gap:1rem;
}
.feature-pill{
    padding:.65rem 1.5rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.25);
    background:linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    color:#fdfcff;
    font-size:.95rem;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:.04em;
    box-shadow:0 10px 25px rgba(0,0,0,.45);
}
.feature-pill strong{
    display:block;
    font-size:1.15rem;
    letter-spacing:0;
}
.feature-visual{
    position:relative;
    z-index:1;
    min-height:280px;
    border-radius:30px;
    padding:clamp(1.2rem, 1.9vw, 2.4rem);
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(145deg, #101433, #080818 65%);
    box-shadow:0 38px 70px rgba(0,0,0,.6), inset 0 0 60px rgba(0,231,255,.08);
    overflow:hidden;
}
.feature-visual--hosting{
    background:linear-gradient(155deg, #0b0f2a, #190825 70%);
    box-shadow:0 38px 70px rgba(0,0,0,.6), inset 0 0 60px rgba(255,0,200,.08);
}
.feature-visual::before,
.feature-visual::after{
    content:"";
    position:absolute;
    filter:blur(32px);
    opacity:.65;
    pointer-events:none;
}
.feature-visual::before{
    inset:-30% auto auto -15%;
    width:65%;
    height:65%;
    background:radial-gradient(circle, rgba(0,231,255,.35), transparent 70%);
}
.feature-visual--hosting::before{
    background:radial-gradient(circle, rgba(255,111,240,.4), transparent 70%);
}
.feature-visual::after{
    inset:auto -20% -30% auto;
    width:55%;
    height:55%;
    background:radial-gradient(circle, rgba(255,0,200,.32), transparent 70%);
}
.feature-visual__window{
    position:relative;
    border-radius:26px;
    padding:1.35rem;
    margin-bottom:1.25rem;
    background:rgba(5,5,15,.82);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 0 35px rgba(0,231,255,.08);
    overflow:hidden;
}
.feature-visual__window::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(120deg, rgba(255,255,255,.05), transparent);
    mix-blend-mode:screen;
    opacity:.4;
    pointer-events:none;
}
.feature-visual__dots{
    display:flex;
    gap:.35rem;
    margin-bottom:1rem;
}
.feature-visual__dots span{
    width:.65rem;
    height:.65rem;
    border-radius:999px;
    background:rgba(255,255,255,.18);
}
.feature-visual__rows{
    display:flex;
    flex-direction:column;
    gap:.65rem;
}
.feature-visual__rows span{
    display:block;
    height:.65rem;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(0,231,255,.55), rgba(255,0,200,.45));
    animation:featureShimmer 6s ease-in-out infinite;
}
.feature-visual__rows span:nth-child(2){
    width:75%;
    animation-delay:.2s;
}
.feature-visual__rows span:nth-child(3){
    width:55%;
    animation-delay:.4s;
}
.feature-visual__rows--grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:.5rem;
}
.feature-visual__rows--grid span{
    height:48px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    box-shadow:inset 0 0 22px rgba(0,0,0,.45);
    animation:gridPulse 5.5s ease-in-out infinite;
}
.feature-visual__rows--grid span:nth-child(odd){
    animation-delay:.35s;
}
.feature-visual__panel{
    position:absolute;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
    box-shadow:inset 0 0 30px rgba(0,0,0,.45);
    pointer-events:none;
}
.feature-visual__panel span{
    display:block;
    border-radius:999px;
}
.feature-visual__panel--wide{
    inset:auto 1.8rem 1.8rem 1.8rem;
    padding:1rem 1.2rem;
    display:flex;
    flex-direction:column;
    gap:.55rem;
}
.feature-visual__panel--wide span{
    height:.55rem;
    background:linear-gradient(90deg, rgba(0,231,255,.48), rgba(255,0,200,.4));
}
.feature-visual__panel--thin{
    top:2.2rem;
    right:1.8rem;
    width:65%;
    padding:.85rem 1rem;
    display:flex;
    gap:.45rem;
}
.feature-visual__panel--thin span{
    flex:1;
    height:.45rem;
    background:rgba(255,255,255,.28);
    opacity:.8;
}
.feature-visual__badge{
    position:absolute;
    right:1.5rem;
    top:1.5rem;
    padding:.65rem 1.1rem;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(8px);
    background:rgba(6,10,20,.75);
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#dfe3ff;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.feature-visual__badge strong{
    display:block;
    font-size:1.05rem;
    letter-spacing:0;
    color:#fff;
}
.feature-visual__badge--cyan{
    background:linear-gradient(120deg, rgba(0,231,255,.2), rgba(0,9,24,.8));
}
.feature-visual__badge--magenta{
    top:auto;
    bottom:1.5rem;
    background:linear-gradient(120deg, rgba(255,0,200,.25), rgba(10,0,25,.85));
}
.feature-visual__chart{
    position:absolute;
    left:2rem;
    right:2rem;
    top:2rem;
    height:140px;
    display:flex;
    align-items:flex-end;
    gap:.55rem;
    pointer-events:none;
}
.feature-visual__chart-line{
    flex:1;
    height:100%;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    position:relative;
    overflow:hidden;
}
.feature-visual__chart-line span{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    border-radius:18px 18px 12px 12px;
    background:linear-gradient(180deg, rgba(0,231,255,.8), rgba(255,0,200,.65));
    box-shadow:0 12px 30px rgba(255,0,200,.35);
    animation:chartPulse 6s ease-in-out infinite;
}
.feature-visual__chart-line:nth-child(1) span{
    height:65%;
    animation-delay:.15s;
}
.feature-visual__chart-line:nth-child(2) span{
    height:80%;
    animation-delay:.35s;
}
.feature-visual__chart-line:nth-child(3) span{
    height:55%;
    animation-delay:.55s;
}
.feature-visual__chart-line:nth-child(4) span{
    height:90%;
    animation-delay:.75s;
}
.feature-visual__metrics{
    position:absolute;
    left:1.5rem;
    bottom:1.5rem;
    display:flex;
    gap:1rem;
    padding:.85rem 1.1rem;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(2,6,16,.75);
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.feature-visual__metrics strong{
    display:block;
    margin-top:.25rem;
    font-size:1rem;
    letter-spacing:0;
    color:#fff;
}
@keyframes featureShimmer{
    0%{ opacity:.5; transform:translateX(0); }
    50%{ opacity:1; transform:translateX(6px); }
    100%{ opacity:.5; transform:translateX(0); }
}
@keyframes gridPulse{
    0%{ opacity:.4; }
    50%{ opacity:1; }
    100%{ opacity:.4; }
}
@keyframes chartPulse{
    0%{ transform:scaleY(.96); }
    50%{ transform:scaleY(1); }
    100%{ transform:scaleY(.96); }
}
@media (max-width:991.98px){
    .feature-shell{
        padding:0;
    }
    .feature-visual{
        min-height:230px;
    }
    .feature-visual__badge{
        position:relative;
        inset:auto;
        margin-top:1rem;
    }
    .feature-visual__metrics{
        position:relative;
        inset:auto;
        margin-top:1rem;
        flex-direction:column;
        align-items:flex-start;
    }
    .feature-visual__chart{
        position:relative;
        inset:auto;
        margin-bottom:1rem;
        height:110px;
    }
}
@media (max-width:575.98px){
    .feature-shell{
        padding:0;
    }
    .feature-card{
        padding:1.15rem;
    }
    .feature-visual{
        padding:1.15rem;
    }
}
.btn.btn-pill{
    border-radius:999px;
    padding:.55rem 1.5rem;
}

/* Portfolio grid */
.mirage-portfolio{
    color:#dfe3ff;
    margin-top:clamp(2.5rem, 4vw, 4.5rem);
}
.portfolio-heading{
    align-items:center;
}
.portfolio-heading h2{
    color:#fdfcff;
    text-shadow:0 10px 30px rgba(0,0,0,.65);
}
.mirage-portfolio .btn-outline-neon{
    white-space:nowrap;
}
.mirage-portfolio-grid > [class*='col']{
    display:flex;
}
.mirage-portfolio-grid > [class*='col'] > .portfolio-card{
    width:100%;
}

/* Pricing section */
.mirage-pricing{
    color:#e6e9ff;
    margin-top:clamp(2.5rem, 4vw, 4.5rem);
}
.pricing-heading{
    text-align:center;
}
.pricing-heading h2{
    color:#fdfcff !important;
    text-shadow:0 12px 35px rgba(0,0,0,.65);
}
.pricing-heading p{
    color:#b2b7d7;
    max-width:620px;
    margin:0 auto;
}
.pricing-card{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    border-radius:32px;
    padding:2.2rem 2.2rem 2.6rem;
    background:linear-gradient(150deg, rgba(6,8,30,.95), rgba(12,5,26,.9));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 35px 80px rgba(0,0,0,.6);
    overflow:hidden;
    backdrop-filter:blur(22px);
}
.pricing-card::before{
    content:"";
    position:absolute;
    inset:-20% auto auto -25%;
    width:70%;
    height:70%;
    background:radial-gradient(circle, rgba(0,231,255,.22), transparent 70%);
    filter:blur(35px);
    opacity:.8;
    pointer-events:none;
}
.pricing-card::after{
    content:"";
    position:absolute;
    inset:auto -25% -35% auto;
    width:70%;
    height:70%;
    background:radial-gradient(circle, rgba(255,0,200,.25), transparent 70%);
    opacity:.6;
    filter:blur(35px);
    pointer-events:none;
}
.pricing-card--featured{
    background:linear-gradient(150deg, rgba(12,15,40,.96), rgba(28,6,32,.92));
    border-color:rgba(255,255,255,.16);
    box-shadow:0 50px 110px rgba(0,0,0,.7);
}
.pricing-card__badge{
    position:absolute;
    top:1.4rem;
    right:1.4rem;
    padding:.4rem 1rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(8,12,26,.85);
    font-size:.75rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#f6f7ff;
    z-index:1;
}
.pricing-card__header{
    margin-bottom:1.6rem;
    position:relative;
    z-index:1;
}
.pricing-card__header h3{
    color:#fff;
    font-weight:700;
}
.pricing-card__price{
    display:flex;
    align-items:flex-end;
    gap:.45rem;
    margin-bottom:.35rem;
}
.pricing-card__price-main{
    font-size:2.6rem;
    font-weight:700;
    color:#fdfcff;
}
.pricing-card__price-term{
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:.85rem;
    color:#c2c7df;
}
.pricing-card__note{
    font-size:.9rem;
    color:#b6bbd8;
    margin-bottom:1rem;
}
.pricing-card__summary{
    color:#cfd3ff;
}
.pricing-card__features{
    list-style:none;
    padding:0;
    margin:0 0 1.6rem;
    display:flex;
    flex-direction:column;
    gap:.55rem;
}
.pricing-card__features li{
    position:relative;
    padding-left:1.6rem;
}
.pricing-card__features li::before{
    content:"";
    position:absolute;
    top:.35rem;
    left:0;
    width:.85rem;
    height:.85rem;
    border-radius:999px;
    background:linear-gradient(120deg, rgba(0,231,255,.9), rgba(255,0,200,.85));
    box-shadow:0 0 12px rgba(0,231,255,.4);
}
.pricing-card .btn{
    font-weight:600;
}
@media (max-width:575.98px){
    .pricing-card{
        padding:1.7rem;
    }
    .pricing-card__badge{
        position:static;
        display:inline-flex;
        margin-bottom:1rem;
    }
}
.portfolio-card{
    height:100%;
    border-radius:30px;
    background:rgba(5,7,25,.92);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 30px 70px rgba(0,0,0,.55);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.portfolio-card__media{
    position:relative;
    border-radius:26px;
    margin:1.25rem 1.25rem 0;
    overflow:hidden;
    background:linear-gradient(135deg, rgba(0,231,255,.15), rgba(255,0,200,.15));
}
.portfolio-card__media img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
    border-radius:inherit;
}
.portfolio-card__placeholder{
    width:100%;
    height:220px;
    border-radius:inherit;
    background:linear-gradient(135deg, rgba(0,231,255,.18), rgba(255,0,200,.2));
    opacity:.85;
}
.portfolio-card__badge{
    position:absolute;
    right:1rem;
    top:1rem;
    padding:.3rem .75rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.3);
    background:rgba(6,10,22,.75);
    font-size:.8rem;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.portfolio-card__body{
    padding:1.25rem 1.5rem 0;
    flex:1;
}
.portfolio-card__body .small{
    opacity:.65;
    letter-spacing:.2em;
    color:#a8b0da;
}
.portfolio-card__summary{
    color:#cfd3ff;
}
.portfolio-card__roles{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
}
.portfolio-card__roles span{
    padding:.3rem .75rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.15);
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    background:rgba(255,255,255,.04);
}
.portfolio-card__footer{
    padding:0 1.5rem 1.25rem;
    gap:1rem;
}
.portfolio-card__meta{
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.65;
}
@media (max-width:767.98px){
    .portfolio-card__media,
    .portfolio-card__body{
        margin:1rem;
        padding:0;
    }
    .portfolio-card__footer{
        flex-direction:column;
        align-items:flex-start !important;
    }
}