/* ==========================================================================
   Landmark Investment — theme5 frontend
   Ported from home/*.html static template, rebranded dark-green + mobile QA.
   Loaded once from theme5/layout/master.blade.php for every public page.
   ========================================================================== */

:root {
    --lm-primary: #4361EE;
    --lm-primary-dark: #2B3FA8;
    --lm-navy: #161B2C;
    --lm-navy-dark: #0D111C;
    --lm-gold: #4C6FFF;
    --lm-gold-2: #6C8CFF;
    --lm-gold-light: #60A5FA;
    --lm-text: #333;
    --lm-text-muted: #666;
    --lm-bg-alt: #f8f9fa;
    --lm-gradient: linear-gradient(135deg, var(--lm-primary) 0%, var(--lm-primary-dark) 100%);
    --lm-gradient-45: linear-gradient(45deg, var(--lm-primary) 0%, var(--lm-primary-dark) 100%);
    --lm-gradient-dark: linear-gradient(135deg, var(--lm-navy) 0%, var(--lm-navy-dark) 100%);
    --lm-gradient-gold: linear-gradient(45deg, var(--lm-gold), var(--lm-gold-2));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--lm-text);
    overflow-x: hidden;
    padding-top: 76px;
}

img { max-width: 100%; }

/* ---------- Navbar ---------- */
.navbar {
    background: var(--lm-gradient) !important;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background: rgba(67, 97, 238, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.navbar-brand img {
    max-height: 40px;
    width: auto;
}

.navbar-brand-text {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.navbar-nav .nav-link {
    color: white !important;
    font-weight: 500;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--lm-gold) !important;
    transform: translateY(-2px);
}

.btn-login {
    background: var(--lm-gradient-gold);
    color: #fff !important;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 111, 255, 0.4);
    color: #fff !important;
}

.dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

.dropdown-item {
    color: var(--lm-text) !important;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    background: var(--lm-gradient-45);
    color: white !important;
    transform: translateX(5px);
}

.navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus { box-shadow: none; }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Buttons / generic ---------- */
.btn-invest {
    background: var(--lm-gradient-gold);
    color: #fff;
    font-weight: 600;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-invest:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(76, 111, 255, 0.4);
    color: #fff;
}

.btn-invest-outline {
    background: transparent;
    color: #fff;
    font-weight: 600;
    padding: 1rem 2rem;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-invest-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.08);
    color: #fff;
    transform: translateY(-3px);
}

/* .main-btn / .main-btn2 are used across auth + not-yet-restyled dashboard
   pages from the original theme — give them the same gold-pill treatment
   as .btn-invest so they never fall back to unstyled Bootstrap buttons. */
.main-btn {
    background: var(--lm-gradient-gold);
    color: #fff !important;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border: none;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(76, 111, 255, 0.4);
    color: #fff !important;
}

.main-btn.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.9rem; }

.main-btn2 {
    background: transparent;
    color: var(--lm-primary) !important;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border: 1.5px solid var(--lm-primary);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.main-btn2:hover { background: var(--lm-primary); color: #fff !important; }

.cmn-btn {
    background: var(--lm-gradient-gold);
    color: #fff !important;
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cmn-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(76, 111, 255, 0.4); color: #fff !important; }

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--lm-text);
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--lm-text-muted);
    margin-bottom: 3rem;
}

/* ---------- Hero (home) ---------- */
.hero-section {
    background: var(--lm-gradient);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    animation: float 20s ease-in-out infinite;
    z-index: 0;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
}

/* Video sits above the fallback gradient/grain but below the dark overlay and content,
   so the gradient still shows instantly while the video loads (or if it fails to play). */
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,17,28,0.85) 0%, rgba(43,63,168,0.75) 100%);
    z-index: 1;
}

.hero-content, .hero-visual { position: relative; z-index: 2; color: white; }

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-image {
    max-width: 100%;
    height: auto;
    animation: bounce 3s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.trading-widget {
    margin: 2rem 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* ---------- Hero banner (inner pages) ---------- */
.hero-banner {
    background: var(--lm-gradient);
    padding: 8rem 0 4rem 0;
    position: relative;
    overflow: hidden;
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.hero-banner .hero-content { text-align: center; }

.hero-banner .hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 800px;
    margin: 0 auto 2rem auto;
}

/* ---------- About section (home) ---------- */
.about-section {
    padding: 5rem 0;
    background: linear-gradient(45deg, var(--lm-bg-alt), #e9ecef);
}

/* ---------- Features (home) ---------- */
.features-section { padding: 5rem 0; background: white; }

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    margin-bottom: 2rem;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--lm-gradient-45);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: white;
    font-size: 1.5rem;
}

.feature-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 1rem; color: var(--lm-text); }

/* ---------- Why choose us (home) ---------- */
.why-section { padding: 5rem 0; background: var(--lm-gradient-dark); color: white; }

.why-feature { margin-bottom: 2rem; }

.why-icon {
    width: 50px;
    height: 50px;
    background: var(--lm-gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #fff;
    font-size: 1.2rem;
}

/* ---------- Video (home) ---------- */
.video-section { padding: 5rem 0; background: var(--lm-bg-alt); }

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 15px;
}

/* ---------- Affiliate (home) ---------- */
.affiliate-section { padding: 5rem 0; background: var(--lm-gradient); color: white; }

.tier-card {
    background: rgba(255,255,255,0.1);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.tier-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.tier-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--lm-gold); }

