* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Animated pastel blobs behind everything */
body::before {
  content: '';
  position: fixed;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(420px 420px at 12% 8%,  rgba(255,95,162,.28), transparent 60%),
    radial-gradient(460px 460px at 88% 4%,  rgba(77,124,255,.24), transparent 60%),
    radial-gradient(480px 480px at 82% 82%, rgba(34,199,154,.22), transparent 60%),
    radial-gradient(420px 420px at 8% 88%,  rgba(255,198,58,.26), transparent 60%);
  animation: floatbg 16s ease-in-out infinite alternate;
}
@keyframes floatbg {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(0,-24px,0) scale(1.06); }
}

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--text); }
h1 { font-size: clamp(34px, 5.2vw, 60px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
p { margin: 0 0 var(--sp-4); color: var(--muted); }
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--hot); }
code, .mono { font-family: var(--mono); }
img { max-width: 100%; }
::selection { background: var(--c-pink); color: #fff; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 var(--sp-6); }
.section { padding: var(--sp-16) 0; }
.center { text-align: center; }
.muted { color: var(--muted); }

.eyebrow {
  display: inline-block;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  padding: 5px 14px; border-radius: var(--r-full);
  background: var(--grad-warm); color: #fff;
  box-shadow: var(--shadow-sm);
}

/* Gradient text helper */
.grad {
  background: var(--grad-hero);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradmove 8s ease infinite;
}
@keyframes gradmove {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}