/*
Theme Name: GTFYI Futuristic
Theme URI: https://gtfyi.com
Author: GTFYI
Description: Premium futuristic theme for GTFYI - Get The Fact. Immersive fluid animations, neon aurora effects, holographic glassmorphism, and cosmic visual depth.
Version: 6.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: gtfyi-futuristic
*/

/* ============================================
   CSS VARIABLES - AURORA FUTURISTIC THEME v6
   ============================================ */
:root {
  --bg-primary: #0b0d17;
  --bg-surface: #0f1225;
  --bg-elevated: #141833;
  --bg-hero: linear-gradient(135deg, #070a1a 0%, #0d1440 30%, #0a1035 60%, #070a1a 100%);
  --accent-cyan: #00d4ff;
  --accent-purple: #7c3aed;
  --accent-blue: #3b82f6;
  --accent-pink: #ec4899;
  --accent-green: #10b981;
  --accent-orange: #f59e0b;
  --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7c3aed 50%, #ec4899 100%);
  --gradient-aurora: linear-gradient(135deg, #00d4ff 0%, #7c3aed 25%, #ec4899 50%, #f59e0b 75%, #10b981 100%);
  --gradient-holo: linear-gradient(135deg, rgba(0,212,255,0.15) 0%, rgba(124,58,237,0.1) 50%, rgba(236,72,153,0.15) 100%);
  --text-primary: #e8ecf4;
  --text-secondary: #94a3c0;
  --text-muted: #64748b;
  --border-light: rgba(255,255,255,0.06);
  --border-glow: rgba(124,58,237,0.3);
  --glass-bg: rgba(15,18,37,0.65);
  --glass-border: rgba(255,255,255,0.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px rgba(124,58,237,0.2), 0 0 60px rgba(0,212,255,0.08);
  --shadow-glow-hover: 0 0 40px rgba(124,58,237,0.35), 0 0 80px rgba(0,212,255,0.15), 0 8px 32px rgba(0,0,0,0.3);
  --shadow-neon: 0 0 20px rgba(0,212,255,0.35), 0 0 40px rgba(124,58,237,0.15);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-normal: 0.35s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a { color:var(--accent-cyan); text-decoration:none; transition:color var(--transition-fast); }
a:hover { color:var(--accent-purple); }
img { max-width:100%; height:auto; display:block; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--accent-cyan),var(--accent-purple)); border-radius:3px; }

/* ============================================
   GLOBAL AURORA MESH BACKGROUND
   ============================================ */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 1200px 600px at 20% 20%, rgba(0,212,255,0.04), transparent),
    radial-gradient(ellipse 800px 500px at 80% 70%, rgba(124,58,237,0.04), transparent),
    radial-gradient(ellipse 600px 400px at 50% 50%, rgba(236,72,153,0.02), transparent);
  pointer-events:none;
}

/* ============================================
   HEADER & NAVIGATION - Dark Glassmorphism
   ============================================ */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(11,13,23,0.8);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.05);
  transition:all var(--transition-normal);
  height:64px;
}
.site-header.scrolled {
  background:rgba(11,13,23,0.95);
  box-shadow:0 4px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(0,212,255,0.1);
}

.nav-container { max-width:1600px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:64px; }
.site-logo img { height:38px; width:auto; transition:transform var(--transition-normal); filter:drop-shadow(0 0 8px rgba(0,212,255,0.2)); }
.site-logo:hover img { transform:scale(1.05); filter:drop-shadow(0 0 16px rgba(0,212,255,0.4)); }

.nav-menu { display:flex; list-style:none; gap:4px; align-items:center; }
.nav-menu a { display:block; padding:8px 16px; color:var(--text-secondary); font-weight:500; font-size:0.9rem; border-radius:var(--radius-sm); transition:all var(--transition-fast); position:relative; }
.nav-menu a:hover { color:var(--accent-cyan); background:rgba(0,212,255,0.06); }
.nav-menu a::after { content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%) scaleX(0); width:20px; height:2px; background:var(--gradient-primary); border-radius:1px; transition:transform var(--transition-normal); box-shadow:0 0 8px rgba(0,212,255,0.4); }
.nav-menu a:hover::after { transform:translateX(-50%) scaleX(1); }

.nav-search-btn { background:none; border:none; color:var(--text-secondary); font-size:1.2rem; cursor:pointer; padding:8px; border-radius:var(--radius-sm); transition:all var(--transition-fast); }
.nav-search-btn:hover { color:var(--accent-cyan); background:rgba(0,212,255,0.06); }

.mobile-menu-btn { display:none; background:none; border:none; font-size:1.5rem; color:var(--text-primary); cursor:pointer; padding:8px; }

@media (max-width:768px) {
  .mobile-menu-btn { display:block; }
  .nav-menu { position:fixed; top:64px; left:0; right:0; background:rgba(11,13,23,0.98); backdrop-filter:blur(20px); flex-direction:column; padding:16px; border-bottom:1px solid var(--border-light); transform:translateY(-120%); transition:transform var(--transition-normal); gap:4px; }
  .nav-menu.active { transform:translateY(0); }
  .nav-menu a { width:100%; padding:12px 16px; }
}

/* ============================================
   HERO SECTION - Immersive Cosmic
   ============================================ */
.hero-section {
  position:relative; min-height:70vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg-hero); overflow:hidden; margin-top:64px;
}

/* Fluid canvas layer */
.hero-fluid-canvas {
  position:absolute; inset:0; z-index:1;
}
.hero-fluid-canvas canvas { width:100%; height:100%; }

.hero-particles { position:absolute; inset:0; z-index:2; }
.hero-particles canvas { width:100%; height:100%; }

.hero-grid-overlay {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,0.035) 1px,transparent 1px);
  background-size:80px 80px; z-index:3;
  mask-image:radial-gradient(ellipse 70% 70% at center, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at center, black 30%, transparent 80%);
}

