/* ========== Our Plans & Goals - Main Stylesheet ========== */
/* UNIPOLY Ecosystem 2025-2026 */

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #8b5cf6;
    --accent: #06b6d4;
    --accent-2: #f59e0b;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: rgba(18, 18, 26, 0.8);
    --bg-glass: rgba(255, 255, 255, 0.03);
    --border-color: rgba(255, 255, 255, 0.08);
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-banking: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #8b5cf6 100%);
    --gradient-dex: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    --gradient-binance: linear-gradient(135deg, #f0b90b 0%, #f8d12f 100%);
    --glow-primary: 0 0 40px rgba(99, 102, 241, 0.3);
    --glow-gold: 0 0 40px rgba(245, 158, 11, 0.3);
    --glow-banking: 0 0 40px rgba(14, 165, 233, 0.3);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}

/* ========== Animated Background ========== */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.animated-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 40% 60%, rgba(6, 182, 212, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 60% 20%, rgba(245, 158, 11, 0.06) 0%, transparent 40%);
    animation: bgMove 25s ease-in-out infinite;
}

@keyframes bgMove {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(2%, 2%) rotate(1deg); }
    50% { transform: translate(-1%, 3%) rotate(-1deg); }
    75% { transform: translate(3%, -2%) rotate(0.5deg); }
}

/* Floating Orbs */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: var(--primary);
    top: -200px;
    right: -200px;
    animation: float1 30s ease-in-out infinite;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: var(--accent);
    bottom: -150px;
    left: -150px;
    animation: float2 25s ease-in-out infinite;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: var(--accent-2);
    top: 50%;
    left: 50%;
    animation: float3 20s ease-in-out infinite;
}

.orb-4 {
    width: 350px;
    height: 350px;
    background: var(--secondary);
    top: 30%;
    right: 10%;
    animation: float4 22s ease-in-out infinite;
}

@keyframes float1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, 60px) scale(1.1); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, -40px) scale(0.95); }
}

@keyframes float3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.1; }
}

@keyframes float4 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50% { transform: translate(-30px, 40px) scale(1.15); opacity: 0.15; }
}

/* Grid Pattern */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -1;
    pointer-events: none;
}

/* Particles */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.6;
    animation: particleFloat 15s infinite ease-in-out;
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

/* ========== Preloader ========== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

.loader-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pulseText 2s ease-in-out infinite;
}

@keyframes pulseText {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.loader-bar {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.loader-progress {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 10px;
    animation: loadProgress 2s ease-in-out infinite;
}

@keyframes loadProgress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

.loader-text {
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ========== Header ========== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header.scrolled {
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo img {
    height: 42px;
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.3));
    transition: transform 0.3s ease;
}

.logo:hover img {
    transform: scale(1.05);
}

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

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-glass);
}

.nav-link.active {
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.btn-primary-nav {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary-nav:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-primary);
    color: white;
}

/* ========== Hero Section ========== */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
}

.confidential-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
    animation: fadeInDown 1s ease both;
}

.confidential-badge i {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.hero-date {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    animation: fadeInDown 1s ease 0.1s both;
}

.hero-date-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.hero-date-item i {
    color: var(--primary);
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    animation: fadeInUp 1s ease 0.2s both;
}

.hero-title span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-title .gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 22px;
    color: var(--text-secondary);
    max-width: 900px;
    margin: 0 auto 50px;
    line-height: 1.7;
    animation: fadeInUp 1s ease 0.4s both;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.6s both;
}

.btn-hero {
    padding: 18px 40px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.4s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: none;
}

.btn-hero-primary {
    background: var(--gradient-primary);
    color: white;
}

.btn-hero-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.4);
    color: white;
}

.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
    transform: translateY(-4px);
    color: white;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s ease-in-out infinite;
}

.scroll-indicator i {
    font-size: 32px;
    color: var(--primary);
    opacity: 0.6;
}

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

/* ========== Section Base Styles ========== */
.section {
    padding: 100px 0;
    position: relative;
}

.section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

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

.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 50%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
}

.section-title span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

/* ========== Executive Summary Card ========== */
.executive-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 32px;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

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

.executive-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.executive-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
}

.executive-text p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 24px;
}

.executive-highlight {
    background: rgba(99, 102, 241, 0.1);
    border-left: 4px solid var(--primary);
    padding: 20px 24px;
    border-radius: 0 12px 12px 0;
    margin: 24px 0;
}

.executive-highlight p {
    margin: 0;
    font-weight: 500;
    color: var(--text-primary);
}

.executive-visual {
    position: relative;
}

/* ========== Ecosystem Diagram ========== */
.ecosystem-diagram {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 450px;
    margin: 0 auto;
}

.diagram-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: var(--bg-card);
    border: 3px solid var(--primary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: centerPulse 3s ease-in-out infinite;
}

@keyframes centerPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 60px rgba(99, 102, 241, 0.6); }
}

.diagram-center i {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 8px;
}

.diagram-center span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.diagram-node {
    position: absolute;
    width: 90px;
    height: 90px;
    background: var(--bg-card);
    border: 2px solid;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.4s ease;
    cursor: pointer;
}

.diagram-node:hover {
    transform: scale(1.1);
    z-index: 20;
}

.diagram-node i {
    font-size: 24px;
    margin-bottom: 6px;
}

.diagram-node span {
    font-size: 10px;
    font-weight: 600;
}

