static/css/welcome.css

/* ── Mobile: centered stack (logo, pitch, button) ── */
.welcome {
  display: flex; flex-direction: column; justify-content: center;
  gap: 30px; text-align: center; min-height: 100%;
  background: radial-gradient(120% 70% at 50% -10%, var(--bg-tint), transparent 60%);
}
.welcome-visual { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.logo {
  width: 110px; height: 110px; border-radius: 38px;
  display: grid; place-items: center;
  background: var(--grad-accent); box-shadow: var(--shadow);
  color: var(--on-accent);
  transition: background var(--t-morph), color var(--t-morph);
}
.logo-img {
  display: block;
  object-fit: cover;
  padding: 0;
  background: var(--surface);
  animation: logoFloat 4.5s ease-in-out infinite;
}
.logo .ic { width: 56px; height: 56px; stroke-width: 1.8; }
.brand { font-size: 1.4rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.welcome-content { display: flex; flex-direction: column; gap: 30px; }
.pitch h1 { margin-bottom: 12px; }
.pitch .muted { font-size: .98rem; line-height: 1.5; max-width: 300px; margin: 0 auto; }

/* ── Desktop: split hero (gradient visual panel + content) ── */
@media (min-width: 1024px) {
  body[data-page="welcome"] { padding: 36px; align-items: center; justify-content: center; }
  body[data-page="welcome"] .app {
    flex-direction: row;
    width: min(1080px, 96vw);
    max-width: none;
    height: min(86dvh, 720px);
    min-height: 0; max-height: none;
    border-radius: 32px;
    overflow: hidden;
  }

  .welcome {
    flex-direction: row; padding: 0; gap: 0; text-align: left;
    background: none;
  }
  .welcome-visual {
    flex: 0 0 46%; height: 100%; justify-content: center; gap: 18px;
    background: var(--grad-hero); color: var(--on-accent);
    position: relative; overflow: hidden;
  }
  /* soft decorative glow in the visual panel */
  .welcome-visual::after {
    content: ''; position: absolute; width: 320px; height: 320px;
    right: -90px; bottom: -90px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }
  .welcome-visual .logo {
    width: 132px; height: 132px; border-radius: 44px;
    background: rgba(255, 255, 255, 0.18); box-shadow: none;
  }
  .welcome-visual .logo-img {
    background: var(--surface);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  }
  .welcome-visual .logo .ic { width: 68px; height: 68px; }
  .welcome-visual .brand { color: var(--on-accent); font-size: 1.6rem; }

  .welcome-content {
    flex: 1; justify-content: center; padding: 0 64px; gap: 26px;
  }
  .welcome-content .h1 { font-size: 2.6rem; }
  .welcome-content .pitch .muted { max-width: 400px; margin: 0; font-size: 1.05rem; }
  .welcome-content .btn { width: auto; align-self: flex-start; padding: 16px 36px; }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}