/**
 * ╔════════════════════════════════════════════════════════════════════════════╗
 * ║                    HOW IT WORKS PAGE - CUSTOM STYLES                      ║
 * ║  Page-specific styles that extend zivvy-design-system.css                ║
 * ║  Note: This page uses Tailwind CDN for utility classes                   ║
 * ╚════════════════════════════════════════════════════════════════════════════╝
 */

/* =============================================================================
   BASE STYLES
   ============================================================================= */

body {
    background: hsl(240, 20%, 5%);
    font-family: "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
    font-size: var(--type-body-md);
    line-height: var(--line-normal);
}

/* =============================================================================
   TAILWIND OVERRIDES - Design System Typography
   Note: These override Tailwind CDN classes with design system values
   ============================================================================= */

/* Heading overrides */
h1, .text-4xl, .text-5xl, .text-6xl {
    font-size: var(--type-display-lg) !important;
    line-height: var(--line-tight) !important;
    letter-spacing: var(--tracking-tight) !important;
}

h2, .text-2xl, .text-3xl {
    font-size: var(--type-display-sm) !important;
    line-height: var(--line-snug) !important;
}

h3, .text-lg {
    font-size: var(--type-heading-2) !important;
    line-height: var(--line-snug) !important;
}

h4, .text-base {
    font-size: var(--type-body-md) !important;
    line-height: var(--line-normal) !important;
}

/* Text size overrides */
.text-xl {
    font-size: var(--type-body-lg) !important;
    line-height: var(--line-relaxed) !important;
}

.text-sm {
    font-size: var(--type-body-sm) !important;
    line-height: var(--line-normal) !important;
}

.text-xs {
    font-size: var(--type-body-xs) !important;
    line-height: var(--line-normal) !important;
}

/* Font weight overrides */
.font-extrabold { font-weight: var(--weight-black) !important; }
.font-bold { font-weight: var(--weight-bold) !important; }
.font-semibold { font-weight: var(--weight-semibold) !important; }
.font-medium { font-weight: var(--weight-medium) !important; }

/* Letter spacing overrides */
.tracking-wider { letter-spacing: var(--tracking-wider) !important; }
.tracking-wide { letter-spacing: var(--tracking-wide) !important; }

/* Line height overrides */
.leading-tight { line-height: var(--line-tight) !important; }
.leading-relaxed { line-height: var(--line-relaxed) !important; }

/* =============================================================================
   TYPOGRAPHY UTILITIES - Design System Integration
   ============================================================================= */

/* Display Sizes */
.text-display-xl { font-size: var(--type-display-xl); line-height: var(--line-tight); letter-spacing: var(--tracking-tight); }
.text-display-lg { font-size: var(--type-display-lg); line-height: var(--line-tight); letter-spacing: var(--tracking-tight); }
.text-display-md { font-size: var(--type-display-md); line-height: var(--line-tight); }
.text-display-sm { font-size: var(--type-display-sm); line-height: var(--line-snug); }

/* Heading Sizes */
.text-heading-1 { font-size: var(--type-heading-1); line-height: var(--line-snug); }
.text-heading-2 { font-size: var(--type-heading-2); line-height: var(--line-snug); }
.text-heading-3 { font-size: var(--type-heading-3); line-height: var(--line-snug); }

/* Body Sizes */
.text-body-lg { font-size: var(--type-body-lg); line-height: var(--line-relaxed); }
.text-body-md { font-size: var(--type-body-md); line-height: var(--line-normal); }
.text-body-sm { font-size: var(--type-body-sm); line-height: var(--line-normal); }
.text-body-xs { font-size: var(--type-body-xs); line-height: var(--line-normal); }

/* Font Weights */
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-black { font-weight: var(--weight-black); }

/* Letter Spacing */
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }

/* Line Heights */
.leading-tight { line-height: var(--line-tight); }
.leading-snug { line-height: var(--line-snug); }
.leading-normal { line-height: var(--line-normal); }
.leading-relaxed { line-height: var(--line-relaxed); }

/* =============================================================================
   GRADIENTS & TEXT EFFECTS
   ============================================================================= */

