/* Dark "smart investment" theme layer for the public marketing site.
   Reference: sy-mphonic.com (near-black background, neon-green accent,
   Nunito type, pill buttons, glowing green-bordered cards).
   Loaded after style.css — every rule below intentionally reuses existing
   selectors from style.css so it overrides via source order + matching
   specificity instead of !important (font-family is the only exception,
   since several deep style.css selectors hardcode Oxanium/Poppins).
   Scoped to frontend.layouts.master only. */

:root {
    --base_color: #00c853;
    --secondary_color: #00341c;
    --accent-bright: #00ff88;
    --accent-dark: #007a3d;
    --bg-main: #020806;
    --bg-raised: #05100c;
    --bg-card: #06140f;
    --bg-soft: #0b2118;
    --text-muted: #a9b8b0;
    --border: rgba(0, 255, 136, .16);
    --border-strong: rgba(0, 255, 136, .45);
    --shadow: 0 20px 60px rgba(0, 0, 0, .5);
    --btn-shadow: 0 12px 30px rgba(0, 255, 136, .22);
    --btn-shadow-hover: 0 16px 40px rgba(0, 255, 136, .35);
}

/* Base + typography */

body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, button,
input, textarea, select, label {
    font-family: 'Nunito', sans-serif !important;
}

body {
    background-color: var(--bg-main);
    color: #dceee5;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.5px;
    color: #ffffff;
}

.text-content h3 {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -1px;
}

.text-content .sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 255, 136, .08);
    border: 1px solid var(--border);
    color: var(--accent-bright);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12px;
    letter-spacing: 1px;
}

.text-content p,
p {
    color: var(--text-muted);
}

/* Buttons */

.btn--base {
    position: relative;
    background: linear-gradient(135deg, var(--base_color), var(--accent-bright));
    border: none;
    border-radius: 999px;
    color: #00150a;
    font-weight: 800;
    padding: 14px 30px;
    box-shadow: var(--btn-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}

.btn--base.active {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--accent-bright);
    box-shadow: none;
}

.btn--base.active:focus,
.btn--base.active:hover {
    background: linear-gradient(135deg, var(--base_color), var(--accent-bright));
    border-color: transparent;
    color: #00150a;
}

.btn--base:focus,
.btn--base:hover {
    color: #00150a;
    transform: translateY(-3px);
    box-shadow: var(--btn-shadow-hover);
}

@media only screen and (max-width: 575px) {
    .btn--base {
        width: 100%;
        text-align: center;
    }

    .header-action .btn--base {
        width: auto;
    }
}

/* Header / navigation */

.header-section {
    background-color: transparent;
}

.header.active,
.header-section.header-fixed {
    background-color: rgba(2, 8, 6, .82) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

.header-bottom-area .navbar-collapse .main-menu li a:hover,
.header-bottom-area .navbar-collapse .main-menu li a.active {
    color: var(--accent-bright) !important;
}

.header-bottom-area .navbar-collapse .main-menu li .sub-menu {
    border-top: 2px solid var(--base_color);
    background-color: var(--bg-raised);
    border-radius: 12px;
}

@media (max-width: 991px) {
    .header-bottom-area .navbar-collapse {
        background-color: var(--bg-raised) !important;
        border: 1px solid var(--border);
        border-radius: 20px;
        backdrop-filter: blur(16px);
    }
}

.navbar-toggler span {
    border-radius: 10px;
    background: linear-gradient(135deg, var(--base_color), var(--accent-bright));
    color: #00150a;
}

/* Hero */

.banner {
    position: relative;
    isolation: isolate;
}

.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(0, 255, 136, .16), transparent 32%),
        radial-gradient(circle at 85% 15%, rgba(0, 255, 136, .12), transparent 34%),
        linear-gradient(rgba(0, 255, 136, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, .05) 1px, transparent 1px);
    background-size: auto, auto, 55px 55px, 55px 55px;
    opacity: .6;
}

.banner .container {
    position: relative;
    z-index: 1;
}

.banner .top h3 {
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1.08;
}

.banner .top p {
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.8;
}

.banner .video-icon {
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    box-shadow: var(--btn-shadow);
}

/* Services cards */

.services {
    background-color: transparent;
}

