/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #000000;
    --bg-card: #0a0a0a;
    --bg-card-hover: #111111;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --accent-blue: #60a5fa;
    --accent-baby-blue: #93c5fd;
    --border-color: #1a1a1a;
    --border-hover: #2a2a2a;
    --bronze: #cd7f32;
    --silver: #c0c0c0;
    --gold: #ffd700;
    --btn-primary-bg: #60a5fa;
    --btn-primary-text: #000000;
    --btn-primary-hover: #3b82f6;
    --shadow-glow: 0 0 25px rgba(96, 165, 250, 0.35);
    --shadow-card: 0 4px 25px rgba(0, 0, 0, 0.6);
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --tier-spark: #ffffff;
    --tier-ignite: #a855f7;
    --tier-blaze: #3b82f6;
    --tier-legend: #ffd700;
}

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

/* ===== ICON (PNG IMAGE) ===== */
.nav-icon-hex {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.nav-icon-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 8px;
}

/* ===== NAVIGATION ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* NAV BRAND NAME - WHITE BOLD ONLY HERE */
.nav-brand-text {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.5px;
}

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

.nav-links > a, .nav-dropdown-toggle {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.3s ease;
    cursor: pointer;
}

.nav-links > a:hover, .nav-dropdown-toggle:hover {
    color: var(--accent-blue);
}

/* ===== NAV DROPDOWN ===== */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 8px 0;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-card);
    z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    color: var(--accent-blue);
    background: rgba(96, 165, 250, 0.05);
}

/* ===== ANIMATED BUBBLES ===== */
/* ===== ANIMATED PUZZLE PIECES ===== */
.puzzle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.puzzle-piece {
    position: absolute;
    opacity: 0.12;
    animation: puzzle-float linear infinite;
}

/* Puzzle Piece Shapes using clip-path */
.puzzle-1 { 
    width: 50px; height: 50px; 
    left: 8%; 
    animation-duration: 28s; animation-delay: 0s; 
    background: rgba(96, 165, 250, 0.4);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 70%, 40% 70%, 40% 100%, 0% 100%);
}
.puzzle-2 { 
    width: 70px; height: 70px; 
    left: 22%; 
    animation-duration: 35s; animation-delay: 2s; 
    background: rgba(168, 85, 247, 0.35);
    clip-path: polygon(30% 0%, 70% 0%, 70% 30%, 100% 30%, 100% 70%, 70% 70%, 70% 100%, 30% 100%, 30% 70%, 0% 70%, 0% 30%, 30% 30%);
}
.puzzle-3 { 
    width: 45px; height: 45px; 
    left: 38%; 
    animation-duration: 25s; animation-delay: 1s; 
    background: rgba(20, 184, 166, 0.35);
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 70% 60%, 70% 40%, 40% 40%, 40% 60%, 0% 60%);
}
.puzzle-4 { 
    width: 60px; height: 60px; 
    left: 52%; 
    animation-duration: 32s; animation-delay: 4s; 
    background: rgba(139, 92, 246, 0.35);
    clip-path: polygon(0% 30%, 30% 30%, 30% 0%, 70% 0%, 70% 30%, 100% 30%, 100% 70%, 70% 70%, 70% 100%, 30% 100%, 30% 70%, 0% 70%);
}
.puzzle-5 { 
    width: 55px; height: 55px; 
    left: 68%; 
    animation-duration: 22s; animation-delay: 3s; 
    background: rgba(245, 158, 11, 0.3);
    clip-path: polygon(40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%);
}
.puzzle-6 { 
    width: 65px; height: 65px; 
    left: 15%; 
    animation-duration: 30s; animation-delay: 6s; 
    background: rgba(6, 182, 212, 0.35);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 75%, 25% 75%, 25% 100%, 0% 100%);
}
.puzzle-7 { 
    width: 48px; height: 48px; 
    left: 45%; 
    animation-duration: 26s; animation-delay: 5s; 
    background: rgba(217, 70, 239, 0.3);
    clip-path: polygon(0% 0%, 75% 0%, 75% 25%, 100% 25%, 100% 100%, 25% 100%, 25% 75%, 0% 75%);
}
.puzzle-8 { 
    width: 72px; height: 72px; 
    left: 78%; 
    animation-duration: 34s; animation-delay: 7s; 
    background: rgba(99, 102, 241, 0.3);
    clip-path: polygon(25% 0%, 75% 0%, 75% 25%, 100% 25%, 100% 75%, 75% 75%, 75% 100%, 25% 100%, 25% 75%, 0% 75%, 0% 25%, 25% 25%);
}
.puzzle-9 { 
    width: 42px; height: 42px; 
    left: 58%; 
    animation-duration: 24s; animation-delay: 8s; 
    background: rgba(59, 130, 246, 0.35);
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 70% 50%, 70% 30%, 30% 30%, 30% 50%, 0% 50%);
}
.puzzle-10 { 
    width: 58px; height: 58px; 
    left: 88%; 
    animation-duration: 29s; animation-delay: 9s; 
    background: rgba(16, 185, 129, 0.3);
    clip-path: polygon(0% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 100%, 40% 100%, 40% 60%, 0% 60%);
}
.puzzle-11 { 
    width: 52px; height: 52px; 
    left: 32%; 
    animation-duration: 36s; animation-delay: 11s; 
    background: rgba(234, 179, 8, 0.3);
    clip-path: polygon(30% 0%, 70% 0%, 70% 30%, 100% 30%, 100% 70%, 70% 70%, 70% 100%, 30% 100%);
}
.puzzle-12 { 
    width: 62px; height: 62px; 
    left: 62%; 
    animation-duration: 31s; animation-delay: 13s; 
    background: rgba(37, 99, 235, 0.3);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 70%, 40% 70%, 40% 100%, 0% 100%);
}
.puzzle-13 { 
    width: 46px; height: 46px; 
    left: 5%; 
    animation-duration: 33s; animation-delay: 15s; 
    background: rgba(239, 68, 68, 0.25);
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 70% 60%, 70% 40%, 40% 40%, 40% 60%, 0% 60%);
}
.puzzle-14 { 
    width: 68px; height: 68px; 
    left: 82%; 
    animation-duration: 37s; animation-delay: 17s; 
    background: rgba(132, 204, 22, 0.25);
    clip-path: polygon(0% 0%, 75% 0%, 75% 25%, 100% 25%, 100% 100%, 25% 100%, 25% 75%, 0% 75%);
}
.puzzle-15 { 
    width: 44px; height: 44px; 
    left: 48%; 
    animation-duration: 27s; animation-delay: 19s; 
    background: rgba(148, 163, 184, 0.25);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 75%, 25% 75%, 25% 100%, 0% 100%);
}


