@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

    html { scroll-behavior: smooth; }
    body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-in { animation: fadeIn 0.75s ease-out both; }

    .gradient-bg { background: linear-gradient(135deg, #0b1220 0%, #1f2937 55%, #0b1220 100%); }
    .tile-hover:hover { transform: translateY(-4px); background-color: rgba(255,255,255,0.14); }
    .glass { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.10); }
    .pill { border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); transition: border-color 0.2s, background-color 0.2s; }
    .pill:hover { border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.14); }

    /* small helper to keep tiles consistent */
    .tile { transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; }

    /* dynamic section grid with tile-count aware desktop layouts */
    .tile-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      width: 100%;
    }

    @media (min-width: 768px) {
      .tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {
      .tile-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
      }

      /* default desktop: 3-up */
      .tile-grid > .tile {
        grid-column: span 4;
      }

      /* only 1 tile */
      .tile-grid > .tile:only-child {
        grid-column: 1 / -1;
      }

      /* only 2 tiles: 50/50 */
      .tile-grid > .tile:first-child:nth-last-child(2),
      .tile-grid > .tile:first-child:nth-last-child(2) ~ .tile {
        grid-column: span 6;
      }

      /* exactly 4 tiles: all in one row as 4 equal columns */
      .tile-grid > .tile:first-child:nth-last-child(4),
      .tile-grid > .tile:first-child:nth-last-child(4) ~ .tile {
        grid-column: span 3;
      }

      /* exactly 5 tiles: 3 on first row, 2 on second row */
      .tile-grid > .tile:nth-child(4):nth-last-child(2),
      .tile-grid > .tile:last-child:nth-child(5) {
        grid-column: span 6;
      }
    }

    /* section title helper */
    .section-title {
      display:flex; align-items:center; gap:14px;
      margin: 22px 0 14px;
    }
    .section-title .line { height:1px; background: rgba(148,163,184,0.25); flex:1; }
    .section-title h3 { letter-spacing: 0.18em; }

    @media (min-width: 1024px) {
      .tile-grid--two-col-desktop > .tile {
        grid-column: span 6;
      }
    }