/* Olá Mundo 2 — Noir Gradient
   Palette: primary #FF2D55 → secondary #7C3AED, background #000000, muted #9CA3AF
*/
:root{
  --bg: #000000;
  --muted: #9CA3AF;
  --g1: #FF2D55;
  --g2: #7C3AED;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background-color:var(--bg);
  color:#fff;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.page-root{min-height:100vh;display:flex;flex-direction:column}

/* Hero */
.hero{
  flex:1 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 32px; /* mobile-first padding */
  text-align:center;
  position:relative;
}

.hero-title{
  margin:0;
  line-height:0.92;
  font-weight:800;
  /* Responsive sizing: large on desktop, comfortable on small screens */
  font-size:clamp(3.2rem, 12vw, 14rem);
  /* Gradient text */
  background:linear-gradient(90deg,var(--g1) 0%, #ff6b87 45%, var(--g2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  /* Subtle glow matching gradient */
  text-shadow:
    0 2px 8px rgba(0,0,0,0.6),
    0 6px 32px rgba(255,45,85,0.10),
    0 12px 48px rgba(124,58,237,0.08);
  /* Smooth fade-in animation */
  opacity:0;
  transform:translateY(6px);
  animation:fadeInUp 700ms cubic-bezier(.2,.9,.3,1) 1 forwards;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* Footer placed 28px above bottom, centered */
.site-footer{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:28px;
  text-align:center;
  pointer-events:none;
}
.site-footer small{
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.01em;
  pointer-events:auto;
}

/* Larger padding & tighter layout for wide screens */
@media(min-width:768px){
  .hero{padding:64px 80px}
}
@media(min-width:992px){
  .hero{padding:0 120px}
  .hero-title{font-size:clamp(5rem, 10vw, 18rem)}
}

/* Accessibility: prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .hero-title{animation:none;opacity:1;transform:none}
}