/* home-phone.css - the hero phone: a miniature of the real dashboard with six services orbiting it. */
.hp-stage{position:relative;display:grid;place-items:center;min-height:640px;isolation:isolate;perspective:1400px}
.hx{overflow-x:clip}
.hp-stage:after{content:"";position:absolute;left:50%;bottom:3%;width:62%;height:34px;transform:translateX(-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(8,40,28,.55) 0%,rgba(8,40,28,.22) 45%,transparent 72%);filter:blur(10px)}
.hp-glow{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;z-index:-1;filter:blur(46px);opacity:.8;-webkit-mask-image:radial-gradient(circle,#000 38%,transparent 70%);mask-image:radial-gradient(circle,#000 38%,transparent 70%);
  background:conic-gradient(from 0deg,rgba(14,159,110,.38),rgba(242,183,5,.26),rgba(167,139,250,.30),rgba(251,113,133,.26),rgba(14,159,110,.38));animation:hpSpin 22s linear infinite}
@keyframes hpSpin{to{transform:rotate(360deg)}}

/* ---- phone ---- (every size inside is in em, so the whole screen scales with --u) */
.hp-phone{position:relative;width:300px;border-radius:44px;padding:8px;
  background:linear-gradient(135deg,#6b7a75 0%,#2a3531 18%,#0d1512 50%,#2a3531 82%,#5d6b66 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 0 2.5px #0a100e inset,
    0 1px 0 rgba(255,255,255,.5),
    0 38px 60px -22px rgba(7,35,25,.7),0 18px 28px -14px rgba(7,35,25,.45),0 0 70px -10px rgba(14,159,110,.35);
  transform:rotateY(var(--ry,-9deg)) rotateX(var(--rx,3deg)) rotateZ(-1deg);transition:transform .25s ease-out;will-change:transform;animation:hpRise .9s cubic-bezier(.2,.8,.2,1) both}
/* side buttons */
.hp-phone:before{content:"";position:absolute;left:-3px;top:112px;width:3px;height:30px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#1b2420,#56655f);
  box-shadow:0 44px 0 #3a4743,0 90px 0 #3a4743}
.hp-phone:after{content:"";position:absolute;right:-3px;top:150px;width:3px;height:62px;border-radius:0 2px 2px 0;background:linear-gradient(270deg,#1b2420,#56655f)}
@keyframes hpRise{from{opacity:0;transform:translateY(40px) scale(.94)}}
.hp-island{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:82px;height:23px;border-radius:99px;background:#030605;z-index:6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hp-island:after{content:"";position:absolute;right:9px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3b6b,#0a0f1f 70%)}
.hp-screen{position:relative;border-radius:36px;background:#f3f7f5;overflow:hidden;height:600px;font-size:10px;color:#0f1b17;display:flex;flex-direction:column}
.hp-screen:before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 22%,transparent 42%)}
.hp-screen:after{content:"";position:absolute;left:50%;bottom:5px;width:92px;height:4px;margin-left:-46px;border-radius:9px;background:#0f1b17;opacity:.8;z-index:7}
.hp-status{display:flex;justify-content:space-between;align-items:center;padding:10px 24px 0;font-weight:700;font-size:1.1em;height:3em;flex:none;background:#f3f7f5}
.hp-sig{display:inline-flex;gap:2px;align-items:flex-end;height:10px}.hp-sig i{width:3px;background:#0f1b17;border-radius:2px}
.hp-sig i:nth-child(1){height:4px}.hp-sig i:nth-child(2){height:6px}.hp-sig i:nth-child(3){height:8px}.hp-sig i:nth-child(4){height:10px}
.hp-appbar{flex:none;display:flex;align-items:center;gap:.5em;padding:.5em 1.2em .7em;background:#f3f7f5;border-bottom:1px solid #e6eeea;position:relative;z-index:2}
.hp-appbar b{flex:1;font-family:var(--font-display);font-size:1.5em;letter-spacing:-.02em}
.hp-ib{position:relative;width:2.7em;height:2.7em;border-radius:.95em;background:#fff;display:grid;place-items:center;font-size:1.45em;box-shadow:0 1px 3px rgba(15,27,23,.08)}
.hp-ib .ico{font-size:1em;width:1em;height:1em}
.hp-ib em{position:absolute;top:-.35em;right:-.35em;min-width:1.5em;height:1.5em;border-radius:99px;background:#e11d48;color:#fff;font:700 .62em/1.5em var(--font-body,sans-serif);text-align:center;font-style:normal;animation:hpBlink 2.4s infinite}
@keyframes hpBlink{50%{transform:scale(1.25)}}
.hp-pill{display:inline-flex;align-items:center;gap:.4em;background:#0f1b17;color:#fff;font-weight:700;font-size:1.15em;padding:.65em .9em;border-radius:1.1em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hp-pill .ico{width:1.1em;height:1.1em}
.hp-view{flex:1;min-height:0;overflow:hidden;position:relative}
.hp-scroll{padding:.9em 1.2em 1.2em;display:flex;flex-direction:column;gap:.8em;animation:hpScroll 18s ease-in-out 2.5s infinite;will-change:transform}
.hp-screen:hover .hp-scroll{animation-play-state:paused}
@keyframes hpScroll{0%,18%{transform:none}48%,64%{transform:translateY(calc(-1 * var(--hp-dy,260px)))}94%,100%{transform:none}}
.hp-greet b{display:block;font-family:var(--font-display);font-size:1.4em;letter-spacing:-.025em}.hp-greet span{font-size:.95em;color:#7b8c86}

.hp-wallet{position:relative;overflow:hidden;color:#fff;padding:1.15em 1.25em;border-radius:2em;isolation:isolate;
  background:radial-gradient(90% 120% at 100% 0%,#3ddba0 0%,transparent 55%),radial-gradient(70% 90% at 0% 100%,rgba(242,183,5,.35),transparent 60%),linear-gradient(140deg,#0c9467,#06573d);
  box-shadow:0 22px 40px -22px rgba(6,87,61,.9)}
.hp-wallet:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.3px);background-size:16px 16px;-webkit-mask-image:linear-gradient(120deg,transparent 20%,#000);mask-image:linear-gradient(120deg,transparent 20%,#000)}
.hp-wallet:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);transform:translateX(-120%);animation:hpShine 5s ease-in-out 1.6s infinite}
@keyframes hpShine{60%,100%{transform:translateX(120%)}}
.hp-w-row{display:flex;justify-content:space-between;align-items:center;font-size:1.1em;font-weight:600}
.hp-w-row .ico{width:1.2em;height:1.2em;vertical-align:-.2em}
.hp-tier{display:inline-flex;align-items:center;gap:.4em;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:.45em .8em;border-radius:99px;font-weight:700}
.hp-amt{display:flex;align-items:center;gap:.4em;font-family:var(--font-display);font-weight:800;font-size:2.55em;letter-spacing:-.03em;margin:.25em 0 0;font-variant-numeric:tabular-nums;line-height:1.1}
.hp-eye{display:grid;place-items:center;width:1.1em;height:1.1em;border-radius:.35em;background:rgba(255,255,255,.2);font-size:.5em;font-style:normal}.hp-eye .ico{width:.8em;height:.8em}
.hp-prog{display:flex;justify-content:space-between;font-size:.95em;font-weight:600;opacity:.92;margin-top:.5em}
.hp-bar{height:.5em;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden;margin:.4em 0 .9em}
.hp-bar i{display:block;height:100%;width:0;border-radius:9px;background:rgba(255,255,255,.85);animation:hpFill 1.6s .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hpFill{to{width:96%}}
.hp-w-act{display:flex;gap:.8em}
.hp-w-act span{flex:1;display:flex;justify-content:center;align-items:center;gap:.5em;padding:.75em 0;border-radius:1.3em;font-weight:700;font-size:1.1em}
.hp-w-act .solid{background:#fff;color:#0a7d56}.hp-w-act .glass{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35)}
.hp-w-act .ico{width:1.1em;height:1.1em}
.hp-h{font-family:var(--font-display);font-weight:800;font-size:1.4em;letter-spacing:-.02em;margin-top:.1em}

.hp-big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em}
.hp-bt{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:.8em .8em .75em;min-height:0;aspect-ratio:1/1;border-radius:1.6em;color:#fff;
  background:linear-gradient(155deg,var(--a),var(--b));box-shadow:0 14px 22px -16px var(--b);animation:hpTile 10.8s ease-in-out infinite}
.hp-bt:after{content:"";position:absolute;right:-2.2em;bottom:-2.6em;width:7em;height:7em;border-radius:50%;background:rgba(255,255,255,.14)}
.hp-bt i{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:.9em;background:rgba(255,255,255,.22);font-style:normal;margin-bottom:auto}.hp-bt i .ico{width:1.45em;height:1.45em}
.hp-bt b{margin-top:.45em;font-size:1em;line-height:1.15;font-weight:700;position:relative;z-index:1}.hp-bt span{font-size:.82em;opacity:.88;position:relative;z-index:1}
.hp-small{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9em .3em;background:#fff;border:1px solid #e6eeea;border-radius:1.8em;padding:1em .4em .9em}
.hp-st{display:flex;flex-direction:column;align-items:center;gap:.55em;text-align:center;font-size:.92em;font-weight:600;line-height:1.2;animation:hpTile 10.8s ease-in-out infinite}
.hp-st i{display:grid;place-items:center;width:3.7em;height:3.7em;border-radius:1.3em;font-style:normal;color:var(--b);background:color-mix(in srgb,var(--a) 18%,#fff)}.hp-st i .ico{width:1.8em;height:1.8em}
.hp-bt.t1{animation-delay:0s}.hp-bt.t2{animation-delay:1.8s}.hp-bt.t3{animation-delay:3.6s}.hp-st.t4{animation-delay:5.4s}.hp-st.t5{animation-delay:7.2s}.hp-st.t6{animation-delay:9s}
@keyframes hpTile{0%,16%,100%{transform:none}4%,12%{transform:translateY(-.4em) scale(1.06)}}

.hp-stats{display:grid;grid-template-columns:1fr 1fr;gap:.8em}
.hp-stats>div{display:flex;align-items:center;gap:.8em;background:#fff;border:1px solid #e6eeea;border-radius:1.8em;padding:1em}
.hp-stats i{flex:none;display:grid;place-items:center;width:3.8em;height:3.8em;border-radius:1.2em;font-style:normal;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}.hp-stats i .ico{width:1.8em;height:1.8em}
.hp-stats p,.hp-row p,.hp-promo p{margin:0;min-width:0}
.hp-stats b{display:block;font-family:var(--font-display);font-size:1.6em;letter-spacing:-.03em;line-height:1.1}.hp-stats span{font-size:1.05em;color:#7b8c86}
.hp-card{background:#fff;border:1px solid #e6eeea;border-radius:2em;padding:1.2em 1.3em}
.hp-ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6em}.hp-ch b{font-family:var(--font-display);font-size:1.5em}.hp-ch span{color:#0E9F6E;font-weight:700;font-size:1.1em}
.hp-row{display:flex;align-items:center;gap:.9em;padding:.8em 0;border-top:1px solid #eef3f1}
.hp-row i{flex:none;display:grid;place-items:center;width:3.6em;height:3.6em;border-radius:50%;font-style:normal;color:var(--c);background:color-mix(in srgb,var(--c) 13%,#fff)}.hp-row i .ico{width:1.6em;height:1.6em}
.hp-row p{flex:1}.hp-row b{display:block;font-size:1.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp-row span{font-size:.98em;color:#7b8c86}
.hp-row em{font-style:normal;font-weight:800;font-size:1.15em;font-variant-numeric:tabular-nums}.hp-row .in{color:#0E9F6E}
.hp-promo{display:flex;align-items:center;gap:1em;padding:1.3em;border-radius:2em;color:#fff;background:linear-gradient(120deg,#0f1b17 55%,#6b5200)}
.hp-promo i{flex:none;display:grid;place-items:center;width:4.2em;height:4.2em;border-radius:1.3em;background:rgba(255,255,255,.12);font-style:normal;color:#fbbf24}.hp-promo i .ico{width:2em;height:2em}
.hp-promo b{display:block;font-size:1.25em;line-height:1.25}.hp-promo span{font-size:1em;opacity:.85}
.hp-nav{flex:none;display:grid;grid-template-columns:repeat(5,1fr);margin:0 .8em 1.3em;padding:.45em .3em;background:#fff;border-radius:2em;box-shadow:0 10px 24px -10px rgba(15,27,23,.3);position:relative;z-index:2}
.hp-nav span{display:flex;flex-direction:column;align-items:center;gap:.25em;font-size:.9em;color:#8a9893;font-weight:600;padding:.5em .1em;border-radius:1.4em;white-space:nowrap}
.hp-nav .ico{width:2em;height:2em}.hp-nav .on{color:#0E9F6E;background:#e8f7f0}

/* ---- floating service cards ---- */
.hp-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:8px 13px 8px 8px;box-shadow:0 18px 34px -14px rgba(15,27,23,.32),0 2px 6px rgba(15,27,23,.06);
  opacity:0;animation:hpPop .7s cubic-bezier(.2,.9,.3,1.3) forwards,hpFloat 6.5s ease-in-out infinite,hpChip 10.8s ease-in-out infinite;
  animation-delay:calc(.35s + var(--i,0) * .12s),calc(1.2s + var(--f,0s)),var(--d,0s)}
.hp-chip i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;color:#fff;font-size:18px;background:linear-gradient(140deg,var(--a),var(--b));box-shadow:0 8px 14px -8px var(--b)}
.hp-chip b{display:block;font-size:12.5px;letter-spacing:-.01em;white-space:nowrap;color:#0f1b17}.hp-chip small{display:block;font-size:10.5px;color:#64748b;white-space:nowrap}
@keyframes hpPop{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}
@keyframes hpFloat{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes hpChip{0%,16%,100%{box-shadow:0 22px 44px -16px rgba(15,27,23,.38)}4%,12%{box-shadow:0 0 0 3px var(--a),0 26px 46px -12px var(--b)}}
.hp-chip.k1{--i:0;--f:0s;--d:0s}.hp-chip.k2{--i:1;--f:-1.4s;--d:1.8s}.hp-chip.k3{--i:2;--f:-2.8s;--d:3.6s}
.hp-chip.k4{--i:3;--f:-4.2s;--d:5.4s}.hp-chip.k5{--i:4;--f:-5.6s;--d:7.2s}.hp-chip.k6{--i:5;--f:-3.5s;--d:9s}
.hp-chip.l1{top:5%;left:-2%}.hp-chip.l2{top:34%;left:-9%}.hp-chip.l3{top:79%;left:-3%}
.hp-chip.r1{top:12%;right:-3%}.hp-chip.r2{top:43%;right:-9%}.hp-chip.r3{top:87%;right:-1%}

@media (max-width:991.98px){.hp-stage{min-height:620px}}
@media (max-width:575.98px){
  .hp-stage{min-height:560px}
  .hp-phone{width:236px;border-radius:36px;padding:6px}
  .hp-phone:before{top:86px;height:22px;box-shadow:0 32px 0 #3a4743,0 66px 0 #3a4743}.hp-phone:after{top:112px;height:46px}
  .hp-screen{height:474px;border-radius:30px;font-size:7.6px}
  .hp-island{top:13px;width:64px;height:18px}
  .hp-chip{flex-direction:column;gap:4px;width:64px;padding:7px 4px 6px;border-radius:15px;text-align:center}
  .hp-chip i{width:30px;height:30px;font-size:15px;border-radius:10px}
  .hp-chip b{font-size:9px;white-space:normal;line-height:1.15}.hp-chip small{display:none}
  .hp-chip.l1{top:6%;left:0}.hp-chip.l2{top:35%;left:0}.hp-chip.l3{top:64%;left:0}
  .hp-chip.r1{top:12%;right:0}.hp-chip.r2{top:41%;right:0}.hp-chip.r3{top:70%;right:0}
}
@media (prefers-reduced-motion:reduce){
  .hp-glow,.hp-phone,.hp-chip,.hp-bt,.hp-st,.hp-scroll,.hp-wallet:after,.hp-ib em{animation:none!important}
  .hp-chip{opacity:1}.hp-bar i{animation:none;width:96%}
}