/* ---------- Footer ---------- */
.footer { background: var(--lm-gradient-dark); color: white; padding: 3rem 0 1rem 0; }

.footer-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; color: var(--lm-gold); }

.footer-link { color: #bbb; text-decoration: none; transition: color 0.3s ease; }

.footer-link:hover { color: var(--lm-gold); }

.footer-logo { max-width: 150px; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; }

.footer-logo img { max-height: 36px; }

.footer-logo-text { color: #fff; font-weight: 700; font-size: 1.15rem; }

/* ---------- Capability pages (Equities, Fixed Income, Hedge Funds, etc.) ---------- */
.main-content { padding: 5rem 0; background: var(--lm-bg-alt); }

.section-description {
    font-size: 1.2rem;
    color: var(--lm-text-muted);
    margin-bottom: 3rem;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.cap-card {
    background: white;
    padding: 2.25rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.cap-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--lm-gradient-45);
}

.cap-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

.cap-card-icon {
    width: 60px; height: 60px;
    background: var(--lm-gradient-45);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
    color: white;
    font-size: 1.4rem;
}

.cap-card-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--lm-text); }

.cap-card-subtitle { color: var(--lm-primary); font-weight: 600; font-size: 0.9rem; margin-bottom: 1rem; }

.cap-card-desc { color: var(--lm-text-muted); line-height: 1.8; }

.cap-card-desc p { margin-bottom: 0.75rem; }
.cap-card-desc p:last-child { margin-bottom: 0; }

.cap-list { list-style: none; padding: 0; margin: 0; }

.cap-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.7rem;
    color: var(--lm-text-muted);
    line-height: 1.6;
}

.cap-list li::before {
    content: '\2713';
    position: absolute;
    left: 0; top: 0;
    color: var(--lm-primary);
    font-weight: bold;
}

.cap-dark-section { padding: 5rem 0; background: var(--lm-gradient-dark); color: white; }

.cap-dark-section .cap-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(6px); }
.cap-dark-section .cap-card-title { color: white; }
.cap-dark-section .cap-card-desc { color: rgba(255,255,255,0.8); }

/* CTA */
.cta-section { padding: 4rem 0; background: var(--lm-gradient); color: white; text-align: center; }

.cta-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }

.cta-description { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; }

.cta-btn {
    background: var(--lm-gradient-gold);
    color: #fff;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(76, 111, 255, 0.4); color: #fff; }

/* ---------- Pricing page ---------- */
.pricing-section { padding: 5rem 0; background: var(--lm-bg-alt); }

.pricing-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 2.25rem 1.875rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid #eee;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--lm-gradient-45);
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.14);
}

.pricing-name { font-size: 1.4rem; font-weight: 700; color: var(--lm-text); text-align: center; margin-bottom: 0.5rem; }

.pricing-rate {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 800;
    background: var(--lm-gradient-45);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0.5rem 0 1.5rem;
}

.pricing-list { list-style: none; margin: 0 0 1.5rem; flex: 1; }

.pricing-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.65rem 0;
    border-bottom: 1px solid #f0f0f0;
    color: var(--lm-text);
    font-size: 0.95rem;
}

.pricing-list li:last-child { border-bottom: none; }

.pricing-list li i { color: var(--lm-primary); margin-right: 6px; }

.pricing-list .label { color: var(--lm-text-muted); }

/* ---------- About Us page ---------- */
.about-card {
    background: white;
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 3rem;
    transition: all 0.3s ease;
}

.about-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

.mission-section { padding: 5rem 0; background: var(--lm-gradient-dark); color: white; }

.mission-card {
    background: rgba(255,255,255,0.1);
    padding: 3rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.mission-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }

.mission-icon {
    width: 80px; height: 80px;
    background: var(--lm-gradient-gold);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 2rem auto;
    color: #fff;
    font-size: 2rem;
}

.asset-section { padding: 5rem 0; background: white; }

.divider { height: 2px; background: var(--lm-gradient-45); margin: 3rem 0; border-radius: 1px; }

.lead-text { font-size: 1.3rem; font-weight: 500; color: #555; margin-bottom: 1.5rem; }

/* ---------- Team page ---------- */
.team-section { padding: 5rem 0; background: var(--lm-bg-alt); }

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.team-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
}

.team-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }

.team-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--lm-gradient-45);
}

.team-image { width: 100%; height: 300px; object-fit: cover; transition: all 0.3s ease; }

.team-card:hover .team-image { transform: scale(1.05); }

.team-info { padding: 2rem; text-align: center; }

.team-name { font-size: 1.5rem; font-weight: 700; color: var(--lm-text); margin-bottom: 0.5rem; }

.team-position { color: var(--lm-primary); font-weight: 600; font-size: 1.1rem; margin-bottom: 1rem; }

.team-bio { color: var(--lm-text-muted); line-height: 1.6; margin-bottom: 1.5rem; }

.team-social { display: flex; justify-content: center; gap: 1rem; }

.social-link {
    width: 40px; height: 40px;
    background: var(--lm-gradient-45);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4); color: white; }

.stats-section { padding: 5rem 0; background: var(--lm-gradient-dark); color: white; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }

.stat-card { text-align: center; padding: 2rem; }

.stat-number { font-size: 3rem; font-weight: 700; color: var(--lm-gold); margin-bottom: 0.5rem; }

.stat-label { font-size: 1.1rem; opacity: 0.9; }

/* ---------- FAQ page ---------- */
.faq-section { padding: 5rem 0; background: var(--lm-bg-alt); }

