.balance-card {
            padding: 18px;
            background: var(--dd-surface);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            box-shadow: none;
        }

        .subtle {
            font-size: 12px;
            opacity: 0.72;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            font-size: 12px;
            line-height: 1;
            background: var(--dd-surface);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 16px;
        }

        .chip .pct {
            font-weight: 800;
        }

        .header-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }

        .section-title {
            margin-bottom: 12px;
            font-size: 22px;
            font-weight: 900;
            letter-spacing: 0;
        }

        .section-copy {
            font-size: 14px;
            line-height: 1.75;
            color: rgba(255, 255, 255, 0.88);
        }

        .section-copy strong {
            color: rgba(255,255,255,0.96);
        }

        .hover-zoom {
            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease,
                filter 0.25s ease,
                border-color 0.25s ease;
            will-change: transform, box-shadow;
        }

        .hover-zoom:hover {
            transform: translateY(-2px) scale(1.005);
            box-shadow: none;
            filter: brightness(1.04);
        }

        .hover-zoom.primary-glow:hover {
            box-shadow: none;
        
}

        .glass-accent {
            position: relative;
            overflow: hidden;
        }

        .glass-accent::before {content:none;}

        .glass-accent > * {
            position: relative;
            z-index: 1;
        }

        .section-divider {
            width: 88px;
            height: 4px;
            margin: 0 0 16px;
            border-radius: 16px;
            background: var(--dd-surface);
            box-shadow: none;
        }

        .soft-panel {
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 18px;
        }

        .hero-banner {
            width: 100%;
            height: 420px;
            padding-top: 50px;
            background-image: url("/assets/images/backgroup/DigitalDynamixBanner.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            position: relative;
        }

        .about-hero-card {
            margin-top: -88px;
            padding: 26px;
            border-radius: 16px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: none;
        }

        .about-hero-grid {
            display: grid;
            grid-template-columns: 360px 1fr;
            gap: 24px;
            align-items: center;
        }

        .about-hero-media {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .about-token-card {
            width: 100%;
            max-width: 320px;
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: none;
            position: relative;
            overflow: hidden;
        }

        .about-token-card::before {content:none;}

        .about-token-card img {
            width: 100%;
            max-width: 420px;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 0 22px rgba(255, 108, 155, 0.18));
            position: relative;
            z-index: 1;
        }

        @keyframes tokenPulse {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.05) rotate(4deg); }
        }

        .eyebrow {
            margin-bottom: 12px;
            font-size: 12px;
            letter-spacing: 0;
            text-transform: none;
            color: var(--dd-muted);
        }

        .hero-title {
            margin-bottom: 14px;
            font-size: 44px;
            line-height: 1.02;
            font-weight: 900;
            letter-spacing: 0;
            color: rgba(255,255,255,0.97);
        }

        .hero-gradient {
            background: var(--dd-surface);

        }

        .hero-copy {
            max-width: 860px;
            font-size: 15px;
            line-height: 1.8;
            color: rgba(255,255,255,0.88);
        }

        .hero-stat-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin-top: 18px;
        }

        .hero-stat {
            padding: 14px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            box-shadow: none;
        }

        .hero-stat .label {
            margin-bottom: 6px;
            font-size: 11px;
            letter-spacing: 0;
            text-transform: none;
            opacity: 0.70;
        }

        .hero-stat .value {
            font-size: 22px;
            font-weight: 900;
            line-height: 1.05;
        }

        .hero-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .hero-actions .tf-button-st2 {
            min-width: 220px;
            justify-content: center;
            text-align: center;
            text-decoration: none;
        }

        .style-2 {
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.12);
        }

        .content-stack {
            display: grid;
            gap: 20px;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        .feature-card {
            height: 100%;
            padding: 18px;
            border-radius: 16px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: none;
        }

        .feature-icon {
            font-size: 22px;
            width: 46px;
            height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            color: var(--primary-color);
            background: var(--primary-transparent-color);
            border-radius: 14px;
            box-shadow: none;
        }

        .feature-title {
            margin-bottom: 8px;
            font-size: 17px;
            font-weight: 800;
        }

        .feature-copy {
            font-size: 14px;
            line-height: 1.7;
            color: rgba(255,255,255,0.86);
        }

        .collection-pool-callout {
            position: relative;
            overflow: hidden;
            margin-top: 18px;
            padding: 20px;
            border-radius: 18px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.09);
            box-shadow: none;
        }

        .collection-pool-callout::before {content:none;}

        .collection-pool-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
            gap: 18px;
            align-items: center;
        }

        .collection-pool-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            padding: 7px 10px;
            color: #fff;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0;
            text-transform: none;
            border: 1px solid rgba(255,255,255,0.10);
            border-radius: 16px;
            background: var(--dd-surface);
        }

        .collection-pool-title {
            margin: 0 0 10px;
            color: #fff;
            font-size: clamp(22px, 3vw, 32px);
            font-weight: 950;
            letter-spacing: 0;
            line-height: 1.08;
        }

        .collection-pool-title span {
            color: var(--primary-color);
        }

        .collection-pool-copy {
            margin: 0;
            color: rgba(255,255,255,0.80);
            font-size: 14px;
            line-height: 1.75;
        }

        .collection-pool-mini-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .collection-pool-mini-stat {
            min-height: 96px;
            padding: 13px;
            border-radius: 16px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.075);
        }

        .collection-pool-mini-stat .label {
            margin-bottom: 8px;
            color: var(--dd-muted);
            font-size: 10px;
            font-weight: 950;
            letter-spacing: 0;
            text-transform: none;
        }

        .collection-pool-mini-stat .value {
            color: #fff;
            font-size: 18px;
            font-weight: 950;
            line-height: 1.15;
        }

        .bullet-list {
            display: grid;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .bullet-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
            line-height: 1.7;
            color: rgba(255,255,255,0.88);
        }

        .bullet-list i {
            margin-top: 4px;
            color: var(--primary-color);
            flex: 0 0 auto;
        }

        .levels-grid {
            display: grid;
            grid-template-columns: 12fr;
            gap: 18px;
            align-items: stretch;
        }

        .levels-chart-card {
            padding: 18px;
            border-radius: 18px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: none;
        }

        .levels-chart-wrap {
            position: relative;
            width: 100%;
            height: 360px;
        }

        .levels-chart-note {
            margin-top: 12px;
            font-size: 12px;
            line-height: 1.7;
            color: var(--dd-muted);
        }

        .rebate-card {
            padding: 20px;
            border-radius: 16px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.10);
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: none;
        }

        .rebate-title {
            margin-bottom: 8px;
            font-size: 20px;
            font-weight: 900;
        }

        .rebate-copy {
            font-size: 14px;
            line-height: 1.75;
            color: rgba(255,255,255,0.88);
        }

        .rebate-metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-top: 16px;
        }

        .rebate-metric {
            padding: 12px;
            border-radius: 14px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .rebate-metric .label {
            margin-bottom: 6px;
            font-size: 11px;
            letter-spacing: 0;
            text-transform: none;
            opacity: 0.70;
        }

        .rebate-metric .value {
            font-size: 18px;
            font-weight: 900;
            line-height: 1.1;
        }

        .cta-split {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 18px;
            align-items: stretch;
        }

        .cta-text-card {
            padding: 24px;
            border-radius: 16px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.10);
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: none;
            position: relative;
            overflow: hidden;
        }

        .cta-text-card::before {content:none;}

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

        .cta-title {
            font-size: 30px;
            font-weight: 900;
            margin-bottom: 12px;
            letter-spacing: 0;
            line-height: 1.05;
        }

        .cta-copy {
            font-size: 15px;
            line-height: 1.8;
            color: rgba(255,255,255,0.88);
        }

        .cta-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 18px;
        }

        .cta-actions .tf-button-st2 {
            min-width: 220px;
            justify-content: center;
            text-align: center;
            text-decoration: none;
        }

        .cta-image-card {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
            background: var(--dd-surface);
            position: relative;
            min-height: 100%;
            box-shadow: none;
        }

        .cta-image-card::after {content:none;}

        .cta-image-card img {
            width: 100%;
            height: 100%;
            min-height: 100%;
            object-fit: cover;
            transform: scale(1.01);
        }

        .final-cta {
            padding: 22px;
            border-radius: 16px;
            background: var(--dd-surface);
            border: 1px solid rgba(255,255,255,0.10);
            box-shadow: none;
        }

        .final-cta-title {
            margin-bottom: 8px;
            font-size: 24px;
            font-weight: 900;
        }

        .final-cta-copy {
            font-size: 15px;
            line-height: 1.8;
            color: rgba(255,255,255,0.90);
        }

        .final-cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 18px;
        }

        .final-cta-actions .tf-button-st2 {
            min-width: 210px;
            justify-content: center;
            text-align: center;
            text-decoration: none;
        }

        .main-nav .menu > li > a {
            position: relative;
            transition: color 0.25s ease;
        }

        .main-nav .menu > li > a::after {content:none;}

        .main-nav .menu > li > a:hover::after,
        .main-nav .menu > li.current-menu-item > a::after {
            width: 100%;
        }

        @media (prefers-reduced-motion: reduce) {
        }

        @media (max-width: 1199px) {
            .feature-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .collection-pool-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 991px) {
            .about-hero-grid,
            .levels-grid,
            .cta-split {
                grid-template-columns: 1fr;
            }

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

            .hero-stat-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .about-token-card {
                max-width: 300px;
                margin: 0 auto;
            }

            .about-hero-card {
                margin-top: -72px;
            }

            .levels-chart-wrap {
                height: 320px;
            }
        }

        @media (max-width: 768px) {
            .hero-banner {
                height: 260px;
            }

            .about-hero-card {
                padding: 20px;
                margin-top: -56px;
            }

            .hero-title {
                font-size: 34px;
            }

            .hero-stat-grid,
            .rebate-metrics,
            .collection-pool-mini-grid {
                grid-template-columns: 1fr;
            }

            .levels-chart-wrap {
                height: 300px;
            }

            .cta-title,
            .final-cta-title {
                font-size: 22px;
            }

            .hero-actions .tf-button-st2,
            .final-cta-actions .tf-button-st2,
            .cta-actions .tf-button-st2 {
                width: 100%;
                min-width: 0;
            }
        }

        .shimmer-btn {
    position: relative;
    overflow: hidden;
}

