/* ============================================================
   MomentX — landing

   Same design language as the app (app/styles.css): near-black X
   "lights out" base, monochrome, numbers in mono. The landing is the
   first thing people see and the dashboard is the second, so they had
   better look like the same product.

   Dark locked on purpose. PRODUCTO.md fixes the monochrome X look as a
   brand decision, so there is no light mode to get wrong.
   ============================================================ */

:root {
  color-scheme: dark;

  --page:      #000000;
  --surface:   #0c0d0e;
  --surface-2: #16181c;
  --surface-3: #202327;

  --ink:       #e7e9ea;
  --ink-2:     #8b98a5;
  --ink-3:     #5c6670;

  --border:    #2f3336;
  --border-2:  #3e4348;

  --solid:       #eff3f4;
  --solid-ink:   #0f1419;
  --solid-hover: #ffffff;

  --good:      #00ba7c;

  /* one radius system: pills for anything you click, 14px for surfaces */
  --radius:    14px;
  --radius-sm: 10px;

  --ease:     cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring:   cubic-bezier(.34,1.56,.64,1);

  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --shell: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--page);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* same ambient layer as the app, so the two surfaces feel continuous */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 10% 4%,  rgba(120,150,255,.055), transparent 65%),
    radial-gradient(42vw 42vw at 90% 88%, rgba(0,186,124,.045),   transparent 65%);
  will-change: transform;
  animation: drift 34s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2%,1.5%,0) scale(1.05); }
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
header, main, footer { position: relative; z-index: 2; }

/* ---------------- nav ---------------- */

.nav {
  height: 68px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
  position: sticky; top: 0; z-index: 40;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.nav.stuck { border-bottom-color: var(--border); }

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, #8b98a5, #e7e9ea);
  display: grid; place-items: center;
  color: #04120c; font-weight: 800; font-size: 15px; font-family: var(--mono);
  transition: transform .5s var(--spring);
}
.brand-mark.sm { width: 20px; height: 20px; font-size: 12px; border-radius: 6px; }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -.02em; }

.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a {
  color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color .14s;
}
.nav-links a:hover { color: var(--ink); }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 11px 22px;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, transform .14s var(--ease), box-shadow .14s;
}
.btn-solid { background: var(--solid); color: var(--solid-ink); font-weight: 700; }
.btn-solid:hover { background: var(--solid-hover); box-shadow: 0 8px 26px -10px rgba(255,255,255,.55); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-2); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn:active { transform: scale(.975); }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; margin-top: auto; }
.btn[disabled] { opacity: .5; cursor: progress; }

/* sheen, same move as the app's primary button */
.btn-solid { position: relative; overflow: hidden; }
.btn-solid::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn-solid:hover::after { animation: sheen .7s var(--ease-out); }
@keyframes sheen { to { transform: translateX(120%); } }

/* ---------------- hero ---------------- */

.hero {
  max-width: var(--shell); margin: 0 auto;
  padding: 72px 24px 88px;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
  min-height: min(88vh, 760px);
}
.hero-copy h1 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 700;
}
.hero-sub {
  margin-top: 20px;
  font-size: 18px; color: var(--ink-2);
  max-width: 46ch;
}
.hero-cta { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-note { font-size: 13px; color: var(--ink-2); }

/* the product shot, tilted just enough to read as an object */
.hero-shot { perspective: 1400px; }
.shot-slot {
  aspect-ratio: 14 / 10;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 60%),
    var(--surface);
  display: grid; place-items: center;
  color: var(--ink-3); font-size: 13px; font-family: var(--mono);
  transform: rotateY(-7deg) rotateX(2deg);
  box-shadow: 0 40px 90px -50px rgba(255,255,255,.35);
  transition: transform .6s var(--ease-out);
}
.hero-shot:hover .shot-slot { transform: rotateY(-3deg) rotateX(1deg); }
.shot-slot.sm { aspect-ratio: 16 / 9; transform: none; box-shadow: none; margin-top: 18px; }

/* ---------------- generic section ---------------- */

.section { max-width: var(--shell); margin: 0 auto; padding: 88px 24px; }
.section-h {
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.03em; line-height: 1.15; font-weight: 700;
  max-width: 20ch;
}
.section-sub { margin-top: 12px; color: var(--ink-2); max-width: 58ch; }

/* ---------------- bento ---------------- */

.bento {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas: "wide accent" "wide plain";
  gap: 16px;
}
.cell-wide   { grid-area: wide; }
.cell-accent { grid-area: accent; }

.cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  position: relative; isolation: isolate;
  transition: transform .28s var(--ease), border-color .28s;
}
.cell::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
              rgba(255,255,255,.5), rgba(255,255,255,.05) 42%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .28s var(--ease);
}
.cell:hover::before { opacity: 1; }
.cell:hover { transform: translateY(-2px); }
.cell h3 { font-size: 19px; letter-spacing: -.02em; margin-bottom: 8px; }
.cell p { color: var(--ink-2); font-size: 15px; }

/* the accent cell carries the visual variation the grid needs */
.cell-accent {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(0,186,124,.14), transparent 60%),
    var(--surface);
  border-color: rgba(0,186,124,.22);
}

/* ---------------- how it works ---------------- */

.how .flow {
  margin-top: 36px;
  list-style: none;
  counter-reset: flow;
  border-top: 1px solid var(--border);
}
/* Three grid children here: the counter pseudo, the heading and the body.
   Every one gets an explicit cell. Leave it implicit and the paragraph
   drops into the 56px counter column and wraps one word per line. */
.flow li {
  counter-increment: flow;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.flow li::before {
  content: counter(flow, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
  padding-top: 5px;
}
.flow h3 { grid-column: 2; grid-row: 1; font-size: 18px; letter-spacing: -.02em; margin-bottom: 4px; }
.flow p  { grid-column: 2; grid-row: 2; color: var(--ink-2); font-size: 15px; max-width: 62ch; }

/* ---------------- safety ---------------- */

.safety {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.safety-copy p { color: var(--ink-2); margin-top: 16px; max-width: 52ch; }
.safety-list { list-style: none; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.safety-list li {
  background: var(--surface);
  padding: 18px 22px;
  font-size: 15px; color: var(--ink-2);
  display: flex; align-items: baseline; gap: 8px;
}
.safety-list b { color: var(--ink); font-weight: 600; }

/* ---------------- pricing ---------------- */

.plans {
  margin-top: 36px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: stretch;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  display: flex; flex-direction: column; gap: 22px;
  transition: border-color .28s, transform .28s var(--ease);
}
.plan:hover { transform: translateY(-2px); border-color: var(--border-2); }
.plan-feature {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    var(--surface);
  border-color: var(--border-2);
}
.plan h3 { font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.amount { font-size: 46px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.per { color: var(--ink-2); font-size: 15px; }
.plan-for { color: var(--ink-2); font-size: 14px; margin-top: 8px; }
.plan-list { list-style: none; display: grid; gap: 11px; }
.plan-list li {
  font-size: 14.5px; color: var(--ink-2);
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: baseline;
}
.plan-list li::before { content: "+"; color: var(--ink-3); font-family: var(--mono); }

/* ---------------- closer ---------------- */

.closer {
  max-width: var(--shell); margin: 0 auto;
  padding: 96px 24px 110px;
  text-align: center;
  display: grid; justify-items: center; gap: 28px;
}
.closer h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -.03em; line-height: 1.15; max-width: 18ch;
}

/* ---------------- footer ---------------- */

.footer {
  border-top: 1px solid var(--border);
  max-width: var(--shell); margin: 0 auto;
  padding: 28px 24px 44px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-2);
}
.foot-brand { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; }
.foot-links { display: flex; gap: 18px; margin-left: auto; }
.foot-links a { color: var(--ink-2); text-decoration: none; transition: color .14s; }
.foot-links a:hover { color: var(--ink); }

/* ---------------- toast ---------------- */

.toast-host {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); padding: 11px 18px;
  font-size: 14px; color: var(--ink);
  box-shadow: 0 10px 32px rgba(0,0,0,.5);
  animation: toastIn .38s var(--spring);
}
@keyframes toastIn { from { transform: translateY(16px) scale(.96); opacity: 0; } }

/* ---------------- scroll reveal ---------------- */

.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }

/* ---------------- focus ---------------- */

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 44px 20px 64px;
    min-height: 0;
  }
  .hero-shot { order: 2; }
  .shot-slot { transform: none; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "wide" "accent" "plain"; }
  .safety { grid-template-columns: 1fr; gap: 28px; }
  .plans { grid-template-columns: 1fr; }
  .section { padding: 64px 20px; }
  .nav-links { display: none; }
  .nav { gap: 16px; }
  .nav .btn-sm { margin-left: auto; }
  .flow li { grid-template-columns: 34px 1fr; gap: 12px; }
  .footer { padding: 24px 20px 36px; }
  .foot-links { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}