/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES — DARK THEME (default)
═══════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
    --bg-page:        #0a0f1e;
    --bg-hero:        #020817;
    --bg-section-1:   #0a0f1e;
    --bg-section-2:   #070c1a;
    --bg-nav:         rgba(7, 12, 26, 0.85);
    --bg-card:        rgba(255, 255, 255, 0.03);
    --bg-card-hover:  rgba(255, 255, 255, 0.06);
    --border-card:    rgba(255, 255, 255, 0.07);
    --border-nav:     rgba(255, 255, 255, 0.05);
    --text-primary:   #ffffff;
    --text-secondary: #94a3b8;
    --text-muted:     #475569;
    --text-nav:       #94a3b8;
    --text-nav-hover: #ffffff;
    --text-nav-active:#ffffff;
    --bg-nav-active:  rgba(255, 255, 255, 0.10);
    --grid-color:     rgba(99, 179, 237, 0.06);
    --orb-opacity:    0.30;
    --badge-bg:       rgba(255, 255, 255, 0.05);
    --badge-border:   rgba(255, 255, 255, 0.10);
    --mobile-menu-bg: rgba(13, 26, 58, 0.97);
    --mobile-menu-border: rgba(255, 255, 255, 0.10);
    --cta-card-bg:    linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.90) 100%);
    --cta-card-border:rgba(255, 255, 255, 0.08);
    --portfolio-card-bg: rgba(255, 255, 255, 0.03);
    --portfolio-card-border: rgba(255, 255, 255, 0.07);
    --why-card-bg:    rgba(255, 255, 255, 0.03);
    --why-card-border:rgba(255, 255, 255, 0.06);
    --footer-bg:      #030712;
    --footer-border:  #111827;
    --footer-text:    #6b7280;
    --footer-heading: #ffffff;
    --footer-link:    #6b7280;
    --footer-link-hover: #60a5fa;
    --scrollbar-thumb: rgba(255,255,255,0.15);
    --theme-icon-sun: block;
    --theme-icon-moon: none;
}

[data-theme="light"] {
    --bg-page:        #e8edf8;
    --bg-hero:        #dde4f5;
    --bg-section-1:   #e8edf8;
    --bg-section-2:   #dde4f5;
    --bg-nav:         rgba(255, 255, 255, 0.92);
    --bg-card:        #ffffff;
    --bg-card-hover:  #ffffff;
    --border-card:    rgba(37, 99, 235, 0.14);
    --border-nav:     rgba(0, 0, 0, 0.08);
    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --text-muted:     #64748b;
    --text-nav:       #374151;
    --text-nav-hover: #1e40af;
    --text-nav-active:#1e40af;
    --bg-nav-active:  rgba(37, 99, 235, 0.08);
    --grid-color:     rgba(37, 99, 235, 0.07);
    --orb-opacity:    0.18;
    --badge-bg:       rgba(37, 99, 235, 0.08);
    --badge-border:   rgba(37, 99, 235, 0.20);
    --mobile-menu-bg: rgba(255, 255, 255, 0.98);
    --mobile-menu-border: rgba(0, 0, 0, 0.10);
    --cta-card-bg:    linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
    --cta-card-border:rgba(37, 99, 235, 0.15);
    --portfolio-card-bg: #ffffff;
    --portfolio-card-border: rgba(37, 99, 235, 0.12);
    --why-card-bg:    #ffffff;
    --why-card-border:rgba(37, 99, 235, 0.12);
    --footer-bg:      #1e293b;
    --footer-border:  #334155;
    --footer-text:    #94a3b8;
    --footer-heading: #f1f5f9;
    --footer-link:    #94a3b8;
    --footer-link-hover: #60a5fa;
    --scrollbar-thumb: rgba(0,0,0,0.15);
    --theme-icon-sun: none;
    --theme-icon-moon: block;
}

/* ═══════════════════════════════════════════════════════════
   BASE ANIMATIONS
═══════════════════════════════════════════════════════════ */

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

@keyframes fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

@keyframes float-reverse {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, 30px) scale(0.9); }
    66% { transform: translate(20px, -20px) scale(1.1); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.05); }
}

