:root{
 --primary-dark:#0A192F;
 --primary-medium:#19376D;
 --secondary-green:#04D939;
 --accent-purple:#A459D1;
 --neutral-dark:#0F172A;
 --neutral-light:#F8FAFC;
}

body{
 font-family:'Inter',sans-serif;
 background-color:var(--neutral-dark);
 color:var(--neutral-light);
 overflow-x:hidden;
}

.gradient-text{
 background:linear-gradient(90deg,var(--secondary-green),var(--accent-purple));
 -webkit-background-clip:text;
 background-clip:text;
 color:transparent;
}

.cyber-btn{
 background:linear-gradient(90deg,var(--secondary-green),var(--accent-purple));
 color:var(--neutral-dark);
 font-weight:600;
 padding:0.75rem 1.75rem;
 border-radius:0.375rem;
 display:inline-block;
 position:relative;
 overflow:hidden;
 transition:all 0.3s ease;
 box-shadow:0 4px 15px rgba(4,217,57,0.3);
 text-decoration:none;
}

.cyber-btn:hover{
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(4,217,57,0.5);
}

.cyber-btn:before{
 content:'';
 position:absolute;
 top:0;
 left:-100%;
 width:100%;
 height:100%;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
 transition:all 0.6s ease;
}

.cyber-btn:hover:before{
 left:100%;
}

/* Hexagonal Background Pattern */
.bg-hexagon-pattern{
 background-image:
 radial-gradient(circle at 50% 50%,
 transparent 0%,
 transparent 65%,
 rgba(4,217,57,0.03) 65%,
 rgba(4,217,57,0.03) 66%,
 transparent 66%),
 radial-gradient(circle at 50% 50%,
 transparent 0%,
 transparent 65%,
 rgba(4,217,57,0.03) 65%,
 rgba(4,217,57,0.03) 66%,
 transparent 66%);
 background-size:60px 60px;
 background-position:0 0,30px 30px;
}

.holographic-overlay{
 position:absolute;
 inset:0;
 background:radial-gradient(circle at center,
 rgba(4,217,57,0.05) 0%,
 transparent 70%);
 pointer-events:none;
}

/* Tags */
.tag{
 display:inline-block;
 background:rgba(4,217,57,0.1);
 color:var(--secondary-green);
 padding:0.25rem 0.75rem;
 border-radius:9999px;
 font-size:0.75rem;
 font-weight:600;
}

/* Featured Episode Card */
.featured-episode-card{
 background:linear-gradient(135deg,rgba(25,55,109,1) 0%,rgba(10,25,47,1) 100%);
 transition:all 0.5s ease;
}

.featured-episode-card:hover{
 transform:translateY(-5px);
 box-shadow:0 20px 40px rgba(4,217,57,0.15);
 background:linear-gradient(135deg,rgba(25,55,109,1) 0%,rgba(15,30,55,1) 100%);
}

