* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Sour Gummy', sans-serif;
      background: #0b2b8aA2;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Navigation */
    nav {
      background: #0fb6e9;
      padding: 20px 30px;
      position: relative;
      z-index: 100;
    }

    .logo {
      font-size: 48px;
      font-weight: 600;
      color: #c67422;
      text-shadow: 4px 4px 4px rgba(0,0,0,0.2);
      -webkit-text-stroke: 2px #a524d5;
    }

    /* Main container */
    .container {
      max-width: 1366px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
    }

    /* Background images - visible on mobile */
    .bg-images {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .bg-image {
      position: absolute;
      background: #8e8882;
      opacity: 0.3;
    }

    /* Content cards */
    .card {
      background: rgba(255,255,255,0.9);
      border-radius: 30px;
      padding: 30px 35px;
      margin-bottom: 20px;
      box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
      border: 2px solid #000;
      position: relative;
      z-index: 1;
    }

    .card h2 {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .card p {
      font-size: 16px;
      line-height: 1.4;
      margin-bottom: 8px;
    }

    /* Card colors */
    .card.hero { background: #f08102; }
    .card.messaging { background: #20ab7a; }
    .card.pixel { background: rgba(222, 38, 38, 0.65); }
    .card.email { background: rgba(42, 214, 93, 0.56); }
    .card.mastodon { background: rgba(42, 179, 214, 0.56); }
    .card.federation { background: #595552; color: #f5f5f5; }
    .card.federation h2 { color: #f5f5f5; }
    .card.federation .status { color: #27ea19; font-weight: 600; }

    /* Desktop layout */
    @media (min-width: 768px) {
      .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 40px;
      }

      .card.hero {
        grid-column: 1;
        grid-row: 1;
      }

      .card.messaging {
        grid-column: 1;
        grid-row: 2;
      }

      .card.pixel {
        grid-column: 2;
        grid-row: 1;
      }

      .card.email {
        grid-column: 2;
        grid-row: 2;
      }

      .card.mastodon {
        grid-column: 2;
        grid-row: 3;
      }

      .card.federation {
        grid-column: 1 / -1;
        grid-row: 4;
      }

      /* Show decorative boxes on desktop */
      .bg-images {
        display: block;
        opacity: 1;
      }

      .bg-image.pic1 {
        top: 144px;
        right: 42px;
        width: 585px;
        height: 613px;
      }

      .bg-image.pic2 {
        top: 1100px;
        left: 60px;
        width: 585px;
        height: 573px;
      }
    }

    /* Mobile adjustments */
    @media (max-width: 767px) {
      .logo {
        font-size: 32px;
      }

      nav {
        padding: 15px 20px;
      }

      .container {
        padding: 15px;
      }

      /* Show background images on mobile with transparency */
      .bg-images {
        display: block;
      }

      .bg-image.pic1 {
        top: 10%;
        left: -20%;
        width: 140%;
        height: 40%;
      }

      .bg-image.pic2 {
        bottom: 10%;
        right: -20%;
        width: 140%;
        height: 40%;
      }

      /* Make cards more transparent on mobile */
      .card {
        background: rgba(255,255,255,0.85);
      }

      .card.hero { background: rgba(240, 129, 2, 0.85); }
      .card.messaging { background: rgba(32, 171, 122, 0.85); }
      .card.pixel { background: rgba(222, 38, 38, 0.55); }
      .card.email { background: rgba(42, 214, 93, 0.5); }
      .card.mastodon { background: rgba(42, 179, 214, 0.5); }
      .card.federation { background: rgba(89, 85, 82, 0.9); }
    }