:root {
  --color-bg: #1c1220;
  --color-surface: #2a1f32;
  --color-text: #fce7f3;
  --color-muted: #d8b4fe;
  --color-accent: #00ff99; /* manual edit test */
  --color-accent-soft: #4c1d3d;
  --font-heading: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-body: 'Segoe UI', system-ui, sans-serif;
  --radius-md: 16px;
  --shadow-soft: 0 16px 48px rgba(251, 113, 133, 0.15);
}

body {
  margin:0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height:1.6;
}

a {
  color: var(--color-accent);
  text-decoration:none;
}

a:hover {
  color: var(--color-accent-soft);
}

header.hero {
  min-height:100vh;
  background: linear-gradient(120deg, #1c1220 0%, #581c87 40%, #be123c 100%);
  color: var(--color-text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1rem;
  position:relative;
  overflow:hidden;
}

header.hero::before {
  content:"\"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at center, rgba(251,113,133,0.15) 0%, transparent 70%);
  pointer-events:none;
  animation: fadeIn 2s ease-out;
}

@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}

header.hero h1 {
  font-family: var(--font-heading);
  font-size:2.8rem;
  margin:0 0 0.5rem;
  animation: pulse 3s ease-in-out infinite;
}

header.hero p {
  font-size:1.2rem;
  margin-bottom:2rem;
  max-width:36rem;
}

nav {
  display:flex;
  gap:1.5rem;
}

nav a {
  padding:0.5rem 1rem;
  border:2px solid var(--color-accent);
  border-radius:var(--radius-md);
  transition:background-color .3s, color .3s, transform .2s;
}

nav a:hover {
  background:var(--color-accent);
  color:var(--color-bg);
  transform:translateY(-2px);
}

section {
  padding:4rem 1rem;
  max-width:800px;
  margin:0 auto;
}

.card {
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:2rem;
  margin-bottom:2rem;
  box-shadow: var(--shadow-soft);
  transition:transform .3s, box-shadow .3s;
}

.card:hover {
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(251,113,133,0.25);
}

.footer {
  text-align:center;
  padding:2rem;
  font-size:0.9rem;
  color:var(--color-muted);
}

@keyframes pulse {
  0% {transform:scale(1);}
  50% {transform:scale(1.03);}
  100% {transform:scale(1);}
}