/* Aurora mesh background */
.hero-aurora { position:absolute; inset:0; z-index:1; overflow:hidden; }
.hero-aurora::before {
  content:''; position:absolute;
  width:200%; height:200%; top:-50%; left:-50%;
  background:
    radial-gradient(ellipse 600px 400px at 20% 50%, rgba(0,212,255,0.18), transparent),
    radial-gradient(ellipse 500px 300px at 80% 30%, rgba(124,58,237,0.14), transparent),
    radial-gradient(ellipse 400px 400px at 50% 80%, rgba(236,72,153,0.1), transparent);
  animation:auroraShift 12s ease-in-out infinite alternate;
}

/* Animated morphing blobs behind hero content */
.hero-morph-blob {
  position:absolute; border-radius:50%; z-index:2;
  filter:blur(60px); opacity:0.2;
}
.hero-morph-blob-1 {
  width:500px; height:500px; top:50%; left:50%; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, #00d4ff, #7c3aed, #ec4899, #00d4ff);
  animation:morphBlob1 10s ease-in-out infinite, morphSpin 20s linear infinite;
}
.hero-morph-blob-2 {
  width:300px; height:300px; top:20%; left:70%;
  background:radial-gradient(circle, rgba(0,212,255,0.4), transparent 70%);
  animation:morphBlob2 8s ease-in-out infinite;
}

.hero-content { position:relative; z-index:10; text-align:center; padding:30px 20px; max-width:960px; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px; padding:6px 18px;
  background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.2);
  border-radius:50px; color:rgba(0,212,255,0.9); font-size:0.78rem;
  font-weight:600; margin-bottom:16px; backdrop-filter:blur(10px);
  animation:fadeInDown 0.8s ease-out;
  box-shadow:0 0 20px rgba(0,212,255,0.1);
}
.hero-badge .pulse-dot {
  width:8px; height:8px; background:var(--accent-green); border-radius:50%;
  animation:pulse 2s ease-in-out infinite;
  box-shadow:0 0 10px rgba(16,185,129,0.6), 0 0 20px rgba(16,185,129,0.3);
}

.hero-title {
  font-size:clamp(2.4rem,6vw,4.2rem); font-weight:800; line-height:1.08;
  color:#ffffff; margin-bottom:12px;
  animation:fadeInUp 1s ease-out 0.2s both;
  text-shadow:0 0 60px rgba(0,212,255,0.15), 0 0 120px rgba(124,58,237,0.08);
}
.hero-title .gradient-text {
  background:linear-gradient(135deg,#00d4ff 0%,#7c3aed 35%,#ec4899 65%,#f59e0b 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; display:inline-block; position:relative;
  background-size:200% 200%;
  animation:gradientShift 4s ease infinite;
}
.hero-title .gradient-text::after {
  content:''; position:absolute; bottom:-6px; left:0; right:0;
  height:3px; background:linear-gradient(90deg,#00d4ff,#7c3aed,#ec4899,#f59e0b);
  border-radius:2px; animation:shimmer 3s ease-in-out infinite; background-size:200% 100%;
  box-shadow:0 0 12px rgba(0,212,255,0.4);
}

.hero-typing-wrapper { display:inline-block; position:relative; }
.hero-typing-cursor {
  display:inline-block; width:3px; height:0.9em; background:var(--accent-cyan);
  margin-left:3px; vertical-align:text-bottom; animation:blink 1s step-end infinite;
  border-radius:2px;
  box-shadow:0 0 16px rgba(0,212,255,0.8), 0 0 40px rgba(0,212,255,0.3);
}

.hero-subtitle {
  font-size:clamp(0.95rem,2vw,1.1rem); color:rgba(255,255,255,0.55);
  max-width:560px; margin:0 auto 22px; line-height:1.7;
  animation:fadeInUp 1s ease-out 0.4s both;
}

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

.btn-hero {
  display:inline-flex; align-items:center; gap:8px; padding:12px 28px;
  border-radius:50px; font-size:0.92rem; font-weight:600; cursor:pointer;
  border:none; transition:all var(--transition-normal); text-decoration:none;
  position:relative; overflow:hidden;
}
.btn-hero::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);
  opacity:0; transition:opacity var(--transition-fast);
}
.btn-hero:hover::before { opacity:1; }

.btn-hero-primary {
  background:linear-gradient(135deg,#00d4ff,#7c3aed); color:#ffffff;
  box-shadow:0 4px 20px rgba(0,212,255,0.3), 0 0 40px rgba(0,212,255,0.1);
}
.btn-hero-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 40px rgba(0,212,255,0.4), 0 0 60px rgba(0,212,255,0.15);
  color:#ffffff;
}

.btn-hero-secondary {
  background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.12); backdrop-filter:blur(10px);
}
.btn-hero-secondary:hover {
  background:rgba(255,255,255,0.1); transform:translateY(-3px);
  border-color:rgba(0,212,255,0.3); color:#ffffff;
}

.hero-stats {
  display:flex; justify-content:center; gap:40px; margin-top:28px;
  animation:fadeInUp 1s ease-out 0.8s both;
}
.hero-stat { text-align:center; position:relative; }
.hero-stat:not(:last-child)::after {
  content:''; position:absolute; right:-20px; top:20%; height:60%;
  width:1px; background:linear-gradient(180deg,transparent,rgba(0,212,255,0.2),transparent);
}
.hero-stat-value {
  font-size:1.6rem; font-weight:800;
  background:linear-gradient(135deg,#00d4ff,#7c3aed);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-stat-label {
  font-size:0.72rem; color:rgba(255,255,255,0.35); margin-top:3px;
  text-transform:uppercase; letter-spacing:1.5px;
}

.hero-orb { position:absolute; border-radius:50%; filter:blur(100px); opacity:0.2; z-index:0; animation:float 8s ease-in-out infinite; }
.hero-orb-1 { width:400px; height:400px; background:var(--accent-cyan); top:-100px; right:-100px; }
.hero-orb-2 { width:300px; height:300px; background:var(--accent-purple); bottom:-60px; left:-60px; animation-delay:-3s; }
.hero-orb-3 { width:200px; height:200px; background:var(--accent-pink); top:40%; left:20%; animation-delay:-5s; }

@media (max-width:768px) {
  .hero-section { min-height:80vh; }
  .hero-stats { gap:20px; flex-wrap:wrap; }
  .hero-stat-value { font-size:1.3rem; }
  .hero-actions { flex-direction:column; align-items:center; }
  .hero-stat:not(:last-child)::after { display:none; }
}

/* ============================================
   SECTION DIVIDERS - Neon Energy Waves
   ============================================ */
.aurora-divider {
  height:2px; position:relative; overflow:hidden;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,0.06), transparent);
}
.aurora-divider::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, #00d4ff, #7c3aed, #ec4899, #7c3aed, #00d4ff);
  background-size:200% 100%;
  animation:shimmer 4s linear infinite;
  opacity:0.5;
}

