/* =====================================================================
   Landing page
   =====================================================================
   The three demo blocks are CSS animation rather than screen recordings.
   A GIF of this would be several hundred kilobytes, soft on a retina
   screen, and frozen in one colour scheme. Everything below is a few
   kilobytes, sharp at any size, and stops dead under prefers-reduced-motion.
   ===================================================================== */

.lp { padding: 40px 0 0; }

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

.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 54px;
  align-items: center;
  padding: 40px 0 76px;
}

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 10px; margin-bottom: 22px;
  font-size: 12.5px; font-weight: 500; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 99px; background: var(--panel);
}

.lp-hero h1 {
  font-size: clamp(38px, 5.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -.045em;
  margin-bottom: 20px;
}
.lp-hero h1 .grad {
  background: linear-gradient(100deg, var(--accent), #c4b2ff 45%, #4dd6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lp-lede {
  font-size: 16.5px; line-height: 1.65;
  color: var(--text-dim); max-width: 46ch; margin-bottom: 28px;
}

/* claim form */

.lp-claim { display: flex; gap: 10px; max-width: 452px; margin-bottom: 16px; }
.lp-claim .cw {
  display: flex; align-items: center; flex: 1; min-width: 0;
  padding: 0 4px 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel);
  transition: border-color .16s, box-shadow .16s;
}
.lp-claim .cw:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #7c5cff26;
}
.lp-claim .cw span {
  font-size: 14.5px; color: var(--text-faint); white-space: nowrap; user-select: none;
}
.lp-claim .cw input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 12px 8px;
  font: inherit; font-size: 14.5px; color: var(--text); outline: none;
}
.lp-claim .btn { flex: none; padding-inline: 20px; }

.lp-trust { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-faint);
}
.lp-trust svg { width: 13px; height: 13px; fill: var(--green, #34d399); }

/* ------------------------------------------------------- hero profile mock */

.lp-hero-demo { position: relative; display: grid; place-items: center; }

.hero-glow {
  position: absolute; inset: 12% 8%; z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #7c5cff40, transparent 68%);
  filter: blur(48px);
  animation: hero-breathe 7s ease-in-out infinite;
}
@keyframes hero-breathe {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.09); }
}

.hero-phone {
  position: relative; z-index: 1;
  width: 100%; max-width: 300px;
  padding: 12px;
  border: 1px solid var(--line); border-radius: 30px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 30px 80px #00000073;
  animation: hero-float 6s ease-in-out infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-12px) rotate(.6deg); }
}

