/**
 * style.css
 *
 * Main Stylesheet for Web3Cart (Public & Admin Panel).
 * Supports Light/Dark mode via CSS Variables.
 *
 * @version 2.0.0
 */

/* ================== Global & Variables ================== */
:root {
    /* --- Core Colors --- */
    --primary-color: #1f72bd;
    --primary-hover: #175a9a;
    --success: #2ecc71;
    --danger: #f64e60;
    --warning: #ffa800;
    --info: #3699ff;

    /* --- Light Mode Defaults --- */
    --bg-body: #ffffff;
    --bg-dashboard: #f4f7f9;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-input: #ffffff;
    --bg-light: #f8f9fa;
    --bg-hover: #f0f8ff;

    --text-dark: #212529;
    --text-muted: #86909c;
    --text-light: #6c757d;

    --border-color: #e0e0e0;
    --border-color-panel: #eff2f5;

    --shadow-card: 0 5px 20px rgba(0, 0, 0, 0.02);
    --shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.08);

    /* --- Gradients --- */
    --hero-gradient: linear-gradient(to right, #e0f2fe, #f0f4ff, #fce4ec);

    /* --- Font --- */
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* --- Panel Variables --- */
    --sidebar-width: 280px;

    /* --- Icon Colors --- */
    --color-blue: #1f72bd;
    --color-red: #dc3545;
    --color-orange: #fd7e14;
    --color-green: #28a745;
    --color-orange-icon: #f59e42;
}

/* ================== Dark Mode Overrides ================== */
[data-theme="dark"] {
    /* --- Dark Mode Colors --- */
    --bg-body: #151521;
    --bg-dashboard: #151521;
    --bg-card: #1e1e2d;
    --bg-sidebar: #1e1e2d;
    --bg-input: #1b1b29;
    --bg-light: #2b2b40;
    --bg-hover: #2a2a3c;

    --text-dark: #ffffff;
    --text-muted: #92929f;
    --text-light: #b5b5c3;

    --border-color: #323248;
    --border-color-panel: #323248;

    --shadow-card: 0 5px 20px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.3);

    /* --- Gradients (Darker) --- */
    --hero-gradient: linear-gradient(to right, #1a1a2e, #16213e, #1a1a2e);
}

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

html {
    scroll-behavior: smooth;
    background-color: var(--bg-body);
    color: var(--text-dark);
}

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ================== Utility Classes ================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-hover);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Typography --- */
.welcome-text {
    font-size: 0.95rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.heading-xl {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    color: var(--text-dark);
}

.text-lead {
    font-size: 1.15rem;
    color: var(--text-light);
    max-width: 550px;
    margin: 0 auto 30px auto;
}

.section-tagline {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(90deg, #00ff88, #00c6ff);
    color: #000000 !important;
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(90deg, #00e67a, #00b3e6);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 255, 136, 0.3);
    color: #000000 !important;
}

.btn-outline {
    background: transparent;
    color: #00ff88;
    border: 2px solid transparent;
    background-image: linear-gradient(var(--bg-card), var(--bg-card)), linear-gradient(90deg, #00ff88, #00c6ff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.btn-outline:hover {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.15), rgba(0, 198, 255, 0.15));
    color: #00ff88;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 255, 136, 0.2);
}

.btn-success {
    background-color: var(--success);
    color: #ffffff;
    border-color: var(--success);
    font-weight: 600;
    padding: 14px 35px;
}

.btn-success:hover {
    background-color: #27ae60;
    border-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(125, 191, 46, 0.3);
}

.btn-sm {
    padding: 6px 15px;
    font-size: 0.85rem;
    border-radius: 6px;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.btn-danger:hover {
    background: #d63031;
    color: #fff;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--text-muted);
    transition: all 0.2s;
    border: 1px solid var(--border-color);
}

.btn-icon:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.btn-icon.delete:hover {
    background: var(--danger);
    border-color: var(--danger);
}

/* --- Theme Toggle Button --- */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.theme-toggle-btn:hover {
    background-color: var(--bg-hover);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ================== Header (Landing Page) ================== */
.header {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Optional: Add slight transparency/blur if desired, ensuring var use */
}

.header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hide mobile menu elements on desktop */
.mobile-menu-toggle,
.mobile-menu-close {
    display: none;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
}

.header .logo img {
    max-height: 40px;
    width: auto;
    display: block;
    line-height: 1;
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-item {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
}

.nav-item:hover {
    color: var(--primary-color);
}

/* ================== Hero Section ================== */
.hero {
    background-color: var(--bg-body);
    padding-top: 80px;
    padding-bottom: 0;
    text-align: center;
    overflow: hidden;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.hero-responsive-banner {
    background: var(--hero-gradient);
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.responsive-container {
    max-width: 900px;
}

.responsive-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.responsive-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    font-size: 1rem;
    color: var(--text-dark);
}

.responsive-features span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.responsive-features i {
    color: var(--color-green);
    font-size: 1.1rem;
}

.hero-device-showcase {
    position: relative;
    padding-top: 0;
    margin-top: -100px;
    padding-bottom: 80px;
    z-index: 10;
}

.device-container {
    position: relative;
    max-width: 1100px;
    height: 700px;
}

.img-mobile,
.img-laptop,
.img-tablet {
    position: absolute;
    border-radius: 15px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
}

.img-mobile {
    width: 200px;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 3;
}

.img-laptop {
    width: 800px;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.img-tablet {
    width: 300px;
    top: 60%;
    right: 10%;
    transform: translateY(-50%);
    z-index: 3;
}


/* ================== Sections (General) ================== */
.how-it-works,
.why-us,
.faq,
.pricing-section {
    padding: 100px 0;
    background-color: var(--bg-body);
}

.core-features,
.detailed-features,
.cta,
.footer {
    padding: 100px 0;
    background-color: var(--bg-light);
}

.section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.section-heading h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* ================== Cards / Grids ================== */
.step-item,
.faq-item,
.pricing-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.step-item:hover,
.faq-item:hover,
.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

/* --- How It Works --- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.how-it-works .step-item>i {
    font-size: 3.5rem !important;
    margin-bottom: 25px;
}

.step-item .step-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.step-item p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- Features --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 30px;
}

.feature-grid-item {
    text-align: center;
    padding: 15px 10px;
}

.feature-grid-item i {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.feature-grid-item span {
    display: block;
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 500;
    line-height: 1.4;
}

.feature-grid-item:hover i {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* --- Why Us --- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.why-item {
    text-align: center;
}

.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
}

.icon-wrapper i {
    font-size: 2.5rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.why-item:hover .icon-wrapper i {
    color: var(--primary-color);
    transform: scale(1.1);
}

.why-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.why-item p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* --- Detailed Features --- */
.feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 60px;
}

.feature-row.reverse {
    flex-direction: row-reverse;
}

.feature-image,
.feature-content {
    flex: 1;
}

.feature-image img {
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
}

.feature-content h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.feature-content p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 500px;
}

.feature-row.reverse .feature-content {
    text-align: left;
}

/* --- FAQ --- */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.faq-item {
    padding: 0;
    background-color: var(--bg-card);
    margin-bottom: 20px;
    text-align: left;
}

.faq-question {
    background: none;
    border: none;
    font: inherit;
    color: var(--text-dark);
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
}

.faq-question i {
    transition: transform 0.3s ease;
    color: var(--primary-color);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-out;
}

.faq-answer p {
    padding: 0 20px 20px;
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-item.active .faq-question {
    color: var(--primary-color);
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

/* --- Pricing --- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.pricing-card.recommended {
    border-color: var(--primary-color);
    box-shadow: 0 10px 40px rgba(31, 114, 189, 0.15);
    transform: translateY(-10px);
}

.plan-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.plan-description {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 25px;
    min-height: 40px;
}

.plan-price {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1.1;
}

.plan-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-light);
    margin-left: 5px;
}

.plan-features {
    list-style: none;
    padding: 25px 0;
    margin: 25px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    flex-grow: 1;
    text-align: left;
}

.plan-features li {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-features li i {
    color: var(--color-green);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.plan-button {
    margin-top: auto;
}

/* Red Pill Style for Pricing Buttons */
.plan-button .btn {
    background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: 14px 35px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(255, 8, 68, 0.3), inset 0 -3px 10px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.plan-button .btn::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 10%;
    width: 80%;
    height: 35%;
    border-radius: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.plan-button .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 35px rgba(255, 8, 68, 0.5), 0 12px 25px rgba(255, 8, 68, 0.3);
    color: #fff !important;
}

/* --- CTA --- */
.cta {
    text-align: center;
}

.cta h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta .section-subtitle {
    margin-bottom: 30px;
}

/* --- Footer --- */
.footer {
    padding: 30px 0;
    border-top: 1px solid var(--border-color);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright {
    font-size: 0.9rem;
    color: var(--text-light);
}

.footer-socials {
    display: flex;
    gap: 20px;
}

.footer-socials a {
    font-size: 1.1rem;
    color: var(--text-light);
}

.footer-socials a:hover {
    color: var(--primary-color);
}

/* ============================================================
   PANEL & ADMIN STYLES
   ============================================================ */

/* --- Layout Container --- */
.app-layout {
    display: flex;
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px;
    gap: 40px;
    min-height: 100vh;
    align-items: flex-start;
    background-color: var(--bg-dashboard);
}

body.dashboard-page {
    background-color: var(--bg-dashboard);
}

/* --- Sidebar --- */
.profile-sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-radius: 20px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 40px;
    box-shadow: var(--shadow-card);
    z-index: 99;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    border: 1px solid var(--border-color-panel);
}

.sidebar-user-info {
    text-align: center;
    margin-bottom: 30px;
}

.menu-group {
    margin-bottom: 30px;
}

.menu-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    display: block;
    font-weight: 600;
}

.sidebar-menu a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    padding: 10px 0;
    transition: color 0.2s;
}

.sidebar-menu a i {
    width: 25px;
    margin-right: 8px;
    text-align: center;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
    color: var(--primary-color);
}

.logout-link {
    color: var(--danger) !important;
}

.sidebar-logo {
    margin-top: auto;
    padding-top: 40px;
}

/* --- Content Area --- */
.main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    min-width: 0;
}

.content-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 35px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color-panel);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color-panel);
    padding-bottom: 15px;
}

.panel-top-section {
    margin-bottom: 30px !important;
}

/* --- Forms (Global) --- */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color-panel);
    border-radius: 8px;
    background: var(--bg-input);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 114, 189, 0.1);
}

