/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:          #0B1320;
  --bg-2:        #101B2E;
  --ink:         #F6F8FB;
  --ink-mute:    rgba(246, 248, 251, 0.66);
  --ink-dim:     rgba(246, 248, 251, 0.38);
  --accent:      #00CD95;
  --accent-dim:  #00A67A;
  --accent-soft: rgba(0, 205, 149, 0.16);
  --line:        rgba(246, 248, 251, 0.14);

  --serif: "Roboto Slab", "Zilla Slab", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
  min-height: 100svh;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; }

::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 600;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =============================================================
   4. Background layers (glow mesh, floating mark, grain)
   ============================================================= */
.glow {
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(640px circle at var(--mx, 50%) var(--my, 38%), var(--accent-soft), transparent 60%),
    radial-gradient(820px circle at 84% 86%, rgba(0, 205, 149, 0.12), transparent 62%),
    radial-gradient(680px circle at 10% 92%, rgba(0, 166, 122, 0.10), transparent 58%);
  filter: blur(50px);
  animation: meshDrift 24s var(--ease-soft) infinite alternate;
}

.brand-float {
  position: fixed;
  z-index: 0;
  top: 8%;
  right: -8%;
  width: min(52vw, 560px);
  height: auto;
  opacity: 0.1;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(0.5px);
  animation: floatMark 34s var(--ease-soft) infinite alternate;
}

.grain {
  position: fixed; inset: 0; z-index: 3;
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================
   5. Stage (hero / main content)
   ============================================================= */
.stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 4rem;
  max-width: 720px;
  margin-inline: auto;
}

.logo {
  width: min(70vw, 320px);
  margin-bottom: 1.6rem;
  filter: drop-shadow(0 0 46px rgba(0, 205, 149, 0.22));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: pulseDot 2.4s ease-in-out infinite;
}

.tagline {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(2.1rem, 5.4vw + 1rem, 3.6rem);
  max-width: 15ch;
  margin-bottom: 1.3rem;
}
.tagline .accent-line { color: var(--accent); }

.message {
  font-size: clamp(1rem, .4vw + .95rem, 1.125rem);
  color: var(--ink-mute);
  max-width: 44ch;
  margin-bottom: 2.4rem;
}

/* =============================================================
   6. CTA components
   ============================================================= */
.cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  font-size: .98rem;
  padding: .95rem 1.5rem;
  border-radius: 999px;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out);
  box-shadow: 0 12px 30px -12px rgba(0, 205, 149, 0.55);
  will-change: transform;
}
.cta svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--accent-dim); box-shadow: 0 16px 36px -10px rgba(0, 205, 149, 0.65); }
  .cta:hover svg { transform: translateX(3px); }
}

.copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--ink);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out), transform .35s var(--ease-out);
  will-change: transform;
}
.copy-btn svg { width: 18px; height: 18px; }
.copy-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.copy-btn::after {
  content: "Copiado";
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--bg);
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .6rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.copy-btn.is-copied::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =============================================================
   7. Footer
   ============================================================= */
.site-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem 2.2rem;
  font-size: .82rem;
  color: var(--ink-dim);
}

/* =============================================================
   8. Reveal / entrance animation
   ============================================================= */
.reveal {
  opacity: 0;
  animation: revealUp .9s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 110ms + 80ms);
}

/* =============================================================
   9. Keyframes
   ============================================================= */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
}
@keyframes floatMark {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-3%, 3.5%, 0) rotate(6deg); }
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

/* =============================================================
   10. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .logo { width: min(52vw, 340px); }
}
@media (min-width: 720px) {
  .stage { padding-top: 6rem; }
  .logo { width: 360px; margin-bottom: 2rem; }
  .message { font-size: 1.15rem; }
}
@media (min-width: 960px) {
  .tagline { font-size: clamp(3rem, 3.4vw + 1.2rem, 4.4rem); }
}

/* =============================================================
   11. Reduced motion — only soften, never remove functional motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation-duration: .4s; }
  .reveal[style*="--d"] { animation-name: revealFade; }
}
@keyframes revealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}