/* .navbar is transparent by default; .active (added by main.js on scroll) reveals the background */
/*----------------------------------------------
 MIDNIGHT CYBER THEME — style.css
 Typography: Inter + Plus Jakarta Sans
 Primary: #7F56D9 (Neon Violet)
 Positive: #12B76A (Emerald)
 Negative: #F04438 (Crimson)
 BG: #0B0E11 (Deep Charcoal)
----------------------------------------------*/
/* Google Fonts are loaded non-blocking via <link rel="preload"> in app.blade.php */

:root {
    --body-font: "Inter", sans-serif;
    --heading-font: "Plus Jakarta Sans", sans-serif;

    /* Brand */
    --primary-color: #7F56D9;
    --primary-color-rgb: 127, 86, 217;
    --primary-hover: #6941C6;
    --secondary-color: #0A4FD5;
    --accent-color: #9E77ED;

    /* Market */
    --positive: #12B76A;
    --positive-bg: rgba(18,183,106,.1);
    --negative: #F04438;
    --negative-bg: rgba(240,68,56,.1);
    --warn: #F79009;
    --warn-bg: rgba(247,144,9,.1);

    /* Dark surface palette (default) */
    --bg-body:     #0B0E11;
    --bg-surface:  #111827;
    --bg-surface2: #1D2939;
    --bg-surface3: #243347;
    --glass-bg:    rgba(17,24,39,.75);
    --glass-border: rgba(255,255,255,.08);
    --glass-blur: blur(12px);

    /* Text */
    --text-primary:   #F9FAFB;
    --text-secondary: #9AA3AE;
    --text-muted:     #667085;
    --heading-color:  #F9FAFB;
    --body-color:     #C4CAD4;

    /* Borders */
    --border-color1: rgba(255,255,255,.08);
    --border-color2: rgba(255,255,255,.12);
    --border-color3: rgba(255,255,255,.2);

    /* Legacy alias (used by copied light-theme selectors) */
    --white: #F9FAFB;
    --black: #0B0E11;
    --input-color: #1D2939;
    --bg-color1: rgba(127,86,217,.06);
    --bg-color2: #111827;
    --bg-color3: #1D2939;
    --bg-grad-color: #1D2939;
    --bg-grad-color-trans: rgba(29,41,57,0);
    --grayish-blue: #667085;
    --soft-blue: #9E77ED;
    --grayish-violet: #1D2939;
    --btn-hover-bg: #6941C6;
    --soft-red: #F04438;
    --lime-gray: #2D3748;
    --lime-green-rgb: 18,183,106;
    --vivid-orange: #FB6116;
    --yellow: #F79009;
    --orange: #F79009;
    --loader-color: #0B0E11;
    --primary-color-opacity-low: rgba(127,86,217,.12);
    --secondary-color-opacity-low: rgba(10,79,213,.12);
    --soft-red-opacity-low: rgba(240,68,56,.12);

    /* Shadows */
    --shadow1: 0 4px 24px rgba(0,0,0,.4);
    --shadow2: 0 2px 12px rgba(0,0,0,.5);
    --shadow3: 0 8px 32px rgba(0,0,0,.45);
    --shadow4: 0 0 0 1px rgba(127,86,217,.3), 0 8px 32px rgba(127,86,217,.15);
    --glow: 0 0 20px rgba(127,86,217,.35);

    /* Transitions */
    --transition: all .25s cubic-bezier(.4,0,.2,1);

    /* Glassmorphism */
    --nav-bg: rgba(11,14,17,.85);
    --card-glass: rgba(17,24,39,.7);
}

/* Light mode override — toggled by body.light-mode */
body.light-mode {
    --bg-body:     #F8FAFC;
    --bg-surface:  #FFFFFF;
    --bg-surface2: #F1F5F9;
    --bg-surface3: #E2E8F0;
    --glass-bg:    rgba(255,255,255,.85);
    --glass-border: rgba(0,0,0,.08);

    --text-primary:   #101828;
    --text-secondary: #475467;
    --text-muted:     #98A2B3;
    --heading-color:  #101828;
    --body-color:     #344054;

    --border-color1: #E4E7EC;
    --border-color2: #D0D5DD;
    --border-color3: #101828;

    --white: #FFFFFF;
    --black: #101828;
    --input-color: #F1F5F9;
    --bg-color1: rgba(127,86,217,.05);
    --bg-color2: #FFFFFF;
    --bg-color3: #F8FAFC;
    --bg-grad-color: #FFFFFF;
    --bg-grad-color-trans: rgba(255,255,255,0);
    --loader-color: #F8FAFC;

    --shadow1: 0 4px 16px rgba(0,0,0,.08);
    --shadow2: 0 2px 8px rgba(0,0,0,.06);
    --shadow3: 0 8px 24px rgba(0,0,0,.08);
    --shadow4: 0 0 0 1px rgba(127,86,217,.2), 0 8px 24px rgba(127,86,217,.1);
    --glow: 0 0 16px rgba(127,86,217,.2);

    --nav-bg: rgba(250,247,255,.95);
    --card-glass: rgba(255,255,255,.8);

    --primary-color-opacity-low: rgba(127,86,217,.08);
    --hero-bg-light: linear-gradient(175deg, #EDE9FE 0%, #F0ECFF 20%, #F5F3FF 48%, #F8FAFC 80%);
}

[v-cloak] { display:none; }

/*----------------------------------------------
 Reset
----------------------------------------------*/
*, *::after, *::before { box-sizing:border-box; padding:0; margin:0; }
ul, ol { list-style:none; margin:0; padding:0; }

::-moz-selection { color:#fff; background:var(--primary-color); }
::selection     { color:#fff; background:var(--primary-color); }

html { scroll-behavior:smooth; overflow-x:hidden; }

body {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--body-color);
    background-color: var(--bg-body);
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-surface); }
::-webkit-scrollbar-thumb { background:var(--bg-surface3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary-color); }

p  { color:var(--body-color); margin-bottom:10px; line-height:1.6; font-size:17px; }
a  { color:inherit; text-decoration:none; transition:var(--transition); }
a:hover { color:var(--primary-color); }
button { background:none; border:none; padding:0; cursor:pointer; }
img    { max-width:100%; height:auto; }
figure { margin:0; }

textarea.form-control { height:initial; }

.rtl { direction:rtl; }

h1,h2,h3,h4,h5,h6 {
    font-family: var(--heading-font);
    color: var(--heading-color);
    line-height: 1.25;
    font-weight: 700;
}
h1 { font-size:58px; margin-bottom:20px; font-weight:800; line-height:1.1; letter-spacing:-1.5px; }
h2 { font-size:38px; margin-bottom:15px; letter-spacing:-0.5px; }
h3 { font-size:28px; margin-bottom:12px; }
h4 { font-size:22px; margin-bottom:8px; }
h5 { font-size:18px; margin-bottom:6px; }
h6 { font-size:15px; margin-bottom:0; font-weight:600; color:var(--heading-color); }

@media(max-width:991px){ h1{font-size:38px;} h2{font-size:28px;} h3{font-size:22px;} }
@media(max-width:767px){ h1{font-size:30px; letter-spacing:-0.5px;} }

.logo       { max-width:150px; min-width:90px; }
.footer-logo{ max-width:140px; }

.form-label {
    color: var(--text-primary);
    text-transform: capitalize;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
}
.form-select { color:var(--body-color); }
.form-control, .form-select {
    border-radius: 8px;
    background-color: var(--input-color);
    height: 46px;
    border: 1px solid var(--border-color1);
    color: var(--text-primary);
    transition: var(--transition);
    font-size: 14px;
}
.form-control::placeholder { color:var(--text-muted); }
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(127,86,217,.18);
    border-color: var(--primary-color);
    background-color: var(--input-color);
    color: var(--text-primary);
    outline: none;
}
.form-check label, .form-check-input { cursor:pointer; }
.form-check-input:checked { background-color:var(--primary-color); border-color:var(--primary-color); }
.form-check-input:focus   { border-color:var(--primary-color); box-shadow:none; }
.form-select { background-image:url(../img/accordion/arrow-down.png); background-repeat:no-repeat; }

.input-group { height:46px; box-shadow:var(--shadow2); border-radius:8px; }
.input-group-text {
    font-size:20px; color:var(--white);
    width:46px; height:46px;
    border:none; border-radius:0;
    display:flex; justify-content:center; align-items:center;
    background-color:var(--primary-color);
}
.input-group-text:hover { background-color:var(--primary-hover); color:var(--white); }

/*----------------------------------------------
 Preloader
----------------------------------------------*/
/* Loader — .loader-wrap is the single fixed overlay.
   Background + flex-centering live here so mobile browsers never need
   percentage-height chains to fill the screen. */
