/* ============================================================
   MAIA · design system · le pagine-mondo (sala macchine)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Geist:wght@300;400;500;600&family=Noto+Serif+JP:wght@300;500&family=JetBrains+Mono:wght@300;400;500&display=swap');
:root{
  --ink:#0e0a13; --ink2:#080510; --cream:#f3ebde; --candle:#b89dff; --candle-d:#8d62eb;
  --rule:rgba(216,207,193,.12); --dim:rgba(243,235,222,.5); --dim2:rgba(243,235,222,.32);
  --serif:'Fraunces','Times New Roman',serif; --sans:'Geist',system-ui,sans-serif; --mono:'JetBrains Mono','Courier New',monospace; --jp:'Noto Serif JP',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:300;line-height:1.65;overflow-x:hidden;min-height:100vh}
/* atmosfera: scanline + vignetta + grana viola */
body::before{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(184,157,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
body::after{content:'';position:fixed;inset:0;z-index:61;pointer-events:none;background:radial-gradient(ellipse at 50% 38%,transparent 52%,rgba(0,0,0,.55))}
.bgfield{position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 700px at 78% -8%,rgba(141,98,235,.16),transparent 60%),radial-gradient(900px 600px at 10% 110%,rgba(141,98,235,.12),transparent 60%),var(--ink)}
a{color:var(--candle);text-decoration:none}
::selection{background:var(--candle);color:var(--ink)}
:focus-visible{outline:1px solid var(--candle);outline-offset:3px}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:var(--ink2)}::-webkit-scrollbar-thumb{background:rgba(184,157,255,.22);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(184,157,255,.4)}
.mono{font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
/* ---------- header / terminal logo ---------- */
header.bar{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(20px,4vw,56px);background:linear-gradient(180deg,rgba(8,5,16,.92),rgba(8,5,16,.55) 70%,transparent);backdrop-filter:blur(7px)}
.brand{font-family:var(--mono);font-weight:500;font-size:.95rem;letter-spacing:.34em;color:var(--candle);text-shadow:0 0 14px rgba(184,157,255,.45);display:inline-flex;align-items:center}
.brand .cur{display:inline-block;width:.5em;height:1.05em;margin-left:.18em;background:var(--candle);box-shadow:0 0 10px rgba(184,157,255,.8);animation:cur 1.5s steps(1) infinite;transform:translateY(.1em)}
@keyframes cur{50%{opacity:0}}
.menu-trigger{display:inline-flex;align-items:center;gap:.7rem;background:none;border:none;color:var(--cream);cursor:pointer;font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase}
.menu-trigger .lines{position:relative;width:26px;height:10px}
.menu-trigger .lines span{position:absolute;left:0;width:100%;height:1px;background:var(--cream);transition:.35s}
.menu-trigger .lines span:nth-child(1){top:0}.menu-trigger .lines span:nth-child(2){bottom:0}
body.menu-open .menu-trigger .lines span:nth-child(1){top:4.5px;transform:rotate(45deg)}
body.menu-open .menu-trigger .lines span:nth-child(2){bottom:4.5px;transform:rotate(-45deg)}
/* ---------- menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:69;background:rgba(8,5,16,.97);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;display:flex;align-items:center}
body.menu-open .menu{opacity:1;visibility:visible}
.menu-inner{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px);display:grid;grid-template-columns:1.4fr 1fr;gap:4vw;align-items:center}
.menu-list{display:flex;flex-direction:column}
.menu-item{display:flex;align-items:baseline;gap:1.2rem;padding:.7rem 0;border-bottom:1px solid var(--rule);color:var(--cream);transition:.3s;opacity:0;transform:translateY(14px)}
body.menu-open .menu-item{opacity:1;transform:none}
body.menu-open .menu-item:nth-child(1){transition:.5s .05s}body.menu-open .menu-item:nth-child(2){transition:.5s .1s}body.menu-open .menu-item:nth-child(3){transition:.5s .15s}body.menu-open .menu-item:nth-child(4){transition:.5s .2s}body.menu-open .menu-item:nth-child(5){transition:.5s .25s}body.menu-open .menu-item:nth-child(6){transition:.5s .3s}body.menu-open .menu-item:nth-child(7){transition:.5s .35s}body.menu-open .menu-item:nth-child(8){transition:.5s .4s}
.menu-item .num{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--candle);width:2.4rem}
.menu-item .name{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.7rem);font-weight:300;flex:1}
.menu-item .arrow{color:var(--dim2);transition:.3s}
.menu-item:hover{padding-left:1rem;color:var(--candle)}
.menu-item:hover .arrow{color:var(--candle);transform:translateX(4px)}
.menu-item.active .name{font-style:italic;color:var(--candle)}
.menu-aside{display:flex;flex-direction:column;gap:2rem}
.menu-quote{font-family:var(--serif);font-size:1.15rem;line-height:1.6;color:var(--dim)}
.menu-quote em{color:var(--candle);font-style:italic}
.menu-meta{display:flex;gap:2.4rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim2)}
.menu-meta div span{display:block;color:var(--cream);margin-top:.3rem}
@media(max-width:820px){.menu-inner{grid-template-columns:1fr;gap:2.5rem}.menu-aside{display:none}}
/* ---------- page hero (terminal prompt) ---------- */
.phero{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding-top:7rem}
.phero .crumb{font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim2);margin-bottom:1.5rem}
.phero .crumb b{color:var(--candle);font-weight:400}
.phero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,6.6vw,5rem);line-height:1.06;letter-spacing:-.01em;max-width:18ch}
.phero h1 em{font-style:italic;color:var(--candle)}
.phero .lede{margin-top:1.6rem;font-size:1.08rem;line-height:1.7;color:var(--dim);max-width:54ch}
.phero .lede em{color:var(--cream);font-style:normal}
/* ---------- monitor card ---------- */
.mon{border:1px solid rgba(184,157,255,.2);border-radius:12px;background:linear-gradient(180deg,rgba(20,14,32,.5),rgba(12,8,20,.35));margin:1.2rem 0;overflow:hidden}
.mon-h{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.1rem;border-bottom:1px solid rgba(184,157,255,.14);font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--candle)}
.mon-h i{width:6px;height:6px;border-radius:50%;background:var(--candle);box-shadow:0 0 8px var(--candle);animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.25}}
.mon-h .tag{margin-left:auto;color:var(--dim2);letter-spacing:.2em}
.mon-b{padding:1.6rem 1.4rem}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* eyebrow section title */
.sec{padding:clamp(54px,8vh,96px) 0}
.eyebrow{font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--candle);margin-bottom:1.4rem;display:flex;align-items:center;gap:.8rem}
.eyebrow::before{content:'';width:2.4rem;height:1px;background:rgba(184,157,255,.4)}
.sec h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.12;max-width:20ch}
.sec h2 em{font-style:italic;color:var(--candle)}
.sec p.intro{margin-top:1.2rem;font-size:1rem;line-height:1.7;color:var(--dim);max-width:56ch}
/* reveal */
.rev{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}
/* ---------- agent / process card ---------- */
.acard{position:relative;border:1px solid rgba(184,157,255,.2);border-radius:12px;padding:1.5rem 1.4rem;background:linear-gradient(165deg,rgba(184,157,255,.05),rgba(12,8,20,0) 50%);transition:border-color .35s,transform .35s;display:flex;flex-direction:column;gap:.55rem}
.acard:hover{border-color:rgba(184,157,255,.55);transform:translateY(-4px)}
.acard .sig{width:50px;height:50px;border-radius:11px;border:1px solid rgba(184,157,255,.4);display:flex;align-items:center;justify-content:center;font-family:var(--jp);font-size:1.5rem;color:var(--candle);text-shadow:0 0 14px rgba(184,157,255,.5);margin-bottom:.4rem}
.acard h3{font-family:var(--serif);font-weight:400;font-size:1.4rem}
.acard .role{font-family:var(--mono);font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;color:var(--candle)}
.acard .desc{font-size:.9rem;color:var(--dim);line-height:1.6}
.acard .meta{margin-top:.4rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--dim2);line-height:1.7}
.acard .meta b{color:var(--cream);font-weight:400}
.acard .st{position:absolute;top:1.2rem;right:1.2rem;font-family:var(--mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--candle);display:flex;align-items:center;gap:.4rem}
.acard .st::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--candle);box-shadow:0 0 6px var(--candle);animation:blink 2.2s infinite}
/* ---------- valve / cta ---------- */
.valve{display:inline-flex;gap:.7rem;align-items:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--candle);background:none;border:1px solid rgba(184,157,255,.4);border-radius:10px;padding:.85rem 1.4rem;cursor:pointer;transition:background .3s,border-color .3s}
.valve:hover{background:rgba(184,157,255,.12);border-color:rgba(184,157,255,.7)}
.valve .arr{transition:transform .3s}.valve:hover .arr{transform:translateX(4px)}
.valve.solid{background:var(--candle);color:var(--ink);border-color:var(--candle)}
.valve.solid:hover{background:#c9b4ff}
/* ---------- persistent orb ---------- */
#mOrb{position:fixed;right:1.3rem;bottom:1.3rem;z-index:65;display:inline-flex;align-items:center;gap:.6rem;background:rgba(10,8,16,.82);backdrop-filter:blur(6px);border:1px solid rgba(184,157,255,.4);border-radius:999px;padding:.6rem 1.1rem .6rem .75rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);cursor:pointer;transition:.3s;max-width:74vw}
#mOrb .o{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#d6c4ff,#8d62eb 50%,#120a26 84%);box-shadow:0 0 12px rgba(184,157,255,.6);animation:om 8s ease-in-out infinite;flex:none}
@keyframes om{0%,100%{transform:scale(.92)}50%{transform:scale(1.08)}}
#mOrb:hover{border-color:rgba(184,157,255,.75);transform:translateY(-2px)}
/* ---------- footer ---------- */
footer.foot{border-top:1px solid var(--rule);margin-top:4rem;padding:2.6rem clamp(20px,4vw,56px);display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center}
footer.foot .fbrand{font-family:var(--mono);font-weight:500;letter-spacing:.3em;color:var(--candle)}
footer.foot nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase}
footer.foot nav a{color:var(--dim)}footer.foot nav a:hover{color:var(--candle)}
footer.foot .fmeta{font-family:var(--mono);font-size:.54rem;letter-spacing:.18em;color:var(--dim2);text-transform:uppercase}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.rev{opacity:1;transform:none}}