/* ============================================
   NEON WAVE DIVIDER - Animated flowing wave
   ============================================ */
.neon-wave-divider {
  position:relative; height:80px; overflow:hidden;
  margin-top:-1px;
}
.neon-wave-divider svg {
  position:absolute; bottom:0; left:0; width:100%; height:80px;
}
.neon-wave-divider .wave-path {
  fill:var(--bg-primary);
  animation:waveShift 6s ease-in-out infinite;
}

/* ============================================
   SECTIONS COMMON - Dark Aurora Body
   ============================================ */
.section { padding:60px 16px; position:relative; overflow:hidden; }

/* Animated aurora mesh gradient background */
.section::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 10% 20%, rgba(0,212,255,0.04), transparent),
    radial-gradient(ellipse 700px 400px at 90% 80%, rgba(124,58,237,0.04), transparent),
    radial-gradient(ellipse 500px 400px at 50% 50%, rgba(236,72,153,0.02), transparent);
  pointer-events:none; z-index:0;
  animation:sectionAuroraPulse 15s ease-in-out infinite alternate;
}
.section > * { position:relative; z-index:1; }

/* Alternate section bg with aurora tint */
.section:nth-of-type(even) {
  background:
    linear-gradient(180deg,rgba(124,58,237,0.03) 0%,rgba(0,212,255,0.02) 50%,rgba(236,72,153,0.01) 100%),
    var(--bg-surface);
}

.section-container { max-width:1600px; margin:0 auto; }
.section-header { text-align:center; margin-bottom:40px; }

/* Futuristic section label with neon glow */
.section-label {
  display:inline-flex; align-items:center; gap:8px; padding:6px 18px;
  background:linear-gradient(135deg,rgba(0,212,255,0.1),rgba(124,58,237,0.1));
  border:1px solid rgba(0,212,255,0.2);
  border-radius:50px; color:var(--accent-cyan);
  font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; margin-bottom:12px;
  box-shadow:0 0 20px rgba(0,212,255,0.08), inset 0 0 20px rgba(0,212,255,0.03);
}

.section-title {
  font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800;
  color:var(--text-primary); line-height:1.2; margin-bottom:12px;
  position:relative;
}
.section-title .highlight {
  background:var(--gradient-primary);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Gradient underline on section titles */
.section-header .section-title::after {
  content:''; display:block; width:60px; height:3px;
  background:var(--gradient-primary); border-radius:2px;
  margin:14px auto 0;
  box-shadow:0 0 12px rgba(0,212,255,0.3);
}

.section-desc { font-size:0.95rem; color:var(--text-secondary); max-width:520px; margin:0 auto; line-height:1.7; }

/* ============================================
   HOW IT WORKS - Holographic Steps
   ============================================ */
.steps-grid { display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; }

.step-card {
  flex:0 0 240px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:24px 20px;
  text-align:center;
  position:relative;
  overflow:hidden;
  transition:all var(--transition-normal);
  box-shadow:var(--glass-shadow);
}

/* Animated aurora top bar */
.step-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:var(--gradient-aurora);
  background-size:200% 100%;
  opacity:0.7;
  transition:opacity var(--transition-normal);
  animation:shimmer 3s linear infinite;
  box-shadow:0 2px 12px rgba(0,212,255,0.2);
}
.step-card:hover::before { opacity:1; height:4px; }
.step-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-glow-hover);
  border-color:rgba(0,212,255,0.25);
}

/* Holographic corner shimmer */
.step-card::after {
  content:''; position:absolute; top:-80px; right:-80px;
  width:160px; height:160px;
  background:conic-gradient(from 0deg, transparent, rgba(0,212,255,0.1), transparent, rgba(124,58,237,0.08), transparent);
  border-radius:50%;
  animation:holoSpin 8s linear infinite;
  pointer-events:none;
}

.step-number {
  font-size:3rem; font-weight:900;
  background:linear-gradient(135deg,rgba(0,212,255,0.25),rgba(124,58,237,0.25));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1; margin-bottom:10px;
}

.step-icon {
  width:56px; height:56px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(0,212,255,0.1),rgba(124,58,237,0.1));
  border:1px solid rgba(0,212,255,0.15);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
  color:var(--accent-cyan);
  transition:all var(--transition-normal);
}
.step-card:hover .step-icon {
  background:linear-gradient(135deg,#00d4ff,#7c3aed);
  color:#ffffff;
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 0 30px rgba(0,212,255,0.4);
}

.step-card h3 { font-size:1.08rem; font-weight:700; margin-bottom:8px; color:var(--text-primary); }
.step-card p { font-size:0.84rem; color:var(--text-secondary); line-height:1.6; }

.step-connector {
  display:flex; flex-direction:column; align-items:center;
  padding:0 16px; flex:0 0 auto;
}
.step-connector-line { width:2px; height:20px; background:linear-gradient(180deg,rgba(0,212,255,0.1),rgba(124,58,237,0.3)); }
.step-connector-dot {
  width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));
  margin:8px 0; animation:pulse 2s ease-in-out infinite;
  box-shadow:0 0 12px rgba(0,212,255,0.5), 0 0 24px rgba(0,212,255,0.2);
}

@media (max-width:1024px) {
  .step-connector { display:none; }
  .steps-grid { gap:20px; }
}

/* ============================================
   FEATURED ARTICLES - Glass Cards with Neon Borders
   ============================================ */
.featured-grid { display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:auto auto; gap:18px; }

.featured-card {
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--glass-border);
  transition:all var(--transition-normal);
  position:relative;
  box-shadow:var(--glass-shadow);
}
.featured-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-glow-hover);
  border-color:rgba(0,212,255,0.25);
}

