/* Identidade visual partilhada com o Cosmic Creator desktop. */
:root {
  color-scheme: dark;
  --ink: #030506;
  --surface: rgba(5, 8, 9, .82);
  --surface-2: rgba(10, 13, 14, .72);
  --line: rgba(180, 190, 194, .18);
  --muted: #a5a6a7;
  --cream: #f2f1ee;
  --gold: #f2bd32;
  --gold-2: #9a6813;
  --gold-light: #ffe693;
}

html { background: var(--ink); }

body {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(3, 5, 6, .4), rgba(3, 5, 6, .76) 42%, rgba(3, 5, 6, .68) 72%, rgba(3, 5, 6, .88)),
    url("assets/cosmic-nebula.webp") center / cover fixed no-repeat;
  color: var(--cream);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.01em;
}

body::before {
  display: none;
}

body::after {
  display: none;
}

h1,
.display,
.final-cta h2,
.plan h3,
.module-copy h3,
.demo-modal h2 {
  font-family: "Montserrat", "Inter", sans-serif;
}

.eyebrow,
.section-kicker,
.window-top,
.numbers-head,
.plan-label,
.recommended,
.module-tab span,
.prompt-top,
.signal-strip,
.creator-day span {
  font-family: "JetBrains Mono", Consolas, monospace;
}

.site-header {
  height: 82px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(3, 5, 6, .84), rgba(3, 5, 6, .28));
  backdrop-filter: blur(14px);
}

.site-header.scrolled {
  background: rgba(3, 5, 6, .88);
  border-color: rgba(242, 189, 50, .2);
  box-shadow: 0 16px 45px rgba(0, 0, 0, .3);
}

.brand {
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 600;
}

.brand img {
  border: 1px solid rgba(242, 189, 50, .36);
  border-radius: 9px;
  box-shadow: 0 0 18px rgba(242, 189, 50, .14);
}

.nav a { font-weight: 500; }

.nav .nav-cta,
.button,
.plan > a,
.prompt-card button {
  border-radius: 8px;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.nav .nav-cta {
  border-color: var(--gold-2);
  background: rgba(242, 189, 50, .06);
  box-shadow: inset 0 0 15px rgba(242, 189, 50, .06), 0 0 14px rgba(242, 189, 50, .08);
}

.nav .nav-cta:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  background: rgba(242, 189, 50, .1);
  box-shadow: inset 0 0 18px rgba(242, 189, 50, .1), 0 0 20px rgba(242, 189, 50, .14);
}

.hero {
  min-height: 100svh;
  border-bottom: 1px solid rgba(242, 189, 50, .18);
  background: linear-gradient(90deg, rgba(3, 5, 6, .9) 0%, rgba(3, 5, 6, .58) 48%, rgba(3, 5, 6, .28) 100%);
}