.form-messages-error,
.form-messages-success,
.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: left;
}

.form-messages-error,
.alert-danger {
    background: rgba(246, 78, 96, 0.1);
    color: var(--danger);
    border: 1px solid rgba(246, 78, 96, 0.2);
}

.form-messages-success,
.alert-success {
    background: rgba(46, 204, 113, 0.1);
    color: var(--success);
    border: 1px solid rgba(46, 204, 113, 0.2);
}

/* --- Profile Header --- */
.profile-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-info-left {
    display: flex;
    align-items: center;
}

.avatar-circle {
    width: 60px;
    height: 60px;
    background: var(--bg-hover);
    border-radius: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 15px;
}

.user-welcome h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-dark);
}

.user-welcome p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- User Dashboard Grid --- */
.user-dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.info-grid-user {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--border-color-panel);
    padding-bottom: 20px;
    gap: 20px;
}

.last-entry {
    padding-top: 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.info-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.plan-badge {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background: rgba(31, 114, 189, 0.05);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
}

.info-detail-center {
    text-align: center;
}

.open-request-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: none;
    padding: 0;
}

.open-request-box i {
    font-size: 3rem;
    color: var(--color-orange-icon);
    margin-bottom: 15px;
}

.open-request-box h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.open-request-box strong {
    font-size: 2rem;
    color: var(--primary-color);
}

/* --- License Card --- */
.license-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color-panel);
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}

.license-card-header,
.action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color-panel);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.license-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.license-title-group i {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.license-title-group h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-dark);
}

.license-active-badge,
.license-status.active {
    background: rgba(46, 204, 113, 0.1);
    color: var(--success);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.license-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid var(--border-color-panel);
    padding-bottom: 25px;
    margin-bottom: 30px;
}

.license-product-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.license-product-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    display: block;
    margin-bottom: 5px;
}

.license-domain {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.date-section-center {
    text-align: center;
}

.date-section-right {
    text-align: right;
}

.lifetime-date {
    color: #e17055;
}

.license-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.license-key-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.license-key-box {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color-panel);
    border-radius: 6px;
    padding: 10px 15px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
}

.key-label {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

.key-value {
    font-family: monospace;
    font-size: 1rem;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    min-width: 0;
    margin-right: 10px;
}

.copy-icon,
.copy-btn {
    color: var(--primary-color);
    cursor: pointer;
    font-size: 1.1rem;
    background: none;
    border: none;
    flex-shrink: 0;
}

.license-download-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.download-label-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    display: block;
}

.btn-download-large {
    background: var(--primary-color);
    color: #fff;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    border: none;
}

.btn-download-large:hover {
    background: var(--primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(31, 114, 189, 0.2);
}

/* --- Payment UI --- */
.payment-container {
    text-align: center;
    padding: 20px 0;
}

.pay-price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 15px 0;
    line-height: 1;
}

.pay-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.net-tab {
    background: transparent;
    border: 1px solid var(--border-color-panel);
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.net-tab.active,
.net-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(31, 114, 189, 0.1);
}

.pay-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 15px 50px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    max-width: 350px;
}

.pay-btn:hover {
    background: var(--primary-hover);
    box-shadow: 0 10px 20px rgba(31, 114, 189, 0.15);
}

/* --- Auth Pages --- */
.auth-page {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    background-color: var(--bg-dashboard) !important;
    width: 100%;
    padding: 20px;
}

.auth-container {
    width: 100%;
    max-width: 450px;
    background: var(--bg-card);
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    text-align: center;
    border: 1px solid var(--border-color-panel);
}

.auth-container .logo-text {
    margin-bottom: 10px;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
}

.auth-footer {
    margin-top: 25px;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* --- Tables & Admin Widgets --- */
.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.custom-table th {
    text-align: left;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px;
    border-bottom: 1px solid var(--border-color-panel);
    white-space: nowrap;
}

.custom-table td {
    padding: 20px 15px;
    border-bottom: 1px solid var(--border-color-panel);
    color: var(--text-dark);
    vertical-align: middle;
}

.status-badge.status-open {
    background: rgba(34, 166, 179, 0.1);
    color: #22a6b3;
    border: none;
}

.status-badge.status-closed {
    background: rgba(164, 176, 190, 0.1);
    color: #a4b0be;
    border: none;
}

.status-badge.status-completed {
    background: rgba(46, 204, 113, 0.1);
    color: var(--success);
    border: none;
}

.status-badge.status-pending,
.status-badge.status-pending_payment {
    background: rgba(255, 168, 0, 0.1);
    color: var(--warning);
    border: none;
}

.testnet-alert-box {
    width: 100%;
    border: 1px solid var(--warning);
    background: rgba(255, 168, 0, 0.1);
    color: var(--text-dark);
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.testnet-alert-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.testnet-alert-icon {
    font-size: 2rem;
    color: var(--warning);
}

.testnet-alert-text h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.testnet-alert-text p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.info-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.info-item {
    flex: 1;
    min-width: 150px;
}

.support-box {
    border: 1px solid var(--border-color-panel);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s;
}

.support-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.support-box i {
    font-size: 1.5rem;
}

/* --- Wallet Modal --- */
.wallet-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.wallet-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.wallet-modal-content {
    background: var(--bg-card);
    width: 90%;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s;
}

.wallet-modal-overlay.visible .wallet-modal-content {
    transform: translateY(0);
}

.wallet-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color-panel);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-light);
}

.wallet-modal-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.wallet-modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}

.wallet-modal-body {
    padding: 20px;
}

.wallet-button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color-panel);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.wallet-button:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

.wallet-button img {
    width: 32px;
    height: 32px;
    margin-right: 15px;
}

.wallet-button span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
}

/* ================== Docs Section ================== */
.docs-section {
    background-color: var(--bg-body);
    padding: 60px 0;
    min-height: 80vh;
}

/* Layout Wrapper - Ensures Sidebar and Content are side-by-side */
.docs-layout {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    position: relative;
    flex-wrap: nowrap;
}

/* Sidebar Styling */
.docs-sidebar {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    padding-right: 20px;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Content Area Styling */
.docs-content {
    flex-grow: 1;
    width: 100%;
    min-width: 0;
    /* Prevents flex overflow */
    padding-bottom: 50px;
}

/* Typography & Elements */
.docs-category-title {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.docs-article-link {
    display: block;
    padding: 8px 12px;
    color: var(--text-light);
    border-radius: 6px;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}

.docs-article-link:hover {
    color: var(--primary-color);
    background-color: var(--bg-hover);
}

.docs-article-item.active .docs-article-link {
    background-color: rgba(31, 114, 189, 0.08);
    color: var(--primary-color);
    font-weight: 600;
    border-left-color: var(--primary-color);
}

.docs-welcome-box {
    text-align: center;
    padding: 60px 40px;
    background-color: var(--bg-light);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.docs-welcome-box h1 {
    color: var(--text-dark);
    margin-bottom: 15px;
}

.docs-welcome-box p {
    color: var(--text-light);
}

.docs-article-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 25px;
    margin-bottom: 35px;
}

.docs-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.2;
}

.docs-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.docs-body {
    color: var(--text-dark);
    line-height: 1.8;
    font-size: 1.05rem;
}

.docs-body h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.docs-body h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 30px;
    margin-bottom: 15px;
}

.docs-body p,
.docs-body ul,
.docs-body ol {
    margin-bottom: 20px;
    color: var(--text-light);
}

