/* =========================================================
   MUSECITY — Liquid Glass (light)
   ========================================================= */
:root{
  --bg:#eef2fb;
  --ink:#1b2440;
  --ink-2:#3a4466;
  --muted:#5f6a8a;
  --subtle:#8a93ad;
  --line:rgba(27,36,64,.08);

  --violet:#6d5cff;
  --violet-2:#8b7bff;
  --aqua:#0ea5c6;
  --mint:#10b981;
  --amber:#f59e0b;
  --rose:#f43f5e;
  --pink:#ec4899;

  --grad:linear-gradient(120deg,#7b6bff 0%,#6d5cff 40%,#22c1dc 100%);

  --glass-bg:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.44));
  --glass-border:rgba(255,255,255,.8);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(120,130,200,.10),
    0 18px 40px -18px rgba(44,52,120,.28),
    0 2px 8px rgba(44,52,120,.06);
  --blur:blur(22px) saturate(180%);

  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px;

  --f-display:'Sora', system-ui, sans-serif;
  --f-body:'Plus Jakarta Sans', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:96px;}
body{
  margin:0; min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px; line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:rgba(109,92,255,.22); color:var(--ink); }
h1,h2,h3{ font-family:var(--f-display); line-height:1.15; letter-spacing:-.02em; margin:0; }
.mono{ font-family:var(--f-mono); }
a{ color:var(--violet); }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:3px solid rgba(109,92,255,.55); outline-offset:3px; border-radius:10px; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 28px; }

/* ---------- ambient liquid background ---------- */
.aurora{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#f3f5fd 0%, #eaf0fb 50%, #eef1fb 100%);
}
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:float 26s ease-in-out infinite; }
.b1{ width:520px; height:520px; left:-120px; top:-80px; background:#c9bcff; }
.b2{ width:460px; height:460px; right:-120px; top:120px; background:#a6ecf7; animation-delay:-8s; }
.b3{ width:420px; height:420px; left:30%; top:55%; background:#ffd9c7; animation-delay:-14s; opacity:.45; }
.b4{ width:380px; height:380px; right:10%; bottom:-120px; background:#c8f3dd; animation-delay:-20s; }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1);} 33%{ transform:translate(40px,-30px) scale(1.06);} 66%{ transform:translate(-30px,30px) scale(.96);} }

/* ---------- glass primitive ---------- */
.glass{
  position:relative;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow);
}
.glass::before{ /* specular sheen */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 35%);
  mix-blend-mode:soft-light;
}
.glass > *{ position:relative; }

/* ---------- buttons ---------- */
.btn{
  --h:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--h); padding:0 20px;
  font-family:var(--f-body); font-weight:700; font-size:15px; line-height:1;
  text-decoration:none; white-space:nowrap;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, opacity .18s;
}
.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.55; cursor:default; transform:none; }
.btn-sm{ --h:38px; padding:0 15px; font-size:13.5px; }
.btn-lg{ --h:54px; padding:0 26px; font-size:16px; }
.btn-primary{
  color:#fff; background:var(--grad);
  border-color:rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(40,20,140,.18), 0 10px 24px -8px rgba(109,92,255,.55);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(40,20,140,.18), 0 14px 30px -8px rgba(109,92,255,.65); }
.btn-glass, .btn.ghost{
  color:var(--ink); background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-color:rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px -8px rgba(44,52,120,.25);
}
.btn-glass:hover, .btn.ghost:hover{ background:rgba(255,255,255,.85); transform:translateY(-1px); }

/* ---------- NAV ---------- */
header.nav{ position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 16px 0; }
.nav-inner{
  max-width:1200px; margin:0 auto; min-height:64px; padding:10px 12px 10px 18px;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px;
  border-radius:999px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-mark{ width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(63,120,214,.35)); }
