/* Promotional Security Report Page - Techno AI Agentic Vibe */
/* Standalone promotional experience - need not match main site */

body.page-promo {
    background: #0a0e17;
    color: #e2e8f0;
    min-height: 100vh;
}

/* Animated gradient background */
body.page-promo::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(6, 182, 212, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 90% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 10% 80%, rgba(34, 211, 238, 0.15) 0%, transparent 50%);
    animation: promo-bg-pulse 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes promo-bg-pulse {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* Grid overlay */
body.page-promo::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
        linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Logo - use light version on dark promo background */
body.page-promo .logo-light {
    display: none;
}
body.page-promo .logo-dark {
    display: block;
}

/* Nav override for dark promo */
body.page-promo .navbar {
    background: rgba(10, 14, 23, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
}

body.page-promo .nav-links a,
body.page-promo .footer a,
body.page-promo .footer-column-title {
    color: #94a3b8;
}

body.page-promo .nav-links a:hover,
body.page-promo .footer a:hover {
    color: #22d3ee;
}

body.page-promo .cta-button {
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    color: white;
    border: none;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

body.page-promo .cta-button:hover {
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.6);
}

/* Main content above background */
body.page-promo main {
    position: relative;
    z-index: 1;
}

/* Hero - techno style */
body.page-promo .blog-hero-compact {
    background: transparent;
    padding: 7rem 0 2rem;
}

.promo-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #06b6d4;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(6, 182, 212, 0.5);
    border-radius: 999px;
    margin-bottom: 1rem;
    animation: promo-badge-pulse 2s ease-in-out infinite;
}

@keyframes promo-badge-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 15px rgba(6, 182, 212, 0.3); }
    50% { opacity: 0.9; box-shadow: 0 0 25px rgba(6, 182, 212, 0.5); }
}

.promo-hero-sub {
    margin-top: 0.75rem;
    font-size: 1rem;
    color: #94a3b8;
    font-weight: 500;
}

body.page-promo .blog-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    background: linear-gradient(135deg, #e2e8f0 0%, #22d3ee 50%, #a78bfa 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: promo-text-shimmer 4s ease-in-out infinite;
    letter-spacing: -0.02em;
}

@keyframes promo-text-shimmer {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Section background */
body.page-promo .security-report-section {
    background: transparent;
    padding: 2rem 0 3rem;
}

/* Form card - glassmorphism + neon glow */
body.page-promo .security-report-card {
    position: relative;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 20px;
    box-shadow: 
        0 0 40px rgba(6, 182, 212, 0.15),
        0 0 80px rgba(139, 92, 246, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 2.5rem 2.75rem;
}

body.page-promo .security-report-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #06b6d4, #8b5cf6, transparent);
    animation: promo-scan-line 4s ease-in-out infinite;
}

@keyframes promo-scan-line {
    0% { left: -100%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 200%; opacity: 0; }
}

body.page-promo .security-report-card:hover {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 50px rgba(6, 182, 212, 0.2);
}

body.page-promo .security-report-form .form-group label {
    color: #cbd5e1;
}

body.page-promo .security-report-form input,
body.page-promo .security-report-form select {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
    color: #e2e8f0 !important;
}

body.page-promo .security-report-form input::placeholder {
    color: #64748b !important;
}

body.page-promo .security-report-form input:focus,
body.page-promo .security-report-form select:focus {
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important;
}

body.page-promo .security-report-form .required {
    color: #22d3ee;
}

body.page-promo .security-report-form .form-group-checkbox span {
    color: #94a3b8;
}

/* Submit button - glowing CTA */
body.page-promo .security-report-submit {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #8b5cf6 100%) !important;
    background-size: 200% 200% !important;
    color: white !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 1rem 2rem !important;
    border-radius: 12px !important;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.5) !important;
    animation: promo-cta-glow 3s ease-in-out infinite;
}

body.page-promo .security-report-submit:not(:disabled):hover {
    box-shadow: 0 0 50px rgba(6, 182, 212, 0.7) !important;
}

@keyframes promo-cta-glow {
    0%, 100% { box-shadow: 0 0 30px rgba(6, 182, 212, 0.5) !important; }
    50% { box-shadow: 0 0 45px rgba(6, 182, 212, 0.7) !important; }
}

/* Disclaimer */
body.page-promo .security-report-disclaimer {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 12px;
}

body.page-promo .security-report-disclaimer h3 {
    color: #22d3ee;
}

body.page-promo .security-report-disclaimer p {
    color: #94a3b8;
}

/* What to Expect section */
body.page-promo .security-report-preview {
    border-top-color: rgba(6, 182, 212, 0.2);
}

body.page-promo .report-preview-title {
    color: #e2e8f0;
    font-weight: 800;
}

body.page-promo .report-preview-intro {
    color: #94a3b8;
}

/* Flipbook - neon frame */
body.page-promo .flipbook-page-inner {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.15);
}

body.page-promo .flipbook-page-label {
    background: rgba(6, 182, 212, 0.1);
    color: #22d3ee;
    border-top: 1px solid rgba(6, 182, 212, 0.2);
}

body.page-promo .flipbook-spine {
    background: linear-gradient(180deg, #06b6d4 0%, #8b5cf6 50%, #06b6d4 100%);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
}

body.page-promo .flipbook-btn {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #22d3ee;
}

body.page-promo .flipbook-btn:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: #06b6d4;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

body.page-promo .flipbook-counter {
    color: #94a3b8;
}

/* Footer */
body.page-promo .footer {
    background: rgba(10, 14, 23, 0.95);
    border-top: 1px solid rgba(6, 182, 212, 0.15);
}

body.page-promo .footer-brand,
body.page-promo .footer-tagline {
    color: #94a3b8;
}

/* Hide theme toggle on promo - force dark */
body.page-promo .theme-toggle {
    display: none;
}

/* Floating accent orbs - subtle */
.promo-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.promo-orb-1 {
    width: 400px;
    height: 400px;
    background: #06b6d4;
    top: -100px;
    right: -100px;
    animation: promo-orb-float 12s ease-in-out infinite;
}

.promo-orb-2 {
    width: 300px;
    height: 300px;
    background: #8b5cf6;
    bottom: 20%;
    left: -80px;
    animation: promo-orb-float 15s ease-in-out infinite reverse;
}

@keyframes promo-orb-float {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -30px); }
    66% { transform: translate(-20px, 20px); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    body.page-promo::before,
    .promo-badge,
    body.page-promo .blog-hero-title,
    body.page-promo .security-report-submit,
    body.page-promo .security-report-card::before,
    .promo-orb-1,
    .promo-orb-2 {
        animation: none !important;
    }
}