/* Animated border glow */
.featured-card::after {
  content:''; position:absolute; inset:-1px;
  border-radius:var(--radius-lg);
  background:conic-gradient(from 180deg, rgba(0,212,255,0.25), rgba(124,58,237,0.25), rgba(236,72,153,0.2), rgba(0,212,255,0.25));
  z-index:-1; opacity:0;
  transition:opacity var(--transition-normal);
  animation:borderRotate 4s linear infinite;
}
.featured-card:hover::after { opacity:1; }

.featured-card:first-child { grid-row:1/3; }
.featured-card:first-child .card-image { height:280px; }

.card-image { height:180px; overflow:hidden; position:relative; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow), filter var(--transition-slow); }
.featured-card:hover .card-image img { transform:scale(1.08); filter:brightness(1.1) saturate(1.15) contrast(1.05); }

/* Futuristic card image overlay */
.card-image .card-category {
  position:absolute; top:10px; left:10px; padding:5px 14px;
  background:linear-gradient(135deg,rgba(0,212,255,0.95),rgba(124,58,237,0.95));
  color:#fff; font-size:0.68rem; font-weight:700;
  border-radius:50px; text-transform:uppercase;
  letter-spacing:0.5px; z-index:2;
  box-shadow:0 2px 16px rgba(0,212,255,0.4);
  backdrop-filter:blur(4px);
}

.card-image-overlay {
  position:absolute; bottom:0; left:0; right:0; height:80px;
  background:linear-gradient(transparent,rgba(11,13,23,0.8));
  pointer-events:none;
}

/* Hover read more overlay */
.card-image .card-read-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,212,255,0.12),rgba(124,58,237,0.12));
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--transition-normal);
  z-index:3;
}
.featured-card:hover .card-read-overlay { opacity:1; }
.card-read-overlay span {
  padding:10px 24px; border-radius:50px;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff; font-size:0.85rem; font-weight:600;
  transform:translateY(8px); transition:transform var(--transition-normal);
}
.featured-card:hover .card-read-overlay span { transform:translateY(0); }

.card-body { padding:18px 20px; }
.card-body h3 { font-size:1.02rem; font-weight:700; line-height:1.4; margin-bottom:8px; color:var(--text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.featured-card:first-child .card-body h3 { font-size:1.25rem; }
.card-body h3 a { color:inherit; transition:color var(--transition-fast); }
.card-body h3 a:hover { color:var(--accent-cyan); }

.card-meta {
  display:flex; align-items:center; gap:8px;
  font-size:0.78rem; color:var(--text-muted); margin-top:8px;
}
.card-meta .separator { width:3px; height:3px; background:var(--text-muted); border-radius:50%; opacity:0.4; }

/* Futuristic reading time badge */
.card-reading-time {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; font-size:0.68rem; font-weight:600;
  background:linear-gradient(135deg,rgba(0,212,255,0.08),rgba(124,58,237,0.08));
  border:1px solid rgba(0,212,255,0.12);
  border-radius:50px; color:var(--accent-cyan);
}

.card-excerpt { font-size:0.86rem; color:var(--text-secondary); line-height:1.55; margin-top:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

@media (max-width:768px) {
  .featured-grid { grid-template-columns:1fr; }
  .featured-card:first-child { grid-row:auto; }
}

/* ============================================
   STATS BAR - Neon Dark with Animated Grid
   ============================================ */
.stats-bar-section {
  background:linear-gradient(135deg, #070a1a 0%, #0d1440 40%, #0a1035 70%, #070a1a 100%);
  padding:28px 16px;
  position:relative; overflow:hidden;
}
.stats-bar-section::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,0.03) 1px,transparent 1px);
  background-size:50px 50px;
}
/* Animated scan line */
.stats-bar-section::after {
  content:''; position:absolute; left:0; right:0;
  height:1px; top:0;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,0.5),transparent);
  animation:scanLine 4s ease-in-out infinite;
}

.stats-bar {
  display:flex; align-items:center; justify-content:center;
  gap:32px; position:relative; z-index:2;
}
.stats-bar-item { display:flex; align-items:center; gap:16px; }
.stats-bar-icon {
  width:48px; height:48px;
  border-radius:var(--radius-md);
  background:rgba(0,212,255,0.06);
  border:1px solid rgba(0,212,255,0.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-cyan);
  flex-shrink:0;
  box-shadow:0 0 16px rgba(0,212,255,0.15), inset 0 0 12px rgba(0,212,255,0.05);
  transition:all var(--transition-normal);
}
.stats-bar-item:hover .stats-bar-icon {
  box-shadow:0 0 30px rgba(0,212,255,0.3), inset 0 0 20px rgba(0,212,255,0.1);
  border-color:rgba(0,212,255,0.3);
}

.stats-bar-info { }
.stats-bar-value {
  font-size:1.5rem; font-weight:800;
  background:linear-gradient(135deg,#00d4ff,#7c3aed);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.stats-bar-label { font-size:0.72rem; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:1.5px; margin-top:2px; }
.stats-bar-divider { width:1px; height:48px; background:linear-gradient(180deg,transparent,rgba(0,212,255,0.15),transparent); }

@keyframes scanLine {
  0% { top:0; opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100% { top:100%; opacity:0; }
}

@media (max-width:768px) {
  .stats-bar { flex-direction:column; gap:20px; }
  .stats-bar-divider { width:80px; height:1px; background:linear-gradient(90deg,transparent,rgba(0,212,255,0.15),transparent); }
}

/* ============================================
   CATEGORY SHOWCASE - Neon Glow Cards
   ============================================ */
.category-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }

.category-card {
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:22px 16px; text-align:center;
  transition:all var(--transition-normal);
  position:relative; overflow:hidden;
  box-shadow:var(--glass-shadow);
}
/* Gradient top border - always visible */
.category-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--gradient-aurora);
  background-size:200% 100%;
  opacity:0.6; transition:opacity var(--transition-normal);
  animation:shimmer 4s linear infinite;
}
.category-card:hover::before { opacity:1; height:4px; }
.category-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-glow-hover);
  border-color:rgba(0,212,255,0.25);
}

