/* Lector, in the magicelklabs house style: near-black canvas tinted toward the
   icon's maroon, a surface ladder, hairlines and a lip on every raised edge,
   Cabinet Grotesk display over the system face, one red accent. The scroll
   engine owns every [data-sc-*] selector; everything here is the page's own
   markup. */

@font-face {
  font-family: "Cabinet Grotesk";
  font-weight: 800;
  font-display: swap;
  src: url(fonts/cabinet-grotesk-800.woff2) format("woff2");
}
@font-face {
  font-family: "Cabinet Grotesk";
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cabinet-grotesk-700.woff2) format("woff2");
}

:root {
  color-scheme: dark;
  --canvas: #0C0808;  --surface: #140E0D;  --elevated: #1C1413;  --card: #231917;
  --ink: #F8EAD2;     --body: #B9A9A2;     --mute: #908079;
  --red: #C0544F;     --red-press: #B04A45; --on-red: #FFFFFF;
  --red-text: #E58A82;
  --lamp: #FFE1C4;
  --band-top: #3E1C1A; --band-bot: #260A10;
  --hair: rgba(255, 255, 255, .075); --hair-soft: rgba(255, 255, 255, .045);
  --lip: inset 0 1px 0 rgba(255, 255, 255, .055);
  --r-card: 12px; --r-inner: 8px; --r-pill: 12px;
  --accent: var(--red-text);

  /* The engine's tokens, mapped onto the house ones. */
  --sc-canvas: var(--canvas); --sc-surface: var(--surface);
  --sc-ink: var(--ink); --sc-ink-soft: var(--body);
  --sc-accent: var(--red); --sc-accent-ink: var(--on-red);
  --sc-hairline: var(--hair);
  --sc-font-display: "Cabinet Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sc-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --sc-track-tight: -0.025em;
  --sc-shadow-color: 350 40% 2%;
  --sc-r-md: var(--r-card);
  --sc-z-chrome: 60;
}

html { scroll-padding-top: 86px; }
body { color: var(--body); }
h1, h2, h3 { color: var(--ink); margin: 0; }
h1, h2 {
  font-family: var(--sc-font-display); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.06; text-wrap: balance;
}
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h3 { font-size: 17px; font-weight: 650; }
p { text-wrap: pretty; }
.ink { color: var(--ink); }
.mute { color: var(--mute); }
.body { color: var(--body); }
.red { color: var(--red-text); }
.sc-display { font-weight: 800; }
.sc-grain { opacity: 0.035; }

/* Without the engine, everything it would reveal is simply there. */
.no-js [data-sc-cue], .no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1; transform: none; }
.no-js [data-sc-reveal] { clip-path: none; }
.no-js video[data-sc-scrub] { display: none; }

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 70;
  padding: 8px 16px; background: var(--ink); color: var(--canvas);
  border-radius: 999px; font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--red-text); outline-offset: 3px; border-radius: 6px;
}

/* ---------------------------------------------------------------- layout -- */
.wrap { max-width: 1152px; margin-inline: auto; padding-inline: 24px; }
.wrap--5 { max-width: 1024px; }
.wrap--3 { max-width: 768px; }
.wrap--2 { max-width: 672px; }
.section { padding-block: clamp(80px, 9vw, 112px); }
.section--surface { background: var(--surface); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.rule-top { border-top: 1px solid var(--hair); }
.intro { max-width: 42rem; margin-bottom: 40px; }
.intro p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; }

/* -------------------------------------------------------------- keycaps -- */
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9em; height: 1.9em; padding: 0 .45em;
  font: 600 .82em/1 var(--sc-font-text);
  color: var(--ink); background: var(--card);
  border: 1px solid rgba(255, 255, 255, .1); border-bottom-width: 2px; border-radius: 6px;
  box-shadow: var(--lip);
}
.keys { display: inline-flex; gap: 4px; vertical-align: middle; }
h2 .keys kbd { font-size: .62em; color: var(--red-text); }

/* -------------------------------------------------------------- buttons -- */
.btn-red, .btn-ghost, .btn-paper {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  font-family: inherit; line-height: 1.2;
}
.btn-sm { font-size: 13.5px; padding: 7px 14px; }
.btn-lg { font-size: 15px; padding: 12px 24px; }
.btn-block { width: 100%; font-size: 16px; padding: 14px; margin-top: auto; }
.btn-red {
  background: var(--red); color: var(--on-red);
  border-radius: var(--r-pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), background .2s, box-shadow .25s;
}
.btn-red:hover { background: var(--red-press); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 26px -8px rgba(192, 84, 79, .55); }
.btn-red:active { transform: translateY(0) scale(.99); }
.btn-ghost {
  background: rgba(255, 255, 255, .05); color: var(--ink); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-pill); box-shadow: var(--lip);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .2s, background .2s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0) scale(.99); }