.docs-body blockquote {
    border-left: 4px solid var(--primary-color);
    padding: 15px 25px;
    margin: 30px 0;
    background-color: var(--bg-light);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-dark);
}

.docs-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 25px 0;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
}

.docs-body pre {
    background: #282c34;
    color: #abb2bf;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 30px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.docs-body code {
    font-family: 'Courier New', Courier, monospace;
    background-color: rgba(31, 114, 189, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--primary-color);
    font-size: 0.9em;
}

.docs-body pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* Responsive Rules */
@media (max-width: 992px) {
    .docs-layout {
        flex-direction: column;
        gap: 30px;
    }

    .docs-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 20px;
        position: static;
        max-height: none;
    }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .hero-device-showcase {
        margin-top: -50px;
    }

    .device-container {
        height: 550px;
    }

    .img-mobile {
        width: 160px;
        left: 5%;
    }

    .img-laptop {
        width: 650px;
    }

    .img-tablet {
        width: 250px;
        right: 5%;
    }

    .steps-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .app-layout {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .profile-sidebar {
        width: 100%;
        position: relative;
        top: 0;
        max-height: none;
        overflow-y: visible;
        margin-bottom: 20px;
        padding: 30px;
    }

    .user-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .license-detail-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .license-product-group {
        align-items: center;
    }

    .date-section-center,
    .date-section-right {
        text-align: center !important;
    }

    .license-footer-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .license-key-group,
    .license-download-group {
        align-items: center;
        width: 100%;
    }

    .docs-layout {
        flex-direction: column;
        gap: 30px;
    }

    .docs-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 20px;
        position: static;
        max-height: none;
    }

    div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }
}

@media (max-width: 768px) {

    /* === MOBILE NAVIGATION === */
    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-card);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links .nav-item {
        font-size: 1.3rem;
    }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        gap: 5px;
        z-index: 1001;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--text-dark);
        transition: all 0.3s ease;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .mobile-menu-close {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 2rem;
        background: none;
        border: none;
        color: var(--text-dark);
        cursor: pointer;
    }

    /* === HERO SECTION === */
    .hero {
        padding-top: 50px;
    }

    .heading-xl {
        font-size: 2rem;
    }

    .text-lead {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .responsive-heading {
        font-size: 1.2rem;
    }

    .responsive-features {
        flex-direction: column;
        gap: 15px;
    }

    .hero-device-showcase {
        margin-top: 0;
        padding-bottom: 40px;
    }

    .device-container {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px;
    }

    .img-mobile,
    .img-laptop,
    .img-tablet {
        position: static;
        transform: none;
    }

    .img-laptop {
        width: 100%;
        max-width: 400px;
        order: 1;
    }

    .img-mobile {
        width: 140px;
        display: none;
    }

    .img-tablet {
        width: 200px;
        display: none;
    }

    /* === SECTION HEADINGS === */
    .section-heading h2 {
        font-size: 1.75rem;
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    /* === HOW IT WORKS (Single Column) === */
    .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .step-item {
        padding: 30px 20px;
    }

    /* === CORE FEATURES (2 Columns) === */
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    .feature-grid-item i {
        font-size: 2rem;
    }

    .feature-grid-item span {
        font-size: 0.8rem;
    }

    /* === WHY US (Single Column) === */
    .why-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    /* === KEY FEATURES / DETAILED FEATURES (Stacked) === */
    .feature-row,
    .feature-row.reverse {
        flex-direction: column !important;
        gap: 30px;
        margin-top: 40px;
    }

    .feature-image,
    .feature-content {
        width: 100%;
    }

    .feature-image {
        order: 1;
    }

    .feature-content {
        order: 2;
        text-align: center;
    }

    .feature-content h3 {
        font-size: 1.4rem;
    }

    .feature-content p {
        max-width: 100%;
    }

    /* === FAQ (Single Column) === */
    .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .faq-question {
        font-size: 0.95rem;
        padding: 15px;
    }

    .faq-answer p {
        font-size: 0.9rem;
        padding: 0 15px 15px;
    }

    /* === PRICING (Single Column) === */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card.recommended {
        transform: none;
    }

    .plan-price {
        font-size: 2.8rem;
    }

    /* === CTA === */
    .cta h2 {
        font-size: 1.75rem;
    }

    /* === LICENSE KEY === */
    .license-key-box {
        flex-direction: column;
        align-items: stretch;
    }

    .key-value {
        white-space: normal;
        word-break: break-all;
        margin-right: 0;
        margin-bottom: 10px;
        text-align: center;
    }

    .copy-btn {
        align-self: center;
    }
}

/* --- Back to Top Button --- */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #00ff88, #00c6ff);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    font-size: 1.2rem;
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background: linear-gradient(135deg, #00e67a, #00b3e6);
    transform: translateY(-5px);
    color: #000;
    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.4);
}

/* ============================================================ */
/* ==          BLUEPRINT STEPS SECTION                       == */
/* ============================================================ */
.blueprint-section {
    background-color: var(--bg-body);
    padding: 80px 20px;
}

.blueprint-container {
    max-width: 1200px;
    margin: 0 auto;
}

.blueprint-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.blueprint-header .blueprint-badge {
    color: var(--color-green);
    background: rgba(0, 255, 136, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
}

.blueprint-header h2 {
    font-size: 2.5rem;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.1;
    color: var(--text-dark);
}

.blueprint-header .bp-highlight {
    color: var(--color-green);
}

.blueprint-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
}

