/* Keepcut · concept hero (fictional brand) · Fernando Camilo
   mobile first: 390 → 760 → 1180. Only transform and opacity move; every glow is a gradient on a static layer. */

:root {
  --void: #02030A;
  --ink: #060914;
  --line: rgba(150, 172, 255, .10);
  --line-2: rgba(150, 172, 255, .18);
  --line-3: rgba(170, 190, 255, .30);
  --text: #EEF1FA;
  --text-2: #A2AAC4;
  --text-3: #646D89;
  --blue: #3156FF;
  --blue-2: #5E7CFF;
  --blue-3: #A9BBFF;
  --glow: 38, 74, 255;
  --mint: #2FD08F;
  --amber: #F2B35A;
  --display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --sans: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  /* stage geometry, per breakpoint */
  --pw: 204px;            /* phone width */
  --cs: 9.6px;            /* card type unit */
  --stage-h: calc(var(--pw) * 2.04 + 44px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--void); }
body {
  margin: 0; background: var(--void); color: var(--text);
  font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
a { color: inherit; }
p, h1, h3, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-3); outline-offset: 4px; border-radius: 6px; }

/* ---------------- sky: stars and a square grid in two depths (fixed, moved by transform only) ---------------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--void); }
.sky__l { position: absolute; inset: -6% -6%; will-change: transform; }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.grid { position: absolute; inset: 0; }
.grid--fine {
  background-image:
    linear-gradient(to right, rgba(150, 172, 255, .034) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 172, 255, .034) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 72%, #000 10%, transparent 78%);
  mask-image: radial-gradient(70% 55% at 50% 72%, #000 10%, transparent 78%);
}
.grid--major {
  background-image:
    linear-gradient(to right, rgba(150, 172, 255, .085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 172, 255, .085) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(85% 62% at 50% 76%, #000 18%, transparent 82%);
  mask-image: radial-gradient(85% 62% at 50% 76%, #000 18%, transparent 82%);
}
.cells { position: absolute; inset: 0; }
.cell {
  position: absolute; width: 95px; height: 95px; margin: 1px 0 0 1px; opacity: 0; will-change: opacity, transform;
  background: radial-gradient(120% 120% at 50% 100%, rgba(var(--glow), .16), rgba(var(--glow), .03) 70%);
  box-shadow: inset 0 1px 0 rgba(170, 190, 255, .12);
}
.twinkles { position: absolute; inset: 0; }
.tw {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; opacity: .2; will-change: opacity, transform;
  background: radial-gradient(circle, rgba(225, 233, 255, .95) 0 1.1px, rgba(150, 175, 255, .35) 1.6px, transparent 4.5px);
}

/* ---------------- top bar ---------------- */
.top {
  position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; padding: 0 var(--gutter); max-width: 1320px; margin: 0 auto;
}
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 8px 0; }
.logo__mark { width: 25px; height: 25px; overflow: visible; }
.logo__cut { fill: var(--blue-2); }
.logo__word { display: inline-flex; font: 600 20px/1 var(--display); letter-spacing: -.035em; color: var(--text); }
.logo__word span { display: inline-block; }
.nav { display: none; }
.nav a { color: var(--text-2); text-decoration: none; font-size: 14px; padding: 10px 0; display: inline-block; }
.nav a:hover { color: var(--text); }
.signin {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  font-size: 14px; color: var(--text); border: 1px solid var(--line-2); background: rgba(14, 20, 38, .6);
}
.signin span { display: inline-block; }
.signin:hover { border-color: var(--line-3); }

/* ---------------- hero ---------------- */
.hero { position: relative; z-index: 2; overflow: hidden; padding: 0 var(--gutter); text-align: center; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(2, 3, 10, 0), var(--void));
}

