/* ============ NFC LAB: animations & micro-interactions ============ */

/* ---------- Hero: orbit system ---------- */
.orbit{display:none}
.orbit-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.orbit-layer.back{z-index:-1}
.orbit-layer.front{z-index:3}
.orbit-layer .ring{fill:none;stroke:var(--accent);stroke-width:1}
.orbit-layer.back .ring{opacity:.22}
.orbit-layer.back .ring.dashed{stroke-dasharray:2 7;opacity:.35}
.orbit-layer.front .ring{opacity:.38}
.orbit-layer.front .ring.dashed{stroke-dasharray:2 7;opacity:.5}
.orbit-layer .dot{fill:var(--accent);stroke:none}
.orbit-layer .dot.head{filter:drop-shadow(0 0 6px var(--accent))}
.orbit-layer .spark{fill:var(--accent);stroke:none;opacity:0;animation:spark 4s ease-in-out infinite}
@keyframes spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.8;transform:scale(1)}}
.orbit-layer .spark{transform-box:fill-box;transform-origin:center}

.connected-badge{z-index:4}
.visual-label,.visual-bottom{z-index:4}

/* ---------- Hero: floating card + mouse tilt + shine ---------- */
.product-card{
  transform:perspective(1100px) rotateY(calc(-13deg + var(--tilt-y,0deg))) rotateX(var(--tilt-x,0deg)) rotateZ(-10deg);
  animation:card-float 6s ease-in-out infinite;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes card-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.card-shine{position:absolute;inset:-20%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.13) 50%,transparent 60%);
  transform:translateX(-120%);animation:shine 6s ease-in-out infinite 1.5s}
@keyframes shine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}

/* Phone "taps" the card, NFC pulse fires, badge confirms */
.phone-preview{animation:phone-tap 7s cubic-bezier(.45,0,.25,1) infinite;z-index:6}
@keyframes phone-tap{
  0%,12%{translate:0 0;rotate:0deg}
  22%{translate:-20px -10px;rotate:-10deg}
  27%{translate:-28px -4px;rotate:-17deg}
  31%,39%{translate:-26px -5px;rotate:-14deg}
  52%{translate:2px -2px;rotate:2deg}
  58%,100%{translate:0 0;rotate:0deg}
}
.tap-pulse{position:absolute;right:168px;bottom:200px;width:20px;height:20px;z-index:7;pointer-events:none}
.tap-pulse i{position:absolute;inset:0;border:1.5px solid var(--accent);border-radius:50%;opacity:0;animation:tap-wave 7s ease-out infinite}
.tap-pulse i:nth-child(2){animation-delay:.25s}
.tap-pulse i:nth-child(3){animation-delay:.5s}
@keyframes tap-wave{0%,26%{transform:scale(.2);opacity:0}28%{opacity:.9}46%,100%{transform:scale(7);opacity:0}}