.footer-logo{ width:150px; height:auto; margin-bottom:4px; }
.brand-word{ font-family:var(--f-display); font-weight:800; font-size:19px; letter-spacing:.02em; }
.brand-word{ color:#13235c; }
.brand-word span{ color:#3f78d6; }
.nav-menu{ display:flex; justify-content:center; gap:4px; }
.nav-menu a{
  color:var(--ink-2); text-decoration:none; font-weight:600; font-size:14.5px;
  padding:8px 14px; border-radius:999px; transition:background .15s,color .15s;
}
.nav-menu a:hover{ background:rgba(255,255,255,.75); color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:8px; }
#wallet-addr{
  font-size:13px; color:var(--ink-2); padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9);
  white-space:nowrap; display:none;
}
#wallet-addr.visible{ display:inline-block; }
#stake-btn-nav{ display:none; }
#stake-btn-nav.is-visible{ display:inline-flex; }
.nav-toggle{
  display:none; width:40px; height:40px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff; position:relative;
}
.nav-toggle span{ position:absolute; left:12px; right:12px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s, top .2s; }
.nav-toggle span:first-child{ top:15px; } .nav-toggle span:last-child{ top:23px; }
.nav-toggle[aria-expanded="true"] span:first-child{ top:19px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ top:19px; transform:rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{ padding:140px 0 40px; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--violet);
  padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 6px 16px -10px rgba(44,52,120,.3); margin-bottom:22px;
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(16,185,129,.5); animation:pulse 1.8s infinite; display:inline-block; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.5);} 80%,100%{ box-shadow:0 0 0 9px rgba(16,185,129,0);} }
h1.headline{ font-size:clamp(34px,4.6vw,56px); font-weight:800; margin-bottom:20px; }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ font-size:clamp(16px,1.6vw,18.5px); color:var(--muted); max-width:560px; margin:0 0 14px; }
.hero-ca{ display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin:0 0 28px; }
.hero-ca span{ font-weight:600; padding:3px 9px; border-radius:8px; background:rgba(109,92,255,.1); color:var(--violet); }
.hero-ca code{ font-family:inherit; word-break:break-all; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px; }
.hero-facts{ list-style:none; margin:0; padding:0; display:flex; gap:28px; flex-wrap:wrap; }
.hero-facts li{ display:flex; flex-direction:column; }
.hero-facts b{ font-family:var(--f-display); font-size:22px; }
.hero-facts span{ font-size:13px; color:var(--muted); }