.blueprint-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.bp-card {
    flex: 1;
    background: var(--bg-card);
    padding: 30px 20px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bp-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.bp-icon {
    width: 60px;
    height: 60px;
    background: var(--bg-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.bp-icon svg {
    width: 28px;
    height: 28px;
}

.bp-content h3 {
    font-size: 1.15rem;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.bp-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Highlight Last Card */
.bp-card.bp-highlight-card {
    border-color: var(--color-green);
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.05), var(--bg-card));
}

.bp-highlight-card .bp-icon {
    background: var(--color-green);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.bp-highlight-card h3 {
    color: var(--color-green);
}

/* Arrow */
.bp-arrow {
    align-self: center;
    font-size: 2rem;
    color: var(--border-color);
    font-weight: 300;
}

/* Responsive */
@media (max-width: 900px) {
    .blueprint-grid {
        flex-direction: column;
    }

    .bp-arrow {
        display: none;
    }

    .blueprint-header h2 {
        font-size: 1.8rem;
    }

    .bp-card {
        width: 100%;
        min-height: auto;
    }
}

/* ============================================================ */
/* ==          REALITY COMPARISON SECTION                    == */
/* ============================================================ */
.compare-section {
    padding: 80px 20px;
    background: var(--bg-body);
}

.compare-header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.compare-header .compare-badge {
    color: var(--color-green);
    background: rgba(0, 255, 136, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
}

.compare-header h2 {
    font-size: 2.2rem;
    margin-top: 20px;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.compare-header .cmp-highlight {
    color: var(--color-green);
}

.compare-header p {
    color: var(--text-muted);
    font-size: 1rem;
}

.comparison-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 500px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    user-select: none;
}

.cmp-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Old World (Red) */
.cmp-layer-old {
    background: radial-gradient(circle at center, #1a0505, #080000);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .cmp-layer-old {
    background: radial-gradient(circle at center, #fff0f0, #ffeaea);
}

/* New World (Green) */
.cmp-layer-new {
    width: 50%;
    background: radial-gradient(circle at center, #001a0f, #000a05);
    border-right: 2px solid var(--color-green);
    z-index: 2;
}

[data-theme="light"] .cmp-layer-new {
    background: radial-gradient(circle at center, #e8fff0, #f0fff5);
}

.cmp-content-box {
    position: absolute;
    width: 1000px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    box-sizing: border-box;
}

.cmp-side-content {
    width: 42%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cmp-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.2rem;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 10px;
}

.cmp-feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cmp-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 600;
}

.cmp-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Old World Styles */
.cmp-old-content .cmp-title {
    color: #ff3333;
    text-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
}

[data-theme="light"] .cmp-old-content .cmp-title {
    text-shadow: none;
}

.cmp-old-content .cmp-feature-item {
    color: #999;
}

[data-theme="light"] .cmp-old-content .cmp-feature-item {
    color: #666;
}

.cmp-old-content .cmp-icon {
    background: rgba(255, 51, 51, 0.1);
    color: #ff3333;
    border: 1px solid #ff3333;
}

.cmp-old-content .cmp-side-content {
    margin-left: auto;
    text-align: right;
    align-items: flex-end;
}

.cmp-old-content .cmp-feature-item {
    flex-direction: row-reverse;
}

/* New World Styles */
.cmp-new-content .cmp-title {
    color: var(--color-green);
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

[data-theme="light"] .cmp-new-content .cmp-title {
    text-shadow: none;
}

.cmp-new-content .cmp-feature-item {
    color: #fff;
}

[data-theme="light"] .cmp-new-content .cmp-feature-item {
    color: #1a1a1a;
}

.cmp-new-content .cmp-icon {
    background: rgba(0, 255, 136, 0.1);
    color: var(--color-green);
    border: 1px solid var(--color-green);
}

/* Slider Handle */
.cmp-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #fff;
    cursor: ew-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px #fff;
}

.cmp-handle-circle {
    width: 44px;
    height: 44px;
    background: #000;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .cmp-handle-circle {
    background: #fff;
    color: #000;
    border-color: #333;
}

/* Glitch Effect */
.cmp-glitch {
    animation: cmpGlitch 3s infinite;
}

@keyframes cmpGlitch {

    0%,
    95%,
    100% {
        opacity: 1;
        transform: skewX(0);
    }

    96% {
        opacity: 0.8;
        transform: skewX(8deg);
    }

    98% {
        opacity: 0.8;
        transform: skewX(-8deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .comparison-wrapper {
        height: 550px;
    }

    .cmp-content-box {
        padding: 0 20px;
    }

    .cmp-title {
        font-size: 1.5rem;
    }

    .cmp-feature-item {
        font-size: 0.85rem;
    }

    .cmp-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
}

/* ============================================================ */
/* ==          PROFIT SIMULATOR SECTION                      == */
/* ============================================================ */
.profit-section {
    padding: 80px 20px;
    background: var(--bg-body);
}

.profit-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 50px;
    box-shadow: var(--shadow-card);
}

.profit-header {
    text-align: center;
    margin-bottom: 50px;
}

.profit-tag {
    color: var(--color-green);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
}

.profit-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    color: var(--text-dark);
}

.profit-desc {
    color: var(--text-muted);
    font-size: 1rem;
    margin-top: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.profit-slider-container {
    margin-bottom: 50px;
    text-align: center;
}

.profit-slider-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profit-revenue-display {
    font-family: 'Share Tech Mono', monospace;
    font-size: 3rem;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.profit-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 5px;
    outline: none;
    opacity: 0.8;
    transition: opacity .2s;
}

.profit-slider:hover {
    opacity: 1;
}

.profit-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--color-green);
    cursor: pointer;
    box-shadow: 0 0 15px var(--color-green);
}

.profit-results-grid {
    display: flex;
    gap: 30px;
    position: relative;
}

.profit-card {
    flex: 1;
    background: var(--bg-light);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Bank Card (Loser) */
.profit-card-bank {
    border-color: rgba(255, 51, 51, 0.2);
}

.profit-card-bank .profit-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    filter: grayscale(0.5);
}

.profit-card-bank h4 {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
    text-transform: uppercase;
}

.profit-card-bank .profit-amount {
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.2rem;
    color: #ff3333;
    margin: 20px 0;
    text-shadow: 0 0 10px rgba(255, 51, 51, 0.3);
}

.profit-card-bank .profit-sub {
    font-size: 0.8rem;
    color: #ff3333;
    opacity: 0.8;
}

/* Web3Cart Card (Winner) */
.profit-card-web3 {
    border-color: rgba(0, 255, 136, 0.4);
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.05), var(--bg-light));
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(0, 255, 136, 0.1);
    z-index: 2;
}

.profit-card-web3 .profit-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.profit-card-web3 h4 {
    color: var(--text-dark);
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}

.profit-card-web3 .profit-amount {
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.5rem;
    color: var(--color-green);
    margin: 20px 0;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

.profit-card-web3 .profit-sub {
    font-size: 0.85rem;
    color: var(--color-green);
    font-weight: 600;
}

.profit-vs-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    color: var(--text-dark);
    padding: 10px;
    border-radius: 50%;
    font-weight: 800;
    z-index: 5;
    border: 4px solid var(--bg-body);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .profit-results-grid {
        flex-direction: column;
        gap: 50px;
    }

    .profit-vs-badge {
        top: auto;
        bottom: -25px;
    }

    .profit-revenue-display {
        font-size: 2.2rem;
    }

    .profit-card-web3 {
        transform: scale(1);
    }

    .profit-wrapper {
        padding: 30px 20px;
    }

    .profit-title {
        font-size: 1.8rem;
    }
}

/* ============================================================ */
/* ==          CORE CAPABILITIES SECTION                     == */
/* ============================================================ */
.core-section {
    background-color: var(--bg-body);
    padding: 80px 20px;
}

.core-container {
    max-width: 1200px;
    margin: 0 auto;
}

.core-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.core-badge {
    color: var(--color-green);
    background: rgba(0, 255, 136, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-block;
}

.core-title {
    font-size: 2.5rem;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-dark);
}

.core-highlight {
    color: var(--color-green);
}

.core-desc {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.core-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.core-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 35px 25px;
    border-radius: 16px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.core-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 136, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.core-card:hover .core-icon-box {
    background: var(--color-green);
    color: #000;
    box-shadow: 0 0 20px var(--color-green);
}

.core-card:hover h3 {
    color: var(--color-green);
}

.core-icon-box {
    width: 55px;
    height: 55px;
    background: var(--bg-hover);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--color-green);
    transition: all 0.3s ease;
}

.core-icon-box svg {
    width: 28px;
    height: 28px;
}

.core-card h3 {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
    color: var(--text-dark);
}

.core-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .core-title {
        font-size: 1.8rem;
    }

    .core-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================ */
/* ==          EMPIRE CALCULATOR SECTION                     == */
/* ============================================================ */
.empire-section {
    padding: 80px 20px;
    background: var(--bg-body);
}

.empire-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 50px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.empire-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 255, 136, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

.empire-content {
    position: relative;
    z-index: 1;
}

.empire-header {
    text-align: center;
    margin-bottom: 50px;
}

.empire-tag {
    color: var(--color-cyan);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 10px;
    display: inline-block;
    border: 1px solid var(--color-cyan);
    padding: 5px 12px;
    border-radius: 4px;
}

.empire-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 15px 0;
    line-height: 1.1;
    color: var(--text-dark);
}

.empire-desc {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.empire-calc-grid {
    display: flex;
    gap: 50px;
    align-items: center;
}

.empire-inputs-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.empire-input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.empire-label-row {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.empire-val-display {
    color: var(--color-cyan);
    font-family: 'Share Tech Mono', monospace;
}

.empire-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: 5px;
    outline: none;
}

.empire-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-cyan);
    cursor: pointer;
    box-shadow: 0 0 10px var(--color-cyan);
    border: 2px solid #fff;
    transition: transform 0.1s;
}

.empire-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.empire-result-col {
    flex: 1;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 280px;
}

.empire-result-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.empire-result-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-green);
    text-shadow: 0 0 25px rgba(0, 255, 136, 0.4);
    margin-bottom: 10px;
    animation: empireGlow 2s infinite;
}

@keyframes empireGlow {

    0%,
    100% {
        text-shadow: 0 0 25px rgba(0, 255, 136, 0.4);
    }

    50% {
        text-shadow: 0 0 40px rgba(0, 255, 136, 0.7);
    }
}

.empire-result-sub {
    font-size: 0.95rem;
    color: var(--text-light);
}

.empire-highlight {
    color: var(--color-green);
    font-weight: bold;
}

@media (max-width: 800px) {
    .empire-calc-grid {
        flex-direction: column;
    }

    .empire-result-value {
        font-size: 2.5rem;
    }

    .empire-wrapper {
        padding: 30px 20px;
    }

    .empire-title {
        font-size: 1.8rem;
    }
}

/* ============================================================ */
/* ==          INTEL / TRUTH SECTION                         == */
/* ============================================================ */
.intel-section {
    background-color: var(--bg-body);
    padding: 80px 20px;
}

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

.intel-header {
    text-align: center;
    margin-bottom: 50px;
}

.intel-status {
    color: var(--color-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 5px 15px;
    border-radius: 4px;
    background: rgba(0, 255, 136, 0.05);
}

.intel-blink-dot {
    width: 8px;
    height: 8px;
    background: var(--color-green);
    border-radius: 50%;
    animation: intelBlink 1s infinite;
}

@keyframes intelBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.intel-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1;
    color: var(--text-dark);
}

.intel-highlight {
    color: var(--color-green);
}

.intel-desc {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.intel-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.intel-file {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.intel-file:hover {
    border-color: var(--color-green);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
}

.intel-file-header {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    background: var(--bg-hover);
}

.intel-file-icon {
    margin-right: 12px;
    font-size: 1.1rem;
}

.intel-file-name {
    flex: 1;
    color: var(--text-light);
    letter-spacing: 0.5px;
}

.intel-file-status {
    color: #ff3333;
    font-weight: bold;
    font-size: 0.75rem;
}

.intel-file-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background: rgba(0, 255, 136, 0.02);
    border-top: 1px solid transparent;
}

.intel-answer {
    padding: 22px;
    color: var(--color-green);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}

/* Decrypted State */
.intel-file.decrypted {
    border-color: var(--color-green);
}

.intel-file.decrypted .intel-file-status {
    color: var(--color-green);
}

.intel-file.decrypted .intel-file-icon {
    filter: drop-shadow(0 0 5px var(--color-green));
}

.intel-file.decrypted .intel-file-content {
    max-height: 200px;
    border-top-color: rgba(0, 255, 136, 0.2);
}

.intel-file.decrypted .intel-answer {
    opacity: 1;
    transform: translateY(0);
}

[data-theme="light"] .intel-answer {
    color: #059669;
}

@media (max-width: 600px) {
    .intel-title {
        font-size: 1.8rem;
    }

    .intel-file-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .intel-file-status {
        align-self: flex-end;
    }
}

/* ============================================================ */
/* ==          CALL TO ACTION HERO SECTION                   == */
/* ============================================================ */
.call-section {
    position: relative;
    width: 100%;
    min-height: 600px;
    background-color: var(--bg-body);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 60px 0;
}

.call-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 255, 136, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
}

