/* ============================================================================
   Pieran Lab — stile condiviso pagine progetto (Liquid Glass "Electric Aurora")
   Fedele a index.html; usato da rgv.html / macro.html / cognitiveos.html.
   ============================================================================ */
:root{
  --font-display:"Bricolage Grotesque","Space Grotesk",system-ui,sans-serif;
  --font-sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --page-bg:#04060e;
  --page-gradient:
    radial-gradient(78% 58% at 10% -14%,rgba(63,130,255,0.16) 0%,transparent 55%),
    radial-gradient(68% 52% at 96% 4%,rgba(34,211,255,0.10) 0%,transparent 52%),
    radial-gradient(92% 72% at 60% 124%,rgba(109,92,255,0.13) 0%,transparent 55%);
  --accent:#3f82ff; --accent-2:#22d3ff; --accent-strong:#7aa6ff; --accent-hover:#5c93ff;
  --accent-bg:rgba(63,130,255,0.14);
  --card:rgba(18,25,46,0.55); --surface-sunk:rgba(4,8,20,0.5);
  --glass-bg:rgba(16,22,42,0.58); --glass-blur:blur(26px) saturate(1.5);
  --glass-border:rgba(255,255,255,0.12); --glass-highlight:rgba(255,255,255,0.16);
  --glass-shadow:0 18px 44px rgba(0,0,0,0.45);
  --border:rgba(255,255,255,0.12); --stroke:rgba(255,255,255,0.10); --divider:rgba(255,255,255,0.08);
  --text:#eef2ff; --muted:#9fb0d0; --subtle:#66759c; --success:#34e0a1;
  --space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;
  --fs-display:clamp(2.1rem,1.5rem+2.8vw,3.2rem);
  --fs-h1:clamp(1.6rem,1.3rem+1.4vw,2.25rem);
  --fs-h2:clamp(1.3rem,1.15rem+0.7vw,1.6rem);
  --fs-body:1rem;--fs-sm:0.9375rem;--fs-label:0.8125rem;
  --dur:200ms;--dur-slow:300ms;--ease-out:cubic-bezier(0.23,1,0.32,1);
  --container:1080px; --focus-ring:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.6;letter-spacing:-0.01em;color:var(--text);background:var(--page-bg);background-image:var(--page-gradient);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
a{color:var(--accent-strong);text-decoration:none}a:hover{color:var(--accent-hover)}
:where(a,button):focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)}
h1,h2,h3,.wordmark{font-family:var(--font-display);letter-spacing:-0.02em;line-height:1.14}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}
.brand-gradient{background:linear-gradient(120deg,#bcd3ff,var(--accent) 45%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(4,6,14,0.72);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--divider)}
.nav-inner{max-width:var(--container);margin:0 auto;padding:0 var(--space-5);height:64px;display:flex;align-items:center;justify-content:space-between}
.nav .wordmark{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:800;color:var(--text)}
.logo-mark{width:30px;height:30px;border-radius:9px;flex:0 0 auto;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 18px rgba(63,130,255,.45),inset 0 1px 0 rgba(255,255,255,.25);position:relative}
.logo-mark::after{content:"";position:absolute;inset:7px;border-radius:4px;border:2px solid rgba(255,255,255,.9);border-right-color:transparent;border-bottom-color:transparent}
.nav .back{color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.nav .back:hover{color:var(--text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 var(--space-5);border-radius:var(--r-pill);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:600;cursor:pointer;border:1px solid transparent;transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-hover));box-shadow:0 10px 28px rgba(63,130,255,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-primary:hover{box-shadow:0 14px 34px rgba(63,130,255,.5)}
.btn-ghost{color:var(--text);background:var(--accent-bg);border-color:var(--glass-border)}
.btn-ghost:hover{color:#fff;background:rgba(63,130,255,.22)}

/* glass + layout */
.glass{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-highlight)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-strong);padding:6px 12px;border-radius:var(--r-pill);background:var(--accent-bg);border:1px solid var(--glass-border)}
section{padding:var(--space-16) 0}

/* project hero */
.phero{padding:var(--space-16) 0 var(--space-10)}
.phero h1{font-size:var(--fs-display);margin:var(--space-5) 0 var(--space-4);max-width:18ch}
.phero .lead{font-size:1.2rem;color:var(--muted);max-width:60ch;margin:0 0 var(--space-6)}
.phero .chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-8)}
.chip{font-size:var(--fs-label);color:var(--muted);padding:6px 12px;border-radius:var(--r-pill);background:var(--surface-sunk);border:1px solid var(--stroke)}

/* framed screenshot */
.frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--glass-border);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.frame .bar{display:flex;align-items:center;gap:6px;padding:11px 15px;background:rgba(4,8,20,.7);border-bottom:1px solid var(--stroke)}
.frame .bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.frame .bar i:nth-child(1){background:#ff5f57}.frame .bar i:nth-child(2){background:#febc2e}.frame .bar i:nth-child(3){background:#28c840}
.frame .bar span{margin-left:10px;font-size:.78rem;color:var(--subtle)}
.frame img{display:block;width:100%;height:auto}
.frame.tall{max-height:560px;overflow:hidden;position:relative}
.frame.tall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,rgba(4,6,14,.9))}
.shot-note{color:var(--subtle);font-size:var(--fs-label);margin-top:var(--space-3);text-align:center}

