/* NextGen Client – homepage section "Everything now happens in the app" (V48).
   An animated phone: NFC waves around the logo, stamps that fill one by one and the store
   buttons right on the screen. The phone stays beside the text on every screen size. */

.ngc-app-section .ngc-app-grid{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(18px,5vw,64px);align-items:center}
.ngc-app-visual{display:grid;place-items:center;min-height:0}

/* ---------- phone (everything inside scales with the phone: cqw = % of the screen width) ---------- */
.ngc-phone.ngc-phone-live{
    /* width and height are set explicitly (no aspect-ratio): Safari on iPhone otherwise cuts the phone short */
    --pw:272px;box-sizing:border-box;width:var(--pw);height:calc(var(--pw) * 2.05);aspect-ratio:auto;border-radius:44px;padding:11px;
    container-type:inline-size;animation:ngcPlFloat 6s ease-in-out infinite;will-change:transform
}
.ngc-phone-live .ngc-phone-screen{
    position:relative;overflow:hidden;justify-content:flex-start;gap:0;box-sizing:border-box;height:100%;min-height:0;
    padding:15cqw 6cqw 6cqw;border-radius:34px;
    background:radial-gradient(120% 60% at 50% 18%,#F1F7F2 0%,rgba(241,247,242,0) 70%),linear-gradient(180deg,#FFFDF8,#F7F5EF)
}
.ngc-pl-island{position:absolute;top:4cqw;left:50%;width:30%;height:4.5cqw;border-radius:999px;background:#17231B;transform:translateX(-50%)}

/* NFC waves around the logo */
.ngc-pl-tap{position:relative;display:grid;place-items:center;flex:none;width:42cqw;height:42cqw;margin:1cqw 0 6cqw}
.ngc-pl-logo{position:relative;z-index:2;display:grid;place-items:center;width:26cqw;height:26cqw;border-radius:50%;background:#fff;box-shadow:0 10px 26px rgba(23,58,36,.16),0 0 0 1px rgba(46,111,64,.12);animation:ngcPlTap 3s cubic-bezier(.4,0,.2,1) infinite}
.ngc-pl-logo img{width:62%;height:auto;object-fit:contain}
.ngc-pl-wave{position:absolute;inset:18%;border-radius:50%;border:2px solid rgba(46,111,64,.55);opacity:0;animation:ngcPlWave 3s ease-out infinite}
.ngc-pl-wave:nth-child(2){animation-delay:.45s}
.ngc-pl-wave:nth-child(3){animation-delay:.9s}

.ngc-phone-live .ngc-pl-title{font:800 6.8cqw/1.15 Manrope,Inter,sans-serif;color:#171B18;letter-spacing:-.2px;white-space:nowrap}
.ngc-phone-live .ngc-pl-sub{margin-top:1.5cqw;font-size:4.5cqw;line-height:1.35;color:#727972}

/* stamps fill one after another, then start again */
.ngc-pl-stamps{display:flex;gap:2.4cqw;margin:6cqw 0 0}
.ngc-pl-stamps i{display:block;flex:none;width:7.6cqw;height:7.6cqw;box-sizing:border-box;border-radius:50%;border:1.5px dashed rgba(46,111,64,.4);background:transparent;animation:ngcPlStamp 6s cubic-bezier(.2,.8,.2,1.2) infinite}
.ngc-pl-stamps i:nth-child(2){animation-delay:.55s}
.ngc-pl-stamps i:nth-child(3){animation-delay:1.1s}
.ngc-pl-stamps i:nth-child(4){animation-delay:1.65s}
.ngc-pl-stamps i:nth-child(5){animation-delay:2.2s}

/* "Stamp saved" pops up with every new stamp */
.ngc-phone-live .ngc-pl-toast{display:inline-flex;align-items:center;gap:2.4cqw;margin-top:7cqw;padding:2.2cqw 4.6cqw;border-radius:999px;background:#fff;box-shadow:0 8px 20px rgba(23,58,36,.12);font:700 4.4cqw/1 Inter,sans-serif;color:#171B18;white-space:nowrap;opacity:0;animation:ngcPlToast 6s ease-in-out .3s infinite}
.ngc-phone-live .ngc-pl-toast b{display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border-radius:50%;background:#2E6F40;color:#fff;font-size:3.6cqw}

/* store buttons on the screen */
.ngc-pl-stores{margin-top:auto;width:100%;display:grid;gap:2.6cqw;animation:ngcPlRise .9s .3s cubic-bezier(.2,.8,.2,1) both}
.ngc-phone-live .ngc-pl-get{font:800 3.6cqw/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#2E6F40}
.ngc-pl-stores .ngc-stores{display:grid;gap:2.6cqw;width:100%}
.ngc-pl-stores .ngc-store{position:relative;overflow:hidden;width:100%;min-height:0;flex:none;justify-content:flex-start;gap:3cqw;padding:2.8cqw 4cqw;border-radius:4.6cqw;text-align:left}
.ngc-phone-live .ngc-store span{color:inherit;font-size:inherit}
.ngc-pl-stores .ngc-store svg{width:7.6cqw;height:7.6cqw;flex:0 0 auto}
.ngc-pl-stores .ngc-store small{font-size:3.4cqw;line-height:1.1}
.ngc-pl-stores .ngc-store b{font-size:5.2cqw;line-height:1.15}
.ngc-pl-stores .ngc-store-soon em{font-size:3cqw;padding:.6cqw 1.8cqw}
/* light sweep over the Google Play button */
.ngc-pl-stores .ngc-store-play::after{content:"";position:absolute;inset:-20% auto -20% -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:ngcPlShine 4.5s ease-in-out 1.2s infinite}

@keyframes ngcPlFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes ngcPlTap{0%,62%,100%{transform:scale(1)}70%{transform:scale(.9)}78%{transform:scale(1.06)}}
@keyframes ngcPlWave{0%{opacity:0;transform:scale(.7)}15%{opacity:.85}100%{opacity:0;transform:scale(1.75)}}
@keyframes ngcPlStamp{
    0%,8%{background:transparent;border-color:rgba(46,111,64,.4);transform:scale(1)}
    13%{background:#2E6F40;border:1.5px solid #2E6F40;transform:scale(1.28)}
    18%,82%{background:#2E6F40;border:1.5px solid #2E6F40;transform:scale(1)}
    92%,100%{background:transparent;border-color:rgba(46,111,64,.4);transform:scale(1)}
}
@keyframes ngcPlRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ngcPlShine{0%,60%{left:-60%}100%{left:130%}}
@keyframes ngcPlToast{0%,6%{opacity:0;transform:translateY(8px) scale(.92)}12%,40%{opacity:1;transform:none}48%,100%{opacity:0;transform:translateY(-6px)}}

/* ---------- tablets and phones: phone stays beside the text ---------- */
@media (max-width:1080px){
    .ngc-app-section .ng-feature-grid.ngc-app-grid{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
    .ngc-phone.ngc-phone-live{--pw:236px;border-radius:40px;padding:10px}
    .ngc-phone-live .ngc-phone-screen{border-radius:31px}
}
@media (max-width:760px){
    .ngc-app-section .ng-feature-grid.ngc-app-grid{grid-template-columns:minmax(0,1fr) auto;gap:16px 18px;align-items:start}
    /* headline and intro across the full width, the three points and the phone side by side */
    .ngc-app-copy{display:contents}
    .ngc-app-copy .ng-kicker,.ngc-app-copy h2,.ngc-app-copy>p{grid-column:1/-1}
    .ngc-app-copy h2{margin-bottom:0!important}
    .ngc-app-copy>p{grid-row:3}
    .ngc-app-copy .ngc-app-points{grid-column:1;grid-row:4;align-self:center;margin:0!important;gap:14px!important}
    .ngc-app-copy .ngc-app-points li{font-size:14px!important;line-height:1.45!important}
    .ngc-app-visual{grid-column:2;grid-row:4;align-self:center}
    /* real phone proportions on every phone: the width sets the size, the height always follows */
    html body .ngc-phone.ngc-phone-live{--pw:clamp(130px,38vw,184px);width:var(--pw);height:calc(var(--pw) * 2.02)!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;border-radius:28px;padding:6px}
    .ngc-phone-live .ngc-phone-screen{border-radius:23px}
}
@media (prefers-reduced-motion:reduce){
    .ngc-phone.ngc-phone-live,.ngc-pl-logo,.ngc-pl-wave,.ngc-pl-stamps i,.ngc-pl-stores,.ngc-pl-toast,.ngc-pl-stores .ngc-store-play::after{animation:none!important}
    .ngc-pl-stamps i:nth-child(-n+3){background:#2E6F40;border:1.5px solid #2E6F40}
    .ngc-pl-toast{opacity:1}
}