/* ===== ANIMATED PUZZLE PIECES - REAL JIGSAW SHAPES WITH HIGH OPACITY ===== */
.puzzle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.puzzle-piece {
    position: absolute;
    opacity: 0.55;
    animation: puzzle-float linear infinite;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.15));
}

/* Real Jigsaw Puzzle Piece Shapes using SVG background */
.puzzle-1 { 
    width: 60px; height: 60px; 
    left: 5%; 
    animation-duration: 25s; animation-delay: 0s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 20 L20 35 Q20 45 30 45 L35 45 L35 55 L30 55 Q20 55 20 65 L20 80 L35 80 Q45 80 45 70 L45 65 L55 65 L55 70 Q55 80 65 80 L80 80 L80 65 Q80 55 70 55 L65 55 L65 45 L70 45 Q80 45 80 35 L80 20 L65 20 Q55 20 55 30 L55 35 L45 35 L45 30 Q45 20 35 20 Z' fill='%2360a5fa' fill-opacity='0.7'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-2 { 
    width: 75px; height: 75px; 
    left: 18%; 
    animation-duration: 32s; animation-delay: 2s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M25 15 L25 30 Q25 40 35 40 L40 40 L40 50 L35 50 Q25 50 25 60 L25 75 L40 75 Q50 75 50 65 L50 60 L60 60 L60 65 Q60 75 70 75 L85 75 L85 60 Q85 50 75 50 L70 50 L70 40 L75 40 Q85 40 85 30 L85 15 L70 15 Q60 15 60 25 L60 30 L50 30 L50 25 Q50 15 40 15 Z' fill='%23a855f7' fill-opacity='0.65'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-3 { 
    width: 55px; height: 55px; 
    left: 32%; 
    animation-duration: 28s; animation-delay: 4s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 25 L15 40 Q15 50 25 50 L30 50 L30 60 L25 60 Q15 60 15 70 L15 85 L30 85 Q40 85 40 75 L40 70 L50 70 L50 75 Q50 85 60 85 L75 85 L75 70 Q75 60 65 60 L60 60 L60 50 L65 50 Q75 50 75 40 L75 25 L60 25 Q50 25 50 35 L50 40 L40 40 L40 35 Q40 25 30 25 Z' fill='%2314b8a6' fill-opacity='0.65'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-4 { 
    width: 70px; height: 70px; 
    left: 48%; 
    animation-duration: 35s; animation-delay: 1s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 15 L20 30 Q20 40 30 40 L35 40 L35 50 L30 50 Q20 50 20 60 L20 75 L35 75 Q45 75 45 65 L45 60 L55 60 L55 65 Q55 75 65 75 L80 75 L80 60 Q80 50 70 50 L65 50 L65 40 L70 40 Q80 40 80 30 L80 15 L65 15 Q55 15 55 25 L55 30 L45 30 L45 25 Q45 15 35 15 Z' fill='%238b5cf6' fill-opacity='0.65'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-5 { 
    width: 65px; height: 65px; 
    left: 62%; 
    animation-duration: 22s; animation-delay: 6s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M25 20 L25 35 Q25 45 35 45 L40 45 L40 55 L35 55 Q25 55 25 65 L25 80 L40 80 Q50 80 50 70 L50 65 L60 65 L60 70 Q60 80 70 80 L85 80 L85 65 Q85 55 75 55 L70 55 L70 45 L75 45 Q85 45 85 35 L85 20 L70 20 Q60 20 60 30 L60 35 L50 35 L50 30 Q50 20 40 20 Z' fill='%23f59e0b' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-6 { 
    width: 80px; height: 80px; 
    left: 12%; 
    animation-duration: 30s; animation-delay: 8s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 20 L15 35 Q15 45 25 45 L30 45 L30 55 L25 55 Q15 55 15 65 L15 80 L30 80 Q40 80 40 70 L40 65 L50 65 L50 70 Q50 80 60 80 L75 80 L75 65 Q75 55 65 55 L60 55 L60 45 L65 45 Q75 45 75 35 L75 20 L60 20 Q50 20 50 30 L50 35 L40 35 L40 30 Q40 20 30 20 Z' fill='%2306b6d4' fill-opacity='0.65'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-7 { 
    width: 58px; height: 58px; 
    left: 42%; 
    animation-duration: 26s; animation-delay: 3s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 25 L20 40 Q20 50 30 50 L35 50 L35 60 L30 60 Q20 60 20 70 L20 85 L35 85 Q45 85 45 75 L45 70 L55 70 L55 75 Q55 85 65 85 L80 85 L80 70 Q80 60 70 60 L65 60 L65 50 L70 50 Q80 50 80 40 L80 25 L65 25 Q55 25 55 35 L55 40 L45 40 L45 35 Q45 25 35 25 Z' fill='%23d946ef' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-8 { 
    width: 85px; height: 85px; 
    left: 75%; 
    animation-duration: 38s; animation-delay: 5s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 18 L18 33 Q18 43 28 43 L33 43 L33 53 L28 53 Q18 53 18 63 L18 78 L33 78 Q43 78 43 68 L43 63 L53 63 L53 68 Q53 78 63 78 L78 78 L78 63 Q78 53 68 53 L63 53 L63 43 L68 43 Q78 43 78 33 L78 18 L63 18 Q53 18 53 28 L53 33 L43 33 L43 28 Q43 18 33 18 Z' fill='%236366f1' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-9 { 
    width: 52px; height: 52px; 
    left: 55%; 
    animation-duration: 24s; animation-delay: 10s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 22 L22 37 Q22 47 32 47 L37 47 L37 57 L32 57 Q22 57 22 67 L22 82 L37 82 Q47 82 47 72 L47 67 L57 67 L57 72 Q57 82 67 82 L82 82 L82 67 Q82 57 72 57 L67 57 L67 47 L72 47 Q82 47 82 37 L82 22 L67 22 Q57 22 57 32 L57 37 L47 37 L47 32 Q47 22 37 22 Z' fill='%233b82f6' fill-opacity='0.7'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-10 { 
    width: 68px; height: 68px; 
    left: 85%; 
    animation-duration: 29s; animation-delay: 7s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 20 L20 35 Q20 45 30 45 L35 45 L35 55 L30 55 Q20 55 20 65 L20 80 L35 80 Q45 80 45 70 L45 65 L55 65 L55 70 Q55 80 65 80 L80 80 L80 65 Q80 55 70 55 L65 55 L65 45 L70 45 Q80 45 80 35 L80 20 L65 20 Q55 20 55 30 L55 35 L45 35 L45 30 Q45 20 35 20 Z' fill='%2310b981' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-11 { 
    width: 62px; height: 62px; 
    left: 28%; 
    animation-duration: 33s; animation-delay: 12s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M25 15 L25 30 Q25 40 35 40 L40 40 L40 50 L35 50 Q25 50 25 60 L25 75 L40 75 Q50 75 50 65 L50 60 L60 60 L60 65 Q60 75 70 75 L85 75 L85 60 Q85 50 75 50 L70 50 L70 40 L75 40 Q85 40 85 30 L85 15 L70 15 Q60 15 60 25 L60 30 L50 30 L50 25 Q50 15 40 15 Z' fill='%23eab308' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-12 { 
    width: 72px; height: 72px; 
    left: 58%; 
    animation-duration: 31s; animation-delay: 14s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 18 L18 33 Q18 43 28 43 L33 43 L33 53 L28 53 Q18 53 18 63 L18 78 L33 78 Q43 78 43 68 L43 63 L53 63 L53 68 Q53 78 63 78 L78 78 L78 63 Q78 53 68 53 L63 53 L63 43 L68 43 Q78 43 78 33 L78 18 L63 18 Q53 18 53 28 L53 33 L43 33 L43 28 Q43 18 33 18 Z' fill='%232563eb' fill-opacity='0.65'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-13 { 
    width: 56px; height: 56px; 
    left: 8%; 
    animation-duration: 27s; animation-delay: 16s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 20 L20 35 Q20 45 30 45 L35 45 L35 55 L30 55 Q20 55 20 65 L20 80 L35 80 Q45 80 45 70 L45 65 L55 65 L55 70 Q55 80 65 80 L80 80 L80 65 Q80 55 70 55 L65 55 L65 45 L70 45 Q80 45 80 35 L80 20 L65 20 Q55 20 55 30 L55 35 L45 35 L45 30 Q45 20 35 20 Z' fill='%23ef4444' fill-opacity='0.55'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-14 { 
    width: 78px; height: 78px; 
    left: 82%; 
    animation-duration: 36s; animation-delay: 18s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M15 20 L15 35 Q15 45 25 45 L30 45 L30 55 L25 55 Q15 55 15 65 L15 80 L30 80 Q40 80 40 70 L40 65 L50 65 L50 70 Q50 80 60 80 L75 80 L75 65 Q75 55 65 55 L60 55 L60 45 L65 45 Q75 45 75 35 L75 20 L60 20 Q50 20 50 30 L50 35 L40 35 L40 30 Q40 20 30 20 Z' fill='%2384cc16' fill-opacity='0.55'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-15 { 
    width: 64px; height: 64px; 
    left: 38%; 
    animation-duration: 23s; animation-delay: 20s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 18 L22 33 Q22 43 32 43 L37 43 L37 53 L32 53 Q22 53 22 63 L22 78 L37 78 Q47 78 47 68 L47 63 L57 63 L57 68 Q57 78 67 78 L82 78 L82 63 Q82 53 72 53 L67 53 L67 43 L72 43 Q82 43 82 33 L82 18 L67 18 Q57 18 57 28 L57 33 L47 33 L47 28 Q47 18 37 18 Z' fill='%2394a3b8' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Extra puzzle pieces for more density */
.puzzle-16 { 
    width: 50px; height: 50px; 
    left: 68%; 
    animation-duration: 34s; animation-delay: 1s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 20 L20 35 Q20 45 30 45 L35 45 L35 55 L30 55 Q20 55 20 65 L20 80 L35 80 Q45 80 45 70 L45 65 L55 65 L55 70 Q55 80 65 80 L80 80 L80 65 Q80 55 70 55 L65 55 L65 45 L70 45 Q80 45 80 35 L80 20 L65 20 Q55 20 55 30 L55 35 L45 35 L45 30 Q45 20 35 20 Z' fill='%23f472b6' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-17 { 
    width: 66px; height: 66px; 
    left: 22%; 
    animation-duration: 29s; animation-delay: 9s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M25 15 L25 30 Q25 40 35 40 L40 40 L40 50 L35 50 Q25 50 25 60 L25 75 L40 75 Q50 75 50 65 L50 60 L60 60 L60 65 Q60 75 70 75 L85 75 L85 60 Q85 50 75 50 L70 50 L70 40 L75 40 Q85 40 85 30 L85 15 L70 15 Q60 15 60 25 L60 30 L50 30 L50 25 Q50 15 40 15 Z' fill='%23fb923c' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-18 { 
    width: 54px; height: 54px; 
    left: 92%; 
    animation-duration: 26s; animation-delay: 11s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 25 L20 40 Q20 50 30 50 L35 50 L35 60 L30 60 Q20 60 20 70 L20 85 L35 85 Q45 85 45 75 L45 70 L55 70 L55 75 Q55 85 65 85 L80 85 L80 70 Q80 60 70 60 L65 60 L65 50 L70 50 Q80 50 80 40 L80 25 L65 25 Q55 25 55 35 L55 40 L45 40 L45 35 Q45 25 35 25 Z' fill='%2322d3ee' fill-opacity='0.65'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-19 { 
    width: 74px; height: 74px; 
    left: 45%; 
    animation-duration: 37s; animation-delay: 13s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 20 L18 35 Q18 45 28 45 L33 45 L33 55 L28 55 Q18 55 18 65 L18 80 L33 80 Q43 80 43 70 L43 65 L53 65 L53 70 Q53 80 63 80 L78 80 L78 65 Q78 55 68 55 L63 55 L63 45 L68 45 Q78 45 78 35 L78 20 L63 20 Q53 20 53 30 L53 35 L43 35 L43 30 Q43 20 33 20 Z' fill='%23c084fc' fill-opacity='0.6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.puzzle-20 { 
    width: 48px; height: 48px; 
    left: 15%; 
    animation-duration: 21s; animation-delay: 15s; 
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 22 L22 37 Q22 47 32 47 L37 47 L37 57 L32 57 Q22 57 22 67 L22 82 L37 82 Q47 82 47 72 L47 67 L57 67 L57 72 Q57 82 67 82 L82 82 L82 67 Q82 57 72 57 L67 57 L67 47 L72 47 Q82 47 82 37 L82 22 L67 22 Q57 22 57 32 L57 37 L47 37 L47 32 Q47 22 37 22 Z' fill='%23fbbf24' fill-opacity='0.65'/%3E%3C/svg%3E") no-repeat center/contain;
}

@keyframes puzzle-float {
    0% { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    5% { opacity: 0.55; }
    95% { opacity: 0.55; }
    100% { transform: translateY(-120px) rotate(720deg); opacity: 0; }
}


/* ===== ROLLING FEEDBACK TICKER ===== */
.feedback-ticker-section {
    position: relative;
    z-index: 1;
    padding: 30px 0;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(96, 165, 250, 0.05) 20%, rgba(96, 165, 250, 0.05) 80%, rgba(0,0,0,0.95) 100%);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.ticker-label {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.feedback-ticker-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.feedback-ticker {
    display: flex;
    gap: 40px;
    animation: ticker-scroll 40s linear infinite;
    width: max-content;
    padding: 10px 0;
}

.feedback-ticker:hover {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 14px 24px;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.ticker-item:hover {
    border-color: var(--accent-blue);
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.15);
}

.ticker-flag { font-size: 1.4rem; }

.ticker-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.ticker-stars {
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* ===== HERO ===== */
.hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 140px 24px 60px;
    max-width: 800px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 24px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #93c5fd 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== HERO HOOK LINE ===== */
.hero-hook-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 50px;
    padding: 12px 24px;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hook-line-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.hook-line-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-baby-blue);
    line-height: 1.4;
}

.hero-cta { margin-top: 8px; }

.hero-cta-note {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(96, 165, 250, 0.5);
}

/* GENERATE BUTTON - SHINING BABY BLUE */
.btn-generate {
    background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #60a5fa 100%);
    background-size: 200% 200%;
    color: #000000;
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 0 25px rgba(96, 165, 250, 0.5), 0 0 50px rgba(147, 197, 253, 0.3), 0 0 75px rgba(147, 197, 253, 0.1);
    margin-top: 8px;
    animation: shine 3s ease-in-out infinite;
    border: 2px solid rgba(147, 197, 253, 0.5);
    position: relative;
    overflow: hidden;
}

.btn-generate::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

@keyframes shine {
    0%, 100% { 
        background-position: 0% 50%; 
        box-shadow: 0 0 25px rgba(96, 165, 250, 0.5), 0 0 50px rgba(147, 197, 253, 0.3), 0 0 75px rgba(147, 197, 253, 0.1);
    }
    50% { 
        background-position: 100% 50%; 
        box-shadow: 0 0 40px rgba(96, 165, 250, 0.8), 0 0 80px rgba(147, 197, 253, 0.5), 0 0 120px rgba(147, 197, 253, 0.2);
    }
}

.btn-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(96, 165, 250, 0.7), 0 0 70px rgba(147, 197, 253, 0.4);
}

.btn-generate:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    animation: none;
    background: #1f2937;
    box-shadow: none;
    border-color: #374151;
    color: #6b7280;
}

.btn-generate:disabled::before {
    display: none;
}

.btn-spark {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid var(--tier-spark);
    width: 100%;
}

.btn-spark:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-blue);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.btn-ignite {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #ffffff;
    width: 100%;
    font-weight: 700;
}