.spotify-embed-container{
 border-radius:12px;
 overflow:hidden;
 box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

/* Hero Stat Cards - Incident Page Style */
.hero-stat-card{
 background:transparent;
 border:2px solid rgba(248,250,252,0.2);
 border-radius:0.75rem;
 padding:1.5rem;
 text-align:center;
 transition:all 0.3s ease;
 box-shadow:0 4px 6px rgba(0,0,0,0.1);
}

.hero-stat-card:hover{
 transform:translateY(-5px);
 box-shadow:0 10px 20px rgba(0,0,0,0.2);
 border-color:rgba(248,250,252,0.3);
}

/* Episode Cards */
.episode-card{
 transition:all 0.4s cubic-bezier(0.25,0.8,0.25,1);
 box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

.episode-card:hover{
 transform:translateY(-10px);
 box-shadow:0 20px 40px rgba(4,217,57,0.2),0 0 0 1px rgba(4,217,57,0.1);
}

.episode-icon-container{
 display:flex;
 align-items:center;
 justify-content:center;
 padding:2rem;
 background:linear-gradient(135deg,rgba(4,217,57,0.05),rgba(164,89,209,0.05));
 border-bottom:1px solid var(--primary-medium);
}

.episode-number{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:2rem;
 height:2rem;
 background:var(--secondary-green);
 color:var(--neutral-dark);
 font-weight:700;
 font-size:0.75rem;
 border-radius:50%;
}

.episode-tag{
 display:inline-block;
 background:rgba(164,89,209,0.2);
 color:var(--accent-purple);
 padding:0.25rem 0.75rem;
 border-radius:9999px;
 font-size:0.7rem;
 font-weight:600;
}

.listen-btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:100%;
 background:var(--secondary-green);
 color:var(--neutral-dark);
 padding:0.75rem 1.5rem;
 border-radius:0.5rem;
 font-weight:600;
 text-decoration:none;
 transition:all 0.3s ease;
}

.listen-btn:hover{
 background:var(--accent-purple);
 transform:translateY(-2px);
 box-shadow:0 5px 15px rgba(4,217,57,0.3);
}

/* Subscribe CTA Card */
.subscribe-cta-card{
 transition:all 0.4s ease;
 box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

.subscribe-cta-card:hover{
 transform:translateY(-8px);
 box-shadow:0 20px 40px rgba(4,217,57,0.25),0 0 0 1px rgba(4,217,57,0.2);
}

/* Platform Buttons */
.platform-btn{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 padding:2rem 1rem;
 background:rgba(25,55,109,0.2);
 border:1px solid var(--primary-medium);
 border-radius:1rem;
 color:var(--neutral-light);
 text-decoration:none;
 transition:all 0.3s ease;
}

.platform-btn:hover{
 transform:translateY(-5px);
 background:rgba(4,217,57,0.1);
 border-color:var(--secondary-green);
 box-shadow:0 10px 25px rgba(4,217,57,0.15);
}

.platform-btn i{
 color:var(--secondary-green);
 transition:all 0.3s ease;
}

.platform-btn:hover i{
 color:var(--secondary-green);
 transform:scale(1.1);
}

.platform-btn span{
 margin-top:0.5rem;
 font-weight:600;
 font-size:0.9rem;
}

/* Subscribe Platforms Card */
.subscribe-platforms-card{
 box-shadow:0 20px 40px rgba(0,0,0,0.2);
 transition:all 0.5s ease;
}

.subscribe-platforms-card:hover{
 box-shadow:0 25px 50px rgba(4,217,57,0.15);
}

/* Animations */
@keyframes slideIn{
 from{
 opacity:0;
 transform:translateY(30px) scale(0.95);
}
 to{
 opacity:1;
 transform:translateY(0) scale(1);
}
}

.animate-slideIn{
 opacity:0;
 animation:slideIn 0.6s cubic-bezier(0.25,0.8,0.25,1) forwards;
}

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

.animate-pulse{
 animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}

/* Responsive Design */
@media (max-width:768px){
 .episode-icon-container{
 padding:1.5rem;
}

 .episode-icon-container i{
 font-size:3rem;
}

 .platform-btn{
 padding:1.5rem 0.75rem;
}

 .platform-btn i{
 font-size:2.5rem;
}

 #nav-menu{
 position:absolute;
 top:100%;
 left:0;
 width:100%;
 background-color:rgba(15,23,42,0.98);
 backdrop-filter:blur(10px);
 padding:1rem;
 box-shadow:0 10px 15px -3px rgba(0,0,0,0.2);
}

 #nav-menu .dropdown{
 position:absolute;
 top:100%;
 left:0;
 width:100%;
 background-color:rgba(15,23,42,0.98);
 backdrop-filter:blur(10px);
 padding:1rem;
 box-shadow:0 10px 15px -3px rgba(0,0,0,0.2);
}
}

/* Header Styles */
header{
 background-color:var(--neutral-dark);
 backdrop-filter:blur(10px);
}

header.scrolled{
 background-color:var(--neutral-dark);
 box-shadow:0 4px 20px rgba(0,0,0,0.4);
}

.dropdown{
 background-color:var(--neutral-dark);
 backdrop-filter:blur(10px);
}

/* Footer */
footer{
 background-color:rgba(15,23,42,0.95);
 backdrop-filter:blur(10px);
}