.hero-visual{ position:relative; min-height:520px; display:flex; align-items:center; justify-content:flex-end; }
.mascot-stage{
  position:relative; width:min(460px,100%); aspect-ratio:4/5; border-radius:36px; overflow:hidden;
  background:#a7c6ff; border:1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 30px 60px -28px rgba(37,99,235,.55), 0 4px 14px rgba(44,52,120,.08);
}
.mascot-stage img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform-origin:50% 90%; animation:breathe 6s ease-in-out infinite; }
.mascot-stage::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 32%), radial-gradient(80% 50% at 50% 110%, rgba(37,99,235,.25), transparent 70%); }
@keyframes breathe{ 0%,100%{ transform:scale(1) translateY(0);} 50%{ transform:scale(1.015) translateY(-5px);} }
.float-card{ animation:bob 7s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.agent-preview{ position:absolute; left:-24px; bottom:-28px; width:min(310px,78%); padding:16px 18px; border-radius:var(--r-xl); z-index:2; }
.agent-preview .ap-traits{ margin:12px 0; }
.agent-preview .ap-status{ white-space:nowrap; }
.ap-head{ display:flex; align-items:center; gap:14px; }
.ap-avatar{ width:64px; height:64px; border-radius:18px; overflow:hidden; flex:none;
  background:linear-gradient(160deg,#e4f6ff,#efe9ff); border:1px solid #fff; box-shadow:inset 0 1px 0 #fff, 0 6px 14px -8px rgba(44,52,120,.35);
  display:flex; align-items:flex-end; justify-content:center; }
.ap-sprite{ width:48px; height:48px; background:url("musecity-sprite.png") no-repeat; background-size:240px 240px; background-position:0 0; image-rendering:pixelated; animation:sprite-cycle .9s steps(5) infinite; transform:scale(1.2); transform-origin:bottom; }
.ap-id{ flex:1; min-width:0; }
.ap-name{ font-family:var(--f-display); font-weight:700; font-size:20px; }
.ap-status{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.ap-status i{ width:7px; height:7px; border-radius:50%; background:var(--amber); }
.chip{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.95); color:var(--ink-2); box-shadow:inset 0 1px 0 #fff; }
.chip-violet{ background:rgba(109,92,255,.12); color:var(--violet); border-color:rgba(109,92,255,.2); font-family:var(--f-mono); }
.ap-traits{ display:flex; gap:6px; flex-wrap:wrap; margin:16px 0; }
.ap-bars{ display:grid; gap:10px; }
.bar{ display:grid; grid-template-columns:86px 1fr; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.bar i{ height:8px; border-radius:99px; background:rgba(27,36,64,.07); position:relative; overflow:hidden; }
.bar i::after{ content:""; position:absolute; inset:0; width:var(--v); border-radius:inherit; background:var(--grad); }
.ap-foot{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.ap-foot > div{ padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.9); }
.ap-foot small{ display:block; font-size:11.5px; color:var(--subtle); text-transform:uppercase; letter-spacing:.06em; }
.ap-foot b{ font-size:14.5px; }
.mini{ position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:18px; font-size:13px; }
.mini b{ display:block; font-size:13.5px; } .mini small{ color:var(--muted); }
.mini-ico{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.8); font-size:17px; }
.mini-a{ top:40px; left:0; animation-delay:-2s; z-index:2; }
.mini-b{ top:40%; right:-22px; animation-delay:-4.5s; z-index:2; }
.mini-c{ bottom:-24px; right:-10px; animation-delay:-1s; z-index:2; }
.mini-c .mini-ico{ font-weight:700; color:var(--mint); }

/* street window (skyline) */
.street-window{ margin-top:48px; padding:8px; border-radius:var(--r-xl); overflow:hidden; }
.skyline{
  position:relative; height:240px; border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,#cfe9ff 0%, #e8f3ff 55%, #fbeedd 100%);
}
.street-label{ position:absolute; left:22px; top:20px; display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid #fff; }
.sun{ position:absolute; top:24px; right:60px; width:54px; height:54px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6c9, #ffd35c); box-shadow:0 0 50px 12px rgba(255,211,92,.45); }
.cloud{ position:absolute; background:rgba(255,255,255,.9); border-radius:999px; animation:drift linear infinite; filter:blur(.3px); }
@keyframes drift{ 0%{ transform:translateX(-140px);} 100%{ transform:translateX(calc(100vw + 140px));} }
.building{ position:absolute; bottom:0; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(214,222,245,.75));
  border:1px solid rgba(255,255,255,.95); border-bottom:0;
  box-shadow:inset 0 1px 0 #fff, 0 -4px 20px -12px rgba(44,52,120,.25); }
.building.alt{ background:linear-gradient(180deg, rgba(232,226,255,.9), rgba(200,190,250,.7)); }
.building i{ position:absolute; width:6px; height:7px; border-radius:2px; opacity:.9; animation:winkflicker 5s steps(1) infinite; }
.building .leaf{ position:absolute; width:7px; height:7px; border-radius:50%; background:#6fcf8e; top:-6px; }
.street{ position:absolute; left:0; right:0; bottom:0; height:34px; background:linear-gradient(180deg,#f2e8d6,#e9dcc3); }
.street::after{ content:''; position:absolute; top:15px; left:0; right:0; height:3px;
  background:repeating-linear-gradient(90deg, rgba(120,100,60,.35) 0 22px, transparent 22px 44px); }
.canal{ position:absolute; left:0; right:0; bottom:34px; height:8px; background:linear-gradient(90deg,#8fdcef,#a8e6f5); }
.agent{ position:absolute; bottom:30px; width:48px; height:48px; z-index:4; pointer-events:none; animation:walk-across linear infinite; }
.agent.to-left{ animation-name:walk-back; }
.agent.idle{ animation:none; }
.agent-sprite{ --row:-192px; width:48px; height:48px; background:url("musecity-sprite.png") no-repeat; background-size:240px 240px;
  background-position:0 var(--row); image-rendering:pixelated; animation:sprite-cycle .6s steps(5) infinite; }
.agent.to-left .agent-sprite{ --row:-144px; }
.agent.idle .agent-sprite{ --row:0px; animation-duration:1s; }
.agent::after{ content:""; position:absolute; left:10px; right:10px; bottom:1px; height:5px; border-radius:50%; background:rgba(27,36,64,.18); z-index:-1; }
@keyframes walk-across{ 0%{ transform:translateX(-56px);} 100%{ transform:translateX(calc(100vw + 56px));} }
@keyframes walk-back{ 0%{ transform:translateX(calc(100vw + 56px));} 100%{ transform:translateX(-56px);} }
@keyframes sprite-cycle{ from{ background-position-x:0;} to{ background-position-x:-240px;} }
@keyframes winkflicker{ 0%,55%{ opacity:.9;} 56%,60%{ opacity:.35;} 61%,100%{ opacity:.9;} }

/* ---------- TICKER ---------- */
.ticker{ overflow:hidden; white-space:nowrap; padding:14px 0; margin:24px 0 0;
  background:rgba(255,255,255,.5); border-block:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ticker-track{ display:inline-flex; gap:44px; animation:ticker-scroll 40s linear infinite; }
.ticker span{ font-size:14px; color:var(--muted); font-weight:500; }
.ticker span b{ color:var(--violet); font-weight:700; }
@keyframes ticker-scroll{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }

/* ---------- SECTIONS ---------- */
section{ padding:96px 0; }
section.hero{ padding-bottom:40px; }
section.tint{ background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.45) 20%, rgba(255,255,255,.45) 80%, rgba(255,255,255,0)); }
.sec-head{ margin-bottom:44px; max-width:720px; }
.section-tag{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--violet); margin-bottom:12px; }
h2.section-title{ font-size:clamp(26px,3.4vw,40px); font-weight:700; margin-bottom:14px; }
.section-desc{ color:var(--muted); font-size:17px; margin:0; }

/* loop */
.loop-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.loop-card{ padding:26px 22px 24px; transition:transform .25s ease; }
.loop-card:hover{ transform:translateY(-4px); }
.loop-num{ position:absolute; top:20px; right:20px; font-family:var(--f-mono); font-size:13px; color:var(--subtle); }
.loop-ico{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:22px; margin-bottom:18px;
  background:linear-gradient(160deg,#fff,#eef0ff); border:1px solid #fff; box-shadow:inset 0 1px 0 #fff, 0 8px 16px -10px rgba(109,92,255,.5); }
.loop-card h3{ font-size:19px; margin-bottom:8px; }
.loop-card p{ color:var(--muted); font-size:15px; margin:0; }

/* statsheet */
.statsheet{ display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start; }
.status-window{ padding:24px; }
.win-title{ display:flex; align-items:center; gap:12px; font-family:var(--f-display); font-weight:700; font-size:16px; margin-bottom:18px; }
.dots{ display:inline-flex; gap:6px; } .dots i{ width:10px; height:10px; border-radius:50%; background:#ff8a8a; }
.dots i:nth-child(2){ background:#ffd166; } .dots i:nth-child(3){ background:#6fdc8c; }
.factor-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.factor-list li{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; padding:10px 12px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.95); }
.factor-list li::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--grad); flex:none; }
.archetypes{ display:grid; gap:14px; }
.archetype{ padding:18px 20px; display:flex; gap:16px; align-items:flex-start; }
.archetype .tag{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 10px; border-radius:999px; flex:none;
  color:var(--a); background:color-mix(in srgb, var(--a) 13%, white); border:1px solid color-mix(in srgb, var(--a) 25%, white); }
.archetype p{ margin:0; color:var(--muted); font-size:15px; }
.archetype strong{ display:block; color:var(--ink); font-family:var(--f-display); font-size:16.5px; margin-bottom:2px; }

/* mascot banner */
.mascot-banner{ display:grid; grid-template-columns:1fr 1.1fr; align-items:stretch; gap:0; margin-bottom:28px; border-radius:var(--r-xl); overflow:hidden; }
.mascot-banner.pink{ background:linear-gradient(120deg, rgba(255,255,255,.8), rgba(255,234,255,.75)); }
.mb-copy{ padding:34px 32px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.mb-copy h3{ font-size:clamp(22px,2.6vw,30px); }
.mb-copy p{ margin:0; color:var(--muted); }
.chip-rose{ align-self:flex-start; background:rgba(236,72,153,.12); color:#db2777; border-color:rgba(236,72,153,.22); }
.mb-art{ position:relative; min-height:260px; background:#ffeaff; }
.mb-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.mb-art::before{ content:""; position:absolute; inset:0 auto 0 0; width:90px; z-index:1; background:linear-gradient(90deg, rgba(255,240,255,.95), rgba(255,234,255,0)); }

/* yield split */
.sec-split{ display:grid; grid-template-columns:1.3fr .7fr; gap:36px; align-items:center; margin-bottom:44px; }
.sec-split .sec-head{ margin-bottom:0; }
.vault-badge{ display:inline-flex; align-items:center; gap:12px; margin-top:22px; padding:10px 16px; border-radius:999px; }
.vault-badge b{ display:block; font-size:14px; } .vault-badge small{ color:var(--muted); font-size:12.5px; }
.orb-card{ padding:10px; border-radius:36px; }
.orb-card img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:28px; background:#f1eff2; }
.orb-card::after{ content:""; position:absolute; left:50%; top:52%; width:40%; height:30%; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,.35), transparent 70%); filter:blur(18px); z-index:-1; animation:orb 3.2s ease-in-out infinite; }
@keyframes orb{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }

/* cta walker */
.cta-card{ flex-wrap:nowrap; }
.cta-copy{ flex:1; min-width:0; }
.cta-walker{ width:86px; height:86px; flex:none; border-radius:24px; display:grid; place-items:center;
  background:linear-gradient(160deg,#dfe9ff,#c9daff); border:1px solid #fff; box-shadow:inset 0 1px 0 #fff, 0 10px 24px -12px rgba(37,99,235,.55); }
.cta-sprite{ width:64px; height:64px; background:url("musecity-sprite.png") no-repeat; background-size:320px 320px; background-position:0 -256px;
  image-rendering:pixelated; animation:sprite-cycle-lg .6s steps(5) infinite; }
@keyframes sprite-cycle-lg{ from{ background-position-x:0;} to{ background-position-x:-320px;} }

/* map */
.map-frame{ padding:8px; border-radius:var(--r-xl); }
.map-scroll{ overflow-x:auto; overflow-y:hidden; cursor:grab; border-radius:22px; scrollbar-width:thin; scrollbar-color:rgba(109,92,255,.5) transparent; }
.map-scroll:active{ cursor:grabbing; }
.map-scroll img{ height:440px; width:auto; max-width:none; image-rendering:pixelated; user-select:none; -webkit-user-drag:none; }
.map-scroll::-webkit-scrollbar{ height:8px; } .map-scroll::-webkit-scrollbar-thumb{ background:rgba(109,92,255,.45); border-radius:9px; }
.map-hint{ text-align:center; font-size:13.5px; color:var(--muted); padding:10px 0 4px; }
.map-legend{ margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.legend-item{ display:flex; flex-direction:column; gap:3px; padding:16px 18px; border-radius:var(--r-md); font-size:14px; color:var(--muted); }
.legend-item .dot{ width:10px; height:10px; border-radius:50%; margin-bottom:8px; box-shadow:0 0 0 4px rgba(255,255,255,.8); }
.legend-item b{ color:var(--ink); font-size:14.5px; }

/* gallery */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gallery-grid > div{ padding:8px; border-radius:var(--r-xl); }
.photo-slot{ aspect-ratio:1/1; border-radius:22px; overflow:hidden; position:relative; background:#dfe5f5; }
.photo-slot img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; transition:transform .5s ease; }
.gallery-grid > div:hover .photo-slot img{ transform:scale(1.04); }
.photo-slot .corner{ display:none; }
.gallery-caption{ display:flex; justify-content:space-between; align-items:center; padding:12px 8px 6px; font-size:14px; color:var(--muted); }
.gallery-caption b{ color:var(--ink); font-weight:700; }

/* vault */
.vault-flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:v; }
.vault-step{ padding:24px 22px; }
.vault-step:not(:last-child)::after{
  content:"→"; position:absolute; right:-16px; top:50%; transform:translateY(-50%); z-index:2;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:14px; color:var(--violet);
  background:#fff; box-shadow:0 4px 12px -4px rgba(44,52,120,.3);
}
.vault-step .icon{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:20px; margin-bottom:14px; color:#fff; background:var(--grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -8px rgba(109,92,255,.6); }
.vault-step h3{ font-size:17px; margin-bottom:6px; }
.vault-step p{ font-size:14.5px; color:var(--muted); margin:0; }

/* eligibility */
.eligibility-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.status-card{ padding:26px; }
.status-card h3{ font-size:19px; margin:14px 0 12px; }
.status-card ul{ margin:0; padding-left:20px; color:var(--muted); font-size:15px; display:grid; gap:8px; }
.status-pill{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:6px 12px; border-radius:999px; }
.status-pill i{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.status-card.active .status-pill{ color:#059669; background:rgba(16,185,129,.12); }
.status-card.removed .status-pill{ color:#e11d48; background:rgba(244,63,94,.12); }
.status-card.active{ box-shadow:var(--glass-shadow), inset 0 3px 0 rgba(16,185,129,.55); }
.status-card.removed{ box-shadow:var(--glass-shadow), inset 0 3px 0 rgba(244,63,94,.5); }

/* how to play */
.htp-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.htp-step{ display:grid; grid-template-columns:52px 1fr; gap:18px; padding:20px; align-items:center; }
.htp-step .num{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:18px; font-weight:600; color:#fff; background:var(--grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -8px rgba(109,92,255,.6); }
.htp-step h3{ font-size:17px; margin-bottom:4px; }
.htp-step p{ margin:0; color:var(--muted); font-size:15px; }
.cta-card{ margin-top:28px; padding:26px 28px; border-radius:var(--r-xl); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(123,107,255,.16), rgba(34,193,220,.14)), var(--glass-bg); }
.cta-card h3{ font-size:22px; margin-bottom:4px; }
.cta-card p{ margin:0; color:var(--muted); }

/* faq */
.faq-list{ display:grid; gap:12px; max-width:820px; }
.faq-list details{ border-radius:var(--r-md); padding:0; }
.faq-list summary{ list-style:none; cursor:pointer; padding:18px 22px; font-weight:700; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; font-size:22px; font-weight:500; color:var(--violet); transition:transform .2s; }
.faq-list details[open] summary::after{ transform:rotate(45deg); }
.faq-list details p{ margin:0; padding:0 22px 20px; color:var(--muted); }

/* footer */
footer{ padding:24px 0 36px; }
.footer-card{ padding:30px 32px; border-radius:var(--r-xl); }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.footer-note{ color:var(--muted); font-size:14.5px; max-width:460px; margin:12px 0 0; }
.footer-links{ display:flex; gap:6px; flex-wrap:wrap; }
.footer-links a{ color:var(--ink-2); text-decoration:none; font-weight:600; font-size:14px; padding:8px 12px; border-radius:999px; }
.footer-links a:hover{ background:rgba(255,255,255,.8); }
.disclaimer{ margin:24px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--subtle); }

/* ---------- MODALS ---------- */
.modal-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(226,232,248,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .2s ease; }
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-panel{ width:100%; max-width:440px; padding:30px; border-radius:var(--r-xl);
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  transform:translateY(10px) scale(.98); transition:transform .22s ease; }
.modal-overlay.open .modal-panel{ transform:none; }
.modal-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:13px; color:var(--muted);
  background:rgba(255,255,255,.8); border:1px solid #fff; box-shadow:inset 0 1px 0 #fff, 0 4px 10px -6px rgba(44,52,120,.4); }
.modal-close:hover{ color:var(--rose); }
.modal-title{ font-size:22px; margin:0 0 8px; }
.modal-sub{ color:var(--muted); font-size:15px; margin:0 0 20px; }
.modal-label{ display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:8px; }
.modal-input{ width:100%; font:inherit; font-size:17px; color:var(--ink); padding:13px 16px; border-radius:14px; margin-bottom:8px;
  background:rgba(255,255,255,.85); border:1px solid rgba(27,36,64,.1); box-shadow:inset 0 2px 4px rgba(27,36,64,.05); }
.modal-input:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 4px rgba(109,92,255,.15); }
.modal-status{ min-height:20px; color:#059669; font-size:13.5px; margin-bottom:8px; }
.modal-status.error{ color:#e11d48; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px; flex-wrap:wrap; }
.modal-field[hidden]{ display:none; }
.modal-agent-name{ color:var(--violet); font-weight:700; }

.wallet-modal-panel{ max-width:520px; }
.wallet-list{ display:grid; gap:10px; max-height:320px; overflow:auto; margin:4px 0 8px; padding:2px; }
.wallet-option{ width:100%; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px 14px;
  font:inherit; color:var(--ink); text-align:left; cursor:pointer; border-radius:16px;
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.95); box-shadow:inset 0 1px 0 #fff, 0 4px 12px -8px rgba(44,52,120,.3);
  transition:transform .15s, box-shadow .15s; }
.wallet-option:hover, .wallet-option:focus-visible{ transform:translateY(-1px); box-shadow:inset 0 1px 0 #fff, 0 10px 20px -10px rgba(109,92,255,.5); }
.wallet-option[disabled]{ opacity:.55; cursor:wait; }
.wallet-icon{ width:44px; height:44px; border-radius:12px; overflow:hidden; display:grid; place-items:center; background:#fff; border:1px solid var(--line);
  font-family:var(--f-display); font-weight:700; color:var(--violet); }
.wallet-icon img{ width:100%; height:100%; object-fit:contain; }
.wallet-copy{ min-width:0; }
.wallet-name{ display:block; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wallet-rdns{ display:block; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--f-mono); }
.wallet-connect-label{ font-size:12px; font-weight:700; color:var(--violet); letter-spacing:.06em; }
.wallet-empty{ padding:22px 18px; text-align:center; color:var(--muted); border-radius:16px; border:1.5px dashed rgba(27,36,64,.14); }
.wallet-status{ min-height:22px; margin:6px 0 0; color:#059669; font-size:13.5px; }
.wallet-status.error{ color:#e11d48; }

.toast{ position:fixed; bottom:24px; left:50%; z-index:1100; transform:translate(-50%,20px); opacity:0; pointer-events:none;
  max-width:min(92vw,520px); text-align:center; font-size:14px; font-weight:600; color:var(--ink); padding:13px 22px; border-radius:999px;
  background:rgba(255,255,255,.85); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid #fff; box-shadow:var(--glass-shadow); transition:opacity .2s, transform .2s; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:24px; }
  .hero-visual{ min-height:0; justify-content:center; padding:10px 0 20px; width:100%; max-width:520px; margin:0 auto; }
  .mascot-stage{ width:min(420px,100%); }
  .sec-split{ grid-template-columns:1fr 280px; gap:24px; }
  .loop-grid, .vault-flow{ grid-template-columns:1fr 1fr; }
  .vault-step:nth-child(2)::after{ display:none; }
  .map-legend{ grid-template-columns:1fr 1fr; }
  .statsheet{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .nav-inner{ grid-template-columns:auto 1fr; border-radius:26px; }
  .nav-toggle{ display:inline-block; }
  .nav-right{ justify-self:end; }
  #wallet-addr.visible{ display:none; }
  .nav-menu{
    position:absolute; left:16px; right:16px; top:calc(100% + 8px);
    flex-direction:column; gap:2px; padding:10px; border-radius:22px;
    background:rgba(255,255,255,.96); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    border:1px solid #fff; box-shadow:var(--glass-shadow);
    opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s, transform .18s;
  }
  .nav-menu.open{ opacity:1; transform:none; pointer-events:auto; }
  .nav-menu a{ padding:12px 14px; font-size:16px; }
  header.nav{ position:fixed; }
  .nav-inner{ position:relative; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .eligibility-grid, .htp-steps{ grid-template-columns:1fr; }
  section{ padding:72px 0; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:0 18px; }
  header.nav{ padding:10px 10px 0; }
  .nav-inner{ padding:8px 8px 8px 12px; gap:8px; min-height:58px; }
  .brand-word{ font-size:16px; } .brand-mark{ width:38px; height:38px; }
  .nav-right .btn-sm{ --h:36px; padding:0 12px; font-size:12.5px; }
  #stake-btn-nav.is-visible{ display:none; }
  .hero{ padding-top:108px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .hero-facts{ gap:18px; }
  .mascot-stage{ aspect-ratio:1/1; border-radius:30px; }
  .agent-preview{ position:relative; left:auto; bottom:auto; width:100%; margin-top:-40px; }
  .agent-preview .ap-status{ white-space:normal; }
  .hero-visual{ flex-direction:column; align-items:stretch; }
  .mini-a{ top:12px; left:10px; } .mini-b{ top:12px; right:10px; } .mini-c{ display:none; }
  .mini{ padding:8px 10px; gap:8px; } .mini-ico{ width:28px; height:28px; font-size:14px; }
  .mascot-banner{ grid-template-columns:1fr; }
  .mb-art{ order:-1; min-height:200px; }
  .mb-art::before{ display:none; }
  .mb-copy{ padding:24px 20px; }
  .sec-split{ grid-template-columns:1fr; }
  .orb-card{ max-width:320px; width:100%; margin:0 auto; }
  .cta-card{ flex-wrap:wrap; }
  .cta-walker{ width:72px; height:72px; }
  .skyline{ height:200px; }
  .loop-grid, .vault-flow, .map-legend, .gallery-grid, .factor-list{ grid-template-columns:1fr; }
  .vault-step:not(:last-child)::after{ display:none; }
  .map-scroll img{ height:300px; }
  .archetype{ flex-direction:column; gap:10px; }
  .modal-panel{ padding:24px 20px; }
  .modal-overlay{ align-items:flex-end; padding:10px; }
  .modal-actions .btn{ flex:1; }
  .cta-card .btn{ width:100%; }
  .footer-card{ padding:24px 20px; }
}
@media (max-width:380px){
  .brand-word{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  html{ scroll-behavior:auto; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:rgba(255,255,255,.92); }
}