* { font-family: 'Poppins', system-ui, -apple-system, sans-serif; }
    html { scroll-behavior: smooth; }

    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    .h1-gradient { background: linear-gradient(135deg, #1D1D1F 0%, #2c3e6b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

    /* Progress bar animation */
    @keyframes fillBar { from { width: 0; } to { width: 85%; } }
    .anim-bar.active .bar-fill { animation: fillBar 1.5s ease-out forwards; }

    /* Histogram bars */
    @keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .anim-histo.active .histo-bar { animation: growBar 0.6s ease-out forwards; transform-origin: bottom; }

    /* Circular arc */
    @keyframes drawArc { from { stroke-dashoffset: 188; } to { stroke-dashoffset: 28; } }
    .anim-arc.active .arc-path { animation: drawArc 1.5s ease-out forwards; }

    /* FAQ */
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
    .faq-item.open .faq-answer { max-height: 300px; }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    .faq-chevron { transition: transform 0.3s ease; }

    /* macOS window */
    .macos-window { border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid #D2D2D7; background: #fff; }
    .macos-titlebar { height: 32px; background: #F5F5F7; display: flex; align-items: center; padding: 0 12px; gap: 6px; border-bottom: 1px solid #E5E5E5; }
    .macos-dot { width: 10px; height: 10px; border-radius: 50%; }

    .card-gradient-1 { background: linear-gradient(135deg, #E8F0FE 0%, #F0E8FE 100%); }
    .card-gradient-2 { background: linear-gradient(135deg, #E8F0FE 0%, #E0F5F0 100%); }
    .card-gradient-3 { background: linear-gradient(135deg, #FEF0E8 0%, #FEE8F0 100%); }
    .card-gradient-4 { background: linear-gradient(135deg, #E8FEF0 0%, #E8F0FE 100%); }
    .card-gradient-5 { background: linear-gradient(135deg, #F0E8FE 0%, #E8F0FE 100%); }
    .card-gradient-6 { background: linear-gradient(135deg, #E0F5F0 0%, #E8FEF0 100%); }
    .card-gradient-7 { background: linear-gradient(135deg, #FEE8F0 0%, #FEF0E8 100%); }
    .card-gradient-8 { background: linear-gradient(135deg, #E8F0FE 0%, #E0F0F5 100%); }