/* Professional Hero Section - Clean & Simple */

/* Radial gradient utility */
.bg-gradient-radial{
 background:radial-gradient(circle,var(--tw-gradient-stops));
}

/* Episode Carousel Styles - Professional 3D Coverflow Effect */
.episode-carousel-wrapper{
 position:relative;
 padding:0 80px;
 overflow:hidden;
}

.episode-carousel-track{
 position:relative;
 display:flex;
 justify-content:center;
 align-items:center;
 min-height:550px;
 perspective:1200px;
 overflow:visible;
}

.carousel-slide{
 position:absolute;
 width:100%;
 max-width:850px;
 opacity:0;
 visibility:hidden;
 transform:translateX(0) scale(0.75) rotateY(0deg);
 transition:all 0.7s cubic-bezier(0.34,1.56,0.64,1);
 pointer-events:none;
 z-index:1;
 filter:blur(3px);
}

.carousel-slide.active{
 opacity:1;
 visibility:visible;
 transform:translateX(0) scale(1) rotateY(0deg);
 z-index:5;
 pointer-events:auto;
 filter:blur(0);
}

.carousel-slide.prev{
 opacity:0.5;
 visibility:visible;
 transform:translateX(-35%) scale(0.8) rotateY(25deg);
 z-index:3;
 pointer-events:none;
 filter:blur(1px);
}

.carousel-slide.next{
 opacity:0.5;
 visibility:visible;
 transform:translateX(35%) scale(0.8) rotateY(-25deg);
 z-index:3;
 pointer-events:none;
 filter:blur(1px);
}

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

.carousel-btn{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 width:56px;
 height:56px;
 background:rgba(25,55,109,0.5);
 backdrop-filter:blur(10px);
 border:2px solid rgba(4,217,57,0.3);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
 z-index:10;
 box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

.carousel-btn:hover{
 background:rgba(4,217,57,0.3);
 border-color:var(--secondary-green);
 transform:translateY(-50%) scale(1.15);
 box-shadow:0 6px 30px rgba(4,217,57,0.4);
}

.carousel-btn:active{
 transform:translateY(-50%) scale(1.05);
}

.carousel-prev{
 left:10px;
}

.carousel-next{
 right:10px;
}

.carousel-indicators{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:10px;
 margin-top:3rem;
}

.indicator{
 width:10px;
 height:10px;
 border-radius:50%;
 background:rgba(248,250,252,0.2);
 border:2px solid rgba(248,250,252,0.3);
 cursor:pointer;
 transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
 position:relative;
}

.indicator:hover{
 background:rgba(4,217,57,0.4);
 border-color:rgba(4,217,57,0.6);
 transform:scale(1.2);
}

.indicator.active{
 background:var(--secondary-green);
 border-color:var(--secondary-green);
 width:30px;
 border-radius:6px;
 box-shadow:0 0 15px rgba(4,217,57,0.5);
}

@media (max-width:1024px){
 .episode-carousel-wrapper{
 padding:0 60px;
}

 .carousel-slide{
 max-width:700px;
}

 .carousel-slide.prev{
 transform:translateX(-40%) scale(0.75) rotateY(30deg);
}

 .carousel-slide.next{
 transform:translateX(40%) scale(0.75) rotateY(-30deg);
}
}

@media (max-width:768px){
 .episode-carousel-wrapper{
 padding:0 50px;
}

 .episode-carousel-track{
 min-height:650px;
 perspective:800px;
}

 .carousel-slide{
 max-width:90%;
}

 .carousel-slide.prev,
 .carousel-slide.next{
 opacity:0.3;
 filter:blur(2px);
}

 .carousel-slide.prev{
 transform:translateX(-45%) scale(0.7) rotateY(35deg);
}

 .carousel-slide.next{
 transform:translateX(45%) scale(0.7) rotateY(-35deg);
}

 .carousel-btn{
 width:44px;
 height:44px;
}

 .carousel-btn i{
 font-size:0.875rem;
}

 .indicator{
 width:8px;
 height:8px;
}

 .indicator.active{
 width:24px;
}
}