:root{
  --bg-1: #1e7a2d; /* deep green to sit behind logo */
  --bg-2: #66c26a; /* lighter green */
  --accent-red: #cf2e2e;
  --accent-yellow: #f0c22b;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%;width:100%}
body{
  background: linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  touch-action:none;
}

#app{
  position:relative;
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Canvas covers entire view for animated background shapes */
#bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Logo sits centered, sized for mobile-first, with subtle shadow and blend */
#logo{
  position:relative;
  width:min(54vw, 320px);
  height:auto;
  z-index:10;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.35));
  will-change:transform;
  touch-action:none;
  user-select:none;
}

/* COMING SOON label centered over the logo */
#coming{
  position:absolute;
  left:50%;
  top:76%;
  transform:translate(-50%,-50%);
  z-index:12;
  font-weight:700;
  letter-spacing:0.18em;
  color:rgba(255,255,255,0.96);
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.06));
  padding:8px 14px;
  border-radius:10px;
  font-size:clamp(12px,4.8vw,18px);
  text-shadow:0 2px 8px rgba(0,0,0,0.45);
  box-shadow:0 6px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
  pointer-events:none;
  -webkit-font-smoothing:antialiased;
  backdrop-filter: blur(6px) saturate(1.05);
}

/* Decorative corner accent shapes that echo the logo palette */
.corner{
  position:absolute;
  width:22vmin;
  height:22vmin;
  z-index:2;
  pointer-events:none;
  mix-blend-mode:overlay;
  filter:blur(8px) saturate(1.08) opacity(0.75);
  opacity:0.92;
}

.corner.top-left{
  left:-6vmin;
  top:-6vmin;
  background: radial-gradient(closest-side, rgba(240,194,43,0.95), rgba(240,194,43,0.0) 70%);
  transform:rotate(-18deg);
}

.corner.bottom-right{
  right:-8vmin;
  bottom:-8vmin;
  background: radial-gradient(closest-side, rgba(207,46,46,0.92), rgba(207,46,46,0.0) 68%);
  transform:rotate(12deg);
}

/* Small responsive adjustments */
@media (min-width:720px){
  #logo{width:min(36vw, 420px)}
  .corner{width:16vmin;height:16vmin;filter:blur(12px)}
}