/* Neon corner glow */
.category-card::after {
  content:''; position:absolute; top:-50px; right:-50px;
  width:120px; height:120px;
  background:radial-gradient(circle,rgba(0,212,255,0.15),transparent 70%);
  pointer-events:none; transition:all var(--transition-normal);
}
.category-card:hover::after {
  width:180px; height:180px; top:-70px; right:-70px;
  background:radial-gradient(circle,rgba(0,212,255,0.25),transparent 70%);
}

.category-icon {
  width:50px; height:50px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin:0 auto 12px;
  transition:all var(--transition-normal);
  box-shadow:0 0 12px rgba(0,0,0,0.2);
}
.category-card:hover .category-icon {
  transform:scale(1.15) rotate(5deg);
  box-shadow:0 0 30px rgba(124,58,237,0.3);
}
.category-card h3 { font-size:0.92rem; font-weight:700; margin-bottom:4px; color:var(--text-primary); }
.category-card .count { font-size:0.78rem; color:var(--text-muted); }

/* ============================================
   DID YOU KNOW - Neon Fact Cards
   ============================================ */
.facts-carousel {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;
}

.fact-card {
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:20px;
  position:relative; overflow:hidden;
  transition:all var(--transition-normal);
  box-shadow:var(--glass-shadow);
}
.fact-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-glow-hover);
  border-color:rgba(0,212,255,0.3);
}

/* Neon left border */
.fact-card::before {
  content:''; position:absolute; top:0; bottom:0; left:0;
  width:3px;
  background:linear-gradient(180deg,var(--accent-cyan),var(--accent-purple),var(--accent-pink));
  opacity:0.6; transition:opacity var(--transition-normal);
  box-shadow:0 0 10px rgba(0,212,255,0.3);
  animation:borderGlowPulse 3s ease-in-out infinite;
}
.fact-card:hover::before { opacity:1; box-shadow:0 0 16px rgba(0,212,255,0.5); width:4px; }

.fact-card-glow {
  position:absolute; top:-60px; right:-60px;
  width:140px; height:140px;
  background:linear-gradient(135deg,rgba(0,212,255,0.12),rgba(124,58,237,0.12));
  border-radius:50%; filter:blur(40px);
  transition:all var(--transition-normal);
}
.fact-card:hover .fact-card-glow {
  width:200px; height:200px; top:-80px; right:-80px;
  background:linear-gradient(135deg,rgba(0,212,255,0.2),rgba(124,58,237,0.2));
}

.fact-card-content { position:relative; z-index:2; }
.fact-label {
  display:inline-block; padding:3px 12px;
  background:linear-gradient(135deg,rgba(0,212,255,0.1),rgba(124,58,237,0.1));
  border:1px solid rgba(0,212,255,0.15);
  border-radius:4px; font-size:0.62rem;
  font-weight:700; color:var(--accent-cyan);
  text-transform:uppercase; letter-spacing:2px;
  margin-bottom:10px;
}
.fact-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; color:var(--text-primary); line-height:1.4; }
.fact-card h3 a { color:inherit; }
.fact-card h3 a:hover { color:var(--accent-cyan); }
.fact-card p { font-size:0.84rem; color:var(--text-secondary); line-height:1.55; margin-bottom:12px; }
.fact-link {
  font-size:0.84rem; font-weight:600;
  color:var(--accent-cyan);
  transition:all var(--transition-fast);
  display:inline-flex; align-items:center; gap:4px;
}
.fact-link:hover { color:var(--accent-purple); transform:translateX(6px); }

/* ============================================
   LATEST ARTICLES GRID - Holographic Cards
   ============================================ */
.articles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }

.article-card {
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:all var(--transition-normal);
  position:relative;
  box-shadow:var(--glass-shadow);
}
.article-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-glow-hover);
  border-color:rgba(0,212,255,0.2);
}

/* Bottom aurora gradient bar */
.article-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:3px; background:var(--gradient-aurora);
  background-size:200% 100%;
  opacity:0.3; transition:opacity var(--transition-normal);
  animation:shimmer 3s linear infinite;
}
.article-card:hover::after { opacity:1; height:4px; }

.article-card .card-image { height:160px; }
.article-card .card-body { padding:16px 18px; }
.article-card .card-body h3 { font-size:0.96rem; }

/* No-image placeholder - futuristic gradient */
.card-image .no-image-placeholder {
  width:100%; height:100%;
  background:linear-gradient(135deg,#070a1a 0%,#0d1440 50%,#0a1035 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.card-image .no-image-placeholder::before {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(0,212,255,0.2) 1px,transparent 1px);
  background-size:20px 20px;
}
.card-image .no-image-placeholder svg {
  width:40px; height:40px; color:rgba(0,212,255,0.3);
  position:relative; z-index:1;
}

/* ============================================
   DATA STREAM / TICKER
   ============================================ */
.ticker-section {
  background:var(--bg-surface);
  border-top:1px solid rgba(0,212,255,0.08);
  border-bottom:1px solid rgba(0,212,255,0.08);
  padding:12px 0; overflow:hidden;
  position:relative;
}
.ticker-section::before {
  content:''; position:absolute; left:0; right:0;
  height:1px; top:0;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,0.3),transparent);
}

