/* Presentation polish layered over the approved upload. Never changes wording or the upload's animations. */
:root{--pl-accent:25 181 197;--pl-line:#253249;--pl-surface:#0F172A}
html{scroll-behavior:smooth;scroll-padding-top:96px;text-rendering:optimizeLegibility}
body{-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11"}
::selection{background:rgb(var(--pl-accent)/.32);color:#fff}
h1,h2,h3{text-wrap:balance}
p,li,summary{text-wrap:pretty}

/* Sticky, glassy header */
header{position:sticky;top:0;z-index:50;background:rgb(15 23 42/.78)!important;backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);transition:box-shadow .25s ease,border-color .25s ease}
header.pl-scrolled{box-shadow:0 10px 30px -18px rgb(0 0 0/.8);border-bottom-color:rgb(var(--pl-accent)/.18)!important}
.navlinks a{position:relative}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:rgb(var(--pl-accent));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlinks a:hover::after{transform:scaleX(1)}

/* Hero atmosphere: soft glow + faint grid behind content */
#top{position:relative;isolation:isolate;overflow:hidden}
#top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 30%,rgb(var(--pl-accent)/.14),transparent 70%),radial-gradient(45% 50% at 12% 20%,rgb(34 197 140/.08),transparent 70%)}
#top::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgb(255 255 255/.035) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.035) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 35%,#000,transparent 80%);mask-image:radial-gradient(70% 70% at 50% 35%,#000,transparent 80%)}

/* Depth on cards and buttons */
.card{box-shadow:0 1px 0 rgb(255 255 255/.03) inset,0 18px 40px -28px rgb(0 0 0/.9);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.card:hover{box-shadow:0 1px 0 rgb(255 255 255/.05) inset,0 0 0 1px rgb(var(--pl-accent)/.18),0 24px 50px -28px rgb(var(--pl-accent)/.35)}
.cta{box-shadow:0 8px 24px -12px rgb(var(--pl-accent)/.55)}
details{transition:background-color .2s ease}
details[open]{background:rgb(255 255 255/.015)}

/* Gentle reveal as sections enter view (script adds .pl-reveal only when motion is allowed) */
.pl-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.pl-reveal.pl-in{opacity:1;transform:none}

@media(max-width:760px){#top::after{background-size:40px 40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pl-reveal{opacity:1;transform:none;transition:none}.navlinks a::after{transition:none}}
/* Header "Agent ezPay™" lands on one card inside a row: mark it so the jump is visible. */
#agent,#approval-layer,#governed-payments{scroll-margin-top:120px;transition:border-color .4s,box-shadow .4s}
#agent:target,#approval-layer:target,#governed-payments:target{border-color:#19B5C5 !important;box-shadow:0 0 0 2px #19B5C5,0 12px 32px rgba(25,181,197,.18)}