/* Tailwind used for base; custom styles below */
:root{--deep1:#001122;--deep2:#00304a;--accent:#06b6d4}
html,body{height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;margin:0}
/* ripple layer */
#ripple-layer{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(6,182,212,0.14) 0%, rgba(6,182,212,0.06) 8%, transparent 30%);transition:background-position .08s linear,opacity .18s linear;z-index:0;opacity:0.9}
/* particle canvas sits above ripple but below content */
#particle-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.18}
/* glass */
.glass{background:rgba(10,20,30,0.42);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.04)}
.grad-text{background:linear-gradient(90deg,#47c9d8,#0ea5a4);-webkit-background-clip:text;background-clip:text;color:transparent}
.reveal{transform:translateY(12px);opacity:0;transition:all .6s cubic-bezier(.2,.9,.2,1)}
.reveal.show{transform:none;opacity:1}
@media (max-width:880px){.grad-text{font-weight:700}}