.ticker-label {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px;
  background:linear-gradient(135deg,#00d4ff,#7c3aed);
  color:#fff; font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px;
  border-radius:50px; margin-right:20px; white-space:nowrap;
  box-shadow:0 0 20px rgba(0,212,255,0.3);
}
.ticker-label .live-dot { width:6px; height:6px; background:#fff; border-radius:50%; animation:pulse 1.5s ease-in-out infinite; }
.ticker-track { display:flex; align-items:center; animation:ticker-scroll 40s linear infinite; }
.ticker-track:hover { animation-play-state:paused; }
.ticker-item { white-space:nowrap; padding:0 28px; font-size:0.88rem; color:var(--text-secondary); border-right:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; gap:8px; }
.ticker-item .tag { padding:2px 8px; border-radius:4px; font-size:0.7rem; font-weight:600; text-transform:uppercase; }
.tag-breaking { background:rgba(239,68,68,0.1); color:#ef4444; border:1px solid rgba(239,68,68,0.2); }
.tag-trending { background:rgba(124,58,237,0.1); color:var(--accent-purple); border:1px solid rgba(124,58,237,0.2); }
.tag-new { background:rgba(16,185,129,0.1); color:var(--accent-green); border:1px solid rgba(16,185,129,0.2); }

/* ============================================
   CTA / NEWSLETTER - Compact Neon Aurora
   ============================================ */
.cta-section {
  background:linear-gradient(135deg, #070a1a 0%, #0d1440 40%, #0a1035 70%, #070a1a 100%);
  position:relative; overflow:hidden;
  padding:36px 20px;
}
.cta-section .hero-orb { opacity:0.1; }

/* Animated aurora mesh in CTA */
.cta-section::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 500px 300px at 15% 50%, rgba(0,212,255,0.12), transparent),
    radial-gradient(ellipse 400px 250px at 85% 40%, rgba(124,58,237,0.1), transparent);
  pointer-events:none; z-index:0;
  animation:ctaPulse 8s ease-in-out infinite alternate;
}

/* CTA animated border top */
.cta-section::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gradient-aurora);
  background-size:200% 100%;
  animation:shimmer 3s linear infinite;
  opacity:0.6;
}

.cta-content {
  position:relative; z-index:5;
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
}
.cta-text { flex:1; min-width:280px; }
.cta-text h2 {
  font-size:clamp(1.4rem,3vw,1.9rem); font-weight:800;
  color:#ffffff; margin-bottom:8px;
  background:linear-gradient(135deg,#ffffff 0%,rgba(0,212,255,0.9) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.cta-text p { color:rgba(255,255,255,0.5); font-size:0.92rem; max-width:460px; }

.cta-form-wrap { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cta-form { display:flex; gap:10px; }
.cta-form input[type="email"] {
  padding:12px 20px; border-radius:50px;
  border:1px solid rgba(0,212,255,0.15);
  background:rgba(0,212,255,0.05); color:#ffffff;
  font-size:0.9rem; backdrop-filter:blur(10px);
  outline:none; min-width:260px;
  transition:border-color var(--transition-fast);
}
.cta-form input[type="email"]:focus { border-color:var(--accent-cyan); box-shadow:0 0 20px rgba(0,212,255,0.15); }
.cta-form input[type="email"]::placeholder { color:rgba(255,255,255,0.3); }
.cta-form button {
  padding:12px 26px; border-radius:50px; border:none;
  background:linear-gradient(135deg,#00d4ff,#7c3aed);
  color:#ffffff; font-weight:600; font-size:0.9rem;
  cursor:pointer; transition:all var(--transition-normal);
  white-space:nowrap; box-shadow:0 0 20px rgba(0,212,255,0.3);
}
.cta-form button:hover { transform:translateY(-2px); box-shadow:0 4px 30px rgba(0,212,255,0.4); }
.cta-disclaimer { font-size:0.72rem; color:rgba(255,255,255,0.3); }

@media (max-width:768px) {
  .cta-content { flex-direction:column; text-align:center; }
  .cta-text { min-width:auto; }
  .cta-text p { margin:0 auto; }
  .cta-form-wrap { align-items:center; width:100%; }
  .cta-form { flex-direction:column; width:100%; }
  .cta-form input[type="email"] { min-width:auto; width:100%; }
}

/* ============================================
   FOOTER - Premium Dark
   ============================================ */
.site-footer {
  background:#050810; color:rgba(255,255,255,0.6);
  position:relative; overflow:hidden;
}

.footer-gradient-bar {
  height:2px;
  background:linear-gradient(90deg,#00d4ff,#7c3aed,#ec4899,#f59e0b,#00d4ff);
  background-size:300% 100%;
  animation:gradientFlow 4s ease infinite;
}

/* Footer Newsletter Bar */
.footer-newsletter-bar {
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.04);
  padding:20px 16px;
}
.footer-newsletter-inner {
  max-width:1600px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.footer-newsletter-text { display:flex; align-items:center; gap:16px; color:rgba(255,255,255,0.8); }
.footer-newsletter-text svg { color:var(--accent-cyan); flex-shrink:0; }
.footer-newsletter-text h4 { font-size:0.95rem; font-weight:700; color:#ffffff; margin-bottom:2px; }
.footer-newsletter-text p { font-size:0.8rem; color:rgba(255,255,255,0.4); }

.footer-newsletter-form { display:flex; gap:8px; flex:0 0 auto; }
.footer-newsletter-form input[type="email"] {
  padding:11px 18px; border-radius:50px;
  border:1px solid rgba(0,212,255,0.1);
  background:rgba(0,212,255,0.04);
  color:#ffffff; font-size:0.88rem; outline:none;
  min-width:260px; transition:border-color var(--transition-fast);
}
.footer-newsletter-form input[type="email"]:focus { border-color:var(--accent-cyan); }
.footer-newsletter-form input[type="email"]::placeholder { color:rgba(255,255,255,0.25); }
.footer-newsletter-form button {
  padding:11px 24px; border-radius:50px; border:none;
  background:linear-gradient(135deg,#00d4ff,#7c3aed);
  color:#ffffff; font-weight:600; font-size:0.88rem;
  cursor:pointer; transition:all var(--transition-normal);
  white-space:nowrap;
}
.footer-newsletter-form button:hover { transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,212,255,0.3); }

/* Footer Main Grid */
.footer-main {
  max-width:1600px; margin:0 auto;
  padding:32px 20px 20px;
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:28px;
}

.footer-brand { }
.footer-brand .footer-logo { height:38px; margin-bottom:12px; display:block; max-width:180px; object-fit:contain; object-position:left center; background:transparent; border:none; padding:0; filter:drop-shadow(0 0 8px rgba(0,212,255,0.15)); }
.footer-tagline { font-size:0.82rem; line-height:1.7; margin-bottom:16px; color:rgba(255,255,255,0.4); }

.footer-trust-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.trust-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--radius-sm);
  font-size:0.72rem; color:rgba(255,255,255,0.4);
}
.trust-badge svg { color:var(--accent-green); }

.footer-social { display:flex; gap:8px; }
.social-icon {
  width:40px; height:40px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.4);
  transition:all var(--transition-fast);
}
.social-icon:hover {
  background:linear-gradient(135deg,var(--accent-cyan),var(--accent-purple));
  border-color:transparent; color:#ffffff;
  transform:translateY(-3px);
  box-shadow:0 4px 20px rgba(0,212,255,0.3);
}

.footer-col h4 {
  color:#ffffff; font-size:0.88rem; font-weight:700;
  margin-bottom:16px; position:relative; padding-bottom:10px;
}
.footer-col h4::after {
  content:''; position:absolute; bottom:0; left:0;
  width:30px; height:2px;
  background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));
  border-radius:1px;
  box-shadow:0 0 8px rgba(0,212,255,0.3);
}
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:7px; }
.footer-col ul a {
  color:rgba(255,255,255,0.35); font-size:0.8rem;
  transition:all var(--transition-fast);
  display:inline-flex; align-items:center; gap:8px;
}
.footer-col ul a svg { opacity:0; transition:all var(--transition-fast); transform:translateX(-4px); }
.footer-col ul a:hover { color:var(--accent-cyan); transform:translateX(4px); }
.footer-col ul a:hover svg { opacity:1; transform:translateX(0); }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.04);
  padding:14px 20px;
  max-width:1600px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; font-size:0.76rem;
}
.footer-bottom-left p { color:rgba(255,255,255,0.3); }
.footer-bottom-center { color:rgba(255,255,255,0.3); font-size:0.8rem; }
.footer-bottom-links { display:flex; gap:24px; }
.footer-bottom-links a { color:rgba(255,255,255,0.3); font-size:0.8rem; }
.footer-bottom-links a:hover { color:var(--accent-cyan); }

