/*
Document Title: NexoProof Public Website Motion & Navigation Layer
Artifact Type: Public Website Stylesheet
Classification: PUBLIC
Disclosure Status: Founder-directed preview candidate under GitHub Issue #225
Owner: NexoProof Intelligence
Date: 2026-09-14
Purpose: Add restrained premium motion, clean light corporate surfaces, compact portfolio presentation, and back-to-top navigation without redesigning the approved site.
*/

html{scroll-behavior:smooth}
body.np-motion-ready{--np-motion-blue:#0B4EDB;--np-motion-deep:#0A3D91;--np-motion-gold:#D4A42C;--np-motion-ink:#111827;--np-motion-steel:#667085;--np-motion-line:#DCE5F0;--np-motion-soft:#F5F8FC}

/* Major typography: responsive but restrained. */
body.np-motion-ready main h1,
body.np-motion-ready main h2,
body.np-motion-ready main h3{transition:transform .28s cubic-bezier(.2,.8,.2,1),text-shadow .28s ease,color .28s ease}
@media(hover:hover) and (pointer:fine){
  body.np-motion-ready main h1:hover{transform:translate3d(0,-3px,0);text-shadow:0 14px 32px rgba(11,78,219,.13)}
  body.np-motion-ready main h2:hover{transform:translate3d(3px,-2px,0);text-shadow:0 10px 26px rgba(10,61,145,.11)}
  body.np-motion-ready main h3:hover{transform:translate3d(2px,-1px,0)}
}

/* Shared interactive surfaces. */
body.np-motion-ready :is(.np-home-product,.np-product-tile,.np-market-tile,.np-market-card,.np-trust-grid article,.technology-card,.principle-card,.package-card){
  will-change:transform;
  transition:transform .30s cubic-bezier(.2,.8,.2,1),box-shadow .30s ease,border-color .30s ease,background-color .30s ease;
}
@media(hover:hover) and (pointer:fine){
  body.np-motion-ready :is(.np-home-product,.np-product-tile,.np-market-tile,.np-market-card,.np-trust-grid article,.technology-card,.principle-card,.package-card):hover{
    transform:translate3d(0,-6px,0) scale(1.006);
    border-color:rgba(11,78,219,.30);
    box-shadow:0 22px 54px rgba(6,27,66,.12),0 0 0 1px rgba(212,164,44,.08);
  }
  body.np-motion-ready a:is(.np-home-product,.np-product-tile,.np-market-tile,.np-market-card):hover .np-product-action,
  body.np-motion-ready a:is(.np-home-product,.np-product-tile,.np-market-tile,.np-market-card):hover .np-market-action{transform:translateX(5px)}
}
body.np-motion-ready :is(.np-product-action,.np-market-action){transition:transform .25s ease,color .25s ease}
body.np-motion-ready a:focus-visible{outline:3px solid rgba(212,164,44,.55);outline-offset:4px}

/* Scroll-entry reveal. JS adds np-visible; content remains visible without JS. */
body.np-motion-ready .np-reveal{opacity:0;transform:translate3d(0,16px,0);transition:opacity .54s ease,transform .54s cubic-bezier(.2,.75,.2,1)}
body.np-motion-ready .np-reveal.np-visible{opacity:1;transform:none}

/* Corporate landing: clean white/light experience with blue as structure rather than background. */
body.np-motion-ready.np-premium .np-corporate-hero{
  color:var(--np-motion-ink);
  background:
    radial-gradient(circle at 78% 16%,rgba(11,78,219,.105),transparent 27%),
    radial-gradient(circle at 10% 92%,rgba(212,164,44,.065),transparent 24%),
    linear-gradient(145deg,#FFFFFF 0%,#FAFCFF 48%,#F3F7FC 100%);
}
body.np-motion-ready.np-premium .np-corporate-hero:before{opacity:.42;background-image:linear-gradient(rgba(10,61,145,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,61,145,.045) 1px,transparent 1px)}
body.np-motion-ready.np-premium .np-corporate-hero:after{background:linear-gradient(90deg,rgba(255,255,255,.62),transparent 44%,rgba(11,78,219,.025))}
body.np-motion-ready.np-premium .np-corporate-grid{min-height:610px;padding:58px 0 48px}
body.np-motion-ready.np-premium .np-corporate-copy h1{color:#04142F}
body.np-motion-ready.np-premium .np-corporate-copy h1 em{color:var(--np-motion-blue);text-shadow:0 10px 30px rgba(11,78,219,.11)}
body.np-motion-ready.np-premium .np-corporate-copy>p{color:#5E6A7D}
body.np-motion-ready.np-premium .np-corporate-hero .np-kicker{color:var(--np-motion-deep)}
body.np-motion-ready.np-premium .np-corporate-hero .np-btn-ghost{border-color:#CCD8E8;background:rgba(255,255,255,.84);color:#0A3D91;box-shadow:0 10px 28px rgba(10,61,145,.07)}
body.np-motion-ready.np-premium .np-intelligence-console{border-color:#D8E2EF;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,254,.90));box-shadow:0 34px 90px rgba(6,27,66,.14),inset 0 1px 0 #fff}
body.np-motion-ready.np-premium .np-intelligence-console:before{background:linear-gradient(145deg,rgba(11,78,219,.24),transparent 42%,rgba(212,164,44,.30))}
body.np-motion-ready.np-premium .np-console-head{border-bottom-color:#E0E7F0}
body.np-motion-ready.np-premium .np-console-brand small{color:#5576A7}
body.np-motion-ready.np-premium .np-console-brand strong{color:#04142F}
body.np-motion-ready.np-premium .np-console-state{border-color:#D8E2EF;background:#F7FAFF;color:#46658F}
body.np-motion-ready.np-premium .np-console-canvas{border-color:#DFE7F1;background:radial-gradient(circle at 50% 48%,rgba(11,78,219,.08),rgba(255,255,255,.80))}
body.np-motion-ready.np-premium .np-console-output article{border-color:#E1E8F1;background:rgba(255,255,255,.88);box-shadow:0 8px 24px rgba(10,61,145,.05)}
body.np-motion-ready.np-premium .np-console-output small{color:#5576A7}
body.np-motion-ready.np-premium .np-console-output strong{color:#081B39}
body.np-motion-ready.np-premium .np-orbit{border-color:#D9E3EF;background:rgba(255,255,255,.94);color:#47668F;box-shadow:0 10px 28px rgba(10,61,145,.09)}
body.np-motion-ready.np-premium .np-ribbon{border-top-color:#DFE7F1}
body.np-motion-ready.np-premium .np-ribbon>strong{color:#5576A7}
body.np-motion-ready.np-premium .np-ribbon span{border-color:#DCE5F0;background:#fff;color:#536174;box-shadow:0 6px 18px rgba(10,61,145,.045)}

/* Product catalog: light, clear, compact and visible in one desktop viewport. */
body.np-motion-ready.np-premium .np-product-stage{
  color:var(--np-motion-ink);
  background:
    radial-gradient(circle at 84% 2%,rgba(11,78,219,.075),transparent 30%),
    radial-gradient(circle at 8% 96%,rgba(212,164,44,.055),transparent 26%),
    linear-gradient(180deg,#FFFFFF 0%,#F8FAFD 100%);
}
body.np-motion-ready.np-premium .np-product-stage:before{opacity:.24;background-image:linear-gradient(rgba(10,61,145,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,61,145,.045) 1px,transparent 1px)}
body.np-motion-ready.np-premium .np-product-stage:after{background:linear-gradient(90deg,rgba(255,255,255,.34),transparent 40%,rgba(11,78,219,.018))}
body.np-motion-ready.np-premium .np-product-intro h1{color:#04142F}
body.np-motion-ready.np-premium .np-product-intro p{color:var(--np-motion-steel)}
body.np-motion-ready.np-premium .np-product-stage .np-kicker{color:var(--np-motion-deep)}
body.np-motion-ready.np-premium .np-product-tile{
  color:var(--np-motion-ink);
  border:1px solid var(--np-motion-line);
  background:rgba(255,255,255,.95);
  box-shadow:0 14px 38px rgba(6,27,66,.075);
  backdrop-filter:blur(14px);
}
body.np-motion-ready.np-premium .np-product-tile:before{background:radial-gradient(circle at 88% 5%,rgba(11,78,219,.065),transparent 38%)}
body.np-motion-ready.np-premium .np-product-tile h2{color:#061B42}
body.np-motion-ready.np-premium .np-product-tile p{color:#5E6A7D}
body.np-motion-ready.np-premium .np-product-status{border-color:rgba(11,78,219,.16);background:#EEF4FF;color:#0A3D91}
body.np-motion-ready.np-premium .np-product-status.pending{border-color:rgba(212,164,44,.26);background:#FFF9E9;color:#7A5A00}
body.np-motion-ready.np-premium .np-product-action{color:#0A3D91}
body.np-motion-ready.np-premium .np-product-action.disabled{color:#7B8492}
body.np-motion-ready.np-premium .np-catalog-foot{color:#5E6A7D;border-color:#DCE5F0}
body.np-motion-ready.np-premium .np-catalog-foot a{color:#0A3D91}
body.np-motion-ready.np-premium .np-product-mark{filter:drop-shadow(0 8px 18px rgba(10,61,145,.10))}

@media(min-width:901px){
  body.np-motion-ready.np-premium .np-product-stage-inner{padding:18px 0 20px}
  body.np-motion-ready.np-premium .np-product-intro{gap:22px;margin-bottom:12px}
  body.np-motion-ready.np-premium .np-product-intro h1{margin-top:5px;font-size:clamp(1.9rem,3.1vw,3rem)}
  body.np-motion-ready.np-premium .np-product-intro p{max-width:430px;font-size:.76rem;line-height:1.48}
  body.np-motion-ready.np-premium .np-catalog-grid{gap:9px}
  body.np-motion-ready.np-premium .np-product-tile{min-height:164px;padding:17px 18px;border-radius:18px}
  body.np-motion-ready.np-premium .np-product-tile.np-reunite,
  body.np-motion-ready.np-premium .np-product-tile.np-road,
  body.np-motion-ready.np-premium .np-product-tile.np-higher{min-height:142px}
  body.np-motion-ready.np-premium .np-product-status{padding:5px 8px;font-size:.50rem}
  body.np-motion-ready.np-premium .np-product-tile h2{margin:11px 0 7px;font-size:clamp(1.16rem,1.65vw,1.68rem);line-height:1.04}
  body.np-motion-ready.np-premium .np-product-tile p{font-size:.70rem;line-height:1.42}
  body.np-motion-ready.np-premium .np-product-action{margin-top:auto;padding-top:9px;font-size:.66rem}
  body.np-motion-ready.np-premium .np-product-mark{max-width:42px;max-height:42px}
  body.np-motion-ready.np-premium .np-catalog-foot{margin-top:10px;padding-top:10px;font-size:.68rem}
}

/* Back-to-top control. */
.np-back-to-top{
  position:fixed;right:22px;bottom:22px;z-index:9998;width:48px;height:48px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#0B4EDB,#0A3D91);color:#fff;box-shadow:0 14px 34px rgba(4,20,47,.20);font:800 1.24rem/1 "Inter",Arial,sans-serif;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px) scale(.94);transition:opacity .24s ease,visibility .24s ease,transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.np-back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.np-back-to-top:hover{transform:translateY(-3px);border-color:rgba(212,164,44,.65);box-shadow:0 18px 44px rgba(10,61,145,.27),0 0 0 4px rgba(212,164,44,.08)}
.np-back-to-top:focus-visible{outline:3px solid rgba(212,164,44,.70);outline-offset:3px}
.np-back-to-top svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:680px){.np-back-to-top{right:15px;bottom:15px;width:44px;height:44px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  body.np-motion-ready .np-reveal{opacity:1!important;transform:none!important}
}