.faq-container { max-width: 900px; margin: 0 auto; }

.faq-header { text-align: center; margin-bottom: 3rem; }

.custom-accordion { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; }

.custom-accordion .accordion-item { border: none; border-bottom: 1px solid #f0f0f0; }

.custom-accordion .accordion-item:last-child { border-bottom: none; }

.custom-accordion .accordion-button {
    background: white;
    color: var(--lm-text);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.5rem;
    border: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

.custom-accordion .accordion-button:not(.collapsed) {
    background: var(--lm-gradient-45);
    color: white;
    box-shadow: none;
}

.custom-accordion .accordion-button:focus { box-shadow: none; border: none; }

.custom-accordion .accordion-button::after {
    background-image: none;
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.custom-accordion .accordion-button:not(.collapsed)::after { transform: rotate(180deg); color: white; }

.custom-accordion .accordion-body { padding: 1.5rem; background: var(--lm-bg-alt); color: #555; line-height: 1.8; }

.custom-accordion .accordion-body p { margin-bottom: 0; }

/* ---------- Contact cards (FAQ + Contact pages) ---------- */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.contact-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--lm-gradient-45);
}

.contact-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

.contact-icon {
    width: 60px; height: 60px;
    background: var(--lm-gradient-45);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem auto;
    color: white;
    font-size: 1.5rem;
}

.contact-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--lm-text); }

.contact-info { color: var(--lm-text-muted); font-size: 0.95rem; line-height: 1.8; }

.contact-link { color: var(--lm-primary); text-decoration: none; font-weight: 500; transition: color 0.3s ease; }

.contact-link:hover { color: var(--lm-primary-dark); }

/* ---------- Contact Us page: form ---------- */
.contact-container { max-width: 1200px; margin: 0 auto; }

.contact-form-section { background: white; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); overflow: hidden; }

.form-left { padding: 3rem; background: white; }

.form-right { padding: 3rem; background: var(--lm-gradient); color: white; }

.form-title { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--lm-text); }

.form-group { margin-bottom: 2rem; position: relative; }

.form-group .form-control {
    width: 100%;
    padding: 1rem 0;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    background: transparent;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
    border-radius: 0;
}

.form-group .form-control:focus { border-bottom-color: var(--lm-primary); box-shadow: none; }

.form-label {
    position: absolute;
    top: 1rem; left: 0;
    color: #999;
    font-size: 1rem;
    transition: all 0.3s ease;
    pointer-events: none;
}

.form-group .form-control:focus + .form-label,
.form-group .form-control:not(:placeholder-shown) + .form-label {
    top: -0.5rem;
    font-size: 0.85rem;
    color: var(--lm-primary);
}

.form-textarea { min-height: 120px; resize: vertical; }

.submit-btn {
    background: var(--lm-gradient-45);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(67, 97, 238, 0.4); }

.submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.office-info { margin-bottom: 2rem; }

.office-item { display: flex; align-items: flex-start; margin-bottom: 1.5rem; }

.office-icon {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.office-text h6 { font-weight: 600; margin-bottom: 0.25rem; }

.office-text span { opacity: 0.9; font-size: 0.95rem; }

.map-section {
    padding: 0;
    height: 300px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lm-text-muted);
    font-size: 1.1rem;
    text-align: center;
}

.form-message { padding: 1rem; border-radius: 8px; margin-top: 1rem; }

.form-message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }

.form-message.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ---------- Animations ---------- */
.fade-in { opacity: 0; transform: translateY(30px); animation: fadeIn 0.8s ease forwards; }

@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* ---------- Auth pages (login / register) — dark trading-terminal look ---------- */
body.auth-page {
    background: var(--lm-navy-dark);
    padding-top: 0;
    min-height: 100vh;
}

.auth-section {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
}

.auth-wrapper {
    flex: 1 1 460px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3.5rem clamp(1.5rem, 6vw, 5rem) 2.5rem;
    background: var(--lm-navy-dark);
    position: relative;
    z-index: 2;
}

.auth-top-part {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}

.auth-logo i { color: var(--lm-gold); font-size: 1.5rem; }
.auth-logo img { max-height: 42px; width: auto; }

.auth-top-part p { color: rgba(255,255,255,0.65); font-size: 0.9rem; }

.auth-form-wrapper {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: var(--lm-navy);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 2.5rem;
    box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}