@media (max-width:1024px) {
  .footer-newsletter-inner { flex-direction:column; text-align:center; }
  .footer-newsletter-text { flex-direction:column; }
  .footer-newsletter-form { width:100%; }
  .footer-newsletter-form input[type="email"] { min-width:auto; flex:1; }
}
@media (max-width:768px) {
  .footer-main { grid-template-columns:1fr 1fr; gap:20px; }
  .footer-brand { grid-column:1/-1; }
}
@media (max-width:480px) {
  .footer-main { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
}

/* ============================================
   SINGLE POST / ARTICLE
   ============================================ */
.single-post-wrapper { margin-top:64px; background:var(--bg-primary); }
.single-post-header { background:var(--bg-hero); padding:50px 16px 36px; text-align:center; position:relative; overflow:hidden; }
.single-post-header .hero-orb { opacity:0.15; }
.single-post-header .post-categories { position:relative; z-index:5; margin-bottom:14px; }
.single-post-header .post-categories a { display:inline-block; padding:4px 12px; background:linear-gradient(135deg,rgba(0,212,255,0.9),rgba(124,58,237,0.9)); color:#fff; font-size:0.72rem; font-weight:600; border-radius:50px; text-transform:uppercase; margin:0 4px; }
.single-post-header h1 { position:relative; z-index:5; font-size:clamp(1.7rem,4vw,2.6rem); font-weight:800; color:#ffffff; max-width:800px; margin:0 auto 18px; line-height:1.3; }
.single-post-header .post-meta { position:relative; z-index:5; display:flex; align-items:center; justify-content:center; gap:14px; color:rgba(255,255,255,0.55); font-size:0.85rem; flex-wrap:wrap; }
.single-post-header .post-meta .separator { width:4px; height:4px; background:rgba(255,255,255,0.2); border-radius:50%; }

/* Post content */
.single-post-content { max-width:800px; margin:0 auto; padding:40px 20px; }
.single-post-content h2 { font-size:1.6rem; font-weight:700; margin:32px 0 16px; color:var(--text-primary); }
.single-post-content h3 { font-size:1.3rem; font-weight:600; margin:24px 0 12px; color:var(--text-primary); }
.single-post-content p { margin-bottom:18px; color:var(--text-secondary); line-height:1.8; }
.single-post-content a { color:var(--accent-cyan); border-bottom:1px solid rgba(0,212,255,0.2); }
.single-post-content a:hover { border-bottom-color:var(--accent-cyan); }
.single-post-content blockquote {
  border-left:3px solid; border-image:linear-gradient(180deg,#00d4ff,#7c3aed) 1;
  padding:16px 24px; margin:24px 0;
  background:rgba(0,212,255,0.04);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic; color:var(--text-secondary);
}
.single-post-content img { border-radius:var(--radius-md); margin:24px 0; box-shadow:var(--shadow-lg); }
.single-post-content ul, .single-post-content ol { margin:16px 0; padding-left:24px; color:var(--text-secondary); }
.single-post-content li { margin-bottom:8px; }
.single-post-content code { background:rgba(0,212,255,0.08); padding:2px 6px; border-radius:4px; font-size:0.9em; color:var(--accent-cyan); }
.single-post-content pre { background:rgba(0,0,0,0.3); padding:20px; border-radius:var(--radius-md); overflow-x:auto; border:1px solid var(--border-light); margin:24px 0; }
.single-post-content pre code { background:none; padding:0; }

/* Post tags */
.post-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; padding-top:24px; border-top:1px solid var(--border-light); }
.post-tags a {
  display:inline-block; padding:5px 14px; border-radius:50px;
  background:rgba(0,212,255,0.06); border:1px solid rgba(0,212,255,0.12);
  font-size:0.78rem; color:var(--accent-cyan);
  transition:all var(--transition-fast);
}
.post-tags a:hover { background:rgba(0,212,255,0.12); border-color:rgba(0,212,255,0.25); }

/* Post navigation */
.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; padding-top:24px; border-top:1px solid var(--border-light); }
.post-nav a {
  display:block; padding:16px; border-radius:var(--radius-md);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  transition:all var(--transition-fast);
}
.post-nav a:hover { border-color:rgba(0,212,255,0.2); }
.post-nav .nav-label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.post-nav .nav-title { font-size:0.9rem; color:var(--text-primary); font-weight:600; }
.post-nav .nav-next { text-align:right; }

/* Sidebar */
.single-post-layout { display:grid; grid-template-columns:1fr 320px; gap:32px; max-width:1200px; margin:0 auto; padding:40px 20px; }
.single-post-sidebar { position:sticky; top:84px; height:fit-content; }

.sidebar-widget {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); padding:20px;
  margin-bottom:20px; backdrop-filter:blur(16px);
  box-shadow:var(--glass-shadow);
}
.sidebar-widget h3 {
  font-size:0.92rem; font-weight:700; margin-bottom:14px; color:var(--text-primary);
  padding-bottom:10px; border-bottom:1px solid var(--border-light);
  position:relative;
}
.sidebar-widget h3::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:40px; height:2px;
  background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));
  border-radius:1px;
}
.sidebar-widget ul { list-style:none; }
.sidebar-widget li { margin-bottom:8px; }
.sidebar-widget a { color:var(--text-secondary); font-size:0.84rem; transition:all var(--transition-fast); display:block; padding:6px 0; }
.sidebar-widget a:hover { color:var(--accent-cyan); transform:translateX(4px); }

