/* TrendVision v1.6 Stylesheet - Fibonacci Rhythm Edition */

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

body {
    font-family: 'Inter', sans-serif;
    background-color: #020617;
    color: #f8fafc;
    overflow-x: hidden;
    min-height: 100vh;
}

.bg-glow {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 13% 21%, rgba(37, 99, 235, 0.1) 0%, transparent 55%),
                radial-gradient(circle at 89% 89%, rgba(129, 140, 248, 0.08) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* Hero Buttons */
.btn-hero-primary { 
    background-color: #ffffff; 
    color: #000000; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    font-weight: 700; 
}
.btn-hero-primary:hover { 
    background-color: #e2e8f0; 
    transform: translateY(-5px); 
    box-shadow: 0 13px 34px -8px rgba(255, 255, 255, 0.2);
}

.btn-hero-outline { 
    background-color: rgba(15, 23, 42, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    transition: all 0.3s ease; 
    font-weight: 600; 
}
.btn-hero-outline:hover { 
    border-color: rgba(255, 255, 255, 0.3); 
    background-color: rgba(30, 41, 59, 0.6); 
    transform: translateY(-5px); 
}

/* Navbar */
.btn-nav-accent { 
    background-color: #2563eb; 
    color: white; 
    box-shadow: 0 8px 21px rgba(37, 99, 235, 0.3); 
    transition: all 0.3s ease; 
}
.btn-nav-accent:hover { 
    background-color: #1d4ed8; 
    box-shadow: 0 13px 34px rgba(37, 99, 235, 0.5); 
    transform: scale(1.05);
}

/* Containers */
.hero-image-container {
    position: relative;
    border-radius: 21px;
    overflow: hidden;
    box-shadow: 0 0 89px rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Animations */
.reveal { 
    opacity: 0; 
    transform: translateY(34px); 
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
}
.reveal.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Glassmorphism */
.glass-card {
    background: rgba(30, 41, 59, 0.4); 
    backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Payment UI */
.btn-saweria-ui { 
    background-color: #f7b035; 
    color: #000; 
    box-shadow: 0 8px 21px rgba(247, 176, 53, 0.2);
}
.btn-saweria-ui:hover { 
    background-color: #e59f2a; 
    transform: translateY(-3px);
}

.btn-trakteer-ui { 
    background-color: #be1e2d; 
    color: #fff; 
    box-shadow: 0 8px 21px rgba(190, 30, 45, 0.2);
}
.btn-trakteer-ui:hover { 
    background-color: #a31825; 
    transform: translateY(-3px);
}

/* Neon Effects */
.neon-glow { 
    color: #38bdf8; 
    text-shadow: 0 0 13px rgba(56, 189, 248, 0.6); 
}
.neon-green { 
    color: #4ade80; 
    text-shadow: 0 0 13px rgba(74, 222, 128, 0.6); 
}

/* FAQ Details Transition */
details summary::-webkit-details-marker { display:none; }
details[open] summary i { transform: rotate(180deg); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { 
    background: #1e293b; 
    border-radius: 13px; 
}
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* Mobile Optimizations - Fibonacci Scaling */
@media (max-width: 640px) {
    .max-w-xs { max-width: 233px; }
}