@keyframes ping-slow {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes scroll-dot {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(12px); opacity: 0; }
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

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

@keyframes particle-drift {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(50px) rotate(360deg); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

input:focus, textarea:focus { outline: none; }

.animate-fade-in { animation: fade-in 0.6s ease-out both; }
.animate-fade-up { animation: fade-up 0.7s ease-out both; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
.animate-ping-slow { animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-scroll-dot { animation: scroll-dot 1.5s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════════ */

.hero-bg {
    background: linear-gradient(
        135deg,
        #020817 0%,
        #0a0f1e 30%,
        #0d1a3a 60%,
        #070c1a 100%
    );
}

.hero-grid {
    background-image:
        linear-gradient(to right, rgba(99, 179, 237, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(99, 179, 237, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}

.section-grid {
    background-image:
        linear-gradient(to right, rgba(99, 179, 237, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(99, 179, 237, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

.hero-orb-blue { background: radial-gradient(circle, #3b82f6, #1d4ed8, transparent); }
.hero-orb-purple { background: radial-gradient(circle, #8b5cf6, #6d28d9, transparent); }
.hero-orb-cyan { background: radial-gradient(circle, #06b6d4, #0891b2, transparent); }

/* Hero badge */
.hero-badge {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    backdrop-filter: blur(10px);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 4s ease infinite;
}

/* Hero CTA button */
.btn-primary-hero {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    background-size: 200% 200%;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4), 0 4px 20px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.btn-primary-hero:hover {
    background-position: right center;
    box-shadow: 0 0 50px rgba(59, 130, 246, 0.6), 0 8px 30px rgba(59, 130, 246, 0.4);
}

/* Floating particles */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particle-drift linear infinite;
}

.particle-1 {
    width: 4px; height: 4px;
    background: #60a5fa;
    left: 15%; bottom: 0;
    animation-duration: 12s;
    animation-delay: 0s;
    box-shadow: 0 0 8px #60a5fa;
}
.particle-2 {
    width: 3px; height: 3px;
    background: #a78bfa;
    left: 35%; bottom: 0;
    animation-duration: 15s;
    animation-delay: 3s;
    box-shadow: 0 0 6px #a78bfa;
}
.particle-3 {
    width: 5px; height: 5px;
    background: #34d399;
    left: 55%; bottom: 0;
    animation-duration: 10s;
    animation-delay: 1s;
    box-shadow: 0 0 10px #34d399;
}
.particle-4 {
    width: 3px; height: 3px;
    background: #f472b6;
    left: 70%; bottom: 0;
    animation-duration: 18s;
    animation-delay: 5s;
    box-shadow: 0 0 6px #f472b6;
}
.particle-5 {
    width: 4px; height: 4px;
    background: #fbbf24;
    left: 85%; bottom: 0;
    animation-duration: 13s;
    animation-delay: 2s;
    box-shadow: 0 0 8px #fbbf24;
}
.particle-6 {
    width: 3px; height: 3px;
    background: #60a5fa;
    left: 25%; bottom: 0;
    animation-duration: 16s;
    animation-delay: 7s;
    box-shadow: 0 0 6px #60a5fa;
}

/* ═══════════════════════════════════════════════════════════
   SECTION BADGE
═══════════════════════════════════════════════════════════ */

.section-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════════════════════════
   SERVICE CARDS
═══════════════════════════════════════════════════════════ */

.service-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
}

.service-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Blue card */
.service-card-blue:hover { border-color: rgba(59, 130, 246, 0.4); }
.service-card-glow-blue { background: radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.08) 0%, transparent 60%); }
.service-icon-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4); }
.service-corner-blue { background: linear-gradient(135deg, #3b82f6, #60a5fa); }

/* Featured (Telegram) card */
.service-card-featured {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 40%, #7c3aed 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 60px rgba(37, 99, 235, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Cyan card */
.service-card-cyan:hover { border-color: rgba(6, 182, 212, 0.4); }
.service-card-glow-cyan { background: radial-gradient(ellipse at top left, rgba(6, 182, 212, 0.08) 0%, transparent 60%); }
.service-icon-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4); }
.service-corner-cyan { background: linear-gradient(135deg, #06b6d4, #67e8f9); }

/* Amber card (PDF & OCR) */
.service-card-amber:hover { border-color: rgba(245, 158, 11, 0.4); }
.service-card-glow-amber { background: radial-gradient(ellipse at top left, rgba(245, 158, 11, 0.08) 0%, transparent 60%); }
.service-icon-amber { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4); }
.service-corner-amber { background: linear-gradient(135deg, #f59e0b, #fcd34d); }

/* Rose card (Bulk Contacts) */
.service-card-rose:hover { border-color: rgba(244, 63, 94, 0.4); }
.service-card-glow-rose { background: radial-gradient(ellipse at top left, rgba(244, 63, 94, 0.08) 0%, transparent 60%); }
.service-icon-rose { background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 8px 25px rgba(244, 63, 94, 0.4); }
.service-corner-rose { background: linear-gradient(135deg, #f43f5e, #fb7185); }

/* ═══════════════════════════════════════════════════════════
   WHY CHOOSE US CARDS
═══════════════════════════════════════════════════════════ */

.why-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.why-card-bg {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 1.5rem;
}

.why-card:hover .why-card-bg {
    background: rgba(255, 255, 255, 0.05);
}

.why-icon-speed { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4); }
.why-bar-speed { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.why-card-featured {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #4c1d95 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.3);
}

.why-icon-support { background: linear-gradient(135deg, #06b6d4, #0891b2); box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4); }
.why-bar-support { background: linear-gradient(90deg, #06b6d4, #67e8f9); }

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO CARDS — per-project theming
═══════════════════════════════════════════════════════════ */

/* Base card shell — no background here, each variant sets its own */
.pf-card {
    border: 1px solid rgba(255, 255, 255, 0.07);
    min-height: 320px;
}

/* Shared corner decoration */
.pf-corner { background: currentColor; }

/* ── Per-card shape colors ── */
.pf-dofamin .pf-shape-1   { background: rgba(212, 160, 40, 1); }
.pf-dofamin .pf-shape-2   { background: rgba(255, 210, 80, 1); }
.pf-cosmetolog .pf-shape-1 { background: rgba(40, 180, 100, 1); }
.pf-cosmetolog .pf-shape-2 { background: rgba(40, 180, 100, 1); }
.pf-visabot .pf-shape-1   { background: rgba(90, 130, 255, 1); }
.pf-visabot .pf-shape-2   { background: rgba(140, 170, 255, 1); }
.pf-rimtaxi .pf-shape-1   { background: rgba(140, 150, 170, 1); }
.pf-rimtaxi .pf-shape-2   { background: rgba(100, 110, 130, 1); }

/* ── Dofamin: золотий ── */
.pf-dofamin {
    background: linear-gradient(145deg, #5a3c08 0%, #3e2806 50%, #1e1408 80%, #121010 100%) !important;
    border-color: rgba(210, 160, 40, 0.55) !important;
    box-shadow: inset 0 1px 0 rgba(210, 160, 40, 0.12);
}
.pf-dofamin:hover { border-color: rgba(220, 170, 50, 0.90) !important; box-shadow: 0 20px 60px rgba(180, 130, 20, 0.40), inset 0 1px 0 rgba(220, 170, 50, 0.20); }
.pf-dofamin .pf-card-accent { background: radial-gradient(ellipse at top left, rgba(220, 170, 50, 0.30) 0%, transparent 60%); }
.pf-dofamin .pf-corner { color: #dca832; }
.pf-dofamin .pf-ring { box-shadow: 0 0 0 2px rgba(220, 170, 50, 0.55); }
.pf-dofamin:hover .pf-ring { box-shadow: 0 0 0 3px rgba(220, 170, 50, 0.90); }
.pf-dofamin .pf-tag { background: rgba(220, 170, 50, 0.25); color: #fde68a; border: 1px solid rgba(220, 170, 50, 0.55); }
.pf-dofamin .pf-btn { background: linear-gradient(135deg, #dca832, #b08020) !important; box-shadow: 0 4px 20px rgba(220, 170, 50, 0.50); }
.pf-dofamin .pf-btn:hover { box-shadow: 0 8px 32px rgba(220, 170, 50, 0.70); }

/* ── Cosmetolog: зелений ── */
.pf-cosmetolog {
    background: linear-gradient(145deg, #0e3c1e 0%, #0a2c14 50%, #061808 80%, #0a120c 100%) !important;
    border-color: rgba(40, 180, 100, 0.60) !important;
    box-shadow: inset 0 1px 0 rgba(40, 180, 100, 0.15);
}
.pf-cosmetolog:hover { border-color: rgba(40, 180, 100, 0.90) !important; box-shadow: 0 20px 60px rgba(30, 150, 80, 0.40), inset 0 1px 0 rgba(40, 180, 100, 0.20); }
.pf-cosmetolog .pf-card-accent { background: radial-gradient(ellipse at top left, rgba(40, 180, 100, 0.28) 0%, transparent 60%); }
.pf-cosmetolog .pf-corner { color: #28b464; }
.pf-cosmetolog .pf-ring { box-shadow: 0 0 0 2px rgba(40, 180, 100, 0.55); }
.pf-cosmetolog:hover .pf-ring { box-shadow: 0 0 0 3px rgba(40, 180, 100, 0.90); }
.pf-cosmetolog .pf-tag { background: rgba(40, 180, 100, 0.22); color: #6ee7b7; border: 1px solid rgba(40, 180, 100, 0.55); }
.pf-cosmetolog .pf-btn { background: linear-gradient(135deg, #1ea060, #157048) !important; box-shadow: 0 4px 20px rgba(30, 160, 96, 0.50); }
.pf-cosmetolog .pf-btn:hover { box-shadow: 0 8px 32px rgba(30, 160, 96, 0.70); }

/* ── VisaBot: синій ── */
.pf-visabot {
    background: linear-gradient(145deg, #0e1e58 0%, #0a1640 50%, #060c22 80%, #0a0d1a 100%) !important;
    border-color: rgba(90, 130, 255, 0.60) !important;
    box-shadow: inset 0 1px 0 rgba(90, 130, 255, 0.15);
}
.pf-visabot:hover { border-color: rgba(90, 130, 255, 0.90) !important; box-shadow: 0 20px 60px rgba(60, 100, 220, 0.40), inset 0 1px 0 rgba(90, 130, 255, 0.20); }
.pf-visabot .pf-card-accent { background: radial-gradient(ellipse at top left, rgba(90, 130, 255, 0.28) 0%, transparent 60%); }
.pf-visabot .pf-corner { color: #5a82ff; }
.pf-visabot .pf-ring { box-shadow: 0 0 0 2px rgba(90, 130, 255, 0.55); }
.pf-visabot:hover .pf-ring { box-shadow: 0 0 0 3px rgba(90, 130, 255, 0.90); }
.pf-visabot .pf-tag { background: rgba(90, 130, 255, 0.22); color: #a5b4fc; border: 1px solid rgba(90, 130, 255, 0.55); }
.pf-visabot .pf-btn { background: linear-gradient(135deg, #3a6aff, #2850d0) !important; box-shadow: 0 4px 20px rgba(58, 106, 255, 0.50); }
.pf-visabot .pf-btn:hover { box-shadow: 0 8px 32px rgba(58, 106, 255, 0.70); }

/* ── Rim Transfer: сіро-чорний ── */
.pf-rimtaxi {
    background: linear-gradient(145deg, #1e2028 0%, #16181e 50%, #0e1014 80%, #0a0c0e 100%) !important;
    border-color: rgba(160, 170, 190, 0.35) !important;
    box-shadow: inset 0 1px 0 rgba(160, 170, 190, 0.08);
}
.pf-rimtaxi:hover { border-color: rgba(160, 170, 190, 0.65) !important; box-shadow: 0 20px 60px rgba(100, 110, 130, 0.30), inset 0 1px 0 rgba(160, 170, 190, 0.12); }
.pf-rimtaxi .pf-card-accent { background: radial-gradient(ellipse at top left, rgba(160, 170, 190, 0.15) 0%, transparent 60%); }
.pf-rimtaxi .pf-corner { color: #8090a8; }
.pf-rimtaxi .pf-ring { box-shadow: 0 0 0 2px rgba(160, 170, 190, 0.35); }
.pf-rimtaxi:hover .pf-ring { box-shadow: 0 0 0 3px rgba(160, 170, 190, 0.65); }
.pf-rimtaxi .pf-tag { background: rgba(160, 170, 190, 0.14); color: #c8d0e0; border: 1px solid rgba(160, 170, 190, 0.35); }
.pf-rimtaxi .pf-btn { background: linear-gradient(135deg, #3a3e4a, #282c36) !important; box-shadow: 0 4px 20px rgba(80, 90, 110, 0.40); }
.pf-rimtaxi .pf-btn:hover { box-shadow: 0 8px 32px rgba(80, 90, 110, 0.60); }

/* ── Scrapels featured card ── */
.portfolio-card-featured {
    background: linear-gradient(135deg, #0a3a6e 0%, #082e58 40%, #061e3c 70%, #040e20 100%) !important;
    border: 1px solid rgba(56, 182, 255, 0.45) !important;
    box-shadow: 0 20px 60px rgba(10, 100, 200, 0.30), inset 0 1px 0 rgba(56, 182, 255, 0.12);
}

/* Legacy tags & buttons (kept for other pages) */
.portfolio-tag-blue   { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.2); }
.portfolio-tag-pink   { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; border: 1px solid rgba(236, 72, 153, 0.2); }
.portfolio-tag-violet { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.2); }
.portfolio-tag-amber  { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.2); }
.portfolio-tag-emerald{ background: rgba(52, 211, 153, 0.2);  color: #6ee7b7; border: 1px solid rgba(52, 211, 153, 0.3); }

.portfolio-btn-emerald {
    background: linear-gradient(135deg, #1e90ff, #0060d0);
    color: white;
    box-shadow: 0 4px 20px rgba(30, 144, 255, 0.35);
}
.portfolio-btn-emerald:hover { box-shadow: 0 8px 30px rgba(30, 144, 255, 0.55); }

/* ── Light theme overrides for pf-cards ── */
[data-theme="light"] .pf-dofamin {
    background: linear-gradient(145deg, rgba(196, 146, 42, 0.07) 0%, #ffffff 55%) !important;
    border-color: rgba(196, 146, 42, 0.30) !important;
    box-shadow: 0 2px 12px rgba(196, 146, 42, 0.10);
}
[data-theme="light"] .pf-dofamin:hover { box-shadow: 0 12px 40px rgba(196, 146, 42, 0.22) !important; border-color: rgba(196, 146, 42, 0.50) !important; }
[data-theme="light"] .pf-cosmetolog {
    background: linear-gradient(145deg, rgba(26, 92, 58, 0.07) 0%, #ffffff 55%) !important;
    border-color: rgba(34, 139, 86, 0.30) !important;
    box-shadow: 0 2px 12px rgba(34, 139, 86, 0.10);
}
[data-theme="light"] .pf-cosmetolog:hover { box-shadow: 0 12px 40px rgba(26, 92, 58, 0.22) !important; border-color: rgba(34, 139, 86, 0.50) !important; }
[data-theme="light"] .pf-visabot {
    background: linear-gradient(145deg, rgba(26, 47, 110, 0.07) 0%, #ffffff 55%) !important;
    border-color: rgba(59, 100, 220, 0.30) !important;
    box-shadow: 0 2px 12px rgba(59, 100, 220, 0.10);
}
[data-theme="light"] .pf-visabot:hover { box-shadow: 0 12px 40px rgba(26, 47, 110, 0.22) !important; border-color: rgba(59, 100, 220, 0.50) !important; }
[data-theme="light"] .pf-rimtaxi {
    background: linear-gradient(145deg, rgba(100, 110, 130, 0.08) 0%, #ffffff 55%) !important;
    border-color: rgba(100, 110, 130, 0.30) !important;
    box-shadow: 0 2px 12px rgba(80, 90, 110, 0.10);
}
[data-theme="light"] .pf-rimtaxi:hover { box-shadow: 0 12px 40px rgba(80, 90, 110, 0.22) !important; border-color: rgba(100, 110, 130, 0.50) !important; }
[data-theme="light"] .pf-card h3 { color: #0f172a; }
[data-theme="light"] .pf-card p  { color: #475569; }

/* Tags у світлій темі — чіткий текст з непрозорим фоном */
[data-theme="light"] .pf-dofamin .pf-tag {
    background: rgba(180, 130, 20, 0.15);
    color: #7a5500;
    border: 1px solid rgba(180, 130, 20, 0.45);
}
[data-theme="light"] .pf-cosmetolog .pf-tag {
    background: rgba(20, 120, 60, 0.12);
    color: #145c30;
    border: 1px solid rgba(20, 120, 60, 0.40);
}
[data-theme="light"] .pf-visabot .pf-tag {
    background: rgba(30, 70, 180, 0.12);
    color: #1a3a90;
    border: 1px solid rgba(30, 70, 180, 0.40);
}
[data-theme="light"] .pf-rimtaxi .pf-tag {
    background: rgba(60, 70, 90, 0.12);
    color: #2a3040;
    border: 1px solid rgba(60, 70, 90, 0.40);
}
/* Кнопки у світлій темі — чіткі та помітні */
[data-theme="light"] .pf-dofamin .pf-btn {
    background: linear-gradient(135deg, #b07818, #8a5c10) !important;
    color: #ffffff;
}
[data-theme="light"] .pf-cosmetolog .pf-btn {
    background: linear-gradient(135deg, #157840, #0e5a2e) !important;
    color: #ffffff;
}
[data-theme="light"] .pf-visabot .pf-btn {
    background: linear-gradient(135deg, #2050c0, #163898) !important;
    color: #ffffff;
}
[data-theme="light"] .pf-rimtaxi .pf-btn {
    background: linear-gradient(135deg, #3a4050, #252a36) !important;
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════════════════ */

.cta-glow {
    background: radial-gradient(ellipse, rgba(59, 130, 246, 0.4) 0%, rgba(139, 92, 246, 0.2) 50%, transparent 70%);
}

.cta-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
}

.btn-cta {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 40%, #7c3aed 100%);
    background-size: 200% 200%;
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.5), 0 8px 30px rgba(59, 130, 246, 0.3);
    animation: gradient-shift 3s ease infinite;
}

.btn-cta:hover {
    box-shadow: 0 0 60px rgba(59, 130, 246, 0.7), 0 12px 40px rgba(59, 130, 246, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   GRADIENT TEXT ANIMATED
═══════════════════════════════════════════════════════════ */

.gradient-text-animated {
    background: linear-gradient(
        90deg,
        #0c4a6e 0%,
        #0284c7 25%,
        #0ea5e9 50%,
        #38bdf8 75%,
        #0c4a6e 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 3s ease infinite;
}

/* ═══════════════════════════════════════════════════════════
   macOS DOCK STYLE (NAVIGATION)
═══════════════════════════════════════════════════════════ */

.dock-item {
    transform-origin: center top;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                background-color 0.2s ease,
                box-shadow 0.2s ease;
}

.dock-item:hover {
    transform: translateY(8px) scale(1.05);
}

.dock-item:active {
    transform: translateY(4px) scale(1.02);
}

/* ═══════════════════════════════════════════════════════════
   LEGACY BLOB CLASSES (kept for other pages)
═══════════════════════════════════════════════════════════ */

.abstract-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    pointer-events: none;
}

.blob-1 {
    width: 400px; height: 400px;
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    top: -200px; right: -200px;
    animation: float 20s ease-in-out infinite;
}

.blob-2 {
    width: 300px; height: 300px;
    background: linear-gradient(135deg, #0369a1, #38bdf8);
    bottom: -150px; left: -150px;
    animation: float-reverse 25s ease-in-out infinite;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   BACKGROUND GRID (legacy)
═══════════════════════════════════════════════════════════ */

.bg-grid-pattern {
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 800px 800px;
    transform-origin: center center;
}

/* ═══════════════════════════════════════════════════════════
   THEME-AWARE OVERRIDES
═══════════════════════════════════════════════════════════ */

body {
    background-color: var(--bg-page) !important;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Page sections */
.hero-section { background: none; }
.hero-bg {
    background: linear-gradient(135deg, var(--bg-hero) 0%, var(--bg-section-1) 50%, var(--bg-section-2) 100%);
    transition: background 0.4s ease;
}

.theme-section-1 {
    background-color: var(--bg-section-1);
    transition: background-color 0.4s ease;
}
.theme-section-2 {
    background-color: var(--bg-section-2);
    transition: background-color 0.4s ease;
}

/* Navigation */
.theme-nav {
    background: var(--bg-nav) !important;
    border-color: var(--border-nav) !important;
    transition: background 0.4s ease, border-color 0.4s ease;
}

/* Cards */
.service-card,
.portfolio-card,
.why-card {
    background: var(--bg-card);
    border-color: var(--border-card);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.service-card:hover,
.portfolio-card:hover {
    background: var(--bg-card-hover);
}

/* Grid patterns */
.hero-grid,
.section-grid {
    background-image:
        linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Section badges */
.section-badge,
.hero-badge {
    background: var(--badge-bg);
    border-color: var(--badge-border);
}

/* Text colors via CSS vars */
.theme-text-primary   { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-muted     { color: var(--text-muted); }

/* CTA card */
.cta-card {
    background: var(--cta-card-bg);
    border-color: var(--cta-card-border);
    transition: background 0.4s ease, border-color 0.4s ease;
}

/* Why cards */
.why-card-bg {
    background: var(--why-card-bg);
    transition: background 0.4s ease;
}

/* Mobile menu */
.theme-mobile-menu {
    background: var(--mobile-menu-bg);
    border-color: var(--mobile-menu-border);
    transition: background 0.4s ease;
}

/* Orb opacity */
.hero-orb-blue,
.hero-orb-purple,
.hero-orb-cyan {
    opacity: var(--orb-opacity);
    animation: none !important;
}

/* Theme toggle button */
.theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 3px;
    flex-shrink: 0;
}

[data-theme="light"] .theme-toggle {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.2);
}

.theme-toggle-knob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.5);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-theme="light"] .theme-toggle-knob {
    transform: translateX(24px);
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
}

.theme-toggle-icon-moon {
    display: var(--theme-icon-moon, none);
}
.theme-toggle-icon-sun {
    display: var(--theme-icon-sun, block);
}

/* Light theme — hero specific adjustments */
[data-theme="light"] .hero-bg {
    background: linear-gradient(
        160deg,
        #c7d7f8 0%,
        #d4c8f5 40%,
        #bdd8f7 100%
    );
}

[data-theme="light"] .hero-grid {
    background-image:
        linear-gradient(to right, rgba(37, 99, 235, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(37, 99, 235, 0.10) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.6;
}

[data-theme="light"] .hero-orb-blue,
[data-theme="light"] .hero-orb-purple,
[data-theme="light"] .hero-orb-cyan {
    display: none;
}

[data-theme="light"] .hero-section h1 { color: #0f172a; }
[data-theme="light"] .hero-section p  { color: #334155; }
[data-theme="light"] .hero-section .stats-number { color: #0f172a; }
[data-theme="light"] .hero-section .stats-label  { color: #475569; }
[data-theme="light"] .hero-section .stats-divider { background: rgba(0,0,0,0.12); }

[data-theme="light"] .hero-badge {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.30);
}
[data-theme="light"] .hero-badge span { color: #065f46; }

[data-theme="light"] .scroll-indicator { color: #475569; }
[data-theme="light"] .scroll-indicator:hover { color: #1e40af; }
[data-theme="light"] .scroll-wheel { border-color: #64748b; }
[data-theme="light"] .scroll-wheel:hover { border-color: #3b82f6; }

/* Light theme — service cards */
[data-theme="light"] .service-card {
    background: #ffffff;
    border: 1px solid rgba(37, 99, 235, 0.14);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .service-card:hover {
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15), 0 4px 12px rgba(15, 23, 42, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
}
[data-theme="light"] .service-card h3 { color: #0f172a; }
[data-theme="light"] .service-card p  { color: #475569; }
[data-theme="light"] .service-card-blue .learn-more  { color: #2563eb; }
[data-theme="light"] .service-card-cyan .learn-more  { color: #0891b2; }
[data-theme="light"] .service-card-blue:hover { border-color: rgba(37, 99, 235, 0.35); }
[data-theme="light"] .service-card-cyan:hover  { border-color: rgba(6, 182, 212, 0.35); }
[data-theme="light"] .service-card-amber .learn-more { color: #d97706; }
[data-theme="light"] .service-card-amber:hover { border-color: rgba(217, 119, 6, 0.35); }
[data-theme="light"] .service-card-rose .learn-more  { color: #e11d48; }
[data-theme="light"] .service-card-rose:hover  { border-color: rgba(225, 29, 72, 0.35); }

/* Light theme — AI section stat labels */
[data-theme="light"] .text-violet-300 { color: #5b21b6 !important; }
[data-theme="light"] .text-emerald-300 { color: #065f46 !important; }
[data-theme="light"] .text-amber-300 { color: #92400e !important; }
[data-theme="light"] .text-rose-300 { color: #9f1239 !important; }

/* Team scroll cards */
.team-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
[data-theme="light"] .team-card {
    background: #ffffff;
    border-color: rgba(37,99,235,0.12);
    box-shadow: 0 4px 24px rgba(15,23,42,0.08);
}
[data-theme="light"] .team-card .team-tag {
    background: rgba(15,23,42,0.05) !important;
    border-color: rgba(15,23,42,0.12) !important;
    color: #475569 !important;
}

/* ── About page team cards ── */
.about-team-card {
    background: linear-gradient(160deg,#0f172a,#1e1b4b);
    border: 1px solid rgba(99,102,241,0.25);
    box-shadow: 0 0 0 0 rgba(99,102,241,0);
    transition: transform .5s, box-shadow .5s;
}
.about-team-card[data-accent="purple"] {
    background: linear-gradient(160deg,#0f172a,#1a0533);
    border-color: rgba(139,92,246,0.25);
}
.about-team-card[data-accent="cyan"] {
    background: linear-gradient(160deg,#0f172a,#0c1a2e);
    border-color: rgba(6,182,212,0.25);
}
.about-team-card:hover { transform: translateY(-8px); }
.about-team-card[data-accent="indigo"]:hover { box-shadow: 0 20px 60px rgba(99,102,241,0.25); }
.about-team-card[data-accent="purple"]:hover { box-shadow: 0 20px 60px rgba(139,92,246,0.25); }
.about-team-card[data-accent="cyan"]:hover   { box-shadow: 0 20px 60px rgba(6,182,212,0.2); }

.about-photo-fade {
    background: linear-gradient(to bottom, transparent 40%, rgba(15,23,42,0.6) 70%, rgba(15,23,42,0.98) 100%);
    pointer-events: none;
}
.about-card-body {
    position: relative;
    z-index: 1;
}
.about-photo-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
    background-size: 200% 100%;
    background-position: -100% 0;
    pointer-events: none;
    transition: background-position 0.6s ease;
}
.group:hover .about-photo-shine {
    background-position: 200% 0;
}
.about-name  { color: #ffffff; }
.about-desc  { color: rgba(255,255,255,0.45); }

.about-linkedin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.5);
    transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.about-linkedin-btn:hover { transform: scale(1.1); }
.about-linkedin-indigo:hover { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.5); color: #a5b4fc; }
.about-linkedin-purple:hover { background: rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.5); color: #c4b5fd; }
.about-linkedin-cyan:hover   { background: rgba(6,182,212,0.2);  border-color: rgba(6,182,212,0.5);  color: #a5f3fc; }

[data-theme="light"] .about-linkedin-btn {
    border-color: rgba(15,23,42,0.12);
    color: #94a3b8;
}
[data-theme="light"] .about-linkedin-indigo:hover { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.3); color: #4338ca; }
[data-theme="light"] .about-linkedin-purple:hover { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.3); color: #6d28d9; }
[data-theme="light"] .about-linkedin-cyan:hover   { background: rgba(6,182,212,0.1);  border-color: rgba(6,182,212,0.3);  color: #0e7490; }

.about-role-indigo { color: #818cf8; }
.about-role-purple { color: #c084fc; }
.about-role-cyan   { color: #67e8f9; }

.about-tag-indigo { background:rgba(99,102,241,0.12); border:1px solid rgba(99,102,241,0.25); color:#a5b4fc; }
.about-tag-purple { background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.25); color:#c4b5fd; }
.about-tag-cyan   { background:rgba(6,182,212,0.12);  border:1px solid rgba(6,182,212,0.25);  color:#a5f3fc; }

/* Light theme overrides */
[data-theme="light"] .about-team-card {
    background: #ffffff;
    border-color: rgba(99,102,241,0.2);
    box-shadow: 0 4px 24px rgba(15,23,42,0.08);
}
[data-theme="light"] .about-team-card[data-accent="purple"] {
    border-color: rgba(139,92,246,0.2);
}
[data-theme="light"] .about-team-card[data-accent="cyan"] {
    border-color: rgba(6,182,212,0.2);
}
[data-theme="light"] .about-team-card[data-accent="indigo"]:hover { box-shadow: 0 16px 48px rgba(99,102,241,0.18); }
[data-theme="light"] .about-team-card[data-accent="purple"]:hover { box-shadow: 0 16px 48px rgba(139,92,246,0.18); }
[data-theme="light"] .about-team-card[data-accent="cyan"]:hover   { box-shadow: 0 16px 48px rgba(6,182,212,0.15); }

[data-theme="light"] .about-photo-fade {
    background: linear-gradient(to bottom, transparent 40%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0.98) 100%);
}
[data-theme="light"] .about-name { color: #0f172a; }
[data-theme="light"] .about-desc { color: #64748b; }

[data-theme="light"] .about-role-indigo { color: #4f46e5; }
[data-theme="light"] .about-role-purple { color: #7c3aed; }
[data-theme="light"] .about-role-cyan   { color: #0891b2; }

[data-theme="light"] .about-tag-indigo { background:rgba(99,102,241,0.08); border-color:rgba(99,102,241,0.2); color:#4338ca; }
[data-theme="light"] .about-tag-purple { background:rgba(139,92,246,0.08); border-color:rgba(139,92,246,0.2); color:#6d28d9; }
[data-theme="light"] .about-tag-cyan   { background:rgba(6,182,212,0.08);  border-color:rgba(6,182,212,0.2);  color:#0e7490; }

/* ── About page manifesto cards ── */
.about-manifesto-title { color: #ffffff; }
.about-manifesto-text  { color: #94a3b8; }

.about-manifesto-tag-blue   { background:rgba(59,130,246,0.1);  color:#60a5fa; border:1px solid rgba(59,130,246,0.2); }
.about-manifesto-tag-purple { background:rgba(124,58,237,0.1);  color:#a78bfa; border:1px solid rgba(124,58,237,0.2); }
.about-manifesto-tag-cyan   { background:rgba(6,182,212,0.1);   color:#67e8f9; border:1px solid rgba(6,182,212,0.2); }
.about-manifesto-tag-green  { background:rgba(16,185,129,0.1);  color:#34d399; border:1px solid rgba(16,185,129,0.2); }

[data-theme="light"] .about-manifesto-card {
    background: #ffffff !important;
    border-color: rgba(37,99,235,0.15) !important;
    box-shadow: 0 4px 20px rgba(15,23,42,0.07);
}
[data-theme="light"] .about-manifesto-title { color: #0f172a; }
[data-theme="light"] .about-manifesto-text  { color: #475569; }

[data-theme="light"] .about-manifesto-tag-blue   { background:rgba(59,130,246,0.08);  color:#1d4ed8; border-color:rgba(59,130,246,0.2); }
[data-theme="light"] .about-manifesto-tag-purple { background:rgba(124,58,237,0.08);  color:#6d28d9; border-color:rgba(124,58,237,0.2); }
[data-theme="light"] .about-manifesto-tag-cyan   { background:rgba(6,182,212,0.08);   color:#0e7490; border-color:rgba(6,182,212,0.2); }
[data-theme="light"] .about-manifesto-tag-green  { background:rgba(16,185,129,0.08);  color:#065f46; border-color:rgba(16,185,129,0.2); }

/* ── About identity section: label & badge colors ── */
.about-identity-badge-text       { color: #67e8f9; }
.about-identity-label-blue       { color: #60a5fa; }
.about-identity-label-purple     { color: #a78bfa; }
.about-identity-label-green      { color: #34d399; }

[data-theme="light"] .about-identity-badge-text   { color: #0e7490; }
[data-theme="light"] .about-identity-label-blue   { color: #1d4ed8; }
[data-theme="light"] .about-identity-label-purple { color: #6d28d9; }
[data-theme="light"] .about-identity-label-green  { color: #065f46; }

/* ── FAQ ── */
.faq-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    transition: border-color .25s;
}
.faq-item:hover {
    border-color: rgba(99,102,241,0.3);
}
.faq-trigger { cursor: pointer; background: none; border: none; }
.faq-question { color: var(--text-primary); }
.faq-icon {
    background: rgba(255,255,255,0.05);
    color: #6366f1;
}
.faq-answer-text { color: var(--text-secondary); font-size: 0.9rem; }
.faq-icon.open { transform: rotate(180deg); background: rgba(99,102,241,0.15); }
.faq-answer { animation: faq-slide-down .25s ease; }

@keyframes faq-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

[data-theme="light"] .faq-item {
    background: #ffffff;
    border-color: rgba(37,99,235,0.1);
    box-shadow: 0 2px 12px rgba(15,23,42,0.05);
}
[data-theme="light"] .faq-item:hover {
    border-color: rgba(99,102,241,0.35);
}
[data-theme="light"] .faq-icon {
    background: rgba(99,102,241,0.08);
}

/* Light theme — why cards */
[data-theme="light"] .why-card {
    background: #ffffff;
    border: 1px solid rgba(37, 99, 235, 0.12);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .why-card:hover {
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.12);
}
[data-theme="light"] .why-card h3 { color: #0f172a; }
[data-theme="light"] .why-card p  { color: #475569; }
[data-theme="light"] .why-card-bg { background: #ffffff; }

/* Light theme — portfolio cards (legacy .portfolio-card class) */
[data-theme="light"] .portfolio-card {
    background: #ffffff;
    border: 1px solid rgba(37, 99, 235, 0.12);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .portfolio-card:hover {
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.25);
}
[data-theme="light"] .portfolio-card h3 { color: #0f172a; }
[data-theme="light"] .portfolio-card p  { color: #475569; }

/* Light theme — portfolio featured card */
[data-theme="light"] .portfolio-card-featured {
    background: linear-gradient(135deg, #0a3a6e 0%, #082e58 50%, #061e3c 100%);
}
[data-theme="light"] .portfolio-card-featured h3 { color: #ffffff !important; }
[data-theme="light"] .portfolio-card-featured p  { color: rgba(255,255,255,0.80) !important; }

/* Light theme — section headings */
[data-theme="light"] .theme-section-1 h2,
[data-theme="light"] .theme-section-2 h2 { color: #0f172a; }
[data-theme="light"] .theme-section-1 > div > div > p,
[data-theme="light"] .theme-section-2 > div > div > p { color: #475569; }

/* Light theme — CTA */
[data-theme="light"] .cta-card {
    background: linear-gradient(165deg, #ffffff 0%, #f1f5ff 55%, #eef2ff 100%);
    border: 1px solid rgba(37, 99, 235, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 64px rgba(37, 99, 235, 0.12),
        0 8px 24px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .cta-card h2 { color: #0f172a !important; }
[data-theme="light"] .cta-card p.text-slate-400,
[data-theme="light"] .cta-card p { color: #334155 !important; }

/* Secondary CTA: was white-on-white in light mode */
[data-theme="light"] .cta-card .cta-btn-outline {
    color: #1d4ed8 !important;
    border-color: rgba(37, 99, 235, 0.45) !important;
    background: rgba(37, 99, 235, 0.08) !important;
    backdrop-filter: none;
}
[data-theme="light"] .cta-card .cta-btn-outline:hover {
    color: #1e40af !important;
    border-color: rgba(29, 78, 216, 0.55) !important;
    background: rgba(37, 99, 235, 0.12) !important;
}
[data-theme="light"] .cta-card .cta-btn-outline svg {
    stroke: currentColor;
}

/* Softer primary CTA glow on light backgrounds */
[data-theme="light"] .cta-card .btn-cta {
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.28), 0 4px 12px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .cta-card .btn-cta:hover {
    box-shadow: 0 14px 36px rgba(37, 99, 235, 0.34), 0 6px 16px rgba(15, 23, 42, 0.08);
}

/* Light theme — section badges */
[data-theme="light"] .section-badge {
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.28);
}
[data-theme="light"] .section-badge span { color: #1e40af; }
[data-theme="light"] .cta-card .section-badge span { color: #1d4ed8; font-weight: 700; }

/* Light theme — why featured card stays purple */
[data-theme="light"] .why-card-featured {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #4c1d95 100%);
}
[data-theme="light"] .why-card-featured h3 { color: #ffffff; }
[data-theme="light"] .why-card-featured p  { color: rgba(255,255,255,0.80); }

/* Light theme — service featured card stays blue */
[data-theme="light"] .service-card-featured {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 40%, #7c3aed 100%);
}
[data-theme="light"] .service-card-featured h3 { color: #ffffff !important; }
[data-theme="light"] .service-card-featured p  { color: rgba(255,255,255,0.88) !important; }

/* Light theme — nav links */
[data-theme="light"] nav a.dock-item,
[data-theme="light"] nav button.dock-item { color: #1e293b !important; }
[data-theme="light"] nav a.dock-item:hover,
[data-theme="light"] nav button.dock-item:hover { color: #1d4ed8 !important; background: rgba(37, 99, 235, 0.07); }
[data-theme="light"] nav .nav-dropdown-trigger { color: #1e293b !important; }

/* Light theme — mobile nav burger button */
[data-theme="light"] #mobile-menu-btn {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #1e293b !important;
}
[data-theme="light"] #mobile-menu-btn:hover { background: rgba(15, 23, 42, 0.10) !important; }
[data-theme="light"] #mobile-menu-btn svg { color: #1e293b !important; stroke: #1e293b; }

/* ── Mobile menu panel ── */
.mobile-menu-panel {
    background: rgba(10, 14, 28, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255,255,255,0.07);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-menu.menu-open .mobile-menu-panel { transform: translateX(0); }
#mobile-menu.menu-open { display: block !important; }

.mobile-menu-divider { border-color: rgba(255,255,255,0.07); }

.mobile-nav-item { color: #94a3b8; }
.mobile-nav-item:hover { background: rgba(255,255,255,0.05); color: #f1f5f9; }
.mobile-nav-item.mobile-nav-active { background: rgba(59,130,246,0.12); color: #93c5fd; }

.mobile-sub-item { color: #64748b; }
.mobile-sub-item:hover { background: rgba(255,255,255,0.04); color: #cbd5e1; }
.mobile-sub-item.mobile-nav-active { background: rgba(59,130,246,0.10); color: #93c5fd; }

.mobile-services-sub { background: rgba(255,255,255,0.02); border-radius: 0 0 1rem 1rem; }

.mobile-close-btn { background: rgba(255,255,255,0.06); color: #94a3b8; }
.mobile-close-btn:hover { background: rgba(255,255,255,0.10); color: #f1f5f9; }

/* Light theme — mobile menu panel */
[data-theme="light"] .mobile-menu-panel {
    background: #f8fafc !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-left: 1px solid rgba(15,23,42,0.08) !important;
}
[data-theme="light"] .mobile-menu-divider { border-color: rgba(15,23,42,0.08) !important; }
[data-theme="light"] .mobile-nav-item { color: #334155 !important; }
[data-theme="light"] .mobile-nav-item:hover { background: rgba(37,99,235,0.06) !important; color: #1e40af !important; }
[data-theme="light"] .mobile-nav-item.mobile-nav-active { background: rgba(37,99,235,0.10) !important; color: #1d4ed8 !important; }
[data-theme="light"] .mobile-sub-item { color: #475569 !important; }
[data-theme="light"] .mobile-sub-item:hover { background: rgba(37,99,235,0.05) !important; color: #1e40af !important; }
[data-theme="light"] .mobile-sub-item.mobile-nav-active { background: rgba(37,99,235,0.10) !important; color: #1d4ed8 !important; }
[data-theme="light"] .mobile-services-sub { background: rgba(15,23,42,0.02) !important; }
[data-theme="light"] .mobile-close-btn { background: rgba(15,23,42,0.06) !important; color: #475569 !important; }
[data-theme="light"] .mobile-close-btn:hover { background: rgba(15,23,42,0.10) !important; color: #1e293b !important; }

/* Light theme — CTA glow */
[data-theme="light"] .cta-glow {
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.15) 0%, rgba(124, 58, 237, 0.08) 50%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════
   NAV DROPDOWN
═══════════════════════════════════════════════════════════ */
.nav-dropdown-menu {
    pointer-events: none;
}
.nav-dropdown-menu.visible {
    pointer-events: auto;
}
.nav-dropdown-bg {
    background: rgba(10, 14, 28, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.nav-dropdown-item {
    color: #94a3b8;
}
.nav-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}
.nav-dropdown-item.nav-dropdown-active {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

/* Light theme dropdown */
[data-theme="light"] .nav-dropdown-bg {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14), 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .nav-dropdown-item { color: #475569; }
[data-theme="light"] .nav-dropdown-item:hover { background: rgba(37, 99, 235, 0.06); color: #1e40af; }
[data-theme="light"] .nav-dropdown-item.nav-dropdown-active { background: rgba(37, 99, 235, 0.10); color: #1d4ed8; }

/* ── Testimonial cards — dark theme defaults ── */
.testimonial-card-blue {
    background: linear-gradient(145deg, rgba(59,130,246,0.08) 0%, rgba(15,23,42,0.95) 100%);
    border: 1px solid rgba(59,130,246,0.15);
}
.testimonial-card-violet {
    background: linear-gradient(145deg, rgba(139,92,246,0.10) 0%, rgba(15,23,42,0.97) 100%);
    border: 1px solid rgba(139,92,246,0.20);
}
.testimonial-card-teal {
    background: linear-gradient(145deg, rgba(20,184,166,0.08) 0%, rgba(15,23,42,0.95) 100%);
    border: 1px solid rgba(20,184,166,0.15);
}
.testimonial-text { color: #cbd5e1; }
.testimonial-name { color: #f1f5f9; }
.testimonial-role  { color: #64748b; }

/* ── Testimonial cards — light theme ── */
[data-theme="light"] .testimonial-card-blue {
    background: #ffffff !important;
    border: 1px solid rgba(59,130,246,0.20) !important;
    box-shadow: 0 4px 24px rgba(59,130,246,0.10);
}
[data-theme="light"] .testimonial-card-violet {
    background: #ffffff !important;
    border: 1px solid rgba(139,92,246,0.20) !important;
    box-shadow: 0 4px 24px rgba(139,92,246,0.10);
}
[data-theme="light"] .testimonial-card-teal {
    background: #ffffff !important;
    border: 1px solid rgba(20,184,166,0.20) !important;
    box-shadow: 0 4px 24px rgba(20,184,166,0.10);
}
[data-theme="light"] .testimonial-text { color: #334155 !important; }
[data-theme="light"] .testimonial-name { color: #0f172a !important; }
[data-theme="light"] .testimonial-role  { color: #64748b !important; }

/* ══════════════════════════════════════════════════════════
   GLOBAL LIGHT THEME — text & inline-style card overrides
══════════════════════════════════════════════════════════ */

/* Headings and paragraphs with text-white → dark in light theme */
[data-theme="light"] .theme-section-1 h1.text-white,
[data-theme="light"] .theme-section-2 h1.text-white,
[data-theme="light"] .theme-section-1 h2.text-white,
[data-theme="light"] .theme-section-2 h2.text-white,
[data-theme="light"] .theme-section-1 h3.text-white,
[data-theme="light"] .theme-section-2 h3.text-white,
[data-theme="light"] .theme-section-1 p.text-white,
[data-theme="light"] .theme-section-2 p.text-white,
[data-theme="light"] .theme-section-1 span.text-white:not([style]),
[data-theme="light"] .theme-section-2 span.text-white:not([style]),
[data-theme="light"] .theme-section-1 div.text-white:not([style]),
[data-theme="light"] .theme-section-2 div.text-white:not([style]) { color: #0f172a !important; }

/* Buttons and elements WITH inline style background stay white */
[data-theme="light"] a[style*="background"],
[data-theme="light"] div[style*="background"].text-white,
[data-theme="light"] span[style*="background"].text-white { color: #ffffff !important; }

/* Pricing featured card always stays white (forced dark gradient) */
[data-theme="light"] .pricing-featured,
[data-theme="light"] .pricing-featured * { color: #ffffff !important; }
[data-theme="light"] .pricing-featured .text-white\/40 { color: rgba(255,255,255,0.4) !important; }
[data-theme="light"] .pricing-featured .text-white\/80 { color: rgba(255,255,255,0.8) !important; }

/* Muted text */
[data-theme="light"] .theme-section-1 .text-slate-300,
[data-theme="light"] .theme-section-2 .text-slate-300 { color: #334155 !important; }
[data-theme="light"] .theme-section-1 .text-slate-400,
[data-theme="light"] .theme-section-2 .text-slate-400 { color: #475569 !important; }
[data-theme="light"] .theme-section-1 .text-slate-500,
[data-theme="light"] .theme-section-2 .text-slate-500 { color: #64748b !important; }

/* Inline-style cards (bg:rgba(255,255,255,0.03)) → white with border */
[data-theme="light"] .theme-section-1 [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] .theme-section-2 [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] .theme-section-1 [style*="background: rgba(255,255,255,0.03)"],
[data-theme="light"] .theme-section-2 [style*="background: rgba(255,255,255,0.03)"] {
    background: #ffffff !important;
    border-color: rgba(37,99,235,0.12) !important;
    box-shadow: 0 2px 12px rgba(15,23,42,0.06) !important;
}

/* Inline-style cards with rgba(255,255,255,0.04) */
[data-theme="light"] .theme-section-1 [style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] .theme-section-2 [style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] .theme-section-1 [style*="background: rgba(255,255,255,0.04)"],
[data-theme="light"] .theme-section-2 [style*="background: rgba(255,255,255,0.04)"] {
    background: #ffffff !important;
    border-color: rgba(37,99,235,0.12) !important;
    box-shadow: 0 2px 12px rgba(15,23,42,0.06) !important;
}

/* Inline-style cards with rgba(255,255,255,0.08) (chat bubbles etc) */
[data-theme="light"] .theme-section-1 [style*="background:rgba(255,255,255,0.08)"],
[data-theme="light"] .theme-section-2 [style*="background:rgba(255,255,255,0.08)"] {
    background: rgba(15,23,42,0.06) !important;
}

/* Breadcrumb links */
[data-theme="light"] .theme-section-1 a.text-slate-500,
[data-theme="light"] .theme-section-2 a.text-slate-500 { color: #64748b !important; }
[data-theme="light"] .theme-section-1 a.text-slate-500:hover,
[data-theme="light"] .theme-section-2 a.text-slate-500:hover { color: #1d4ed8 !important; }

/* ── Contact page — form fields (typed text must stay visible) ─── */

.contact-input {
    color: var(--text-primary) !important;
    caret-color: var(--text-primary);
}
.contact-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

/* ── Contact page — light theme fixes ───────────────────────────── */

/* Form inputs */
[data-theme="light"] .contact-input {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
[data-theme="light"] .contact-input:focus {
    background: #ffffff !important;
    border-color: #2563eb !important;
}
[data-theme="light"] .contact-input::placeholder { color: #94a3b8 !important; }

/* Form card */
[data-theme="light"] .theme-section-1 [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] .theme-section-2 [style*="background:rgba(255,255,255,0.03)"] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 24px rgba(15,23,42,0.07) !important;
}

/* Contact channel cards keep their gradient tint in light mode */
[data-theme="light"] .theme-section-1 [style*="rgba(37,99,235,0.15)"],
[data-theme="light"] .theme-section-2 [style*="rgba(37,99,235,0.15)"] {
    background: rgba(37,99,235,0.07) !important;
    border-color: rgba(37,99,235,0.25) !important;
}
[data-theme="light"] .theme-section-1 [style*="rgba(124,58,237,0.15)"],
[data-theme="light"] .theme-section-2 [style*="rgba(124,58,237,0.15)"] {
    background: rgba(124,58,237,0.07) !important;
    border-color: rgba(124,58,237,0.25) !important;
}

/* Text in contact cards */
[data-theme="light"] .theme-section-1 .text-blue-400,
[data-theme="light"] .theme-section-2 .text-blue-400  { color: #1d4ed8 !important; }
[data-theme="light"] .theme-section-1 .text-purple-400,
[data-theme="light"] .theme-section-2 .text-purple-400 { color: #6d28d9 !important; }

/* Inline dark gradient mockup cards — keep dark background in light theme
   (browser mockup, chat mockup, terminal mockup) */
[data-theme="light"] .theme-section-1 [style*="background:linear-gradient(145deg, #1a0a3e"],
[data-theme="light"] .theme-section-2 [style*="background:linear-gradient(145deg, #1a0a3e"],
[data-theme="light"] .theme-section-1 [style*="background:linear-gradient(145deg, #061828"],
[data-theme="light"] .theme-section-2 [style*="background:linear-gradient(145deg, #061828"],
[data-theme="light"] .theme-section-1 [style*="background:linear-gradient(145deg, #041a10"],
[data-theme="light"] .theme-section-2 [style*="background:linear-gradient(145deg, #041a10"] {
    box-shadow: 0 12px 40px rgba(15,23,42,0.18) !important;
}

/* Terminal/chat mockup borders */
[data-theme="light"] [style*="border:1px solid rgba(5,150,105"],
[data-theme="light"] [style*="border:1px solid rgba(14,165,233"],
[data-theme="light"] [style*="border:1px solid rgba(124,58,237"] {
    border-color: rgba(37,99,235,0.20) !important;
}

/* Hover bg-white/5 */
[data-theme="light"] .theme-section-1 .hover\:bg-white\/5:hover,
[data-theme="light"] .theme-section-2 .hover\:bg-white\/5:hover { background: rgba(37,99,235,0.06) !important; }

/* border-white/10 → visible in light */
[data-theme="light"] .theme-section-1 .border-white\/10,
[data-theme="light"] .theme-section-2 .border-white\/10 { border-color: rgba(15,23,42,0.12) !important; }
[data-theme="light"] .theme-section-1 .border-white\/5,
[data-theme="light"] .theme-section-2 .border-white\/5 { border-color: rgba(15,23,42,0.08) !important; }

/* Stat cards on hero (web-dev page) */
[data-theme="light"] .theme-section-1 [style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] .theme-section-2 [style*="background:rgba(255,255,255,0.04)"] {
    background: #ffffff !important;
    border-color: rgba(37,99,235,0.12) !important;
}

/* ── Services nav pills ── */
.services-pill-violet { background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.30); color: #7c3aed; }
.services-pill-violet:hover { background: rgba(124,58,237,0.22); color: #6d28d9; }
.services-pill-sky { background: rgba(14,165,233,0.12); border: 1px solid rgba(14,165,233,0.30); color: #0284c7; }
.services-pill-sky:hover { background: rgba(14,165,233,0.22); color: #0369a1; }
.services-pill-emerald { background: rgba(5,150,105,0.12); border: 1px solid rgba(5,150,105,0.30); color: #059669; }
.services-pill-emerald:hover { background: rgba(5,150,105,0.22); color: #047857; }

[data-theme="dark"] .services-pill-violet { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.35); color: #a78bfa; }
[data-theme="dark"] .services-pill-violet:hover { background: rgba(124,58,237,0.25); }
[data-theme="dark"] .services-pill-sky { background: rgba(14,165,233,0.15); border-color: rgba(14,165,233,0.35); color: #7dd3fc; }
[data-theme="dark"] .services-pill-sky:hover { background: rgba(14,165,233,0.25); }
[data-theme="dark"] .services-pill-emerald { background: rgba(5,150,105,0.15); border-color: rgba(5,150,105,0.35); color: #6ee7b7; }
[data-theme="dark"] .services-pill-emerald:hover { background: rgba(5,150,105,0.25); }
.services-pill-amber { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.30); color: #d97706; }
.services-pill-amber:hover { background: rgba(245,158,11,0.22); color: #b45309; }
.services-pill-rose { background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.30); color: #e11d48; }
.services-pill-rose:hover { background: rgba(244,63,94,0.22); color: #be123c; }
[data-theme="dark"] .services-pill-amber { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); color: #fcd34d; }
[data-theme="dark"] .services-pill-amber:hover { background: rgba(245,158,11,0.25); }
[data-theme="dark"] .services-pill-rose { background: rgba(244,63,94,0.15); border-color: rgba(244,63,94,0.35); color: #fb7185; }
[data-theme="dark"] .services-pill-rose:hover { background: rgba(244,63,94,0.25); }

/* ══════════════════════════════════════════════════════════
   SERVICE DETAIL PAGE CARDS
══════════════════════════════════════════════════════════ */

/* Feature card */
.svc-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.svc-card:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-4px);
}

/* Violet accent */
.svc-card-violet { border-color: rgba(124,58,237,0.20); }
.svc-card-violet:hover { border-color: rgba(124,58,237,0.45); box-shadow: 0 12px 40px rgba(124,58,237,0.15); }
.svc-card-violet .svc-card-glow { background: radial-gradient(ellipse at top right, rgba(124,58,237,0.12) 0%, transparent 65%); }

/* Sky/blue accent */
.svc-card-sky { border-color: rgba(14,165,233,0.20); }
.svc-card-sky:hover { border-color: rgba(14,165,233,0.45); box-shadow: 0 12px 40px rgba(14,165,233,0.15); }
.svc-card-sky .svc-card-glow { background: radial-gradient(ellipse at top right, rgba(14,165,233,0.12) 0%, transparent 65%); }

/* Emerald accent */
.svc-card-emerald { border-color: rgba(5,150,105,0.20); }
.svc-card-emerald:hover { border-color: rgba(5,150,105,0.45); box-shadow: 0 12px 40px rgba(5,150,105,0.15); }
.svc-card-emerald .svc-card-glow { background: radial-gradient(ellipse at top right, rgba(5,150,105,0.12) 0%, transparent 65%); }

/* Light theme overrides */
[data-theme="light"] .svc-card {
    background: #ffffff !important;
    border-color: rgba(37,99,235,0.10) !important;
    box-shadow: 0 2px 16px rgba(15,23,42,0.06);
}
[data-theme="light"] .svc-card:hover {
    box-shadow: 0 12px 40px rgba(15,23,42,0.10) !important;
    transform: translateY(-4px);
}
[data-theme="light"] .svc-card-violet { border-color: rgba(124,58,237,0.18) !important; }
[data-theme="light"] .svc-card-violet:hover { border-color: rgba(124,58,237,0.35) !important; box-shadow: 0 12px 40px rgba(124,58,237,0.12) !important; }
[data-theme="light"] .svc-card-violet .svc-card-glow { background: radial-gradient(ellipse at top right, rgba(124,58,237,0.06) 0%, transparent 65%); }

[data-theme="light"] .svc-card-sky { border-color: rgba(14,165,233,0.18) !important; }
[data-theme="light"] .svc-card-sky:hover { border-color: rgba(14,165,233,0.35) !important; box-shadow: 0 12px 40px rgba(14,165,233,0.12) !important; }
[data-theme="light"] .svc-card-sky .svc-card-glow { background: radial-gradient(ellipse at top right, rgba(14,165,233,0.06) 0%, transparent 65%); }

[data-theme="light"] .svc-card-emerald { border-color: rgba(5,150,105,0.18) !important; }
[data-theme="light"] .svc-card-emerald:hover { border-color: rgba(5,150,105,0.35) !important; box-shadow: 0 12px 40px rgba(5,150,105,0.12) !important; }
[data-theme="light"] .svc-card-emerald .svc-card-glow { background: radial-gradient(ellipse at top right, rgba(5,150,105,0.06) 0%, transparent 65%); }

[data-theme="light"] .svc-card h3 { color: #0f172a !important; }
[data-theme="light"] .svc-card p  { color: #475569 !important; }

/* ── Pipeline card ── */
.pipeline-card {
    background: linear-gradient(145deg,#041a10,#031410);
}
.pipeline-step {
    background: rgba(5,150,105,0.08);
    border: 1px solid rgba(5,150,105,0.12);
}
.pipeline-step-title { color: #f1f5f9; }
.pipeline-step-desc  { color: #64748b; }

[data-theme="light"] .pipeline-card {
    background: #ffffff !important;
    border-color: rgba(5,150,105,0.20) !important;
    box-shadow: 0 4px 24px rgba(5,150,105,0.10);
}
[data-theme="light"] .pipeline-step {
    background: rgba(5,150,105,0.06) !important;
    border-color: rgba(5,150,105,0.15) !important;
}
[data-theme="light"] .pipeline-step-title { color: #0f172a !important; }
[data-theme="light"] .pipeline-step-desc  { color: #64748b !important; }

/* Amber variant for pdf-ocr page */
.pipeline-card-amber {
    background: linear-gradient(145deg,#1a1200,#120d00);
}
.pipeline-step-amber {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.15);
}
[data-theme="light"] .pipeline-card-amber {
    background: #fffbf0 !important;
    border-color: rgba(245,158,11,0.25) !important;
    box-shadow: 0 4px 32px rgba(245,158,11,0.12);
}
[data-theme="light"] .pipeline-step-amber {
    background: rgba(245,158,11,0.08) !important;
    border-color: rgba(245,158,11,0.22) !important;
}
[data-theme="light"] .pipeline-step-amber .pipeline-step-title { color: #0f172a !important; }
[data-theme="light"] .pipeline-step-amber .pipeline-step-desc  { color: #64748b !important; }
/* light: code block inside amber pipeline */
[data-theme="light"] .pipeline-card-amber .font-mono { background: rgba(0,0,0,0.05) !important; border-color: rgba(245,158,11,0.20) !important; }
[data-theme="light"] .pipeline-card-amber .font-mono [style*="color:#94a3b8"] { color: #475569 !important; }
[data-theme="light"] .pipeline-card-amber .font-mono [style*="color:#64748b"] { color: #64748b !important; }
/* light: file tags in amber pipeline */
[data-theme="light"] .pipeline-card-amber span[style*="color:#f59e0b"] { color: #92400e !important; background: rgba(245,158,11,0.12) !important; border-color: rgba(245,158,11,0.35) !important; }
/* light: OS tags in amber pipeline */
[data-theme="light"] .pipeline-card-amber span[style*="color:#10b981"] { color: #065f46 !important; background: rgba(16,185,129,0.12) !important; border-color: rgba(16,185,129,0.35) !important; }
[data-theme="light"] .pipeline-card-amber div[style*="color:#10b981"] { color: #065f46 !important; }

.svc-card-fmt-title { color: #f1f5f9; }
.svc-card-fmt-desc  { color: #64748b; }
[data-theme="light"] .svc-card-fmt-title { color: #0f172a !important; }
[data-theme="light"] .svc-card-fmt-desc  { color: #475569 !important; }

/* ── Browser mockup internals ── */
.browser-mockup { background: #0f0a1e; }
.mockup-card    { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.mockup-line    { background: rgba(255,255,255,0.12); }
.mockup-line-bright { background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,0.3) 100%); }
.mockup-track   { background: rgba(255,255,255,0.06); }
.mockup-label   { color: #64748b; }

[data-theme="light"] .browser-mockup { background: #1e1040 !important; }
[data-theme="light"] .mockup-card    { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; }
[data-theme="light"] .mockup-line    { background: rgba(255,255,255,0.18) !important; }
[data-theme="light"] .mockup-line-bright { background: linear-gradient(90deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.4) 100%) !important; }
[data-theme="light"] .mockup-track   { background: rgba(255,255,255,0.10) !important; }
[data-theme="light"] .mockup-label   { color: #94a3b8 !important; }

/* ── Mockup glow blobs ── */
.mockup-glow-violet  { background: linear-gradient(135deg,#7c3aed,#4f46e5); opacity: 0.20; }
.mockup-glow-sky     { background: linear-gradient(135deg,#0ea5e9,#2563eb); opacity: 0.20; }
.mockup-glow-emerald { background: linear-gradient(135deg,#059669,#0d9488); opacity: 0.20; }

[data-theme="light"] .mockup-glow-violet  { background: linear-gradient(135deg,#ddd6fe,#c4b5fd); opacity: 0.60; }
[data-theme="light"] .mockup-glow-sky     { background: linear-gradient(135deg,#bae6fd,#93c5fd); opacity: 0.60; }
[data-theme="light"] .mockup-glow-emerald { background: linear-gradient(135deg,#a7f3d0,#6ee7b7); opacity: 0.60; }

/* ── Feature tabs ── */
.feat-container {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.5rem;
    overflow: hidden;
}
.feat-nav {
    background: rgba(0,0,0,0.20);
    padding: 1rem;
}
.feat-content-area {
    border-color: rgba(255,255,255,0.07);
    min-height: 420px;
    padding: 0.5rem;
}
.feat-panel {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.25rem;
}
.feat-tab-btn {
    background: transparent;
    border: 1px solid transparent;
}
.feat-tab-btn:hover {
    background: rgba(255,255,255,0.06);
}
.feat-tab-btn.feat-active {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}
.feat-tab-btn.feat-active .feat-tab-arrow { opacity: 1 !important; }
.feat-tab-title  { color: #cbd5e1; }
.feat-tab-btn.feat-active .feat-tab-title { color: #f1f5f9; }
.feat-panel-title { color: #f1f5f9; }
.feat-panel-desc  { color: #94a3b8; }

[data-theme="light"] .feat-container {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}
[data-theme="light"] .feat-nav {
    background: #f1f5f9 !important;
    border-right: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] .feat-content-area {
    background: #ffffff !important;
    border-color: transparent !important;
}
[data-theme="light"] .feat-panel {
    background: #f8fafc !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
[data-theme="light"] .feat-tab-btn { background: transparent !important; border-color: transparent !important; }
[data-theme="light"] .feat-tab-btn:hover { background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .feat-tab-btn.feat-active {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme="light"] .feat-tab-title { color: #475569 !important; }
[data-theme="light"] .feat-tab-btn.feat-active .feat-tab-title { color: #0f172a !important; }
[data-theme="light"] .feat-panel-title { color: #0f172a !important; }
[data-theme="light"] .feat-panel-desc  { color: #475569 !important; }
/* Tags in light theme — override inline colors to dark */
[data-theme="light"] .feat-panel span[style*="color:#fcd34d"] { color: #92400e !important; background: rgba(245,158,11,0.10) !important; border-color: rgba(245,158,11,0.25) !important; }
[data-theme="light"] .feat-panel span[style*="color:#60a5fa"] { color: #1d4ed8 !important; background: rgba(59,130,246,0.10) !important; border-color: rgba(59,130,246,0.25) !important; }
[data-theme="light"] .feat-panel span[style*="color:#34d399"] { color: #065f46 !important; background: rgba(16,185,129,0.10) !important; border-color: rgba(16,185,129,0.25) !important; }
[data-theme="light"] .feat-panel span[style*="color:#fb923c"] { color: #9a3412 !important; background: rgba(249,115,22,0.10) !important; border-color: rgba(249,115,22,0.25) !important; }
[data-theme="light"] .feat-panel span[style*="color:#f59e0b"] { color: #92400e !important; background: rgba(245,158,11,0.10) !important; border-color: rgba(245,158,11,0.25) !important; }
[data-theme="light"] .feat-panel span[style*="color:#d97706"] { color: #78350f !important; background: rgba(217,119,6,0.10) !important; border-color: rgba(217,119,6,0.25) !important; }
[data-theme="light"] .feat-panel span[style*="color:#f43f5e"] { color: #9f1239 !important; background: rgba(244,63,94,0.10) !important; border-color: rgba(244,63,94,0.25) !important; }
[data-theme="light"] .feat-panel span[style*="color:#e11d48"] { color: #881337 !important; background: rgba(225,29,72,0.10) !important; border-color: rgba(225,29,72,0.25) !important; }
[data-theme="light"] span[style*="color:#a5b4fc"] { color: #4338ca !important; background: rgba(99,102,241,0.10) !important; border-color: rgba(99,102,241,0.25) !important; }

/* ── Bot process steps & stats card ── */
.bot-process-step {
    background: rgba(14,165,233,0.04);
    border: 1px solid rgba(14,165,233,0.10);
}
.bot-process-title { color: #f1f5f9; }
.bot-process-desc  { color: #64748b; }

.bot-stats-card {
    background: linear-gradient(145deg,#061828 0%,#041020 100%);
    border: 1px solid rgba(14,165,233,0.25);
}
.bot-stats-title  { color: #f1f5f9; }
.bot-stats-label  { color: #64748b; }
.bot-stats-track  { background: rgba(255,255,255,0.06); }
.bot-stats-border { border-color: rgba(255,255,255,0.06); }
.bot-stat-pill    { background: rgba(14,165,233,0.08); border: 1px solid rgba(14,165,233,0.15); }

[data-theme="light"] .bot-process-step {
    background: #ffffff !important;
    border-color: rgba(14,165,233,0.15) !important;
    box-shadow: 0 2px 12px rgba(14,165,233,0.08);
}
[data-theme="light"] .bot-process-title { color: #0f172a !important; }
[data-theme="light"] .bot-process-desc  { color: #475569 !important; }

[data-theme="light"] .bot-stats-card {
    background: #ffffff !important;
    border-color: rgba(14,165,233,0.20) !important;
    box-shadow: 0 8px 40px rgba(14,165,233,0.10);
}
[data-theme="light"] .bot-stats-title  { color: #0f172a !important; }
[data-theme="light"] .bot-stats-label  { color: #64748b !important; }
[data-theme="light"] .bot-stats-track  { background: rgba(14,165,233,0.08) !important; }
[data-theme="light"] .bot-stats-border { border-color: rgba(14,165,233,0.12) !important; }
[data-theme="light"] .bot-stat-pill    { background: rgba(14,165,233,0.06) !important; border-color: rgba(14,165,233,0.15) !important; }

/* ── Chat mockup bubbles ── */
.chat-bubble-bot {
    background: rgba(255,255,255,0.12);
    color: #e2e8f0;
}
.chat-bubble-user {
    color: #ffffff;
}
.chat-btn {
    background: rgba(14,165,233,0.15);
    color: #7dd3fc;
    border-color: rgba(14,165,233,0.35);
}

/* ── Process connector line ── */
.process-connector {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
[data-theme="light"] .process-connector {
    background: linear-gradient(90deg, transparent, rgba(37,99,235,0.30), transparent);
}

/* ── Contact page form inputs in light theme ── */
[data-theme="light"] .pipeline-card input,
[data-theme="light"] .pipeline-card textarea {
    background: #f8fafc !important;
    border-color: rgba(15,23,42,0.1) !important;
    color: #0f172a !important;
}
[data-theme="light"] .pipeline-card input:focus,
[data-theme="light"] .pipeline-card textarea:focus {
    border-color: #3b82f6 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
[data-theme="light"] .pipeline-card input::placeholder,
[data-theme="light"] .pipeline-card textarea::placeholder {
    color: #94a3b8 !important;
}

/* ── Process section — light theme ── */
[data-theme="light"] .theme-section-1 h3,
[data-theme="light"] .theme-section-2 h3 { color: #0f172a; }
[data-theme="light"] .theme-section-1 .text-slate-400,
[data-theme="light"] .theme-section-2 .text-slate-400 { color: #475569 !important; }

/* ── Why-card-featured (Якість) — text ── */
.why-featured-desc { color: rgba(255,255,255,0.82); }
[data-theme="light"] .why-card-featured p,
[data-theme="light"] .why-featured-desc { color: rgba(255,255,255,0.92) !important; }
[data-theme="light"] .why-card-featured h3 { color: #ffffff !important; }

/* Smooth transition for all themed elements */
section, nav, .service-card, .portfolio-card, .why-card, .cta-card, h1, h2, h3, p {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.3s ease;
}

/* Tech tabs */
.tech-tab {
    color: rgba(148,163,184,0.6);
    background: transparent;
    border-bottom: 2px solid transparent;
}
.tech-tab:hover {
    color: rgba(148,163,184,1);
    background: rgba(124,58,237,0.04);
}
.tech-tab-active {
    color: #a78bfa !important;
    border-bottom: 2px solid #7c3aed !important;
    background: rgba(124,58,237,0.06) !important;
}
.tech-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
[data-theme="light"] .tech-tab {
    color: rgba(71,85,105,0.6);
}
[data-theme="light"] .tech-tab:hover {
    color: rgba(71,85,105,1);
    background: rgba(124,58,237,0.04);
}
[data-theme="light"] .tech-tab-active {
    color: #7c3aed !important;
    background: rgba(124,58,237,0.06) !important;
}

/* Footer theming */
.theme-footer {
    transition: background-color 0.4s ease, border-color 0.4s ease;
}
.theme-footer h3, .theme-footer h4 { color: var(--footer-heading); transition: color 0.4s ease; }
.theme-footer p, .theme-footer a:not(:hover) { color: var(--footer-link); transition: color 0.4s ease; }
.theme-footer a:hover { color: var(--footer-link-hover); }
.theme-footer .border-t { border-color: var(--footer-border); }

/* Blog content typography */
.blog-content {
    color: #cbd5e1;
    font-size: 1.0625rem;
    line-height: 1.8;
}
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    color: #f1f5f9;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.blog-content h1 { font-size: 2rem; }
.blog-content h2 { font-size: 1.5rem; }
.blog-content h3 { font-size: 1.25rem; }
.blog-content h4 { font-size: 1.1rem; }
.blog-content p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
}
.blog-content a {
    color: #60a5fa;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.blog-content a:hover { color: #93c5fd; }
.blog-content ul,
.blog-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}
.blog-content ul { list-style-type: disc; }
.blog-content ol { list-style-type: decimal; }
.blog-content li { margin-bottom: 0.4rem; line-height: 1.7; }
.blog-content blockquote {
    border-left: 3px solid #3b82f6;
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    background: rgba(59,130,246,0.07);
    border-radius: 0 0.75rem 0.75rem 0;
    color: #94a3b8;
    font-style: italic;
}
.blog-content code {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.375rem;
    padding: 0.15em 0.45em;
    font-size: 0.875em;
    font-family: 'Courier New', monospace;
    color: #a78bfa;
}
.blog-content pre {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    padding: 1.25rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.blog-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: #e2e8f0;
    font-size: 0.875rem;
}
.blog-content img {
    max-width: 100%;
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}
.blog-content hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 2rem 0;
}
.blog-content strong { color: #e2e8f0; font-weight: 600; }
.blog-content em { color: #cbd5e1; }
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.blog-content th {
    background: rgba(255,255,255,0.05);
    color: #e2e8f0;
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.blog-content td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #94a3b8;
}

[data-theme="light"] .blog-content h1,
[data-theme="light"] .blog-content h2,
[data-theme="light"] .blog-content h3,
[data-theme="light"] .blog-content h4 { color: #1e293b; }
[data-theme="light"] .blog-content p,
[data-theme="light"] .blog-content li { color: #334155; }
[data-theme="light"] .blog-content a { color: #2563eb; }
[data-theme="light"] .blog-content a:hover { color: #1d4ed8; }
[data-theme="light"] .blog-content blockquote { background: rgba(59,130,246,0.06); color: #475569; border-left-color: #3b82f6; }
[data-theme="light"] .blog-content code { background: rgba(0,0,0,0.05); color: #7c3aed; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .blog-content pre { background: #f1f5f9; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .blog-content pre code { color: #334155; }
[data-theme="light"] .blog-content strong { color: #0f172a; }
[data-theme="light"] .blog-content em { color: #475569; }
[data-theme="light"] .blog-content hr { border-top-color: rgba(0,0,0,0.1); }
[data-theme="light"] .blog-content th { background: rgba(0,0,0,0.04); color: #1e293b; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .blog-content td { color: #475569; border-color: rgba(0,0,0,0.06); }

/* ── Blog post page layout ─────────────────────────────────────────────────── */

/* Breadcrumb */
.blog-breadcrumb { color: #64748b; }
.blog-breadcrumb-link { color: #64748b; transition: color 0.15s; }
.blog-breadcrumb-link:hover { color: #94a3b8; }
.blog-breadcrumb-sep { color: #475569; margin: 0 0.125rem; }
.blog-breadcrumb-current { color: #94a3b8; }

/* Cover */
.blog-cover-wrap {
    border-radius: 1.25rem;
    overflow: hidden;
    margin-bottom: 2rem;
    aspect-ratio: 16/9;
    background: rgba(255,255,255,0.04);
}
.blog-cover-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Header */
.blog-header { margin-bottom: 2rem; }
.blog-meta {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1rem;
}
.blog-date { font-size: 0.875rem; color: #64748b; }
.blog-meta-sep { color: rgba(255,255,255,0.15); }
.blog-lang-switch {
    font-size: 0.875rem; color: #64748b;
    transition: color 0.15s;
}
.blog-lang-switch:hover { color: #60a5fa; }
.blog-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.25;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.blog-excerpt {
    font-size: 1.125rem;
    color: #94a3b8;
    line-height: 1.7;
}
.blog-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin-bottom: 2rem;
}

/* Article images */
.blog-article-img-wrap {
    margin: 2rem 0;
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
}
.blog-article-img {
    width: 100%;
    display: block;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* CTA Banner */
.blog-cta-banner {
    margin: 3rem 0 2rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(124,58,237,0.12));
    border: 1px solid rgba(99,102,241,0.2);
    padding: 1.5rem 2rem;
}
.blog-cta-inner {
    display: flex; align-items: center; gap: 1.25rem;
    flex-wrap: wrap;
}
.blog-cta-icon { font-size: 2rem; flex-shrink: 0; }
.blog-cta-text {
    flex: 1; min-width: 200px;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.blog-cta-text strong {
    font-size: 1rem; font-weight: 700; color: #e2e8f0;
}
.blog-cta-text span {
    font-size: 0.875rem; color: #94a3b8;
}
.blog-cta-btn {
    display: inline-flex; align-items: center;
    padding: 0.625rem 1.375rem;
    border-radius: 0.75rem;
    font-size: 0.9375rem; font-weight: 700;
    color: #fff; white-space: nowrap;
    background: linear-gradient(135deg, #3b82f6, #7c3aed);
    box-shadow: 0 4px 16px rgba(59,130,246,0.25);
    transition: opacity 0.15s, transform 0.15s;
}
.blog-cta-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Footer nav */
.blog-footer-nav {
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.blog-back-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.9375rem; color: #64748b;
    transition: color 0.15s;
}
.blog-back-link:hover { color: #e2e8f0; }

/* ── Light theme overrides for blog post layout ─────────────────────────────── */
[data-theme="light"] .blog-breadcrumb { color: #64748b; }
[data-theme="light"] .blog-breadcrumb-link { color: #64748b; }
[data-theme="light"] .blog-breadcrumb-link:hover { color: #334155; }
[data-theme="light"] .blog-breadcrumb-current { color: #94a3b8; }

[data-theme="light"] .blog-cover-wrap { background: #f1f5f9; }

[data-theme="light"] .blog-date { color: #64748b; }
[data-theme="light"] .blog-meta-sep { color: rgba(0,0,0,0.15); }
[data-theme="light"] .blog-lang-switch { color: #64748b; }
[data-theme="light"] .blog-lang-switch:hover { color: #2563eb; }
[data-theme="light"] .blog-title { color: #0f172a; }
[data-theme="light"] .blog-excerpt { color: #475569; }
[data-theme="light"] .blog-divider { background: rgba(0,0,0,0.08); }

[data-theme="light"] .blog-article-img-wrap { background: #f8fafc; }
[data-theme="light"] .blog-article-img { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

[data-theme="light"] .blog-cta-banner {
    background: linear-gradient(135deg, rgba(59,130,246,0.07), rgba(124,58,237,0.07));
    border-color: rgba(99,102,241,0.15);
}
[data-theme="light"] .blog-cta-text strong { color: #0f172a; }
[data-theme="light"] .blog-cta-text span { color: #475569; }

[data-theme="light"] .blog-footer-nav { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .blog-back-link { color: #64748b; }
[data-theme="light"] .blog-back-link:hover { color: #0f172a; }

/* ── Light theme: blog content text colors ──────────────────────────────────── */
[data-theme="light"] .blog-content {
    color: #334155;
}
[data-theme="light"] .blog-content p { color: #334155; }
[data-theme="light"] .blog-content li { color: #334155; }
[data-theme="light"] .blog-content em { color: #475569; }

/* ─── Blog post page layout ─────────────────────────────────────────────────── */

/* Breadcrumb */
.blog-breadcrumb { color: #64748b; }
.blog-breadcrumb-link { color: #64748b; transition: color 0.15s; }
.blog-breadcrumb-link:hover { color: #3b82f6; }
.blog-breadcrumb-sep { color: #94a3b8; margin: 0 0.125rem; }
.blog-breadcrumb-current { color: #94a3b8; }

[data-theme="light"] .blog-breadcrumb-link { color: #64748b; }
[data-theme="light"] .blog-breadcrumb-link:hover { color: #2563eb; }
[data-theme="light"] .blog-breadcrumb-sep { color: #cbd5e1; }
[data-theme="light"] .blog-breadcrumb-current { color: #94a3b8; }

/* Cover image */
.blog-cover-wrap {
    border-radius: 1.25rem;
    overflow: hidden;
    margin-bottom: 2rem;
    aspect-ratio: 16/9;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.blog-cover-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
[data-theme="light"] .blog-cover-wrap {
    background: #f1f5f9;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

/* Header */
.blog-header { margin-bottom: 2rem; }
.blog-meta {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1rem;
}
.blog-date { font-size: 0.875rem; color: #64748b; }
.blog-meta-sep { color: rgba(255,255,255,0.15); }
.blog-lang-switch {
    font-size: 0.8125rem; color: #64748b;
    transition: color 0.15s;
    text-decoration: none;
}
.blog-lang-switch:hover { color: #60a5fa; }

[data-theme="light"] .blog-meta-sep { color: #e2e8f0; }
[data-theme="light"] .blog-lang-switch:hover { color: #2563eb; }

.blog-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.25;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
[data-theme="light"] .blog-title { color: #0f172a; }

.blog-excerpt {
    font-size: 1.125rem;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
}
[data-theme="light"] .blog-excerpt { color: #475569; }

/* Divider */
.blog-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin-bottom: 2rem;
}
[data-theme="light"] .blog-divider { background: #e2e8f0; }

/* Article images injected between sections */
.blog-article-img-wrap {
    margin: 2rem 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.blog-article-img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 480px;
    object-fit: cover;
}
[data-theme="light"] .blog-article-img-wrap {
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

/* CTA Banner */
.blog-cta-banner {
    margin: 3rem 0 2rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(124,58,237,0.12));
    border: 1px solid rgba(99,102,241,0.25);
    padding: 1.5rem;
}
.blog-cta-inner {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.blog-cta-icon { font-size: 2rem; flex-shrink: 0; }
.blog-cta-text {
    flex: 1; min-width: 200px;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.blog-cta-text strong {
    font-size: 1rem; font-weight: 700; color: #e2e8f0;
}
.blog-cta-text span {
    font-size: 0.875rem; color: #94a3b8;
}
.blog-cta-btn {
    display: inline-flex; align-items: center;
    padding: 0.625rem 1.25rem; border-radius: 0.75rem;
    font-size: 0.9375rem; font-weight: 700; white-space: nowrap;
    background: linear-gradient(135deg, #3b82f6, #7c3aed);
    color: #fff; text-decoration: none;
    box-shadow: 0 4px 16px rgba(59,130,246,0.3);
    transition: opacity 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.blog-cta-btn:hover { opacity: 0.9; transform: translateY(-1px); }

[data-theme="light"] .blog-cta-banner {
    background: linear-gradient(135deg, rgba(59,130,246,0.07), rgba(124,58,237,0.07));
    border-color: rgba(99,102,241,0.2);
}
[data-theme="light"] .blog-cta-text strong { color: #1e293b; }
[data-theme="light"] .blog-cta-text span { color: #64748b; }

/* Footer nav */
.blog-footer-nav {
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 1rem;
}
[data-theme="light"] .blog-footer-nav { border-top-color: #e2e8f0; }

.blog-back-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.9375rem; color: #64748b;
    text-decoration: none; transition: color 0.15s;
}
.blog-back-link:hover { color: #60a5fa; }
[data-theme="light"] .blog-back-link:hover { color: #2563eb; }

/* Fix: blog-content base text color for dark theme */
.blog-content {
    color: #cbd5e1;
    line-height: 1.8;
    font-size: 1.0625rem;
}
[data-theme="light"] .blog-content { color: #334155; }

/* ── Blog list page (bl-*) ──────────────────────────────────────────────────── */

/* Featured Card */
.bl-card-featured {
    border-radius: 1.5rem;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(15,23,42,0.6) 0%, rgba(10,15,30,0.8) 100%);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .bl-card-featured {
        min-height: 360px;
    }
}
.bl-card-featured:hover {
    border-color: rgba(59,130,246,0.4);
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.3), 0 0 40px rgba(59,130,246,0.1);
}
[data-theme="light"] .bl-card-featured {
    background: #ffffff;
    border-color: rgba(37,99,235,0.15);
    box-shadow: 0 12px 32px rgba(15,23,42,0.08);
}
[data-theme="light"] .bl-card-featured:hover {
    border-color: rgba(37,99,235,0.3);
    box-shadow: 0 20px 48px rgba(15,23,42,0.12);
}

/* Hero */
.bl-badge {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,0.3);
    background: rgba(59,130,246,0.1);
}
.bl-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #f1f5f9;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.bl-hero-sub {
    color: #94a3b8;
    font-size: 1.125rem;
    max-width: 36rem;
    margin: 0 auto;
}

/* Card */
.bl-card {
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.03);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.bl-card:hover {
    border-color: rgba(59,130,246,0.3);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.bl-card-img-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.bl-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.bl-card:hover .bl-card-img { transform: scale(1.05); }
.bl-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(124,58,237,0.12));
    color: #60a5fa;
}
.bl-card-date {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.625rem;
}
.bl-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.4;
    margin-bottom: 0.625rem;
    transition: color 0.15s;
}
.bl-card-title a { color: inherit; }
.bl-card:hover .bl-card-title { color: #93c5fd; }
.bl-card-excerpt {
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
}
.bl-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #60a5fa;
    transition: color 0.15s, gap 0.15s;
}
.bl-card-link:hover { color: #93c5fd; gap: 0.625rem; }

/* List View overrides */
.bl-list-view .bl-card {
    flex-direction: row;
    align-items: stretch;
}
.bl-list-view .bl-card-img-wrap {
    width: 30%;
    aspect-ratio: auto;
    flex-shrink: 0;
}
.bl-list-view .bl-card-title {
    font-size: 1.25rem;
}
@media (max-width: 640px) {
    .bl-list-view .bl-card {
        flex-direction: column;
    }
    .bl-list-view .bl-card-img-wrap {
        width: 100%;
        aspect-ratio: 16/9;
    }
}

/* Empty state */
.bl-empty-icon {
    width: 5rem; height: 5rem;
    border-radius: 1rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.15);
    color: #60a5fa;
}
.bl-empty-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
}
.bl-empty-sub { color: #94a3b8; font-size: 0.9375rem; }

/* ── Light theme overrides ──────────────────────────────────────────────────── */
[data-theme="light"] .bl-badge {
    color: #2563eb;
    border-color: rgba(37,99,235,0.25);
    background: rgba(37,99,235,0.07);
}
[data-theme="light"] .bl-hero-title { color: #0f172a; }
[data-theme="light"] .bl-hero-sub { color: #475569; }

[data-theme="light"] .bl-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .bl-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 8px 24px rgba(37,99,235,0.1);
}
[data-theme="light"] .bl-card-img-placeholder {
    background: linear-gradient(135deg, rgba(59,130,246,0.07), rgba(124,58,237,0.07));
    color: #3b82f6;
}
[data-theme="light"] .bl-card-date { color: #94a3b8; }
[data-theme="light"] .bl-card-title { color: #0f172a; }
[data-theme="light"] .bl-card:hover .bl-card-title { color: #2563eb; }
[data-theme="light"] .bl-card-excerpt { color: #475569; }
[data-theme="light"] .bl-card-link { color: #2563eb; }
[data-theme="light"] .bl-card-link:hover { color: #1d4ed8; }

[data-theme="light"] .bl-card-featured .bg-blue-500\/20 { background: rgba(37,99,235,0.1); color: #1d4ed8; border-color: rgba(37,99,235,0.2); }
[data-theme="light"] .bl-card-featured .bg-blue-600\/10 { background: rgba(37,99,235,0.05); color: #2563eb; border-color: rgba(37,99,235,0.15); }
[data-theme="light"] .bl-card-featured .hover\:bg-blue-600\/20:hover { background: rgba(37,99,235,0.1); border-color: rgba(37,99,235,0.25); }
[data-theme="light"] .bl-card-featured .bl-card-title a { color: #0f172a; }
[data-theme="light"] .bl-card-featured:hover .bl-card-title a { color: #2563eb; }
[data-theme="light"] .bl-card-featured .bl-card-excerpt { color: #475569; }
[data-theme="light"] .bl-card-featured .bl-card-date { color: #64748b; }

[data-theme="light"] .bl-empty-icon {
    background: rgba(37,99,235,0.06);
    border-color: rgba(37,99,235,0.12);
    color: #3b82f6;
}
[data-theme="light"] .bl-empty-title { color: #0f172a; }
[data-theme="light"] .bl-empty-sub { color: #64748b; }

/* Light theme view toggle */
[data-theme="light"] .theme-view-toggle {
    background: #f1f5f9;
    border-color: rgba(15,23,42,0.1);
}
[data-theme="light"] .theme-view-toggle button.text-slate-500:hover {
    color: #0f172a;
}