:root{
  --bg-1: #fffbf2;
  --bg-2: #f0fbff;
  --card:#ffffff;
  --accent:#ff6b6b; /* warm coral */
  --accent-2:#5eead4; /* mint */
  --text:#0f172a;
  --muted:#6b7280;
  --glass: rgba(255,255,255,0.6);
  --bg-anim-speed: 24s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg-1),var(--bg-2) 70%);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  position:relative;
  overflow:hidden;
}

/* Abstract animated background container */
.bg-abstract{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  display:block;
}

/* moving soft gradient layer */
.grad-layer{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(600px 400px at 10% 20%, rgba(94,234,212,0.09), transparent 12%),
    radial-gradient(500px 300px at 90% 80%, rgba(255,107,107,0.07), transparent 12%),
    radial-gradient(400px 300px at 50% 40%, rgba(255,216,165,0.06), transparent 12%);
  filter: blur(48px) saturate(110%);
  transform: translate3d(0,0,0);
  animation: gradientShift var(--bg-anim-speed) linear infinite;
  opacity:0.95;
}

/* SVG blob general styles */
.blob{
  position:absolute;
  width:46vmax;
  height:46vmax;
  opacity:0.9;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  filter: blur(12px);
}

/* position and animation offsets for each blob */
.blob-1{ left: -8%; top: -6%; transform: translate3d(0,0,0) scale(0.75); animation: float1 28s ease-in-out infinite; }
.blob-2{ right: -12%; bottom: -8%; transform: translate3d(0,0,0) scale(0.9); animation: float2 34s ease-in-out infinite; }
.blob-3{ left: 20%; bottom: -18%; transform: translate3d(0,0,0) scale(0.6); animation: float3 30s ease-in-out infinite; }

/* subtle opacity flicker for life */
@keyframes gradientShift {
  0%{ transform: translateX(0) rotate(0deg); opacity:0.95; }
  50%{ transform: translateX(6%) rotate(2deg); opacity:1; }
  100%{ transform: translateX(0) rotate(0deg); opacity:0.95; }
}
@keyframes float1 {
  0% { transform: translate3d(0,0,0) scale(0.75) rotate(0deg); }
  25%{ transform: translate3d(3%,2%,0) scale(0.78) rotate(6deg); }
  50%{ transform: translate3d(0,4%,0) scale(0.75) rotate(0deg); }
  75%{ transform: translate3d(-3%,2%,0) scale(0.72) rotate(-6deg); }
  100%{ transform: translate3d(0,0,0) scale(0.75) rotate(0deg); }
}
@keyframes float2 {
  0% { transform: translate3d(0,0,0) scale(0.9) rotate(0deg); }
  33%{ transform: translate3d(-4%,3%,0) scale(0.92) rotate(-8deg); }
  66%{ transform: translate3d(3%,2%,0) scale(0.88) rotate(6deg); }
  100%{ transform: translate3d(0,0,0) scale(0.9) rotate(0deg); }
}
@keyframes float3 {
  0% { transform: translate3d(0,0,0) scale(0.6) rotate(0deg); }
  50%{ transform: translate3d(2%,-3%,0) scale(0.63) rotate(12deg); }
  100%{ transform: translate3d(0,0,0) scale(0.6) rotate(0deg); }
}

/* Card sits above background */
.card{
  z-index:2;
  width:100%;
  max-width:680px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.82));
  padding:28px;
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  text-align:center;
  transform-origin:center;
  backdrop-filter: blur(6px);
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms;
}

/* playful hover lift on pointer devices */
@media (hover:hover) {
  .card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(16,24,40,0.12); }
}

/* Title */
h1{
  font-size:22px;
  line-height:1.2;
  margin:0 0 10px 0;
  font-weight:700;
  letter-spacing:-0.2px;
  color:var(--text);
}

/* Link inside title with subtle animated underline */
h1 a{
  color:var(--accent);
  text-decoration:none;
  position:relative;
  padding:2px 6px;
  border-radius:8px;
  background: linear-gradient(90deg, rgba(255,107,107,0.12), rgba(94,234,212,0.06));
  transition: transform 220ms ease, box-shadow 220ms ease;
  box-shadow: 0 6px 18px rgba(255,107,107,0.08);
}
h1 a::after{
  content:'';
  position:absolute;
  left:8%;
  right:8%;
  bottom:6%;
  height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:3px;
  transform: scaleX(0);
  transform-origin:left;
  transition: transform 260ms cubic-bezier(.2,.9,.2,1);
  opacity:0.95;
}
h1 a:hover::after,
h1 a:focus::after{
  transform: scaleX(1);
}

/* Subtitle */
.subtitle{
  margin:8px 0 18px 0;
  color:var(--muted);
  font-size:15px;
}

/* Actions */
.actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:6px;
}

/* Primary button with vibrant gradient */
.btn{
  display:inline-block;
  padding:12px 18px;
  background: linear-gradient(120deg, var(--accent), #ff8a8a);
  color:#fff;
  text-decoration:none;
  border-radius:12px;
  font-weight:700;
  min-width:160px;
  text-align:center;
  box-shadow: 0 10px 30px rgba(255,107,107,0.15);
  transition: transform 200ms ease, box-shadow 200ms ease;
  transform: translateZ(0);
}
.btn:active{ transform: translateY(2px) scale(0.996); }
.btn:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(255,107,107,0.18); }

/* Secondary subtle ghost link */
.btn--ghost{
  background: transparent;
  color: var(--text);
  box-shadow: none;
  border-radius:12px;
  padding:10px 14px;
  min-width:120px;
  font-weight:600;
  align-self:center;
}

/* Responsive tweaks for mobile (one-screen friendly) */
@media (max-width:420px){
  .card{padding:18px;border-radius:14px}
  h1{font-size:20px}
  .subtitle{font-size:14px}
  .btn{min-width:140px;padding:12px 14px;border-radius:10px}
}

/* small entrance animation */
@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.card.animate { animation: popIn 420ms cubic-bezier(.2,.9,.2,1) both; }