/* ============================================================
   PRISM FX — restrained, reassuring motion.
   View-transition crossfade + a slim spectrum progress bar.
   No cursor hijacking, no full-screen blocking overlays.
   ============================================================ */
:root{ --fx-spectrum:linear-gradient(90deg,#ff4d4d,#ff9a3b,#ffe23b,#46d17a,#3b8cff,#9a5bff); }

/* ---- Smooth cross-document crossfade where supported (Chrome/Edge) ----
   Keeps the user in context; no black wipe, no perceived "did it work?" gap. */
@view-transition { navigation: auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.32s; }

/* Gentle fade for browsers without view transitions (Safari/Firefox) */
@keyframes fxIn{ from{opacity:0} to{opacity:1} }
body{ animation:fxIn .4s ease both; }

/* ---- Slim spectrum loading bar (NProgress pattern) ----
   Visual feedback for navigation without blocking; debounced so fast
   loads never flash it. The "rainbow" carries the brand. */
.fx-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;
  background:var(--fx-spectrum);opacity:0;pointer-events:none;
  border-radius:0 2px 2px 0;box-shadow:0 0 10px rgba(59,140,255,.45);
  transition:width .5s ease,opacity .3s ease}

/* ---- Hover micro-interactions (kept — subtle, on-brand) ---- */
.btn-filled,.btn-outline,.hero-btn-primary,.hero-btn-secondary,
.final-btn-primary,.final-btn-secondary,.form-submit,.job-btn{position:relative;overflow:hidden}
.btn-filled::after,.btn-outline::after,.hero-btn-primary::after,.hero-btn-secondary::after,
.final-btn-primary::after,.final-btn-secondary::after,.form-submit::after,.job-btn::after{
  content:"";position:absolute;top:0;left:-135%;width:55%;height:100%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.btn-outline::after,.hero-btn-secondary::after,.final-btn-secondary::after{
  background:linear-gradient(90deg,transparent,rgba(255,77,77,.22),rgba(255,226,59,.22),rgba(70,209,122,.22),rgba(59,140,255,.3),transparent)}
.btn-filled:hover::after,.btn-outline:hover::after,.hero-btn-primary:hover::after,.hero-btn-secondary:hover::after,
.final-btn-primary:hover::after,.final-btn-secondary:hover::after,.form-submit:hover::after,.job-btn:hover::after{
  animation:fxShine .62s ease}
@keyframes fxShine{to{left:135%}}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;background:var(--fx-spectrum);
  transform:scaleX(0);transform-origin:right;transition:transform .26s ease;border-radius:2px}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* Cards: lift + a spectrum border that traces the card's rounded shape on hover */
.card-item,.doc-card,.solution-card,.scenario,.stat-card,.ctype,.feat-item,.value-card,.member-card,
.engine-card,.engine-item{position:relative;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card-item::before,.doc-card::before,.solution-card::before,.scenario::before,.stat-card::before,
.ctype::before,.feat-item::before,.value-card::before,.engine-card::before,.engine-item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--fx-spectrum);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .3s ease}
.card-item:hover,.doc-card:hover,.solution-card:hover,.scenario:hover,.stat-card:hover,
.ctype:hover,.feat-item:hover,.value-card:hover,.engine-card:hover,.engine-item:hover{
  transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.10);border-color:transparent!important}
.card-item:hover::before,.doc-card:hover::before,.solution-card:hover::before,.scenario:hover::before,
.stat-card:hover::before,.ctype:hover::before,.feat-item:hover::before,.value-card:hover::before,
.engine-card:hover::before,.engine-item:hover::before{opacity:1}