/* prose sections */
.sec-head{max-width:640px;margin-bottom:var(--space-8)}
.sec-head h2{font-size:var(--fs-h1);margin:var(--space-4) 0 var(--space-3)}
.sec-head p{color:var(--muted);font-size:1.05rem;margin:0}
.two-col{display:grid;gap:var(--space-6);grid-template-columns:1fr}
@media(min-width:820px){.two-col{grid-template-columns:1fr 1fr}}
.block{padding:var(--space-8)}
.block h3{font-size:1.2rem;margin:0 0 var(--space-3);display:flex;align-items:center;gap:10px}
.block p{color:var(--muted);margin:0}
.block .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--accent-bg);border:1px solid var(--glass-border);color:var(--accent-strong);flex:0 0 auto}
.block .ico svg{width:22px;height:22px}

/* feature grid */
.features{display:grid;gap:var(--space-5);grid-template-columns:1fr}
@media(min-width:640px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:940px){.features{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feat{padding:var(--space-6)}
.feat h3{font-size:1.05rem;margin:0 0 var(--space-2)}
.feat p{color:var(--muted);font-size:var(--fs-sm);margin:0}
.feat .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--accent-bg);border:1px solid var(--glass-border);color:var(--accent-strong);margin-bottom:var(--space-4)}
.feat .ico svg{width:22px;height:22px}

/* tech chips row */
.tech{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tech .chip{background:var(--accent-bg);border-color:var(--glass-border);color:var(--text)}

/* stat row */
.stats{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:var(--space-6)}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:1.9rem;background:linear-gradient(120deg,#cfe0ff,var(--accent) 50%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:var(--muted);font-size:var(--fs-sm);margin-top:6px}

/* cta band */
.cta-band{padding:var(--space-12);text-align:center;margin-top:var(--space-8)}
.cta-band h2{font-size:var(--fs-h1);margin:0 0 var(--space-3)}
.cta-band p{color:var(--muted);max-width:48ch;margin:0 auto var(--space-8)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}

/* footer (compatto) */
footer{border-top:1px solid var(--divider);padding:var(--space-12) 0;margin-top:var(--space-16);text-align:center}
footer .lines{color:var(--subtle);font-size:var(--fs-label);line-height:1.9}
footer .lines strong{color:var(--muted)}
footer .lines a{color:var(--subtle)}footer .lines a:hover{color:var(--muted)}

/* reveal */
@media(prefers-reduced-motion:no-preference){
  .stagger>*{opacity:0;animation:rise var(--dur-slow) var(--ease-out) both}
  .stagger>*:nth-child(1){animation-delay:40ms}.stagger>*:nth-child(2){animation-delay:100ms}
  .stagger>*:nth-child(3){animation-delay:160ms}.stagger>*:nth-child(4){animation-delay:220ms}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}