.shimmer-btn::before {content:none;}

.shimmer-btn:hover::before {
    animation: shimmerSweep 1.2s ease;
}

@keyframes shimmerSweep {
    0% {
        left: -120%;
    }
    100% {
        left: 140%;
    }
}

.cta-image-card.compact {
    max-height: 460px; 
}

.cta-image-card.compact img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.cta-text-card {
    max-height: 460px;
}

.collecting-lesson>header{display:grid;grid-template-columns:1.2fr 1fr;gap:24px 64px;align-items:end;margin-bottom:40px}.collecting-lesson h1{font-size:clamp(48px,5vw,72px);line-height:.95;max-width:20ch;margin:0}.collecting-lesson header>p{max-width:42ch;line-height:1.6;margin:0;color:var(--dd-muted)}.collecting-lesson nav{grid-column:1/-1;display:flex;gap:24px;padding:20px 0;border-block:1px solid var(--dd-border);font-size:14px}.collecting-lesson nav a{color:var(--dd-muted)}.lesson-sequence{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.lesson-sequence article{scroll-margin-top:110px}.lesson-art{position:relative;aspect-ratio:1.2;background:var(--dd-surface);border:1px solid var(--dd-border);border-radius:16px;overflow:hidden;margin-bottom:24px}.lesson-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.lesson-sequence article:nth-child(1) h2{color:var(--dd-pink)}.lesson-sequence article:nth-child(2) h2{color:var(--dd-lilac)}.lesson-sequence article:nth-child(3) h2{color:var(--dd-mint-soft)}.lesson-sequence h2{font-size:32px}.lesson-sequence p{font-size:15px;line-height:1.7;color:var(--dd-muted)}.lesson-rewards{margin:48px 0;padding:32px;border-left:3px solid var(--dd-mint-soft);background:var(--dd-surface)}.lesson-rewards h2{font-size:36px}.lesson-rewards p{font-size:16px;max-width:80ch;line-height:1.6}.lesson-rewards .dd-btn{margin-top:12px}#learn-rewards{scroll-margin-top:110px}
@media(max-width:767px){.collecting-lesson>header{grid-template-columns:1fr;gap:22px}.collecting-lesson h1{font-size:48px}.lesson-sequence{grid-template-columns:1fr;gap:32px}.lesson-art{aspect-ratio:1.35;max-width:360px}.lesson-rewards{padding:24px}.collecting-lesson nav{gap:20px;overflow:auto}}

.content-stack>.balance-card{padding:32px 0;background:none;border:0;border-top:1px solid var(--dd-border);border-radius:0}.content-stack>.balance-card>.section-divider{display:none}.content-stack .section-copy{max-width:80ch;line-height:1.75}.content-stack .feature-grid{gap:24px}.content-stack .feature-card{border:0;border-left:1px solid var(--dd-border);border-radius:0;background:none;padding:8px 20px;box-shadow:none}.content-stack .feature-title{font:600 24px/1.2 'Barlow Condensed',sans-serif}.content-stack .feature-copy{font-size:15px;line-height:1.7}.content-stack .hover-zoom:hover{transform:none}.collecting-lesson nav a{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}.collecting-lesson nav{gap:32px;padding:8px 0}.lesson-art{box-shadow:4px 4px 0 #ffffff05}
@media(max-width:767px){.content-stack .feature-grid{grid-template-columns:1fr}.content-stack>.balance-card{padding-block:24px}.collecting-lesson nav{gap:20px}}