/* Platform PREVIEW, section 7 "Advanced Technology. Designed to Be Practical." (Figma 10856:60814).
   Calm premium pass: lighter surfaces, stronger hierarchy, staggered reveal on scroll (js/platform-preview-tech.js
   adds .is-in once), chips pop in sequence with one micro-motion each, a data packet travels gateway -> cloud. */
.pf-tech { --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.4, .64, 1); }
.pf-tech .pft-ic { display: block; width: 52%; height: 52%; overflow: visible; }
.pf-tech .pf-badge--xl .pft-ic { width: 50%; height: 50%; }
.pf-tech .pf-h2 { letter-spacing: -.015em; }
.pf-tech .pf-head .pf-text { color: rgba(20, 23, 28, .66); }
/* surfaces: hairline + soft shadow instead of a grey border */
.pf-tech .pf-tech__set, .pf-tech .pf-tech__cols { border: 0; box-shadow: 0 0 0 1px rgba(28, 40, 56, .07), 0 1px 2px rgba(16, 24, 40, .04), 0 24px 48px -20px rgba(16, 24, 40, .14); }
.pf-tech .pf-tech__setx { border-left-color: rgba(28, 40, 56, .1); }
.pf-tech .pf-tech__setx b { display: block; font-size: clamp(19px, 1.6vw, 30px); font-weight: 800; letter-spacing: -.01em; color: var(--ink2); }
.pf-tech .pf-tech__setx p { color: rgba(20, 23, 28, .64); }
.pf-tech .pf-tech__cols h3 { font-weight: 700; letter-spacing: -.01em; color: var(--ink2); }
.pf-tech .pf-chips li { border-color: rgba(28, 40, 56, .09); background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.pf-tech .pf-chips li:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(16, 24, 40, .22); border-color: rgba(19, 83, 233, .22); }