.btn-ignite:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4);
}

.btn-blaze {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    width: 100%;
    font-weight: 700;
}

.btn-blaze:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-legend {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 2px dashed var(--border-color);
    width: 100%;
    font-size: 0.9rem;
}

.btn-legend:hover {
    border-color: var(--tier-legend);
    color: var(--tier-legend);
}

.btn-waitlist {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: var(--shadow-glow);
}

.btn-waitlist:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(96, 165, 250, 0.5);
}

/* ===== AI ANALYSIS STEPS ===== */
.ai-analysis {
    margin-top: 20px;
    padding: 20px;
    background: rgba(96, 165, 250, 0.05);
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: var(--radius);
}

.analysis-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    opacity: 0.4;
    transition: all 0.5s ease;
}

.analysis-step.active {
    opacity: 1;
    color: var(--accent-baby-blue);
}

.analysis-step.completed {
    opacity: 0.7;
    color: #22c55e;
}

.analysis-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.analysis-step.active .analysis-dot {
    background: var(--accent-blue);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
    animation: pulse-dot 1s infinite;
}

.analysis-step.completed .analysis-dot {
    background: #22c55e;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ===== BITE SECTION (Free Tier Preview) ===== */
.bite-section {
    position: relative;
    z-index: 1;
    padding: 80px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

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

.bite-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 28px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.bite-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.15);
}