/* 7 nodes arranged in a circle - evenly spaced */
.diagram-node.node-1 { top: -5%; left: 50%; transform: translateX(-50%); border-color: #6366f1; }
.diagram-node.node-2 { top: 10%; right: 2%; border-color: #8b5cf6; }
.diagram-node.node-3 { top: 45%; right: -8%; transform: translateY(-50%); border-color: #06b6d4; }
.diagram-node.node-4 { bottom: 5%; right: 12%; border-color: #10b981; }
.diagram-node.node-5 { bottom: 5%; left: 12%; border-color: #f59e0b; }
.diagram-node.node-6 { top: 45%; left: -8%; transform: translateY(-50%); border-color: #ef4444; }
.diagram-node.node-7 { top: 10%; left: 2%; border-color: #ec4899; }

.diagram-node.node-1 i { color: #6366f1; }
.diagram-node.node-2 i { color: #8b5cf6; }
.diagram-node.node-3 i { color: #06b6d4; }
.diagram-node.node-4 i { color: #10b981; }
.diagram-node.node-5 i { color: #f59e0b; }
.diagram-node.node-6 i { color: #ef4444; }
.diagram-node.node-7 i { color: #ec4899; }

.diagram-node:hover.node-1 { box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); }
.diagram-node:hover.node-2 { box-shadow: 0 0 30px rgba(139, 92, 246, 0.5); }
.diagram-node:hover.node-3 { box-shadow: 0 0 30px rgba(6, 182, 212, 0.5); }
.diagram-node:hover.node-4 { box-shadow: 0 0 30px rgba(16, 185, 129, 0.5); }
.diagram-node:hover.node-5 { box-shadow: 0 0 30px rgba(245, 158, 11, 0.5); }
.diagram-node:hover.node-6 { box-shadow: 0 0 30px rgba(239, 68, 68, 0.5); }
.diagram-node:hover.node-7 { box-shadow: 0 0 30px rgba(236, 72, 153, 0.5); }

/* Connecting lines (SVG) */
.diagram-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.diagram-lines svg {
    width: 100%;
    height: 100%;
}

.diagram-line {
    stroke: rgba(99, 102, 241, 0.3);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 8, 4;
    animation: dashMove 20s linear infinite;
}

@keyframes dashMove {
    to { stroke-dashoffset: -100; }
}

/* ========== Marketing Thesis Section ========== */
.thesis-section {
    background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.03) 50%, transparent 100%);
}

.thesis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.thesis-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.thesis-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.thesis-card:hover::before {
    transform: scaleX(1);
}

.thesis-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--glow-primary);
}

.thesis-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    background: rgba(99, 102, 241, 0.1);
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.thesis-card:hover .thesis-icon {
    background: rgba(99, 102, 241, 0.2);
    transform: scale(1.1) rotate(5deg);
}

.thesis-icon i {
    font-size: 42px;
    color: var(--primary);
}

.thesis-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.thesis-card p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ========== Products Stack Section ========== */
.products-section {
    padding: 100px 0;
}

.products-table-wrapper {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
}

.products-table {
    width: 100%;
    border-collapse: collapse;
}

.products-table thead {
    background: rgba(99, 102, 241, 0.1);
}

.products-table th {
    padding: 20px;
    text-align: left;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-color);
}

.products-table td {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.products-table tbody tr {
    transition: all 0.3s ease;
}

.products-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}

.products-table tbody tr:last-child td {
    border-bottom: none;
}

.product-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-icon {
    width: 45px;
    height: 45px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-icon i {
    font-size: 20px;
    color: white;
}

.product-name span {
    font-weight: 600;
    color: var(--text-primary);
}

.products-table td:nth-child(2),
.products-table td:nth-child(3),
.products-table td:nth-child(4) {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ========== KPI Section ========== */
.kpi-section {
    background: linear-gradient(180deg, transparent 0%, rgba(6, 182, 212, 0.03) 50%, transparent 100%);
}

.kpi-intro {
    text-align: center;
    margin-bottom: 60px;
}

.kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.kpi-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.kpi-card.q1::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.kpi-card.q2::before { background: linear-gradient(90deg, #8b5cf6, #06b6d4); }
.kpi-card.q3::before { background: linear-gradient(90deg, #06b6d4, #10b981); }
.kpi-card.q4::before { background: linear-gradient(90deg, #10b981, #f59e0b); }

.kpi-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--glow-primary);
}

.kpi-quarter {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
}

.kpi-metrics {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kpi-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.kpi-metric:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.kpi-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.kpi-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== Price Target Section ========== */
.price-section {
    background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 50%, transparent 100%);
    padding: 100px 0;
}

.price-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 32px;
    padding: 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

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

.price-header {
    margin-bottom: 50px;
}

.current-price {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}

.current-price .label {
    font-size: 18px;
    color: var(--text-secondary);
}

.current-price .value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: var(--text-primary);
}

.price-target {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.price-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.price-arrow i {
    font-size: 36px;
    color: var(--success);
    animation: arrowBounce 1.5s ease-in-out infinite;
}

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

.price-arrow span {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.target-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 72px;
    font-weight: 700;
    background: var(--gradient-success);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 60px rgba(16, 185, 129, 0.3);
}

.target-year {
    font-size: 18px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.price-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.price-metric {
    padding: 30px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.price-metric:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.price-metric-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.price-metric-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Live Price Display */
.live-price-display {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 24px;
    padding: 30px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-dot {
    width: 12px;
    height: 12px;
    background: var(--success);
    border-radius: 50%;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.live-indicator span {
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.live-price-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 56px;
    font-weight: 700;
    background: var(--gradient-success);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price-change {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
}

.price-change.positive {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.price-change.negative {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.mexc-logo {
    height: 30px;
    opacity: 0.8;
}

/* ========== Digital Banking Section ========== */
.banking-section {
    background: linear-gradient(180deg, transparent 0%, rgba(14, 165, 233, 0.05) 50%, transparent 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.banking-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
    animation: bankingGlow 10s ease-in-out infinite;
}

@keyframes bankingGlow {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(10%); opacity: 1; }
}

.banking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.banking-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

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

.banking-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--glow-banking);
    border-color: rgba(14, 165, 233, 0.3);
}

.banking-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 2px solid rgba(14, 165, 233, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.banking-card:hover .banking-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
}

.banking-icon i {
    font-size: 36px;
    background: var(--gradient-banking);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.banking-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.banking-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Card Feature - Special Style */
.card-feature {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 2px solid rgba(14, 165, 233, 0.3);
    border-radius: 32px;
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.card-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-banking);
}

.card-visual {
    position: relative;
}

.card-stack {
    position: relative;
    height: 280px;
}

.credit-card {
    position: absolute;
    width: 320px;
    height: 200px;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.5s ease;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.credit-card.visa {
    background: linear-gradient(135deg, #1a1f71 0%, #0a4d8c 100%);
    top: 0;
    left: 0;
    z-index: 2;
    animation: cardFloat1 4s ease-in-out infinite;
}

.credit-card.mastercard {
    background: linear-gradient(135deg, #eb001b 0%, #f79e1b 100%);
    top: 40px;
    left: 40px;
    z-index: 1;
    animation: cardFloat2 4s ease-in-out infinite;
}

@keyframes cardFloat1 {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(-3deg); }
}

@keyframes cardFloat2 {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-15px) rotate(7deg); }
}

.card-logo {
    height: 40px;
    object-fit: contain;
}

.card-chip {
    width: 50px;
    height: 40px;
    background: linear-gradient(135deg, #c9a227 0%, #f4d03f 50%, #c9a227 100%);
    border-radius: 8px;
}

.card-number {
    font-family: 'Space Grotesk', monospace;
    font-size: 18px;
    letter-spacing: 4px;
    color: white;
}

.card-info {
    display: flex;
    justify-content: space-between;
    color: white;
    font-size: 12px;
}

.card-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}

.card-content h3 span {
    background: var(--gradient-banking);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    border-color: var(--accent);
    transform: translateX(10px);
}

.benefit-item i {
    font-size: 24px;
    color: var(--accent);
}

.benefit-item span {
    font-size: 15px;
    color: var(--text-primary);
}

/* ========== DEX Section ========== */
.dex-section {
    background: linear-gradient(180deg, transparent 0%, rgba(236, 72, 153, 0.05) 50%, transparent 100%);
    padding: 100px 0;
    position: relative;
}

.dex-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.dex-info h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 24px;
}

.dex-info h3 span {
    background: var(--gradient-dex);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dex-info > p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 32px;
}

.dex-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.dex-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.dex-feature:hover {
    border-color: #ec4899;
    transform: translateX(5px);
}

.dex-feature i {
    font-size: 20px;
    color: #ec4899;
}

.dex-feature span {
    font-size: 14px;
    font-weight: 500;
}

.dex-visual {
    position: relative;
}

.dex-mockup {
    background: var(--bg-card);
    border: 2px solid rgba(236, 72, 153, 0.3);
    border-radius: 32px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.dex-mockup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-dex);
}

.swap-interface {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.swap-input {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.token-select {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    cursor: pointer;
}

.token-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.token-name {
    font-weight: 600;
    font-size: 16px;
}

.swap-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-align: right;
    color: var(--text-primary);
}

.swap-arrow {
    display: flex;
    justify-content: center;
}

.swap-arrow-btn {
    width: 50px;
    height: 50px;
    background: var(--gradient-dex);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swap-arrow-btn:hover {
    transform: rotate(180deg);
}

.swap-arrow-btn i {
    font-size: 20px;
    color: white;
}

.swap-btn {
    width: 100%;
    padding: 18px;
    background: var(--gradient-dex);
    border: none;
    border-radius: 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swap-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(236, 72, 153, 0.4);
}

/* ========== Staking Section ========== */
.staking-section {
    padding: 100px 0;
}

.staking-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.staking-info h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 24px;
}

.staking-info h3 span {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.staking-info p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 32px;
}

.staking-plans {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.staking-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 24px;
    transition: all 0.3s ease;
}

.staking-plan:hover {
    border-color: var(--primary);
    transform: translateX(10px);
}

.plan-period {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-period i {
    font-size: 24px;
    color: var(--primary);
}

.plan-period span {
    font-weight: 600;
}

.plan-yield {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    background: var(--gradient-success);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.staking-visual {
    position: relative;
}

.staking-chart {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 32px;
    padding: 40px;
    text-align: center;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.chart-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.chart-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    background: var(--gradient-success);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.staking-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: var(--bg-glass);
    border-radius: 16px;
}

.stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ========== vUNP Section ========== */
.vunp-section {
    background: linear-gradient(180deg, transparent 0%, rgba(245, 158, 11, 0.05) 50%, transparent 100%);
    padding: 100px 0;
}

.vunp-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.vunp-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 32px;
    padding: 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

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

.vunp-icon {
    width: 100px;
    height: 100px;
    background: var(--gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: goldPulse 3s ease-in-out infinite;
}

@keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 60px rgba(245, 158, 11, 0.6); }
}

.vunp-icon i {
    font-size: 48px;
    color: white;
}

.vunp-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

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

.vunp-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

.vunp-benefits {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.vunp-benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.vunp-benefit i {
    color: var(--accent-2);
}

.vunp-info h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 24px;
}

.vunp-info h3 span {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vunp-info > p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 32px;
}

.vunp-tiers {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tier-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.tier-item:hover {
    border-color: var(--accent-2);
    transform: translateX(10px);
}

.tier-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.tier-name i {
    font-size: 24px;
    color: var(--accent-2);
}

.tier-bonus {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-2);
}

/* ========== Exchange Listings Section ========== */
.exchange-section {
    background: linear-gradient(180deg, transparent 0%, rgba(245, 158, 11, 0.03) 50%, transparent 100%);
}

.exchange-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.exchange-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.exchange-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.exchange-card:nth-child(1)::before { background: linear-gradient(90deg, #1652f0, #3773f5); }
.exchange-card:nth-child(2)::before { background: linear-gradient(90deg, #2dbd96, #50e3c2); }

.exchange-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--glow-primary);
}

.exchange-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exchange-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.exchange-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.exchange-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.exchange-status.live {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.exchange-status.coming {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-2);
}

.exchange-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ========== Binance Section ========== */
.binance-section {
    background: linear-gradient(180deg, transparent 0%, rgba(240, 185, 11, 0.05) 50%, transparent 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.binance-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(240, 185, 11, 0.1) 0%, transparent 70%);
    animation: binanceGlow 8s ease-in-out infinite;
}

@keyframes binanceGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.binance-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(240, 185, 11, 0.3);
    border-radius: 32px;
    padding: 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.binance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-binance);
}

.binance-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: rgba(240, 185, 11, 0.1);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: binanceFloat 4s ease-in-out infinite;
}

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

.binance-logo img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.binance-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
}

.binance-card h3 span {
    background: var(--gradient-binance);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.binance-countdown {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
}

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

.countdown-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 56px;
    font-weight: 700;
    background: var(--gradient-binance);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.countdown-label {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 8px;
}

.binance-info {
    max-width: 700px;
    margin: 0 auto;
}

.binance-info p {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 30px;
}

.binance-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(240, 185, 11, 0.15);
    border: 1px solid rgba(240, 185, 11, 0.3);
    padding: 16px 32px;
    border-radius: 16px;
}

.binance-badge i {
    font-size: 24px;
    color: #f0b90b;
}

.binance-badge span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #f0b90b;
}

/* ========== Roadmap Section ========== */
.roadmap-section {
    padding: 100px 0;
}

.roadmap-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.roadmap-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 10px;
}

.roadmap-item {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
}

.roadmap-item:nth-child(odd) {
    flex-direction: row;
}

.roadmap-item:nth-child(even) {
    flex-direction: row-reverse;
}

.roadmap-content {
    width: 45%;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 30px;
    position: relative;
    transition: all 0.4s ease;
}

.roadmap-content:hover {
    transform: translateY(-5px);
    box-shadow: var(--glow-primary);
}

.roadmap-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 50%;
    border: 4px solid var(--bg-primary);
    z-index: 10;
}

.roadmap-quarter {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

.roadmap-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.roadmap-list {
    list-style: none;
}

.roadmap-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.roadmap-list li i {
    color: var(--success);
    margin-top: 4px;
}

/* ========== Market Ranking Section ========== */
.ranking-section {
    background: linear-gradient(180deg, transparent 0%, rgba(245, 158, 11, 0.03) 50%, transparent 100%);
    padding: 100px 0;
}

.ranking-path {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.ranking-item {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px 50px;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
}

.ranking-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--glow-gold);
}

.ranking-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ranking-item:nth-child(1) .ranking-number {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ranking-item:nth-child(3) .ranking-number {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ranking-item:nth-child(5) .ranking-number {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ranking-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.ranking-arrow {
    font-size: 32px;
    color: var(--accent-2);
    animation: rankingArrow 1.5s ease-in-out infinite;
}

@keyframes rankingArrow {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(10px); opacity: 0.5; }
}

/* ========== Conclusion Section ========== */
.conclusion-section {
    padding: 100px 0;
    background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 100%);
}

.conclusion-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 32px;
    padding: 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.conclusion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-primary);
}

.conclusion-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
    margin-bottom: 32px;
}

.conclusion-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 24px;
}

.conclusion-title span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.conclusion-text {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 40px;
}

.conclusion-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.conclusion-stat {
    text-align: center;
}

.conclusion-stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.conclusion-stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

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

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img {
    height: 40px;
}

.footer-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

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

/* ========== Scroll Animations ========== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* ========== Floating Action Button ========== */
.fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--glow-primary);
    transition: all 0.3s ease;
    z-index: 100;
    text-decoration: none;
}

.fab:hover {
    transform: translateY(-5px) scale(1.1);
}

.fab i {
    font-size: 24px;
    color: white;
}

/* ========== Chain Infrastructure Section ========== */
.chain-section {
    padding: 100px 0;
}

.chain-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.chain-feature {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.chain-feature:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

.chain-feature-icon {
    width: 70px;
    height: 70px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.chain-feature-icon i {
    font-size: 32px;
    color: var(--primary);
}

.chain-feature h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.chain-feature p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.chain-audit-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
}

.audit-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.audit-logo {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 32px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.audit-logo:hover {
    border-color: var(--success);
    transform: translateY(-3px);
}

.chain-audit-banner p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.btn-security {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gradient-success);
    color: white;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-security:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
    color: white;
}

/* ========== Partners Section ========== */
.partners-section {
    padding: 100px 0;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.partner-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.partner-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--glow-primary);
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.partner-card.market-maker::before {
    background: var(--gradient-gold);
}

.partner-card.trading-team::before {
    background: var(--gradient-success);
}

.partner-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.partner-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.partner-card.market-maker .partner-icon {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.partner-card.trading-team .partner-icon {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.partner-icon i {
    font-size: 36px;
}

.partner-card.market-maker .partner-icon i {
    color: var(--accent-2);
}

.partner-card.trading-team .partner-icon i {
    color: var(--success);
}

.partner-info h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.partner-info .partner-title {
    font-size: 14px;
    color: var(--text-secondary);
}

.partner-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 20px;
}

.partner-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.partner-tag {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ========== Gaming Section ========== */
.gaming-section {
    background: linear-gradient(180deg, transparent 0%, rgba(239, 68, 68, 0.03) 50%, transparent 100%);
}

.gaming-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.gaming-info h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 24px;
}

.gaming-info h3 span {
    background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gaming-info > p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 32px;
}

.games-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.game-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.game-item:hover {
    border-color: #ef4444;
    transform: translateX(10px);
}

.game-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.game-icon i {
    font-size: 28px;
    color: #ef4444;
}

.game-info h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.game-info p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.gaming-visual {
    position: relative;
}

.gaming-card {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 32px;
    padding: 50px;
    text-align: center;
}

.gaming-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4444, #f59e0b);
    border-radius: 4px 4px 0 0;
}

.gaming-icon-large {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: gamingPulse 3s ease-in-out infinite;
}

@keyframes gamingPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 60px rgba(239, 68, 68, 0.5); }
}

.gaming-icon-large i {
    font-size: 56px;
    color: white;
}

.gaming-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.gaming-card p {
    font-size: 15px;
    color: var(--text-secondary);
}

/* ========== Price Support Section ========== */
.price-support-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.support-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.support-item:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.support-item i {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 12px;
}

.support-item h5 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.support-item p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

/* ========== Custom Scrollbar ========== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ========== Responsive Design ========== */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 56px;
    }

    .executive-content,
    .staking-content,
    .vunp-content,
    .dex-content {
        grid-template-columns: 1fr;
    }

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

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

    .price-metrics {
        grid-template-columns: 1fr;
    }

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

    .chain-features {
        grid-template-columns: 1fr;
    }

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

    .gaming-content {
        grid-template-columns: 1fr;
    }

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

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

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

@media (max-width: 992px) {
    .nav-links {
        display: none;
    }

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

    .section-title {
        font-size: 36px;
    }

    .roadmap-timeline::before {
        left: 20px;
    }

    .roadmap-item {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 60px;
    }

    .roadmap-content {
        width: 100%;
    }

    .roadmap-dot {
        left: 20px;
        transform: translateX(-50%);
    }

    .binance-countdown {
        gap: 20px;
    }

    .countdown-value {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

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

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

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

    .dex-features {
        grid-template-columns: 1fr;
    }

    .ranking-path {
        flex-direction: column;
    }

    .ranking-arrow {
        transform: rotate(90deg);
    }

    .conclusion-stats {
        gap: 30px;
    }

    .executive-card,
    .conclusion-card {
        padding: 30px;
    }

    .products-table {
        font-size: 12px;
    }

    .products-table th,
    .products-table td {
        padding: 12px;
    }

    .price-support-grid {
        grid-template-columns: 1fr;
    }

    .audit-logos {
        flex-direction: column;
    }

    .live-price-display {
        flex-direction: column;
        gap: 20px;
    }

    .live-price-value {
        font-size: 42px;
    }

    .staking-stats {
        grid-template-columns: 1fr;
    }

    .binance-card {
        padding: 40px 20px;
    }

    .binance-countdown {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .header-container,
    .section-container,
    .footer-container {
        padding: 0 16px;
    }

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

    .target-price {
        font-size: 48px;
    }

    .products-table-wrapper {
        overflow-x: auto;
    }

    .products-table {
        min-width: 600px;
    }

    .credit-card {
        width: 280px;
        height: 180px;
    }

    .card-stack {
        height: 240px;
    }

    .countdown-value {
        font-size: 32px;
    }

    .binance-logo {
        width: 80px;
        height: 80px;
    }

    .binance-logo img {
        width: 50px;
        height: 50px;
    }
}

/* ========================================================================
   ENHANCED DIGITAL BANKING CARDS - Premium 3D Animated Cards
   ======================================================================== */

/* Grid Container */
.banking-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
    perspective: 1000px;
}

/* Main Card Container */
.banking-card-3d {
    position: relative;
    background: linear-gradient(145deg, rgba(18, 18, 26, 0.95) 0%, rgba(10, 10, 15, 0.98) 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 28px;
    padding: 35px 30px;
    min-height: 420px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.banking-card-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-banking);
    z-index: 10;
}

.banking-card-3d::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.03) 0%, 
        transparent 50%,
        rgba(6, 182, 212, 0.03) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Card Glow Effect */
.card-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
    border-radius: 28px;
}

/* Card Particles Container */
.card-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
    border-radius: 28px;
}

.card-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Animated Border */
.card-border-animation {
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(99, 102, 241, 0.5), 
        rgba(6, 182, 212, 0.5), 
        transparent);
    background-size: 200% 100%;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.4s ease;
}

.card-border-animation.animate {
    opacity: 1;
    animation: borderGlow 2s linear infinite;
}

/* Card Content Wrapper */
.card-content-wrapper {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 3D Icon Container */
.banking-icon-3d {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon Rings */
.icon-ring {
    position: absolute;
    border: 2px solid;
    border-radius: 50%;
    opacity: 0.3;
    transition: all 0.4s ease;
}

.icon-ring-1 {
    width: 100%;
    height: 100%;
    border-color: rgba(99, 102, 241, 0.4);
    animation: ringRotate1 8s linear infinite;
}

.icon-ring-2 {
    width: 80%;
    height: 80%;
    border-color: rgba(139, 92, 246, 0.4);
    animation: ringRotate2 6s linear infinite reverse;
}

.icon-ring-3 {
    width: 60%;
    height: 60%;
    border-color: rgba(6, 182, 212, 0.4);
    animation: ringRotate3 4s linear infinite;
}

.icon-ring.pulse {
    animation-duration: 1s;
    opacity: 0.6;
}

@keyframes ringRotate1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringRotate2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringRotate3 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Icon Core */
.icon-core {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.icon-core i {
    font-size: 32px;
    background: var(--gradient-banking);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.banking-card-3d:hover .icon-core {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(6, 182, 212, 0.25) 100%);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
}

/* Icon Orbit */
.icon-orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: orbit 4s linear infinite;
    transition: animation-duration 0.3s ease;
}

.orbit-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--gradient-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
}

/* Card Badge */
.card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #6366f1;
}

.card-badge i {
    font-size: 10px;
}

.card-badge.badge-gold {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.card-badge.badge-green {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.card-badge.badge-purple {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}

.card-badge.badge-cyan {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: #06b6d4;
}

.card-badge.badge-rainbow {
    background: linear-gradient(90deg, 
        rgba(239, 68, 68, 0.15), 
        rgba(245, 158, 11, 0.15), 
        rgba(16, 185, 129, 0.15), 
        rgba(99, 102, 241, 0.15));
    background-size: 200% 100%;
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
    animation: rainbowShift 3s linear infinite;
}

/* Animated Title */
.card-title-animated {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.title-word {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.title-word.highlight {
    background: var(--gradient-banking);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-word.pop {
    animation: wordPop 0.4s ease;
}

/* Card Description */
.card-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: center;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Card Stats */
.card-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.stat-item-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.stat-item-mini:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: translateY(-2px);
}

.stat-icon {
    width: 36px;
    height: 36px;
    background: var(--gradient-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon i {
    font-size: 16px;
    color: white;
}

.stat-text {
    display: flex;
    flex-direction: column;
}

.stat-value-counter {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-value-highlight {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-text .stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Flow Animation (Transfer Card) */
.card-flow-animation {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    height: 20px;
    overflow: hidden;
}

.flow-line {
    position: relative;
    width: 100%;
    height: 100%;
}

.flow-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--gradient-primary);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    animation: flowDot 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

.flow-dot-1 { left: 10%; animation-delay: 0s; }
.flow-dot-2 { left: 10%; animation-delay: 0.5s; }
.flow-dot-3 { left: 10%; animation-delay: 1s; }

/* Investment Chart Mini */
.investment-chart-mini {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    height: 80px;
    padding: 10px 20px;
    margin-bottom: 16px;
}

.chart-bar {
    width: 20px;
    height: 0;
    background: linear-gradient(to top, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.8));
    border-radius: 4px 4px 0 0;
    transition: height 1s ease-out;
    position: relative;
}

.chart-bar.active {
    background: linear-gradient(to top, #10b981, #34d399);
}

.chart-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px 4px 0 0;
}

/* Loan Calculator Mini */
.loan-calculator-mini {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.loan-visual {
    position: relative;
}

.loan-circle {
    position: relative;
    width: 100px;
    height: 100px;
}

.loan-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.loan-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

.loan-progress {
    fill: none;
    stroke: url(#loanGradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke: #10b981;
    transition: stroke-dashoffset 1.5s ease-out;
}

.loan-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.loan-ltv {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
    display: block;
}

.loan-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Credit Score Visual */
.credit-score-visual {
    margin-bottom: 16px;
}

.score-meter {
    position: relative;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: visible;
    margin-bottom: 12px;
}

.meter-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
    border-radius: 10px;
    transition: width 1.5s ease-out;
    position: relative;
}

.score-pointer {
    position: absolute;
    top: -4px;
    left: 0;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: left 1.5s ease-out;
    transform: translateX(-50%);
}

.score-display {
    text-align: center;
}

.score-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #10b981;
}

.score-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Credit Tiers */
.credit-tiers {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.tier-indicator {
    width: 30px;
    height: 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tier-bronze {
    background: #cd7f32;
    opacity: 0.4;
}

.tier-silver {
    background: #c0c0c0;
    opacity: 0.4;
}

.tier-gold {
    background: #ffd700;
    opacity: 0.4;
}

.tier-platinum {
    background: linear-gradient(90deg, #e5e4e2, #a8a9ad);
    opacity: 0.4;
}

.tier-indicator.active,
.tier-indicator.lit {
    opacity: 1;
    transform: scaleY(1.3);
    box-shadow: 0 0 10px currentColor;
}

/* Savings Growth Visual */
.savings-growth-visual {
    position: relative;
    height: 80px;
    margin-bottom: 16px;
}

.growth-coins {
    position: absolute;
    bottom: 10px;
    left: 20px;
    display: flex;
    flex-direction: column-reverse;
}

.coin {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px) scale(0);
    transition: all 0.4s ease;
}

.coin.appear {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.coin i {
    font-size: 24px;
    color: #f59e0b;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.4));
}

.coin-1 { animation-delay: 0s; }
.coin-2 { animation-delay: 0.15s; margin-top: -10px; }
.coin-3 { animation-delay: 0.3s; margin-top: -10px; }
.coin-4 { animation-delay: 0.45s; margin-top: -10px; }
.coin-5 { animation-delay: 0.6s; margin-top: -10px; }

.growth-line {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 60%;
    height: 60px;
}

.growth-line svg {
    width: 100%;
    height: 100%;
}

.growth-path {
    stroke: #10b981;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.5));
}

.growth-point {
    fill: #10b981;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.8));
}

/* Rewards Showcase */
.rewards-showcase {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.reward-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.reward-item:hover {
    border-color: var(--accent-2);
    transform: translateY(-3px);
}

.reward-icon {
    width: 28px;
    height: 28px;
    background: var(--gradient-gold);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-icon i {
    font-size: 14px;
    color: white;
}

/* Floating Rewards Stars */
.floating-rewards {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    width: 60px;
    height: 100px;
}

.floating-star {
    position: absolute;
    color: #f59e0b;
    opacity: 0.6;
}

.floating-star i {
    font-size: 16px;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}

.star-1 { top: 0; left: 10px; }
.star-2 { top: 40%; right: 0; }
.star-3 { bottom: 0; left: 20px; }

/* Card Hover Effect Overlay */
.card-hover-effect {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(99, 102, 241, 0.1) 0%, 
        transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 4;
    border-radius: 28px;
}

.banking-card-3d:hover .card-hover-effect {
    opacity: 1;
}

/* Service-specific Color Accents */
.banking-card-3d[data-service="transfer"] .icon-core {
    border-color: rgba(99, 102, 241, 0.4);
}

.banking-card-3d[data-service="investment"] .icon-core {
    border-color: rgba(245, 158, 11, 0.4);
}

.banking-card-3d[data-service="investment"] .icon-core i {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
}

.banking-card-3d[data-service="loans"] .icon-core {
    border-color: rgba(16, 185, 129, 0.4);
}

.banking-card-3d[data-service="loans"] .icon-core i {
    background: var(--gradient-success);
    -webkit-background-clip: text;
    background-clip: text;
}

.banking-card-3d[data-service="credit"] .icon-core {
    border-color: rgba(139, 92, 246, 0.4);
}

.banking-card-3d[data-service="credit"] .icon-core i {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
}

.banking-card-3d[data-service="savings"] .icon-core {
    border-color: rgba(6, 182, 212, 0.4);
}

.banking-card-3d[data-service="savings"] .icon-core i {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
}

.banking-card-3d[data-service="rewards"] .icon-core {
    border-color: rgba(245, 158, 11, 0.4);
}

.banking-card-3d[data-service="rewards"] .icon-core i {
    background: linear-gradient(135deg, #f43f5e, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Hover State Enhancements */
.banking-card-3d:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(99, 102, 241, 0.3);
}

.banking-card-3d[data-service="investment"]:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(245, 158, 11, 0.3);
}

.banking-card-3d[data-service="loans"]:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(16, 185, 129, 0.3);
}

.banking-card-3d[data-service="credit"]:hover {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(139, 92, 246, 0.3);
}

.banking-card-3d[data-service="savings"]:hover {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(6, 182, 212, 0.3);
}

.banking-card-3d[data-service="rewards"]:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(245, 158, 11, 0.3);
}

/* ========== Enhanced Banking Cards - Responsive ========== */
@media (max-width: 1200px) {
    .banking-grid-enhanced {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .banking-card-3d {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .banking-grid-enhanced {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .banking-card-3d {
        min-height: auto;
        padding: 30px 25px;
    }
    
    .banking-icon-3d {
        width: 80px;
        height: 80px;
    }
    
    .icon-core {
        width: 56px;
        height: 56px;
    }
    
    .icon-core i {
        font-size: 26px;
    }
    
    .card-title-animated {
        font-size: 20px;
    }
    
    .card-stats {
        flex-direction: column;
        gap: 12px;
    }
    
    .stat-item-mini {
        justify-content: center;
    }
    
    .floating-rewards {
        display: none;
    }
    
    .card-flow-animation {
        display: none;
    }
    
    .rewards-showcase {
        gap: 8px;
    }
    
    .reward-item {
        padding: 8px 12px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .banking-card-3d {
        padding: 25px 20px;
    }
    
    .card-badge {
        top: 15px;
        right: 15px;
        padding: 5px 10px;
        font-size: 9px;
    }
    
    .investment-chart-mini {
        padding: 10px;
    }
    
    .chart-bar {
        width: 16px;
    }
    
    .savings-growth-visual {
        height: 60px;
    }
    
    .credit-tiers {
        gap: 6px;
    }
    
    .tier-indicator {
        width: 24px;
    }
}

/* ========================================================================
   TIER 1 EXCHANGES SECTION - Premium Exchange Listings
   ======================================================================== */

/* Section Base */
.tier1-exchanges-section {
    background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 50%, transparent 100%);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Background Elements */
.tier1-bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.tier1-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: tier1OrbFloat 8s ease-in-out infinite;
}

.tier1-orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.tier1-orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    bottom: -50px;
    right: -50px;
    animation-delay: 2s;
}

.tier1-orb-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    top: 40%;
    right: 20%;
    animation-delay: 4s;
}

/* Floating Particles */
.tier1-floating-particles {
    position: absolute;
    inset: 0;
}

.tier1-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--gradient-primary);
    border-radius: 50%;
    opacity: 0;
}

.tier1-particle:nth-child(1) { top: 10%; left: 15%; }
.tier1-particle:nth-child(2) { top: 20%; right: 20%; }
.tier1-particle:nth-child(3) { top: 40%; left: 10%; }
.tier1-particle:nth-child(4) { top: 60%; right: 15%; }
.tier1-particle:nth-child(5) { top: 75%; left: 25%; }
.tier1-particle:nth-child(6) { top: 30%; right: 30%; }
.tier1-particle:nth-child(7) { top: 85%; left: 40%; }
.tier1-particle:nth-child(8) { top: 50%; right: 10%; }

/* Timeline Countdown */
.tier1-timeline {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 30px 40px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.tier1-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.timeline-header i {
    font-size: 24px;
    color: var(--primary);
}

.timeline-header span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.timeline-progress-container {
    position: relative;
}

.timeline-progress-bar {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.timeline-progress-fill {
    height: 100%;
    width: 0;
    background: var(--gradient-primary);
    border-radius: 10px;
    transition: width 0.1s ease;
    position: relative;
}

.timeline-progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: tier1ProgressGlow 2s ease-in-out infinite;
}

.timeline-months {
    display: flex;
    justify-content: space-between;
}

.timeline-month {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
    transition: all 0.4s ease;
}

.timeline-month.active {
    opacity: 1;
}

.timeline-month.active .month-dot {
    background: var(--gradient-primary);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
    animation: tier1MonthActivate 0.6s ease forwards;
}

.month-dot {
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.4s ease;
}

.month-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.timeline-month.active .month-label {
    color: var(--primary);
}

/* Announcement Banner */
.tier1-announcement {
    position: relative;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 24px;
    padding: 30px 40px;
    margin-bottom: 50px;
    overflow: hidden;
}

.announcement-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    animation: tier1CombinedGlow 4s ease-in-out infinite;
}

.announcement-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    z-index: 2;
}

.announcement-icon {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-icon i {
    font-size: 32px;
    color: var(--primary);
    z-index: 2;
    position: relative;
}

.icon-rings {
    position: absolute;
    inset: 0;
}

.icon-rings .ring {
    position: absolute;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: ringPulse 2s ease-in-out infinite;
}

.ring-1 {
    inset: 0;
    animation-delay: 0s;
}

.ring-2 {
    inset: -10px;
    animation-delay: 0.3s;
}

.ring-3 {
    inset: -20px;
    animation-delay: 0.6s;
}

.announcement-text {
    text-align: center;
    flex: 1;
    min-width: 250px;
}

.announcement-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.announcement-text h3 span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.announcement-text p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

.announcement-badge {
    position: relative;
    padding: 12px 24px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 50px;
    overflow: hidden;
}

.announcement-badge.pulse {
    animation: tier1AnnouncementPulse 1s ease;
}

.badge-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

.badge-pulse {
    position: absolute;
    inset: 0;
    background: rgba(99, 102, 241, 0.2);
    transform: scale(0);
    border-radius: 50px;
    transition: transform 0.5s ease;
}

.announcement-badge.pulse .badge-pulse {
    animation: pulseExpand 1s ease forwards;
}

@keyframes pulseExpand {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* Exchange Cards Grid */
.tier1-exchanges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* Exchange Card */
.tier1-exchange-card {
    position: relative;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 40px 30px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Card Background */
.exchange-card-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 28px;
}

.card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 50%, rgba(6, 182, 212, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.tier1-exchange-card:hover .card-gradient {
    opacity: 1;
}

.card-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
}

.card-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 100%
    );
    transform: translateX(-100%) skewX(-15deg);
    transition: none;
}

.card-shine.active {
    animation: tier1CardShine 1s ease forwards;
}

/* Card Content */
.exchange-card-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Logo Container */
.exchange-logo-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 50%;
}

.tier1-exchange-card:hover .logo-glow {
    opacity: 1;
}

.logo-ring {
    position: absolute;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
}

.logo-ring-outer {
    inset: -15px;
}

.logo-ring-inner {
    inset: -5px;
}

.logo-ring.animate {
    opacity: 1;
    animation: tier1RingExpand 0.6s ease forwards;
}

.exchange-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    transition: transform 0.4s ease;
    position: relative;
    z-index: 2;
}

.tier1-exchange-card:hover .exchange-logo {
    transform: scale(1.1);
}

/* Exchange Name */
.tier1-exchange-card .exchange-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Exchange Description */
.exchange-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
    min-height: 48px;
}

/* Exchange Stats */
.exchange-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tier1-exchange-card .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    min-width: 80px;
    transition: all 0.3s ease;
}

.tier1-exchange-card .stat-item:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-3px);
}

.tier1-exchange-card .stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-suffix {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.tier1-exchange-card .stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Exchange Features */
.exchange-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.feature-tag:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--primary);
}

.feature-tag i {
    font-size: 12px;
    color: var(--primary);
}

/* Listing Status */
.listing-status {
    width: 100%;
}

.status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
    transition: all 0.3s ease;
}

.status-dot.blink {
    transform: scale(1.3);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
}

.status-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--success);
}

.status-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.status-fill {
    height: 100%;
    width: 0;
    background: var(--gradient-success);
    border-radius: 10px;
    transition: width 1.5s ease-out;
    position: relative;
}

.status-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
}

/* Floating Elements */
.card-floating-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.float-icon {
    position: absolute;
    font-size: 16px;
    color: var(--primary);
    opacity: 0.4;
    transition: all 0.4s ease;
}

.float-icon-1 {
    top: 15%;
    right: 15%;
}

.float-icon-2 {
    bottom: 25%;
    left: 10%;
}

