/* ─────────────────────────────────────────────
   PáduaPRO — design tokens + base
   ───────────────────────────────────────────── */

:root {
  /* Cool dark palette */
  --bg:           #0a0b0d;
  --bg-elev:      #101216;
  --bg-card:      #14171c;
  --bg-card-hi:   #1a1e25;
  --border:       #232830;
  --border-soft:  #1a1e25;
  --border-hi:    #2f3640;

  /* All non-accent text in pure white tones */
  --text:         #ffffff;
  --text-mute:    rgba(255, 255, 255, 0.62);
  --text-dim:     rgba(255, 255, 255, 0.38);

  /* Accent — teal-cyan (azul esverdeado) */
  --accent:       #5dd9c2;
  --accent-hi:    #7be3d1;
  --accent-soft:  #43c0a8;
  --accent-deep:  #1f6e60;
  --accent-tint:  rgba(93, 217, 194, 0.10);
  --accent-glow:  rgba(93, 217, 194, 0.18);
  --on-accent:    #062722;

  /* Type */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --max:          1240px;
  --pad:          clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  /* Subtle grain + radial glow */
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-glow), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(93, 217, 194, 0.05), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Shader background (fixed behind content) ─── */
.pp-shader-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  /* Fade out toward the bottom so content sections stay grounded */
  mask-image:
    linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.9) 35%,
      rgba(0,0,0,0.45) 65%,
      rgba(0,0,0,0.1) 90%,
      rgba(0,0,0,0) 100%);
  -webkit-mask-image:
    linear-gradient(180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.9) 35%,
      rgba(0,0,0,0.45) 65%,
      rgba(0,0,0,0.1) 90%,
      rgba(0,0,0,0) 100%);
}

/* Ensure all real content sits above the shader */
#root > *:not(.pp-shader-bg) { position: relative; z-index: 1; }
.pp-nav { z-index: 50; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

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

/* ─── Type scale ─── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}

.eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  line-height: 1.05;
}

.display {
  font-size: clamp(44px, 6.5vw, 88px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.display em, .serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}

h2.section-title {
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--text-mute);
  text-wrap: pretty;
}

/* ─── Buttons ─── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow:
    0 1px 0 rgba(255, 230, 170, 0.4) inset,
    0 8px 24px -8px var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-hi);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--border-hi);
  background: var(--bg-card);
}

.btn-lg { padding: 16px 26px; font-size: 16px; border-radius: 11px; }

/* ─── Layout ─── */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.section {
  padding: clamp(72px, 9vw, 140px) 0;
  position: relative;
}

.section-tight { padding: clamp(56px, 7vw, 100px) 0; }

.divider-top {
  border-top: 1px solid var(--border-soft);
}

/* ─── Cards ─── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  transition: border-color .2s ease, background .2s ease;
}

.card-hi {
  background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
  border-color: var(--border-hi);
}

.card:hover { border-color: var(--border-hi); }

/* ─── Tags / badges ─── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-mute);
  background: var(--bg-card);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.tag-accent {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: rgba(93, 217, 194, 0.25);
}

/* ─── Decorative ─── */

.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(93, 217, 194, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(93, 217, 194, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 40%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 40%, black, transparent 75%);
}

/* Sparkle icon */
.spark {
  width: 12px; height: 12px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Check icon */
.check {
  width: 18px; height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Reveal — always visible (animation disabled for reliability) */
.reveal { opacity: 1; transform: none; }

/* ─── Responsive helpers ─── */

@media (max-width: 720px) {
  .display { font-size: clamp(40px, 11vw, 56px); }
  .card { padding: 22px; }
  .section { padding: 72px 0; }
}