.btn-paper { background: #FFF8F4; color: #3A0F0E; border-radius: var(--r-pill); transition: transform .22s cubic-bezier(.2, .8, .2, 1), background .2s; }
.btn-paper:hover { background: #FFFFFF; transform: translateY(-1px); }


/* ------------------------------------------------------------------- nav -- */
.nav { position: fixed; top: 12px; inset-inline: 0; z-index: var(--sc-z-chrome); padding-inline: 12px; }
.nav-pill {
  position: relative; max-width: 1024px; margin-inline: auto; height: 54px;
  padding: 0 10px 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(20, 14, 13, .55); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px; box-shadow: var(--lip);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  transition: background .3s, border-color .3s;
}
.nav.scrolled .nav-pill { background: rgba(20, 14, 13, .82); border-color: rgba(255, 255, 255, .12); }
.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
html.glassy .nav-pill {
  background: rgba(20, 14, 13, .30);
  backdrop-filter: url(#nav-glass) blur(9px) saturate(1.25);
  box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, .20), inset 0 0 7px 2px rgba(255, 255, 255, .06), var(--lip);
}
html.glassy .nav.scrolled .nav-pill { background: rgba(20, 14, 13, .58); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.brand img { width: 23px; height: 28px; }
.brand span { font-family: var(--sc-font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.nav-links { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--body); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------ hero --
   A reading lamp over the lectern: React Bits' LightRays, warm, falling from
   the top centre. It drifts on its own clock and ignores the pointer. */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 112px 24px 96px; overflow: hidden;
}
.rays {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease .2s;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 92%);
}
.rays.lit { opacity: .7; }
.hero__inner { position: relative; z-index: 1; width: 100%; max-width: 1024px; margin-inline: auto; text-align: center; }
.hero h1 { font-size: clamp(2.3rem, 6.6vw, 4.9rem); margin-bottom: 24px; }
.hero__lede { max-width: 36rem; margin: 0 auto 36px; font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* The headline arrives in Japanese and is translated in place. Each line is
   one box with a fixed height and no wrapping, so the swap between scripts
   never moves anything below it. Forced LTR keeps the scrambled Hebrew and
   Arabic glyphs from reordering the letters already resolved. */
.tl { display: inline-block; height: 1.1em; line-height: 1.1; white-space: nowrap; vertical-align: top; unicode-bidi: bidi-override; direction: ltr; }
.tl-in { animation: tl-in .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes tl-in { from { opacity: 0; transform: translateY(.18em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.tl .s { color: var(--mute); }
/* Each letter lands in lamplight and settles to its final colour, so the
   sweep follows the translation across the line. */
.tl .hit { animation: tl-sweep .9s cubic-bezier(.22, 1, .36, 1) both; }
.tl-red .hit { animation-name: tl-sweep-red; }
@keyframes tl-sweep { from { color: var(--lamp); text-shadow: 0 0 .35em rgba(255, 225, 196, .45); } to { color: var(--ink); text-shadow: none; } }
@keyframes tl-sweep-red { from { color: var(--lamp); text-shadow: 0 0 .35em rgba(255, 225, 196, .45); } to { color: var(--red-text); text-shadow: none; } }

/* Above-the-fold entrances run at load, after the headline. */
.rise { animation: rise .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--rise-delay, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.no-js .rise { animation: none; }

/* ------------------------------------------------------------ media slots -- */
.frame { background: var(--surface); border: 1px solid var(--hair); box-shadow: var(--lip); border-radius: var(--r-card); padding: 6px; margin: 0; }
.slot { position: relative; background: var(--elevated); border-radius: var(--r-inner); overflow: hidden; }
.slot > video, .slot > img, .slot > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot .en { position: absolute; inset: 0; }
.slot .en img { width: 100%; height: 100%; object-fit: cover; }
.slot video[data-sc-scrub] { position: absolute; inset: 0; }

.demo__stage { display: grid; align-content: center; padding: 84px 24px 24px; }
.demo__frame { width: min(1024px, 100%); margin-inline: auto; }
.demo__slot { aspect-ratio: 1728 / 1080; max-height: calc(100svh - 132px); }

/* ---------------------------------------------------------------- unease --
   A drum of examples. Each face's position on the wheel is k, from -1 (still
   below, face down) through 0 (front, upright) to 1 (gone over the top). k is
   the act's progress scaled so face 0 is front at p = 0 and the last face is
   front at p = 1 and holds there. */
.unease__stage { display: grid; align-content: center; }
.unease .wrap { padding-left: max(24px, 14vw); }
.unease__lede { margin: 0 0 56px; max-width: 22ch; font-size: clamp(1.4rem, 2.6vw, 2.1rem); color: var(--body); font-weight: 700; }
.drum {
  position: relative; list-style: none; margin: 0; padding: 0;
  height: 3.2em; font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  perspective: 1100px; perspective-origin: 30% 50%;
}
.drum li {
  --k: clamp(-1, var(--sc-p, 0) * var(--n) - var(--i), 1);
  position: absolute; inset-inline: 0; top: 0; margin: 0; max-width: 14ch;
  line-height: 1.04; letter-spacing: -0.025em; color: var(--ink);
  transform-origin: 50% 50%;
  transform: translate3d(0, calc(var(--k) * -1.1em), 0) rotateX(calc(var(--k) * -78deg));
  opacity: calc(1 - var(--k) * var(--k));
  backface-visibility: hidden; will-change: transform, opacity;
}
.drum li.red { color: var(--red-text); }
.no-js .drum { height: auto; }
.no-js .drum li { position: static; transform: none; opacity: 1; }
.no-js .drum li + li { margin-top: 10px; }

/* ------------------------------------------------------------------ grab -- */
.grab__stage {
  display: grid; grid-template-columns: 4fr 8fr; align-items: center; gap: 56px;
  padding: 100px 24px 48px; max-width: 1152px; margin-inline: auto;
}
.grab__copy h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.grab__copy p { margin: 20px 0 0; max-width: 30rem; font-size: 16px; line-height: 1.65; }
.grab__slot { aspect-ratio: 1555 / 1080; }
.grab__slot .sc-stage__poster, .demo__slot .sc-stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- instead -- */
.instead__stage { display: grid; place-items: center; padding-inline: 24px; }
.instead__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 32px; margin: 0; }
.instead__word { font-size: clamp(1.8rem, 3.6vw, 3rem); color: var(--ink); letter-spacing: -0.02em; }
.keycaps { display: inline-flex; gap: 12px; }
.keycap {
  display: inline-grid; place-items: center;
  width: clamp(4rem, 9vw, 6.5rem); height: clamp(4rem, 9vw, 6.5rem); padding: 0;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); border-bottom-width: 3px;
  font: 800 clamp(1.8rem, 4vw, 3rem)/1 var(--sc-font-display);
  color: var(--ink); background: linear-gradient(180deg, var(--card), var(--surface));
  box-shadow: var(--lip), var(--sc-e2);
}

/* ------------------------------------------------------------------ peak -- */
.peak__media { position: absolute; inset: 0; }
.peak__media .done { position: absolute; inset: 0; z-index: 1; opacity: 0; }
.peak__media .done img { width: 100%; height: 100%; object-fit: cover; }
/* The band only exists once the translation has landed and the copy arrives,
   so the paint itself is seen unobscured. */
.peak__scrim {
  z-index: 3;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--canvas) 92%, transparent) 30%,
    color-mix(in oklab, var(--canvas) 60%, transparent) 46%,
    transparent 62%);
  opacity: clamp(0, (var(--sc-p, 0) - 0.6) / 0.1, 1);
}
.peak__copy { position: absolute; z-index: 4; inset-inline: 24px; bottom: clamp(3rem, 10vh, 7rem); max-width: 40rem; margin-inline: auto; left: max(24px, calc(50% - 512px)); }
.peak__copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.peak__copy p { margin: 16px 0 0; color: var(--ink); font-size: 16px; line-height: 1.65; }

/* ---------------------------------------------------------------- layout -- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px; }
.fact { padding: 22px 0; border-top: 1px solid var(--hair); }
.fact h3 { margin-bottom: 6px; }
.fact p { margin: 0; font-size: 15px; line-height: 1.65; }

/* ------------------------------------------------------------- languages -- */
.scripts { display: flex; flex-wrap: wrap; gap: .25em .9em; margin: 0 0 64px; font-size: clamp(1.45rem, 3.2vw, 2.25rem); line-height: 1.35; color: var(--ink); }
.scripts span { white-space: nowrap; }
.row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--hair-soft); }
.row:last-child { border-bottom: 1px solid var(--hair-soft); }
.row b { font-family: var(--sc-font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.row p { margin: 0; font-size: 15px; line-height: 1.65; max-width: 62ch; }

/* --------------------------------------------------------------- pricing -- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-card); background: var(--canvas); border: 1px solid var(--hair); box-shadow: var(--lip); }
.plan h3 { font-size: 19px; font-weight: 700; margin-bottom: 20px; }
.price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 24px; }
.price .mute { font-size: 14px; }
.price-num { font-family: var(--sc-font-display); font-weight: 800; font-size: 48px; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.price-lit {
  background: linear-gradient(168deg, color-mix(in srgb, var(--red) 14%, var(--surface)), var(--surface) 60%);
  border-color: color-mix(in srgb, var(--red) 34%, transparent);
}
.plan__rows { margin-bottom: 28px; flex: 1; }
.p-row { display: flex; gap: 11px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--hair-soft); font-size: 15px; line-height: 1.55; color: var(--body); }
.p-row:first-child { border-top: none; }
.p-row::before { content: "✓"; flex: none; font-size: 13px; color: var(--red-text); }
.p-row.no::before { content: "–"; color: var(--mute); }
.p-row b { color: var(--ink); font-weight: 600; }
.faq details p a { color: var(--red-text); font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------- faq -- */
.section--faq { padding-block: 80px; }
.faq__title { font-size: clamp(1.7rem, 4vw, 2.4rem); padding-top: 40px; margin-bottom: 48px; border-top: 1px solid var(--hair); }
.faq details { padding: 20px 0; }
.faq details + details { border-top: 1px solid var(--hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.chev { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--mute); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; }

/* ------------------------------------------------------------------ band --
   The drenched closing band. Two soft lights drift inside it on their own
   clock: band luminance, not floating decoration, parked when off screen. */
.band { position: relative; overflow: hidden; padding: clamp(112px, 14vw, 144px) 24px; background: linear-gradient(168deg, var(--band-top), var(--band-bot)); }
.band__light { position: absolute; inset: 0; pointer-events: none; }
.band__light i {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 190, 170, .14), transparent 70%);
  filter: blur(40px); opacity: 0;
}
.band__light i:first-child { left: -20vmax; top: -30vmax; animation: orb-a 26s ease-in-out infinite alternate; }
.band__light i:last-child { right: -24vmax; bottom: -34vmax; animation: orb-b 32s ease-in-out infinite alternate; }
.band.lit .band__light i { opacity: 1; }
.band.parked .band__light i { animation-play-state: paused; }
@keyframes orb-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(14vmax, 10vmax, 0); } }
@keyframes orb-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-12vmax, -8vmax, 0); } }
.band__inner { position: relative; text-align: center; }
.band h2 { color: #FBF2EE; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; margin-bottom: 32px; }
.band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------------------------------------------------------------- footer -- */
.foot { border-top: 1px solid var(--hair); padding: 40px 24px 56px; font-size: 14px; color: var(--mute); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; max-width: 1080px; margin-inline: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { color: var(--mute); text-decoration: none; font-weight: 500; }
.foot p { margin: 0; }

/* -------------------------------------------------------------- responsive -- */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .grab__stage { grid-template-columns: 1fr; align-content: center; gap: 28px; padding-top: 90px; }
}
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
  .unease .wrap { padding-left: 24px; }
}
@media (max-width: 720px) {
  .nav { top: 10px; }
  .nav-pill { height: 50px; }
  .brand span, .nav-download { display: none; }
  .hero { padding: 96px 20px 72px; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .demo { padding-inline: 16px; }
  .grab__stage { padding-inline: 16px; }
  .grab__slot { aspect-ratio: 1200 / 1250; }
  .peak__media :is(video, img) { object-position: 0 0; }
  .peak__copy { inset-inline: 16px; bottom: 48px; }
  .instead__line { gap: 16px; }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .foot { justify-content: center; text-align: center; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .rays { display: none; }
  .rise, .tl-in, .tl .hit { animation: none; }
  .band__light i { animation: none; opacity: 1; }
  .peak__media .done { opacity: 1; }
  .drum li { transform: none; }
  .btn-red, .btn-ghost, .btn-paper { transition: none; }
}