.float-icon-3 {
    top: 60%;
    right: 10%;
}

.float-icon.animate {
    opacity: 0.8;
    animation: tier1IconFloat 3s ease-in-out infinite;
}

.float-icon-1.animate { animation-delay: 0s; }
.float-icon-2.animate { animation-delay: 0.5s; }
.float-icon-3.animate { animation-delay: 1s; }

/* Exchange Card Top Border by Exchange */
.tier1-exchange-card[data-exchange="bitget"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #00f0ff, #0080ff);
    z-index: 10;
}

.tier1-exchange-card[data-exchange="gateio"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2354e6, #17e6a1);
    z-index: 10;
}

.tier1-exchange-card[data-exchange="bingx"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2962ff, #00bcd4);
    z-index: 10;
}

/* Exchange Card Hover States */
.tier1-exchange-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(99, 102, 241, 0.3);
}

.tier1-exchange-card[data-exchange="bitget"]:hover {
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(0, 240, 255, 0.3);
}

.tier1-exchange-card[data-exchange="gateio"]:hover {
    border-color: rgba(35, 84, 230, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(35, 84, 230, 0.3);
}

.tier1-exchange-card[data-exchange="bingx"]:hover {
    border-color: rgba(41, 98, 255, 0.4);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px -15px rgba(41, 98, 255, 0.3);
}

/* Benefits Section */
.tier1-benefits {
    margin-bottom: 50px;
}

.benefits-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

.benefits-title span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.tier1-benefits .benefit-item {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    transition: all 0.4s ease;
}

.tier1-benefits .benefit-item:hover {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: var(--glow-primary);
}

.tier1-benefits .benefit-icon {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tier1-benefits .benefit-icon .icon-bg {
    position: absolute;
    inset: 0;
    background: rgba(99, 102, 241, 0.1);
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 18px;
    transition: all 0.4s ease;
}

.tier1-benefits .benefit-icon .icon-bg.pulse {
    animation: tier1IconBgPulse 1s ease;
}

.tier1-benefits .benefit-icon i {
    font-size: 28px;
    color: var(--primary);
    position: relative;
    z-index: 2;
}

.tier1-benefits .benefit-item h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.tier1-benefits .benefit-item p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Combined Stats */
.tier1-combined-stats {
    position: relative;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(6, 182, 212, 0.1) 100%);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 32px;
    padding: 50px;
    text-align: center;
    overflow: hidden;
}

.combined-stats-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
    animation: tier1CombinedGlow 5s ease-in-out infinite;
}

.combined-stats-content {
    position: relative;
    z-index: 2;
}

.stats-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.stats-header i {
    font-size: 24px;
    color: var(--primary);
}

.stats-header span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mega-counter {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.counter-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 80px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.counter-suffix {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--primary);
}

.stats-description {
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.exchange-logos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.mini-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: grayscale(30%);
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s ease;
}

.mini-logo.pop-in {
    opacity: 1;
    transform: scale(1);
    animation: tier1PopIn 0.5s ease forwards;
}

.mini-logo:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.plus-sign {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-secondary);
    opacity: 0;
    transform: scale(0);
}

.plus-sign.pop-in {
    opacity: 1;
    transform: scale(1);
    animation: tier1PopIn 0.5s ease forwards;
}

/* ========== Tier 1 Exchanges - Responsive ========== */
@media (max-width: 1200px) {
    .tier1-exchanges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .counter-value {
        font-size: 60px;
    }
}

@media (max-width: 992px) {
    .tier1-exchanges-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .announcement-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .tier1-timeline {
        padding: 24px 20px;
    }
    
    .timeline-months {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .tier1-exchanges-section {
        padding: 60px 0;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .tier1-combined-stats {
        padding: 30px 20px;
    }
    
    .counter-value {
        font-size: 48px;
    }
    
    .counter-suffix {
        font-size: 20px;
    }
    
    .announcement-text h3 {
        font-size: 22px;
    }
    
    .exchange-stats {
        gap: 12px;
    }
    
    .tier1-exchange-card .stat-item {
        padding: 10px 12px;
        min-width: 70px;
    }
    
    .tier1-exchange-card .stat-value {
        font-size: 20px;
    }
    
    .exchange-logos-row {
        flex-wrap: wrap;
    }
    
    .mini-logo {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .tier1-exchange-card {
        padding: 30px 20px;
    }
    
    .tier1-exchange-card .exchange-name {
        font-size: 24px;
    }
    
    .exchange-features {
        gap: 8px;
    }
    
    .feature-tag {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .benefits-title {
        font-size: 24px;
    }
    
    .tier1-benefits .benefit-item {
        padding: 24px 16px;
    }
    
    .tier1-benefits .benefit-icon {
        width: 60px;
        height: 60px;
    }
    
    .tier1-benefits .benefit-icon i {
        font-size: 24px;
    }
}

/* =====================================================
   UNITRIBE SECTION - Web3 Social Platform
   ===================================================== */

.unitribe-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: linear-gradient(180deg, 
        rgba(10, 10, 15, 1) 0%,
        rgba(99, 102, 241, 0.05) 30%,
        rgba(139, 92, 246, 0.08) 50%,
        rgba(6, 182, 212, 0.05) 70%,
        rgba(10, 10, 15, 1) 100%
    );
}

/* Background Animated Elements */
.unitribe-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* Floating Posts */
.floating-post {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 30px;
    color: var(--primary);
    font-size: 14px;
    animation: floatPost 15s ease-in-out infinite;
    backdrop-filter: blur(10px);
}

.floating-post i {
    font-size: 16px;
}

.floating-post.post-1 {
    top: 15%;
    left: 5%;
    animation-delay: 0s;
}

.floating-post.post-2 {
    top: 40%;
    right: 8%;
    animation-delay: 3s;
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: var(--secondary);
}

.floating-post.post-3 {
    bottom: 25%;
    left: 10%;
    animation-delay: 6s;
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: var(--accent);
}

@keyframes floatPost {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-30px) translateX(20px) rotate(3deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-50px) translateX(-10px) rotate(-2deg);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-20px) translateX(30px) rotate(1deg);
        opacity: 1;
    }
}

/* Floating Coins */
.floating-coin {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    border-radius: 50%;
    color: #000;
    font-size: 20px;
    animation: floatCoin 10s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
}

.floating-coin.coin-1 {
    top: 20%;
    right: 15%;
    animation-delay: 0s;
}

.floating-coin.coin-2 {
    bottom: 30%;
    right: 5%;
    animation-delay: 2s;
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.floating-coin.coin-3 {
    top: 60%;
    left: 3%;
    animation-delay: 4s;
    width: 35px;
    height: 35px;
    font-size: 14px;
}

@keyframes floatCoin {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-40px) rotate(90deg) scale(1.1);
    }
    50% {
        transform: translateY(-60px) rotate(180deg) scale(1);
    }
    75% {
        transform: translateY(-30px) rotate(270deg) scale(1.05);
    }
}

/* Location Pulse */
.location-pulse {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    animation: locationPulse 4s ease-out infinite;
}

.location-pulse.pulse-1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.location-pulse.pulse-2 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 1.3s;
}

.location-pulse.pulse-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 2.6s;
}

@keyframes locationPulse {
    0% {
        width: 100px;
        height: 100px;
        opacity: 0.8;
    }
    100% {
        width: 600px;
        height: 600px;
        opacity: 0;
    }
}

/* Section Header Overrides */
.unitribe-section .section-header {
    position: relative;
    z-index: 2;
}

.unitribe-number {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    margin: 0 auto 24px;
    animation: numberPulse 3s ease-in-out infinite;
}

.unitribe-number i {
    font-size: 32px;
    color: white;
}

@keyframes numberPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 50px rgba(99, 102, 241, 0.6);
    }
}

.unitribe-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.title-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    animation: badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
    }
}

/* Hero Visual - Phone Mockup */
.unitribe-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
    z-index: 2;
}

.phone-mockup {
    position: relative;
    z-index: 3;
}

.phone-frame {
    width: 320px;
    height: 640px;
    background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
    border-radius: 45px;
    padding: 12px;
    box-shadow: 
        0 0 0 3px rgba(99, 102, 241, 0.3),
        0 25px 80px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(99, 102, 241, 0.1);
    position: relative;
    overflow: hidden;
    animation: phoneFloat 6s ease-in-out infinite;
}

@keyframes phoneFloat {
    0%, 100% {
        transform: translateY(0) rotateY(0deg);
    }
    50% {
        transform: translateY(-20px) rotateY(5deg);
    }
}

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

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 100%);
    border-radius: 35px;
    overflow: hidden;
    position: relative;
}

.phone-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    z-index: 1;
    animation: phoneGlow 4s ease-in-out infinite;
}

@keyframes phoneGlow {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* App Header Mock */
.app-header-mock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 16px 16px;
    background: rgba(99, 102, 241, 0.1);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.app-logo-mock {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.app-balance-mock {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 20px;
    font-size: 13px;
}

.app-balance-mock i {
    color: #f59e0b;
}

.balance-value {
    font-weight: 600;
    color: #fbbf24;
    transition: all 0.3s ease;
}

.balance-unit {
    color: var(--text-secondary);
    font-size: 11px;
}

@keyframes balancePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); color: #10b981; }
    100% { transform: scale(1); }
}

/* Feed Mock */
.feed-mock {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-mock {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    opacity: 0;
    transform: translateY(20px);
    animation: postAppear 0.5s ease forwards;
}

.post-mock.post-mock-1 {
    animation-delay: 0.5s;
}

.post-mock.post-mock-2 {
    animation-delay: 1s;
}

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

.post-avatar-mock {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    margin-bottom: 12px;
}

.post-content-mock {
    margin-bottom: 12px;
}

.post-line {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    margin-bottom: 8px;
}

.post-line.short {
    width: 70%;
}

.post-image-mock {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 12px;
    margin-bottom: 12px;
}

.post-actions-mock {
    display: flex;
    gap: 12px;
}

.action-mock {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.action-mock.heart:hover,
.action-mock.heart.liked {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.action-mock.comment:hover {
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.action-mock.reward {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    animation: rewardPulse 2s ease-in-out infinite;
}

@keyframes rewardPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Location Indicator */
.location-indicator-mock {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 25px;
    font-size: 12px;
    color: var(--primary);
    backdrop-filter: blur(10px);
}

.location-indicator-mock i {
    animation: locationBounce 1s ease-in-out infinite;
}

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

.location-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: waveExpand 2s ease-out infinite;
    pointer-events: none;
}

@keyframes waveExpand {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 300%;
        height: 300%;
        opacity: 0;
    }
}

/* Orbit Container */
.orbit-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    pointer-events: none;
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.orbit-1 {
    width: 350px;
    height: 350px;
    animation: orbitRotate 12s linear infinite;
}

.orbit-2 {
    width: 420px;
    height: 420px;
    animation: orbitRotate 18s linear infinite reverse;
}

.orbit-3 {
    width: 500px;
    height: 500px;
    animation: orbitRotate 25s linear infinite;
}

@keyframes orbitRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.orbit-item {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
    backdrop-filter: blur(10px);
    animation: orbitItemRotate 12s linear infinite reverse;
}

.orbit-2 .orbit-item {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(6, 182, 212, 0.3));
    color: var(--secondary);
    animation: orbitItemRotate 18s linear infinite;
}

.orbit-3 .orbit-item {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(251, 191, 36, 0.3));
    color: #f59e0b;
    animation: orbitItemRotate 25s linear infinite reverse;
}

@keyframes orbitItemRotate {
    from { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
    to { transform: translateX(-50%) translateY(-50%) rotate(-360deg); }
}

/* Features Grid */
.unitribe-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 2;
}

.unitribe-feature-card {
    background: rgba(18, 18, 26, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.unitribe-feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15);
}

.unitribe-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.unitribe-feature-card:hover::before {
    opacity: 1;
}

/* Feature Icon Container */
.feature-icon-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
}

.feature-icon-container > i {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    transition: all 0.4s ease;
}

.icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 20px;
    filter: blur(20px);
}

.icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.unitribe-feature-card:hover .icon-glow {
    opacity: 1;
}

/* Feature Card Titles */
.unitribe-feature-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.unitribe-feature-card h3 span {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.unitribe-feature-card > p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Location Card - Radar Animation */
.radar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    animation: radarPulse 3s ease-out infinite;
}

.radar-ring.ring-1 {
    width: 100px;
    height: 100px;
    animation-delay: 0s;
}

.radar-ring.ring-2 {
    width: 140px;
    height: 140px;
    animation-delay: 1s;
}

.radar-ring.ring-3 {
    width: 180px;
    height: 180px;
    animation-delay: 2s;
}

@keyframes radarPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Feature Demo Sections */
.feature-demo {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-top: 16px;
}

/* Location Map Mini */
.location-map-mini {
    position: relative;
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.map-center-point {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--primary);
    z-index: 3;
}

.map-center-point::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    animation: centerPulse 2s ease-out infinite;
}

@keyframes centerPulse {
    0% { width: 12px; height: 12px; opacity: 1; }
    100% { width: 60px; height: 60px; opacity: 0; }
}

.map-radius {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    transition: all 0.5s ease;
}

.map-radius.radius-1 {
    width: 60px;
    height: 60px;
}

.map-radius.radius-2 {
    width: 100px;
    height: 100px;
}

.map-radius.radius-3 {
    width: 140px;
    height: 140px;
}

.map-user {
    position: absolute;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #10b981, #34d399);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    animation: userFloat 3s ease-in-out infinite;
}

.map-user.user-1 { top: 30%; left: 30%; animation-delay: 0s; }
.map-user.user-2 { top: 25%; right: 25%; animation-delay: 0.5s; }
.map-user.user-3 { bottom: 30%; left: 40%; animation-delay: 1s; }
.map-user.user-4 { bottom: 25%; right: 30%; animation-delay: 1.5s; }

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

/* Distance Selector */
.distance-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.distance-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.distance-options {
    display: flex;
    gap: 8px;
}

.dist-btn {
    flex: 1;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dist-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--primary);
}

.dist-btn.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-color: var(--primary);
    color: var(--primary);
}

/* Rewards Card */
.rewards-bg { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1)); }
.rewards-glow { background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, transparent 70%); }
.rewards-card .feature-icon-container > i {
    color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.15));
    border-color: rgba(245, 158, 11, 0.3);
}

/* Coin Burst Animation */
.coin-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.burst-coin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 10px;
    opacity: 0;
    animation: coinBurst 3s ease-out infinite;
}

.burst-coin.c1 { animation-delay: 0s; }
.burst-coin.c2 { animation-delay: 0.5s; }
.burst-coin.c3 { animation-delay: 1s; }
.burst-coin.c4 { animation-delay: 1.5s; }
.burst-coin.c5 { animation-delay: 2s; }
.burst-coin.c6 { animation-delay: 2.5s; }

@keyframes coinBurst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--x, 50px)), calc(-50% + var(--y, -50px))) scale(0.5);
        opacity: 0;
    }
}

.burst-coin.c1 { --x: 60px; --y: -40px; }
.burst-coin.c2 { --x: -50px; --y: -50px; }
.burst-coin.c3 { --x: 70px; --y: 30px; }
.burst-coin.c4 { --x: -60px; --y: 40px; }
.burst-coin.c5 { --x: 20px; --y: -70px; }
.burst-coin.c6 { --x: -30px; --y: 60px; }

/* Rewards Demo */
.rewards-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reward-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
}

.reward-action.visible {
    opacity: 1;
    transform: translateX(0);
}

.reward-action:hover {
    background: rgba(255, 255, 255, 0.06);
}

.reward-action.highlight {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.reward-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    color: var(--primary);
}

.reward-action.highlight .reward-icon {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.reward-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reward-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.reward-amount {
    font-size: 12px;
    color: #10b981;
    font-weight: 600;
}

.reward-bar {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.reward-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 2px;
    width: 0;
    transition: width 0.8s ease-out;
}

.reward-fill.viral {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* Viral Card */
.viral-bg { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1)); }
.viral-glow { background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%); }
.viral-card .feature-icon-container > i {
    color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(249, 115, 22, 0.15));
    border-color: rgba(239, 68, 68, 0.3);
}

/* Fire Particles */
.fire-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.fire-particle {
    position: absolute;
    bottom: 20%;
    width: 8px;
    height: 8px;
    background: linear-gradient(180deg, #fbbf24, #ef4444);
    border-radius: 50%;
    animation: fireFly 1.5s ease-out infinite;
}

.fire-particle.fp1 { left: 40%; animation-delay: 0s; }
.fire-particle.fp2 { left: 50%; animation-delay: 0.2s; }
.fire-particle.fp3 { left: 60%; animation-delay: 0.4s; }
.fire-particle.fp4 { left: 45%; animation-delay: 0.6s; }
.fire-particle.fp5 { left: 55%; animation-delay: 0.8s; }

@keyframes fireFly {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(0);
        opacity: 0;
    }
}

/* Viral Demo */
.viral-demo {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.viral-meter {
    position: relative;
}

.meter-track {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
    border-radius: 6px;
    width: 0%;
    transition: width 0.5s ease;
    position: relative;
}

.meter-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: meterShine 2s linear infinite;
}

@keyframes meterShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.meter-stages {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.stage {
    font-size: 11px;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.stage.active {
    color: #f59e0b;
    font-weight: 600;
}

.viral-multiplier {
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1));
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.multiplier-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.multiplier-value {
    font-size: 36px;
    font-weight: 800;
    color: #ef4444;
}

.mult-number {
    background: linear-gradient(135deg, #ef4444, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.viral-earnings {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
}

.earnings-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.earnings-row.highlight {
    color: var(--text-primary);
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
    margin-top: 8px;
}

.earnings-row.highlight span:last-child {
    color: #10b981;
}

/* Blockchain Card */
.blockchain-bg { background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(99, 102, 241, 0.1)); }
.blockchain-glow { background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, transparent 70%); }
.blockchain-card .feature-icon-container > i {
    color: var(--accent);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(99, 102, 241, 0.15));
    border-color: rgba(6, 182, 212, 0.3);
}

/* Blockchain Chain Animation */
.blockchain-chain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 0;
}

.chain-block {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    border-radius: 4px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.chain-block.connected {
    opacity: 1;
    transform: scale(1);
}

.chain-link {
    width: 15px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.3s ease;
}

.chain-link.active {
    opacity: 1;
    transform: scaleX(1);
}

/* Blockchain Demo */
.blockchain-demo {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.block-visual {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.block-item {
    padding: 16px;
}

.block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}

.block-header i {
    color: var(--accent);
}

.block-header span {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'Space Grotesk', monospace;
}

.block-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.block-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.block-row span:first-child {
    color: var(--text-muted);
}

.block-row .hash {
    font-family: 'Space Grotesk', monospace;
    color: var(--accent);
}

.block-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(16, 185, 129, 0.1);
    margin-top: 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #10b981;
}

.block-status i {
    animation: checkPulse 2s ease-in-out infinite;
}

@keyframes checkPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.decentralized-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(99, 102, 241, 0.15));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
}

.decentralized-badge i {
    animation: shieldRotate 4s linear infinite;
}

@keyframes shieldRotate {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
}

/* Connect Card */
.connect-bg { background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(139, 92, 246, 0.1)); }
.connect-glow { background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 70%); }
.connect-card .feature-icon-container > i {
    color: #ec4899;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.15));
    border-color: rgba(236, 72, 153, 0.3);
}

/* Connection Lines Animation */
.connection-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
}

.conn-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ec4899, transparent);
    animation: connPulse 2s ease-in-out infinite;
}

.conn-line.cl1 {
    top: 30%;
    left: 0;
    width: 50%;
    animation-delay: 0s;
}

.conn-line.cl2 {
    top: 50%;
    right: 0;
    width: 50%;
    animation-delay: 0.5s;
}

.conn-line.cl3 {
    top: 70%;
    left: 25%;
    width: 50%;
    animation-delay: 1s;
}

@keyframes connPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.conn-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ec4899;
    border-radius: 50%;
    animation: dotBlink 1.5s ease-in-out infinite;
}

.conn-dot.cd1 { top: 20%; left: 20%; animation-delay: 0s; }
.conn-dot.cd2 { top: 30%; right: 15%; animation-delay: 0.3s; }
.conn-dot.cd3 { bottom: 25%; left: 30%; animation-delay: 0.6s; }
.conn-dot.cd4 { bottom: 20%; right: 25%; animation-delay: 0.9s; }

@keyframes dotBlink {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 1; }
}

/* Chat Demo */
.chat-demo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-window {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-header-demo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 50%;
}

.chat-user-info {
    display: flex;
    flex-direction: column;
}

.chat-username {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-status {
    font-size: 11px;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-status i {
    font-size: 6px;
    animation: statusBlink 1.5s ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.chat-messages {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 150px;
}

.chat-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.chat-message.visible {
    opacity: 1;
    transform: translateY(0);
}

.chat-message.received {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 4px;
}

.chat-message.sent {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border-bottom-right-radius: 4px;
}

.msg-time {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 4px;
}

.chat-input-demo {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
}

.chat-input-demo input {
    flex: 1;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    color: var(--text-primary);
    font-size: 12px;
}

.chat-input-demo button {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.chat-input-demo button:hover {
    transform: scale(1.1);
}

.encryption-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 25px;
    font-size: 12px;
    color: #10b981;
}

/* Ownership Card */
.ownership-bg { background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1)); }
.ownership-glow { background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%); }
.ownership-card .feature-icon-container > i {
    color: #fbbf24;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.15));
    border-color: rgba(251, 191, 36, 0.3);
}

/* Ownership Rays */
.ownership-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
}

.ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 50px;
    background: linear-gradient(180deg, #fbbf24, transparent);
    transform-origin: bottom center;
    animation: rayPulse 3s ease-in-out infinite;
}

.ray.r1 { transform: translateX(-50%) rotate(0deg); animation-delay: 0s; }
.ray.r2 { transform: translateX(-50%) rotate(45deg); animation-delay: 0.2s; }
.ray.r3 { transform: translateX(-50%) rotate(90deg); animation-delay: 0.4s; }
.ray.r4 { transform: translateX(-50%) rotate(135deg); animation-delay: 0.6s; }
.ray.r5 { transform: translateX(-50%) rotate(180deg); animation-delay: 0.8s; }
.ray.r6 { transform: translateX(-50%) rotate(225deg); animation-delay: 1s; }
.ray.r7 { transform: translateX(-50%) rotate(270deg); animation-delay: 1.2s; }
.ray.r8 { transform: translateX(-50%) rotate(315deg); animation-delay: 1.4s; }

@keyframes rayPulse {
    0%, 100% { opacity: 0.2; height: 30px; }
    50% { opacity: 0.6; height: 50px; }
}

/* Ownership Demo */
.ownership-demo {
    margin-top: 16px;
}

.ownership-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.compare-item {
    padding: 16px;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.compare-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.compare-item.traditional {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.compare-item.unitribe-compare {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.compare-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.compare-item.traditional .compare-header i {
    color: #ef4444;
}

.compare-item.unitribe-compare .compare-header i {
    color: #10b981;
}

.compare-header span {
    font-size: 13px;
    font-weight: 600;
}

.compare-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compare-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.compare-item.traditional .compare-list li i {
    color: #ef4444;
}

.compare-item.unitribe-compare .compare-list li i {
    color: #10b981;
}

/* Globe Section */
.unitribe-globe-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 100px;
    padding: 60px;
    background: rgba(18, 18, 26, 0.6);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

.globe-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.globe-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
}

.globe {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border: 2px solid rgba(99, 102, 241, 0.3);
    overflow: hidden;
    animation: globeRotate 30s linear infinite;
    transform-style: preserve-3d;
}

@keyframes globeRotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

.globe-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 60%);
    animation: globeGlow 4s ease-in-out infinite;
}

@keyframes globeGlow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.globe-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.globe-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

.globe-line.gl1 { top: 20%; }
.globe-line.gl2 { top: 35%; }
.globe-line.gl3 { top: 50%; }
.globe-line.gl4 { top: 65%; }
.globe-line.gl5 { top: 80%; }

.globe-meridian {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.3), transparent);
    transform-origin: center;
}

.globe-meridian.gm1 { transform: translateX(-50%) rotateZ(0deg); }
.globe-meridian.gm2 { transform: translateX(-50%) rotateZ(60deg); }
.globe-meridian.gm3 { transform: translateX(-50%) rotateZ(-60deg); }

.globe-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.globe-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.globe-dot:hover {
    transform: scale(1.5);
}

.globe-dot.gd1 { top: 35%; left: 25%; }
.globe-dot.gd2 { top: 30%; left: 55%; }
.globe-dot.gd3 { top: 40%; right: 20%; }
.globe-dot.gd4 { top: 55%; left: 60%; }
.globe-dot.gd5 { top: 60%; right: 30%; }

.dot-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    animation: dotPulse 2s ease-out infinite;
}

@keyframes dotPulse {
    0% { width: 10px; height: 10px; opacity: 1; }
    100% { width: 40px; height: 40px; opacity: 0; }
}

.dot-label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.globe-dot:hover .dot-label {
    opacity: 1;
}

.connection-arcs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.arc-svg {
    width: 100%;
    height: 100%;
}

.arc {
    stroke: var(--primary);
    stroke-width: 1;
    stroke-dasharray: 5 5;
    animation: arcDash 20s linear infinite;
}

@keyframes arcDash {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 100; }
}

.globe-stats {
    display: flex;
    gap: 30px;
}

.globe-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.globe-stat .stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    color: var(--primary);
    font-size: 18px;
}

.globe-stat .stat-info {
    display: flex;
    flex-direction: column;
}

.globe-stat .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.globe-stat .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.globe-info h3 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
}

.globe-info h3 span {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.globe-info p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 32px;
}

.globe-cta {
    display: flex;
    gap: 16px;
}

.btn-unitribe {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.btn-unitribe:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
}

.btn-unitribe-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-unitribe-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
}

/* How It Works */
.unitribe-how-it-works {
    margin-top: 80px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.unitribe-how-it-works h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 48px;
}

.unitribe-how-it-works h3 span {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hiw-timeline {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}

.hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 180px;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease;
}

.hiw-step.active {
    opacity: 1;
    transform: translateY(0);
}

.step-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    z-index: 2;
}

.step-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.hiw-step:hover .step-icon {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
}

.step-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.step-content p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.step-connector {
    position: absolute;
    top: 75px;
    right: -40px;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.5s ease 0.2s;
}

.step-connector.active {
    opacity: 1;
    transform: scaleX(1);
}

.hiw-step:last-child .step-connector {
    display: none;
}

/* CTA Banner */
.unitribe-cta-banner {
    margin-top: 80px;
    padding: 60px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.cta-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cta-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: ctaParticle 8s ease-in-out infinite;
}

@keyframes ctaParticle {
    0%, 100% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    90% {
        opacity: 0.5;
        transform: translateY(-100px) scale(0.5);
    }
}

.cta-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(100px);
}

.cta-glow.cg1 {
    background: rgba(99, 102, 241, 0.3);
    top: -100px;
    left: -100px;
    animation: ctaGlow 8s ease-in-out infinite;
}

.cta-glow.cg2 {
    background: rgba(139, 92, 246, 0.3);
    bottom: -100px;
    right: -100px;
    animation: ctaGlow 8s ease-in-out infinite 4s;
}

@keyframes ctaGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.cta-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 24px;
    font-size: 36px;
    color: white;
    animation: ctaIconFloat 3s ease-in-out infinite;
}

@keyframes ctaIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.cta-content h3 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
}

.cta-content h3 span {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-content > p {
    color: var(--text-secondary);
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.btn-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(99, 102, 241, 0.5);
}

.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
}

.cta-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.cta-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.cta-stat i {
    color: #f59e0b;
}

/* Responsive Styles for Unitribe Section */
@media (max-width: 1200px) {
    .unitribe-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .unitribe-globe-section {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    
    .globe-info {
        order: 2;
    }
    
    .globe-cta {
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .phone-frame {
        width: 280px;
        height: 560px;
    }
    
    .orbit-container {
        width: 400px;
        height: 400px;
    }
    
    .orbit-1 { width: 300px; height: 300px; }
    .orbit-2 { width: 350px; height: 350px; }
    .orbit-3 { width: 400px; height: 400px; }
    
    .hiw-timeline {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .step-connector {
        display: none;
    }
    
    .hiw-step {
        width: 150px;
        margin: 10px;
    }
}

@media (max-width: 768px) {
    .unitribe-section {
        padding: 80px 0;
    }
    
    .unitribe-features-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 40px auto 0;
    }
    
    .unitribe-hero-visual {
        padding: 40px 0;
    }
    
    .phone-frame {
        width: 260px;
        height: 520px;
    }
    
    .orbit-container {
        width: 320px;
        height: 320px;
    }
    
    .orbit-1 { width: 260px; height: 260px; }
    .orbit-2 { width: 290px; height: 290px; }
    .orbit-3 { width: 320px; height: 320px; }
    
    .globe-wrapper {
        width: 250px;
        height: 250px;
    }
    
    .globe-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .globe-info h3 {
        font-size: 28px;
    }
    
    .unitribe-cta-banner {
        padding: 40px 24px;
    }
    
    .cta-content h3 {
        font-size: 28px;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-stats {
        flex-direction: column;
        gap: 16px;
    }
    
    .floating-post,
    .floating-coin {
        display: none;
    }
    
    .ownership-comparison {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .unitribe-number {
        width: 60px;
        height: 60px;
    }
    
    .unitribe-number i {
        font-size: 24px;
    }
    
    .unitribe-title {
        font-size: 28px;
    }
    
    .phone-frame {
        width: 240px;
        height: 480px;
    }
    
    .unitribe-feature-card {
        padding: 24px;
    }
    
    .feature-icon-container {
        width: 60px;
        height: 60px;
    }
    
    .feature-icon-container > i {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    .unitribe-feature-card h3 {
        font-size: 18px;
    }
    
    .hiw-step {
        width: 100%;
        max-width: 200px;
    }
}

/* =====================================================
   UNITUBE SECTION - Web3 Video Education Platform
   ===================================================== */

.unitube-section {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
    background: linear-gradient(180deg, 
        rgba(10, 10, 15, 1) 0%,
        rgba(245, 158, 11, 0.03) 20%,
        rgba(139, 92, 246, 0.04) 50%,
        rgba(236, 72, 153, 0.03) 80%,
        rgba(10, 10, 15, 1) 100%
    );
}

/* Cinematic Background Effects */
.unitube-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* Video Waves */
.video-wave {
    position: absolute;
    width: 200%;
    height: 200px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(245, 158, 11, 0.1),
        rgba(236, 72, 153, 0.1),
        transparent
    );
    border-radius: 50%;
    opacity: 0.5;
}

.video-wave.wave-1 {
    top: 10%;
    left: -50%;
    animation: videoWave 15s ease-in-out infinite;
}

.video-wave.wave-2 {
    top: 40%;
    left: -50%;
    animation: videoWave 18s ease-in-out infinite reverse;
    animation-delay: -5s;
}

.video-wave.wave-3 {
    top: 70%;
    left: -50%;
    animation: videoWave 20s ease-in-out infinite;
    animation-delay: -10s;
}

@keyframes videoWave {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(25%) rotate(2deg); }
}

/* Play Particles */
.play-particle {
    position: absolute;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(236, 72, 153, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 158, 11, 0.6);
    font-size: 14px;
    animation: playFloat 8s ease-in-out infinite;
}

.play-particle.pp-1 { top: 15%; left: 10%; animation-delay: 0s; }
.play-particle.pp-2 { top: 30%; right: 15%; animation-delay: -2s; }
.play-particle.pp-3 { bottom: 25%; left: 5%; animation-delay: -4s; }
.play-particle.pp-4 { bottom: 40%; right: 8%; animation-delay: -6s; }

@keyframes playFloat {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.3;
    }
    50% { 
        transform: translateY(-30px) rotate(180deg) scale(1.2);
        opacity: 0.6;
    }
}

/* Money Rain */
.money-rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.money-drop {
    position: absolute;
    color: rgba(245, 158, 11, 0.4);
    font-size: 20px;
    animation: moneyFall 10s linear infinite;
}

.money-drop.md-1 { left: 10%; animation-delay: 0s; }
.money-drop.md-2 { left: 25%; animation-delay: -2s; }
.money-drop.md-3 { left: 40%; animation-delay: -4s; }
.money-drop.md-4 { left: 55%; animation-delay: -6s; }
.money-drop.md-5 { left: 70%; animation-delay: -3s; }
.money-drop.md-6 { left: 85%; animation-delay: -8s; }

@keyframes moneyFall {
    0% { 
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.4; }
    90% { opacity: 0.4; }
    100% { 
        transform: translateY(calc(100vh + 100px)) rotate(720deg);
        opacity: 0;
    }
}

/* Floating Videos */
.floating-video {
    position: absolute;
    width: 120px;
    height: 70px;
    background: rgba(18, 18, 26, 0.8);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(245, 158, 11, 0.2);
    animation: floatVideo 12s ease-in-out infinite;
}

.floating-video .fv-thumbnail {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
}

.floating-video .fv-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: rgba(245, 158, 11, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
}

.floating-video.fv-1 { top: 20%; right: 10%; animation-delay: 0s; }
.floating-video.fv-2 { top: 50%; left: 5%; animation-delay: -4s; }
.floating-video.fv-3 { bottom: 15%; right: 5%; animation-delay: -8s; }

@keyframes floatVideo {
    0%, 100% { 
        transform: translateY(0) rotate(-3deg);
        opacity: 0.4;
    }
    50% { 
        transform: translateY(-20px) rotate(3deg);
        opacity: 0.7;
    }
}

/* Section Number */
.unitube-number {
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    margin: 0 auto 24px;
    position: relative;
    animation: unitubeNumberPulse 4s ease-in-out infinite;
}

.unitube-number i {
    font-size: 36px;
    color: white;
    z-index: 2;
}

.number-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    border: 2px solid rgba(245, 158, 11, 0.5);
    animation: pulseRing 2s ease-out infinite;
}

.number-pulse-ring.delay-1 { animation-delay: 0.5s; }
.number-pulse-ring.delay-2 { animation-delay: 1s; }

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes unitubeNumberPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 60px rgba(245, 158, 11, 0.6);
    }
}

/* Title Styling */
.unitube-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.title-icon-wrapper {
    position: relative;
}

.title-play-icon {
    font-size: 40px;
    color: #f59e0b;
    animation: playIconPulse 2s ease-in-out infinite;
}

@keyframes playIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.highlight-tube {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.unitube-badge {
    background: linear-gradient(135deg, #f59e0b, #ec4899) !important;
    animation: badgeGlow 3s ease-in-out infinite;
}

@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 40px rgba(236, 72, 153, 0.6); }
}

.unitube-subtitle .gradient-text {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

/* Hero Cinema Display */
.unitube-hero-cinema {
    position: relative;
    margin: 80px auto;
    max-width: 1100px;
    z-index: 2;
}

.cinema-frame {
    position: relative;
    background: linear-gradient(145deg, rgba(18, 18, 26, 0.95), rgba(30, 30, 45, 0.9));
    border-radius: 20px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    overflow: hidden;
    box-shadow: 
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(245, 158, 11, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cinema-screen {
    position: relative;
    padding: 0;
}

/* Player Container */
.player-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    min-height: 450px;
}

.player-video-area {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    display: flex;
    flex-direction: column;
}

.video-thumbnail-display {
    position: relative;
    flex: 1;
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.15),
        rgba(139, 92, 246, 0.2),
        rgba(236, 72, 153, 0.15)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="%236366f1" opacity="0.1" x="10" y="20" width="30" height="20" rx="3"/><rect fill="%238b5cf6" opacity="0.1" x="50" y="30" width="40" height="25" rx="3"/><rect fill="%23ec4899" opacity="0.1" x="20" y="60" width="35" height="25" rx="3"/></svg>');
    background-size: cover;
    opacity: 0.3;
}

.video-category-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(99, 102, 241, 0.9);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.video-play-btn-large {
    position: relative;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    animation: playBtnPulse 2s ease-in-out infinite;
}

.video-play-btn-large i {
    font-size: 36px;
    color: white;
    margin-left: 5px;
}

.play-ripple {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(245, 158, 11, 0.6);
    animation: playRipple 2s ease-out infinite;
}

.play-ripple.r2 { animation-delay: 0.5s; }
.play-ripple.r3 { animation-delay: 1s; }

@keyframes playRipple {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes playBtnPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 40px rgba(245, 158, 11, 0.4);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 60px rgba(236, 72, 153, 0.5);
    }
}