.hero-vignette {
  background:
    linear-gradient(90deg, rgba(3, 5, 6, .56) 0%, rgba(3, 5, 6, .18) 54%, rgba(3, 5, 6, .04) 100%),
    linear-gradient(0deg, #030506 0%, transparent 28%);
}

.hero-content { max-width: 1240px; }

.eyebrow,
.section-kicker {
  color: var(--gold);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .2em;
}

h1 {
  max-width: 980px;
  margin-top: 28px;
  font-size: clamp(48px, 6.65vw, 94px);
  font-weight: 700;
  letter-spacing: -.058em;
  text-shadow: 0 16px 50px rgba(0, 0, 0, .48);
}

h1 em,
.display em,
.final-cta em {
  color: var(--gold-light);
  background: linear-gradient(180deg, #fff2ad 0%, var(--gold) 62%, #bb7911 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 24px rgba(242, 189, 50, .12));
}

.hero-copy {
  max-width: 680px;
  color: #c8c8c7;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
}

.button { min-height: 52px; padding-inline: 22px; font-size: 10px; }

.button.primary,
.plan.featured > a,
.prompt-card button {
  border: 1px solid rgba(255, 230, 147, .7);
  background: linear-gradient(180deg, #f8d66e, #bd7b13);
  color: #171004;
  box-shadow: inset 0 1px rgba(255, 255, 255, .4), 0 12px 28px rgba(242, 189, 50, .22);
}

.button.primary:hover,
.plan.featured > a:hover,
.prompt-card button:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .5), 0 16px 38px rgba(242, 189, 50, .29);
}

.button.ghost {
  border: 1px solid rgba(242, 189, 50, .3);
  background: rgba(5, 8, 9, .64);
  color: #ecebe7;
  backdrop-filter: blur(16px);
}

.button.ghost:hover {
  border-color: var(--gold-light);
  background: rgba(242, 189, 50, .08);
}

.hero-proof { margin-top: 38px; }
.hero-proof p { color: #a5a6a7; }
.hero-proof strong { color: #f2f1ee; }
.proof-orbits i {
  border-color: rgba(242, 189, 50, .42);
  background: rgba(5, 8, 9, .86);
  font-family: "JetBrains Mono", monospace;
  box-shadow: 0 0 16px rgba(242, 189, 50, .08);
}

.section { padding-block: 132px; }

.tension {
  border-bottom-color: rgba(242, 189, 50, .17);
  background: linear-gradient(180deg, rgba(3, 5, 6, .9), rgba(3, 5, 6, .7));
}

.display {
  font-weight: 700;
  letter-spacing: -.055em;
}

.creator-day {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 64px;
}

.creator-day article {
  min-height: 218px;
  padding: 27px;
  border: 1px solid rgba(180, 190, 194, .16);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(242, 189, 50, .07), transparent 52%),
    rgba(5, 8, 9, .66);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 24px 60px rgba(0, 0, 0, .2);
  backdrop-filter: blur(16px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.creator-day article:hover {
  border-color: rgba(242, 189, 50, .48);
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .3), 0 0 28px rgba(242, 189, 50, .07);
}

.creator-day span {
  color: var(--gold);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .15em;
}

.creator-day b {
  display: block;
  margin-top: 40px;
  color: #f2f1ee;
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: 19px;
}

.creator-day p { margin: 12px 0 0; color: #a5a6a7; font-size: 13px; line-height: 1.65; }

.signal-strip {
  color: #b6b7b7;
  border-color: rgba(242, 189, 50, .16);
}

.command-section,
.autopilot,
.plans {
  background:
    radial-gradient(circle at 50% 34%, rgba(242, 189, 50, .055), transparent 34rem),
    rgba(3, 5, 6, .68);
}

.product-stage,
.prompt-card,
.plan {
  border-radius: 16px;
  background: rgba(5, 8, 9, .76);
  box-shadow: 0 36px 100px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(22px);
}

.product-stage {
  overflow: hidden;
  border-color: rgba(242, 189, 50, .22);
}

.product-rail { background: rgba(3, 5, 6, .45); }
.module-tab { font-family: "Inter", sans-serif; }
.module-tab.active { background: linear-gradient(90deg, rgba(242, 189, 50, .13), transparent); }
.module-tab.active::before { background: var(--gold); box-shadow: 0 0 18px var(--gold); }

.product-window { background: rgba(0, 0, 0, .18); }
.window-top { background: rgba(3, 5, 6, .82); }
.app-demo { background: rgba(3, 5, 6, .9); }

.prompt-card {
  border-color: rgba(242, 189, 50, .3);
  background:
    radial-gradient(circle at 95% 2%, rgba(188, 132, 238, .13), transparent 18rem),
    rgba(5, 8, 9, .8);
}

.typing-box { border-radius: 9px; background: rgba(3, 5, 6, .7); font-family: "Inter", sans-serif; }
.prompt-card button { border-radius: 9px; cursor: pointer; }

.numbers {
  border-color: rgba(242, 189, 50, .16);
  background: rgba(3, 5, 6, .76);
}

.number-grid strong { font-family: "Montserrat", "Inter", sans-serif; color: var(--gold); }
.mini-metrics b,
.price b { font-family: "Montserrat", "Inter", sans-serif; }

.price small,
summary,
.plan > a,
.demo-modal > a { font-family: "Inter", "Segoe UI", sans-serif; }

.plans { background-color: rgba(3, 5, 6, .78); }
.plans .section-heading { margin-bottom: 36px; }

.plan-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 42px;
}

.currency-control { display: grid; gap: 9px; }

.currency-control > span {
  color: #777b7d;
  font: 600 8px "JetBrains Mono", Consolas, monospace;
  letter-spacing: .17em;
}

.currency-selector,
.billing-toggle { display: flex; }

.currency-selector button,
.billing-toggle button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(180, 190, 194, .16);
  background: rgba(3, 5, 6, .52);
  color: #777b7d;
  font: 700 9px "JetBrains Mono", Consolas, monospace;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.currency-selector button + button,
.billing-toggle button + button { border-left: 0; }

.currency-selector button:first-child,
.billing-toggle button:first-child { border-radius: 8px 0 0 8px; }

.currency-selector button:last-child,
.billing-toggle button:last-child { border-radius: 0 8px 8px 0; }

.currency-selector button:hover,
.billing-toggle button:hover { color: #f2f1ee; }

.currency-selector button.active,
.billing-toggle button.active {
  border-color: rgba(242, 189, 50, .52);
  background: rgba(242, 189, 50, .1);
  color: var(--gold-light);
  box-shadow: inset 0 0 14px rgba(242, 189, 50, .06), 0 0 16px rgba(242, 189, 50, .06);
}

.billing-toggle { justify-content: flex-end; margin: 0; }
.plan { border-color: rgba(180, 190, 194, .16); }
.plan.featured {
  border-color: rgba(242, 189, 50, .65);
  background:
    radial-gradient(circle at 50% 0, rgba(242, 189, 50, .11), transparent 20rem),
    rgba(5, 8, 9, .88);
}

.plan > a {
  border-radius: 9px;
  border-color: rgba(242, 189, 50, .3);
  background: rgba(242, 189, 50, .05);
}

.faq { background: rgba(3, 5, 6, .56); }

.final-cta {
  background:
    radial-gradient(circle at center, rgba(242, 189, 50, .14), transparent 29%),
    linear-gradient(180deg, rgba(3, 5, 6, .64), rgba(3, 5, 6, .94));
}

.footer { background: rgba(3, 5, 6, .92); }
.footer > div { flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 900px) {
  .creator-day { grid-template-columns: 1fr; }
  .creator-day article { min-height: 0; }
  .creator-day b { margin-top: 24px; }
  .plan-controls { align-items: start; flex-direction: column; }
}

@media (max-width: 600px) {
  .site-header { height: 70px; }
  .hero { min-height: 920px; }
  .hero-content { padding-top: 78px; }
  h1 { font-size: clamp(43px, 13vw, 58px); }
  .hero-actions .button { width: 100%; }
  .creator-day { margin-top: 42px; }
}