:root {
   --bg: #0f1226;
   --bg-accent: #171a36;
   --text: #e9ecf1;
   --muted: #b8bfd1;
   --brand: #7c5cff;
   --brand-strong: #5e3cff;
   --ring: rgba(124, 92, 255, 0.4);
   --maxw: 64rem; /* ~1024px */
   --radius: 16px;
}

* {
   box-sizing: border-box;
}
html,
body {
   height: 100%;
}
body {
   margin: 0;
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,
      "Noto Sans", "Helvetica Neue", sans-serif;
   color: var(--text);
   background: radial-gradient(
         1200px 800px at 80% -10%,
         rgba(124, 92, 255, 0.25),
         transparent 60%
      ),
      radial-gradient(
         900px 600px at -10% 100%,
         rgba(94, 60, 255, 0.2),
         transparent 60%
      ),
      linear-gradient(180deg, var(--bg), var(--bg-accent));
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.hero {
   min-height: 100dvh;
   display: grid;
   place-items: center;
   padding: 3rem 1.25rem;
}

.container {
   width: 100%;
   max-width: var(--maxw);
   margin: 0 auto;
   text-align: center;
}

.hero__avatar {
   border-radius: 50%;
   overflow: hidden;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.hero__title {
   font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
   line-height: 1.1;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin-bottom: 1rem;
}

.hero__title-hand {
   display: inline-block;
   animation: alternate 2s ease-in-out infinite bounce-top-bottom;
}

.hero__highlight {
   display: block;
   font-size: clamp(1rem, 1.2vw + 0.6rem, 1.25rem);
   font-weight: 600;
   color: var(--muted);
   margin: 2rem 0;
}

.hero__subtitle {
   margin: 0 auto 1.75rem;
   max-width: 46rem;
   font-size: clamp(1rem, 0.6vw + 0.9rem, 1.125rem);
   line-height: 1.65;
   color: var(--muted);
}

.hero__cta {
   display: flex;
   justify-content: center;
   gap: 0.75rem;
   flex-wrap: wrap;
}

.btn {
   --padx: 1.1rem;
   --pady: 0.85rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: var(--pady) var(--padx);
   border-radius: var(--radius);
   font-weight: 600;
   font-size: 0.975rem;
   text-decoration: none;
   border: 1px solid transparent;
   transition: transform 0.12s ease, box-shadow 0.12s ease,
      background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
   will-change: transform;
}

.btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 6px var(--ring);
}

.btn--primary {
   background: var(--brand);
   color: white;
   border-color: rgba(255, 255, 255, 0.08);
}

.btn--primary:hover {
   background: var(--brand-strong);
   transform: translateY(-1px);
}
.btn--primary:active {
   transform: translateY(0);
   opacity: 0.95;
}

.btn--ghost {
   background: rgba(255, 255, 255, 0.06);
   color: var(--text);
   border-color: rgba(255, 255, 255, 0.1);
   backdrop-filter: saturate(140%) blur(4px);
}

.btn--ghost:hover {
   background: rgba(255, 255, 255, 0.1);
   transform: translateY(-1px);
}
.btn--ghost:active {
   transform: translateY(0);
   opacity: 0.95;
}

/* Dark/Light auto (opcional) */
@media (prefers-color-scheme: light) {
   :root {
      --bg: #f7f7fb;
      --bg-accent: #ffffff;
      --text: #0e1330;
      --muted: #49506a;
      --ring: rgba(124, 92, 255, 0.35);
   }
   body {
      background: radial-gradient(
            1200px 800px at 80% -10%,
            rgba(124, 92, 255, 0.15),
            transparent 60%
         ),
         radial-gradient(
            900px 600px at -10% 100%,
            rgba(94, 60, 255, 0.12),
            transparent 60%
         ),
         linear-gradient(180deg, var(--bg), var(--bg-accent));
   }
   .btn--ghost {
      background: rgba(14, 19, 48, 0.045);
      border-color: rgba(14, 19, 48, 0.08);
   }
   .btn--ghost:hover {
      background: rgba(14, 19, 48, 0.06);
   }
}

/* Reduz animações para acessibilidade */
@media (prefers-reduced-motion: reduce) {
   .btn {
      transition: none;
   }
}

@keyframes bounce-top-bottom {
   0%,
   100% {
      transform: translateY(0) rotate(0);
   }
   50% {
      transform: translateY(-10px) rotate(5deg);
   }
}