/* Landing — Orbit template layout (viewport-relative scroll stage). */
.lp { position: relative; }
.lp-stage { position: relative; }
.lp-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 0; }
.lp-canvas { position: absolute; inset: 0; }
.lp-canvas canvas { width: 100%; height: 100%; }

/* hero */
.hero { position: absolute; inset: 0 0 auto; height: 100vh; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 120px; pointer-events: none; }
.hero-in { width: 100%; max-width: var(--wrap); display: flex; flex-direction: column; align-items: flex-start; gap: 32px; pointer-events: auto; }
.hero .badge { margin-bottom: -1px; }
.hero-sub { max-width: 450px; }
.people { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.people-av { display: flex; padding-left: 8px; }
.people-av > * { width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; border: 2px solid #000; background: var(--s3) center/cover no-repeat; overflow: hidden; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--acc); }
.people-av > i:empty { background: radial-gradient(circle at 35% 30%, #2b6f96, #0b1c29 70%); }
.people-t { font-size: 14px; line-height: 22.4px; color: var(--mut); }
.people-t b { color: #fff; font-weight: 600; }
.people-av .av-a { background: #111; padding: 0; }
.people-av .av-a img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.rot { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; margin: 0 2px; border-radius: 14px; background: rgba(28, 194, 255, .1); border: 1px solid rgba(28, 194, 255, .25); color: #fff; vertical-align: middle; transition: opacity .2s, transform .2s; }
.rot img { border-radius: 50%; }
.rot .odo { color: var(--acc); font-variant-numeric: tabular-nums; }
.rot.out { opacity: 0; transform: translateY(-4px); }
.hero-logos { display: flex; align-items: center; gap: 40px; color: #fff; height: 24px; }
.hero-logos .lc { opacity: .9; transition: opacity .2s; }
.hero-logos .lc:hover { opacity: 1; }

/* shared scroll-stage blocks */
.spacer { height: 50vh; }
.trig { height: 50vh; }
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
[data-fade] { will-change: opacity, transform; }

/* why */
.why { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: var(--pad); }
.why-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding-top: calc(50vh - 220px); pointer-events: none; }
.why-sticky > * { pointer-events: auto; }
.why-cards { position: relative; height: 468px; margin-top: 0; display: flex; justify-content: space-between; align-items: center; }
.why-left, .why-right { display: flex; flex-direction: column; gap: 8px; }
.why-left { padding-left: 0; }
.why-right { padding-right: 0; }
.wcard { display: flex; align-items: center; }
.wline { display: block; width: 84px; height: 1px; background: var(--line); flex: none; }
.wcard-c { width: 217px; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.wcard-t { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; line-height: 25.6px; letter-spacing: -0.02em; white-space: nowrap; }
.wcard-p { font-size: 14px; line-height: 22.4px; color: var(--mut); }
.why-head { margin-top: 0; }
.why-left, .why-right { will-change: transform; }

/* features */
.feat { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: var(--pad); }
.feat-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.feat-sticky > * { pointer-events: auto; }
.feat-head { height: 434px; justify-content: flex-end; padding-bottom: 32px; margin-top: 0; }
.feat-cards { display: grid; grid-template-columns: repeat(3, 300px); gap: 8px; justify-content: center; margin-top: 64px; }
.feat-cards .fcard:nth-child(4) { grid-column: 2; }
.fcard { display: flex; gap: 8px; align-items: flex-start; padding: 16px; min-height: 110px; background: rgba(0, 0, 0, .9); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fcard-i { flex: none; width: 30px; height: 30px; padding: 4px; border-radius: 8px; background: var(--s3); border: 1px solid var(--line); display: grid; place-items: center; }
.fcard-i .ico { width: 20px; height: 20px; }
.fcard-t { font-size: 16px; font-weight: 600; line-height: 25.6px; }
.fcard-p { margin-top: 8px; font-size: 14px; line-height: 22.4px; color: var(--mut); }

/* journey */
.jour { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: var(--pad); }
.jour-spacer { height: 100vh; }
.jour-list { display: flex; flex-direction: column; gap: 48px; width: 350px; }
.jstep { position: relative; display: flex; align-items: center; height: 110px; }
.jnum { flex: none; width: 49px; height: 49px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; font-style: normal; font-size: 16px; font-weight: 500; transform: scale(0); transition: transform .8s cubic-bezier(.34, 1.56, .64, 1); }
.jstep.in .jnum { transform: scale(1); }
.jstep .wline { width: 84px; }
.jstep .wcard-c { height: 110px; }
.jstep .wcard-p .ch { opacity: .25; transition: opacity .25s; }
.jstep.in .wcard-p .ch { opacity: 1; }

/* live board (template testimonial row) */
.live { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: var(--pad); padding-bottom: 0; }
.live .sec-head { margin-top: 30px; }
.live-row { position: relative; margin: 64px -120px 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.live-track { display: flex; gap: 20px; width: max-content; padding: 0 0 4px; animation: marquee var(--dur, 40s) linear infinite; }
.live-row:hover .live-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 10px)); } }
.lcard { width: 320px; min-height: 190px; padding: 28px 28px 14px; display: flex; gap: 0; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s; }
.lcard:hover { border-color: var(--line2); }
.lcard-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lcard-h { display: flex; align-items: center; gap: 10px; }
.lcard-img { flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--s3) center/cover no-repeat; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--acc); overflow: hidden; }
.lcard-n { min-width: 0; }
.lcard-n p:first-child { font-size: 16px; line-height: 25.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcard-n p:last-child { font-size: 12px; line-height: 15.6px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcard-q { font-size: 16px; line-height: 25.6px; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcard-f { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--mut); }
.lcard-pot { color: var(--acc); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.live-empty { margin-top: 40px; text-align: center; color: var(--mut); }
.live-empty a { color: var(--acc); }

/* faq */
.faq { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: var(--pad); }
.faq .sec-head { margin-top: 30px; }
.faq-list { width: 760px; max-width: 100%; margin: 64px auto 0; display: flex; flex-direction: column; gap: 8px; }
.qa { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qa-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 32px; text-align: left; font-size: 14px; font-weight: 600; line-height: 22.4px; }
.qa-x { position: relative; flex: none; width: 18px; height: 18px; }
.qa-x::before, .qa-x::after { content: ""; position: absolute; left: 3px; right: 3px; top: 8.25px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .35s cubic-bezier(.44, 0, .56, 1); }
.qa-x::after { transform: rotate(90deg); }
.qa.open .qa-x::after { transform: rotate(0); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.44, 0, .56, 1); }
.qa-a > p { overflow: hidden; padding: 0 32px; font-size: 14px; line-height: 22.4px; color: var(--mut); }
.qa.open .qa-a { grid-template-rows: 1fr; }
.qa.open .qa-a > p { padding-bottom: 22px; }

/* cta */
.cta { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: var(--pad); }
.cta-in { min-height: 606px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; }
.cta .h1 { margin-top: 42px; max-width: 900px; }
.cta .sub { margin-top: 22px; max-width: 520px; }
.cta .ask { margin-top: 32px; }
.cta-note { margin-top: 22px; font-size: 12px; line-height: 15.6px; color: var(--mut); max-width: 800px; }

@media (max-width: 1100px) {
  .hero { padding: 0 48px; }
  .why-left { padding-left: 0; } .why-right { padding-right: 0; }
}
@media (max-width: 980px) {
  .why-cards { flex-direction: column; justify-content: center; gap: 8px; height: auto; margin-top: 0; }
  .why-right { align-items: center; }
  .wcard .wline { display: none; }
  .why-sticky { justify-content: flex-end; padding-bottom: 8vh; }
  .feat-head { height: auto; margin-top: 18vh; }
  .feat-cards { grid-template-columns: repeat(2, minmax(0, 300px)); }
  .feat-cards .fcard:nth-child(4) { grid-column: auto; }
  .live-row { margin: 48px -48px 0; }
}
@media (max-width: 640px) {
  .hero { padding: 0 16px; align-items: flex-end; padding-bottom: 40px; }
  .hero-in { gap: 22px; }
  .hero-logos { gap: 24px; }
  .ask { width: 100%; }
  .ask-btn { padding: 8px 16px; }
  .wcard-c { width: min(320px, calc(100vw - 32px)); }
  .why-head .h1 { font-size: 30px; }
  .feat-cards { grid-template-columns: 1fr; width: 100%; }
  .fcard { min-height: 0; }
  .feat-head { margin-top: 12vh; padding-bottom: 8px; }
  .jour-list { width: 100%; gap: 24px; }
  .jstep .wcard-c { flex: 1; width: auto; height: auto; }
  .jstep .wline { width: 24px; }
  .jnum { width: 40px; height: 40px; }
  .live-row { margin: 40px -16px 0; }
  .lcard { width: 280px; padding: 22px 22px 12px; }
  .faq-list { margin-top: 40px; }
  .qa-q { padding: 18px 20px; }
  .qa-a > p { padding: 0 20px; }
  .qa.open .qa-a > p { padding-bottom: 18px; }
  .cta-in { min-height: 520px; }
}

/* ===== added sections (template card language: black, 1px white/10 borders, accent blue) ===== */
.sec-sub { max-width: 560px; margin-top: 8px; }
.k { font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 11px; background: var(--s3); font-size: 12px; line-height: 1; color: #fff; }
.tag-acc { background: rgba(28, 194, 255, .12); color: var(--acc); }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(28, 194, 255, .12); color: var(--acc); font-size: 12px; font-weight: 600; }
.chip-burn { background: rgba(255, 126, 28, .12); color: #ff9a4d; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--yes); box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: ping 1.6s infinite; vertical-align: 1px; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }
.prog { position: relative; height: 6px; border-radius: 6px; background: var(--s3); overflow: hidden; }
.prog > i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, #0a6d91, var(--acc)); transition: width 1s cubic-bezier(.22, 1, .36, 1); }

/* pulse */
.pulse, .play, .fine, .calc { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 96px var(--pad) var(--pad); }
.tick-row { position: relative; margin: 56px -120px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tick-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.tick-row:hover .tick-track { animation-play-state: paused; }
.tk { display: flex; align-items: center; gap: 10px; padding: 18px 28px; border-right: 1px solid var(--line); white-space: nowrap; }
.tk img { width: 22px; height: 22px; border-radius: 50%; }
.tk-s { font-weight: 600; font-size: 14px; }
.tk-p { font-size: 14px; font-variant-numeric: tabular-nums; transition: color .6s; }
.tk-d { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.tk.up .tk-p { color: var(--yes); } .tk.down .tk-p { color: var(--no); }
.pulse-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: auto; gap: 8px; margin-top: 40px; }
.stat { position: relative; padding: 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stat-wide { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(120% 90% at 0% 100%, rgba(28, 194, 255, .14), transparent 60%), var(--s1); }
.stat-l { font-size: 14px; font-weight: 600; color: var(--mut); }
.stat-v { margin-top: 10px; font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.stat-wide .stat-v { font-size: 64px; letter-spacing: -.01em; color: #fff; }
.stat-s { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--mut); }

/* play-out */
.play-box { margin-top: 56px; padding: 24px; background: var(--s1); border: 1px solid var(--line); border-radius: 16px; }
.play-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-bottom: 18px; }
.pstep { font-size: 14px; font-weight: 600; color: var(--mut); transition: color .4s; display: flex; gap: 8px; align-items: baseline; }
.pstep b { font-size: 12px; color: #4a4a4a; transition: color .4s; }
.pstep.on { color: #fff; } .pstep.on b { color: var(--acc); }
.pstep-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--s3); border-radius: 2px; overflow: hidden; }
.pstep-bar > i { display: block; height: 100%; width: 0; background: var(--acc); }
.play-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-top: 20px; }
.pcoin { padding: 22px; display: flex; flex-direction: column; gap: 16px; background: var(--bg); }
.pcoin-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pcoin-live { margin-left: auto; font-size: 12px; color: var(--mut); }
.pcoin-live.on { color: var(--yes); }
.pcoin-q { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; }
.pcoin-bar { display: flex; justify-content: space-between; font-size: 13px; }
.pcoin-bar span:first-child { display: flex; gap: 6px; align-items: center; }
.pcoin-bar img { border-radius: 50%; }
.pcoin-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcoin-meta p:last-child { margin-top: 4px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcoin-pot { padding: 18px; border-radius: 10px; background: radial-gradient(100% 120% at 100% 0%, rgba(28, 194, 255, .16), transparent 60%), var(--s1); border: 1px solid var(--line); }
.pot-v { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.pot-v .unit { font-size: 16px; font-weight: 600; color: var(--mut); }
.pot-s { margin-top: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--mut); }
.pfeed { padding: 22px; background: var(--bg); min-height: 420px; }
.pfeed-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pfeed-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--s1); border: 1px solid var(--line); font-size: 13px; animation: rowin .5s cubic-bezier(.22, 1, .36, 1); }
.pfeed-list li .who { font-weight: 600; } .pfeed-list li .sell { color: var(--no); } .pfeed-list li .buy { color: var(--yes); }
.pfeed-list li .fee { color: var(--acc); font-variant-numeric: tabular-nums; font-size: 12px; }
.pfeed-list li .amt { font-variant-numeric: tabular-nums; }
.pfeed-list.pay li { grid-template-columns: 1fr auto; }
.pfeed-list.pay li .amt { color: var(--yes); font-weight: 600; }
@keyframes rowin { from { opacity: 0; transform: translateY(-10px); } }
.settle { padding: 16px; border-radius: 10px; background: var(--s1); border: 1px solid var(--line); }
.settle-p { margin-top: 6px; font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.settle-v { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--mut); }
.settle-v.yes { color: var(--yes); }
.pfeed-note { margin-top: 10px; font-size: 12px; color: var(--mut); }

/* fine print */
.fine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 56px; }
.fcell { padding: 24px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.fviz { height: 150px; margin-bottom: 8px; border-radius: 10px; background: var(--s1); border: 1px solid var(--line); position: relative; overflow: hidden; }
.fcell-t { font-size: 18px; font-weight: 600; }
.fcell-p { font-size: 14px; line-height: 22.4px; color: var(--mut); }
.weights { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 18px; }
.wrow { display: grid; grid-template-columns: 110px 1fr 36px; gap: 10px; align-items: center; font-size: 12px; color: var(--mut); }
.wrow i { height: 8px; border-radius: 8px; background: var(--s3); overflow: hidden; }
.wrow b { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #0a6d91, var(--acc)); transition: width 1.4s cubic-bezier(.22, 1, .36, 1); }
.wrow em { font-style: normal; color: #fff; font-weight: 600; text-align: right; }
.fcell.in .wrow b { width: var(--w); }
.wrow:nth-child(2) b { transition-delay: .15s; } .wrow:nth-child(3) b { transition-delay: .3s; }
.dayone { padding: 26px 18px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.dline { position: relative; display: grid; grid-template-columns: 1fr 3fr; height: 40px; border-radius: 8px; overflow: hidden; font-size: 12px; font-weight: 600; }
.dz { display: flex; align-items: center; justify-content: center; }
.z1 { background: rgba(255, 126, 28, .14); color: #ff9a4d; } .z2 { background: rgba(28, 194, 255, .12); color: var(--acc); }
.dmark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; box-shadow: 0 0 12px #fff; left: 2%; animation: dmark 6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes dmark { 0%, 8% { left: 2%; } 45%, 55% { left: 96%; } 92%, 100% { left: 2%; } }
.dout { display: grid; grid-template-columns: 1fr 3fr; font-size: 11px; color: var(--mut); text-align: center; white-space: nowrap; }
.auto { display: grid; place-items: center; }
.wallet { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--s3); border: 1px solid var(--line2); color: var(--acc); z-index: 1; }
.drop { position: absolute; left: 50%; top: 50%; padding: 4px 10px; border-radius: 8px; background: rgba(61, 220, 151, .14); color: var(--yes); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; animation: drop 4.5s ease-in-out infinite; }
.drop.d2 { animation-delay: 1.5s; } .drop.d3 { animation-delay: 3s; }
@keyframes drop { 0% { opacity: 0; transform: translate(-50%, -150%); } 15% { opacity: 1; transform: translate(10%, -170%); } 45% { opacity: 1; transform: translate(-130%, -170%); } 60%, 100% { opacity: 0; transform: translate(-50%, -60%) scale(.6); } }

/* calculator */
.calc-box { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin-top: 56px; background: var(--s1); border-radius: 16px; overflow: hidden; }
.calc-in { padding: 28px; display: flex; flex-direction: column; gap: 26px; border-right: 1px solid var(--line); }
.rng { display: flex; flex-direction: column; gap: 12px; }
.rng-h { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--mut); }
.rng-h b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.rng input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--acc) var(--p, 50%), var(--s3) var(--p, 50%)); outline: 0; }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--acc); box-shadow: 0 0 0 6px rgba(28, 194, 255, .15); }
.rng input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--acc); }
.calc-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.calc-seg button { height: 40px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--mut); transition: background .25s, color .25s; }
.calc-seg button.on { background: var(--s3); color: #fff; }
.calc-seg button[data-out="no"].on { color: #ff9a4d; }
.calc-out { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 22px; background: radial-gradient(90% 70% at 100% 100%, rgba(28, 194, 255, .12), transparent 70%); }
.co-v { margin-top: 8px; font-size: 32px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.co-v.sm { font-size: 22px; color: #ff9a4d; }
.co-v.big { font-size: 60px; font-weight: 700; }
.co-s { margin-top: 10px; font-size: 13px; color: var(--mut); }
.co-main { padding-top: 22px; border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  .pulse-grid { grid-template-columns: 1fr 1fr; }
  .stat-wide { grid-column: span 2; grid-row: auto; }
  .play-grid, .calc-box { grid-template-columns: 1fr; }
  .calc-in { border-right: 0; border-bottom: 1px solid var(--line); }
  .fine-grid { grid-template-columns: 1fr; }
  .tick-row { margin: 40px -48px 0; }
}
@media (max-width: 640px) {
  .pulse, .play, .fine, .calc { padding-top: 64px; }
  .stat-wide .stat-v { font-size: 40px; }
  .stat-v { font-size: 26px; }
  .play-box { padding: 14px; }
  .play-steps { grid-template-columns: repeat(4, auto); font-size: 12px; }
  .pstep { font-size: 12px; } .pstep b { display: none; }
  .pcoin-q { font-size: 20px; }
  .pot-v { font-size: 34px; }
  .co-v.big { font-size: 44px; }
  .tick-row { margin: 32px -16px 0; }
}
.why, .feat, .jour { overflow-x: clip; }
@media (max-width: 640px) {
  .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .9) 38%, rgba(0, 0, 0, .55) 58%, transparent 78%); pointer-events: none; }
  .hero-in { position: relative; }
}

/* hero: three steps under the title */
.hsteps { list-style: none; margin: -8px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.hsteps li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 17px; background: rgba(0, 0, 0, .55); border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: #e6e6e6; backdrop-filter: blur(6px); }
.hsteps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #000; font-size: 12px; }