.gradient-gold {
    background: linear-gradient(180deg, hsl(48, 96%, 53%) 0%, hsl(38, 92%, 50%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================================================
   GLOW EFFECTS
   ============================================================================= */

.glow-purple {
    box-shadow: 0 0 80px 40px hsl(258, 90%, 66%, 0.15);
}

.glow-gold {
    box-shadow: 0 0 60px 20px hsl(48, 96%, 53%, 0.1);
}

/* =============================================================================
   FEATURE CARDS
   ============================================================================= */

.feature-card {
    background: hsl(240, 18%, 9%);
    border: 1px solid var(--zinc-800);
    transition: all 0.2s ease;
}

.feature-card:hover {
    border-color: hsl(258, 90%, 66%, 0.4);
    transform: translateY(-2px);
}

/* =============================================================================
   LIGHT SECTION CARDS
   ============================================================================= */

.testimonial-card-light {
    background: hsl(0, 0%, 100%);
    border: 1px solid var(--neutral-200);
    box-shadow: 0 2px 8px hsl(0, 0%, 0%, 0.06);
}

.other-card-light {
    background: hsl(36, 20%, 95%);
    border: 1px solid var(--stone-200);
    transition: all 0.3s ease;
}

.other-card-light:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px hsl(0, 0%, 0%, 0.12);
    border-color: var(--stone-300);
}

.zivvy-card-light {
    background: linear-gradient(135deg, hsl(258, 90%, 66%, 0.08) 0%, hsl(258, 90%, 66%, 0.02) 100%);
    border: 1px solid hsl(258, 90%, 66%, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.zivvy-card-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, hsl(258, 90%, 66%, 0.1), transparent);
    transition: left 0.5s ease;
}

.zivvy-card-light:hover::before {
    left: 100%;
}

.zivvy-card-light:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px hsl(258, 90%, 66%, 0.15);
    border-color: hsl(258, 90%, 66%, 0.4);
    background: linear-gradient(135deg, hsl(258, 90%, 66%, 0.12) 0%, hsl(258, 90%, 66%, 0.04) 100%);
}

/* =============================================================================
   BADGE
   ============================================================================= */

.badge {
    background: hsl(258, 90%, 66%, 0.15);
    border: 1px solid hsl(258, 90%, 66%, 0.3);
}

/* =============================================================================
   CTA BUTTONS
   ============================================================================= */

.cta-button {
    background: linear-gradient(180deg, hsl(48, 96%, 53%) 0%, hsl(45, 93%, 47%) 100%);
    box-shadow: 0 4px 20px hsl(48, 96%, 53%, 0.3);
    transition: all 0.2s ease;
}

.cta-button:hover {
    box-shadow: 0 6px 30px hsl(48, 96%, 53%, 0.4);
    transform: translateY(-1px);
}

.cta-button-secondary {
    background: transparent;
    border: 1px solid hsl(48, 96%, 53%, 0.5);
    color: hsl(48, 96%, 53%);
    transition: all 0.2s ease;
}

.cta-button-secondary:hover {
    background: hsl(48, 96%, 53%, 0.1);
    border-color: hsl(48, 96%, 53%);
}

/* =============================================================================
   CATEGORY BAR
   ============================================================================= */

.category-bar {
    width: 4px;
    border-radius: 2px;
}

/* =============================================================================
   INTEGRATION CARD - "KENNEDY TEXTURE" DESIGN
   ============================================================================= */

.integration-card {
    background: linear-gradient(180deg, hsl(258, 90%, 66%, 0.08) 0%, hsl(240, 20%, 5%, 0.95) 100%);
    border: 2px solid hsl(0, 84%, 60%, 0.4);
    box-shadow:
        0 0 0 1px hsl(0, 84%, 60%, 0.1),
        0 4px 40px hsl(0, 84%, 60%, 0.15),
        inset 0 1px 0 hsl(0, 0%, 100%, 0.03);
    position: relative;
    overflow: hidden;
}

/* Subtle noise texture overlay */
.integration-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Scan line effect for "screen capture" feel */
.integration-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        hsl(0, 0%, 100%, 0.01) 2px,
        hsl(0, 0%, 100%, 0.01) 4px
    );
    pointer-events: none;
}

.data-row {
    background: hsl(240, 20%, 5%, 0.7);
    border: 1px solid var(--zinc-800);
}

/* =============================================================================
   URGENT TIMESTAMP STYLING
   ============================================================================= */

.urgent-timestamp {
    background: hsl(0, 84%, 60%, 0.15);
    border: 1px solid hsl(0, 84%, 60%, 0.3);
    animation: timestamp-pulse 3s ease-in-out infinite;
}

@keyframes timestamp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* =============================================================================
   PULSE DOT ANIMATION
   ============================================================================= */

.pulse-dot {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 hsl(0, 84%, 60%, 0.7);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 8px hsl(0, 84%, 60%, 0);
    }
}

/* =============================================================================
   HANDWRITTEN ANNOTATION - "KENNEDY TEXTURE"
   ============================================================================= */

.handwritten-note {
    font-family: 'Caveat', cursive;
    transform: rotate(-2deg);
    position: relative;
    display: inline-block;
}

/* Bright highlighter background effect - irregular hand-drawn shape using clip-path */
.handwritten-note::before {
    content: '';
    position: absolute;
    left: -30px;
    right: -10px;
    top: 5%;
    bottom: 0%;
    background: var(--warning-primary);
    opacity: 0.25;
    transform: rotate(-1deg);
    z-index: -1;
    clip-path: polygon(
        2% 25%,
        8% 15%,
        15% 12%,
        25% 8%,
        35% 5%,
        45% 3%,
        55% 2%,
        65% 4%,
        75% 7%,
        85% 12%,
        92% 18%,
        98% 28%,
        99% 45%,
        98% 65%,
        95% 78%,
        88% 88%,
        78% 93%,
        68% 96%,
        55% 98%,
        42% 97%,
        30% 94%,
        20% 89%,
        12% 82%,
        6% 72%,
        3% 58%,
        1% 42%
    );
    filter: blur(1px);
}

/* Small dot accent */
.handwritten-note::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--warning-primary);
    border-radius: 50%;
    transform: translateY(-50%);
}