/* ==========================================================================
   iPhone mockup — pure CSS, scales with its own width (container query units).
   Set the size with --w on .iphone. Everything inside is measured in cqw.

   To show a real screenshot or screen recording instead of a built screen,
   replace the .scr element with:  <img class="iphone__media" src="…" alt="…">
   (or a <video class="iphone__media" autoplay muted loop playsinline>).
   ========================================================================== */

.iphone {
  --w: 300px;
  --m1: #cce8df;   /* titanium highlight */
  --m2: #7ca295;   /* titanium mid */
  --m3: #3d4f49;   /* titanium shade */
  --m4: #161f1c;   /* titanium deep */
  position: relative; display: block; flex: none;
  width: var(--w); aspect-ratio: 433 / 890;
  container-type: inline-size;
  perspective: 1500px;
}
.iphone__body {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg));
}

/* side band: stacked slices behind the face give the phone real thickness when it turns */
.iphone__edge {
  position: absolute; inset: 0; border-radius: 17.4cqw;
  background: var(--c, #3d4f49);
  transform: translateZ(calc(var(--i) * -.56cqw));
}
.iphone__edge--back { box-shadow: 0 9cqw 16cqw -4cqw rgba(0, 0, 0, .75); }

.iphone__frame {
  position: absolute; inset: 0; padding: 1.2cqw; border-radius: 17.4cqw;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 13%, rgba(255, 255, 255, 0) 87%, rgba(255, 255, 255, .42) 100%),
    conic-gradient(from 195deg, var(--m2), var(--m1) 9%, var(--m3) 20%, var(--m4) 33%, var(--m2) 47%, var(--m1) 56%, var(--m3) 68%, var(--m4) 82%, var(--m2));
  box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .32), inset 0 0 .5cqw .55cqw rgba(0, 0, 0, .45);
}
.iphone:not(.iphone--3d) .iphone__frame { box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .32), inset 0 0 .5cqw .55cqw rgba(0, 0, 0, .45), 0 10cqw 18cqw -7cqw rgba(0, 0, 0, .85); }

.iphone__glass {
  position: relative; display: block; width: 100%; height: 100%; padding: 2.35cqw; border-radius: 16.2cqw;
  background: #020202;
  box-shadow: inset 0 0 0 .35cqw #000, inset 0 0 0 .6cqw rgba(255, 255, 255, .06);
  overflow: hidden;
}
.iphone__screen {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 13.9cqw; overflow: hidden;
  background: #060807; color: #fff;
  font-size: 3.5cqw; line-height: 1.3;
  isolation: isolate;
}
.iphone__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.iphone__island {
  position: absolute; z-index: 5; top: 5.1cqw; left: 50%;
  width: 28.6cqw; height: 8.4cqw; margin-left: -14.3cqw; border-radius: 10cqw;
  background: #000;
}
.iphone__island::after {
  content: ""; position: absolute; right: 2.9cqw; top: 50%;
  width: 2.5cqw; height: 2.5cqw; margin-top: -1.25cqw; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #2e4f44 0%, #0d1a16 45%, #040706 75%);
  box-shadow: 0 0 0 .45cqw #060908;
}
.iphone__shine {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: linear-gradient(113deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .06) 17%, rgba(255, 255, 255, 0) 29%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, .07) 100%);
  mix-blend-mode: screen;
  transform: translateX(calc(var(--px, 0) * 5%));
}

.iphone__btn {
  position: absolute; width: 1.1cqw; border-radius: .6cqw;
  background: linear-gradient(90deg, var(--m4), var(--m2) 45%, var(--m1) 60%, var(--m3));
  transform: translateZ(-3.6cqw);
}
.iphone__btn--action { left: -.85cqw; top: 23cqw; height: 6.4cqw; }
.iphone__btn--up { left: -.85cqw; top: 34.5cqw; height: 11.6cqw; }
.iphone__btn--down { left: -.85cqw; top: 49cqw; height: 11.6cqw; }
.iphone__btn--power { right: -.85cqw; top: 40cqw; height: 18.5cqw; }