.auth-form-wrapper h3 { color: #fff; font-weight: 700; }

.auth-wrapper label {
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    display: inline-block;
}

.auth-wrapper .form-control {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.auth-wrapper .form-control::placeholder { color: rgba(255,255,255,0.35); }

.auth-wrapper .form-control:focus {
    background: rgba(255,255,255,0.06);
    border-color: var(--lm-gold);
    color: #fff;
    box-shadow: none;
}

.auth-wrapper .form-check-label { color: rgba(255,255,255,0.65); font-size: 0.85rem; }

.auth-wrapper .form-check-input {
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.3);
    accent-color: var(--lm-gold);
}

.auth-wrapper .g-recaptcha { transform-origin: left; }

.auth-wrapper a.sp_text_dark,
.auth-wrapper a.color-change {
    color: var(--lm-gold-2, #ffed4e);
}

.auth-wrapper .main-btn { border-radius: 10px; }

.auth-footer-part { margin-top: 1.5rem; }

.auth-footer-part p { color: rgba(255,255,255,0.4); font-size: 0.85rem; }

/* Right-hand decorative panel */
.auth-thumb-area {
    flex: 1 1 420px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.auth-visual {
    flex: 1 1 420px;
    position: relative;
    background: var(--lm-navy-dark);
    background-image:
        linear-gradient(rgba(16,185,129,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,185,129,0.06) 1px, transparent 1px),
        radial-gradient(ellipse 60% 50% at 70% 20%, rgba(16,185,129,0.15), transparent);
    background-size: 42px 42px, 42px 42px, 100% 100%;
    padding: clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,0.06);
}

.auth-visual-title {
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.auth-visual-title span {
    background: var(--lm-gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-visual-sub {
    color: rgba(255,255,255,0.6);
    max-width: 420px;
    margin-bottom: 2rem;
}

.auth-chart-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.auth-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.auth-stat {
    background: rgba(6,10,9,0.7);
    padding: 1rem 0.75rem;
    text-align: center;
}

.auth-stat-value {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lm-gold-light, #34D399);
    display: block;
    margin-bottom: 0.2rem;
}

.auth-stat-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

@media (max-width: 991px) {
    .auth-thumb-area, .auth-visual { display: none; }
    .auth-wrapper { flex: 1 1 100%; padding: 2rem 1.25rem; }
}

/* ==========================================================================
   Dashboard (logged-in user area) — trading/investing platform look
   ========================================================================== */
:root {
    --db-sidebar-w: 280px;
    --db-header-h: 72px;
    --db-surface: var(--lm-navy);
    --db-surface-2: #131829;
    --db-bg: var(--lm-navy-dark);
    --db-border: rgba(255,255,255,0.08);
    --db-text-muted: rgba(255,255,255,0.55);
}

body.dashboard-page {
    background: var(--db-bg);
    font-family: 'Inter', sans-serif;
    color: #fff;
    padding-top: 0;
}

.dashboard-main { min-height: 100vh; background: var(--db-bg); }

/* ---------- Top bar ---------- */
#header.header-inner-pages {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--db-header-h);
    display: flex;
    align-items: center;
    background: var(--db-surface);
    border-bottom: 1px solid var(--db-border);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.header-brand i { color: var(--lm-gold); }
.header-brand img { max-height: 34px; width: auto; }

.back-to-site {
    color: var(--db-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}

.back-to-site:hover { color: var(--lm-gold); }

.sidebar-open-btn {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.25rem;
    width: 38px;
    height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991px) {
    .sidebar-open-btn { display: flex; }
}

.user-toggle-menu {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.9rem 0.35rem 0.35rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--db-border);
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
}

.user-toggle-menu:hover { color: #fff; }

.user-toggle-menu img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--lm-gold);
}

.user-toggle-menu span { font-size: 0.9rem; font-weight: 500; }

.user-toggle-menu::after { border-top-color: rgba(255,255,255,0.6); }

@media (max-width: 575px) {
    .user-toggle-menu img { display: none; }
}

.user-menu.dropdown-menu {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    box-shadow: 0 20px 45px rgba(0,0,0,0.4);
    border-radius: 12px;
    padding: 0.5rem;
    min-width: 180px;
}

.user-menu .dropdown-item {
    color: rgba(255,255,255,0.8);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
}

.user-menu .dropdown-item:hover { background: rgba(16,185,129,0.12); color: #fff; }

/* ---------- Top navigation (horizontal, replaces left sidebar) ---------- */
.d-topnav {
    position: sticky;
    top: var(--db-header-h);
    z-index: 40;
    background: var(--db-surface);
    border-bottom: 1px solid var(--db-border);
}

.d-topnav-menu {
    list-style: none;
    margin: 0;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.d-topnav-menu > li { position: relative; flex-shrink: 0; }

.d-topnav-menu > li > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    color: rgba(255,255,255,0.65);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.d-topnav-menu > li > a svg { width: 16px; height: 16px; stroke: currentColor; }

.d-topnav-menu > li > a:hover { color: #fff; }

.d-topnav-menu > li.active > a,
.d-topnav-menu > li > a.active {
    color: var(--lm-gold);
    border-bottom-color: var(--lm-gold);
}

.d-topnav-menu .has_submenu > a::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65rem;
    margin-left: 0.15rem;
}

.d-topnav-menu .submenu {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.2s ease;
    z-index: 50;
}

.d-topnav-menu .has_submenu:hover .submenu,
.d-topnav-menu .has_submenu.active .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.d-topnav-menu .submenu li a {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
    text-decoration: none;
}

.d-topnav-menu .submenu li a:hover { background: rgba(255,255,255,0.06); color: #fff; }

.d-topnav-menu .submenu li.active a { color: var(--lm-gold); }

@media (max-width: 991px) {
    .d-topnav {
        position: fixed;
        top: var(--db-header-h);
        left: 0;
        right: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        box-shadow: 0 20px 45px rgba(0,0,0,0.5);
    }
    .d-topnav.active { max-height: calc(100vh - var(--db-header-h)); overflow-y: auto; }
    .d-topnav-menu { flex-direction: column; padding: 0.5rem; overflow: visible; }
    .d-topnav-menu > li > a { border-bottom: none; border-radius: 8px; padding: 0.75rem 0.9rem; }
    .d-topnav-menu > li.active > a { background: rgba(16,185,129,0.12); }
    .d-topnav-menu .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(255,255,255,0.02);
        display: none;
        margin-top: 0.25rem;
    }
    .d-topnav-menu .has_submenu.active .submenu { display: block; }
}

/* ---------- Top bar page title ---------- */
.header-page-title { color: #fff; font-weight: 700; font-size: 1.2rem; margin: 0; }

/* ---------- Portfolio card (dashboard) ---------- */
.portfolio-card {
    position: relative;
    padding: 2rem;
    border-radius: 18px;
    background: linear-gradient(160deg, var(--db-surface) 0%, var(--db-surface-2) 100%);
    border: 1px solid rgba(16,185,129,0.25);
    overflow: hidden;
}

.portfolio-card::before {
    content: '';
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(circle at 15% 25%, rgba(16,185,129,0.28), transparent 55%),
        radial-gradient(circle at 85% 75%, rgba(76, 111, 255,0.14), transparent 55%);
    filter: blur(10px);
    pointer-events: none;
}

.portfolio-card > * { position: relative; z-index: 1; }

.portfolio-label { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-bottom: 0.4rem; }

.portfolio-amount { color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; }

.portfolio-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--lm-gold-light, #34D399);
    font-weight: 700;
    margin-top: 0.6rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
}

.portfolio-sub small { color: rgba(255,255,255,0.4); font-weight: 400; font-family: 'Inter', sans-serif; }

.portfolio-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
}

.portfolio-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lm-gold-light, #34D399); box-shadow: 0 0 8px var(--lm-gold-light, #34D399); }

.portfolio-card-compact { padding: 1.5rem; }
.portfolio-card-compact .portfolio-amount { font-size: clamp(1.5rem, 3vw, 1.9rem); }

/* ---------- Panel (shared card header for Assets/Transactions/News) ---------- */
.dash-panel {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 16px;
    padding: 1.5rem;
}

.dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.dash-panel-header h5 { color: #fff; font-weight: 700; margin: 0; font-size: 1.05rem; }

.dash-panel-header .view-all { color: var(--lm-gold); font-size: 0.82rem; text-decoration: none; font-weight: 600; }

.dash-panel-header .view-all:hover { color: var(--lm-gold-light, #34D399); }

/* Assets / stat rows */
.asset-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0.5rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s;
}

.asset-row:hover { background: rgba(255,255,255,0.03); }

.asset-row + .asset-row { border-top: 1px solid var(--db-border); }

.asset-row-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1rem;
}

.asset-row-body { flex: 1; min-width: 0; }

.asset-row-title { color: #fff; font-weight: 600; font-size: 0.92rem; }

.asset-row-sub { color: var(--db-text-muted); font-size: 0.76rem; }

.asset-row-value { text-align: right; }

.asset-row-amount { color: #fff; font-weight: 700; font-size: 0.92rem; font-family: 'SFMono-Regular', Consolas, monospace; }

.asset-row-change { font-size: 0.76rem; font-weight: 600; }

.asset-row-change.up { color: #34D399; }
.asset-row-change.down { color: #F87171; }

/* Transactions panel */
.txn-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; }

.txn-row + .txn-row { border-top: 1px solid var(--db-border); }

.txn-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    color: #fff;
}

.txn-icon.plus { background: linear-gradient(135deg, #34D399, #059669); }
.txn-icon.minus { background: linear-gradient(135deg, #F87171, #B91C1C); }
.txn-icon.neutral { background: linear-gradient(135deg, var(--lm-gold), var(--lm-primary-dark)); }

.txn-body { flex: 1; min-width: 0; }

.txn-details { color: #fff; font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.txn-date { color: var(--db-text-muted); font-size: 0.72rem; }

.txn-amount { font-size: 0.85rem; font-weight: 700; font-family: 'SFMono-Regular', Consolas, monospace; white-space: nowrap; }

.txn-amount.plus { color: #34D399; }
.txn-amount.minus { color: #F87171; }

.dash-empty { text-align: center; padding: 2rem 1rem; color: var(--db-text-muted); font-size: 0.85rem; }

/* News panel */
.news-item { display: block; text-decoration: none; margin-bottom: 1.1rem; }

.news-item:last-child { margin-bottom: 0; }

.news-item img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; margin-bottom: 0.6rem; }

.news-item .news-date { color: var(--lm-gold); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.news-item .news-title { color: #fff; font-size: 0.88rem; font-weight: 600; line-height: 1.4; margin-top: 0.25rem; }

.news-item:hover .news-title { color: var(--lm-gold-light, #34D399); }

.d-plan-notice {
    margin: 1rem 0.75rem 1.25rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.03));
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 12px;
    text-align: center;
}

.d-plan-notice p { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-bottom: 0.4rem; }

.d-plan-notice a {
    color: var(--lm-gold) !important;
    font-weight: 600;
    font-size: 0.85rem;
}

.dashboard-body-part {
    width: 100%;
    padding: 2rem clamp(1rem, 3vw, 2.5rem) 6rem;
}

@media (max-width: 991px) {
    .dashboard-body-part { padding: 1.25rem 1rem 6rem; }
}

/* ---------- Mobile page header / bottom nav ---------- */
.mobile-page-header { display: none; }

@media (max-width: 991px) {
    .mobile-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }
    .mobile-page-header .title { font-size: 1.15rem; font-weight: 700; color: #fff; }
    .mobile-page-header .back-btn { color: var(--db-text-muted); font-size: 0.85rem; text-decoration: none; }
}

.mobile-bottom-menu-wrapper {
    display: none;
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    background: var(--db-surface);
    border-top: 1px solid var(--db-border);
    z-index: 999;
}

.mobile-bottom-menu { display: flex; list-style: none; margin: 0; padding: 0; }

.mobile-bottom-menu li { width: 20%; }

.mobile-bottom-menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 0.25rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.68rem;
}

.mobile-bottom-menu li a i { font-size: 1.05rem; }

.mobile-bottom-menu li a.active { color: var(--lm-gold); }

@media (max-width: 991px) {
    .mobile-bottom-menu-wrapper { display: block; }
}

/* ---------- Cards / tables / stat boxes ---------- */
.site-card {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 14px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.site-card .card-header {
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--db-border);
    padding: 1.1rem 1.4rem;
    color: #fff;
}

.site-card .card-header h5, .site-card .card-header h4 { color: #fff; margin: 0; }

.site-card .card-body { padding: 1.4rem; color: rgba(255,255,255,0.75); }

.d-card {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 14px;
    padding: 1.4rem;
    color: #fff;
}

.site-table, .table {
    color: rgba(255,255,255,0.8);
    --bs-table-bg: transparent;
    --bs-table-color: rgba(255,255,255,0.8);
}

.table > :not(caption) > * > * { border-bottom-color: var(--db-border); background: transparent; color: inherit; box-shadow: none; }

.table thead th {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-bottom: 1px solid var(--db-border);
}

.table tbody tr:hover { background: rgba(255,255,255,0.03); }

.table .no-data-table { text-align: center; padding: 2rem 1rem; color: var(--db-text-muted); }

.pagination .page-link {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    color: #fff;
}

.pagination .page-item.active .page-link {
    background: var(--lm-primary);
    border-color: var(--lm-primary);
}

.pagination .page-item.disabled .page-link { background: transparent; color: var(--db-text-muted); }

/* ---------- Balance / stat cards ---------- */
.user-account-number {
    position: relative;
    padding: 1.75rem;
    border-radius: 16px;
    background: var(--lm-gradient);
    overflow: hidden;
    z-index: 1;
}

.user-account-number i {
    position: absolute;
    top: -10px; right: 10px;
    z-index: -1;
    color: rgba(255,255,255,0.12);
    font-size: 130px;
    line-height: 1;
}

.user-account-number .caption { color: rgba(255,255,255,0.75); font-size: 0.85rem; }

.user-account-number .acc-number { color: #fff; font-size: 1.9rem; font-weight: 700; margin: 0; }

.user-account-number .result { color: var(--lm-gold); font-weight: 700; margin-top: 0.5rem; }

.user-account-number .rate { color: rgba(255,255,255,0.55); font-size: 0.8rem; }

.card-dot [class*="dot-"] { width: 26px; height: 26px; border-radius: 50%; background: #fff; opacity: 0.35; }
.card-dot .dot-2 { opacity: 0.12; transform: translateX(-14px); }

.d-box-three {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 14px;
    height: 100%;
}

.d-box-three .icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
}

.d-box-three .content { min-width: 0; flex: 1; }
.d-box-three .content .title {
    font-size: 1.15rem;
    color: #fff;
    margin: 0.15rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d-box-three .content p {
    color: var(--db-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d-box-three.gr-bg-1 .icon, .d-box-three.gr-bg-1 { }
.gr-bg-1 .icon { background: linear-gradient(135deg, #34D399, #059669); }
.gr-bg-2 .icon { background: linear-gradient(135deg, #F59E0B, #B45309); }
.gr-bg-3 .icon { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.gr-bg-4 .icon { background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.gr-bg-5 .icon { background: linear-gradient(135deg, #F472B6, #BE185D); }
.gr-bg-6 .icon { background: linear-gradient(135deg, #FBBF24, #D97706); }
.gr-bg-7 .icon { background: linear-gradient(135deg, #34D399, #047857); }

.d-box-two {
    padding: 1.5rem;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 14px;
    position: relative;
}

.d-box-two-icon {
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lm-gradient-45);
    border-radius: 10px;
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.d-box-two .caption-title { color: var(--db-text-muted); font-size: 0.85rem; }

.d-box-two-amount { color: #fff; font-size: 1.3rem; margin-top: 0.3rem; }

.d-box-two .link-btn {
    position: absolute;
    bottom: 1rem; right: 1.1rem;
    color: var(--db-text-muted);
    transform: rotate(-45deg);
}

.d-box-two .link-btn:hover { color: var(--lm-gold); }

.mobile-box-wrapper .mobile-box {
    text-align: center;
    position: relative;
    padding: 0.75rem 0.25rem;
}

.mobile-box img { width: 34px; margin-bottom: 0.4rem; }

.mobile-box .title { font-size: 0.72rem; color: rgba(255,255,255,0.7); margin: 0; }

/* ---------- Account overview pie chart ---------- */
.overview-chart-wrap {
    max-width: 260px;
    margin: 0 auto;
}

/* ---------- Account overview chart legend ---------- */
.overview-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0 1.4rem 1.4rem;
}

.overview-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
}

.overview-legend-item:hover { color: #fff; }

.overview-legend-item .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.overview-legend-item b { color: #fff; font-weight: 600; }

/* ---------- Live news market tab switch ---------- */
.news-tab-switch {
    display: flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--db-border);
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}

.news-tab {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 16px;
    cursor: pointer;
    transition: 0.2s;
}

.news-tab.active { background: var(--lm-gradient-gold); color: #fff; }

.news-widget-wrap { padding: 0.5rem 0.75rem 0.75rem; }

/* ---------- Forms / modal (dashboard scope) ---------- */
.dashboard-body-part .form-control,
.dashboard-body-part .select,
.dashboard-body-part textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--db-border);
    color: #fff;
    border-radius: 10px;
    padding: 0.65rem 1rem;
}

.dashboard-body-part .form-control::placeholder { color: rgba(255,255,255,0.35); }

.dashboard-body-part .form-control:focus,
.dashboard-body-part .select:focus {
    background: rgba(255,255,255,0.06);
    border-color: var(--lm-gold);
    color: #fff;
    box-shadow: none;
}

/* The native <option> popup doesn't inherit the select's translucent background
   the way the closed box does, so without an explicit solid color it renders as a
   near-white system dropdown with white (invisible) text. */
.dashboard-body-part select.select option,
.dashboard-body-part select option {
    background: var(--db-surface);
    color: #fff;
}

.dashboard-body-part label { color: rgba(255,255,255,0.75); font-weight: 500; margin-bottom: 0.4rem; }

.dashboard-body-part .input-group-text {
    background: var(--lm-gradient-gold);
    color: #fff;
    font-weight: 600;
    border: none;
}

/* The Contact-Us page's floating-label styles (.form-group .form-control { width: 100% })
   leak into every dashboard .form-group and force inputs onto their own line inside an
   .input-group, pushing the currency/prefix badge above instead of beside it. Restore the
   normal Bootstrap input-group flex sizing here. */
.dashboard-body-part .input-group { flex-wrap: nowrap; }
.dashboard-body-part .input-group .form-control {
    width: 1%;
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-body-part .site-radio label { color: rgba(255,255,255,0.8); }

.modal-content {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    color: #fff;
    border-radius: 14px;
}

.modal-header { border-bottom: 1px solid var(--db-border); }
.modal-footer { border-top: 1px solid var(--db-border); }
.modal-header .close {
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0.6;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
}
.modal-header .close:hover { opacity: 1; }

/* Some legacy Blade markup adds Bootstrap's .bg-body utility to .modal-content,
   which uses !important to force a light background — beat it with our own !important. */
.modal-content.bg-body { background: var(--db-surface) !important; }

/* ---------- Generic dark overrides for plain Bootstrap components ---------- */
/* master2.blade.php only loads Bootstrap + landmark.css (no helper.css/style.css),
   so unstyled Bootstrap primitives (.card, .list-group-item, .alert, .form-select)
   fall back to Bootstrap's light-theme defaults and clash with body.dashboard-page's
   white text-on-dark-background scheme. Scope fixes to body.dashboard-page so they
   also catch markup that isn't nested inside .dashboard-body-part (e.g. JS-injected
   modal templates). */
body.dashboard-page .card {
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 14px;
    color: #fff;
}

body.dashboard-page .card .card-header {
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--db-border);
    color: #fff;
}

body.dashboard-page .card .card-header h4,
body.dashboard-page .card .card-header h5 { color: #fff; margin: 0; }

body.dashboard-page .card .card-body { color: rgba(255,255,255,0.75); }

body.dashboard-page .list-group-item {
    background: rgba(255,255,255,0.03);
    border-color: var(--db-border);
    color: rgba(255,255,255,0.85);
}

body.dashboard-page .list-group-item.text-light,
body.dashboard-page .list-group-item.text-white { color: #fff; }

body.dashboard-page .alert { border: 1px solid; background: transparent; }
body.dashboard-page .alert-danger { background: rgba(220,53,69,0.12); border-color: rgba(220,53,69,0.4); color: #ff8a97; }
body.dashboard-page .alert-success { background: rgba(25,135,84,0.12); border-color: rgba(25,135,84,0.4); color: #6fe3a5; }
body.dashboard-page .alert-warning { background: rgba(255,193,7,0.12); border-color: rgba(255,193,7,0.4); color: #ffd45e; }
body.dashboard-page .alert-info { background: rgba(13,202,240,0.12); border-color: rgba(13,202,240,0.4); color: #7fe3fb; }
body.dashboard-page .alert .alert-link { color: inherit; text-decoration: underline; }

body.dashboard-page .form-select {
    background-color: rgba(255,255,255,0.04);
    border: 1px solid var(--db-border);
    color: #fff;
    border-radius: 10px;
    padding: 0.65rem 1rem;
}

body.dashboard-page .form-select:focus { border-color: var(--lm-gold); box-shadow: none; color: #fff; }
body.dashboard-page .form-select option { background: var(--db-surface); color: #fff; }

body.dashboard-page .sp_btn_danger,
body.dashboard-page .btn-secondary {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--db-border);
    color: #fff;
    border-radius: 8px;
}

body.dashboard-page .sp_btn_danger:hover,
body.dashboard-page .btn-secondary:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

/* ---------- Referral tree ---------- */
.sp-referral .single-child { padding: 0.5rem 0.75rem; border-radius: 8px; }
.sp-referral .single-child + .single-child { margin-top: 0.9rem; }
.sp-referral .single-child p { display: flex; align-items: center; margin: 0; }
.sp-referral .single-child p img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lm-primary); }
.sp-referral .single-child p span { width: calc(100% - 34px); font-size: 0.85rem; padding-left: 0.7rem; color: rgba(255,255,255,0.8); }
.sub-child-list { position: relative; padding-left: 2.2rem; }
.sub-child-list::before { position: absolute; content: ''; top: 0; left: 17px; width: 1px; height: 100%; background: var(--db-border); }
.sub-child-list > .single-child { position: relative; }
.sub-child-list > .single-child::before { position: absolute; content: ''; left: -18px; top: 21px; width: 30px; height: 5px; border-left: 1px solid var(--db-border); border-bottom: 1px solid var(--db-border); border-radius: 0 0 0 5px; }

@media (max-width: 991px) {
    .d-box-three { padding: 0.9rem; }
}

@media (max-width: 480px) {
    .d-box-three { gap: 0.6rem; padding: 0.75rem; }
    .d-box-three .icon { width: 34px; height: 34px; font-size: 0.85rem; border-radius: 8px; }
    .d-box-three .content .title { font-size: 0.95rem; }
    .d-box-three .content p { font-size: 0.72rem; }
}

/* ---------- Dashboard investment plan cards ---------- */
.plan-item {
    position: relative;
    background: var(--db-surface);
    border: 1px solid var(--db-border);
    border-radius: 18px;
    padding: 2rem 1.75rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.plan-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--lm-gradient-45);
}

.plan-item:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.35); }

.plan-name-area { margin-bottom: 0.25rem; }
.plan-name { color: #fff; font-size: 1.3rem; font-weight: 700; margin: 0; }

.star-img { display: flex; justify-content: center; margin: 0.25rem 0 0.75rem; }
.star-img img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(76,111,255,0.35)); }

.plan-rio { margin-bottom: 1.25rem; }
.plan-amount {
    font-size: 2rem;
    font-weight: 800;
    background: var(--lm-gradient-45);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.plan-fatures { flex: 1; display: flex; flex-direction: column; }

.plan-list { list-style: none; margin: 0 0 1.25rem; padding: 0; }

.plan-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--db-border);
    font-size: 0.86rem;
}

.plan-list li:last-child { border-bottom: none; }

.plan-list .caption { color: var(--db-text-muted); display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.plan-list .caption i { color: var(--lm-gold-light); font-size: 0.7rem; }
.plan-list .details { color: #fff; font-weight: 600; text-align: right; }

.view-affiliate-wrapper {
    margin-top: auto;
    text-align: center;
    padding-top: 1rem;
    border-top: 1px dashed var(--db-border);
}

.view-affiliate-wrapper > p { color: var(--db-text-muted); font-size: 0.78rem; margin-bottom: 0.6rem; }

.view-affiliate-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--db-border);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s;
}

.view-affiliate-btn:hover { background: var(--lm-gradient-45); border-color: transparent; }

.plan-referral-area {
    position: absolute;
    inset: 0;
    background: var(--db-surface);
    border-radius: 18px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 5;
    overflow-y: auto;
}

.plan-referral-area.active { opacity: 1; visibility: visible; transform: translateY(0); }

.plan-referral-area-close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--db-border);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
}

.plan-referral-area-close:hover { background: rgba(255,255,255,0.14); }

.single-referral {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--db-border);
    color: #fff;
    font-size: 0.9rem;
}

.single-referral:last-child { border-bottom: none; }
.single-referral span { color: var(--lm-gold-light); font-weight: 700; }

.plan-action { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; }
.plan-action .disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Cookie consent ---------- */
.cookie-modal {
    background-color: var(--lm-navy) !important;
    position: fixed;
    z-index: 99999;
    bottom: 20px;
    left: 20px;
    max-width: 380px;
    width: calc(100% - 40px);
    padding: 1.5rem;
    color: #fff;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

.cookie-consent__message {
    display: block;
    text-align: center;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1rem;
}

.cookie-modal button {
    display: inline-block;
    background: var(--lm-gradient-gold);
    color: #fff;
    font-weight: 600;
    border: none;
    width: 100%;
    padding: 0.65rem;
    border-radius: 999px;
}

.cookies-card__icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.12);
    color: var(--lm-gold);
    font-size: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

/* back-to-top button */
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--lm-gradient-45);
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    body { padding-top: 70px; }
    .navbar-nav { text-align: center; margin-top: 1rem; }
    .navbar-nav .nav-link { margin: 0.35rem 0; }
    .btn-login { display: inline-block; margin-top: 0.75rem; }
    .dropdown-menu { text-align: center; }
}

@media (max-width: 768px) {
    .hero-section { min-height: 80vh; text-align: center; }
    .hero-title { font-size: 2.5rem; }
    .hero-banner { padding: 6rem 0 3rem 0; }
    .section-title { font-size: 2rem; }
    .feature-card { margin-bottom: 1.5rem; }
    .about-card { padding: 2rem; margin-bottom: 2rem; }
    .mission-card { padding: 2rem; }
    .team-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .team-info { padding: 1.5rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .stat-card { padding: 1rem; }
    .stat-number { font-size: 2rem; }
    .faq-section, .team-section, .pricing-section, .contact-section,
    .about-section, .asset-section, .mission-section,
    .main-content, .cap-dark-section, .cta-section { padding: 3rem 0; }
    .cta-title { font-size: 2rem; }
    .cap-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .accordion-button { padding: 1rem; font-size: 1rem; }
    .accordion-body { padding: 1rem; }
    .contact-cards { grid-template-columns: 1fr; gap: 1rem; }
    .form-left, .form-right { padding: 2rem; }
}

@media (max-width: 576px) {
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1rem; }
    .btn-invest, .btn-invest-outline { padding: 0.8rem 1.5rem; font-size: 1rem; width: 100%; text-align: center; }
    .about-card { padding: 1.5rem; }
    .contact-card { padding: 1.5rem; }
    .form-left, .form-right { padding: 1.5rem; }
    .form-title { font-size: 1.5rem; }
    .pricing-card { padding: 1.75rem 1.25rem; }
}