:root {
    --gp-primary: #0BADEE;
    --gp-bg: #f9fafb;
    --gp-text: #1f2937;
    --gp-muted: #6b7280;
}

/* More Sugar – Regular */
@font-face {
  font-family: 'More Sugar';
  src: url('./fonts/MoreSugar-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* More Sugar – Thin */
@font-face {
  font-family: 'More Sugar';
  src: url('./fonts/MoreSugar-Thin.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* More Sugar – Extras (Dekosymbole) */
@font-face {
  font-family: 'More Sugar Extras';
  src: url('./fonts/MoreSugar-Extras.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


* { box-sizing: border-box; }
    html, body { 
        height: 100%; 
    }
    
    body {
        margin: 0;
        font-family: 'More Sugar', sans-serif;
        color: var(--gp-text);
        background-color: var(--gp-primary);
        display: grid;
        place-items: center;
        padding: 24px;
    }

    .wrap {
      width: min(960px, 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }

    .top-content {
      display: grid;
      gap: 24px;
      align-items: center;
      grid-template-columns: 0.9fr 1.1fr;
    }

    .card {
      background-color: var(--gp-bg);
      border-radius: 24px;
      padding: clamp(20px, 5vw, 36px);
      box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25);
    }

    .logo-text {
      font-family: 'League Spartan', sans-serif;
      font-size: 64px;
      color: var(--gp-primary);
      letter-spacing: 1px;
      margin-bottom: 16px;
      text-transform: lowercase;
    }

    .chip {
      font-size: 16px;
      font-family: sans-serif;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--gp-primary);
      background: color-mix(in srgb, var(--gp-primary) 12%, white);
      border: 1px solid color-mix(in srgb, var(--gp-primary) 28%, transparent);
      padding: 6px 10px;
      border-radius: 999px;
      display: inline-block;
    }

    .bye-text {
      margin: 8px 0 12px;
      font-size: clamp(26px, 3.5vw, 42px);
      line-height: 1.05;
      color: var(--gp-primary);
      font-family: 'Chau Philomene One', sans-serif;
    }

    h1 {
      margin: 12px 0 12px;
      font-size: clamp(32px, 4.4vw, 56px);
      line-height: 1.05;
      color: var(--gp-primary);
      font-family: 'Chau Philomene One', sans-serif;
      font-weight: 100;
    }

    p.lead {
      margin: 0 0 18px;
      color: var(--gp-text);
      font-size: clamp(19px, 1.8vw, 18px);
    }

    .social {
      text-align: center;
      margin-top: 20px;
    }

    .social-text {
      color: #ffffff;
      font-size: 26px;
      margin-bottom: 16px;
    }

    .social-buttons {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: sans-serif;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: 999px;
      padding: 14px 28px;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.4s ease;
      gap: 8px;
      min-width: 180px;
    }

    .btn i {
      font-size: 18px;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    /* Instagram original static gradient */
    .insta {
      background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
      color: #fff;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .insta:hover {
      filter: brightness(1.1);
    }

    .tiktok {
      background: #000;
      color: #fff;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .art { position: relative; display: grid; place-items: center; }
    .mascot {
      width: min(380px, 90%);
      aspect-ratio: 1 / 1;
      object-fit: contain;
      filter: drop-shadow(0 20px 40px rgba(17,24,39,0.25));
      animation: float 5.5s ease-in-out infinite;
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    footer {
      position: fixed; inset: auto 0 12px 0; text-align: center; color: #ffffffcc;
      font-size: 18px; letter-spacing: .02em;
      font-weight: bold;
    }

    @media (max-width: 900px){
      .top-content { grid-template-columns: 1fr; gap: 18px; }
      .art { order: -1; }
    }