/* glow: rings rising from the bottom, a haze and a beam behind the phone. Static gradients, breathing by scale and opacity */
.glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.glow > i { position: absolute; left: 50%; will-change: transform, opacity; }
.ring { border-radius: 50%; }
.ring--a {
  --d: 980px; width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2);
  top: calc(100% - var(--stage-h) + 150px);
  background: radial-gradient(closest-side, transparent 86.5%, rgba(var(--glow), .18) 90%, rgba(70, 108, 255, .78) 94.2%, rgba(150, 178, 255, .9) 95.4%, rgba(var(--glow), .45) 96.8%, transparent 100%);
}
.ring--b {
  --d: 1360px; width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2);
  top: calc(100% - var(--stage-h) + 70px);
  background: radial-gradient(closest-side, transparent 91%, rgba(var(--glow), .12) 94%, rgba(84, 120, 255, .5) 97%, rgba(var(--glow), .2) 98.6%, transparent 100%);
}
.ring--c {
  --d: 2300px; width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2);
  top: calc(100% - var(--stage-h) + 10px);
  background: radial-gradient(closest-side, transparent 94.5%, rgba(var(--glow), .14) 97.6%, rgba(var(--glow), .05) 99.2%, transparent 100%);
}
.ring--c { display: none; }
.glow__haze {
  width: 900px; height: 700px; margin-left: -450px; top: calc(100% - var(--stage-h) - 40px);
  background: radial-gradient(50% 50% at 50% 62%, rgba(var(--glow), .34), rgba(var(--glow), .1) 52%, transparent 72%);
}
.glow__beam {
  width: calc(var(--pw) * 1.75); height: calc(var(--stage-h) + 140px); margin-left: calc(var(--pw) * -.875);
  top: calc(100% - var(--stage-h) - 150px); transform-origin: 50% 100%;
  background:
    radial-gradient(48% 58% at 50% 58%, rgba(104, 138, 255, .30), transparent 72%),
    linear-gradient(to top, transparent 10%, rgba(var(--glow), .14) 46%, transparent 92%);
}

.copy { position: relative; z-index: 4; max-width: 1040px; margin: 0 auto; padding-top: 18px; }

.note {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px;
  font-size: 13px; line-height: 1.2; color: var(--text-2); isolation: isolate;
}
.note__bg {
  position: absolute; inset: 0; z-index: -1; border-radius: 999px; transform-origin: 14px 50%;
  background: linear-gradient(180deg, rgba(40, 62, 150, .26), rgba(20, 30, 80, .22));
  border: 1px solid rgba(120, 150, 255, .24);
}
.note__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(47, 208, 143, .16), 0 0 10px rgba(47, 208, 143, .7); }
.note__t, .note__b { display: inline-block; }
.note__b { font-weight: 500; color: var(--text); padding-left: 9px; border-left: 1px solid var(--line-2); }