.video-duration-badge {
    position: absolute;
    bottom: 60px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.video-quality-badge {
    position: absolute;
    bottom: 60px;
    left: 20px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

/* Player Progress Bar */
.player-progress-bar {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.3);
}

.progress-track {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: visible;
}

.progress-fill {
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, #f59e0b, #ec4899);
    border-radius: 3px;
    position: relative;
    animation: progressPulse 3s ease-in-out infinite;
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

@keyframes progressPulse {
    0%, 100% { width: 35%; }
    50% { width: 40%; }
}

.progress-chapters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.chapter-marker {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
}

.progress-time {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Player Controls */
.player-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 20px;
    background: rgba(0, 0, 0, 0.3);
}

.controls-left, .controls-right {
    display: flex;
    gap: 10px;
}

.ctrl-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ctrl-btn:hover {
    background: rgba(245, 158, 11, 0.3);
    transform: scale(1.1);
}

.ctrl-btn.play-pause {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
}

/* Player Info Sidebar */
.player-info-sidebar {
    background: rgba(12, 12, 18, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    overflow-y: auto;
}

.course-info-panel h3.course-title-mock {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: white;
}

.instructor-info-mock {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.instructor-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
}

.instructor-details {
    flex: 1;
}

.instructor-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: white;
    margin-bottom: 4px;
}

.instructor-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
}

.instructor-rating i {
    color: #f59e0b;
    font-size: 11px;
}

.instructor-rating span {
    color: var(--text-secondary);
    margin-left: 4px;
}

.course-stats-mock {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.stat-item-mock {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.stat-item-mock i {
    width: 20px;
    color: #f59e0b;
}

/* Price Options */
.price-options-mock {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-option {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.price-option:hover {
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateX(5px);
}

.price-option.premium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(236, 72, 153, 0.1));
    border-color: rgba(245, 158, 11, 0.3);
}

.option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.option-header i {
    font-size: 14px;
}

.price-option.premium .option-header i { color: #f59e0b; }
.price-option.free .option-header i { color: #10b981; }

.option-header span {
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.option-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}

.price-value {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price-option.free .price-value {
    background: linear-gradient(135deg, #10b981, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price-unit {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

.option-features {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.option-features span {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.option-features i {
    color: #10b981;
    font-size: 10px;
}

/* Ad Notification */
.ad-notification {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
    padding: 12px 24px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: adNotificationBounce 3s ease-in-out infinite;
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
}

.ad-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.ad-text {
    display: flex;
    flex-direction: column;
}

.ad-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
}

.ad-amount {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.ad-progress {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.ad-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    background: white;
    animation: adProgressFill 5s linear infinite;
}

@keyframes adProgressFill {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes adNotificationBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

/* Cinema Glow */
.cinema-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.cinema-reflection {
    position: absolute;
    bottom: -60px;
    left: 10%;
    right: 10%;
    height: 60px;
    background: linear-gradient(to bottom, rgba(245, 158, 11, 0.05), transparent);
    filter: blur(10px);
    transform: scaleY(-0.3);
}

/* Floating Stats */
.floating-stats-unitube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-stat {
    position: absolute;
    background: rgba(18, 18, 26, 0.95);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: floatStat 6s ease-in-out infinite;
    backdrop-filter: blur(10px);
}

.floating-stat .stat-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.floating-stat .stat-value {
    font-size: 22px;
    font-weight: 800;
    color: white;
}

.floating-stat .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.floating-stat.fs-1 {
    top: 5%;
    left: -60px;
    animation-delay: 0s;
}

.floating-stat.fs-2 {
    top: 40%;
    right: -80px;
    animation-delay: -2s;
}

.floating-stat.fs-3 {
    bottom: 10%;
    left: -40px;
    animation-delay: -4s;
}

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

/* Revenue Streams Section */
.revenue-streams-section {
    margin-top: 100px;
    position: relative;
    z-index: 2;
}

.subsection-title {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.subsection-title i {
    color: #f59e0b;
    font-size: 28px;
}

.subsection-title span {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subsection-desc {
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.revenue-streams-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: center;
}

/* Revenue Stream Card */
.revenue-stream-card {
    background: rgba(18, 18, 26, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.revenue-stream-card:hover {
    transform: translateY(-10px);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 30px 80px rgba(245, 158, 11, 0.15);
}

.revenue-stream-card.premium-stream {
    background: linear-gradient(145deg, rgba(18, 18, 26, 0.9), rgba(245, 158, 11, 0.05));
}

.revenue-stream-card.ad-stream {
    background: linear-gradient(145deg, rgba(18, 18, 26, 0.9), rgba(16, 185, 129, 0.05));
}

/* Stream Visual */
.stream-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 30px 0;
}

.stream-icon-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stream-icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border-radius: 50%;
    animation: iconBgPulse 3s ease-in-out infinite;
}

.stream-icon-container.ad-icon-container .stream-icon-bg {
    background: linear-gradient(135deg, #10b981, #34d399);
}

@keyframes iconBgPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.stream-icon-container > i {
    position: relative;
    z-index: 2;
    font-size: 32px;
    color: white;
}

/* Coin Orbit */
.coin-orbit {
    position: absolute;
    width: 20px;
    height: 20px;
    color: #f59e0b;
    font-size: 14px;
    animation: coinOrbitAnim 3s linear infinite;
}

.coin-orbit.co-1 { animation-delay: 0s; }
.coin-orbit.co-2 { animation-delay: -1s; }
.coin-orbit.co-3 { animation-delay: -2s; }

@keyframes coinOrbitAnim {
    0% { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

/* Ad Pulse Ring */
.ad-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(16, 185, 129, 0.5);
    border-radius: 50%;
    animation: adPulseRing 2s ease-out infinite;
}

.ad-pulse-ring.apr-2 { animation-delay: 0.5s; }
.ad-pulse-ring.apr-3 { animation-delay: 1s; }

@keyframes adPulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* Flow Animation */
.stream-flow {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.flow-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ec4899);
    animation: flowMove 2s linear infinite;
}

.stream-flow.ad-flow .flow-arrow {
    background: linear-gradient(90deg, #10b981, #34d399);
}

@keyframes flowMove {
    0% { transform: translateY(-50%) translateX(-100%); }
    100% { transform: translateY(-50%) translateX(100%); }
}

.flow-particles {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

.flow-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #f59e0b;
    border-radius: 50%;
    animation: particleFlow 2s linear infinite;
}

.flow-particle.fp-1 { animation-delay: 0s; }
.flow-particle.fp-2 { animation-delay: 0.6s; }
.flow-particle.fp-3 { animation-delay: 1.2s; }

@keyframes particleFlow {
    0% { left: 0; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* View Counter */
.view-counter {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 185, 129, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #10b981;
    font-weight: 600;
}

/* Wallet Icon */
.wallet-icon {
    position: relative;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #f59e0b;
}

.wallet-icon.ad-wallet {
    color: #10b981;
}

.wallet-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #f59e0b;
    border-radius: 50%;
    animation: walletPulse 2s ease-out infinite;
}

.wallet-pulse.ad-pulse {
    border-color: #10b981;
}

@keyframes walletPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Stream Content */
.stream-content h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.stream-content h4 span {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ad-stream .stream-content h4 span {
    background: linear-gradient(135deg, #10b981, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stream-content > p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.stream-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.stream-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.stream-features li i {
    color: #10b981;
}

/* Earnings Preview */
.earnings-preview {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 20px;
}

.earnings-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.earnings-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.amount-value {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ad-preview .amount-value {
    background: linear-gradient(135deg, #10b981, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.amount-unit {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 600;
}

.earnings-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.earnings-fill {
    height: 100%;
    border-radius: 4px;
    animation: earningsFillAnim 3s ease-in-out infinite;
}

.earnings-fill.premium-fill {
    background: linear-gradient(90deg, #f59e0b, #ec4899);
}

.earnings-fill.ad-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

@keyframes earningsFillAnim {
    0%, 100% { width: 60%; }
    50% { width: 100%; }
}

/* VS Divider */
.stream-vs-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.vs-circle {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(16, 185, 129, 0.2));
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: white;
}

.vs-connector {
    width: 2px;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* Zero Gas Section */
.zero-gas-section {
    margin-top: 100px;
    position: relative;
    z-index: 2;
}

.zero-gas-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: rgba(18, 18, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 60px;
}

.gas-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.traditional-gas, .unipoly-gas {
    text-align: center;
    position: relative;
}

.gas-icon-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 0 auto 16px;
    position: relative;
}

.gas-icon-wrapper.traditional {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.gas-icon-wrapper.unipoly {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(99, 102, 241, 0.2));
    color: #10b981;
    border: 2px solid rgba(16, 185, 129, 0.4);
    animation: unipolyGlow 2s ease-in-out infinite;
}

@keyframes unipolyGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.4); }
}

/* Fire Effect */
.fire-effect {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.flame {
    position: absolute;
    width: 8px;
    background: linear-gradient(to top, #ef4444, #f59e0b);
    border-radius: 50% 50% 20% 20%;
    animation: flameFlicker 0.5s ease-in-out infinite alternate;
}

.flame.f1 { height: 15px; left: -10px; animation-delay: 0s; }
.flame.f2 { height: 20px; left: 0; animation-delay: 0.1s; }
.flame.f3 { height: 15px; left: 10px; animation-delay: 0.2s; }

@keyframes flameFlicker {
    0% { height: 15px; opacity: 0.8; }
    100% { height: 20px; opacity: 1; }
}

/* Rocket Trail */
.rocket-trail {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.trail {
    position: absolute;
    width: 4px;
    background: linear-gradient(to bottom, #10b981, transparent);
    border-radius: 2px;
    animation: rocketTrail 0.8s ease-out infinite;
}

.trail.t1 { height: 20px; left: -6px; animation-delay: 0s; }
.trail.t2 { height: 25px; left: 0; animation-delay: 0.1s; }
.trail.t3 { height: 20px; left: 6px; animation-delay: 0.2s; }

@keyframes rocketTrail {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(15px); }
}

.gas-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.gas-amount {
    font-size: 18px;
    font-weight: 700;
}

.gas-amount.red { color: #ef4444; }
.gas-amount.green { color: #10b981; }

.cross-out, .check-mark {
    position: absolute;
    top: 10px;
    right: -10px;
    font-size: 24px;
}

.cross-out { color: #ef4444; }
.check-mark { color: #10b981; animation: checkPop 0.5s ease-out; }

@keyframes checkPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.vs-arrow {
    font-size: 24px;
    color: var(--text-muted);
    animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(10px); opacity: 1; }
}

/* Gas Content */
.gas-content h3 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 16px;
}

.gas-content h3 span {
    background: linear-gradient(135deg, #10b981, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gas-content > p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.gas-content p strong {
    color: #10b981;
}

/* Gas Savings Calculator */
.gas-savings-calculator {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
    overflow: hidden;
}

.calculator-header {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #10b981;
    font-weight: 600;
}

.calculator-body {
    padding: 20px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.calc-row:last-child { border-bottom: none; }

.calc-row.highlight {
    background: rgba(16, 185, 129, 0.1);
    margin: 10px -20px -20px;
    padding: 16px 20px;
    border-radius: 0 0 16px 16px;
}

.calc-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.calc-value {
    font-size: 16px;
    font-weight: 700;
}

.calc-value.red { color: #ef4444; }
.calc-value.green { 
    color: #10b981;
    font-size: 22px;
}

/* Teacher Dashboard Preview */
.teacher-dashboard-section {
    margin-top: 100px;
    position: relative;
    z-index: 2;
}

.dashboard-preview {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.dashboard-frame {
    background: rgba(12, 12, 18, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(245, 158, 11, 0.05);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dash-nav {
    display: flex;
    gap: 8px;
}

.nav-item {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-item:hover, .nav-item.active {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.dash-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-balance {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.1);
    padding: 8px 16px;
    border-radius: 10px;
}

.profile-balance i {
    color: #f59e0b;
}

.profile-balance span {
    font-weight: 700;
    color: white;
}

.profile-balance .balance-unit {
    color: var(--text-secondary);
    font-size: 12px;
}

.profile-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border-radius: 50%;
}

.dashboard-content {
    padding: 24px;
}

/* Dashboard Stats Row */
.dash-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.dash-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.3s ease;
}

.dash-stat-card:hover {
    border-color: rgba(245, 158, 11, 0.3);
    transform: translateY(-5px);
}

.dsc-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.dsc-icon.views { background: rgba(99, 102, 241, 0.2); color: #6366f1; }
.dsc-icon.students { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.dsc-icon.earnings { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.dsc-icon.rating { background: rgba(236, 72, 153, 0.2); color: #ec4899; }

.dsc-content {
    flex: 1;
}

.dsc-value {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin-bottom: 4px;
}

.dsc-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.dsc-change {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dsc-change.positive { color: #10b981; }
.dsc-change.negative { color: #ef4444; }

/* Dashboard Main Grid */
.dash-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.earnings-chart-card, .quick-actions-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-header h4 {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-header h4 i {
    color: #f59e0b;
}

.chart-period {
    display: flex;
    gap: 4px;
}

.period-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.period-btn:hover, .period-btn.active {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
    color: #f59e0b;
}

.chart-area {
    height: 150px;
    position: relative;
}

.revenue-chart {
    width: 100%;
    height: 100%;
}

.chart-line {
    animation: chartDraw 2s ease-out forwards;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

@keyframes chartDraw {
    to { stroke-dashoffset: 0; }
}

.chart-dot {
    animation: chartDotPulse 2s ease-in-out infinite;
}

@keyframes chartDotPulse {
    0%, 100% { r: 6; opacity: 1; }
    50% { r: 8; opacity: 0.8; }
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

/* Quick Actions */
.quick-actions-card h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-actions-card h4 i {
    color: #f59e0b;
}

.action-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.qa-btn {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.qa-btn i {
    font-size: 20px;
}

.qa-btn span {
    font-size: 11px;
    color: var(--text-secondary);
}

.qa-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 158, 11, 0.4);
}

.qa-btn.upload i { color: #6366f1; }
.qa-btn.withdraw i { color: #10b981; }
.qa-btn.analytics i { color: #8b5cf6; }
.qa-btn.promo i { color: #ec4899; }

/* Recent Activity */
.recent-activity h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recent-activity h4 i {
    color: #f59e0b;
}

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

.activity-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-icon.sale { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.activity-icon.ad { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.activity-icon.withdraw { background: rgba(99, 102, 241, 0.2); color: #6366f1; }

.activity-info {
    flex: 1;
}

.activity-text {
    display: block;
    font-size: 13px;
    color: white;
    margin-bottom: 4px;
}

.activity-time {
    font-size: 11px;
    color: var(--text-muted);
}

.activity-amount {
    font-size: 14px;
    font-weight: 700;
    color: #10b981;
}

.activity-item:last-child .activity-amount {
    color: #ef4444;
}

.dashboard-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 200px;
    background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.1), transparent 70%);
    pointer-events: none;
}

/* Banking Integration Section */
.banking-integration-section {
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    background: rgba(18, 18, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    padding: 60px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.integration-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 40px;
}

.flow-step {
    text-align: center;
    flex: 0 0 auto;
}

.flow-step .step-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 10px;
    transition: all 0.3s ease;
}

.flow-step.unitube-step .step-icon { color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
.flow-step.chain-step .step-icon { color: #8b5cf6; border-color: rgba(139, 92, 246, 0.3); }
.flow-step.banking-step .step-icon { color: #0ea5e9; border-color: rgba(14, 165, 233, 0.3); }

.flow-step span {
    font-size: 12px;
    color: var(--text-secondary);
}

.flow-connector {
    flex: 0 0 60px;
    position: relative;
    height: 4px;
}

.connector-line {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.3), rgba(139, 92, 246, 0.3));
    border-radius: 2px;
    position: relative;
}

.pulse-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #f59e0b;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    animation: pulseDotMove 2s linear infinite;
}

.pulse-dot.pd-1 { animation-delay: 0s; }
.pulse-dot.pd-2 { animation-delay: 0.6s; }
.pulse-dot.pd-3 { animation-delay: 1.2s; }

@keyframes pulseDotMove {
    0% { left: 0; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

.connector-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #10b981;
    font-weight: 600;
    white-space: nowrap;
}

.banking-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.banking-option {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.banking-option:hover {
    border-color: rgba(14, 165, 233, 0.4);
    transform: translateY(-5px);
}

.banking-option i {
    font-size: 24px;
    color: #0ea5e9;
    margin-bottom: 8px;
    display: block;
}

.banking-option span {
    font-size: 11px;
    color: var(--text-secondary);
}

.integration-content h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
}

.integration-content h3 span {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.integration-content > p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.integration-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(14, 165, 233, 0.05);
    border-radius: 10px;
}

.benefit-item i {
    color: #0ea5e9;
}

.benefit-item span {
    font-size: 14px;
    color: var(--text-secondary);
}

/* UniTube Features Grid */
.unitube-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 100px;
    position: relative;
    z-index: 2;
}

.unitube-feature-card {
    background: rgba(18, 18, 26, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.unitube-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #ec4899);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.unitube-feature-card:hover::before {
    transform: scaleX(1);
}

.unitube-feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 20px 60px rgba(245, 158, 11, 0.15);
}

.feature-icon-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
}

.feature-icon-wrapper .icon-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(236, 72, 153, 0.15));
    border-radius: 50%;
}

.feature-icon-wrapper > i {
    position: relative;
    z-index: 2;
    font-size: 28px;
    color: #f59e0b;
    line-height: 70px;
}

.icon-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.icon-particles .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
    opacity: 0;
}

.unitube-feature-card:hover .icon-particles .particle {
    animation: iconParticleBurst 0.6s ease-out forwards;
}

.particle.p1 { top: 0; left: 50%; animation-delay: 0s; }
.particle.p2 { top: 50%; right: 0; animation-delay: 0.1s; }
.particle.p3 { bottom: 0; left: 50%; animation-delay: 0.2s; }

@keyframes iconParticleBurst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

.unitube-feature-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.unitube-feature-card h4 span {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.unitube-feature-card > p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.feature-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fstat {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.fstat i {
    color: #f59e0b;
}

/* Mini Chart */
.mini-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 50px;
    margin-top: 10px;
}

.mini-chart .bar {
    width: 8px;
    background: linear-gradient(to top, #f59e0b, #ec4899);
    border-radius: 4px 4px 0 0;
    animation: barGrow 1s ease-out forwards;
    transform-origin: bottom;
}

@keyframes barGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* Certificate Preview */
.cert-preview {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(236, 72, 153, 0.1));
    border: 1px dashed rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.cert-icon {
    font-size: 24px;
    color: #f59e0b;
}

.cert-text {
    font-size: 11px;
    color: var(--text-secondary);
}

.nft-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}

/* Community Preview */
.community-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.message {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 11px;
    animation: messageSlide 0.5s ease-out forwards;
    opacity: 0;
}

.message.m1 { 
    background: rgba(99, 102, 241, 0.2); 
    align-self: flex-start;
    animation-delay: 0.2s;
}
.message.m2 { 
    background: rgba(139, 92, 246, 0.2); 
    align-self: flex-end;
    animation-delay: 0.4s;
}
.message.m3 { 
    background: rgba(16, 185, 129, 0.2); 
    align-self: flex-start;
    animation-delay: 0.6s;
}

@keyframes messageSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   LIVE STREAMING & VIDEO PLATFORM SECTION
   ===================================================== */

.streaming-platform-section {
    margin-top: 100px;
    position: relative;
    z-index: 2;
}

.streaming-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 50px;
}

/* Live Stream Card */
.live-stream-card, .video-upload-card {
    background: rgba(18, 18, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.live-stream-card:hover, .video-upload-card:hover {
    transform: translateY(-10px);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 30px 80px rgba(239, 68, 68, 0.15);
}

.video-upload-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 30px 80px rgba(99, 102, 241, 0.15);
}

.stream-preview {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.stream-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.1),
        rgba(99, 102, 241, 0.15),
        rgba(139, 92, 246, 0.1)
    );
}

.stream-wave {
    position: absolute;
    width: 300%;
    height: 100px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(239, 68, 68, 0.15),
        transparent
    );
    border-radius: 50%;
    animation: streamWaveMove 8s ease-in-out infinite;
}

.stream-wave.sw-1 { top: 20%; left: -100%; animation-delay: 0s; }
.stream-wave.sw-2 { top: 50%; left: -100%; animation-delay: -2s; opacity: 0.7; }
.stream-wave.sw-3 { top: 70%; left: -100%; animation-delay: -4s; opacity: 0.5; }

@keyframes streamWaveMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(33%); }
}

/* Live Badge */
.live-badge-container {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ef4444;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    animation: liveBadgePulse 2s ease-in-out infinite;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: liveDotBlink 1s ease-in-out infinite;
}

@keyframes liveDotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes liveBadgePulse {
    0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.8); }
}

.viewer-count {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: white;
}

.viewer-count i {
    color: #ef4444;
}

/* Stream Host */
.stream-host {
    position: absolute;
    bottom: 60px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.host-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    border-radius: 50%;
    position: relative;
}

.avatar-ring {
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border: 2px solid #ef4444;
    border-radius: 50%;
    animation: avatarRingPulse 2s ease-in-out infinite;
}

@keyframes avatarRingPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.5; }
}

.host-info {
    display: flex;
    flex-direction: column;
}

.host-name {
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.stream-title {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Stream Controls */
.stream-controls-overlay {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
}

.stream-control-btn {
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.stream-control-btn:hover {
    background: rgba(239, 68, 68, 0.6);
    transform: scale(1.1);
}

/* Live Chat Preview */
.live-chat-preview {
    position: absolute;
    right: 16px;
    bottom: 60px;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-message {
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 11px;
    animation: chatMessageSlide 0.5s ease-out forwards;
    opacity: 0;
}

.chat-message.cm-1 { animation-delay: 0.5s; }
.chat-message.cm-2 { animation-delay: 1s; }
.chat-message.cm-3 { animation-delay: 1.5s; }

@keyframes chatMessageSlide {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.chat-user {
    color: #f59e0b;
    font-weight: 600;
    margin-right: 6px;
}

.chat-text {
    color: white;
}

.superchat-message {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(236, 72, 153, 0.9));
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: superchatPop 0.5s ease-out 2s forwards, superchatGlow 2s ease-in-out 2.5s infinite;
    opacity: 0;
}

@keyframes superchatPop {
    0% { opacity: 0; transform: scale(0.5); }
    70% { transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes superchatGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.8); }
}

/* Earnings Ticker */
.earnings-ticker {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(16, 185, 129, 0.9);
    padding: 10px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.earnings-ticker i {
    font-size: 16px;
}

.ticker-amount {
    font-size: 16px;
    font-weight: 800;
    animation: tickerPulse 1s ease-in-out infinite;
}

@keyframes tickerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Stream Card Content */
.stream-card-content {
    padding: 24px;
}

.stream-card-content h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stream-card-content h4 i {
    color: #ef4444;
}

.stream-card-content h4 span {
    background: linear-gradient(135deg, #ef4444, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-upload-card .stream-card-content h4 i {
    color: #6366f1;
}

.video-upload-card .stream-card-content h4 span {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stream-card-content > p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
}

.stream-features-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sfm-item {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sfm-item i {
    color: #10b981;
    font-size: 10px;
}

/* Video Upload Preview */
.upload-preview {
    padding: 20px;
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.05),
        rgba(139, 92, 246, 0.08)
    );
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.video-thumb {
    position: relative;
    height: 90px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-thumb:hover {
    transform: scale(1.05);
}

.video-thumb.vt-1 { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(236, 72, 153, 0.2)); }
.video-thumb.vt-2 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2)); }
.video-thumb.vt-3 { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)); }

.thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
    font-size: 12px;
    opacity: 0;
    transition: all 0.3s ease;
}

.video-thumb:hover .thumb-play {
    opacity: 1;
}

.thumb-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    color: white;
}

.thumb-views {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 10px;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Uploading State */
.video-thumb.uploading {
    background: rgba(99, 102, 241, 0.1);
    border: 2px dashed rgba(99, 102, 241, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-progress-ring {
    position: relative;
    width: 40px;
    height: 40px;
}

.upload-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: rgba(99, 102, 241, 0.2);
    stroke-width: 3;
}

.circle-progress {
    fill: none;
    stroke: #6366f1;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 22;
    animation: uploadProgress 3s ease-in-out infinite;
}

@keyframes uploadProgress {
    0% { stroke-dashoffset: 100; }
    50% { stroke-dashoffset: 22; }
    100% { stroke-dashoffset: 100; }
}

.upload-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: #6366f1;
}

.uploading-text {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Upload Stats */
.upload-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.upload-stat {
    text-align: center;
}

.upload-stat i {
    font-size: 18px;
    color: #6366f1;
    margin-bottom: 6px;
    display: block;
}

.upload-stat .stat-num {
    font-size: 20px;
    font-weight: 800;
    color: white;
    display: block;
}

.upload-stat .stat-text {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Streaming Features Row */
.streaming-features-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.streaming-feature {
    background: rgba(18, 18, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.streaming-feature:hover {
    transform: translateY(-5px);
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 15px 40px rgba(239, 68, 68, 0.1);
}

.sf-icon {
    position: relative;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(236, 72, 153, 0.15));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 20px;
    color: #ef4444;
}

.sf-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    animation: sfPulse 2s ease-out infinite;
    opacity: 0;
}

.streaming-feature:hover .sf-pulse {
    animation: sfPulse 2s ease-out infinite;
}

@keyframes sfPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.streaming-feature h5 {
    font-size: 14px;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
}

.streaming-feature p {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Additional Feature Card Styles */
.streaming-card .icon-background.streaming-bg {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(236, 72, 153, 0.15)) !important;
}

.streaming-card .feature-icon-wrapper > i {
    color: #ef4444 !important;
}

.streaming-card h4 span {
    background: linear-gradient(135deg, #ef4444, #ec4899) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.live-indicator-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(239, 68, 68, 0.1);
    padding: 10px 16px;
    border-radius: 10px;
    margin-top: 10px;
}

.live-dot-mini {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: liveDotBlink 1s ease-in-out infinite;
}

.live-indicator-mini span {
    font-size: 12px;
    font-weight: 600;
    color: #ef4444;
}

/* VOD Card */
.vod-card .icon-background.vod-bg {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15)) !important;
}

.vod-card .feature-icon-wrapper > i {
    color: #6366f1 !important;
}

.vod-card h4 span {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.vod-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.vod-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.vod-item i {
    color: #6366f1;
}

/* Updated Features Grid for 6 cards */
.unitube-features-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Responsive Styles for Streaming Section */
@media (max-width: 1200px) {
    .streaming-features-row {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .unitube-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .streaming-showcase {
        grid-template-columns: 1fr;
    }
    
    .streaming-features-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stream-preview {
        height: 240px;
    }
    
    .live-chat-preview {
        display: none;
    }
    
    .streaming-features-row {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .streaming-feature {
        padding: 16px;
    }
    
    .sf-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .streaming-features-row {
        grid-template-columns: 1fr;
    }
    
    .video-grid {
        grid-template-columns: 1fr;
    }
    
    .video-thumb {
        height: 120px;
    }
    
    .unitube-features-grid {
        grid-template-columns: 1fr !important;
    }
}

/* UniTube CTA */
.unitube-cta {
    margin-top: 100px;
    position: relative;
    background: linear-gradient(145deg, rgba(18, 18, 26, 0.9), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 32px;
    padding: 80px;
    text-align: center;
    overflow: hidden;
    z-index: 2;
}

.cta-bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.cta-orb.orb-1 {
    width: 300px;
    height: 300px;
    background: #f59e0b;
    top: -100px;
    left: -100px;
    animation: ctaOrbFloat 10s ease-in-out infinite;
}

.cta-orb.orb-2 {
    width: 250px;
    height: 250px;
    background: #ec4899;
    bottom: -80px;
    right: -80px;
    animation: ctaOrbFloat 12s ease-in-out infinite reverse;
}

.cta-orb.orb-3 {
    width: 200px;
    height: 200px;
    background: #8b5cf6;
    top: 50%;
    left: 50%;
    animation: ctaOrbFloat 8s ease-in-out infinite;
}

@keyframes ctaOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.1); }
}

.cta-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cta-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.3), transparent);
    animation: ctaLineScan 5s linear infinite;
}

.cta-line.l1 { top: 20%; animation-delay: 0s; }
.cta-line.l2 { top: 50%; animation-delay: -1.5s; }
.cta-line.l3 { top: 80%; animation-delay: -3s; }

@keyframes ctaLineScan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-content h3 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
}

.cta-content h3 span {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-content > p {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

.btn-unitube-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
    color: white;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.3);
}

.btn-unitube-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(245, 158, 11, 0.4);
}

.btn-unitube-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    background: transparent;
    border: 2px solid rgba(245, 158, 11, 0.4);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-unitube-secondary:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.6);
}

.cta-trust-badges {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

.trust-badge i {
    color: #f59e0b;
}

/* Responsive Styles for UniTube Section */
@media (max-width: 1200px) {
    .player-container {
        grid-template-columns: 1fr;
    }
    
    .player-info-sidebar {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding: 20px;
    }
    
    .price-options-mock {
        flex-direction: row;
    }
    
    .price-option {
        flex: 1;
    }
    
    .floating-stats-unitube {
        display: none;
    }
    
    .dash-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .revenue-streams-container {
        grid-template-columns: 1fr;
    }
    
    .stream-vs-divider {
        flex-direction: row;
        margin: 20px 0;
    }
    
    .vs-connector {
        width: 80px;
        height: 2px;
    }
    
    .zero-gas-container {
        grid-template-columns: 1fr;
        padding: 40px;
    }
    
    .banking-integration-section {
        grid-template-columns: 1fr;
        padding: 40px;
    }
    
    .unitube-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dash-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .unitube-section {
        padding: 80px 0;
    }
    
    .unitube-number {
        width: 70px;
        height: 70px;
    }
    
    .unitube-number i {
        font-size: 28px;
    }
    
    .subsection-title {
        font-size: 24px;
    }
    
    .player-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .gas-comparison {
        flex-direction: column;
        gap: 20px;
    }
    
    .vs-arrow {
        transform: rotate(90deg);
    }
    
    .banking-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .integration-benefits {
        grid-template-columns: 1fr;
    }
    
    .dash-nav {
        display: none;
    }
    
    .dash-stats-row {
        grid-template-columns: 1fr;
    }
    
    .cta-content h3 {
        font-size: 28px;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-trust-badges {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .unitube-features-grid {
        grid-template-columns: 1fr;
    }
    
    .unitube-cta {
        padding: 40px 20px;
    }
    
    .btn-unitube-primary, .btn-unitube-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .integration-flow {
        flex-direction: column;
        gap: 10px;
    }
    
    .flow-connector {
        width: 4px;
        height: 30px;
    }
    
    .connector-label {
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
    }
}

/* =====================================================
   UNIHUNT SECTION - AR Treasure Hunt Game
   ===================================================== */

.unihunt-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: linear-gradient(180deg, 
        rgba(16, 185, 129, 0.03) 0%, 
        var(--bg-primary) 30%, 
        var(--bg-primary) 70%,
        rgba(6, 182, 212, 0.03) 100%);
}

/* AR Background Effects */
.unihunt-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* Radar Scanning Effect */
.ar-radar {
    position: absolute;
    top: 15%;
    right: 10%;
    width: 300px;
    height: 300px;
    opacity: 0.3;
}

.radar-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(16, 185, 129, 0.4) 30deg, transparent 60deg);
    border-radius: 50%;
    animation: radarSweep 4s linear infinite;
}

@keyframes radarSweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.radar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
}

.radar-ring.ring-1 { width: 100%; height: 100%; }
.radar-ring.ring-2 { width: 66%; height: 66%; }
.radar-ring.ring-3 { width: 33%; height: 33%; }

.radar-ping {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: radarPing 3s ease-out infinite;
}

.radar-ping.ping-1 { top: 30%; left: 60%; animation-delay: 0s; }
.radar-ping.ping-2 { top: 55%; left: 25%; animation-delay: 1s; }
.radar-ping.ping-3 { top: 70%; left: 70%; animation-delay: 2s; }

@keyframes radarPing {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(2); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Floating AR Cubes */
.ar-floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ar-cube {
    position: absolute;
    width: 60px;
    height: 60px;
    transform-style: preserve-3d;
    animation: cubeFloat 10s ease-in-out infinite;
}

.ar-cube.cube-1 {
    top: 20%;
    left: 5%;
    animation-delay: 0s;
}

.ar-cube.cube-2 {
    bottom: 25%;
    right: 8%;
    animation-delay: -5s;
}

@keyframes cubeFloat {
    0%, 100% { transform: rotateX(0deg) rotateY(0deg) translateY(0); }
    25% { transform: rotateX(90deg) rotateY(45deg) translateY(-20px); }
    50% { transform: rotateX(180deg) rotateY(90deg) translateY(0); }
    75% { transform: rotateX(270deg) rotateY(135deg) translateY(-20px); }
}

.cube-face {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
    backdrop-filter: blur(5px);
}

.cube-face.front { transform: translateZ(30px); }
.cube-face.back { transform: translateZ(-30px) rotateY(180deg); }
.cube-face.left { transform: translateX(-30px) rotateY(-90deg); }
.cube-face.right { transform: translateX(30px) rotateY(90deg); }
.cube-face.top { transform: translateY(-30px) rotateX(90deg); }
.cube-face.bottom { transform: translateY(30px) rotateX(-90deg); }

/* Floating Location Pins */
.floating-pins {
    position: absolute;
    width: 100%;
    height: 100%;
}

.location-pin {
    position: absolute;
    font-size: 24px;
    color: #10b981;
    animation: pinFloat 5s ease-in-out infinite;
}

.location-pin.pin-1 { top: 15%; left: 20%; animation-delay: 0s; }
.location-pin.pin-2 { top: 30%; right: 25%; animation-delay: -1s; }
.location-pin.pin-3 { bottom: 40%; left: 15%; animation-delay: -2s; }
.location-pin.pin-4 { bottom: 20%; right: 15%; animation-delay: -3s; }
.location-pin.pin-5 { top: 50%; left: 8%; animation-delay: -4s; }

.pin-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    animation: pinPulse 2s ease-out infinite;
}

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

@keyframes pinPulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Treasure Coins Background */
.treasure-coins-bg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.treasure-coin {
    position: absolute;
    font-size: 20px;
    color: #f59e0b;
    animation: treasureFloat 8s ease-in-out infinite;
    opacity: 0.4;
}

.treasure-coin.tc-1 { top: 10%; left: 30%; animation-delay: 0s; }
.treasure-coin.tc-2 { top: 25%; right: 20%; animation-delay: -1s; }
.treasure-coin.tc-3 { top: 45%; left: 10%; animation-delay: -2s; }
.treasure-coin.tc-4 { bottom: 35%; right: 30%; animation-delay: -3s; }
.treasure-coin.tc-5 { bottom: 20%; left: 25%; animation-delay: -4s; }
.treasure-coin.tc-6 { top: 60%; right: 10%; animation-delay: -5s; }
.treasure-coin.tc-7 { bottom: 10%; right: 45%; animation-delay: -6s; }
.treasure-coin.tc-8 { top: 35%; left: 45%; animation-delay: -7s; }

@keyframes treasureFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(10deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-10px) rotate(-10deg); }
}

/* Blockchain Grid Lines */
.blockchain-grid-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.grid-line {
    position: absolute;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(16, 185, 129, 0.1), 
        rgba(6, 182, 212, 0.1), 
        transparent);
    height: 1px;
    width: 100%;
    animation: gridLineScan 8s linear infinite;
}

.grid-line.gl-1 { top: 10%; animation-delay: 0s; }
.grid-line.gl-2 { top: 25%; animation-delay: -1.5s; }
.grid-line.gl-3 { top: 40%; animation-delay: -3s; }
.grid-line.gl-4 { top: 55%; animation-delay: -4.5s; }
.grid-line.gl-5 { top: 70%; animation-delay: -6s; }
.grid-line.gl-6 { top: 85%; animation-delay: -7.5s; }

@keyframes gridLineScan {
    0% { transform: translateX(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* Holographic Scanlines */
.holo-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(16, 185, 129, 0.02) 2px,
        rgba(16, 185, 129, 0.02) 4px
    );
    pointer-events: none;
}

/* Section Header Styles */
.unihunt-number {
    position: relative;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.unihunt-number i {
    font-size: 36px;
    color: #10b981;
    z-index: 2;
}

.hunt-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 50%;
    animation: huntPulse 2s ease-out infinite;
}

.hunt-pulse-ring.delay-1 { animation-delay: 0.5s; }
.hunt-pulse-ring.delay-2 { animation-delay: 1s; }

@keyframes huntPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

.hunt-target-lines {
    position: absolute;
    width: 100%;
    height: 100%;
}

.target-line {
    position: absolute;
    background: #10b981;
}

.target-line.tl-1 { top: 50%; left: -10px; width: 20px; height: 2px; transform: translateY(-50%); }
.target-line.tl-2 { top: 50%; right: -10px; width: 20px; height: 2px; transform: translateY(-50%); }
.target-line.tl-3 { left: 50%; top: -10px; width: 2px; height: 20px; transform: translateX(-50%); }
.target-line.tl-4 { left: 50%; bottom: -10px; width: 2px; height: 20px; transform: translateX(-50%); }

.unihunt-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.title-ar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    animation: arBadgePulse 2s ease-in-out infinite;
}

@keyframes arBadgePulse {
    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.6); }
}

.highlight-hunt {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.unihunt-badge {
    background: linear-gradient(135deg, #10b981, #06b6d4) !important;
}

.unihunt-subtitle {
    max-width: 700px;
    margin: 0 auto;
}

.gradient-text-hunt {
    background: linear-gradient(135deg, #10b981, #06b6d4, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Hero AR Phone Display */
.unihunt-hero-display {
    margin: 60px 0;
    perspective: 1500px;
}

.ar-phone-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

.ar-phone-device {
    position: relative;
    width: 320px;
    height: 650px;
    background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
    border-radius: 45px;
    padding: 12px;
    box-shadow: 
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.1),
        inset 0 0 20px rgba(16, 185, 129, 0.1);
    transform: rotateY(-5deg) rotateX(5deg);
    animation: phoneFloat 6s ease-in-out infinite;
}

@keyframes phoneFloat {
    0%, 100% { transform: rotateY(-5deg) rotateX(5deg) translateY(0); }
    50% { transform: rotateY(-5deg) rotateX(5deg) translateY(-15px); }
}

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

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a3a2e 0%, #0a1a15 100%);
    border-radius: 35px;
    overflow: hidden;
    position: relative;
}

.phone-home-bar {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

/* AR Camera View */
.ar-camera-view {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.camera-overlay-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.grid-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(16, 185, 129, 0.6);
}

.grid-corner.gc-tl { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.grid-corner.gc-tr { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.grid-corner.gc-bl { bottom: 100px; left: 20px; border-right: none; border-top: none; }
.grid-corner.gc-br { bottom: 100px; right: 20px; border-left: none; border-top: none; }

/* AR Environment */
.ar-environment {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    perspective: 500px;
}

.ar-floor-grid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, rgba(16, 185, 129, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(16, 185, 129, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    transform: rotateX(70deg);
    transform-origin: bottom center;
    opacity: 0.5;
}

.ar-building {
    position: absolute;
    bottom: 40%;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.ar-building.building-1 { left: 10%; width: 60px; height: 100px; }
.ar-building.building-2 { left: 40%; width: 80px; height: 140px; }
.ar-building.building-3 { right: 15%; width: 50px; height: 80px; }

/* AR Treasure Target */
.ar-treasure-target {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.treasure-3d-coin {
    position: relative;
    width: 80px;
    height: 80px;
    transform-style: preserve-3d;
    animation: coinSpin 4s ease-in-out infinite;
}

@keyframes coinSpin {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
}

.coin-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coin-face.coin-front {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.3),
        0 0 40px rgba(245, 158, 11, 0.5);
}

.coin-face.coin-back {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    transform: rotateY(180deg);
}

.coin-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.coin-inner i {
    font-size: 28px;
}

.coin-label {
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

.coin-shine {
    position: absolute;
    top: 10%;
    left: 20%;
    width: 30%;
    height: 30%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent);
    border-radius: 50%;
}

.coin-edge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg, #d97706, #f59e0b, #d97706);
    border-radius: 4px;
}

.treasure-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent 70%);
    animation: treasureGlow 2s ease-in-out infinite;
}

@keyframes treasureGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.treasure-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
}

.t-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
    animation: particleOrbit 3s linear infinite;
}

.t-particle.tp-1 { animation-delay: 0s; }
.t-particle.tp-2 { animation-delay: -0.5s; }
.t-particle.tp-3 { animation-delay: -1s; }
.t-particle.tp-4 { animation-delay: -1.5s; }
.t-particle.tp-5 { animation-delay: -2s; }
.t-particle.tp-6 { animation-delay: -2.5s; }

@keyframes particleOrbit {
    0% { transform: rotate(0deg) translateX(50px) rotate(0deg); opacity: 1; }
    50% { opacity: 0.5; }
    100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); opacity: 1; }
}

.ar-distance-indicator {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 20px;
    color: #10b981;
    font-size: 14px;
    font-weight: 600;
}

.distance-arrow {
    animation: arrowBounce 1s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* AR Scan Effect */
.ar-scan-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.8), transparent);
    animation: scanLineMove 3s linear infinite;
}

@keyframes scanLineMove {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* AR HUD */
.ar-hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
}

.hud-top {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    color: #10b981;
    font-size: 12px;
    font-weight: 600;
}

.hud-item.coins-found {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.hud-bottom {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
}

.hud-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border: none;
    border-radius: 30px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: grabBtnPulse 2s ease-in-out infinite;
}

@keyframes grabBtnPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.6); }
}

.btn-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: btnRippleAnim 2s ease-out infinite;
}

@keyframes btnRippleAnim {
    0% { width: 0; height: 0; opacity: 1; }
    100% { width: 200px; height: 200px; opacity: 0; }
}

/* AR Detection Brackets */
.ar-detection-brackets {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    z-index: 8;
}

.bracket {
    position: absolute;
    width: 25px;
    height: 25px;
    border: 3px solid #10b981;
    animation: bracketPulse 1.5s ease-in-out infinite;
}

.bracket.br-1 { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket.br-2 { top: 0; right: 0; border-left: none; border-bottom: none; }
.bracket.br-3 { bottom: 0; left: 0; border-right: none; border-top: none; }
.bracket.br-4 { bottom: 0; right: 0; border-left: none; border-top: none; }

@keyframes bracketPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* AR Floating Stats */
.ar-floating-stats {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.ar-stat {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(18, 18, 26, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    animation: statFloat 4s ease-in-out infinite;
}

.ar-stat.stat-1 {
    top: 15%;
    left: -100px;
    animation-delay: 0s;
}

.ar-stat.stat-2 {
    top: 45%;
    right: -120px;
    animation-delay: -1.5s;
}

.ar-stat.stat-3 {
    bottom: 20%;
    left: -80px;
    animation-delay: -3s;
}

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

.stat-icon-wrap {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    font-size: 18px;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-info .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: white;
}

.stat-info .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* AR Detection Beam */
.ar-detection-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, transparent 0deg, rgba(16, 185, 129, 0.1) 30deg, transparent 60deg);
    border-radius: 50%;
    animation: beamRotate 10s linear infinite;
    pointer-events: none;
}

@keyframes beamRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Map Section */
.unihunt-map-section {
    margin: 80px 0;
}

.map-display-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    margin-top: 40px;
}

.map-frame {
    position: relative;
    height: 500px;
    background: linear-gradient(135deg, #0a1a15 0%, #0f2520 100%);
    border-radius: 24px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.map-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.map-roads {
    position: absolute;
    width: 100%;
    height: 100%;
}

.road {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
}

.road.road-h1 { top: 30%; left: 0; width: 100%; height: 8px; }
.road.road-h2 { top: 55%; left: 0; width: 100%; height: 8px; }
.road.road-h3 { top: 80%; left: 0; width: 100%; height: 8px; }
.road.road-v1 { left: 25%; top: 0; width: 8px; height: 100%; }
.road.road-v2 { left: 50%; top: 0; width: 8px; height: 100%; }
.road.road-v3 { left: 75%; top: 0; width: 8px; height: 100%; }

/* User Location Marker */
.user-location-marker {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.user-dot {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

.user-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    animation: userPulse 2s ease-out infinite;
}

@keyframes userPulse {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.user-direction-cone {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 40px solid rgba(99, 102, 241, 0.3);
}

/* Store Markers */
.store-marker {
    position: absolute;
    z-index: 5;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.store-marker:hover {
    transform: scale(1.1);
}

.marker-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
}

.marker-icon i {
    transform: rotate(45deg);
    color: white;
    font-size: 18px;
}

.marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 50%;
    animation: markerPulse 2s ease-out infinite;
}

@keyframes markerPulse {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.marker-treasure {
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 12px;
    color: white;
    font-size: 10px;
    font-weight: 700;
    animation: treasureBounce 1s ease-in-out infinite;
}

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

.marker-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: white;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.store-marker:hover .marker-label {
    opacity: 1;
}

/* Route SVG */
.route-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.route-path {
    fill: none;
    stroke: rgba(16, 185, 129, 0.5);
    stroke-width: 0.5;
    stroke-dasharray: 2 2;
}

/* Map Controls */
.map-controls {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-ctrl-btn {
    width: 40px;
    height: 40px;
    background: rgba(18, 18, 26, 0.9);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    color: #10b981;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.map-ctrl-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}

/* Map Legend */
.map-legend {
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: flex;
    gap: 20px;
    padding: 12px 20px;
    background: rgba(18, 18, 26, 0.9);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.user {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.legend-dot.treasure {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.legend-dot.partner {
    background: linear-gradient(135deg, #10b981, #06b6d4);
}

/* ETA Panel */
.eta-panel {
    background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(26, 26, 40, 0.95));
    border-radius: 24px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.eta-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #10b981;
}

.eta-header i {
    font-size: 20px;
}

.eta-destination {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 16px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.dest-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.dest-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dest-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.dest-address {
    font-size: 13px;
    color: var(--text-secondary);
}

.eta-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.eta-stat {
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.eta-stat i {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
}

.eta-stat.reward i {
    color: #f59e0b;
}

.eta-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.eta-stat.reward .eta-value {
    color: #f59e0b;
}

.eta-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.start-hunt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.start-hunt-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.4);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* How It Works Timeline */
.unihunt-how-it-works {
    margin: 100px 0;
}

.hiw-timeline {
    position: relative;
    margin-top: 50px;
}

.hiw-connector {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 2px;
}

.connector-progress {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #10b981, #06b6d4);
    border-radius: 2px;
    transition: height 0.3s ease;
}

.hiw-step {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    position: relative;
}

.hiw-step:nth-child(odd) {
    flex-direction: row-reverse;
    text-align: right;
}

.hiw-step:nth-child(odd) .step-content {
    align-items: flex-end;
}

.step-number {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.step-number span {
    font-size: 14px;
    font-weight: 800;
    color: #10b981;
}

.step-icon {
    font-size: 28px;
    color: #10b981;
}

.step-content {
    flex: 1;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.step-content h4 {
    font-size: 24px;
    font-weight: 700;
}

.step-content h4 span {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-content p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.step-visual {
    width: 200px;
    height: 120px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mini Map Animation */
.mini-map {
    position: relative;
    width: 150px;
    height: 100px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 10px;
}

.mini-pin {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: miniPinBlink 1.5s ease-in-out infinite;
}

.mini-pin.mp-1 { top: 20%; left: 30%; animation-delay: 0s; }
.mini-pin.mp-2 { top: 50%; left: 70%; animation-delay: 0.5s; }
.mini-pin.mp-3 { top: 70%; left: 40%; animation-delay: 1s; }

.mini-user {
    position: absolute;
    bottom: 20%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #6366f1;
    border-radius: 50%;
    border: 2px solid white;
    animation: miniUserPulse 2s ease-in-out infinite;
}

@keyframes miniPinBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

@keyframes miniUserPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
}

/* Walking Animation */
.walking-animation {
    display: flex;
    align-items: center;
    gap: 10px;
}

.walk-person {
    font-size: 24px;
    color: #6366f1;
    animation: walkBounce 0.5s ease-in-out infinite;
}

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

.walk-path {
    display: flex;
    gap: 8px;
}

.path-dot {
    width: 6px;
    height: 6px;
    background: rgba(16, 185, 129, 0.5);
    border-radius: 50%;
    animation: pathDotFade 1s ease-in-out infinite;
}

.path-dot.pd-1 { animation-delay: 0s; }
.path-dot.pd-2 { animation-delay: 0.2s; }
.path-dot.pd-3 { animation-delay: 0.4s; }

@keyframes pathDotFade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.walk-dest {
    font-size: 24px;
    color: #10b981;
}

/* Camera Frame Animation */
.camera-frame {
    position: relative;
    width: 100px;
    height: 80px;
}

.frame-corners span {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #10b981;
}

.fc.fc-1 { top: 0; left: 0; border-right: none; border-bottom: none; }
.fc.fc-2 { top: 0; right: 0; border-left: none; border-bottom: none; }
.fc.fc-3 { bottom: 0; left: 0; border-right: none; border-top: none; }
.fc.fc-4 { bottom: 0; right: 0; border-left: none; border-top: none; }

.ar-coin-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: #f59e0b;
    animation: coinPreviewFloat 2s ease-in-out infinite;
}

@keyframes coinPreviewFloat {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}

/* Grab Animation */
.grab-animation {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hand-icon {
    font-size: 28px;
    color: #fbbf24;
    animation: handGrab 1.5s ease-in-out infinite;
}

@keyframes handGrab {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(20px) rotate(-10deg); }
}

.coin-grab {
    position: relative;
    font-size: 24px;
    color: #f59e0b;
}

.grab-sparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sparkle {
    position: absolute;
    font-size: 12px;
    color: #f59e0b;
    animation: sparkleFloat 1s ease-out infinite;
}

.sparkle.s-1 { top: -20px; left: -10px; animation-delay: 0s; }
.sparkle.s-2 { top: -15px; right: -15px; animation-delay: 0.2s; }
.sparkle.s-3 { bottom: -15px; left: -15px; animation-delay: 0.4s; }
.sparkle.s-4 { bottom: -20px; right: -10px; animation-delay: 0.6s; }

@keyframes sparkleFloat {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0) translateY(-10px); }
}

/* Bank Transfer Animation */
.bank-transfer-anim {
    display: flex;
    align-items: center;
    gap: 15px;
}

.wallet-from, .bank-to {
    font-size: 28px;
    color: #10b981;
}

.transfer-arrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f59e0b;
}

.arrow-coins {
    display: flex;
    gap: 3px;
}

.arrow-coins .ac {
    font-size: 10px;
    animation: coinTransfer 1.5s ease-in-out infinite;
}

.ac.ac-1 { animation-delay: 0s; }
.ac.ac-2 { animation-delay: 0.2s; }
.ac.ac-3 { animation-delay: 0.4s; }

@keyframes coinTransfer {
    0%, 100% { transform: translateX(-10px); opacity: 0; }
    50% { transform: translateX(10px); opacity: 1; }
}

/* Business Model Section */
.unihunt-business-model {
    margin: 100px 0;
}

.business-flow-container {
    margin-top: 50px;
}

.business-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: stretch;
}

.flow-column {
    background: linear-gradient(135deg, rgba(18, 18, 26, 0.9), rgba(26, 26, 40, 0.9));
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.flow-column.business-col {
    border-color: rgba(16, 185, 129, 0.3);
}

.flow-column.user-col {
    border-color: rgba(99, 102, 241, 0.3);
}

.flow-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.flow-header i {
    font-size: 28px;
}

.business-col .flow-header i {
    color: #10b981;
}

.user-col .flow-header i {
    color: #6366f1;
}

.flow-header h4 {
    font-size: 20px;
    font-weight: 700;
}

.flow-benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(5px);
}

.benefit-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.business-col .benefit-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    color: #10b981;
}

.user-col .benefit-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    color: #6366f1;
}

.benefit-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bt-title {
    font-weight: 600;
    color: white;
}

.bt-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.flow-investment, .flow-earning {
    padding: 20px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 16px;
    text-align: center;
}

.user-col .flow-earning {
    background: rgba(99, 102, 241, 0.1);
}

.inv-label, .earn-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.inv-amount, .earn-amount {
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
}

.user-col .earn-amount {
    color: #6366f1;
}

.flow-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.center-circle {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px rgba(16, 185, 129, 0.4);
    animation: centerPulse 3s ease-in-out infinite;
}

@keyframes centerPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 80px rgba(16, 185, 129, 0.5); }
}

.center-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-weight: 800;
    font-size: 16px;
}

.flow-arrows {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.arrow-left, .arrow-right {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
}

.arrow-left i, .arrow-right i {
    color: #10b981;
}

/* Example Flow Section */
.unihunt-example-flow {
    margin: 100px 0;
    padding: 60px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(6, 182, 212, 0.05));
    border-radius: 32px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.example-journey {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.journey-step {
    flex: 1;
    min-width: 150px;
    max-width: 180px;
    text-align: center;
}

.journey-number {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    margin: 0 auto 15px;
}

.journey-visual {
    width: 100%;
    height: 100px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.starbucks-logo-mock {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #00704A, #1E3932);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.treasure-badge {
    position: absolute;
    bottom: 10px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: white;
}

.hunter-walking {
    position: relative;
    font-size: 32px;
    color: #6366f1;
    animation: hunterWalk 1s ease-in-out infinite;
}

@keyframes hunterWalk {
    0%, 100% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
}

.walk-trail {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.walk-trail .wt {
    width: 4px;
    height: 4px;
    background: rgba(99, 102, 241, 0.5);
    border-radius: 50%;
    animation: trailFade 1s ease-in-out infinite;
}

.wt.wt-1 { animation-delay: 0s; }
.wt.wt-2 { animation-delay: 0.2s; }
.wt.wt-3 { animation-delay: 0.4s; }

@keyframes trailFade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.ar-capture-visual {
    display: flex;
    align-items: center;
    gap: 10px;
}

.capture-phone {
    width: 40px;
    height: 60px;
    background: #1a1a2e;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.capture-screen {
    color: #f59e0b;
    font-size: 18px;
    animation: captureGlow 1.5s ease-in-out infinite;
}

@keyframes captureGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.capture-hand {
    font-size: 24px;
    color: #fbbf24;
    animation: captureGrab 1.5s ease-in-out infinite;
}

@keyframes captureGrab {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-15px); }
}

.digital-bank-visual {
    perspective: 500px;
}

.bank-card {
    width: 100px;
    height: 60px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 8px;
    padding: 8px;
    position: relative;
    transform: rotateY(-10deg);
    animation: cardFloat 3s ease-in-out infinite;
}

@keyframes cardFloat {
    0%, 100% { transform: rotateY(-10deg) translateY(0); }
    50% { transform: rotateY(-10deg) translateY(-5px); }
}

.card-chip {
    width: 20px;
    height: 15px;
    background: linear-gradient(135deg, #d4af37, #f5d742);
    border-radius: 3px;
}

.card-brand {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

.card-balance {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 700;
    color: #10b981;
}

.purchase-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.coffee-cup {
    font-size: 32px;
    color: #00704A;
}

.payment-success {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
}

.payment-success i {
    color: #10b981;
}

.journey-text h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.journey-text p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.journey-connector {
    display: flex;
    align-items: center;
    padding-top: 60px;
}

.conn-line {
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.6));
}

.conn-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: connDotPulse 1.5s ease-in-out infinite;
}

@keyframes connDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.example-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 50px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.result-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ri-business .result-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    color: #10b981;
}

.ri-user .result-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    color: #6366f1;
}

.result-text {
    display: flex;
    flex-direction: column;
}

.rt-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.rt-value {
    font-size: 16px;
    font-weight: 700;
}

.result-divider {
    width: 2px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

/* Blockchain Security Section */
.unihunt-blockchain-security {
    margin: 100px 0;
}

.blockchain-visual {
    margin-top: 50px;
}

.blockchain-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.chain-block {
    width: 280px;
    background: linear-gradient(135deg, rgba(18, 18, 26, 0.95), rgba(26, 26, 40, 0.95));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.chain-block:hover {
    transform: translateY(-5px);
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);
}

.chain-block.block-pending {
    border-color: rgba(245, 158, 11, 0.3);
}

.block-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(16, 185, 129, 0.1);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.block-pending .block-header {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.block-header i {
    color: #10b981;
}

.block-pending .block-header i {
    color: #f59e0b;
    animation: blockSpin 2s linear infinite;
}

@keyframes blockSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.block-header span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.block-data {
    padding: 20px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.data-row:last-child {
    border-bottom: none;
}

.dr-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.dr-value {
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.dr-value.private-key {
    font-family: monospace;
    color: #6366f1;
}

.dr-value.status-confirmed {
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 5px;
}

.block-hash {
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.2);
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.pending-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.pending-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(245, 158, 11, 0.2);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: pendingSpin 1s linear infinite;
}

@keyframes pendingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.chain-connector {
    display: flex;
    align-items: center;
}

.connector-dots {
    display: flex;
    gap: 8px;
}

.connector-dots .cd {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: connectorDotPulse 1.5s ease-in-out infinite;
}

.cd.cd-1 { animation-delay: 0s; }
.cd.cd-2 { animation-delay: 0.3s; }
.cd.cd-3 { animation-delay: 0.6s; }

@keyframes connectorDotPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

.security-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.security-feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.security-feature:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(16, 185, 129, 0.3);
}

.sf-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    font-size: 22px;
    flex-shrink: 0;
}

.sf-content h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.sf-content p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Feature Cards Grid */
.unihunt-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 80px 0;
}

.unihunt-feature-card {
    background: linear-gradient(135deg, rgba(18, 18, 26, 0.9), rgba(26, 26, 40, 0.9));
    border-radius: 24px;
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.unihunt-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.unihunt-feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.unihunt-feature-card:hover::before {
    opacity: 1;
}

.unihunt-feature-card .feature-icon-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 25px;
}

.unihunt-feature-card .icon-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
    border-radius: 20px;
    transition: all 0.4s ease;
}

.unihunt-feature-card:hover .icon-background {
    transform: rotate(10deg) scale(1.1);
}

.unihunt-feature-card .feature-icon-wrapper > i {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 28px;
    color: #10b981;
}

.unihunt-feature-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.unihunt-feature-card h4 span {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.unihunt-feature-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 20px;
}

.card-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.cs-item i {
    color: #10b981;
    width: 16px;
}

/* Icon Animations */
.icon-particles .ip {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #10b981;
    border-radius: 50%;
    animation: iconParticle 2s ease-in-out infinite;
}

.ip.ip-1 { top: 10px; left: 10px; animation-delay: 0s; }
.ip.ip-2 { top: 10px; right: 10px; animation-delay: 0.5s; }
.ip.ip-3 { bottom: 10px; left: 50%; animation-delay: 1s; }

@keyframes iconParticle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

.globe-orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: orbitSpin 8s linear infinite;
}

@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.orbit-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #06b6d4;
    border-radius: 50%;
}

.orbit-dot.od-1 { top: 0; left: 50%; transform: translateX(-50%); }
.orbit-dot.od-2 { bottom: 0; left: 50%; transform: translateX(-50%); }

.bolt-effect .bolt-line {
    position: absolute;
    width: 2px;
    height: 20px;
    background: #f59e0b;
    animation: boltFlash 1s ease-in-out infinite;
}

.bolt-line.bl-1 { top: 5px; right: 15px; transform: rotate(30deg); animation-delay: 0s; }
.bolt-line.bl-2 { bottom: 10px; left: 15px; transform: rotate(-30deg); animation-delay: 0.5s; }

@keyframes boltFlash {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.user-dots .ud {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #6366f1;
    border-radius: 50%;
    animation: userDotPop 1.5s ease-in-out infinite;
}

.ud.ud-1 { top: 8px; left: 8px; animation-delay: 0s; }
.ud.ud-2 { top: 8px; right: 8px; animation-delay: 0.3s; }
.ud.ud-3 { bottom: 8px; left: 50%; transform: translateX(-50%); animation-delay: 0.6s; }

@keyframes userDotPop {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

.pulse-wave .pw {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    border: 2px solid rgba(239, 68, 68, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulseWaveAnim 2s ease-out infinite;
}

.pw.pw-1 { animation-delay: 0s; }
.pw.pw-2 { animation-delay: 1s; }

@keyframes pulseWaveAnim {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.crown-sparkle .cs {
    position: absolute;
    font-size: 10px;
    color: #f59e0b;
    animation: crownSparkle 1s ease-in-out infinite;
}

.cs.cs-1 { top: 5px; right: 10px; animation-delay: 0s; }
.cs.cs-2 { top: 15px; left: 5px; animation-delay: 0.5s; }

@keyframes crownSparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* CTA Section */
.unihunt-cta {
    position: relative;
    padding: 80px 60px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
    border-radius: 32px;
    text-align: center;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.cta-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.unihunt-cta .cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.unihunt-cta .cta-orb.orb-1 {
    width: 300px;
    height: 300px;
    background: rgba(16, 185, 129, 0.3);
    top: -100px;
    left: -100px;
    animation: ctaOrbFloat 8s ease-in-out infinite;
}

.unihunt-cta .cta-orb.orb-2 {
    width: 250px;
    height: 250px;
    background: rgba(6, 182, 212, 0.3);
    bottom: -80px;
    right: -80px;
    animation: ctaOrbFloat 10s ease-in-out infinite reverse;
}

.cta-coin-rain {
    position: absolute;
    width: 100%;
    height: 100%;
}

.rain-coin {
    position: absolute;
    font-size: 20px;
    color: #f59e0b;
    opacity: 0.3;
    animation: coinRainFall 5s linear infinite;
}

.rain-coin.rc-1 { left: 10%; animation-delay: 0s; }
.rain-coin.rc-2 { left: 30%; animation-delay: 1s; }
.rain-coin.rc-3 { left: 50%; animation-delay: 2s; }
.rain-coin.rc-4 { left: 70%; animation-delay: 3s; }
.rain-coin.rc-5 { left: 90%; animation-delay: 4s; }

@keyframes coinRainFall {
    0% { top: -20px; opacity: 0; transform: rotate(0deg); }
    10% { opacity: 0.3; }
    90% { opacity: 0.3; }
    100% { top: 100%; opacity: 0; transform: rotate(360deg); }
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-icon {
    position: relative;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 36px;
    color: white;
}

.cta-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 50%;
    animation: ctaPulse 2s ease-out infinite;
}

.cta-pulse.cp-2 {
    animation-delay: 1s;
}

@keyframes ctaPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.unihunt-cta h3 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
}

.unihunt-cta h3 span {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.unihunt-cta > .cta-content > p {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
}

.unihunt-cta .cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

.unihunt-cta .cta-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.unihunt-cta .cta-btn.primary {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    color: white;
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
}

.unihunt-cta .cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(16, 185, 129, 0.4);
}

.unihunt-cta .cta-btn.secondary {
    background: transparent;
    border: 2px solid rgba(16, 185, 129, 0.4);
    color: white;
}

.unihunt-cta .cta-btn.secondary:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.6);
}

.unihunt-cta .cta-btn i {
    font-size: 24px;
}

.unihunt-cta .cta-btn span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.unihunt-cta .cta-btn span small {
    font-size: 10px;
    opacity: 0.7;
}

.cta-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
}

.cta-stat {
    text-align: center;
}

.cta-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
}

.cta-stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* UniHunt Responsive Styles */
@media (max-width: 1200px) {
    .map-display-container {
        grid-template-columns: 1fr;
    }
    
    .eta-panel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .eta-header, .start-hunt-btn {
        grid-column: span 2;
    }
    
    .ar-floating-stats {
        display: none;
    }
    
    .business-flow {
        grid-template-columns: 1fr;
    }
    
    .flow-center {
        flex-direction: row;
        padding: 30px 0;
    }
}

@media (max-width: 992px) {
    .unihunt-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hiw-step {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center;
    }
    
    .hiw-step .step-content {
        align-items: center !important;
    }
    
    .hiw-connector {
        display: none;
    }
    
    .security-features {
        grid-template-columns: 1fr;
    }
    
    .blockchain-chain {
        flex-direction: column;
    }
    
    .chain-connector {
        transform: rotate(90deg);
    }
    
    .example-journey {
        flex-direction: column;
        align-items: center;
    }
    
    .journey-connector {
        transform: rotate(90deg);
        padding: 20px 0;
    }
}

@media (max-width: 768px) {
    .unihunt-section {
        padding: 80px 0;
    }
    
    .unihunt-number {
        width: 70px;
        height: 70px;
    }
    
    .unihunt-number i {
        font-size: 28px;
    }
    
    .ar-phone-device {
        width: 260px;
        height: 530px;
        transform: none;
    }
    
    .map-frame {
        height: 400px;
    }
    
    .eta-panel {
        grid-template-columns: 1fr;
    }
    
    .eta-header, .start-hunt-btn {
        grid-column: span 1;
    }
    
    .unihunt-cta {
        padding: 50px 30px;
    }
    
    .unihunt-cta h3 {
        font-size: 28px;
    }
    
    .unihunt-cta .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .example-result {
        flex-direction: column;
        gap: 20px;
    }
    
    .result-divider {
        width: 80px;
        height: 2px;
    }
}

@media (max-width: 480px) {
    .unihunt-features-grid {
        grid-template-columns: 1fr;
    }
    
    .step-visual {
        width: 100%;
        max-width: 200px;
    }
    
    .ar-radar {
        display: none;
    }
    
    .floating-pins, .treasure-coins-bg {
        opacity: 0.5;
    }
}

/* ========== Business Payment Gateway Section ========== */
.business-gateway-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(99, 102, 241, 0.03) 50%, var(--bg-primary) 100%);
}

/* Background Elements */
.biz-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.biz-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
}

.biz-orb-1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    top: -200px;
    right: -200px;
    animation: bizOrbFloat1 20s ease-in-out infinite;
}

.biz-orb-2 {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    bottom: -150px;
    left: -150px;
    animation: bizOrbFloat2 25s ease-in-out infinite;
}

.biz-orb-3 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bizOrbFloat3 18s ease-in-out infinite;
}

@keyframes bizOrbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, 50px) scale(1.1); }
}

@keyframes bizOrbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, -50px) scale(0.9); }
}