.call-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    z-index: 1;
    padding: 0 20px;
    width: 100%;
}

.call-content {
    flex: 1;
}

.call-status-badge {
    font-family: 'Share Tech Mono', monospace;
    color: #ff3333;
    border: 1px solid rgba(255, 51, 51, 0.3);
    background: rgba(255, 51, 51, 0.05);
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.call-status-dot {
    width: 8px;
    height: 8px;
    background: #ff3333;
    border-radius: 50%;
    animation: callBlink 1s infinite;
}

@keyframes callBlink {
    50% {
        opacity: 0;
    }
}

.call-title {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.call-glitch {
    color: var(--text-dark);
    position: relative;
}

.call-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 550px;
}

.call-actions {
    display: flex;
    gap: 15px;
}

.call-btn-primary {
    background: var(--color-green);
    color: #000;
    border: none;
    padding: 14px 28px;
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.call-btn-primary:hover {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
    transform: translateY(-2px);
}

.call-btn-secondary {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 14px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.call-btn-secondary:hover {
    border-color: var(--text-dark);
}

.call-visual {
    flex: 0.9;
    display: flex;
    justify-content: center;
}

.call-tx-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
}

.call-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 18px;
    font-family: 'Share Tech Mono', monospace;
}

.call-card-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.call-card-status {
    color: #ff3333;
    font-size: 0.75rem;
    font-weight: bold;
}

.call-card-body {
    font-family: 'Share Tech Mono', monospace;
}

.call-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.call-red-text {
    color: #ff3333;
}

.call-divider {
    height: 1px;
    background: var(--border-color);
    margin: 12px 0;
}

.call-total-row {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-dark);
}

.call-total-val {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.call-payout-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
    margin-top: 5px;
    font-style: italic;
}

.call-override-btn {
    width: 100%;
    margin-top: 20px;
    background: rgba(255, 51, 51, 0.1);
    border: 1px solid #ff3333;
    color: #ff3333;
    padding: 12px;
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 2px;
    border-radius: 4px;
}

.call-override-btn:hover {
    background: #ff3333;
    color: #000;
    box-shadow: 0 0 15px #ff3333;
}

/* Override Active State */
.call-section.active .call-status-badge {
    color: var(--color-green);
    border-color: var(--color-green);
    background: rgba(0, 255, 136, 0.1);
}

.call-section.active .call-status-dot {
    background: var(--color-green);
}

.call-tx-card.override-active {
    border-color: var(--color-green);
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.15);
    transform: scale(1.02);
}

.call-tx-card.override-active .call-card-status {
    color: var(--color-green);
}

.call-tx-card.override-active .call-red-text {
    text-decoration: line-through;
    opacity: 0.5;
    color: var(--text-muted);
}

.call-tx-card.override-active .call-total-val {
    color: var(--color-green);
    text-shadow: 0 0 20px var(--color-green);
}

.call-tx-card.override-active .call-override-btn {
    background: var(--color-green);
    color: #000;
    border-color: var(--color-green);
    pointer-events: none;
}

@media (max-width: 900px) {
    .call-container {
        flex-direction: column;
        text-align: center;
    }

    .call-title {
        font-size: 2rem;
    }

    .call-actions {
        justify-content: center;
    }

    .call-tx-card {
        width: 100%;
    }

    .call-status-badge {
        display: inline-flex;
    }

    .call-desc {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- CHAMELEON (UNIVERSAL COMMERCE) SECTION --- */
.geo-section {
    background-color: var(--bg-body);
    padding: 100px 20px;
    font-family: var(--font-family);
    color: var(--text-dark);
    overflow: hidden;
}

.geo-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HEADER */
.geo-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
}

.geo-badge {
    color: var(--color-green);
    border: 1px solid var(--color-green);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.geo-title {
    font-size: 3rem;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 800;
    line-height: 1.1;
}

.geo-header .highlight {
    color: var(--color-green);
}

.geo-desc {
    color: var(--text-light);
    font-size: 1.2rem;
    line-height: 1.6;
}

/* CHAMELEON WRAPPER */
.chameleon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    perspective: 1000px;
}

/* CARD DESIGN */
.product-card {
    background: var(--bg-card);
    width: 380px;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid var(--border-color);
    position: relative;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s;
    box-shadow: var(--shadow-card);
}

.card-glow {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.2) 0%, transparent 70%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.product-card:hover .card-glow {
    opacity: 1;
}

.product-card:hover {
    border-color: var(--color-green);
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.card-image {
    height: 250px;
    background: var(--bg-light);
    border-radius: 12px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .card-image img {
    transform: scale(1.1);
}

/* DETAILS */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.product-card h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-badge {
    background: rgba(40, 167, 69, 0.1);
    color: var(--color-green);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
}

.prod-desc {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 25px;
    min-height: 3rem;
}

/* PRICE ROW & CRYPTO */
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.crypto-price-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crypto-icon {
    color: var(--text-dark);
    font-size: 1.2rem;
}

.price-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
    font-family: 'Share Tech Mono', monospace;
}

.buy-btn {
    background: var(--color-green);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
}

.buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--color-green);
    color: white;
}

/* CONTROLS */
.geo-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.region-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.region-btn:hover {
    border-color: var(--color-green);
    color: var(--text-dark);
}

.region-btn.active {
    background: var(--color-green);
    color: white;
    border-color: var(--color-green);
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.3);
}

/* GLITCH ANIMATION */
.glitching {
    animation: cardGlitch 0.4s cubic-bezier(.25, .46, .45, .94) both infinite;
}

@keyframes cardGlitch {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px, 2px)
    }

    40% {
        transform: translate(-2px, -2px)
    }

    60% {
        transform: translate(2px, 2px)
    }

    80% {
        transform: translate(2px, -2px)
    }

    100% {
        transform: translate(0)
    }
}

@media (max-width: 600px) {
    .product-card {
        width: 100%;
    }

    .geo-title {
        font-size: 2rem;
    }
}

/* --- PERFORMANCE OPTIMIZATIONS (HARDWARE ACCELERATION) --- */
.product-card,
.core-card,
.feature-card,
.glossary-card,
.comparison-container,
.empire-wrapper,
#globeViz canvas,
#matrix-canvas {
    will-change: transform, opacity;
}

.core-section,
.geo-section,
.empire-section,
.truth-section,
.call-section {
    contain: layout style;
}

/* ================== On-Chain Proof Section ================== */
.proof-section {
    background: #080808;
    padding: 80px 20px;
    font-family: var(--font-family);
    color: #fff;
}

[data-theme="light"] .proof-section {
    background: #f5f5f5;
    color: #1a1a1a;
}

.proof-container {
    max-width: 1000px;
    margin: 0 auto;
}

.proof-header {
    text-align: center;
    margin-bottom: 50px;
}

.proof-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff;
}

[data-theme="light"] .proof-title {
    color: #1a1a1a;
}

.proof-highlight {
    color: #00c6ff;
    text-shadow: 0 0 20px rgba(0, 198, 255, 0.4);
}

[data-theme="light"] .proof-highlight {
    text-shadow: none;
}

.proof-desc {
    color: #888;
    font-family: 'Share Tech Mono', monospace;
}

