/* ============================================================
   CLIPPED — landing page
   ============================================================ */

/* ---------------- hero ---------------- */
.hero { padding: 88px 0 40px; text-align: center; }
.hero-in { display: flex; flex-direction: column; align-items: center; position: relative; }

.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.hero-rating b { color: var(--ink-2); font-weight: 600; }

.hero h1 {
  font-size: clamp(42px, 6.4vw, 82px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  max-width: 900px;
  margin-bottom: 24px;
}
.hero h1 .scribble { position: relative; white-space: nowrap; }
.hero h1 .scribble svg {
  position: absolute;
  left: -4%;
  bottom: -0.28em;
  width: 108%;
  height: 0.42em;
  overflow: visible;
}
.hero h1 .scribble svg path {
  fill: none;
  stroke: var(--lime);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 1.1s 0.4s var(--t) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero .sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 600px;
  margin: 0 0 36px;
}
.hero .sub b { color: var(--ink-2); font-weight: 600; }

/* the URL box — hero of the hero */
.urlbox {
  position: relative;
  width: min(720px, 100%);
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 18px;
  background: var(--s1);
  border: 1px solid var(--hairline-2);
  box-shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.9), 0 0 60px -24px rgba(201, 243, 29, 0.25);
  transition: border-color var(--t), box-shadow var(--t);
}
.urlbox:focus-within {
  border-color: rgba(201, 243, 29, 0.55);
  box-shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.9), 0 0 70px -18px rgba(201, 243, 29, 0.45);
}
.urlbox .yt-ic {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 0, 0, 0.14);
  color: #ff5c5c;
  margin-left: 4px;
}
.urlbox .yt-ic svg { width: 24px; height: 24px; }
.urlbox input {
  flex: 1;
  min-width: 0;
  height: 46px;
  background: none;
  border: 0;
  outline: none;
  color: var(--ink);
  font-size: 16px;
}
.urlbox input::placeholder { color: var(--muted-2); }
.urlbox .btn { height: 46px; flex: none; }
@media (max-width: 560px) {
  .urlbox { flex-wrap: wrap; }
  .urlbox input { flex-basis: 100%; order: -1; padding: 0 6px; }
  .urlbox .yt-ic { display: none; }
  .urlbox .btn { flex: 1; }
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted-2);
}
.hero-note i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); font-style: normal; }

/* avatar proof strip */
.proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.av-stack { display: flex; }
.av-stack .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -9px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.av-stack .av:first-child { margin-left: 0; }
.proof .txt { text-align: left; font-size: 13px; color: var(--muted); line-height: 1.35; }
.proof .txt b { display: block; color: var(--ink-2); font-weight: 600; }

