:root{
  --bg: #0b1020;
  --text: #0f172a;          /* slate-900 */
  --muted: #475569;         /* slate-600 */
  --accent-start:#0ea5e9;   /* sky-500 */
  --accent-end:#10b981;     /* emerald-500 */
  --btn-bg:#0ea5e9;
  --btn-bg-hover:#0b9bdc;
  --btn-text:#ffffff;
  --radius: 9999px;
  --shadow-sm: 0 6px 14px rgba(2, 6, 23, 0.12);
  --shadow-md: 0 10px 24px rgba(2, 6, 23, 0.16);
  --maxw: 1000px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: #f8fafc; /* slate-50 */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header with gradient */
.site-header{
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color: white;
  padding: 56px 24px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle decorative gradient blur */
.site-header::after{
  content:"";
  position:absolute;
  inset:auto -20% -40% -20%;
  height: 240px;
  background: radial-gradient(60% 60% at 50% 0%,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.10) 40%,
    transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

.site-title{
  margin:0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

main{
  max-width: var(--maxw);
  margin: -48px auto 80px;   /* pull content up slightly over the header */
  padding: 0 24px;
}

.card{
  background: white;
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
}

h1{
  margin: 0 0 18px;
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: 0.2px;
}

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

.actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  border-radius: var(--radius);  /* fully rounded */
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
}

.btn:hover{ background: var(--btn-bg-hover); box-shadow: var(--shadow-md); }
.btn:active{ transform: translateY(1px) scale(0.99); }

.btn .icon{
  width: 18px; height: 18px; display: inline-block;
}

/* Make everything friendly on very small screens */
@media (max-width: 420px){
  .card{ padding: 24px 20px; border-radius: 20px; }
  .btn{ width: 100%; justify-content: center; }
}

/* Footer (optional, minimal) */
footer{
  text-align: center;
  color: #94a3b8; /* slate-400 */
  font-size: 14px;
  padding: 28px 16px 48px;
}