/* CTA arrow links: a clear "pressable" hover (no rainbow disc) */
.cta-link,.cta-link-white{transition:opacity .2s ease}
.cta-link .arrow-circle,.cta-link .arrow-circle-sm,.cta-link-white .arrow-circle-white{
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.cta-link:hover{opacity:1}
.cta-link:hover .arrow-circle,.cta-link:hover .arrow-circle-sm,.cta-link-white:hover .arrow-circle-white{
  transform:scale(1.12);box-shadow:0 6px 18px rgba(0,0,0,.22)}

.nav-logo img,.footer-logo img{transition:opacity .25s ease}
.nav-logo:hover img,.footer-logo:hover img{opacity:.7}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  body{animation:none}
  .fx-bar{display:none}
  .btn-filled::after,.btn-outline::after,.hero-btn-primary::after,.hero-btn-secondary::after,
  .final-btn-primary::after,.final-btn-secondary::after,.form-submit::after,.job-btn::after{display:none}
  .card-item:hover,.doc-card:hover,.solution-card:hover,.scenario:hover,.stat-card:hover,
  .ctype:hover,.feat-item:hover,.value-card:hover{transform:none}
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-consent{position:fixed;left:22px;bottom:22px;z-index:120;max-width:430px;background:#fff;border:1px solid #e5e5e5;border-radius:14px;box-shadow:0 22px 54px -18px rgba(16,24,40,.4);padding:22px 24px;animation:ccIn .4s ease both}
@keyframes ccIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.cookie-consent.cc-hide{opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease}
.cc-text{font-size:13px;color:#444;line-height:1.85}
.cc-text a{color:#1c4fd6;text-decoration:underline}
.cc-btns{display:flex;gap:10px;margin-top:16px}
.cc-accept{background:#111;color:#fff;border:none;border-radius:6px;padding:11px 24px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s}
.cc-accept:hover{background:#333}
.cc-decline{background:#fff;color:#111;border:1.5px solid #e5e5e5;border-radius:6px;padding:11px 18px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:border-color .2s}
.cc-decline:hover{border-color:#111}
@media (prefers-reduced-motion: reduce){.cookie-consent{animation:none}}
@media (max-width:560px){.cookie-consent{left:12px;right:12px;bottom:12px;max-width:none}}

/* ============================================================
   IN-FRAME — when a page is embedded in a tool modal, hide all chrome and
   tighten so only the content (tool/form/viewer) shows. (In fx.css because
   every page loads it, including the static TOP which has no shared.css.)
   ============================================================ */
.in-frame .nav,.in-frame .gnav,.in-frame .gnav-drawer,.in-frame .footer,.in-frame .mobile-menu,.in-frame .cookie-consent,
.in-frame .to-top,.in-frame .dots,.in-frame .fx-bar{display:none!important}
.in-frame body{background:#fff;padding-top:0!important}
.in-frame .page-hd{padding:26px clamp(16px,4vw,30px) 16px}
.in-frame .page-hd .breadcrumb{display:none}
.in-frame .page-hd-h1{font-size:clamp(1.3rem,3vw,1.7rem)}
.in-frame .page-hd-sub{font-size:13.5px;margin-top:8px}
.in-frame .sec,.in-frame .sec-gray{padding:22px clamp(16px,4vw,28px)!important;background:#fff}

/* ============================================================
   TOOL MODAL — open booking/diagnosis/library/contact/WP in place.
   ============================================================ */
.tool-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(13,17,23,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .13s ease}
.tool-modal.show{opacity:1}
/* Size with viewport units (not %) so the box never collapses to the iframe's
   default 150px height inside the flex container. */
.tool-modal-box{position:relative;box-sizing:border-box;background:#fff;border-radius:16px;overflow:hidden;
  width:min(1280px,96vw);height:min(920px,94vh);height:min(920px,94dvh);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
  transform:translateY(12px) scale(.99);transition:transform .16s ease}
.tool-modal.show .tool-modal-box{transform:none}
.tool-modal-iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.tool-modal-x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:none;background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#0d1117;font-size:17px;line-height:1;
  transition:background .15s,transform .15s}
.tool-modal-x:hover{background:#fff;transform:scale(1.06)}
.tool-modal-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#9aa3b2;font-size:13px;pointer-events:none}
@media(max-width:600px){.tool-modal-box{width:100vw;height:100vh;height:100dvh;border-radius:0}}

/* ============================================================
   TAP RESPONSIVENESS — loaded on every page (incl. the static TOP).
   Kills the ~300ms mobile tap delay and gives an instant press state,
   so CTAs feel immediate. Does not touch the ::after hover shine.
   ============================================================ */
a,button,select,input,textarea,label,[role="button"],.tool-modal-x{touch-action:manipulation}
.btn-filled,.btn-outline,.hero-btn-primary,.hero-btn-secondary,
.final-btn-primary,.final-btn-secondary,.form-submit,.job-btn,
.cc-accept,.cc-decline,.tool-modal-x{
  transition:transform .09s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn-filled:active,.btn-outline:active,.hero-btn-primary:active,.hero-btn-secondary:active,
.final-btn-primary:active,.final-btn-secondary:active,.form-submit:active,.job-btn:active,
.cc-accept:active,.cc-decline:active{transform:scale(.97)}
.tool-modal-x:active{transform:scale(.92)}
@media(hover:none){
  .btn-filled:hover,.btn-outline:hover,.hero-btn-primary:hover,.hero-btn-secondary:hover,
  .final-btn-primary:hover,.final-btn-secondary:hover{transform:none}
}

/* ============================================================
   SMART EXIT POPUP (Phase 3 ⑤) — see fx.js. Sized in vw/dvh.
   ============================================================ */
.exit-pop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  padding:5vw;background:rgba(13,17,23,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .18s ease}
.exit-pop.show{opacity:1}
.exit-pop-box{position:relative;box-sizing:border-box;width:min(440px,92vw);background:#fff;border-radius:16px;
  padding:30px 28px 28px;box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
  transform:translateY(12px) scale(.99);transition:transform .18s ease}
.exit-pop.show .exit-pop-box{transform:none}
.exit-pop-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:none;
  background:#f0f2f6;color:#6b7280;font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .09s ease,background .15s}
.exit-pop-x:active{transform:scale(.92)}
.exit-pop-k{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#1c4fd6;margin:0 0 10px}
.exit-pop-t{font-size:20px;font-weight:700;line-height:1.4;color:#0d1117;margin:0 0 10px}
.exit-pop-s{font-size:13.5px;color:#6b7280;line-height:1.8;margin:0 0 20px}
.exit-pop-cta{display:block;text-align:center;background:#0d1117;color:#fff;border-radius:10px;
  padding:15px;font-size:15px;font-weight:700;text-decoration:none;transition:transform .09s ease,opacity .15s}
.exit-pop-cta:active{transform:scale(.98)}
.exit-pop-cta:hover{opacity:.92}
.exit-pop-alt{display:block;text-align:center;margin-top:12px;font-size:13px;font-weight:600;
  color:#4a5261;text-decoration:none}
.exit-pop-alt:hover{color:#1c4fd6;text-decoration:underline}