/*!
 * DemoThat website styles.
 *
 * Organised as two parts:
 *   1. the reset that came with the design
 *   2. the design itself, unchanged apart from the selector renames noted below
 *
 * Selector notes: the design used <h3>/<p> inside the step buttons and <h4>/<h5>
 * for decorative labels, which is invalid HTML (a button may not contain a
 * heading) and broke the heading outline. The tags changed; these selectors
 * followed, so the rendering is bit-for-bit the same.
 */
:root {
  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
body {
  margin: 0;
  padding: 0;
  font:
    14px -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  background: #fff;
  color: #000;
}
img {
  max-width: 100%;
}
[hidden]:not([hidden='until-found' i]) {
  display: none !important;
}

/* Layout: polar-style single column. Sticky blurred nav, tight two-tone headlines, product mockups that move, bordered cards with cursor spotlight. Committed dark look. */
:root {
  --bg: #05070a;
  --bg2: #090d12;
  --card: #0a0e14;
  --card2: #0e131a;
  --line: rgba(150, 185, 255, 0.1);
  --line2: rgba(150, 185, 255, 0.18);
  --fg: #eef2f8;
  --mut: #7d8798;
  --dim: #4b5463;
  --acc: #4da8ff;
  --acc2: #2979ff;
  --ok: #3ddc97;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --w: 1180px;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 8px;
}
.wrap {
  max-width: var(--w);
  margin: 0 auto;
}
svg {
  display: block;
}
.mono {
  font-family: var(--mono);
}

/* nav */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--bg);
}
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 0 max(16px, env(safe-area-inset-left, 0px));
  background: rgba(5, 7, 10, 0);
  backdrop-filter: blur(0);
  border-bottom: 1px solid transparent;
  transition: 0.3s;
}
.nav.stuck {
  background: rgba(5, 7, 10, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  border-color: var(--line);
}
.nav .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 17px;
}
.logo img {
  width: auto;
  height: 24px;
  display: block;
}
.nav ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0 0 0 18px;
  padding: 0;
  color: var(--mut);
  font-size: 14px;
}
.nav ul a {
  transition: color 0.2s;
}
.nav ul a:hover {
  color: var(--fg);
}
.sp {
  flex: 1;
}
.nav .gh {
  color: var(--mut);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.nav .gh:hover {
  color: var(--fg);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
  transition: 0.25s;
  white-space: nowrap;
}
.btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(150, 185, 255, 0.32);
}
.btn.pri {
  background: var(--fg);
  color: #05070a;
  border-color: var(--fg);
}
.btn.pri:hover {
  background: #fff;
  box-shadow:
    0 0 0 6px rgba(77, 168, 255, 0.16),
    0 8px 40px rgba(77, 168, 255, 0.35);
}
.btn.lg {
  height: 48px;
  padding: 0 26px;
  font-size: 15px;
}
.btn svg {
  width: 15px;
  height: 15px;
}

/* hero */
.hero {
  position: relative;
  padding: 72px 0 88px;
  text-align: center;
  overflow-x: clip;
  /* Full-bleed: cancel the body's side padding so the hero (and the editor
     preview that bleeds out of .wrap below) reaches the viewport edges. */
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
}
.aurora {
  position: absolute;
  left: 50%;
  top: -120px;
  width: 1400px;
  max-width: 200vw;
  height: 760px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}
.aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}
.aurora i:nth-child(1) {
  left: 10%;
  top: 6%;
  width: 560px;
  height: 360px;
  background: #1d5fe0;
  animation: dr1 14s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  right: 8%;
  top: 0;
  width: 520px;
  height: 340px;
  background: #0f8bd6;
  opacity: 0.38;
  animation: dr2 18s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  left: 38%;
  top: 30%;
  width: 420px;
  height: 260px;
  background: #5a3fd8;
  opacity: 0.3;
  animation: dr1 22s ease-in-out infinite alternate-reverse;
}
@keyframes dr1 {
  to {
    transform: translate(90px, 50px) scale(1.15);
  }
}
@keyframes dr2 {
  to {
    transform: translate(-110px, 40px) scale(0.9);
  }
}
.grid-bg {
  position: absolute;
  inset: 0 0 auto;
  height: 700px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0, #000, transparent);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 0, #000, transparent);
  opacity: 0.5;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  color: var(--mut);
  transition: 0.25s;
}
.pill:hover {
  color: var(--fg);
  border-color: rgba(150, 185, 255, 0.34);
}
.pill b {
  font-weight: 500;
  color: var(--fg);
  background: rgba(77, 168, 255, 0.16);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
}
h1 {
  font-weight: 500;
  font-size: clamp(46px, 8.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 26px 0 0;
  text-wrap: balance;
}
h1 .w {
  display: inline-block;
  animation: wIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes wIn {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(12px);
  }
}
.grad {
  background: linear-gradient(180deg, #fff 20%, #8fb8ff 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sub {
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--mut);
  margin: 22px auto 0;
  max-width: 640px;
  text-wrap: balance;
  animation: wIn 1s 0.45s both;
}
.cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
  animation: wIn 1s 0.6s both;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  justify-content: center;
  margin-top: 30px;
  animation: wIn 1s 0.75s both;
}
.chips a {
  /* Small tracked-uppercase micro links, echoing the depth labels. */
  font: 500 11px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mut);
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: 0.2s;
}
.chips a::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acc);
  margin-right: 8px;
  vertical-align: 1px;
  opacity: 0.7;
}
.chips a:hover {
  color: var(--fg);
  border-color: var(--line2);
  background: rgba(255, 255, 255, 0.04);
}