.services .card {
    background: var(--bg-card);
    border: 1px solid var(--border) !important;
    border-radius: 22px;
    box-shadow: var(--shadow);
    transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.services .card:hover {
    background: rgba(0, 255, 136, .08);
    border-color: var(--border-strong) !important;
    transform: translateY(-8px);
}

.services .card .thumb i {
    color: var(--accent-bright);
}

/* About list items */

.about .about-item-area .about-item {
    border-radius: 18px;
    border: 1px solid transparent;
}

.about .about-item-area .about-item::after {
    background: var(--base_color);
}

.about .about-item-area .about-item:hover {
    background-color: var(--bg-card);
    border-color: var(--border);
}

.about .about-item-area .about-item .about-icon i {
    color: var(--accent-bright);
}

/* How it works panel */

.how-it-work .left-side {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 26px !important;
    box-shadow: var(--shadow) !important;
}

/* Testimonials */

.client {
    background-color: transparent;
}

.client .client-slider .card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
}

.client .client-slider .small-ratings i {
    color: var(--accent-bright);
}

/* Investment plan / pricing cards */

.pricing-card {
    background-image: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: var(--shadow);
    transition: transform .35s ease, border-color .35s ease;
}

.pricing-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-strong);
}

.pricing-card .top-text h3 {
    color: var(--accent-bright);
}

.pricing-card .amount p {
    color: var(--accent-bright);
}

.pricing-card .details i {
    background: var(--base_color);
    color: #00150a;
}

/* About page cards */

.about .card-side {
    background-image: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.about .card-side h3 {
    color: var(--accent-bright);
}

/* Announcements / blog cards */

.blog .card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    box-shadow: var(--shadow);
    padding: 18px;
    transition: transform .35s ease, border-color .35s ease;
}

.blog .card:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong) !important;
}

.blog .card .link,
.blog .card .link i {
    color: var(--accent-bright);
}

.img-wrapper {
    border-radius: 16px;
}

.blog-details .right-content .tag a {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--accent-bright);
}

/* Newsletter panel */

.subscribe-area {
    background-image: none;
    background: linear-gradient(135deg, rgba(0, 255, 136, .14), var(--bg-raised));
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.subscribe-form input {
    background-color: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--border);
    color: #ffffff;
}

.subscribe-form input::placeholder {
    color: var(--text-muted);
}

.subscribe-form button {
    background-color: var(--base_color);
    color: #00150a;
}

/* Contact form */

.contact .contact-form {
    background-image: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.contact-form .form-control {
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: #ffffff;
    padding: 12px 16px;
}

.contact-form .form-control::placeholder {
    color: var(--text-muted);
}

.contact-form .form-control:focus {
    background-color: rgba(255, 255, 255, .09);
    border-color: var(--base_color);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, .18);
    color: #ffffff;
}

.contact label {
    color: #dceee5;
    font-weight: 600;
    margin-bottom: 6px;
    display: inline-block;
}

/* Footer */

.footer-section {
    background: var(--bg-raised);
    border-top: 1px solid var(--border);
}

.footer-section .footer-social-icon .facebook-bg,
.footer-section .twitter-bg,
.footer-section .instagram-bg,
.footer-section .linkedin-bg {
    background-color: rgba(0, 255, 136, .12) !important;
    color: var(--accent-bright) !important;
    border: 1px solid var(--border);
}

.footer-section .footer-social-icon a:hover i {
    background-color: var(--base_color) !important;
    color: #00150a !important;
}

.footer-section .footer-widget-heading h3::before {
    background: var(--base_color);
}

.footer-section .footer-widget ul li a:hover {
    color: var(--accent-bright);
}

.footer-section .copyright-area {
    background-color: transparent;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* Cookie banner */

.cookie-main-wrapper {
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.cookie-main-wrapper .cookie-content svg {
    color: var(--accent-bright);
}

.cookie-main-wrapper .cookie-content p a {
    color: var(--accent-bright);
}

.cookie-main-wrapper .cookie-btn-area button {
    border-radius: 999px;
}

.cookie-main-wrapper .cookie-btn-area button:first-child {
    background: linear-gradient(135deg, var(--base_color), var(--accent-bright));
    color: #00150a;
}

.cookie-main-wrapper .cookie-btn-area button:last-child {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--accent-bright);
}

/* Responsive rhythm to match reference's mobile tightening */

@media only screen and (max-width: 991px) {
    .services .card,
    .client .client-slider .card,
    .pricing-card,
    .blog .card,
    .about .card-side,
    .how-it-work .left-side,
    .contact .contact-form {
        border-radius: 18px !important;
    }
}

@media only screen and (max-width: 575px) {
    .subscribe-area {
        border-radius: 20px;
    }

    .pricing-card {
        padding: 24px;
    }
}