:root{
  --bg1:#bfe9ff;
  --bg2:#d6f1ff;
  --bg3:#e8d8ff;

  --card:#ffffffcc;
  --card2:#ffffffa6;
  --text:#0f172a;
  --muted:#475569;

  --shadow: 0 20px 60px rgba(2, 6, 23, .12);
  --radius: 28px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 70% 30%, var(--bg2), transparent 55%),
    radial-gradient(900px 500px at 30% 65%, var(--bg3), transparent 60%),
    linear-gradient(180deg, var(--bg1), #f8fbff 70%);
}

.page{
  min-height:100vh;
  padding: 26px 18px 56px;
}

.topbar{
  max-width: 980px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{
  width:44px;
  height:44px;
  border-radius:14px;
  background:#ffffffb3;
  box-shadow: 0 10px 25px rgba(2,6,23,.10);
  object-fit:contain;
  padding:6px;
}
.brand-text{
  font-weight:700;
  letter-spacing:-.02em;
  font-size:20px;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 16px;
  background: #ffffffb3;
  color: var(--text);
  text-decoration:none;
  font-weight:600;
  box-shadow: 0 12px 26px rgba(2,6,23,.10);
  border: 1px solid #ffffffcc;
  transition: transform .12s ease, box-shadow .12s ease;
}
.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(2,6,23,.12);
}

.card-wrap{
  max-width: 980px;
  margin: 54px auto 0;
  display:flex;
  justify-content:center;
}

.card{
  width:min(680px, 100%);
  padding: 34px 28px 28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card2));
  box-shadow: var(--shadow);
  border: 1px solid #ffffffde;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffffd9;
  border: 1px solid #ffffff;
  font-weight:700;
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
  margin-bottom: 18px;
}
.pill-emoji{ font-size: 18px; }

h1{
  margin: 8px 0 14px;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.subtitle{
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:-.01em;
  color: #ffffff;
  background: linear-gradient(90deg, #24c18a, #0ea5e9);
  box-shadow: 0 18px 40px rgba(14,165,233,.20);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 22px 48px rgba(14,165,233,.24);
}

.hint{
  margin-top: 14px;
  text-align:center;
  color: #64748b;
  font-weight:600;
}

@media (max-width: 520px){
  .card{ padding: 28px 18px 20px; }
  .brand-text{ font-size: 18px; }
}