/* editor mock */
.editor {
  margin: 54px auto 0;
  width: 100%;
  max-width: 1080px;
  /* A centred preview card on the full-bleed background. */
  border: 1px solid var(--line2);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 40px 120px -20px rgba(41, 121, 255, 0.28),
    0 30px 60px -30px #000;
  background: var(--bg2);
  text-align: left;
  position: relative;
  animation: wIn 1.2s 0.9s both;
  overflow: hidden;
}
.ed-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 46px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--mut);
}
.dots {
  display: flex;
  gap: 7px;
}
.dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #1b222c;
}
.ed-top .t {
  flex: 1;
  text-align: center;
}
.ed-top .ex {
  font-size: 12px;
  color: #05070a;
  background: var(--fg);
  padding: 5px 12px;
  border-radius: 7px;
  font-weight: 500;
}
.stage {
  position: relative;
  margin: 14px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #111 var(--wp) center/cover;
}
.win {
  position: absolute;
  inset: 7% 8%;
  border-radius: 1.1cqw;
  overflow: hidden;
  container-type: inline-size;
  box-shadow:
    0 2.5cqw 5cqw rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  background: #0f1114;
}
.stage {
  container-type: inline-size;
}
.cam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  animation: cam 12s infinite;
  will-change: transform;
}
@keyframes cam {
  0%,
  16% {
    transform: translate(0, 0) scale(1);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  26%,
  44% {
    transform: translate(-7%, -10.8%) scale(1.9);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  56%,
  88% {
    transform: translate(-86.8%, -67.8%) scale(1.9);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  97%,
  100% {
    transform: translate(0, 0) scale(1);
  }
}
.scr {
  position: absolute;
  inset: 0;
  font-size: 1.45cqw;
  color: #c9d1dc;
  background: radial-gradient(120% 90% at 70% 0, #16202e, #0d1015 60%);
}
.scr .sb {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 17%;
  border-right: 1px solid #1d2430;
  padding: 3.5% 2%;
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
  background: #0b0e13;
}
.scr .sb b {
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  margin-bottom: 1cqw;
}
.scr .sb b i {
  width: 1.7cqw;
  height: 1.7cqw;
  border-radius: 0.5cqw;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
}
.scr .sb span {
  color: #7b8696;
  padding: 0.6cqw 0.9cqw;
  border-radius: 0.6cqw;
}
.scr .sb span.on {
  background: #171d27;
  color: #fff;
}
.scr .h4 {
  position: absolute;
  left: 21%;
  top: 10%;
  margin: 0;
  font-size: 2.4cqw;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
}
.scr p {
  position: absolute;
  left: 21%;
  top: 17.5%;
  margin: 0;
  color: #6f7a8a;
}
.scr .bt {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8cqw;
  font-weight: 500;
  color: #fff;
}
.scr .a {
  left: 23%;
  top: 28%;
  width: 14%;
  height: 8%;
  background: linear-gradient(180deg, #3b8cff, #2467e0);
  animation: pa 12s infinite;
}
.scr .stat {
  position: absolute;
  top: 45%;
  height: 15%;
  width: 15.5%;
  border: 1px solid #232b38;
  border-radius: 0.9cqw;
  padding: 1.1cqw;
  background: #10151c;
}
.scr .stat small {
  display: block;
  color: #6f7a8a;
  font-size: 1.05cqw;
}
.scr .stat strong {
  display: block;
  color: #fff;
  font-size: 2.1cqw;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 0.3cqw;
}
.scr .chart {
  position: absolute;
  left: 21%;
  top: 64%;
  width: 30%;
  height: 28%;
  border: 1px solid #232b38;
  border-radius: 0.9cqw;
  background: #10151c;
  overflow: hidden;
}
.scr .chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scr .dep {
  position: absolute;
  left: 55%;
  top: 46%;
  width: 40%;
  height: 46%;
  border: 1px solid #232b38;
  border-radius: 1cqw;
  background: #10151c;
  padding: 1.5cqw;
}
.scr .dep strong {
  color: #fff;
  font-weight: 500;
  font-size: 1.7cqw;
}
.scr .dep small {
  display: block;
  color: #6f7a8a;
  margin-top: 0.5cqw;
}
.scr .dl {
  position: absolute;
  left: 1.5cqw;
  right: 1.5cqw;
  top: 7.5cqw;
  height: 0.7cqw;
  border-radius: 9px;
  background: #1b222d;
  overflow: hidden;
}
.scr .dl i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--acc2), var(--acc));
  animation: dl 12s infinite;
  transform-origin: 0 50%;
}
@keyframes dl {
  0%,
  58% {
    transform: scaleX(0.08);
  }
  80%,
  100% {
    transform: scaleX(1);
  }
}
.scr .b {
  left: 64%;
  top: 57.5%;
  width: 16%;
  height: 9%;
  background: #1a212c;
  border: 1px solid #2b3545;
  animation: pb 12s infinite;
}
.scr .b .t1,
.scr .b .t2 {
  position: absolute;
  transition: none;
}
.scr .b .t2 {
  opacity: 0;
  color: var(--ok);
  animation: okb 12s infinite;
}
.scr .b .t1 {
  animation: okb1 12s infinite;
}
@keyframes okb {
  0%,
  58% {
    opacity: 0;
  }
  60%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes okb1 {
  0%,
  58% {
    opacity: 1;
  }
  60%,
  92% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pa {
  0%,
  13% {
    transform: scale(1);
  }
  14.5% {
    transform: scale(0.93);
    filter: brightness(1.3);
  }
  17%,
  100% {
    transform: scale(1);
  }
}
@keyframes pb {
  0%,
  57% {
    transform: scale(1);
  }
  58.5% {
    transform: scale(0.93);
  }
  61%,
  100% {
    transform: scale(1);
  }
}
.cur {
  position: absolute;
  width: 2.6cqw;
  height: 2.6cqw;
  margin: -0.15cqw 0 0 -0.15cqw;
  z-index: 3;
  left: 8%;
  top: 85%;
  animation: cur 12s infinite;
  filter: drop-shadow(0 0.3cqw 0.5cqw rgba(0, 0, 0, 0.6));
}
@keyframes cur {
  0% {
    left: 8%;
    top: 85%;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  12%,
  45% {
    left: 30%;
    top: 32%;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  54%,
  92% {
    left: 72%;
    top: 62%;
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  100% {
    left: 8%;
    top: 85%;
  }
}
.rip {
  position: absolute;
  width: 5cqw;
  height: 5cqw;
  border-radius: 50%;
  border: 0.2cqw solid var(--acc);
  margin: -2.5cqw 0 0 -2.5cqw;
  opacity: 0;
  z-index: 2;
}
.rip.ra {
  left: 30%;
  top: 32%;
  animation: ra 12s infinite;
}
.rip.rb {
  left: 72%;
  top: 62%;
  animation: rb 12s infinite;
}
@keyframes ra {
  0%,
  13% {
    opacity: 0;
    transform: scale(0.2);
  }
  14% {
    opacity: 1;
    transform: scale(0.2);
  }
  20%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes rb {
  0%,
  57% {
    opacity: 0;
    transform: scale(0.2);
  }
  58% {
    opacity: 1;
    transform: scale(0.2);
  }
  64%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.webcam {
  position: absolute;
  left: 3.2%;
  bottom: 5%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  overflow: hidden;
  background: linear-gradient(160deg, #c9d6ea, #7f93b5);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.webcam::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 24%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: #2b3750;
  transform: translateX(-50%);
}
.webcam::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 62%;
  width: 76%;
  height: 70%;
  border-radius: 50%;
  background: #2b3750;
  transform: translateX(-50%);
}
.zchip {
  position: absolute;
  right: 3.2%;
  top: 5%;
  font: 500 11px var(--mono);
  background: rgba(5, 7, 10, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line2);
  padding: 5px 10px;
  border-radius: 999px;
  color: #cfe3ff;
  display: flex;
  gap: 7px;
  align-items: center;
}
.zchip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 10px var(--acc);
  animation: blink 1.4s infinite;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
.tl {
  border-top: 1px solid var(--line);
  padding: 12px 16px 16px;
  background: var(--bg);
}
.tl-top {
  display: flex;
  justify-content: space-between;
  font: 12px var(--mono);
  color: var(--mut);
  margin-bottom: 10px;
}
.rule {
  position: relative;
  height: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  background: repeating-linear-gradient(90deg, var(--line2) 0 1px, transparent 1px 8.333%)
    bottom/100% 6px no-repeat;
}
.trk {
  position: relative;
  height: 42px;
  border-radius: 8px;
  background: #0e141c;
  border: 1px solid var(--line);
  margin-bottom: 6px;
  overflow: hidden;
}
.clip {
  position: absolute;
  inset: 4px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1c2736, #222f43 50%, #1c2736);
}
.zr {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 5px;
  background: rgba(77, 168, 255, 0.22);
  border: 1px solid rgba(77, 168, 255, 0.7);
  font: 500 10.5px/1 var(--mono);
  color: #cfe3ff;
  padding: 5px 8px;
  white-space: nowrap;
  overflow: hidden;
}
.zr.r1 {
  left: 16%;
  width: 28%;
}
.zr.r2 {
  left: 46%;
  width: 44%;
}
.trk.small {
  height: 26px;
}
.trk .ev {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.ph {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: 4;
  pointer-events: none;
}
.ph i {
  position: absolute;
  left: 0;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--acc);
  box-shadow: 0 0 12px var(--acc);
  animation: ph 12s linear infinite;
}
@keyframes ph {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
.tl-body {
  position: relative;
}

/* sections */
section {
  position: relative;
  padding: 140px 0 0;
}
.eyebrow {
  font: 500 12.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc);
  margin: 0 0 18px;
}
h2 {
  font-weight: 500;
  font-size: clamp(36px, 5.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}
h2 .dim {
  color: var(--dim);
}
.lead {
  color: var(--mut);
  font-size: clamp(17px, 1.7vw, 20px);
  max-width: 560px;
  margin: 22px 0 0;
  text-wrap: pretty;
}
.center {
  text-align: center;
}
.center .lead {
  margin-inline: auto;
}
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.3s;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(77, 168, 255, 0.1),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.card:hover {
  border-color: var(--line2);
}
.card:hover::before {
  opacity: 1;
}
.cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 64px;
}
.pc {
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pc .viz {
  height: 200px;
  margin: -8px -8px 24px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.pc h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}
.pc p {
  margin: 0;
  color: var(--mut);
  font-size: 15px;
}
/* viz 1: capture */
.v1 .scn {
  position: absolute;
  inset: 18px;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, #0d131b 0 10px, #0a0f15 10px 20px);
  border: 1px solid var(--line);
}
.v1 .sel {
  position: absolute;
  border: 1.5px dashed var(--acc);
  background: rgba(77, 168, 255, 0.08);
  animation: sel 6s ease-in-out infinite;
  border-radius: 3px;
}
@keyframes sel {
  0%,
  8% {
    left: 12%;
    top: 20%;
    width: 0;
    height: 0;
  }
  45%,
  70% {
    left: 12%;
    top: 20%;
    width: 62%;
    height: 56%;
  }
  90%,
  100% {
    left: 12%;
    top: 20%;
    width: 62%;
    height: 56%;
    opacity: 0;
  }
}
.v1 .sel::after {
  content: '1920 × 1080';
  position: absolute;
  left: 0;
  top: -22px;
  font: 11px var(--mono);
  color: #cfe3ff;
  white-space: nowrap;
}
.v1 .rec {
  position: absolute;
  right: 16px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 11px var(--mono);
  color: var(--mut);
}
.v1 .rec i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5d5d;
  animation: blink 1.2s infinite;
}
.v1 .modes {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: #0f1520;
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 9px;
  font-size: 11px;
  color: var(--mut);
}
.v1 .modes span {
  padding: 3px 8px;
  border-radius: 6px;
}
.v1 .modes .on {
  background: #1b2535;
  color: #fff;
}
/* viz 2: zoom */
.v2 .box {
  position: absolute;
  inset: 22px 30px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: #0c1118;
  overflow: hidden;
}
.v2 .in {
  position: absolute;
  inset: 0;
  transform-origin: 70% 60%;
  animation: v2 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes v2 {
  0%,
  15% {
    transform: scale(1);
  }
  40%,
  75% {
    transform: scale(2.3);
  }
  100% {
    transform: scale(1);
  }
}
.v2 .ln {
  position: absolute;
  height: 7px;
  border-radius: 4px;
  background: #1a2331;
}
.v2 .tg {
  position: absolute;
  left: 62%;
  top: 52%;
  width: 34%;
  height: 22%;
  border-radius: 6px;
  background: linear-gradient(180deg, #3b8cff, #2467e0);
}
.v2 svg {
  position: absolute;
  left: 70%;
  top: 60%;
  width: 22px;
  margin: -2px;
  animation: v2c 5s ease infinite;
}
@keyframes v2c {
  0% {
    transform: translate(-90px, 50px);
  }
  25%,
  100% {
    transform: translate(0, 0);
  }
}
/* viz 3: export */
.v3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 22px;
}
.fm {
  display: flex;
  gap: 6px;
}
.fm span {
  font: 12px var(--mono);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--mut);
}
.fm .on {
  color: #fff;
  border-color: var(--acc);
  background: rgba(77, 168, 255, 0.12);
}
.bar {
  height: 8px;
  border-radius: 5px;
  background: #131a24;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acc2), var(--acc));
  animation: bar 5s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@keyframes bar {
  0% {
    transform: scaleX(0);
  }
  80%,
  92% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}
.v3 .row {
  display: flex;
  justify-content: space-between;
  font: 12px var(--mono);
  color: var(--mut);
}
.res {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.res span {
  font: 11.5px var(--mono);
  color: var(--mut);
}
.res span + span::before {
  content: '·';
  margin-right: 6px;
  color: var(--dim);
}

/* steps */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  margin-top: 64px;
  align-items: stretch;
}
.stp {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.stp button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.stp button:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.stp .n {
  font: 12px var(--mono);
  color: var(--dim);
  display: block;
  margin-bottom: 8px;
}
.stp .h {
  display: block;
  margin: 0;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.025em;
  color: var(--mut);
  transition: color 0.3s;
}
.stp .p {
  display: block;
  margin: 0;
  color: var(--mut);
  font-size: 15px;
  line-height: 1.55;
  /* The description reserves one fixed slot that travels with the active step.
     As one paragraph collapses the next expands over the same height, so the
     column (and everything below the section) never moves. */
  height: 0;
  padding-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    padding-top 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.3s 0.05s,
    transform 0.3s 0.05s;
}
.stp button.on .h {
  color: var(--fg);
}
.stp button.on .p {
  height: 100px;
  padding-top: 10px;
  opacity: 1;
  transform: none;
}
.stp .pr {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--acc);
}
.stp button.on .pr {
  animation: pr 6.5s linear forwards;
}
@keyframes pr {
  to {
    width: 100%;
  }
}
.svw {
  position: relative;
  min-height: 420px;
  border-radius: 20px;
}
.sv {
  position: absolute;
  inset: 0;
  padding: 26px;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  pointer-events: none;
  transition: 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.sv.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sv .hd {
  font: 12px var(--mono);
  color: var(--mut);
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.log {
  font: 13px/2 var(--mono);
  color: var(--mut);
  display: flex;
  flex-direction: column;
}
.log div {
  display: flex;
  gap: 16px;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
}
.sv.on .log div {
  animation: li 0.5s forwards;
  animation-delay: calc(var(--k) * 260ms + 200ms);
}
@keyframes li {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.log .t {
  color: var(--dim);
  width: 60px;
  flex: none;
}
.log .c {
  color: var(--acc);
  width: 52px;
  flex: none;
}
.log .k {
  color: var(--fg);
}
.log .m .c {
  color: var(--dim);
}
.sv .note {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--mut);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.sv .note b {
  color: var(--ok);
  font-weight: 500;
}
.mini .trk {
  height: 56px;
}
.mini .zr {
  opacity: 0;
  transform: scaleX(0.2);
  transform-origin: 0 50%;
}
.sv.on .mini .zr {
  animation: zr 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.sv.on .mini .zr.r1 {
  animation-delay: 0.3s;
}
.sv.on .mini .zr.r2 {
  animation-delay: 0.9s;
}
.sv.on .mini .zr.r3 {
  animation-delay: 1.5s;
}
@keyframes zr {
  to {
    opacity: 1;
    transform: none;
  }
}
.zr.r3 {
  left: 92%;
  width: 7%;
  padding: 5px 3px;
}
.sty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1;
}
.sty .pv {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #1d4fd8, #7c3aed);
  position: relative;
  min-height: 220px;
  animation: bgc 9s linear infinite;
}
@keyframes bgc {
  to {
    filter: hue-rotate(360deg);
  }
}
.sty .pv i {
  position: absolute;
  inset: 14%;
  border-radius: 10px;
  background: #0d1117;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.ctl {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13px;
  color: var(--mut);
  justify-content: center;
}
.ctl label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
}
.ctl em {
  font: 12px var(--mono);
  font-style: normal;
  color: var(--fg);
}
.sl {
  height: 4px;
  border-radius: 3px;
  background: #161d28;
  position: relative;
}
.sl i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--acc);
}
.sl i::after {
  content: '';
  position: absolute;
  right: -6px;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}
.sl.s1 i {
  animation: sl1 4s ease-in-out infinite alternate;
}
.sl.s2 i {
  animation: sl2 5s ease-in-out infinite alternate;
}
.sl.s3 i {
  animation: sl1 6s ease-in-out infinite alternate-reverse;
}
@keyframes sl1 {
  from {
    width: 20%;
  }
  to {
    width: 75%;
  }
}
@keyframes sl2 {
  from {
    width: 60%;
  }
  to {
    width: 30%;
  }
}

/* ratio */
.two {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.rat {
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  min-height: 440px;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(41, 121, 255, 0.12), transparent), var(--card);
}
.seg {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.seg button {
  all: unset;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--mut);
  transition: 0.25s;
  position: relative;
  z-index: 1;
}
.seg button:focus-visible {
  outline: 2px solid var(--acc);
}
.seg button.on {
  color: #05070a;
  background: var(--fg);
}
.fr-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 310px;
}
.fr {
  height: min(300px, 40vw);
  aspect-ratio: 16/9;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #111 var(--wp) center/cover;
  transition: aspect-ratio 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
.fr .iw {
  position: absolute;
  inset: 10%;
  border-radius: 8px;
  background: #0d1117;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  padding: 10%;
  display: flex;
  flex-direction: column;
  gap: 7%;
}
.fr .iw s {
  display: block;
  height: 7%;
  border-radius: 4px;
  background: #1b2330;
  min-height: 5px;
}
.fr .iw s:nth-child(1) {
  width: 50%;
  background: #2a3a55;
}
.fr .iw s:nth-child(2) {
  width: 80%;
}
.fr .iw s:nth-child(3) {
  width: 64%;
}
.fr .iw u {
  margin-top: auto;
  display: block;
  height: 22%;
  width: 44%;
  border-radius: 6px;
  background: linear-gradient(180deg, #3b8cff, #2467e0);
}
.fr-cap {
  font: 12.5px var(--mono);
  color: var(--mut);
  text-align: center;
}
.fr-cap b {
  color: var(--fg);
  font-weight: 500;
}

/* 3D camera: an editor-style mock whose recording plane orbits in perspective */
.pv3d {
  position: relative;
  overflow: hidden;
  padding: 24px;
}
.pv3d-mock {
  border: 1px solid var(--line2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg2);
}
.pv3d-scene {
  position: relative;
  height: 300px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(77, 168, 255, 0.08), transparent 60%), var(--bg);
  overflow: hidden;
  perspective: 900px;
  border-bottom: 1px solid var(--line);
}
.pl3d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: #111 var(--wp) center/cover;
  box-shadow:
    0 30px 60px -18px rgba(41, 121, 255, 0.4),
    0 18px 34px -20px #000;
  transform: translate(-50%, -50%) rotateX(calc(9deg + var(--rx, 0deg)))
    rotateY(calc(-16deg + var(--ry, 0deg)));
  transition: transform 0.35s ease-out;
  /* The looping orbit showcases the camera move; the pointer vars above stay
     live inside the keyframes, so the tilt still works while it flies. */
  animation: p3dloop 9s ease-in-out infinite;
}
@keyframes p3dloop {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1) rotateX(calc(9deg + var(--rx, 0deg)))
      rotateY(calc(-16deg + var(--ry, 0deg)));
  }
  /* Dolly in (scale 1.18, the app's own dolly-in preset) while it orbits. */
  45% {
    transform: translate(-50%, -50%) scale(1.18) rotateX(calc(12.5deg + var(--rx, 0deg)))
      rotateY(calc(2deg + var(--ry, 0deg)));
  }
}
/* While the pointer drives the tilt, follow it with no transition lag. */
.pv3d.tilting .pl3d {
  transition: none;
}
.p3d-tag {
  position: absolute;
  font: 500 10.5px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(207, 227, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(5, 7, 10, 0.5);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.p3d-tag em {
  font-style: normal;
  color: var(--acc);
  margin-right: 6px;
}
.p3d-tag.t1 {
  top: 14%;
  left: 8%;
}
.p3d-tag.t2 {
  top: 26%;
  right: 8%;
}
.p3d-tag.t3 {
  bottom: 10%;
  left: 14%;
}
.pv3d-note {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--mut);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.pv3d-note b {
  color: var(--ok);
  font-weight: 500;
}

/* playground */
.pg {
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
}
.pg .out {
  border-radius: 12px;
  background: #111 var(--wp) center/cover;
  aspect-ratio: 16/10;
  position: relative;
  transition: background 0.3s;
  min-width: 0;
}
.pg .out .pw {
  position: absolute;
  inset: var(--pad);
  border-radius: var(--rad);
  background: #0d1117;
  box-shadow: 0 var(--sh) calc(var(--sh) * 2) rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition:
    inset 0.15s,
    border-radius 0.15s;
}
.pw .tb {
  height: 11%;
  border-bottom: 1px solid #1b222d;
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0 4%;
}
.pw .tb i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #222b38;
}
.pw .bd {
  padding: 5% 6%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pw .bd s {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #1b2330;
}
.pw .bd s:nth-child(1) {
  width: 40%;
  background: #2c3c58;
}
.pw .bd s:nth-child(2) {
  width: 78%;
}
.pw .bd s:nth-child(3) {
  width: 66%;
}
.pw .bd s:nth-child(4) {
  width: 52%;
  background: #18304f;
}
.pw .bd s:nth-child(5) {
  width: 70%;
}
.pg .ctrls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 13px;
  color: var(--mut);
  justify-content: center;
}
.pg .ctrls h3 {
  margin: 0;
  font: 500 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.pg label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pg label em {
  font: 12px var(--mono);
  font-style: normal;
  color: var(--fg);
}
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: #1a2230;
  outline-offset: 6px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
}
.sw {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.sw button {
  all: unset;
  cursor: pointer;
  aspect-ratio: 1;
  border-radius: 9px;
  background: var(--b) center/cover;
  border: 1px solid var(--line2);
  transition: 0.2s;
}
.sw button:hover {
  transform: translateY(-2px);
}
.sw button.on {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.sw button:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* cloud */
.cloud {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.cap {
  display: flex;
  align-items: center;
  border: 1px solid var(--line2);
  border-radius: 10px;
  overflow: hidden;
  align-self: flex-start;
  font-size: 13px;
  background: var(--bg);
}
.cap span {
  padding: 8px 13px;
}
.cap .a {
  color: var(--mut);
  border-right: 1px solid var(--line);
}
.cap .n {
  font-family: var(--mono);
  color: var(--fg);
  border-right: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.cap .by {
  background: var(--fg);
  color: #05070a;
  font-weight: 500;
}
.lad {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.lad div {
  display: grid;
  grid-template-columns: 54px 1fr 88px;
  gap: 14px;
  align-items: center;
  font: 12.5px var(--mono);
  color: var(--mut);
}
.lad .tr {
  height: 10px;
  border-radius: 6px;
  background: #111823;
  overflow: hidden;
}
.lad .tr i {
  display: block;
  height: 100%;
  width: var(--p);
  border-radius: 6px;
  background: linear-gradient(90deg, #1b3b78, var(--acc));
  transform-origin: 0 50%;
}
.lad div.pre .tr i {
  transform: scaleX(0);
}
.lad div.in .tr i {
  transform: none;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--k) * 120ms);
}
.lad .tr i {
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lad b {
  color: var(--fg);
  font-weight: 500;
}
.lad span:last-child {
  text-align: right;
  color: var(--dim);
}
.job {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.job .r {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--mut);
  gap: 12px;
  flex-wrap: wrap;
}
.job .r b {
  color: var(--fg);
  font-weight: 500;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.job .trk2 {
  height: 6px;
  border-radius: 4px;
  background: #111823;
  overflow: hidden;
}
.job .trk2 i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--acc2), var(--acc));
}
.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.tags span {
  font-size: 13px;
  color: var(--mut);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}

/* open source */
.term {
  background: #06090d;
  border-radius: 14px;
  border: 1px solid var(--line2);
  font: 13px/1.9 var(--mono);
  color: var(--mut);
  padding: 0 0 18px;
  overflow: hidden;
}
.term .tb {
  display: flex;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  align-items: center;
}
.term .tb i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a212b;
}
.term .tb span {
  margin-left: auto;
  font-size: 12px;
}
.term pre {
  margin: 0;
  padding: 0 18px;
  overflow-x: auto;
  font: inherit;
}
.term .p {
  color: var(--acc);
}
.term .c {
  color: var(--dim);
}
.term .o {
  color: var(--ok);
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 36px;
}
.facts div {
  background: var(--card);
  padding: 20px;
}
.facts b {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.facts span {
  font-size: 13px;
  color: var(--mut);
}

/* pricing */
.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 64px;
}
.plan {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.plan.hl {
  background: linear-gradient(180deg, rgba(41, 121, 255, 0.1), var(--card) 55%);
  border-color: rgba(77, 168, 255, 0.4);
}
.plan h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--mut);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plan h3 em {
  font: 500 11px var(--mono);
  font-style: normal;
  color: #cfe3ff;
  background: rgba(77, 168, 255, 0.18);
  padding: 3px 9px;
  border-radius: 999px;
}
.price {
  font-size: 46px;
  letter-spacing: -0.04em;
  font-weight: 500;
  line-height: 1;
}
.price small {
  font-size: 14px;
  color: var(--mut);
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 4px;
}
.plan .sm {
  font-size: 14px;
  color: var(--mut);
  min-height: 42px;
  margin: -6px 0 0;
}
.plan ul {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14px;
  color: #c4ccd8;
  flex: 1;
}
.plan li {
  display: flex;
  gap: 10px;
}
.plan li::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(61, 220, 151, 0.16)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.4 2.4 4.6-5' fill='none' stroke='%233ddc97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/100%;
}
.plan .btn {
  justify-content: center;
}
.fine {
  margin-top: 24px;
  font-size: 14px;
  color: var(--mut);
}

/* download */
.dl {
  margin-top: 64px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.dl .l {
  padding: 36px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dl .r {
  padding: 36px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.os {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.os button {
  all: unset;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--mut);
  transition: 0.2s;
}
.os button:focus-visible {
  outline: 2px solid var(--acc);
}
.os button.on {
  background: var(--fg);
  color: #05070a;
  border-color: var(--fg);
}
.osp {
  display: none;
  flex-direction: column;
  gap: 14px;
  font-size: 14.5px;
  color: var(--mut);
}
.osp.on {
  display: flex;
}
.osp .file {
  font: 13px var(--mono);
  color: var(--fg);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  overflow-wrap: anywhere;
}
.osp .warn {
  font-size: 13.5px;
  border-left: 2px solid var(--line2);
  padding-left: 14px;
}
.copy {
  all: unset;
  cursor: pointer;
  float: right;
  font: 12px var(--mono);
  color: var(--mut);
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.copy:hover {
  color: var(--fg);
}
.copy:focus-visible {
  outline: 2px solid var(--acc);
}

/* final */
.final {
  position: relative;
  text-align: center;
  padding: 160px 0 150px;
  overflow: clip;
}
.final .aurora {
  top: auto;
  bottom: -300px;
  height: 600px;
  -webkit-mask-image: linear-gradient(transparent, #000 60%);
  mask-image: linear-gradient(transparent, #000 60%);
}
footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 48px;
  color: var(--mut);
  font-size: 14px;
}
footer .wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
footer h3 {
  margin: 0 0 14px;
  font-weight: 500;
  color: var(--fg);
  font-size: 14px;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer a:hover {
  color: var(--fg);
}
footer .cr {
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.7;
}
footer .cr a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Watermelon block redesign (hero-17, feature-5, bento-02, stats-4, team-5,
   testimonials-4, faq-6, pricing-3, cta-2, footer-7) — translated to the
   site's token system and dark theme.
   ========================================================================== */

/* --- hero: cursor-reacting particle depth field ------------------------- */
.hero .wrap {
  position: relative;
  z-index: 2;
}
.fx {
  /* Full-page ambient particle field, fixed to the viewport behind everything. */
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}
/* Keep all page content above the field. */
main,
footer {
  position: relative;
  z-index: 1;
}
.fx-glow {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(
    640px circle at var(--mx, 50%) var(--my, 38%),
    rgba(77, 168, 255, 0.11),
    transparent 65%
  );
}
.fx-tag {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  font: 500 10.5px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(207, 227, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(5, 7, 10, 0.4);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s;
  will-change: transform;
}
.fx-tag em {
  font-style: normal;
  color: var(--acc);
  margin-right: 6px;
}
.fx-ready .fx-tag {
  opacity: 1;
}
/* The hero's depth labels reused elsewhere: visible by default, and
   parallaxed by app.js from the same [data-d] depth contract. */
.fx-tag.ptag {
  opacity: 1;
  transition: none;
}
.fx-tag.t1 {
  left: 4%;
  top: 26%;
}
.fx-tag.t2 {
  right: 4%;
  top: 38%;
}
.fx-tag.t3 {
  left: 8%;
  bottom: 16%;
}
.dl-note {
  margin: 14px auto 0;
  font: 12px var(--mono);
  color: var(--dim);
  text-align: center;
  max-width: 640px;
}

/* --- feature-5: three steps --------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.f5-items {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 40px 0 34px;
}
.f5-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.fi {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(77, 168, 255, 0.12);
  border: 1px solid rgba(77, 168, 255, 0.22);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fi svg {
  width: 18px;
  height: 18px;
}
.f5-row b {
  display: block;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.f5-row p {
  margin: 0;
  color: var(--mut);
  font-size: 14.5px;
  line-height: 1.55;
}
.f5-vis {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.f5-tag {
  font: 500 10px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}
.f5-log {
  background: #06090d;
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 24px;
  font: 13px/2.1 var(--mono);
  color: var(--mut);
  max-width: 480px;
  box-shadow: 0 40px 90px -40px rgba(41, 121, 255, 0.35);
}
.f5-log div {
  display: flex;
  gap: 16px;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
}
.f5-vis.in .f5-log div {
  animation: li 0.5s forwards;
  animation-delay: calc(var(--k) * 260ms + 300ms);
}
.f5-log .t {
  color: var(--dim);
  width: 58px;
  flex: none;
}
.f5-log .c {
  color: var(--dim);
  width: 46px;
  flex: none;
}
.f5-log .c.click {
  color: var(--acc);
}
.f5-log .k {
  color: var(--fg);
}
.f5-float {
  position: absolute;
  right: 0;
  bottom: 4%;
  width: 300px;
  background: rgba(10, 14, 20, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.f5-hd {
  font: 500 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  margin-bottom: 10px;
}
.f5-mini {
  position: relative;
  height: 44px;
  border-radius: 8px;
  background: #0e141c;
  border: 1px solid var(--line);
  overflow: hidden;
}
.f5-mini .clip {
  inset: 4px;
}
.f5-mini .zr.r1 {
  left: 8%;
  width: 34%;
}
.f5-mini .zr.r2 {
  left: 48%;
  width: 44%;
}
.f5-note {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--mut);
  margin-top: 10px;
}
.f5-note em {
  font-style: normal;
  color: var(--ok);
}

/* --- bento-02: feature grid --------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 56px;
}
.bc {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 300px;
  overflow: hidden;
  transition: border-color 0.3s;
}
.bc:hover {
  border-color: var(--line2);
}
.bc.big {
  grid-column: span 2;
}
.bc-vis {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  min-height: 120px;
}
/* The four small cards centre their visual so the extra height is even on
   both sides instead of a dead band forced against the card's bottom edge. */
.bc:not(.big) .bc-vis {
  justify-content: center;
}
/* Plain split-layout columns become positioning contexts, so chips placed
   inside a ".two" copy column anchor to that column, not to <main>. */
.two > div {
  position: relative;
}
.bc-lab {
  font: 500 10px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.bc-lab em {
  font-style: normal;
  color: var(--acc);
}
.bc-txt h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.bc-txt p {
  margin: 0;
  font-size: 14px;
  color: var(--mut);
  line-height: 1.55;
}
.bbc {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 110px;
}
.bbc i {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--acc), rgba(77, 168, 255, 0.12));
  opacity: 0.85;
  animation: dip 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.11s);
}
.bbc i:nth-child(4),
.bbc i:nth-child(10) {
  /* the two clicks in the demo recording */
  background: linear-gradient(180deg, #9fd2ff, #2979ff);
  box-shadow: 0 0 14px rgba(77, 168, 255, 0.4);
}
@keyframes dip {
  0%,
  100% {
    transform: scaleY(1);
  }
  30% {
    transform: scaleY(0.55);
  }
  55% {
    transform: scaleY(1);
  }
}
.ladder {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ladder span {
  font: 11px var(--mono);
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
}
.ladder .on {
  color: #05070a;
  background: var(--fg);
  border-color: var(--fg);
}
.cap-lines {
  margin: 0;
  font-size: 14px;
  color: #c9d1dc;
  line-height: 1.9;
}
.cap-lines s {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 93, 93, 0.75);
  color: var(--dim);
}
.ratios {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.ratios span {
  border: 1px solid rgba(77, 168, 255, 0.4);
  background: rgba(77, 168, 255, 0.08);
  border-radius: 6px;
  font: 10px var(--mono);
  color: #cfe3ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratios .r169 {
  width: 84px;
  height: 48px;
}
.ratios .r916 {
  width: 36px;
  height: 64px;
}
.ratios .r11 {
  width: 44px;
  height: 44px;
}
.plink {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 12.5px var(--mono);
  color: var(--mut);
  border: 1px solid var(--line2);
  background: var(--bg);
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.plink svg {
  width: 13px;
  height: 13px;
  color: var(--acc);
  flex: none;
}
.plink .ar {
  margin-left: auto;
  color: var(--dim);
}

/* --- stats-4: real numbers ---------------------------------------------- */
.statgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.statc {
  position: relative;
  border-radius: 18px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.3s;
}
.statc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hatch);
  opacity: 0.5;
}
.statc::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 0%),
    var(--glow),
    transparent 40%
  );
  pointer-events: none;
}
.statc:hover {
  border-color: var(--line2);
}
.statc:hover::after {
  opacity: 1;
}
.st-n {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1;
}
.st-n small {
  font-size: 13px;
  color: var(--mut);
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0;
}
.statc h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.statc p {
  margin: 0;
  font-size: 13.5px;
  color: var(--mut);
  position: relative;
  z-index: 1;
  line-height: 1.55;
}

/* --- team-5: the founder ------------------------------------------------ */
.team {
  display: flex;
  justify-content: center;
  gap: 12px;
  height: 440px;
  margin-top: 56px;
}
.tm {
  position: relative;
  flex: 0 0 400px;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  min-width: 0;
  cursor: default;
  transition:
    flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.3s;
}
.tm:hover,
.tm:focus-within {
  flex-grow: 3;
  border-color: var(--line2);
}
.tm img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition:
    filter 0.6s,
    transform 0.6s;
}
.tm:hover img,
.tm:focus-within img {
  filter: grayscale(0);
  transform: scale(1.04);
}
.tm-g {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(3, 5, 8, 0.94) 0%,
    rgba(3, 5, 8, 0.25) 46%,
    transparent 70%
  );
}
.tm-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px;
}
.tm-role {
  font: 500 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cfe3ff;
  background: rgba(77, 168, 255, 0.14);
  border: 1px solid rgba(77, 168, 255, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: 10px;
}
.tm-cap h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-soc {
  display: flex;
  gap: 8px;
}
.tm-soc a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: 0.2s;
}
.tm-soc a:hover {
  background: #fff;
  color: #05070a;
}
.tm-soc svg {
  width: 14px;
  height: 14px;
}

/* --- testimonials-4: placeholder quotes ---------------------------------- */
.tests {
  position: relative;
  height: 400px;
  overflow-y: auto;
  margin-top: 56px;
  scrollbar-width: none;
}
.tests::-webkit-scrollbar {
  display: none;
}
.tests-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;
  margin-inline: auto;
}
.tests.live {
  overflow: hidden;
}
.tests.live .tests-track {
  will-change: transform;
}
.tq {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 26px;
  position: relative;
}
.tq::before {
  content: '”';
  position: absolute;
  top: 6px;
  right: 20px;
  font-size: 44px;
  line-height: 1;
  color: rgba(77, 168, 255, 0.35);
  font-family: Georgia, serif;
}
.tq blockquote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #c9d1dc;
  padding-right: 30px;
}
.tq figcaption {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.tq figcaption b {
  font-weight: 500;
  color: var(--fg);
}
.tq figcaption span {
  color: var(--mut);
}

/* --- faq-6: details as the accordion -------------------------------------- */
.faq-wrap {
  border-top: 1px dashed var(--line2);
  border-bottom: 1px dashed var(--line2);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.faq-side {
  padding: 40px 44px 40px 0;
  border-right: 1px dashed var(--line2);
}
.faq-side .lead {
  max-width: 320px;
}
.faq-list details {
  border-bottom: 1px dashed var(--line2);
}
.faq-list details:last-child {
  border-bottom: 0;
}
.faq-list summary {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 26px 28px;
  cursor: pointer;
  list-style: none;
  color: var(--fg);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary:hover .qt {
  color: var(--acc);
}
.faq-list summary .q {
  font: 500 11px var(--mono);
  letter-spacing: 0.1em;
  color: var(--dim);
  flex: none;
  width: 30px;
}
.faq-list summary .qt {
  transition: color 0.2s;
}
.faq-list summary::after {
  content: '+';
  margin-left: auto;
  font: 400 20px/1 var(--mono);
  color: var(--mut);
  transition: transform 0.25s;
  flex: none;
}
.faq-list details[open] summary::after {
  transform: rotate(45deg);
  color: var(--acc);
}
.faq-list details p {
  margin: 0;
  padding: 0 28px 26px 78px;
  color: var(--mut);
  font-size: 15px;
  line-height: 1.7;
  max-width: 660px;
}

/* --- pricing-3: cards keep the catalog.js DOM contract -------------------- */
.plans {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.plans .plan {
  padding: 34px;
  border-radius: 24px;
  overflow: visible;
}
.plans .plan h3 {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mut);
  border: 1px solid var(--line2);
  padding: 6px 14px;
  border-radius: 999px;
  width: fit-content;
  background: rgba(255, 255, 255, 0.03);
}
.plans .plan.hl h3 em {
  position: absolute;
  top: -16px;
  right: 30px;
  font: 500 11px var(--mono);
  font-style: normal;
  color: #05070a;
  background: linear-gradient(180deg, #7cc4ff, #2979ff);
  border: 0;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(41, 121, 255, 0.4);
}
.plans .plan.hl {
  box-shadow:
    0 0 0 1px rgba(77, 168, 255, 0.25),
    0 34px 90px -34px rgba(41, 121, 255, 0.4);
}
.plans .price {
  font-size: 54px;
  margin-top: 16px;
}
.plans .plan ul {
  padding-top: 20px;
  gap: 13px;
  font-size: 14.5px;
}
.plans .plan .btn {
  justify-content: center;
  height: 46px;
}
.p-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 64px;
  align-items: start;
  margin-bottom: 56px;
}

/* --- download: OS-aware buttons ------------------------------------------- */
.osp .js-dl {
  align-self: flex-start;
  margin-top: 4px;
}

/* --- cta-2: closing call to action ----------------------------------------- */
.final .ct {
  max-width: 760px;
}
.ct-badge,
.f7-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 500 11px var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mut);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 26px;
}
.ct-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: blink 1.6s infinite;
}
.f7-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  animation: blink 1.6s infinite;
}
.final h2 .hl {
  font-style: italic;
  font-weight: 400;
  color: var(--acc);
}

/* --- footer-7 ------------------------------------------------------------- */
footer.f7 {
  padding-top: 0;
}
footer.f7 .wrap {
  display: block;
}
.f7-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--line);
}
.f7-top h2 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400;
}
.f7-top .js-dl {
  flex: none;
}
.f7-mid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 44px 0 8px;
}
.f7-mark {
  font-size: clamp(58px, 13.5vw, 168px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.15;
  text-align: center;
  color: rgba(238, 242, 248, 0.04);
  -webkit-text-stroke: 1px rgba(150, 185, 255, 0.13);
  user-select: none;
  padding-top: 20px;
}

/* reveal */
.pre {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
}
.pre.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms),
    filter 0.9s var(--d, 0ms);
}

@media (max-width: 960px) {
  .nav ul,
  .nav .gh {
    display: none;
  }
  .cards3,
  .plans {
    grid-template-columns: 1fr 1fr;
  }
  .steps,
  .two,
  .dl {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .dl {
    gap: 0;
  }
  .dl .l {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .svw {
    min-height: 440px;
  }
  .pg {
    grid-template-columns: 1fr;
  }
  footer .wrap {
    grid-template-columns: 1fr 1fr;
  }
  section {
    padding-top: 100px;
  }
}
@media (max-width: 620px) {
  .cards3,
  .plans {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-top: 48px;
  }
  .sty {
    grid-template-columns: 1fr;
  }
  .svw {
    min-height: 560px;
  }
  .lad div {
    grid-template-columns: 44px 1fr 72px;
    gap: 10px;
  }
  .ed-top .t {
    display: none;
  }
  .zr {
    font-size: 9px;
    padding: 5px 5px;
  }
  .dl .l,
  .dl .r {
    padding: 24px;
  }
  .stage {
    margin: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .pre {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .cam {
    transform: translate(-7%, -10.8%) scale(1.9);
  }
  .cur {
    left: 30%;
    top: 32%;
  }
}

/* --- Watermelon blocks: responsive --------------------------------------- */
@media (max-width: 960px) {
  .split,
  .p-head,
  .faq-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .faq-side {
    border-right: 0;
    padding-right: 0;
  }
  .faq-side .lead {
    max-width: 480px;
  }
  .bento {
    grid-template-columns: 1fr 1fr;
  }
  .team {
    flex-direction: column;
    height: auto;
  }
  .tm {
    flex-grow: 0;
    flex-basis: auto;
    height: 320px;
  }
  .tm:hover,
  .tm:focus-within {
    flex-grow: 0;
  }
  .f7-mid {
    grid-template-columns: 1fr 1fr;
  }
  .f7-top {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 620px) {
  .bento,
  .statgrid {
    grid-template-columns: 1fr;
  }
  .ptag {
    display: none;
  }
  .bc {
    min-height: 0;
  }
  .bc.big {
    grid-column: auto;
  }
  .f5-vis {
    min-height: 0;
  }
  .f5-float {
    display: none;
  }
  .fx-tag.t2,
  .fx-tag.t3 {
    display: none;
  }
  .faq-list summary {
    padding: 20px 4px;
    gap: 12px;
    font-size: 15.5px;
  }
  .faq-list summary .q {
    width: 24px;
  }
  .faq-list details p {
    padding: 0 4px 20px 40px;
  }
  .p-head {
    margin-bottom: 40px;
  }
  .f7-mid {
    grid-template-columns: 1fr;
  }
  .tests {
    height: 360px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx,
  .fx-glow {
    display: none;
  }
  .f5-float {
    animation: none;
  }
  .ct-badge i,
  .f7-badge i {
    animation: none;
  }
}