*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { overflow-x: hidden; max-width: 100%; }

/* ═══════════════════════════════════════════
   UNIFIED TYPE SCALE (all pages, all screens)
   ═══════════════════════════════════════════ */
:root {
    --fs-hero: clamp(2.4rem, 5vw, 4rem);
    --fs-section: clamp(2rem, 4vw, 2.75rem);
    --fs-section-sub: 1.0625rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1.125rem;
    --fs-body-lg: 1.0625rem;
    --fs-body: 0.9375rem;
    --fs-body-sm: 0.875rem;
    --fs-caption: 0.8125rem;
    --fs-small: 0.75rem;
    --fs-tiny: 0.65rem;
    --fs-micro: 0.55rem;
    --fs-stat: 2rem;
    --fs-stat-sm: 1.5rem;
}

/* ═══════════════════════════════════════════
   frontend.css — AddNeo Marketing/Landing Pages
   ═══════════════════════════════════════════ */

/* ── Hero Base ── */
.page-hero { position: relative; overflow: hidden; }
.hero-inner { position: relative; z-index: 1; }
.hero-center { text-align: center; margin-bottom: 40px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 18px; border-radius: 100px;
    font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 22px;
}
.hero-badge-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.hero-title {
    font-size: var(--fs-hero); color: #fff;
    line-height: 1.05; margin-bottom: 12px;
}
.hero-gradient-text {
    background: linear-gradient(135deg, #38EF7D, #64B4FF);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-meta {
    font-size: var(--fs-body); color: rgba(255,255,255,0.55);
    max-width: 500px; margin: 0 auto;
}

/* ── Hero Variants ── */
.hero-terms {
    background: linear-gradient(135deg, #0D2818 0%, #1A3A2A 50%, #0f2e1e 100%);
    padding: 140px 0 80px;
}
.hero-refund {
    background: linear-gradient(135deg, #1a0a0a 0%, #2e1414 50%, #1a0a0a 100%);
    padding: 140px 0 80px;
}
.hero-privacy {
    background: linear-gradient(135deg, #0a1a2e 0%, #0f2844 50%, #0a1a2e 100%);
    padding: 140px 0 80px;
}
.hero-cookies {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 140px 0 80px;
}

/* ── Content Sections ── */
.content-section { padding-top: 40px; }
.content-narrow { max-width: 800px; margin: 0 auto; }

/* ── Hero pseudo overlays ── */
.hero-terms::before, .hero-refund::before,
.hero-privacy::before, .hero-cookies::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
}
.hero-terms::before {
    background:
        radial-gradient(ellipse 70% 50% at 30% 60%, rgba(0,176,80,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 70% 30%, rgba(100,180,255,0.04) 0%, transparent 50%);
}
.hero-refund::before {
    background:
        radial-gradient(ellipse 60% 50% at 30% 50%, rgba(229,57,53,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 70% 30%, rgba(255,183,77,0.04) 0%, transparent 50%);
}
.hero-privacy::before {
    background:
        radial-gradient(ellipse 60% 50% at 20% 40%, rgba(100,180,255,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 80% 70%, rgba(0,176,80,0.04) 0%, transparent 50%);
}
.hero-cookies::before {
    background:
        radial-gradient(ellipse 60% 50% at 50% 30%, rgba(217,165,60,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 20% 70%, rgba(100,180,255,0.04) 0%, transparent 50%);
}

/* ── Hero Badge Variants ── */
.badge-terms { background: rgba(0,176,80,0.08); color: var(--accent); border: 1px solid rgba(0,176,80,0.1); }
.badge-terms .hero-badge-dot { background: var(--accent); }
.badge-refund { background: rgba(229,57,53,0.08); color: #E53935; border: 1px solid rgba(229,57,53,0.1); }
.badge-refund .hero-badge-dot { background: #E53935; }
.badge-privacy { background: rgba(100,180,255,0.08); color: #64B4FF; border: 1px solid rgba(100,180,255,0.1); }
.badge-privacy .hero-badge-dot { background: #64B4FF; }
.badge-cookies { background: rgba(217,165,60,0.08); color: #D9A53C; border: 1px solid rgba(217,165,60,0.1); }
.badge-cookies .hero-badge-dot { background: #D9A53C; }

/* ── Gradient text variants ── */
.grad-green-blue { background: linear-gradient(135deg, #38EF7D, #64B4FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad-red-amber { background: linear-gradient(135deg, #E53935, #FFB74D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad-blue-green { background: linear-gradient(135deg, #64B4FF, #38EF7D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad-gold-blue { background: linear-gradient(135deg, #D9A53C, #64B4FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── Info Card (icon left + text) ── */
.info-card {
    border-radius: var(--radius-md); border: 1px solid var(--border-light);
    background: var(--card-bg); padding: 28px 32px;
    display: flex; gap: 20px; align-items: flex-start;
    transition: all 0.3s; position: relative;
}
.info-card:hover { border-color: rgba(0,176,80,0.1); }
.info-card-icon {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.info-card-icon svg { width: 20px; height: 20px; }
.info-card h3 { font-size: var(--fs-body); font-weight: 600; margin: 0 0 4px; }
.info-card p { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: 1.7; margin: 0; }

/* ── Grid Card (icon top + centered text) ── */
.grid-card {
    border-radius: var(--radius-md); border: 1px solid var(--border-light);
    background: var(--card-bg); padding: 32px 28px; text-align: center;
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    position: relative; overflow: hidden;
}
.grid-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.grid-card-icon {
    width: 52px; height: 52px; margin: 0 auto 14px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s;
}
.grid-card-icon svg { width: 24px; height: 24px; }
.grid-card:hover .grid-card-icon { transform: scale(1.1) rotate(-4deg); }
.grid-card h3 { font-size: var(--fs-body); font-weight: 600; margin: 0 0 6px; }
.grid-card p { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: 1.7; margin: 0; }
.grid-card-full { grid-column: 1 / -1; }

/* ── Timeline ── */
.timeline { position: relative; padding-left: 36px; }
.timeline::before {
    content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), rgba(229,57,53,0.2));
    border-radius: 2px;
}
.timeline-step { position: relative; padding: 0 0 32px 24px; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute; left: -36px; top: 4px;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; color: #fff; z-index: 1;
}
.timeline-step h3 { font-size: var(--fs-body); font-weight: 600; margin: 0 0 4px; }
.timeline-step p { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.7; margin: 0; }

/* ── Section heading with label ── */
.section-head-label {
    font-size: var(--fs-body-sm); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-secondary);
    margin-bottom: 16px; padding-left: 36px;
}

/* ── Contact / Info item ── */
.contact-item { display: flex; align-items: flex-start; gap: 16px; }
.contact-icon {
    width: 44px; height: 44px; border-radius: 14px;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-icon svg { width: 20px; height: 20px; stroke: var(--accent); }
.contact-label { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.contact-value { color: #fff; font-weight: 500; }
.contact-list { display: flex; flex-direction: column; gap: 24px; }

/* ── Contact form ── */
.form-card { padding: 40px 36px; margin-top: -80px; position: relative; z-index: 2; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-group-lg { margin-bottom: 24px; }
.form-label { font-size: var(--fs-body-sm); font-weight: 600; display: block; margin-bottom: 6px; }
.form-input {
    width: 100%; padding: 14px 18px;
    border: 1.5px solid var(--border-color); border-radius: 14px;
    font-family: var(--font-body); font-size: var(--fs-body-sm);
    outline: none; transition: var(--transition); box-sizing: border-box;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.form-select { width: 100%; padding: 14px 18px; border: 1.5px solid var(--border-color); border-radius: 14px; font-family: var(--font-body); font-size: var(--fs-body-sm); outline: none; transition: var(--transition); box-sizing: border-box; background: #fff; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.form-textarea { width: 100%; padding: 14px 18px; border: 1.5px solid var(--border-color); border-radius: 14px; font-family: var(--font-body); font-size: var(--fs-body-sm); outline: none; transition: var(--transition); box-sizing: border-box; resize: vertical; min-height: 140px; }
.form-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.form-btn-full { width: 100%; justify-content: center; padding: 16px; font-size: var(--fs-body); }

/* ── CTA card ── */
.cta-card {
    text-align: center; padding: 56px 48px;
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, #0D2818, #1A3A2A);
    position: relative; overflow: hidden;
}
.cta-card-inner { position: relative; z-index: 1; }
.cta-title { font-size: clamp(1.25rem,2vw,1.75rem); color: #fff; margin-bottom: 10px; }
.cta-text { color: rgba(255,255,255,0.55); font-size: var(--fs-body); max-width: 400px; margin: 0 auto 24px; line-height: 1.7; }

/* ── Responsive helpers ── */
.page-policy-responsive .info-card { margin-bottom: 32px; }
.page-policy-responsive .refund-grid { margin-bottom: 28px; }
.page-policy-responsive .content-section { margin-bottom: 100px; }

/* ── Orphan class fixes ── */

/* eco-pillars-inner: wrapper for pillars & roadmap content */
.eco-pillars-inner { position: relative; z-index: 1; }

/* spotlight-badge: featured product pill in marketplace spotlight */
.spotlight-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: 999px;
    background: rgba(0,176,80,0.12); border: 1px solid rgba(0,176,80,0.2);
    font-size: var(--fs-micro); font-weight: 600; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 16px; backdrop-filter: blur(8px);
}
.spotlight-badge .pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); display: inline-block;
    animation: pulse-dot 1.8s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(0,176,80,0.5);
}

/* quick-filters: filter-pill container in stations hero */
.quick-filters {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}

/* tk-earn-header-tall: taller variant for earn card with badge */
.tk-earn-header-tall { padding-top: 36px; margin-bottom: 10px; }

/* tk-tok-section: tokenomics section wrapper */
.tk-tok-section { position: relative; overflow: hidden; }

/* accordion-item: vertical spacing between accordion cards */
.accordion-item { margin-bottom: 12px; }
.accordion-item:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .info-card { flex-direction: column; gap: 12px; padding: 20px; }
    .grid-card { padding: 24px 20px; }
    .cookie-grid .grid-card-full { padding: 0; }
    .form-card { padding: 24px 20px; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .cta-card { padding: 40px 24px; }
    .contact-item { gap: 12px; }
    .hero-terms, .hero-refund, .hero-privacy, .hero-cookies { padding: 100px 0 60px; }
    .faq-hero { padding: 100px 0 60px; }
    .contact-hero { padding: 100px 0 60px; }
    .grid-2-fixed { grid-template-columns: 1fr; gap: 24px; }
    .contact-img-card { min-height: 250px; }
    .form-card { margin-top: -40px; }
}

/* ── 2-col fixed grid ── */
.grid-2-fixed { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* ── Faq/Privacy accordion shared ── */
.accordion-card { border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--card-bg); overflow: hidden; }
.accordion-trigger {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 18px 24px; background: none; border: none; cursor: pointer;
    font-family: var(--font-body); text-align: left;
    color: var(--text-primary); min-height: auto;
}
.accordion-trigger:hover { background: var(--accent-subtle); }
.accordion-icon {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-body);
}
.accordion-trigger h3 { font-size: var(--fs-body); font-weight: 600; margin: 0; flex: 1; }
.accordion-arrow {
    width: 16px; height: 16px; fill: none; stroke: var(--text-tertiary); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.3s; flex-shrink: 0;
}
.accordion-card.open .accordion-arrow { transform: rotate(180deg); }
.accordion-panel {
    padding: 0 24px 0 74px;
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.accordion-card.open .accordion-panel {
    max-height: 300px; padding: 0 24px 20px 74px;
}
.accordion-panel p { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: 1.8; margin: 0; }
@media (max-width: 600px) {
    .accordion-trigger { padding: 14px 18px; }
    .accordion-panel { padding: 0 18px 0 18px !important; }
    .accordion-card.open .accordion-panel { padding: 0 18px 16px 18px !important; }
    .accordion-icon { display: none; }
    .accordion-item { margin-bottom: 8px; }
}

/* ── Terms page ── */
.terms-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 800px; margin: 0 auto; }
.term-card {
    background: var(--card-bg); border-radius: var(--radius-md);
    border: 1px solid var(--border-light); padding: 24px 28px;
    display: flex; gap: 20px; align-items: flex-start;
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    position: relative;
}
.term-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); border-color: rgba(0,176,80,0.1); }
.term-card::before {
    content: ''; position: absolute; left: -1px; top: 20%; height: 60%; width: 3px;
    background: var(--accent); border-radius: 3px; opacity: 0;
    transition: opacity 0.3s;
}
.term-card:hover::before { opacity: 1; }
.term-num {
    width: 40px; height: 40px; min-width: 40px; border-radius: 12px;
    background: var(--accent-subtle); border: 1px solid rgba(0,176,80,0.08);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: var(--fs-body-sm); font-weight: 700; color: var(--accent);
}
.term-card h3 { font-size: var(--fs-body); font-weight: 600; margin: 0 0 4px; color: var(--text-primary); }
.term-card p { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: 1.7; margin: 0; }
@media (max-width: 600px) { .term-card { flex-direction: column; gap: 12px; padding: 20px; } }

/* ── Refund page ── */
.refund-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.refund-mini {
    border-radius: var(--radius-md); border: 1px solid var(--border-light);
    background: var(--card-bg); padding: 20px 24px; text-align: center;
}
.refund-mini .rm-icon {
    width: 40px; height: 40px; margin: 0 auto 10px;
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
.refund-mini .rm-icon svg { width: 18px; height: 18px; }
.refund-mini h4 { font-size: var(--fs-body-sm); font-weight: 600; margin: 0 0 4px; }
.refund-mini p { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; }
@media (max-width: 640px) { .refund-grid { grid-template-columns: 1fr; } }

/* ── Cookies page ── */
.cookie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 800px; margin: 0 auto; }
.cookie-full { grid-column: 1 / -1; }
.cookie-section {
    border-radius: var(--radius-md); border: 1px solid var(--border-light);
    background: var(--card-bg); padding: 28px 32px;
    display: flex; gap: 20px; align-items: flex-start;
    transition: all 0.3s;
}
.cookie-section:hover { border-color: rgba(217,165,60,0.1); }
.cookie-section .cs-icon {
    width: 44px; height: 44px; min-width: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.cookie-section .cs-icon svg { width: 20px; height: 20px; }
.cookie-section h3 { font-size: var(--fs-body); font-weight: 600; margin: 0 0 4px; }
.cookie-section p { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: 1.7; margin: 0; }
@media (max-width: 640px) {
    .cookie-grid { grid-template-columns: 1fr; }
    .cookie-section { flex-direction: column; gap: 12px; padding: 20px; }
    .cookie-full { grid-column: auto; }
}

/* ── FAQ page ── */
.faq-hero { padding: 140px 0 60px; position: relative; overflow: hidden; }
.faq-hero h1 { font-size: clamp(2rem,4vw,2.75rem); line-height: 1.05; margin-bottom: 16px; }
.faq-hero .section-subtitle { margin: 0 auto; }
.faq-section { padding-top: 20px; }
.faq-container { max-width: 720px; margin: 0 auto; }
.faq-card { padding: 0; overflow: hidden; }
.faq-icon { width: 20px; height: 20px; }
.faq-cta { margin-bottom: 100px; }

/* ── Contact page ── */
.contact-hero { padding: 140px 0 60px; position: relative; overflow: hidden; }
.contact-hero h1 { font-size: clamp(2rem,4vw,2.75rem); line-height: 1.05; margin-bottom: 16px; }
.contact-hero .section-subtitle { margin: 0 auto; }
.contact-section { padding-top: 0; }
.contact-form-wrap { max-width: 640px; margin: 0 auto; }
.contact-form-title { font-size: var(--fs-h3); margin-bottom: 24px; }
.contact-img-card { position: relative; min-height: 400px; }
.contact-img-card img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.contact-img-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,40,24,0.3), transparent 60%); pointer-events: none; }
.contact-info-section .bento-card-content { padding: 36px; }
.contact-info-section h3 { font-size: var(--fs-h3); color: #fff; margin-bottom: 24px; }

/* ── Shared link style ── */
.page-link { color: var(--accent); font-weight: 600; }

/* ═══════════════════════════════════════════
   PLANS PAGE STYLES
   ═══════════════════════════════════════════ */

/* ── Plans Hero ── */
.plans-hero {
    padding: 140px 0 100px;
    position: relative;
    overflow: hidden;
}
.plans-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
    pointer-events: none;
}
.plans-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,40,24,0.92) 0%, rgba(13,40,24,0.55) 45%, rgba(13,40,24,0.15) 100%);
    pointer-events: none;
}
.plans-hero .container { position: relative; z-index: 1; text-align: center; }
.plans-hero-title {
    font-size: clamp(2rem, 4.5vw, 3.2rem); color: #fff;
    line-height: 1.08; margin-bottom: 18px;
    max-width: 820px; margin-left: auto; margin-right: auto;
}
.plans-hero-subtitle {
    font-size: var(--fs-section-sub); color: rgba(255,255,255,0.55);
    line-height: 1.8; max-width: 680px; margin: 0 auto 36px;
}
.plans-hero-actions {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}

/* ── Plans Glass Buttons ── */
.plans-glass-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 38px; border-radius: 999px;
    font-family: var(--font-body); font-size: 1rem; font-weight: 500;
    border: none; cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative; overflow: hidden;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    text-decoration: none;
}
.plans-glass-btn::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; opacity: 0; transition: opacity 0.4s ease;
}
.plans-glass-btn svg {
    transition: transform 0.3s ease; position: relative; z-index: 1;
    width: 16px; height: 16px;
}
.plans-glass-btn:hover svg { transform: translateX(4px); }
.plans-glass-primary {
    background: linear-gradient(135deg, rgba(0,176,80,0.25), rgba(0,176,80,0.08));
    color: #fff;
    border: 1.5px solid rgba(0,176,80,0.35);
    box-shadow: 0 4px 24px rgba(0,176,80,0.12);
}
.plans-glass-primary::before {
    background: linear-gradient(135deg, rgba(0,176,80,0.35), rgba(0,176,80,0.15));
}
.plans-glass-primary:hover {
    transform: translateY(-3px);
    border-color: rgba(0,176,80,0.55);
    box-shadow: 0 12px 40px rgba(0,176,80,0.25);
}
.plans-glass-primary:hover::before { opacity: 1; }
.plans-glass-primary:active { transform: translateY(-1px) scale(0.98); }
.plans-glass-secondary {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    border: 1.5px solid rgba(255,255,255,0.12);
}
.plans-glass-secondary::before { background: rgba(255,255,255,0.08); }
.plans-glass-secondary:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.plans-glass-secondary:hover::before { opacity: 1; }
.plans-glass-secondary:active { transform: translateY(-1px) scale(0.98); }

/* ── Partner Categories Section ── */
.plans-cats-section { padding-top: 80px; padding-bottom: 80px; position: relative; overflow: hidden; }
.plans-cats-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
}
.plans-cats-heading { text-align: center; margin-bottom: 48px; }
.plans-cats-subtitle { margin: 0 auto; }
.plans-cats-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px;
}
.plans-cat-card {
    position: relative; border-radius: 16px; overflow: hidden;
    transition: all 0.5s cubic-bezier(0.22,1,0.36,1); cursor: default;
}
.plans-cat-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); will-change: transform;
}
.plans-cat-card:hover .plans-cat-bg { transform: scale(1.08); }
.plans-cat-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(165deg, rgba(13,40,24,0.92) 0%, rgba(19,46,28,0.5) 100%);
    pointer-events: none;
}
.plans-cat-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    opacity: 0.85; transition: opacity 0.4s ease;
    border-radius: 16px 16px 0 0; pointer-events: none;
}
.plans-cat-glow {
    position: absolute; top: -20px; right: -20px; width: 140px; height: 140px;
    border-radius: 50%; pointer-events: none; opacity: 0.06; transition: opacity 0.6s ease;
}
.plans-cat-num {
    position: absolute; bottom: -6px; right: -4px;
    font-family: var(--font-heading); font-size: 4.5rem; font-weight: 800;
    line-height: 0.8; pointer-events: none; user-select: none;
}
.plans-cat-body { position: relative; padding: 28px 24px 32px; z-index: 1; }
.plans-cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.plans-cat-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.plans-cat-icon svg { width: 20px; height: 20px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plans-cat-title { font-size: var(--fs-body); color: #fff; margin: 0; letter-spacing: -0.01em; }
.plans-cat-label {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 0.45rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; font-family: var(--font-heading); margin-top: 4px;
}
.plans-cat-desc {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.5); line-height: 1.6;
    margin: 0 0 14px;
}
.plans-cat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.plans-cat-tag {
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.04);
    font-size: var(--fs-micro); color: rgba(255,255,255,0.45);
}
/* Category color variants */
.cat-green .plans-cat-bar { background: linear-gradient(90deg, #00B050, rgba(0,176,80,0.3)); }
.cat-green .plans-cat-glow { background: radial-gradient(circle, rgba(0,176,80,0.08), transparent 60%); }
.cat-green .plans-cat-num { color: rgba(0,176,80,0.04); }
.cat-green .plans-cat-icon { background: rgba(0,176,80,0.1); border: 1px solid rgba(0,176,80,0.08); }
.cat-green .plans-cat-icon svg { stroke: #00B050; }
.cat-green .plans-cat-label { background: rgba(0,176,80,0.12); border: 1px solid rgba(0,176,80,0.08); color: rgba(0,176,80,0.7); }
.cat-lime .plans-cat-bar { background: linear-gradient(90deg, #5DF558, rgba(93,245,88,0.3)); }
.cat-lime .plans-cat-glow { background: radial-gradient(circle, rgba(93,245,88,0.08), transparent 60%); }
.cat-lime .plans-cat-num { color: rgba(93,245,88,0.04); }
.cat-lime .plans-cat-icon { background: rgba(93,245,88,0.1); border: 1px solid rgba(93,245,88,0.08); }
.cat-lime .plans-cat-icon svg { stroke: #5DF558; }
.cat-lime .plans-cat-label { background: rgba(93,245,88,0.12); border: 1px solid rgba(93,245,88,0.08); color: rgba(93,245,88,0.7); }
.cat-amber .plans-cat-bar { background: linear-gradient(90deg, #FFB74D, rgba(255,183,77,0.3)); }
.cat-amber .plans-cat-glow { background: radial-gradient(circle, rgba(255,183,77,0.08), transparent 60%); }
.cat-amber .plans-cat-num { color: rgba(255,183,77,0.04); }
.cat-amber .plans-cat-icon { background: rgba(255,183,77,0.1); border: 1px solid rgba(255,183,77,0.08); }
.cat-amber .plans-cat-icon svg { stroke: #FFB74D; }
.cat-amber .plans-cat-label { background: rgba(255,183,77,0.12); border: 1px solid rgba(255,183,77,0.08); color: rgba(255,183,77,0.7); }
.cat-blue .plans-cat-bar { background: linear-gradient(90deg, #64B4FF, rgba(100,180,255,0.3)); }
.cat-blue .plans-cat-glow { background: radial-gradient(circle, rgba(100,180,255,0.08), transparent 60%); }
.cat-blue .plans-cat-num { color: rgba(100,180,255,0.04); }
.cat-blue .plans-cat-icon { background: rgba(100,180,255,0.1); border: 1px solid rgba(100,180,255,0.08); }
.cat-blue .plans-cat-icon svg { stroke: #64B4FF; }
.cat-blue .plans-cat-label { background: rgba(100,180,255,0.12); border: 1px solid rgba(100,180,255,0.08); color: rgba(100,180,255,0.7); }

/* ── Pricing Section ── */
.plans-price-section { padding-top: 100px; padding-bottom: 100px; position: relative; overflow: hidden; }
.plans-price-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.plans-price-orb {
    position: absolute; border-radius: 50%; pointer-events: none;
}
.plans-price-orb-1 {
    top: -200px; right: -100px; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0,176,80,0.06) 0%, transparent 60%);
    animation: breathe 8s ease-in-out infinite;
}
.plans-price-orb-2 {
    bottom: -150px; left: -150px; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0,176,80,0.04) 0%, transparent 60%);
    animation: breathe 10s ease-in-out infinite 3s;
}
.plans-price-deco-line {
    position: absolute; width: 2px; background: linear-gradient(180deg, transparent, var(--accent), transparent);
}
.plans-price-deco-line-1 { top: 40%; left: 5%; height: 120px; opacity: 0.15; }
.plans-price-deco-line-2 { top: 20%; right: 8%; height: 80px; opacity: 0.1; animation: float 7s ease-in-out infinite; }
.plans-price-dots {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.03;
}
.plans-price-content { position: relative; z-index: 1; }
.plans-price-heading { text-align: center; margin-bottom: 56px; }
.plans-price-subtitle { margin: 0 auto; }
.plans-price-badges {
    margin-top: 20px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.plans-price-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-body-sm); color: var(--text-secondary);
    background: var(--bg-warm); padding: 6px 16px; border-radius: 100px;
    border: 1px solid var(--border-light);
}
.plans-price-badge svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2; }
.plans-price-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
    max-width: 1040px; margin: 0 auto;
}

/* ── Plan Cards ── */
.plan-card {
    padding: 0; display: flex; flex-direction: column; position: relative;
    border-radius: var(--radius-lg); overflow: hidden;
    background: linear-gradient(180deg, #0D2818 0%, #1A3A2A 100%);
    box-shadow: 0 8px 32px rgba(13,40,24,0.2);
    transition: all 0.45s cubic-bezier(0.22,1,0.36,1);
    border: 1px solid rgba(255,255,255,0.04);
}
.plan-card-pro {
    margin-top: -16px; border: 1.5px solid var(--accent); z-index: 2;
    box-shadow: 0 4px 24px rgba(0,176,80,0.15), 0 12px 48px rgba(0,0,0,0.1);
}
.plan-card-shine {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(0,176,80,0.08), transparent 70%);
    opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
.plan-card-pattern {
    position: absolute; inset: 0; opacity: 0.06; pointer-events: none;
}
.plan-card-pattern svg { width: 100%; height: 100%; }
.plan-card-glow {
    position: absolute; bottom: -40px; left: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,176,80,0.08), transparent 60%);
    pointer-events: none;
}
.plan-card-accent {
    position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: linear-gradient(180deg, rgba(93,245,88,0.3), transparent);
    border-radius: 0 0 3px 0; opacity: 0.4;
}
.plan-card-inner { position: relative; z-index: 1; }
.plan-card-header { padding: 60px 32px 0; text-align: center; position: relative; }
.plan-card-header h3 { font-size: var(--fs-h3); margin: 0; color: #fff; }
.plan-card-header-sub { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.35); margin: 4px 0 0; }
.plan-card-price-area { text-align: center; padding: 20px 32px 24px; position: relative; }
.plan-card-price-row { display: flex; align-items: baseline; justify-content: center; gap: 0; }
.plan-card-price-big {
    font-family: var(--font-heading); font-size: 3rem; font-weight: 700;
    color: #fff; letter-spacing: -0.03em;
}
.plan-card-price-period {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.35);
    font-weight: 500; margin-left: 4px;
}
.plan-card-note { margin-top: 6px; }
.plan-card-note-text { font-size: var(--fs-micro); color: var(--accent); font-weight: 600; }
.plan-card-features { padding: 0 32px 28px; flex: 1; position: relative; z-index: 1; }
.plan-card-features-sep { border-top: 1px dashed rgba(255,255,255,0.08); padding-top: 24px; }
.plan-card-feature-list { display: flex; flex-direction: column; gap: 14px; }
.plan-card-feature {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: var(--fs-body-sm); line-height: 1.5; color: rgba(255,255,255,0.7);
}
.plan-card-check {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,176,80,0.15); flex-shrink: 0; margin-top: 1px;
}
.plan-card-check svg { width: 12px; height: 12px; fill: none; stroke: var(--accent); stroke-width: 2.5; }
.plan-card-cta { padding: 0 32px 32px; position: relative; z-index: 1; }
.plan-card-cta .btn {
    width: 100%; justify-content: center; border-radius: 999px;
    font-size: var(--fs-body-sm); padding: 14px 28px;
}
.plan-card-cta .btn svg { width: 14px; height: 14px; }
.plan-card-badge-wrap {
    position: absolute; top: 16px; right: 16px; z-index: 5;
}
.plan-card-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 16px; border-radius: 999px;
    font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; backdrop-filter: blur(4px);
}
.plan-card-badge svg { width: 12px; height: 12px; fill: none; stroke-width: 2.5; }
.plan-card-badge-pop {
    background: rgba(0,176,80,0.15); color: var(--accent);
    border: 1px solid rgba(0,176,80,0.2);
}
.plan-card-badge-pop svg { stroke: var(--accent); }
.plan-card-badge-val {
    background: rgba(255,255,255,0.1); color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
}
.plan-card-badge-val svg { stroke: var(--accent); }

/* ── Features Comparison Table ── */
.plans-table-section { margin-top: 60px; max-width: 960px; margin-left: auto; margin-right: auto; }
.plans-table-header { text-align: center; margin-bottom: 28px; }
.plans-table-header h3 { font-size: var(--fs-h3); font-weight: 600; margin-top: 8px; }
.plans-table-box {
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid var(--border-light);
}
.plans-table-scroll { overflow-x: auto; }
.plans-table {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-body-sm);
}
.plans-table th {
    padding: 18px 24px; text-align: center;
    font-family: var(--font-heading); font-weight: 600;
    background: linear-gradient(135deg, #0D2818, #1A3A2A);
    color: #fff; font-size: var(--fs-body-sm); text-transform: uppercase; letter-spacing: 0.05em;
}
.plans-table th:first-child { text-align: left; }
.plans-table td {
    padding: 14px 24px; border-bottom: 1px solid var(--border-light); font-weight: 500;
}
.plans-table td.center { text-align: center; }
.plans-table .r-white td { background: #fff; transition: background 0.2s; }
.plans-table .r-warm td { background: var(--bg-warm); transition: background 0.2s; }
.plans-yes {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--accent-subtle); color: var(--accent);
    font-weight: 600; padding: 3px 14px; border-radius: 100px; font-size: var(--fs-body-sm);
}
.plans-yes svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; }
.plans-no {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(200,200,200,0.15); color: rgba(0,0,0,0.25);
    font-weight: 600; padding: 3px 14px; border-radius: 100px; font-size: var(--fs-body-sm);
}
.plans-no svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; }