.bite-card.bite-locked {
    border-style: dashed;
    border-color: rgba(96, 165, 250, 0.3);
}

.bite-card.bite-locked:hover {
    border-style: solid;
    border-color: var(--accent-blue);
}

.bite-lock {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1.2rem;
    opacity: 0.7;
}

.bite-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.bite-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-baby-blue);
    margin-bottom: 8px;
}

.bite-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 12px;
    line-height: 1.5;
}

.bite-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 8px;
}


.bite-tag-blaze {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.bite-teaser {
    font-size: 0.85rem;
    color: var(--accent-blue);
    font-weight: 600;
    opacity: 0.8;
}

/* ===== BITE FORM GROUPS ===== */
.bite-form-group {
    position: relative;
}

.bite-label {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-blue);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}

/* ===== TOOLS SECTION ===== */
.tools-section {
    position: relative;
    z-index: 1;
    padding: 80px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.tool-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tool-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
}

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

.tool-hookbank::before { background: var(--tier-spark); }
.tool-captionlab::before { background: var(--tier-blaze); }
.tool-scriptdoctor::before { background: var(--tier-blaze); }

.tool-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.tool-name {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--accent-baby-blue);
}

.tool-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.tool-included {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.tier-tag {
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
}

.tier-spark {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tier-blaze {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* ===== STEPS SECTION ===== */
.steps-section {
    position: relative;
    z-index: 1;
    padding: 80px 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.steps-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    text-align: center;
    flex: 1;
    max-width: 280px;
    transition: all 0.3s ease;
}

.step-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-4px);
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    margin: 0 auto 16px;
}

.step-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.step-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--accent-baby-blue);
}