/* ---------------- animated phone preview ---------------- */
.phone-strip { padding: 30px 0 20px; display: flex; justify-content: center; }
.phone {
  --w: 232px;
  position: relative;
  width: var(--w);
  aspect-ratio: 9 / 16;
  border-radius: 34px;
  background: var(--s1);
  border: 1px solid var(--hairline-2);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 80px -30px rgba(201, 243, 29, 0.28);
  overflow: hidden;
  animation: floaty 6s ease-in-out infinite;
}
.phone .screen {
  position: absolute;
  inset: 10px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, #2a3540 0%, #131a20 45%, #0a0e12 100%);
}
.phone .scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.phone .talker {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a4652, #1a2229);
  border: 2px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  font-size: 38px;
  animation: floaty 4s ease-in-out infinite;
}
.phone .cap {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 16%;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.phone .cap span {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--lime);
  color: var(--on-lime);
  animation: capPop 3s infinite;
}
@keyframes capPop {
  0%, 12% { transform: scale(1); background: var(--lime); }
  14%, 100% { transform: scale(1); background: transparent; color: #fff; }
}
.phone .bar {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 9%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.phone .bar i {
  display: block;
  height: 100%;
  width: 34%;
  background: var(--lime);
  border-radius: 2px;
  animation: barfill 3s linear infinite;
}
@keyframes barfill { from { transform: translateX(-110%); } to { transform: translateX(320%); } }
.phone .side-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.float-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--s2);
  border: 1px solid var(--hairline-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  z-index: 3;
}
.float-chip svg { width: 15px; height: 15px; color: var(--lime); }
.float-chip.c1 { left: calc(50% - 232px - 150px); top: 22%; animation: floaty 5s ease-in-out infinite; }
.float-chip.c2 { left: calc(50% - 232px - 170px); bottom: 26%; animation: floaty 5.6s 0.6s ease-in-out infinite; }
.float-chip.c3 { right: calc(50% - 232px - 160px); top: 34%; animation: floaty 5.2s 1.1s ease-in-out infinite; }
.float-chip.c4 { right: calc(50% - 232px - 170px); bottom: 34%; animation: floaty 5.8s 0.3s ease-in-out infinite; }
@media (max-width: 1080px) { .float-chip { display: none; } }

/* ---------------- launch offer strip ---------------- */
.offer-sec { padding: 26px 0 10px; }
.offer {
  position: relative;
  overflow: hidden;
  max-width: var(--maxw);
  margin: 0 auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(201, 243, 29, 0.4);
  background:
    radial-gradient(600px 200px at 12% 0%, rgba(201, 243, 29, 0.16), transparent 60%),
    radial-gradient(600px 240px at 95% 100%, rgba(139, 123, 255, 0.16), transparent 60%),
    var(--s1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 28px;
  flex-wrap: wrap;
}
.offer .offer-copy { display: flex; align-items: center; gap: 14px; min-width: 0; }
.offer .offer-ic {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--lime);
  color: var(--on-lime);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 0 var(--lime-deep);
}
.offer .offer-ic svg { width: 23px; height: 23px; }
.offer b { display: block; font-size: 16px; letter-spacing: -0.01em; }
.offer span { font-size: 13.5px; color: var(--muted); }
.offer code {
  font-family: inherit;
  font-weight: 800;
  color: var(--lime);
  background: rgba(201, 243, 29, 0.1);
  border: 1px dashed rgba(201, 243, 29, 0.45);
  padding: 1px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  cursor: copy;
}
.offer .count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.offer .count svg { width: 16px; height: 16px; color: var(--lime); }
.offer .count .t {
  display: inline-flex;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.offer .count .t i {
  font-style: normal;
  background: #000;
  border: 1px solid var(--hairline-2);
  color: var(--ink);
  border-radius: 7px;
  padding: 3px 7px;
  font-weight: 700;
}
@media (max-width: 720px) { .offer { padding: 18px; } .offer .count { width: 100%; } }

/* ---------------- how it works ---------------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.flow-card {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  padding: 10px;
  transition: transform var(--t), border-color var(--t);
}
.flow-card:hover { transform: translateY(-4px); border-color: var(--hairline-2); }
.flow-card .visual {
  position: relative;
  height: 218px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.flow-card .body { padding: 18px 12px 12px; }
.flow-card h3 { display: flex; align-items: center; gap: 11px; font-size: 17.5px; margin-bottom: 6px; }
.flow-card .num {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--lime);
  color: var(--on-lime);
  font-size: 13px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 0 var(--lime-deep);
}
.flow-card p { margin: 0; color: var(--muted); font-size: 14.5px; }

.fv-paste { width: 74%; padding: 14px 16px; border-radius: 14px; background: var(--s2); border: 1.5px dashed rgba(201, 243, 29, 0.4); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.fv-paste svg { width: 30px; height: 30px; color: #ff5c5c; }
.fv-paste b { font-size: 13px; font-weight: 600; }
.fv-paste span { font-size: 12px; color: var(--muted-2); }
.fv-scan { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 80%; }
.fv-scan .ring { width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--lime) 0 72%, var(--s4) 72%); display: grid; place-items: center; animation: spin-slow 2.6s linear infinite; }
.fv-scan .ring::before { content: ""; width: 66px; height: 66px; border-radius: 50%; background: var(--bg); grid-area: 1/1; }
.fv-scan .ring svg { grid-area: 1/1; width: 22px; height: 22px; color: var(--lime); z-index: 1; animation: spin-slow 2.6s linear infinite reverse; }
.fv-scan .rows { display: grid; gap: 7px; width: 100%; }
.fv-scan .rows i { height: 12px; border-radius: 6px; background: var(--s3); display: block; }
.fv-scan .rows i:nth-child(1) { width: 100%; }
.fv-scan .rows i:nth-child(2) { width: 78%; background: linear-gradient(90deg, var(--lime), rgba(201, 243, 29, 0.25)); }
.fv-scan .rows i:nth-child(3) { width: 88%; }
.fv-cut { display: flex; align-items: center; gap: 12px; }
.fv-cut .mini {
  width: 66px;
  height: 108px;
  border-radius: 12px;
  border: 2px solid rgba(201, 243, 29, 0.5);
  background: linear-gradient(160deg, #2a3540, #10161b);
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.9);
}
.fv-cut .mini:nth-child(2) { transform: rotate(-6deg) translateY(8px); border-color: rgba(139, 123, 255, 0.6); }
.fv-cut .mini:nth-child(3) { transform: rotate(6deg) translateY(8px); border-color: rgba(255, 79, 154, 0.55); }

/* ---------------- bento features ---------------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(230px, auto); gap: 16px; }
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.tile .tile-head h3 { font-size: 20px; margin-bottom: 7px; }
.tile .tile-head p { margin: 0; color: var(--muted); font-size: 14.5px; max-width: 46ch; }
.t-glow::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: radial-gradient(320px 220px at 85% 0%, rgba(201, 243, 29, 0.1), transparent 65%);
}
.t-violet::after {
  content: "";
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: radial-gradient(320px 220px at 15% 100%, rgba(139, 123, 255, 0.14), transparent 65%);
}

.t-score { grid-column: span 4; grid-row: span 2; }
.t-caps { grid-column: span 2; grid-row: span 2; }
.t-reframe { grid-column: span 3; }
.t-emoji { grid-column: span 3; }
.t-live { grid-column: span 3; }
.t-private { grid-column: span 3; }

.score-vis { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.score-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--hairline); }
.score-row .n { font-family: var(--display); font-weight: 700; color: var(--muted-2); font-size: 13px; width: 18px; }
.score-row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: var(--ink-2); }
.score-row .s { font-family: var(--display); font-weight: 700; font-size: 13px; background: var(--lime); color: var(--on-lime); border-radius: 8px; padding: 3px 9px; }
.score-row:first-child .s { animation: pulse 2.4s infinite; }

.caps-vis { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 20px; }
.caps-vis .mock {
  width: 100%;
  aspect-ratio: 9/12;
  max-height: 300px;
  border-radius: 16px;
  border: 1px solid var(--hairline-2);
  background:
    radial-gradient(90% 70% at 50% 22%, #2c3844 0%, #12181d 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='8' cy='8' r='1.4' fill='%23555f6a'/%3E%3Ccircle cx='28' cy='22' r='1' fill='%23555f6a'/%3E%3C/svg%3E");
  display: grid;
  place-items: end center;
  padding-bottom: 12%;
  position: relative;
}
.caps-vis .mock b {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(13px, 1.6vw, 17px);
  text-transform: uppercase;
  color: #fff;
  background: var(--lime);
  color: var(--on-lime);
  padding: 5px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 18px -6px rgba(201, 243, 29, 0.6);
}
.caps-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.caps-chips button {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  background: var(--bg);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.caps-chips button.on { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }

.reframe-vis { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; align-items: end; }
.reframe-vis .fr { aspect-ratio: var(--ar, 16/9); border-radius: 12px; border: 1px solid var(--hairline-2); background: radial-gradient(80% 60% at 50% 30%, #2c3844, #10161b); position: relative; overflow: hidden; }
.reframe-vis .fr::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 46%; transform: translateX(-50%); outline: 2px dashed var(--lime); outline-offset: -2px; border-radius: 4px; }
.reframe-vis .fr:nth-child(2) { --ar: 9/16; }
.reframe-vis .fr:nth-child(3) { --ar: 1/1; }
.reframe-vis .fr:nth-child(2)::after, .reframe-vis .fr:nth-child(3)::after { outline-color: var(--violet); }

.emoji-vis { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.emoji-vis .chip {
  height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--hairline-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.emoji-vis .chip i { font-style: normal; font-size: 19px; }
.emoji-vis .chip.on { border-color: rgba(201, 243, 29, 0.5); background: rgba(201, 243, 29, 0.08); }

.live-vis { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 12px; }
.live-vis .rec { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: #fff; background: #e5484d; border-radius: 6px; padding: 3px 8px; }
.live-vis .lb { flex: 1; height: 42px; border-radius: 10px; background: var(--bg); border: 1px solid var(--hairline); position: relative; overflow: hidden; }
.live-vis .lb i { position: absolute; top: 7px; bottom: 7px; border-radius: 6px; background: var(--lime); }
.live-vis .lb i.a { left: 3%; width: 18%; }
.live-vis .lb i.b { left: 40%; width: 26%; background: var(--violet); }
.live-vis .lb i.c { left: 78%; width: 12%; }
.live-vis .hrs { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }

.private-vis { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 16px; }
.private-vis .shield {
  width: 64px;
  height: 74px;
  flex: none;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--hairline-2);
  display: grid;
  place-items: center;
  position: relative;
}
.private-vis .shield svg { width: 30px; height: 30px; color: var(--lime); }
.private-vis .shield::after { content: ""; position: absolute; inset: -7px; border: 1px dashed rgba(201, 243, 29, 0.35); border-radius: 18px; animation: spin-slow 14s linear infinite; }
.private-vis p { margin: 0; font-size: 14px; color: var(--muted); }
.private-vis p b { color: var(--ink-2); }

@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-score { grid-column: span 2; grid-row: auto; }
  .t-caps { grid-column: span 1; grid-row: span 2; }
  .t-reframe, .t-emoji { grid-column: span 1; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: 1fr; }
  .t-score, .t-caps, .t-reframe, .t-emoji, .t-live, .t-private { grid-column: auto; grid-row: auto; }
}

/* ---------------- before / after ---------------- */
.ba-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.ba-copy h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 18px; }
.ba-copy > p { color: var(--muted); font-size: 16.5px; margin: 0 0 24px; max-width: 470px; }
.checks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 11px; }
.checks li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--ink-2); }
.checks svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--lime); color: var(--on-lime); flex: none; }
.ba-visual { display: flex; align-items: center; justify-content: center; gap: 20px; }
.ba-frame { text-align: center; }
.ba-frame .tagline { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.ba-frame .frame {
  width: 200px;
  aspect-ratio: 9/16;
  border-radius: 22px;
  padding: 7px;
  background: var(--s2);
  border: 1px solid var(--hairline-2);
}
.ba-frame .frame div { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; position: relative; }
.ba-frame.before .frame { opacity: 0.55; filter: saturate(0.5); }
.ba-frame.before .frame div {
  background: radial-gradient(80% 60% at 50% 30%, #2c3844, #10161b);
  display: grid;
  place-items: center;
  font-size: 34px;
}
.ba-frame.after .frame { box-shadow: 0 0 44px -12px rgba(201, 243, 29, 0.4); }
.ba-frame.after .frame div {
  background: radial-gradient(80% 60% at 50% 26%, #37444f, #12181d);
  display: grid;
  place-items: end center;
  padding-bottom: 18%;
}
.ba-frame.after .frame div b {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--lime);
  color: var(--on-lime);
  padding: 4px 9px;
  border-radius: 7px;
  animation: floaty 3s ease-in-out infinite;
}
.ba-arrow { width: 34px; height: 34px; color: var(--lime); flex: none; }
@media (max-width: 860px) {
  .ba-in { grid-template-columns: 1fr; gap: 34px; }
  .ba-frame .frame { width: 150px; }
}

/* ---------------- earnings calculator ---------------- */
.calc {
  max-width: 780px;
  margin: 0 auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  padding: 38px;
  position: relative;
  overflow: hidden;
}
.calc::before {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: radial-gradient(420px 260px at 80% 0%, rgba(139, 123, 255, 0.12), transparent 65%);
}
.calc .sliders { display: grid; gap: 24px; padding-bottom: 30px; border-bottom: 1px solid var(--hairline); position: relative; }
.calc .slider { display: grid; grid-template-columns: 180px 1fr 110px; align-items: center; gap: 18px; font-size: 14.5px; color: var(--muted); position: relative; }
.calc .slider output { text-align: right; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; position: relative; }
.calc .slider input { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; outline: none; cursor: pointer; background: linear-gradient(90deg, var(--lime) var(--p), var(--s4) var(--p)); position: relative; }
.calc .slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--lime-deep); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.calc .slider input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--lime-deep); }
.calc .results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 30px; position: relative; }
.calc .res { border-radius: 18px; background: var(--bg); border: 1px solid var(--hairline); padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; }
.calc .res > span { font-size: 13px; color: var(--muted); }
.calc .res > small { font-size: 11.5px; color: var(--muted-2); }
.calc .res b { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc .res.accent { background: var(--lime); border-color: var(--lime); }
.calc .res.accent > span, .calc .res.accent > small { color: rgba(11, 15, 0, 0.66); }
.calc .res.accent b { color: var(--on-lime); }
@media (max-width: 860px) {
  .calc .slider { grid-template-columns: 1fr auto; }
  .calc .slider input { grid-column: span 2; grid-row: 2; }
  .calc .results { grid-template-columns: 1fr; }
  .calc { padding: 26px 22px; }
}

/* ---------------- testimonials marquee ---------------- */
.voices { overflow: hidden; padding: 10px 0; }
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee .track { display: flex; gap: 16px; padding-right: 16px; width: max-content; animation: marquee 60s linear infinite; align-items: stretch; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.quote {
  width: 330px;
  margin: 0;
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--s2);
  border: 1px solid var(--hairline);
}
.quote blockquote { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.quote .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex: none; }
.quote figcaption b { display: block; font-size: 13.5px; font-weight: 600; }
.quote figcaption small { font-size: 12px; color: var(--muted); }

/* ---------------- pricing teaser ---------------- */
.pr-tease { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pr-t {
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--s2), var(--s1));
  padding: 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform var(--t), border-color var(--t);
}
.pr-t:hover { transform: translateY(-4px); }
.pr-t.hot { border-color: rgba(201, 243, 29, 0.5); }
.pr-t.hot::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(300px 180px at 80% 0%, rgba(201, 243, 29, 0.12), transparent 65%);
}
.pr-t .head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pr-t h3 { font-size: 18px; }
.pr-t .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.pr-t .price b { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.pr-t .price span { font-size: 13px; color: var(--muted); }
.pr-t .price s { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--muted-2); text-decoration-thickness: 2px; }
.pr-t .desc { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.pr-t ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.pr-t ul li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); align-items: flex-start; }
.pr-t ul svg { width: 15px; height: 15px; color: var(--lime); flex: none; margin-top: 3px; }
.pr-t .btn { margin-top: auto; }
@media (max-width: 900px) { .pr-tease { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ---------------- FAQ ---------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq-side { position: sticky; top: 104px; }
.faq-side h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 20px; }
.faq-side p { color: var(--muted); margin: 0 0 20px; max-width: 380px; }
.help {
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 380px;
  background: var(--s2);
  border: 1px solid var(--hairline);
}
.help b { font-family: var(--display); font-size: 18px; }
.help p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.faq-list { display: grid; gap: 10px; }
.qa { border-radius: 18px; border: 1px solid transparent; transition: background var(--t), border-color var(--t); }
.qa.open { background: var(--s2); border-color: var(--hairline); }
.qa button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 19px 22px;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.qa button i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  position: relative;
  background: var(--s3);
  border: 1px solid var(--hairline-2);
  transition: background var(--t);
}
.qa button i::before, .qa button i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.qa button i::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity var(--t); }
.qa.open button i { background: var(--lime); }
.qa.open button i::before, .qa.open button i::after { background: var(--on-lime); }
.qa.open button i::after { opacity: 0; }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--t); }
.qa .ans > div { overflow: hidden; }
.qa .ans p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.qa.open .ans { grid-template-rows: 1fr; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq-side { position: static; }
}