.hero-screen {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 26px 18px 22px;
  border-radius: 21px;
  text-align: center;
  background: #08080c;
  /* Cycles through four of the real presets. */
  animation: hero-theme 16s ease-in-out infinite;
}
@keyframes hero-theme {
  0%, 22%   { background: #08080c; box-shadow: inset 0 0 60px #7c5cff1f; }
  25%, 47%  { background: #0a0304; box-shadow: inset 0 0 60px #f43f5e26; }
  50%, 72%  { background: #03100e; box-shadow: inset 0 0 60px #34d39926; }
  75%, 97%  { background: #0c0a04; box-shadow: inset 0 0 60px #ffcc4d26; }
  100%      { background: #08080c; box-shadow: inset 0 0 60px #7c5cff1f; }
}

.hero-avatar {
  width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, #2a2a36, #16161e);
  border: 2px solid #ffffff1f;
  animation: hero-accent-border 16s ease-in-out infinite;
}
@keyframes hero-accent-border {
  0%, 22%  { border-color: #7c5cff8c; }
  25%, 47% { border-color: #f43f5e8c; }
  50%, 72% { border-color: #34d3998c; }
  75%, 97% { border-color: #ffcc4d8c; }
  100%     { border-color: #7c5cff8c; }
}

.hero-name {
  font-size: 17px; font-weight: 650; letter-spacing: -.02em; color: #f2f2f5;
  animation: hero-accent-text 16s ease-in-out infinite;
}
@keyframes hero-accent-text {
  0%, 22%  { text-shadow: 0 0 18px #7c5cff73; }
  25%, 47% { text-shadow: 0 0 18px #f43f5e73; }
  50%, 72% { text-shadow: 0 0 18px #34d39973; }
  75%, 97% { text-shadow: 0 0 18px #ffcc4d73; }
  100%     { text-shadow: 0 0 18px #7c5cff73; }
}

.hero-badges { display: inline-flex; gap: 5px; }
.hero-badges i {
  width: 15px; height: 15px; background: var(--chip);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

.hero-handle { font-size: 11.5px; color: #8b8b96; }

.hero-socials { display: inline-flex; gap: 12px; margin-top: 3px; }
.hero-socials i { display: grid; place-items: center; width: 21px; height: 21px; }
.hero-socials svg { width: 17px; height: 17px; fill: #c8c8d2; }

.hero-link {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 12px; margin-top: 2px;
  font-size: 12.5px; color: #e6e6ec;
  border: 1px solid #ffffff17; border-radius: 11px; background: #ffffff0a;
}
.hero-link svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* --------------------------------------------------------------- numbers */

.lp-numbers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-bottom: 84px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--line); overflow: hidden;
}
.lp-num {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 22px 12px; background: var(--panel); text-align: center;
}
.lp-num b {
  font-size: 27px; font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--accent), #4dd6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-num span { font-size: 12px; color: var(--text-faint); }

/* ------------------------------------------------------ feature sections */

.lp-feature {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 52px; align-items: center;
  padding: 46px 0;
}
.lp-feature-flip .lp-feature-copy { order: 2; }

.lp-kicker {
  display: inline-block; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.lp-feature h2 {
  font-size: clamp(25px, 3.4vw, 34px); line-height: 1.15;
  letter-spacing: -.035em; margin-bottom: 13px;
}
.lp-feature p { font-size: 15px; line-height: 1.68; color: var(--text-dim); margin-bottom: 20px; }

.lp-ticks { display: grid; gap: 9px; }
.lp-ticks li {
  position: relative; padding-left: 26px;
  font-size: 13.5px; color: var(--text-dim); list-style: none;
}
.lp-ticks li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-soft, #7c5cff1f);
  border: 1px solid var(--accent-line, #7c5cff40);
}
.lp-ticks li::after {
  content: ""; position: absolute; left: 5px; top: 8px;
  width: 4px; height: 7px;
  border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(42deg);
}

/* ------------------------------------------------------------ demo shell */

.demo {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
  box-shadow: 0 22px 60px #00000059;
}
.demo-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--panel-3); }
.demo-title {
  margin-left: 8px; font-size: 12px; font-weight: 550; color: var(--text-faint);
}
.demo-body { padding: 14px; display: grid; gap: 9px; }

/* ---------------------------------------------------------- demo: links */

.dl-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.dl-grip { display: grid; place-items: center; width: 14px; color: var(--text-faint); }
.dl-grip svg { width: 13px; height: 13px; fill: currentColor; }

.dl-ic {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
}
.dl-ic svg { width: 16px; height: 16px; fill: var(--c); }

.dl-meta { display: grid; gap: 1px; flex: 1; min-width: 0; }
.dl-meta b { font-size: 13px; font-weight: 550; color: var(--text); }
.dl-meta i {
  font-style: normal; font-size: 11.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dl-clicks {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-faint);
  flex: none;
}

.dl-toggle {
  position: relative; flex: none;
  width: 32px; height: 18px; border-radius: 99px;
  background: var(--panel-3); transition: background .3s;
}
.dl-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #8b8b96; transition: transform .3s, background .3s;
}
.dl-toggle.on { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.dl-toggle.on::after { transform: translateX(14px); background: #fff; }

/* the row that lifts and drops one place */
.dl-drag { animation: dl-drag 7s cubic-bezier(.4,.1,.3,1) infinite; }
@keyframes dl-drag {
  0%, 12%   { transform: translateY(0) scale(1); box-shadow: none; z-index: 1; }
  20%       { transform: translateY(-3px) scale(1.025); box-shadow: 0 12px 26px #00000073; z-index: 3; }
  38%       { transform: translateY(53px) scale(1.025); box-shadow: 0 12px 26px #00000073; z-index: 3; }
  48%, 100% { transform: translateY(0) scale(1); box-shadow: none; z-index: 1; }
}
.dl-shift { animation: dl-shift 7s cubic-bezier(.4,.1,.3,1) infinite; }
@keyframes dl-shift {
  0%, 20%   { transform: translateY(0); }
  38%, 44%  { transform: translateY(-53px); }
  50%, 100% { transform: translateY(0); }
}

/* the switch that flips off and back on */
.dl-flip { animation: dl-flip 7s ease-in-out infinite; }
@keyframes dl-flip {
  0%, 55%  { background: color-mix(in srgb, var(--accent) 55%, transparent); }
  62%, 88% { background: var(--panel-3); }
  95%,100% { background: color-mix(in srgb, var(--accent) 55%, transparent); }
}
.dl-flip::after { animation: dl-flip-knob 7s ease-in-out infinite; }
@keyframes dl-flip-knob {
  0%, 55%  { transform: translateX(14px); background: #fff; }
  62%, 88% { transform: translateX(0);    background: #8b8b96; }
  95%,100% { transform: translateX(14px); background: #fff; }
}

/* the row that slides in as if just added */
.dl-new { animation: dl-new 7s cubic-bezier(.2,.9,.3,1) infinite; }
@keyframes dl-new {
  0%, 62%   { opacity: 0; transform: translateY(-8px) scale(.97); }
  72%, 94%  { opacity: 1; transform: translateY(0) scale(1); }
  100%      { opacity: 0; transform: translateY(-8px) scale(.97); }
}

/* --------------------------------------------------------- demo: editor */

.demo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
.de-controls {
  display: grid; gap: 13px; align-content: start;
  padding: 16px; border-right: 1px solid var(--line);
}
.de-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--text-dim);
}

.de-swatch {
  width: 34px; height: 18px; border-radius: 6px; border: 1px solid var(--line);
  animation: de-accent 12s ease-in-out infinite;
}
@keyframes de-accent {
  0%, 20%  { background: #7c5cff; }
  25%, 45% { background: #f43f5e; }
  50%, 70% { background: #34d399; }
  75%, 95% { background: #ffcc4d; }
  100%     { background: #7c5cff; }
}

.de-slider {
  position: relative; width: 74px; height: 4px;
  border-radius: 99px; background: var(--panel-3);
}
.de-slider i {
  position: absolute; top: -5px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px #7c5cff2e;
  animation: de-slide 12s ease-in-out infinite;
}
.de-slider-2 i { animation-name: de-slide-2; }
@keyframes de-slide {
  0%, 100% { left: 8%; }  35% { left: 62%; }  68% { left: 34%; }
}
@keyframes de-slide-2 {
  0%, 100% { left: 70%; } 30% { left: 22%; }  62% { left: 84%; }
}

.de-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 8px; background: var(--panel-3); }
.de-seg b { width: 17px; height: 12px; border-radius: 5px; background: #ffffff14; }
.de-seg b.on { background: var(--accent); animation: de-seg 12s steps(1) infinite; }
@keyframes de-seg {
  0%, 32%  { transform: translateX(0); }
  33%, 65% { transform: translateX(-20px); }
  66%,100% { transform: translateX(20px); }
}

.de-preview { display: grid; place-items: center; padding: 18px; background: var(--bg); }
.de-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 100%; padding: 18px 14px;
  border: 1px solid #ffffff14; border-radius: 15px;
  background: #0b0b10;
  animation: de-card 12s ease-in-out infinite;
}
@keyframes de-card {
  0%, 20%  { box-shadow: 0 0 34px #7c5cff2e; border-color: #7c5cff40; }
  25%, 45% { box-shadow: 0 0 34px #f43f5e2e; border-color: #f43f5e40; }
  50%, 70% { box-shadow: 0 0 34px #34d3992e; border-color: #34d39940; }
  75%, 95% { box-shadow: 0 0 34px #ffcc4d2e; border-color: #ffcc4d40; }
  100%     { box-shadow: 0 0 34px #7c5cff2e; border-color: #7c5cff40; }
}

.de-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #1c1c26; animation: de-accent-ring 12s ease-in-out infinite;
}
@keyframes de-accent-ring {
  0%, 20%  { box-shadow: 0 0 0 2px #7c5cff; }
  25%, 45% { box-shadow: 0 0 0 2px #f43f5e; }
  50%, 70% { box-shadow: 0 0 0 2px #34d399; }
  75%, 95% { box-shadow: 0 0 0 2px #ffcc4d; }
  100%     { box-shadow: 0 0 0 2px #7c5cff; }
}
.de-name   { width: 74px; height: 9px; border-radius: 99px; background: #ffffff2e; }
.de-handle { width: 50px; height: 7px; border-radius: 99px; background: #ffffff17; }
.de-links  { display: grid; gap: 5px; width: 100%; margin-top: 5px; }
.de-links i { height: 20px; border-radius: 7px; background: #ffffff0f; }

/* ---------------------------------------------------------- demo: stats */

.ds-heads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ds-stat {
  display: grid; gap: 3px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev);
}
.ds-stat span { font-size: 11px; color: var(--text-faint); }
.ds-stat b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.ds-count { color: var(--accent); }

.ds-chart {
  display: flex; align-items: flex-end; gap: 5px;
  height: 92px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev);
}
.ds-chart i {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent), #7c5cff54);
  transform-origin: bottom;
  animation: ds-grow 5s cubic-bezier(.2,.9,.3,1) infinite;
  animation-delay: var(--d);
  height: var(--h);
}
@keyframes ds-grow {
  0%       { transform: scaleY(0); opacity: .35; }
  22%, 78% { transform: scaleY(1); opacity: 1; }
  100%     { transform: scaleY(0); opacity: .35; }
}

.ds-sources { display: grid; gap: 8px; }
.ds-src { display: grid; gap: 5px; }
.ds-src span { font-size: 11.5px; color: var(--text-dim); }
.ds-src i {
  display: block; height: 5px; border-radius: 99px;
  background: var(--accent); width: var(--w);
  transform-origin: left;
  animation: ds-fill 5s cubic-bezier(.2,.9,.3,1) infinite;
}
@keyframes ds-fill {
  0%       { transform: scaleX(0); }
  30%, 82% { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

/* ---------------------------------------------------------- generic bits */

.lp-section { padding: 46px 0; }
.lp-head { text-align: center; max-width: 620px; margin: 0 auto 32px; }
.lp-head h2 {
  font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -.035em; margin-bottom: 9px;
}
.lp-head p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }

.showcase-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  transition: border-color .16s, transform .16s;
}
.showcase-card:hover { border-color: var(--accent-line, #7c5cff40); transform: translateY(-2px); }

/* FAQ */

.lp-faq { max-width: 720px; margin: 0 auto; display: grid; gap: 9px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); overflow: hidden;
}
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 15px 17px;
  font: inherit; font-size: 14.5px; font-weight: 550; text-align: left;
  color: var(--text); background: none; border: 0; cursor: pointer;
}
.faq-q .chev {
  flex: none; width: 17px; height: 17px; fill: var(--text-faint);
  transition: transform .22s;
}
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 17px 16px; font-size: 13.8px; line-height: 1.68; color: var(--text-dim);
}
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }

/* CTA */

.lp-cta {
  text-align: center; padding: 44px 26px;
  border: 1px solid var(--accent-line, #7c5cff40); border-radius: var(--radius);
  background:
    radial-gradient(600px 220px at 50% 0%, #7c5cff26, transparent 70%),
    var(--panel);
}
.lp-cta h2 { font-size: clamp(23px, 3vw, 30px); letter-spacing: -.035em; margin-bottom: 9px; }
.lp-cta p { font-size: 14.5px; color: var(--text-dim); margin-bottom: 22px; }
.lp-cta .row { justify-content: center; }

/* footer */

.lp-foot {
  margin-top: 40px; padding: 26px 0;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-faint);
}
.lp-foot a { color: var(--text-faint); transition: color .16s; }
.lp-foot a:hover { color: var(--text); }

/* ------------------------------------------------------------ discord join */

.lp-discord {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-radius: var(--radius);
  border: 1px solid #5865f240;
  background: linear-gradient(135deg, #5865f21f, #5865f20a);
  transition: border-color .18s, background .18s, transform .18s;
}
.lp-discord:hover {
  border-color: #5865f299; background: linear-gradient(135deg, #5865f22e, #5865f214);
  transform: translateY(-2px);
}
.lp-discord .dc-mark {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px; background: #5865f2; color: #fff;
}
.lp-discord .dc-mark svg { width: 27px; height: 27px; fill: currentColor; }
.lp-discord .dc-title {
  display: block; font-size: 17px; font-weight: 650; letter-spacing: -.02em; color: var(--text);
}
.lp-discord .dc-sub {
  display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.55;
  color: var(--text-dim); max-width: 62ch;
}
.lp-discord .dc-go {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; color: var(--text-faint);
  transition: transform .18s, color .18s;
}
.lp-discord .dc-go svg { width: 20px; height: 20px; fill: currentColor; }
.lp-discord:hover .dc-go { transform: translateX(3px); color: var(--text); }

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

@media (max-width: 900px) {
  .lp-hero,
  .lp-feature { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lp-feature-flip .lp-feature-copy { order: 0; }
  .lp-hero { padding-bottom: 56px; }
  .lp-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 56px; }
}

@media (max-width: 640px) {
  .lp { padding-top: 26px; }
  .lp-claim { flex-direction: column; }
  .lp-claim .btn { width: 100%; }
  .demo-split { grid-template-columns: minmax(0, 1fr); }
  .de-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .dl-clicks { display: none; }
  .lp-discord { padding: 16px; gap: 13px; }
  .lp-discord .dc-mark { width: 40px; height: 40px; border-radius: 12px; }
  .lp-discord .dc-mark svg { width: 22px; height: 22px; }
  .lp-discord .dc-title { font-size: 15.5px; }
  .lp-discord .dc-sub { font-size: 12.5px; }
  .lp-discord .dc-go { display: none; }
}

/*
 * Everything above is decoration. Someone who has asked their system not to
 * animate things gets the same page, held at a sensible frame.
 */
@media (prefers-reduced-motion: reduce) {
  .hero-glow, .hero-phone, .hero-screen, .hero-avatar, .hero-name,
  .dl-drag, .dl-shift, .dl-flip, .dl-flip::after, .dl-new,
  .de-swatch, .de-slider i, .de-seg b.on, .de-card, .de-avatar,
  .ds-chart i, .ds-src i {
    animation: none !important;
  }
  .dl-new { opacity: 1; transform: none; }
  .ds-chart i { transform: scaleY(1); opacity: 1; }
  .ds-src i { transform: scaleX(1); }
}

/* =====================================================================
   v3 — depth, 3D and glass
   =====================================================================
   The hero card is a real 3D object: the wrapper owns the perspective, the
   card owns the rotation, and the chips sit at their own translateZ so they
   move by different amounts as it turns. That parallax between layers is
   what sells it as solid — a single rotating rectangle just looks skewed.
   ===================================================================== */

.lp-hero-demo { transform-style: preserve-3d; }

.hero-phone {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  /* A resting angle, so the card reads as three-dimensional before the pointer
     ever touches it — and on a phone, where it never will. */
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -13deg));
  transition: transform var(--dur-slow) var(--ease-out);
}
.hero-phone.live { transition: transform .08s linear; }

.hero-screen {
  box-shadow:
    0 2px 6px #00000073,
    0 30px 60px -24px #000000d9,
    0 60px 120px -50px #7c5cff59,
    var(--hairline-strong);
}

/* The shadow the card casts on the ground, which is what stops it floating
   in a void. It squashes as the card tilts away from the viewer. */
.hero-floor {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 68%;
  height: 42px;
  transform: translateX(-50%) translateZ(-60px) rotateX(78deg);
  background: radial-gradient(ellipse at center, #000000cc, transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

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

.hero-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 560;
  color: var(--text);
  white-space: nowrap;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--glass-line);
  border-radius: 99px;
  box-shadow: var(--e3), var(--hairline);
  animation: chip-float 6s ease-in-out infinite;
}
.hero-chip b { font-weight: 700; }
.hero-chip svg { width: 13px; height: 13px; fill: var(--accent); }

.hero-chip-views { top: 12%; left: -14%; animation-delay: -1s; }
.hero-chip-live  { top: 46%; right: -13%; animation-delay: -3s; }
.hero-chip-uid   { bottom: 12%; left: -9%; animation-delay: -5s; font-family: var(--mono); font-size: 11px; }

.hero-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 #34d39980;
  animation: chip-pulse 2.2s ease-out infinite;
}

@keyframes chip-float {
  0%, 100% { transform: translateZ(var(--z, 40px)) translateY(0); }
  50%      { transform: translateZ(var(--z, 40px)) translateY(-9px); }
}
@keyframes chip-pulse {
  0%   { box-shadow: 0 0 0 0 #34d39999; }
  70%  { box-shadow: 0 0 0 9px #34d39900; }
  100% { box-shadow: 0 0 0 0 #34d39900; }
}

/* The float keyframes overwrite transform, so depth is passed in as --z
   rather than set by the layer classes on these particular elements. */
.hero-chip-views { --z: 64px; }
.hero-chip-live  { --z: 38px; }
.hero-chip-uid   { --z: 38px; }

/* -------------------------------------------------------------- sections */

.lp-numbers { perspective: 800px; }
.lp-num {
  border-radius: var(--radius);
  box-shadow: var(--e1), var(--hairline);
}
.lp-num:hover { transform: translateY(-3px) rotateX(6deg); }

/* The demo panels lean slightly, then straighten when pointed at. */
.lp-feature .demo {
  transform: rotateY(-7deg) rotateX(3deg);
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow);
  box-shadow: var(--e3), var(--hairline);
}
.lp-feature-flip .demo { transform: rotateY(7deg) rotateX(3deg); }
.lp-feature .demo:hover {
  transform: rotateY(0) rotateX(0) translateY(-4px);
  box-shadow: var(--e4), 0 40px 90px -50px var(--accent), var(--hairline-strong);
}

.showcase-card { border-radius: var(--radius); }

.lp-cta {
  position: relative;
  overflow: hidden;
  box-shadow: var(--e3), var(--hairline);
}
/* A slow sheen across the closing panel, so the last thing on the page moves. */
.lp-cta::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 40%;
  height: 220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, #ffffff0f, transparent);
  animation: cta-sheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cta-sheen {
  0%, 65% { left: -30%; }
  100%    { left: 120%; }
}

.lp-discord { box-shadow: var(--e2), var(--hairline); }

@media (max-width: 900px) {
  /* Off-card chips have nowhere to go on a narrow screen. */
  .hero-chip { display: none; }
  .hero-phone { transform: none; }
  .lp-feature .demo, .lp-feature-flip .demo { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-phone, .hero-phone.live { transform: none !important; transition: none; }
  .hero-chip { animation: none; }
  .hero-pulse { animation: none; }
  .lp-cta::after { animation: none; opacity: 0; }
  .lp-feature .demo, .lp-feature-flip .demo { transform: none; }
  .lp-num:hover { transform: none; }
}

/* =====================================================================
   v3 redesign — display type, bento board, bigger stage
   =====================================================================
   The previous pass added depth to the old layout and it still read as the
   old layout. This changes the things people actually notice first: the size
   and weight of the type, the shape of the sections, and how much room the
   hero takes.
   ===================================================================== */

.lp { padding: 20px 0 0; }

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

.lp-hero {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 40px;
  padding: 56px 0 96px;
  align-items: center;
}

/* Each line of the headline is its own block, so the three lines stack tight
   and the gradient sits on one of them rather than bleeding across a wrap. */
.lp-hero h1 {
  font-size: clamp(46px, 7.4vw, 88px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
  margin-bottom: 26px;
}
.lp-hero h1 .h-line { display: block; }
.lp-hero h1 .grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The gradient drifts, so the biggest thing on the page is never static. */
  background-size: 220% 100%;
  animation: head-drift 9s ease-in-out infinite alternate;
}
@keyframes head-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.lp-eyebrow {
  padding: 7px 15px 7px 11px;
  border-radius: var(--radius-pill);
  background: #ffffff08;
  border-color: var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lp-lede { font-size: 17.5px; max-width: 48ch; }

.lp-claim { max-width: 486px; }
.lp-claim .cw { border-radius: var(--radius-pill); padding-left: 18px; }
.lp-claim .cw input { padding: 14px 8px; }
.lp-claim .btn { border-radius: var(--radius-pill); padding-inline: 24px; }

/* The card gets more room and a stronger angle than the polish pass gave it. */
.hero-phone { transform: rotateX(var(--rx, 9deg)) rotateY(var(--ry, -17deg)) scale(1.06); }
.hero-screen { border-radius: var(--radius-lg); }

/* -------------------------------------------------------------- numbers */

.lp-numbers {
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
}
.lp-num {
  padding: 22px 18px;
  background: linear-gradient(165deg, #ffffff0a, transparent 46%), var(--panel);
  border: 1px solid var(--line);
}
.lp-num b {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.lp-bento { padding: 60px 0; }

.lp-head-left { text-align: left; max-width: 640px; margin-bottom: 30px; }
.lp-head-left h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 780; letter-spacing: -.045em; }

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.bento-cell {
  position: relative;
  grid-column: span 3;
  overflow: hidden;
  padding: 26px 26px 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #ffffff0a, transparent 44%), var(--panel);
  box-shadow: var(--e2);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
/* The same masked gradient ring the cards use. */
.bento-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.bento-cell:hover { transform: translateY(-4px); box-shadow: var(--e4); }

.bento-wide { grid-column: span 4; }
.bento-tall { grid-column: span 2; grid-row: span 2; }

.bento-copy { position: relative; z-index: 2; margin-bottom: 18px; }
.bento-copy h3 {
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -.03em;
  margin-bottom: 7px;
}
.bento-copy p { font-size: 13.8px; line-height: 1.6; color: var(--text-dim); }

/* Demos inside a cell are decoration: they bleed off the bottom edge rather
   than sitting in a box of their own. */
.bento-cell .demo {
  margin: 0 -6px -14px;
  transform: rotateX(4deg) scale(.97);
  transform-origin: top center;
  box-shadow: var(--e3);
  transition: transform var(--dur-slow) var(--ease-out);
}
.bento-cell:hover .demo { transform: rotateX(0) scale(1); }

.bento-accent {
  background:
    radial-gradient(120% 100% at 0% 0%, #7c5cff2e, transparent 58%),
    linear-gradient(165deg, #ffffff0a, transparent 44%),
    var(--panel);
  padding-bottom: 26px;
}
.bento-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.bento-swatches i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #ffffff1f;
  box-shadow: var(--e1);
  transition: transform var(--dur) var(--ease-spring);
}
.bento-swatches i:hover { transform: translateY(-3px) scale(1.08) rotate(-4deg); }

.bento-quiet { padding-bottom: 26px; }
.bento-uid {
  display: inline-block;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--text);
  background: #ffffff08;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-cell, .bento-wide, .bento-tall { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento-cell, .bento-wide, .bento-tall { grid-column: span 1; }
  .lp-hero h1 { font-size: clamp(38px, 12vw, 54px); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero h1 .grad { animation: none; }
  .bento-cell:hover { transform: none; }
  .bento-cell .demo, .bento-cell:hover .demo { transform: none; }
  .bento-swatches i:hover { transform: none; }
}