.step-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.step-arrow {
    font-size: 2rem;
    color: var(--accent-blue);
    font-weight: 700;
    animation: pulse-arrow 1.5s infinite ease-in-out;
}

@keyframes pulse-arrow {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(4px); }
}

/* ===== GENERATOR SECTION ===== */
.generator-section {
    position: relative;
    z-index: 1;
    padding: 40px 24px;
    max-width: 700px;
    margin: 0 auto;
}

.generator-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--shadow-card);
}

/* ALL HEADINGS - BABY BLUE */
.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 24px;
    text-align: center;
    color: var(--accent-baby-blue);
}

.section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 48px;
    font-size: 1.05rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-select {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

.form-select:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.form-select option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-select option:disabled {
    color: var(--text-muted);
    font-style: italic;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.form-hint a {
    color: var(--accent-blue);
    text-decoration: none;
}

.form-hint a:hover { text-decoration: underline; }

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

.platform-btn {
    padding: 12px 8px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.platform-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.platform-btn.active {
    background: rgba(96, 165, 250, 0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.platform-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed;
}

.platform-btn.locked:hover {
    border-color: var(--border-color);
    color: var(--text-muted);
}

.daily-limit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    background: rgba(96, 165, 250, 0.08);
    border-radius: var(--radius);
    border: 1px solid rgba(96, 165, 250, 0.15);
}

.limit-icon { font-size: 1rem; }

.limit-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

#usedCount {
    color: var(--accent-blue);
    font-weight: 700;
}

.limit-reached {
    margin-top: 16px;
    padding: 24px;
    background: rgba(248, 113, 113, 0.08);
    border-radius: var(--radius);
    border: 1px solid rgba(248, 113, 113, 0.2);
    text-align: center;
}

.limit-message .limit-emoji {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

.limit-message h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: var(--accent-baby-blue);
}

.limit-message p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* ===== RESULTS ===== */
.results-section { margin-top: 40px; }

.results-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    color: var(--accent-baby-blue);
}

.hooks-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hook-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

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

.hook-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.hook-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.hook-card.bronze::before { background: var(--bronze); }
.hook-card.silver::before { background: var(--silver); }
.hook-card.gold::before { background: var(--gold); }

.hook-rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.hook-rank.bronze {
    background: rgba(205, 127, 50, 0.15);
    color: var(--bronze);
}

.hook-rank.silver {
    background: rgba(192, 192, 192, 0.15);
    color: var(--silver);
}

.hook-rank.gold {
    background: rgba(255, 215, 0, 0.15);
    color: var(--gold);
}

.hook-text {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.hook-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hook-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hook-tag {
    padding: 4px 10px;
    background: var(--bg-primary);
    border-radius: 50px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.btn-copy {
    padding: 8px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-copy:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.btn-copy.copied {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
}

/* ===== FAVORITES & HISTORY BITE ===== */
.favorites-bite, .history-bite {
    margin-top: 32px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.bite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-weight: 700;
    color: var(--accent-baby-blue);
    font-size: 1rem;
}

.bite-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.favorites-container, .history-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fav-item, .hist-item {
    padding: 12px 16px;
    background: var(--bg-primary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fav-item .fav-star {
    color: #fbbf24;
    cursor: pointer;
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 20px;
}

/* ===== DAILY CHALLENGE ===== */
.challenge-section {
    position: relative;
    z-index: 1;
    padding: 60px 24px;
    max-width: 800px;
    margin: 0 auto;
}

.challenge-card {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    text-align: center;
}

.challenge-badge {
    display: inline-block;
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.challenge-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.challenge-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 24px;
}

.challenge-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 24px;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent-baby-blue);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ===== PRICING ===== */
.pricing-section {
    position: relative;
    z-index: 1;
    padding: 80px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

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

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 28px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
}

.pricing-spark {
    border-color: rgba(255, 255, 255, 0.3);
}

.pricing-spark:hover {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.05);
}

.pricing-ignite {
    border-color: var(--tier-ignite);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.15);
}

.pricing-blaze {
    border-color: var(--tier-blaze);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.15);
}

.pricing-legend {
    border: 2px dashed var(--border-color);
    opacity: 0.95;
}

.pricing-legend:hover {
    border-color: var(--tier-legend);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #ffffff;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.pricing-header {
    text-align: center;
    margin-bottom: 24px;
}

.plan-name {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--accent-baby-blue);
}

.plan-price {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-primary);
}

