html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
      min-height: 100vh;
      color: #f4f7ed;
      background: linear-gradient(135deg, #232b1c 0%, #3a472a 80%, #27331c 100%);
      overflow-x: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .svg-bg {
      position: fixed;
      z-index: 0;
      inset: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      opacity: 0.7;
      /* Blend in dark mode */
      mix-blend-mode: lighten;
    }
    .centerpiece {
      background: rgba(31, 40, 27, 0.93);
      box-shadow: 0 8px 48px #7ea25344, 0 2px 24px #0005;
      border-radius: 28px;
      padding: 44px 30px 30px 30px;
      max-width: 470px;
      width: 96vw;
      text-align: center;
      margin: 56px 0 0 0;
      position: relative;
      overflow: visible;
      z-index: 1;
      border: 1.5px solid #485437;
      animation: dropIn 1.1s cubic-bezier(.37,1.28,.72,.92) 0.12s backwards;
      backdrop-filter: blur(8px) saturate(1.16);
    }
    @keyframes dropIn {
      0% { opacity:0; transform: translateY(-55px) scale(.92);}
      80% { opacity:1; transform: translateY(8px) scale(1.02);}
      100% { opacity:1; transform: none;}
    }
    .logo-badge {
      width: 240px;
      max-width: 80vw;
      margin-bottom: 26px;
      filter: drop-shadow(0 9px 40px #7ea25333);
      border-radius: 20px;
      animation: bounceIn 1.1s cubic-bezier(.52,1.7,.5,.94);
      background: rgba(0,0,0,0.0);
    }
    @keyframes bounceIn {
      0% { opacity: 0; transform: scale(.85) translateY(-34px);}
      60% { opacity: 1; transform: scale(1.03) translateY(10px);}
      100% { opacity: 1; transform: scale(1) translateY(0);}
    }
    h1 {
      font-family: 'Montserrat', 'Inter', Arial, sans-serif;
      font-weight: 800;
      font-size: 2.1em;
      letter-spacing: 0.01em;
      margin: 0 0 14px 0;
      background: linear-gradient(90deg,#d2b055 20%,#9db77c 60%,#7ea253 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: gradientText 3s linear infinite alternate;
      text-shadow: 0 2px 16px #7ea25322;
      line-height: 1.15;
      word-break: break-word;
      white-space: normal;
    }
    @keyframes gradientText {
      0% { background-position: 0 0;}
      100% { background-position: 100% 0;}
    }
    .tagline {
      font-size: 1.16em;
      color: #dbe5cc;
      font-weight: 400;
      line-height: 1.5;
      margin-bottom: 28px;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeSlideIn 1.1s 0.55s forwards;
      text-shadow: 0 2px 7px #0004;
    }
    @keyframes fadeSlideIn {
      to { opacity:1; transform: none;}
    }
    .coming-badge {
      display: inline-block;
      margin: 28px auto 0 auto;
      background: linear-gradient(95deg, #7ea253 35%, #d2b055 120%);
      color: #fff;
      font-family: 'Montserrat', 'Inter', Arial, sans-serif;
      font-weight: 800;
      border-radius: 15px;
      padding: 12px 38px;
      font-size: 1.15em;
      letter-spacing: 0.05em;
      text-shadow: 0 2px 8px #0007, 0 2px 8px #7ea25311;
      box-shadow: 0 6px 32px #7ea25333;
      filter: brightness(1.07) saturate(1.08);
      position: relative;
      animation: gentlePulse 2.2s infinite alternate;
      user-select: none;
      cursor: default;
      border: none;
      outline: none;
      pointer-events: none;
    }
    @keyframes gentlePulse {
      0% { box-shadow: 0 6px 32px #7ea25333,0 2px 9px #d2b05512;}
      100% { box-shadow: 0 12px 36px #d2b05548,0 2px 18px #7ea25322;}
    }
    .powered {
      margin-top: 34px;
      font-size: 1.09em;
      color: #b7bfae;
      letter-spacing: 0.012em;
      font-family: 'Inter', Arial, sans-serif;
      opacity: 0.85;
      text-shadow: 0 2px 8px #0003;
    }
    .byline {
      font-weight: bold;
      color: #d2b055;
      font-size: 1.08em;
      margin-top: 3px;
      letter-spacing: 0.01em;
      display: block;
      text-shadow: 0 2px 8px #0002;
    }
    @media (max-width: 650px) {
      .centerpiece { padding: 9vw 2vw 6vw 2vw; }
      .logo-badge { width: 130px; margin-bottom: 14px; }
      h1 { font-size: 1.1em; }
      .coming-badge { font-size: .99em; padding: 8px 7vw;}
    }