@keyframes bizOrbFloat3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.1; }
}

.biz-floating-grid {
    position: absolute;
    width: 100%;
    height: 100%;
}

.grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    height: 1px;
    width: 100%;
    animation: gridLineMove 10s linear infinite;
}

.gl-1 { top: 20%; animation-delay: 0s; }
.gl-2 { top: 40%; animation-delay: 2.5s; }
.gl-3 { top: 60%; animation-delay: 5s; }
.gl-4 { top: 80%; animation-delay: 7.5s; }

@keyframes gridLineMove {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

.biz-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.biz-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.6;
}

.bp-1 { left: 10%; top: 20%; animation: bizParticle 8s ease-in-out infinite; }
.bp-2 { left: 20%; top: 60%; animation: bizParticle 10s ease-in-out 1s infinite; }
.bp-3 { left: 30%; top: 40%; animation: bizParticle 12s ease-in-out 2s infinite; }
.bp-4 { left: 50%; top: 80%; animation: bizParticle 9s ease-in-out 0.5s infinite; }
.bp-5 { left: 60%; top: 30%; animation: bizParticle 11s ease-in-out 1.5s infinite; }
.bp-6 { left: 70%; top: 70%; animation: bizParticle 8s ease-in-out 2.5s infinite; }
.bp-7 { left: 80%; top: 50%; animation: bizParticle 10s ease-in-out 3s infinite; }
.bp-8 { left: 90%; top: 25%; animation: bizParticle 9s ease-in-out 0s infinite; }
.bp-9 { left: 15%; top: 85%; animation: bizParticle 12s ease-in-out 1s infinite; }
.bp-10 { left: 85%; top: 15%; animation: bizParticle 11s ease-in-out 2s infinite; }