.plan-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
}

.plan-coming-soon { margin-top: 8px; }

.question-mark {
    font-size: 3.5rem;
    display: block;
    animation: pulse 2s infinite ease-in-out;
    cursor: help;
}

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

.coming-soon-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 8px;
    font-weight: 500;
}

.legend-mystery {
    text-align: center;
    padding: 20px 0;
}

.legend-mystery p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.legend-teasers {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.teaser-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 215, 0, 0.05);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.teaser-icon {
    font-size: 1.2rem;
}

.teaser-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.feature-list {
    list-style: none;
    margin-bottom: 24px;
    flex-grow: 1;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.feature-list .check {
    color: #22c55e;
    font-weight: 700;
    font-size: 1rem;
    min-width: 20px;
}

.feature-list .cross {
    color: #ef4444;
    font-weight: 700;
    font-size: 1rem;
    min-width: 20px;
}

.pricing-footer { margin-top: auto; }

/* ===== COMPARISON TABLE ===== */
.comparison-section {
    position: relative;
    z-index: 1;
    padding: 80px 24px;
    max-width: 900px;
    margin: 0 auto;
}

.comparison-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: 40px;
    box-shadow: var(--shadow-card);
}

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

.comparison-table thead th {
    background: var(--bg-primary);
    padding: 16px 20px;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.comparison-table tbody td {
    padding: 14px 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

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

.comparison-table tbody tr:hover td {
    background: rgba(96, 165, 250, 0.05);
}

.comparison-table .krealeo-col {
    background: rgba(96, 165, 250, 0.08);
    color: var(--text-primary);
    font-weight: 600;
}

.comparison-table thead th.krealeo-col {
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-baby-blue);
}

.comparison-table .check {
    color: #22c55e;
    font-weight: 700;
    margin-right: 6px;
}

.comparison-table .cross {
    color: #ef4444;
    font-weight: 700;
    margin-right: 6px;
}

.comparison-badge {
    text-align: center;
    margin-top: 24px;
    padding: 12px 24px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 50px;
    display: inline-block;
    font-weight: 700;
    color: var(--accent-baby-blue);
    font-size: 0.95rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ===== WAITLIST SECTION ===== */
.waitlist-section {
    position: relative;
    z-index: 1;
    padding: 80px 24px;
    max-width: 700px;
    margin: 0 auto;
}

.waitlist-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 48px 32px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.waitlist-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.waitlist-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 32px;
}

.waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 450px;
    margin: 0 auto 24px;
}

