/* Paleta extraída de marlim.co */
:root {
  --indigo-500: #4644b4;
  --slate-800: #1d293c;
  --white: #ffffff;
}

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

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--slate-800);
  background: var(--white);
}

a { color: inherit; text-decoration: none; }

.container { max-width: 1420px; margin: 0 auto; padding: 0 48px; }

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.header .container {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 28px;
  padding-bottom: 28px;
}
.logo img { display: block; width: 139px; height: 32px; }

.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
}
.nav a {
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.2s;
}
.nav a:hover,
.nav a.active { color: var(--indigo-500); }

/* Título */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 88px;
}

/* Fundo de faixas rosa/roxo feito só com CSS */
.hero::before {
  content: "";
  position: absolute;
  inset: -40px; /* evita borda clara causada pelo blur */
  z-index: -1;
  background:
    /* faixas diagonais */
    repeating-linear-gradient(
      152deg,
      rgba(255, 255, 255, 0) 0 40px,
      rgba(255, 255, 255, 0.4) 56px 64px,
      rgba(255, 255, 255, 0) 80px
    ),
    /* núcleo roxo */
    radial-gradient(ellipse 24% 22% at 76% 42%, rgba(104, 92, 190, 0.95), transparent 100%),
    /* rosa no topo */
    radial-gradient(ellipse 36% 38% at 62% 0%, rgba(245, 125, 192, 0.95), transparent 100%),
    /* base: rosa → lilás → quase branco */
    linear-gradient(150deg, #f5a3cf 25%, #a79bdc 55%, #eceaf8 80%);
  -webkit-mask-image:
    linear-gradient(55deg, transparent 38%, #000 62%),
    linear-gradient(to bottom, #000 50%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(55deg, transparent 38%, #000 62%),
    linear-gradient(to bottom, #000 50%, transparent 92%);
  mask-composite: intersect;
  filter: blur(10px);
}

.hero h1 {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .header .container { flex-direction: column; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  .nav { position: static; transform: none; }
  .hero { padding-top: 104px; }
  .hero h1 { font-size: 32px; line-height: 40px; }
}