/* Gradient stroke: a 1.5px border painted by a masked gradient layer.
   Used on cards and plates where the source shows a blue accent fading in
   along the right edge. Never substitute a flat single-colour border. */
.nai-gradient-edge::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--gradient-stroke-w);background:var(--gradient-stroke);-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;pointer-events:none}

/* Edge accent: a 1px masked border that is a muted grey hairline around most of
   the perimeter and brightens to electric blue on the right rounded side, fading
   out towards the top and bottom. Not a neon frame, not a flat blue box. */
.nai-edge-accent::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(72% 88% at 100% 50%,#4CA5FF 0%,#4CA5FF 16%,rgba(76,165,255,.8) 32%,rgba(76,165,255,.28) 52%,rgba(76,165,255,0) 72%),linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07));-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;pointer-events:none}

/* Interaction: opacity for dark surfaces, slight lift for accent fills. */
.nai-btn:hover{opacity:.88}
.nai-btn:active{opacity:.76}
.nai-glass:hover{background:rgba(28,30,32,.34)}
.nai-glass:active{background:rgba(28,30,32,.46)}
.nai-iconbtn:hover{opacity:.85}
.nai-iconbtn:active{opacity:.7}
.nai-navlink{color:var(--text-primary);transition:opacity var(--transition)}
.nai-navlink:hover{opacity:.6}
.nai-footerlink{color:var(--text-secondary);transition:color var(--transition)}
.nai-footerlink:hover{color:var(--text-primary)}
.nai-faq{cursor:pointer;transition:background var(--transition)}
.nai-faq:hover{background:#131617}

/* Gallery tile hover reveal — transform/opacity only, clipped by the tile's radius. */
.nai-gallery-img{transition:transform 360ms cubic-bezier(.22,1,.36,1);will-change:transform}
.nai-gallery:hover .nai-gallery-img{transform:scale(1.03)}
.nai-gallery-veil{opacity:0;transition:opacity 360ms cubic-bezier(.22,1,.36,1);background:linear-gradient(to top,rgba(2,8,15,.82) 0%,rgba(2,8,15,.44) 34%,rgba(2,8,15,0) 100%)}
.nai-gallery:hover .nai-gallery-veil{opacity:1}
.nai-gallery-cap{opacity:0;transform:translateY(10px);transition:opacity 340ms cubic-bezier(.22,1,.36,1),transform 340ms cubic-bezier(.22,1,.36,1)}
.nai-gallery:hover .nai-gallery-cap{opacity:1;transform:translateY(0)}
@media (hover:none){
.nai-gallery-veil{opacity:1;background:linear-gradient(to top,rgba(2,8,15,.6) 0%,rgba(2,8,15,.26) 36%,rgba(2,8,15,0) 100%)}
.nai-gallery-cap{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
.nai-gallery-img,.nai-gallery-veil,.nai-gallery-cap{transition-duration:1ms}
.nai-gallery:hover .nai-gallery-img{transform:none}
}

/* Header frosted glass. Surface lives here rather than inline so a host page can
   drive the density with --hdr-fill / --hdr-blur / --hdr-shadow (see a sticky wrapper)
   without fighting inline styles. */
.nai-header{background:var(--hdr-fill,var(--header-fill));backdrop-filter:var(--hdr-blur,var(--header-blur));-webkit-backdrop-filter:var(--hdr-blur,var(--header-blur));box-shadow:var(--header-border),var(--header-sheen),var(--hdr-shadow,var(--header-shadow));transition:background-color 280ms ease,backdrop-filter 280ms ease,-webkit-backdrop-filter 280ms ease,box-shadow 280ms ease}