.motion-managed { opacity: 0 !important; transition: opacity .14s linear; }
.motion-managed.is-settled { opacity: 1 !important; }
.card img.motion-managed.is-settled { opacity: .83 !important; }
.motion-layer { position: fixed; z-index: 18; inset: 0; pointer-events: none; }
.traveler { position: absolute; display: none; transform: translate(-50%, -50%); will-change: left, top, width; filter: drop-shadow(0 0 20px rgb(0 0 0 / .45)); }
.feature__copy h2 { font-size: clamp(46px, 4.25vw, 76px); }
.stat { margin-top: 34px; padding: 18px 0 0 19px; border-left: 1px solid currentColor; }.stat--pink { color: var(--pink); }.stat--orange { color: var(--orange); }.stat--cyan { color: var(--cyan); }
.stat p { margin: 0 !important; }.stat__number { display: flex; align-items: baseline; gap: 7px; font: 400 clamp(38px, 3.4vw, 60px)/.9 'Share Tech Mono', monospace; letter-spacing: -.08em; }.stat__number small { color: inherit; font: 400 clamp(12px, 1vw, 16px)/1.1 Manrope, sans-serif; letter-spacing: 0; }.stat > p:last-child { max-width: 445px; margin-top: 11px !important; color: #b8c8dc; font-size: 14px; line-height: 1.55; }.stat strong { color: #eef7ff; font-weight: 600; }
.particle { transform: translate(-50%, -50%); }
/* The cyan source has more transparent breathing room than the other two assets. */
.particle--cyan { width: 19.6%; }
.feature__visual .feature-cyan { width: 122%; max-width: none; margin-left: -11%; }

/* Resting: contained and behind the card content. Hover: the tool becomes the foreground. */
.card { min-height: 440px; }
.card p, .card span, .card h3, .card button { z-index: 2; }
.card span { font-size: 18px; line-height: 1.45; }
.card button { font-size: 15px; }
.card::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: rgb(2 6 16 / .64); backdrop-filter: blur(12px) saturate(.75); -webkit-backdrop-filter: blur(12px) saturate(.75); transition: opacity .32s ease; }
.card img.motion-managed { width: 56%; top: -5%; right: -5%; z-index: 0; transform: none; transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .42s ease; }
.card .card-cyan { width: 100%; right: -27%; top: -13%; }
.card .card-cyan.is-settled { transform: scale(1.28) !important; }
.card:hover { overflow: hidden; z-index: auto; }
.card:hover::after { opacity: 1; }
.card:hover img.motion-managed.is-settled { z-index: 0; transform: none !important; filter: none; }
.card--cyan:hover img.motion-managed.is-settled { transform: scale(1.28) !important; }

.faq { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(42px, 9vw, 170px); padding: 140px clamp(22px, 7vw, 130px); background: radial-gradient(circle at 12% 17%, rgb(20 81 121 / .22), transparent 28%), #03050c; }
.faq__intro { max-width: 420px; }.faq__intro h2 { margin: 0; font-size: clamp(56px, 5.1vw, 90px); line-height: .84; }.faq__intro p:not(.eyebrow) { margin: 28px 0 0; color: var(--muted); line-height: 1.7; }
.faq__items { border-top: 1px solid rgb(172 213 255 / .25); }.faq details { border-bottom: 1px solid rgb(172 213 255 / .18); }.faq summary { list-style: none; cursor: pointer; position: relative; padding: 24px 48px 24px 0; font: 600 clamp(20px, 1.5vw, 26px)/1.15 Genos, sans-serif; letter-spacing: -.02em; }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { content: '+'; position: absolute; right: 4px; top: 18px; color: var(--cyan); font: 400 33px/1 Manrope, sans-serif; transition: transform .25s ease; }.faq details[open] summary::after { transform: rotate(45deg); }.faq details p { max-width: 780px; margin: 0; padding: 0 42px 25px 0; color: #b8c8dc; font-size: 16px; line-height: 1.72; }
@media (max-width: 840px) { .faq { grid-template-columns: 1fr; padding: 100px 28px; gap: 54px; }.faq__intro { max-width: 560px; }.faq summary { padding-top: 20px; padding-bottom: 20px; }.faq details p { padding-right: 10px; } }