/* Transaction Table */
.tx-table-wrapper {
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .tx-table-wrapper {
    background: #fff;
    border-color: #ddd;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.tx-header-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
    padding: 15px 20px;
    background: #1a1a1a;
    color: #666;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    border-bottom: 1px solid #333;
}

[data-theme="light"] .tx-header-row {
    background: #f0f0f0;
    color: #666;
    border-color: #ddd;
}

.tx-scroll-container {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.tx-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
    padding: 12px 20px;
    border-bottom: 1px solid #222;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: #ccc;
    animation: txSlideDown 0.5s ease-out;
    transition: background 0.3s;
}

[data-theme="light"] .tx-row {
    color: #333;
    border-color: #eee;
}

.tx-row:hover {
    background: rgba(0, 198, 255, 0.05);
}

.tx-hash {
    color: #00c6ff;
}

.tx-status {
    color: #00ff88;
    font-weight: bold;
}

@keyframes txSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@media (max-width: 700px) {

    .tx-header-row,
    .tx-row {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .tx-header-row span:nth-child(2),
    .tx-header-row span:nth-child(5),
    .tx-row span:nth-child(2),
    .tx-row span:nth-child(5) {
        display: none;
    }

    .proof-title {
        font-size: 1.8rem;
    }
}

/* ================== Smart Contract Visualizer Section ================== */
.logic-section {
    background: #0a0a0a;
    padding: 100px 20px;
    font-family: var(--font-family);
    color: #fff;
}

[data-theme="light"] .logic-section {
    background: #f5f5f5;
    color: #1a1a1a;
}

.logic-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.logic-header {
    margin-bottom: 60px;
}

.badge-code {
    color: #00f3ff;
    border: 1px solid #00f3ff;
    padding: 5px 15px;
    border-radius: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.logic-header h2 {
    font-size: 3rem;
    margin: 20px 0;
    font-weight: 800;
}

[data-theme="light"] .logic-header h2 {
    color: #1a1a1a;
}

.highlight-neon {
    color: #00f3ff;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
}

[data-theme="light"] .highlight-neon {
    text-shadow: none;
}

.logic-header p {
    color: #888;
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
}

/* Circuit Board */
.circuit-board {
    background: #111;
    border: 1px solid #222;
    border-radius: 20px;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .circuit-board {
    background: #fff;
    border-color: #ddd;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

.circuit-board:hover {
    border-color: #333;
}

/* Nodes */
.node {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    width: 180px;
}

.node-icon {
    width: 70px;
    height: 70px;
    background: #000;
    border: 2px solid #444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 15px;
    transition: all 0.3s;
}

[data-theme="light"] .node-icon {
    background: #f0f0f0;
    border-color: #ccc;
}

.node-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ccc;
    margin-bottom: 5px;
}

[data-theme="light"] .node-label {
    color: #333;
}

.node-status {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: #555;
}

/* Contract Node */
.node-contract {
    width: 250px;
}

.node-contract .node-icon {
    border-radius: 10px;
    border-color: #bc13fe;
    color: #bc13fe;
}

.code-snippet {
    background: #000;
    border: 1px solid #333;
    padding: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #0f0;
    text-align: left;
    border-radius: 6px;
    margin-top: 10px;
    opacity: 0.5;
    width: 100%;
}

[data-theme="light"] .code-snippet {
    background: #1a1a1a;
}

/* Connection Lines */
.connection-line {
    flex: 1;
    height: 4px;
    background: #333;
    position: relative;
    margin: 0 20px;
    top: -30px;
}

[data-theme="light"] .connection-line {
    background: #ddd;
}

.packet {
    position: absolute;
    top: -12px;
    left: 0;
    background: #00f3ff;
    color: #000;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 10px;
    opacity: 0;
    box-shadow: 0 0 15px #00f3ff;
}

/* Start Overlay */
.start-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.3s;
}

.run-btn {
    background: #00f3ff;
    border: none;
    padding: 15px 30px;
    font-weight: 800;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.4);
    transition: transform 0.2s;
    color: #000;
}

.run-btn:hover {
    transform: scale(1.1);
}

/* Animation States */
.node.active .node-icon {
    border-color: #00f3ff;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
    color: #fff;
    transform: scale(1.1);
}

.node.active .node-status {
    color: #00f3ff;
    text-shadow: 0 0 10px #00f3ff;
}

.node-contract.active .node-icon {
    border-color: #bc13fe;
    box-shadow: 0 0 30px rgba(188, 19, 254, 0.5);
}

.node-contract.active .code-snippet {
    opacity: 1;
    border-color: #bc13fe;
}

@keyframes contractTravel {
    0% {
        left: 0;
        opacity: 1;
    }

    100% {
        left: 90%;
        opacity: 1;
    }
}

@media (max-width: 800px) {
    .circuit-board {
        flex-direction: column;
        padding: 30px;
        gap: 40px;
    }

    .connection-line {
        width: 4px;
        height: 50px;
        top: 0;
        margin: 0;
    }

    .packet {
        top: 0;
        left: -12px;
    }

    @keyframes contractTravel {
        0% {
            top: 0;
            opacity: 1;
        }

        100% {
            top: 90%;
            opacity: 1;
        }
    }

    .logic-header h2 {
        font-size: 2rem;
    }
}

/* ================== New Pricing Section (SYSTEM UPGRADE) ================== */
.new-pricing-section {
    background-color: #050505;
    padding: 100px 20px;
    font-family: var(--font-family);
    color: #fff;
}

[data-theme="light"] .new-pricing-section {
    background-color: #f5f5f5;
    color: #1a1a1a;
}

.new-pricing-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Pricing Header */
.new-pricing-header {
    text-align: center;
    margin-bottom: 70px;
}

.badge-sys {
    color: #00f3ff;
    border: 1px solid #00f3ff;
    padding: 5px 15px;
    border-radius: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.new-pricing-header h2 {
    font-size: 3rem;
    margin: 25px 0;
    font-weight: 800;
    line-height: 1.1;
}

[data-theme="light"] .new-pricing-header h2 {
    color: #1a1a1a;
}

.highlight-glitch {
    color: #fff;
    text-shadow: 2px 0 #bd00ff, -2px 0 #00f3ff;
}

[data-theme="light"] .highlight-glitch {
    color: #1a1a1a;
}

.new-pricing-header p {
    color: #888;
    font-size: 1.1rem;
}

/* Billing Toggle */
.billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    background: #111;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid #333;
}

[data-theme="light"] .billing-toggle {
    background: #fff;
    border-color: #ddd;
}

.toggle-opt {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.toggle-opt.dimmed {
    color: #555;
    text-decoration: line-through;
}

.toggle-opt.active {
    color: #00ff88;
}

.toggle-switch {
    width: 40px;
    height: 20px;
    background: #00ff88;
    border-radius: 20px;
    position: relative;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: #000;
    border-radius: 50%;
}

/* Pricing Grid */
.new-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    align-items: flex-start;
}

/* Plan Card */
.plan-card {
    background: #0f0f0f;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 40px 30px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    height: 100%;
}

[data-theme="light"] .plan-card {
    background: #fff;
    border-color: #ddd;
}

/* Focus Mode Effect */
.new-pricing-grid:hover .plan-card {
    opacity: 0.4;
    filter: blur(2px);
    transform: scale(0.98);
}

.new-pricing-grid:hover .plan-card:hover {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.05);
    z-index: 2;
    border-color: #00f3ff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Popular Card */
.plan-card.popular {
    border-color: #bd00ff;
    box-shadow: 0 0 30px rgba(189, 0, 255, 0.1);
}

.pop-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #bd00ff;
    color: #fff;
    padding: 5px 15px;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 20px;
    letter-spacing: 1px;
}

/* Enterprise Card */
.plan-card.enterprise {
    background: linear-gradient(180deg, #0f0f0f 0%, #051505 100%);
    border-color: #00ff88;
}

[data-theme="light"] .plan-card.enterprise {
    background: linear-gradient(180deg, #f0fff5 0%, #e0ffe8 100%);
    border-color: #00cc66;
}

/* Plan Header */
.plan-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    color: #888;
    margin-bottom: 15px;
}

.price-box {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.old-price {
    text-decoration: line-through;
    color: #555;
    font-size: 1rem;
}

.current-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
}

[data-theme="light"] .current-price {
    color: #1a1a1a;
}

/* Core Metric (Protocol Fee) */
.core-metric {
    margin: 30px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    text-align: center;
}

[data-theme="light"] .core-metric {
    background: rgba(0, 0, 0, 0.03);
}

.metric-val {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    font-family: 'Share Tech Mono', monospace;
    line-height: 1;
}

.metric-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 2px;
    margin-top: 5px;
    display: block;
}

.metric-red .metric-val {
    color: #ff3333;
    text-shadow: 0 0 15px rgba(255, 51, 51, 0.3);
}

.metric-orange .metric-val {
    color: #ffbd2e;
    text-shadow: 0 0 15px rgba(255, 189, 46, 0.3);
}

.metric-yellow .metric-val {
    color: #f3f315;
    text-shadow: 0 0 15px rgba(243, 243, 21, 0.3);
}

.metric-green .metric-val {
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

/* Feature List */
.feature-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.f-item {
    font-size: 0.9rem;
    color: #aaa;
    border-bottom: 1px dashed #222;
    padding-bottom: 8px;
}

[data-theme="light"] .f-item {
    color: #666;
    border-color: #ddd;
}

.f-item span {
    color: #666;
    margin-right: 5px;
}

.f-item b {
    color: #fff;
}

[data-theme="light"] .f-item b {
    color: #1a1a1a;
}

.highlight-item {
    color: #fff;
}

[data-theme="light"] .highlight-item {
    color: #1a1a1a;
}

.highlight-item span {
    color: #00f3ff;
}

/* Plan Buttons */
.plan-btn {
    width: 100%;
    padding: 15px;
    border-radius: 6px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: block;
    text-align: center;
    text-decoration: none;
}

.btn-outline-new {
    background: transparent;
    border: 1px solid #333;
    color: #fff;
}

[data-theme="light"] .btn-outline-new {
    border-color: #ddd;
    color: #1a1a1a;
}

.btn-outline-new:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.btn-fill-new {
    background: #bd00ff;
    border: none;
    color: #fff;
    box-shadow: 0 0 20px rgba(189, 0, 255, 0.3);
}

.btn-fill-new:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(189, 0, 255, 0.6);
}

.btn-glow-new {
    background: #00ff88;
    border: none;
    color: #000;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.btn-glow-new:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 50px rgba(0, 255, 136, 0.6);
}

@media (max-width: 900px) {
    .new-pricing-grid {
        grid-template-columns: 1fr;
    }

    .new-pricing-grid:hover .plan-card {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .new-pricing-grid:hover .plan-card:hover {
        transform: none;
    }

    .new-pricing-header h2 {
        font-size: 2rem;
    }
}
/* ============================================================ */
/* ==          CLI DEVELOPER SECTION                         == */
/* ============================================================ */
.cli-section {
    background: #050505;
    padding: 100px 20px;
    font-family: 'Inter', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
}

.cli-container {
    max-width: 1100px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 60px;
}

.cli-text { 
    flex: 1; 
}

.badge-dev { 
    color: #bd00ff; 
    border: 1px solid #bd00ff; 
    padding: 5px 15px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-family: 'Share Tech Mono', monospace; 
    letter-spacing: 1px;
}

.cli-text h2 { 
    font-size: 3.5rem; 
    font-weight: 800; 
    margin: 20px 0; 
    line-height: 1; 
}

.highlight-purple { 
    color: #bd00ff; 
    text-shadow: 0 0 30px rgba(189, 0, 255, 0.4); 
}

.cli-text p { 
    color: #888; 
    font-size: 1.1rem; 
    margin-bottom: 30px; 
}

.copy-command {
    background: #111;
    border: 1px solid #333;
    padding: 15px 20px;
    border-radius: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-command:hover { 
    border-color: #bd00ff; 
    box-shadow: 0 0 20px rgba(189,0,255,0.2); 
}

.cmd-symbol { 
    color: #00ff88; 
}

.copy-icon { 
    opacity: 0.5; 
    font-size: 1rem; 
    transition: opacity 0.2s;
}

.copy-command:hover .copy-icon {
    opacity: 1;
}

.terminal-window {
    flex: 1;
    background: #1e1e1e;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    overflow: hidden;
    border: 1px solid #333;
    height: 350px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
}

.term-header {
    background: #252526;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.term-buttons { 
    position: absolute; 
    left: 15px; 
    display: flex; 
    gap: 8px; 
}

.term-btn { 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
}

.term-btn-red { 
    background: #ff5f56; 
}

.term-btn-yellow { 
    background: #ffbd2e; 
}

.term-btn-green { 
    background: #27c93f; 
}

.term-title { 
    color: #888; 
    font-size: 0.8rem; 
}

.term-body {
    padding: 20px;
    color: #ccc;
    height: calc(100% - 40px);
    overflow-y: auto;
}

.term-line { 
    margin-bottom: 5px; 
    display: block; 
}

.term-line-cmd { 
    color: #fff; 
}

.term-line-info { 
    color: #4facfe; 
}

.term-line-success { 
    color: #00ff88; 
}

.term-line-warn { 
    color: #ffbd2e; 
}

.term-line-dim { 
    color: #666; 
}

.term-progress-bar { 
    color: #bd00ff; 
    font-weight: bold; 
}

@media (max-width: 900px) {
    .cli-container { 
        flex-direction: column; 
    }
    .terminal-window { 
        width: 100%; 
    }
    .cli-text h2 {
        font-size: 2.5rem;
    }
}
    /**
 * DOPAMINE HERO SECTION STYLES
 */
    .dopamine-hero {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 80px 8% 60px;
        position: relative;
        background:
            radial-gradient(circle at 10% 20%, rgba(0, 255, 136, 0.05) 0%, transparent 40%),
            radial-gradient(circle at 90% 80%, rgba(0, 198, 255, 0.05) 0%, transparent 40%),
            var(--bg-body);
    }

    .dopamine-hero-bg-grid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
            linear-gradient(var(--border-color) 1px, transparent 1px),
            linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
        background-size: 50px 50px;
        opacity: 0.1;
        z-index: 0;
        pointer-events: none;
    }

    .dopamine-hero-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1400px;
        width: 100%;
        gap: 60px;
        z-index: 2;
    }

    /* Left Column: Text */
    .dopamine-hero-text {
        flex: 1;
        max-width: 600px;
    }

    .dopamine-hero-badge {
        display: inline-block;
        background: rgba(0, 255, 136, 0.1);
        color: #00ff88;
        padding: 8px 16px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 24px;
        border: 1px solid rgba(0, 255, 136, 0.2);
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .dopamine-hero-heading {
        font-family: 'Outfit', sans-serif;
        font-size: 3.5rem;
        line-height: 1.1;
        font-weight: 700;
        margin-bottom: 24px;
        background: linear-gradient(to right, #fff, #a5a5a5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .dopamine-highlight {
        background: linear-gradient(to right, #00ff88, #00c6ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Dopamine CTA Buttons */
    .dopamine-btn {
        padding: 16px 32px;
        border-radius: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .dopamine-btn-primary {
        background: #00ff88;
        color: #000;
    }

    .dopamine-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 255, 136, 0.3);
    }

    .dopamine-btn-outline {
        background: transparent;
        color: #00ff88;
        border: 2px solid #00ff88;
    }

    .dopamine-btn-outline:hover {
        background: rgba(0, 255, 136, 0.1);
        transform: translateY(-2px);
    }

    .dopamine-hero-subtitle {
        font-size: 1.25rem;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 40px;
        max-width: 500px;
    }

    .dopamine-cta-group {
        display: flex;
        gap: 20px;
    }

    /* Right Column: Phone */
    .dopamine-hero-visual {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @keyframes floatPhone {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    .phone-mockup {
        width: 340px;
        height: 680px;
        background: #000;
        border-radius: 50px;
        border: 10px solid #1a1a1a;
        position: relative;
        box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.8), 0 0 50px rgba(0, 255, 136, 0.15);
        overflow: hidden;
        animation: floatPhone 6s ease-in-out infinite;
    }

    .phone-notch {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 30px;
        background: #000;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
        z-index: 10;
    }

    .phone-screen {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
        padding-top: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .screen-time {
        font-size: 56px;
        font-weight: 600;
        color: white;
    }

    .screen-date {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 30px;
    }

    .balance-wrapper {
        text-align: center;
        margin-bottom: 20px;
    }

    .balance-label {
        font-size: 11px;
        text-transform: uppercase;
        color: #00ff88;
        letter-spacing: 1px;
    }

    .total-balance {
        font-size: 36px;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
    }

    /* Additional Token Icons */
    .icon-usdc {
        background: #2775ca;
    }

    .icon-sol {
        background: linear-gradient(135deg, #9945FF, #14F195);
    }

    .icon-avax {
        background: #e84142;
    }

    .icon-arb {
        background: #28a0f0;
    }

    .icon-op {
        background: #ff0420;
    }

    .icon-dai {
        background: #f5ac37;
    }

    .icon-wbtc {
        background: #f09242;
    }

    .icon-pol {
        background: #8247e5;
    }

    .notification-list {
        width: 100%;
        flex-grow: 1;
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .notif-card {
        background: rgba(30, 30, 30, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 12px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: white;
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
        animation: slideInNotif 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        transition: transform 0.2s;
    }

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

    .notif-card:hover {
        transform: scale(1.02);
        background: rgba(50, 50, 50, 0.9);
    }

    .app-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .icon-usdt {
        background: #26a17b;
    }

    .icon-eth {
        background: #627eea;
    }

    .icon-bnb {
        background: #f3ba2f;
    }

    .notif-content {
        flex-grow: 1;
    }

    .app-header {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .notif-msg {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
    }

    .hl-green {
        color: #00ff88;
    }

    .simulate-action {
        position: absolute;
        bottom: 30px;
        width: 90%;
        z-index: 20;
    }

    .sim-btn {
        width: 100%;
        padding: 18px;
        background: linear-gradient(90deg, #00ff88, #00c6ff);
        border: none;
        border-radius: 16px;
        color: #000;
        font-weight: 800;
        font-size: 16px;
        cursor: pointer;
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: 0.1s;
    }

    .sim-btn:active {
        transform: scale(0.96);
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .dopamine-hero {
            flex-direction: column;
            text-align: center;
            padding-top: 120px;
            padding-bottom: 60px;
        }

        .dopamine-hero-wrapper {
            flex-direction: column;
            gap: 40px;
        }

        .dopamine-hero-text {
            margin-bottom: 40px;
            align-items: center;
            display: flex;
            flex-direction: column;
        }

        .dopamine-hero-heading {
            font-size: 2.5rem;
        }

        .dopamine-hero-subtitle {
            text-align: center;
        }

        .dopamine-cta-group {
            justify-content: center;
        }

        .phone-mockup {
            width: 300px;
            height: 600px;
        }
    }

    @media (max-width: 480px) {
        .dopamine-hero-heading {
            font-size: 2rem;
        }

        .dopamine-cta-group {
            flex-direction: column;
            gap: 12px;
        }

        .phone-mockup {
            width: 280px;
            height: 560px;
        }
    }
    /* Accepted Tokens Marquee */
    .accepted-tokens {
        background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-body) 100%);
        padding: 30px 0 40px;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        overflow: hidden;
        position: relative;
    }

    .tokens-header {
        text-align: center;
        margin-bottom: 25px;
    }

    .tokens-label {
        display: inline-block;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: var(--text-muted);
        position: relative;
        padding-bottom: 10px;
    }

    .tokens-label::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color) 0%, var(--info) 100%);
        border-radius: 2px;
    }

    .tokens-label i {
        margin-right: 8px;
        color: var(--primary-color);
    }

    .tokens-marquee-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .tokens-marquee-wrapper::before,
    .tokens-marquee-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100px;
        z-index: 2;
        pointer-events: none;
    }

    .tokens-marquee-wrapper::before {
        left: 0;
        background: linear-gradient(90deg, var(--bg-card) 0%, transparent 100%);
    }

    .tokens-marquee-wrapper::after {
        right: 0;
        background: linear-gradient(270deg, var(--bg-card) 0%, transparent 100%);
    }

    .tokens-marquee {
        display: flex;
        gap: 50px;
        animation: marquee 30s linear infinite;
        width: max-content;
    }

    .tokens-marquee:hover {
        animation-play-state: paused;
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .token-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-width: 80px;
        transition: transform 0.3s ease;
    }

    .token-item:hover {
        transform: scale(1.15);
    }

    .token-item img {
        width: 48px;
        height: 48px;
        object-fit: contain;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    }

    .token-item span {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    @media (max-width: 768px) {
        .tokens-marquee {
            gap: 35px;
            animation-duration: 20s;
        }

        .token-item img {
            width: 40px;
            height: 40px;
        }

        .tokens-marquee-wrapper::before,
        .tokens-marquee-wrapper::after {
            width: 50px;
        }
    }
    /* --- MATRIX MODAL CSS STYLES --- */
    .matrix-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        font-family: 'Courier New', Courier, monospace;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.8s ease;
        overflow: hidden;
    }

    .matrix-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    #matrix-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0.4;
        pointer-events: none;
    }

    .matrix-container {
        text-align: center;
        color: #fff;
        max-width: 900px;
        padding: 40px;
        position: relative;
        z-index: 10;
        animation: fadeInZoom 1s ease forwards;
        background: rgba(0, 0, 0, 0.6);
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
        border: 1px solid rgba(0, 255, 136, 0.15);
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.9);
    }

    @keyframes fadeInZoom {
        from {
            transform: scale(0.9);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .matrix-title {
        font-size: 3rem;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 4px;
        color: #fff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(0, 255, 136, 0.5);
    }

    .matrix-subtitle {
        font-size: 1.2rem;
        color: #aaa;
        margin-bottom: 50px;
    }

    .pill-wrapper {
        display: flex;
        justify-content: center;
        gap: 60px;
        flex-wrap: wrap;
    }

    .pill-option {
        width: 300px;
        cursor: pointer;
        padding: 20px;
        border-radius: 15px;
        transition: transform 0.3s, background 0.3s;
        border: 1px solid transparent;
    }

    .pill-option:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .pill {
        width: 140px;
        height: 50px;
        border-radius: 50px;
        margin: 0 auto 25px auto;
        position: relative;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 -5px 15px rgba(0, 0, 0, 0.3);
        transition: box-shadow 0.3s;
    }

    .pill-option:hover .pill {
        box-shadow: 0 0 30px currentColor;
    }

    .blue-pill {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: #00f2fe;
    }

    .red-pill {
        background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
        color: #ff0844;
    }

    .reflection {
        position: absolute;
        top: 5px;
        left: 10px;
        width: 80%;
        height: 40%;
        border-radius: 50px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
        opacity: 0.6;
    }

    .pill-option h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
        text-transform: uppercase;
        color: #fff;
    }

    .pill-desc {
        font-size: 0.95rem;
        line-height: 1.5;
        color: #ccc;
    }

    .pill-desc .faded {
        color: #666;
        font-size: 0.85rem;
        display: block;
        margin-top: 5px;
    }

    .pill-desc .highlight {
        color: #00ff88;
        font-weight: bold;
        font-size: 0.85rem;
        display: block;
        margin-top: 5px;
        text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
    }

    @media (max-width: 768px) {
        .pill-wrapper {
            gap: 30px;
        }

        .matrix-title {
            font-size: 2rem;
        }

        .pill-option {
            width: 100%;
            margin-bottom: 20px;
        }

        .matrix-overlay {
            overflow-y: auto;
        }
    }

/* ============================================================ */
/* ==          CLI SECTION - LIGHT MODE OVERRIDES            == */
/* ============================================================ */
[data-theme="light"] .cli-section {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .cli-text h2 {
    color: var(--text-main);
}

[data-theme="light"] .cli-text p {
    color: var(--text-muted);
}

[data-theme="light"] .copy-command {
    background: #f5f5f5;
    border-color: #ddd;
    color: #1a1a1a;
}

[data-theme="light"] .terminal-window {
    background: #f8f9fa;
    border-color: #ddd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

[data-theme="light"] .term-header {
    background: #e9ecef;
}

[data-theme="light"] .term-body {
    background: #f8f9fa;
    color: #333;
}

[data-theme="light"] .term-line-cmd {
    color: #1a1a1a;
}

[data-theme="light"] .term-line-dim {
    color: #888;
}

/* ============================================================ */
/* ==          UPDATES / CHANGELOG PAGE STYLES              == */
/* ============================================================ */
.updates-hero {
    text-align: center;
    padding: 80px 20px 60px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-body) 100%);
    border-bottom: 1px solid var(--border-color);
}

.updates-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 15px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--info) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.updates-hero p {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.updates-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 20px;
}

.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50px;
    width: 3px;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--info) 100%);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
    padding-left: 90px;
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-marker {
    position: absolute;
    left: 38px;
    top: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 3px solid var(--primary-color);
    z-index: 1;
    transition: transform 0.2s, box-shadow 0.2s;
}

.timeline-item:hover .timeline-marker {
    transform: scale(1.2);
}

.timeline-marker.major { border-color: #dc3545; box-shadow: 0 0 15px rgba(220, 53, 69, 0.4); }
.timeline-marker.minor { border-color: #ffc107; box-shadow: 0 0 12px rgba(255, 193, 7, 0.3); }
.timeline-marker.patch { border-color: #28a745; box-shadow: 0 0 12px rgba(40, 167, 69, 0.3); }

.timeline-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.timeline-content:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.timeline-content::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent var(--border-color) transparent transparent;
}

.timeline-content::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent var(--bg-card) transparent transparent;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.timeline-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.version-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--bg-body) 0%, var(--bg-card) 100%);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

.version-tag i { margin-right: 6px; color: var(--primary-color); }
.release-date { display: inline-flex; align-items: center; font-size: 0.85rem; color: var(--text-muted); }
.release-date i { margin-right: 6px; }

.type-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    color: #fff;
}