.waitlist-input, .waitlist-select {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.waitlist-input:focus, .waitlist-select:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.waitlist-select option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ===== WAITLIST TRUST HOOKS ===== */
.waitlist-trust {
    margin-top: 24px;
    padding: 20px;
    background: rgba(96, 165, 250, 0.05);
    border-radius: var(--radius);
    border: 1px solid rgba(96, 165, 250, 0.1);
}

.trust-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    text-align: left;
}

.trust-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.trust-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.5;
    font-style: italic;
}

/* ===== MODAL ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.modal-content {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 40px;
    max-width: 450px;
    width: 90%;
    z-index: 1001;
    text-align: center;
}

.bite-modal-content {
    max-width: 500px;
    text-align: left;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.modal-content h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--accent-baby-blue);
}

.modal-content p {
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.waitlist-form-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.form-input::placeholder { color: var(--text-muted); }

.waitlist-success {
    padding: 20px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--radius);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.success-emoji {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 8px;
}

.waitlist-success p {
    color: #22c55e;
    font-weight: 600;
    margin: 0;
}

/* ===== FOOTER ===== */
.footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 60px 24px 40px;
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
}

/* FOOTER BRAND - WHITE BOLD */
.footer-brand {
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 8px;
    color: #ffffff;
}

.footer-text {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

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

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

.footer-copy {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.footer-disclaimer {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 12px;
    opacity: 0.6;
}

/* ===== LEGAL SECTIONS ===== */
.legal-section {
    position: relative;
    z-index: 1;
    padding: 80px 24px;
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid var(--border-color);
}

.legal-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    box-shadow: var(--shadow-card);
}

.legal-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 8px;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-date {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 32px;
}

.legal-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-baby-blue);
    margin-top: 24px;
    margin-bottom: 12px;
}

.legal-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 16px;
}


/* ===== WATERMARK (Subtle branding on hook cards) ===== */
.hook-card::after {
    content: 'Krealeo';
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(96, 165, 250, 0.12);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.hook-card:hover::after {
    color: rgba(96, 165, 250, 0.25);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
    .bite-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .hero-hook-line { padding: 10px 16px; margin-bottom: 24px; }
    .hook-line-text { font-size: 0.85rem; }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

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

    .generator-card { padding: 24px 20px; }

    .waitlist-form { max-width: 100%; }

    .tools-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 40px auto 0;
    }

    .bite-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 40px auto 0;
    }

    .steps-grid { flex-direction: column; }

    .step-arrow {
        transform: rotate(90deg);
        animation: pulse-arrow-down 1.5s infinite ease-in-out;
    }

    @keyframes pulse-arrow-down {
        0%, 100% { opacity: 0.5; transform: rotate(90deg) translateY(0); }
        50% { opacity: 1; transform: rotate(90deg) translateY(4px); }
    }

    .comparison-table-wrapper { overflow-x: auto; }
    .comparison-table { min-width: 600px; }

    .feedback-ticker-wrapper {
        mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
    }

    .legal-container { padding: 30px 20px; }

    .challenge-stats {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1rem; }
    .plan-price { font-size: 2rem; }
    .ticker-item { padding: 10px 16px; }
    .ticker-text { font-size: 0.8rem; }
    .nav-icon-hex { width: 36px; height: 36px; }
    .nav-icon-img { width: 36px; height: 36px; }
}

html { scroll-behavior: smooth; }

::selection {
    background: rgba(96, 165, 250, 0.3);
    color: var(--text-primary);
}


/* ===== BITE PREVIEW DEMO STYLES ===== */
.bite-preview-demo {
    margin-top: 20px;
}

.demo-hook {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.demo-score-bar {
    width: 100%;
    height: 12px;
    background: var(--bg-primary);
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 8px;
}

.demo-score-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    border-radius: 50px;
    animation: fillBar 1s ease-out;
}

@keyframes fillBar {
    from { width: 0; }
}

.demo-score-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.demo-tips {
    background: rgba(96, 165, 250, 0.05);
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
}

.demo-tips p {
    font-weight: 600;
    color: var(--accent-baby-blue);
    margin-bottom: 8px;
}

.demo-tips ul {
    list-style: none;
    padding: 0;
}

.demo-tips li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}

.demo-tips li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
}

.demo-locked-msg {
    text-align: center;
    padding: 20px;
    background: rgba(168, 85, 247, 0.05);
    border: 1px dashed rgba(168, 85, 247, 0.3);
    border-radius: var(--radius);
}