/* ---------- iOS chrome ---------- */
.ios-bar {
  position: absolute; inset: 0 0 auto 0; z-index: 4; height: 13.4cqw;
  padding: 2.6cqw 7.4cqw 0 9.6cqw;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 3.95cqw; font-weight: 650; letter-spacing: -.01em;
}
.ios-bar__r { display: flex; align-items: center; gap: 1.5cqw; }
.ios-bar svg { height: 2.9cqw; width: auto; }
.ios-home {
  position: absolute; z-index: 4; bottom: 2.1cqw; left: 50%;
  width: 33cqw; height: 1.25cqw; margin-left: -16.5cqw; border-radius: 2cqw;
  background: rgba(255, 255, 255, .9);
}

/* ---------- shared screen kit ---------- */
.scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 3.4cqw;
  padding: 15.6cqw 5.4cqw 6.8cqw;
  background: linear-gradient(180deg, #0b1210 0%, #070908 55%);
}
.scr-kicker { font-size: 2.75cqw; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #1fbc88; }
.scr-title { margin-top: 1.2cqw; font-size: 6.5cqw; font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }
.scr-card { border-radius: 4.6cqw; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .075); }
.scr-check { width: 3.6cqw; height: 3.6cqw; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- screen: performance (hero) ---------- */
.perf-top { display: flex; align-items: center; gap: 2.6cqw; }
.perf-top img { width: 8.6cqw; height: 8.6cqw; padding: 1.5cqw; border-radius: 2.6cqw; background: #0f1614; box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .12); }
.perf-top b { display: block; font-size: 3.9cqw; letter-spacing: -.01em; line-height: 1.15; }
.perf-top span { display: block; font-size: 2.75cqw; color: rgba(255, 255, 255, .55); }
.perf-verified {
  margin-left: auto; display: inline-flex; align-items: center; gap: 1cqw;
  padding: 1.1cqw 2.4cqw 1.1cqw 1.8cqw; border-radius: 9cqw;
  font-size: 2.65cqw; font-weight: 700; color: #03241b;
  background: linear-gradient(180deg, #62f2cb, #1fc79b);
}
.perf-verified .scr-check { width: 2.9cqw; height: 2.9cqw; stroke-width: 3.2; }
.perf-hero { margin-top: 1cqw; }
.perf-label { font-size: 2.75cqw; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .56); }
.perf-num {
  font-size: 17cqw; font-weight: 700; letter-spacing: -.055em; line-height: .98;
  background: linear-gradient(180deg, #fff 35%, #39dfa7);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.perf-num small { font-size: .5em; letter-spacing: -.02em; }
.perf-note { font-size: 2.65cqw; color: rgba(255, 255, 255, .46); }
.perf-chart { position: relative; flex: 1; min-height: 30cqw; overflow: hidden; }
.perf-chart svg { position: absolute; inset: 3cqw 0 6cqw; width: 100%; height: calc(100% - 9cqw); overflow: visible; }
.perf-chart__axis { position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 1.7cqw; display: flex; justify-content: space-between; font-size: 2.3cqw; color: rgba(255, 255, 255, .4); font-variant-numeric: tabular-nums; }
.perf-chart__key { position: absolute; left: 3.4cqw; top: 2.6cqw; display: flex; gap: 3cqw; font-size: 2.3cqw; color: rgba(255, 255, 255, .62); }
.perf-chart__key i { display: inline-block; width: 1.8cqw; height: 1.8cqw; margin-right: 1.1cqw; border-radius: 50%; background: #1a9f73; }
.perf-chart__key span + span i { background: #d8be7d; }
.perf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqw; }
.perf-tiles div { padding: 2.6cqw 3.2cqw 2.4cqw; }
.perf-tiles span { display: block; font-size: 2.55cqw; color: rgba(255, 255, 255, .56); }
.perf-tiles b { font-size: 5.7cqw; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.perf-fine { font-size: 2.15cqw; text-align: center; color: rgba(255, 255, 255, .36); }

/* mini chart strokes (also used outside the phone) */
.mini-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mini-line--bt { stroke: #1a9f73; }
.mini-line--live { stroke: #d8be7d; }
.mini-area { stroke: none; }
[data-mini-chart] .mini-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .2, 1) .5s; }
[data-mini-chart] .mini-line--live { transition-duration: .9s; transition-delay: 2.8s; }
[data-mini-chart] .mini-area { opacity: 0; transition: opacity 1.4s ease 2.2s; }
[data-mini-chart].is-in .mini-line { stroke-dashoffset: 0; }
[data-mini-chart].is-in .mini-area { opacity: 1; }

/* ---------- screen: Pattern Alchemy ---------- */
.candles { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 3.2cqw 0 0; overflow: hidden; }
.candles__head { display: flex; align-items: center; justify-content: space-between; padding: 0 3.4cqw; font-size: 3.3cqw; }
.candles__tag {
  display: inline-flex; align-items: center; gap: 1.2cqw; padding: .9cqw 2.2cqw; border-radius: 9cqw;
  font-size: 2.55cqw; font-weight: 650; color: #06261f; background: #e5cf98;
  opacity: 0; transform: scale(.7); transform-origin: 100% 50%;
}
.candles__svg { flex: 1; width: 100%; min-height: 0; }
.cndl { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, .68, 0, 1); transition-delay: calc(var(--i) * 34ms + 200ms); }
.is-live .cndl { opacity: 1; transform: none; }
.cndl line { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cndl--up line { stroke: #e5cf98; } .cndl--up rect { fill: #e5cf98; }
.cndl--dn line { stroke: #1a9f73; } .cndl--dn rect { fill: #1a9f73; }
.candles__scan { fill: url(#scanGrad); opacity: 0; }
.candles__box { fill: rgba(229, 207, 152, .08); stroke: #e5cf98; stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: 0; }
.is-live .candles__scan { animation: scan 5.2s cubic-bezier(.45, 0, .55, 1) infinite 1.1s; }
.is-live .candles__box { animation: found 5.2s ease infinite 1.1s; }
.is-live .candles__tag { animation: tag 5.2s ease infinite 1.1s; }
@keyframes scan { 0% { transform: translateX(-12%); opacity: 0; } 8% { opacity: 1; } 52% { opacity: 1; } 60%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes found { 0%, 34% { opacity: 0; } 42%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tag { 0%, 38% { opacity: 0; transform: scale(.7); } 46%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.7); } }

.weights { padding: 3.2cqw 3.4cqw 2.6cqw; }
.weights p { font-size: 2.9cqw; color: rgba(255, 255, 255, .7); }
.weights__bars { display: flex; align-items: flex-end; gap: 1.5cqw; height: 13cqw; margin-top: 2.2cqw; }
.weights__bars i {
  flex: 1; height: var(--h); border-radius: 1.2cqw 1.2cqw .5cqw .5cqw;
  background: linear-gradient(180deg, #1fbc88, #20765a);
  opacity: calc(.25 + var(--n) * .075);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .9s cubic-bezier(.22, .68, 0, 1); transition-delay: calc(var(--n) * 60ms + 500ms);
}
.weights__bars i:nth-last-child(-n+3) { background: linear-gradient(180deg, #f0deb2, #c89d31); }
.is-live .weights__bars i { transform: none; }
.weights__axis { display: flex; justify-content: space-between; margin-top: 1.4cqw; font-size: 2.3cqw; color: rgba(255, 255, 255, .42); }

/* ---------- screen: Adapt Fusion ---------- */
.fusion { position: relative; flex: 1; min-height: 44cqw; display: grid; place-items: center; }
.fusion__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: .3cqw solid rgba(31, 188, 136, .3); }
.fusion__ring i { position: absolute; left: 50%; top: -1.3cqw; width: 2.6cqw; height: 2.6cqw; margin-left: -1.3cqw; border-radius: 50%; background: #e5cf98; box-shadow: 0 0 3cqw 1cqw rgba(229, 207, 152, .55); }
.fusion__ring i + i { top: auto; bottom: -1.3cqw; background: #1fbc88; box-shadow: 0 0 3cqw 1cqw rgba(31, 188, 136, .6); }
.fusion__ring--1 { width: 26cqw; height: 26cqw; margin: -13cqw; animation: fspin 7s linear infinite; }
.fusion__ring--2 { width: 39cqw; height: 39cqw; margin: -19.5cqw; border-style: dashed; border-color: rgba(229, 207, 152, .28); animation: fspin 13s linear infinite reverse; }
.fusion__ring--3 { width: 52cqw; height: 52cqw; margin: -26cqw; border-color: rgba(255, 255, 255, .1); animation: fspin 21s linear infinite; }
@keyframes fspin { to { transform: rotate(360deg); } }
.fusion__core {
  position: relative; display: grid; place-items: center; width: 16cqw; height: 16cqw; border-radius: 5cqw;
  background: linear-gradient(145deg, #153027, #09120f);
  box-shadow: inset 0 0 0 .3cqw rgba(31, 188, 136, .5), 0 0 9cqw 1cqw rgba(33, 124, 94, .65);
  animation: breathe 3.6s ease-in-out infinite;
}
.fusion__core img { width: 9cqw; height: 9cqw; }
@keyframes breathe { 50% { transform: scale(1.07); box-shadow: inset 0 0 0 .3cqw rgba(31, 188, 136, .7), 0 0 13cqw 2cqw rgba(33, 124, 94, .85); } }
.tune { display: grid; gap: 2.5cqw; padding: 3.6cqw 3.4cqw; }
.tune li { display: grid; grid-template-columns: 15cqw 1fr; align-items: center; gap: 2.4cqw; font-size: 2.75cqw; font-weight: 600; color: rgba(255, 255, 255, .72); }
.tune__track { position: relative; height: 1cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .12); }
.tune__track i { position: absolute; inset: 0; border-radius: inherit; background: #1fbc88; transform-origin: 0 50%; animation: tune var(--t, 4s) ease-in-out infinite alternate; }
.tune__track b { position: absolute; top: 50%; left: 0; width: 100%; height: 0; animation: knob var(--t, 4s) ease-in-out infinite alternate; }
.tune__track b::after { content: ""; position: absolute; right: -1.5cqw; top: -1.5cqw; width: 3cqw; height: 3cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 2cqw rgba(255, 255, 255, .6); }
@keyframes tune { from { transform: scaleX(var(--a)); } to { transform: scaleX(var(--b)); } }
@keyframes knob { from { width: calc(var(--a) * 100%); } to { width: calc(var(--b) * 100%); } }

/* ---------- screen: range of currencies ---------- */
.donut { position: relative; width: 54cqw; height: 54cqw; margin: 2cqw auto 1cqw; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut circle { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 290; transition: stroke-dasharray 1s cubic-bezier(.22, .68, 0, 1); transition-delay: calc(var(--n) * 130ms + 300ms); }
.is-live .donut circle { stroke-dasharray: 49 241; }
.donut__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut__c b { font-size: 15cqw; font-weight: 700; letter-spacing: -.05em; line-height: .9; }
.donut__c span { font-size: 2.9cqw; color: rgba(255, 255, 255, .6); }
.pairs { flex: 1; display: grid; align-content: space-between; gap: 1.6cqw; }
.pairs li {
  display: flex; align-items: center; gap: 2.6cqw; padding: 3.1cqw 3.4cqw;
  opacity: 0; transform: translateX(4cqw);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22, .68, 0, 1); transition-delay: calc(var(--n) * 90ms + 500ms);
}
.is-live .pairs li { opacity: 1; transform: none; }
.pairs i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--c); box-shadow: 0 0 2.4cqw var(--c); flex: none; }
.pairs b { font-size: 3.6cqw; letter-spacing: .01em; }
.pairs em { margin-left: auto; font-style: normal; font-size: 2.5cqw; color: rgba(255, 255, 255, .5); }

/* ---------- screen: plug-and-play ---------- */
.mt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.mt { display: grid; justify-items: start; gap: 1.8cqw; padding: 4cqw 3.6cqw; }
.mt__logo { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 3.2cqw; font-size: 3.3cqw; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(145deg, #214438, #0e1915); box-shadow: inset 0 0 0 .25cqw rgba(31, 188, 136, .45); }
.mt b { font-size: 3.4cqw; letter-spacing: -.01em; }
.mt em { display: inline-flex; align-items: center; gap: 1.2cqw; font-style: normal; font-size: 2.6cqw; font-weight: 600; color: #e5cf98; }
.algo { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 4cqw 3.6cqw; background: rgba(33, 124, 94, .2); }
.algo b { display: block; font-size: 3.9cqw; letter-spacing: -.01em; }
.algo span.algo__state { display: flex; align-items: center; gap: 1.5cqw; margin-top: .8cqw; font-size: 2.65cqw; color: rgba(255, 255, 255, .7); }
.algo__state::before { content: ""; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: background .4s 2.5s, box-shadow .4s 2.5s; }
.is-live .algo__state::before { background: #e5cf98; box-shadow: 0 0 2.4cqw #e5cf98; }
.toggle { position: relative; flex: none; width: 15cqw; height: 9cqw; border-radius: 9cqw; background: rgba(255, 255, 255, .16); transition: background .5s 2.4s; }
.toggle i { position: absolute; top: .8cqw; left: .8cqw; width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: #fff; box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .4); transition: transform .6s cubic-bezier(.34, 1.45, .64, 1) 2.4s; }
.is-live .toggle { background: #c89d31; }
.is-live .toggle i { transform: translateX(6cqw); }
.setup { position: relative; flex: 1; display: grid; align-content: space-evenly; padding: 2cqw 4cqw; }
.setup::before { content: ""; position: absolute; left: 6.6cqw; top: 13%; bottom: 13%; width: .3cqw; background: rgba(255, 255, 255, .12); }
.setup::after { content: ""; position: absolute; left: 6.6cqw; top: 13%; bottom: 13%; width: .3cqw; background: linear-gradient(180deg, #1a9f73, #e5cf98); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.5s cubic-bezier(.4, 0, .2, 1) .6s; }
.is-live .setup::after { transform: none; }
.setup li { position: relative; z-index: 1; display: flex; align-items: center; gap: 3.2cqw; font-size: 3.4cqw; font-weight: 600; color: rgba(255, 255, 255, .5); transition: color .4s; transition-delay: calc(var(--n) * 420ms + 600ms); }
.setup li small { display: block; font-size: 2.5cqw; font-weight: 500; color: rgba(255, 255, 255, .4); }
.setup i { position: relative; flex: none; width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: #101a16; box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .25); transition: background .4s, box-shadow .4s; transition-delay: calc(var(--n) * 420ms + 600ms); }
.setup i::after { content: ""; position: absolute; left: 34%; top: 22%; width: 26%; height: 44%; border: solid #03241b; border-width: 0 .55cqw .55cqw 0; transform: rotate(45deg) scale(0); transition: transform .4s cubic-bezier(.34, 1.45, .64, 1); transition-delay: calc(var(--n) * 420ms + 700ms); }
.is-live .setup li { color: #fff; }
.is-live .setup i { background: #e5cf98; box-shadow: 0 0 3cqw rgba(229, 207, 152, .6); }
.is-live .setup i::after { transform: rotate(45deg) scale(1); }

/* ---------- small phones: testimonial covers ---------- */
.iphone--cover .iphone__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 58%, rgba(3, 5, 5, .82) 100%);
}