.h1 {
  position: relative; margin: 16px auto 0; font: 400 clamp(42px, 12.2vw, 58px)/1.02 var(--display);
  letter-spacing: -.04em; color: var(--text); width: max-content; max-width: 100%;
}
.h1__l { display: block; white-space: nowrap; }
/* silver: vertical chrome inside one wide horizontal falloff; JS lines each word up so the gradient reads continuous */
.h1__base .h1__l, .h1 .w {
  background-image:
    radial-gradient(120% 160% at 50% 0%, rgba(255, 255, 255, 0) 52%, rgba(2, 3, 10, .55) 100%),
    linear-gradient(180deg, #FFFFFF 12%, #E2E7F5 48%, #A3ACC6 80%, #7F89A8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.h1.is-split .h1__l { background: none; -webkit-text-fill-color: currentColor; }
.h1 .w { display: inline-block; padding: 0 .04em .12em; margin: 0 -.04em -.12em; will-change: transform; }
.h1 .wm { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .14em; margin: -.06em -.02em -.14em; }
.h1__shine {
  position: absolute; top: 0; bottom: 0; left: 0; width: 34%; overflow: hidden; pointer-events: none;
  opacity: 0; will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
}
.h1__shine-in {
  position: absolute; top: 0; left: 0; width: var(--h1w, 100%); will-change: transform;
  background: linear-gradient(180deg, #FFFFFF 30%, #CFDAFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 14px rgba(150, 178, 255, .55));
}
.h1__shine-in .h1__l { padding-bottom: 0; }

.lede { margin: 14px auto 0; max-width: 30em; font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: balance; }

.cta { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
  text-decoration: none; -webkit-tap-highlight-color: transparent; will-change: transform;
}
.btn__ring {
  position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--glow), .16), rgba(var(--glow), .07));
  border: 1px solid rgba(124, 152, 255, .30);
  box-shadow: inset 0 0 22px rgba(var(--glow), .2), 0 0 44px -8px rgba(var(--glow), .5);
}
.btn__pill {
  position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, #4D6DFF, #2546F2); color: #fff; font: 500 15.5px/1 var(--sans); letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(0, 0, 20, .28), 0 12px 30px -12px rgba(49, 86, 255, .95);
  transform-origin: 100% 50%; will-change: transform;
}
.btn__hi {
  position: absolute; left: 0; top: 0; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 62%); pointer-events: none;
}
.btn__label { position: relative; display: inline-block; white-space: nowrap; }
.btn__chip {
  position: relative; display: inline-flex; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF, #DCE3F7); box-shadow: inset 0 -1px 0 rgba(0, 0, 40, .14), 0 8px 22px -10px rgba(150, 178, 255, .9);
  will-change: transform;
}
.btn__arrow { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; fill: none; stroke: #2546F2; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn__arrow--2 { transform: translate(-30px, 30px); }
.micro { text-wrap: balance; font: 400 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.micro span, .micro i { display: inline-block; font-style: normal; }
.micro i { padding: 0 .6em; }

/* ---------------- stage: phone and floating cards ---------------- */
.stage { position: relative; z-index: 3; margin: 30px auto 0; width: 100%; max-width: 1180px; height: var(--stage-h); }
.stage__floor {
  position: absolute; left: 50%; bottom: 14px; width: calc(var(--pw) * 1.9); height: 60px; margin-left: calc(var(--pw) * -.95);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .85), transparent 70%);
}
.ph-wrap { position: absolute; left: 50%; top: 0; z-index: 2; width: var(--pw); margin-left: calc(var(--pw) / -2); perspective: 1100px; }
.ph {
  position: relative; width: var(--pw); height: calc(var(--pw) * 2.04); border-radius: calc(var(--pw) * .168);
  font-size: calc(var(--pw) / 25); will-change: transform;
  background: linear-gradient(118deg, #2D323D 0%, #A7AEC0 11%, #545B6A 24%, #262A33 48%, #3E4452 70%, #B4BACB 88%, #4A505D 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 2px rgba(0, 0, 0, .5),
    0 60px 90px -40px rgba(0, 0, 0, .95), 0 0 140px -30px rgba(var(--glow), .55);
}
.ph__key { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #1E222A, #8C93A5 60%, #2A2E37); }
.ph__key--a { left: -2px; top: 17%; height: 4.5%; }
.ph__key--b { left: -2px; top: 25%; height: 8%; }
.ph__key--c { left: -2px; top: 35%; height: 8%; }
.ph__key--d { right: -2px; top: 27%; height: 12%; }
.ph__bezel { position: absolute; inset: calc(var(--pw) * .02); border-radius: calc(var(--pw) * .15); background: #050608; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.ph__screen {
  position: absolute; inset: calc(var(--pw) * .028); border-radius: calc(var(--pw) * .124); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #EEF1F8, #F6F7FB 40%); color: #0B1020; text-align: left;
  -webkit-mask-image: linear-gradient(#000, #000);
}
.ph__glare {
  position: absolute; inset: -30% -60%; z-index: 9; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .26) 46%, rgba(255, 255, 255, .06) 52%, transparent 60%);
  opacity: .55;
}

.ph__off {
  position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; border-radius: 16%;
  background: radial-gradient(80% 50% at 50% 10%, #0B0E18, #000 70%); transform-origin: 50% 3.2%; will-change: transform;
}
.anim .ph__off { opacity: 1; }

/* status bar + island */
.sb { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 3.5em; padding: .35em 1.75em 0 2.1em; font: 600 1.06em/1 var(--sans); letter-spacing: -.01em; }
.sb__t { font-size: 1em; }
.sb__ic { display: inline-flex; align-items: center; gap: .32em; }
.sb__sig { width: 1.05em; height: .72em; fill: #0B1020; }
.sb__wifi { width: 1.02em; height: .76em; fill: #0B1020; }
.sb__bat { position: relative; display: inline-block; width: 1.55em; height: .74em; border-radius: .22em; border: 1px solid rgba(11, 16, 32, .45); padding: .1em; }
.sb__bat::after { content: ""; position: absolute; right: -.18em; top: .22em; width: .1em; height: .26em; border-radius: 0 .1em .1em 0; background: rgba(11, 16, 32, .45); }
.sb__bat i { display: block; height: 100%; width: 78%; border-radius: .1em; background: #0B1020; }

.isl { position: absolute; z-index: 5; left: 50%; top: .78em; width: 7.4em; height: 2.2em; margin-left: -3.7em; }
.isl__cap, .isl__mid { position: absolute; top: 0; height: 100%; background: #000; will-change: transform; }
.isl__cap { width: 2.2em; border-radius: 50%; }
.isl__cap--l { left: 0; }
.isl__cap--r { right: 0; }
.isl__mid { left: 1.1em; right: 1.1em; }
.isl__cam { position: absolute; right: .78em; top: .72em; width: .76em; height: .76em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2A3350, #0A0D18 60%); box-shadow: inset 0 0 0 1px rgba(80, 100, 160, .25); }
.isl__in { position: absolute; top: 0; height: 100%; display: flex; align-items: center; opacity: 0; color: #fff; }
.isl__in--l { left: .55em; }
.isl__in--r { right: 1.9em; font: 600 1em/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.isl__in--r b { font-weight: 600; color: #7EF0BF; }
.isl__mark { width: 1.25em; height: 1.25em; fill: #7EF0BF; }

/* app */
.app { position: relative; z-index: 2; padding: 0 1.15em; }
.app__bar { display: flex; align-items: center; gap: .5em; margin-top: .55em; height: 2.2em; }
.app__mark { width: 1.45em; height: 1.45em; fill: #0B1020; overflow: visible; }
.app__mark .c { fill: var(--blue); }
.app__t { font: 600 1.5em/1 var(--display); letter-spacing: -.03em; flex: 1; }
.app__av { width: 2.15em; height: 2.15em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 .74em/1 var(--sans); background: #DCE3F7; color: #2546F2; width: 2.9em; height: 2.9em; }

.sale {
  position: relative; margin-top: .85em; padding: 1.05em 1.1em 1em; border-radius: 1.3em; background: #fff;
  box-shadow: 0 .1em .2em rgba(11, 16, 32, .05), 0 .9em 2em -.9em rgba(37, 70, 242, .28), inset 0 0 0 1px rgba(11, 16, 32, .05);
}
.sale__hd { display: flex; align-items: center; gap: .55em; }
.ok { position: relative; width: 1.65em; height: 1.65em; flex: 0 0 auto; }
.ok__bg { position: absolute; inset: 0; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .3em rgba(47, 208, 143, .16); }
.ok svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sale__st { font: 600 .98em/1 var(--sans); flex: 1; letter-spacing: -.005em; }
.sale__now { font: 500 .78em/1 var(--mono); color: #7A8399; letter-spacing: .02em; }
.sale__amt { margin: .5em 0 .2em; font: 500 2.75em/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.sale__who { font-size: .9em; line-height: 1.3; color: #5A6378; white-space: nowrap; }
.swap { position: relative; display: block; overflow: hidden; height: 1.3em; }
.swap > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split { display: flex; gap: .2em; height: .5em; margin: .85em 0 .75em; }
.split i { display: block; height: 100%; border-radius: .3em; transform-origin: 0 50%; }
.split__k { flex: 0 0 96.9%; background: linear-gradient(90deg, #3156FF, #6F8BFF); }
.split__f { flex: 1; background: #B7BFD2; transform-origin: 100% 50%; }
.sale__rows > div { display: flex; justify-content: space-between; align-items: baseline; padding: .18em 0; }
.sale__rows dt { font-size: .86em; color: #5A6378; display: inline-flex; align-items: center; gap: .45em; }
.sale__rows dd { font: 600 .96em/1.2 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; }
.dot--k { background: var(--blue); }
.dot--f { background: #B7BFD2; }
.sale__id { margin-top: .6em; font: 400 .72em/1.3 var(--mono); color: #8A93A8; letter-spacing: .01em; }
.sale__id .swap { height: 1.3em; }

.rec { margin-top: 1.1em; }
.rec__h { display: flex; justify-content: space-between; align-items: baseline; font: 600 .98em/1 var(--sans); letter-spacing: -.005em; }
.rec__h span { font: 500 .8em/1 var(--sans); color: var(--blue); }
.rec__ul { position: relative; margin-top: .55em; height: 9.6em; overflow: hidden; }
.rec__ul li { position: absolute; left: 0; right: 0; height: 3.2em; display: flex; align-items: center; gap: .65em; border-bottom: 1px solid rgba(11, 16, 32, .06); }
.rec__ul li:nth-child(1) { top: 0; }
.rec__ul li:nth-child(2) { top: 3.2em; }
.rec__ul li:nth-child(3) { top: 6.4em; }
.rec__ul li:nth-child(4) { top: 9.6em; }
.av { flex: 0 0 auto; width: 2.25em; height: 2.25em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 .74em/1 var(--sans); }
.rec__ul .av { width: 3em; height: 3em; }
.av--1 { background: #E1F7EE; color: #138A5B; }
.av--2 { background: #E6E9FF; color: #3048D8; }
.av--3 { background: #FDEFD9; color: #A8650B; }
.av--4 { background: #EDE7FB; color: #6B44C9; }
.av--5 { background: #E3F1FB; color: #1D6E9E; }
.rec__w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25em; }
.rec__w b, .rec__a b { font: 600 .84em/1 var(--sans); letter-spacing: -.005em; }
.rec__w small, .rec__a small { font-size: .7em; line-height: 1; color: #7A8399; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec__a { display: flex; flex-direction: column; align-items: flex-end; gap: .25em; font-variant-numeric: tabular-nums; }

.tabs {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 5.2em; padding: .65em 1.2em 0; display: flex; justify-content: space-around;
  background: rgba(255, 255, 255, .96); border-top: 1px solid rgba(11, 16, 32, .06);
}
.tabs span { display: flex; flex-direction: column; align-items: center; gap: .28em; font: 500 .62em/1 var(--sans); color: #8A93A8; }
.tabs svg { width: 2.25em; height: 2.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabs .on { color: var(--blue); }
.home-ind { position: absolute; z-index: 4; left: 50%; bottom: .5em; width: 8.4em; height: .34em; margin-left: -4.2em; border-radius: 1em; background: #0B1020; }

/* ---------------- floating cards ---------------- */
.slot { position: absolute; z-index: 3; will-change: transform; }
.slot.is-behind { z-index: 1; }
.cd.is-moving { will-change: transform; }
.fl { }
.cd {
  position: relative; font-size: var(--cs); text-align: left; color: var(--text);
  padding: 1.15em 1.25em 1.1em; border-radius: 1.25em;
  background: linear-gradient(180deg, #121A33 0%, #0B1124 55%, #090E1D 100%);
  box-shadow:
    inset 0 1px 0 rgba(200, 214, 255, .12), inset 0 0 0 1px rgba(140, 165, 255, .13),
    0 2.6em 4.4em -2.2em rgba(0, 0, 0, .95), 0 0 3.6em -1.6em rgba(var(--glow), .55);
}
.cd::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(190, 206, 255, .55), transparent);
}
.cd__hd { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.ico { display: inline-flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; border-radius: 50%; }
.ico svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--blue { background: rgba(70, 104, 255, .16); color: #93A8FF; box-shadow: inset 0 0 0 1px rgba(110, 140, 255, .28); }
.ico--mint { background: rgba(47, 208, 143, .12); color: #63E3AE; box-shadow: inset 0 0 0 1px rgba(47, 208, 143, .26); }
.ico--amber { background: rgba(242, 179, 90, .12); color: #F4C27A; box-shadow: inset 0 0 0 1px rgba(242, 179, 90, .26); }
.eye { position: relative; display: inline-flex; width: 1.6em; height: 1.6em; color: var(--text-3); }
.eye svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eye__lid { position: absolute; left: 0; right: 0; top: 18%; height: 64%; background: #10172D; transform: scaleY(0); transform-origin: 50% 0; border-radius: 40%; }
.cd__k { margin-top: .95em; font-size: .92em; line-height: 1.25; color: var(--text-2); }
.cd__big { margin: .32em 0 .26em; font: 400 2.1em/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd__s { font-size: .8em; line-height: 1.3; color: var(--text-3); }
.cd__tag { font: 500 .74em/1 var(--mono); letter-spacing: .04em; color: var(--text-2); padding: .55em .8em; border-radius: 999px; border: 1px solid var(--line-2); }
.cd__row { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-top: .55em; }
.mini-btn { font: 500 .78em/1 var(--sans); color: #fff; padding: .7em 1em; border-radius: 999px; background: linear-gradient(180deg, #4D6DFF, #2546F2); white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.plus { position: absolute; right: 1.3em; top: 3.9em; font: 500 .86em/1 var(--mono); color: #63E3AE; opacity: 0; pointer-events: none; }

/* chart card */
.cd__t { font: 500 1em/1.2 var(--sans); color: var(--text); }
.cd__t small { display: block; font-size: .8em; color: var(--text-3); font-weight: 400; margin-top: .2em; }
.seg { display: inline-flex; padding: .2em; gap: .1em; border-radius: 999px; background: rgba(150, 172, 255, .06); border: 1px solid var(--line); }
.seg i { font: 500 .68em/1 var(--mono); font-style: normal; color: var(--text-3); padding: .55em .7em; border-radius: 999px; letter-spacing: .04em; }
.seg .on { background: rgba(95, 125, 255, .2); color: var(--text); }
.chart { position: relative; height: 7.4em; margin-top: 1em; }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.chart__grid path { stroke: rgba(150, 172, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.chart__area { fill: url(#gArea); }
.chart__line { fill: none; stroke: url(#gLine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__dot, .chart__ring { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.chart__dot { width: .72em; height: .72em; margin: -.36em 0 0 -.36em; background: #E6ECFF; box-shadow: 0 0 0 .22em rgba(95, 125, 255, .45), 0 0 1em rgba(150, 178, 255, .9); }
html:not(.js) .chart__dot, html:not(.js) .chart__tip { display: none; }
.chart__ring { width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border: 1px solid rgba(160, 185, 255, .8); opacity: 0; }
.chart__tip {
  position: absolute; right: 0; top: -.4em; font: 500 .7em/1 var(--mono); color: var(--text-2); letter-spacing: .03em;
  padding: .5em .7em; border-radius: .6em; background: rgba(12, 18, 38, .92); border: 1px solid var(--line-2); white-space: nowrap; will-change: transform;
}
.chart__tip b { color: var(--text); font-weight: 500; }
.chart__x { display: flex; justify-content: space-between; margin-top: .6em; font: 400 .66em/1 var(--mono); color: var(--text-3); letter-spacing: .03em; }

/* refunds card */
.bars { display: flex; align-items: flex-end; gap: .16em; height: 1.6em; margin-top: .75em; }
.bars i { flex: 1; height: 30%; border-radius: .1em; background: rgba(150, 172, 255, .16); transform-origin: 50% 100%; }
.bars i.r { background: var(--amber); height: 100%; }

/* pulses: the sale travelling from the phone to each card */
.pulse {
  position: absolute; left: 0; top: 0; z-index: 4; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #FFFFFF 0 3.6px, rgba(170, 195, 255, .9) 5.4px, rgba(var(--glow), .35) 10.5px, transparent 17px);
  will-change: transform, opacity;
}
.pulse--b { background: radial-gradient(circle, #FFFFFF 0 3px, rgba(150, 178, 255, .85) 4.8px, rgba(var(--glow), .3) 9.8px, transparent 17px); }
.pulse--c { background: radial-gradient(circle, #FFFFFF 0 3.3px, rgba(126, 240, 191, .85) 5.1px, rgba(47, 208, 143, .3) 10.5px, transparent 17px); }

/* odometer */
.odo { display: inline-flex; white-space: nowrap; }
.odo__c {
  position: relative; display: inline-block; height: 1em; overflow: hidden; line-height: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
}
.odo__r { display: block; }
.odo__r > span { display: block; height: 1em; line-height: 1; text-align: center; }
.odo__s { display: inline-block; line-height: 1; }

/* ---------------- slots, phone first: 390. The phone's top half (island, sale, the split) stays clear; the cards gather in front of its lower half */
:root { --stage-h: 520px; }
.slot--chart { left: calc(50% - 183px); top: 300px; width: 178px; }
.slot--net { left: calc(50% + 7px); top: 282px; width: 176px; }
.slot--pay { left: calc(50% - 175px); top: 406px; width: 160px; }
.slot--ref { left: calc(50% + 31px); top: 392px; width: 142px; }
.cd--chart .chart { height: 5.6em; }
.cd--chart .chart__x span:nth-child(2n) { visibility: hidden; }
.cd--chart .seg, .cd--ref .eye, .cd--pay .cd__tag { display: none; }
.cd--chart .cd__t small { display: none; }
.cd--pay .cd__row { display: none; }
.cd--ref .cd__k { margin-top: .7em; }

/* footer */
.foot {
  position: relative; z-index: 4; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  max-width: 1320px; margin: 0 auto; padding: 18px var(--gutter) 22px; border-top: 1px solid var(--line);
  font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.credit { margin-left: auto; text-align: right; }

/* ---------------- first-frame state (only with .anim) ---------------- */
.anim .top, .anim .note, .anim .h1, .anim .lede, .anim .cta, .anim .slot, .anim .ph-wrap, .anim .glow > i { visibility: hidden; }

@media (max-width: 374px) {
  :root { --pw: 196px; --cs: 9.1px; --stage-h: 500px; }
  .slot--chart { left: calc(50% - 176px); top: 288px; width: 170px; }
  .slot--net { left: calc(50% + 6px); top: 270px; width: 168px; }
  .slot--pay { left: calc(50% - 168px); top: 388px; width: 154px; }
  .slot--ref { left: calc(50% + 28px); top: 376px; width: 138px; }
  .credit { max-width: 18em; }
}

/* ---------------- ≥ 760 ---------------- */
@media (min-width: 760px) {
  :root { --pw: 250px; --cs: 11px; --stage-h: calc(var(--pw) * 2.04 + 40px); }
  .top { height: 72px; }
  .nav { display: flex; gap: 30px; position: absolute; left: 50%; transform: translateX(-50%); }
  .copy { padding-top: 26px; }
  .h1 { font-size: clamp(62px, 8.4vw, 76px); margin-top: 18px; }
  .lede { font-size: 18px; max-width: 34em; margin-top: 18px; }
  .cta { margin-top: 28px; }
  .stage { margin-top: 40px; }
  .ring--a { --d: 1500px; top: calc(100% - var(--stage-h) + 120px); }
  .ring--b { --d: 2200px; top: calc(100% - var(--stage-h) + 40px); }
  .ring--c { display: block; --d: 3200px; top: calc(100% - var(--stage-h) - 30px); }
  .glow__haze { width: 1500px; height: 900px; margin-left: -750px; }
  /* tablet: the left of the phone (amount, split, "You keep") stays clear; cards take the right top and the lower half */
  .slot--net { left: calc(50% + 104px); top: 18px; width: 236px; }
  .slot--chart { left: calc(50% - 360px); top: 236px; width: 290px; }
  .slot--ref { left: calc(50% + 110px); top: 262px; width: 200px; }
  .slot--pay { left: calc(50% - 318px); top: 400px; width: 240px; }
  .cd--chart .chart { height: 7.2em; }
  .cd--chart .chart__x span:nth-child(2n) { visibility: visible; }
  .cd--chart .seg, .cd--ref .eye, .cd--pay .cd__tag { display: inline-flex; }
  .cd--chart .cd__t small { display: block; }
  .cd--pay .cd__row { display: flex; }
}

/* ---------------- ≥ 1180 ---------------- */
@media (min-width: 1180px) {
  :root { --pw: 282px; --cs: 12.4px; }
  .top { height: 76px; }
  .copy { padding-top: 20px; }
  .h1 { font-size: clamp(72px, 5.9vw, 88px); margin-top: 18px; }
  .lede { max-width: none; white-space: nowrap; }
  .cta { margin-top: 28px; flex-direction: row; justify-content: center; gap: 22px; }
  .micro { text-align: left; max-width: 25em; line-height: 1.6; }
  .stage { margin-top: 36px; }
  .ring--a { --d: 1700px; top: calc(100% - var(--stage-h) + 110px); }
  .ring--b { --d: 2500px; top: calc(100% - var(--stage-h) + 20px); }
  .ring--c { --d: 3600px; top: calc(100% - var(--stage-h) - 60px); }
  .glow__haze { width: 1900px; height: 1000px; margin-left: -950px; }
  .slot--net { left: calc(50% + 120px); top: 22px; width: 296px; }
  .slot--chart { left: calc(50% - 492px); top: 46px; width: 366px; }
  .slot--ref { left: calc(50% + 126px); top: 214px; width: 232px; }
  .slot--pay { left: calc(50% - 440px); top: 250px; width: 300px; }
}
@media (min-width: 1180px) and (max-height: 820px) {
  .h1 { font-size: clamp(64px, 5.2vw, 76px); }
  .copy { padding-top: 10px; }
  .cta { margin-top: 22px; }
  .stage { margin-top: 28px; }
}
@media (min-width: 1680px) {
  :root { --pw: 300px; --cs: 13px; }
  .slot--net { left: calc(50% + 128px); width: 316px; }
  .slot--chart { left: calc(50% - 520px); width: 390px; }
  .slot--ref { left: calc(50% + 134px); width: 248px; }
  .slot--pay { left: calc(50% - 476px); width: 320px; }
}

@media (hover: hover) { .btn, .signin, .nav a { cursor: pointer; } }
@media (hover: hover) and (pointer: fine) { .ph__glare { will-change: transform; } }

/* embed: no extras below a pixel at thumbnail scale */
.is-embed .twinkles, .is-embed #starsNear { display: none; }
.is-embed .h1__shine { display: none; }