@keyframes bizParticle {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-30px) scale(1.5); opacity: 1; }
}

/* Section Header Styles */
.biz-number {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.biz-number i {
    font-size: 32px;
    color: white;
}

.biz-title span {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.biz-subtitle {
    max-width: 700px;
    margin: 0 auto;
}

/* Hero Banner */
.biz-hero-banner {
    position: relative;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border-radius: 24px;
    padding: 50px;
    margin-bottom: 60px;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.biz-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.banner-wave {
    position: absolute;
    width: 200%;
    height: 200px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    animation: bannerWaveMove 15s linear infinite;
}

.wave-1 { top: 0; animation-delay: 0s; }
.wave-2 { top: 33%; animation-delay: 5s; }
.wave-3 { top: 66%; animation-delay: 10s; }

@keyframes bannerWaveMove {
    0% { transform: translateX(-50%) rotate(-5deg); }
    100% { transform: translateX(0%) rotate(-5deg); }
}

.biz-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.banner-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
}

.banner-icon-rings {
    position: absolute;
    width: 100%;
    height: 100%;
}

.b-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: bRingPulse 3s ease-in-out infinite;
}

.b-ring-1 { width: 80px; height: 80px; animation-delay: 0s; }
.b-ring-2 { width: 100px; height: 100px; animation-delay: 0.5s; }
.b-ring-3 { width: 120px; height: 120px; animation-delay: 1s; }

@keyframes bRingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }
}

.banner-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
}

.banner-icon i {
    font-size: 32px;
    color: white;
}

.banner-text {
    flex: 1;
    min-width: 250px;
}

.banner-text h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.banner-text h3 span {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.banner-text p {
    color: var(--text-secondary);
    font-size: 16px;
}

.banner-stats {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.banner-stat {
    text-align: center;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bs-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.bs-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Section Dividers */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.divider-line {
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
}

.divider-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.divider-icon i {
    font-size: 20px;
    color: var(--primary);
}

.biz-section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.biz-section-title span {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-icon i {
    font-size: 20px;
    color: white;
}

.biz-section-desc {
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto 50px;
}

/* Gateway Cards Grid */
.biz-gateway-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.biz-gateway-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.biz-gateway-card:hover {
    transform: translateY(-10px);
}

.gateway-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gc-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
}

.gc-gradient-online {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(99, 102, 241, 0.05));
}

.gc-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
    background-size: 30px 30px;
}

.gc-shine {
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    transition: all 0.6s ease;
}

.biz-gateway-card:hover .gc-shine {
    transform: translateX(100%) translateY(100%);
}

.gateway-card-content {
    position: relative;
    z-index: 1;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    backdrop-filter: blur(10px);
}

.gateway-visual {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    position: relative;
    min-height: 280px;
}

/* POS Terminal 3D */
.pos-terminal-3d {
    position: relative;
    perspective: 1000px;
}

.pos-device {
    position: relative;
    width: 180px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    transform: rotateY(-5deg) rotateX(5deg);
    transition: transform 0.5s ease;
}

.biz-gateway-card:hover .pos-device {
    transform: rotateY(0deg) rotateX(0deg);
}

.pos-screen {
    background: linear-gradient(180deg, #0d1b2a 0%, #1b263b 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.pos-screen-content {
    text-align: center;
}

.pos-amount {
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 10px;
}

.pos-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #10b981;
    font-size: 12px;
}

.pos-status i {
    animation: checkPulse 2s ease-in-out infinite;
}

@keyframes checkPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.pos-screen-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.1), transparent);
    pointer-events: none;
}