@media (max-width:1024px) {
  .single-post-layout { grid-template-columns:1fr; }
  .single-post-sidebar { position:static; }
}

/* ============================================
   ANIMATIONS - KEYFRAMES
   ============================================ */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.5); } }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes float { 0%,100% { transform:translate(0,0); } 25% { transform:translate(20px,-20px); } 50% { transform:translate(-10px,20px); } 75% { transform:translate(15px,10px); } }
@keyframes ticker-scroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes textGlow { 0%,100% { text-shadow:0 0 20px rgba(0,212,255,0.3),0 0 40px rgba(124,58,237,0.2); } 50% { text-shadow:0 0 40px rgba(0,212,255,0.5),0 0 80px rgba(124,58,237,0.3); } }
@keyframes borderGlow { 0%,100% { border-color:rgba(0,212,255,0.08); box-shadow:0 0 0 rgba(0,212,255,0); } 50% { border-color:rgba(0,212,255,0.2); box-shadow:0 0 15px rgba(0,212,255,0.06); } }
@keyframes auroraShift { 0% { transform:translate(0,0) rotate(0deg); } 50% { transform:translate(-3%,2%) rotate(2deg); } 100% { transform:translate(0,0) rotate(0deg); } }
@keyframes gradientShift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes holoSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes neonPulse { 0%,100% { box-shadow:0 0 5px rgba(0,212,255,0.2),0 0 10px rgba(124,58,237,0.1); } 50% { box-shadow:0 0 20px rgba(0,212,255,0.4),0 0 40px rgba(124,58,237,0.2); } }

/* New fluid animation keyframes */
@keyframes morphBlob1 {
  0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; transform:translate(-50%,-50%) scale(1); }
  25% { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; transform:translate(-50%,-50%) scale(1.05); }
  50% { border-radius:50% 60% 30% 60%/30% 60% 70% 40%; transform:translate(-50%,-50%) scale(0.95); }
  75% { border-radius:60% 30% 60% 40%/60% 40% 60% 30%; transform:translate(-50%,-50%) scale(1.02); }
}
@keyframes morphBlob2 {
  0%,100% { transform:translate(0,0) scale(1); border-radius:40% 60% 60% 40%/60% 40% 40% 60%; }
  33% { transform:translate(20px,-30px) scale(1.1); border-radius:60% 40% 40% 60%/40% 60% 60% 40%; }
  66% { transform:translate(-15px,20px) scale(0.9); border-radius:50% 50% 50% 50%/50% 50% 50% 50%; }
}
@keyframes morphSpin { from { transform:translate(-50%,-50%) rotate(0deg); } to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes borderRotate { from { --angle:0deg; } to { --angle:360deg; } }
@keyframes sectionAuroraPulse {
  0% { opacity:1; }
  50% { opacity:0.6; }
  100% { opacity:1; }
}
@keyframes borderGlowPulse {
  0%,100% { box-shadow:0 0 8px rgba(0,212,255,0.2); }
  50% { box-shadow:0 0 16px rgba(0,212,255,0.4); }
}
@keyframes ctaPulse {
  0% { opacity:1; }
  100% { opacity:0.7; }
}
@keyframes waveShift {
  0%,100% { d:path("M0,40 C200,20 400,60 600,35 C800,10 1000,50 1200,30 C1400,10 1600,45 1800,25 L1800,80 L0,80 Z"); }
  50% { d:path("M0,35 C200,50 400,15 600,45 C800,60 1000,20 1200,40 C1400,55 1600,15 1800,35 L1800,80 L0,80 Z"); }
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal, .reveal-left, .reveal-scale, .reveal-right { opacity:0; transition:all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal { transform:translateY(40px); }
.reveal-left { transform:translateX(-40px); }
.reveal-right { transform:translateX(40px); }
.reveal-scale { transform:scale(0.92); }

.reveal.visible, .reveal-left.visible, .reveal-scale.visible, .reveal-right.visible {
  opacity:1; transform:translate(0,0) scale(1);
}

.stagger-children > * { opacity:0; transform:translateY(30px); transition:all 0.6s cubic-bezier(0.4,0,0.2,1); }
.stagger-children.visible > * { opacity:1; transform:translateY(0); }
.stagger-children.visible > *:nth-child(1) { transition-delay:0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay:0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay:0.15s; }
.stagger-children.visible > *:nth-child(4) { transition-delay:0.2s; }
.stagger-children.visible > *:nth-child(5) { transition-delay:0.25s; }
.stagger-children.visible > *:nth-child(6) { transition-delay:0.3s; }
.stagger-children.visible > *:nth-child(7) { transition-delay:0.35s; }
.stagger-children.visible > *:nth-child(8) { transition-delay:0.4s; }
.stagger-children.visible > *:nth-child(9) { transition-delay:0.45s; }
.stagger-children.visible > *:nth-child(10) { transition-delay:0.5s; }

/* ============================================
   UTILITY
   ============================================ */
.screen-reader-text { border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important; }