.loader-wrap {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    background: var(--loader-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* .preloader and .handle-preloader are pass-through containers */
.loader-wrap .preloader,
.handle-preloader {
    display: contents;
}

.handle-preloader .animation-preloader {
    width: min(92vw, 560px);
    margin: 0 auto;
    text-align: center;
    padding: 0 10px;
}

.handle-preloader .animation-preloader .txt-loading {
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.preloader-close {
    position: fixed; z-index: 10001; font-size: 22px;
    background: var(--primary-color); color: var(--white);
    width: 40px; height: 40px; line-height: 36px;
    text-align: center; border-radius: 50%; cursor: pointer;
    right: 30px; top: 30px;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading {
    font-family:var(--heading-font); font-weight:800;
    letter-spacing: clamp(1px, 0.5vw, 8px);
    display:inline-block; position:relative;
    font-size: clamp(14px, 5.5vw, 72px);
    line-height:1.1; text-transform:uppercase; color:var(--primary-color);
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
    animation:letters-loading 4s infinite;
    content:attr(data-text-preloader);
    left:0; opacity:0; top:0; position:absolute; color:var(--accent-color);
}
@keyframes letters-loading { 0%,75%,100%{ opacity:0; transform:rotateY(-90deg); } 25%,50%{ opacity:1; transform:rotateY(0); } }
@media screen and (max-width: 767px) {
    .preloader-close {
        right: max(14px, env(safe-area-inset-right));
        top: max(14px, env(safe-area-inset-top));
        width: 36px;
        height: 36px;
        line-height: 32px;
        font-size: 18px;
    }

    .handle-preloader .animation-preloader {
        width: min(94vw, 420px);
        padding: 0 8px;
    }

    .handle-preloader .animation-preloader .txt-loading .letters-loading {
        font-size: clamp(12px, 5vw, 28px);
        letter-spacing: 2px;
    }
}

/*----------------------------------------------
 Performance — content-visibility
 Skips layout/paint for off-screen sections.
 contain-intrinsic-size is an estimated height
 to keep scrollbar behaviour stable.
----------------------------------------------*/
.about-section,
.feature-section,
.how-it-work,
.why-choose-us,
.testimonial-section,
.faq-section,
.newsletter-section,
.blog-section,
.footer-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}

/*----------------------------------------------
 Alerts
----------------------------------------------*/
.alert {
    display:flex; align-items:center;
    padding:12px 16px; border-radius:10px; border-left:4px solid;
    background: var(--bg-surface2);
}
.alert .icon-area i { font-size:24px; margin-right:12px; }
.alert .title       { font-size:15px; text-transform:capitalize; font-weight:600; color:var(--heading-color); }
.alert .description { color:var(--body-color); }
.alert-dismissible .btn-close { position:absolute; top:50%; right:20px; transform:translateY(-50%); padding:0; background:none; height:initial; width:initial; }
.alert-dismissible .btn-close i { font-size:20px; }
.alert-success { border-left-color:var(--positive); }
.alert-success .btn-close { color:var(--positive); }
.alert-danger  { border-left-color:var(--negative); }
.alert-danger .btn-close  { color:var(--negative); }
.alert-warning { border-left-color:var(--warn); }
.alert-warning .btn-close { color:var(--warn); }
.alert-message {
    display:flex; align-items:center; gap:8px;
    background-color:var(--warn-bg); border-radius:6px;
    padding:4px 10px; font-size:12px;
    color:var(--heading-color); font-weight:500;
}
.alert-message i { color:var(--warn); font-size:14px; }

/*----------------------------------------------
 Buttons
----------------------------------------------*/
.cmn-btn {
    background: linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);
    padding:11px 24px; border-radius:8px;
    border:1px solid var(--primary-color); transition:var(--transition);
    font-size:15px; font-weight:600; font-family:var(--body-font);
    color:var(--white); display:inline-flex; align-items:center;
    justify-content:center; gap:6px; letter-spacing:.2px;
    text-transform:capitalize;
}
.cmn-btn:hover {
    background:linear-gradient(135deg,var(--accent-color) 0%,var(--primary-color) 100%);
    color:var(--white); box-shadow:var(--glow);
    transform:translateY(-1px);
}
.cmn-btn2 {
    background:transparent; padding:10px 24px; border-radius:8px;
    border:1px solid var(--primary-color); transition:var(--transition);
    font-size:15px; font-weight:600; color:var(--primary-color);
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    text-transform:capitalize;
}
.cmn-btn2:hover { color:var(--white); background:var(--primary-color); box-shadow:var(--glow); }
.cmn-btn3 {
    background:var(--bg-surface); padding:10px 24px; border-radius:8px;
    transition:var(--transition); font-size:15px; font-weight:500;
    display:inline-flex; align-items:center; justify-content:center;
    text-transform:capitalize; border:1px solid var(--border-color1);
    color:var(--text-primary);
}
.cmn-btn3:hover { color:var(--white); background:var(--primary-color); border-color:var(--primary-color); }
.cmn-btn3 img { margin-right:6px; width:16px; }
.login-btn {
    display:flex; padding:10px 20px; transition:var(--transition);
    color:var(--white); border:1px solid var(--primary-color);
    background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));
    border-radius:8px; gap:6px; font-weight:600; font-size:14px;
    align-items:center;
}
.login-btn:hover { background:linear-gradient(135deg,var(--accent-color),var(--primary-color)); color:var(--white); box-shadow:var(--glow); }
@media(max-width:767px){ .login-btn{ padding:8px 12px; } }
.get-start-btn {
    padding:12px 24px; border-radius:8px; font-size:15px; font-weight:600;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));
    color:var(--white); transition:var(--transition);
    border:1px solid var(--primary-color);
}
.get-start-btn:hover { box-shadow:var(--glow); transform:translateY(-1px); color:var(--white); }
.cmn-btn-close {
    font-size:16px; width:38px; height:38px;
    border:1px solid var(--border-color1);
    box-shadow:none; border-radius:8px; transition:var(--transition);
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-surface2); color:var(--text-secondary);
}
.cmn-btn-close:hover { background:var(--primary-color-opacity-low); color:var(--primary-color); }

/*----------------------------------------------
 Navigation (Glassmorphism)
----------------------------------------------*/
.offer-banner-seciton {
    position:relative; color:var(--white); height:44px; z-index:1; font-size:13px;
}
.offer-banner-seciton p { color:var(--white); margin-bottom:0; }
.offer-banner-seciton .offer-overlay {
    position:absolute;
    background:linear-gradient(90deg, rgba(127,86,217,.9), rgba(105,65,198,.9));
    height:100%; width:100%; left:0; top:0; z-index:-1;
}
.offer-close-btn {
    position:absolute; right:20px; top:50%; transform:translateY(-50%);
    font-size:18px; color:var(--white); width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    border-radius:4px; transition:var(--transition);
}
.offer-close-btn:hover { background:rgba(0,0,0,.3); }
.offer-btn {
    font-size:12px; background:rgba(0,0,0,.4); padding:6px 20px;
    color:var(--white); border-radius:4px; font-weight:500;
}
.offer-btn:hover { color:var(--white); background:rgba(0,0,0,.6); }

.mobile-offer-banner {
    position:fixed; bottom:24px; left:0; right:0; max-width:440px;
    z-index:9999; background:var(--primary-color);
    padding:14px 30px 14px 14px; border-radius:10px; margin:auto;
}
.mobile-offer-banner p { color:var(--white); }
.mobile-offer-banner .offer-close-btn { position:absolute; top:4px; right:4px; transform:none; }
@media(max-width:575px){ .mobile-offer-banner{ max-width:calc(100% - 20px); } }

/* Navbar — transparent at page top, gains background when .active is added on scroll */
.navbar {
    transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, border-color .35s ease;
    padding:0; z-index:9999;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
}
.navbar.active {
    background: var(--nav-bg);
    box-shadow: var(--shadow2);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
}
body.light-mode .navbar {
    border-bottom-color: rgba(127,86,217,.18);
    box-shadow: 0 1px 0 rgba(127,86,217,.08);
}

.navbar .container { position:relative; }

.navbar-inner-wrap {
    display:flex; align-items:center;
    justify-content:space-between;
    padding:14px 0;
    width:100%;
}

.navbar .navbar-toggler {
    background:var(--primary-color); color:var(--white);
    height:38px; width:38px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; border:none; border-radius:8px; box-shadow:none;
}
.navbar .cmn-btn-close {
    background:var(--primary-color); width:38px; height:38px;
    border-radius:8px; color:var(--white); padding:0; margin:0; opacity:1; box-shadow:none;
}
.navbar .navbar-nav { text-align:center; }
.navbar .navbar-nav .nav-link {
    font-size:15px; font-weight:500;
    color:var(--text-secondary);
    text-transform:capitalize;
    padding:10px 16px; border-radius:8px;
    transition:var(--transition); letter-spacing:.1px;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color:var(--text-primary);
    background:var(--primary-color-opacity-low);
}
.navbar .navbar-nav .nav-link i { margin-right:4px; color:var(--primary-color); }
.navbar .nav-right { font-size:15px; font-weight:500; color:var(--text-secondary); }
.navbar .nav-right .custom-nav { display:flex; align-items:center; gap:12px; }
.navbar .toggle-btn { font-size:18px; cursor:pointer; color:var(--text-secondary); transition:var(--transition); }
.navbar .toggle-btn:hover { color:var(--primary-color); }
.transparent { background-color:transparent; }
/* Sub-menu */
.profile-box { position:relative; display:inline-block; }
.profile-box:hover .user-dropdown { opacity:1; visibility:visible; top:52px; }
.profile-box .profile {
    cursor:pointer; border:2px solid var(--border-color2);
    padding:2px; background:var(--bg-surface2); border-radius:50%;
}
.profile-box .profile img { width:36px; height:36px; border-radius:50%; }
.profile-box .user-dropdown {
    background:var(--bg-surface);
    border:1px solid var(--border-color1);
    box-shadow:var(--shadow3);
    width:200px; overflow:hidden;
    padding:6px;
    position:absolute; right:0; top:60px;
    border-radius:12px; visibility:hidden;
    transition:var(--transition); opacity:0; z-index:3;
}
.profile-box .user-dropdown li a {
    color:var(--text-secondary); font-weight:400;
    padding:8px 10px; margin:2px; border-radius:8px;
    display:flex; align-items:center; gap:8px; font-size:14px; transition:var(--transition);
}
.profile-box .user-dropdown li a:hover { background:var(--primary-color-opacity-low); color:var(--text-primary); }
.profile-box .user-dropdown li a i { width:22px; color:var(--primary-color); font-size:14px; }

@media(min-width:992px){
    .navbar { padding:0; }
    .navbar-expand-lg .navbar-toggler { display:none !important; }
}
@media(max-width:991px){
    .navbar .navbar-nav .nav-link { padding:14px 16px; }
    .navbar .nav-right { position:absolute; right:55px; }
}
@media(max-width:767px){
    .navbar .nav-right { right:52px; }
    .navbar .nav-right .custom-nav { gap:8px; }
    .navbar .logo img { max-width:110px !important; }
}

/* Offcanvas — z-index must exceed navbar (9999) and loader (10000) */
.offcanvas { background:var(--bg-surface); border:none; z-index: 10002; }
.offcanvas.offcanvas-end { border-left:1px solid var(--border-color1); }
.offcanvas-backdrop {
    background-color:rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    z-index: 10001;
}
/* Offcanvas body — full height flex column so CTA pins to bottom */
.offcanvas-body { height:100%; overflow-y:auto; padding:16px; }
/* Mobile CTA buttons inside offcanvas */
.offcanvas-cta .cmn-btn,
.offcanvas-cta .cmn-btn2 {
    width:100%; border-radius:10px;
    padding:11px 18px; font-size:15px;
    justify-content:center;
}
.offcanvas-cta .cmn-btn2 {
    background:transparent;
    border:1px solid var(--border-color1);
    color:var(--text-primary);
}
body.light-mode .offcanvas-cta .cmn-btn2 {
    border-color: rgba(127,86,217,.3);
    color: var(--text-primary);
}
.offcanvas-cta .cmn-btn2:hover {
    background: var(--primary-color-opacity-low);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/*----------------------------------------------
 Bottom Mobile Nav
----------------------------------------------*/
.bottom-nav {
    background:var(--bg-surface);
    justify-content:space-around;
    box-shadow:0 -1px 0 var(--border-color1);
    border-top-right-radius:12px; border-top-left-radius:12px;
    height:56px; display:flex; align-items:center;
}
.bottom-nav .nav-item .nav-link {
    color:var(--text-muted);
    width:44px; height:44px; padding:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; transition:var(--transition);
}
.bottom-nav .nav-item .nav-link.active,
.bottom-nav .nav-item .nav-link:hover {
    color:var(--primary-color); background:var(--primary-color-opacity-low);
}
.bottom-nav .nav-item .nav-link i { font-size:20px; }

/*----------------------------------------------
 Breadcrumb / Banner
----------------------------------------------*/
.banner-area {
    padding-top:120px; padding-bottom:80px;
    position:relative; z-index:1;
    background-size:cover; background-position:center;
    background-color:var(--bg-surface);
}
.banner-area::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,14,17,.7) 0%, rgba(11,14,17,.4) 100%);
    z-index:-1;
}
body.light-mode .banner-area {
    background-color: var(--bg-surface2);
    background-image: linear-gradient(135deg, rgba(127,86,217,.08) 0%, transparent 60%);
}
body.light-mode .banner-area::after {
    background: linear-gradient(180deg, rgba(127,86,217,.2) 0%, rgba(127,86,217,.06) 100%);
}
.banner-area h3 { font-size:36px; margin-bottom:8px; color:var(--white); }
.breadcrumb-area { font-size:16px; color:var(--white); font-weight:500; text-align:center; }
.breadcrumb-area h3 { text-transform:capitalize; color:var(--white); }
.breadcrumb { display:inline-flex; justify-content:center; margin-top:8px; }
.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content:"\f105"; color:var(--white);
    font-family:"Font Awesome 6 Pro"; font-weight:400;
}
.breadcrumb .breadcrumb-item.active { color:var(--primary-color); text-transform:capitalize; }

@media(max-width:991px){ .banner-area{ padding-top:90px; padding-bottom:50px; } }

