 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    ::selection { background: rgba(37,99,235,0.12); }
    body { font-family: 'Outfit', sans-serif; background: #FAFAFA; color: #1d1d1f; }
    #root { background: #FAFAFA; min-height: 100vh; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      html { scroll-behavior: auto; }
    }
    .skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; background: #2563EB; color: #fff; padding: 12px 24px; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: top 0.2s; }
    .skip-link:focus { top: 0; }
    :focus-visible { outline: 3px solid #2563EB; outline-offset: 3px; border-radius: 4px; }
    button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* ── Responsive ── */
    .hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; max-width: 1200px; margin: 0 auto; }
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(0,0,0,0.07); }
    .stats-cell { padding: 48px 24px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.07); }
    .ai-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(0,0,0,0.06); border-radius: 16px; overflow: hidden; }
    .work-grid { display: flex; flex-direction: column; gap: 0; border-radius: 16px; overflow: hidden; border: 1.5px solid #e8e4de; }
    .work-card-expanded { }
    .story-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 24px; }
    .quotes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .nav-links { display: flex; gap: 28px; align-items: center; }
    .section-pad { padding: 100px 80px; }
    .hero-section { min-height: 100vh; padding: 0 80px; display: flex; align-items: center; }
    .hero-headline { font-size: 60px; }
    .section-headline { font-size: 38px; }
    .stat-value { font-size: 56px; }
    .photo-frame { width: 100%; max-width: 440px; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; }
    .modal-box { padding: 48px 40px; max-width: 400px; width: 90%; }
    .challenge-pills { display: flex; gap: 8px; flex-wrap: wrap; }

    @media (min-width: 1400px) {
      .hero-headline { font-size: 68px; }
      .section-headline { font-size: 44px; }
      .stat-value { font-size: 64px; }
      .quotes-grid { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr !important; text-align: center; }
      .hero-section { padding: 100px 24px 40px !important; min-height: auto !important; }
      .hero-headline { font-size: 38px !important; }
      .section-headline { font-size: 28px !important; }
      .photo-frame { max-width: 280px; aspect-ratio: 1/1; margin: 0 auto; border-radius: 50%; }
      .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .stats-cell:nth-child(even) { border-right: none !important; }
      .stats-cell:nth-child(odd) { border-right: 1px solid rgba(0,0,0,0.07); }
      .stat-value { font-size: 36px !important; }
      .ai-cards { grid-template-columns: 1fr !important; }
      .ai-cards > div { border-right: none !important; border-bottom: 1.5px solid #e8e4de; }
      .tool-pills { gap: 8px !important; }
      .tool-pills span { font-size: 12px !important; padding: 6px 12px !important; }
      .story-columns { grid-template-columns: 1fr !important; gap: 20px !important; }
      .quotes-grid { grid-template-columns: 1fr !important; }
      .section-pad { padding: 48px 24px !important; }
      nav { padding: 12px 24px !important; }
      .nav-links { gap: 16px !important; }
      .nav-links button { font-size: 12px !important; }
      .challenge-pills { justify-content: center; }
    }

    @media (max-width: 480px) {
      .hero-headline { font-size: 32px !important; }
      .section-headline { font-size: 24px !important; }
      .stat-value { font-size: 28px !important; }
      .stats-grid { grid-template-columns: 1fr !important; }
      .stats-cell { border-right: none !important; }
      .section-pad { padding: 48px 16px !important; }
      .hero-section { padding: 80px 16px 32px !important; }
      .modal-box { padding: 32px 24px !important; }
    }