.type-badge.major { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); }
.type-badge.minor { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%); color: #212529; }
.type-badge.patch { background: linear-gradient(135deg, #28a745 0%, #218838 100%); }

.timeline-title { font-size: 1.3rem; font-weight: 600; margin: 0 0 12px 0; color: var(--text-dark); }
.timeline-description { font-size: 0.95rem; color: var(--text-light); line-height: 1.7; margin: 0; }

.updates-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 30px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 40px;
}

.stat-item { text-align: center; }
.stat-number { font-size: 2rem; font-weight: 700; color: var(--primary-color); }
.stat-label { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

@media (max-width: 768px) {
    .updates-hero h1 { font-size: 2rem; }
    .timeline::before { left: 20px; }
    .timeline-item { padding-left: 55px; }
    .timeline-marker { left: 8px; width: 20px; height: 20px; }
    .timeline-header { flex-direction: column; align-items: flex-start; }
    .timeline-header-left { flex-direction: column; align-items: flex-start; gap: 8px; }
    .updates-stats { flex-direction: column; gap: 20px; }
}

/* --- Updates Page Light Mode Overrides --- */
[data-theme="light"] .updates-hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

[data-theme="light"] .timeline-content {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .timeline-content:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .version-tag {
    background: #f1f3f5;
    color: #495057;
}

[data-theme="light"] .timeline-title {
    color: #212529;
}

[data-theme="light"] .timeline-description {
    color: #4b5563;
}