.demo-locked-msg p {
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: 0.9rem;
}

/* Audience Simulator Demo */
.demo-audience {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.demo-persona {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
}

.demo-emoji {
    font-size: 1.5rem;
    margin-right: 8px;
}

.demo-name {
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 12px;
}

.demo-reaction {
    font-size: 0.85rem;
    font-weight: 600;
}

.demo-reaction.positive { color: #22c55e; }
.demo-reaction.neutral { color: #f59e0b; }
.demo-reaction.negative { color: #ef4444; }

.demo-feedback {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
    font-style: italic;
}

/* Hook Simulator Demo */
.sim-result {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.sim-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 16px;
}

.sim-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sim-value {
    font-weight: 700;
    color: var(--accent-baby-blue);
}

.sim-value.high { color: #22c55e; }

/* Seasonal Hooks Demo */
.seasonal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.seasonal-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
}

.seasonal-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.seasonal-item:nth-child(1) .seasonal-badge { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.seasonal-item:nth-child(2) .seasonal-badge { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.seasonal-item:nth-child(3) .seasonal-badge { background: rgba(168, 85, 247, 0.15); color: #c084fc; }

.seasonal-item p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Trend Simulator Demo */
.trend-prediction {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.trend-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
}

.trend-confidence {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.trend-confidence.high { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.trend-confidence.medium { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }

.trend-item p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Caption Lab Demo */
.caption-demo {
    margin-bottom: 20px;
}

.caption-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
}

.caption-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.5;
}

.caption-meta {
    display: flex;
    gap: 12px;
}

.caption-score, .caption-cta {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 50px;
    font-weight: 600;
}

.caption-score { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.caption-cta { background: rgba(34, 197, 94, 0.15); color: #22c55e; }

/* Hook Actions (Fav + Copy) */
.hook-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-fav {
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-fav:hover {
    border-color: #fbbf24;
    color: #fbbf24;
}

.btn-fav.favorited {
    border-color: #fbbf24;
    color: #fbbf24;
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top-color: #000000;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== BEST HOOK CARD (Blue Border + Glow) ===== */
.hook-best-card {
    background: var(--bg-card);
    border: 2px solid var(--accent-blue);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.5s ease forwards;
    box-shadow: 0 0 25px rgba(96, 165, 250, 0.35), 0 0 60px rgba(96, 165, 250, 0.15);
    margin-bottom: 16px;
}

.hook-best-card:hover {
    box-shadow: 0 0 35px rgba(96, 165, 250, 0.5), 0 0 80px rgba(96, 165, 250, 0.25);
    transform: translateY(-2px);
}

.hook-best-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #60a5fa, #93c5fd, #60a5fa);
}

.hook-best-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(147, 197, 253, 0.2));
    border: 1px solid rgba(96, 165, 250, 0.5);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--accent-baby-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(96, 165, 250, 0.3); }
    50% { box-shadow: 0 0 20px rgba(96, 165, 250, 0.6); }
}

.hook-best-text {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.hook-best-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-copy-best {
    padding: 12px 24px;
    background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
    border: none;
    border-radius: var(--radius);
    color: #000000;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
}

.btn-copy-best:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(96, 165, 250, 0.6);
}

.btn-copy-best.copied {
    background: rgba(34, 197, 94, 0.9);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

/* ===== COPY NUDGE (Appears after copy) ===== */
.copy-nudge {
    margin-top: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(96, 165, 250, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: var(--radius);
    animation: fadeInUp 0.4s ease forwards;
}

.copy-nudge-alt {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(96, 165, 250, 0.05));
    border: 1px dashed rgba(168, 85, 247, 0.2);
    margin-top: 12px;
    padding: 12px 16px;
}

.nudge-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.nudge-icon {
    font-size: 1.1rem;
}

.nudge-count {
    color: var(--accent-blue);
    font-weight: 700;
}

.nudge-upgrade {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.nudge-fire {
    font-size: 1rem;
}

.btn-nudge-upgrade {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-nudge-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4);
}

/* ===== EXPANDABLE: 2 MORE OPTIONS ===== */
.more-options-wrapper {
    margin-top: 16px;
}

.more-options-toggle {
    width: 100%;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: left;
}

.more-options-toggle:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(96, 165, 250, 0.05);
}

.more-options-content {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: fadeInUp 0.4s ease forwards;
}

/* ===== ALTERNATIVE HOOK CARDS (85% opacity, dashed) ===== */
.hook-card-alt {
    background: var(--bg-card);
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-lg);
    padding: 20px;
    opacity: 0.85;
    transition: all 0.3s ease;
    position: relative;
    animation: fadeInUp 0.4s ease forwards;
}

.hook-card-alt:hover {
    opacity: 1;
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.hook-alt-rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    background: rgba(205, 127, 50, 0.15);
    color: var(--bronze);
}

.hook-alt-text {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 14px;
    color: var(--text-secondary);
}

.hook-alt-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-fav-alt {
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-fav-alt:hover {
    border-color: #fbbf24;
    color: #fbbf24;
}

.btn-fav-alt.favorited {
    border-color: #fbbf24;
    color: #fbbf24;
}

.btn-copy-alt {
    padding: 6px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-copy-alt:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.btn-copy-alt.copied {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    color: #22c55e;
}