.pos-body {
    padding: 10px;
}

.pos-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.pos-key {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
}

.pos-key:hover {
    background: rgba(99, 102, 241, 0.3);
    color: white;
}

.pos-card-slot {
    height: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.card-insert-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: cardInsert 3s ease-in-out infinite;
}

.insert-card {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #f59e0b;
    font-size: 12px;
}

@keyframes cardInsert {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-30px); }
}

.pos-contactless {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.contactless-waves {
    position: relative;
    width: 30px;
    height: 20px;
}

.cw {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(99, 102, 241, 0.5);
    border-radius: 50%;
    border-bottom: none;
    border-left: none;
    transform: translateX(-50%) rotate(-45deg);
    animation: contactlessWave 2s ease-in-out infinite;
}

.cw-1 { width: 10px; height: 10px; animation-delay: 0s; }
.cw-2 { width: 16px; height: 16px; animation-delay: 0.2s; }
.cw-3 { width: 22px; height: 22px; animation-delay: 0.4s; }

@keyframes contactlessWave {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.pos-contactless > i {
    color: var(--primary);
    font-size: 12px;
    transform: rotate(90deg);
}

.pos-shadow {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 30px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4), transparent);
    filter: blur(10px);
}

.floating-cards {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.float-card {
    position: absolute;
    width: 50px;
    height: 35px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.float-card img {
    max-width: 35px;
    max-height: 25px;
    object-fit: contain;
}

.fc-1 {
    top: 20px;
    left: 0;
    animation: floatCard1 4s ease-in-out infinite;
}

.fc-2 {
    top: 50%;
    right: 0;
    animation: floatCard2 5s ease-in-out infinite;
}

.fc-3 {
    bottom: 40px;
    left: 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.fc-3 .unp-badge {
    color: white;
    font-size: 12px;
    font-weight: 700;
}

@keyframes floatCard1 {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

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

/* Online Gateway Visual */
.online-gateway-3d {
    position: relative;
}

.browser-window {
    width: 280px;
    background: #1a1a2e;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    transform: perspective(1000px) rotateY(5deg) rotateX(5deg);
    transition: transform 0.5s ease;
}

.online-card:hover .browser-window {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.browser-header {
    background: #12121a;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.browser-dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.browser-url {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.browser-url i {
    color: #10b981;
}

.browser-content {
    padding: 20px;
}

.checkout-form {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 20px;
}

.checkout-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: var(--text-secondary);
    font-size: 14px;
}

.checkout-amount {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

.card-input-visual {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.card-number-field {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-family: monospace;
}

.card-details-row {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: var(--text-muted);
}

.pay-button {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pay-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.payment-methods-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.payment-methods-mini img {
    height: 20px;
    opacity: 0.5;
}

.unp-mini {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: white;
}

.security-badges {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.sec-badge {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #10b981;
    animation: badgeFloat 3s ease-in-out infinite;
}

.sb-1 { animation-delay: 0s; }
.sb-2 { animation-delay: 0.5s; }
.sb-3 { animation-delay: 1s; }

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

/* Gateway Info */
.gateway-info {
    text-align: center;
}

.gateway-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 12px;
    color: var(--primary);
    margin-bottom: 15px;
}

.badge-online {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(99, 102, 241, 0.1));
    border-color: rgba(6, 182, 212, 0.3);
    color: var(--accent);
}

.gateway-info h4 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}

.gateway-info h4 span {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gateway-info p {
    color: var(--text-secondary);
    margin-bottom: 25px;
    line-height: 1.6;
}

.gateway-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.gf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 12px;
    transition: all 0.3s ease;
}

.gf-item:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: translateX(5px);
}

.gf-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gf-icon i {
    font-size: 14px;
    color: var(--primary);
}

.gf-item span {
    font-size: 13px;
    color: var(--text-secondary);
}

.card-hover-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.biz-gateway-card:hover .card-hover-particles {
    opacity: 1;
}

.hp {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: hpFloat 2s ease-in-out infinite;
}

.hp-1 { top: 20%; left: 10%; animation-delay: 0s; }
.hp-2 { top: 40%; right: 10%; animation-delay: 0.5s; }
.hp-3 { bottom: 30%; left: 20%; animation-delay: 1s; }
.hp-4 { bottom: 20%; right: 20%; animation-delay: 1.5s; }

@keyframes hpFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-20px) scale(1.5); opacity: 0.5; }
}

/* Settlement Flow */
.settlement-flow {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.03));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 24px;
    padding: 50px;
    margin-bottom: 60px;
}

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

.flow-header h4 {
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}

.flow-header h4 i {
    color: var(--primary);
}

.flow-header h4 span {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.flow-header p {
    color: var(--text-secondary);
}

.flow-visualization {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.flow-step {
    text-align: center;
}

.fs-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
}

.fs-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: fsPulse 2s ease-in-out infinite;
}

.pulse-success {
    border-color: rgba(16, 185, 129, 0.3);
}

@keyframes fsPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

.fs-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.icon-success {
    background: linear-gradient(135deg, #10b981, #34d399);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

.fs-icon i {
    font-size: 28px;
    color: white;
}

.fs-label {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 5px;
}

.fs-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.connector-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
}

.connector-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: connectorDotMove 1.5s ease-in-out infinite;
}

.cd-1 { animation-delay: 0s; }
.cd-2 { animation-delay: 0.3s; }
.cd-3 { animation-delay: 0.6s; }

@keyframes connectorDotMove {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.connector-label {
    font-size: 12px;
    color: var(--accent);
    background: rgba(6, 182, 212, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.flow-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.fb-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.fb-item:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: translateY(-5px);
}

.fb-highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.fb-highlight:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.1));
}

.fb-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fb-highlight .fb-icon {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.fb-icon i {
    font-size: 18px;
    color: white;
}

.fb-text strong {
    display: block;
    font-size: 16px;
    color: white;
    margin-bottom: 5px;
}

.fb-text span {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Commission Comparison */
.commission-comparison {
    margin-bottom: 80px;
}

.comparison-header {
    text-align: center;
    margin-bottom: 40px;
}

.comparison-header h4 {
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.comparison-header h4 i {
    color: var(--primary);
}

.comparison-header h4 span {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.comparison-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.comp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    width: 280px;
    transition: all 0.3s ease;
}

.comp-card.traditional {
    opacity: 0.7;
}

.comp-card.traditional:hover {
    opacity: 1;
}

.comp-card.vs-badge {
    width: auto;
    padding: 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
    border-color: rgba(99, 102, 241, 0.3);
}

.comp-card.vs-badge span {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.comp-card.unipoly-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border-color: rgba(16, 185, 129, 0.3);
    position: relative;
}

.comp-card.unipoly-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(16, 185, 129, 0.2);
}

.cc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.unipoly-card .cc-header {
    color: #10b981;
}

.cc-rate {
    margin-bottom: 25px;
}

.rate-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-secondary);
}

.rate-zero {
    color: #10b981;
}

.rate-plus {
    font-size: 16px;
    color: var(--text-muted);
    margin-left: 5px;
}

.cc-example {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 15px;
}

.example-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.example-total {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
}

.total-amount {
    font-size: 18px;
    color: var(--text-secondary);
}

.total-highlight {
    color: #10b981;
}

.savings-badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #000;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: savingsBounce 2s ease-in-out infinite;
}

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

/* Investment Packages Grid */
.investment-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.invest-package-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 35px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.invest-package-card:hover {
    transform: translateY(-15px);
    border-color: rgba(99, 102, 241, 0.3);
}

.invest-package-card.featured {
    border-color: rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.02));
    transform: scale(1.05);
}

.invest-package-card.featured:hover {
    transform: scale(1.05) translateY(-15px);
}

.package-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent);
    filter: blur(60px);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.invest-package-card:hover .package-glow {
    opacity: 1;
}

.glow-gold {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent);
}

.glow-purple {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent);
}

.package-ribbon {
    position: absolute;
    top: 20px;
    right: -35px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    padding: 8px 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(45deg);
}

.ribbon-gold {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #000;
}

.ribbon-purple {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.package-badge-featured {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(245, 158, 11, 0.4);
    animation: crownBounce 3s ease-in-out infinite;
}

.package-badge-featured i {
    color: #000;
    font-size: 18px;
}

@keyframes crownBounce {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50% { transform: rotate(10deg) scale(1.1); }
}

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

.package-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.pi-rings {
    position: absolute;
    width: 100%;
    height: 100%;
}

.pi-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: piRingPulse 3s ease-in-out infinite;
}

.pi-ring:first-child {
    width: 60px;
    height: 60px;
}

.pi-ring:last-child {
    width: 80px;
    height: 80px;
    animation-delay: 0.5s;
}

@keyframes piRingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.2; }
}

.package-icon > i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    color: var(--primary);
}

.icon-gold i {
    color: #f59e0b;
}

.icon-gold .pi-ring {
    border-color: rgba(245, 158, 11, 0.3);
}

.icon-purple i {
    color: #8b5cf6;
}

.icon-purple .pi-ring {
    border-color: rgba(139, 92, 246, 0.3);
}

.package-header h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.package-header p {
    font-size: 14px;
    color: var(--text-secondary);
}

.package-rate {
    text-align: center;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 16px;
}

.rate-number {
    font-size: 56px;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rate-gold .rate-number {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rate-purple .rate-number {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rate-percent {
    font-size: 20px;
    color: var(--text-secondary);
    margin-left: 5px;
}

.package-details {
    margin-bottom: 25px;
}

.pd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.pd-item i {
    width: 20px;
    height: 20px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #10b981;
}

.pd-item span {
    font-size: 14px;
    color: var(--text-secondary);
}

.package-calculator {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.calc-example {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calc-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.calc-result {
    font-size: 14px;
    font-weight: 600;
    color: #10b981;
}

.package-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.package-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.btn-gold {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #000;
}

.btn-gold:hover {
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.4);
}

.btn-purple {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.btn-purple:hover {
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);
}

/* Investment Growth Visual */
.investment-growth-visual {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.03));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 80px;
}

.growth-chart .chart-header {
    text-align: center;
    margin-bottom: 30px;
}

.growth-chart .chart-header h4 {
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.growth-chart .chart-header h4 i {
    color: var(--primary);
}

.growth-chart .chart-header h4 span {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.chart-container {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-rows: 1fr 40px;
    gap: 15px;
}

.chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    padding: 10px 0;
}

.chart-area {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
    min-height: 250px;
}

.chart-area svg {
    width: 100%;
    height: 200px;
}

.chart-fill {
    opacity: 0;
    animation: chartFillIn 2s ease-out 0.5s forwards;
}

.chart-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: chartLineIn 2s ease-out forwards;
}

@keyframes chartFillIn {
    to { opacity: 1; }
}

@keyframes chartLineIn {
    to { stroke-dashoffset: 0; }
}

.chart-point {
    opacity: 0;
    animation: chartPointIn 0.5s ease-out forwards;
}

.cp-1 { animation-delay: 0.5s; }
.cp-2 { animation-delay: 1s; }
.cp-3 { animation-delay: 1.5s; }
.cp-4 { animation-delay: 2s; }

@keyframes chartPointIn {
    to { opacity: 1; }
}

.chart-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 11px;
    pointer-events: none;
    opacity: 0;
    animation: tooltipIn 0.5s ease-out forwards;
}

.ct-1 { animation-delay: 0.7s; }
.ct-2 { animation-delay: 1.2s; }
.ct-3 { animation-delay: 1.7s; }
.ct-4 { animation-delay: 2.2s; }

@keyframes tooltipIn {
    to { opacity: 1; }
}

.chart-tooltip span {
    display: block;
    color: var(--text-secondary);
}

.chart-tooltip strong {
    display: block;
    color: #10b981;
    font-size: 13px;
}

.chart-tooltip.highlight {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
    border-color: rgba(245, 158, 11, 0.5);
}

.chart-tooltip.highlight strong {
    color: #f59e0b;
}

.chart-x-axis {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 20px;
}

/* Credit System */
.credit-system-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
    align-items: center;
}

.credit-main-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px;
}

.credit-card-3d {
    position: relative;
    perspective: 1000px;
}

.credit-card-inner {
    width: 320px;
    height: 200px;
    transform-style: preserve-3d;
    animation: creditCardFloat 6s ease-in-out infinite;
}

@keyframes creditCardFloat {
    0%, 100% { transform: rotateY(-10deg) rotateX(5deg); }
    50% { transform: rotateY(10deg) rotateX(-5deg); }
}

.credit-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
}

.cc-brand {
    margin-bottom: 15px;
}

.brand-text {
    display: block;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-sub {
    display: block;
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cc-chip {
    width: 45px;
    height: 35px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 6px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.chip-lines {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 100%;
    gap: 2px;
    padding: 5px;
}

.chip-lines span {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
}

.cc-limit {
    margin-bottom: 20px;
}

.limit-label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.limit-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: white;
}

.cc-holder {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cc-valid {
    font-size: 10px;
}

.cc-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-logo i {
    font-size: 20px;
    color: var(--primary);
}

.cc-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: 20px;
}

.pattern-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
}

.pc-1 {
    width: 200px;
    height: 200px;
    background: #6366f1;
    top: -50px;
    right: -50px;
}

.pc-2 {
    width: 150px;
    height: 150px;
    background: #06b6d4;
    bottom: -30px;
    left: -30px;
}

.credit-card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 230px;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.3), transparent);
    filter: blur(40px);
    z-index: -1;
}

.credit-floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cfe {
    position: absolute;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cfeFloat 4s ease-in-out infinite;
}

.cfe i {
    font-size: 20px;
    color: var(--primary);
}

.cfe-1 { top: 0; left: 0; animation-delay: 0s; }
.cfe-2 { top: 50%; right: 0; animation-delay: 1s; }
.cfe-3 { bottom: 0; left: 30%; animation-delay: 2s; }

@keyframes cfeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

.credit-info-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.credit-feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.credit-feature:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateX(10px);
}

.cf-icon {
    position: relative;
    width: 55px;
    height: 55px;
    flex-shrink: 0;
}

.cf-icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 14px;
    opacity: 0.2;
}

.bg-green {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.bg-purple {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.bg-cyan {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
}

.cf-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: var(--primary);
}

.cf-1 .cf-icon i { color: var(--primary); }
.cf-2 .cf-icon i { color: #10b981; }
.cf-3 .cf-icon i { color: #8b5cf6; }
.cf-4 .cf-icon i { color: #06b6d4; }

.cf-content h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.cf-content p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Credit Calculator */
.credit-calculator {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.04));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 60px;
}

.calc-header {
    text-align: center;
    margin-bottom: 35px;
}

.calc-header h4 {
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.calc-header h4 i {
    color: var(--primary);
}

.calc-header h4 span {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calc-header p {
    color: var(--text-secondary);
}

.calc-body {
    max-width: 700px;
    margin: 0 auto;
}

.calc-input-group {
    margin-bottom: 30px;
}

.calc-input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--text-secondary);
}

.calc-slider-container {
    position: relative;
}

.calc-slider {
    width: 100%;
    height: 8px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
}

.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
    transition: all 0.3s ease;
}

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

.slider-value {
    text-align: center;
    margin-top: 15px;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.calc-period-options {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.period-btn {
    padding: 15px 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.period-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.period-btn.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: white;
}

.calc-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
}

.calc-result-item {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.calc-result-item.highlight {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.cri-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.cri-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: white;
}

.calc-result-item.highlight .cri-value {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calc-footer {
    text-align: center;
    margin-top: 30px;
}

.apply-credit-btn {
    padding: 18px 50px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.apply-credit-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.4);
}

/* Business Benefits Summary */
.biz-benefits-summary {
    margin-bottom: 60px;
}

.summary-header {
    text-align: center;
    margin-bottom: 40px;
}

.summary-header h4 {
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.summary-header h4 i {
    color: #f59e0b;
}

.summary-header h4 span {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.summary-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.summary-item:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-10px);
}

.si-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
}

.si-icon-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: siPulse 3s ease-in-out infinite;
}

@keyframes siPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

.si-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    color: var(--primary);
}

.summary-item h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.summary-item p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* CTA Banner */
.biz-cta-banner {
    position: relative;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 24px;
    padding: 60px;
    text-align: center;
    overflow: hidden;
}

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

.cta-wave {
    position: absolute;
    width: 200%;
    height: 100px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    animation: ctaWaveMove 10s linear infinite;
}

.cw-1 { top: 20%; animation-delay: 0s; }
.cw-2 { top: 60%; animation-delay: 5s; }

@keyframes ctaWaveMove {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

.cta-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.cta-p {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: ctaParticle 5s ease-in-out infinite;
}

.cp-1 { left: 10%; top: 30%; animation-delay: 0s; }
.cp-2 { left: 25%; top: 70%; animation-delay: 1s; }
.cp-3 { left: 50%; top: 20%; animation-delay: 2s; }
.cp-4 { left: 75%; top: 60%; animation-delay: 3s; }
.cp-5 { left: 90%; top: 40%; animation-delay: 4s; }

@keyframes ctaParticle {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-20px) scale(1.5); opacity: 1; }
}

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

.cta-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.cta-icon i {
    font-size: 36px;
    color: white;
}

.cta-content h3 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.cta-content h3 span {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-content > p {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    padding: 18px 35px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.cta-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.4);
}

.cta-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

/* Business Gateway Additional Animations */
@keyframes posAmountChange {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes flowStepIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    0% { opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    0% { opacity: 0; transform: translateX(50px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes summaryItemIn {
    0% { opacity: 0; transform: translateY(20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.flow-step {
    opacity: 0;
}

.flow-step.active {
    opacity: 1;
}

.summary-item {
    opacity: 0;
}

/* Business Gateway Card Transitions */
.biz-gateway-card {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.invest-package-card {
    opacity: 0;
    animation: packageCardIn 0.6s ease forwards;
}

@keyframes packageCardIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.invest-package-card:nth-child(1) { animation-delay: 0.1s; }
.invest-package-card:nth-child(2) { animation-delay: 0.2s; }
.invest-package-card:nth-child(3) { animation-delay: 0.3s; }

/* Slider Track Style */
.calc-slider::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 4px;
}

/* Commission Card Transitions */
.traditional, .unipoly-card {
    opacity: 0;
}

/* Credit Feature Hover States */
.credit-feature {
    position: relative;
    overflow: hidden;
}

.credit-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transition: left 0.5s ease;
}

.credit-feature:hover::before {
    left: 100%;
}

/* POS Key Press Animation */
.pos-key:active {
    transform: scale(0.9);
    background: rgba(99, 102, 241, 0.5);
}

/* Browser Window Typing Animation */
.card-number-field span {
    animation: typeEffect 3s ease-in-out infinite;
}

@keyframes typeEffect {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Pay Button Pulse */
.pay-button {
    animation: payButtonPulse 2s ease-in-out infinite;
}

@keyframes payButtonPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
}

/* Savings Badge Animation */
.savings-badge {
    animation: savingsBounce 2s ease-in-out infinite;
}

/* Package Rate Number Glow */
.rate-number {
    text-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}

.rate-gold .rate-number {
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

.rate-purple .rate-number {
    text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}

/* CTA Banner Glow Effect */
.biz-cta-banner {
    box-shadow: 0 0 60px rgba(99, 102, 241, 0.15);
}

.biz-cta-banner:hover {
    box-shadow: 0 0 80px rgba(99, 102, 241, 0.25);
}

/* Credit Card Shimmer Effect */
.credit-card-front::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: cardShimmer 4s ease-in-out infinite;
}

@keyframes cardShimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Responsive Styles for Business Gateway Section */
@media (max-width: 1200px) {
    .investment-packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .invest-package-card.featured {
        transform: scale(1);
    }
    
    .invest-package-card.featured:hover {
        transform: translateY(-15px);
    }
    
    .summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .biz-gateway-grid {
        grid-template-columns: 1fr;
    }
    
    .credit-system-container {
        grid-template-columns: 1fr;
    }
    
    .credit-main-visual {
        order: -1;
    }
    
    .flow-benefits {
        grid-template-columns: 1fr;
    }
    
    .calc-results {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .business-gateway-section {
        padding: 80px 0;
    }
    
    .biz-hero-banner {
        padding: 30px;
    }
    
    .biz-banner-content {
        flex-direction: column;
        text-align: center;
    }
    
    .banner-stats {
        justify-content: center;
    }
    
    .investment-packages-grid {
        grid-template-columns: 1fr;
    }
    
    .comparison-cards {
        flex-direction: column;
    }
    
    .comp-card.vs-badge {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    
    .flow-visualization {
        flex-direction: column;
    }
    
    .flow-connector {
        transform: rotate(90deg);
    }
    
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .calc-period-options {
        flex-direction: column;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .biz-section-title {
        flex-direction: column;
        font-size: 28px;
    }
    
    .gateway-features {
        grid-template-columns: 1fr;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .pos-device, .browser-window {
        transform: none;
    }
    
    .credit-card-inner {
        width: 280px;
        height: 175px;
    }
}