* { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
    body { background: #f8fafc; overflow-x: hidden; }
    html { overflow-x: hidden; }
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    /* Blog prose styles (Tailwind Typography not loaded) */
    .prose h2 { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin-top: 2em; margin-bottom: 0.75em; line-height: 1.3; }
    .prose h3 { font-size: 1.25rem; font-weight: 600; color: #1e293b; margin-top: 1.5em; margin-bottom: 0.5em; }
    .prose p { color: #475569; margin-bottom: 1.25em; }
    .prose a { color: #2563eb; text-decoration: underline; }
    .prose a:hover { color: #1d4ed8; }
    .prose strong { color: #1e293b; font-weight: 600; }
    .prose em { font-style: italic; }
    .prose ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1.25em; }
    .prose ul li { color: #475569; margin-bottom: 0.5em; }
    .prose ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.25em; }
    .prose ol li { color: #475569; margin-bottom: 0.5em; }
    .prose hr { border-color: #e2e8f0; margin: 2em 0; }
    .prose blockquote { border-left: 3px solid #2563eb; padding-left: 1em; color: #64748b; font-style: italic; margin: 1.5em 0; }
    
    /* Connector line flow animation - data flowing from sources → hub → matches */
    @keyframes flowLine {
      0%, 5% { stroke-dashoffset: 200; opacity: 0.3; }
      15% { opacity: 1; }
      45% { stroke-dashoffset: 0; opacity: 1; }
      55% { stroke-dashoffset: 0; opacity: 0.6; }
      85% { stroke-dashoffset: -120; opacity: 0.3; }
      100% { stroke-dashoffset: -120; opacity: 0; }
    }
    .conn-glow-wrap path {
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      stroke: #60a5fa;
      filter: drop-shadow(0 0 3px rgba(59,130,246,0.4));
      animation: flowLine 4s ease-in-out infinite;
    }
    .conn-glow-wrap path:nth-child(1) { animation-delay: 0s; }
    .conn-glow-wrap path:nth-child(2) { animation-delay: 0.25s; }
    .conn-glow-wrap path:nth-child(3) { animation-delay: 0.5s; }
    .conn-glow-wrap path:nth-child(4) { animation-delay: 0.75s; }
    .conn-glow-wrap path:nth-child(5) { animation-delay: 1s; }
    .conn-glow-wrap.conn-right path:nth-child(1) { animation-delay: 2s; }
    .conn-glow-wrap.conn-right path:nth-child(2) { animation-delay: 2.25s; }
    .conn-glow-wrap.conn-right path:nth-child(3) { animation-delay: 2.5s; }

    /* Scroll-reveal animations (IntersectionObserver) */
    .scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
    .scroll-reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
    .scroll-reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
    .scroll-reveal-scale { opacity: 0; transform: scale(0.85); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
    .scroll-reveal.visible, .scroll-reveal-left.visible, .scroll-reveal-right.visible, .scroll-reveal-scale.visible { opacity: 1; transform: none; }
    .stagger-children > *:nth-child(1) { transition-delay: 0s; }
    .stagger-children > *:nth-child(2) { transition-delay: 0.08s; }
    .stagger-children > *:nth-child(3) { transition-delay: 0.16s; }
    .stagger-children > *:nth-child(4) { transition-delay: 0.24s; }
    .stagger-children > *:nth-child(5) { transition-delay: 0.32s; }
    /* Hero stagger on page load */
    .hero-stagger { opacity: 0; transform: translateY(18px); animation: heroReveal 0.55s ease-out forwards; }
    .hero-stagger:nth-child(1) { animation-delay: 0.05s; }
    .hero-stagger:nth-child(2) { animation-delay: 0.18s; }
    .hero-stagger:nth-child(3) { animation-delay: 0.31s; }
    @keyframes heroReveal { to { opacity: 1; transform: translateY(0); } }
    .hero-sub-reveal { opacity: 0; animation: heroReveal 0.5s ease-out 0.42s forwards; }
    .hero-cta-reveal { opacity: 0; animation: heroReveal 0.5s ease-out 0.55s forwards; }
    .hero-card-reveal { opacity: 0; transform: translateX(40px); animation: heroCardSlide 0.65s ease-out 0.3s forwards; }
    @keyframes heroCardSlide { to { opacity: 1; transform: translateX(0); } }
    /* Button hover lift */
    .hover-lift { transition: transform 0.2s, box-shadow 0.2s; }
    .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37,99,235,0.35); }

    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes slideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    @keyframes gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    @keyframes toastSlide { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    @keyframes toastFade { from { opacity: 1; } to { opacity: 0; } }
    @keyframes pulse-border { 0%, 100% { border-color: #2563eb; } 50% { border-color: #60a5fa; } }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes nodePulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } 50% { transform: scale(1.06); box-shadow: 0 8px 20px rgba(0,0,0,0.14); } }
    .flow-node { animation: nodePulse 4s ease-in-out infinite; }
    .flow-node-1 { animation-delay: 0s; }
    .flow-node-2 { animation-delay: 1.3s; }
    .flow-node-3 { animation-delay: 2.6s; }
    .proc-node-icon { animation: nodePulse 4s ease-in-out infinite; }
    .proc-node-1 { animation-delay: 0s; }
    .proc-node-2 { animation-delay: 1.3s; }
    .proc-node-3 { animation-delay: 2.6s; }
    /* Mobile responsive fixes for Advantage & VS sections */
    @media (max-width: 767px) {
      .adv-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
      .adv-svg-flow { display: none !important; }
      .adv-heading { font-size: 28px !important; margin-bottom: 8px !important; }
      .adv-subheading { font-size: 14px !important; margin-bottom: 32px !important; padding: 0 8px; }
      .vs-heading { font-size: 28px !important; margin-bottom: 32px !important; line-height: 1.2 !important; }
      .vs-grid { grid-template-columns: 1fr !important; gap: 40px !important; max-width: 100% !important; }
      .vs-number { font-size: 44px !important; }
      .vs-listings { max-height: 200px !important; }
    }
    
    .animate-fade-in { animation: fadeIn 0.3s ease-out; }
    .animate-scale-in { animation: scaleIn 0.3s ease-out; }
    .animate-float { animation: float 3s ease-in-out infinite; }
    .animate-spin { animation: spin 1s linear infinite; }
    .animate-toast-slide { animation: toastSlide 0.3s ease-out; }
    .score-circle { position: relative; }
    .score-circle svg { transform: rotate(-90deg); }
    .score-circle .bg { fill: none; stroke: #e2e8f0; stroke-width: 5; }
    .score-circle .prog { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease-out; }
    .score-circle .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; }
    
    .drop-zone.dragging { border-color: #2563eb; background: #f0f7ff; transform: scale(1.02); }
    
    /* SEEK-Style Job Card */
    .job-card:hover { 
      border-left-color: #2563eb;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .job-card.selected { 
      border-left-color: #2563eb;
      background: #f8fafc;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    }
    
    /* SEEK-Style Tags */
    .skill-tag.match { background: #f0fdf4; color: #16a34a; }
    .skill-tag.missing { background: #fef2f2; color: #dc2626; }
    
    /* Detail Panel Header */
    /* Company Logo Placeholder */
    /* Info Row with Icon */
    .info-row svg { flex-shrink: 0; color: #94a3b8; }
    
    /* Action Buttons SEEK-style */
    .btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
    
    .btn-secondary:hover { background: #f0f7ff; }
    
    /* New Badge */
    /* Featured Badge */
    .job-card.selected { border-left: 4px solid #338dff; background: #f8fafc; }
    .modal-overlay { backdrop-filter: blur(8px); background: rgba(15, 23, 42, 0.6); }
    .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
    .hero-gradient {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      background-size: 200% 200%;
      animation: gradient 8s ease infinite;
    }
    
    .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: none;
    }

    .toast {
      pointer-events: auto;
      min-width: 300px;
      padding: 16px 20px;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 500;
    }

    /* Job Description Formatting */
    .job-description {
      line-height: 1.7;
    }
    
    .job-description strong {
      color: #1e293b;
      font-weight: 600;
    }
    
    .job-description ul {
      margin: 0.75rem 0;
      padding-left: 1.25rem;
    }
    
    .job-description li {
      margin-bottom: 0.5rem;
      position: relative;
    }
    
    .job-description li::marker {
      color: #10b981;
    }
    
    .job-description p {
      margin-bottom: 0.5rem;
    }