/* xCLOUDE.ai brand pieces (John, 2026-10-05): cloud-jeans circle as the corner menu button,
   a big cloud circle in a page's white space, and a row of medium denim navigation circles. */

/* Corner: the cloud circle replaces the "x" square in the menu button */
.xc-corner{width:38px;height:38px;border-radius:50%;display:block;box-shadow:0 1px 4px rgba(0,0,0,.22)}

/* Center: the cloud circle inside a transparent ring slightly bigger than the logo */
.xc-hero{display:flex;align-items:center;justify-content:center;width:150px;height:150px;border-radius:50%;
  border:1.5px solid rgba(26,58,107,.16);background:rgba(234,240,248,.35);margin:0 auto 6px}
.xc-hero img{width:128px;height:128px;border-radius:50%;display:block;box-shadow:0 6px 22px rgba(26,58,107,.22)}
@media (max-width:640px){.xc-hero{width:118px;height:118px}.xc-hero img{width:100px;height:100px}}

/* Bottom row: medium denim circles, evenly spaced, centered as a group */
.xc-nav{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,2.2vw,22px);flex-wrap:nowrap;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:transparent;flex:0 0 auto}
.xc-dot{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:#374151;min-width:0}
.xc-c{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#2c4a7c url('/brand/denim-tile.webp') center/cover;color:#EEE8E2;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),inset 0 -6px 12px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2);
  transition:transform .15s ease}
.xc-c svg{width:24px;height:24px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.xc-c img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block} /* John's own circle art fills the whole disc */
.xc-c.xc-raw{background:none;box-shadow:none;overflow:visible} .xc-c.xc-raw img{border-radius:0;object-fit:contain;transform:scale(1.12)} /* the frayed patch keeps its ragged edge */
.xc-dot.on .xc-c.xc-raw{box-shadow:none}
.xc-l{font:500 11px/1.2 'DM Sans',-apple-system,sans-serif;letter-spacing:.02em;white-space:nowrap}
.xc-dot:hover .xc-c,.xc-dot:focus-visible .xc-c{transform:translateY(-2px)}
.xc-dot:focus-visible{outline:2px solid #4A7FD4;outline-offset:3px;border-radius:12px}
.xc-dot.on .xc-c{box-shadow:inset 0 0 0 2px #E8B4C0,0 2px 8px rgba(0,0,0,.25)}
.xc-dot.on .xc-l{color:#1A3A6B;font-weight:700}
.xc-dot.soon{opacity:.45;cursor:default}
@media (max-width:640px){.xc-nav{flex-wrap:wrap;row-gap:10px}.xc-c{width:40px;height:40px}.xc-c svg{width:19px;height:19px}.xc-l{font-size:10px}}
@media (prefers-reduced-motion:reduce){.xc-c{transition:none}}

/* John 2026-10-06: the circles live in the site footer, above the Tools / About columns (like iMe's footer). */
.xc-footer .xc-nav{margin:0 auto 40px}