/* IPX landing — ported from the "Optimus" template, scoped under .lp so it
   never touches the amber console theme in application.css. */

.lp {
  --bg: #faf9f7;
  --fg: #18130d;
  --ink: 24, 19, 13;
  --mut: #6d685f;
  --line: rgba(24, 19, 13, 0.12);
  --line-2: rgba(24, 19, 13, 0.06);
  --card: #ffffff;
  --live: #16a34a;
  --radius: 3px;
  --maxw: 1400px;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  position: relative;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lp *,
.lp *::before,
.lp *::after { box-sizing: border-box; }

.lp a { color: inherit; text-decoration: none; }
.lp h1, .lp h2, .lp h3, .lp p { margin: 0; }
.lp button { font-family: inherit; color: inherit; }
.lp canvas { display: block; width: 100%; height: 100%; }

/* page-wide film grain, like the template's noise overlay */
.lp::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lp-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.lp .serif { font-family: var(--serif); font-weight: 400; }
.lp .mono { font-family: var(--mono); }

/* shared eyebrow: mono label with a leading hairline */
.lp .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--mut);
  text-transform: none;
}
.lp .eyebrow::before { content: ""; width: 32px; height: 1px; background: rgba(var(--ink), 0.3); }
.lp .eyebrow.center { justify-content: center; }
.lp .eyebrow.center::after { content: ""; width: 32px; height: 1px; background: rgba(var(--ink), 0.3); }

/* ---------- buttons ---------- */
.lp .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  white-space: nowrap;
}
.lp .btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.lp .btn.solid { background: var(--fg); color: var(--bg); }
.lp .btn.solid:hover { background: rgba(var(--ink), 0.9); }
.lp .btn.solid:hover svg { transform: translateX(4px); }
.lp .btn.outline { border-color: rgba(var(--ink), 0.2); color: var(--fg); }
.lp .btn.outline:hover { background: rgba(var(--ink), 0.05); }
.lp .btn.sm { height: 40px; padding: 0 22px; font-size: 14px; }

/* ---------- navigation ---------- */
.lp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: top .5s, left .5s, right .5s;
}
.lp-nav .bar {
  margin: 0 auto;
  max-width: var(--maxw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 16px;
  transition: height .5s, max-width .5s, background .5s, border-color .5s, box-shadow .5s, backdrop-filter .5s;
}
.lp-nav.scrolled { top: 16px; left: 16px; right: 16px; }
.lp-nav.scrolled .bar {
  height: 56px;
  max-width: 1200px;
  background: rgba(250, 249, 247, 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-color: rgba(var(--ink), 0.1);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
.lp-brand { display: inline-flex; align-items: center; gap: 8px; }
.lp-brand .nm { font-family: var(--serif); font-size: 24px; letter-spacing: -0.025em; transition: font-size .5s; }
.lp-nav.scrolled .lp-brand .nm { font-size: 20px; }
.lp-brand .tm { font-family: var(--mono); font-size: 12px; margin-top: 4px; color: var(--mut); transition: font-size .5s, margin-top .5s; }
.lp-nav.scrolled .lp-brand .tm { font-size: 10px; margin-top: 2px; }
.lp-navlinks { display: flex; align-items: center; gap: 48px; }
.lp-navlinks a {
  position: relative;
  font-size: 14px;
  color: rgba(var(--ink), 0.7);
  transition: color .3s;
}
.lp-navlinks a:hover { color: var(--fg); }
.lp-navlinks a::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 0; height: 1px; background: var(--fg);
  transition: width .3s;
}
.lp-navlinks a:hover::after { width: 100%; }
.lp-navcta { display: flex; align-items: center; gap: 16px; }
.lp-navcta .signin { font-size: 14px; color: rgba(var(--ink), 0.7); transition: color .3s, font-size .5s; }
.lp-navcta .signin:hover { color: var(--fg); }
.lp-nav.scrolled .lp-navcta .signin { font-size: 12px; }
.lp-navcta .btn { height: 36px; padding: 0 24px; font-size: 14px; transition: height .5s, padding .5s, font-size .5s, background .25s; }
.lp-nav.scrolled .lp-navcta .btn { height: 32px; padding: 0 16px; font-size: 12px; }
.lp-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--fg); }
.lp-burger svg { width: 24px; height: 24px; }
.lp-burger .x { display: none; }
.lp-nav.menu-open .lp-burger .bars { display: none; }
.lp-nav.menu-open .lp-burger .x { display: block; }
.lp-nav.menu-open .bar { background: rgba(250, 249, 247, .8); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-color: rgba(var(--ink), .1); border-radius: 16px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }

.lp-mobile {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 112px 32px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}
.lp-mobile.open { opacity: 1; pointer-events: auto; }
.lp-mobile .links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.lp-mobile .links a { font-family: var(--serif); font-size: 48px; line-height: 1; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.lp-mobile.open .links a { opacity: 1; transform: none; }
.lp-mobile.open .links a:nth-child(1) { transition-delay: 0ms; }
.lp-mobile.open .links a:nth-child(2) { transition-delay: 75ms; }
.lp-mobile.open .links a:nth-child(3) { transition-delay: 150ms; }
.lp-mobile.open .links a:nth-child(4) { transition-delay: 225ms; }
.lp-mobile .foot { display: flex; gap: 16px; padding-top: 32px; border-top: 1px solid var(--line); opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.lp-mobile.open .foot { opacity: 1; transform: none; transition-delay: 300ms; }
.lp-mobile .foot .btn { flex: 1; }

/* ---------- hero ---------- */
.lp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.lp-hero .grid-lines {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    repeating-linear-gradient(to right, rgba(var(--ink), 0.1) 0 1px, transparent 1px calc(100% / 12)),
    repeating-linear-gradient(to bottom, rgba(var(--ink), 0.1) 0 1px, transparent 1px calc(100% / 8));
}
.lp-hero .sphere {
  position: absolute;
  right: -4%; top: 50%;
  transform: translateY(-50%);
  width: min(800px, 70vw); height: min(800px, 70vw);
  opacity: 0.4;
  pointer-events: none;
}
.lp-hero .inner {
  position: relative; z-index: 10;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto;
  padding: 160px clamp(20px, 4vw, 48px) 160px;
}
.lp-hero h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 12vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin: 32px 0 48px;
}
.lp-hero h1 .swap {
  position: relative;
  display: inline-block;
}
.lp-hero h1 .swap .underline {
  position: absolute; left: 0; right: 0; bottom: -8px;
  height: 12px;
  background: rgba(var(--ink), 0.1);
}
.lp-hero h1 .swap .word { display: inline-flex; }
.lp-hero h1 .swap .word span { display: inline-block; }
.lp-hero .desc {
  display: grid;
  gap: clamp(48px, 5vw, 96px);
  align-items: end;
  grid-template-columns: 1fr 1fr;
}
.lp-hero .desc p {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.625;
  color: var(--mut);
  max-width: 576px;
}
.lp-hero .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* char-in animation reused by the rotating hero word */
@keyframes lp-charin {
  0% { opacity: 0; filter: blur(40px); transform: translateY(100%); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.lp .charin { animation: lp-charin .5s cubic-bezier(0.22, 1, 0.36, 1) both; opacity: 0; filter: blur(40px); transform: translateY(100%); }

/* hero stat marquee */
.lp-hero .marquee-wrap {
  position: absolute; left: 0; right: 0; bottom: 48px;
  z-index: 10;
}
.lp-marquee { display: flex; width: max-content; animation: lp-marq 30s linear infinite; }
.lp-marquee.rev { animation: lp-marq-rev 25s linear infinite; }
@keyframes lp-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lp-marq-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.lp-hero .mstat { display: inline-flex; align-items: baseline; gap: 16px; white-space: nowrap; margin-right: 64px; }
.lp-hero .mstat .v { font-family: var(--serif); font-size: clamp(36px, 4vw, 48px); }
.lp-hero .mstat .l { font-size: 14px; color: var(--mut); }
.lp-hero .mstat .l b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; margin-top: 4px; color: rgba(var(--ink), 0.45); }

/* ---------- section scaffold ---------- */
.lp-section { position: relative; padding: clamp(96px, 12vw, 128px) 0; }
.lp-section h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.lp-section h2 .dim { color: var(--mut); }
.lp .text-stroke {
  -webkit-text-stroke: 1.5px currentColor;
  -webkit-text-fill-color: transparent;
}
.lp-head { margin-bottom: clamp(64px, 8vw, 96px); }
.lp-head .eyebrow { margin-bottom: 24px; }

/* reveal-on-scroll (no-JS safe: only arms once JS connects) */
.lp.reveal-ready [data-reveal] { opacity: 0; }
.lp.reveal-ready [data-reveal].in { animation: lp-rev-up28 .7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lp.reveal-ready [data-reveal="up32"].in { animation-name: lp-rev-up32; }
.lp.reveal-ready [data-reveal="up16"].in { animation-name: lp-rev-up16; }
.lp.reveal-ready [data-reveal="left"].in  { animation-name: lp-rev-left; }
.lp.reveal-ready [data-reveal="right"].in { animation-name: lp-rev-right; }
.lp.reveal-ready [data-reveal="fade"].in  { animation-name: lp-rev-fade; }
@keyframes lp-rev-up28 { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes lp-rev-up32 { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes lp-rev-up16 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lp-rev-up48 { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes lp-rev-left  { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes lp-rev-right { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes lp-rev-fade  { from { opacity: 0; } to { opacity: 1; } }

/* ---------- shared utilities (template @layer parity) ---------- */
.lp .line-reveal { clip-path: inset(0 100% 0 0); animation: lp-line-reveal .8s cubic-bezier(0.77, 0, 0.175, 1) forwards; }
@keyframes lp-line-reveal { to { clip-path: inset(0 0 0 0); } }
.lp .hover-lift { transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lp .hover-lift:hover { transform: translateY(-4px); }
.lp .letter-spin { display: inline-block; transition: transform .6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lp .letter-spin:hover { transform: rotateY(360deg); }
.lp .border-sketch {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, var(--fg) 25%, transparent 25%, transparent 50%, var(--fg) 50%, var(--fg) 75%, transparent 75%) border-box;
  background-size: 100% 100%, 8px 8px;
}

/* Tailwind-accurate pulse (animate-pulse) for status/live dots */
@keyframes lp-pulse2 { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---------- features (numbered rows) ---------- */
.lp-feature {
  display: flex;
  gap: 32px;
  padding: 48px 0;
  border-bottom: 1px solid rgba(var(--ink), 0.1);
}
.lp-feature .no { flex: none; font-family: var(--mono); font-size: 14px; color: var(--mut); }
.lp-feature .body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.lp-feature h3 {
  font-family: var(--serif);
  font-size: 30px;
  margin-bottom: 16px;
  transition: transform .5s;
}
.lp-feature:hover h3 { transform: translateX(8px); }
.lp-feature p { font-size: 18px; color: var(--mut); line-height: 1.625; }
.lp-feature .viz { display: flex; justify-content: flex-end; }
.lp-feature .viz svg { width: 192px; height: 160px; color: var(--fg); }
/* per-row reveal: 48px travel (stagger via inline data-reveal-delay) */
.lp.reveal-ready .lp-feature[data-reveal].in { animation-name: lp-rev-up48; }

/* ---------- how it works (dark) ---------- */
.lp-how {
  position: relative;
  background: var(--fg);
  color: var(--bg);
  overflow: hidden;
}
.lp-how .diag {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
  background-image: repeating-linear-gradient(-45deg, transparent 0 40px, currentColor 40px 41px);
}
.lp-how .eyebrow { color: rgba(250, 249, 247, 0.5); }
.lp-how .eyebrow::before { background: rgba(250, 249, 247, 0.3); }
.lp-how h2 .dim { color: rgba(250, 249, 247, 0.5); }
.lp-how .grid { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(64px, 6vw, 96px); }
.lp-step {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 32px 0;
  border-bottom: 1px solid rgba(250, 249, 247, 0.1);
  display: flex; gap: 24px; cursor: pointer; align-items: flex-start;
  opacity: 0.4; transition: opacity .5s;
}
.lp-step.is-active { opacity: 1; }
.lp-step:hover { opacity: 0.7; }
.lp-step.is-active:hover { opacity: 1; }
.lp-step .rn { font-family: var(--serif); font-size: 30px; color: rgba(250, 249, 247, 0.3); }
.lp-step h3 { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 12px; transition: transform .3s; }
.lp-step:hover h3 { transform: translateX(8px); }
.lp-step p { color: rgba(250, 249, 247, 0.6); }
.lp-step .prog { margin-top: 16px; height: 1px; background: rgba(250, 249, 247, 0.2); overflow: hidden; display: none; }
.lp-step.is-active .prog { display: block; }
.lp-step .prog i { display: block; height: 100%; width: 0; background: var(--bg); }
.lp-step.is-active .prog i { animation: lp-prog 5s linear forwards; }
@keyframes lp-prog { from { width: 0; } to { width: 100%; } }

.lp-codeframe { border: 1px solid rgba(250, 249, 247, 0.1); align-self: start; position: sticky; top: 128px; }
.lp-codeframe .top { padding: 16px 24px; border-bottom: 1px solid rgba(250, 249, 247, 0.1); display: flex; align-items: center; justify-content: space-between; }
.lp-codeframe .dots { display: flex; gap: 8px; }
.lp-codeframe .dots i { width: 12px; height: 12px; border-radius: 999px; background: rgba(250, 249, 247, 0.2); }
.lp-codeframe .fname { font-family: var(--mono); font-size: 12px; color: rgba(250, 249, 247, 0.4); }
.lp-codeframe .panes { padding: 32px; min-height: 280px; }
.lp-codeframe pre { display: none; margin: 0; font-family: var(--mono); font-size: 14px; line-height: 2; color: rgba(250, 249, 247, 0.7); white-space: pre-wrap; }
.lp-codeframe pre.is-active { display: block; }
.lp-codeframe pre .ln { display: inline-block; width: 32px; color: rgba(250, 249, 247, 0.2); user-select: none; }
.lp-codeframe pre .cm { color: rgba(250, 249, 247, 0.38); }
/* per-line + per-char typing reveal (built by cycle controller on activate) */
.lp-codeframe .cl { opacity: 0; transform: translateX(-8px); animation: lp-cline .4s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes lp-cline { to { opacity: 1; transform: translateX(0); } }
.lp-codeframe .cc { opacity: 0; filter: blur(8px); animation: lp-cchar .3s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes lp-cchar { to { opacity: 1; filter: blur(0); } }
.lp-codeframe .status { padding: 16px 24px; border-top: 1px solid rgba(250, 249, 247, 0.1); display: flex; align-items: center; gap: 12px; }
.lp-codeframe .status i { width: 8px; height: 8px; border-radius: 999px; background: #4ade80; animation: lp-pulse2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.lp-codeframe .status span { font-family: var(--mono); font-size: 12px; color: rgba(250, 249, 247, 0.4); }
@keyframes lp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- infrastructure ---------- */
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.lp-split h2 { margin-bottom: 32px; }
.lp-split .lead { font-size: 20px; color: var(--mut); line-height: 1.625; margin-bottom: 48px; }
.lp-ministats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.lp-ministats .v { font-family: var(--serif); font-size: clamp(36px, 4vw, 48px); margin-bottom: 8px; line-height: 1; }
.lp-ministats .l { font-size: 14px; color: var(--mut); }

.lp-panel { border: 1px solid rgba(var(--ink), 0.1); background: var(--bg); }
.lp-panel .ph { padding: 16px 24px; border-bottom: 1px solid rgba(var(--ink), 0.1); display: flex; align-items: center; justify-content: space-between; }
.lp-panel .ph .t { font-family: var(--mono); font-size: 14px; color: var(--mut); }
.lp-panel .ph .ok { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--live); }
.lp-panel .ph .ok i { width: 8px; height: 8px; border-radius: 999px; background: var(--live); animation: lp-pulse2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.lp-row { padding: 20px 24px; border-bottom: 1px solid rgba(var(--ink), 0.05); display: flex; align-items: center; justify-content: space-between; transition: background .3s; }
.lp-row:last-child { border-bottom: 0; }
.lp-row.is-active { background: rgba(var(--ink), 0.02); }
.lp-row .who { display: flex; align-items: center; gap: 16px; }
.lp-row .who i { width: 8px; height: 8px; border-radius: 999px; background: rgba(var(--ink), 0.2); transition: background .3s; }
.lp-row.is-active .who i { background: var(--fg); }
.lp-row .nm { font-weight: 500; }
.lp-row .sub { font-size: 14px; color: var(--mut); }
.lp-row .meta { font-family: var(--mono); font-size: 14px; color: var(--mut); }

/* ---------- metrics ---------- */
.lp-metrics { border-top: 1px solid rgba(var(--ink), 0.1); border-bottom: 1px solid rgba(var(--ink), 0.1); }
.lp-metrics .top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(48px, 8vw, 96px); }
.lp-metrics .clock { display: inline-flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 14px; color: var(--mut); }
.lp-metrics .clock i { width: 8px; height: 8px; border-radius: 999px; background: var(--live); animation: lp-pulse2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.lp-metrics .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(var(--ink), 0.1); }
.lp-metric { background: var(--bg); padding: clamp(32px, 4vw, 48px); }
.lp-metric .v { font-family: var(--serif); font-size: clamp(48px, 8vw, 96px); line-height: 1; letter-spacing: -0.02em; }
.lp-metric .l { margin-top: 16px; font-size: 18px; color: var(--mut); }

/* ---------- marquee strips (GPU models / frameworks) ---------- */
.lp-strip { width: 100%; overflow: hidden; }
.lp-strip + .lp-strip { margin-top: 24px; }
.lp-strip .track { display: flex; width: max-content; gap: 24px; }
.lp-strip .lp-chip { margin-right: 24px; }
.lp-chip {
  flex: none;
  padding: 24px 32px;
  border: 1px solid rgba(var(--ink), 0.1);
  background: var(--card);
  transition: border-color .3s, background .3s;
}
.lp-chip:hover { border-color: rgba(var(--ink), 0.3); background: rgba(var(--ink), 0.02); }
.lp-chip .nm { font-size: 18px; font-weight: 500; transition: transform .15s; }
.lp-chip:hover .nm { transform: translateX(4px); }
.lp-chip .ct { font-size: 14px; color: var(--mut); }

/* ---------- workloads (was testimonials) ---------- */
.lp-quotes { padding-top: clamp(128px, 12vw, 160px); padding-bottom: 56px; border-top: 1px solid rgba(var(--ink), 0.1); }
.lp-quotes .lp-wrap { max-width: 1280px; }
.lp-quotes .qhead { display: flex; align-items: center; gap: 16px; margin-bottom: 64px; }
.lp-quotes .qhead .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.lp-quotes .qhead .ln { flex: 1; height: 1px; background: rgba(var(--ink), 0.1); }
.lp-quotes .qhead .ix { font-family: var(--mono); font-size: 12px; color: var(--mut); }
.lp-quotes .grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(48px, 6vw, 80px); }
/* quote panes: stack so opacity can transition */
.lp-quotes .grid > div:first-child { display: grid; }
.lp-quote { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; pointer-events: none; }
.lp-quote.is-active { opacity: 1; transform: none; pointer-events: auto; }
.lp-quote.is-leaving { opacity: 0; transform: translateY(16px); }
.lp-quote blockquote p { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 60px); line-height: 1.1; letter-spacing: -0.025em; }
.lp-quote .by { margin-top: 48px; display: flex; align-items: center; gap: 24px; transition: opacity .3s; transition-delay: .1s; }
.lp-quote.is-leaving .by { opacity: 0; }
.lp-quote .by .av { width: 64px; height: 64px; border-radius: 999px; background: rgba(var(--ink), 0.05); border: 1px solid rgba(var(--ink), 0.1); display: flex; align-items: center; justify-content: center; }
.lp-quote .by .av svg { width: 26px; height: 26px; }
.lp-quote .by .nm { font-size: 18px; font-weight: 500; }
.lp-quote .by .role { color: var(--mut); }
.lp-quotes .side { display: flex; flex-direction: column; justify-content: center; }
.lp-quotes .kr-stack { display: grid; }
.lp-keyresult { grid-area: 1 / 1; padding: 32px; border: 1px solid rgba(var(--ink), 0.1); opacity: 0; transform: scale(.95); transition: opacity .3s, transform .3s; pointer-events: none; }
.lp-keyresult.is-active { opacity: 1; transform: none; pointer-events: auto; }
.lp-keyresult.is-leaving { opacity: 0; transform: scale(.95); }
.lp-keyresult .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); display: block; margin-bottom: 16px; }
.lp-keyresult .v { font-family: var(--serif); font-size: clamp(28px, 4vw, 40px); }
.lp-quotes .fwk { font-family: var(--serif); font-size: 24px; color: rgba(var(--ink), 0.3); white-space: nowrap; margin-right: 64px; transition: color .3s; }
.lp-quotes .fwk:hover { color: var(--fg); }
.lp-dots { display: flex; gap: 8px; margin-top: 32px; }
.lp-dots button { height: 8px; width: 8px; border: 0; padding: 0; cursor: pointer; background: rgba(var(--ink), 0.2); transition: width .3s, background .3s; }
.lp-dots button.is-active { width: 32px; background: var(--fg); }
.lp-dots button:not(.is-active):hover { background: rgba(var(--ink), 0.4); }

/* ---------- developers ---------- */
.lp-dev .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(64px, 6vw, 96px); align-items: start; }
.lp-dev h2 { margin-bottom: 32px; letter-spacing: -0.025em; }
.lp-dev .lead { font-size: 20px; color: var(--mut); line-height: 1.625; margin-bottom: 48px; }
.lp-dev .props { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lp-dev .props h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.lp-dev .props p { font-size: 14px; color: var(--mut); }
/* props children stagger */
.lp.reveal-ready .lp-dev .props > div { opacity: 0; }
.lp.reveal-ready .lp-dev .props > div.in { animation: lp-rev-up16 .5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lp-dev .props > div:nth-child(1) { animation-delay: 200ms; }
.lp-dev .props > div:nth-child(2) { animation-delay: 250ms; }
.lp-dev .props > div:nth-child(3) { animation-delay: 300ms; }
.lp-dev .props > div:nth-child(4) { animation-delay: 350ms; }
.lp-dev .frame { border: 1px solid rgba(var(--ink), 0.1); position: sticky; top: 128px; }
.lp-dev .tabs { display: flex; align-items: center; border-bottom: 1px solid rgba(var(--ink), 0.1); }
.lp-dev .tab { position: relative; padding: 16px 24px; font-family: var(--mono); font-size: 14px; color: var(--mut); background: none; border: 0; cursor: pointer; transition: color .25s; }
.lp-dev .tab.is-active { color: var(--fg); }
.lp-dev .tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg); }
.lp-dev .tabsfill { flex: 1; }
.lp-dev .copy { padding: 16px; color: var(--mut); background: none; border: 0; cursor: pointer; transition: color .25s; }
.lp-dev .copy:hover { color: var(--fg); }
.lp-dev .copy svg { width: 16px; height: 16px; display: block; }
.lp-dev .copy .ok { display: none; color: var(--live); }
.lp-dev .copy.copied .df { display: none; }
.lp-dev .copy.copied .ok { display: block; }
.lp-dev .panes { padding: 32px; min-height: 220px; background: rgba(var(--ink), 0.01); }
.lp-dev pre { display: none; margin: 0; font-family: var(--mono); font-size: 14px; line-height: 2; color: rgba(var(--ink), 0.8); white-space: pre-wrap; }
.lp-dev pre.is-active { display: block; }
.lp-dev pre .cm { color: var(--mut); }
/* per-line + per-char typing reveal (dev variant; reuses lp-cline/lp-cchar) */
.lp-dev .cl { opacity: 0; transform: translateX(-8px); animation: lp-cline .4s cubic-bezier(.22, 1, .36, 1) forwards; }
.lp-dev .cc { opacity: 0; filter: blur(8px); animation: lp-cchar .3s cubic-bezier(.22, 1, .36, 1) forwards; }
.lp-dev .links { margin-top: 24px; display: flex; align-items: center; gap: 24px; font-size: 14px; }
.lp-dev .links .sep { color: rgba(var(--ink), 0.2); }
.lp-dev .links a.solid-link { color: var(--fg); }
.lp-dev .links a.solid-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.lp-dev .links a.mut { color: var(--mut); }
.lp-dev .links a.mut:hover { color: var(--fg); }

/* ---------- pricing (real GPU tiers) ---------- */
.lp-pricing { border-top: 1px solid rgba(var(--ink), 0.1); padding-top: 128px; padding-bottom: 128px; }
.lp-pricing .head { max-width: 760px; margin-bottom: 80px; }
.lp-pricing h2 { font-size: clamp(40px, 7vw, 72px); margin-bottom: 24px; }
.lp-pricing .head p { font-size: 18px; color: var(--mut); max-width: 36ch; }
.lp-toggle { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 64px; }
.lp-toggle span { font-size: 14px; color: var(--mut); transition: color .25s; }
.lp-toggle span.on { color: var(--fg); }
.lp-toggle .sw { position: relative; width: 56px; height: 28px; border: 0; padding: 4px; border-radius: 999px; background: rgba(var(--ink), 0.1); cursor: pointer; transition: background .25s; }
.lp-toggle .sw:hover { background: rgba(var(--ink), 0.2); }
.lp-toggle .sw i { display: block; width: 20px; height: 20px; border-radius: 999px; background: var(--fg); transition: transform .3s; }
.lp-toggle.annual .sw i { transform: translateX(28px); }
.lp-toggle .save { padding: 4px 8px; background: var(--fg); color: var(--bg); font-family: var(--mono); font-size: 11px; }

.lp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(var(--ink), 0.1); }
.lp-plan { position: relative; background: var(--bg); padding: clamp(28px, 3vw, 48px); }
.lp-plan.popular { border: 2px solid var(--fg); position: relative; z-index: 1; }
.lp-plan .tag { position: absolute; top: -12px; left: 32px; padding: 4px 12px; background: var(--fg); color: var(--bg); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.lp-plan .pn { font-family: var(--mono); font-size: 12px; color: var(--mut); }
.lp-plan h3 { font-family: var(--serif); font-size: 30px; margin: 8px 0; }
.lp-plan .pd { font-size: 14px; color: var(--mut); min-height: 40px; }
.lp-plan .price { margin: 0 0 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(var(--ink), 0.1); display: flex; align-items: baseline; gap: 8px; }
.lp-plan .price .amt { font-family: var(--serif); font-size: clamp(48px, 5vw, 60px); line-height: 1; }
.lp-plan .price .per { color: var(--mut); font-size: 15px; }
.lp [data-controller="pricetoggle"] .price .mo { display: none; }
.lp [data-controller="pricetoggle"].show-monthly .price .hr { display: none; }
.lp [data-controller="pricetoggle"].show-monthly .price .mo { display: inline; }
.lp-plan ul { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lp-plan li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--mut); }
.lp-plan li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--fg); }
.lp-plan .pcta {
  width: 100%; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: background .25s, border-color .25s;
}
.lp-plan .pcta svg { width: 16px; height: 16px; transition: transform .25s; }
.lp-plan .pcta:hover svg { transform: translateX(4px); }
.lp-plan .pcta.solid { background: var(--fg); color: var(--bg); border: 1px solid var(--fg); }
.lp-plan .pcta.solid:hover { background: rgba(var(--ink), 0.9); }
.lp-plan .pcta.ghost { background: none; border: 1px solid rgba(var(--ink), 0.2); color: var(--fg); }
.lp-plan .pcta.ghost:hover { border-color: var(--fg); background: rgba(var(--ink), 0.05); }
.lp-pricing .note { margin-top: 48px; text-align: center; font-size: 14px; color: var(--mut); }
.lp-pricing .note a { text-decoration: underline; text-underline-offset: 4px; transition: color .2s; }
.lp-pricing .note a:hover { color: var(--fg); }
/* popular card pop-out + larger vertical padding */
@media (min-width: 768px) {
  .lp-plan.popular { margin: -16px 0; padding-top: 48px; padding-bottom: 48px; }
}
@media (min-width: 1024px) {
  .lp-plan.popular { padding-top: 64px; padding-bottom: 64px; }
  .lp-pricing { padding-top: 160px; padding-bottom: 160px; }
}

/* ---------- security / trust ---------- */
.lp-trust { background: rgba(var(--ink), 0.02); }
.lp-trust .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.lp-trust h2 { margin-bottom: 32px; }
.lp-trust .lead { font-size: 20px; color: var(--mut); line-height: 1.625; margin-bottom: 48px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-chips .c { padding: 8px 16px; border: 1px solid rgba(var(--ink), 0.1); font-family: var(--mono); font-size: 13px; }
/* cert chips staggered reveal */
.lp.reveal-ready .lp-chips .c { opacity: 0; }
.lp.reveal-ready .lp-chips .c.in { animation: lp-rev-up16 .5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lp-chips .c:nth-child(1) { animation-delay: 200ms; }
.lp-chips .c:nth-child(2) { animation-delay: 250ms; }
.lp-chips .c:nth-child(3) { animation-delay: 300ms; }
.lp-chips .c:nth-child(4) { animation-delay: 350ms; }
.lp-chips .c:nth-child(5) { animation-delay: 400ms; }
.lp-chips .c:nth-child(6) { animation-delay: 450ms; }
.lp-trust .cards { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 0; }
.lp-tcard { padding: 24px; border: 1px solid rgba(var(--ink), 0.1); display: flex; gap: 16px; transition: border-color .5s; }
.lp-tcard:hover { border-color: rgba(var(--ink), 0.2); }
/* right cards: translateX(32px) reveal (stagger via inline data-reveal-delay) */
.lp.reveal-ready .lp-tcard[data-reveal] { opacity: 0; }
.lp.reveal-ready .lp-tcard[data-reveal].in { animation: lp-rev-right .5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lp-tcard .ic { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--ink), 0.1); transition: background .3s, color .3s; }
.lp-tcard:hover .ic { background: var(--fg); color: var(--bg); }
.lp-tcard .ic svg { width: 20px; height: 20px; }
.lp-tcard h3 { font-size: 18px; font-weight: 500; margin-bottom: 4px; transition: transform .3s; }
.lp-tcard:hover h3 { transform: translateX(4px); }
.lp-tcard p { color: var(--mut); }
@media (min-width: 1024px) { .lp-trust .grid { gap: 96px; } }

/* ---------- closing CTA ---------- */
.lp-close .box { position: relative; border: 1px solid var(--fg); overflow: hidden; }
.lp-close .glow { position: absolute; inset: 0; opacity: .1; pointer-events: none; transition: opacity .3s; z-index: 1; }
.lp-close .inner { position: relative; z-index: 10; padding: clamp(40px, 6vw, 96px); display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.lp-close h2 { font-family: var(--serif); font-size: clamp(36px, 7vw, 72px); line-height: 0.95; letter-spacing: -0.025em; margin-bottom: 32px; }
.lp-close p { font-size: 20px; color: var(--mut); max-width: 36ch; margin-bottom: 48px; line-height: 1.625; }
.lp-close .fine { margin-top: 32px; font-family: var(--mono); font-size: 13px; color: var(--mut); }
.lp-close .tetra { flex: none; width: 500px; height: 500px; margin-right: -64px; }
/* box reveal: 32px / 1000ms (variant via data-reveal="up32" data-reveal-duration="1000") */
.lp.reveal-ready .lp-close .box[data-reveal] { opacity: 0; }
.lp.reveal-ready .lp-close .box[data-reveal].in { animation: lp-rev-up32 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lp-close .corner { position: absolute; width: 128px; height: 128px; }
.lp-close .corner.tr { top: 0; right: 0; border-bottom: 1px solid rgba(var(--ink), 0.1); border-left: 1px solid rgba(var(--ink), 0.1); }
.lp-close .corner.bl { bottom: 0; left: 0; border-top: 1px solid rgba(var(--ink), 0.1); border-right: 1px solid rgba(var(--ink), 0.1); }

/* ---------- footer ---------- */
.lp-footer { position: relative; border-top: 1px solid rgba(var(--ink), 0.1); }
.lp-footer .wave { position: absolute; inset: 0; height: 256px; opacity: 0.2; pointer-events: none; overflow: hidden; }
.lp-footer .inner { position: relative; z-index: 10; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.lp-footer .cols { padding: 64px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.lp-footer .brandcol { grid-column: span 2; }
.lp-footer .brandcol .nm { font-family: var(--serif); font-size: 24px; line-height: 32px; }
.lp-footer .brandcol p { margin: 24px 0 32px; color: var(--mut); max-width: 320px; }
.lp-footer .social { display: flex; gap: 24px; }
.lp-footer .social a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--mut); transition: color .15s; }
.lp-footer .social a:hover { color: var(--fg); }
.lp-footer .social a svg { width: 12px; height: 12px; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.lp-footer .social a:hover svg { opacity: 1; transform: none; }
.lp-footer .col h4 { font-size: 14px; font-weight: 500; margin: 0 0 24px; }
.lp-footer .col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lp-footer .col a { font-size: 14px; color: var(--mut); transition: color .15s; }
.lp-footer .col a:hover { color: var(--fg); }
.lp-footer .bottom { padding: 32px 0; border-top: 1px solid rgba(var(--ink), 0.1); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; }
.lp-footer .bottom .c { font-size: 14px; color: var(--mut); }
.lp-footer .bottom .ok { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mut); }
.lp-footer .bottom .ok i { width: 8px; height: 8px; border-radius: 999px; background: #22c55e; }
@media (min-width: 768px) {
  .lp-footer .cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-footer .brandcol { grid-column: span 2; }
  .lp-footer .bottom { flex-direction: row; }
}
@media (min-width: 1024px) {
  .lp-footer .inner { padding: 0 48px; }
  .lp-footer .cols { gap: 32px; padding: 96px 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .lp-navlinks, .lp-navcta { display: none; }
  .lp-burger { display: inline-flex; }
  .lp-hero .sphere { opacity: 0.22; right: -20%; }
  .lp-hero .desc { grid-template-columns: 1fr; }
  .lp-feature { flex-direction: column; }
  .lp-feature .body { grid-template-columns: 1fr; }
  .lp-feature .viz { justify-content: center; }
  .lp-how .grid, .lp-split, .lp-dev .grid, .lp-trust .grid, .lp-quotes .grid { grid-template-columns: 1fr; }
  .lp-codeframe, .lp-dev .frame { position: static; }
  .lp-metrics .grid, .lp-plans { grid-template-columns: 1fr; }
  .lp-plan.popular { margin: 0; padding-top: clamp(28px, 3vw, 48px); padding-bottom: clamp(28px, 3vw, 48px); }
  .lp-close .inner { flex-direction: column; align-items: flex-start; }
  .lp-close .tetra { display: none; }
}
@media (max-width: 560px) {
  .lp-dev .props { grid-template-columns: 1fr; }
  .lp-quotes .grid { grid-template-columns: 1fr; }
  .lp-hero .marquee-wrap { bottom: 40px; }
}