/* ---------------- final CTA band ---------------- */
.cta-sec { padding: 30px 0 80px; }
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  padding: 84px 32px;
  text-align: center;
  background: var(--lime);
  color: var(--on-lime);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 300px at 12% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(420px 260px at 90% 100%, rgba(139, 123, 255, 0.35), transparent 60%);
}
.cta-band h2 { position: relative; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: 16px; }
.cta-band p { position: relative; margin: 0 auto 32px; max-width: 520px; color: rgba(11, 15, 0, 0.72); font-size: 17px; }
.cta-actions { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-dark { background: var(--on-lime); color: var(--lime); border-color: var(--on-lime); --cb: #000; }
.cta-band .btn-outline {
  background: var(--lime);
  border: 1.5px solid var(--on-lime);
  color: var(--on-lime);
  --cb: var(--on-lime);
}
.cta-band .btn-outline:hover { background: #d8ff4a; }

/* avatars */
.av { display: inline-grid; place-items: center; font-weight: 700; color: #fff; }
.av-1 { background: linear-gradient(135deg, #ff7a59, #e5484d); }
.av-2 { background: linear-gradient(135deg, #7c9cff, #5c4fd8); }
.av-3 { background: linear-gradient(135deg, #4ecdc4, #1e9e6a); }
.av-4 { background: linear-gradient(135deg, #ffb84d, #e8871e); }
.av-5 { background: linear-gradient(135deg, #c98bff, #8b5cd9); }
.av-6 { background: linear-gradient(135deg, #5ee27a, #1fa348); }

@media (max-width: 620px) {
  .hero { padding-top: 60px; }
  .phone { --w: 190px; }
  .quote { width: 270px; }
  .cta-band { padding: 60px 22px; }
}