/* gateway -> cloud */
.pft-gw { position: relative; margin-left: auto; flex: none; width: clamp(180px, 15vw, 288px); }
.pft-gw .pf-tech__gw { display: block; width: 100%; margin: 0; position: relative; z-index: 1; }
.pft-gw__glow { position: absolute; left: 47%; top: 14%; width: 50%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(98, 133, 251, .28), rgba(98, 133, 251, 0)); opacity: 0; }
.pft-gw__packet { position: absolute; z-index: 2; left: 32.5%; top: 55.3%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #1353e9; box-shadow: 0 0 0 3px rgba(19, 83, 233, .18), 0 0 10px rgba(19, 83, 233, .6); opacity: 0; }
.pft-gw__shield { position: absolute; z-index: 0; left: 82.6%; top: 78%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border-radius: 50%; background: radial-gradient(closest-side, rgba(98, 133, 251, .35), rgba(98, 133, 251, 0)); opacity: 0; }

/* ---------- motion ---------- */
.pf-tech.pft-js .pft-r { opacity: 0; transform: translateY(18px); }
.pf-tech.pft-js.is-in .pft-r { opacity: 1; transform: none; transition: opacity .9s var(--ease) calc(var(--d) * .18s), transform 1s var(--ease) calc(var(--d) * .18s); }
.pf-tech.pft-js .pft-chip { opacity: 0; transform: scale(.9) translateY(6px); }
.pf-tech.pft-js.is-in .pft-chip { opacity: 1; transform: none; transition: opacity .5s var(--ease) calc(.45s + var(--n) * .09s), transform .6s var(--spring) calc(.45s + var(--n) * .09s), box-shadow .35s var(--ease), border-color .35s; }
.pf-tech.pft-js.is-in .pft-chip:hover { transform: translateY(-2px); transition-delay: 0s; }
/* icon micro-motions: once as the chip lands, again on hover */
.pf-tech.is-in .pft-ic--rocket { animation: pft-lift 1.1s var(--ease) calc(.7s + 0 * .09s) both; }
.pf-tech .pft-chip:hover .pft-ic--rocket { animation: pft-lift .9s var(--ease); }
@keyframes pft-lift { 0% { transform: none; } 35% { transform: translate(3px, -4px); } 55% { transform: translate(2px, -3px); } 100% { transform: none; } }
.pf-tech.is-in .pft-ic--touch { transform-origin: 50% 80%; animation: pft-tap .8s var(--ease) .9s both; }
.pf-tech .pft-chip:hover .pft-ic--touch { animation: pft-tap .7s var(--ease); }
@keyframes pft-tap { 0%, 100% { transform: none; } 40% { transform: scale(.86) translateY(1px); } 70% { transform: scale(1.04); } }
.pft-ic--pulse path { transform-box: fill-box; transform-origin: center; }
.pf-tech.is-in .pft-ic--pulse path:nth-child(3), .pf-tech.is-in .pft-ic--pulse path:nth-child(4), .pf-tech.is-in .pft-ic--pulse path:nth-child(5) { animation: pft-beat 2.8s ease-in-out 1.2s infinite; }
.pf-tech.is-in .pft-ic--pulse path:nth-child(5) { animation-delay: 1.32s; }
.pf-tech.is-in .pft-ic--pulse path:nth-child(4) { animation-delay: 1.44s; }
@keyframes pft-beat { 0%, 30%, 100% { transform: none; } 12% { transform: scaleY(.55); } 20% { transform: scaleY(1.08); } }
/* clock: the Figma hand sweeps slowly around the dial */
.pft-ic--clock [id="Vector_2"] { transform-box: view-box; transform-origin: 18.45px 20.85px; }
.pf-tech.is-in .pft-ic--clock [id="Vector_2"] { animation: pft-sweep 8s linear .6s infinite; }
@keyframes pft-sweep { to { transform: rotate(360deg); } }
/* infrastructure icons light up in turn */
.pf-tech.is-in .pft-light .pft-chip .pf-badge { animation: pft-glow 1.4s ease-out calc(1.1s + (var(--n) - 3) * .25s) both; }
@keyframes pft-glow { 0% { box-shadow: 0 0 0 0 rgba(19, 83, 233, 0); filter: none; } 35% { box-shadow: 0 0 0 5px rgba(19, 83, 233, .1); filter: brightness(1.12) saturate(1.3); } 100% { box-shadow: 0 0 0 0 rgba(19, 83, 233, 0); filter: none; } }
/* data packet: gateway -> cloud, then the cloud and shield glow softly */
.pf-tech.is-in .pft-gw__packet { animation: pft-packet 3.2s var(--ease) 1.2s infinite; }
@keyframes pft-packet { 0% { left: 32.5%; opacity: 0; } 8% { opacity: 1; } 34% { left: 46%; opacity: 1; } 42%, 100% { left: 46%; opacity: 0; } }
.pf-tech.is-in .pft-gw__glow { animation: pft-halo 3.2s ease-in-out 1.2s infinite; }
.pf-tech.is-in .pft-gw__shield { animation: pft-halo 3.2s ease-in-out 1.45s infinite; }
@keyframes pft-halo { 0%, 25%, 100% { opacity: 0; } 45% { opacity: 1; } 75% { opacity: 0; } }
.pf-tech:not(.is-vis) * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
	.pf-tech *, .pf-tech *::before, .pf-tech *::after { animation: none !important; transition: none !important; }
	.pf-tech.pft-js .pft-r, .pf-tech.pft-js .pft-chip { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 991px) { .pft-gw { margin: 0 auto; } }

/* The report CTA's "Hidden Cost Detected" card sits above the CTA box (Figma); reserve that space so it never
   reaches into this section (it overhangs ~47px at 1200-1599 and ~116px at >=1600). */
@media (min-width: 1200px) { .pf-sec--cta .cs-cta-wrap { padding-top: 72px !important; } }
@media (min-width: 1600px) { .pf-sec--cta .cs-cta-wrap { padding-top: 140px !important; } }
.pf-tech .pf-tech__cols .pf-chips { justify-content: center; }