/* ── Business Partner Registration ── */
.plans-bp-section { padding-top: 60px; padding-bottom: 60px; }
.plans-bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.plans-bp-card {
    position: relative; border-radius: var(--radius-xl); overflow: hidden;
    background: linear-gradient(145deg, #0D2818, #1A3A2A);
    padding: 44px; border: 1px solid rgba(0,176,80,0.08);
}
.plans-bp-pattern {
    position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
}
.plans-bp-pattern svg { width: 100%; height: 100%; }
.plans-bp-body { position: relative; z-index: 1; text-align: center; }
.plans-bp-icon {
    width: 72px; height: 72px; border-radius: 20px;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.08);
    margin: 0 auto 20px;
}
.plans-bp-icon svg { width: 32px; height: 32px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plans-bp-title { font-size: var(--fs-h3); color: #fff; margin-bottom: 4px; }
.plans-bp-desc {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 6px;
}
.plans-bp-actions {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px;
}
.plans-bp-actions .btn { padding: 12px 28px; border-radius: 999px; font-size: var(--fs-body-sm); }
.plans-bp-actions .btn svg { width: 16px; height: 16px; }
.plans-bp-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plans-bp-mini {
    border-radius: 16px; padding: 28px 24px; text-align: center;
    background: linear-gradient(145deg, #0D2818, #132E1C);
}
.plans-bp-mini-green { border: 1px solid rgba(0,176,80,0.06); }
.plans-bp-mini-lime { border: 1px solid rgba(93,245,88,0.06); }
.plans-bp-mini-amber { border: 1px solid rgba(255,183,77,0.06); }
.plans-bp-mini-blue { border: 1px solid rgba(100,180,255,0.06); }
.plans-bp-mini-value {
    font-family: var(--font-heading); font-size: var(--fs-stat); font-weight: 700; line-height: 1.1;
}
.plans-bp-mini-label {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.35); margin-top: 4px;
}
.plans-bp-mini-dot {
    display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px;
}
.plans-bp-mini-dot span.dot {
    width: 6px; height: 6px; border-radius: 50%; display: inline-block;
    animation: pulse-dot 2s ease-in-out infinite;
}
.plans-bp-mini-dot span.text {
    font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700;
}

/* ── Why Upgrade Section ── */
.plans-up-section { padding-top: 100px; padding-bottom: 100px; }
.plans-up-section .container { position: relative; z-index: 1; }
.plans-up-heading { text-align: center; margin-bottom: 56px; }
.plans-up-heading .section-title { color: #fff; }
.plans-up-heading .section-subtitle { margin: 0 auto; color: rgba(255,255,255,0.5); }
.plans-up-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
}
.plans-up-card {
    position: relative; border-radius: 16px;
    background: linear-gradient(145deg, #0D2818, #132E1C);
    padding: 32px 28px; overflow: hidden;
    border: 1px solid rgba(0,176,80,0.06);
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.plans-up-card-green { border-color: rgba(0,176,80,0.06); }
.plans-up-card-lime { border-color: rgba(93,245,88,0.06); }
.plans-up-card-amber { border-color: rgba(255,183,77,0.06); }
.plans-up-card-blue { border-color: rgba(100,180,255,0.06); }
.plans-up-card-purple { border-color: rgba(180,130,255,0.06); }
.plans-up-card-cta { display: flex; flex-direction: column; justify-content: center; border-color: rgba(0,176,80,0.1); }
.plans-up-orb {
    position: absolute; top: -30px; right: -30px;
    width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
}
.plans-up-orb-green { background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%); }
.plans-up-orb-lime { background: radial-gradient(circle, rgba(93,245,88,0.06), transparent 70%); }
.plans-up-orb-amber { background: radial-gradient(circle, rgba(255,183,77,0.06), transparent 70%); }
.plans-up-orb-blue { background: radial-gradient(circle, rgba(100,180,255,0.06), transparent 70%); }
.plans-up-orb-purple { background: radial-gradient(circle, rgba(180,130,255,0.06), transparent 70%); }
.plans-up-orb-left {
    position: absolute; top: -30px; left: -30px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,176,80,0.08), transparent 70%);
    pointer-events: none;
}
.plans-up-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; }
.plans-up-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.plans-up-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 1.5; }
.plans-up-icon-green { background: rgba(0,176,80,0.1); }
.plans-up-icon-green svg { stroke: var(--accent); }
.plans-up-icon-lime { background: rgba(93,245,88,0.1); }
.plans-up-icon-lime svg { stroke: #5DF558; }
.plans-up-icon-amber { background: rgba(255,183,77,0.1); }
.plans-up-icon-amber svg { stroke: #FFB74D; }
.plans-up-icon-blue { background: rgba(100,180,255,0.1); }
.plans-up-icon-blue svg { stroke: #64B4FF; }
.plans-up-icon-purple { background: rgba(180,130,255,0.1); }
.plans-up-icon-purple svg { stroke: #B482FF; }
.plans-up-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body); color: #fff; }
.plans-up-sub { font-size: var(--fs-micro); color: rgba(255,255,255,0.3); margin-top: 2px; }
.plans-up-desc {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.5); line-height: 1.7;
    margin-bottom: 16px; position: relative;
}
.plans-up-bar {
    width: 100%; height: 3px; border-radius: 99px;
    background: rgba(255,255,255,0.04); overflow: hidden; position: relative;
}
.plans-up-fill { height: 100%; border-radius: 99px; transition: background 0.5s ease; }
.plans-up-fill-1 { width: 85%; background: linear-gradient(90deg, #00B050, rgba(0,176,80,0.2)); }
.plans-up-fill-2 { width: 78%; background: linear-gradient(90deg, #5DF558, rgba(93,245,88,0.2)); }
.plans-up-fill-3 { width: 70%; background: linear-gradient(90deg, #FFB74D, rgba(255,183,77,0.2)); }
.plans-up-fill-4 { width: 88%; background: linear-gradient(90deg, #64B4FF, rgba(100,180,255,0.2)); }
.plans-up-fill-5 { width: 92%; background: linear-gradient(90deg, #B482FF, rgba(180,130,255,0.2)); }
.plans-up-cta-content { text-align: center; position: relative; }
.plans-up-cta-value {
    font-family: var(--font-heading); font-size: var(--fs-stat); font-weight: 700;
    color: var(--accent); line-height: 1; margin-bottom: 4px;
}
.plans-up-cta-sub {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.35); margin-bottom: 16px;
}
.plans-up-cta-desc {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.5); line-height: 1.7;
    margin-bottom: 18px;
}
.plans-up-cta-btn { font-size: var(--fs-body-sm); padding: 12px 28px; border-radius: 999px; }

/* ── Marketing & Support Section ── */
.plans-mkt-section { padding-top: 80px; padding-bottom: 80px; position: relative; overflow: hidden; }
.plans-mkt-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.plans-mkt-orb {
    position: absolute; border-radius: 50%; pointer-events: none;
}
.plans-mkt-orb-1 { top: -120px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 60%); }
.plans-mkt-orb-2 { bottom: -100px; left: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(93,245,88,0.03), transparent 60%); }
.plans-mkt-heading { text-align: center; margin-bottom: 48px; }
.plans-mkt-heading .section-subtitle { margin: 0 auto; }
.plans-mkt-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 28px;
}
.plans-mkt-card {
    position: relative; border-radius: 16px; overflow: hidden;
    background: linear-gradient(145deg, #0D2818, #132E1C);
    border: 1px solid rgba(0,176,80,0.06);
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.plans-mkt-card-green { border-color: rgba(0,176,80,0.06); }
.plans-mkt-card-lime { border-color: rgba(93,245,88,0.06); }
.plans-mkt-card-amber { border-color: rgba(255,183,77,0.06); }
.plans-mkt-topbar {
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    pointer-events: none;
}
.plans-mkt-orb-inner {
    position: absolute; top: -20px; right: -20px;
    width: 100px; height: 100px; border-radius: 50%; pointer-events: none;
}
.plans-mkt-orb-green { background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 60%); }
.plans-mkt-orb-lime { background: radial-gradient(circle, rgba(93,245,88,0.06), transparent 60%); }
.plans-mkt-orb-amber { background: radial-gradient(circle, rgba(255,183,77,0.06), transparent 60%); }
.plans-mkt-body { position: relative; padding: 32px 28px; }
.plans-mkt-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.plans-mkt-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plans-mkt-icon-green { background: rgba(0,176,80,0.1); border: 1px solid rgba(0,176,80,0.08); }
.plans-mkt-icon-green svg { stroke: var(--accent); }
.plans-mkt-icon-lime { background: rgba(93,245,88,0.1); border: 1px solid rgba(93,245,88,0.08); }
.plans-mkt-icon-lime svg { stroke: #5DF558; }
.plans-mkt-icon-amber { background: rgba(255,183,77,0.1); border: 1px solid rgba(255,183,77,0.08); }
.plans-mkt-icon-amber svg { stroke: #FFB74D; }
.plans-mkt-title { font-size: var(--fs-body); color: #fff; margin-bottom: 6px; }
.plans-mkt-desc {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 14px;
}
.plans-mkt-badge {
    display: inline-block; padding: 3px 12px; border-radius: 999px;
    font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.plans-mkt-badge-green { background: rgba(0,176,80,0.1); border: 1px solid rgba(0,176,80,0.06); color: rgba(0,176,80,0.7); }
.plans-mkt-badge-lime { background: rgba(93,245,88,0.1); border: 1px solid rgba(93,245,88,0.06); color: rgba(93,245,88,0.7); }
.plans-mkt-badge-amber { background: rgba(255,183,77,0.1); border: 1px solid rgba(255,183,77,0.06); color: rgba(255,183,77,0.7); }
.plans-mkt-banner {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: linear-gradient(145deg, #0D2818, #1A3A2A);
    padding: 36px 40px; border: 1px solid rgba(0,176,80,0.08);
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.plans-mkt-banner-pattern {
    position: absolute; inset: 0; opacity: 0.03; pointer-events: none;
}
.plans-mkt-banner-pattern svg { width: 100%; height: 100%; }
.plans-mkt-banner-icon {
    width: 52px; height: 52px; border-radius: 16px;
    background: rgba(0,176,80,0.1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative;
}
.plans-mkt-banner-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plans-mkt-banner-text { flex: 1; min-width: 200px; position: relative; }
.plans-mkt-banner-text h3 { font-size: var(--fs-body); color: #fff; margin-bottom: 4px; }
.plans-mkt-banner-text p {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.5); line-height: 1.7; margin: 0;
}

/* ── Land & Infrastructure Section ── */
.plans-infra-section { padding-top: 80px; padding-bottom: 80px; }
.plans-infra-heading { text-align: center; margin-bottom: 48px; }
.plans-infra-heading .section-subtitle { margin: 0 auto; }
.plans-infra-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.plans-infra-card {
    position: relative; border-radius: 16px; padding: 32px 28px;
    background: linear-gradient(145deg, #0D2818, #132E1C);
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.plans-infra-card-green { border: 1px solid rgba(0,176,80,0.06); }
.plans-infra-card-lime { border: 1px solid rgba(93,245,88,0.06); }
.plans-infra-card-amber { border: 1px solid rgba(255,183,77,0.06); }
.plans-infra-card-blue { border: 1px solid rgba(100,180,255,0.06); }
.plans-infra-card-purple { border: 1px solid rgba(180,130,255,0.06); }
.plans-infra-orb {
    position: absolute; top: -30px; right: -30px;
    width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
}
.plans-infra-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.plans-infra-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 1.5; }
.plans-infra-icon-green { background: rgba(0,176,80,0.1); }
.plans-infra-icon-green svg { stroke: var(--accent); }
.plans-infra-icon-lime { background: rgba(93,245,88,0.1); }
.plans-infra-icon-lime svg { stroke: #5DF558; }
.plans-infra-icon-amber { background: rgba(255,183,77,0.1); }
.plans-infra-icon-amber svg { stroke: #FFB74D; }
.plans-infra-title { font-size: var(--fs-body); color: #fff; margin-bottom: 6px; }
.plans-infra-desc { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.5); line-height: 1.7; margin: 0; }
.plans-infra-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plans-infra-item {
    position: relative; border-radius: 16px; padding: 28px; overflow: hidden;
    background: linear-gradient(145deg, #0D2818, #132E1C);
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.plans-infra-item-head { display: flex; align-items: center; gap: 14px; }
.plans-infra-item-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.plans-infra-item-icon svg { width: 20px; height: 20px; fill: none; stroke-width: 1.5; }
.plans-infra-item-title { font-size: var(--fs-body); color: #fff; margin-bottom: 2px; }
.plans-infra-item-desc {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.45); line-height: 1.6; margin: 0;
}

/* ── Plans Final CTA ── */
.plans-final-section { margin-bottom: 100px; }
.plans-final-card {
    position: relative; border-radius: var(--radius-xl); overflow: hidden;
    padding: 80px 48px; text-align: center;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
}
.plans-final-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,40,24,0.88), rgba(13,40,24,0.7));
}
.plans-final-pattern {
    position: absolute; inset: 0; opacity: 0.06; pointer-events: none;
}
.plans-final-pattern svg { width: 100%; height: 100%; }
.plans-final-bracket {
    position: absolute; width: 40px; height: 40px; pointer-events: none;
}
.plans-final-bracket-tl { top: 20px; left: 20px; border-top: 2px solid rgba(0,176,80,0.3); border-left: 2px solid rgba(0,176,80,0.3); }
.plans-final-bracket-tr { top: 20px; right: 20px; border-top: 2px solid rgba(0,176,80,0.3); border-right: 2px solid rgba(0,176,80,0.3); }
.plans-final-bracket-bl { bottom: 20px; left: 20px; border-bottom: 2px solid rgba(0,176,80,0.3); border-left: 2px solid rgba(0,176,80,0.3); }
.plans-final-bracket-br { bottom: 20px; right: 20px; border-bottom: 2px solid rgba(0,176,80,0.3); border-right: 2px solid rgba(0,176,80,0.3); }
.plans-final-ring {
    position: absolute; border-radius: 50%; pointer-events: none;
    border: 1px solid rgba(0,176,80,0.08);
}
.plans-final-ring-1 { top: 15%; left: 8%; width: 80px; height: 80px; animation: float 8s ease-in-out infinite; }
.plans-final-ring-2 { bottom: 20%; right: 10%; width: 120px; height: 120px; border-color: rgba(0,176,80,0.05); animation: float 10s ease-in-out infinite 2s; }
.plans-final-scanline {
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,176,80,0.3), transparent);
    animation: scan 4s ease-in-out infinite; pointer-events: none;
}
.plans-final-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.plans-final-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 18px; border-radius: 999px;
    background: rgba(0,176,80,0.15); border: 1px solid rgba(0,176,80,0.2);
    margin-bottom: 20px;
}
.plans-final-badge-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #00B050;
    display: inline-block; animation: pulse-dot 2s ease-in-out infinite;
}
.plans-final-badge-text {
    font-size: var(--fs-tiny); color: rgba(255,255,255,0.7); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.plans-final-title {
    font-family: var(--font-heading); font-size: clamp(1.75rem,3vw,2.25rem);
    font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: -0.02em;
}
.plans-final-text {
    color: rgba(255,255,255,0.5); font-size: var(--fs-body); line-height: 1.8;
    margin-bottom: 36px; max-width: 500px; margin-left: auto; margin-right: auto;
}
.plans-final-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.plans-final-actions .btn { border-radius: 999px; padding: 15px 38px; font-size: var(--fs-body); }
@keyframes scan {
    0%, 100% { transform: translateY(0); opacity: 0; }
    50% { transform: translateY(400px); opacity: 1; }
}

/* ── Plans Responsive ── */
@media (max-width: 1024px) {
    .plans-cats-grid { grid-template-columns: 1fr 1fr; }
    .plans-price-grid { grid-template-columns: 1fr 1fr; }
    .plan-card-pro { margin-top: 0; }
    .plans-up-grid { grid-template-columns: 1fr 1fr; }
    .plans-mkt-grid { grid-template-columns: 1fr 1fr; }
    .plans-infra-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .plans-hero { padding: 110px 0 60px; }
    .plans-cats-grid { grid-template-columns: 1fr; }
    .plans-price-grid { grid-template-columns: 1fr; }
    .plan-card-pro { margin-top: 0; }
    .plans-bp-grid { grid-template-columns: 1fr; }
    .plans-up-grid { grid-template-columns: 1fr; }
    .plans-mkt-grid { grid-template-columns: 1fr; }
    .plans-infra-grid-3 { grid-template-columns: 1fr; }
    .plans-infra-grid-2 { grid-template-columns: 1fr; }
    .plans-final-card { padding: 48px 24px; }
    .plans-table th, .plans-table td { padding: 12px 14px; font-size: 0.8rem; }
    .plan-card-header { padding: 48px 24px 0; }
    .plan-card-price-area { padding: 16px 24px 20px; }
    .plan-card-features { padding: 0 24px 24px; }
    .plan-card-cta { padding: 0 24px 24px; }
    .plans-bp-card { padding: 32px 24px; }
    .plans-mkt-banner { padding: 28px 24px; }
}

@media (max-width: 480px) {
    .plans-hero { padding: 40px 0 32px; }
    .plans-hero-title { font-size: 1.5rem; }
    .plans-hero-subtitle { font-size: 0.875rem; }

    .plans-cats-grid { grid-template-columns: 1fr; gap: 16px; }
    .plans-cat-card { padding: 24px 16px; flex-direction: column; text-align: center; }
    .plans-cat-icon { margin: 0 auto 12px; }

    .plans-price-grid { grid-template-columns: 1fr; gap: 20px; }
    .plan-card { padding: 24px 16px; }
    .plan-card-header { padding-bottom: 16px; margin-bottom: 16px; }
    .plan-card-name { font-size: 1.25rem; }
    .plan-price-amount { font-size: 2rem; }
    .plan-price-period { font-size: 0.75rem; }
    .plan-card-features { gap: 10px; }
    .plan-card-cta { margin-top: 20px; }

    .plans-bp-grid { grid-template-columns: 1fr; gap: 16px; }
    .plans-bp-card { padding: 24px 16px; }
    .plans-bp-mini { flex-direction: column; align-items: flex-start; gap: 8px; }

    .plans-up-grid { grid-template-columns: 1fr; gap: 16px; }
    .plans-up-card { padding: 24px 16px; }
    .plans-up-card-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .plans-up-icon { width: 44px; height: 44px; }
    .plans-up-body { padding: 0; }

    .plans-mkt-grid { grid-template-columns: 1fr; gap: 16px; }
    .plans-mkt-card { padding: 24px 16px; }
    .plans-mkt-icon { width: 44px; height: 44px; }
    .plans-mkt-banner { padding: 20px 16px; flex-direction: column; gap: 16px; text-align: center; }
    .plans-mkt-banner-pattern { display: none; }

    .plans-infra-grid-3 { grid-template-columns: 1fr; gap: 16px; }
    .plans-infra-grid-2 { grid-template-columns: 1fr; gap: 16px; }
    .plans-infra-card { padding: 24px 16px; }
    .plans-infra-icon { width: 44px; height: 44px; }
    .plans-infra-item { padding: 20px 16px; }
    .plans-infra-item-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .plans-infra-item-icon { width: 40px; height: 40px; }

    .plans-final-card { padding: 40px 20px; text-align: center; }
    .plans-final-title { font-size: 1.5rem; }
    .plans-final-text { font-size: 0.875rem; }
    .plans-final-actions { flex-direction: column; gap: 12px; }
    .plans-final-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 360px) {
    .plans-hero-title { font-size: 1.25rem; }
    .plans-hero-subtitle { font-size: 0.8rem; }

    .plan-card { padding: 20px 12px; }
    .plan-price-amount { font-size: 1.75rem; }

    .plans-bp-card { padding: 20px 12px; }
    .plans-up-card { padding: 20px 12px; }
    .plans-mkt-card { padding: 20px 12px; }
    .plans-infra-card { padding: 20px 12px; }
    .plans-infra-item { padding: 16px 12px; }

    .plans-final-card { padding: 32px 16px; }
    .plans-final-title { font-size: 1.25rem; }
}


/* ── Plans Inline Style Replacements ── */
.plans-inner-relative { position: relative; z-index: 1; }
.plans-cat-head-text { flex: 1; min-width: 0; }
.plans-bp-mini-value-green { color: var(--accent); }
.plans-bp-mini-value-lime { color: #5DF558; }
.plans-bp-mini-value-amber { color: #FFB74D; font-size: var(--fs-stat); }
.plans-bp-dot-blue .dot { background: #64B4FF; }
.plans-bp-dot-blue .text { color: #64B4FF; }
.plans-mkt-topbar-green { background: linear-gradient(90deg, #00B050, rgba(0,176,80,0.2)); }
.plans-mkt-topbar-lime { background: linear-gradient(90deg, #5DF558, rgba(93,245,88,0.2)); }
.plans-mkt-topbar-amber { background: linear-gradient(90deg, #FFB74D, rgba(255,183,77,0.2)); }
.plans-infra-stroke-blue svg { stroke: #64B4FF; }
.plans-infra-stroke-purple svg { stroke: #B482FF; }


/* ═══════════════════════════════════════════
   MLM PAGE STYLES
   ═══════════════════════════════════════════ */

/* ── MLM Hero ── */
.mlm-hero {
    min-height: 85vh; display: flex; align-items: center;
    position: relative; overflow: hidden; padding: 140px 0 80px;
    background: linear-gradient(135deg, #0D2818 0%, #1A3A2A 50%, #0f2e1e 100%);
}
.mlm-hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,176,80,0.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0,176,80,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 80%, rgba(0,176,80,0.04) 0%, transparent 50%);
    pointer-events: none; z-index: 0;
}
.mlm-hero .grid-lines {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,176,80,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,176,80,0.04) 1px, transparent 1px);
    background-size: 60px 60px; z-index: 0; pointer-events: none;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
}
.mlm-hero .orb {
    position: absolute; border-radius: 50%;
    pointer-events: none; z-index: 0; filter: blur(80px); opacity: 0.25;
}
.mlm-hero .orb-1 {
    width: 500px; height: 500px; background: rgba(0,176,80,0.12);
    top: -100px; right: -100px; animation: orb-float 8s ease-in-out infinite;
}
.mlm-hero .orb-2 {
    width: 350px; height: 350px; background: rgba(0,176,80,0.06);
    bottom: -80px; left: 10%; animation: orb-float 10s ease-in-out infinite reverse;
}
@keyframes orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

.mlm-hero .container { position: relative; z-index: 1; width: 100%; }
.mlm-hero .hero-grid {
    grid-template-columns: 1fr 1fr; align-items: center; gap: 48px;
}
.mlm-hero .hero-content { position: relative; z-index: 1; }
.mlm-hero .hero-title {
    font-size: clamp(2rem, 4vw, 2.75rem); color: #fff;
    line-height: 1.05; margin-bottom: 14px;
}
.mlm-hero .hero-title-accent { opacity: 0.95; }
.mlm-hero .hero-desc {
    font-size: var(--fs-section-sub); color: rgba(255,255,255,0.55);
    line-height: 1.8; max-width: 480px; margin-bottom: 24px;
}
.mlm-hero .hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.mlm-hero .hero-stat-value {
    font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700;
}
.mlm-hero .hero-stat-value-green { color: var(--accent); }
.mlm-hero .hero-stat-value-white { color: #fff; }
.mlm-hero .hero-stat-label {
    font-size: var(--fs-micro); color: rgba(255,255,255,0.35);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.mlm-hero .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mlm-hero .hero-actions .btn { padding: 14px 36px; border-radius: 999px; }
.btn-ghost {
    background: rgba(255,255,255,0.06); color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}

/* ── Network Visualization ── */
.network-viz {
    position: relative; display: flex; align-items: center;
    justify-content: center; min-height: 380px;
}
.network-lines {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}
.nv-node {
    position: absolute; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 600;
    color: #fff; font-size: var(--fs-micro); letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid rgba(0,176,80,0.2);
    background: rgba(13,40,24,0.6);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 20px rgba(0,176,80,0.06);
    animation: node-pulse 3s ease-in-out infinite;
}
.nv-node.center {
    width: 80px; height: 80px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle at 30% 30%, var(--accent), #0D2818);
    border-color: var(--accent);
    box-shadow: 0 0 40px rgba(0,176,80,0.2);
    font-size: 0.75rem; z-index: 2;
    animation: node-pulse-center 3s ease-in-out infinite;
}
.nv-node.l1 { width: 56px; height: 56px; font-size: 0.5rem; }
.nv-node.l1:nth-child(2) { top: 20%; left: 18%; animation-delay: 0.3s; }
.nv-node.l1:nth-child(3) { top: 18%; right: 18%; animation-delay: 0.6s; }
.nv-node.l1:nth-child(4) { bottom: 22%; left: 22%; animation-delay: 0.9s; }
.nv-node.l1:nth-child(5) { bottom: 20%; right: 20%; animation-delay: 1.2s; }
.nv-node.l2 { width: 40px; height: 40px; font-size: 0.4rem; opacity: 0.6; }
.nv-node.l2:nth-child(6) { top: 34%; left: 6%; animation-delay: 0.5s; }
.nv-node.l2:nth-child(7) { top: 32%; right: 6%; animation-delay: 0.8s; }
.nv-node.l2:nth-child(8) { bottom: 36%; left: 8%; animation-delay: 1.1s; }
.nv-node.l2:nth-child(9) { bottom: 34%; right: 8%; animation-delay: 1.4s; }

@keyframes node-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(0,176,80,0.06); } 50% { box-shadow: 0 0 30px rgba(0,176,80,0.12); } }
@keyframes node-pulse-center { 0%, 100% { box-shadow: 0 0 40px rgba(0,176,80,0.2); } 50% { box-shadow: 0 0 60px rgba(0,176,80,0.3); } }

/* ── Live Badge ── */
.live-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 10px; border-radius: 999px;
    background: rgba(0,176,80,0.15); border: 1px solid rgba(0,176,80,0.25);
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
    font-family: var(--font-heading); margin-bottom: 20px;
}
.live-badge .pulse-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); animation: pulse-dot 1.5s infinite;
    box-shadow: 0 0 8px rgba(0,176,80,0.5);
}

/* ── Rank Badge ── */
.rank-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px 3px 6px; border-radius: 999px;
    font-size: 0.55rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; font-family: var(--font-heading);
}
.rank-badge-direct { background: var(--green-light); color: var(--accent); }
.rank-badge-network { background: rgba(13,40,24,0.06); color: var(--green-deep); }

/* ── KPI Glass ── */
.kpi-glass {
    padding: 24px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center; transition: var(--transition);
}
.kpi-glass:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.kpi-glass .value {
    font-family: var(--font-heading); font-size: var(--fs-stat); font-weight: 700;
    color: #fff; line-height: 1.2;
}
.kpi-glass .label {
    font-size: var(--fs-tiny); color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
}

/* ── Progress Ring ── */
.progress-ring {
    position: relative; width: 140px; height: 140px; margin: 0 auto;
}
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring .ring-bg { fill: none; stroke: rgba(255,255,255,0.04); stroke-width: 6; }
.progress-ring .ring-fill {
    fill: none; stroke: var(--accent); stroke-width: 6;
    stroke-linecap: round; stroke-dasharray: 377; stroke-dashoffset: 377;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.22,1,0.36,1);
}
.progress-ring.visible .ring-fill { stroke-dashoffset: var(--target); }
.progress-ring .ring-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.progress-ring .ring-center .num {
    font-family: var(--font-heading); font-size: var(--fs-stat);
    font-weight: 700; color: #fff; line-height: 1;
}
.progress-ring .ring-center .lbl {
    font-size: var(--fs-micro); color: rgba(255,255,255,0.35);
    text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
}

/* ── Tier Cards ── */
.tier-card {
    text-align: center; border-radius: var(--radius-lg);
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
    position: relative; overflow: visible;
    display: flex; flex-direction: column;
    background: var(--card-bg); border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.tier-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,176,80,0.08); }
.tier-card .tc-accent { display: none; }
.tier-card .tc-body {
    padding: 28px 24px 24px; flex: 1; display: flex; flex-direction: column;
    position: relative; z-index: 1;
}
.tier-card .tc-bg {
    position: absolute; inset: 0; pointer-events: none;
    overflow: hidden; border-radius: inherit; z-index: 0;
}
.tier-card .tc-bg svg { width: 100%; height: 100%; opacity: 0.04; }
.tier-card .tc-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
    position: relative;
}
.tier-card .tc-icon::after {
    content: ''; position: absolute; inset: -4px;
    border-radius: 20px; background: inherit;
    opacity: 0.15; filter: blur(6px); z-index: -1; transition: var(--transition);
}
.tier-card:hover .tc-icon::after { opacity: 0.3; filter: blur(10px); }
.tier-card:hover .tc-icon { transform: scale(1.06) translateY(-2px); }
.tier-card:nth-child(1) .tc-icon { background: linear-gradient(135deg, rgba(0,176,80,0.12), rgba(0,224,96,0.05)); }
.tier-card:nth-child(2) .tc-icon { background: linear-gradient(135deg, rgba(13,40,24,0.12), rgba(26,58,42,0.05)); }
.tier-card:nth-child(3) .tc-icon { background: linear-gradient(135deg, rgba(244,180,0,0.12), rgba(255,213,79,0.05)); }
.tier-card .tc-icon svg { width: 26px; height: 26px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tier-card:nth-child(1) .tc-icon svg { stroke: var(--accent); }
.tier-card:nth-child(2) .tc-icon svg { stroke: var(--green-deep); }
.tier-card:nth-child(3) .tc-icon svg { stroke: #F4B400; }
.tier-card .tc-grade {
    font-family: var(--font-heading); font-size: var(--fs-tiny); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px;
}
.tier-card:nth-child(1) .tc-grade { color: var(--accent); }
.tier-card:nth-child(2) .tc-grade { color: var(--green-deep); }
.tier-card:nth-child(3) .tc-grade { color: #F4B400; }
.tier-card .tc-pct {
    font-family: var(--font-heading); font-size: 3.25rem; font-weight: 700;
    line-height: 1; margin-bottom: 0; letter-spacing: -0.03em;
}
.tier-card:nth-child(1) .tc-pct {
    background: linear-gradient(135deg, #00B050, #00E060);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tier-card:nth-child(2) .tc-pct {
    background: linear-gradient(135deg, #0D2818, #1A3A2A);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tier-card:nth-child(3) .tc-pct {
    background: linear-gradient(135deg, #F4B400, #FFD54F);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tier-card .tc-label { font-size: var(--fs-body-sm); color: var(--text-secondary); margin-bottom: 12px; font-weight: 500; }
.tier-card .tc-desc { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; flex: 1; }
.tier-card .tc-stats {
    display: flex; justify-content: center; gap: 20px;
    padding-top: 14px; border-top: 1px solid var(--border-light);
}
.tier-card .tc-stat-item { text-align: center; }
.tier-card .tc-stat-item .val {
    font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body); line-height: 1;
}
.tier-card:nth-child(1) .tc-stat-item .val { color: var(--accent); }
.tier-card:nth-child(2) .tc-stat-item .val { color: var(--green-deep); }
.tier-card:nth-child(3) .tc-stat-item .val { color: #F4B400; }
.tier-card .tc-stat-item .lbl {
    font-size: 0.55rem; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;
}
.tier-card-pro { border: 2px solid var(--accent); }
.tier-card-pro .tc-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #fff; padding: 6px 22px;
    border-radius: 999px; font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; z-index: 5;
    white-space: nowrap; box-shadow: 0 4px 16px rgba(0,176,80,0.25);
}

/* ── Tree Visualization ── */
.tree-viz {
    display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px 0;
}
.tree-viz .tv-row {
    display: flex; justify-content: center; gap: 16px; width: 100%; position: relative;
}
.tree-viz .tv-row::before {
    content: ''; position: absolute; top: -24px; left: 50%;
    width: 2px; height: 24px;
    background: linear-gradient(180deg, var(--accent), transparent);
}
.tree-viz .tv-row:first-child::before { display: none; }
.tree-viz .tv-node {
    padding: 12px 20px; border-radius: var(--radius-sm);
    background: var(--card-bg); border: 1px solid var(--border-color);
    text-align: center; min-width: 100px; transition: var(--transition); position: relative;
}
.tree-viz .tv-node:hover { border-color: var(--accent); transform: translateY(-2px); }
.tree-viz .tv-node .tv-label { font-size: 0.65rem; font-weight: 600; color: var(--text-primary); }
.tree-viz .tv-node .tv-sub { font-size: 0.55rem; color: var(--text-tertiary); margin-top: 2px; }
.tree-viz .tv-node .tv-commission {
    font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
    color: var(--accent); margin-top: 4px;
}
.tree-viz .tv-node.root {
    background: linear-gradient(135deg, var(--green-deep), #1A3A2A);
    border-color: var(--accent);
}
.tree-viz .tv-node.root .tv-label { color: #fff; }
.tree-viz .tv-node.root .tv-sub { color: rgba(255,255,255,0.5); }
.tree-viz .tv-node.root .tv-commission { color: var(--accent); }
.tree-viz .tv-row-gap-lg { gap: 40px; }
.tree-viz .tv-row-gap-md { gap: 24px; }
.tree-viz .tv-row-gap-sm { gap: 16px; }
.tree-viz .tv-node-small { opacity: 0.45; padding: 8px 14px; min-width: 80px; }
.tree-viz .tv-node-small .tv-label { font-size: 0.55rem; }
.tree-viz .tv-node-small .tv-sub { font-size: 0.5rem; }
.tree-viz .tv-node-small .tv-commission { font-size: 0.6rem; }

/* ── Calc Card ── */
.calc-card {
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-sm);
}
.calc-card h3 { font-size: var(--fs-h3); margin-bottom: 20px; font-family: var(--font-heading); }
.calc-card .calc-group { margin-bottom: 20px; }
.calc-card .calc-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.calc-card .calc-label { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.calc-card .calc-value { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body); }
.calc-card input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; background: var(--border-light);
    border-radius: 100px; outline: none;
}
.calc-card input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); cursor: pointer;
    box-shadow: 0 0 20px rgba(0,176,80,0.3); border: 3px solid #fff;
}
.calc-card input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 3px solid #fff;
}
.calc-card .calc-btn { width: 100%; justify-content: center; border-radius: 999px; }

/* ── Activity Items ── */
.activity-item {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 28px; border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: var(--accent-subtle); padding-left: 32px; }
.activity-item .aa {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.7rem; color: #fff; flex-shrink: 0;
}
.activity-item .aa-green { background: linear-gradient(135deg, #00B050, #00E060); }
.activity-item .aa-dark { background: linear-gradient(135deg, #0D2818, #1A3A2A); }
.activity-item .aa-amber { background: linear-gradient(135deg, #F4B400, #FFD54F); }
.activity-item .aa-blue { background: linear-gradient(135deg, #1a73e8, #4FC3F7); }
.activity-item .aa-orange { background: linear-gradient(135deg, #e8711a, #bf6000); }
.activity-item .ai-text { flex: 1; }
.activity-item .ai-name { font-weight: 600; font-size: var(--fs-body-sm); }
.activity-item .ai-meta { font-size: var(--fs-micro); color: var(--text-tertiary); }
.activity-item .ai-amount { font-family: var(--font-heading); font-weight: 700; color: var(--accent); font-size: var(--fs-body); }

/* ── Modal ── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s; padding: 24px;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-card {
    background: #fff; border-radius: 20px;
    padding: 40px 36px 32px; max-width: 400px; width: 100%;
    text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,0.2);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
    position: relative;
}
.modal-overlay.open .modal-card { transform: translateY(0) scale(1); }
.modal-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; font-size: 1.5rem;
    color: var(--text-tertiary); cursor: pointer; line-height: 1;
    min-height: auto; padding: 4px;
}
.modal-close:hover { color: var(--text-primary); }
.modal-icon { font-size: 2.5rem; margin-bottom: 12px; }
.modal-title {
    font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700;
    color: var(--text-primary); margin-bottom: 8px;
}
.modal-text {
    font-size: var(--fs-body-sm); color: var(--text-secondary);
    line-height: 1.7; margin-bottom: 24px;
}
.modal-cta { border-radius: 999px; padding: 12px 32px; font-size: var(--fs-body-sm); }
.modal-cta svg { width: 14px; height: 14px; }

/* ── MLM Dashboard ── */
.mlm-dashboard .container { margin-top: -40px; position: relative; z-index: 2; }
.mlm-dashboard .bento-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.mlm-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.mlm-dash-cell { padding: 28px 24px; text-align: center; border-right: 1px solid var(--border-light); }
.mlm-dash-cell:last-child { border-right: none; }
.mlm-dash-label {
    font-size: var(--fs-micro); color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.mlm-dash-value { font-size: var(--fs-stat); }
.mlm-dash-sub { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.mlm-dash-grade-value {
    font-family: var(--font-heading); font-size: var(--fs-stat); font-weight: 700;
    color: var(--accent); line-height: 1.2;
}

/* ── MLM Metrics Section ── */
.mlm-metrics-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.mlm-metrics-inner { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.mlm-metrics-img {
    flex: 1; min-width: 180px;
}
.mlm-metrics-img img {
    width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-md);
}
.mlm-metrics-content { flex: 1; min-width: 200px; }
.mlm-metrics-title {
    font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 600; margin-bottom: 12px;
}
.mlm-metrics-list { display: flex; flex-direction: column; gap: 10px; }
.mlm-metrics-row {
    display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-body-sm);
}
.mlm-metrics-row-label { color: var(--text-secondary); }
.mlm-metrics-row-value { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.mlm-metrics-rate { font-family: var(--font-heading); font-weight: 700; color: var(--accent); }

/* ── MLM Progress Section ── */
.mlm-progress-title { font-family: var(--font-heading); font-size: var(--fs-body); font-weight: 600; margin-bottom: 16px; }
.mlm-progress-header {
    display: flex; justify-content: space-between; font-size: var(--fs-body-sm); margin-bottom: 6px;
}
.mlm-progress-header-label { color: var(--text-secondary); }
.mlm-progress-header-value { font-weight: 600; color: var(--accent); }
.mlm-progress-bar {
    width: 100%; height: 8px; background: var(--border-light);
    border-radius: 100px; overflow: hidden; margin-bottom: 16px;
}
.mlm-progress-fill {
    width: 0%; height: 100%;
    background: linear-gradient(90deg, var(--accent), #00E060);
    border-radius: 100px; transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
}
.mlm-progress-cards { display: flex; gap: 12px; }
.mlm-progress-card {
    flex: 1; background: var(--border-light);
    border-radius: var(--radius-sm); padding: 14px; text-align: center;
}
.mlm-progress-card-value {
    font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); color: var(--accent);
}
.mlm-progress-card-label { font-size: var(--fs-micro); color: var(--text-secondary); }

/* ── Milestones ── */
.mlm-milestone-section { padding-bottom: 80px; }
.mlm-milestone-heading { text-align: center; margin-bottom: 44px; }
.mlm-milestone-heading .section-subtitle { margin: 0 auto; }
.mlm-milestone-grid { gap: 16px; }
.mlm-milestone-card { text-align: center; padding: 28px 20px; }
.mlm-milestone-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}
.mlm-milestone-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.5; }
.mlm-milestone-icon-bronze { background: linear-gradient(135deg, #CD7F32, #E8B85C); }
.mlm-milestone-icon-silver { background: linear-gradient(135deg, #A0A0A0, #D0D0D0); }
.mlm-milestone-icon-gold { background: linear-gradient(135deg, #F4B400, #FFD54F); }
.mlm-milestone-icon-green { background: linear-gradient(135deg, #00B050, #00E060); }
.mlm-milestone-name {
    font-family: var(--font-heading); font-size: var(--fs-body); font-weight: 700;
}
.mlm-milestone-req { font-size: var(--fs-micro); color: var(--text-tertiary); margin: 4px 0; }
.mlm-milestone-desc { font-size: var(--fs-micro); color: var(--text-secondary); }
.mlm-milestone-card-gold { border: 2px solid #F4B400; }

/* ── MLM Rewards Heading ── */
.mlm-rewards-heading { text-align: center; margin-bottom: 48px; }
.mlm-rewards-heading .section-subtitle { margin: 0 auto; }
.mlm-rewards-grid { gap: 24px; align-items: stretch; }

/* ── MLM Network Tree ── */
.mlm-tree-heading { text-align: center; margin-bottom: 44px; }
.mlm-tree-heading .section-subtitle { margin: 0 auto; }
.mlm-tree-card { padding: 36px 28px; }
.mlm-tree-g1-border { border-color: rgba(0,176,80,0.2); }

/* ── MLM Earnings ── */
.mlm-earnings-heading { text-align: center; margin-bottom: 44px; }
.mlm-earnings-heading .section-subtitle { margin: 0 auto; }
.mlm-earnings-grid { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.mlm-earnings-result-card {
    padding: 28px; text-align: center; border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--green-deep), #1A3A2A);
}
.mlm-earnings-result-label {
    font-size: var(--fs-micro); color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.mlm-earnings-result-value {
    font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700;
    color: var(--accent); line-height: 1; margin-bottom: 2px;
}
.mlm-earnings-result-breakdown {
    font-size: var(--fs-body-sm); color: rgba(255,255,255,0.35);
}
.mlm-earnings-cards { display: flex; flex-direction: column; gap: 16px; }
.mlm-earnings-info { display: flex; gap: 16px; align-items: center; padding: 20px 24px; }
.mlm-earnings-info-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--green-light);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mlm-earnings-info-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.mlm-earnings-info-title { font-size: var(--fs-body); font-weight: 600; }
.mlm-earnings-info-desc { font-size: var(--fs-body-sm); color: var(--text-secondary); }

/* ── MLM Activity Section ── */
.mlm-activity-heading { margin-bottom: 20px; }
.mlm-activity-card { padding: 0; overflow: hidden; }
.mlm-activity-header {
    padding: 18px 24px; border-bottom: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: center;
}
.mlm-activity-header-title { font-weight: 600; font-size: var(--fs-body-sm); }
.mlm-activity-header-live {
    display: flex; align-items: center; gap: 4px;
    font-size: var(--fs-micro); color: var(--accent); font-weight: 600;
}
.mlm-activity-header-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); display: inline-block;
    animation: pulse-dot 2s infinite;
}

/* ── MLM Testimonial ── */
.mlm-testimonial-heading { margin-bottom: 0; }
.mlm-testimonial-card { padding: 32px 28px; position: relative; overflow: hidden; }
.mlm-testimonial-orb {
    position: absolute; top: -60px; right: -60px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 70%);
    pointer-events: none;
}
.mlm-testimonial-body { position: relative; z-index: 1; }
.mlm-testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; }
.mlm-testimonial-stars svg { width: 16px; height: 16px; color: #F4B400; fill: #F4B400; }
.mlm-testimonial-text {
    font-size: var(--fs-body-sm); line-height: 1.8; color: var(--text-secondary);
    font-style: italic; margin-bottom: 16px;
}
.mlm-testimonial-author { display: flex; align-items: center; gap: 12px; }
.mlm-testimonial-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--fs-body-sm); color: #fff; flex-shrink: 0;
}
.mlm-testimonial-name { font-size: var(--fs-body-sm); font-weight: 600; }
.mlm-testimonial-role { font-size: var(--fs-micro); color: var(--text-tertiary); }

/* ── MLM CTA ── */
.mlm-cta-section { margin-bottom: 100px; }
.mlm-cta-card {
    text-align: center; padding: 64px 48px;
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, #0D2818, #1A3A2A);
    position: relative; overflow: hidden;
}
.mlm-cta-orb {
    position: absolute; top: -100px; right: -100px;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%);
    pointer-events: none;
}
.mlm-cta-inner { position: relative; z-index: 1; }
.mlm-cta-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem); color: #fff; margin-bottom: 12px;
}
.mlm-cta-text {
    color: rgba(255,255,255,0.55); font-size: var(--fs-body);
    max-width: 480px; margin: 0 auto 28px; line-height: 1.7;
}
.mlm-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mlm-cta-actions .btn { padding: 14px 36px; border-radius: 999px; }
.mlm-cta-actions .btn svg { width: 14px; height: 14px; }

/* ── MLM Responsive ── */
@media (max-width: 1024px) {
    .mlm-hero .network-viz { min-height: 280px; }
    .mlm-hero .nv-node.center { width: 64px; height: 64px; }
    .mlm-hero .nv-node.l1 { width: 46px; height: 46px; }
    .mlm-hero .nv-node.l2 { width: 34px; height: 34px; }
    .mlm-metrics-grid { grid-template-columns: 1fr; }
    .mlm-earnings-grid { grid-template-columns: 1fr; }
    .mlm-hero .hero-grid { gap: 32px; }
    .mlm-dash-grid { grid-template-columns: repeat(2, 1fr); }
    .mlm-dash-cell { padding: 24px 20px; }
    .mlm-dash-value, .mlm-dash-grade-value { font-size: 1.75rem; }
    .ml-feed-grid { grid-template-columns: 1fr; }
    .mlm-tree-card { padding: 28px 20px; }
    .tier-card .tc-icon { width: 48px; height: 48px; }
    .tier-card .tc-icon svg { width: 22px; height: 22px; }
    .mlm-cta-card { padding: 48px 32px; }
    .mlm-earnings-result-value { font-size: 2rem; }
    .mlm-milestone-card { padding: 24px 16px; }
}
@media (max-width: 768px) {
    .mlm-hero { padding: 110px 0 60px; min-height: auto; }
    .mlm-hero .network-viz { min-height: 200px; }
    .mlm-hero .nv-node.center { width: 52px; height: 52px; font-size: 0.6rem; }
    .mlm-hero .nv-node.l1 { width: 38px; height: 38px; font-size: 0.4rem; }
    .mlm-hero .nv-node.l2 { display: none; }
    .kpi-glass .value { font-size: 1.375rem; }
    .tier-card .tc-pct { font-size: 2.25rem; }
    .tier-card .tc-body { padding: 24px 20px 20px; }
    .tier-card .tc-stats { gap: 12px; }
    .calc-card { padding: 24px 20px; }
    .mlm-dash-grid { grid-template-columns: 1fr 1fr; }
    .mlm-cta-card { padding: 40px 24px; }
    .mlm-hero .hero-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .mlm-hero .hero-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
    .mlm-hero .hero-stats { justify-content: center; }
    .mlm-hero .hero-actions { justify-content: center; }
    .mlm-hero .hero-actions .btn { padding: 12px 24px; font-size: 0.875rem; }
    .mlm-hero .hero-stat-value { font-size: 0.9375rem; }
    .mlm-dash-value, .mlm-dash-grade-value { font-size: 1.5rem; }
    .mlm-dash-cell { padding: 18px 14px; }
    .mlm-milestone-card { padding: 18px 14px; }
    .mlm-milestone-icon { width: 40px; height: 40px; }
    .mlm-milestone-icon svg { width: 18px; height: 18px; }
    .tier-card .tc-desc { font-size: 0.75rem; }
    .tier-card .tc-label { font-size: 0.75rem; }
    .mlm-tree-card { padding: 20px 14px; }
    .tree-viz { padding: 20px 0; gap: 16px; }
    .tree-viz .tv-row { gap: 8px; flex-wrap: wrap; }
    .tree-viz .tv-node { padding: 10px 14px; min-width: 80px; }
    .tree-viz .tv-row-gap-lg { gap: 20px; }
    .tree-viz .tv-row-gap-md { gap: 12px; }
    .mlm-progress-cards { flex-direction: column; gap: 8px; }
    .activity-item { padding: 12px 20px; }
    .activity-item .ai-name { font-size: 0.75rem; }
    .mlm-testimonial-card { padding: 24px 20px; }
    .mlm-testimonial-text { font-size: 0.8125rem; }
    .mlm-cta-title { font-size: 1.25rem; }
    .mlm-cta-text { font-size: 0.875rem; }
    .mlm-cta-section { margin-bottom: 60px; }
    .mlm-earnings-result-value { font-size: 1.75rem; }
    .mlm-earnings-result-card { padding: 24px; }
    .mlm-earnings-info { padding: 16px 18px; }
    .mlm-activity-header { padding: 14px 20px; }
    .modal-card { padding: 28px 24px 24px; }
}
@media (max-width: 480px) {
    .mlm-hero { padding: 90px 0 40px; }
    .mlm-hero .hero-grid { gap: 20px; }
    .mlm-hero .hero-title { font-size: 1.5rem; }
    .mlm-hero .hero-desc { font-size: 0.875rem; margin-bottom: 16px; }
    .mlm-hero .hero-stats { gap: 16px; }
    .mlm-hero .hero-stat-value { font-size: 0.875rem; }
    .mlm-hero .hero-stat-label { font-size: 0.5rem; }
    .mlm-hero .hero-actions { flex-direction: column; align-items: stretch; }
    .mlm-hero .hero-actions .btn { width: 100%; justify-content: center; padding: 12px 20px; }
    .mlm-hero .network-viz { min-height: 160px; }
    .mlm-hero .nv-node.center { width: 44px; height: 44px; font-size: 0.5rem; }
    .mlm-hero .nv-node.l1 { width: 32px; height: 32px; font-size: 0.35rem; }
    .mlm-dash-grid { grid-template-columns: 1fr; }
    .mlm-dash-cell { padding: 16px 14px; border-right: none; border-bottom: 1px solid var(--border-light); }
    .mlm-dash-cell:last-child { border-bottom: none; }
    .mlm-dash-value, .mlm-dash-grade-value { font-size: 1.25rem; }
    .mlm-milestone-card { padding: 16px 12px; }
    .mlm-milestone-icon { width: 36px; height: 36px; }
    .mlm-milestone-icon svg { width: 16px; height: 16px; }
    .mlm-milestone-name { font-size: 0.75rem; }
    .tier-card .tc-pct { font-size: 1.75rem; }
    .tier-card .tc-body { padding: 18px 14px 14px; }
    .tier-card .tc-icon { width: 40px; height: 40px; border-radius: 12px; }
    .tier-card .tc-icon svg { width: 18px; height: 18px; }
    .tier-card .tc-desc { font-size: 0.7rem; }
    .tier-card .tc-stats { gap: 10px; }
    .mlm-tree-card { padding: 16px 12px; }
    .tree-viz .tv-node { padding: 8px 10px; min-width: 70px; }
    .tree-viz .tv-node .tv-label { font-size: 0.55rem; }
    .tree-viz .tv-node .tv-sub { font-size: 0.45rem; }
    .mlm-cta-card { padding: 32px 16px; }
    .mlm-cta-title { font-size: 1.1rem; }
    .mlm-cta-text { font-size: 0.8rem; }
    .mlm-cta-actions .btn { padding: 10px 20px; font-size: 0.8125rem; }
    .mlm-earnings-result-value { font-size: 1.5rem; }
    .mlm-earnings-result-card { padding: 20px 16px; }
    .mlm-earnings-info { padding: 14px 16px; gap: 12px; }
    .activity-item { padding: 10px 14px; gap: 10px; }
    .activity-item .aa { width: 30px; height: 30px; font-size: 0.6rem; }
    .activity-item .ai-name { font-size: 0.7rem; }
    .activity-item .ai-meta { font-size: 0.55rem; }
    .mlm-testimonial-card { padding: 20px 16px; }
    .mlm-testimonial-text { font-size: 0.75rem; }
    .mlm-testimonial-stars svg { width: 12px; height: 12px; }
    .mlm-testimonial-avatar { width: 36px; height: 36px; font-size: 0.75rem; }
    .modal-card { padding: 24px 18px 20px; }
    .modal-icon { font-size: 1.75rem; }
    .modal-title { font-size: 0.9375rem; }
    .modal-text { font-size: 0.75rem; }
    .calc-card { padding: 18px 14px; }
    .calc-card h3 { font-size: 0.9375rem; }
    .calc-card .calc-label { font-size: 0.75rem; }
    .calc-card .calc-value { font-size: 0.875rem; }
    .mlm-cta-section { margin-bottom: 40px; }
    .mlm-milestone-section { padding-bottom: 40px; }
}
@media (max-width: 360px) {
    .mlm-hero { padding: 70px 0 32px; }
    .mlm-hero .hero-grid { gap: 16px; }
    .mlm-hero .hero-title { font-size: 1.25rem; }
    .mlm-hero .hero-desc { font-size: 0.8125rem; margin-bottom: 12px; }
    .mlm-hero .hero-stats { gap: 12px; }
    .mlm-hero .hero-stat-value { font-size: 0.8rem; }
    .mlm-hero .hero-actions .btn { padding: 10px 16px; font-size: 0.75rem; }
    .mlm-hero .network-viz { min-height: 130px; }
    .mlm-hero .nv-node.center { width: 38px; height: 38px; font-size: 0.4rem; }
    .mlm-hero .nv-node.l1 { width: 28px; height: 28px; }
    .mlm-dash-cell { padding: 14px 10px; }
    .mlm-dash-label { font-size: 0.5rem; }
    .mlm-dash-value, .mlm-dash-grade-value { font-size: 1.125rem; }
    .mlm-dash-sub { font-size: 0.65rem; }
    .mlm-milestone-card { padding: 14px 10px; }
    .mlm-milestone-icon { width: 32px; height: 32px; }
    .mlm-milestone-icon svg { width: 14px; height: 14px; }
    .mlm-milestone-name { font-size: 0.7rem; }
    .mlm-milestone-req { font-size: 0.55rem; }
    .mlm-milestone-desc { font-size: 0.5rem; }
    .tier-card .tc-pct { font-size: 1.5rem; }
    .tier-card .tc-body { padding: 14px 12px 12px; }
    .tier-card .tc-icon { width: 36px; height: 36px; border-radius: 10px; }
    .tier-card .tc-icon svg { width: 16px; height: 16px; }
    .tier-card .tc-desc { font-size: 0.65rem; }
    .tier-card .tc-label { font-size: 0.65rem; }
    .tier-card .tc-grade { font-size: 0.55rem; }
    .mlm-tree-card { padding: 14px 10px; }
    .tree-viz { padding: 14px 0; gap: 12px; }
    .tree-viz .tv-row { gap: 6px; }
    .tree-viz .tv-node { padding: 6px 8px; min-width: 60px; }
    .mlm-cta-card { padding: 24px 14px; }
    .mlm-cta-title { font-size: 1rem; }
    .mlm-cta-text { font-size: 0.75rem; margin-bottom: 20px; }
    .mlm-cta-actions { flex-direction: column; gap: 8px; }
    .mlm-cta-actions .btn { width: 100%; justify-content: center; padding: 10px 16px; font-size: 0.75rem; }
    .mlm-earnings-result-value { font-size: 1.25rem; }
    .mlm-earnings-result-card { padding: 16px 12px; }
    .mlm-earnings-info { padding: 12px 14px; }
    .activity-item { padding: 8px 12px; }
    .activity-item .aa { width: 28px; height: 28px; font-size: 0.55rem; }
    .activity-item .ai-name { font-size: 0.65rem; }
    .activity-item .ai-meta { font-size: 0.5rem; }
    .activity-item .ai-amount { font-size: 0.7rem; }
    .mlm-testimonial-card { padding: 16px 14px; }
    .mlm-testimonial-text { font-size: 0.7rem; }
    .mlm-testimonial-avatar { width: 32px; height: 32px; font-size: 0.65rem; }
    .modal-card { padding: 20px 16px; }
    .modal-icon { font-size: 1.5rem; }
    .modal-title { font-size: 0.875rem; }
    .modal-text { font-size: 0.7rem; margin-bottom: 16px; }
    .calc-card { padding: 14px 12px; }
    .calc-card h3 { font-size: 0.875rem; }
    .calc-card .calc-label { font-size: 0.7rem; }
    .calc-card .calc-value { font-size: 0.8rem; }
    .mlm-progress-card { padding: 10px 8px; }
    .mlm-progress-card-value { font-size: 0.9375rem; }
    .mlm-progress-card-label { font-size: 0.55rem; }
    .mlm-activity-header { padding: 12px 14px; }
}

/* ── Shared MLM inline-style replacements ── */
.mlm-section-pt0 { padding-top: 0; }
.mlm-z2 { position: relative; z-index: 2; }
.mlm-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.mlm-border-right { border-right: 1px solid var(--border-light); }
.mlm-border-none { border-right: none; }
.mlm-card-pad0 { padding: 0; overflow: hidden; }
.mlm-card-pad { padding: 28px; text-align: center; border-radius: var(--radius-lg); }
.mlm-dark-card {
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--green-deep), #1A3A2A);
    border: 1px solid rgba(0,176,80,0.08);
}
.ml-mb-36 { margin-bottom: 36px; }
.ml-feed-grid { grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.ml-feed-right { display: flex; flex-direction: column; gap: 20px; }
.section-title-sm { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.tv-node-mid { opacity: 0.8; }

/* ═══════════════════════════════════════════
   MARKETPLACE PAGE STYLES
   ═══════════════════════════════════════════ */

/* ── Global page refinements ── */
.mp-section { padding: 90px 0; }
.mp-section + .mp-section { border-top: 1px solid var(--border-light); }
.mp-label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 16px; border-radius: 100px;
    font-family: var(--font-heading);
    font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    background: var(--accent-subtle); color: var(--accent); border: 1px solid rgba(0,176,80,0.1);
    margin-bottom: 16px;
}
.mp-label .gl { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2s infinite; }
.mp-title {
    font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 700; color: var(--text-primary);
    font-family: var(--font-heading); line-height: 1.08; letter-spacing: -0.02em;
}
.mp-subtitle {
    font-size: 0.875rem; color: var(--text-secondary);
    line-height: 1.7; max-width: 560px; margin-top: 12px;
}

/* ── Marketplace Hero ── */
.mp-hero {
    padding: 140px 0 80px; display: flex; align-items: center;
    position: relative; overflow: hidden; min-height: 580px;
    background: #0A1F10;
}
.mp-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,176,80,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(56,239,125,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 80%, rgba(100,180,255,0.04) 0%, transparent 50%);
}
.hero-orb {
    position: absolute; border-radius: 50%; pointer-events: none;
    animation: hero-float 14s ease-in-out infinite;
    filter: blur(60px); opacity: 0.2;
}
@keyframes hero-float {
    0%,100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(50px,-40px) scale(1.08); }
    66% { transform: translate(-30px,25px) scale(0.92); }
}
.h-search {
    display: flex; align-items: center; max-width: 500px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    transition: border-color 0.4s, box-shadow 0.4s;
}
.h-search:focus-within { border-color: var(--accent); box-shadow: 0 0 24px rgba(0,176,80,0.15); }
.h-search input {
    flex: 1; border: none; outline: none; box-shadow: none;
    padding: 12px 18px; font-size: 0.8125rem; font-family: var(--font-body);
    color: #fff; background: transparent;
}
.h-search input::placeholder { color: rgba(255,255,255,0.35); }
.h-search .h-btn {
    width: 34px; height: 34px; margin: 2px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: rgba(255,255,255,0.3);
    cursor: pointer; transition: all 0.3s;
}
.h-search .h-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.h-search .h-btn.ac {
    width: auto; border-radius: 999px; padding: 0 24px;
    background: var(--accent); color: #fff; font-weight: 600; font-size: 0.75rem;
    box-shadow: 0 4px 16px rgba(0,176,80,0.2);
}
.h-search .h-btn.ac:hover { background: var(--accent-hover); transform: scale(1.02); }
.h-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06);
}
.h-stats div { text-align: center; position: relative; }
.h-stats div:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 15%; height: 70%; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.06), transparent);
}
.h-stats .v { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing:-0.02em; }
.h-stats .l { font-size: 0.6rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* ── Filter chips ── */
.fc { display: flex; flex-wrap: wrap; gap: 6px; }
.fc span {
    padding: 5px 16px; border-radius: 100px;
    font-size: 0.65rem; font-weight: 500; cursor: pointer;
    background: var(--bg-warm); color: var(--text-tertiary); border: 1px solid var(--border-light);
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.fc span:hover { border-color: var(--accent); color: var(--accent); }
.fc span.on { background: var(--accent-subtle); color: var(--accent); border-color: rgba(0,176,80,0.15); }

/* ── Product cards ── */
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.p-card {
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--card-bg); border: 1px solid var(--border-light);
    transition: all 0.45s cubic-bezier(0.22,1,0.36,1);
    display: flex; flex-direction: column;
}
.p-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(0,176,80,0.08); }
.p-img {
    position: relative; height: 210px; overflow: hidden;
    background: var(--bg-warm);
}
.p-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.p-card:hover .p-img img { transform: scale(1.06); }
.p-img .ov {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.25));
    z-index: 1;
}
.p-img .badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 3px 12px; border-radius: 100px;
    font-size: 0.45rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    backdrop-filter: blur(4px);
}
.p-img .badge.gr { background: rgba(0,176,80,0.85); color: #fff; }
.p-img .badge.gd { background: rgba(217,165,60,0.85); color: #fff; }
.p-img .badge.rd { background: rgba(229,57,53,0.85); color: #fff; }
.p-img .badge.dk { background: rgba(13,40,24,0.85); color: var(--accent); }
.p-img .badge.bl { background: rgba(100,180,255,0.85); color: #fff; }
.p-img .qv {
    position: absolute; bottom: 12px; right: 12px; z-index: 3;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary); cursor: pointer; opacity: 0; transition: all 0.3s;
}
.p-card:hover .qv { opacity: 1; }
.p-body { padding: 16px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.p-body .p-cat {
    font-size: 0.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--accent); margin-bottom: 4px;
}
.p-body h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; line-height: 1.3; }
.p-body .p-desc { font-size: 0.675rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.p-body .p-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.p-body .p-meta span {
    font-size: 0.55rem; color: var(--text-tertiary); padding: 3px 10px; border-radius: 100px;
    background: var(--bg-warm); border: 1px solid var(--border-light);
}
.p-body .p-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.p-body .p-rating .stars { color: #D9A53C; font-size: 10px; letter-spacing: 1px; }
.p-body .p-rating .rc { font-size: 0.55rem; color: var(--text-tertiary); }
.p-body .p-pr {
    display: flex; align-items: center; justify-content: space-between; margin-top: auto;
    padding-top: 12px; border-top: 1px solid var(--border-light);
}
.p-body .p-pr .price {
    font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--text-primary);
}
.p-body .p-pr .price .old {
    font-size: 0.675rem; color: var(--text-tertiary); text-decoration: line-through; font-weight: 400; margin-left: 6px;
}
.p-body .p-pr .adn {
    font-size: 0.55rem; color: var(--accent); background: var(--accent-subtle);
    padding: 3px 12px; border-radius: 100px; border: 1px solid rgba(0,176,80,0.06);
}
.p-body .p-actions { display: flex; gap: 8px; margin-top: 12px; }
.p-body .p-actions button {
    flex: 1; padding: 9px; border-radius: 100px; font-size: 0.675rem; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.3s; font-family: var(--font-body);
}
.p-body .p-actions .atc { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,176,80,0.15); }
.p-body .p-actions .atc:hover { background: var(--accent-hover); transform: scale(1.02); box-shadow: 0 4px 16px rgba(0,176,80,0.25); }
.p-body .p-actions .wish {
    width: 36px; flex: 0 0 36px;
    background: var(--bg-warm); color: var(--text-tertiary); border: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.p-body .p-actions .wish:hover { color: #E53935; border-color: rgba(229,57,53,0.15); }

/* ── AI pills ── */
.ai-strip {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none;
}
.ai-strip::-webkit-scrollbar { display: none; }
.ai-pill {
    flex-shrink: 0; padding: 7px 18px; border-radius: 100px;
    font-size: 0.65rem; font-weight: 500; cursor: pointer;
    background: var(--bg-warm); border: 1px solid var(--border-light);
    color: var(--text-tertiary); transition: all 0.3s; white-space: nowrap;
}
.ai-pill:hover, .ai-pill.on {
    background: rgba(100,180,255,0.08); border-color: rgba(100,180,255,0.15); color: #64B4FF; box-shadow: 0 2px 8px rgba(100,180,255,0.08);
}
.ai-pill svg { width: 13px; height: 13px; vertical-align: middle; margin-right: 4px; }

/* ── CTA Banner ── */
.cta-banner {
    position: relative; border-radius: var(--radius-xl); overflow: hidden;
    padding: 56px 48px; display: flex; align-items: center; gap: 52px;
    background: linear-gradient(135deg, #0D2818, #163A26);
    border: 1px solid rgba(0,176,80,0.06);
}
.cta-banner::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 30% 50%, rgba(0,176,80,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(100,180,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.cta-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(0,176,80,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,176,80,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 80%);
}

/* ── Features ── */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feat-card {
    border-radius: var(--radius-md); padding: 26px 20px; text-align: center;
    background: var(--card-bg); border: 1px solid var(--border-light);
    transition: all 0.4s;
}
.feat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,176,80,0.06), var(--shadow-sm); border-color: rgba(0,176,80,0.1); }
.feat-card:hover .fi { transform: scale(1.08); border-color: rgba(0,176,80,0.12); background: rgba(0,176,80,0.1); }
.feat-card .fi {
    width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 12px;
    background: var(--accent-subtle); border: 1px solid rgba(0,176,80,0.06);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s;
}
.feat-card .fi svg { width: 18px; height: 18px; color: var(--accent); }
.feat-card h4 { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.feat-card p { font-size: 0.65rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Testimonials ── */
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.t-card {
    border-radius: var(--radius-md); padding: 32px 28px;
    background: var(--card-bg); border: 1px solid var(--border-light);
    position: relative; transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.t-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,176,80,0.04), var(--shadow-sm); border-color: rgba(0,176,80,0.06); }
.t-card .tq {
    position: absolute; top: 16px; right: 24px;
    font-size: 2.5rem; color: rgba(0,176,80,0.06); font-family: Georgia, serif; line-height: 1;
}
.t-card .tt { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 18px; }
.t-card .ta { display: flex; align-items: center; gap: 12px; }
.t-card .ta .av {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent-subtle); border: 1px solid rgba(0,176,80,0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 600; color: var(--accent);
}
.t-card .ta .nm { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); }
.t-card .ta .rl { font-size: 0.55rem; color: var(--text-tertiary); }
.t-card .ta .ts { color: #D9A53C; font-size: 10px; letter-spacing: 1px; margin-left: auto; }

/* ── Brand Strip ── */
.brand-strip {
    display: flex; gap: 40px; align-items: center; overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}
.brand-strip-inner {
    display: flex; gap: 40px; align-items: center;
    animation: brand-scroll 30s linear infinite;
}
@keyframes brand-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.brand-item {
    flex-shrink: 0; height: 32px; display: flex; align-items: center;
    font-size: 0.85rem; font-weight: 600; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap;
    opacity: 0.5;
}

/* ── Stats ── */
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.stat-card {
    border-radius: var(--radius-md); padding: 36px 16px; text-align: center;
    background: var(--card-bg); border: 1px solid var(--border-light);
    transition: all 0.4s;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,176,80,0.06), var(--shadow-sm); }
.stat-card .sv {
    font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700;
    background: linear-gradient(135deg, #0D2818, var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-card .sl { font-size: 0.6rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }

/* ── App section ── */
.app-card {
    border-radius: var(--radius-xl); overflow: hidden; position: relative;
    display: flex; align-items: center; gap: 48px; padding: 48px 52px;
    background: linear-gradient(135deg, #0D2818, #163A26);
    border: 1px solid rgba(0,176,80,0.06);
}
.app-card::before {
    content: ''; position: absolute; top: -40%; right: -10%; width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,176,80,0.05), transparent 70%);
    pointer-events: none;
}
.app-badges { display: flex; gap: 12px; }
.app-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 22px; border-radius: 100px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    color: #fff; font-size: 0.7rem; font-weight: 500; text-decoration: none; transition: all 0.3s;
}
.app-badge:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.app-badge svg { width: 16px; height: 16px; }

/* ── Newsletter ── */
.n-box {
    border-radius: var(--radius-lg); padding: 52px 40px; text-align: center;
    background: var(--bg-warm); border: 1px solid var(--border-light);
}
.n-field {
    display: flex; max-width: 420px; margin: 20px auto 0;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 100px; padding: 4px; transition: all 0.4s;
}
.n-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.n-field input {
    flex: 1; border: none; outline: none; background: transparent;
    padding: 10px 18px; font-size: 0.8125rem; color: var(--text-primary); font-family: var(--font-body);
}
.n-field input::placeholder { color: var(--text-tertiary); }
.n-field button {
    padding: 9px 26px; border-radius: 100px; background: var(--accent); color: #fff;
    border: none; font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: all 0.3s;
    font-family: var(--font-body); box-shadow: 0 2px 12px rgba(0,176,80,0.15);
}
.n-field button:hover { background: var(--accent-hover); transform: scale(1.02); box-shadow: 0 4px 20px rgba(0,176,80,0.25); }

/* ── Marketplace shared animations ── */
@keyframes arrow-move {
    0% { transform: translateX(0); }
    50% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}
.btn-accent:hover svg:last-child,
.btn-outline:hover svg:last-child,
.atc:hover svg:last-child,
.btn:hover svg:last-child {
    animation: arrow-move 0.8s ease-in-out infinite;
}

/* ── Marketplace Responsive ── */
@media (max-width: 1024px) {
    .p-grid { grid-template-columns: repeat(2, 1fr); }
    .feat-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .t-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-banner { flex-direction: column; text-align: center; padding: 40px 28px; gap: 28px; }
    .app-card { flex-direction: column; text-align: center; padding: 36px 28px; gap: 24px; }
}


@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .feat-grid { grid-template-columns: 1fr; }
    .cta-banner { padding: 32px 20px; }
    .app-card { padding: 28px 20px; }
    .app-badges { flex-direction: column; }
    .h-search .h-btn.ac { padding: 0 14px; font-size: 0.65rem; }
}
/* ═══════════════════════════════════════════
   INDEX PAGE STYLES (from style blocks)
   ═══════════════════════════════════════════ */

/* ── Hero Buttons ── */
.hero-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 38px; border-radius: 999px;
    font-family: var(--font-body); font-size: 1rem; font-weight: 500;
    border: none; cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative; overflow: hidden;
}
.hero-btn::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; opacity: 0;
    transition: opacity 0.4s ease;
}
.hero-btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #00c55a 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,176,80,0.25);
}
.hero-btn-primary::before { background: linear-gradient(135deg, #00c55a 0%, var(--accent-hover) 100%); }
.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,176,80,0.35);
}
.hero-btn-primary:hover::before { opacity: 1; }
.hero-btn-primary:hover svg { transform: translateX(4px); }
.hero-btn-primary svg { transition: transform 0.3s ease; position: relative; z-index: 1; }
.hero-btn-primary > span { position: relative; z-index: 1; }
.hero-btn-primary::after {
    content: ''; position: absolute; inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    opacity: 0; transition: opacity 0.4s ease;
}
.hero-btn-primary:hover::after { opacity: 1; }
.hero-btn-secondary {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.85);
    border: 1.5px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-btn-secondary::before { background: rgba(255,255,255,0.08); }
.hero-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-3px); color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}
.hero-btn-secondary:hover::before { opacity: 1; }
.hero-btn:active { transform: translateY(-1px) scale(0.98); }

/* ── Eco Button ── */
.eco-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 28px; padding: 11px 26px;
    border-radius: 999px; font-family: var(--font-body);
    font-size: 0.8125rem; font-weight: 500; color: #fff;
    background: linear-gradient(135deg, var(--accent), #00c55a);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 14px rgba(0,176,80,0.2);
    align-self: flex-start; border: none;
}
.eco-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,176,80,0.35); }
.eco-btn:hover svg { transform: translateX(4px); }
.eco-btn svg { transition: transform 0.3s ease; width: 14px; height: 14px; }

/* ── Bento card hover ── */
[data-card]:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.2) !important; }
[data-card]:hover .hover-glow { opacity: 1 !important; }
[data-card] { will-change: transform; }

/* ── Glass card hover ── */
.glass-card-hover { transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.glass-card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,176,80,0.12) !important; }

/* ── Join Button ── */
.join-btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 50px; border-radius: 999px;
    font-family: var(--font-body); font-size: 1.0625rem;
    font-weight: 600; letter-spacing: -0.01em;
    background: linear-gradient(135deg, #00E676, #00B050);
    color: #0A0A0A; border: none;
    box-shadow: 0 4px 24px rgba(0,176,80,0.3);
    cursor: pointer; text-decoration: none;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}
.join-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(0,176,80,0.45);
}
.join-btn:focus-visible { outline: 2px solid #00E676; outline-offset: 3px; }
.join-btn-arrow {
    width: 18px; height: 18px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.join-btn:hover .join-btn-arrow { transform: translateX(5px); }

/* ── Index Animations ── */
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.08); opacity: 0.2; }
}
@keyframes pulseRing {
    0% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.15); opacity: 0.15; }
    100% { transform: scale(1); opacity: 0.4; }
}
@keyframes floatOrb {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
.test-card { will-change: transform; }

/* ── FAQ accordion ── */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details summary::marker { display: none; content: ''; }
details[open] .faq-chevron { transform: rotate(180deg); }
details[open] summary { color: #00B050; }
/* ═══════════════════════════════════════════
   ECOSYSTEM PAGE STYLES (from style blocks)
   ═══════════════════════════════════════════ */

/* ── Role Cards (Built for Every Role) ── */
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.role-card {
    position: relative; border-radius: 18px; overflow: hidden;
    transition: all 0.5s cubic-bezier(0.22,1,0.36,1);
    display: flex; flex-direction: column;
}
.role-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 18px;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none; transition: opacity 0.5s ease; opacity: 0.3;
}
.role-card:hover::before { opacity: 0.8; }
.role-card-inner {
    position: relative; padding: 28px 24px 32px; z-index: 1;
    flex: 1; display: flex; flex-direction: column;
}
.role-card-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.role-icon {
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform 0.4s ease;
}
.role-card:hover .role-icon { transform: scale(1.08) rotate(-4deg); }
.role-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.role-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 999px;
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    font-family: var(--font-heading); backdrop-filter: blur(4px);
}
.role-card h3 { font-size: 1.05rem; margin-bottom: 6px; letter-spacing: -0.01em; }
.role-card p { font-size: 0.8125rem; line-height: 1.7; }
.role-features {
    margin-top: 14px; padding-top: 12px;
    display: flex; flex-direction: column; gap: 6px;
    list-style: none; padding-left: 0;
}
.role-features li { display: flex; align-items: center; gap: 10px; font-size: 0.7rem; line-height: 1.5; }
.role-features li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.role-glow {
    position: absolute; top: -40%; right: -20%; width: 220px; height: 220px;
    border-radius: 50%; pointer-events: none;
    opacity: 0; transition: opacity 0.7s ease;
}
.role-card:hover .role-glow { opacity: 0.4; }
.role-num {
    position: absolute; bottom: -4px; right: 10px;
    font-family: var(--font-heading); font-size: 4.5rem; font-weight: 800;
    line-height: 0.8; opacity: 0; pointer-events: none;
    user-select: none; transition: opacity 0.7s ease;
}
.role-card:hover .role-num { opacity: 0.04; }

/* ── Driver — Emerald ── */
.role-card.driver { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 20px rgba(0,0,0,0.04); }
.role-card.driver::before { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.03) 50%, transparent 70%); }
.role-card.driver:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(16,185,129,0.06), 0 1px 3px rgba(0,0,0,0.03); }
.role-card.driver .role-glow { background: radial-gradient(circle at 30% 40%, rgba(16,185,129,0.08), transparent 70%); }
.role-card.driver .role-num { color: #10B981; }
.role-card.driver .role-icon { background: linear-gradient(135deg, #10B981, #059669); }
.role-card.driver .role-icon svg { stroke: #fff; }
.role-card.driver .role-badge { background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.1); color: #059669; }
.role-card.driver h3 { color: #0A0A0A; }
.role-card.driver p { color: #6B7280; }
.role-card.driver .role-features { border-top: 1px solid rgba(0,0,0,0.04); }
.role-card.driver .role-features li { color: #6B7280; }
.role-card.driver .role-features li::before { background: #10B981; }

/* ── Distributor — Violet ── */
.role-card.distributor { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 20px rgba(0,0,0,0.04); }
.role-card.distributor::before { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(139,92,246,0.03) 50%, transparent 70%); }
.role-card.distributor:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(139,92,246,0.06), 0 1px 3px rgba(0,0,0,0.03); }
.role-card.distributor .role-glow { background: radial-gradient(circle at 30% 40%, rgba(139,92,246,0.08), transparent 70%); }
.role-card.distributor .role-num { color: #8B5CF6; }
.role-card.distributor .role-icon { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.role-card.distributor .role-icon svg { stroke: #fff; }
.role-card.distributor .role-badge { background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.1); color: #7C3AED; }
.role-card.distributor h3 { color: #0A0A0A; }
.role-card.distributor p { color: #6B7280; }
.role-card.distributor .role-features { border-top: 1px solid rgba(0,0,0,0.04); }
.role-card.distributor .role-features li { color: #6B7280; }
.role-card.distributor .role-features li::before { background: #8B5CF6; }

/* ── Investor — Amber ── */
.role-card.investor { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 20px rgba(0,0,0,0.04); }
.role-card.investor::before { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.03) 50%, transparent 70%); }
.role-card.investor:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(245,158,11,0.06), 0 1px 3px rgba(0,0,0,0.03); }
.role-card.investor .role-glow { background: radial-gradient(circle at 30% 40%, rgba(245,158,11,0.08), transparent 70%); }
.role-card.investor .role-num { color: #F59E0B; }
.role-card.investor .role-icon { background: linear-gradient(135deg, #F59E0B, #D97706); }
.role-card.investor .role-icon svg { stroke: #fff; }
.role-card.investor .role-badge { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.1); color: #D97706; }
.role-card.investor h3 { color: #0A0A0A; }
.role-card.investor p { color: #6B7280; }
.role-card.investor .role-features { border-top: 1px solid rgba(0,0,0,0.04); }
.role-card.investor .role-features li { color: #6B7280; }
.role-card.investor .role-features li::before { background: #F59E0B; }

/* ── Merchant — Rose ── */
.role-card.merchant { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 20px rgba(0,0,0,0.04); }
.role-card.merchant::before { background: linear-gradient(135deg, rgba(244,63,94,0.15), rgba(244,63,94,0.03) 50%, transparent 70%); }
.role-card.merchant:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(244,63,94,0.06), 0 1px 3px rgba(0,0,0,0.03); }
.role-card.merchant .role-glow { background: radial-gradient(circle at 30% 40%, rgba(244,63,94,0.08), transparent 70%); }
.role-card.merchant .role-num { color: #F43F5E; }
.role-card.merchant .role-icon { background: linear-gradient(135deg, #F43F5E, #E11D48); }
.role-card.merchant .role-icon svg { stroke: #fff; }
.role-card.merchant .role-badge { background: rgba(244,63,94,0.06); border: 1px solid rgba(244,63,94,0.1); color: #E11D48; }
.role-card.merchant h3 { color: #0A0A0A; }
.role-card.merchant p { color: #6B7280; }
.role-card.merchant .role-features { border-top: 1px solid rgba(0,0,0,0.04); }
.role-card.merchant .role-features li { color: #6B7280; }
.role-card.merchant .role-features li::before { background: #F43F5E; }

@media (max-width: 1024px) {
    .role-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .role-grid { grid-template-columns: 1fr; }
    .role-card-inner { padding: 24px 20px 28px; }
    .role-badge { font-size: 0.6rem; padding: 5px 12px; }
}
/* ═══════════════════════════════════════════
   SHARED INLINE-STYLE REPLACEMENT UTILITIES
   ═══════════════════════════════════════════ */

/* ── SVG sizes ── */
.svg-10 { width: 10px; height: 10px; }
.svg-12 { width: 12px; height: 12px; }
.svg-14 { width: 14px; height: 14px; }
.svg-16 { width: 16px; height: 16px; }
.svg-18 { width: 18px; height: 18px; }
.svg-20 { width: 20px; height: 20px; }
.svg-22 { width: 22px; height: 22px; }
.svg-24 { width: 24px; height: 24px; }
.svg-28 { width: 28px; height: 28px; }
.svg-32 { width: 32px; height: 32px; }

/* ── Layout utilities ── */
.rel-z1 { position: relative; z-index: 1; }
.abs-full { position: absolute; inset: 0; }
.abs-inherit { position: absolute; inset: 0; border-radius: inherit; }
.pointer-none { pointer-events: none; }
.text-center { text-align: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.w-full { width: 100%; }
.relative { position: relative; }

/* ── Spacing ── */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-56 { margin-bottom: 56px; }
.mb-60 { margin-bottom: 60px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-36 { margin-top: 36px; }
.mt-100 { margin-top: 100px; }
.mb-100 { margin-bottom: 100px; }
.ml-auto { margin-left: auto; }
.p-0 { padding: 0; }
.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.p-28 { padding: 28px; }
.p-32 { padding: 32px; }
.p-36 { padding: 36px; }
.p-40 { padding: 40px; }
.p-48 { padding: 48px; }
.pt-20 { padding-top: 20px; }
.pt-24 { padding-top: 24px; }
.pt-120 { padding-top: 120px; }
.pb-100 { padding-bottom: 100px; }
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-18 { padding-left: 18px; padding-right: 18px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-28 { gap: 28px; }
.gap-32 { gap: 32px; }

/* ── Border / Radius ── */
.rounded-full { border-radius: 999px; }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-12 { border-radius: 12px; }
.rounded-14 { border-radius: 14px; }
.rounded-16 { border-radius: 16px; }
.rounded-18 { border-radius: 18px; }
.rounded-20 { border-radius: 20px; }
.border-bottom { border-bottom: 1px solid var(--border-light); }
.border-top { border-top: 1px solid var(--border-light); }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* ── Typography ── */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.text-white { color: #fff; }
.text-accent { color: var(--accent); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fs-050 { font-size: 0.5rem; }
.fs-055 { font-size: 0.55rem; }
.fs-060 { font-size: 0.6rem; }
.fs-065 { font-size: 0.65rem; }
.fs-070 { font-size: 0.7rem; }
.fs-075 { font-size: 0.75rem; }
.fs-080 { font-size: 0.8rem; }
.fs-085 { font-size: 0.85rem; }
.fs-090 { font-size: 0.9rem; }
.fs-100 { font-size: 1rem; }
.fs-112 { font-size: 1.125rem; }
.fs-125 { font-size: 1.25rem; }
.fs-150 { font-size: 1.5rem; }
.ls-tight { letter-spacing: -0.02em; }
.ls-wide { letter-spacing: 0.04em; }
.ls-wider { letter-spacing: 0.06em; }
.ls-widest { letter-spacing: 0.08em; }
.ls-widest2 { letter-spacing: 0.1em; }
.lh-1 { line-height: 1; }
.lh-tight { line-height: 1.05; }
.lh-snug { line-height: 1.3; }
.lh-normal { line-height: 1.5; }
.lh-relaxed { line-height: 1.7; }
.lh-loose { line-height: 1.8; }
.lh-19 { line-height: 1.9; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.no-underline { text-decoration: none; }
.text-decoration-none { text-decoration: none; }
.list-none { list-style: none; padding-left: 0; }
.whitespace-nowrap { white-space: nowrap; }

/* ── Widths / Max-widths ── */
.max-w-380 { max-width: 380px; }
.max-w-400 { max-width: 400px; }
.max-w-420 { max-width: 420px; }
.max-w-440 { max-width: 440px; }
.max-w-460 { max-width: 460px; }
.max-w-480 { max-width: 480px; }
.max-w-500 { max-width: 500px; }
.max-w-520 { max-width: 520px; }
.max-w-560 { max-width: 560px; }
.max-w-700 { max-width: 700px; }
.max-w-780 { max-width: 780px; }
.w-3 { width: 3px; }
.w-5 { width: 5px; }
.w-6 { width: 6px; }
.w-7 { width: 7px; }
.h-1 { height: 1px; }
.h-3 { height: 3px; }
.h-40 { height: 40px; }

/* ── Background / Gradient ── */
.bg-accent-subtle { background: var(--accent-subtle); }
.bg-card { background: var(--card-bg); }
.bg-warm { background: var(--bg-warm); }
.bg-glass { background: rgba(255,255,255,0.06); }
.bg-glass-5 { background: rgba(255,255,255,0.05); }
.bg-glass-3 { background: rgba(255,255,255,0.03); }
.bg-glass-4 { background: rgba(255,255,255,0.04); }
.bg-dark-92 { background: rgba(13,40,24,0.92); }
.bg-dark-85 { background: rgba(13,40,24,0.85); }
.bg-dark-2 { background: rgba(0,176,80,0.02); }
.bg-dark-3 { background: rgba(0,176,80,0.03); }
.bg-dark-4 { background: rgba(0,176,80,0.04); }
.bg-dark-6 { background: rgba(0,176,80,0.06); }
.bg-dark-8 { background: rgba(0,176,80,0.08); }

/* ── Display / Visibility ── */
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-full { opacity: 1; }

/* ── Transition ── */
.transition-all { transition: all 0.3s ease; }
.transition-all-4 { transition: all 0.4s ease; }
.transition-colors { transition: color 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.will-change { will-change: transform; }

/* ── Backdrop / Blur ── */
.backdrop-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-sm { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-lg { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* ── Object fit ── */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.block-display { display: block; }

/* ═══════════════════════════════════════════
   ECOSYSTEM PAGE — INLINE STYLE REPLACEMENTS
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.eco-hero {
    padding: 140px 0 100px; position: relative; overflow: hidden;
    background: url('/static/images/ecosystem-bg.png') center center / cover no-repeat;
}
.eco-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.6) 100%);
}
.eco-hero-inner { position: relative; z-index: 1; }
.eco-hero-content { max-width: 700px; margin: 0 auto; text-align: center; }
.eco-hero-chip {
    margin-bottom: 24px; background: rgba(0,176,80,0.25);
    border: 1px solid rgba(0,176,80,0.4); padding: 8px 20px;
}
.eco-hero-chip-dot { background: #00B050; }
.eco-hero-chip-text { color: #fff; font-size: 0.8125rem; font-weight: 600; }
.eco-hero-title {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.08;
    margin-bottom: 18px; color: #fff;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
}
.eco-hero-title-accent { opacity: 0.95; }
.eco-hero-desc {
    font-size: 1.0625rem; color: rgba(255,255,255,0.65); line-height: 1.8;
    margin: 0 auto 40px; max-width: 520px;
}
.eco-hero-stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.eco-hero-stat { text-align: center; }
.eco-hero-stat-value {
    font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem;
    font-weight: 700; color: #fff;
}
.eco-hero-stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.45); }
.eco-hero-stat-divider {
    width: 1px; height: 36px; background: rgba(255,255,255,0.08); align-self: center;
}

/* ── Stats Section ── */
.eco-stats-pt { padding-top: 20px; }
.eco-stats-heading { text-align: center; margin-bottom: 56px; }
.eco-stats-heading .section-subtitle { margin: 0 auto; }
.eco-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px;
    margin-bottom: 60px;
}
.eco-stat-card {
    position: relative; border-radius: 16px;
    background: linear-gradient(145deg, #0D2818, #132E1C);
    padding: 32px 24px; text-align: center; overflow: hidden;
    border: 1px solid rgba(0,176,80,0.06);
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.eco-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,176,80,0.1);
    border-color: rgba(0,176,80,0.15);
}
.eco-stat-card-lime { border-color: rgba(93,245,88,0.06); }
.eco-stat-card-lime:hover {
    box-shadow: 0 12px 40px rgba(93,245,88,0.1);
    border-color: rgba(93,245,88,0.15);
}
.eco-stat-card-amber { border-color: rgba(255,183,77,0.06); }
.eco-stat-card-amber:hover {
    box-shadow: 0 12px 40px rgba(255,183,77,0.1);
    border-color: rgba(255,183,77,0.15);
}
.eco-stat-orb {
    position: absolute; top: -30px; right: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%);
    pointer-events: none;
}
.eco-stat-orb-lime { background: radial-gradient(circle, rgba(93,245,88,0.06), transparent 70%); }
.eco-stat-orb-amber { background: radial-gradient(circle, rgba(255,183,77,0.06), transparent 70%); }
.eco-stat-value {
    font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700;
    color: #00B050; line-height: 1.1; letter-spacing: -0.02em; position: relative;
}
.eco-stat-value-lime { color: #5DF558; }
.eco-stat-value-amber { color: #FFB74D; }
.eco-stat-label {
    font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 500;
}
.eco-stat-bar {
    margin-top: 12px; width: 100%; height: 3px; border-radius: 99px;
    background: rgba(255,255,255,0.04); overflow: hidden;
}
.eco-stat-bar-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #00B050, rgba(0,176,80,0.2));
}
.eco-stat-bar-fill-72 { width: 72%; background: linear-gradient(90deg, #5DF558, rgba(93,245,88,0.2)); }
.eco-stat-bar-fill-64 { width: 64%; background: linear-gradient(90deg, #FFB74D, rgba(255,183,77,0.2)); }
.eco-stat-bar-fill-58 { width: 58%; background: linear-gradient(90deg, #5DF558, rgba(93,245,88,0.2)); }
.eco-stat-bar-fill-85 { width: 85%; }
.eco-stat-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 10px;
}
.eco-stat-footer-text {
    font-size: 0.6rem; color: rgba(0,176,80,0.5); font-weight: 600;
}
.eco-stat-footer-text-lime { color: rgba(93,245,88,0.5); }
.eco-stat-footer-text-amber { color: rgba(255,183,77,0.5); }
.eco-stat-dot { width: 5px; height: 5px; border-radius: 50%; background: #00B050; animation: pulse-dot 2s infinite; }
.eco-roadmap-section { position: relative; overflow: hidden; }

/* ── Five Pillars ── */
.eco-pillars-pt { padding: 100px 0; }
.eco-pillars-heading { text-align: center; margin-bottom: 60px; }
.eco-pillars-heading .section-subtitle { margin: 0 auto; color: rgba(255,255,255,0.5); }
.eco-pillar-hero-grid {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
    margin-bottom: 24px;
}
.eco-pillar-hero-card {
    position: relative; border-radius: 20px; overflow: hidden;
    background: url('/static/images/eco-car.jpg') center center / cover no-repeat;
    min-height: 340px;
}
.eco-pillar-hero-card:hover .eco-pillar-glow { opacity: 1; }
.eco-pillar-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,40,24,0.85), rgba(13,40,24,0.3));
}
.eco-pillar-hero-overlay-2 {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(13,40,24,0.5) 0%, transparent 40%, rgba(13,40,24,0.2) 100%);
}
.eco-pillar-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(0,176,80,0.08), transparent 60%);
    opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
.eco-pillar-hero-body {
    position: relative; padding: 36px; z-index: 1;
    display: flex; flex-direction: column; height: 100%; justify-content: space-between;
}
.eco-pillar-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: 999px;
    background: rgba(0,176,80,0.2); border: 1px solid rgba(0,176,80,0.3);
    margin-bottom: 16px;
}
.eco-pillar-hero-badge-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #00B050;
    display: inline-block; animation: pulse-dot 2s ease-in-out infinite;
}
.eco-pillar-hero-badge-text {
    font-size: 0.6rem; color: #00B050; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.eco-pillar-hero-title {
    font-size: 1.625rem; color: #fff; margin-bottom: 10px;
    font-family: var(--font-heading);
}
.eco-pillar-hero-desc {
    font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.8; max-width: 420px;
}
.eco-pillar-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.eco-pillar-hero-actions .btn { border-radius: 999px; }
.eco-pillar-mini-grid {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px;
}
.eco-pillar-mini-card {
    background: rgba(255,255,255,0.04); border-radius: 16px; padding: 24px;
    text-align: center; border: 1px solid rgba(255,255,255,0.04);
    backdrop-filter: blur(4px); transition: all 0.3s ease;
}
.eco-pillar-mini-card:hover {
    background: rgba(0,176,80,0.06); border-color: rgba(0,176,80,0.1);
    transform: translateY(-2px);
}
.eco-pillar-mini-value {
    font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700;
    color: #00B050; line-height: 1;
}
.eco-pillar-mini-label {
    font-size: 0.6875rem; color: rgba(255,255,255,0.4); margin-top: 6px;
}
.eco-pillars-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px;
}
.eco-pillar-card {
    padding: 28px; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
}
.eco-pillar-card:hover {
    border-color: rgba(0,176,80,0.15);
}
.eco-pillar-card-amber:hover { border-color: rgba(255,183,77,0.15); }
.eco-pillar-card-lime:hover { border-color: rgba(93,245,88,0.15); }
.eco-pillar-card-blue:hover { border-color: rgba(100,180,255,0.15); }
.eco-pillar-card-purple:hover { border-color: rgba(180,130,255,0.15); }
.eco-pillar-card-amber:hover .eco-pillar-icon { background: rgba(255,183,77,0.12); transform: scale(1.05); }
.eco-pillar-card-lime:hover .eco-pillar-icon { background: rgba(93,245,88,0.12); transform: scale(1.05); }
.eco-pillar-card-blue:hover .eco-pillar-icon { background: rgba(100,180,255,0.12); transform: scale(1.05); }
.eco-pillar-card-purple:hover .eco-pillar-icon { background: rgba(180,130,255,0.12); transform: scale(1.05); }
.eco-pillar-card-orb {
    position: absolute; width: 120px; height: 120px; border-radius: 50%;
    pointer-events: none;
}
.eco-pillar-card-orb-tr { top: -40px; right: -40px; }
.eco-pillar-card-orb-tl { top: -40px; left: -40px; }
.eco-pillar-card-orb-br { bottom: -40px; right: -40px; }
.eco-pillar-card-orb-bl { bottom: -40px; left: -40px; }
.eco-pillar-card-orb-amber { background: radial-gradient(circle, rgba(255,183,77,0.04), transparent 70%); }
.eco-pillar-card-orb-lime { background: radial-gradient(circle, rgba(93,245,88,0.04), transparent 70%); }
.eco-pillar-card-orb-blue { background: radial-gradient(circle, rgba(100,180,255,0.04), transparent 70%); }
.eco-pillar-card-orb-purple { background: radial-gradient(circle, rgba(180,130,255,0.04), transparent 70%); }
.eco-pillar-card-body { position: relative; z-index: 1; }
.eco-pillar-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; transition: all 0.3s ease;
}
.eco-pillar-icon:hover { background: rgba(0,176,80,0.12); transform: scale(1.05); }
.eco-pillar-icon-amber:hover { background: rgba(255,183,77,0.12); }
.eco-pillar-icon-lime:hover { background: rgba(93,245,88,0.12); }
.eco-pillar-icon-blue:hover { background: rgba(100,180,255,0.12); }
.eco-pillar-icon-purple:hover { background: rgba(180,130,255,0.12); }
.eco-pillar-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eco-pillar-icon-stroke-amber { stroke: #FFB74D; }
.eco-pillar-icon-stroke-lime { stroke: #5DF558; }
.eco-pillar-icon-stroke-blue { stroke: #64B4FF; }
.eco-pillar-icon-stroke-purple { stroke: #B482FF; }
.eco-pillar-label {
    font-size: 0.55rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; font-family: var(--font-heading);
}
.eco-pillar-label-amber { color: rgba(255,183,77,0.5); }
.eco-pillar-label-lime { color: rgba(93,245,88,0.5); }
.eco-pillar-label-blue { color: rgba(100,180,255,0.5); }
.eco-pillar-label-purple { color: rgba(180,130,255,0.5); }
.eco-pillar-title { font-size: 1rem; color: #fff; margin: 8px 0 6px; }
.eco-pillar-desc {
    font-size: 0.8125rem; color: rgba(255,255,255,0.45); line-height: 1.7;
}
.eco-pillar-card-footer {
    margin-top: 16px; display: flex; align-items: center; gap: 10px;
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.04);
}
.eco-pillar-card-price {
    font-size: 0.65rem; color: rgba(0,176,80,0.6); font-weight: 600;
}
.eco-pillar-card-price-amber { color: rgba(255,183,77,0.6); }
.eco-pillar-card-price-lime { color: rgba(93,245,88,0.6); }
.eco-pillar-card-price-blue { color: rgba(100,180,255,0.6); }
.eco-pillar-card-price-purple { color: rgba(180,130,255,0.6); }
.eco-pillar-card-link {
    font-size: 0.75rem; font-weight: 600; display: inline-flex;
    align-items: center; gap: 4px; margin-left: auto;
}
.eco-pillar-card-link-amber { color: rgba(255,183,77,0.7); }
.eco-pillar-card-link-lime { color: rgba(93,245,88,0.7); }
.eco-pillar-card-link-blue { color: rgba(100,180,255,0.7); }
.eco-pillar-card-link-purple { color: rgba(180,130,255,0.7); }
.eco-pillar-card-link svg, .eco-pillar-card-footer a svg { width: 12px; height: 12px; }

/* ── Marketplace Spotlight ── */
.eco-market-pt { position: relative; overflow: hidden; }
.eco-market-bg {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(0,176,80,0.015) 50%, var(--bg) 100%);
    pointer-events: none;
}
.eco-market-inner { position: relative; z-index: 1; }
.eco-market-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.eco-market-title { margin-bottom: 20px; }
.eco-market-desc {
    font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.8;
    margin-bottom: 28px;
}
.eco-market-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.eco-market-feature {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-radius: 12px; background: rgba(0,176,80,0.05);
    border: 1px solid rgba(0,176,80,0.08);
}
.eco-market-feature svg { width: 16px; height: 16px; fill: none; stroke: #00B050; stroke-width: 2; }
.eco-market-feature-text { font-size: 0.85rem; color: var(--text-secondary); }
.eco-market-cta .btn { border-radius: 999px; }
.eco-market-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.eco-market-card {
    border-radius: 16px; overflow: hidden; position: relative;
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    flex-direction: column; text-align: center; padding: 24px;
    background: linear-gradient(145deg, #0D2818, #132E1C);
    border: 1px solid rgba(0,176,80,0.06);
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.eco-market-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,176,80,0.08); }
.eco-market-card-lime { border-color: rgba(93,245,88,0.06); }
.eco-market-card-lime:hover { box-shadow: 0 12px 40px rgba(93,245,88,0.08); }
.eco-market-card-amber { border-color: rgba(255,183,77,0.06); }
.eco-market-card-amber:hover { box-shadow: 0 12px 40px rgba(255,183,77,0.08); }
.eco-market-card-cyan { border-color: rgba(0,200,200,0.06); }
.eco-market-card-cyan:hover { box-shadow: 0 12px 40px rgba(0,200,200,0.08); }
.eco-market-card-icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.eco-market-card-icon svg { width: 24px; height: 24px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eco-market-card-icon-green { background: rgba(0,176,80,0.1); }
.eco-market-card-icon-green svg { stroke: #00B050; }
.eco-market-card-icon-lime { background: rgba(93,245,88,0.1); }
.eco-market-card-icon-lime svg { stroke: #5DF558; }
.eco-market-card-icon-amber { background: rgba(255,183,77,0.1); }
.eco-market-card-icon-amber svg { stroke: #FFB74D; }
.eco-market-card-icon-cyan { background: rgba(0,200,200,0.1); }
.eco-market-card-icon-cyan svg { stroke: #00C8C8; }
.eco-market-card-title { font-size: 0.75rem; color: #fff; font-weight: 600; }
.eco-market-card-sub { font-size: 0.6rem; color: rgba(255,255,255,0.4); }

/* ── Ecosystem Flow ── */
.eco-flow-heading { text-align: center; margin-bottom: 56px; }
.eco-flow-heading .section-title { color: #fff; }
.eco-flow-heading .section-subtitle { margin: 0 auto; color: rgba(255,255,255,0.5); }
.eco-flow-steps {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 12px;
    position: relative; margin-bottom: 40px;
}
.eco-flow-step { text-align: center; position: relative; }
.eco-flow-step-icon {
    width: 70px; height: 70px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.eco-flow-step-icon-green {
    background: linear-gradient(135deg, rgba(0,176,80,0.15), rgba(0,176,80,0.04));
    border: 1px solid rgba(0,176,80,0.15);
}
.eco-flow-step-icon-green svg { stroke: #00B050; }
.eco-flow-step-icon-lime {
    background: linear-gradient(135deg, rgba(93,245,88,0.15), rgba(93,245,88,0.04));
    border: 1px solid rgba(93,245,88,0.15);
}
.eco-flow-step-icon-lime svg { stroke: #5DF558; }
.eco-flow-step-icon-amber {
    background: linear-gradient(135deg, rgba(255,183,77,0.15), rgba(255,183,77,0.04));
    border: 1px solid rgba(255,183,77,0.15);
}
.eco-flow-step-icon-amber svg { stroke: #FFB74D; }
.eco-flow-step-icon svg { width: 28px; height: 28px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eco-flow-step-title { font-size: 0.8125rem; color: #fff; margin-bottom: 4px; }
.eco-flow-step-desc {
    font-size: 0.65rem; color: rgba(255,255,255,0.35); line-height: 1.6;
}
.eco-flow-arrow { display: flex; align-items: center; justify-content: center; }
.eco-flow-arrow svg { width: 28px; height: 28px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eco-flow-arrow-green svg { stroke: rgba(0,176,80,0.3); }
.eco-flow-arrow-lime svg { stroke: rgba(93,245,88,0.3); }
.eco-flow-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 20px; }
.eco-flow-card {
    position: relative; border-radius: 16px; padding: 32px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
    text-align: center;
}
.eco-flow-card-icon {
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.eco-flow-card-icon svg { width: 20px; height: 20px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eco-flow-card-icon-green { background: rgba(0,176,80,0.1); }
.eco-flow-card-icon-green svg { stroke: #00B050; }
.eco-flow-card-icon-lime { background: rgba(93,245,88,0.1); }
.eco-flow-card-icon-lime svg { stroke: #5DF558; }
.eco-flow-card-icon-amber { background: rgba(255,183,77,0.1); }
.eco-flow-card-icon-amber svg { stroke: #FFB74D; }
.eco-flow-card-title { font-size: 0.9rem; color: #fff; margin-bottom: 6px; }
.eco-flow-card-desc {
    font-size: 0.75rem; color: rgba(255,255,255,0.45); line-height: 1.7;
}

/* ── Built for Everyone ── */
.eco-roles-bg {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(0,176,80,0.02) 50%, var(--bg) 100%);
    pointer-events: none;
}
.eco-roles-inner { position: relative; z-index: 1; }
.eco-roles-heading { text-align: center; margin-bottom: 56px; }
.eco-roles-heading .section-subtitle { margin: 0 auto; }

/* ── Roadmap ── */
.eco-roadmap-bg {
    position: absolute; top: -100px; right: -100px;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%);
    pointer-events: none;
}
.eco-roadmap-heading { text-align: center; margin-bottom: 56px; }
.eco-roadmap-heading .section-label { color: #00B050; }
.eco-roadmap-heading .section-subtitle { margin: 0 auto; color: rgba(255,255,255,0.5); }
.eco-roadmap-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.eco-roadmap-card {
    border-radius: 16px; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04); padding: 32px;
    position: relative; overflow: hidden;
}
.eco-roadmap-orb {
    position: absolute; top: -20px; right: -20px;
    width: 80px; height: 80px; border-radius: 50%;
}
.eco-roadmap-orb-green { background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%); }
.eco-roadmap-orb-lime { background: radial-gradient(circle, rgba(93,245,88,0.06), transparent 70%); }
.eco-roadmap-orb-amber { background: radial-gradient(circle, rgba(255,183,77,0.06), transparent 70%); }
.eco-roadmap-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 0.6rem; font-weight: 600; font-family: var(--font-heading);
    margin-bottom: 16px;
}
.eco-roadmap-badge-green {
    background: rgba(0,176,80,0.15); border: 1px solid rgba(0,176,80,0.2); color: #00B050;
}
.eco-roadmap-badge-lime {
    background: rgba(93,245,88,0.15); border: 1px solid rgba(93,245,88,0.2); color: #5DF558;
}
.eco-roadmap-badge-amber {
    background: rgba(255,183,77,0.15); border: 1px solid rgba(255,183,77,0.2); color: #FFB74D;
}
.eco-roadmap-title { font-size: 1.05rem; color: #fff; margin-bottom: 8px; }
.eco-roadmap-desc {
    font-size: 0.8125rem; color: rgba(255,255,255,0.45); line-height: 1.7;
}
.eco-roadmap-bar {
    margin-top: 14px; width: 100%; height: 3px; border-radius: 99px;
    background: rgba(255,255,255,0.04); overflow: hidden;
}
.eco-roadmap-bar-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #00B050, rgba(0,176,80,0.2));
}
.eco-roadmap-bar-fill-65 { width: 65%; }
.eco-roadmap-bar-fill-30 {
    width: 30%; background: linear-gradient(90deg, #5DF558, rgba(93,245,88,0.2));
}
.eco-roadmap-bar-fill-15 {
    width: 15%; background: linear-gradient(90deg, #FFB74D, rgba(255,183,77,0.2));
}

/* ── Final CTA ── */
.eco-final {
    padding: 0; position: relative; overflow: hidden;
    background: url('/static/images/futuristicbg.png') center center / cover no-repeat;
    background-attachment: fixed; min-height: 560px;
    display: flex; align-items: center;
}
.eco-final-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,40,24,0.1) 0%, rgba(13,40,24,0.01) 50%, rgba(13,40,24,0.06) 100%);
    pointer-events: none;
}
.eco-final-glow {
    position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,176,80,0.2), transparent);
    pointer-events: none;
}
.eco-final-scanline {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(0,176,80,0.01) 80px, rgba(0,176,80,0.01) 81px);
    pointer-events: none;
}
.eco-final-ring {
    position: absolute; border-radius: 50%; pointer-events: none;
    border: 1px solid rgba(0,176,80,0.06);
    animation: float 10s ease-in-out infinite;
}
.eco-final-ring-1 { top: 8%; right: 5%; width: 180px; height: 180px; }
.eco-final-ring-2 {
    top: 12%; right: 9%; width: 140px; height: 140px;
    border: 1px dashed rgba(0,176,80,0.04);
    animation: float 12s ease-in-out infinite 1s;
}
.eco-final-ring-3 {
    bottom: 15%; left: 4%; width: 100px; height: 100px;
    animation: float 9s ease-in-out infinite 0.5s;
}
.eco-final-inner { position: relative; z-index: 1; width: 100%; }
.eco-final-content { text-align: center; padding: 120px 20px 100px; }
.eco-final-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 20px 6px 8px; border-radius: 999px;
    background: rgba(0,176,80,0.1); border: 1px solid rgba(0,176,80,0.12);
    margin-bottom: 28px;
}
.eco-final-badge-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #00B050;
    display: inline-block; animation: pulse-dot 2s ease-in-out infinite;
}
.eco-final-badge-text {
    font-family: var(--font-heading); font-size: 0.6rem; font-weight: 700;
    color: #00B050; text-transform: uppercase; letter-spacing: 0.1em;
}
.eco-final-title {
    font-size: clamp(2.2rem, 4vw, 3.2rem); color: #fff; margin-bottom: 16px;
    letter-spacing: -0.03em; line-height: 1.06;
    text-shadow: 0 2px 30px rgba(0,0,0,0.12);
}
.eco-final-title-gradient {
    background: linear-gradient(135deg, var(--accent) 0%, #87E8A0 40%, #fff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; text-shadow: 0 0 40px rgba(0,176,80,0.15);
}
.eco-final-desc {
    font-size: 1.0625rem; color: rgba(255,255,255,0.6); max-width: 500px;
    margin: 0 auto 40px; line-height: 1.8;
}
.eco-final-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.eco-final-actions .btn { border-radius: 999px; padding: 18px 44px; font-size: 1rem; }
.eco-final-actions .btn-accent { box-shadow: 0 4px 24px rgba(0,176,80,0.25); }
.eco-final-divider {
    width: 80px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,176,80,0.15), transparent);
    margin: 36px auto 32px;
}
.eco-final-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    max-width: 700px; margin: 0 auto;
}
.eco-final-stat {
    padding: 16px 8px; border-radius: 12px;
    background: rgba(13,40,24,0.2); border: 1px solid rgba(0,176,80,0.06);
    transition: all 0.4s ease;
}
.eco-final-stat:hover {
    background: rgba(0,176,80,0.06); border-color: rgba(0,176,80,0.15);
    transform: translateY(-2px);
}
.eco-final-stat-lime { border-color: rgba(93,245,88,0.06); }
.eco-final-stat-lime:hover { background: rgba(93,245,88,0.06); border-color: rgba(93,245,88,0.15); }
.eco-final-stat-amber { border-color: rgba(255,183,77,0.06); }
.eco-final-stat-amber:hover { background: rgba(255,183,77,0.06); border-color: rgba(255,183,77,0.15); }
.eco-final-stat-blue { border-color: rgba(100,180,255,0.06); }
.eco-final-stat-blue:hover { background: rgba(100,180,255,0.06); border-color: rgba(100,180,255,0.15); }
.eco-final-stat-value {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem;
    color: #00B050; line-height: 1; letter-spacing: -0.02em;
}
.eco-final-stat-value-lime { color: #5DF558; }
.eco-final-stat-value-amber { color: #FFB74D; }
.eco-final-stat-value-blue { color: #64B4FF; }
.eco-final-stat-label {
    font-size: 0.6rem; color: rgba(255,255,255,0.35); margin-top: 4px;
    text-transform: uppercase; letter-spacing: 0.06em;
}
@media (max-width: 768px) {
    .eco-stats-grid { grid-template-columns: 1fr 1fr; }
    .eco-pillar-hero-grid { grid-template-columns: 1fr; }
    .eco-pillars-grid { grid-template-columns: 1fr 1fr; }
    .eco-market-grid { grid-template-columns: 1fr; gap: 32px; }
    .eco-market-cards { grid-template-columns: 1fr 1fr; }
    .eco-flow-steps { grid-template-columns: 1fr 1fr 1fr; }
    .eco-flow-cards { grid-template-columns: 1fr; }
    .eco-roadmap-grid { grid-template-columns: 1fr; }
    .eco-final-stats { grid-template-columns: repeat(2, 1fr); }
    .eco-pillars-inner { padding: 0 16px; }
}
@media (max-width: 480px) {
    .eco-pillars-grid { grid-template-columns: 1fr; }
    .eco-market-cards { grid-template-columns: 1fr; }
    .eco-flow-steps { grid-template-columns: 1fr; }
    .eco-flow-arrow { display: none; }
}

/* ═══════════════════════════════════════════
   STATIONS PAGE STYLES
   ═══════════════════════════════════════════ */

/* ── Stations Hero ── */
.stations-hero { padding: 140px 0 60px; position: relative; overflow: hidden; }
.stations-hero-bg { position: absolute; inset: 0; }
.stations-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stations-hero-inner { position: relative; z-index: 1; }
.stations-hero-text-wrap { max-width: 680px; }
.stations-hero-title { font-size: clamp(2rem,3.8vw,3rem); color: #fff; line-height: 1.05; margin-bottom: 14px; }
.stations-hero-title span { opacity: 0.95; }
.stations-hero-desc { font-size: 1rem; color: rgba(255,255,255,0.5); line-height: 1.8; margin-bottom: 24px; max-width: 500px; }
.stations-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.stations-hero-filter-bar { margin-bottom: 28px; }
.stations-hero-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.search-wrap-btn { border: none; outline: none; background: var(--accent); color: #fff; padding: 10px 24px; font-size: 0.8125rem; font-weight: 600; font-family: var(--font-body); cursor: pointer; border-radius: 999px; margin: 4px; flex-shrink: 0; }

/* ── Search Wrap ── */
.search-wrap { display: flex; gap: 0; max-width: 480px; width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; backdrop-filter: blur(12px); }
.search-wrap input { flex: 1; border: none; outline: none; padding: 14px 6px 14px 20px; font-family: var(--font-body); font-size: 0.875rem; color: #fff; background: transparent; min-width: 0; }
.search-wrap input::placeholder { color: rgba(255,255,255,0.3); }

/* ── Hero Glow ── */
.hero-glow { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,40,24,0.7) 0%, transparent 50%, rgba(13,40,24,0.3) 100%); }
.hero-glow::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(0deg, rgba(13,40,24,0.5) 0%, transparent 100%); }

/* ── Station Hero Decorations ── */
.station-hero-decoration,
.station-hero-decoration2 { position: absolute; inset: 0; pointer-events: none; }

/* ── Live Badge ── */
.live-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,176,80,0.12); border: 1px solid rgba(0,176,80,0.2); padding: 6px 16px; border-radius: 100px; font-family: var(--font-heading); font-size: 0.65rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; backdrop-filter: blur(8px); margin-bottom: 24px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse-dot 1.8s ease-in-out infinite; box-shadow: 0 0 10px rgba(0,176,80,0.5); display: inline-block; }

/* ── Filter Pills ── */
.filter-pill { display: inline-flex; align-items: center; padding: 7px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.08); background: transparent; color: rgba(255,255,255,0.4); font-size: 0.72rem; font-weight: 500; cursor: pointer; transition: all 0.25s ease; font-family: var(--font-body); }
.filter-pill:hover { border-color: var(--accent); color: var(--accent); }
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,176,80,0.25); }

/* ── Hero Stat Item ── */
.hero-stat-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(8px); }
.hero-stat-item .num { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1; }
.hero-stat-item .lbl { font-size: 0.65rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Sort Bar ── */
.sort-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sort-btn { padding: 7px 18px; border-radius: 999px; border: 1.5px solid var(--border-color); background: transparent; color: var(--text-secondary); font-size: 0.72rem; font-weight: 500; cursor: pointer; transition: var(--transition); font-family: var(--font-body); display: flex; align-items: center; gap: 6px; }
.sort-btn:hover { border-color: var(--accent); color: var(--accent); }
.sort-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,176,80,0.25); }

/* ── No Results Show ── */
.no-results { text-align: center; padding: 80px 20px; color: rgba(255,255,255,0.3); display: none; }
.no-results.show { display: block; }

/* ── Station Cards (JS-rendered) ── */
.station-card { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(165deg, #0D2818, #132E1C); box-shadow: 0 4px 24px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.22,1,0.36,1); cursor: pointer; }
.station-card .sc-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 16px 16px 0 0; transition: opacity 0.4s ease; pointer-events: none; }
.station-card[data-status="available"] .sc-top-bar { background: linear-gradient(90deg, #00B050, rgba(0,176,80,0.3)); }
.station-card[data-status="busy"] .sc-top-bar { background: linear-gradient(90deg, #F4B400, rgba(244,180,0,0.3)); }
.station-card[data-status="offline"] .sc-top-bar { background: linear-gradient(90deg, #6B7280, rgba(107,114,128,0.3)); }
.station-card .sc-glow { position: absolute; top: -20px; right: -20px; width: 140px; height: 140px; border-radius: 50%; pointer-events: none; opacity: 0.06; transition: opacity 0.6s ease; }
.station-card[data-status="available"] .sc-glow { background: radial-gradient(circle, rgba(0,176,80,0.08), transparent 60%); }
.station-card[data-status="busy"] .sc-glow { background: radial-gradient(circle, rgba(244,180,0,0.08), transparent 60%); }
.station-card .sc-watermark { position: absolute; bottom: -4px; right: -2px; font-family: var(--font-heading); font-size: 4rem; font-weight: 800; line-height: 0.8; pointer-events: none; user-select: none; }
.station-card[data-status="available"] .sc-watermark { color: rgba(0,176,80,0.04); }
.station-card[data-status="busy"] .sc-watermark { color: rgba(244,180,0,0.04); }
.station-card[data-status="offline"] .sc-watermark { color: rgba(107,114,128,0.04); }
.station-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,176,80,0.08), 0 20px 60px rgba(0,0,0,0.06); }
.station-card-inner { padding: 24px 24px 20px; position: relative; z-index: 1; }
.station-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.station-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,176,80,0.1); border: 1px solid rgba(0,176,80,0.08); color: var(--accent); }
.station-card-header h3 { font-size: 0.9375rem; color: #fff; margin: 0; letter-spacing: -0.01em; }
.station-address { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin: 0 0 12px; display: flex; align-items: center; gap: 5px; }
.station-connectors { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.connector-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(0,176,80,0.08); border: 1px solid rgba(0,176,80,0.06); color: rgba(0,176,80,0.7); font-family: var(--font-heading); }
.station-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 14px; }
.price-display small { font-weight: 400; font-size: 0.6875rem; color: rgba(255,255,255,0.25); }
.port-display { display: flex; align-items: center; gap: 8px; }
.port-display span { font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.4); }
.port-track { width: 60px; height: 4px; border-radius: 100px; background: rgba(255,255,255,0.06); overflow: hidden; }
.port-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--accent), #00E060); }
.station-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.station-location { font-size: 0.72rem; color: rgba(255,255,255,0.25); display: flex; align-items: center; gap: 4px; }
.direction-btn { padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.45); font-size: 0.65rem; font-weight: 600; font-family: var(--font-heading); cursor: pointer; transition: all 0.25s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.direction-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6rem; font-weight: 600; padding: 3px 10px; border-radius: 100px; font-family: var(--font-heading); letter-spacing: 0.02em; }
.status-badge.available { background: rgba(0,176,80,0.1); color: var(--accent); }
.status-badge.busy { background: rgba(244,180,0,0.1); color: #F4B400; }
.status-badge.offline { background: rgba(107,114,128,0.1); color: #9CA3AF; }

/* ── Station Map ── */
#stationMap { height: 460px; border-radius: var(--radius-lg); z-index: 0; }
.locate-btn { position: absolute; right: 16px; top: 16px; z-index: 1000; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.1); transition: var(--transition); color: #555; }
.locate-btn:hover { background: #fff; transform: scale(1.05); color: var(--accent); }

/* ── Leaflet Overrides ── */
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important; }
.leaflet-popup-content { margin: 14px 18px; font-size: 0.8125rem; }
.leaflet-popup-content h4 { font-family: var(--font-heading); margin: 0 0 2px; font-size: 0.9375rem; }
.leaflet-popup-content p { margin: 2px 0; color: var(--text-secondary); }
.leaflet-popup-tip { box-shadow: none !important; }
.leaflet-control-zoom a { background: rgba(255,255,255,0.9) !important; color: #333 !important; border-radius: 8px !important; margin: 4px !important; width: 36px !important; height: 36px !important; line-height: 36px !important; font-size: 18px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important; }
.leaflet-control-zoom { border: none !important; margin-right: 16px !important; margin-bottom: 16px !important; }
.leaflet-control-attribution { font-size: 9px !important; }

/* ── Map Legend ── */
.map-legend { font-size: 0.75rem; color: var(--text-secondary); display: flex; gap: 14px; }
.map-legend-item { display: flex; align-items: center; gap: 5px; }
.map-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.map-legend-dot-available { background: var(--accent); box-shadow: 0 0 6px rgba(0,176,80,0.4); }
.map-legend-dot-busy { background: #F4B400; box-shadow: 0 0 6px rgba(244,180,0,0.4); }
.map-legend-dot-offline { background: var(--text-tertiary); }

/* ── Map Section ── */
.map-section-pad { padding-top: 40px; }
.map-section-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }

/* ── Directory Section ── */
.dir-section { position: relative; overflow: hidden; }
.dir-bg-absolute { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,176,80,0.03) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; }
.dir-glow-top { position: absolute; top: -80px; right: -80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 60%); pointer-events: none; }
.dir-glow-bottom { position: absolute; bottom: -60px; left: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(100,180,255,0.05), transparent 60%); pointer-events: none; }
.dir-header { margin-bottom: 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.dir-grid { grid-template-columns: 1fr 1fr; }
.sort-svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ── No Results ── */
.no-results-icon { width: 48px; height: 48px; fill: none; stroke: var(--text-tertiary); stroke-width: 1.5; margin-bottom: 16px; }
.no-results-title { font-size: 1.125rem; margin-bottom: 6px; }
.no-results-desc { font-size: 0.875rem; }

/* ── CTA Section ── */
.stations-cta { margin-top: 48px; margin-bottom: 100px; }
.cta-card-wrap { position: relative; border-radius: 24px; overflow: hidden; background: #0A1F12; }
.cta-bg-img { position: absolute; inset: 0; }
.cta-bg-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.15; }
.cta-bg-gradient { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,40,24,0.92) 0%, rgba(10,31,18,0.7) 50%, rgba(13,40,24,0.9) 100%); }
.cta-corner { position: absolute; width: 40px; height: 40px; border-radius: 4px; pointer-events: none; }
.cta-corner-tl { top: 24px; left: 24px; border-top: 2px solid rgba(0,176,80,0.15); border-left: 2px solid rgba(0,176,80,0.15); border-radius: 4px 0 0 0; }
.cta-corner-tr { top: 24px; right: 24px; border-top: 2px solid rgba(0,176,80,0.15); border-right: 2px solid rgba(0,176,80,0.15); border-radius: 0 4px 0 0; }
.cta-corner-bl { bottom: 24px; left: 24px; border-bottom: 2px solid rgba(0,176,80,0.15); border-left: 2px solid rgba(0,176,80,0.15); border-radius: 0 0 0 4px; }
.cta-corner-br { bottom: 24px; right: 24px; border-bottom: 2px solid rgba(0,176,80,0.15); border-right: 2px solid rgba(0,176,80,0.15); border-radius: 0 0 4px 0; }
.cta-tech-ring { position: absolute; top: 50%; left: 5%; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(0,176,80,0.06); transform: translateY(-50%); pointer-events: none; animation: breathe 5s ease-in-out infinite; }
.cta-tech-ring-2 { position: absolute; top: 50%; left: 5%; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(0,176,80,0.04); transform: translateY(-50%); pointer-events: none; animation: breathe 5s ease-in-out infinite 1s; }
.cta-scanline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,176,80,0.08), transparent); pointer-events: none; animation: scanLine 4s linear infinite; }
.cta-glow-bottom { position: absolute; bottom: -60px; right: -40px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.08), transparent 60%); pointer-events: none; }
.cta-glow-top { position: absolute; top: -40px; left: 30%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(100,180,255,0.05), transparent 60%); pointer-events: none; }
.cta-inner { position: relative; z-index: 1; padding: 64px 56px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.cta-text-content { text-align: left; }
.cta-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px; border-radius: 999px; background: rgba(0,176,80,0.08); border: 1px solid rgba(0,176,80,0.12); margin-bottom: 20px; backdrop-filter: blur(8px); }
.cta-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(0,176,80,0.5); animation: pulse-dot 1.8s ease-in-out infinite; }
.cta-badge-text { font-size: 0.6rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.cta-title { font-size: clamp(1.5rem,2.8vw,2.2rem); color: #fff; margin: 0 0 14px; line-height: 1.1; letter-spacing: -0.02em; }
.cta-title-accent { background: linear-gradient(135deg, #00B050, #5DF558); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cta-desc { color: rgba(255,255,255,0.4); font-size: 0.9375rem; max-width: 480px; margin: 0 0 28px; line-height: 1.7; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-action-btn { border-radius: 999px; padding: 12px 28px; font-size: 0.8125rem; }
.cta-grid-right { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cta-stat-card { padding: 20px; border-radius: 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); backdrop-filter: blur(12px); }
.cta-stat-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.cta-stat-value-green { color: #00E060; }
.cta-stat-value-lime { color: #5DF558; }
.cta-stat-value-blue { color: #64B4FF; }
.cta-stat-value-amber { color: #FFB74D; }
.cta-stat-suffix { font-size: 0.7rem; color: rgba(255,255,255,0.2); font-weight: 400; }
.cta-stat-label { font-size: 0.6rem; color: rgba(255,255,255,0.25); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

@keyframes scanLine {
  0% { transform: translateY(0); }
  100% { transform: translateY(480px); }
}

/* ── Station Map Marker ── */
.station-marker-dot {
    width: 24px; height: 24px;
    border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ── Station Popup ── */
.sp-wrap { min-width: 180px; }
.sp-name { margin: 0 0 2px; font-size: 0.9375rem; }
.sp-address { margin: 0 0 6px; font-size: 0.75rem; color: #888; }
.sp-connectors { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.sp-tag {
    font-size: 0.65rem; background: rgba(0,176,80,0.08); color: #00B050;
    padding: 2px 10px; border-radius: 100px; font-weight: 600;
}
.sp-footer {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8125rem; padding-top: 6px; border-top: 1px solid #eee;
}
.sp-price { font-weight: 700; }
.sp-status { font-weight: 600; }

/* ── Locate Button Spinner ── */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.svg-spin { animation: spin 1s linear infinite; }

/* ── Station Card Inline SVG fix ── */
.station-card-svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.station-header-inner { flex: 1; min-width: 0; }
.station-header-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.status-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.station-price-parking { font-size: 0.6rem; color: rgba(255,255,255,0.2); margin-left: 8px; }
.direction-svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.location-icon { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ── Responsive ── */
@media (max-width: 768px) {
  #stationMap { height: 300px; }
  .hero-stat-item .num { font-size: 1.125rem; }
  .hero-stat-item { padding: 10px 14px; }
  .station-card-inner { padding: 16px 18px; }
  .station-meta { flex-direction: column; align-items: flex-start; }
  .cta-inner { padding: 40px 24px; grid-template-columns: 1fr; gap: 24px; }
  .cta-grid-right { grid-template-columns: 1fr 1fr; }
  .stations-hero { padding: 110px 0 40px; }
  .stations-hero-title { font-size: clamp(1.75rem, 5vw, 2.25rem); }
  .dir-grid { grid-template-columns: 1fr; }
  .stations-hero-stats { gap: 8px; }
  .cta-stat-card { padding: 16px; }
  .quick-filters { gap: 8px; }
  .quick-filters .filter-pill { padding: 6px 14px; font-size: 0.65rem; }
}
@media (max-width: 480px) {
  #stationMap { height: 240px; }
  .cta-inner { padding: 32px 18px; grid-template-columns: 1fr; gap: 16px; }
  .cta-grid-right { grid-template-columns: 1fr; }
  .stations-hero { padding: 100px 0 30px; }
  .stations-hero-stats { flex-direction: column; }
  .quick-filters { gap: 6px; }
  .quick-filters .filter-pill { padding: 5px 12px; font-size: 0.6rem; }
}

/* ═══════════════════════════════════════════
   TOKEN PAGE STYLES
   ═══════════════════════════════════════════ */

/* ── Token Hero ── */
.token-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 130px 0 70px;
    background: linear-gradient(135deg, #0D2818 0%, #1A3A2A 50%, #0f2e1e 100%);
}
.token-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,176,80,0.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0,176,80,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 80%, rgba(0,176,80,0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.token-hero .orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
    opacity: 0.25;
}
.token-hero .orb-1 { width: 500px; height: 500px; background: rgba(0,176,80,0.12); top: -100px; right: -100px; animation: orb-float 8s ease-in-out infinite; }
.token-hero .orb-2 { width: 350px; height: 350px; background: rgba(0,176,80,0.06); bottom: -80px; left: 10%; animation: orb-float 10s ease-in-out infinite reverse; }
.token-hero .orb-3 { width: 200px; height: 200px; background: rgba(0,176,80,0.08); top: 30%; right: 15%; animation: orb-float 6s ease-in-out infinite 2s; }
@keyframes orb-float { 0%, 100% { transform: translateY(0) scale(1); } 33% { transform: translateY(-30px) scale(1.05); } 66% { transform: translateY(20px) scale(0.95); } }
.token-hero .grid-lines {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(0,176,80,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,176,80,0.04) 1px, transparent 1px);
    background-size: 60px 60px; z-index: 0; pointer-events: none;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
}
.token-hero .hero-content { position: relative; z-index: 1; min-width: 0; }

/* ── Price Display ── */
.price-display { font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; margin-bottom: 6px; }
.price-change { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; padding: 4px 14px; border-radius: 999px; font-family: var(--font-heading); }
.price-change.up { background: rgba(0,176,80,0.15); color: var(--accent); }
.price-change.down { background: rgba(255,68,68,0.1); color: #ff4444; }

/* ── Hero Stat Grid ── */
.hero-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.06); border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255,255,255,0.06); margin-top: 32px; max-width: 520px; }
.hero-stat-item { padding: 18px 16px; background: rgba(255,255,255,0.03); text-align: center; }
.hero-stat-item .value { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: #fff; }
.hero-stat-item .label { font-size: 0.6rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* ── Token Hero Visual ── */
.token-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; width: 340px; max-width: 100%; aspect-ratio: 1; overflow: hidden; }
.token-glow-ring { position: absolute; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(0,176,80,0.1); animation: spin-slow 20s linear infinite; }
.token-glow-ring:nth-child(2) { width: 240px; height: 240px; animation-direction: reverse; animation-duration: 15s; border-color: rgba(0,176,80,0.15); }
.token-glow-ring:nth-child(3) { width: 160px; height: 160px; animation-duration: 10s; border-color: rgba(0,176,80,0.2); }
.token-center-icon { width: 100px; height: 100px; background: radial-gradient(circle at 30% 30%, #00B050, #0D2818); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 2rem; color: #fff; box-shadow: 0 0 60px rgba(0,176,80,0.25); position: relative; z-index: 1; }

/* ── Tokenomics Bar ── */
.tokenomics-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.tokenomics-bar .bar-track { flex: 1; height: 8px; background: var(--border-light); border-radius: 100px; overflow: hidden; }
.tokenomics-bar .bar-fill { height: 100%; border-radius: 100px; width: 0; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.tokenomics-bar.visible .bar-fill { width: var(--pct) !important; }
.tokenomics-bar .bar-label { width: 100px; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
.tokenomics-bar .bar-pct { width: 48px; text-align: right; font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; color: var(--accent); flex-shrink: 0; }

/* ── Roadmap ── */
.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 16px 0; }
.roadmap-item { position: relative; background: #151A17; border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 24px 20px 22px; transition: all 0.4s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; word-break: break-word; }
.roadmap-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(0,176,80,0.3), transparent); border-radius: 18px 18px 0 0; opacity: 0; transition: opacity 0.4s ease; }
.roadmap-item:hover { transform: translateY(-4px); border-color: rgba(0,176,80,0.2); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
.roadmap-item:hover::before { opacity: 1; }
.roadmap-item.active { border-color: rgba(0,176,80,0.2); background: #0E1A12; }
.roadmap-item.active::before { opacity: 1; }
.roadmap-item .rm-date { font-size: 0.7rem; font-weight: 700; color: #6EE7B7; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-heading); margin-bottom: 10px; display: inline-block; background: rgba(0,176,80,0.1); padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(0,176,80,0.12); align-self: flex-start; }
.roadmap-item .rm-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 8px; font-family: var(--font-heading); line-height: 1.4; word-break: break-word; }
.roadmap-item .rm-desc { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.7; flex: 1; }
.roadmap-item.active .rm-desc { color: rgba(255,255,255,0.55); }

/* ── Use Case Card ── */
.use-case-card { text-align: center; padding: 0; border-radius: 18px; background: linear-gradient(165deg, #ffffff 0%, #fafcfa 50%, #ffffff 100%); box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 20px rgba(0,0,0,0.04); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; cursor: default; display: flex; flex-direction: column; word-break: break-word; }
.use-case-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, var(--uc-color1), var(--uc-color2), transparent 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.use-case-card:hover::before { opacity: 0.06; }
.use-case-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 48px rgba(0,0,0,0.08), 0 0 0 1px var(--uc-color1); }
.use-case-card .uc-top-bar { height: 4px; width: 100%; flex-shrink: 0; background: linear-gradient(90deg, var(--uc-color1), var(--uc-color2)); }
.use-case-card .uc-body { padding: 28px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.use-case-card .uc-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--uc-color1), var(--uc-color2)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); position: relative; }
.use-case-card .uc-icon::after { content: ''; position: absolute; inset: -3px; border-radius: 19px; background: inherit; opacity: 0.2; filter: blur(8px); z-index: -1; transition: var(--transition); }
.use-case-card:hover .uc-icon::after { opacity: 0.35; filter: blur(12px); }
.use-case-card:hover .uc-icon { transform: scale(1.08) translateY(-2px); }
.use-case-card .uc-icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.5; }
.use-case-card .uc-stat { font-family: var(--font-heading); font-size: 1.625rem; font-weight: 700; line-height: 1; margin-bottom: 2px; background: linear-gradient(135deg, var(--uc-color1), var(--uc-color2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.use-case-card .uc-stat-label { font-size: 0.55rem; color: rgba(0,0,0,0.3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; font-weight: 600; }
.use-case-card h3 { font-size: 0.9375rem; margin-bottom: 6px; color: var(--text-primary); }
.use-case-card p { font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.use-case-card .uc-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); transition: var(--transition); align-self: center; margin-top: auto; }
.use-case-card:hover .uc-link { color: var(--accent); gap: 10px; }
.use-case-card .uc-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: var(--transition); }
.use-case-card:hover .uc-link svg { transform: translateX(3px); }

/* ═══════════════════════════════════════════
   TOKEN PAGE — INLINE STYLE REPLACEMENTS
   ═══════════════════════════════════════════ */

/* ── Hero Section ── */
.tk-hero-container { position: relative; z-index: 1; width: 100%; }
.bento-grid.tk-hero-grid { grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 64px; }
.tk-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.tk-meta-text { font-size: 0.8125rem; color: rgba(255,255,255,0.35); font-family: var(--font-heading); }
.tk-hero-desc { font-size: 1.0625rem; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 480px; margin-bottom: 0; }
.tk-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.tk-hero-btn-accent { padding: 14px 36px; border-radius: 999px; }
.tk-hero-btn-ghost { padding: 14px 36px; border-radius: 999px; background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.1); }

/* ── Section Orbs ── */
.tk-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.tk-orb-1 { top: -100px; right: -60px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 70%); animation: floatOrb 8s ease-in-out infinite; }
.tk-orb-2 { bottom: -80px; left: -80px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(0,176,80,0.03), transparent 70%); animation: floatOrb 10s ease-in-out infinite 2s; }
.tk-orb-3 { top: -100px; right: -40px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,176,80,0.03), transparent 70%); animation: floatOrb 10s ease-in-out infinite; }
.tk-orb-4 { bottom: -60px; left: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 70%); animation: floatOrb 8s ease-in-out infinite 2s; }
.tk-orb-5 { top: -120px; right: -60px; width: 450px; height: 450px; background: radial-gradient(circle, rgba(0,176,80,0.05), transparent 70%); animation: floatOrb 10s ease-in-out infinite; }
.tk-orb-6 { bottom: -80px; left: -80px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(0,176,80,0.03), transparent 70%); animation: floatOrb 12s ease-in-out infinite 3s; }
.tk-orb-7 { top: 40%; right: 10%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(34,197,94,0.04), transparent 70%); animation: floatOrb 8s ease-in-out infinite 1s; }
.tk-orb-8 { top: -100px; left: -60px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,176,80,0.03), transparent 70%); }
.tk-orb-9 { bottom: -40px; right: -40px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 70%); }
.tk-orb-10 { top: -80px; right: -40px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 70%); animation: floatOrb 8s ease-in-out infinite; }
.tk-orb-11 { bottom: -60px; left: -60px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(0,176,80,0.03), transparent 70%); animation: floatOrb 10s ease-in-out infinite 2s; }

/* ── Section Headings ── */
.tk-tok-heading { text-align: center; margin-bottom: 48px; }
.tk-stake-heading { text-align: center; margin-bottom: 48px; }
.tk-earn-heading { text-align: center; margin-bottom: 48px; }
.tk-earn-heading .section-subtitle { color: rgba(255,255,255,0.5); }
.tk-road-heading { text-align: center; margin-bottom: 48px; }
.tk-use-heading { text-align: center; margin-bottom: 40px; }

/* ── Tokenomics Grid ── */
.bento-grid.tk-tokenomics-grid { grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 60px; }
.tk-chart-wrap { text-align: center; }
.tk-chart { max-width: 280px; width: 100%; height: auto; aspect-ratio: 1; }
.bar-fill-green { background: linear-gradient(90deg, #00B050, #00E060); --pct: 35%; }
.bar-fill-dark { background: linear-gradient(90deg, #0D2818, #1A3A2A); --pct: 25%; }
.bar-fill-gray { background: linear-gradient(90deg, #5F6368, #9AA0A6); --pct: 15%; }
.bar-fill-amber { background: linear-gradient(90deg, #F4B400, #FFD54F); --pct: 15%; }
.bar-fill-purple { background: linear-gradient(90deg, #7C4DFF, #B388FF); --pct: 10%; }

/* ── Staking Grid ── */
.tk-stake-section, .tk-earn-section, .tk-road-section, .tk-use-section { position: relative; overflow: hidden; }
.bento-grid.tk-stake-grid { grid-template-columns: 1fr 1.3fr; justify-content: space-between; gap: 48px; align-items: start; }

/* ── Console Panel ── */
.tk-console { position: relative; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, #0A1F12 0%, #0D2818 100%); border: 1px solid rgba(0,176,80,0.08); box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
.tk-console-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 40%, rgba(0,176,80,0.03), transparent 60%); pointer-events: none; }
.tk-console-topline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,176,80,0.12), transparent); pointer-events: none; }
.tk-console-header { display: flex; align-items: center; gap: 10px; padding: 20px 24px 0; position: relative; z-index: 1; }
.tk-dots { display: flex; gap: 6px; }
.tk-dot { width: 10px; height: 10px; border-radius: 50%; }
.tk-dot-red { background: #FF5F56; }
.tk-dot-yellow { background: #FFBD2E; }
.tk-dot-green { background: #27C93F; }
.tk-console-label { font-size: 0.6rem; color: rgba(255,255,255,0.15); font-family: var(--font-heading); letter-spacing: 0.04em; }
.tk-console-body { position: relative; z-index: 1; padding: 16px 24px 24px; }
.tk-apy-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.tk-apy-ring-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.tk-apy-ring-fill { transition: stroke-dashoffset 0.6s ease; }
.tk-apy-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tk-apy-num { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; color: #fff; line-height: 1; }
.tk-apy-sub { font-size: 0.5rem; color: rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 0.08em; }
.tk-stake-info { flex: 1; }
.tk-stake-label { font-size: 0.55rem; color: rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; font-weight: 600; }
.tk-stake-amount { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; margin-bottom: 2px; }
.tk-stake-value { font-size: 0.65rem; color: rgba(255,255,255,0.15); }
.tk-range-dark { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(255,255,255,0.06); border-radius: 100px; outline: none; }
.tk-range-dark::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 20px rgba(0,176,80,0.25); border: 3px solid #0D2818; }
.tk-range-dark::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid #0D2818; }
.tk-range-wrap { margin-bottom: 20px; }
.tk-range-labels { display: flex; justify-content: space-between; font-size: 0.5rem; color: rgba(255,255,255,0.1); margin-top: 6px; }
.tk-period-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tk-period-btn { text-align: center; padding: 10px 8px; border-radius: 12px; font-size: 0.7rem; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.3); cursor: pointer; transition: all 0.3s ease; font-family: var(--font-heading); }
.tk-period-pct { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.4); margin-top: 2px; }
.tk-period-btn-active { text-align: center; padding: 10px 8px; border-radius: 12px; font-size: 0.7rem; border: 1.5px solid var(--accent); background: rgba(0,176,80,0.08); color: #fff; cursor: pointer; transition: all 0.3s ease; font-family: var(--font-heading); box-shadow: 0 0 20px rgba(0,176,80,0.08); }
.tk-period-btn-active .tk-period-pct { color: var(--accent); }
.tk-earnings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; border-radius: 14px; background: rgba(0,176,80,0.03); border: 1px solid rgba(0,176,80,0.05); }
.tk-earnings-col { text-align: center; }
.tk-earnings-label { font-size: 0.5rem; color: rgba(255,255,255,0.15); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; font-weight: 600; }
.tk-earnings-value { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--accent); }
.tk-stake-btn { width: 100%; justify-content: center; margin-top: 14px; border-radius: 999px; padding: 12px; font-size: 0.8125rem; box-shadow: 0 4px 20px rgba(0,176,80,0.2); }

/* ── Tier Cards ── */
.tk-tier-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-content: start; }
.tk-tier-basic { position: relative; border-radius: 20px; overflow: hidden; background: #1A140E; border: 1px solid rgba(245,158,11,0.20); padding: 18px 22px; transition: all 0.4s cubic-bezier(0.22,1,0.36,1); }
.tk-tier-basic:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.40); }
.tk-tier-row { display: flex; align-items: center; gap: 14px; }
.tk-tier-icon-box { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-tier-icon-box svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tk-tier-icon-amber { background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.15); color: #F59E0B; }
.tk-tier-icon-green { background: rgba(0,176,80,0.10); border: 1px solid rgba(0,176,80,0.18); color: var(--accent); }
.tk-tier-icon-purple { background: rgba(168,85,247,0.10); border: 1px solid rgba(168,85,247,0.15); color: #A855F7; }
.tk-tier-content { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk-tier-name { font-size: 0.9rem; font-weight: 700; color: #fff; font-family: var(--font-heading); }
.tk-tier-rate-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.tk-tier-rate { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.tk-tier-rate-amber { color: #FCD34D; }
.tk-tier-rate-green { color: #6EE7B7; }
.tk-tier-rate-purple { color: #D8B4FE; }
.tk-tier-rate-label { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tk-tier-rate-label-amber { color: rgba(252,211,77,0.45); }
.tk-tier-rate-label-green { color: rgba(110,231,183,0.45); }
.tk-tier-rate-label-purple { color: rgba(216,180,254,0.45); }
.tk-tier-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tk-tier-tag { font-size: 0.55rem; padding: 2px 8px; border-radius: 999px; }
.tk-tier-tag-amber { color: #FDE68A; border: 1px solid rgba(245,158,11,0.15); background: rgba(245,158,11,0.08); }
.tk-tier-tag-green { color: #A7F3D0; border: 1px solid rgba(0,176,80,0.15); background: rgba(0,176,80,0.10); }
.tk-tier-tag-green-alt { color: #A7F3D0; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
.tk-tier-tag-purple { color: #E9D5FF; border: 1px solid rgba(168,85,247,0.15); background: rgba(168,85,247,0.08); }
.tk-tier-btn-amber { border-radius: 999px; padding: 8px 20px; font-size: 0.7rem; flex-shrink: 0; margin-left: auto; background: linear-gradient(135deg, #F59E0B, #D97706); color: #000; border: none; font-weight: 600; }
.tk-tier-btn-purple { border-radius: 999px; padding: 8px 20px; font-size: 0.7rem; flex-shrink: 0; margin-left: auto; background: linear-gradient(135deg, #A855F7, #7C3AED); color: #fff; border: none; font-weight: 600; }
.tk-tier-pro { position: relative; border-radius: 20px; overflow: hidden; background: #0A1A12; border: 1.5px solid var(--accent); padding: 18px 22px; transition: all 0.4s cubic-bezier(0.22,1,0.36,1); box-shadow: 0 4px 32px rgba(0,176,80,0.12); }
.tk-tier-pro:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(0,176,80,0.20), 0 0 0 1.5px var(--accent); }
.tk-tier-pro-badge { position: static; display: inline-block; background: linear-gradient(135deg, var(--accent), #5DF558); color: #000; padding: 2px 12px; border-radius: 999px; font-size: 0.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 4px 16px rgba(0,176,80,0.30); }
.tk-tier-pro-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.tk-tier-btn-pro { border-radius: 999px; padding: 8px 20px; font-size: 0.7rem; flex-shrink: 0; margin-left: auto; box-shadow: 0 4px 16px rgba(0,176,80,0.25); font-weight: 600; }
.tk-tier-advance { position: relative; border-radius: 20px; overflow: hidden; background: #120E1A; border: 1px solid rgba(168,85,247,0.20); padding: 18px 22px; transition: all 0.4s cubic-bezier(0.22,1,0.36,1); }
.tk-tier-advance:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(168,85,247,0.10); border-color: rgba(168,85,247,0.40); }
.tk-tier-icon-purple-box { width: 44px; height: 44px; border-radius: 14px; background: rgba(168,85,247,0.10); border: 1px solid rgba(168,85,247,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-tier-icon-purple-box svg { width: 20px; height: 20px; color: #A855F7; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tk-tier-name-advance { font-size: 0.9rem; font-weight: 700; color: #fff; font-family: var(--font-heading); }
.tk-tier-tag-purple-alt { font-size: 0.55rem; color: #E9D5FF; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(168,85,247,0.15); background: rgba(168,85,247,0.08); }

/* ── Earn Mechanics Section ── */
.tk-earn-grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.tk-earn-card { position: relative; overflow: hidden; border-radius: 24px; transition: all 0.5s cubic-bezier(0.22,1,0.36,1); }
.tk-earn-card-green { background: linear-gradient(160deg, rgba(10,35,16,0.5), rgba(8,25,12,0.7)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(34,197,94,0.08); }
.tk-earn-card-green:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(34,197,94,0.12), 0 0 0 1px rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.18); }
.tk-earn-card-green:hover .tk-ec-glow { opacity: 1; }
.tk-earn-card-accent { background: linear-gradient(160deg, rgba(8,30,18,0.5), rgba(6,22,12,0.7)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 2px solid var(--accent); }
.tk-earn-card-accent:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,176,80,0.15), 0 0 0 1px var(--accent); }
.tk-earn-card-accent:hover .tk-ec-glow { opacity: 1; }
.tk-earn-card-teal { background: linear-gradient(160deg, rgba(8,28,26,0.5), rgba(6,22,20,0.7)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(13,148,136,0.08); }
.tk-earn-card-teal:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(13,148,136,0.12), 0 0 0 1px rgba(13,148,136,0.15); border-color: rgba(13,148,136,0.18); }
.tk-earn-card-teal:hover .tk-ec-glow { opacity: 1; }
.tk-ec-glow { position: absolute; top: -40%; right: -30%; width: 200px; height: 200px; border-radius: 50%; pointer-events: none; transition: opacity 0.5s; opacity: 0; }
.tk-ec-glow-green { background: radial-gradient(circle, rgba(34,197,94,0.06), transparent 70%); }
.tk-ec-glow-accent { background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%); }
.tk-ec-glow-teal { background: radial-gradient(circle, rgba(13,148,136,0.06), transparent 70%); }
.tk-earn-header { display: flex; align-items: center; gap: 12px; padding: 24px 24px 0; margin-bottom: 14px; }
.tk-earn-icon-box { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tk-earn-icon-box svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tk-earn-icon-green { background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.06)); border: 1px solid rgba(34,197,94,0.12); color: #22C55E; }
.tk-earn-icon-emerald { background: linear-gradient(135deg, rgba(0,230,118,0.18), rgba(0,230,118,0.06)); border: 1px solid rgba(0,230,118,0.12); color: #00E676; }
.tk-earn-icon-teal { background: linear-gradient(135deg, rgba(13,148,136,0.18), rgba(13,148,136,0.06)); border: 1px solid rgba(13,148,136,0.12); color: #0D9488; }
.tk-earn-step { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-left: auto; }
.tk-earn-step-green { color: rgba(34,197,94,0.6); }
.tk-earn-step-emerald { color: rgba(0,230,118,0.6); }
.tk-earn-step-teal { color: rgba(13,148,136,0.6); }
.tk-earn-body { padding: 0 24px 24px; position: relative; z-index: 1; min-width: 0; word-break: break-word; }
.tk-earn-title { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1; }
.tk-earn-value-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tk-earn-value { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; }
.tk-earn-value-green { color: #22C55E; }
.tk-earn-value-emerald { color: #00E676; }
.tk-earn-value-teal { color: #0D9488; }
.tk-earn-value-sub { font-size: 0.6rem; color: rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 0.06em; }
.tk-earn-desc { font-size: 0.8125rem; color: rgba(255,255,255,0.45); line-height: 1.7; margin: 0; word-break: break-word; }
.tk-earn-best-badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 5px 22px; border-radius: 999px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; z-index: 2; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,176,80,0.3); }
.tk-roadmap { animation-delay: 0.2s; }
.tk-use-grid { gap: 20px; }

/* ── CTA Section ── */
.tk-cta-section { margin-top: 40px; margin-bottom: 80px; }
.tk-cta-card { position: relative; border-radius: 24px; overflow: hidden; background: #0A1F12; }
.tk-cta-bg { position: absolute; inset: 0; }
.tk-cta-bg-fill { width: 100%; height: 100%; background: linear-gradient(145deg, rgba(0,176,80,0.02), transparent); }
.tk-cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,40,24,0.94) 0%, rgba(10,31,18,0.7) 50%, rgba(13,40,24,0.9) 100%); }
.tk-cta-bracket { position: absolute; width: 40px; height: 40px; border-color: rgba(0,176,80,0.15); border-style: solid; pointer-events: none; }
.tk-cta-bracket-tl { top: 24px; left: 24px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.tk-cta-bracket-tr { top: 24px; right: 24px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.tk-cta-bracket-bl { bottom: 24px; left: 24px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.tk-cta-bracket-br { bottom: 24px; right: 24px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.tk-cta-ring { position: absolute; top: 50%; left: 5%; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(0,176,80,0.06); transform: translateY(-50%); pointer-events: none; animation: breathe 5s ease-in-out infinite; }
.tk-cta-ring-2 { position: absolute; top: 50%; left: 5%; width: 140px; height: 140px; border-radius: 50%; border: 1px solid rgba(0,176,80,0.04); transform: translateY(-50%); pointer-events: none; animation: breathe 5s ease-in-out infinite 1s; }
.tk-cta-scanline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,176,80,0.08), transparent); pointer-events: none; animation: scanLine 4s linear infinite; }
@keyframes scanLine { 0% { transform: translateY(0); } 100% { transform: translateY(480px); } }
.tk-cta-orb-br { position: absolute; bottom: -60px; right: -40px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.08), transparent 60%); pointer-events: none; }
.tk-cta-orb-tl { position: absolute; top: -40px; left: 30%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 60%); pointer-events: none; }
.tk-cta-inner { position: relative; z-index: 1; padding: 56px 48px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.tk-cta-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px; border-radius: 999px; background: rgba(0,176,80,0.08); border: 1px solid rgba(0,176,80,0.12); margin-bottom: 20px; backdrop-filter: blur(8px); }
.tk-cta-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(0,176,80,0.5); animation: pulse-dot 1.8s ease-in-out infinite; }
.tk-cta-badge-text { font-size: 0.6rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.tk-cta-heading { font-size: clamp(1.5rem,2.8vw,2.2rem); color: #fff; margin: 0 0 14px; line-height: 1.1; letter-spacing: -0.02em; word-break: break-word; }
.tk-cta-heading-accent { background: linear-gradient(135deg, #00B050, #5DF558); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.tk-cta-desc { color: rgba(255,255,255,0.4); font-size: 0.9375rem; max-width: 480px; margin: 0 0 28px; line-height: 1.7; }
.tk-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tk-cta-actions .btn { padding: 12px 28px; border-radius: 999px; font-size: 0.8125rem; }
.tk-cta-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk-cta-stat-card { padding: 16px; border-radius: 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); backdrop-filter: blur(12px); }
.tk-cta-stat-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1; word-break: break-word; }
.tk-cta-stat-value-green { color: #00E060; }
.tk-cta-stat-value-lime { color: #5DF558; }
.tk-cta-stat-value-blue { color: #64B4FF; }
.tk-cta-stat-value-amber { color: #FFB74D; }
.tk-cta-stat-unit { font-size: 0.7rem; color: rgba(255,255,255,0.2); font-weight: 400; }
.tk-cta-stat-label { font-size: 0.6rem; color: rgba(255,255,255,0.25); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.tk-cta-text-center { text-align: left; }

/* ── Token Responsive ── */
@media (max-width: 1024px) {
    .bento-grid.tk-hero-grid { grid-template-columns: 1fr; justify-content: center; gap: 32px; text-align: center; }
    .tk-hero-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
    .tk-hero-actions { justify-content: center; }
    .tk-price-row { justify-content: center; }
    .hero-stat-grid { margin-left: auto; margin-right: auto; }
    .hero-stat-grid { grid-template-columns: repeat(3, 1fr); }
    .bento-grid.tk-tokenomics-grid { grid-template-columns: 1fr; justify-content: center; gap: 32px; }
    .bento-grid.tk-tokenomics-grid .tk-chart-wrap { order: -1; }
    .bento-grid.tk-stake-grid { grid-template-columns: 1fr; gap: 24px; }
    .tk-tier-content { flex-wrap: wrap; gap: 6px; }
    .tk-use-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .token-hero-visual { display: none; }
    .use-case-card .uc-stat { font-size: 1.5rem; }
}
@media (max-width: 768px) {
    .token-hero { padding: 100px 0 50px; min-height: auto; }
    .bento-grid.tk-hero-grid { gap: 24px; }
    .tk-hero-desc { font-size: 0.9375rem; }
    .tk-hero-actions { margin-top: 20px; }
    .tk-hero-btn-accent, .tk-hero-btn-ghost { padding: 12px 28px; font-size: 0.875rem; }
    .hero-stat-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-stat-item { padding: 14px 10px; }
    .token-hero-visual { display: none; }
    .use-case-card .uc-body { padding: 20px 16px 20px; }
    .use-case-card .uc-stat { font-size: 1.25rem; }
    .token-glow-ring { width: 200px !important; height: 200px !important; }
    .token-glow-ring:nth-child(2) { width: 140px !important; height: 140px !important; }
    .token-glow-ring:nth-child(3) { width: 90px !important; height: 90px !important; }
    .token-center-icon { width: 60px; height: 60px; font-size: 1rem; }
    .hero-stat-grid { max-width: 100%; }
    .tk-tok-heading, .tk-stake-heading, .tk-earn-heading, .tk-road-heading, .tk-use-heading { margin-bottom: 32px; }
    .bento-grid.tk-tokenomics-grid { gap: 24px; }
    .tokenomics-bar { gap: 10px; }
    .tokenomics-bar .bar-label { width: 80px; font-size: 0.75rem; }
    .roadmap { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .roadmap-item { padding: 18px 16px 16px; }
    .tk-earn-grid { grid-template-columns: 1fr; gap: 16px; }
    .tk-earn-header { padding: 20px 20px 0; }
    .tk-earn-body { padding: 0 20px 20px; }
    .tk-earn-title { font-size: 1.375rem; }
    .tk-console-header { padding: 16px 20px 0; }
    .tk-console-body { padding: 12px 20px 20px; }
    .tk-use-grid { grid-template-columns: 1fr; gap: 14px; }
    .tk-cta-section { margin-top: 32px; margin-bottom: 60px; }
    .tk-cta-inner { grid-template-columns: 1fr; padding: 32px 20px; gap: 28px; }
    .tk-cta-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tk-cta-stat-card { padding: 14px; }
    .tk-cta-stat-value { font-size: 1.25rem; }
    .bento-grid.tk-stake-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .tk-stake-heading { margin-bottom: 28px; }
    .tk-tier-grid { gap: 12px; }
    .tk-tier-basic, .tk-tier-pro, .tk-tier-advance { padding: 14px 16px; }
    .tk-tier-row, .tk-tier-pro-row { gap: 10px; }
    .tk-tier-content { flex-wrap: wrap; gap: 4px; }
    .tk-tier-name { font-size: 0.8125rem; }
    .tk-tier-rate { font-size: 1.1rem; }
    .tk-apy-row { gap: 14px; margin-bottom: 16px; }
    .tk-stake-amount { font-size: 1.375rem; }
    .tk-range-wrap { margin-bottom: 14px; }
    .tk-earnings-row { padding: 12px; }
    .tk-earnings-value { font-size: 0.9375rem; }
    .tk-stake-btn { margin-top: 12px; padding: 10px; font-size: 0.75rem; }
    .tk-earn-header-tall { padding-top: 28px; }
}
/* ═══════════════════════════════════════════
   Index Page — idx- prefixed classes
   ═══════════════════════════════════════════ */

/* ── SVG Defs ── */
.idx-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── HERO ── */
.idx-hero { padding: 140px 0 100px; position: relative; overflow: hidden; min-height: 85vh; display: flex; align-items: center; }
.idx-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,40,24,0.92) 0%, rgba(13,40,24,0.55) 45%, rgba(13,40,24,0.15) 100%); pointer-events: none; }
.idx-hero-orb-1 { position: absolute; top: -120px; right: -80px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.12) 0%, transparent 70%); pointer-events: none; animation: breathe 6s ease-in-out infinite; }
.idx-hero-orb-2 { position: absolute; bottom: -100px; left: -60px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.08) 0%, transparent 70%); pointer-events: none; animation: breathe 8s ease-in-out infinite 2s; }
.idx-hero-accent-line { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, #fff 60%, var(--accent) 80%, transparent 100%); opacity: 0.4; }
.idx-hero-content { position: relative; z-index: 1; width: 100%; }
.idx-hero-text { max-width: 780px; }
.idx-hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px 7px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 28px; }
.idx-hero-chip-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-heading); }
.idx-hero-chip-text { font-size: var(--fs-tiny); font-weight: 500; color: rgba(255,255,255,0.7); font-family: var(--font-heading); letter-spacing: 0.03em; }
.idx-hero h1 { font-size: var(--fs-hero); line-height: 1.05; margin-bottom: 20px; letter-spacing: -0.03em; color: #fff; }
.idx-hero-gradient-text { background: linear-gradient(135deg, var(--accent) 0%, #87E8A0 40%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.idx-hero-desc { font-size: var(--fs-body-lg); color: rgba(255,255,255,0.6); line-height: 1.8; margin-bottom: 40px; max-width: 520px; }
.idx-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.idx-hero-btn-icon { width: 18px; height: 18px; }
.idx-hero-social { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.idx-hero-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idx-hero-social-info { }
.idx-hero-social-name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body-lg); color: #fff; }
.idx-hero-social-sub { font-size: var(--fs-small); color: rgba(255,255,255,0.45); }

/* ── STATS BAR ── */
.idx-stats-section { padding: 0 0 80px; margin-top: -28px; position: relative; z-index: 2; background: linear-gradient(180deg, rgba(0,176,80,0.06) 0%, rgba(0,176,80,0.02) 50%, transparent 100%); }
.idx-stats-card { border-radius: 20px; background: rgba(255,255,255,0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(0,176,80,0.08); box-shadow: 0 8px 40px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,176,80,0.04); overflow: hidden; position: relative; }
.idx-stats-accent { position: absolute; top: 0; left: 60px; right: 60px; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,176,80,0.12), transparent); }
.idx-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.idx-stats-item { padding: 36px 24px 32px; text-align: center; border-right: 1px solid rgba(0,176,80,0.06); transition: all 0.4s cubic-bezier(0.22,1,0.36,1); position: relative; }
.idx-stats-item:last-child { border-right: none; }
.idx-stats-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, rgba(0,176,80,0.08), rgba(0,176,80,0.02)); border: 1px solid rgba(0,176,80,0.06); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.idx-stats-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.5; }
.idx-stats-num { font-family: var(--font-heading); font-size: var(--fs-stat); font-weight: 700; background: linear-gradient(135deg, var(--accent), #0D2818); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; }
.idx-stats-label { font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 6px; font-weight: 500; }

/* ═══════════════════════════════════════════════
   FIVE PILLARS — Ecosystem Section (from scratch)
   ═══════════════════════════════════════════════ */

/* Section & Header */
.eco-section { padding-top: 40px; }
.eco-header { text-align: center; margin-bottom: 60px; }
.eco-subtitle { margin: 0 auto; }

/* Grid — mobile-first: single column */
.eco-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* Main Card (Charger Sales) */
.eco-card-main {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.eco-card-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,40,24,0.7), rgba(13,40,24,0.3));
}
.eco-card-body {
    position: relative;
    z-index: 1;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
}
.eco-icon { background: rgba(255,255,255,0.08); }
.eco-main-title { font-size: 1.375rem; color: #fff; margin-bottom: 10px; }
.eco-main-desc { color: rgba(255,255,255,0.75); font-size: 0.9375rem; line-height: 1.8; max-width: 380px; }
.eco-main-btn { margin-top: 16px; padding: 8px 18px; font-size: 0.75rem; align-self: flex-start; }
.eco-main-btn svg { width: 12px; height: 12px; }

/* Small Cards */
.eco-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
    cursor: default;
}

/* Card Colors */
.eco-card--amber { background: linear-gradient(145deg, #0A1F12, #132A1C); border: 1px solid rgba(0,176,80,0.06); }
.eco-card--blue { background: linear-gradient(145deg, #0F1B2E, #162240); border: 1px solid rgba(100,180,255,0.06); }
.eco-card--purple { background: linear-gradient(145deg, #170A2E, #1E1038); border: 1px solid rgba(180,130,255,0.06); }
.eco-card--teal { background: linear-gradient(145deg, #0A1F1F, #0F2A28); border: 1px solid rgba(0,200,200,0.06); }

/* Card Overlays */
.eco-card-overlay { position: absolute; inset: 0; pointer-events: none; }
.eco-card--amber-overlay { background: radial-gradient(ellipse at 30% 0%, rgba(0,176,80,0.06), transparent 60%); }
.eco-card--blue-overlay { background: radial-gradient(ellipse at 70% 0%, rgba(100,180,255,0.05), transparent 60%); }
.eco-card--purple-overlay { background: radial-gradient(ellipse at 30% 100%, rgba(180,130,255,0.05), transparent 60%); }
.eco-card--teal-overlay { background: radial-gradient(ellipse at 60% 100%, rgba(0,200,200,0.04), transparent 60%); }

/* Card Orbs */
.eco-card-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.eco-card--amber-orb { top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 70%); }
.eco-card--blue-orb { bottom: -30px; left: -30px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(100,180,255,0.04), transparent 70%); }
.eco-card--purple-orb { top: -20px; left: -20px; width: 80px; height: 80px; background: radial-gradient(circle, rgba(180,130,255,0.05), transparent 70%); }
.eco-card--teal-orb { bottom: -20px; right: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(0,200,200,0.04), transparent 70%); }

/* Card Inner Content */
.eco-card-inner {
    padding: 28px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
}

/* Card Header (icon + number) */
.eco-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }

/* Icon Boxes */
.eco-card-icon-box { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eco-card-icon-box svg { width: 20px; height: 20px; fill: none; stroke: var(--eco-icon-clr, #fff); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eco-card-icon-box line, .eco-card-icon-box path, .eco-card-icon-box circle, .eco-card-icon-box polyline, .eco-card-icon-box rect { fill: none; stroke: var(--eco-icon-clr, #fff); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eco-card--amber-icon { background: linear-gradient(135deg, rgba(255,183,77,0.15), rgba(255,183,77,0.04)); border: 1px solid rgba(255,183,77,0.1); --eco-icon-clr: #FFB74D; }
.eco-card--blue-icon { background: linear-gradient(135deg, rgba(100,180,255,0.15), rgba(100,180,255,0.04)); border: 1px solid rgba(100,180,255,0.1); --eco-icon-clr: #64B4FF; }
.eco-card--purple-icon { background: linear-gradient(135deg, rgba(180,130,255,0.15), rgba(180,130,255,0.04)); border: 1px solid rgba(180,130,255,0.1); --eco-icon-clr: #B482FF; }
.eco-card--teal-icon { background: linear-gradient(135deg, rgba(0,200,200,0.15), rgba(0,200,200,0.04)); border: 1px solid rgba(0,200,200,0.1); --eco-icon-clr: #00C8C8; }

/* Card Numbers */
.eco-card-num { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.eco-card--amber-num { background: linear-gradient(135deg, rgba(0,176,80,0.25), rgba(0,176,80,0.08)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.eco-card--blue-num { background: linear-gradient(135deg, rgba(100,180,255,0.25), rgba(100,180,255,0.08)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.eco-card--purple-num { background: linear-gradient(135deg, rgba(180,130,255,0.25), rgba(180,130,255,0.08)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.eco-card--teal-num { background: linear-gradient(135deg, rgba(0,200,200,0.25), rgba(0,200,200,0.08)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Card Text */
.eco-card-title { font-size: 1rem; margin-bottom: 6px; color: #fff; letter-spacing: -0.01em; }
.eco-card-desc { font-size: 0.8125rem; color: rgba(255,255,255,0.5); line-height: 1.7; flex: 1; margin-bottom: 12px; }

/* Card Footer */
.eco-card-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.04); }
.eco-card-foot-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.eco-card-foot-label { font-size: 0.6rem; color: rgba(255,255,255,0.35); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.eco-card-foot-val { font-size: 0.75rem; font-weight: 700; }
.eco-card--amber-val { color: #FFB74D; }
.eco-card--blue-val { color: #64B4FF; }
.eco-card--purple-val { color: #B482FF; }
.eco-card--teal-val { color: #00C8C8; }

/* Progress Bars */
.eco-bar-track { width: 100%; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.04); overflow: hidden; }
.eco-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; }
.eco-card--amber-bar { background: linear-gradient(90deg, #FFB74D, rgba(255,183,77,0.3)); }
.eco-card--blue-bar { background: linear-gradient(90deg, #64B4FF, rgba(100,180,255,0.3)); }
.eco-card--teal-bar { background: linear-gradient(90deg, #00C8C8, rgba(0,200,200,0.3)); }

/* Trend (ADN Rewards card) */
.eco-card-trend { display: flex; align-items: center; gap: 6px; }
.eco-card-trend svg { width: 14px; height: 14px; fill: none; stroke: #4CAF50; stroke-width: 2; }
.eco-card-trend-text { font-size: 0.65rem; color: rgba(76,175,80,0.8); font-weight: 600; }

/* Card Glow */
.eco-card-glow { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; opacity: 0; transition: opacity 0.4s ease; }
.eco-card--amber-glow { background: linear-gradient(90deg, transparent, rgba(255,183,77,0.15), transparent); }
.eco-card--blue-glow { background: linear-gradient(90deg, transparent, rgba(100,180,255,0.15), transparent); }
.eco-card--purple-glow { background: linear-gradient(90deg, transparent, rgba(180,130,255,0.15), transparent); }
.eco-card--teal-glow { background: linear-gradient(90deg, transparent, rgba(0,200,200,0.15), transparent); }

/* CTA Row */
.eco-cta { border-radius: 20px; overflow: hidden; position: relative; }
.eco-cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,40,24,0.85), rgba(13,40,24,0.45)); }
.eco-cta-content { padding: 24px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; width: 100%; position: relative; z-index: 1; }
.eco-cta-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: #fff; }
.eco-cta-desc { color: rgba(255,255,255,0.65); font-size: 0.875rem; max-width: 480px; }
.eco-cta-btn { background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); color: #fff; box-shadow: none; }
.eco-cta-btn svg { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════
   FIVE PILLARS — Responsive (mobile-first)
   ═══════════════════════════════════════════ */

/* Tiny (< 400px) */
@media (max-width: 400px) {
    .eco-card-inner { padding: 20px; }
    .eco-card-head { margin-bottom: 16px; }
    .eco-card-icon-box { width: 36px; height: 36px; border-radius: 12px; }
    .eco-card-icon-box svg { width: 16px; height: 16px; }
    .eco-card-num { font-size: 1.5rem; }
    .eco-card-title { font-size: 0.9375rem; }
    .eco-card-desc { font-size: 0.8125rem; margin-bottom: 12px; }
    .eco-card-foot-label { font-size: 0.55rem; }
    .eco-card-foot-val { font-size: 0.6875rem; }
    .eco-card-body { padding: 20px 16px; }
    .pillar-icon { width: 38px; height: 38px; }
    .pillar-icon svg { width: 18px; height: 18px; }
    .eco-main-title { font-size: 1.1rem; }
    .eco-main-desc { font-size: 0.8125rem; }
    .eco-cta-content { padding: 18px 16px; gap: 12px; }
    .eco-cta-title { font-size: 0.9375rem; }
    .eco-cta-desc { font-size: 0.75rem; }
}

/* Small (401px – 479px) */
@media (min-width: 401px) and (max-width: 479px) {
    .eco-card-inner { padding: 24px; }
    .eco-card-head { margin-bottom: 20px; }
    .eco-card-icon-box { width: 40px; height: 40px; border-radius: 12px; }
    .eco-card-icon-box svg { width: 18px; height: 18px; }
    .eco-card-num { font-size: 1.75rem; }
    .eco-cta-content { padding: 22px 20px; }
}

/* Tablet (480px – 767px): 2 columns for small cards */
@media (min-width: 480px) and (max-width: 767px) {
    .eco-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .eco-card-main { grid-column: 1 / -1; }
    .eco-cta { grid-column: 1 / -1; }
    .eco-card-body { padding: 28px 24px; }
    .eco-cta-content { padding: 24px 24px; }
}

/* Large Tablet (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .eco-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .eco-card-main { grid-column: 1 / -1; }
    .eco-cta { grid-column: 1 / -1; }
    .eco-card-body { padding: 32px 28px; }
    .eco-cta-content { padding: 28px 32px; }
}

/* Desktop (≥ 1024px) — full bento layout */
@media (min-width: 1024px) {
    .eco-header { margin-bottom: 60px; }
    .eco-grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr auto; gap: 24px; }
    .eco-card-main { grid-column: 1; grid-row: 1 / 3; }
    .eco-card-body { padding: 32px 28px; }
    .eco-cta { grid-column: 1 / -1; grid-row: 4; }
    .eco-cta-content { padding: 32px 40px; }
}

/* ── HOW IT WORKS ── */
.idx-how-section { position: relative; }
.idx-how-container { position: relative; z-index: 1; }
.idx-how-header { text-align: center; margin-bottom: 60px; }
.idx-how-subtitle { margin: 0 auto; }
.idx-how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; position: relative; }
.idx-how-line { position: absolute; top: 90px; left: calc(16.66% + 28px); right: calc(16.66% + 28px); height: 1px; background: linear-gradient(90deg, rgba(34,197,94,0.25), rgba(0,230,118,0.1), rgba(13,148,136,0.25)); pointer-events: none; }
.idx-how-line-dot { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; }
.idx-how-line-dot:first-child { left: 0; background: #22C55E; }
.idx-how-line-dot:nth-child(2) { left: 50%; transform: translateX(-50%); background: rgba(0,230,118,0.25); }
.idx-how-line-dot:nth-child(3) { right: 0; background: #0D9488; }
.idx-how-step { position: relative; border-radius: 20px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 8px 32px rgba(0,0,0,0.08); transition: all 0.5s cubic-bezier(0.22,1,0.36,1); overflow: hidden; }
.idx-how-step--lime { background: linear-gradient(145deg, rgba(10,35,16,0.65), rgba(8,25,12,0.8)); border: 1px solid rgba(34,197,94,0.08); }
.idx-how-step--green { background: linear-gradient(145deg, rgba(8,30,18,0.65), rgba(6,22,12,0.8)); border: 1px solid rgba(0,230,118,0.08); }
.idx-how-step--teal { background: linear-gradient(145deg, rgba(8,28,26,0.65), rgba(6,22,20,0.8)); border: 1px solid rgba(13,148,136,0.08); }
.idx-how-step-orb { position: absolute; top: -20%; right: -10%; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.idx-how-step--lime .idx-how-step-orb { background: radial-gradient(circle, rgba(34,197,94,0.1), transparent 60%); }
.idx-how-step--green .idx-how-step-orb { background: radial-gradient(circle, rgba(0,230,118,0.1), transparent 60%); }
.idx-how-step--teal .idx-how-step-orb { background: radial-gradient(circle, rgba(13,148,136,0.1), transparent 60%); }
.idx-how-step-bg-num { position: absolute; bottom: 12px; right: 16px; font-family: var(--font-heading); font-size: 7rem; font-weight: 800; line-height: 0.7; pointer-events: none; letter-spacing: -0.06em; }
.idx-how-step--lime .idx-how-step-bg-num { background: linear-gradient(180deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.idx-how-step--green .idx-how-step-bg-num { background: linear-gradient(180deg, rgba(0,230,118,0.08), rgba(0,230,118,0.02)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.idx-how-step--teal .idx-how-step-bg-num { background: linear-gradient(180deg, rgba(13,148,136,0.08), rgba(13,148,136,0.02)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.idx-how-step-accent-bar { position: absolute; top: 24px; left: 0; width: 3px; height: 40px; border-radius: 0 3px 3px 0; }
.idx-how-step--lime .idx-how-step-accent-bar { background: linear-gradient(180deg, #22C55E, rgba(34,197,94,0.2)); }
.idx-how-step--green .idx-how-step-accent-bar { background: linear-gradient(180deg, #00E676, rgba(0,230,118,0.2)); }
.idx-how-step--teal .idx-how-step-accent-bar { background: linear-gradient(180deg, #0D9488, rgba(13,148,136,0.2)); }
.idx-how-step-body { position: relative; padding: 36px 28px 40px; z-index: 1; }
.idx-how-step-icon-row { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.idx-how-step-icon-wrap { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); flex-shrink: 0; }
.idx-how-step-icon-wrap svg { width: 20px; height: 20px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idx-how-step--lime .idx-how-step-icon-wrap { background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.04)); border: 1px solid rgba(34,197,94,0.12); }
.idx-how-step--lime .idx-how-step-icon-wrap svg { stroke: #22C55E; }
.idx-how-step--green .idx-how-step-icon-wrap { background: linear-gradient(135deg, rgba(0,230,118,0.15), rgba(0,230,118,0.04)); border: 1px solid rgba(0,230,118,0.12); }
.idx-how-step--green .idx-how-step-icon-wrap svg { stroke: #00E676; }
.idx-how-step--teal .idx-how-step-icon-wrap { background: linear-gradient(135deg, rgba(13,148,136,0.15), rgba(13,148,136,0.04)); border: 1px solid rgba(13,148,136,0.12); }
.idx-how-step--teal .idx-how-step-icon-wrap svg { stroke: #0D9488; }
.idx-how-step-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-heading); }
.idx-how-step--lime .idx-how-step-label { color: rgba(34,197,94,0.6); }
.idx-how-step--green .idx-how-step-label { color: rgba(0,230,118,0.6); }
.idx-how-step--teal .idx-how-step-label { color: rgba(13,148,136,0.6); }
.idx-how-step-title { font-size: var(--fs-h3); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 10px; }
.idx-how-step-desc { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.55); line-height: 1.8; margin-bottom: 24px; }
.idx-how-step-progress { display: flex; align-items: center; gap: 10px; }
.idx-how-step-bar-track { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.04); overflow: hidden; }
.idx-how-step-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; }
.idx-how-step--lime .idx-how-step-bar-fill { background: linear-gradient(90deg, #22C55E, rgba(34,197,94,0.25)); }
.idx-how-step--green .idx-how-step-bar-fill { background: linear-gradient(90deg, #00E676, rgba(0,230,118,0.25)); }
.idx-how-step--teal .idx-how-step-bar-fill { background: linear-gradient(90deg, #0D9488, rgba(13,148,136,0.25)); }
.idx-how-step-counter { font-size: var(--fs-tiny); font-weight: 600; font-family: var(--font-heading); }
.idx-how-step--lime .idx-how-step-counter { color: rgba(34,197,94,0.5); }
.idx-how-step--green .idx-how-step-counter { color: rgba(0,230,118,0.5); }
.idx-how-step--teal .idx-how-step-counter { color: rgba(13,148,136,0.5); }

/* ── APP PREVIEW ── */
.idx-app-section { padding: 100px 0; position: relative; overflow: hidden; }
.idx-app-bg-gradient { position: absolute; inset: 0; background: linear-gradient(160deg, var(--bg) 0%, rgba(0,176,80,0.025) 30%, rgba(0,176,80,0.04) 60%, var(--bg) 100%); pointer-events: none; }
.idx-app-orb-1 { position: absolute; top: -300px; right: -200px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.07), transparent 70%); pointer-events: none; animation: floatOrb 8s ease-in-out infinite; }
.idx-app-orb-2 { position: absolute; bottom: -200px; left: -150px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(0,200,255,0.04), transparent 70%); pointer-events: none; animation: floatOrb 10s ease-in-out infinite 2s; }
.idx-app-grid-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,176,80,0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; opacity: 0.4; }
.idx-app-container { position: relative; z-index: 1; }
.idx-app-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.idx-app-visual { display: flex; justify-content: center; position: relative; padding: 20px 0; }
.idx-app-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0,176,80,0.06); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.idx-app-ring-1 { width: 480px; height: 480px; animation: floatOrb 12s ease-in-out infinite 1s; }
.idx-app-ring-2 { width: 360px; height: 360px; border-color: rgba(0,176,80,0.04); animation: floatOrb 8s ease-in-out infinite 0.5s; }
.idx-app-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.1), transparent 60%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.idx-app-img { width: 100%; max-width: 360px; height: auto; border-radius: 20px; display: block; object-fit: contain; position: relative; z-index: 1; transform: perspective(1000px) rotateY(-4deg); transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.idx-app-img-mobile { display: none; width: 100%; max-width: 320px; height: auto; border-radius: 16px; margin: 0 auto 24px; }
.idx-app-content { position: relative; }
.idx-app-title { font-size: var(--fs-section); line-height: 1.08; margin-bottom: 18px; letter-spacing: -0.02em; }
.idx-app-desc { font-size: var(--fs-body-lg); color: var(--text-secondary); line-height: 1.8; margin-bottom: 32px; max-width: 480px; }
.idx-app-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.idx-app-feature { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(0,176,80,0.06); border: 1px solid rgba(0,176,80,0.1); transition: all 0.3s ease; }
.idx-app-feature-dot { width: 6px; height: 6px; border-radius: 50%; background: #00B050; flex-shrink: 0; display: block; }
.idx-app-feature-text { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.3; }
.idx-app-badges { display: flex; gap: 14px; flex-wrap: wrap; }
.idx-app-badge-link { display: inline-flex; transition: all 0.3s ease; filter: grayscale(0.3); }
.idx-app-badge-img { height: 46px; width: auto; display: block; }

/* ── FEATURES ── */
.idx-feat-section { position: relative; overflow: hidden; }
.idx-feat-bg { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(0,176,80,0.02) 50%, var(--bg) 100%); pointer-events: none; }
.idx-feat-container { position: relative; z-index: 1; }
.idx-feat-header { text-align: center; margin-bottom: 60px; }
.idx-feat-subtitle { margin: 0 auto; }
.idx-feat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.idx-feat-card { position: relative; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); transition: all 0.4s cubic-bezier(0.22,1,0.36,1); overflow: hidden; min-height: 260px; display: flex; align-items: flex-end; }
.idx-feat-card--amber { border: 1px solid rgba(255,183,77,0.08); }
.idx-feat-card--green { border: 1px solid rgba(0,176,80,0.08); }
.idx-feat-card--blue { border: 1px solid rgba(100,180,255,0.08); }
.idx-feat-card--purple { border: 1px solid rgba(180,130,255,0.08); }
.idx-feat-card--teal { border: 1px solid rgba(0,200,200,0.08); }
.idx-feat-card-img { position: absolute; inset: 0; }
.idx-feat-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.55) 40%, rgba(10,10,10,0.85) 100%); }
.idx-feat-card-glow { position: absolute; top: 0; right: 0; width: 160px; height: 160px; pointer-events: none; }
.idx-feat-card--amber .idx-feat-card-glow { background: radial-gradient(circle, rgba(255,183,77,0.08), transparent 70%); }
.idx-feat-card--green .idx-feat-card-glow { background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%); }
.idx-feat-card--blue .idx-feat-card-glow { background: radial-gradient(circle, rgba(100,180,255,0.06), transparent 70%); }
.idx-feat-card--purple .idx-feat-card-glow { background: radial-gradient(circle, rgba(180,130,255,0.06), transparent 70%); }
.idx-feat-card--teal .idx-feat-card-glow { background: radial-gradient(circle, rgba(0,200,200,0.06), transparent 70%); }
.idx-feat-card-content { position: relative; z-index: 1; padding: 32px; width: 100%; }
.idx-feat-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.idx-feat-card-header-left { display: flex; align-items: center; gap: 14px; }
.idx-feat-card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.idx-feat-card-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--feat-icon-clr, #fff); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idx-feat-card-icon line, .idx-feat-card-icon path, .idx-feat-card-icon circle, .idx-feat-card-icon polyline, .idx-feat-card-icon rect { fill: none; stroke: var(--feat-icon-clr, #fff); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idx-feat-card--amber .idx-feat-card-icon { background: rgba(255,183,77,0.12); border: 1px solid rgba(255,183,77,0.15); --feat-icon-clr: #FFB74D; }
.idx-feat-card--green .idx-feat-card-icon { background: rgba(0,176,80,0.12); border: 1px solid rgba(0,176,80,0.15); --feat-icon-clr: var(--accent); }
.idx-feat-card--blue .idx-feat-card-icon { background: rgba(100,180,255,0.12); border: 1px solid rgba(100,180,255,0.15); --feat-icon-clr: #64B4FF; }
.idx-feat-card--purple .idx-feat-card-icon { background: rgba(180,130,255,0.12); border: 1px solid rgba(180,130,255,0.15); --feat-icon-clr: #B482FF; }
.idx-feat-card--teal .idx-feat-card-icon { background: rgba(0,200,200,0.12); border: 1px solid rgba(0,200,200,0.15); --feat-icon-clr: #00C8C8; }
.idx-feat-card-label { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-heading); display: block; }
.idx-feat-card--amber .idx-feat-card-label { color: rgba(255,183,77,0.7); }
.idx-feat-card--green .idx-feat-card-label { color: rgba(0,176,80,0.7); }
.idx-feat-card--blue .idx-feat-card-label { color: rgba(100,180,255,0.7); }
.idx-feat-card--purple .idx-feat-card-label { color: rgba(180,130,255,0.7); }
.idx-feat-card--teal .idx-feat-card-label { color: rgba(0,200,200,0.7); }
.idx-feat-card-title { font-size: var(--fs-h3); margin-bottom: 8px; color: #fff; letter-spacing: -0.02em; }
.idx-feat-card-desc { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 90%; }

/* ── LIVE NETWORK ── */
.idx-live-section { padding: 100px 0; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg) 0%, rgba(0,176,80,0.025) 30%, rgba(0,176,80,0.04) 70%, var(--bg) 100%); }
.idx-live-grid-bg { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,176,80,0.03) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; opacity: 0.3; }
.idx-live-orb-1 { position: absolute; top: -250px; right: -120px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%); pointer-events: none; animation: floatOrb 12s ease-in-out infinite; }
.idx-live-orb-2 { position: absolute; bottom: -150px; left: -80px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(0,200,255,0.04), transparent 70%); pointer-events: none; animation: floatOrb 8s ease-in-out infinite 3s; }
.idx-live-container { position: relative; z-index: 1; }
.idx-live-header { text-align: center; margin-bottom: 56px; }
.idx-live-status-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 14px; border-radius: 999px; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.08); margin-bottom: 20px; }
.idx-live-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; display: block; animation: pulseRing 2s ease-in-out infinite; }
.idx-live-status-text { font-size: var(--fs-micro); font-weight: 700; color: rgba(34,197,94,0.7); font-family: var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; }
.idx-live-subtitle { margin: 0 auto; }
.idx-live-dashboard { border-radius: 20px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(0,176,80,0.07); box-shadow: 0 8px 48px rgba(0,0,0,0.1); overflow: hidden; position: relative; }
.idx-live-dashboard-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(8,20,14,0.4) 100%); pointer-events: none; }
.idx-live-dashboard-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid rgba(0,176,80,0.05); position: relative; z-index: 1; background: rgba(8,20,14,0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.idx-live-bar-left { display: flex; align-items: center; gap: 10px; }
.idx-live-bar-pill { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: rgba(34,197,94,0.08); }
.idx-live-bar-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: #22C55E; display: block; }
.idx-live-bar-pill-text { font-size: var(--fs-micro); font-weight: 700; color: rgba(34,197,94,0.7); font-family: var(--font-heading); letter-spacing: 0.04em; }
.idx-live-bar-divider { font-size: var(--fs-micro); color: rgba(255,255,255,0.15); }
.idx-live-bar-version { font-size: var(--fs-micro); color: rgba(255,255,255,0.25); font-family: var(--font-heading); }
.idx-live-bar-right { display: flex; align-items: center; gap: 8px; }
.idx-live-bar-right svg { width: 12px; height: 12px; fill: none; stroke: rgba(0,176,80,0.3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idx-live-bar-time { font-size: var(--fs-micro); color: rgba(255,255,255,0.25); font-family: var(--font-heading); }
.idx-live-dashboard-body { padding: 36px 28px 28px; }
.idx-live-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.idx-live-stat { padding: 22px 16px 18px; border-radius: 14px; background: rgba(0,176,80,0.03); border: 1px solid rgba(0,176,80,0.05); text-align: center; transition: all 0.35s cubic-bezier(0.22,1,0.36,1); }
.idx-live-stat-num { font-family: var(--font-heading); font-size: var(--fs-stat); font-weight: 800; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; letter-spacing: -0.03em; }
.idx-live-stat-num--1 { background-image: linear-gradient(135deg, #00B050, #87E8A0); }
.idx-live-stat-num--2 { background-image: linear-gradient(135deg, #87E8A0, #00C55A); }
.idx-live-stat-num--3 { background-image: linear-gradient(135deg, #00C55A, #00B050); }
.idx-live-stat-num--4 { background-image: linear-gradient(135deg, #87E8A0, #00E676); }
.idx-stats-item--hover { transform: translateY(-2px) !important; background: rgba(0,176,80,0.02) !important; }
.idx-stats-item:hover { transform: translateY(-2px); background: rgba(0,176,80,0.02); }
.idx-how-step--lime:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.15); }
.idx-how-step--lime:hover .step-orb-1 { opacity: 0.4; }
.idx-how-step--lime:hover .step-icon-1 { transform: scale(1.08); }
.idx-how-step--lime:hover .step-bar-1 { width: 100%; }
.idx-how-step--green:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,230,118,0.15); border-color: rgba(0,230,118,0.15); }
.idx-how-step--green:hover .step-orb-2 { opacity: 0.4; }
.idx-how-step--green:hover .step-icon-2 { transform: scale(1.08); }
.idx-how-step--green:hover .step-bar-2 { width: 100%; }
.idx-how-step--teal:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(13,148,136,0.15); border-color: rgba(13,148,136,0.15); }
.idx-how-step--teal:hover .step-orb-3 { opacity: 0.4; }
.idx-how-step--teal:hover .step-icon-3 { transform: scale(1.08); }
.idx-how-step--teal:hover .step-bar-3 { width: 100%; }
.idx-app-img:hover { transform: perspective(1000px) rotateY(0deg) scale(1.02); }
.idx-app-feature:hover { background: rgba(0,176,80,0.1); border-color: rgba(0,176,80,0.18); transform: translateX(4px); }
.idx-app-badge-link:hover { filter: grayscale(0); transform: translateY(-3px); }
.idx-live-stat:hover { background: rgba(0,176,80,0.06); transform: translateY(-3px); border-color: rgba(0,176,80,0.12); }
.idx-live-stat:hover .ln-s1, .idx-live-stat:hover .ln-s2, .idx-live-stat:hover .ln-s3, .idx-live-stat:hover .ln-s4 { opacity: 1; }
.idx-live-network-link:hover { color: rgba(0,176,80,0.9); }
.idx-test-card:hover { transform: translateY(-6px); background: rgba(15,38,24,0.7); }
.idx-test-card--rose:hover { box-shadow: 0 20px 48px rgba(0,0,0,0.2), 0 0 0 1px rgba(232,121,176,0.15); }
.idx-test-card--green:hover { box-shadow: 0 20px 48px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,176,80,0.15); }
.idx-test-card--blue:hover { box-shadow: 0 20px 48px rgba(0,0,0,0.2), 0 0 0 1px rgba(100,180,255,0.15); }
.idx-test-card:hover .cg1, .idx-test-card:hover .cg2, .idx-test-card:hover .cg3 { opacity: 1; }
.idx-faq-item[open] { background: rgba(0,176,80,0.04); border-color: rgba(0,176,80,0.1); }
.idx-live-stat-label { font-size: var(--fs-tiny); color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; font-weight: 500; }
.idx-live-stat-sub { font-size: var(--fs-micro); color: rgba(0,176,80,0.5); margin-top: 8px; transition: opacity 0.3s ease; opacity: 0; }
.idx-live-network-section { padding: 0 28px 32px; }
.idx-live-network-bar { position: relative; height: 48px; border-radius: 12px; background: rgba(0,176,80,0.02); border: 1px solid rgba(0,176,80,0.04); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; overflow: hidden; }
.idx-live-network-left { display: flex; align-items: center; gap: 16px; }
.idx-live-network-label { font-size: var(--fs-micro); color: rgba(255,255,255,0.15); font-family: var(--font-heading); letter-spacing: 0.04em; }
.idx-live-network-dots { display: flex; align-items: center; gap: 8px; }
.idx-live-network-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,176,80,0.3); display: block; animation: pulseRing 2s ease-in-out infinite; }
.idx-live-network-dot:nth-child(1) { animation-delay: 0.5s; }
.idx-live-network-dot:nth-child(3) { animation-delay: 1s; }
.idx-live-network-dot:nth-child(5) { animation-delay: 0.2s; }
.idx-live-network-dot:nth-child(7) { animation-delay: 1.5s; }
.idx-live-network-dot:nth-child(9) { animation-delay: 0.8s; }
.idx-live-network-dot-sm { width: 4px; height: 4px; border-radius: 50%; background: rgba(0,176,80,0.15); display: block; }
.idx-live-network-info { font-size: var(--fs-micro); color: rgba(255,255,255,0.15); font-family: var(--font-heading); }
.idx-live-network-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-tiny); font-weight: 600; color: rgba(0,176,80,0.6); font-family: var(--font-heading); text-decoration: none; transition: color 0.3s ease; }
.idx-live-network-link svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── TESTIMONIALS ── */
.idx-test-section { position: relative; overflow: hidden; padding: 100px 0; }
.idx-test-bg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,40,24,1) 0%, rgba(20,55,35,1) 50%, rgba(13,40,24,1) 100%); pointer-events: none; }
.idx-test-orb-1 { position: absolute; top: -200px; right: -100px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%); pointer-events: none; animation: floatOrb 10s ease-in-out infinite; }
.idx-test-orb-2 { position: absolute; bottom: -150px; left: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(0,200,255,0.04), transparent 70%); pointer-events: none; animation: floatOrb 8s ease-in-out infinite 2s; }
.idx-test-grid-bg { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,176,80,0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; opacity: 0.3; }
.idx-test-container { position: relative; z-index: 1; }
.idx-test-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; flex-wrap: wrap; gap: 20px; }
.idx-test-label-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.idx-test-label-bar { width: 3px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, #00B050, rgba(0,176,80,0.2)); display: block; }
.idx-test-label-text { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(0,176,80,0.6); font-family: var(--font-heading); }
.idx-test-heading { font-size: var(--fs-section); color: #fff; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
.idx-test-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.idx-test-rating-card { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 12px; background: rgba(0,176,80,0.06); border: 1px solid rgba(0,176,80,0.08); }
.idx-test-stars { display: flex; gap: 1px; }
.idx-test-stars svg { width: 14px; height: 14px; }
.idx-test-rating-num { font-size: var(--fs-body-sm); font-weight: 700; color: #fff; font-family: var(--font-heading); }
.idx-test-rating-dot { font-size: var(--fs-tiny); color: rgba(255,255,255,0.3); }
.idx-test-rating-count { font-size: var(--fs-tiny); color: rgba(255,255,255,0.4); }
.idx-test-join { display: flex; align-items: center; gap: 10px; }
.idx-test-join-text { font-size: var(--fs-tiny); color: rgba(255,255,255,0.3); letter-spacing: 0.05em; }
.idx-test-join-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(0,176,80,0.15); display: flex; align-items: center; justify-content: center; }
.idx-test-join-check svg { width: 10px; height: 10px; fill: none; stroke: #00B050; stroke-width: 2.5; }
.idx-test-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.idx-test-card { position: relative; border-radius: 16px; background: rgba(10,30,18,0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 4px 24px rgba(0,0,0,0.12); transition: all 0.5s cubic-bezier(0.22,1,0.36,1); overflow: hidden; display: flex; flex-direction: column; }
.idx-test-card-glow { position: absolute; top: -30%; right: -20%; width: 140%; height: 140%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.idx-test-card--rose .idx-test-card-glow { background: radial-gradient(circle, rgba(232,121,176,0.06), transparent 60%); }
.idx-test-card--green .idx-test-card-glow { background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 60%); }
.idx-test-card--blue .idx-test-card-glow { background: radial-gradient(circle, rgba(100,180,255,0.06), transparent 60%); }
.idx-test-card-accent { position: absolute; top: 0; left: 20%; right: 20%; height: 2px; opacity: 0.5; }
.idx-test-card--rose .idx-test-card-accent { background: linear-gradient(90deg, transparent, rgba(232,121,176,0.25), transparent); }
.idx-test-card--green .idx-test-card-accent { background: linear-gradient(90deg, transparent, rgba(0,176,80,0.25), transparent); }
.idx-test-card--blue .idx-test-card-accent { background: linear-gradient(90deg, transparent, rgba(100,180,255,0.25), transparent); }
.idx-test-card-body { padding: 32px 28px 28px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; }
.idx-test-card-avatar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.idx-test-card-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.idx-test-card--rose .idx-test-card-avatar { border: 2px solid rgba(232,121,176,0.25); }
.idx-test-card--green .idx-test-card-avatar { border: 2px solid rgba(0,176,80,0.25); }
.idx-test-card--blue .idx-test-card-avatar { border: 2px solid rgba(100,180,255,0.25); }
.idx-test-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idx-test-card-info { flex: 1; }
.idx-test-card-name-row { display: flex; align-items: center; gap: 6px; }
.idx-test-card-name { font-size: var(--fs-body); font-weight: 600; color: #fff; }
.idx-test-card-verified-icon { width: 10px; height: 10px; fill: #22C55E; stroke: none; }
.idx-test-card-role { font-size: var(--fs-tiny); color: rgba(255,255,255,0.35); }
.idx-test-card-quote { flex: 1; margin-bottom: 18px; }
.idx-test-card-quote svg { width: 16px; height: 16px; fill: none; margin-bottom: 6px; }
.idx-test-card--rose .idx-test-card-quote svg { stroke: rgba(232,121,176,0.3); }
.idx-test-card--green .idx-test-card-quote svg { stroke: rgba(0,176,80,0.3); }
.idx-test-card--blue .idx-test-card-quote svg { stroke: rgba(100,180,255,0.3); }
.idx-test-card-quote-text { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.7); line-height: 1.9; margin: 0; }
.idx-test-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; }
.idx-test-card--rose .idx-test-card-footer { border-top: 1px solid rgba(232,121,176,0.06); }
.idx-test-card--green .idx-test-card-footer { border-top: 1px solid rgba(0,176,80,0.06); }
.idx-test-card--blue .idx-test-card-footer { border-top: 1px solid rgba(100,180,255,0.06); }
.idx-test-card-stars-sm { display: flex; align-items: center; gap: 6px; }
.idx-test-card-stars-sm svg { width: 11px; height: 11px; }
.idx-test-card-rating { display: flex; align-items: center; gap: 6px; }
.idx-test-card-rating-num { font-size: var(--fs-tiny); font-weight: 700; font-family: var(--font-heading); }
.idx-test-card--rose .idx-test-card-rating-num { color: rgba(232,121,176,0.7); }
.idx-test-card--green .idx-test-card-rating-num { color: rgba(0,176,80,0.7); }
.idx-test-card--blue .idx-test-card-rating-num { color: rgba(100,180,255,0.7); }
.idx-test-card-rating-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.idx-test-card-rating-label { font-size: var(--fs-micro); color: rgba(255,255,255,0.2); letter-spacing: 0.04em; text-transform: uppercase; }

/* ── FAQ ── */
.idx-faq-section { padding: 80px 0 40px; position: relative; overflow: hidden; }
.idx-faq-bg { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(0,176,80,0.02) 50%, transparent 100%); pointer-events: none; }
.idx-faq-orb { position: absolute; bottom: -150px; right: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 70%); pointer-events: none; animation: floatOrb 10s ease-in-out infinite; }
.idx-faq-container { position: relative; z-index: 1; }
.idx-faq-header { text-align: center; margin-bottom: 48px; }
.idx-faq-header h2 { margin-bottom: 0; }
.idx-faq-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.idx-faq-item { border-radius: 14px; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06); overflow: hidden; transition: all 0.35s ease; }
.idx-faq-summary { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); font-family: var(--font-heading); letter-spacing: -0.01em; transition: color 0.3s ease; list-style: none; }
.idx-faq-chevron { width: 16px; height: 16px; fill: none; stroke: rgba(0,0,0,0.15); stroke-width: 2; flex-shrink: 0; transition: transform 0.35s ease; }
.idx-faq-answer { padding: 0 22px 20px; font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.8; border-top: 1px solid rgba(0,176,80,0.06); padding-top: 14px; margin-top: 0; }
.idx-faq-item[open] { background: rgba(0,176,80,0.04); border-color: rgba(0,176,80,0.1); }

/* ── JOIN CARD ── */
.idx-join-section { margin-top: 100px; margin-bottom: 100px; }
.idx-join-outer { position: relative; border-radius: 16px; overflow: hidden; }
.idx-join-card { position: relative; border-radius: 16px; border: 1px solid rgba(0,176,80,0.12); box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
.idx-join-orb-tr { position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,176,80,0.08), transparent 70%); pointer-events: none; }
.idx-join-orb-bl { position: absolute; bottom: -60px; left: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(0,200,255,0.05), transparent 70%); pointer-events: none; }
.idx-join-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; padding: 48px 56px; position: relative; z-index: 1; align-items: start; }
.idx-join-badge-row { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.idx-join-badge-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, rgba(0,176,80,0.15), rgba(0,176,80,0.05)); border: 1px solid rgba(0,176,80,0.15); display: flex; align-items: center; justify-content: center; }
.idx-join-badge-icon svg { width: 18px; height: 18px; fill: none; stroke: #00B050; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idx-join-badge-text { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(0,176,80,0.6); font-family: var(--font-heading); }
.idx-join-title { font-size: var(--fs-h4); font-weight: 700; color: #fff; letter-spacing: -0.03em; margin-bottom: 20px; }
.idx-join-desc { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 0; max-width: 460px; }
.idx-join-features { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; }
.idx-join-feature { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body-sm); color: rgba(255,255,255,0.65); }
.idx-join-feature svg { width: 14px; height: 14px; fill: none; stroke: #00B050; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.idx-join-right { text-align: center; }
.idx-join-right-inner { margin-bottom: 24px; }
.idx-join-stat-num { font-family: var(--font-heading); font-size: var(--fs-stat); font-weight: 800; background: linear-gradient(135deg, #00B050, #00E676); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.idx-join-stat-label { color: rgba(255,255,255,0.4); font-size: var(--fs-body-sm); letter-spacing: 0.05em; }

/* ── Avatar Stack ── */
.idx-avatar-accent { background: var(--accent); overflow: hidden; }
.idx-avatar-blue { background: #1a73e8; overflow: hidden; }
.idx-avatar-orange { background: #e8711a; overflow: hidden; }
.idx-avatar-purple { background: #8e44ad; overflow: hidden; }
.idx-avatar-green { background: #2ecc71; overflow: hidden; }

/* ── Bar Widths ── */
.idx-bar-45 { width: 45%; }
.idx-bar-65 { width: 65%; }
.idx-bar-76 { width: 76%; }
.idx-bar-82 { width: 82%; }
.idx-bar-100 { width: 100%; }

/* ── Type Scale @768px ── */
@media (max-width: 768px) {
    :root {
        --fs-hero: clamp(2rem, 4.5vw, 3rem);
        --fs-section: 1.5rem;
        --fs-section-sub: 1rem;
        --fs-h3: 1.1rem;
        --fs-h4: 1rem;
        --fs-body-lg: 1rem;
        --fs-body: 0.875rem;
        --fs-body-sm: 0.8125rem;
        --fs-caption: 0.75rem;
        --fs-small: 0.6875rem;
        --fs-tiny: 0.6rem;
        --fs-micro: 0.5rem;
        --fs-stat: 1.5rem;
        --fs-stat-sm: 1.25rem;
    }
}

/* ── Type Scale @480px ── */
@media (max-width: 480px) {
    :root {
        --fs-hero: clamp(1.7rem, 7vw, 2.2rem);
        --fs-section: 1.25rem;
        --fs-section-sub: 0.875rem;
        --fs-h3: 1rem;
        --fs-h4: 0.9375rem;
        --fs-body-lg: 0.9375rem;
        --fs-body: 0.8125rem;
        --fs-body-sm: 0.75rem;
        --fs-caption: 0.6875rem;
        --fs-small: 0.6rem;
        --fs-tiny: 0.55rem;
        --fs-micro: 0.45rem;
        --fs-stat: 1.25rem;
        --fs-stat-sm: 1.125rem;
    }
}

/* ── Type Scale @360px ── */
@media (max-width: 360px) {
    :root {
        --fs-hero: 1.5rem;
        --fs-section: 1.1rem;
        --fs-section-sub: 0.8125rem;
        --fs-h3: 0.875rem;
        --fs-h4: 0.8125rem;
        --fs-body-lg: 0.875rem;
        --fs-body: 0.75rem;
        --fs-body-sm: 0.7rem;
        --fs-caption: 0.65rem;
        --fs-small: 0.55rem;
        --fs-tiny: 0.5rem;
        --fs-micro: 0.4rem;
        --fs-stat: 1.125rem;
        --fs-stat-sm: 1rem;
    }
}

/* ── Index Page Responsive ── */
@media (max-width: 1024px) {
    .idx-join-grid { grid-template-columns: 1fr; }
    .idx-app-layout { grid-template-columns: 1fr; gap: 40px; }
    .idx-app-content { order: -1; }
    .idx-app-img { display: none; }
    .idx-app-img-mobile { display: block; }
    .idx-app-ring, .idx-app-glow { display: none; }
    .idx-feat-grid { grid-template-columns: 1fr 1fr; }
    .idx-test-grid { grid-template-columns: 1fr 1fr; }
    .idx-how-grid { grid-template-columns: 1fr; }
    .idx-how-line { display: none; }
    .idx-hero { background-position: 60% center !important; }
    .idx-app-ring-1 { width: 380px; height: 380px; }
    .idx-app-ring-2 { width: 280px; height: 280px; }
    .idx-app-glow { width: 240px; height: 240px; }
}
@media (max-width: 768px) {
    .idx-hero { padding: 80px 0 60px; min-height: auto; }
    .idx-stats-grid { grid-template-columns: repeat(2,1fr); }
    .idx-stats-item { border-right: none; }
    .idx-stats-section { margin-top: 0; }
    .idx-feat-grid { grid-template-columns: 1fr; }
    .idx-test-grid { grid-template-columns: 1fr; }
    .idx-live-header { margin-bottom: 32px; }
    .idx-join-section { margin-top: 48px; margin-bottom: 48px; }
    .idx-join-grid { padding: 32px 20px; }
    .idx-live-stat-grid { grid-template-columns: repeat(2,1fr); }
    .idx-app-features { gap: 8px; }
    .idx-live-dashboard-bar { flex-wrap: wrap; gap: 8px; }
    .idx-live-network-left { flex-wrap: wrap; }
    .idx-test-header { flex-direction: column; align-items: flex-start; }
    .idx-test-right { flex-wrap: wrap; }
    .idx-live-section, .idx-test-section, .idx-app-section { padding: 60px 0; }
    .idx-faq-section { padding: 40px 0 20px; }
    .hero-btn { padding: 11px 22px; font-size: 0.8125rem; gap: 8px; }
    .idx-hero-btn-icon { width: 16px; height: 16px; }
    .idx-hero-btns { gap: 10px; margin-bottom: 36px; }
    .idx-hero-social { gap: 14px; }
    .idx-hero-chip { padding: 6px 16px 6px 6px; gap: 6px; margin-bottom: 22px; }
    .idx-hero-social-name { font-size: 0.9375rem; }
    .idx-stats-item { padding: 24px 16px 20px; }
    .idx-stats-icon { width: 34px; height: 34px; }
    .idx-stats-icon svg { width: 15px; height: 15px; }
    .idx-how-step-body { padding: 28px 20px 32px; }
    .idx-how-step-bg-num { font-size: 5rem; }
    .idx-how-step-icon-row { margin-bottom: 18px; }
    .idx-how-step-icon-wrap { width: 42px; height: 42px; }
    .idx-how-step-icon-wrap svg { width: 18px; height: 18px; }
    .idx-how-step-progress { gap: 8px; }
    .idx-app-img { max-width: 280px; }
    .idx-app-img-mobile { max-width: 260px; }
    .idx-app-badge-img { height: 38px; }
    .idx-app-badge-link { flex: 1; justify-content: center; }
    .idx-app-badge-link img { width: auto; height: 38px; }
    .idx-app-feature { padding: 12px 14px; }
    .idx-app-desc { margin-bottom: 24px; }
    .idx-app-ring-1 { width: 320px; height: 320px; }
    .idx-app-ring-2 { width: 240px; height: 240px; }
    .idx-app-glow { width: 200px; height: 200px; }
    .idx-feat-card-content { padding: 28px; }
    .idx-feat-card { min-height: 240px; }
    .idx-feat-card-title { font-size: 1.15rem; }
    .idx-feat-card-icon { width: 40px; height: 40px; }
    .idx-feat-card-icon svg { width: 18px; height: 18px; }
    .idx-live-dashboard-body { padding: 24px 16px 20px; }
    .idx-live-stat-num { font-size: 2rem; }
    .idx-live-network-section { padding: 0 16px 24px; }
    .idx-live-stat { padding: 18px 14px 16px; }
    .idx-test-card-body { padding: 24px 20px 20px; }
    .idx-test-card-avatar { width: 36px; height: 36px; }
    .idx-test-card-quote svg { width: 14px; height: 14px; }
    .idx-test-card-quote-text { line-height: 1.7; }
    .idx-test-card-stars-sm svg { width: 10px; height: 10px; }
    .idx-faq-summary { padding: 14px 16px; font-size: 0.8rem; }
    .idx-faq-answer { padding: 0 16px 16px; font-size: 0.8rem; }
    .idx-faq-list { gap: 8px; }
    .pillar-icon { width: 42px; height: 42px; }
    .pillar-icon svg { width: 20px; height: 20px; }
    .join-btn { padding: 15px 40px; font-size: 1rem; gap: 10px; }
    .join-btn-arrow { width: 16px; height: 16px; }
    .idx-join-stat-num { font-size: 2.5rem; }
    .idx-join-badge-icon { width: 34px; height: 34px; }
    .idx-join-badge-icon svg { width: 15px; height: 15px; }
    .idx-join-title { font-size: 1.375rem; }
    .idx-join-features { gap: 6px 16px; }
    .avatar-stack-item { width: 36px; height: 36px; margin-left: -11px; }
    .avatar-stack-count { width: 36px; height: 36px; margin-left: -11px; font-size: 0.6rem; }
    .idx-live-bar-right svg { width: 10px; height: 10px; }
    .idx-feat-card-img { background-position: 55% center !important; }
    .idx-live-dashboard { background-position: 55% center !important; }
    .idx-join-card { background-position: 55% center !important; }
}
@media (max-width: 480px) {
    .idx-stats-grid { grid-template-columns: 1fr; }
    .idx-live-stat-grid { grid-template-columns: 1fr; }
    .idx-join-grid { padding: 24px 16px; gap: 20px; }
    .idx-live-network-bar { padding: 0 12px; }
    .idx-live-network-dots { display: none; }
    .idx-live-network-info { display: none; }
    .hero-btn { padding: 8px 18px; font-size: 0.7rem; gap: 6px; width: 40%; justify-content: center; }
    .idx-hero-btn-icon { width: 15px; height: 15px; }
    .idx-hero-btns { margin-bottom: 28px; }
    .idx-hero-desc { font-size: 0.875rem; margin-bottom: 28px; }
    .idx-hero-chip { padding: 4px 12px 4px 5px; gap: 5px; margin-bottom: 18px; }
    .idx-hero-chip-badge { padding: 2px 8px; font-size: 0.5rem; }
    .idx-hero-social { gap: 12px; }
    .idx-hero-social-name { font-size: 0.875rem; }
    .idx-hero-social-sub { font-size: 0.6875rem; }
    .idx-hero { background-position: 70% center !important; }
    .idx-stats-item { padding: 18px 12px 16px; }
    .idx-stats-icon { width: 30px; height: 30px; margin-bottom: 10px; }
    .idx-stats-icon svg { width: 13px; height: 13px; }
    .idx-how-step-body { padding: 18px 14px 24px; }
    .idx-how-step-title { font-size: 0.9375rem; }
    .idx-how-step-desc { font-size: 0.775rem; margin-bottom: 18px; }
    .idx-how-step-icon-wrap { width: 36px; height: 36px; }
    .idx-how-step-icon-wrap svg { width: 16px; height: 16px; }
    .idx-how-step-icon-row { gap: 10px; margin-bottom: 16px; }
    .idx-how-step-bg-num { font-size: 3.5rem; bottom: 8px; right: 10px; }
    .idx-app-img { max-width: 200px; }
    .idx-app-img-mobile { max-width: 220px; }
    .idx-app-badge-img { height: 32px; }
    .idx-app-badge-link { flex: 1; justify-content: center; }
    .idx-app-badge-link img { width: auto; height: 32px; }
    .idx-app-feature { padding: 10px 12px; gap: 10px; }
    .idx-app-feature-text { font-size: 0.8125rem; }
    .idx-app-feature-dot { width: 5px; height: 5px; }
    .idx-app-desc { font-size: 0.875rem; margin-bottom: 20px; }
    .idx-app-title { font-size: clamp(1.3rem, 5vw, 1.6rem); }
    .idx-app-badges { gap: 10px; }
    .idx-app-ring-1 { width: 260px; height: 260px; }
    .idx-app-ring-2 { width: 200px; height: 200px; }
    .idx-app-glow { width: 160px; height: 160px; }
    .idx-app-section { padding: 40px 0; }
    .idx-feat-card-content { padding: 24px !important; }
    .idx-feat-card { min-height: 220px; }
    .idx-feat-card-title { font-size: 1.0625rem; }
    .idx-feat-card-desc { font-size: 0.875rem; max-width: 100%; }
    .idx-feat-card-icon { width: 38px; height: 38px; }
    .idx-feat-card-icon svg { width: 17px; height: 17px; }
    .idx-feat-card-label { font-size: 0.52rem; }
    .idx-feat-card-header { margin-bottom: 18px; }
    .idx-live-stat-num { font-size: 1.4rem; }
    .idx-live-dashboard-body { padding: 16px 10px 14px; }
    .idx-live-stat { padding: 14px 10px 12px; }
    .idx-live-stat-label { font-size: 0.6rem; }
    .idx-live-dashboard-bar { padding: 10px 12px; gap: 6px; }
    .idx-live-bar-left { gap: 6px; }
    .idx-live-bar-right svg { width: 9px; height: 9px; }
    .idx-live-network-section { padding: 0 10px 16px; }
    .idx-test-card-body { padding: 18px 14px 16px !important; }
    .idx-test-card-quote-text { font-size: 0.775rem; }
    .idx-test-card-avatar { width: 32px; height: 32px; }
    .idx-test-card-name { font-size: 0.75rem; }
    .idx-test-card-role { font-size: 0.6rem; }
    .idx-test-card-quote svg { width: 12px; height: 12px; }
    .idx-test-card-stars-sm svg { width: 9px; height: 9px; }
    .idx-test-card-footer { padding-top: 12px; }
    .idx-test-card-rating-num { font-size: 0.65rem; }
    .idx-test-card-avatar-row { margin-bottom: 14px; gap: 10px; }
    .idx-test-rating-card { padding: 8px 14px; gap: 8px; }
    .idx-test-stars svg { width: 12px; height: 12px; }
    .idx-test-rating-count { font-size: 0.6rem; }
    .idx-test-heading { font-size: clamp(1.4rem, 5vw, 1.8rem); }
    .idx-test-right { gap: 14px; }
    .idx-test-card-glow { display: none; }
    .idx-test-section { padding: 40px 0; }
    .idx-faq-summary { padding: 10px 12px; font-size: 0.75rem; }
    .idx-faq-answer { padding: 0 12px 14px; }
    .idx-faq-chevron { width: 14px; height: 14px; }
    .idx-faq-list { gap: 6px; }
    .idx-faq-item { border-radius: 10px; }
    .join-btn { padding: 13px 32px; font-size: 0.9375rem; width: 100%; justify-content: center; }
    .join-btn-arrow { width: 15px; height: 15px; }
    .idx-join-stat-num { font-size: 2rem; }
    .idx-join-title { font-size: 1.15rem; margin-bottom: 14px; }
    .idx-join-desc { font-size: 0.8125rem; }
    .idx-join-badge-row { margin-bottom: 20px; gap: 10px; }
    .idx-join-badge-icon { width: 30px; height: 30px; }
    .idx-join-badge-icon svg { width: 13px; height: 13px; }
    .idx-join-badge-text { font-size: 0.5rem; }
    .idx-join-feature { gap: 6px; }
    .idx-join-feature svg { width: 12px; height: 12px; }
    .idx-join-features { gap: 6px 12px; margin-top: 18px; }
    .idx-join-right-inner { margin-bottom: 18px; }
    .avatar-stack-item { width: 30px; height: 30px; margin-left: -9px; border-width: 2px; }
    .avatar-stack-count { width: 30px; height: 30px; margin-left: -9px; border-width: 2px; font-size: 0.5rem; }
    .pillar-icon { width: 36px; height: 36px; margin-bottom: 12px; border-radius: 14px; }
    .pillar-icon svg { width: 18px; height: 18px; }
    .idx-live-stat-grid { gap: 10px; }
    .idx-live-bar-divider { margin: 0 2px; }
    .idx-live-dashboard-overlay { display: none; }
    .idx-live-grid-bg { opacity: 0.15; }
    .idx-hero-orb-1 { width: 250px; height: 250px; top: -60px; right: -40px; }
    .idx-hero-orb-2 { width: 200px; height: 200px; bottom: -50px; left: -30px; }
    .idx-app-orb-1 { width: 350px; height: 350px; top: -150px; right: -100px; }
    .idx-app-orb-2 { width: 250px; height: 250px; bottom: -100px; left: -80px; }
    .idx-live-orb-1 { width: 300px; height: 300px; top: -120px; right: -60px; }
    .idx-live-orb-2 { width: 200px; height: 200px; bottom: -80px; left: -40px; }
    .idx-test-orb-1 { width: 300px; height: 300px; top: -100px; right: -50px; }
    .idx-test-orb-2 { width: 250px; height: 250px; bottom: -80px; left: -50px; }
    .idx-faq-orb { width: 250px; height: 250px; bottom: -80px; right: -60px; }
    .idx-join-orb-tr { width: 120px; height: 120px; top: -30px; right: -30px; }
    .idx-join-orb-bl { width: 120px; height: 120px; bottom: -30px; left: -30px; }
    .idx-hero-accent-line { height: 2px; }
    .idx-hero-overlay { background: linear-gradient(135deg, rgba(13,40,24,0.92) 0%, rgba(13,40,24,0.55) 50%, rgba(13,40,24,0.25) 100%); }
    .idx-feat-card-img { background-position: 60% center !important; }
    .idx-live-dashboard { background-position: 55% center !important; }
    .idx-join-card { background-position: 55% center !important; }
}
@media (max-width: 360px) {
    .idx-hero { padding: 60px 0 40px; }
    .idx-hero-desc { font-size: 0.8125rem; }
    .idx-stats-item { padding: 14px 10px 14px; }
    .idx-stats-icon { width: 28px; height: 28px; }
    .idx-stats-icon svg { width: 12px; height: 12px; }
    .idx-how-card-inner { padding: 18px 14px 22px; }
    .idx-how-card h3 { font-size: 1rem; }
    .idx-how-card p { font-size: 0.75rem; margin-bottom: 16px; }
    .idx-how-card-icon { width: 36px; height: 36px; border-radius: 12px; }
    .idx-how-card-icon svg { width: 16px; height: 16px; }
    .idx-how-card-num { font-size: 3rem; bottom: 6px; right: 10px; }
    .idx-how-card-head { gap: 10px; margin-bottom: 18px; }
    .idx-how-card-bar-text { font-size: 0.55rem; }
    .idx-app-img { max-width: 160px; }
    .idx-app-img-mobile { max-width: 180px; }
    .idx-app-ring-1 { width: 200px; height: 200px; }
    .idx-app-ring-2 { width: 160px; height: 160px; }
    .idx-app-glow { width: 120px; height: 120px; }
    .idx-app-section { padding: 30px 0; }
    .idx-app-feature { padding: 8px 10px; gap: 8px; }
    .idx-app-feature-text { font-size: 0.75rem; }
    .idx-app-badge-img { height: 28px; }
    .idx-app-badges { flex-direction: column; align-items: center; gap: 10px; }
    .idx-app-badge-link { width: 100%; max-width: 200px; justify-content: center; }
    .idx-feat-card-content { padding: 20px !important; }
    .idx-feat-card { min-height: 200px; }
    .idx-feat-card-icon { width: 34px; height: 34px; }
    .idx-feat-card-icon svg { width: 15px; height: 15px; }
    .idx-feat-card-title { font-size: 1rem; }
    .idx-feat-card-desc { font-size: 0.8125rem; }
    .idx-feat-card-label { font-size: 0.5rem; }
    .idx-test-card-body { padding: 14px 12px 14px !important; }
    .idx-test-card-avatar { width: 28px; height: 28px; }
    .idx-test-card-name { font-size: 0.7rem; }
    .idx-test-card-role { font-size: 0.55rem; }
    .idx-test-card-quote-text { font-size: 0.7rem; }
    .idx-test-card-quote svg { width: 10px; height: 10px; }
    .idx-test-card-stars-sm svg { width: 8px; height: 8px; }
    .idx-test-heading { font-size: 1.2rem; }
    .idx-live-stat-num { font-size: 1.2rem; }
    .idx-live-stat { padding: 12px 8px 10px; }
    .idx-live-dashboard-body { padding: 14px 8px 12px; }
    .idx-faq-summary { padding: 8px 10px; font-size: 0.7rem; }
    .idx-faq-answer { padding: 0 10px 12px; }
    .idx-faq-chevron { width: 12px; height: 12px; }
    .idx-join-grid { padding: 18px 14px; gap: 16px; }
    .idx-join-stat-num { font-size: 1.75rem; }
    .idx-join-title { font-size: 1rem; }
    .idx-join-desc { font-size: 0.75rem; }
    .idx-join-badge-icon { width: 26px; height: 26px; }
    .idx-join-badge-icon svg { width: 11px; height: 11px; }
    .join-btn { padding: 11px 24px; font-size: 0.875rem; }
    .hero-btn { padding: 7px 14px; font-size: 0.65rem; width: 40%; justify-content: center; }
    .pillar-icon { width: 32px; height: 32px; }
    .pillar-icon svg { width: 15px; height: 15px; }
    .idx-live-section, .idx-test-section, .idx-app-section { padding: 30px 0; }
    .idx-feat-section { padding: 30px 0; }
}

/* ── Marketplace utilities ── */
.fs-0875 { font-size: 0.875rem; }
.h-full { height: 100%; }
.ethereal-bg { background: var(--bg-ethereal, var(--bg-warm)); }
.fade-in-scale {
    opacity: 0; transform: scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.fade-in-scale.in-view { opacity: 1; transform: scale(1); }
.stagger-1 { transition-delay: 0s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.24s; }

.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bento-card-img { width: 100%; height: 100%; object-fit: cover; }
.bento-green {
    background: linear-gradient(135deg, #0D2818 0%, #163A26 40%, #0f2e1e 100%) !important;
    border-color: rgba(0,176,80,0.06) !important;
}
.glow-hover { transition: all 0.45s cubic-bezier(0.22,1,0.36,1); }
.glow-hover:hover { box-shadow: 0 8px 32px rgba(0,176,80,0.08), 0 0 0 1px rgba(0,176,80,0.06); }

/* ── Marketplace hero ── */
.mp-hero-inner { position: relative; z-index: 2; }
.mp-hero-grid { display: grid; grid-template-columns: 1.3fr 0.85fr; gap: 56px; align-items: center; }

/* ── Live Badge ── */
.lb {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 18px; border-radius: 100px;
    font-family: var(--font-heading);
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    background: rgba(0,176,80,0.1); color: var(--accent);
    border: 1px solid rgba(0,176,80,0.15);
    margin-bottom: 20px; backdrop-filter: blur(4px);
}
.lb .d {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 8px rgba(0,176,80,0.5);
    animation: pulse-dot 1.8s ease-in-out infinite;
}

/* ── Title ── */
.mp-hero-title { font-size: clamp(2rem, 4vw, 2.85rem); color: #fff; line-height: 1.04; margin-bottom: 14px; word-break: break-word; font-weight: 700; letter-spacing: -0.02em; }
.mp-hero-title-accent { background: linear-gradient(135deg, #38EF7D, #64B4FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── Description ── */
.mp-hero-desc {
    font-size: 1rem; color: rgba(255,255,255,0.65); line-height: 1.8;
    margin-bottom: 28px; max-width: 500px; word-break: break-word;
}

/* ── Search Bar ── */
.sw {
    display: flex; align-items: center; max-width: 520px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    transition: all 0.4s ease;
    backdrop-filter: blur(8px);
}
.sw:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0,176,80,0.15), 0 0 30px rgba(0,176,80,0.08); background: rgba(255,255,255,0.07); }
.sw input {
    flex: 1; min-width: 0; border: none; outline: none; box-shadow: none;
    padding: 14px 20px; font-size: 0.8125rem; font-family: var(--font-body);
    color: #fff; background: transparent;
}
.sw input::placeholder { color: rgba(255,255,255,0.3); }
.sw button {
    padding: 10px 28px; margin: 4px; border-radius: 999px;
    background: var(--accent); color: #fff; border: none; font-weight: 600; font-size: 0.75rem;
    cursor: pointer; transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0,176,80,0.25);
    letter-spacing: 0.02em;
}
.sw button:hover { background: var(--accent-hover); transform: scale(1.03); box-shadow: 0 6px 28px rgba(0,176,80,0.35); }

/* ── Hero Stats ── */
.hs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06);
}
.hs > div { text-align: center; position: relative; padding: 4px 0; }
.hs > div:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 10%; height: 80%; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.08), transparent);
}
.hs .v { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; word-break: break-word; }
.hs .l { font-size: 0.6rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; word-break: break-word; }

/* ── Side Card ── */
.mp-hero-side-card {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px 28px 36px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}
.mp-hero-side-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    pointer-events: none;
}
.mp-hero-side-orb {
    position: absolute; top: -40px; right: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(56,239,125,0.1), transparent 70%);
    pointer-events: none;
}
.mp-hero-side-icon {
    width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(0,176,80,0.18), rgba(0,176,80,0.04));
    border: 1px solid rgba(0,176,80,0.1);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,176,80,0.1);
}
.mp-hero-side-icon svg { width: 26px; height: 26px; color: var(--accent); }
.mp-hero-side-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mp-hero-side-stats > div {
    padding: 14px 8px; border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s;
}
.mp-hero-side-stats > div:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.mp-hero-side-stat-value { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: #fff; word-break: break-word; letter-spacing: -0.02em; }
.mp-hero-side-stat-label { font-size: 0.55rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; word-break: break-word; margin-top: 3px; }
.mp-hero-orb-1 { width: 500px; height: 500px; top: -200px; right: -100px; background: radial-gradient(circle, rgba(56,239,125,0.15), transparent 70%); animation-delay: 0s; }
.mp-hero-orb-2 { width: 350px; height: 350px; bottom: -120px; left: 8%; background: radial-gradient(circle, rgba(100,180,255,0.1), transparent 70%); animation-delay: -4s; }
.mp-hero-orb-3 { width: 200px; height: 200px; top: 20%; right: 25%; background: radial-gradient(circle, rgba(0,176,80,0.08), transparent 70%); animation-delay: -8s; }
.mp-hero .grid-lines {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(0,176,80,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,176,80,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
}

/* ── Filters ── */
.mp-filters { padding: 24px 0; }
.fb { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.fp { display: flex; flex-wrap: wrap; gap: 6px; }
.fp span {
    padding: 5px 16px; border-radius: 100px;
    font-size: 0.65rem; font-weight: 500; cursor: pointer;
    background: var(--bg-warm); color: var(--text-tertiary); border: 1px solid var(--border-light);
    transition: all 0.35s cubic-bezier(0.22,1,0.36,1); user-select: none;
}
.fp span:hover { border-color: var(--accent); color: var(--accent); }
.fp span.on { background: var(--accent-subtle); color: var(--accent); border-color: rgba(0,176,80,0.15); }
.sr select {
    padding: 6px 28px 6px 14px;
    font-size: 0.7rem; color: var(--text-secondary);
    background: var(--bg-warm); border: 1px solid var(--border-light);
    border-radius: 100px;
    appearance: none; cursor: pointer;
    font-family: var(--font-body);
}

/* ── Spotlight ── */
.spotlight {
    display: flex; align-items: center; gap: 32px;
    padding: 40px 44px;
    position: relative; overflow: hidden;
    min-height: 280px;
}
.spotlight-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 30% 50%, rgba(0,176,80,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(100,180,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}
.spotlight-charge {
    position: absolute; top: -30%; right: -10%;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,176,80,0.06), transparent 70%);
    pointer-events: none;
    animation: spotlight-pulse 6s ease-in-out infinite;
}
@keyframes spotlight-pulse {
    0%,100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}
.spotlight-img {
    position: relative;
    width: 240px; height: 200px; flex-shrink: 0;
    border-radius: var(--radius-md); overflow: hidden;
    background-size: cover; background-position: center;
}
.mp-spotlight { margin-bottom: 36px; }
.mp-spotlight-title {
    font-size: clamp(1.25rem, 2.2vw, 1.625rem); color: #fff; margin-bottom: 6px;
}
.mp-spotlight-desc {
    color: rgba(255,255,255,0.55); font-size: 0.875rem; line-height: 1.6; max-width: 400px;
}
.mp-spotlight-pricing { display: flex; gap: 28px; margin: 16px 0 20px; }
.mp-spotlight-price-value {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: #fff;
}
.mp-spotlight-price-sub { font-size: 0.6rem; color: rgba(255,255,255,0.35); }
.mp-spotlight-price-divider {
    border-left: 1px solid rgba(255,255,255,0.08); padding-left: 28px;
}
.mp-spotlight-discount {
    font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--accent);
}
.mp-spotlight-img-wrap {
    flex-shrink: 0; width: 220px; height: 220px; border-radius: var(--radius-md);
    background-size: cover; background-position: center;
    border: 1px solid rgba(255,255,255,0.08); position: relative; z-index: 1;
}
.mp-spotlight-img-glow {
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 40px rgba(0,176,80,0.1);
}
.mp-spotlight-cta { display: inline-flex; align-items: center; gap: 6px; }

/* ── Products ── */
.pi {
    position: relative; height: 180px; overflow: hidden;
    background: var(--bg-warm);
}
.pi img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.bento-card:hover .pi img { transform: scale(1.06); }
.tag {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 3px 12px; border-radius: 100px;
    font-size: 0.45rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    backdrop-filter: blur(4px);
}
.tag.gr { background: rgba(0,176,80,0.85); color: #fff; }
.tag.gd { background: rgba(217,165,60,0.85); color: #fff; }
.tag.rd { background: rgba(229,57,53,0.85); color: #fff; }
.tag.dk { background: rgba(13,40,24,0.85); color: var(--accent); }
.tag.bl { background: rgba(100,180,255,0.85); color: #fff; }
.tag-bot {
    position: absolute; bottom: 10px; left: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 100px;
    font-size: 0.45rem; font-weight: 600;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    color: #fff;
}
.ct {
    font-size: 0.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--accent); margin-bottom: 4px;
}
.pd { font-size: 0.675rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.pr { display: flex; align-items: center; gap: 2px; margin-bottom: 10px; }
.pr .rc { font-size: 0.55rem; color: var(--text-tertiary); margin-left: 4px; }
.star { color: #D9A53C; font-size: 10px; }
.star-o { color: #D9A53C; font-size: 10px; opacity: 0.3; }
.rw { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-light); }
.us { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.ad { font-size: 0.55rem; color: var(--accent); background: var(--accent-subtle); padding: 3px 12px; border-radius: 100px; border: 1px solid rgba(0,176,80,0.06); }
.ab {
    width: 100%; padding: 9px; border-radius: 100px; font-size: 0.675rem; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.3s; font-family: var(--font-body);
    background: var(--bg-warm); color: var(--text-secondary); border: 1px solid var(--border-light);
}
.ab.ac { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,176,80,0.15); }
.ab.ac:hover { background: var(--accent-hover); color: #fff; transform: scale(1.02); }
.ab:hover { border-color: var(--accent); color: var(--accent); }

/* ── Products section ── */
.mp-products { padding: 80px 0; }
.mp-products-heading { text-align: center; margin-bottom: 32px; }
.mp-products-heading .section-subtitle { margin: 0 auto; }
.mp-products-grid { grid-template-columns: repeat(3, 1fr); }
.mp-products-load { text-align: center; margin-top: 36px; }

/* ── Why section ── */
.mp-why-heading { text-align: center; margin-bottom: 40px; }
.mp-why-heading .section-subtitle { margin: 0 auto; }
.wg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wi {
    border-radius: var(--radius-md); padding: 32px 24px; text-align: center;
    background: var(--card-bg); border: 1px solid var(--border-light);
    transition: all 0.4s;
}
.wi:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,176,80,0.04), var(--shadow-sm); border-color: rgba(0,176,80,0.06); }
.wii {
    width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 12px;
    background: var(--accent-subtle); border: 1px solid rgba(0,176,80,0.06);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s;
}
.wi:hover .wii { transform: scale(1.08); background: rgba(0,176,80,0.1); }
.wii svg { width: 18px; height: 18px; color: var(--accent); }
.wi h3 { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.wi p { font-size: 0.65rem; color: var(--text-secondary); line-height: 1.5; }

/* ── CTA ── */
.mp-cta { padding: 60px 0; }
.mc {
    position: relative; border-radius: var(--radius-xl); overflow: hidden;
    padding: 56px 48px; text-align: center;
    background: linear-gradient(135deg, #0D2818, #163A26);
    border: 1px solid rgba(0,176,80,0.06);
}
.mc-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(0,176,80,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,176,80,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 80%);
}
.mc-bg-2 {
    position: absolute; top: -40%; right: -10%;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,176,80,0.05), transparent 70%);
    pointer-events: none;
}
.mp-cta-inner { position: relative; z-index: 2; }
.mp-cta-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; color: #fff;
    font-family: var(--font-heading); line-height: 1.08; letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.mp-cta-desc {
    font-size: 0.875rem; color: rgba(255,255,255,0.6);
    line-height: 1.7; max-width: 480px; margin: 0 auto 24px;
}
.mp-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Index Five Pillars Bento Grid ── */
.idx-pillars-grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr auto;
}
.idx-pillars-main { grid-column: 1; grid-row: 1 / 3; }
.idx-pillars-bar-section { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.04); }
.idx-pillars-bar-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.idx-pillars-bar-left { flex: 1; }
.idx-pillars-bar-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.idx-pillars-bar-label {
    font-size: 0.6rem; color: rgba(255,255,255,0.35); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.idx-pillars-bar-value { font-size: 0.75rem; font-weight: 700; }
.idx-pillars-bar-track {
    width: 100%; height: 4px; border-radius: 99px;
    background: rgba(255,255,255,0.04); overflow: hidden;
}
.idx-pillars-bar-fill {
    height: 100%; border-radius: 99px; transition: width 0.6s ease;
}
.idx-pillars-main-desc {
    color: rgba(255,255,255,0.75); font-size: 0.9375rem; line-height: 1.8; max-width: 380px;
}

/* ── Index How It Works Section ── */
.idx-how-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative;
}
.idx-how-line {
    position: absolute; top: 90px;
    left: calc(16.66% + 28px); right: calc(16.66% + 28px);
    height: 1px;
    background: linear-gradient(90deg, rgba(34,197,94,0.25), rgba(0,230,118,0.1), rgba(13,148,136,0.25));
    pointer-events: none; z-index: 0;
}
.idx-how-line .dot-1 {
    position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #22C55E;
}
.idx-how-line .dot-2 {
    position: absolute; left: 50%; top: -3px; width: 7px; height: 7px;
    border-radius: 50%; background: rgba(0,230,118,0.25); transform: translateX(-50%);
}
.idx-how-line .dot-3 {
    position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #0D9488;
}
.idx-how-card {
    position: relative; border-radius: 20px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    transition: all 0.5s cubic-bezier(0.22,1,0.36,1); overflow: hidden;
}
.idx-how-card:hover { transform: translateY(-6px); }
.idx-how-card-inner { position: relative; padding: 36px 28px 40px; z-index: 1; }
.idx-how-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.idx-how-card-icon {
    width: 48px; height: 48px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.idx-how-card-icon svg { width: 20px; height: 20px; }
.idx-how-card-step {
    font-size: 0.55rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; font-family: var(--font-heading);
}
.idx-how-card h3 {
    font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 10px;
}
.idx-how-card p {
    font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.8; margin-bottom: 24px;
}
.idx-how-card-bar { display: flex; align-items: center; gap: 10px; }
.idx-how-card-bar-track {
    flex: 1; height: 4px; border-radius: 99px;
    background: rgba(255,255,255,0.04); overflow: hidden;
}
.idx-how-card-bar-fill {
    height: 100%; border-radius: 99px; transition: width 0.6s ease;
}
    .idx-how-card-bar-text { font-size: 0.6rem; font-weight: 600; font-family: var(--font-heading);
}

.idx-how-card-num {
    position: absolute; bottom: 12px; right: 16px;
    font-family: var(--font-heading); font-size: 7rem; font-weight: 800;
    line-height: 0.7; pointer-events: none; letter-spacing: -0.06em;
}

/* ── Marketplace + Pillars responsive ── */
@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .idx-pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .idx-pillars-main { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .idx-pillars-grid > *:not(.idx-pillars-main) { grid-column: auto !important; grid-row: auto !important; }
    .wg { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .mp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .mp-hero-side-card { max-width: 320px; margin: 0 auto; }
    .mp-hero-desc { max-width: 100%; }
    .spotlight { flex-direction: column; text-align: center; padding: 32px 24px; }
    .spotlight-img { width: 100%; max-width: 320px; height: 200px; }
}
@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
    .idx-pillars-grid { grid-template-columns: 1fr; }
    .idx-pillars-main { grid-column: 1 !important; grid-row: auto !important; }
    .idx-pillars-grid > *:not(.idx-pillars-main) { grid-column: 1 !important; grid-row: auto !important; }
    .idx-pillars-bar-section { padding-top: 12px; }
    .idx-pillars-bar-track { height: 3px; }
    .idx-pillars-main-desc { max-width: 100%; }
    .idx-how-grid { grid-template-columns: 1fr; gap: 20px; }
    .idx-how-card-inner { padding: 28px 22px 32px; }
    .idx-how-card-num { font-size: 5rem; }
    .wg { grid-template-columns: 1fr; }
    .mc { padding: 40px 24px; }
    .mp-hero { padding: 110px 0 60px; min-height: auto; }
    .mp-hero-grid { gap: 40px; }
    .sw { max-width: 100%; flex-wrap: wrap; }
    .hs { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; padding-top: 18px; }
    .hs > div:nth-child(2)::after { display: none; }
    .mp-hero-side-card { padding: 32px 24px 28px; }
    .fb { flex-direction: column; align-items: flex-start; }
    .spotlight-badge { font-size: 0.6rem; padding: 5px 14px; }
}
@media (max-width: 480px) {
    .mp-hero-grid { gap: 24px; }
    .mp-hero-side-card { padding: 28px 20px 24px; }
    .mp-hero-side-icon { width: 48px; height: 48px; margin-bottom: 14px; }
    .mp-hero { padding: 90px 0 50px; }
    .mp-hero-desc { font-size: 0.9rem; }
    .hs .v { font-size: 1.1rem; }
    .spotlight { padding: 24px 16px; min-height: auto; }
    .spotlight-img { height: 160px; }
    .idx-pillars-grid { grid-template-columns: 1fr; gap: 12px; }
    .idx-pillars-grid > * { grid-column: 1 !important; grid-row: auto !important; }
    .idx-pillars-bar-section { padding-top: 10px; margin-top: auto; }
    .idx-pillars-bar-track { height: 3px; }
    .idx-pillars-bar-label { font-size: 0.55rem; }
    .idx-pillars-bar-value { font-size: 0.7rem; }
    .idx-pillars-main-desc { font-size: 0.8125rem; max-width: 100%; line-height: 1.7; }
    .idx-pillars-grid .eco-btn { margin-top: 18px; padding: 9px 20px; font-size: 0.75rem; }
    .idx-pillars-grid .bento-card-content [style*="width:44px"] { width: 36px !important; height: 36px !important; border-radius: 12px !important; }
    .idx-pillars-grid .bento-card-content [style*="width:44px"] svg { width: 16px !important; height: 16px !important; }
    .idx-pillars-grid .bento-card-content [style*="font-size:2rem"] { font-size: 1.4rem !important; }
    .idx-pillars-grid .bento-card-content [style*="margin-bottom:24px"] { margin-bottom: 16px !important; }
    .idx-pillars-grid .bento-card-content [style*="font-size:1rem"] { font-size: 0.9rem !important; }
    .idx-pillars-grid .bento-card-content [style*="font-size:0.8125rem"] { font-size: 0.75rem !important; }
    .idx-pillars-grid .bento-card-content [style*="margin-bottom:20px"] { margin-bottom: 14px !important; }
    .idx-pillars-bar-label { font-size: 0.5rem; }
    .idx-pillars-bar-value { font-size: 0.65rem; }
    .idx-pillars-bar-header { margin-bottom: 4px; }
    .idx-how-card-inner { padding: 22px 18px 28px; }
    .idx-how-card h3 { font-size: 1.1rem; }
    .idx-how-card p { font-size: 0.8125rem; margin-bottom: 20px; }
    .idx-how-card-icon { width: 42px; height: 42px; border-radius: 14px; }
    .idx-how-card-icon svg { width: 18px; height: 18px; }
    .idx-how-card-num { font-size: 4rem; bottom: 8px; right: 12px; }
    .idx-how-heading { margin-bottom: 36px !important; }
    .pi { height: 150px; }
    .wi { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── ECOSYSTEM BENTO ── */
.idx-eco-section { padding-top: 40px; }
.idx-eco-header { text-align: center; margin-bottom: 60px; }
.idx-eco-subtitle { margin: 0 auto; }
.idx-eco-bento { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr auto; }

.idx-eco-main {
    grid-column: 1; grid-row: 1/3;
    display: flex; flex-direction: column; justify-content: center;
    background-position: center center; background-size: cover; background-repeat: no-repeat;
    position: relative;
}
.idx-eco-main-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,40,24,0.7), rgba(13,40,24,0.3));
}
.idx-eco-main-title { font-size: var(--fs-h4); color: #fff; margin-bottom: 10px; }
.idx-eco-main-desc { color: rgba(255,255,255,0.75); font-size: var(--fs-body-lg); line-height: 1.8; max-width: 380px; }
.idx-eco-main .bento-card-content { position: relative; z-index: 1; }
.idx-eco-main .pillar-icon { background: rgba(255,255,255,0.08); }

.idx-eco-card {
    position: relative; border-radius: 16px; overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22,1,0.36,1); cursor: default;
    will-change: transform;
}
.idx-eco-card-bg {
    position: absolute; inset: 0; pointer-events: none;
}
.idx-eco-card-orb {
    position: absolute; pointer-events: none; border-radius: 50%;
}
.idx-eco-card-content {
    display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1;
}
.idx-eco-card-head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;
}
.idx-eco-card-icon {
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
}
.idx-eco-card-icon svg { width: 20px; height: 20px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idx-eco-card-num {
    font-family: var(--font-heading); font-size: var(--fs-stat); font-weight: 700;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1; letter-spacing: -0.03em;
}
.idx-eco-card-title { font-size: var(--fs-body); margin-bottom: 6px; color: #fff; letter-spacing: -0.01em; }
.idx-eco-card-desc { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.5); line-height: 1.7; flex: 1; margin-bottom: 20px; }
.idx-eco-card-foot {
    margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.04);
}
.idx-eco-card-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.idx-eco-card-foot-block { flex: 1; }
.idx-eco-card-foot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.idx-eco-card-foot-label { font-size: var(--fs-tiny); color: rgba(255,255,255,0.35); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.idx-eco-card-foot-val { font-size: var(--fs-small); font-weight: 700; }
.idx-eco-card-bar-track { width: 100%; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.04); overflow: hidden; }
.idx-eco-card-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; }
.idx-eco-card-trend { display: flex; align-items: center; gap: 6px; margin-top: 0; }
.idx-eco-card-trend svg { width: 14px; height: 14px; fill: none; stroke-width: 2; stroke: #4CAF50; }
.idx-eco-card-trend-text { font-size: var(--fs-tiny); font-weight: 600; color: rgba(76,175,80,0.8); }
.idx-eco-card-hover-glow { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; opacity: 0; transition: opacity 0.4s ease; }

/* Card grid positions */
.idx-eco-card[data-card="1"] { grid-column: 2; grid-row: 1; background: linear-gradient(145deg, #0A1F12, #132A1C); border: 1px solid rgba(0,176,80,0.06); }
.idx-eco-card[data-card="2"] { grid-column: 3; grid-row: 1; background: linear-gradient(145deg, #0F1B2E, #162240); border: 1px solid rgba(100,180,255,0.06); }
.idx-eco-card[data-card="3"] { grid-column: 2; grid-row: 2; background: linear-gradient(145deg, #170A2E, #1E1038); border: 1px solid rgba(180,130,255,0.06); }
.idx-eco-card[data-card="4"] { grid-column: 3; grid-row: 2; background: linear-gradient(145deg, #0A1F1F, #0F2A28); border: 1px solid rgba(0,200,200,0.06); }

/* Card 1 — Amber (Charging Revenue) */
.idx-eco-card[data-card="1"] .idx-eco-card-bg { background: radial-gradient(ellipse at 30% 0%, rgba(0,176,80,0.06), transparent 60%); }
.idx-eco-card[data-card="1"] .idx-eco-card-orb { top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(0,176,80,0.04), transparent 70%); }
.idx-eco-card[data-card="1"] .idx-eco-card-icon { background: linear-gradient(135deg, rgba(255,183,77,0.15), rgba(255,183,77,0.04)); border: 1px solid rgba(255,183,77,0.1); }
.idx-eco-card[data-card="1"] .idx-eco-card-icon svg { stroke: #FFB74D; }
.idx-eco-card[data-card="1"] .idx-eco-card-num { background: linear-gradient(135deg, rgba(0,176,80,0.25), rgba(0,176,80,0.08)); }
.idx-eco-card[data-card="1"] .idx-eco-card-foot-val { color: #FFB74D; }
.idx-eco-card[data-card="1"] .idx-eco-card-bar-fill { background: linear-gradient(90deg, #FFB74D, rgba(255,183,77,0.3)); width: 65%; }
.idx-eco-card[data-card="1"] .idx-eco-card-hover-glow { background: linear-gradient(90deg, transparent, rgba(255,183,77,0.15), transparent); }

/* Card 2 — Blue (Referral Network) */
.idx-eco-card[data-card="2"] .idx-eco-card-bg { background: radial-gradient(ellipse at 70% 0%, rgba(100,180,255,0.05), transparent 60%); }
.idx-eco-card[data-card="2"] .idx-eco-card-orb { bottom: -30px; left: -30px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(100,180,255,0.04), transparent 70%); }
.idx-eco-card[data-card="2"] .idx-eco-card-icon { background: linear-gradient(135deg, rgba(100,180,255,0.15), rgba(100,180,255,0.04)); border: 1px solid rgba(100,180,255,0.1); }
.idx-eco-card[data-card="2"] .idx-eco-card-icon svg { stroke: #64B4FF; }
.idx-eco-card[data-card="2"] .idx-eco-card-num { background: linear-gradient(135deg, rgba(100,180,255,0.25), rgba(100,180,255,0.08)); }
.idx-eco-card[data-card="2"] .idx-eco-card-foot-val { color: #64B4FF; }
.idx-eco-card[data-card="2"] .idx-eco-card-bar-fill { background: linear-gradient(90deg, #64B4FF, rgba(100,180,255,0.3)); width: 82%; }
.idx-eco-card[data-card="2"] .idx-eco-card-hover-glow { background: linear-gradient(90deg, transparent, rgba(100,180,255,0.15), transparent); }

/* Card 3 — Purple (ADN Rewards) */
.idx-eco-card[data-card="3"] .idx-eco-card-bg { background: radial-gradient(ellipse at 30% 100%, rgba(180,130,255,0.05), transparent 60%); }
.idx-eco-card[data-card="3"] .idx-eco-card-orb { top: -20px; left: -20px; width: 80px; height: 80px; background: radial-gradient(circle, rgba(180,130,255,0.05), transparent 70%); }
.idx-eco-card[data-card="3"] .idx-eco-card-icon { background: linear-gradient(135deg, rgba(180,130,255,0.15), rgba(180,130,255,0.04)); border: 1px solid rgba(180,130,255,0.1); }
.idx-eco-card[data-card="3"] .idx-eco-card-icon svg { stroke: #B482FF; }
.idx-eco-card[data-card="3"] .idx-eco-card-num { background: linear-gradient(135deg, rgba(180,130,255,0.25), rgba(180,130,255,0.08)); }
.idx-eco-card[data-card="3"] .idx-eco-card-foot-val { color: #B482FF; }
.idx-eco-card[data-card="3"] .idx-eco-card-hover-glow { background: linear-gradient(90deg, transparent, rgba(180,130,255,0.15), transparent); }

/* Card 4 — Teal (Marketplace) */
.idx-eco-card[data-card="4"] .idx-eco-card-bg { background: radial-gradient(ellipse at 60% 100%, rgba(0,200,200,0.04), transparent 60%); }
.idx-eco-card[data-card="4"] .idx-eco-card-orb { bottom: -20px; right: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(0,200,200,0.04), transparent 70%); }
.idx-eco-card[data-card="4"] .idx-eco-card-icon { background: linear-gradient(135deg, rgba(0,200,200,0.15), rgba(0,200,200,0.04)); border: 1px solid rgba(0,200,200,0.1); }
.idx-eco-card[data-card="4"] .idx-eco-card-icon svg { stroke: #00C8C8; }
.idx-eco-card[data-card="4"] .idx-eco-card-num { background: linear-gradient(135deg, rgba(0,200,200,0.25), rgba(0,200,200,0.08)); }
.idx-eco-card[data-card="4"] .idx-eco-card-foot-val { color: #00C8C8; }
.idx-eco-card[data-card="4"] .idx-eco-card-bar-fill { background: linear-gradient(90deg, #00C8C8, rgba(0,200,200,0.3)); width: 45%; }
.idx-eco-card[data-card="4"] .idx-eco-card-hover-glow { background: linear-gradient(90deg, transparent, rgba(0,200,200,0.15), transparent); }

/* CTA Row */
.idx-eco-cta {
    grid-column: 1/4; grid-row: 3;
    background-position: center center; background-size: cover; background-repeat: no-repeat;
    overflow: hidden; position: relative;
}
.idx-eco-cta-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,40,24,0.85), rgba(13,40,24,0.45));
}
.idx-eco-cta-content {
    padding: 32px 40px; display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; width: 100%; position: relative; z-index: 1;
}
.idx-eco-cta-title { font-family: var(--font-heading); font-size: var(--fs-body); font-weight: 600; color: #fff; }
.idx-eco-cta-desc { color: rgba(255,255,255,0.65); font-size: var(--fs-body-sm); max-width: 480px; }
.idx-eco-cta-btn {
    background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12); color: #fff; box-shadow: none;
}

[data-card]:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.2) !important; }
[data-card]:hover .idx-eco-card-hover-glow { opacity: 1 !important; }