/*----------------------------------------------
 Hero Section — Midnight Cyber
----------------------------------------------*/
.hero-section {
    position:relative;
    padding:140px 0 100px;
    overflow:hidden;
    background-color:var(--bg-body);
}
body.light-mode .hero-section {
    background: var(--hero-bg-light);
}
/* Radial glow background */
.hero-section::before {
    content:"";
    position:absolute;
    top:-20%;
    left:50%;
    transform:translateX(-50%);
    width:900px; height:700px;
    background: radial-gradient(ellipse at center,
        rgba(127,86,217,.18) 0%,
        rgba(127,86,217,.05) 50%,
        transparent 75%);
    z-index:0; pointer-events:none;
}
.hero-section::after {
    content:"";
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background-image: url(../img/background/bg.png);
    z-index:0; opacity:.06;
    background-repeat:no-repeat;
    background-size:cover; background-position:center;
}
.hero-section .hero-section-inner { position:relative; z-index:1; }
.hero-section .hero-content .hero-title {
    font-size:58px; font-weight:800;
    line-height:1.1; letter-spacing:-2px;
    color: var(--text-primary);
    margin-bottom:0;
}
.hero-section .hero-content .hero-title .highlight {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.hero-section .hero-content .hero-description {
    margin:24px 0 32px;
    font-size:18px; color:var(--text-secondary); line-height:1.7;
    max-width:520px;
}
.hero-section .hero-content .btn-area {
    display:flex; gap:12px; flex-wrap:wrap;
}
.hero-section .hero-content .we-accept { margin-top:48px; }
.hero-section .hero-content .gatways {
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.hero-section .hero-content .gatways span { font-size:15px; color:var(--text-muted); }

/* Market ticker strip below hero */
.hero-ticker {
    background:var(--bg-surface);
    border-top:1px solid var(--border-color1);
    border-bottom:1px solid var(--border-color1);
    padding:10px 0; overflow:hidden;
}
.hero-ticker .ticker-inner {
    display:flex; gap:32px; animation:ticker 30s linear infinite;
    white-space:nowrap;
    will-change: transform; /* promoted to GPU layer — no layout reflow */
}
@keyframes ticker { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.ticker-item { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--text-secondary); }
.ticker-item .t-name { color:var(--text-primary); }
.ticker-item .t-up   { color:var(--positive); }
.ticker-item .t-down { color:var(--negative); }

@media(max-width:991px){
    .hero-section { padding:100px 0 60px; text-align:center; }
    .hero-section .hero-content .hero-description { margin-left:auto; margin-right:auto; }
    .hero-section .hero-content .btn-area { justify-content:center; }
    .hero-section .hero-content .gatways { justify-content:center; }
    .hero-section .hero-content .we-accept { margin-top:32px; }
}
@media(max-width:767px){
    .hero-section { padding:80px 0 40px; }
    .hero-section .hero-content .hero-title { font-size:32px; }
}

/*----------------------------------------------
 Calculator / Quick-Swap Widget
----------------------------------------------*/
.calculator-banner {
    position:relative; overflow:hidden;
    border-radius:10px 10px 0 0; padding:24px 16px;
    background:linear-gradient(135deg, rgba(127,86,217,.15), rgba(18,183,106,.08));
    border-bottom:1px solid var(--border-color1);
    cursor:pointer;
}
.calculator-banner-wrapper {
    position:absolute; display:flex; width:100%; height:100%;
    left:0; top:0; align-items:center; gap:10px; font-size:13px; padding:0 16px;
}
.calculator-banner-wrapper .left-side { display:flex; align-items:center; gap:8px; flex-grow:1; }
.calculator-banner-wrapper .left-side p { color:var(--text-primary); font-size:14px; font-weight:500; margin-bottom:0; }
.calculator-banner-wrapper .right-side { margin-right:8px; font-size:18px; color:var(--primary-color); }
.calculator-banner-wrapper .image-area img { width:80px; }

.calculator {
    max-width:540px; margin:0 auto;
    background: var(--card-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius:16px;
    border:1px solid var(--glass-border);
    box-shadow: var(--shadow3);
}
.calculator .calculator-body { padding:24px; }
.calculator .calculator-header { margin-bottom:16px; }
.calculator .form-control { height:52px; font-size:15px; }
.calculator .form-description {
    margin:12px 0; font-size:13px; color:var(--text-muted);
}
.calculator .form-description .single-description i { margin-right:4px; color:var(--primary-color); }
.calculator .form-description .single-description:not(:last-child) { margin-right:12px; }
.calculator .btn-area { margin-top:14px; }
.p25 { padding:24px !important; }

/* Exchange rate info */
.exchange-rate-info-wrap { margin:16px 0; }
.exchange-rate-info-inner {
    background:var(--primary-color-opacity-low);
    border:1px solid rgba(127,86,217,.2);
    border-radius:8px; padding:10px 14px;
    font-size:13px; font-weight:500; color:var(--text-primary);
}
.exchange-rate-info-inner i { color:var(--primary-color); }

/* Tabs */
.cmn-tabs { display:flex; justify-content:center; margin-bottom:24px; }
.cmn-tabs .nav-pills {
    display:flex !important; flex-wrap:nowrap !important; width:100%;
    gap:4px; background:var(--bg-surface2);
    padding:4px 6px; border-radius:10px;
    border:1px solid var(--border-color1);
}
.cmn-tabs .nav-pills .nav-item { flex:1 1 0% !important; }
.cmn-tabs .nav-pills .nav-link {
    display:block; height:100%; width:100%;
    padding:9px 16px; font-size:14px; font-weight:500;
    text-transform:capitalize; border-radius:8px;
    color:var(--text-secondary); text-align:center; transition:var(--transition);
}
.cmn-tabs .nav-pills .nav-link.active,
.cmn-tabs .nav-pills .nav-link:hover {
    background:var(--primary-color);
    color:var(--white); box-shadow:var(--glow);
}
.cmn-tabs2 .nav-pills .nav-link {
    color:var(--text-muted); opacity:1; font-size:13px;
    transition:var(--transition); border-radius:0;
    border-bottom:2px solid transparent;
}
.cmn-tabs2 .nav-pills .nav-link.active,
.cmn-tabs2 .nav-pills .nav-link:hover {
    background:transparent; color:var(--primary-color);
    border-bottom-color:var(--primary-color);
}

/* Input box */
.input-box { position:relative; }
.input-box .form-control { padding-right:205px; }
.input-box span.select2.select2-container.select2-container--default {
    position:absolute; top:0; right:0; height:100%; max-width:200px;
}
.input-box .select2-container--default .select2-selection--single {
    height:calc(100% - 8px); position:absolute; width:195px;
    right:4px; top:50%; border-radius:8px;
    display:flex; align-items:center; text-transform:uppercase;
    transform:translateY(-50%); box-shadow:var(--shadow2);
    background:var(--bg-surface3); border:1px solid var(--border-color1);
}
.input-box .select2-container--default .select2-selection--single .select2-selection__arrow { top:10px; }
.select2-dropdown--above, .select2-dropdown--below { width:200px !important; }

/* Input amount box */
.input-amount-box { border-radius:10px; font-size:13px; position:relative; }
.input-amount-box.active .linear-gradient { animation:input-amount-box-animation .3s ease-in-out forwards; }
@keyframes input-amount-box-animation { 0%{transform:scaleX(0)} to{transform:scale(1)} }
.input-amount-box .linear-gradient {
    transition:var(--transition); content:"";
    position:absolute; inset:-2px; margin:auto;
    background:linear-gradient(270deg, var(--positive) 0%, var(--primary-color) 100%);
    border-radius:12px; transform:translate(50%) scaleX(0);
}
.input-amount-box .input-amount-wrapper {
    background:var(--bg-surface2); border-radius:10px;
    padding:14px 16px; z-index:1; position:relative;
    border:1px solid var(--border-color1);
}
.input-amount-box .input-amount-box-inner { display:flex; align-items:center; gap:8px; }
.input-amount-box .title { text-transform:uppercase; font-size:15px; font-weight:700; color:var(--text-muted); }
.input-amount-box input {
    border:none; outline:none; background:transparent;
    text-align:end; font-size:18px; font-weight:700;
    color:var(--text-primary); width:100%;
}
.swap-area {
    display:flex; align-items:center; justify-content:flex-end;
    margin:10px 85px 10px 0;
}
.swap-area .swap-icon {
    width:34px; height:34px; border-radius:50%;
    background:var(--bg-surface3); border:1px solid var(--border-color1);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:var(--transition);
}
.swap-area .swap-icon:hover i { transform:scale(1.2) rotate(180deg); color:var(--primary-color); }

/* Currency list modal */
.currency-list .item {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px; border-radius:8px; cursor:pointer; transition:var(--transition);
}
.currency-list .item:hover { background:var(--primary-color-opacity-low); }
.currency-list .item:not(:last-child) { border-bottom:1px solid var(--border-color1); }
.currency-list .left-side { display:flex; align-items:center; gap:10px; }
.currency-list .left-side .text-area { font-size:12px; color:var(--text-muted); }
.currency-list .left-side .text-area .title { text-transform:uppercase; font-size:15px; font-weight:700; color:var(--text-primary); }
.currency-list .right-side i { font-size:18px; color:var(--primary-color); }
.calculator-modal .modal-header { align-items:initial; background:var(--bg-surface); }
.calculator-modal .modal-header .modal-title { font-weight:600; font-size:18px; }
.calculator-modal .modal-body {
    max-height:400px; overflow:auto; min-height:400px;
    background:var(--bg-surface); border-radius:0 0 12px 12px;
}
.calculator-modal .search-box .search-btn { background:transparent; }
.calculator-modal .search-box .search-btn i { color:var(--text-secondary); }
.calculator-modal.modal-static .modal-dialog { transform:none !important; }

@media(max-width:1199px){
    .input-box .form-control { padding-right:150px; }
    .input-box span.select2.select2-container.select2-container--default { max-width:145px; }
    .swap-area { margin:12px 55px 12px 0; }
    .select2-dropdown--above,.select2-dropdown--below { width:145px !important; }
}
@media(max-width:575px){ .calculator .calculator-body{ padding:16px; } }

/*----------------------------------------------
 Select2
----------------------------------------------*/
img.img-flag { width:26px; min-width:26px; height:26px; border-radius:50%; border:1px solid var(--border-color1); }
span.select2.select2-container.select2-container--default { width:100% !important; }
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple { border:1px solid var(--border-color1); background:var(--input-color); }
.select2-container .select2-selection--single:focus,
.select2-container .select2-selection--multiple:focus { border-color:var(--primary-color); }
.select2-container .select2-dropdown {
    background:var(--bg-surface); border:1px solid var(--border-color1);
    border-radius:10px; box-shadow:var(--shadow3);
}
.select2-container .select2-dropdown .select2-search__field {
    border-radius:6px; border:1px solid var(--border-color1);
    background:var(--bg-surface2); color:var(--text-primary); outline:0;
}
.select2-results__option { border-radius:6px; color:var(--text-secondary); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background:var(--primary-color-opacity-low); color:var(--text-primary);
}
.select2-container--default .select2-results__option--selected {
    background:var(--primary-color); color:var(--white);
}
.select2-container--default .select2-results>.select2-results__options {
    text-transform:capitalize; padding:6px; max-height:280px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color:var(--text-primary); padding-right:10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color:var(--text-muted) transparent transparent transparent; border-width:5px 5px 0;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color:transparent transparent var(--primary-color) transparent; border-width:0 5px 5px;
}
.select2-container--default .select2-selection--multiple { border:1px solid var(--border-color2); }
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(127,86,217,.15);
}
.iti { display:flex; }
.iti__selected-flag { border-radius:6px 0 0 6px; background:var(--bg-surface2); }
.iti__country-list { background:var(--bg-surface); border:1px solid var(--border-color1); border-radius:10px; box-shadow:var(--shadow3); }
.iti-mobile .iti__country-list { z-index:9999; }

/*----------------------------------------------
 Modal
----------------------------------------------*/
/* Keep scrollbar always visible so Bootstrap never needs to add padding-right compensation.
   This eliminates the layout shift when a modal opens. */
html { overflow-y: scroll; }
body.modal-open { padding-right: 0 !important; }
.modal { z-index:9999; }
.modal-content {
    background:var(--bg-surface); border:1px solid var(--border-color1);
    border-radius:16px; color:var(--text-primary);
}
.modal-header { border-bottom:1px solid var(--border-color1); }
.modal-footer { border-top:1px solid var(--border-color1); }
.announcement-modal .modal-content {
    background:linear-gradient(135deg, rgba(127,86,217,.15), rgba(18,183,106,.1)), var(--bg-surface);
}

/*----------------------------------------------
 Section & Layout Utilities
----------------------------------------------*/
section { padding:90px 0; }
@media(max-width:991px){ section{ padding:50px 0; } }

.section-header { margin-bottom:48px; }
.section-title { max-width:560px; }
.section-subtitle {
    text-transform:capitalize; font-size:13px; font-weight:700;
    letter-spacing:2px; color:var(--primary-color);
    margin-bottom:12px; text-transform:uppercase;
    display:inline-flex; align-items:center; gap:8px;
}
.section-subtitle::before {
    content:""; display:inline-block;
    width:24px; height:2px; background:var(--primary-color);
}

.highlight { color:var(--primary-color); }
.bg-highlight { background:var(--primary-color) !important; }
.text-gradient {
    background:linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* Common box card */
.cmn-box {
    display:flex; gap:14px; align-items:flex-start;
    padding:20px; background:var(--bg-surface);
    border-radius:12px; border:1px solid var(--border-color1);
    box-shadow:var(--shadow1); transition:var(--transition);
}
.cmn-box:hover { border-color:rgba(127,86,217,.3); box-shadow:var(--shadow4); }
.cmn-box .icon-box {
    display:flex; align-items:center; justify-content:center;
    font-size:24px; width:56px; min-width:56px; height:56px;
    background:var(--primary-color-opacity-low); border-radius:10px;
    color:var(--primary-color); flex-shrink:0;
}

/* Badge */
.badge-up   { background:var(--positive-bg); color:var(--positive); border-radius:6px; padding:3px 8px; font-size:12px; font-weight:600; }
.badge-down { background:var(--negative-bg); color:var(--negative); border-radius:6px; padding:3px 8px; font-size:12px; font-weight:600; }

/* Social links */
.social-area ul li a {
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; background:var(--bg-surface2); color:var(--text-secondary);
    border:1px solid var(--border-color1); transition:var(--transition);
}
.social-area ul li a:hover { background:var(--primary-color); color:var(--white); border-color:var(--primary-color); }

/* Progress */
.progress { height:8px; background:var(--bg-surface2); border-radius:4px; margin:16px 0; }
.progress .progress-bar { background:linear-gradient(90deg, var(--primary-color), var(--accent-color)); border-radius:4px; }

/* Divider */
.cmn-hr {
    background:linear-gradient(90deg, transparent 0%, var(--border-color1) 40%, var(--border-color1) 60%, transparent 100%);
    border:none; height:1px; margin:40px 0; opacity:1;
}
hr.divider {
    margin-top:40px; border:none; border-top:1px solid var(--border-color1);
    color:var(--text-muted); text-align:center; opacity:1;
}
hr.divider:after {
    content:"or continue with"; display:inline-block;
    position:relative; top:-10px; padding:0 14px;
    background:var(--bg-surface); color:var(--text-muted);
    font-size:13px;
}

/* Dropdown */
.dropdown-menu {
    max-height:28rem; min-width:12rem; overflow-y:auto;
    border-radius:12px; padding:6px;
    background:var(--bg-surface); border:1px solid var(--border-color1);
    box-shadow:var(--shadow3);
}
.dropdown-menu .dropdown-item {
    border-radius:8px; padding:8px 10px; font-size:14px;
    margin-bottom:2px; transition:var(--transition);
    color:var(--text-secondary); font-weight:500;
}
.dropdown-menu .dropdown-item:hover { background:var(--primary-color); color:var(--white); }

/* Search box */
.search-box { position:relative; display:flex; align-items:center; }
.search-box .form-control { border-radius:8px; padding-right:48px; }
.search-box .search-btn {
    position:absolute; background:var(--primary-color);
    width:40px; height:calc(100% - 4px); border-radius:6px; right:2px;
    display:flex; align-items:center; justify-content:center;
}
.search-box .search-btn i { color:var(--white); font-size:16px; }
.search-box2 { position:relative; display:flex; align-items:center; }
.search-box2 .form-control { border-radius:8px; height:52px; padding:10px 140px 10px 18px; }
.search-box2 .search-btn2 {
    transition:var(--transition); position:absolute; right:4px;
    background:var(--primary-color); height:calc(100% - 8px);
    border-radius:6px; padding:10px 32px;
    color:var(--white); display:flex; align-items:center; font-weight:600;
}
.search-box2 .search-btn2:hover { background:var(--primary-hover); color:var(--white); }
@media(max-width:575px){
    .search-box2 .form-control { height:44px; padding:10px 90px 10px 14px; }
    .search-box2 .search-btn2 { padding:8px 18px; }
}

/* Scrollbar for cmn-scroll */
.cmn-scroll { max-height:255px; overflow-y:auto; padding-right:4px; padding-top:8px; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { border-radius:2px; background:var(--primary-color); }

/* Link */
.link { text-decoration:underline; color:var(--primary-color); transition:var(--transition); }
.fw-500 { font-weight:500; }
.opacity { opacity:.5; }

/*----------------------------------------------
 Spacing utilities (preserve from light theme)
----------------------------------------------*/
.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mt-25{margin-top:25px}.mt-30{margin-top:30px}.mt-35{margin-top:35px}.mt-40{margin-top:40px}.mt-45{margin-top:45px}.mt-50{margin-top:50px}.mt-60{margin-top:60px}.mt-70{margin-top:70px}.mt-75{margin-top:75px}.mt-80{margin-top:80px}.mt-100{margin-top:100px}.mt-150{margin-top:150px}.mt-190{margin-top:190px}
.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.mb-25{margin-bottom:25px}.mb-30{margin-bottom:30px}.mb-35{margin-bottom:35px}.mb-40{margin-bottom:40px}.mb-45{margin-bottom:45px}.mb-50{margin-bottom:50px}.mb-60{margin-bottom:60px}.mb-65{margin-bottom:65px}.mb-70{margin-bottom:70px}.mb-75{margin-bottom:75px}.mb-80{margin-bottom:80px}.mb-100{margin-bottom:100px}.mb-150{margin-bottom:150px}
.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-25{padding-top:25px}.pt-30{padding-top:30px}.pt-35{padding-top:35px}.pt-40{padding-top:40px}.pt-45{padding-top:45px}.pt-50{padding-top:50px}.pt-60{padding-top:60px}.pt-75{padding-top:75px}.pt-80{padding-top:80px}.pt-100{padding-top:100px}.pt-150{padding-top:150px}.pt-190{padding-top:190px}.pt-200{padding-top:200px}
.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-25{padding-bottom:25px}.pb-30{padding-bottom:30px}.pb-35{padding-bottom:35px}.pb-40{padding-bottom:40px}.pb-45{padding-bottom:45px}.pb-50{padding-bottom:50px}.pb-65{padding-bottom:65px}.pb-70{padding-bottom:70px}.pb-75{padding-bottom:75px}.pb-80{padding-bottom:80px}.pb-100{padding-bottom:100px}.pb-150{padding-bottom:150px}
.top-right-radius-0{border-top-right-radius:0!important}.top-left-radius-0{border-top-left-radius:0!important}.bottom-right-radius-0{border-bottom-right-radius:0!important}.bottom-left-radius-0{border-bottom-left-radius:0!important}

/*----------------------------------------------
 Animations / Shapes
----------------------------------------------*/
.shape { position:absolute; }
.shape img { width:60px; }
.shape1 { top:6%; left:50%; transform:translateX(-50%); opacity:.3; }
.shape1 img { animation:rotate 4s cubic-bezier(.41,.15,.64,.86) infinite alternate; }
.shape2 { top:-5%; left:12%; opacity:.3; }
.shape2 img { animation:rotate 5s cubic-bezier(.41,.15,.64,.86) infinite alternate; }
.shape3 { top:10%; right:12%; opacity:.3; }
.shape3 img { animation:rotate 3.5s cubic-bezier(.41,.15,.64,.86) infinite alternate; }
.bg-shape1 {
    position:absolute; content:""; top:15%; left:20%;
    height:350px; width:350px; filter:blur(120px);
    background:var(--primary-color); z-index:0; opacity:.15;
}
@keyframes rotate { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes fadeInUp2 { 0%{transform:translateY(-10px)} 100%{transform:translateY(10px)} }
@keyframes slideInRight { 0%{transform:translateX(-10px)} 100%{transform:translateX(10px)} }
@keyframes zoomOut { 0%{scale:1} 50%{scale:.8} 100%{scale:1} }
.animation1 { position:relative; animation:animation1 2.5s ease-in-out infinite alternate; will-change:transform; }
/* Use transform:translateY instead of top — avoids layout reflow on each frame */
@keyframes animation1 { from{transform:translateY(0)} to{transform:translateY(16px)} }

.bg-gradiend1 {
    content:""; height:92%; width:920px; border:1px solid var(--glass-border);
    padding:40px; border-bottom-left-radius:25%;
    top:0%; right:-3%; transform:rotate(-10deg);
    position:absolute; display:none;
}
.bg-gradiend1 .bg-gradiend1-inner {
    position:absolute; background:linear-gradient(219deg, transparent 0%, rgba(127,86,217,.05) 100%);
    height:96%; width:700px; border-bottom-left-radius:25%; top:5%; right:-1%;
}
@media(min-width:992px){ .bg-gradiend1{ display:block; width:570px; top:-10%; right:-4%; } .bg-gradiend1 .bg-gradiend1-inner{ width:550px; top:0; right:-1%; } }
@media(min-width:1200px){ .bg-gradiend1{ height:100%; width:725px; top:-12%; right:-4%; } .bg-gradiend1 .bg-gradiend1-inner{ height:97%; width:700px; } }
@media(min-width:1400px){ .bg-gradiend1{ width:987px; top:-12%; right:-3%; } .bg-gradiend1 .bg-gradiend1-inner{ width:1018px; right:-6%; } }
.bg-gradiend2 {
    content:""; height:92%; width:920px; border:1px solid var(--glass-border);
    padding:40px; border-bottom-right-radius:25%;
    top:0%; left:-3%; transform:rotate(10deg);
    position:absolute; display:none;
}
.bg-gradiend2 .bg-gradiend2-inner {
    background:linear-gradient(296deg, rgba(127,86,217,.05) 0%, transparent 100%);
    position:absolute; height:96%; width:700px; border-bottom-right-radius:25%; top:5%; left:-1%;
}
@media(min-width:992px){ .bg-gradiend2{ display:block; width:570px; top:-10%; left:-4%; } }
@media(min-width:1200px){ .bg-gradiend2{ height:100%; width:725px; top:-12%; left:-4%; } }
@media(min-width:1400px){ .bg-gradiend2{ width:960px; top:-12%; left:-3%; } }

/* Owl carousel */
.owl-theme .owl-dots .owl-dot span { width:8px; height:4px; background:var(--bg-surface3); border-radius:4px; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background:var(--primary-color); }
.owl-theme .owl-dots .owl-dot.active span { width:24px; height:4px; background:var(--primary-color); }
.owl-theme .owl-dots .owl-dot span { transition:all .4s; }

/* Round box */
.round-box-content {
    color:var(--white); width:120px; height:120px; border-radius:50%;
    text-align:center; background:rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; position:relative; border:2px solid var(--glass-border);
}
.curved-circle { text-transform:uppercase; animation:rotate 20s linear infinite; }
.round-box-content .inner-icon { position:absolute; font-size:24px; left:50%; top:50%; transform:translate(-50%,-50%); }
.round-box-content .inner-icon i { transform:rotate(45deg); }

/* NoUISlider */
#slider { height:8px; }
#slider .noUi-connect { background:var(--primary-color); }
#slider .noUi-handle { height:18px; width:18px; top:-5px; right:-9px; border-radius:50%; background:var(--primary-color); border:none; box-shadow:var(--glow); }
#slider .noUi-handle::after, #slider .noUi-handle::before { background:transparent; }

/* Multi-step progress */
.multi-step-progress-section { width:100%; }
.multi-step-list { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.multi-step-list .item { position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; }
.multi-step-list .item::before { content:""; width:100%; height:2px; left:50%; top:12px; position:absolute; background:var(--bg-surface2); }
.multi-step-list .item:last-child::before { display:none; }
.multi-step-list .item.active::before { background:var(--primary-color); }
.multi-step-list .item.active .number { border-color:var(--primary-color); background:var(--primary-color); color:var(--white); }
.multi-step-list .item.active .title { color:var(--text-primary); }
.multi-step-list .item .progress-link { display:flex; align-items:center; flex-direction:column; justify-content:center; }
.multi-step-list .item .number { font-size:13px; font-weight:600; color:var(--text-muted); width:24px; height:24px; border-radius:50%; border:2px solid var(--border-color2); display:flex; align-items:center; justify-content:center; margin-bottom:4px; background:var(--bg-surface2); z-index:1; }
.multi-step-list .item .title { font-size:13px; font-weight:500; text-transform:capitalize; color:var(--text-muted); }

/* cmn-list */
.cmn-list .item { position:relative; display:flex; gap:12px; }
.cmn-list .item:not(:last-child)::after { position:absolute; content:""; height:100%; width:1px; background:var(--border-color1); left:11px; z-index:-1; }
.cmn-list .item .number { font-weight:600; color:var(--text-primary); min-width:24px; height:24px; border:1px solid var(--border-color2); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-surface2); }
.cmn-list .item:not(:last-child) { padding-bottom:24px; }

/* Ratings */
.ratings li i { color:var(--warn); opacity:.4; }
.ratings li .active { color:var(--warn); opacity:1; }

/* Countdown */
.countdown-area { display:flex; gap:8px; }
.countdown-area #countdown1 { display:flex; }

/* Pagination */
.pagination-section { margin-top:40px; display:flex; justify-content:flex-end; }
.pagination-section nav .pagination .page-item .page-link {
    margin:4px; width:38px; height:38px; border-radius:8px !important;
    color:var(--text-secondary); background:var(--bg-surface);
    display:flex; justify-content:center; align-items:center;
    border:1px solid var(--border-color1); box-shadow:none; transition:var(--transition);
}
.pagination-section nav .pagination .page-item .page-link:hover,
.pagination-section nav .pagination .page-item .page-link:focus { background:var(--primary-color); color:var(--white); border-color:var(--primary-color); }
.pagination-section nav .pagination .page-item.active .page-link { background:var(--primary-color); color:var(--white); border-color:var(--primary-color); }

/*----------------------------------------------
 Feature Section
----------------------------------------------*/
.feature-section {
    position:relative; background:var(--bg-surface);
    border-top:1px solid var(--border-color1);
    border-bottom:1px solid var(--border-color1);
    overflow:hidden;
}
.feature-section .feature-section-inner { position:relative; z-index:2; }

/*----------------------------------------------
 About Section
----------------------------------------------*/
.about-section { position:relative; background:var(--bg-body); overflow:hidden; }
.about-section .btn-area { margin-top:28px; }
.about-section .about-thum { position:relative; height:500px; width:440px; max-width:440px; margin:0 auto; }
.about-section .about-thum .img-2 { position:absolute; left:100px; top:100px; border:4px solid var(--bg-surface2); border-radius:8px; }
.about-section .about-thum > img { border-radius:20px; width:100%; height:100%; object-fit:cover; box-shadow:var(--shadow4); }
.feature-thumbs { max-width:520px; max-height:520px; position:relative; margin:0 auto; }
.feature-thumbs .orbit { animation:rotate 10s infinite linear; }
.feature-thumbs .bitcoin { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:260px; }
.feature-thumbs img { width:100%; }
@media(max-width:767px){ .about-section{ text-align:center; } }
@media(max-width:575px){ .about-section .about-thum{ width:290px; height:440px; } }

/* Section badge pill */
.section-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:100px;
    background:var(--primary-color-opacity-low);
    border:1px solid rgba(127,86,217,.25);
    color:var(--primary-color); font-size:13px; font-weight:500;
    letter-spacing:.02em;
}

/* About floating stat cards */
.about-stat-card {
    position:absolute; display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-radius:12px;
    background:var(--glass-bg); backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border); box-shadow:var(--shadow3);
    z-index:2; white-space:nowrap;
}
.about-stat-card .stat-icon {
    width:36px; height:36px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    background:var(--primary-color-opacity-low); color:var(--primary-color); flex-shrink:0;
}
.about-stat-card .stat-icon.positive { background:var(--positive-bg); color:var(--positive); }
.about-stat-card .stat-icon.warn    { background:rgba(247,144,9,.12);  color:#F79009; }
.about-stat-card .stat-value { font-size:16px; font-weight:700; color:var(--text-primary); line-height:1.2; }
.about-stat-card .stat-label { font-size:11px; color:var(--text-muted); }
.about-stat-1 { top:28px; right:-16px; }
.about-stat-2 { bottom:52px; left:-20px; }
@media(max-width:991px){ .about-stat-1{ right:0; } .about-stat-2{ left:0; } }
@media(max-width:767px){ .about-stat-1,.about-stat-2{ display:none; } }

/* About feature list */
.about-feature-list { list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:10px; }
.about-feature-list li { display:flex; align-items:center; gap:10px; color:var(--text-secondary); font-size:15px; }
.about-feature-list li i { color:var(--positive); font-size:15px; flex-shrink:0; }

/* About stats row */
.about-stats-row { display:flex; gap:28px; margin-top:28px; flex-wrap:wrap; }
.about-stats-row .stat-item { display:flex; flex-direction:column; gap:2px; }
.about-stats-row .stat-item .val { font-size:24px; font-weight:700; color:var(--text-primary); }
.about-stats-row .stat-item .lbl { font-size:13px; color:var(--text-muted); }
.about-stats-row .stat-divider { width:1px; background:var(--border-color1); align-self:stretch; }

/*----------------------------------------------
 How It Works
----------------------------------------------*/
.how-it-work { position:relative; background:var(--bg-surface); overflow:hidden; padding:70px 0; }
.how-it-work .section-header { margin-bottom:28px; }
.how-it-work .how-it-work-content .btn-area { margin-top:28px; }
.how-it-work-thumbs { position:relative; z-index:0; }
.how-it-work-thumbs::after {
    content:""; position:absolute; top:50%; left:50%;
    height:calc(100% + 80px); width:calc(100% - 80px);
    transform:translate(-50%,-50%);
    background:linear-gradient(135deg, rgba(127,86,217,.06), rgba(18,183,106,.04));
    border-radius:16px; z-index:-1;
}
.how-it-work-thumbs .img-info-box {
    background:var(--primary-color); padding:10px 14px;
    display:inline-flex; border-radius:10px; align-items:center; gap:8px;
    position:absolute; left:0; bottom:0;
}
.how-it-work-thumbs .img-info-box .icon-box { width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.15); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:20px; }
.how-it-work-thumbs .img-info-box .text-box { font-size:16px; color:var(--white); }
@media(max-width:991px){ .how-it-work-thumbs{ margin:40px 0; } }

/* ── How It Works — Image Frame ──────────────────────────────────────── */
.hw-image-frame {
    position: relative;
    max-width: 460px;
    padding: 24px 24px 36px 24px;
}
.hw-img-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127,86,217,.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.hw-main-img {
    position: relative; z-index: 1;
    width: 100%; display: block;
    border-radius: 20px;
    object-fit: cover;
    max-height: 460px;
    border: 1px solid var(--border-color1);
    box-shadow: 0 28px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(127,86,217,.14);
}
.hw-float-badge {
    position: absolute; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    background: rgba(17, 24, 39, 0.82);
    border: 1px solid rgba(127,86,217,.28);
    border-radius: 14px;
    padding: 10px 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    white-space: nowrap;
}
.hw-float-top  { top: 8px;  left: 0; }
.hw-float-bottom { bottom: 8px; right: 0; }
.hw-float-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: var(--primary-color-opacity-low); color: var(--primary-color);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.hw-float-icon--accent {
    background: rgba(18,183,106,.12); color: #12B76A;
}
.hw-float-badge span { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.hw-float-label { font-size: 11px; color: var(--text-muted); font-weight: 400; line-height: 1.3; }
.hw-float-value { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
/* light mode overrides */
body.light-mode .hw-main-img {
    box-shadow: 0 28px 64px rgba(127,86,217,.14), 0 0 0 1px rgba(127,86,217,.12);
}
body.light-mode .hw-float-badge {
    background: rgba(255,255,255,.90);
    border-color: rgba(127,86,217,.18);
    box-shadow: 0 8px 28px rgba(127,86,217,.12);
}
body.light-mode .hw-float-badge span,
body.light-mode .hw-float-value { color: var(--text-primary); }
@media(max-width:991px) {
    .hw-image-frame { max-width: 100%; padding: 20px 0; }
    .hw-float-top  { top: 4px;  left: 8px; }
    .hw-float-bottom { bottom: 4px; right: 8px; }
}

/* Process visual card — left panel */
.process-visual-card {
    background:var(--bg-surface2); border:1px solid var(--border-color1);
    border-radius:20px; padding:32px 28px; position:relative; overflow:hidden;
}
.process-visual-card::before {
    content:""; position:absolute; top:-60px; right:-60px;
    width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, rgba(127,86,217,.15), transparent 70%);
    pointer-events:none;
}
.process-icon-wrap {
    width:40px; height:40px; border-radius:10px;
    background:var(--primary-color-opacity-low); color:var(--primary-color);
    display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.process-header-label { font-weight:600; color:var(--text-primary); font-size:15px; }

/* Process vertical steps inside the visual card */
.process-step-item { display:flex; align-items:flex-start; gap:14px; position:relative; }
.process-step-item:not(:last-child) { padding-bottom:24px; }
.process-step-item:not(:last-child)::after {
    content:""; position:absolute; left:18px; top:40px;
    height:calc(100% - 16px); width:2px;
    background:linear-gradient(180deg, rgba(127,86,217,.5), transparent);
}
.process-step-num {
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--primary-color); color:var(--white);
    font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 14px rgba(127,86,217,.4);
}
.process-step-text h6 { color:var(--text-primary); font-weight:600; font-size:14px; margin-bottom:3px; }
.process-step-text p  { color:var(--text-muted); font-size:13px; margin:0; line-height:1.5; }
.process-accent-chip {
    display:inline-flex; align-items:center; gap:8px; margin-top:22px;
    padding:10px 16px; border-radius:10px;
    background:var(--primary-color); color:var(--white); font-size:13px; font-weight:600;
}

/* How-it-work steps — right panel */
.hw-step {
    display:flex; gap:16px; padding:18px 20px; border-radius:14px;
    background:var(--bg-surface2); border:1px solid var(--border-color1);
    transition:var(--transition);
}
.hw-step:hover { border-color:rgba(127,86,217,.35); box-shadow:var(--shadow4); transform:translateY(-2px); }
.hw-step-num {
    min-width:44px; height:44px; border-radius:12px; flex-shrink:0;
    background:var(--primary-color-opacity-low); color:var(--primary-color);
    font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(127,86,217,.2);
}
.hw-step-body h5 { color:var(--text-primary); font-size:15px; font-weight:600; margin-bottom:4px; }
.hw-step-body p  { color:var(--text-secondary); font-size:14px; margin:0; line-height:1.6; }

/*----------------------------------------------
 Why Choose Us
----------------------------------------------*/
.why-choose-us { position:relative; background:var(--bg-body); overflow:hidden; }
.why-choose-us-thum { position:relative; height:500px; max-width:580px; margin:0 auto; }
.why-choose-us-thum .img-2 { position:absolute; bottom:0; right:0; border-left:8px solid var(--bg-surface2); border-top:8px solid var(--bg-surface2); border-radius:10px; }
.why-choose-us-thum .img-info-box { position:absolute; left:0; bottom:0; width:240px; background:var(--primary-color); padding:20px 40px; border-radius:10px; }
.why-choose-us-thum .img-info-box .title { font-size:22px; color:var(--white); font-weight:600; }
.why-choose-us-thum .img-info-box .sub-title { font-size:16px; color:rgba(255,255,255,.8); }
.choose-us-list .item { margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.choose-us-list .item img { width:24px; }
@media(max-width:767px){ .why-choose-us-thum{ text-align:center; height:480px; margin-bottom:24px; } }

/*----------------------------------------------
 Testimonials
----------------------------------------------*/
.testimonial-section { background:var(--bg-surface); position:relative; }
.testimonial-section .testimonial-box {
    position:relative; padding:24px;
    background:var(--bg-surface2);
    border-radius:12px; transition:var(--transition);
    border:1px solid var(--border-color1);
}
.testimonial-section .testimonial-box:hover { border-color:rgba(127,86,217,.3); box-shadow:var(--shadow4); }
.testimonial-section .testimonial-box .testimonial-thumbs {
    position:absolute; right:20px; top:-24px;
    background:var(--bg-surface); border:2px solid var(--border-color1);
    padding:2px; border-radius:8px;
}
.testimonial-section .testimonial-box .testimonial-thumbs img { width:60px; height:60px; border-radius:6px; }
.testimonial-section .testimonial-box .qoute-icon { font-size:30px; color:var(--primary-color); }
.testimonial-section .testimonial-box .quote-area { margin-top:16px; }
.testimonial-section .owl-theme .owl-nav.disabled+.owl-dots { margin-top:24px; }
.testimonial-section .testimonial-carousel .owl-stage-outer { padding-top:44px; }

/*----------------------------------------------
 FAQ
----------------------------------------------*/
.faq-section { position:relative; background:var(--bg-body); }
.faq-thum { max-width:560px; position:relative; margin:0 auto; }
.faq-thum img { width:100%; }
.faq-thum .question-mark { position:absolute; top:40px; right:60px; width:80px; animation:slideInRight 1.5s ease-in-out .5s forwards infinite alternate; }
.faq-section .accordion-button {
    padding-left:0; padding-right:0;
    color:var(--text-primary); font-weight:500; font-size:17px;
    background:transparent;
}
.faq-section .accordion-button:focus { box-shadow:none; }
.faq-section .accordion-button:not(.collapsed) { box-shadow:none; background:transparent; color:var(--primary-color); }
.faq-section .accordion-body { padding-left:0; padding-right:0; color:var(--text-secondary); }
.accordion-item { margin:8px 0; background:transparent; border:none; border-bottom:1px solid var(--border-color1); }
.accordion-item:last-of-type { border-radius:0; }
.accordion-button { background:transparent; }
.accordion-button::after { background:url(../img/accordion/plus.png); width:24px; height:24px; background-color:var(--primary-color); background-size:50%; background-repeat:no-repeat; background-position:center; border-radius:6px; }
.accordion-button:not(.collapsed)::after { background:url(../img/accordion/minus.png); width:24px; height:24px; background-color:var(--primary-color); background-size:50%; background-repeat:no-repeat; background-position:center; border-radius:6px; }
@media(max-width:575px){ .faq-section{ overflow:hidden; } .faq-thum .question-mark{ right:20px; width:55px; } }

/*----------------------------------------------
 Blog Section
----------------------------------------------*/
.blog-section { position:relative; background:var(--bg-body); }
.blog-box { display:flex; align-items:center; gap:16px; }
.blog-box .thumbs-area { position:relative; padding:4px; background:var(--bg-surface2); border-radius:8px; overflow:hidden; }
.blog-box .thumbs-area img { max-width:120px; min-width:120px; height:100%; min-height:120px; object-fit:cover; border-radius:6px; }
.blog-box .content-area .blog-title { margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; display:-webkit-box; -webkit-line-clamp:1; color:var(--text-primary); transition:var(--transition); }
.blog-box .content-area .blog-title:hover { color:var(--primary-color); }
.blog-box .content-area .description { overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; display:-webkit-box; -webkit-line-clamp:2; color:var(--text-secondary); font-size:14px; }
.blog-btn { display:inline-block; color:var(--primary-color); font-weight:500; font-size:14px; }
.blog-btn i { margin-left:4px; }
.blog-box-large { display:flex; flex-direction:column; gap:16px; }
.blog-box-large .thumbs-area { position:relative; border-radius:10px; overflow:hidden; }
.blog-box-large .thumbs-area img { height:360px; width:100%; object-fit:cover; }
.blog-box-large .content-area .blog-title { margin-bottom:12px; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; display:-webkit-box; -webkit-line-clamp:2; color:var(--text-primary); }
.blog-date { position:absolute; background:var(--primary-color); top:12px; left:12px; text-align:center; padding:4px 10px; border-radius:6px; }
.blog-date p, .blog-date h5 { color:var(--white); text-transform:uppercase; margin-bottom:0; }
.blog-box .blog-date h5 { font-size:13px; }
.blog-box .blog-date p  { font-size:11px; }
.blog-details-section { background:var(--bg-surface); }
.blog-quote-box { margin:40px 0 16px; position:relative; background:var(--bg-surface2); border:1px solid rgba(127,86,217,.2); padding:24px 18px 18px 36px; border-radius:10px; border-left:4px solid var(--primary-color); }
.blog-quote-box .icon-area { position:absolute; font-size:22px; color:var(--primary-color); top:-26px; left:-18px; background:var(--bg-surface2); width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow:var(--shadow1); }
.sidebar-widget-area { padding:24px; background:var(--bg-surface); border:1px solid var(--border-color1); border-radius:12px; margin-bottom:24px; }
.sidebar-widget-area .widget-title { margin-bottom:16px; position:relative; padding-bottom:10px; color:var(--text-primary); }
.sidebar-widget-area .widget-title::before { position:absolute; bottom:0; left:0; content:""; width:40px; height:2px; background:var(--primary-color); }
.sidebar-widget-area .widget-title::after { position:absolute; bottom:0; left:0; content:""; width:120px; height:2px; background:var(--border-color1); }
.sidebar-widget-area .sidebar-widget-item { display:flex; transition:var(--transition); gap:12px; }
.sidebar-widget-area .sidebar-widget-item:hover .content-area .title { color:var(--primary-color); }
.sidebar-widget-area .sidebar-widget-item .image-area { width:90px; }
.sidebar-widget-area .sidebar-widget-item .image-area img { width:100%; height:80px; border-radius:8px; object-fit:cover; }
.sidebar-widget-area .sidebar-widget-item .content-area .title { font-size:15px; color:var(--text-primary); margin-bottom:6px; font-weight:500; }
.sidebar-widget-area .sidebar-widget-item .content-area .widget-date { display:flex; gap:4px; color:var(--text-muted); font-size:13px; }
.sidebar-widget-area .sidebar-widget-item .content-area .widget-date i { color:var(--primary-color); }
.sidebar-widget-area .sidebar-widget-item:not(:last-child) { margin-bottom:16px; }
.sidebar-categories-area li { border-bottom:1px solid var(--border-color1); padding:10px 0; }
.sidebar-categories-area li a { font-size:16px; font-weight:400; display:flex; justify-content:space-between; color:var(--text-secondary); transition:var(--transition); }
.sidebar-categories-area li a:hover { color:var(--primary-color); }
.tag-list .item { display:inline-block; font-size:13px; padding:8px 14px; transition:var(--transition); border-radius:6px; margin:0 4px 4px 0; background:var(--bg-surface2); border:1px solid var(--border-color1); color:var(--text-secondary); }
.tag-list .item:hover { background:var(--primary-color); color:var(--white); border-color:var(--primary-color); }

/*----------------------------------------------
 Newsletter / Subscribe
----------------------------------------------*/
.newsletter-section {
    position:relative; overflow:hidden; padding:60px 0;
    background:linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}
.newsletter-section .content-area { color:var(--white); }
.newsletter-section .content-area .subscribe-normal-text { font-size:28px; font-weight:700; color:var(--white); }
.newsletter-section .newsletter-form { margin-top:16px; position:relative; display:flex; align-items:center; }
.newsletter-section .newsletter-form .form-control { border-radius:8px; height:52px; padding:10px 160px 10px 18px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:var(--white); }
.newsletter-section .newsletter-form .form-control::placeholder { color:rgba(255,255,255,.6); }
.newsletter-section .newsletter-form .form-control:focus { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.15); }
.newsletter-section .newsletter-form .subscribe-btn { transition:var(--transition); position:absolute; right:4px; background:rgba(0,0,0,.3); height:calc(100% - 8px); border-radius:6px; padding:10px 32px; color:var(--white); display:flex; align-items:center; font-weight:600; }
.newsletter-section .newsletter-form .subscribe-btn:hover { background:rgba(0,0,0,.5); }
.newsletter-thumbs { display:flex; justify-content:flex-end; align-items:flex-end; height:100%; }
.newsletter-thumbs img { max-height:300px; width:auto; display:block; object-fit:contain; filter:drop-shadow(0 16px 40px rgba(0,0,0,.3)); }
@media(max-width:991px){ .newsletter-section .content-area { text-align:center; } .newsletter-section .content-area .subscribe-normal-text { font-size:22px; } }
@media(max-width:575px){ .newsletter-section .newsletter-form .form-control { height:44px; padding:8px 115px 8px 16px; } .newsletter-section .newsletter-form .subscribe-btn { padding:8px 20px; } }

/*----------------------------------------------
 Country Support
----------------------------------------------*/
.country-box { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:var(--bg-surface); border:1px solid var(--border-color1); }
.country-box .thumb-area { width:44px; height:44px; min-width:44px; }
.country-box .thumb-area img { border-radius:50%; }

/*----------------------------------------------
 Footer
----------------------------------------------*/
.footer-section {
    position:relative;
    background-color:var(--bg-body);
    border-top:1px solid var(--border-color1);
}
.footer-section .footer-inner-section { position:relative; z-index:1; }
.footer-section::after {
    position:absolute; content:"";
    background-size:cover;
    background-image:url(../img/background/bg-dark.png);
    background-position:center;
    top:0; left:0; opacity:.04; z-index:0; bottom:0; right:0;
}
.footer-section .footer-widget .widget-title {
    position:relative; margin-bottom:20px; padding-bottom:16px;
    font-weight:600; font-size:16px; font-family:var(--heading-font);
    color:var(--text-primary); text-transform:uppercase; letter-spacing:1px;
}
.footer-section .footer-widget .widget-title::after { position:absolute; bottom:0; left:0; content:""; width:120px; height:1px; background:var(--border-color1); }
.footer-section .footer-widget .widget-title::before { position:absolute; bottom:0; left:0; content:""; width:40px; height:1px; background:var(--primary-color); z-index:1; }
.footer-widget p { color:var(--text-muted); font-size:15px; }
.footer-widget ul li { line-height:2.4; }
.footer-widget .widget-link { font-size:15px; color:var(--text-muted); font-weight:400; transition:var(--transition); }
.footer-widget .widget-link:hover { color:var(--primary-color); }
.footer-widget .contact-item { display:flex; align-items:flex-start; gap:8px; }
.footer-widget .contact-item i { color:var(--primary-color); margin-top:3px; }
.copyright-area p { margin-bottom:0; font-size:14px; color:var(--text-muted); }
.copyright-area a { color:var(--text-muted); }
.copyright-area a:hover { color:var(--primary-color); }
.language { display:flex; justify-content:flex-end; }
.language a { color:var(--text-muted); font-size:15px; }
.language a:hover { color:var(--primary-color); }
.language a:not(:last-child) { margin-right:10px; }
@media(max-width:575px){ .copyright-area{ text-align:center; } .language{ justify-content:center; } }

/*----------------------------------------------
 Auth Pages — Login / Register
----------------------------------------------*/
.login-signup-page { min-height:100vh; display:flex; }
.login-signup-page .login-signup-thums {
    background-position:center; background-size:cover; background-repeat:no-repeat;
    display:flex; align-items:center; justify-content:center;
    padding:40px; position:relative; z-index:0; min-height:100vh;
}
.login-signup-page .login-signup-thums:after {
    content:""; left:0; top:0; height:100%; width:100%;
    background:linear-gradient(135deg, rgba(11,14,17,.9) 0%, rgba(127,86,217,.3) 100%);
    position:absolute; z-index:-1;
}
.login-signup-page .login-signup-thums .content-area .logo { max-width:140px; }
.login-signup-page .login-signup-thums .content-area .section-subtitle { color:var(--accent-color); }
.login-signup-page .login-signup-thums .content-area .section-title { color:var(--white); }
.login-signup-page .login-signup-thums .content-area p { color:rgba(255,255,255,.75); }
.login-signup-page .login-signup-form {
    padding: 60px 64px 40px;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    background: var(--bg-surface);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-signup-page .login-signup-form .cmn-btn  { height:46px; }
.login-signup-page .login-signup-form .cmn-btn2 { height:46px; border-radius:8px; }
.password-box { position:relative; display:flex; align-items:center; }
.password-box .form-control { padding-right:36px; }
.password-box .password-icon { position:absolute; right:12px; cursor:pointer; color:var(--text-muted); }
@media(max-width:991px){ .login-signup-page .login-signup-form{ padding:40px; } }
@media(max-width:767px){ .login-signup-page .login-signup-form{ margin:auto; } }
@media(max-width:575px){ .login-signup-page .login-signup-form{ padding:24px 20px; } }

/*----------------------------------------------
 User Dashboard & Panel
----------------------------------------------*/
.user-panel {
    background:var(--bg-body); min-height:100vh;
    display:flex; flex-direction:column;
}

/* Sidebar */
.custom-sidebar {
    width:260px; min-width:260px;
    background:var(--bg-surface);
    border-right:1px solid var(--border-color1);
    height:100vh; position:fixed; top:0; left:0;
    overflow-y:auto; z-index:100;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column;
}
.custom-sidebar .sidebar-logo { padding:20px 20px 16px; border-bottom:1px solid var(--border-color1); }
.custom-sidebar .sidebar-logo img { max-width:130px; }
.custom-sidebar .sidebar-nav { padding:12px 0; flex:1; }
.custom-sidebar .sidebar-nav ul li a,
.custom-sidebar .sidebar-nav ul li button {
    display:flex; align-items:center; gap:10px;
    padding:10px 20px; font-size:14px; font-weight:500;
    color:var(--text-secondary); border-radius:0;
    transition:var(--transition); width:100%; text-align:left;
    border-left:3px solid transparent;
    text-transform:capitalize;
}
.custom-sidebar .sidebar-nav ul li a:hover,
.custom-sidebar .sidebar-nav ul li a.active,
.custom-sidebar .sidebar-nav ul li button:hover {
    color:var(--primary-color);
    background:var(--primary-color-opacity-low);
    border-left-color:var(--primary-color);
}
.custom-sidebar .sidebar-nav ul li a i,
.custom-sidebar .sidebar-nav ul li button i { width:20px; color:var(--text-muted); font-size:16px; }
.custom-sidebar .sidebar-nav ul li a:hover i,
.custom-sidebar .sidebar-nav ul li a.active i { color:var(--primary-color); }
.custom-sidebar .sidebar-nav ul li.nav-group-title { padding:16px 20px 6px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); }
.sidebar-toggle-btn { display:none; }

.main-content-wrapper { margin-left:260px; flex:1; }
@media(max-width:991px){
    .custom-sidebar { transform:translateX(-100%); }
    .custom-sidebar.active { transform:translateX(0); }
    .main-content-wrapper { margin-left:0; }
    .sidebar-toggle-btn { display:flex; }
}

/* Dashboard header */
.user-panel-header {
    background:var(--nav-bg);
    backdrop-filter:var(--glass-blur);
    border-bottom:1px solid var(--border-color1);
    padding:12px 24px; display:flex;
    align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:99;
}

/* Dashboard cards */
.dashboard-stats-card {
    background:var(--bg-surface); border:1px solid var(--border-color1);
    border-radius:14px; padding:22px 24px;
    transition:var(--transition); position:relative; overflow:hidden;
}
.dashboard-stats-card::before {
    content:""; position:absolute; top:-30px; right:-30px;
    width:100px; height:100px; border-radius:50%;
    background:var(--primary-color-opacity-low);
}
.dashboard-stats-card:hover { border-color:rgba(127,86,217,.3); box-shadow:var(--shadow4); }
.dashboard-stats-card .card-icon {
    width:48px; height:48px; border-radius:12px;
    background:var(--primary-color-opacity-low);
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:var(--primary-color); margin-bottom:14px;
}
.dashboard-stats-card .card-value { font-size:28px; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.dashboard-stats-card .card-label { font-size:13px; color:var(--text-muted); font-weight:500; }
.dashboard-stats-card .card-change { font-size:12px; font-weight:600; margin-top:6px; }
.dashboard-stats-card .card-change.up   { color:var(--positive); }
.dashboard-stats-card .card-change.down { color:var(--negative); }

/* Data tables */
.cmn-table { width:100%; border-collapse:collapse; }
.cmn-table thead th {
    background:var(--bg-surface2); color:var(--text-muted);
    font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px;
    padding:12px 16px; border-bottom:1px solid var(--border-color1);
    white-space:nowrap;
}
.cmn-table tbody tr { border-bottom:1px solid var(--border-color1); transition:var(--transition); }
.cmn-table tbody tr:hover { background:var(--primary-color-opacity-low); }
.cmn-table tbody td { padding:14px 16px; font-size:14px; color:var(--text-secondary); vertical-align:middle; }
.cmn-table tbody td strong { color:var(--text-primary); }
.table-responsive { overflow-x:auto; }
.table-responsive::-webkit-scrollbar { height:4px; }

/* Table container card */
.table-card {
    background:var(--bg-surface); border:1px solid var(--border-color1);
    border-radius:14px; overflow:hidden;
}
.table-card .table-card-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px; border-bottom:1px solid var(--border-color1);
}
.table-card .table-card-header .title { font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:0; }

/* Status badges */
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:6px; font-size:12px; font-weight:600; }
.status-badge.pending    { background:var(--warn-bg);     color:var(--warn); }
.status-badge.completed, .status-badge.success { background:var(--positive-bg); color:var(--positive); }
.status-badge.failed, .status-badge.rejected   { background:var(--negative-bg); color:var(--negative); }

/*----------------------------------------------
 Wallet / KYC / Profile Sections
----------------------------------------------*/
.profile-card {
    background:var(--bg-surface); border:1px solid var(--border-color1);
    border-radius:16px; padding:28px;
}
.profile-card .profile-img { width:90px; height:90px; border-radius:50%; border:3px solid var(--primary-color); object-fit:cover; }
.kyc-steps-section { margin:24px 0; }
.kyc-card {
    background:var(--bg-surface); border:1px solid var(--border-color1);
    border-radius:14px; padding:24px;
}

/* Wallet balance box */
.wallet-balance { background:linear-gradient(135deg, var(--primary-color), var(--primary-hover)); border-radius:14px; padding:24px; color:var(--white); }
.wallet-balance .balance-label { font-size:13px; font-weight:500; opacity:.8; }
.wallet-balance .balance-amount { font-size:32px; font-weight:800; }

/* Calculator details */
.calculator-details-section { background:var(--bg-surface); }
.calculator-details-section .widget-area { padding:24px; border-radius:12px; box-shadow:var(--shadow3); margin-top:16px; background:var(--bg-surface); border:1px solid var(--border-color1); }
.progress-section { background:var(--bg-surface); padding:20px; border:1px solid var(--border-color1); border-radius:12px; }
.progress-section .title { font-weight:600; color:var(--text-primary); }
.progress-step-area { padding-top:16px; border-top:1px solid var(--border-color1); }
.progress-step-area .item { display:flex; gap:8px; background:var(--bg-surface2); padding:10px; border-radius:8px; font-size:13px; }
.progress-step-area .item h6 { font-size:14px; color:var(--text-primary); }
.progress-step-area .item .icon-area { min-width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:var(--primary-color); color:var(--white); border-radius:50%; }
.progress-step-area .item .icon-area.checkmark { color:var(--positive); background:transparent; }
.progress-step-area .item .number { min-width:24px; height:24px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:var(--bg-surface3); color:var(--text-muted); }
.progress-step-area .item:not(:last-child) { margin-bottom:8px; }
.transaction-summery { background:var(--bg-surface); padding:20px; border:1px solid var(--border-color1); border-radius:12px; }
.transaction-summery .title { padding-bottom:10px; margin-bottom:16px; border-bottom:1px solid var(--border-color1); }
.transaction-item-container { display:flex; flex-direction:column; gap:8px; }
.transaction-item-container .item h6 { margin-top:4px; color:var(--text-primary); }
.transaction-item-container .item:last-child { margin-top:8px; padding-top:16px; border-top:1px solid var(--border-color1); }
.rate-btn-area { margin:16px 0; display:flex; flex-direction:column; gap:8px; }
.btn.rate-btn { width:100%; padding:14px 20px; background:var(--bg-surface2); color:var(--text-primary); font-weight:500; display:flex; justify-content:space-between; box-shadow:var(--shadow1); border-radius:10px; border:2px solid transparent; transition:var(--transition); }
.btn.rate-btn:hover, .btn-check:checked+.btn.rate-btn { background:var(--primary-color-opacity-low); border-color:var(--primary-color); color:var(--text-primary); }
.notice-area { padding:0 20px; display:flex; gap:6px; }
.notice-area .icon-area { color:var(--primary-color); }
.wallet-address-section { border-radius:12px; display:flex; flex-direction:column; gap:16px; margin:16px 0; padding:20px; background:var(--bg-surface); border:1px solid var(--border-color1); }
.wallet-address-section .form-floating { display:flex; align-items:center; }
.wallet-address-section .form-floating .form-control { padding-right:36px; }
.wallet-address-section .form-floating .icon { cursor:pointer; position:absolute; right:12px; color:var(--text-muted); transition:var(--transition); }
.wallet-address-section .form-floating .icon:hover { color:var(--primary-color); }
.wallet-address-section .form-floating>label { padding-right:32px; color:var(--text-muted); font-size:13px; }
.wallet-address-section .tag-area { margin-top:8px; display:flex; align-items:center; gap:4px; }
.wallet-address-section .tag-area .tag { font-size:10px; font-weight:700; color:var(--white); border-radius:4px; padding:2px 6px; background:var(--bg-surface3); }
.wallet-address-section .tag-area .tag:nth-child(2) { background:var(--primary-color); }

/* Checkout */
.checkout-section { border:1px solid var(--border-color1); border-radius:12px; padding:24px; background:var(--bg-surface); font-size:14px; }
.checkout-section .checkout-header { display:flex; align-items:center; justify-content:space-between; }
.checkout-table .table-row { margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.checkout-table .table-row h6 { font-weight:600; font-size:14px; overflow-wrap:break-word; word-break:break-all; color:var(--text-primary); }
.checkout-table .table-row:first-child { border-bottom:1px solid var(--border-color1); padding-bottom:16px; }
.transaction-card { background:var(--bg-surface); border:1px solid var(--border-color1); padding:24px; border-radius:12px; }
.transaction-card .title { border-bottom:1px solid var(--border-color1); padding-bottom:8px; color:var(--text-primary); }
.transaction-table { display:grid; gap:16px; }
.transaction-table .table-row { display:grid; grid-template-columns:repeat(2,1fr); }
.transaction-table .table-row h6 { font-weight:600; display:flex; gap:4px; word-break:break-all; font-size:14px; color:var(--text-primary); }
.transaction-table .table-row h6 i:hover { color:var(--primary-color); }
.transaction-table .table-row .btn-area { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.deadline-timer-section { background:var(--bg-surface); border:1px solid var(--border-color1); border-radius:10px; padding:18px; margin-bottom:16px; font-size:13px; }
.deadline-timer-section h6 { display:flex; gap:6px; color:var(--text-primary); }

/* Tracking */
.tracking-section { background:var(--bg-surface); }
.tracking-card { background:var(--bg-surface2); padding:28px; border:1px solid var(--border-color1); border-radius:12px; }
.tracking-card .icon-area { font-size:44px; color:var(--primary-color); margin-bottom:20px; }
@media(max-width:991px){ .tracking-section{ padding-top:110px; } }
@media(max-width:575px){ .tracking-card{ padding:16px; } }
.tracking-transaction-section { background:var(--bg-surface); }
.transaction-table-container { margin-top:24px; display:flex; flex-direction:column; gap:8px; }
.transaction-table-container .item { display:flex; justify-content:space-between; align-items:center; color:var(--text-secondary); }
.tracking-transaction-card { background:var(--bg-surface2); border:1px solid var(--border-color1); padding:24px; border-radius:12px; }
.tracking-transaction-card .header { border-bottom:1px solid var(--border-color1); display:flex; flex-direction:column; justify-content:center; align-items:center; padding-bottom:16px; gap:8px; }
.tracking-transaction-card .header .title { margin-bottom:0; color:var(--text-primary); }
.tracking-transaction-card .header img { width:32px; }

/* Error section */
.error-section { height:100vh; width:100vw; background:var(--bg-body); display:flex; justify-content:center; align-items:center; }
.error-section .error-content { color:var(--text-primary); text-align:center; }
.error-section .error-content .error-title { font-size:130px; font-weight:800; line-height:1; background:linear-gradient(135deg,var(--primary-color),var(--accent-color)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.error-section .error-content .error-info { font-size:36px; color:var(--text-secondary); }
.error-section .error-content .btn-area { margin-top:24px; }
@media(max-width:991px){ .error-section .error-content .error-title{ font-size:90px; } .error-section .error-content .error-info{ font-size:26px; } }

/* Contact */
.contact-section .contact-inner { position:relative; background:var(--bg-surface); border:1px solid var(--border-color1); border-radius:12px; box-shadow:var(--shadow3); margin-top:-200px; z-index:1; }
.contact-section .contact-message-area { padding:28px 28px 28px 10px; }
.contact-section .contact-area { height:100%; padding:28px 10px 28px 28px; border-radius:12px 0 0 12px; background:linear-gradient(135deg,var(--primary-color),var(--primary-hover)); }
.contact-section .contact-area h3, .contact-section .contact-area h5 { color:var(--white); }
.contact-section .contact-area p { color:rgba(255,255,255,.75); }
@media(max-width:991px){ .contact-section .contact-inner{ margin-top:-240px; } .contact-section .contact-area{ padding:20px; border-radius:12px 12px 0 0; } .contact-section .contact-message-area{ padding:20px; } }

/* Support */
.support-section { background:var(--bg-body); }

/* Map */
.map-section .title { margin-bottom:16px; }
.map-section iframe { width:100%; height:420px; padding:4px; background:var(--bg-surface2); border-radius:8px; border:1px solid var(--border-color1); }

/* Payment offers */
.fiat-currency-section, .payment-method-section { display:flex; align-items:center; gap:8px; }
.fiat-currency-section .select2-container--default .select2-selection--single .select2-selection__rendered,
.payment-method-section .select2-container--default .select2-selection--single .select2-selection__rendered { padding:5px; border:1px solid var(--border-color1); border-radius:8px; font-weight:500; margin-top:-7px; background:var(--bg-surface3); color:var(--text-primary); }
.btn.offer-btn { width:100%; padding:14px; background:var(--bg-surface2); color:var(--text-primary); font-weight:500; display:flex; justify-content:space-between; border:1px solid var(--border-color1); border-radius:10px; transition:var(--transition); }
.btn.offer-btn img { max-height:22px; }
.btn.offer-btn:hover, .btn-check:checked+.btn.offer-btn { background:var(--primary-color-opacity-low); border-color:var(--primary-color); color:var(--text-primary); }
.payment-offers-seciton { margin-top:20px; }
.request-found-form { border-top:1px solid var(--border-color1); margin-top:24px; padding-top:16px; }

/* File upload */
.fileinput .thumbnail { display:inline-block; margin-bottom:4px; overflow:hidden; text-align:left !important; vertical-align:middle; max-width:60%; }
.file-upload-top label { display:none; }
.file-upload-top input { position:absolute; width:100%; height:100%; top:0; left:0; opacity:0; }
.wh-200-150 { width:200px !important; }
.w-100 { width:100% !important; }

/* Exchange module partials */
.exchange-module { background:var(--bg-surface); }
.btn-area-wrap { margin-top:14px; }

/* Two FA */
.twofa-section { background:var(--bg-body); }
.twofa-card { background:var(--bg-surface); border:1px solid var(--border-color1); border-radius:14px; padding:28px; }

/* Maintenance */
.maintenance-section { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg-body); text-align:center; }

/* Toggle button visual */
#toggle-btn { font-size:18px; cursor:pointer; }
#moon, #sun { transition:var(--transition); }
body:not(.light-mode) #moon { display:none; }
body:not(.light-mode) #sun  { display:block; }
body.light-mode #moon { display:block; }
body.light-mode #sun  { display:none; }

/*----------------------------------------------
 Market / Gainers Cards (Homepage Extra)
----------------------------------------------*/
.market-card {
    background:var(--bg-surface); border:1px solid var(--border-color1);
    border-radius:12px; padding:16px 18px;
    display:flex; align-items:center; gap:12px;
    transition:var(--transition); cursor:pointer;
}
.market-card:hover { border-color:rgba(127,86,217,.3); transform:translateY(-2px); box-shadow:var(--shadow4); }
.market-card .coin-icon { width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.market-card .coin-info .coin-name { font-size:15px; font-weight:700; color:var(--text-primary); }
.market-card .coin-info .coin-symbol { font-size:12px; color:var(--text-muted); text-transform:uppercase; }
.market-card .coin-price { margin-left:auto; text-align:right; }
.market-card .coin-price .price { font-size:15px; font-weight:700; color:var(--text-primary); }
.market-card .coin-price .change { font-size:12px; font-weight:600; }
.market-card .coin-price .change.up   { color:var(--positive); }
.market-card .coin-price .change.down { color:var(--negative); }

/* Sparkline mini-chart placeholder */
.sparkline-up   { color:var(--positive); }
.sparkline-down { color:var(--negative); }

/* Quick trade button in table */
.trade-action-btn {
    padding:6px 16px; font-size:13px; font-weight:600;
    background:var(--primary-color-opacity-low);
    color:var(--primary-color); border:1px solid rgba(127,86,217,.3);
    border-radius:6px; transition:var(--transition);
}
.trade-action-btn:hover { background:var(--primary-color); color:var(--white); border-color:var(--primary-color); }

/*----------------------------------------------
 Responsive fixes
----------------------------------------------*/
@media(max-width:767px){
    .hero-section .hero-content .hero-title { font-size:28px; letter-spacing:-0.5px; }
    .calculator-banner-wrapper .left-side .text-area p { font-size:13px; }
    .profile-box .profile img { width:32px; height:32px; }
    .cmn-btn-group .social-btn { font-size:13px; }
    .btn.rate-btn { padding:12px 14px; }
    section { padding:44px 0; }
}
@media(max-width:575px){
    .swap-area { margin:10px 52px 10px 0; }
    .input-box .form-control { padding-right:110px; }
}

/*----------------------------------------------
 Dashboard CSS (dashboard.css mirror for dark)
----------------------------------------------*/
.user-panel-body { display:flex; min-height:calc(100vh - 64px); }
.custom-toggle-sidebar-btn {
    width:36px; height:36px; border-radius:8px; display:flex;
    align-items:center; justify-content:center;
    background:var(--bg-surface2); border:1px solid var(--border-color1);
    color:var(--text-secondary); cursor:pointer; transition:var(--transition);
}
.custom-toggle-sidebar-btn:hover { background:var(--primary-color-opacity-low); color:var(--primary-color); }

/* Icon boxes for stats */
.icon-box-sm { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.icon-box-sm.violet { background:var(--primary-color-opacity-low); color:var(--primary-color); }
.icon-box-sm.green  { background:var(--positive-bg); color:var(--positive); }
.icon-box-sm.red    { background:var(--negative-bg); color:var(--negative); }
.icon-box-sm.warn   { background:var(--warn-bg); color:var(--warn); }

/* Notification dot */
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--negative); position:absolute; top:2px; right:2px; }