.connected-badge{animation:badge-pop 7s ease-in-out infinite;transform-origin:left center}
@keyframes badge-pop{
  0%,27%{transform:scale(1);box-shadow:0 10px 35px #0006}
  31%{transform:scale(1.07);box-shadow:0 0 0 1px var(--accent),0 0 40px color-mix(in srgb,var(--accent) 35%,transparent)}
  36%,100%{transform:scale(1);box-shadow:0 10px 35px #0006}
}
.badge-icon{animation:check-glow 7s ease-in-out infinite}
@keyframes check-glow{0%,27%,45%,100%{background:var(--palette-d3edb518,#d3edb518)}31%,38%{background:var(--accent);color:var(--bg)}}

@media(max-width:660px){
  .product-card{transform:perspective(900px) rotateY(-13deg) rotateZ(-10deg)}
  .tap-pulse{right:116px;bottom:150px;width:16px;height:16px}
  @keyframes phone-tap{0%,12%{translate:0 0;rotate:0deg}22%{translate:-14px -7px;rotate:-9deg}27%{translate:-20px -3px;rotate:-15deg}31%,39%{translate:-18px -4px;rotate:-12deg}52%{translate:2px -1px;rotate:2deg}58%,100%{translate:0 0;rotate:0deg}}
}

/* ---------- Hero: entrance + text shimmer ---------- */
.js-anim .hero-copy>*{opacity:0;translate:0 24px;animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.js-anim .hero-copy>*:nth-child(1){animation-delay:.05s}
.js-anim .hero-copy>*:nth-child(2){animation-delay:.15s}
.js-anim .hero-copy>*:nth-child(3){animation-delay:.3s}
.js-anim .hero-copy>*:nth-child(4){animation-delay:.42s}
.js-anim .hero-copy>*:nth-child(5){animation-delay:.54s}
.js-anim .hero-visual{opacity:0;animation:fade-in 1.2s ease .3s forwards}
@keyframes rise{to{opacity:1;translate:0 0}}
@keyframes fade-in{to{opacity:1}}

.muted-title{
  background:linear-gradient(90deg,var(--palette-91998e,#91998e) 0%,var(--palette-91998e,#91998e) 40%,var(--accent) 50%,var(--palette-91998e,#91998e) 60%,var(--palette-91998e,#91998e) 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:text-shimmer 5s ease-in-out infinite 1.5s;padding-right:.08em
}
@keyframes text-shimmer{0%{background-position:100% 0}60%,100%{background-position:0 0}}

.status-dot{position:relative}
.status-dot:after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(3);opacity:0}}

.play-circle{position:relative;transition:border-color .3s}
.text-link:hover .play-circle{border-color:var(--accent);color:var(--accent)}
.play-circle:after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite 1s}

/* ---------- Header: scroll progress ---------- */
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px var(--accent);pointer-events:none}
.wordmark i{animation:dot-blink 3s ease-in-out infinite}
@keyframes dot-blink{0%,85%,100%{opacity:1}92%{opacity:.2}}

/* ---------- Applications strip: light runs through items ---------- */
.applications-strip a{transition:color .3s}
.applications-strip a i{transition:transform .3s,color .3s}
.applications-strip a:hover{color:var(--accent)}
.applications-strip a:hover i{transform:translate(3px,-3px);color:var(--accent)}
.applications-strip a>span{animation:strip-glow 8s ease-in-out infinite}
.applications-strip a:nth-of-type(2)>span{animation-delay:2s}
.applications-strip a:nth-of-type(3)>span{animation-delay:4s}
.applications-strip a:nth-of-type(4)>span{animation-delay:6s}
@keyframes strip-glow{0%,22%,100%{color:inherit;text-shadow:none}8%,14%{color:var(--accent);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;translate:0 34px;transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.reveal.in{opacity:1;translate:0 0}

/* ---------- Spotlight that follows the cursor ---------- */
.has-spot{background-image:radial-gradient(420px circle at var(--mx,-500px) var(--my,-500px),color-mix(in srgb,var(--accent) 9%,transparent),transparent 45%)!important}
.solution,.price-card,.card-example,.contact-link{transition:border-color .25s,background-color .25s,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.solution:hover,.card-example:hover{transform:translateY(-6px);box-shadow:0 18px 40px #0007}
.price-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px #0007;border-color:var(--palette-526049,#526049)}
.solution-top svg{transition:transform .5s cubic-bezier(.2,.7,.2,1),color .3s}
.solution:hover .solution-top svg{transform:scale(1.18) rotate(-8deg);color:var(--accent)}
.solution-link svg,.sample-open svg,.contact-link-arrow,.header-cta svg,.button svg{transition:transform .3s}
.solution-link:hover svg,.sample-open:hover svg,.contact-link:hover .contact-link-arrow,.header-cta:hover svg{transform:translate(3px,-3px)}
.button:hover svg{transform:translateX(4px)}

/* Featured tier badge shimmer */
.price-card-badge{overflow:hidden}
.price-card-badge:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-120%);animation:badge-shine 3.5s ease-in-out infinite}
@keyframes badge-shine{0%,60%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
.price-card.featured{animation:featured-glow 3.5s ease-in-out infinite}
@keyframes featured-glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 40px -8px color-mix(in srgb,var(--accent) 35%,transparent)}}

/* Steps: number fills on hover */
.steps li>span{display:grid;place-items:center;min-width:30px;height:30px;border:1px solid var(--palette-2b3526,#2b3526);border-radius:50%;margin-top:-4px;transition:background .3s,color .3s,border-color .3s}
.steps li:hover>span{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.steps li{transition:padding-left .3s}
.steps li:hover{padding-left:8px}

/* Example cards: 3D tilt */
.sample-art{transition:transform .3s cubic-bezier(.2,.7,.2,1);transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card-example:hover .sample-art{box-shadow:0 20px 40px #0008}

/* ---------- Calculator micro-feedback ---------- */
.bump{animation:bump .45s cubic-bezier(.2,.7,.2,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12);color:var(--accent)}100%{transform:scale(1)}}
#tier-name,#unit-price{display:inline-block}
.calc-total>strong{transition:color .3s}
.quantity-presets button{transition:color .2s,border-color .2s,background .2s,transform .2s}
.quantity-presets button:active{transform:scale(.94)}

/* Ripple on buttons */
.button,.price-card-button,.quantity-presets button{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* FAQ smooth open */
.faq-list details>p{animation:faq-open .4s cubic-bezier(.2,.7,.2,1)}
@keyframes faq-open{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
.faq-list summary{transition:color .2s,padding-left .3s}
.faq-list summary:hover{color:var(--accent);padding-left:6px}

/* Contacts */
.contact-link-icon{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.contact-link:hover .contact-link-icon{transform:scale(1.12) rotate(-6deg)}
.contact-whatsapp .contact-link-icon{animation:wa-ring 4s ease-in-out infinite}
@keyframes wa-ring{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-12deg)}88%{transform:rotate(10deg)}92%{transform:rotate(-6deg)}96%{transform:rotate(3deg)}}

/* Closing round link: magnetic + spin */
.round-link{position:relative;transform:translate(var(--mgx,0px),var(--mgy,0px));transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s,color .2s}
.round-link:before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px dashed var(--palette-4d633e,#4d633e);animation:spin 18s linear infinite}
.round-link:hover svg{transform:rotate(45deg)}
.round-link svg{transition:transform .35s}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Back to top with progress ring ---------- */
.to-top{position:fixed;right:22px;bottom:22px;z-index:30;width:52px;height:52px;border-radius:50%;background:var(--palette-0e110d,#0e110d);border:1px solid var(--line);color:var(--accent);display:grid;place-items:center;opacity:0;translate:0 20px;pointer-events:none;transition:opacity .3s,translate .3s,background .2s;box-shadow:0 10px 30px #0008}
.to-top.show{opacity:1;translate:0 0;pointer-events:auto}
.to-top:hover{background:var(--palette-1a1f18,#1a1f18)}
.to-top svg.arrow{width:18px;height:18px;transform:rotate(-90deg)}
.to-top svg.ring{position:absolute;inset:-1px;width:52px;height:52px;transform:rotate(-90deg)}
.to-top svg.ring circle{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:157;stroke-dashoffset:157}
@media(max-width:660px){.to-top{right:14px;bottom:14px;width:46px;height:46px}.to-top svg.ring{width:46px;height:46px}}

/* Smooth color change when switching theme */
.theme-anim,.theme-anim *{transition:background-color .5s ease,border-color .5s ease,color .5s ease,fill .5s,stroke .5s!important}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;translate:none}
  .js-anim .hero-copy>*,.js-anim .hero-visual{opacity:1;translate:none}
  .orbit-layer .dot{display:none}
  .card-shine,.tap-pulse{display:none}
}

/* ---------- Phone: home screen -> NFC tap -> menu opens (synced to the 7s tap cycle) ---------- */
.phone-island{z-index:5}
.phone-home{position:absolute;inset:0;z-index:4;border-radius:inherit;overflow:hidden;padding:9% 9% 7%;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 20% 10%,color-mix(in srgb,var(--accent) 55%,#1b2a3a) 0%,transparent 60%),radial-gradient(90% 60% at 90% 90%,color-mix(in srgb,var(--accent) 35%,#2a1a3a) 0%,transparent 65%),#0f1418;
  color:#fff;animation:home-cycle 7s cubic-bezier(.45,0,.25,1) infinite;transform-origin:50% 50%}
@keyframes home-cycle{
  0%,31%{opacity:1;transform:scale(1);filter:blur(0)}
  37%,86%{opacity:0;transform:scale(1.25);filter:blur(4px)}
  94%,100%{opacity:1;transform:scale(1);filter:blur(0)}
}
.ph-status{display:flex;justify-content:space-between;align-items:center;font-size:7px;font-weight:600;letter-spacing:.2px;padding:0 4%;margin-top:-2%}
.ph-sys{display:flex;gap:1.5px;align-items:flex-end}
.ph-sys b{width:2px;background:#fff;border-radius:1px;height:3px}.ph-sys b:nth-child(2){height:4.5px}.ph-sys b:nth-child(3){height:6px}
.ph-notif{position:absolute;left:5%;right:5%;top:5%;display:flex;align-items:center;gap:6px;padding:6px 7px;border-radius:10px;
  background:rgba(245,247,240,.92);color:#1d241c;box-shadow:0 6px 16px #0006;z-index:2;transform:translateY(-140%);opacity:0;animation:notif-drop 7s cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes notif-drop{0%,25%{transform:translateY(-140%);opacity:0}28%,33%{transform:translateY(0);opacity:1}37%,100%{transform:translateY(-140%);opacity:0}}
.ph-notif-icon{width:16px;height:16px;border-radius:5px;background:#121612;color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.ph-notif-icon svg{width:10px;height:10px}
.ph-notif strong{display:block;font-family:inherit;font-size:6px;font-weight:700;line-height:1.2;margin:0}
.ph-notif small{display:block;font-size:5.5px;line-height:1.25;color:#4b5547}
.ph-widget{margin:12% 0 9%;padding:8% 9%;border-radius:12px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);display:flex;align-items:center;gap:7px}
.ph-widget span{font-size:15px;font-weight:300;letter-spacing:-.5px}
.ph-sun{width:13px;height:13px;border-radius:50%;background:#ffd36b;box-shadow:0 0 10px #ffd36b88}
.ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10% 12%}
.app{display:block;aspect-ratio:1;border-radius:28%;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18)}
.a1{background:linear-gradient(135deg,#5ad06c,#2b9a46)}.a2{background:linear-gradient(135deg,#5aa8ff,#2a62d6)}
.a3{background:linear-gradient(135deg,#ffb35a,#f0732a)}.a4{background:linear-gradient(135deg,#f5f5f5,#cfd3cf)}
.a5{background:linear-gradient(135deg,#ff6b8a,#d63a63)}.a6{background:linear-gradient(135deg,#a77bff,#6b3fd6)}
.a7{background:linear-gradient(135deg,#3a3f45,#1c1f22)}.a8{background:linear-gradient(135deg,#ffd84d,#e8a91c)}
.a9{background:linear-gradient(135deg,#4de0d0,#1a9e9a)}.a10{background:linear-gradient(135deg,#ff8f6b,#e2553a)}
.a11{background:linear-gradient(135deg,#8fd0ff,#4a92d6)}.a12{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000))}
.ph-dots{display:flex;justify-content:center;gap:3px;margin-top:auto;margin-bottom:6%}
.ph-dots i{width:3px;height:3px;border-radius:50%;background:#fff;opacity:.9}.ph-dots i+i{opacity:.35}
.ph-dock{display:grid;grid-template-columns:repeat(4,1fr);gap:12%;padding:7% 8%;border-radius:14px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.d1{background:linear-gradient(135deg,#5ad06c,#2b9a46)}.d2{background:linear-gradient(135deg,#5aa8ff,#2a62d6)}
.d3{background:linear-gradient(135deg,#f5f5f5,#cfd3cf)}.d4{background:linear-gradient(135deg,#ffb35a,#f0732a)}

/* Screen content rises in as the "app" opens */
.scr-menu>*,.scr-card .vc-top,.scr-card .vc-body>*,.scr-reviews .pr-map,.scr-reviews .pr-body>*{animation:menu-in 7s cubic-bezier(.2,.7,.2,1) infinite}
.scr-menu>strong,.scr-card .vc-body>*:nth-child(2),.scr-card .vc-body>*:nth-child(3),.scr-reviews .pr-body>*:nth-child(2){animation-delay:.08s}
.scr-menu>.phone-dish,.scr-card .vc-body>*:nth-child(4),.scr-reviews .pr-body>*:nth-child(3),.scr-reviews .pr-body>*:nth-child(4){animation-delay:.16s}
.scr-menu>.phone-line,.scr-reviews .pr-body>*:nth-child(5),.scr-reviews .pr-body>*:nth-child(6){animation-delay:.22s}
.scr-menu>.phone-bottom,.scr-card .vc-body>*:nth-child(n+5),.scr-reviews .pr-body>*:nth-child(n+7){animation-delay:.28s}
@keyframes menu-in{0%,32%{opacity:0;translate:0 10px}40%,88%{opacity:1;translate:0 0}95%,100%{opacity:0;translate:0 0}}

@media(max-width:660px){
  .ph-status{font-size:5.5px}
  .ph-notif{padding:4px 5px;gap:4px;border-radius:8px}
  .ph-notif-icon{width:12px;height:12px;border-radius:4px}.ph-notif-icon svg{width:8px;height:8px}
  .ph-notif strong{font-size:4.6px}.ph-notif small{font-size:4.2px}
  .ph-widget span{font-size:11px}.ph-sun{width:10px;height:10px}
  .ph-widget,.ph-dock{border-radius:10px}
}
@media (prefers-reduced-motion:reduce){.phone-home{display:none}}


/* ---------- Three scenes, 21s loop: menu -> business card -> 2GIS reviews ---------- */
.scr{animation:scene-1 21s steps(1,end) infinite}
.scr-card,.scr-reviews{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;font-size:7px;line-height:1.25;opacity:0}
.scr-card{animation-name:scene-2}
.scr-reviews{animation-name:scene-3}
@keyframes scene-1{0%{opacity:1}33.333%{opacity:0}}
@keyframes scene-2{0%{opacity:0}33.333%{opacity:1}66.666%{opacity:0}}
@keyframes scene-3{0%{opacity:0}66.666%{opacity:1}}
.ph-notif>span:last-child{display:grid}
.ph-notif strong{grid-area:1/1}
.ph-notif .nt{grid-area:2/1;animation:scene-1 21s steps(1,end) infinite}
.ph-notif .nt2{animation-name:scene-2;opacity:0}
.ph-notif .nt3{animation-name:scene-3;opacity:0}

/* Online business card screen */
.scr-card,.scr-reviews{font-size:8px;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.scr-card{background:#f6f7f3;color:#141a12}
.vc-top{height:8.6em;padding:3.6em 1.3em 0;background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 70%,#0f1a0c) 0%,#121a10 70%);display:flex;justify-content:center}
.vc-cap{font-size:.72em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.85;white-space:nowrap}
.vc-body{display:flex;flex-direction:column;align-items:center;padding:0 1.2em;text-align:center}
.vc-avatar{width:4.8em;height:4.8em;margin-top:-2.4em;border-radius:50%;display:grid;place-items:center;font-size:1em;font-weight:800;letter-spacing:.02em;color:#121a10;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff));border:.3em solid #f6f7f3;box-shadow:0 .4em 1em #0002}
.vc-name{font-size:1.3em;font-weight:800;letter-spacing:-.02em;margin-top:.45em;line-height:1.1}
.vc-role{font-size:.8em;color:#6a7366;margin-top:.25em;line-height:1.2}
.vc-actions{display:grid;grid-template-columns:1fr 1fr;gap:.45em;width:100%;margin:.9em 0 .6em}
.vc-btn{display:flex;align-items:center;justify-content:center;gap:.35em;height:2.8em;border-radius:.9em;font-size:.82em;font-weight:700;background:#e9ece4;color:#141a12}
.vc-btn svg{width:1.25em;height:1.25em}
.vc-main{background:#141a12;color:#fff}
.vc-main svg{color:var(--accent)}
.vc-row{display:flex;align-items:center;gap:.6em;width:100%;padding:.5em 0;border-bottom:1px solid #e3e6dd;text-align:left}
.vc-row i{width:2.2em;height:2.2em;border-radius:.7em;background:#e9ece4;display:grid;place-items:center;flex-shrink:0}
.vc-row i svg{width:1.15em;height:1.15em}
.vc-row span{font-size:.85em;font-weight:700}
.vc-save{margin-top:.8em;width:100%;display:flex;align-items:center;justify-content:center;gap:.4em;height:2.7em;border-radius:.9em;border:1px solid #d5dacd;font-size:.8em;font-weight:700;color:#141a12}
.vc-save svg{width:1.15em;height:1.15em}

/* 2GIS reviews screen */
.scr-reviews{background:#f3f6ee;color:#17220f}
.pr-map{height:10.5em;overflow:hidden}
.pr-map svg{display:block;width:100%;height:100%}
.pr-body{padding:1em 1.2em;display:flex;flex-direction:column;align-items:flex-start}
.pr-tag{font-size:.7em;font-weight:800;letter-spacing:.06em;background:#2f9e3a;color:#fff;border-radius:.45em;padding:.3em .6em;margin-bottom:.55em}
.pr-title{font-size:1.5em;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.pr-score{display:flex;align-items:center;gap:.3em;margin-top:.4em;font-size:.9em}
.pr-score b{font-weight:800}
.pr-score svg{width:1em;height:1em;color:#f5a623;fill:#f5a623;stroke:none}
.pr-score span{color:#6b7a62;margin-left:.3em}
.pr-rate{display:flex;justify-content:space-between;width:100%;margin:1.1em 0 1em}
.pr-rate svg{width:2.4em;height:2.4em;color:#c4ccb9;stroke-width:1.5;fill:transparent;animation:star-fill 21s ease-out infinite;transform-origin:center}
.pr-rate .rs2{animation-delay:.3s}.pr-rate .rs3{animation-delay:.6s}.pr-rate .rs4{animation-delay:.9s}.pr-rate .rs5{animation-delay:1.2s}
@keyframes star-fill{0%,81%{color:#c4ccb9;fill:transparent;transform:scale(1)}82.5%{color:#f5a623;fill:#f5a623;transform:scale(1.35)}84%,100%{color:#f5a623;fill:#f5a623;transform:scale(1)}}
.pr-btn{width:100%;text-align:center;font-size:.9em;font-weight:700;padding:.9em 0;border-radius:.9em;background:#2f9e3a;color:#fff}

@media(max-width:660px){.scr-card,.scr-reviews{font-size:6.2px}}
@media (prefers-reduced-motion:reduce){.scr-card,.scr-reviews{display:none}}